bytelyst/learning_ai_common_plat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(audit): add Round 3 hardcoded hex elimination findings to DESIGN_SYSTEM_AUDIT.md

Browse Source
This commit is contained in:
saravanakumardb1 2026-03-29 10:40:47 -07:00
parent f808a3c05d
commit 58f9470733
1 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
docs/DESIGN_SYSTEM_AUDIT.md
View File

@ -1104,3 +1104,62 @@ _Principal review: design system maturity assessment, best practices audit, arch
_Rescan 2026-03-28: cross-platform token drift analysis, framework version audit, font loading gaps, and accessibility detail._
_Remediation Round 1 (2026-03-28): generator extended (20 native files), sr-only + prefers-color-scheme + font loading + font wiring + reduced-motion + skip-to-content + aria-labels added to all web apps. Overall 41% → 65%._
_Remediation Round 2 (2026-03-29): @bytelyst/ui wired, hover states, responsive sidebar, light theme, ToastProvider, axe-core a11y, PR templates, token drift CI. Overall 65% → 100%._
_Remediation Round 3 (2026-07-03): Hardcoded hex color elimination across all web apps. Details below._
---
## G.14 Round 3 — Hardcoded Hex Color Elimination
### Scope
Systematic scan of all `.tsx`/`.ts` files in 8 product web apps for hardcoded hex color values (`#RRGGBB`) that should use CSS custom property tokens (`var(--prefix-*)`) instead.
### Methodology
- `grep -rn '#[0-9a-fA-F]{6}'` across all web `src/` dirs, excluding `globals.css`, test files, and `node_modules`
- Each hex value categorized: **convertible** (inline styles, Recharts props) vs **must-stay** (Canvas 2D API, Next.js server metadata)
- New app-specific tokens added to each app's `globals.css` for data-driven colors (error banners, priority levels, category colors, safety levels, etc.)
### Results by Repository
| Repository | Before | After | Converted | Must-Stay | Reason for Must-Stay |
| --------------- | ------- | ------ | --------- | --------- | ------------------------------------------------- |
| **FlowMonk** | 18 | 0 | 18 | 0 | — |
| **JarvisJr** | 7 | 1 | 6 | 1 | `themeColor` in layout metadata (server-rendered) |
| **NoteLett** | 1 | 1 | 0 | 1 | `themeColor` in layout metadata |
| **ChronoMind** | 1 | 0 | 1 | 0 | — |
| **LLM Lab** | 1 | 1 | 0 | 1 | `themeColor` in layout metadata |
| **NomGap** | 90 | 39 | 51 | 39 | 38 Canvas 2D (`ctx.fillStyle`), 1 `themeColor` |
| **LocalMemGPT** | 0 | 0 | 0 | 0 | Already clean |
| **ActionTrail** | 0 | 0 | 0 | 0 | Already clean |
| **Total** | **118** | **42** | **76** | **42** | |
### New Tokens Added
**FlowMonk** (`globals.css`): `--fm-error-bg`, `--fm-error-border`, `--fm-error-text`, `--fm-warning-bg`, `--fm-warning-border`, `--fm-warning-text`, `--fm-priority-critical`, `--fm-priority-high`
**JarvisJr** (`globals.css`): `--jj-agent-coach`, `--jj-agent-lingua`, `--jj-agent-spark`, `--jj-agent-mentor`, `--jj-agent-mirror`, `--jj-agent-orator`
**ChronoMind** (`globals.css`): `--cm-personal`
**NomGap** (`globals.css`): 25 tokens — `--ng-meal-*` (4), `--ng-macro-*` (3), `--ng-diff-*` (5), `--ng-status-*` (4), `--ng-category-*` (5), `--ng-premium`, `--ng-safety-*` (4)
### Acceptable Exceptions (42 remaining)
1. **Canvas 2D API** (38 instances in NomGap `BodyCanvas.tsx` + `ShareCard.tsx`): Canvas `ctx.fillStyle`/`ctx.strokeStyle` requires resolved color strings — `var()` is not supported by the Canvas API. Converting would require `getComputedStyle()` lookups on every frame, degrading animation performance.
2. **Next.js `themeColor` metadata** (3 instances across JarvisJr, NoteLett, LLM Lab): The `metadata.themeColor` export in `layout.tsx` is server-rendered into `<meta name="theme-color">` — CSS custom properties cannot be used in server-side metadata objects.
### Commits
| Repository | Commit | Message |
| ---------- | --------- | -------------------------------------------------------------------------------------------------- |
| FlowMonk | `e78036f` | `fix(tokens): replace all hardcoded hex values with CSS token vars across web app` |
| JarvisJr | `7ecd929` | `fix(tokens): replace hardcoded agent hex colors with CSS token vars` |
| ChronoMind | `ac6edec` | `fix(tokens): replace hardcoded personal category hex with CSS token var` |
| NomGap | `61973e9` | `fix(tokens): replace 52 hardcoded hex values with CSS token vars across web pages and components` |
### Token Adoption Rate (Post Round 3)
**Convertible hex instances eliminated: 76/76 (100%)**
**Remaining hex: 42 — all technically justified (Canvas API + server metadata)**