Focus

Focus tokens give every keyboard-focused element the same visible outline.

Use the focus tokens, --nbhd-focus-*, to give your own interactive elements the same keyboard focus outline as the components. Form fields draw a solid outline and everything else draws a dashed one, so use --nbhd-focus-control-outlineStyle for fields.

The outline color, --nbhd-color-focus-outline, changes with the brand. Components read it through the surface, so the outline stays visible on dark sections. In your own CSS, use --nbhd-context-color-focus-outline to get the same switch.

.tile:focus-visible {
  outline: var(--nbhd-focus-outlineWidth) var(--nbhd-focus-outlineStyle)
    var(--nbhd-context-color-focus-outline);
  outline-offset: var(--nbhd-focus-outlineOffset);
}

Properties

Token	CSS Variable	Value	Used for
`color.focus.outline`	`var(--nbhd-color-focus-outline)`	`#42a5f5`	Outline color. Components read it through the surface, so it switches to the inverse color on dark sections.
`focus.outlineWidth`	`var(--nbhd-focus-outlineWidth)`	`2px`	Outline thickness. Points to `border.width.emphasis`.
`focus.outlineStyle`	`var(--nbhd-focus-outlineStyle)`	`dashed`	Outline style for buttons, links, cards, carousels, checkboxes and radios.
`focus.control.outlineStyle`	`var(--nbhd-focus-control-outlineStyle)`	`solid`	Outline style for form fields: input, select, textarea and range.
`focus.outlineOffset`	`var(--nbhd-focus-outlineOffset)`	`2px`	Gap between the element and its outline.
`focus.textDecoration`	`var(--nbhd-focus-textDecoration)`	`underline`	Underline on the text of a focused card or carousel slide.