Skip to content

grade calendar, brain-graph and CoS state colors for the active theme - #4801

Merged
atomantic merged 1 commit into
mainfrom
claim/issue-4760
Aug 22, 2026
Merged

grade calendar, brain-graph and CoS state colors for the active theme#4801
atomantic merged 1 commit into
mainfrom
claim/issue-4760

Conversation

@atomantic

Copy link
Copy Markdown
Owner

Summary

Calendar event chips rendered the Google Calendar subcalendar color verbatim as text over a low-alpha wash of the same color. Google's palette includes several pale entries and the color is external API data, so on the day themes a pale subcalendar landed around 1.1:1 against a white card — invisible. Every site that paints a data-supplied color as text now runs it through the existing chipColors(color, mode) helper (client/src/lib/chipContrast.js), which keeps the hue and moves only the lightness until it clears WCAG AA on the active theme mode.

  • Calendar — Month/Week/Day event chips and timed blocks, through one shared eventChipStyle() in calendar/calendarUtils.js (five call sites, one fallback).
  • Chronotype overlay — zone labels; the amber zone was a live ~2.1:1 AA failure. The band fills stay the raw zone color: they're large tints, and the tint is the signal.
  • Brain graph — type badges. BRAIN_TYPE_HEX is tuned for the near-black canvas but is also rendered on the theme-following tooltip and detail panels.
  • CoS terminal panel — the ASCII art. This is the [ux] Theme-token consistency: broad off-token color remap + semantic purple/slate/indigo tokens #1909 follow-up: thinking's amber sat at ~2.1:1 on a day theme's terminal surface. Every theme's terminal surface is at least as favorable as the reference surface chipContrast grades against, so the AA guarantee carries.

Two follow-on fixes fell out of the same pass:

  • The timed-event titles carried a hardcoded text-white. index.css remaps that with !important on day mode, and author !important beats an inline declaration — so it would have overridden the graded color outright. They now inherit it.
  • The colorless-event fallback was var(--port-accent, #3b82f6). --port-accent is a bare RGB triple, so that resolved to the literal 59 130 246 — not a color — and the browser dropped the declaration, leaving the text inherited rather than accent. It is now rgb(var(--port-accent, 59 130 246)).

Two sites listed on the issue are deliberately untouched, with the reasoning recorded on #4760:

  • songs/ScoreSheet.jsx — its ink is already theme CSS variables (rgb(var(--port-text)), rgb(var(--port-success)), …), not a fixed palette. parseColor can't resolve a var() anyway, so grading would be a no-op.
  • songs/RoundSheetMusic.jsx — the swatch is aria-hidden decoration beside a real checkbox and text label, and it is a legend key for the piano roll, whose canvas background is explicitly non-theme-following. Grading it would desync the legend from what it labels.

meatspace/post/PostCognitiveDrillRunner.jsx (the Stroop stimulus) is untouched, as the issue requires.

Test plan

  • client/src/components/calendar/calendarUtils.test.jseventChipStyle grading per mode, AA against the chip's own backdrop, and the accent-fallback shape (regression guard on the var(--port-accent, #hex) idiom).
  • client/src/components/calendar/calendarEventChips.test.jsx — one suite over Month/Week/Day: the rendered inline color equals chipColors(color, mode).color for the ACTIVE mode and differs from the other mode's (compared via parseColor, since jsdom normalizes inline hex to rgb()), the colorless path falls back to the accent chip, and no element ships a graded inline style alongside an !important theme utility — including a check that the element owning the title text carries no text-white/text-gray-*. Plus the chronotype zone labels, and that the band fill keeps its raw color.
  • client/src/components/cos/TerminalCoSPanel.test.jsx — per-mode grading of the ASCII art, and AA for all seven agent states in both modes.
  • client/src/components/brain/tabs/BrainGraph.test.jsx — per-mode grading of the detail-panel type badge, reached through the existing search → focus → connection path.
  • Bypass probe: re-adding text-white to the DayView title fails the new guard, so it isn't vacuous.
  • cd client && npm test — 729 files / 9315 tests green. npm run lint clean. No server-side changes.

Closes #4760

…theme (#4760)

Calendar event chips painted the Google subcalendar color verbatim as text
over a low-alpha wash of the same color. Google's palette includes several
pale entries and the color is external API data, so on the day themes a pale
subcalendar landed around 1.1:1 against a white card — invisible. Everything
that renders a data-supplied color as TEXT now goes through the existing
`chipColors()` helper, which keeps the hue and moves only the lightness until
it clears WCAG AA on the active theme mode:

- Month/Week/Day event chips and timed blocks, via one shared
  `eventChipStyle()` in `calendar/calendarUtils.js`
- Chronotype zone labels (the amber zone was a live ~2.1:1 AA failure); the
  band fills stay the raw zone color, since the tint is the signal
- Brain-graph type badges, whose `BRAIN_TYPE_HEX` palette is tuned for the
  near-black canvas but is also rendered on theme-following panels
- The CoS terminal panel's ASCII art — the #1909 follow-up, where `thinking`'s
  amber sat at ~2.1:1 on a day theme's terminal surface

Two follow-on fixes fell out of the same pass. The timed-event titles carried
a hardcoded `text-white`, which day mode remaps with `!important` and would
therefore have overridden the graded color outright; they now inherit it. And
the colorless-event fallback was `var(--port-accent, #3b82f6)` — `--port-accent`
is a bare RGB triple, so that resolved to `59 130 246`, not a color, and the
browser dropped the declaration; it is now wrapped in `rgb()`.

Two sites listed on the issue are deliberately untouched: ScoreSheet's ink is
already theme CSS variables, and RoundSheetMusic's swatch is an aria-hidden
legend key for a canvas whose background is explicitly non-theme-following.
@atomantic
atomantic merged commit 66e19d5 into main Aug 22, 2026
7 checks passed
@atomantic
atomantic deleted the claim/issue-4760 branch August 22, 2026 02:01
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.

Apply chipContrast grading to calendar event chips and the other data-colored text sites

1 participant