Bernt
3335edeed8
- 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.
105 lines
3.4 KiB
Markdown
105 lines
3.4 KiB
Markdown
# COMPLIANCE MATRIX
|
|
|
|
**Component Readiness Tracking**
|
|
|
|
| | |
|
|
|---|---|
|
|
| **Version** | 1.0 |
|
|
| **Status** | DRAFT — Updated as components are specified |
|
|
|
|
---
|
|
|
|
## Legend
|
|
|
|
| Symbol | Meaning |
|
|
|--------|---------|
|
|
| ✅ | Complete |
|
|
| 🟡 | Partial / In Progress |
|
|
| ⏳ | Not Started |
|
|
| ❌ | Not Applicable |
|
|
|
|
## Tier 1 — Canonical Components
|
|
|
|
| Component | Governance | Tokens | Motion | Accessibility | AI | QA | Overall |
|
|
|-----------|------------|--------|--------|---------------|-----|-----|---------|
|
|
| Button | ✅ | ✅ | ✅ | 🟡 | ✅ | ⏳ | 82% |
|
|
| Input | 🟡 | 🟡 | 🟡 | 🟡 | ✅ | ⏳ | 33% |
|
|
| Select | 🟡 | 🟡 | 🟡 | 🟡 | ✅ | ⏳ | 33% |
|
|
| Card | 🟡 | 🟡 | 🟡 | 🟡 | ✅ | ⏳ | 33% |
|
|
| Modal | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Navigation | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Table | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Data Grid | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Search | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Map Panel | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
|
|
## Tier 2 — Derived Components
|
|
|
|
| Component | Governance | Tokens | Motion | Accessibility | AI | QA | Overall |
|
|
|-----------|------------|--------|--------|---------------|-----|-----|---------|
|
|
| Badge | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Alert | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Toast | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Tooltip | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Accordion | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Tabs | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Breadcrumb | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Pagination | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Empty State | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Skeleton | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
|
|
## Tier 3 — Domain Components
|
|
|
|
| Component | Governance | Tokens | Motion | Accessibility | AI | QA | Overall |
|
|
|-----------|------------|--------|--------|---------------|-----|-----|---------|
|
|
| KPI Card | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Map Overlay Panel | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Layer Selector | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Mission Status | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Dataset Card | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Geospatial Inspector | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Asset Summary | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Coordinate Picker | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Timeline Panel | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
|
|
## Foundation Documents
|
|
|
|
| Document | Status | Completeness |
|
|
|----------|--------|--------------|
|
|
| Design Constitution | ✅ | 100% |
|
|
| Token Philosophy | ✅ | 100% |
|
|
| Design Specification | 🟡 | 70% |
|
|
| Component Template | ✅ | 100% |
|
|
| Component Decision Tree | ✅ | 100% |
|
|
| AI Design Principles | ✅ | 100% |
|
|
| Design Anti-Patterns | ✅ | 100% |
|
|
| Glossary | ✅ | 100% |
|
|
| Release Definition | 🟡 | 80% |
|
|
| Brand Palette | 🟡 | 40% |
|
|
| Grid & Elevation | 🟡 | 60% |
|
|
| Semantic Color System | 🟡 | 70% |
|
|
|
|
---
|
|
|
|
## How to Update
|
|
|
|
When a component is specified, update this matrix:
|
|
|
|
1. Mark completed sections as ✅
|
|
2. Calculate overall percentage
|
|
3. Update this file in same PR as component spec
|
|
|
|
---
|
|
|
|
## ÄNDRINGSHISTORIA
|
|
|
|
| Version | Datum | Beskrivning |
|
|
|---------|-------|-------------|
|
|
| 1.0 | 2026-07-02 | Initial compliance matrix with all components and foundation documents |
|
|
|
|
---
|
|
|
|
## STATUS
|
|
|
|
**DRAFT — Updated as work progresses**
|