Skip to content

Proposal: 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

Labels

front-endIssue related to the React Front End Dashboard

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions