Refined UI step 1 · tokens and themes #18239

Part of #18237.

Spec docs/design/2026-10-11-refined-ui-redesign.md §3, docs/design/mockups/refined-ui/tokens.css. In progress on the issue-14785 branch.

Scope

• Fold the Refined tokens into design-tokens.css + themes/; Light, Dark, High contrast, Monochrome via data-theme; add contrast and mono to useTheme
• SLM frontend: its own teal scheme and identity bar in every theme (autobot-slm-frontend is effectively untokenised: 6,213 raw palette utilities across 104 of 113 component files (92%), vs 737 var(--token) in 12 #17566)
• Density cascade (bug(theme): layout density never scales spacing, and the ember red/orange palette applies to every theme #18161, GUI consistency: no density token scope and no part contracts, so views hand-roll spacing and reach into primitive internals #17564); retire the ember palette as the default for every theme (bug(theme): layout density never scales spacing, and the ember red/orange palette applies to every theme #18161)
• One aui-theme.css instead of the copy in both apps; token linting (chore(frontend): libs/autobot-ui is unscanned by the stylelint token guard — its contract.css hex is unflagged by accident #14579, chore(frontend): lint raw Tailwind palette classes in .vue templates (color-no-hex blind spot) #14580, Design-system enforcement: guard !important in component <style>, and switch the CSS gate from changed-files to whole-tree #17567); dead main.css (assets/main.css is imported by nothing — 79 lines of live CSS including the RTL overrides and the only .sr-only-focusable definition #17613)

Acceptance Criteria

• All four themes switchable in both apps; the SLM always shows its own scheme
• Mapped issues closed with code evidence

Mapped issues

• Consolidate autobot-frontend's three base design-token sources #14785
• Converge the semantic colour vocabulary across both GUIs and the shared kit #14775
• bug(theme): layout density never scales spacing, and the ember red/orange palette applies to every theme #18161
• GUI consistency: no density token scope and no part contracts, so views hand-roll spacing and reach into primitive internals #17564
• autobot-slm-frontend is effectively untokenised: 6,213 raw palette utilities across 104 of 113 component files (92%), vs 737 var(--token) in 12 #17566
• chore(frontend): libs/autobot-ui is unscanned by the stylelint token guard — its contract.css hex is unflagged by accident #14579
• chore(frontend): lint raw Tailwind palette classes in .vue templates (color-no-hex blind spot) #14580
• Design-system enforcement: guard !important in component <style>, and switch the CSS gate from changed-files to whole-tree #17567
• assets/main.css is imported by nothing — 79 lines of live CSS including the RTL overrides and the only .sr-only-focusable definition #17613

Already under another umbrella, so linked here as blocked-by (parent unchanged): #14785, #14775, #18161, #17564, #17566, #17567.

Generated by Claude Code