refactor(theme)!: rename the semantic tokens after the accent roles - #7070
Open
benjamincanac wants to merge 24 commits into
Open
benjamincanac wants to merge 24 commits into
benjamincanac wants to merge 24 commits into
Conversation
Merging this PR will not alter performance
Comparing 
Footnotes
|
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Advanced Run ID: ⛔ Files ignored due to path filters (173)
📒 Files selected for processing (1)
Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review. 📝 WalkthroughWalkthroughThe change revises semantic color CSS tokens and aliases, including text, surface, border, ring, and accent-border roles. It updates component and prose theme classes to use the revised tokens. Migration guidance and design-system documentation describe utility and CSS-variable changes, layer precedence, and appearance differences. Documentation examples, contribution guidance, and test expectations are also updated to use the new token names. Priority: ➖ Normal Estimated code review effort: 3 (Moderate) | ~25 minutes Merge Risk: ⚪ Minimal · up to This change renames semantic color tokens and updates documentation accordingly. It is a deliberate breaking change with a described migration path; no functional or data-integrity defects were identified in the reviewed material. Architecture SummaryArchitecture risk: 🔵 Low · up to The change affects 5 systems. Changed systems: Architecture concerns Review detailsSystems and components
Before / after behavior
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
# Conflicts: # docs/content/docs/1.getting-started/3.migration.md # src/runtime/theme/checkbox-group.ts # src/runtime/theme/checkbox.ts # src/runtime/theme/radio-group.ts # test/components/__snapshots__/Checkbox-vue.spec.ts.snap # test/components/__snapshots__/Checkbox.spec.ts.snap # test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap # test/components/__snapshots__/CheckboxGroup.spec.ts.snap # test/components/__snapshots__/RadioGroup-vue.spec.ts.snap # test/components/__snapshots__/RadioGroup.spec.ts.snap
commit: |
# Conflicts: # docs/content/docs/1.getting-started/3.migration.md # test/utils/tv.spec.ts
This branch was successfully deployed
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
1 participant
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.
🔗 Linked issue
Stacked on #7067, the top of the Epic A/E stack (#6918). Part of #6610. The docs site and playgrounds follow in the next PR, split off to stay under CodeRabbit's 300 file limit.
❓ Type of change
📚 Description
The surface tokens and the accent roles described the same tiers with different words, and the role names disagreed with their values: the role called
borderwas the strong one,border-mutedthe default. They now share one vocabulary.bg-softis the always neutral fill,bg-accent-softthe one that followscolor, and the neutral scope maps most roles onto the surface token of the same name.bg-defaultbg-surfacebg-elevatedbg-softbg-accentedbg-soft-hoverbg-elevated/50bg-tint(new token)text-dimmedtext-fainttext-tonedtext-defaultborder-accentedborder-strongoutline-primary/25outline-focus(new token)border/border-soft/border-mutedborder-strong/border/borderThe CSS variables take the property they style as a prefix (
--ui-bg-soft,--ui-text-faint,--ui-border-strong), and the tokens move from@layer themeto@layer basebehind:where()like the palettes, so an override in@layer baseno longer loses to them.--ui-bg-tintand--ui-focusare unset by default: the utilities mix--ui-bg-softand--ui-primaryon the element, so a subtree overriding those follows. The utilities in the page background take the same word:ring-bg,border-bg,fill-bg,stroke-bgandring-offset-bgbecome*-surface. The unuseddivide-bgandoutline-defaultare removed.border-mutedkeeps its name and its values, 200 light and 700 dark: it's the border for abg-softorbg-mutedfill, which share the default border's 800 in dark mode. The neutralborderrole points at it, so neutralsubtlerings and code blocks stay visible. A translucent dark default border was tried and dropped: it doubled at the overlapping seams of thetablevariants and gave ProsePre two border tones.A few components look slightly different, all listed in the migration guide: the colored
tintrole goes from 10% to 5%, neutral components on theborderrole takeborder-muted(subtle variants lighter in light mode, outline Alert and ChatMessage one shade lighter in dark), the neutral soft hover is solid, the FileUpload dropzone hover goes from 25% to 50% ofbg-soft, and thetext-tonedcall sites move one shade.Until #7071 moves the docs app and playgrounds over,
tokens.csskeeps the v4 class names as a temporary bridge so this PR builds and lints on its own. #7071 removes it.The migration guide has the full table, the replacement order for a find and replace, and what it can't catch: variable overrides in user CSS, roles set per color (
--ui-primary-borderchanges meaning) and classes built at runtime.📝 Checklist