Bernt
13fea4a301
- BRAND_PALETTE.md (v1.0, DRAFT): - Token-specifikation (not a color list) - Semantic brand tokens: primary, secondary, tertiary - 12-step scale (50-950) with defined purposes - Usage rules: where brand colors are used (logo, buttons, focus, links) - Usage rules: where brand colors are NOT used (status, data viz, maps) - Dark mode strategy: shift lighter in dark mode - Contrast requirements: WCAG AA 4.5:1 for text, 3:1 for large text/focus - Placeholder values: awaiting brand color definition from Erik/Landvex - Token dependencies from components: Button, Input, Select, Link, Loading, Progress - Governance: no new brand colors without Architecture Review - GRID_ELEVATION.md (v1.0, DRAFT): - Spacing scale: 13 primitive tokens (space-0 to space-12) - Semantic spacing: gap-xs to gap-xl, padding/margin tokens - Grid system: 12-column, responsive (4/8/12 columns) - Common layouts: full, two-column, three-column, four-column, sidebar, asymmetric - Border radius: 6 tokens (none to full) with component mapping - Elevation system: 5 shadow levels + 8 z-index levels - Component elevation mapping: resting, hover, active states - Responsive breakpoints: xs to 2xl (Tailwind-compatible) - Density principles: compact/default/comfortable (75%/100%/125%) - Z-index scale: 8 levels with rules - Token dependencies from components: Card, Button, Input, Select, Modal, Table, Tag, Page, Section - COMPLIANCE_MATRIX.md: Brand Palette 40%, Grid & Elevation 60% Rationale: Brand Palette driven by component token usage, not vice versa. Grid & Elevation validated against Card and other components. Foundations now complete enough to raise component maturity.
104 lines
3.4 KiB
Markdown
104 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% |
|
|
|
|
---
|
|
|
|
## 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**
|