Component classes defined against tokens, not raw hex/px values
var(--color-signal-orange)
path
provides
contains
theme/package.json
Appends `sheet` build script
"sheet"
from
to
via
pattern
theme/src/sheet.html
theme/dist/rams.css
<link rel=stylesheet>
rams.css
from
to
via
pattern
theme/src/components.css
theme/src/tokens.css
var(--color-*) / var(--spacing-*) references only
var(--
Create the Rams component sheet — buttons, cards, chips/badges, the maneuver banner, inputs, checkboxes/toggles, and the typography specimen — all styled exclusively from the token package. This is the artifact DSGN-01's audit sweep (plan 04) measures and the gallery (plan 04) screenshots.
Purpose: D-03 — "the sheet itself proves token completeness." Scope is strictly mockup-derived (D-11: no invented components).
Output: theme/src/sheet.html + theme/src/components.css + a sheet npm script.
Checkbox 18×18 2px matte-black border with 8×8 signal-orange fill when checked; two-way horizontal toggle [ OFF | ON ] with inverted active box.
Typography specimen: every scale entry (display-lg → label-sm + telemetry-num).
task 1: components.css — component layer built only from tokens
theme/src/components.css
1. Create `theme/src/components.css`. Use Tailwind v4 `@layer components { … }` with utility classes constructed from `var(--color-*)` / `var(--spacing-*)` / `--type-*` references ONLY. NO raw hex values, NO raw px paddings/margins/font-sizes, NO border-radius other than 0 (D-11 fidelity hard requirement; plan 04's audit script flags any violation).
2. Component classes to define (names kebab-case): `.btn-primary`, `.btn-secondary`, `.input-field`, `.card`, `.card-header`, `.chip-traffic`, `.chip-hazard`, `.chip-safe`, `.maneuver-banner`, `.maneuver-arrow`, `.checkbox`, `.toggle`, plus typography helpers `.text-display-lg` through `.text-label-sm` and `.text-telemetry-num` consuming the `--type-*` custom properties.
3. Import it from `theme/src/theme.css` after tokens: add `@import "components.css";` as the last import so build picks it up.
4. Border geometry: 1px and 2px solid borders use `var(--color-matte-black)`; focus rings replace border color with `var(--color-signal-orange)` at 3px — zero blur/glow/transition.
grep -cE "var\\(--" theme/src/components.css | awk '$1>=15{exit 0}{exit 1}'; ! grep -E "#[0-9A-Fa-f]{3,6}\b" theme/src/components.css || echo FAIL-off-token-hex; ! grep -E "border-radius:\s*(?!0)" theme/src/components.css -P || echo FAIL-radius
components.css defines all 14 component/typography classes using only token references; zero hex literals; zero non-zero border-radius (grep-verifiable).
task 2: sheet.html — rendered component sheet page
theme/src/sheet.html, theme/package.json
1. Create `theme/src/sheet.html`: a minimal static demo page. ``. Sections in order, one per mockup-derived component family (D-11): Typography specimen → Buttons → Inputs → Chips/Badges → Telemetry card → Maneuver banner → Checkboxes & Toggle. Each section gets a label-sm uppercase section header with a technical reference badge (matching card-header pattern).
2. Use plain semantic HTML + the component classes (no Tailwind utility soup in the markup — the classes are the API later phases copy).
3. Representative content mirrors the mockups without inventing new components: e.g., chip texts "CONGESTION", "CRASH / BLOCK", "POLICE RADAR" exactly as seen in `telegram_live_traffic_feed/code.html`; card reference badge "SEC-04 // SPEED".
4. Add `"sheet": "tailwindcss -i ./src/sheet.css -o ./dist/sheet.css --minify || true && open ./src/sheet.html"` is WRONG shape — instead append to `theme/package.json` scripts: `"sheet": "npm run build && echo 'open theme/src/sheet.html in browser ( Consumes theme/dist/rams.css )'"`. Simplest correct wiring: sheet.html links the built dist/rams.css directly, so `npm run build` then opening sheet.html works with no extra CLI step.
npm run build --workspace theme >/dev/null && test -f theme/src/sheet.html && grep -q "dist/rams.css" theme/src/sheet.html && grep -c "chip-\\|btn-\\|card\\|maneuver\\|checkbox\\|toggle" theme/src/sheet.html | awk '$1>=7{exit 0}{exit 1}'
sheet.html renders all 7 component families using only components.css classes; page loads dist/rams.css; no Google Fonts CDN link present in sheet.html (D-16); npm run build passes after components.css import.
<threat_model>
Trust Boundaries
Boundary
Description
none cross-user
Static sheet, dev-only artifact; no network input
</threat_model>
- `npm run build --workspace theme` → 0 exit
- `grep -rn "fonts.googleapis" theme/src/` → empty
- `grep -cE "var\\(--" theme/src/components.css` ≥ 15
- visual: open `theme/src/sheet.html` in a browser — components visibly mirror mockup styling (font, colors, sharp corners)
<success_criteria>
Component sheet renders every mockup-derived component family with style sourced 100% from token variables. It is the demonstrable artifact for DSGN-01's "every rendered component derives from tokens" and the input target for the audit sweep (plan 04).
</success_criteria>
After completion, create `.planning/phases/01-design-tokens-rams-foundation/01-02-SUMMARY.md`
