T-AM3S-design-language-augmented-web-hex-burndown
Status: open/ready · 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).
- AC-2: Dark mode renders coherently on every route; preference is
'system'. - AC-3: Screenshot pairs accompany each sweep PR.
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.