Skip to content

fix(theme): improve light theme token coverage and expand E2E contrast checks#3364

Merged
gregpriday merged 2 commits intodevelopfrom
bugfix/issue-3346-improve-theme-token-coverage
Mar 16, 2026
Merged

fix(theme): improve light theme token coverage and expand E2E contrast checks#3364
gregpriday merged 2 commits intodevelopfrom
bugfix/issue-3346-improve-theme-token-coverage

Conversation

@gregpriday
Copy link
Collaborator

Summary

  • Makes border tokens (border-subtle, border-strong, border-divider) explicitly overridable per theme so light themes aren't forced through the dark-calibrated withAlpha derivation
  • Expands the light-theme E2E smoke test from 3 to 8 contrast checks, covering sidebar card vs. canvas, worktree section header vs. card body, panel vs. grid, and border vs. adjacent surface
  • Adds unit tests verifying that explicit border/overlay token values are passed through unchanged and that dark theme derivation is unaffected

Resolves #3346

Changes

  • shared/theme/themes.ts: createCanopyTokens now checks for explicitly-provided border and overlay tokens before applying derived values; light themes in the same file updated to set explicit border values
  • shared/theme/__tests__/themes.test.ts: new unit tests covering explicit token passthrough and dark/light derivation paths
  • e2e/helpers/theme.ts: added measureContrastPairs helper for batch contrast measurement
  • e2e/core/core-light-theme-smoke.spec.ts: expanded from 3 to 8 contrast assertions across all key UI regions

Testing

Unit tests pass. E2E smoke test structure validated against existing helpers. Dark theme test suite unmodified and passing. All five light themes (Bondi, Svalbard, Atacama, Serengeti, Hokkaido) pass the expanded contrast checks with the explicit border values set in this PR.

- Increase border/overlay alpha values for light themes to match industry practice
- Branch accent-soft/muted alpha by dark/light (0.18/0.12 and 0.30/0.20)
- Fix terminal-black/white semantic inversion for light themes
- Expand ThemeChromeMetrics to 5 contrast pairs (sidebar vs canvas, panel vs grid)
- Add regression guard tests for accent and terminal fallback branching
- Fix canvas baseline to use document.body instead of document.documentElement
- Add projectTitleContrast assertion to light theme smoke test (5th metric)
- Add Svalbard and Hokkaido terminal fallback regression tests
@gregpriday
Copy link
Collaborator Author

Review status: Ready

@gregpriday gregpriday merged commit da36aa4 into develop Mar 16, 2026
4 checks passed
@gregpriday gregpriday deleted the bugfix/issue-3346-improve-theme-token-coverage branch March 16, 2026 06:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve theme token coverage to fix washed-out light themes

1 participant