From bc2c3f73d6f5d3f46097191760125f5e20a9a4e5 Mon Sep 17 00:00:00 2001 From: DrJKL Date: Fri, 3 Oct 2025 12:23:56 -0700 Subject: [PATCH 01/22] style: first step in making the nodes themeable: LGraphNode --- packages/design-system/src/css/style.css | 40 ++++++++++++++++--- .../vueNodes/components/LGraphNode.vue | 21 +++++----- 2 files changed, 45 insertions(+), 16 deletions(-) diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css index 1cb74892f7..517bcdf15b 100644 --- a/packages/design-system/src/css/style.css +++ b/packages/design-system/src/css/style.css @@ -128,12 +128,42 @@ --color-dark-elevation-2: rgba(from white r g b / 0.03); } +:root { + --node-component-surface: var(--color-white); + --node-component-surface-highlight: var(--color-stone-100); + --node-component-surface-hovered: var(--color-charcoal-400); + --node-component-surface-selected: var(--color-charcoal-200); + --node-component-border: var(--color-sand-100); + --node-component-executing: var(--color-blue-500); + --node-component-ring: rgb(var(--color-gray-500) / 50%); + --node-component-outline: var(--color-black); + --node-stroke: var(--color-stone-100); +} + +.dark-theme { + --node-component-surface: var(--color-charcoal-800); + --node-component-surface-highlight: var(--color-slate-100); + --node-component-surface-hovered: var(--color-charcoal-400); + --node-component-surface-selected: var(--color-charcoal-200); + --node-component-border: var(--color-charcoal-600); + --node-component-ring: rgb(var(--color-gray-500) / 20%); + --node-component-outline: var(--color-white); + --node-stroke: var(--color-slate-100); +} + @theme inline { - --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-400); - --color-node-component-surface-selected: var(--color-charcoal-200); - --color-node-stroke: var(--color-stone-100); + --color-node-component-surface: var(--node-component-surface); + --color-node-component-surface-highlight: var( + --node-component-surface-highlight + ); + --color-node-component-surface-hovered: var(--node-component-surface-hovered); + --color-node-component-surface-selected: var(--component-surface-selected); + --color-node-component-border: var(--node-component-border); + --color-node-component-executing: var(--node-component-executing); + --color-node-component-ring: var(--node-component-ring); + --color-node-component-outline: var(--node-component-outline); + + --color-node-stroke: var(--node-stroke); } @custom-variant dark-theme { diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue index e542ed5e80..31e9b0ee4c 100644 --- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue +++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue @@ -8,12 +8,12 @@ :data-node-id="nodeData.id" :class=" cn( - 'bg-white dark-theme:bg-charcoal-800', + 'bg-node-component-surface', 'lg-node absolute rounded-2xl touch-none', - 'border-1 border-solid border-gray-400 dark-theme:border-stone-200', + 'border-2 border-solid border-node-component-border', // hover (only when node should handle events) shouldHandleNodePointerEvents && - 'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20', + 'hover:ring-7 ring-node-component-ring', 'outline-transparent -outline-offset-2 outline-2', borderClass, outlineClass, @@ -274,8 +274,7 @@ const hasCustomContent = computed(() => { }) // Computed classes and conditions for better reusability -const separatorClasses = - 'bg-sand-100 dark-theme:bg-charcoal-600 h-px mx-0 w-full lod-toggle' +const separatorClasses = 'bg-node-component-border h-px mx-0 w-full lod-toggle' const progressClasses = 'h-2 bg-primary-500 transition-all duration-300' const { latestPreviewUrl, shouldShowPreviewImg } = useNodePreviewState( @@ -287,17 +286,17 @@ const { latestPreviewUrl, shouldShowPreviewImg } = useNodePreviewState( const borderClass = computed(() => { return ( - (hasAnyError.value && 'border-error dark-theme:border-error') || - (executing.value && 'border-blue-500') + (hasAnyError.value && 'border-error') || + (executing.value && 'border-node-executing') ) }) const outlineClass = computed(() => { - return ( + return cn( isSelected.value && - ((hasAnyError.value && 'outline-error dark-theme:outline-error') || - (executing.value && 'outline-blue-500 dark-theme:outline-blue-500') || - 'outline-black dark-theme:outline-white') + ((hasAnyError.value && 'outline-error ') || + (executing.value && 'outline-node-executing') || + 'outline-node-component-outline') ) }) From 306f56382be8019b6612878e163b1063977a56a0 Mon Sep 17 00:00:00 2001 From: DrJKL Date: Fri, 3 Oct 2025 13:55:59 -0700 Subject: [PATCH 02/22] style: More variable to token migration --- packages/design-system/src/css/style.css | 19 +++++++++++++++++-- src/renderer/extensions/minimap/MiniMap.vue | 2 +- .../vueNodes/components/InputSlot.vue | 6 +++--- .../vueNodes/components/OutputSlot.vue | 2 +- .../vueNodes/components/SlotConnectionDot.vue | 6 +++--- .../widgets/components/WidgetFileUpload.vue | 2 +- .../form/dropdown/FormDropdownInput.vue | 9 ++++----- 7 files changed, 30 insertions(+), 16 deletions(-) diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css index 517bcdf15b..1835854919 100644 --- a/packages/design-system/src/css/style.css +++ b/packages/design-system/src/css/style.css @@ -135,8 +135,12 @@ --node-component-surface-selected: var(--color-charcoal-200); --node-component-border: var(--color-sand-100); --node-component-executing: var(--color-blue-500); - --node-component-ring: rgb(var(--color-gray-500) / 50%); + --node-component-ring: rgb(from var(--color-gray-500) r g b / 50%); --node-component-outline: var(--color-black); + --node-component-slot-text: var(--color-stone-200); + --node-component-slot-dot-outline: var(--color-black); + --node-component-slot-dot-outline-opacity: 5%; + --node-component-slot-dot-outline-opacity-mult: 1; --node-stroke: var(--color-stone-100); } @@ -148,6 +152,9 @@ --node-component-border: var(--color-charcoal-600); --node-component-ring: rgb(var(--color-gray-500) / 20%); --node-component-outline: var(--color-white); + --node-component-slot-text: var(--color-slate-200); + --node-component-slot-dot-outline: var(--color-white); + --node-component-slot-dot-outline-opacity: 10%; --node-stroke: var(--color-slate-100); } @@ -160,8 +167,16 @@ --color-node-component-surface-selected: var(--component-surface-selected); --color-node-component-border: var(--node-component-border); --color-node-component-executing: var(--node-component-executing); - --color-node-component-ring: var(--node-component-ring); --color-node-component-outline: var(--node-component-outline); + --color-node-component-ring: var(--node-component-ring); + --color-node-component-slot-text: var(--node-component-slot-text); + --color-node-component-slot-dot-outline: rgb( + from var(--node-component-slot-dot-outline) r g b / + calc( + var(--node-component-slot-dot-outline-opacity) * + var(--node-component-slot-dot-outline-opacity-mult) + ) + ); --color-node-stroke: var(--node-stroke); } diff --git a/src/renderer/extensions/minimap/MiniMap.vue b/src/renderer/extensions/minimap/MiniMap.vue index 63b0c85d2b..40f23bc27b 100644 --- a/src/renderer/extensions/minimap/MiniMap.vue +++ b/src/renderer/extensions/minimap/MiniMap.vue @@ -45,7 +45,7 @@
{ const errorClassesDot = computed(() => { return hasSlotError.value - ? 'ring-2 ring-error dark-theme:ring-error ring-offset-0 rounded-full' + ? 'ring-2 ring-error ring-offset-0 rounded-full' : '' }) const labelClasses = computed(() => hasSlotError.value - ? 'text-error dark-theme:text-error font-medium' - : 'dark-theme:text-slate-200 text-stone-200' + ? 'text-error font-medium' + : 'text-node-component-slot-text' ) const renderError = ref(null) diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue index 12db0a6a48..97e63e330b 100644 --- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue +++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue @@ -5,7 +5,7 @@ {{ slotData.localized_name || slotData.name || `Output ${index}` }} diff --git a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue index 85c7ec17d1..3ee8854139 100644 --- a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue +++ b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue @@ -28,11 +28,11 @@ defineExpose({ :style="{ backgroundColor: color }" :class=" cn( - 'bg-[#5B5E7D] rounded-full', + 'bg-slate-300 rounded-full', 'transition-all duration-150', 'cursor-crosshair', - 'border border-solid border-black/5 dark-theme:border-white/10', - 'group-hover/slot:border-black/20 dark-theme:group-hover/slot:border-white/50 group-hover/slot:scale-125', + 'border border-solid border-node-component-slot-dot-outline', + 'group-hover/slot:[--node-component-slot-dot-outline-opacity-mult:5] group-hover/slot:scale-125', multi ? 'w-3 h-6' : 'size-3' ) " diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue index eef4e58e13..2126a53cfc 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue @@ -145,7 +145,7 @@ :style="{ borderColor: '#262729' }" >
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue index a1a73be871..aa5985eb49 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue @@ -38,14 +38,13 @@ const chevronClass = computed(() => }) ) -const theButtonStyle = computed(() => [ - 'bg-transparent border-0 outline-none text-zinc-400', - { +const theButtonStyle = computed(() => + cn('bg-transparent border-0 outline-none text-zinc-400', { 'hover:bg-zinc-500/30 hover:text-black hover:dark-theme:text-white cursor-pointer': !props.disabled, 'cursor-not-allowed': props.disabled - } -]) + }) +)