Repository navigation
refactor(theme): three-layer design tokens and cascade layers - #495
Merged
Merged
Conversation
- Add base design tokens defining neutral, warm, accent and semantic status palettes - Establish semantic and component-level tokens mapped to base variables and dark defaults - Standardize radius into four discrete tiers and define elevation shadow steps - Register semantic token aliases in theme token properties for runtime bridge - Import design tokens stylesheet at application styling entry point Validation: bun run check; bun test 905 pass / 32 skip / 4 fail (pre-existing)
- Replace legacy color-named theme variables across stylesheets with semantic tokens - Add shared surface variants for framed, dashed and sunken containers - Migrate deferred containers to standard surface classes and remove private appearance rules - Refactor OAuth introduction to use shared Notice component - Add CSS syntax integrity test enforcing balanced parentheses and brackets Validation: bun run check passed; bun test 906 pass, 4 pre-existing failures
- Move dark surface, text, sidebar and component values into the token layers. - Alias legacy variables to semantic and component tokens without circular references. - Keep light workspace values unchanged and preserve dark failure and danger colors. - Add regression coverage for the light palette and dark semantic text colors. Validation: bun run check pass; bun test 908 pass, 32 skip, 4 pre-existing failures; light/sakura/translucent computed-style and pixel diff zero against 51d9e1a
…ortant - Declare the reset, tokens, primitives, components, pages, theme layer order - Put token files in the tokens layer and built-in theme overrides in the theme layer - Keep component and global stylesheets in one components layer in their original load order - Wrap injected theme overlay rules in the theme layer - Remove !important outside theme-window-material.css - Guard layer order, nested layers, layered imports and overlay wrapping in tests Validation: bun run check; bun test 913 pass / 32 skip / 4 fail (pre-existing)
- Map request log text, secondary text and latency tones back to text and status tokens instead of border tokens - Add a blue palette token for the input token series so it stays distinct from output and cache reads - Guard request log color tokens against border, surface and duplicate series mappings Validation: bun run check; bun test 914 pass / 32 skip / 4 fail (pre-existing)
- Give workspace and sidebar surfaces token-based translucent values under data-window-material - Keep solid token defaults so themes without native material match their solid appearance - Remove the last !important from theme-window-material.css - Forbid !important in every stylesheet Validation: bun run check; bun test 915 pass / 32 skip / 4 fail (pre-existing)
…in CSS - Scan every stylesheet outside the token and browser-mock directories for color literals, unregistered --theme-* variables and !important - Check var() fallbacks, decode CSS escapes and skip strings, URLs and non-color identifiers - Replace remaining shadow and focus ring literals with tokens, using exact component tokens where the shared tier differs - Move the usage rate purple into the base palette - Remove unused legacy theme aliases and check the semantic tokens in the contrast test Validation: bun run check; bun test 919 pass / 32 skip / 4 fail (pre-existing)
- Restore credential text and success colors, distinct Analysis status colors and the danger Stop button states - Restore exact component values for secondary buttons, network settings, switches, trend grid, status dot, dialog shadows and Easy step states across light, dark, sakura and translucent themes - Keep request log data series on base palette colors instead of status tokens - Fix the dark collector border width and the surface-sunken background and border - Remove a duplicate quota summary rule and dark overrides that repeated root values - Add unit guards and a Playwright check that samples real elements for the restored values Validation: bun run check; bun test 930 pass / 32 skip / 4 fail (pre-existing); node tests/theme-stage2-regression-ui.cjs
… tokens - Map every border radius in component and page styles to the none/sm/md/lg/full radius tokens, using radius-full for circles and pills - Remove 109 tokens with no consumer from the base, semantic and component layers, including dead alias chains - Guard radius values, radius alias definitions and @Property registrations in the CSS lint, decoding escapes and conditional blocks - Fail the lint when a token in the token layer has no path to a CSS or TypeScript consumer Validation: bun run check; bun test 970 pass / 32 skip / 4 fail (pre-existing); node tests/theme-stage2-regression-ui.cjs
- Put the batch credential dialog styles in the components layer like other component stylesheets - Check stylesheet import order in main.tsx without counting non-CSS imports Validation: bun run check; bun test 981 pass / 32 skip / 4 fail (pre-existing)
This was referenced Oct 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
src/styles/tokens/(base palette, radius and shadow tiers; semantic tokens; component tokens) and map theme color literals in component and page styles to them@layer reset, tokens, primitives, components, pages, themeand remove every!importantdata-window-materialattribute!important, off-tier radius values and unreachable tokensValidation
bun run checkbun test: 981 pass / 32 skip / 4 fail; the same 4 tests (uiLocalization 1, authFileQuotaPanel priority 2, stateControls 1) fail onmiaomiaonode tests/theme-stage2-regression-ui.cjswith the browser mockmiaomiaoacross light, dark, sakura and translucent themes on 113 page and interaction scenarios: remaining differences are the approved container unifications and small border-radius adjustmentsScreenshots
No intended visual change apart from small border-radius adjustments; verified with the computed-style and pixel comparison above.