From 0a2260a666ab87cf23f78587fca582a488b424d4 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Tue, 9 Sep 2025 18:45:55 -0700
Subject: [PATCH] Add design system color variables to tailwind config and use
 in Vue Nodes (#5430)

* use tailwind colors for

* add updated tokens with scales
---
 .../vueNodes/components/LGraphNode.vue        |  8 ++-
 tailwind.config.ts                            | 67 ++++++++++++++++++-
 2 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index a77f764f1..abd0a34c3 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -7,7 +7,7 @@
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'bg-white dark-theme:bg-[#15161A]',
+        'bg-white dark-theme:bg-charcoal-primary',
         'min-w-[445px]',
         'lg-node absolute border border-solid rounded-2xl',
         'outline outline-transparent outline-2',
@@ -16,7 +16,8 @@
         },
         {
           'border-blue-500 ring-2 ring-blue-300': isSelected,
-          'border-[#e1ded5] dark-theme:border-[#292A30]': !isSelected,
+          'border-sand-primary dark-theme:border-charcoal-tertiary':
+            !isSelected,
           'animate-pulse': executing,
           'opacity-50': nodeData.mode === 4,
           'border-red-500 bg-red-50': error,
@@ -226,7 +227,8 @@ const hasCustomContent = computed(() => {
 })
 
 // Computed classes and conditions for better reusability
-const separatorClasses = 'bg-[#e1ded5] dark-theme:bg-[#292A30] h-[1px] mx-0'
+const separatorClasses =
+  'bg-sand-primary dark-theme:bg-charcoal-tertiary h-[1px] mx-0'
 
 // Common condition computations to avoid repetition
 const shouldShowWidgets = computed(
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4c6de2b7c..994208305 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -189,7 +189,72 @@ export default {
           800: '#b38400',
           900: '#997200',
           950: '#664d00'
-        }
+        },
+
+        // Base colors
+        'pure-black': '#000000',
+        'pure-white': '#FFFFFF',
+
+        // Charcoal palette
+        'charcoal-100': '#171718',
+        'charcoal-200': '#202121',
+        'charcoal-300': '#262729',
+        'charcoal-400': '#2D2E32',
+        'charcoal-500': '#313235',
+        'charcoal-600': '#3C3D42',
+        'charcoal-700': '#494A50',
+        'charcoal-800': '#55565E',
+
+        // Stone palette
+        'stone-100': '#444444',
+        'stone-200': '#828282',
+        'stone-300': '#BBBBBB',
+
+        // Ivory palette
+        'ivory-100': '#FDFBFA',
+        'ivory-200': '#FAF9F5',
+        'ivory-300': '#F0EEE6',
+
+        // Gray palette
+        'gray-100': '#F3F3F3',
+        'gray-200': '#E9E9E9',
+        'gray-300': '#E1E1E1',
+        'gray-400': '#D9D9D9',
+        'gray-500': '#C5C5C5',
+        'gray-600': '#B4B4B4',
+        'gray-700': '#A0A0A0',
+        'gray-800': '#8A8A8A',
+
+        // Sand palette
+        'sand-100': '#E1DED5',
+        'sand-200': '#D6CFC2',
+        'sand-300': '#888682',
+
+        // Slate palette
+        'slate-100': '#9C9EAB',
+        'slate-200': '#9FA2BD',
+        'slate-300': '#5B5E7D',
+
+        // Brand colors
+        'brand-yellow': '#F0FF41',
+        'brand-blue': '#172DD7',
+
+        // Functional colors
+        'blue-100': '#0B8CE9',
+        'blue-200': '#31B9F4',
+        'success-100': '#00CD72',
+        'success-200': '#47E469',
+        'warning-100': '#FD9903',
+        'warning-200': '#FCBF64',
+        'danger-100': '#C02323',
+        'danger-200': '#D62952',
+        error: '#962A2A',
+
+        // Alpha variants
+        'blue-selection': 'rgba(11, 140, 233, 0.3)',
+        'node-hover-100': 'rgba(85, 86, 94, 0.15)',
+        'node-hover-200': 'rgba(85, 86, 94, 0.1)',
+        'modal-tag': 'rgba(217, 217, 217, 0.4)'
       },
 
       textColor: {