Skip to content

Document the focus ring Sass variables - #2306

Draft
cwickham wants to merge 3 commits into
prereleasefrom
docs/focus-ring-sass-vars
Draft

cwickham wants to merge 3 commits into
prereleasefrom
docs/focus-ring-sass-vars

Conversation

@cwickham

@cwickham cwickham commented Oct 22, 2026 •

Copy link
Copy Markdown
Member

Preview

Documents the keyboard focus ring from quarto-dev/quarto-cli#15163 (issue quarto-dev/quarto-cli#15139). Keep this PR as a draft until #15163 is merged.

The new "Focus Ring" subsection is in _theme-variables.md, after Callouts. As a result, it shows on the HTML Theming page and on the Dashboards theming page. Like the other theme variable sections, it only lists the options:

  • a short description of the ring: an outline and an inner box-shadow band
  • four new Sass variables: $focus-ring-outer-color, $focus-ring-inner-color, $focus-ring-outline-width, and $focus-ring-outline-offset
  • the --quarto-focus-ring-shadow CSS custom property, which removes the inner band

Guidance on keeping a custom ring accessible (contrast, C40, dark mode) will go in a separate accessibility guide page.

The subsection has a 1.11 prerelease callout.

@github-actions

Copy link
Copy Markdown
Contributor

📝 Preview Deployment

🔍 Full site preview: https://deploy-preview-2306.quarto.org

@github-actions

Copy link
Copy Markdown
Contributor

📝 Preview Deployment

🔍 Full site preview: https://deploy-preview-2306.quarto.org

@github-actions

Copy link
Copy Markdown
Contributor

📝 Preview Deployment

🔍 Full site preview: https://deploy-preview-2306.quarto.org

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant