From 15cffe9d9eddf9f69365593dc258837e164f5de0 Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Tue, 16 Sep 2025 16:31:13 -0700
Subject: [PATCH] style: Flip the shade direction for charoal to go from light
 to dark (#5609)

---
 src/assets/css/style.css                      | 28 +++++++++----------
 .../graph/selectionToolbox/BypassButton.vue   |  2 +-
 .../vueNodes/components/LGraphNode.vue        |  6 ++--
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 724282387..747c3d1f6 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -57,14 +57,14 @@
   --font-inter: 'Inter', sans-serif;
 
   /* Palette Colors */
-  --color-charcoal-100: #171718;
-  --color-charcoal-200: #202121;
-  --color-charcoal-300: #262729;
-  --color-charcoal-400: #2d2e32;
-  --color-charcoal-500: #313235;
-  --color-charcoal-600: #3c3d42;
-  --color-charcoal-700: #494a50;
-  --color-charcoal-800: #55565e;
+  --color-charcoal-100: #55565e;
+  --color-charcoal-200: #494a50;
+  --color-charcoal-300: #3c3d42;
+  --color-charcoal-400: #313235;
+  --color-charcoal-500: #2d2e32;
+  --color-charcoal-600: #262729;
+  --color-charcoal-700: #202121;
+  --color-charcoal-800: #171718;
 
   --color-stone-100: #444444;
   --color-stone-200: #828282;
@@ -103,12 +103,12 @@
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
-  --color-bypass: #6A246A;
+  --color-bypass: #6a246a;
   --color-error: #962a2a;
 
   --color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
-  --color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15);
-  --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
+  --color-node-hover-100: rgb(from var(--color-charcoal-100) r g b/ 0.15);
+  --color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
   --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
 
   /* PrimeVue pulled colors */
@@ -121,10 +121,10 @@
 }
 
 @theme inline {
-  --color-node-component-surface: var(--color-charcoal-300);
+  --color-node-component-surface: var(--color-charcoal-600);
   --color-node-component-surface-highlight: var(--color-slate-100);
-  --color-node-component-surface-hovered: var(--color-charcoal-500);
-  --color-node-component-surface-selected: var(--color-charcoal-700);
+  --color-node-component-surface-hovered: var(--color-charcoal-400);
+  --color-node-component-surface-selected: var(--color-charcoal-200);
   --color-node-stroke: var(--color-stone-100);
 }
 
diff --git a/src/components/graph/selectionToolbox/BypassButton.vue b/src/components/graph/selectionToolbox/BypassButton.vue
index 70297977b..5c7c84944 100644
--- a/src/components/graph/selectionToolbox/BypassButton.vue
+++ b/src/components/graph/selectionToolbox/BypassButton.vue
@@ -7,7 +7,7 @@
     severity="secondary"
     text
     data-testid="bypass-button"
-    class="hover:dark-theme:bg-charcoal-300 hover:bg-[#E7E6E6]"
+    class="hover:dark-theme:bg-charcoal-600 hover:bg-[#E7E6E6]"
     @click="toggleBypass"
   >
     <template #icon>
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index dd8c7cd5b..c66d7cabe 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -7,9 +7,9 @@
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'bg-white dark-theme:bg-charcoal-100',
+        'bg-white dark-theme:bg-charcoal-800',
         'lg-node absolute rounded-2xl',
-        'border border-solid border-sand-100 dark-theme:border-charcoal-300',
+        'border border-solid border-sand-100 dark-theme:border-charcoal-600',
         'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
         'outline-transparent -outline-offset-2 outline-2',
         borderClass,
@@ -309,7 +309,7 @@ const hasCustomContent = computed(() => {
 
 // Computed classes and conditions for better reusability
 const separatorClasses =
-  'bg-sand-100 dark-theme:bg-charcoal-300 h-[1px] mx-0 w-full'
+  'bg-sand-100 dark-theme:bg-charcoal-600 h-px mx-0 w-full'
 const progressClasses = 'h-2 bg-primary-500 transition-all duration-300'
 
 // Common condition computations to avoid repetition