Updated node tokens #6569
Merged
Updated node tokens #6569
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 component-node-* tokens for light and dark themes - Reference primitive tokens (color-white, color-charcoal-*, etc.) - Add semantic token layer: background, border, foreground, foreground-secondary - Add widget state tokens: hovered, selected, disabled, highlighted - Expose tokens in @theme inline for Tailwind utility classes - Follows proper design token hierarchy: primitive → component → UI
- Update THEME_PROPERTY_MAP to reference new component-node-* variables - Map NODE_BOX_OUTLINE_COLOR → component-node-border - Map NODE_DEFAULT_BGCOLOR → component-node-background - Map WIDGET_BGCOLOR → component-node-widget-background - Map WIDGET_TEXT_COLOR → component-node-foreground - Ensures custom palettes (arc, nord, solarized, github) override correct CSS variables
- Update WidgetInputBaseClass to use component-node-widget-* tokens - Background: bg-component-node-widget-background - Text: text-component-node-foreground - Border: outline-component-node-border - Hover: hover:bg-component-node-widget-background-hovered - Applies to all Vue node widgets as base styling
- Apply text-component-node-foreground-secondary to all widget icons - Update increment/decrement icons in WidgetInputNumberInput - Update dropdown icons in WidgetSelectDefault, WidgetMultiSelect, WidgetTreeSelect - Update folder icons in WidgetFileUpload - Update chevron icon in FormDropdownInput - Update border in WidgetInputNumberInput to use component-node-border - Update FormDropdownInput background to use component-node-widget-background
- Update node background: bg-component-node-background - Update node border: border-component-node-border - Update separator: bg-component-node-border - Update dynamic background CSS variable: --component-node-background - Ensures consistent node styling with design system tokens
- Remove redundant bg-node-component-header-surface from NodeHeader - Update AudioPreviewPlayer to use bg-component-node-widget-background - Replace dark-theme variant with semantic token reference
dosubot
bot
added
the
size:L
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 11/05/2025, 07:49:17 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 11/05/2025, 08:03:09 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.31 MB (baseline 3.31 MB) • 🔴 +221 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 729 kB (baseline 729 kB) • 🔴 +6 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 8.18 kB (baseline 8.18 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 293 kB (baseline 293 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 12.6 kB (baseline 12.6 kB) • ⚪ 0 BReusable component library chunks
Status: 1 added / 1 removed Data & Services — 10.4 kB (baseline 10.4 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 1 added / 1 removed Utilities & Hooks — 1.07 kB (baseline 1.07 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Vendor & Third-Party — 5.32 MB (baseline 5.32 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 2.55 MB (baseline 2.55 MB) • ⚪ 0 BBundles that do not match a named category
|
Myestery
added
the
New Browser Test Expectations
|
Updating Playwright Expectations |
github-actions
bot
removed
the
New Browser Test Expectations
christian-byrne
approved these changes
Nov 5, 2025
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.
This pull request updates the design system color tokens and refactors node and widget component styles throughout the codebase to use new, more consistent CSS variables. The changes ensure that node and widget components are styled using unified design tokens, improving maintainability and theme support for both light and dark modes.
Design System Token Updates
style.css. [1] [2]--color-graphite-400and adjusted several existing color assignments for better palette consistency. [1] [2]--secondary-background-hoverto match--secondary-backgroundfor improved hover consistency.Component Refactoring: Node and Widget Styles
bg-node-component-surfaceandborder-node-component-borderwithbg-component-node-backgroundandborder-component-node-border. [1] [2] [3] [4]text-component-node-foreground-secondaryfor icons and foregrounds, and new background variables for buttons and inputs. [1] [2] [3] [4] [5] [6] [7] [8] [9]Service Layer Updates
Screen.Recording.2025-11-04.at.06.19.39.mov
These changes collectively modernize the styling approach for node and widget components, making it easier to maintain and extend theme support.