Updated node tokens

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',
@@ -36,7 +36,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
     ]"
@@ -383,7 +383,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,20 +34,23 @@ 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
     }
   )
 )
 
 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 = () => {