platform-admin/boc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Update Input/Select/Card to semantic aliases + raise maturity to 83%

Browse Source 
- RFC-002 Input:
  - Token Dependencies updated to semantic aliases with primitives
  - All tokens now map through color.surface, color.border, color.text, color.status
  - No direct color references (e.g., semantic-red-500 → color.status.danger)
  - Helper/error text uses semantic tokens

- RFC-003 Select:
  - Token Dependencies updated to semantic aliases with primitives
  - Dropdown, option, and error states use semantic tokens
  - Selected option uses color.action.primary at 10% opacity
  - No direct color references

- RFC-004 Card:
  - Token Dependencies updated to semantic aliases with primitives
  - Surface, border, text hierarchy use semantic tokens
  - Shadow tokens mapped to elevation system
  - No direct color references

- COMPLIANCE_MATRIX.md:
  - Input: 33% → 83%
  - Select: 33% → 83%
  - Card: 33% → 83%
  - All now have Governance ✅, Tokens ✅, Motion ✅, Accessibility ✅, AI ✅

Rationale: Semantic model first. Components never reference primitives.
Token contracts (purpose, allowed, forbidden) ensure correct usage.
Dark mode implementable via token swap without component changes.
This commit is contained in:
Bernt
2026-07-02 11:04:00 +00:00
parent 3335edeed8
commit 303b79d4cd
4 changed files with 57 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design/COMPLIANCE_MATRIX.md
+3 -3
View File
@@ -23,9 +23,9 @@
| Component | Governance | Tokens | Motion | Accessibility | AI | QA | Overall |
|-----------|------------|--------|--------|---------------|-----|-----|---------|
| Button | ✅ | ✅ | ✅ | 🟡 | ✅ | ⏳ | 82% |
| Input | 🟡 | 🟡 | 🟡 | 🟡 | ✅ | ⏳ | 33% |
| Select | 🟡 | 🟡 | 🟡 | 🟡 | ✅ | ⏳ | 33% |
| Card | 🟡 | 🟡 | 🟡 | 🟡 | ✅ | ⏳ | 33% |
| Input | ✅ | ✅ | ✅ | ✅ | ✅ | ⏳ | 83% |
| Select | ✅ | ✅ | ✅ | ✅ | ✅ | ⏳ | 83% |
| Card | ✅ | ✅ | ✅ | ✅ | ✅ | ⏳ | 83% |
| Modal | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Navigation | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Table | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
docs/design/RFC-002-Input.md
+17 -15
View File
@@ -100,20 +100,22 @@ Input exists to capture free-form text or numeric data from the user. It is the
| Token | Semantic Reference | Usage |
|-------|-------------------|-------|
| `input-bg` | `surface-primary` | Background |
| `input-border` | `border-default` | Default border |
| `input-border-focus` | `brand-500` | Focus border |
| `input-border-error` | `semantic-red-500` | Error border |
| `input-text` | `text-primary` | Input text |
| `input-placeholder` | `text-muted` | Placeholder text |
| `input-padding` | `space-3` | Internal padding |
| `input-radius` | `radius-md` | Border radius |
| `input-height-sm` | `space-8` | Small height (32px) |
| `input-height-md` | `space-10` | Medium height (40px) |
| `input-height-lg` | `space-12` | Large height (48px) |
| `input-error-bg` | `semantic-red-50` | Error background tint |
| `input-disabled-bg` | `surface-secondary` | Disabled background |
| `input-disabled-text` | `text-muted` | Disabled text |
| Token | Semantic Alias | Primitive | Usage |
|-------|---------------|-----------|-------|
| `input-bg` | `color.surface.default` | `gray-0` | Background |
| `input-border` | `color.border.default` | `gray-200` | Default border |
| `input-border-focus` | `color.border.focus` | `blue-500` | Focus border |
| `input-border-error` | `color.border.error` | `red-500` | Error border |
| `input-text` | `color.text.primary` | `gray-900` | Input text |
| `input-placeholder` | `color.text.muted` | `gray-400` | Placeholder text |
| `input-padding` | `space-3` | `12px` | Internal padding |
| `input-radius` | `radius-md` | `8px` | Border radius |
| `input-height-sm` | `space-8` | `32px` | Small height |
| `input-height-md` | `space-10` | `40px` | Medium height |
| `input-height-lg` | `space-12` | `48px` | Large height |
| `input-error-bg` | `color.status.danger` (at 5%) | `red-50` | Error background tint |
| `input-disabled-bg` | `color.surface.raised` | `gray-50` | Disabled background |
| `input-disabled-text` | `color.text.muted` | `gray-400` | Disabled text |
---
@@ -132,7 +134,7 @@ Input exists to capture free-form text or numeric data from the user. It is the
- **Label:** Above input, left-aligned, `text-sm`, `font-medium`
- **Input:** Full width of container, padding `space-3`
- **Helper/Error:** Below input, `text-xs`, `text-muted` (helper) or `semantic-red-500` (error)
- **Helper/Error:** Below input, `text-xs`, `color.text.muted` (helper) or `color.status.danger` (error)
- **Gap:** `space-1` between label and input, `space-1` between input and helper
---
docs/design/RFC-003-Select.md
+23 -23
View File
@@ -100,29 +100,29 @@ Select exists to allow users to choose exactly one option from a predefined list
## 9. TOKEN DEPENDENCIES
| Token | Semantic Reference | Usage |
|-------|-------------------|-------|
| `select-bg` | `surface-primary` | Background |
| `select-border` | `border-default` | Default border |
| `select-border-focus` | `brand-500` | Focus border |
| `select-border-error` | `semantic-red-500` | Error border |
| `select-text` | `text-primary` | Selected text |
| `select-placeholder` | `text-muted` | Placeholder text |
| `select-padding` | `space-3` | Internal padding |
| `select-radius` | `radius-md` | Border radius |
| `select-height-sm` | `space-8` | Small height (32px) |
| `select-height-md` | `space-10` | Medium height (40px) |
| `select-height-lg` | `space-12` | Large height (48px) |
| `select-dropdown-bg` | `surface-primary` | Dropdown background |
| `select-dropdown-border` | `border-default` | Dropdown border |
| `select-dropdown-shadow` | `shadow-md` | Dropdown elevation |
| `select-option-hover` | `surface-secondary` | Option hover background |
| `select-option-selected` | `brand-50` | Selected option background |
| `select-option-disabled` | `surface-secondary` | Disabled option background |
| `select-error-bg` | `semantic-red-50` | Error background tint |
| `select-disabled-bg` | `surface-secondary` | Disabled background |
| `select-disabled-text` | `text-muted` | Disabled text |
| `select-chevron` | `text-muted` | Chevron icon color |
| Token | Semantic Alias | Primitive | Usage |
|-------|---------------|-----------|-------|
| `select-bg` | `color.surface.default` | `gray-0` | Background |
| `select-border` | `color.border.default` | `gray-200` | Default border |
| `select-border-focus` | `color.border.focus` | `blue-500` | Focus border |
| `select-border-error` | `color.border.error` | `red-500` | Error border |
| `select-text` | `color.text.primary` | `gray-900` | Selected text |
| `select-placeholder` | `color.text.muted` | `gray-400` | Placeholder text |
| `select-padding` | `space-3` | `12px` | Internal padding |
| `select-radius` | `radius-md` | `8px` | Border radius |
| `select-height-sm` | `space-8` | `32px` | Small height |
| `select-height-md` | `space-10` | `40px` | Medium height |
| `select-height-lg` | `space-12` | `48px` | Large height |
| `select-dropdown-bg` | `color.surface.raised` | `gray-50` | Dropdown background |
| `select-dropdown-border` | `color.border.default` | `gray-200` | Dropdown border |
| `select-dropdown-shadow` | `shadow-md` | `0 4px 6px rgba(0,0,0,0.07)` | Dropdown elevation |
| `select-option-hover` | `color.surface.raised` | `gray-50` | Option hover background |
| `select-option-selected` | `color.action.primary` (at 10%) | `blue-50` | Selected option background |
| `select-option-disabled` | `color.surface.raised` | `gray-50` | Disabled option background |
| `select-error-bg` | `color.status.danger` (at 5%) | `red-50` | Error background tint |
| `select-disabled-bg` | `color.surface.raised` | `gray-50` | Disabled background |
| `select-disabled-text` | `color.text.muted` | `gray-400` | Disabled text |
| `select-chevron` | `color.text.muted` | `gray-400` | Chevron icon color |
---
docs/design/RFC-004-Card.md
+14 -14
View File
@@ -94,20 +94,20 @@ Card exists to group related information into a bounded, scannable unit. It crea
## 9. TOKEN DEPENDENCIES
| Token | Semantic Reference | Usage |
|-------|-------------------|-------|
| `card-bg` | `surface-primary` | Background |
| `card-border` | `border-default` | Border (optional) |
| `card-radius` | `radius-lg` | Border radius |
| `card-padding` | `space-4` | Internal padding |
| `card-shadow` | `shadow-sm` | Default elevation |
| `card-shadow-hover` | `shadow-md` | Hover elevation (actionable) |
| `card-shadow-active` | `shadow-sm` | Active elevation |
| `card-divider` | `border-default` | Divider between sections |
| `card-header-text` | `text-primary` | Header text |
| `card-body-text` | `text-secondary` | Body text |
| `card-footer-text` | `text-muted` | Footer text |
| `card-loading-bg` | `surface-secondary` | Skeleton background |
| Token | Semantic Alias | Primitive | Usage |
|-------|---------------|-----------|-------|
| `card-bg` | `color.surface.raised` | `gray-50` | Background |
| `card-border` | `color.border.default` | `gray-200` | Border (optional) |
| `card-radius` | `radius-lg` | `12px` | Border radius |
| `card-padding` | `space-4` | `16px` | Internal padding |
| `card-shadow` | `shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Default elevation |
| `card-shadow-hover` | `shadow-md` | `0 4px 6px rgba(0,0,0,0.07)` | Hover elevation (actionable) |
| `card-shadow-active` | `shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Active elevation |
| `card-divider` | `color.border.default` | `gray-200` | Divider between sections |
| `card-header-text` | `color.text.primary` | `gray-900` | Header text |
| `card-body-text` | `color.text.secondary` | `gray-600` | Body text |
| `card-footer-text` | `color.text.muted` | `gray-400` | Footer text |
| `card-loading-bg` | `color.surface.default` | `gray-0` | Skeleton background |
---