Updated node tokens (#6569)

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**

* Added new component and node-related CSS variables for background,
border, foreground, and widget states in both light and dark themes in
`style.css`.
[[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R246-R256)
[[2]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R354-R364)
* Introduced `--color-graphite-400` and adjusted several existing color
assignments for better palette consistency.
[[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R76)
[[2]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0L304-R316)
* Updated semantic CSS variables to reference the new component/node
tokens for easier usage in components.
* Changed `--secondary-background-hover` to match
`--secondary-background` for improved hover consistency.

**Component Refactoring: Node and Widget Styles**

* Refactored Vue component classes and inline styles to use the new CSS
variables for node backgrounds, borders, and widget states, replacing
legacy variables like `bg-node-component-surface` and
`border-node-component-border` with `bg-component-node-background` and
`border-component-node-border`.
[[1]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2L11-R14)
[[2]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2L39-R39)
[[3]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2L384-R384)
[[4]](diffhunk://#diff-19537a67677431ecdc9aec43877d28814e37edf0e45b0b0b484ea08832cad299L5-R13)
* Updated widget dropdowns, select, and input components to use
`text-component-node-foreground-secondary` for icons and foregrounds,
and new background variables for buttons and inputs.
[[1]](diffhunk://#diff-489229f88dfdfd5d883a3ef7fad6effa0790a18a831d5a9d84642dfb246962a2L29-R29)
[[2]](diffhunk://#diff-489229f88dfdfd5d883a3ef7fad6effa0790a18a831d5a9d84642dfb246962a2L100-R100)
[[3]](diffhunk://#diff-661a09de2721335e118a693b25d09922ada0ccbd0a51284691ed784fbe18874eL13-R13)
[[4]](diffhunk://#diff-2856391d03b0d38db1ed922b5034a05bc32e978c51f8175057d84cf82399d986L13-R13)
[[5]](diffhunk://#diff-4ee47848821aff71b6da0a1bb7fb8976e7879d706f71ff2ab3c5b046f5ef528cL10-R10)
[[6]](diffhunk://#diff-8b7ed2ce6194a262fb1e950294699cb8722630920362143a765802b602ae5fc8L106-R113)
[[7]](diffhunk://#diff-8b7ed2ce6194a262fb1e950294699cb8722630920362143a765802b602ae5fc8L119-R123)
[[8]](diffhunk://#diff-597a77456bf4b0c2d390fc46a930f37156b2f26ca030259b6703e5d39ff6b20eL37-R53)
[[9]](diffhunk://#diff-29348fa2e5b8cec1301a99bdec241379aeefc1747cceeb0c39b7df452ca635ffL7-R7)

**Service Layer Updates**

* Updated the color palette service mapping to use the new CSS variable
names for node and widget colors, ensuring consistency across the
application.
* 



https://github.com/user-attachments/assets/d9535f9a-b459-49bf-b2fe-ed872916fa4e



These changes collectively modernize the styling approach for node and
widget components, making it easier to maintain and extend theme
support.

---------

Co-authored-by: github-actions <github-actions@github.com>

packages/design-system/src/css/style.css

@@ -73,6 +73,7 @@
 
   --color-jade-400: #47e469;
   --color-jade-600: #00cd72;
+  --color-graphite-400: #9C9EAB;
 
   --color-gold-400: #fcbf64;
   --color-gold-500: #fdab34;
@@ -227,7 +228,7 @@
   --brand-yellow: var(--color-electric-400);
   --brand-blue: var(--color-sapphire-700);
   --secondary-background: var(--color-smoke-200);
-  --secondary-background-hover: var(--color-smoke-400);
+  --secondary-background-hover: var(--color-smoke-200);
   --secondary-background-selected: var(--color-smoke-600);
   --base-background: var(--color-white);
   --primary-background: var(--color-azure-400);
@@ -242,6 +243,17 @@
   --muted-background: var(--color-smoke-700);
   --accent-background: var(--color-smoke-800);
 
+  /* Component/Node tokens from design system light */
+  --component-node-background: var(--color-white);
+  --component-node-border: var(--color-border-default);
+  --component-node-foreground: var(--base-foreground);
+  --component-node-foreground-secondary: var(--color-muted-foreground);
+  --component-node-widget-background: var(--secondary-background);
+  --component-node-widget-background-hovered: var(--secondary-background-hover);
+  --component-node-widget-background-selected: var(--secondary-background-selected);
+  --component-node-widget-background-disabled: var(--color-alpha-ash-500-20);
+  --component-node-widget-background-highlighted: var(--color-ash-500);
+
   /* Default UI element color palette variables */
    --palette-contrast-mix-color: #fff;
    --palette-interface-panel-surface: var(--comfy-menu-bg);
@@ -301,7 +313,7 @@
   --node-component-surface-highlight: var(--color-slate-100);
   --node-component-surface-hovered: var(--color-charcoal-600);
   --node-component-surface-selected: var(--color-charcoal-200);
-  --node-component-surface: var(--color-charcoal-800);
+  --node-component-surface: var(--color-charcoal-600);
   --node-component-tooltip: var(--color-white);
   --node-component-tooltip-border: var(--color-slate-300);
   --node-component-tooltip-surface: var(--color-charcoal-800);
@@ -339,6 +351,17 @@
   --border-subtle: var(--color-charcoal-300);
   --muted-background: var(--color-charcoal-100);
   --accent-background: var(--color-charcoal-100);
+
+  /* Component/Node tokens from design dark system */
+  --component-node-background: var(--color-charcoal-600);
+  --component-node-border: var(--color-charcoal-100);
+  --component-node-foreground: var(--base-foreground);
+  --component-node-foreground-secondary: var(--color-muted-foreground);
+  --component-node-widget-background: var(--secondary-background-hover);
+  --component-node-widget-background-hovered: var(--secondary-background-selected);
+  --component-node-widget-background-selected: var(--color-charcoal-100);
+  --component-node-widget-background-disabled: var(--color-alpha-charcoal-600-30);
+  --component-node-widget-background-highlighted: var(--color-graphite-400);
 }
 
 @theme inline {
@@ -406,6 +429,17 @@
   --color-text-primary: var(--text-primary);
   --color-input-surface: var(--input-surface);
 
+  /* Component/Node design tokens */
+  --color-component-node-background: var(--component-node-background);
+  --color-component-node-border: var(--component-node-border);
+  --color-component-node-foreground: var(--component-node-foreground);
+  --color-component-node-foreground-secondary: var(--component-node-foreground-secondary);
+  --color-component-node-widget-background: var(--component-node-widget-background);
+  --color-component-node-widget-background-hovered: var(--component-node-widget-background-hovered);
+  --color-component-node-widget-background-selected: var(--component-node-widget-background-selected);
+  --color-component-node-widget-background-disabled: var(--component-node-widget-background-disabled);
+  --color-component-node-widget-background-highlighted: var(--component-node-widget-background-highlighted);
+
   /* Semantic tokens */
   --color-base-foreground: var(--base-foreground);
   --color-muted-foreground: var(--muted-foreground);

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -8,10 +8,10 @@
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'bg-node-component-surface lg-node absolute',
+        'bg-component-node-background lg-node absolute',
         'h-min w-min contain-style contain-layout min-h-(--node-height) min-w-(--node-width)',
         'rounded-2xl touch-none flex flex-col',
-        'border-1 border-solid border-node-component-border',
+        'border-1 border-solid border-component-node-border',
         // hover (only when node should handle events)
         shouldHandleNodePointerEvents &&
           'hover:ring-7 ring-node-component-ring',
@@ -37,7 +37,7 @@
         transform: `translate(${position.x ?? 0}px, ${(position.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
         zIndex: zIndex,
         opacity: nodeOpacity,
-        '--node-component-surface': nodeBodyBackgroundColor
+        '--component-node-background': nodeBodyBackgroundColor
       },
       dragStyle
     ]"
@@ -387,7 +387,7 @@ const hasCustomContent = computed(() => {
 })
 
 // Computed classes and conditions for better reusability
-const separatorClasses = 'bg-node-component-border h-px mx-0 w-full lod-toggle'
+const separatorClasses = 'bg-component-node-border h-px mx-0 w-full lod-toggle'
 const progressClasses = 'h-2 bg-primary-500 transition-all duration-300'
 
 const { latestPreviewUrl, shouldShowPreviewImg } = useNodePreviewState(

src/renderer/extensions/vueNodes/components/NodeHeader.vue

@@ -7,7 +7,7 @@
     :class="
       cn(
         'lg-node-header p-4 rounded-t-2xl w-full min-w-50',
-        'bg-node-component-header-surface text-node-component-header',
+        'text-node-component-header',
         collapsed && 'rounded-2xl'
       )
     "

src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue

@@ -26,7 +26,7 @@
           size="small"
           :pt="{
             option: 'text-xs',
-            dropdownIcon: 'text-button-icon'
+            dropdownIcon: 'text-component-node-foreground-secondary'
           }"
         />
         <Button
@@ -97,7 +97,7 @@
           size="small"
           :pt="{
             option: 'text-xs',
-            dropdownIcon: 'text-button-icon'
+            dropdownIcon: 'text-component-node-foreground-secondary'
           }"
         />
         <Button

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue

@@ -103,10 +103,14 @@ const inputNumberPt = useNumberWidgetButtonPt({
         @update:model-value="onChange"
       >
         <template #incrementicon>
-          <span class="pi pi-plus text-sm text-button-icon" />
+          <span
+            class="pi pi-plus text-sm text-component-node-foreground-secondary"
+          />
         </template>
         <template #decrementicon>
-          <span class="pi pi-minus text-sm text-button-icon" />
+          <span
+            class="pi pi-minus text-sm text-component-node-foreground-secondary"
+          />
         </template>
       </InputNumber>
     </div>
@@ -116,7 +120,7 @@ const inputNumberPt = useNumberWidgetButtonPt({
 <style scoped>
 :deep(.p-inputnumber-input) {
   background-color: transparent;
-  border: 1px solid var(--node-stroke);
+  border: 1px solid var(--component-node-border);
   border-top: transparent;
   border-bottom: transparent;
   height: 1.625rem;

src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue

@@ -10,7 +10,7 @@
       display="chip"
       :pt="{
         option: 'text-xs',
-        dropdownIcon: 'text-button-icon'
+        dropdownIcon: 'text-component-node-foreground-secondary'
       }"
       @update:model-value="onChange"
     />

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue

@@ -10,7 +10,7 @@
       size="small"
       :pt="{
         option: 'text-xs',
-        dropdownIcon: 'text-button-icon'
+        dropdownIcon: 'text-component-node-foreground-secondary'
       }"
       data-capture-wheel="true"
       @update:model-value="onChange"

src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue

@@ -7,7 +7,7 @@
       :aria-label="widget.name"
       size="small"
       :pt="{
-        dropdownIcon: 'text-button-icon'
+        dropdownIcon: 'text-component-node-foreground-secondary'
       }"
       @update:model-value="onChange"
     />

src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue

@@ -4,7 +4,7 @@
       v-if="!hidden"
       :class="
         cn(
-          'bg-zinc-500/10 dark-theme:bg-charcoal-600 box-border flex gap-4 items-center justify-start relative rounded-lg w-full h-16 px-4 py-0',
+          'bg-component-node-widget-background box-border flex gap-4 items-center justify-start relative rounded-lg w-full h-16 px-4 py-0',
           { hidden: hideWhenEmpty && !hasAudio }
         )
       "

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -34,7 +34,7 @@ const selectedItems = computed(() => {
 
 const chevronClass = computed(() =>
   cn(
-    'mr-2 size-4 transition-transform duration-200 flex-shrink-0 text-button-icon',
+    'mr-2 size-4 transition-transform duration-200 flex-shrink-0 text-component-node-foreground-secondary',
     {
       'rotate-180': props.isOpen
     }
@@ -42,12 +42,15 @@ const chevronClass = computed(() =>
 )
 
 const theButtonStyle = computed(() =>
-  cn('bg-transparent border-0 outline-none text-text-secondary', {
-    'hover:bg-node-component-widget-input-surface/30 cursor-pointer':
-      !props.disabled,
-    'cursor-not-allowed': props.disabled,
-    'text-text-primary': selectedItems.value.length > 0
-  })
+  cn(
+    'border-0 bg-component-node-widget-background outline-none text-text-secondary',
+    {
+      'hover:bg-component-node-widget-background-hovered cursor-pointer':
+        !props.disabled,
+      'cursor-not-allowed': props.disabled,
+      'text-text-primary': selectedItems.value.length > 0
+    }
+  )
 )
 </script>
 

src/renderer/extensions/vueNodes/widgets/components/layout/index.ts

@@ -2,13 +2,13 @@ import { cn } from '@/utils/tailwindUtil'
 
 export const WidgetInputBaseClass = cn([
   // Background
-  'not-disabled:bg-node-component-widget-input-surface',
-  'not-disabled:text-node-component-widget-input',
+  'not-disabled:bg-component-node-widget-background',
+  'not-disabled:text-component-node-foreground',
   // Outline
   'border-none',
-  'outline outline-offset-[-1px] outline-node-stroke',
+  'outline outline-offset-[-1px] outline-component-node-border',
   // Rounded
   'rounded-lg',
   // Hover
-  'hover:bg-node-component-surface-hovered'
+  'hover:bg-component-node-widget-background-hovered'
 ])

src/services/colorPaletteService.ts

@@ -14,13 +14,13 @@ import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
 const THEME_PROPERTY_MAP = {
-  NODE_BOX_OUTLINE_COLOR: 'node-component-border',
-  NODE_DEFAULT_BGCOLOR: 'node-component-surface',
+  NODE_BOX_OUTLINE_COLOR: 'component-node-border',
+  NODE_DEFAULT_BGCOLOR: 'component-node-background',
   NODE_DEFAULT_BOXCOLOR: 'node-component-header-icon',
   NODE_DEFAULT_COLOR: 'node-component-header-surface',
   NODE_TITLE_COLOR: 'node-component-header',
-  WIDGET_BGCOLOR: 'node-component-widget-input-surface',
-  WIDGET_TEXT_COLOR: 'node-component-widget-input'
+  WIDGET_BGCOLOR: 'component-node-widget-background',
+  WIDGET_TEXT_COLOR: 'component-node-foreground'
 } as const satisfies Partial<Record<keyof Colors['litegraph_base'], string>>
 
 export const useColorPaletteService = () => {