-
Notifications
You must be signed in to change notification settings - Fork 485
Open
Description
Problem
The frontend has no formal colour system. 280+ hardcoded hex values in TSX files, inverted tonal scales, alpha colour RGB mismatches, and three parallel dark mode mechanisms that don't compose.
Solution
- Primitive palette — full 50–950 tonal scales for all colour families in
_primitives.scss - Semantic tokens — CSS custom properties in
_tokens.scssorganised by role (text, surface, icon, stroke, brand, feedback) with light/dark mode variants - TS exports —
common/theme/tokens.tsfor use in inline styles, automatically responds to theme changes
Progress
- PR chore: design system colour tokens, primitives & Storybook #6883 (
chore/design-system-tokens) — primitives, tokens, Storybook stories - Decouple Button from Redux store (dead feature prop) #6866 — Decouple Button from Redux (blocker for Storybook stories)
Acceptance Criteria
- Semantic tokens cover text, surface, icon, stroke, brand, feedback categories
- Primitive scales defined for all colour families (50–950)
- Light and dark mode values defined for all tokens
- Tokens available as both CSS custom properties and TS exports
- No visual regression — existing UI renders identically
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels