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>
2026-04-21 06:49:37 +00:00 · 2025-11-05 09:13:17 +01:00
parent fac86e35bf
commit 265f1257e7
31 changed files with 72 additions and 31 deletions
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/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(
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/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'
      )
    "
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
+++ b/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
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
+++ b/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;
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
+++ b/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"
    />
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
+++ b/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"
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
+++ b/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"
    />
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
+++ b/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 }
        )
      "
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
+++ b/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>

--- a/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
+++ b/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'
 ])
--- a/src/services/colorPaletteService.ts
+++ b/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 = () => {