From e488b2abcebbdd6191652f2859ec365fa53556b9 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Mon, 9 Jun 2025 04:58:17 -0700
Subject: [PATCH] standardize size and color

---
 .../graph/widgets/BadgedNumberInput.vue       | 43 +++++++++++++++----
 .../graph/widgets/ColorPickerWidget.vue       | 12 ++----
 .../graph/widgets/DropdownComboWidget.vue     |  2 +-
 src/components/graph/widgets/StringWidget.vue |  4 +-
 .../widgets/useBadgedNumberInput.ts           |  2 +-
 src/composables/widgets/useComboWidget.ts     |  4 +-
 .../widgets/useDropdownComboWidget.ts         |  4 +-
 7 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/src/components/graph/widgets/BadgedNumberInput.vue b/src/components/graph/widgets/BadgedNumberInput.vue
index 10f78a1a4..06843803e 100644
--- a/src/components/graph/widgets/BadgedNumberInput.vue
+++ b/src/components/graph/widgets/BadgedNumberInput.vue
@@ -1,10 +1,13 @@
 <template>
   <div class="badged-number-input relative w-full">
-    <InputGroup class="w-full rounded-lg">
+    <InputGroup class="w-full rounded-lg border-none px-0.5">
       <!-- State badge prefix -->
-      <InputGroupAddon v-if="badgeState !== 'normal'" class="rounded-l-lg">
+      <InputGroupAddon
+        v-if="badgeState !== 'normal'"
+        class="rounded-l-lg bg-[#222222] border-[#222222] shadow-none border-r-[#A0A1A2] rounded-r-none"
+      >
         <i
-          :class="badgeIcon"
+          :class="badgeIcon + ' text-xs'"
           :title="badgeTooltip"
           :style="{ color: badgeColor }"
         ></i>
@@ -19,11 +22,26 @@
         :step="step"
         :placeholder="placeholder"
         :disabled="disabled"
-        :class="{
-          'rounded-r-lg': badgeState !== 'normal',
-          'rounded-lg': badgeState === 'normal'
+        size="small"
+        :pt="{
+          pcInputText: {
+            root: {
+              class: 'bg-[#222222] text-xs shadow-none rounded-none !border-0'
+            }
+          },
+          incrementButton: {
+            class: 'text-xs shadow-none bg-[#222222] rounded-l-none !border-0'
+          },
+          decrementButton: {
+            class: {
+              'text-xs shadow-none bg-[#222222] rounded-r-none !border-0':
+                badgeState === 'normal',
+              'text-xs shadow-none bg-[#222222] rounded-none !border-0':
+                badgeState !== 'normal'
+            }
+          }
         }"
-        class="flex-1"
+        class="flex-1 rounded-none"
         show-buttons
         button-layout="horizontal"
         :increment-button-icon="'pi pi-plus'"
@@ -37,7 +55,7 @@
           'rounded-r-lg': badgeState !== 'normal',
           'rounded-lg': badgeState === 'normal'
         }"
-        class="flex-1 flex items-center gap-2 px-3 py-2 bg-surface-0 border border-surface-300"
+        class="flex-1 flex items-center gap-2 px-1 bg-surface-0 border border-surface-300"
       >
         <Slider
           v-model="numericValue"
@@ -53,7 +71,14 @@
           :max="max"
           :step="step"
           :disabled="disabled"
-          class="w-16"
+          class="w-16 rounded-md"
+          :pt="{
+            pcInputText: {
+              root: {
+                class: 'bg-[#222222] text-xs shadow-none border-[#222222]'
+              }
+            }
+          }"
           :show-buttons="false"
           size="small"
         />
diff --git a/src/components/graph/widgets/ColorPickerWidget.vue b/src/components/graph/widgets/ColorPickerWidget.vue
index 5d3c9bb7c..42c064e27 100644
--- a/src/components/graph/widgets/ColorPickerWidget.vue
+++ b/src/components/graph/widgets/ColorPickerWidget.vue
@@ -38,7 +38,8 @@
           :pt="{
             pcInputText: {
               root: {
-                class: 'max-w-12'
+                class:
+                  'max-w-12 bg-[#222222] text-xs shadow-none border-[#222222]'
               }
             }
           }"
@@ -54,15 +55,8 @@
         :options="colorFormats"
         option-label="label"
         option-value="value"
-        class="w-24 ml-3"
+        class="w-24 ml-3 bg-[#222222] text-xs shadow-none border-none p-0"
         size="small"
-        :pt="{
-          pcInputText: {
-            root: {
-              class: 'max-w-12'
-            }
-          }
-        }"
         @update:model-value="handleFormatChange"
       />
     </div>
diff --git a/src/components/graph/widgets/DropdownComboWidget.vue b/src/components/graph/widgets/DropdownComboWidget.vue
index b73728f90..b835cfb20 100644
--- a/src/components/graph/widgets/DropdownComboWidget.vue
+++ b/src/components/graph/widgets/DropdownComboWidget.vue
@@ -4,7 +4,7 @@
       v-model="selectedValue"
       :options="computedOptions"
       :placeholder="placeholder"
-      class="w-full rounded-lg"
+      class="w-full rounded-lg bg-[#222222] text-xs border-[#222222] shadow-none"
       :disabled="isLoading"
     />
   </div>
diff --git a/src/components/graph/widgets/StringWidget.vue b/src/components/graph/widgets/StringWidget.vue
index 2125d4848..0fff496ae 100644
--- a/src/components/graph/widgets/StringWidget.vue
+++ b/src/components/graph/widgets/StringWidget.vue
@@ -5,7 +5,7 @@
       v-if="!isMultiline"
       v-model="modelValue"
       :placeholder="placeholder"
-      class="w-full rounded-lg px-3 py-2 text-sm"
+      class="w-full rounded-lg px-3 py-2 text-sm bg-[#222222] text-xs mt-0.5 border-[#222222] shadow-none"
     />
 
     <!-- Multi-line textarea -->
@@ -15,7 +15,7 @@
       :placeholder="placeholder"
       :auto-resize="true"
       :rows="3"
-      class="w-full rounded-lg px-3 py-2 text-sm resize-none"
+      class="w-full rounded-lg px-3 py-2 text-sm resize-none bg-[#222222] text-xs mt-0.5 border-[#222222] shadow-none"
     />
   </div>
 </template>
diff --git a/src/composables/widgets/useBadgedNumberInput.ts b/src/composables/widgets/useBadgedNumberInput.ts
index 1d4a749f7..70069b1a4 100644
--- a/src/composables/widgets/useBadgedNumberInput.ts
+++ b/src/composables/widgets/useBadgedNumberInput.ts
@@ -118,7 +118,7 @@ export const useBadgedNumberInput = (
         // Optional: minimum height for the widget
         getMinHeight: () => minHeight + PADDING,
         // Lock maximum height to prevent oversizing
-        getMaxHeight: () => 45,
+        getMaxHeight: () => 48,
 
         // Optional: whether to serialize this widget's value
         serialize
diff --git a/src/composables/widgets/useComboWidget.ts b/src/composables/widgets/useComboWidget.ts
index fe189f735..e892c9702 100644
--- a/src/composables/widgets/useComboWidget.ts
+++ b/src/composables/widgets/useComboWidget.ts
@@ -31,9 +31,9 @@ const addMultiSelectWidget = (node: LGraphNode, inputSpec: ComboInputSpec) => {
         widgetValue.value = value
       },
       // Optional: minimum height for the widget (multiselect needs minimal height)
-      getMinHeight: () => 32,
+      getMinHeight: () => 24,
       // Lock maximum height to prevent oversizing
-      getMaxHeight: () => 45,
+      getMaxHeight: () => 32,
       // Optional: whether to serialize this widget's value
       serialize: true
     }
diff --git a/src/composables/widgets/useDropdownComboWidget.ts b/src/composables/widgets/useDropdownComboWidget.ts
index 7bf167929..0a03c3ebc 100644
--- a/src/composables/widgets/useDropdownComboWidget.ts
+++ b/src/composables/widgets/useDropdownComboWidget.ts
@@ -50,9 +50,9 @@ export const useDropdownComboWidget = (
         },
 
         // Optional: minimum height for the widget (dropdown needs minimal height)
-        getMinHeight: () => 48,
+        getMinHeight: () => 32,
         // Lock maximum height to prevent oversizing
-        getMaxHeight: () => 64,
+        getMaxHeight: () => 48,
 
         // Optional: whether to serialize this widget's value
         serialize: true