fix: replace hardcoded styles with design tokens and cache StatusBadge variants (#9349)

## Summary

Replace hardcoded color and spacing values with semantic design tokens
and cache a computed variant class in StatusBadge.

## Changes

- **What**: Use Tailwind 4 CSS spacing variables in FormDropdownMenu
layout configs, replace zinc color utilities with semantic
`node-component-border` tokens in FormDropdownInput, wrap
`statusBadgeVariants()` in a `computed` for caching in StatusBadge.

## Review Focus

Straightforward token replacements and a computed caching change -- no
behavioral differences expected.

Fixes #9087
Fixes #9086
Fixes #7910

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9349-fix-replace-hardcoded-styles-with-design-tokens-and-cache-StatusBadge-variants-3186d73d36508185aae2e0753c9d1694)
by [Unito](https://www.unito.io)

src/components/common/StatusBadge.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import { statusBadgeVariants } from './statusBadge.variants'
 import type { StatusBadgeVariants } from './statusBadge.variants'
 
@@ -11,17 +13,17 @@ const {
   severity?: StatusBadgeVariants['severity']
   variant?: StatusBadgeVariants['variant']
 }>()
+
+const badgeClass = computed(() =>
+  statusBadgeVariants({
+    severity,
+    variant: variant ?? (label == null ? 'dot' : 'label')
+  })
+)
 </script>
 
 <template>
-  <span
+  <span :class="badgeClass">
-    :class="
-      statusBadgeVariants({
-        severity,
-        variant: variant ?? (label == null ? 'dot' : 'label')
-      })
-    "
-  >
     {{ label }}
   </span>
 </template>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -56,7 +56,7 @@ const theButtonStyle = computed(() =>
   <div
     :class="
       cn(WidgetInputBaseClass, 'flex text-base leading-none', {
-        'opacity-50 cursor-not-allowed outline-zinc-300/10': disabled
+        'opacity-50 cursor-not-allowed outline-node-component-border': disabled
       })
     "
   >
@@ -97,7 +97,7 @@ const theButtonStyle = computed(() =>
         cn(
           theButtonStyle,
           'relative',
-          'size-8 flex justify-center items-center border-l rounded-r-lg border-zinc-300/10'
+          'size-8 flex justify-center items-center border-l rounded-r-lg border-node-component-border'
         )
       "
     >

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

@@ -62,13 +62,23 @@ type LayoutConfig = {
 }
 
 const LAYOUT_CONFIGS: Record<LayoutMode, LayoutConfig> = {
-  grid: { maxColumns: 4, itemHeight: 120, itemWidth: 89, gap: '1rem 0.5rem' },
+  grid: {
-  list: { maxColumns: 1, itemHeight: 64, itemWidth: 380, gap: '0.5rem' },
+    maxColumns: 4,
+    itemHeight: 120,
+    itemWidth: 89,
+    gap: 'var(--spacing-4) var(--spacing-2)'
+  },
+  list: {
+    maxColumns: 1,
+    itemHeight: 64,
+    itemWidth: 380,
+    gap: 'var(--spacing-2)'
+  },
   'list-small': {
     maxColumns: 1,
     itemHeight: 40,
     itemWidth: 380,
-    gap: '0.25rem'
+    gap: 'var(--spacing-1)'
   }
 }