From 9ac33a34c1f5b8a30d08b662477bbf210fd5cae3 Mon Sep 17 00:00:00 2001
From: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Date: Thu, 15 Jan 2026 15:26:29 -0800
Subject: [PATCH] - Update widgets to inherit their nodes color - Small
 visibility fixes

---
 packages/design-system/src/css/style.css      | 29 +++++++++++++++++--
 .../vueNodes/components/LGraphNode.vue        |  2 +-
 .../widgets/components/WidgetButton.vue       |  2 +-
 .../components/WidgetInputNumberInput.vue     |  3 +-
 .../components/WidgetSelectDefault.vue        |  2 +-
 .../widgets/components/WidgetToggleSwitch.vue | 10 +++++++
 src/services/colorPaletteService.ts           |  2 --
 7 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index 1fdf23af1..720598432 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -200,7 +200,7 @@
   --node-component-disabled: var(--color-alpha-ash-500-20);
   --node-component-executing: var(--color-blue-500);
   --node-component-header: var(--fg-color);
-  --node-component-header-icon: var(--color-ash-800);
+  --node-component-header-icon: var(--node-component-surface-highlight);
   --node-component-header-surface: var(--color-smoke-400);
   --node-component-outline: var(--color-black);
   --node-component-ring: rgb(from var(--color-smoke-500) r g b / 50%);
@@ -258,6 +258,7 @@
   --component-node-border: var(--color-border-default);
   --component-node-foreground: var(--base-foreground);
   --component-node-foreground-secondary: var(--color-muted-foreground);
+  --component-node-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.2);
   --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);
@@ -323,7 +324,7 @@
   --node-component-border-error: var(--color-danger-100);
   --node-component-border-executing: var(--color-blue-500);
   --node-component-border-selected: var(--color-charcoal-200);
-  --node-component-header-icon: var(--color-slate-300);
+  --node-component-header-icon: var(--node-component-surface-highlight);
   --node-component-header-surface: var(--color-charcoal-800);
   --node-component-outline: var(--color-white);
   --node-component-ring: rgb(var(--color-smoke-500) / 20%);
@@ -384,6 +385,7 @@
   --component-node-border: var(--color-charcoal-100);
   --component-node-foreground: var(--base-foreground);
   --component-node-foreground-secondary: var(--color-muted-foreground);
+  --component-node-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.4);
   --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);
@@ -1324,6 +1326,29 @@ audio.comfy-audio.empty-audio-widget {
 .lg-node {
   /* Disable text selection on all nodes */
   user-select: none;
+  --component-node-widget-background: color-mix(
+    in srgb,
+    var(--component-node-background) 92%,
+    var(--contrast-mix-color, #000)
+  );
+  --component-node-widget-background-hovered: color-mix(
+    in srgb,
+    var(--component-node-background) 80%,
+    var(--contrast-mix-color, #000)
+  );
+}
+
+.dark-theme .lg-node {
+  --component-node-widget-background: color-mix(
+    in srgb,
+    var(--component-node-background) 85%,
+    var(--contrast-mix-color, #000)
+  );
+  --component-node-widget-background-hovered: color-mix(
+    in srgb,
+    var(--component-node-background) 70%,
+    var(--contrast-mix-color, #000)
+  );
 }
 
 .lg-node .lg-slot,
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index b990c957a..ce77a6166 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -13,7 +13,7 @@
         'contain-style contain-layout min-w-[225px] min-h-(--node-height) w-(--node-width)',
         shapeClass,
         'touch-none flex flex-col',
-        'border-1 border-solid border-component-node-border',
+        'shadow-[var(--component-node-shadow)]',
         // hover (only when node should handle events)
         shouldHandleNodePointerEvents &&
           'hover:ring-7 ring-node-component-ring',
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
index 8609202f4..9f01904c2 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-1">
     <Button
-      class="text-base-foreground w-full border-0 bg-component-node-widget-background p-2"
+      class="text-base-foreground w-full border-0 bg-component-node-widget-background hover:bg-component-node-widget-background-hovered p-2"
       :aria-label="widget.label"
       size="sm"
       variant="textonly"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
index 1add11f4a..73f1c3d87 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
@@ -64,7 +64,8 @@ function updateValue(e: UIEvent) {
   textEdit.value = false
 }
 
-const sharedButtonClass = 'w-8 bg-transparent border-0 text-sm text-smoke-700'
+const sharedButtonClass =
+  'w-8 bg-transparent border-0 text-sm text-node-component-surface-highlight'
 const canDecrement = computed(
   () =>
     modelValue.value > filteredProps.value.min &&
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
index 93428aab5..940e9a243 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
@@ -14,7 +14,7 @@
         option: 'text-xs',
         dropdown: 'w-8',
         label: cn('truncate min-w-[4ch]', $slots.default && 'mr-5'),
-        overlay: 'w-fit min-w-full'
+        overlay: 'w-fit min-w-full bg-component-node-widget-background'
       }"
       data-capture-wheel="true"
     />
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
index d3af90a70..d76b1a792 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
@@ -18,6 +18,16 @@
         v-model="modelValue"
         v-bind="filteredProps"
         :aria-label="widget.name"
+        :pt="{
+          slider: {
+            class: 'bg-component-node-widget-background'
+          },
+          handle: {
+            class: modelValue
+              ? 'bg-component-node-foreground'
+              : 'bg-node-component-surface-highlight'
+          }
+        }"
       />
     </div>
   </WidgetLayoutField>
diff --git a/src/services/colorPaletteService.ts b/src/services/colorPaletteService.ts
index 8a9fa52c6..53cde76a7 100644
--- a/src/services/colorPaletteService.ts
+++ b/src/services/colorPaletteService.ts
@@ -16,10 +16,8 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 const THEME_PROPERTY_MAP = {
   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: 'component-node-widget-background',
   WIDGET_TEXT_COLOR: 'component-node-foreground'
 } as const satisfies Partial<Record<keyof Colors['litegraph_base'], string>>