docs: Update Input/Select/Card to semantic aliases + raise maturity to 83%
- 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:
@@ -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
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user