Focus token
Form controls should use --textfield-focus-color with fallback to --primary.
Validation wrappers can override --textfield-focus-color to danger or success without rewriting each control selector.
border-color: var(--textfield-focus-color, var(--primary));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--textfield-focus-color, var(--primary)) 12%, transparent);Controls covered
Textfield, textarea, select, autocomplete, combobox, date picker, file input, and switch controls should all keep visible focus states.
Select and autocomplete need dark-theme focus overrides because base dark input styles appear later in the cascade.
Review checklist
Check these states after changing any form CSS.
- Click focus and keyboard focus are visible.
- Primary color orange, blue, teal, rose, and purple all change the focus color.
- Dark mode focus does not turn white or gray.
- Invalid and valid states override focus color correctly.