Summary
The colorway picker (default + 7 named colors) currently only retints the active framework's accent token (--ui-accent). Under Material/Fluent/Primer the accent only shows up on the topbar and primary buttons; the rest of the page stays in the framework's neutral grays.
Goal
A colorway should noticeably permeate the surface palette \u2014 panes, hover states, focus rings, banners, and selected-row backgrounds \u2014 so picking 'blue' actually feels blue throughout, not just on the topbar.
Per-framework approach
- Material: derive the full M3 tonal palette from
--ui-accent (primary, primary-container, on-primary, on-primary-container, secondary-container, surface-tint) instead of only mapping primary. Optionally use @material/material-color-utilities to compute the tones at runtime.
- Fluent: derive Fluent's full brand ramp (--colorBrandBackground, BrandStroke1, BrandForeground1, plus hover/pressed/selected variants) from --ui-accent. Fluent's design system supports a brand color override at provideFluentDesignSystem time.
- Primer: tint surfaces with color-mix from --ui-accent for selected ref-items, focus rings, banners, and the topbar bottom-border. Primer's design tokens use --color-accent-fg / --color-accent-emphasis which we should map.
Design questions
- Should the kid (native) theme also pick up colorways more aggressively? Today the topbar already takes the accent.
- Should there be a 'subtle' vs 'bold' colorway mode toggle for users who want only the accent vs the full surface tint?
- Add a few more colorways aimed at kids (rainbow, pastel, neon)?
Acceptance
- Picking a non-default colorway visibly changes surface tints (panes, banners, selected states), not just the topbar + primary button.
- Default colorway under each framework still uses the framework's own brand color (Material purple, Fluent blue, Primer green).
- Light + dark variants both look intentional.
- AAA contrast preserved for all foreground/background pairs.
Summary
The colorway picker (default + 7 named colors) currently only retints the active framework's accent token (
--ui-accent). Under Material/Fluent/Primer the accent only shows up on the topbar and primary buttons; the rest of the page stays in the framework's neutral grays.Goal
A colorway should noticeably permeate the surface palette \u2014 panes, hover states, focus rings, banners, and selected-row backgrounds \u2014 so picking 'blue' actually feels blue throughout, not just on the topbar.
Per-framework approach
--ui-accent(primary, primary-container, on-primary, on-primary-container, secondary-container, surface-tint) instead of only mapping primary. Optionally use @material/material-color-utilities to compute the tones at runtime.Design questions
Acceptance