refactor(ui): make design tokens dark-mode-ready (breakpoint 1)#28884
refactor(ui): make design tokens dark-mode-ready (breakpoint 1)#28884chirag-madlani wants to merge 2 commits into
Conversation
Wire the legacy theming layers to the shared design-token source of truth so dark mode can propagate without per-library color tables. No toggle switch is included here; these tokens are inert until dark mode is activated in a later PR. - globals.css: wrap the 374 @theme color tokens that .dark-mode overrides as `var(--token, <original>)`. Tailwind's prefix(tw) freezes the light value into --tw-color-* at build time, so the .dark-mode block (which sets unprefixed --color-*) was never read at runtime. The var() indirection lets the existing .dark-mode overrides flip --tw-color-* at runtime. Light mode is byte-identical (the original value is the var() fallback). - variables.less: alias the standard @grey-50..900 scale, @background-color and @background-primary to the shared --tw-color-* tokens. Light values are unchanged; they are now dark-aware. - ExploreSearchCard: replace hardcoded card background/border/highlight and muted-text hex with semantic tokens. - Convert 3 fade(@grey-*) Less calls to color-mix(), since Less color functions cannot operate on var() values. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
❌ PR checklist incompleteThis PR cannot be merged until the following are addressed on its linked issue:
The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically. Maintainers can bypass this check by adding the |
github-actions
Bot
added
safe to test
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
…Card light deltas - variables.less: alias @Grey-25 to var(--tw-color-gray-25) (light #fdfdfd unchanged, now dark-aware) for consistency with the rest of the scale. - ExploreSearchCard: pick closest light-matching tokens so the conversion no longer shifts light-mode colors: - card bg #f8f9fc -> bg-secondary (#fafafa, was bg-primary #ffffff) - muted text #757575 -> text-quaternary (#717680, was text-tertiary #535862) border (#eaecf5 -> #e9eaeb) and highlight (#eff8ff exact) were already within rounding. All four tokens remain dark-aware. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Code Review ✅ Approved 2 resolved / 2 findingsAligns Tailwind, Ant Design, and legacy Less styling layers onto shared design tokens to enable future dark mode support. Resolved previous light-mode color inconsistencies and CSS variable mapping issues. ✅ 2 resolved✅ Quality: @Grey-25 left as static hex, breaks dark-mode consistency
✅ Quality: ExploreSearchCard token swap changes light-mode colors
OptionsDisplay: compact → Showing less information. Comment with these commands to change:
Was this helpful? React with 👍 / 👎 | Gitar |
Jest test CoverageUI tests summary
|
|
🟡 Playwright Results — all passed (8 flaky)✅ 4254 passed · ❌ 0 failed · 🟡 8 flaky · ⏭️ 88 skipped
🟡 8 flaky test(s) (passed on retry)
How to debug locally# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip # view trace |
1 participant
Breakpoint 1 — design-token foundation for dark mode
First of a stack of PRs adding dark theme. This one is the token plumbing only — it aligns the three styling layers (Tailwind/core-components, Ant Design, legacy Less) onto a single
--color-*source of truth so dark mode can propagate without per-library color tables.No toggle switch / activation in this PR — these tokens are inert and light mode is unchanged until dark mode is wired up in a later PR.
Root cause this fixes
The app compiles core-components Tailwind with
prefix(tw), which freezes each@themecolor into--tw-color-*at build time. The existing.dark-modeblock sets the unprefixed--color-*names — which nothing reads at runtime. So dark-mode overrides were effectively dead.Changes
globals.css— wrap the 374@themetokens that.dark-modeoverrides asvar(--token, <original>). Tailwind preserves thevar()into--tw-color-*, so the existing.dark-modeblock finally flips them at runtime. Light mode is byte-identical (the original value is the fallback).variables.less— alias the standard@grey-50..900scale (a byte-exact match to--color-gray-*),@background-colorand@background-primaryto the shared--tw-color-*tokens. Light unchanged, now dark-aware across all files that use the scale.ExploreSearchCard— hardcoded card bg/border/highlight/muted-text hex → semantic tokens (reference conversion).fade(@grey-*)Less calls →color-mix()(Less color fns can't takevar()).Verification
tailwind.css: 619 color vars compared light-mode vs. pre-change — zero differences.:rootin light and flips under.dark-mode..lessfiles +app.lesscompile cleanly through thelessrenderer.🤖 Generated with Claude Code