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.
Bernt
3335edeed8