127 lines
8.7 KiB
Markdown
127 lines
8.7 KiB
Markdown
---
|
||
phase: 01-design-tokens-rams-foundation
|
||
plan: 02
|
||
type: execute
|
||
wave: 2
|
||
depends_on: ["01-01"]
|
||
files_modified:
|
||
- theme/src/sheet.html
|
||
- theme/src/components.css
|
||
- theme/package.json
|
||
- theme/dist/rams.css
|
||
autonomous: true
|
||
requirements: [DSGN-01]
|
||
user_setup: []
|
||
must_haves:
|
||
decisions: [D-03, D-11]
|
||
truths:
|
||
- "A rendered component sheet displays every component type the 4 mockup screens show, styled exclusively by the token package"
|
||
- "The sheet includes the Legibility specimen (typography scale) per D-11"
|
||
- "Building the sheet via Tailwind v4 CLI emits a dist CSS that contains zero off-token values (numbers only from tokens.css)"
|
||
artifacts:
|
||
- path: "theme/src/sheet.html"
|
||
provides: "Component sheet demo page consuming tokens (D-03, D-11)"
|
||
contains: "signal-orange"
|
||
- path: "theme/src/components.css"
|
||
provides: "Component classes defined against tokens, not raw hex/px values"
|
||
contains: "var(--color-signal-orange)"
|
||
- path: "theme/package.json"
|
||
provides: "Appends `sheet` build script"
|
||
contains: "\"sheet\""
|
||
key_links:
|
||
- from: "theme/src/sheet.html"
|
||
to: "theme/dist/rams.css"
|
||
via: "<link rel=stylesheet>"
|
||
pattern: "rams\\.css"
|
||
- from: "theme/src/components.css"
|
||
to: "theme/src/tokens.css"
|
||
via: "var(--color-*) / var(--spacing-*) references only"
|
||
pattern: "var\\(--"
|
||
---
|
||
|
||
<objective>
|
||
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.
|
||
</objective>
|
||
|
||
<read_first>
|
||
@planning/phases/01-design-tokens-rams-foundation/01-CONTEXT.md
|
||
@planning/phases/01-design-tokens-rams-foundation/01-01-SUMMARY.md
|
||
@stitch_minimalist_route_navigator/telemetry_rams/DESIGN.md
|
||
@stitch_minimalist_route_navigator/active_route_guidance/code.html
|
||
@stitch_minimalist_route_navigator/navigate_map_overview/code.html
|
||
@stitch_minimalist_route_navigator/community_incident_reporter/code.html
|
||
@stitch_minimalist_route_navigator/telegram_live_traffic_feed/code.html
|
||
</read_first>
|
||
|
||
<interfaces>
|
||
From plan 01-01:
|
||
- `theme/src/tokens.css` — `@theme` colors (`--color-signal-orange`, `--color-matte-black`, `--color-soft-beige`, `--color-functional-red`, `--color-olive-green`, `--color-chassis-subtle`, `--color-surface-dark`, …), spacing (`--spacing-xs` … `--spacing-2xl`), fonts (`--font-sans` = Geist stack, `--font-display` = Space Grotesk stack).
|
||
- `theme/src/theme.css` — imports tokens + `@font-face` declarations; build target is `theme/dist/rams.css`.
|
||
- Typography scale exists as `:root` custom properties under `--type-display-lg` … `--type-telemetry-num` (compound font/size/weight/line-height/tracking).
|
||
|
||
Rendered mockup components to mirror (D-11 scope, observed across the four code.html screens):
|
||
- Primary action button: bg `signal-orange`, label `matte-black` uppercase label-lg, `2px solid` matte-black border, 0px radius; hover/focus inverts to matte-black bg / signal-orange text (per telemetry_rams/DESIGN.md Components).
|
||
- Secondary action: bg soft-beige, matte-black label, 2px border; hover bg chassis-subtle.
|
||
- Telemetry card: 1px solid matte-black perimeter, soft-beige bg, sharp corners; header plate with label-sm uppercase category + reference badge (`SEC-04 // SPEED`); content in telemetry-num typography.
|
||
- Chips: rectangular blocks — traffic = signal-orange bg / matte-black text; hazard = functional-red bg / white text; safe = olive-green bg / white text; all label-sm.
|
||
- Maneuver banner strip: inverted matte-black container, 32x32 signal-orange arrow (3px stroke), headline-md soft-beige street, Space Grotesk bold distance.
|
||
- Input: soft-beige bg, 2px solid matte-black border; focus = 3px signal-orange border, no glow/blur/animation.
|
||
- 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`).
|
||
</interfaces>
|
||
|
||
<tasks>
|
||
|
||
<task type="auto">
|
||
<name>task 1: components.css — component layer built only from tokens</name>
|
||
<files>theme/src/components.css</files>
|
||
<action>
|
||
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.
|
||
</action>
|
||
<verify><automated>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</automated></verify>
|
||
<done>components.css defines all 14 component/typography classes using only token references; zero hex literals; zero non-zero border-radius (grep-verifiable).</done>
|
||
</task>
|
||
|
||
<task type="auto">
|
||
<name>task 2: sheet.html — rendered component sheet page</name>
|
||
<files>theme/src/sheet.html, theme/package.json</files>
|
||
<action>
|
||
1. Create `theme/src/sheet.html`: a minimal static demo page. `<link rel="stylesheet" href="./dist/rams.css">`. 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.
|
||
</action>
|
||
<verify><automated>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}'</automated></verify>
|
||
<done>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.</done>
|
||
</task>
|
||
|
||
</tasks>
|
||
|
||
<threat_model>
|
||
## Trust Boundaries
|
||
| Boundary | Description |
|
||
|----------|-------------|
|
||
| none cross-user | Static sheet, dev-only artifact; no network input |
|
||
</threat_model>
|
||
|
||
<verification>
|
||
- `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)
|
||
</verification>
|
||
|
||
<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>
|
||
|
||
<output>
|
||
After completion, create `.planning/phases/01-design-tokens-rams-foundation/01-02-SUMMARY.md`
|
||
</output>
|