- Update widgets to inherit their nodes color

- Small visibility fixes

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,

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',

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"

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

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"
     />

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>

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