Skip to content

feat(site): add colorblind-friendly themes for protan/deuter and tritan#24672

Merged
jaaydenh merged 14 commits into
mainfrom
feat/colorblind-themes
May 4, 2026
Merged

feat(site): add colorblind-friendly themes for protan/deuter and tritan#24672
jaaydenh merged 14 commits into
mainfrom
feat/colorblind-themes

Conversation

@jaaydenh

@jaaydenh jaaydenh commented Apr 23, 2026

Copy link
Copy Markdown
Contributor

This is part 1 to lay the foundation for the theme changes.

Part 2 which adds the UI implementation is in this PR, #24680


Adds four sitewide colorblind-friendly theme palettes alongside the existing
light and dark themes. The palettes retune the red/green and blue/yellow
semantic axes so success/error, warning, and diff additions/deletions
remain distinguishable under the most common color vision deficiencies.

Preference ID Purpose
dark-protan-deuter / light-protan-deuter Protanopia & deuteranopia (red/green). Success and additions shift to sky-blue; destructive and deletions shift to vermilion/orange; warning shifts to fuchsia so warning and destructive states do not collapse onto the same hue.
dark-tritan / light-tritan Tritanopia (blue/yellow). Warning shifts from amber to fuchsia; red/green semantic pair is preserved.

The diff panel and every semantic role (success, error, warning, notice, danger) pick up the new palette automatically because they consume the sitewide CSS variables in site/src/index.css. No backend or database change is required: theme_preference is already a free-form text column.

The existing "dark", "light", and "auto" preferences are unchanged.

This PR ships the palettes and the resolution machinery (CONCRETE_THEMES, resolveThemeName, isConcreteThemeName, and the ThemeProvider/AgentEmbedPage plumbing). It intentionally does not add UI to select the new themes; the follow-up PR #24680 adds a Theme mode dropdown (Sync with system / Single theme) that exposes every concrete theme, including the four added here.

Produced with Coder Agents assistance.

Implementation plan and decision log

Full plan (investigation, file layout, TDD phases, open risks) is attached to the chat that produced this PR.

Key decisions:

  • Sitewide, not agent-scoped. The diff panel already consumes the sitewide theme via CSS variables. Keeping the change at the user appearance layer also fixes red/green accents in alerts, badges, and build states in one change, and matches how comparable products (e.g. GitHub) ship this feature.
  • No backend change. codersdk/users.go already accepts any theme_preference string, and ThemeProvider now has a shared resolver (resolveThemeName) that maps any persisted value to a concrete theme, tolerating unknowns and the legacy "auto" value.
  • Palette provenance. The protan/deuter palette is inspired by CVD-safe blue/orange palettes and tuned within the existing Tailwind color scales; the tritan palette keeps red/green semantics intact and shifts warning to fuchsia. This PR does not claim exact Okabe-Ito or WCAG AA derivation without recorded contrast data.
  • UI deferred. Selecting the new themes is gated on the follow-up PR feat: add theme mode dropdown with sync and single modes #24680 which replaces the flat theme grid with a Theme mode dropdown.

@jaaydenh jaaydenh changed the title feat(site/src/theme): add colorblind-friendly themes for protan/deuter and tritan feat(site/src): add colorblind-friendly themes for protan/deuter and tritan Apr 23, 2026
@jaaydenh jaaydenh force-pushed the feat/colorblind-themes branch from 10c1db5 to 01df266 Compare April 23, 2026 13:14
@jaaydenh jaaydenh changed the title feat(site/src): add colorblind-friendly themes for protan/deuter and tritan feat: add colorblind-friendly themes for protan/deuter and tritan Apr 23, 2026
@jaaydenh jaaydenh changed the title feat: add colorblind-friendly themes for protan/deuter and tritan feat(site): add colorblind-friendly themes for protan/deuter and tritan Apr 23, 2026
@jaaydenh

Copy link
Copy Markdown
Contributor Author

/coder-agents-review

@coder-agents-review coder-agents-review Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Solid architecture. The resolver/registry/CSS-variable test triangle is well-constructed: resolveThemeName always returns a key that exists in the themes registry (proven by the cartesian-product test), and every CSS class block declares the full semantic variable set (proven by cssVariables.test.ts). The ThemePreview component scoping via nested <div className={theme}> is a clean way to give each tile accurate CSS variable colors. The radiogroup wrapper is a real a11y improvement.

1 P1, 2 P2, 8 P3, 4 Nit. 4 P4 findings in the inventory but below the inline threshold.

The P1 is a functional breakage: dark colorblind themes do not activate Tailwind's dark: variant, so tool icons in the Agents chat are invisible (near-black on dark background). The fix is small (add dark class alongside the concrete theme class for dark variants).

The P2 findings are a stale embed comment and an unverified Okabe-Ito palette claim in the code comments.

"If a bug routed to the wrong variant, the assertion would silently accept it." (Hisoka, on the \blight\b regex)

Non-posted findings in inventory: DEREM-12 (P4, extractBlock fragility), DEREM-13 (P4, REQUIRED_VARIABLES coverage gap), DEREM-14 (P4, no embed page test), DEREM-15 (P4, CSS/JS dual representation drift risk, pre-existing).

🤖 This review was automatically generated with Coder Agents.

Comment thread site/src/contexts/ThemeProvider.tsx Outdated
Comment thread site/src/theme/darkProtanDeuter/roles.ts Outdated
Comment thread site/src/pages/AgentsPage/AgentEmbedPage.tsx
Comment thread site/e2e/tests/users/userSettings.spec.ts Outdated
Comment thread site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.stories.tsx Outdated
Comment thread site/src/theme/darkProtanDeuter/roles.ts
Comment thread site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx Outdated
Comment thread site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx Outdated
Comment thread site/src/index.css Outdated
Comment thread site/src/contexts/ThemeProvider.tsx Outdated
@jaaydenh

Copy link
Copy Markdown
Contributor Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2c1973eda3

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread site/src/contexts/ThemeProvider.tsx
Comment thread site/e2e/tests/users/userSettings.spec.ts Outdated
Add four colorblind-friendly theme variants alongside the existing
light and dark themes:

- `dark-protan-deuter` and `light-protan-deuter`: high contrast for
  users with red-green colorblindness (protanopia and deuteranopia).
- `dark-tritan` and `light-tritan`: high contrast for users with
  blue-yellow colorblindness (tritanopia).

Each variant ships a full theme module (`branding`, `experimental`,
`monaco`, `mui`, `roles`) and a CSS class block in `site/src/index.css`
that overrides the semantic color variables most affected by
colorblindness (diff highlights, content accents, surface, border,
and highlight colors).

Extract theme resolution into `site/src/theme/colorblind.ts`, which
owns the concrete theme registry, the `resolveThemeName` helper used
by `ThemeProvider`, and the `isConcreteThemeName` validator used by
`AgentEmbedPage`'s postMessage handler. The embed page now accepts
every concrete theme and clears every possible theme class on
unmount so switching between a colorblind variant and the base
theme does not leave a stale class on the root.

Add `cssVariables.test.ts`, which asserts that every theme class
block in `site/src/index.css` declares the full set of required CSS
variables so switching themes cannot leave stale values leaking
through from a previous theme.

This PR ships the palettes and the resolution machinery but does
not yet expose the new themes in the Appearance settings page; the
follow-up PR adds the picker UI that lets users select them.

Produced with Coder Agents assistance.
@jaaydenh jaaydenh force-pushed the feat/colorblind-themes branch from 2c1973e to cf99301 Compare April 24, 2026 08:08
- Apply base mode class (`dark`/`light`) alongside concrete theme class
  so Tailwind `dark:` utilities and selector-based theming (e.g.
  `Chart.tsx`, `ToolIcon.tsx`) keep matching when a colorblind variant
  is active. Extract a shared `baseModeFor` helper and cover every
  concrete theme in `colorblind.test.ts`.
- Remove the overclaimed Okabe-Ito / WCAG AA language from the
  protan-deuter role comments; describe the palette as inspired by the
  CVD-safe scheme instead.
- Update the stale `?theme=light|dark` comment in `AgentEmbedPage` to
  reflect that any concrete theme (including colorblind variants) is
  accepted.
- Replace the `.toContain("light")` assertion in the user-settings e2e
  test with `classList.contains("light")` so a hyphenated colorblind
  light variant cannot satisfy the check.
- Drop the redundant `--avatar-*` and `--radius` declarations from
  `.light-protan-deuter` and `.light-tritan` (they already inherit from
  `:root`), matching the `.dark` convention.
- Fill in the previously empty ThemeProvider doc comment.

Co-authored with Coder Agents.

Copy link
Copy Markdown
Contributor Author

Coder Agents here. Addressed the review feedback in 3c361f0. Summary by comment:

P1 / DEREM-1 (Codex + coder-agents-review) — fixed.
ThemeProvider and applyEmbedTheme now add the base mode class (dark/light) alongside the concrete theme class, so Tailwind's dark: variant (darkMode: ["selector"]) and any .dark/.light selector-based theming (e.g. ToolIcon, Chart.tsx, TaskStartupWarningButton) keep matching under colorblind variants. Extracted a shared baseModeFor helper in colorblind.ts and added tests that cover every concrete theme in colorblind.test.ts.

P2 / DEREM-2 — fixed.
Removed the overclaimed "Okabe-Ito vermilion" / WCAG AA language from the protan-deuter role comments (dark + light). Comments now describe the palette as a vermilion/orange axis inspired by the CVD-safe scheme, without claiming hex-level provenance or a specific contrast target.

P2 / DEREM-3 — fixed.
Updated the stale ?theme=light|dark comment in AgentEmbedPage to reflect that any concrete theme name (including colorblind variants like dark-tritan) is accepted.

P3 / DEREM-4 (+ Codex P3) — fixed.
The e2e assertion was still .toContain("light") on className, which matches hyphenated variants (light-tritan). Switched to classList.contains("light") so a colorblind light variant cannot satisfy the check. Comment updated.

Nit / DEREM-18 — fixed.
Removed the redundant --avatar-lg, --avatar-default, --avatar-sm, and --radius declarations from .light-protan-deuter and .light-tritan. These already inherit from :root, and the .dark block omits them, so this matches the existing convention.

Nit / DEREM-19 — fixed.
Replaced the empty doc comment on ThemeProvider with a real description of what it does (resolves preference, manages <html> classes including the base mode class, watches OS scheme, skips class manipulation for embeds, delegates to MUI/Emotion providers).

Out of scope on this PR — not changed.

  • DEREM-5, 6, 7, 8, 9, 16, 17 reference AppearanceForm.{tsx,stories.tsx}, THEME_OPTIONS, AUTO_PREFERENCES, ConcreteOption/AutoOption, AutoThemePreviewButton, and the clinical theme labels. None of those exist in this PR. They belong to the follow-up PR feat: add theme mode dropdown with sync and single modes #24680 which adds the Theme mode dropdown UI; I'll address them there.

Intentionally not acted on (architectural choice).

  • DEREM-10: the per-directory layout for colorblind themes is deliberate so the four variants stay structurally symmetric with the base dark/light themes. Compressing them into a spread in theme/index.ts would make the four variants a different shape than the two originals. Happy to revisit if there's a strong preference.
  • DEREM-11: spreading base roles and overriding only the changed ones is nicer, but in practice the base roles are split across several nested objects (danger.disabled, danger.hover, etc.), so a partial spread still has to either hand-merge those subtrees or re-declare them. I'd rather keep the full copy, which is explicit and greppable, than introduce a shallow-spread that risks leaving a stale field. Happy to revisit.

Produced with Coder Agents assistance.

The previous `classList.contains(\"light\")` check passes for any theme
whose base mode is light, including colorblind variants such as
`light-tritan` (which now set both `light-tritan` and `light` classes
since ThemeProvider applies the base mode class alongside the concrete
theme class). Assert against the full class-list tokens so only the
plain `light` theme satisfies the check.

Co-authored with Coder Agents.

Copy link
Copy Markdown
Contributor Author

Coder Agents follow-up on the two Codex review items:

Codex P1 (ThemeProvider.tsx:78 → now :97–102) — fully addressed in 3c361f0.
Both ThemeProvider (sitewide) and applyEmbedTheme (embed page) now call classList.add(baseModeFor(name)) after adding the concrete theme class, so <html> always carries the base mode class alongside any colorblind variant. That restores Tailwind dark: utilities (ToolIcon, TaskStartupWarningButton, etc.), .dark selector-based theming (Chart.tsx's THEMES.dark = ".dark"), and any other .dark/.light CSS. Covered by new tests in colorblind.test.ts for every concrete theme.

Codex P3 (userSettings.spec.ts:25) — addressed in 3c361f0, then hardened in 5dd692c.
The original pre-review regex /\blight\b/ did match hyphenated variants because - is a word boundary. The first fix swapped to classList.contains("light"), but with the P1 fix applied, <html> for light-tritan now also has the light class, so contains("light") would still pass for any light colorblind variant. The follow-up commit tightens the assertion to Array.from(it.classList)).toEqual(["light"]), which is exclusive: only the plain light theme produces exactly that class list. Safe because ThemeProvider and AgentEmbedPage are the only code paths that mutate <html>'s classList (verified via grep).

Produced with Coder Agents assistance.

@jaaydenh

Copy link
Copy Markdown
Contributor Author

/coder-agents-review

@coder-agents-review coder-agents-review Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Re-review after the author addressed 7 of 16 R1 findings (DEREM-1 through -4, -18, -19 fixed; -10 and -11 contested and closed by panel). Seven findings were dropped because the AppearanceForm code was removed from this PR and deferred to PR #24680.

The R1 fixes look correct. The baseModeFor helper, the classList.contains assertion tightening, the comment updates, and the CSS variable cleanup all land cleanly.

This round surfaced 1 P0, 1 P1, 2 P2, 4 P3.

P0 [DEREM-20] (site/src/index.css): The @layer components { ... } block was deleted from index.css, removing the mobile-full-width-dropdown CSS rules. Nine live components still reference these classes: WorkspacePill.tsx:124, ContextUsageIndicator.tsx:267, AgentsSidebar.tsx:994, ChatTopBar.tsx:191, AgentPageHeader.tsx:167, ModelSelector.tsx:132, CompactOrgSelector.tsx:86, AgentChatInput.tsx:851,1148. Every mobile dropdown on the agents page breaks. The deletion rode in with the navbar-stripe cleanup (also unrelated to colorblind themes). Fix: restore the @layer components { @media (max-width: 767px) { ... } } rules. (Netero)

The P1 is a palette-design problem: in the protan-deuter CSS blocks, --content-warning and --content-destructive are 3 degrees apart on the same orange axis. The palette designed to help CVD users makes warning and error indistinguishable for them in banners, badges, and alerts. The PR description says "warning and diff additions/deletions remain distinguishable"; the CSS variables say otherwise.

"Moving destructive onto orange puts it on top of warning." (Pariston, tracing the in-block hue collision)

DEREM-10 and DEREM-11 (contested directory structure and roles duplication): Pariston evaluated both and accepted the author's defense. Panel closed.


site/.storybook/preview.tsx:97

P2 [DEREM-27] The Storybook decorator at this line sets document.querySelector("html")?.setAttribute("class", selected) with a single token. The production ThemeProvider (fixed in 3c361f0 for DEREM-1) now adds both concreteName and baseModeFor(concreteName). This sibling was not updated.

Consequence: selecting dark-tritan in Storybook leaves .dark off the root, so dark: Tailwind utilities and .dark selector-based theming break, the same class of bug DEREM-1 fixed in production. Fix: import baseModeFor and set both classes. (Mafuuu)

🤖

🤖 This review was automatically generated with Coder Agents.

Comment thread site/src/index.css Outdated
Comment thread site/src/theme/darkProtanDeuter/roles.ts
Comment thread site/src/index.css
Comment thread site/src/theme/darkTritan/roles.ts
Comment thread site/src/theme/cssVariables.test.ts
Comment thread site/src/index.css Outdated
- Restore mobile full-width dropdown component rules removed from index.css.
- Mirror ThemeProvider class behavior in Storybook so dark colorblind themes
  also carry the base dark class there.
- Move protan-deuter warning tokens to fuchsia and keep links on the base
  blue axis so warning/destructive and link/success remain distinct.
- Keep protan-deuter role error distinct from danger, and keep tritan danger
  on the base orange role instead of rose.
- Extend CSS-variable tests to cover syntax tokens and add regression checks
  for the reviewed semantic color collisions.
- Update PR-body palette provenance to avoid unsupported Okabe-Ito/WCAG AA
  claims.

Co-authored with Coder Agents.

Copy link
Copy Markdown
Contributor Author

Coder Agents follow-up: addressed the remaining active PR comments in da2f585.

Fixed:

  • DEREM-20 (P0): Restored the mobile-full-width-dropdown @layer components rules in site/src/index.css so mobile agents-page dropdowns keep their fixed full-width positioning.
  • DEREM-21 (P3): Reworded the colorblind CSS preamble to reflect the current two-class layout (<concrete theme> plus dark/light) and that each block declares the colorblind-tuned semantic/diff/syntax subset, not every inherited layout token.
  • DEREM-25 (P1): Moved protan-deuter warning tokens off the orange/destructive axis and onto fuchsia (--content-warning, --border-warning, --surface-orange, --highlight-orange) so warning and destructive surfaces no longer collapse.
  • DEREM-26 (P2): Made protan-deuter roles.error red again so it is distinct from orange roles.danger; added regression coverage.
  • DEREM-27 (P2): Updated Storybook’s theme decorator to mirror production ThemeProvider behavior by applying both the concrete theme class and baseModeFor(concreteName).
  • DEREM-28 (P3): Kept protan-deuter links on the base blue axis so --content-link no longer equals --content-success; added CSS regression coverage.
  • DEREM-29 (P3): Reverted tritan roles.danger to the base orange role so it remains distinct from red roles.error; added regression coverage.
  • DEREM-30 (P3): Added the four --syntax-* variables to REQUIRED_VARIABLES.
  • DEREM-2 PR body follow-up: Updated the PR description’s palette provenance note to avoid unsupported exact Okabe-Ito/WCAG AA claims.

Validation:

  • pnpm vitest run src/theme/colorblind.test.ts src/theme/cssVariables.test.ts
  • pnpm lint:types
  • pnpm check
  • make pre-commit via git hook

Produced with Coder Agents assistance.

Copy link
Copy Markdown
Contributor Author

Coder Agents follow-up after the required deep-review pass:

  • Hardened site/src/theme/index.ts so the theme registry is typed as Record<ConcreteThemeName, Theme>, making CONCRETE_THEMES and exported theme keys a type-check invariant in addition to the existing test guard.
  • Relaxed the plain-light e2e assertion to reject other concrete theme classes without failing on unrelated <html> classes, and reused CONCRETE_THEMES so the assertion stays in sync with future theme variants.

Validated:

  • pnpm lint:types
  • pnpm check
  • pnpm vitest run src/theme/colorblind.test.ts src/theme/cssVariables.test.ts
  • pre-commit hook passed for commits 645006cd6 and 0716dc0f3.

@jaaydenh

Copy link
Copy Markdown
Contributor Author

/coder-agents-review

@jaaydenh

Copy link
Copy Markdown
Contributor Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Chef's kiss.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@coder-agents-review coder-agents-review Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Re-review after the author addressed all 8 R2 findings in da2f585 and follow-up hardening commits. Pariston verified every R2 fix against the current code and confirmed they address root causes. The palette hue separations, the baseModeFor sibling in Storybook, the restored mobile-dropdown rules, the syntax token coverage, and the tritan danger/error restoration all look correct.

1 P2, 2 P3 this round. All are test-infrastructure gaps, not production breakage.

The P2 is the sibling-miss pattern recurring for the third time: commit 0716dc0 fixed the manually-synced theme list in the e2e test by importing CONCRETE_THEMES, but did not search for other instances. cssVariables.test.ts has the same hardcoded list at line 58.

Process observation: the e2e theme assertion took 5 iterations across 5 commits to stabilize (toContain → classList.contains → toEqual → toContain+exclusion → import CONCRETE_THEMES). The final result is correct, but each step was a reaction to the previous step breaking rather than reasoning about the invariant upfront.

"I tried to build a case against this change and could not. The problem is correctly understood, the solution intervenes at the right level, and the palette choices are defensible." (Pariston)

🤖 This review was automatically generated with Coder Agents.

Comment thread site/src/theme/cssVariables.test.ts
Comment thread site/src/index.css Outdated
Comment thread site/src/theme/cssVariables.test.ts Outdated
@jaaydenh

Copy link
Copy Markdown
Contributor Author

/coder-agents-review

@coder-agents-review coder-agents-review Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Round 4. All three R3 findings addressed in 9dd284f. Mafuuu verified the contract chain from resolver through registry to cleanup. Pariston verified CSS specificity ordering, variable completeness, type safety bidirectionality, and tried four alternative framings of the problem; none held better than the author's approach.

1 P2 this round. The tritan palette shifts warning text, borders, and highlights to fuchsia but leaves --surface-orange on amber. Components like Badge, Alert, and LicenseBanner pair bg-surface-orange with fuchsia warning foregrounds, producing an amber background with fuchsia text. Amber is the exact hue tritanopia desaturates.

"The surface on which the fuchsia text sits is the one amber token that was left behind." (Hisoka)

🤖 This review was automatically generated with Coder Agents.

Comment thread site/src/index.css Outdated
@jaaydenh

Copy link
Copy Markdown
Contributor Author

/coder-agents-review

@coder-agents-review coder-agents-review Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Round 5. DEREM-34 (tritan --surface-orange) addressed in 0ad35a2. Netero verified the fix: both tritan blocks now shift --surface-orange to fuchsia, matching the rest of the warning family, with a new test assertion guarding the invariant.

34 findings across 5 rounds, all resolved. 19 fixed by author, 9 dropped (code removed from PR/deferred to #24680), 2 contested and panel-closed, 4 dropped below threshold. Zero open.

The resolver/registry/CSS-variable test triangle is sound. The palette hue separations hold for both CVD types. The baseModeFor helper, the Storybook decorator, and the embed page all correctly apply dual classes. The satisfies Record<ConcreteThemeName, Theme> constraint plus the bidirectional registry test enforce compile-time and test-time sync. The semantic separation tests cover all four colorblind variants for warning/destructive and link/success distinctness.

🤖 This review was automatically generated with Coder Agents.

@jaaydenh jaaydenh marked this pull request as ready for review April 29, 2026 14:14
@jaaydenh jaaydenh requested a review from aslilac April 29, 2026 16:31

@aslilac aslilac left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there are bits that could be simplified a bit, and I think we'd get a lot more out of snapshots of these colorblind themes than a unit test attempting to parse using regular expressions.

Comment thread site/e2e/tests/users/userSettings.spec.ts Outdated
Comment thread site/e2e/tests/users/userSettings.spec.ts Outdated
Comment thread site/.storybook/preview.tsx Outdated
Comment thread site/e2e/tests/users/userSettings.spec.ts Outdated
Comment thread site/src/theme/cssVariables.test.ts
Comment thread site/src/theme/cssVariables.test.ts Outdated
Comment thread site/src/theme/cssVariables.test.ts Outdated
Comment thread site/src/theme/cssVariables.test.ts Outdated
Comment thread site/src/theme/colorblind.ts Outdated
*
* The four colorblind variants (`dark-protan-deuter`, `light-protan-deuter`,
* `dark-tritan`, `light-tritan`) sit alongside the standard `dark` and
* `light` themes. The legacy `auto` preference is virtual: it resolves to

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

auto is not legacy, it is an important option

if anything, we should also have an auto-protan-deuter and an auto-tritan

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed the comment, I don't think of auto as a theme but a way of arriving at a theme.

@aslilac aslilac May 1, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, that's true. I usually referred to the selection here as a "preference" rather than a specific "theme".

Comment thread site/src/theme/colorblind.ts Outdated
@jaaydenh jaaydenh requested a review from aslilac May 1, 2026 13:35

@aslilac aslilac left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

better!

Comment thread site/.storybook/preview.tsx Outdated
import type { Decorator, Loader, Parameters } from "@storybook/react-vite";
import isChromatic from "chromatic/isChromatic";
import { StrictMode } from "react";
import React from "react";

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd have to go digging but I remember the React team saying that one day there were gonna remove the default export. curious about this change, I'd rather we leave it as it was

Suggested change
import React from "react";
import { StrictMode } from "react";

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this error shows up in the jsx of preview.tsx, reverted for now and we can handle this separately.

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

@jaaydenh jaaydenh merged commit 6149fc3 into main May 4, 2026
29 checks passed
@jaaydenh jaaydenh deleted the feat/colorblind-themes branch May 4, 2026 13:03
@github-actions github-actions Bot locked and limited conversation to collaborators May 4, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants