Add design system color variables to tailwind config and use in Vue Nodes (#5430)

* use tailwind colors for

* add updated tokens with scales

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(