Paul Roberts
6593bdf689
Extracted real production usage from 8 KDC repos and consolidated the consensus (kdcsurveyadd / kdcvault / kdc_void_planner) into the canonical design.md + tokens. Highlights: - brand.ink #000000 -> #1A1530 (purple-tinted, matches real usage) - brand.canvas #F5F4F0 -> #F7F4ED (warm) - neutral ramp rebuilt around ink (purple-tinted, not cold slate) - semantic palette retuned for warm canvas + soft tints - elevation shadows retinted with brand-ink rgb - new accent.gold (product) and accent.mint (marketing) tokens - real themes/light, themes/dark, themes/high-contrast - fleshed out every component + foundation README - docs/consolidation-2026-05.md captures the full audit + drift inventory Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
50 lines
2.0 KiB
Markdown
50 lines
2.0 KiB
Markdown
# Inputs
|
|
|
|
Text inputs, textareas, selects. Single visual treatment, semantic states. Reference: `kdcvault/frontend/src/components/ui/input.tsx` and `.kdc-input` / `.kdc-input-underline` utilities in `kdcsurveyadd/app/globals.css`.
|
|
|
|
## Anatomy
|
|
|
|
See `anatomy.svg`. Label · input shell · helper / error text. Label sits above the input; helper text below in `text.muted` `bodyS`.
|
|
|
|
## Variants
|
|
|
|
| Token | Use | Background | Border |
|
|
|-------|-----|------------|--------|
|
|
| `input.default` | Standard field | `surface.background` | `border.default` (1px) |
|
|
| `input.filled` | High-density forms | `surface.subtle` | none |
|
|
| `input.underline` | Marketing / minimal forms | transparent | bottom 1px `border.default` |
|
|
|
|
## Sizes
|
|
|
|
| Size | Height | Padding |
|
|
|------|--------|---------|
|
|
| `sm` | 32px | `6px 10px` |
|
|
| `md` (default) | 40px | `8px 12px` |
|
|
| `lg` | 48px | `12px 16px` |
|
|
|
|
## States
|
|
|
|
- **Hover** — border `border.default` → `border.strong`, `120ms` transition.
|
|
- **Focus-visible** — apply `elevation.focusRing`, border `brand.primary`.
|
|
- **Disabled** — `opacity: 0.5`, `cursor: not-allowed`, background `surface.subtle`.
|
|
- **Error** — border `semantic.danger`, helper text `semantic.danger`, focus ring `rgba(176,56,47,0.18)`.
|
|
- **Read-only** — background `surface.subtle`, remove border, keep text colour.
|
|
|
|
## Tokens used
|
|
|
|
`components.input.*`, `elevation.focusRing`, `colors.border.*`, `colors.semantic.danger`.
|
|
|
|
## Accessibility
|
|
|
|
- Every input has a programmatically associated `<label>` (visible or `sr-only` only when an adjacent icon supplies meaning).
|
|
- Error messages reference the input via `aria-describedby` and use `role="alert"` on first appearance.
|
|
- Placeholder text is decorative — never the only label.
|
|
- Maintain 4.5:1 contrast on placeholder text (currently `text.muted` `#6B647A`).
|
|
|
|
## Do / Don't
|
|
|
|
- ✅ Show errors *under* the input, not as a tooltip.
|
|
- ✅ Use `tabular-nums` for numeric-only inputs (`.tnum` utility).
|
|
- ❌ Don't use placeholder text as a label.
|
|
- ❌ Don't shrink the height below 32px — it breaks touch targets.
|