Css token standardization #6086
Open
Conversation
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
- Add 137 semantic tokens to style.css with light/dark mode variants - Add tokens for text, accent, button, interface, node, modal, tooltip - Add Tailwind @theme inline mappings for all new tokens - Tokens enable automatic theme switching without conditional classes
- ExecuteButton: use bg-button-surface-blue - BypassButton: use bg-button-hover-surface - MenuOptionItem: use bg-button-surface-blue and bg-button-bkg-secondary for badges
- WidgetRecordAudio: use bg-button-surface-danger for stop button - WidgetFileUpload: use node-component-surface and node-component-border tokens - Remove inline style hex colors in favor of Tailwind token classes
…mponents - buttonTypes: use bg-button-surface-contrast and text-accent-contrast - VerticalDivider, SubmenuPopover, NodeOptions: use interface/* tokens - Remove conditional dark-theme classes for automatic theme switching
…mponents - MultiSelect: use bg-accent-blue and bg-button-surface - SingleSelect: use text-text-primary and text-text-secondary - SearchBox: use text-text-primary and text-text-secondary - Enable automatic theme switching without conditional classes
…nents - CardContainer, CardDescription: use modal-card-* tokens - SquareChip: use text-text-secondary - MoreButton, IconGroup: use button-* and interface-* tokens - Remove conditional dark-theme classes
…omponents - BaseModalLayout: use bg-modal-panel-surface - NavTitle, NavItem: use text-text-secondary and interface-* tokens - RightSidePanel, LeftSidePanel: use interface-panel-* tokens - Remove conditional dark-theme classes for automatic theme switching
…mponents - MediaAssetCard, AssetCard: use interface-panel-card-* tokens - Media*Top/Bottom components: use text-text-secondary - AssetGrid, AssetBadgeGroup: use interface-panel-* tokens - MediaAssetMoreMenu, MediaAssetButtonDivider: use interface-* tokens - Remove all conditional dark-theme classes
…xtensions - AudioPreviewPlayer: use node-component-* and accent-primary tokens - WidgetChart: use text-text-primary - FormDropdownMenuFilter, FormDropdownMenuActions: use node-component-* tokens - Remove conditional dark-theme classes
…components - PackCard: use modal-card-* tokens - WarningTabPanel: use modal-panel-* and text-text-* tokens - PackVersionSelectorPopover: use modal-* tokens - NodeConflictDialogContent, ManagerDialogContent: use modal-* tokens - ManagerProgressFooter, ManagerProgressDialogContent: use modal-* and border-accent-primary - Remove all conditional dark-theme classes
…nd misc components - MissingCoreNodesMessage: use text-text-secondary - FormImageUpload, LazyImage: use interface-* and modal-* tokens - WorkflowTemplateSelectorDialog: use text-text-secondary - ShortcutsList: use interface-* tokens - ChatHistoryWidget, CopyButton: use interface-* and button-* tokens - Remove conditional dark-theme classes
- AssetBrowserModal, AssetCard, AssetFilterBar stories: use modal-* tokens - MultiSelect, SingleSelect stories: use bg-modal-background - Update decorator backgrounds to use semantic tokens - Remove conditional dark-theme classes from story configurations
- Prevent dark: prefix (require dark-theme: instead) - Prevent direct hex colors in bg/text/border/fill/stroke classes - Prevent dark-theme: usage (require semantic tokens that auto-switch) - Add comments explaining each rule's purpose
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 10/17/2025, 08:29:23 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 10/17/2025, 08:44:01 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Myestery
requested review from
arjansingh,
christian-byrne,
ltdrdata and
viva-jinyi
as code owners
dosubot
bot
added
the
size:L
|
Hm, is that unit test just flaky here? Seems pretty unrelated but a bit hard to tell. |
yeah its flaky, works here |
|
Gotcha, can you assign me when it's ready? |
DrJKL
reviewed
Oct 19, 2025
There was a problem hiding this comment.
I think with a lot of this we're getting too granular.
For example: --text-blue and --accent-blue and --button-surface-blue having tokens.
What we'd want is just something like --warning: var(--color-ochre-700); --warning-surface: var(--color-stone-300);, not multiple warning/success/etc for each aspect of each context. We want fewer theme tokens that are more versatile (so that users who want to customize don't have to define 200 separate colors).
There was a problem hiding this comment.
Would that be changed by designers or coders?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
This pull request introduces a comprehensive migration to new semantic CSS tokens throughout the design system and component library. The main goals are to standardize color usage, improve theme consistency (especially for dark and light modes), and enforce semantic naming conventions in both code and linting rules. The changes span the CSS variable definitions, Tailwind mappings, ESLint configuration, and numerous Vue components.
Design System & CSS Tokens
style.css, covering text, accent, button, interface, node, modal, and tooltip colors. These tokens are mapped to base palette values and replace previous ad-hoc color references. [1] [2]Linting and Code Quality
bg-,text-,border-with color codes), in addition to the existing restriction on thedark:prefix.Component Refactors (Theme Consistency & Semantic Usage)
ShortcutsList.vue,IconGroup.vue,MoreButton.vue,CardContainer.vue,CardDescription.vue,SquareChip.vue,FormImageUpload.vue,LazyImage.vue,WorkflowTemplateSelectorDialog.vue) to use the new semantic CSS tokens in their classes, replacing previous hardcoded color, background, and border values. This ensures that all UI elements respond correctly to theme changes and follow the new design guidelines. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14]Summary of Most Important Changes
1. Semantic CSS Token Infrastructure
style.css. [1] [2]2. Linting Enforcement
3. Component Refactors for Theme Consistency
These changes will make the codebase easier to maintain, enhance accessibility, and ensure visual consistency across all themes and components.
┆Issue is synchronized with this Notion page by Unito