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>
52 lines
2.1 KiB
Markdown
52 lines
2.1 KiB
Markdown
# Tables
|
|
|
|
Dense data display. Default to flat (no zebra striping) with hairline row borders. Reference: `kdctracker/admin.html` (`.card` data tables), `kdcdocs/public/styles.css` (`.kdc-table-head`, `.kdc-row`).
|
|
|
|
## Anatomy
|
|
|
|
See `anatomy.svg`. Header row · grouped header rows (optional) · data rows · footer summary (optional).
|
|
|
|
## Sizing
|
|
|
|
| Density | Row height | Cell padding |
|
|
|---------|------------|--------------|
|
|
| `compact` | 36px | `6px 12px` |
|
|
| `default` | 44px | `10px 16px` |
|
|
| `comfortable` | 56px | `14px 20px` |
|
|
|
|
Drive density with `[data-density="compact|default|comfortable"]` (per the kdcmapper convention).
|
|
|
|
## Styling
|
|
|
|
- Header: `text.muted` `caption` uppercase, 600 weight, `surface.subtle` background.
|
|
- Cell text: `bodyM`, `text.default`. Numerics use `tabular-nums` (`.tnum` utility).
|
|
- Row separator: 1px `border.subtle` bottom border. No vertical lines.
|
|
- Hover row: `surface.subtle`, `120ms` transition.
|
|
- Selected row: 2px `brand.primary` left border, `brand.primarySoft` background.
|
|
- Sticky header sits below any toolbar; sticky first column gets a 4px `elevation.2` shadow on right edge when scrolled.
|
|
|
|
## Cell types
|
|
|
|
- **Status pill** → `badge.*` variants.
|
|
- **Identifier / code** → `typography.mono` with subtle background `surface.subtle`.
|
|
- **Numeric** → right-aligned, `tabular-nums`.
|
|
- **Action cell** → trailing cell, ghost icon buttons; right-aligned, never wrap.
|
|
|
|
## Tokens used
|
|
|
|
`colors.surface.*`, `colors.border.*`, `typography.bodyM`/`caption`/`mono`, `components.badge.*`.
|
|
|
|
## Accessibility
|
|
|
|
- Use proper `<thead>` / `<tbody>` / `<th scope="col">` / `<th scope="row">`.
|
|
- Sortable columns: button inside `<th>` with `aria-sort="ascending|descending|none"`.
|
|
- Empty state: `role="status"`, single line in `text.muted`.
|
|
- Long tables: pagination or `aria-rowcount` for virtualised lists.
|
|
|
|
## Do / Don't
|
|
|
|
- ✅ Use `compact` density for ≥ 50 rows on screen at once.
|
|
- ✅ Right-align numerics and currencies; left-align text and identifiers.
|
|
- ❌ Don't zebra-stripe — it competes with hover and selection.
|
|
- ❌ Don't wrap action buttons; truncate text instead.
|