standardize size and color

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="{
+        size="small"
-          'rounded-r-lg': badgeState !== 'normal',
+        :pt="{
-          'rounded-lg': badgeState === 'normal'
+          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"
         />

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>

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>

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>

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

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
     }

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