T-AM3S-design-language-augmented-web-hex-burndown
State: closed/done · Impact: low · Complexity: medium
augmented_web adopted the layer through an alias bridge, but 977 raw hex
literals across ~74 files bypass it, so those surfaces stay light-stuck.
Burn the literals down to --d-* tokens, then flip the app’s color-mode
preference from 'light' to 'system'.
| Location | Role today |
|---|---|
solutions/augmented/apps/augmented_web/layers/files/pages/editor.vue | Heaviest debt (~49 hexes). |
solutions/augmented/apps/augmented_web/layers/files/components/FileUploader.vue | ~45 hexes. |
solutions/augmented/apps/augmented_web/layers/dashboard/widgets/google-calendar/Renderer.vue | ~37 hexes. |
solutions/augmented/apps/augmented_web/layers/files/components/CollectionDashboard.vue | ~34 hexes; ~25 more files above 10. |
solutions/augmented/apps/augmented_web/nuxt.config.ts | colorMode: { preference: 'light' } held there until the debt flips cleanly. |
Proposed
Section titled “Proposed”Hex literals replaced by --d-* tokens (written directly, not new
aliases), swept hotspot-first with visual parity in light and coherent
rendering in dark at each step. When the count reaches zero, the
color-mode preference flips to 'system'.
Approach
Section titled “Approach”- Rank files by hex count; sweep hotspot-first, one area per commit.
- Map each literal to its semantic token; echarts widget palettes stay out of scope (T-B48W-design-language-dataviz-projection).
- Screenshot pairs per sweep (light parity + dark coherence).
- Flip
colorMode.preferenceto'system'in the final PR.
Files to touch
Section titled “Files to touch”| Location | Kind | Change |
|---|---|---|
solutions/augmented/apps/augmented_web/ | modify | literal → token sweeps |
solutions/augmented/apps/augmented_web/nuxt.config.ts | modify | preference flip at the end |
Acceptance criteria
Section titled “Acceptance criteria”- AC-1: Hex-literal count in the app reaches ~0 (echarts widget
palettes exempt until the data-viz projection). 911 of 964 rewritten;
the 53 left are the deliberately-dark surfaces and the script-side
categorical palettes; the deliberately-dark list now lives in
scripts/guard-raw-palette.tsunder the augmented_web ring. - AC-2: preference is
'system', and every--d-*the app references is asserted to exist intokens.css, so both modes resolve. - AC-3: Screenshot pairs — not captured. The app does not build or
run in this environment:
@nuxt/contentinitialisesbetter-sqlite3, whose native binding Bun does not compile (it is deliberately not a trusted dependency — see the note innuxt.config.ts). Dark mode is verified structurally, not visually. Capture the pairs on a machine that can run the app before treating the dark rendering as confirmed.
Out of scope
Section titled “Out of scope”- echarts/canvas palettes (T-B48W-design-language-dataviz-projection); component restructuring.
Dependencies
Section titled “Dependencies”- The augmented_web adoption PR merges first.
Discovery context
Section titled “Discovery context”- Survey during the augmented_web adoption planning (2026-08-28): 977 hex literals across ~74 files; dark default deferred to protect first-run UX.