[IAmJSD]

Charts hard-code their hex colors in TypeScript and the stylesheets hold 121 raw hex/rgb colors (on main at b42245c) that bypass the --cudly-* design tokens, so no theme (dark mode, a contrast fix) could reach the charts and nothing stopped new literals. This PR adds the theming path for charts (--cudly-chart-* tokens read through a new lib/chart-theme.ts), swaps CSS literals that already equal a token, and adds guard tests. Nothing renders differently by default.

Refs #699
Partial: the remaining 113 one-off CSS literals and a prefers-color-scheme dark palette are left for follow-ups, because both need palette decisions.

What changed

• frontend/src/styles/base.css: --cudly-chart-* tokens in :root (10-color series palette, cumulative line, 3 per-service layer tokens --cudly-chart-layer-current/-lowest/-upside, axis text, 2 gridline tokens), each with the exact value the charts used before.
• New frontend/src/lib/chart-theme.ts: reads the tokens at render time through chartColor(), chartPalette(), withAlpha(), applyChartDefaults() (sets Chart.js's global text and grid colors) and surfaceColor() (reads --cudly-surface). requireToken() moves here from ladder-timeline-chart.ts, and parseHexColor lives here too. Fallbacks repeat the base.css values for jsdom or a failed CSS load.
• frontend/src/dashboard.ts: the per-service savings chart reads its three layer colors through a new savingsLayerColors() (replacing the SAVINGS_LAYER_COLORS constant, with main's exact values as the token defaults), and the 2px gap between its stacked segments reads --cudly-surface (#ffffff) instead of '#ffffff'. The savings trend line reads --cudly-chart-1. dashboard.test.ts calls savingsLayerColors() where it used the constant.
• frontend/src/modules/savings-history.ts: the single-series chart reads its colors from the tokens: the cumulative line from --cudly-chart-cumulative (#4285f4, fill at 0.1 alpha), the per-period bars from --cudly-chart-2 (#34a853 border, fill at 0.7 alpha), the gridlines from --cudly-chart-grid-faint.
• frontend/src/trends.ts (Inventory > Trends bar chart) reads its series and gridline colors from the tokens.
• None of dashboard.ts, trends.ts, modules/savings-history.ts or ladder-timeline-chart.ts contains a color literal any more.
• CSS literals already equal to a token now use it: modals.css #fff -> --cudly-surface or --cudly-primary-fg, components.css #f8f9fa -> --cudly-surface-muted, charts.css #2563eb -> --cudly-primary.
• New frontend/src/__tests__/chart-theme.test.ts.
• Commits: 3ffc3b7b (chart tokens and theme helpers), the merge with main b8a54fdc, f4e84397 (ceiling lowered to 136, since main removed 3 literals), 21d231b6 (Trends chart tokenized), the merge with main 540b0169, 5ab3ad41 (segment gap reads --cudly-surface) and 4677d7cb (ceiling set to 113, the count on this branch after merging main at b42245c).

Why this approach

• Only refactors that render pixel-identical. The remaining 113 CSS literals are one-off shades (for example #1a73e8 next to the #2563eb primary, many grays). Mapping each one to a token, or choosing a dark palette, changes how the app looks, so it is left as a design decision.
• Tokens are read at render time, not import time, so a later theme switch only needs a re-render.
• The fallbacks keep jsdom tests and a failed stylesheet load working; a test keeps them in sync with base.css.
• A ratchet test (ceiling 113: main's 121 minus this PR's 8 token swaps, i.e. main's count once this lands) makes migration progress stick without blocking unrelated work.

Screenshots

Screenshots were taken before this branch was merged with main; before = main at a14dc8f. After is this branch at that point. Both are headless Chromium at 1440x900 against the repo's mocked e2e API, with the same --cudly-chart-* override (purple palette, red axis text) applied to both builds to show which colors the tokens control.

Before	After

• trend-chart: with the override, main's savings-over-time chart keeps the hard-coded blue line and gray axis; on this branch line, fill and axis labels follow the tokens.

Verification

Run on this branch's head 4677d7cb:

• Lint: 0 errors. Typecheck clean, build OK.
• Jest: 4415 passed, 1 skipped.
• New chart-theme.test.ts (13 tests): fallbacks equal base.css and cover every --cudly-chart-* token; series and layer tokens are #rrggbb; a live token wins over the fallback; surfaceColor() follows --cudly-surface and its fallback equals base.css; requireToken throws; withAlpha and applyChartDefaults work; savingsLayerColors() follows an overridden layer token; dashboard.ts, modules/savings-history.ts, ladder-timeline-chart.ts and trends.ts have no color literals; the CSS literal count is at most 113.
• New dashboard.test.ts case: the stacked-segment gap follows a themed --cudly-surface. It fails with the '#ffffff' literal (expected #1f2937, received #ffffff) and passes with the token.
• Playwright (e2e-local.sh): 264 passed.
• Secrets scan clean (planted key flagged); scripts/test-git-secrets-allowlist.sh: 137 PASS, 0 FAIL.
• Merged with main at b42245c; conflicts in frontend/src/dashboard.ts, frontend/src/modules/savings-history.ts and frontend/src/styles/modals.css resolved, see the merge commit 540b0169.

Notes for review

• Done here: the chart theming path (the issue's lib/chart-theme.ts step), exact-match CSS literal swaps and guard tests.
• Left out:
  • The remaining 113 one-off CSS literals (components 43, modals 29, settings 14, responsive 13, tables 8, layout 4, forms 2). Each needs a decision to snap it to an existing token (a visible shift) or add a new token.
  • A @media (prefers-color-scheme: dark) token override. It needs a dark palette and only makes sense after the literal migration, or the UI comes out half dark.
  • docs.css (API docs page).
• Chart palette tokens are named by slot (--cudly-chart-1..10), not by service. Since main's fix(frontend): color the per-service savings chart by layer #1335 dropped the per-service palette, only slots 1 and 2 are drawn; slots 3-10 and chartPalette() are unused outside the tests and can be dropped if a spare series palette is not wanted.
• The CSS literal ceiling is a ratchet: any branch that adds a hex/rgb()/hsl() literal fails it and has to use or add a token (named colors such as white are not counted).
• This PR is meant to land after the other UI PRs, so CSS_LITERAL_CEILING in chart-theme.test.ts is set to 113, the count after this PR's 8 token swaps (main at b42245c has 121), i.e. main's count once this lands.

Overlaps

• The two other open UI PRs merge cleanly with this branch and add no color literals: fix(frontend): partial bulk purchase failure closes the modal, no retry of failed buckets #757 (modals.css) and feat(frontend): wire Azure RI exchange compatible-offerings + execute UI (refs #596) #81 (components.css).

Note for the UI owner

This changes UI code that @cristim owns. IAmJSD reviewed the before/after screenshots and asked for it to be merged; any design point you disagree with can be a follow-up.

🤖 Generated with Claude Code

[coderabbitai]

Caution

Review failed

The pull request is closed.

Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

[IAmJSD]

Independent review (IAmJSD's agent, fresh context, given only the diff, the issue and the PR text): APPROVE 21d231b6ac7904bbc1d69062fefbf217766b173e

Blocking:

• none
  Non-blocking:
• frontend/src/lib/chart-theme.ts:71 and base.css --cudly-chart-3..--cudly-chart-10: main fix(frontend): color the per-service savings chart by layer #1335 removed the per-service palette, so chartPalette() and 8 of the 10 series tokens are now used by nothing except chart-theme.test.ts. Only chart-1 and chart-2 are used. This is dead API and dead tokens left by the merge. Either drop them or document them as a reserved palette.
• frontend/src/tests/chart-theme.test.ts:105: CSS_LITERAL_CEILING is set to exactly the current count (136, re-counted on HEAD and on HEAD merged with current main 51aa5b1). Any in-flight branch that adds one raw color will fail after this lands. That is the ratchet's intent, but it makes merge order matter.
• frontend/src/styles/modals.css:351/:362/:465/:476: .archera-signup-btn and .archera-offer-signup keep literal #1a73e8/#1557b0 backgrounds, while their text color now comes from --cudly-primary-fg. A theme that changes primary-fg could give poor contrast on the fixed blue. This is pixel-identical today.
• frontend/src/lib/chart-theme.ts:80: withAlpha() silently falls back to chart-1 blue for a non-#rrggbb token (for example #abc or rgb()). A themed line would then get a mismatched blue fill. The constraint is documented, and a test checks the defaults only.
• frontend/src/tests/dashboard.test.ts:1767-1781: main's layer-colour assertions now compare against savingsLayerColors() itself. That is as tautological as the old constant comparison and would not catch a swapped token.
  Attacked: Merge: dashboard.ts (I confirmed that main's fix(frontend): color the per-service savings chart by layer #1335 layer design, its Chart.js default legend and the removal of serviceBarColor/darkenHexColor all survive; only the three hex values moved into --cudly-chart-layer-* tokens, with main's exact values) and base.css (main's chore(frontend): low-severity table and CSS hygiene fixes #725 motion tokens kept). Follow-ups: f4e8439 lowers the ratchet 139->136; I re-counted 136 with the test's own regex on HEAD and on HEAD+current main. 21d231b tokenizes main's new trends.ts chart and adds it to the no-literals test. Full jest plus tsc on HEAD merged with current main pass (3927/3928).

[IAmJSD]

Independent review (IAmJSD's agent, fresh context, given only the diff, the issue and the PR text): APPROVE 4677d7cb6dc76dae982db84a3bb869c161bbcf2b

Blocking:

• none
  Non-blocking:
• frontend/src/tests/chart-theme.test.ts:115 and commit 4677d7c subject ("main's count"): the ceiling is 113. That is the count at HEAD, after this PR's 8 swaps (modals 35->29, components 44->43, charts 1->0). It is not the count on main at b42245c, which is 121 by the test's own counter. 113 is the right ceiling, because it equals main after the squash. Only the wording is off, and the squash drops the commit subject, so only the PR body needs fixing (see Body-stale).
• frontend/src/tests/chart-theme.test.ts:24-33: the CSS ratchet counts only hex/rgb()/hsl() literals. Named colors pass it. Main already has at least 10 of them (forms.css:9 background: white, settings.css:340, components.css:146/157/168 color: white, ...), so a new color: white or black still slips past the "no new raw color" guard. The TS guard (line 104) matches only single-quoted hex and rgb(, so it misses "#..." in double quotes or template strings and hsl().
• frontend/src/lib/chart-theme.ts:107: applyChartDefaults mutates the global Chart.defaults, but ladder-timeline.ts never calls it. The ladder chart's axis and grid colors therefore follow a theme only if a dashboard, savings-history or Trends chart rendered first. Today's values are identical to Chart.js 4.5.1's own defaults ('test(server): tighten RI exchange reservation tests; decide audit row for refused reservations #666', 'rgba(0,0,0,0.1)'), so nothing changes now.
• Carried over from the earlier review, still true: withAlpha() quietly falls back to chart-1 blue for a non-#rrggbb token. dashboard.test.ts:2171-2186 compares the layer colors with savingsLayerColors() itself (circular), and only current is pinned to a literal (chart-theme.test.ts:92). lowest and upside rely on the fallback-equals-base.css test. modals.css .archera--signup still uses literal #1a73e8/#1557b0 backgrounds under the --cudly-primary-fg text. Chart tokens 3-10 and chartPalette() are unused (the body now says so).
  Attacked: The merge 540b016 (parents 21d231b and b42245c) differs from main only in the 11 PR files. I read every hunk of git diff origin/main...HEAD; merge-base == origin/main. All of main's newer chart code survives: fix(frontend): dashboard charts have no text alternative and layers differ only by shade #744 summary, table and 2px gap on all three layers, fix(frontend): charts rebuilt on every change; dashboard trend has no stale guard #747 upsertChart, fix(frontend): purchases savings chart uses two y-axes and shadows formatCurrency #749 single-series line/bar, fix(frontend): color the per-service savings chart by layer #1335 layer colors, and feat(frontend): add a Trends sub-tab for the analytics trends endpoint #1317 Trends. No other references to the removed SAVINGS_LAYER_COLORS or SEGMENT_GAP remain. Rendered colors are unchanged: every token value in base.css equals the literal it replaced (#2a78d6/#eb6834/#1baf7a, #1a73e8 and its 0.1 alpha, #4285f4 at 0.1, #34a853 at 0.7, rgba(0,0,0,0.05), surface #ffffff). The CSS swaps map onto tokens with equal values (--cudly-surface and --cudly-primary-fg #ffffff, --cudly-surface-muted #f8f9fa, --cudly-primary #2563eb), and no token is overridden anywhere (no dark mode or data-theme). Chart.defaults values match Chart.js 4.5.1.
  I re-counted CSS literals with the test's regex: HEAD 113, main 121. No ID selectors produced false positives. No color literal is left in any TS file outside lib/chart-theme.ts. fix(frontend): partial bulk purchase failure closes the modal, no retry of failed buckets #757 (1390, e2858b9) and feat(frontend): wire Azure RI exchange compatible-offerings + execute UI (refs #596) #81 (1325, 8ffadd6) are still open, merge-tree clean with HEAD, and add no color literals. Jest in a scratch worktree (chart-theme, dashboard, trends, savings-history, ladder-timeline): 296 passed, 1 skipped.

[IAmJSD]

Local verification at 4677d7cb merged onto current main (23b0cb05; merge-tree 02c60d19; Linux, Node, headless Chromium):

• This branch's own checks passed at this head: lint, typecheck, build, the full jest suite, the full Playwright e2e suite, and the git-secrets checks (see Verification in the PR body).
• The combined tree of every UI PR in this merge wave (tree 02c60d19, main plus 1 PRs) passes npm ci, lint, typecheck, build, jest (1 skipped, 4426 passed, 4427 total), and the full Playwright suite (265 passed).
• CI is green on 4677d7cb (CI Success, Run pre-commit hooks).
• The independent review above approves this exact head.
• Nothing was applied to any cloud.

[IAmJSD]

Marked ready and merged by IAmJSD's agent, at IAmJSD's request (IAmJSD reviewed the before/after screenshots; cristim is traveling), after the independent review and local verification above, all at 4677d7cb.