Skip to content

Introduce semantic colour tokens and primitive palette #6904

@talissoncosta

Description

@talissoncosta

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

  1. Primitive palette — full 50–950 tonal scales for all colour families in _primitives.scss
  2. Semantic tokens — CSS custom properties in _tokens.scss organised by role (text, surface, icon, stroke, brand, feedback) with light/dark mode variants
  3. TS exportscommon/theme/tokens.ts for use in inline styles, automatically responds to theme changes

Progress

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

Part of the Design System Audit (#6606) · Epic: #6882

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions