diff --git a/docs/design/COMPLIANCE_MATRIX.md b/docs/design/COMPLIANCE_MATRIX.md index 675ef5198..02a70ce37 100644 --- a/docs/design/COMPLIANCE_MATRIX.md +++ b/docs/design/COMPLIANCE_MATRIX.md @@ -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% | diff --git a/docs/design/RFC-002-Input.md b/docs/design/RFC-002-Input.md index 0e953ec7b..06b189147 100644 --- a/docs/design/RFC-002-Input.md +++ b/docs/design/RFC-002-Input.md @@ -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 --- diff --git a/docs/design/RFC-003-Select.md b/docs/design/RFC-003-Select.md index 7a5e43d17..34f0a8eca 100644 --- a/docs/design/RFC-003-Select.md +++ b/docs/design/RFC-003-Select.md @@ -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 | --- diff --git a/docs/design/RFC-004-Card.md b/docs/design/RFC-004-Card.md index 69ad676fe..d924d2f3d 100644 --- a/docs/design/RFC-004-Card.md +++ b/docs/design/RFC-004-Card.md @@ -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 | ---