enhancement
major
minor
defect
critical
major
minor
major
#30000
Design System UI pass, part 1: one selection form; surface-interactive-selected becomes surface-interactive-strong
Continues #29914 (wave 5d). With waves 0–5 on master, the design system package carries every React control. The UI pass now makes TopLogic look and feel good. Part 1 is split into five changes: this ticket (selection), #30227 (tables with depth), #30228 (column alignment), #30229 (group value across columns), #30230 (filter presets).
Problem
- Selected and hover are two almost equal greys; a selected row cannot be told apart without focus or pointer. Tree, navigation, cards, calendar and icon picker each draw "selected" differently.
- The token surface-interactive-selected has two jobs: the selection and the neutral strong fill of progress tracks, skeletons, avatars, pills, field buttons and drop targets.
Solution
- One form for everything selectable: brand tint plus an inset edge at the start (surface-selected, surface-selected-hover, border-selected), in table, tree, sidebar navigation (aria-current), bottom bar, icon picker, calendar and tl-item cards (cards keep ring and check in brand tones). Text, helper text and links on the selection keep 4.5:1 in both modes (new primitives blue-8 and blue-72).
- The neutral strong fill is renamed surface-interactive-strong; its readers keep their grey.
- Select: the keyboard position shows the central focus ring on the strong fill.
- derive computes the selection roles for customer themes; MUI themes feed MUI's selected state into surface-selected.
Migration
Renamed role: --tl-surface-interactive-selected → --tl-surface-interactive-strong (neutral grey, no longer a selection). There is no alias. Stylesheets and MUI themes that drew a selection with the old name read the new selection roles instead:
| = Old = | = New = |
| --tl-surface-interactive-selected (neutral strong fill: track, skeleton, pill, avatar, drop target, field button hover) | --tl-surface-interactive-strong |
| --tl-surface-interactive-selected (selected row, node, item) | --tl-surface-selected, hover --tl-surface-selected-hover, edge --tl-border-selected |
New roles: surface-selected, surface-selected-hover, border-selected. The complete table is in the design system repository, docs/migration/altlast.md.
Visible changes: selected rows, nodes and items are brand-tinted with an edge at the start.