Skip to content

Document the focus ring Sass variables #2306

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
cwickham wants to merge 3 commits into
base: prerelease
Choose a base branch
from
Draft

Document the focus ring Sass variables #2306

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7859dd5
Document the focus ring Sass variables
cwickham Oct 22, 2026
23ce31b
Say that at least one focus ring tone reaches 3:1
cwickham Oct 22, 2026
c4dd8f1
Trim the focus ring docs to the variables
cwickham Oct 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions docs/output-formats/_theme-variables.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,30 @@ You can also customize the colors of the button which appears for `code-copy: tr
| | | `important` | `$red` | |
+--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+

### Focus Ring

{{< prerelease-callout 1.11 >}}

When a reader moves through a page with the keyboard, Quarto shows a ring around the element that has focus. The ring has two parts: a CSS `outline`, and an inner band drawn with `box-shadow` that fills the gap between the outline and the element.

You can change the ring with these variables:

| Variable | Notes |
|----|----|
| `$focus-ring-outer-color` | The color of the outline. Defaults to a dark shade of `$primary`, adjusted to have a contrast of 9:1 with `$focus-ring-inner-color`. |
| `$focus-ring-inner-color` | The color of the inner band. Defaults to `$white`. |
| `$focus-ring-outline-width` | The width of the outline. Defaults to `2px`. |
| `$focus-ring-outline-offset` | The width of the gap between the outline and the element, which the inner band fills. Defaults to `2px`. |

To remove the inner band, set the `--quarto-focus-ring-shadow` CSS property to `none`:

``` scss
/*-- scss:rules --*/
:root {
--quarto-focus-ring-shadow: none;
}
```

::: {.content-hidden unless-meta="is_dashboards"}

### Value Boxes
Expand Down
Loading