docs: Semantic Color System v1.0

- SEMANTIC_COLOR_SYSTEM.md (v1.0, DRAFT):
  - Three-layer architecture: Primitive → Semantic → Component Alias
  - Naming convention: color.{category}.{role}
  - Semantic tokens with contracts (purpose, allowed, not allowed):
    - Action colors (primary, secondary, ghost, disabled)
    - Surface colors (default, raised, overlay, inverted)
    - Text colors (primary, secondary, muted, inverted, link)
    - Border colors (default, focus, error, success)
    - Status colors (success, warning, danger, info)
    - Brand colors (primary, secondary)
  - State Matrix: all states for Button, Input, Select, Card with
    background, border, text, icon mappings
  - Component Aliases: button.*, input.*, select.*, card.* mapped
    to semantic tokens
  - Dark Mode: token value swapping without component code changes
  - Validation: component token audit (0 direct color references)

- COMPLIANCE_MATRIX.md: Semantic Color System 70%

Rationale: Semantic model first, not colors. Components never reference
primitives directly. Every token has a contract (purpose, allowed, forbidden).
Dark mode via token swap. State matrix derived from existing components.

This commit is contained in:

Bernt

2026-07-02 10:53:42 +00:00

parent 13fea4a301

commit 3335edeed8

2 changed files with 277 additions and 0 deletions

docs/design/COMPLIANCE_MATRIX.md

View File

@@ -77,6 +77,7 @@
 | Release Definition | 🟡 | 80% |
 | Brand Palette | 🟡 | 40% |
 | Grid & Elevation | 🟡 | 60% |
 | Semantic Color System | 🟡 | 70% |
 ---