Feat: Bypass styling for Vue nodes (#5593)

* cleanup: Extract the logic for outline/border colors

* feat: Add coloring for bypass style

Author: DrJKL

src/assets/css/style.css

@@ -99,6 +99,7 @@
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
+  --color-bypass: #6A246A;
   --color-error: #962a2a;
 
   --color-blue-selection: rgb( from var(--color-blue-100) r g b / 0.3); 

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -9,21 +9,15 @@
       cn(
         'bg-white dark-theme:bg-charcoal-100',
         'lg-node absolute rounded-2xl',
-        // border
         'border border-solid border-sand-100 dark-theme:border-charcoal-300',
-        !!executing && 'border-blue-100 dark-theme:border-blue-100',
-        hasAnyError && 'border-error',
-        // hover
         'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
-        // Selected
         'outline-transparent -outline-offset-2 outline-2',
-        !!isSelected && 'outline-black dark-theme:outline-white',
-        !!(isSelected && executing) &&
-          'outline-blue-100 dark-theme:outline-blue-100',
-        isSelected && hasAnyError && 'outline-error',
+        borderClass,
+        outlineClass,
         {
           'animate-pulse': executing,
-          'opacity-50': nodeData.mode === 4,
+          'opacity-50 before:rounded-2xl before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0':
+            bypassed,
           'will-change-transform': isDragging
         },
         lodCssClass,
@@ -238,6 +232,8 @@ const hasAnyError = computed(
   (): boolean => !!(hasExecutionError.value || nodeData.hasErrors || error)
 )
 
+const bypassed = computed((): boolean => nodeData.mode === 4)
+
 // LOD (Level of Detail) system based on zoom level
 const zoomRef = toRef(() => zoomLevel)
 const {
@@ -325,6 +321,29 @@ const shouldShowContent = computed(
   () => shouldRenderContent.value && hasCustomContent.value
 )
 
+const borderClass = computed(() => {
+  if (hasAnyError.value) {
+    return 'border-error'
+  }
+  if (executing.value) {
+    return 'border-blue-500'
+  }
+  return undefined
+})
+
+const outlineClass = computed(() => {
+  if (!isSelected.value) {
+    return undefined
+  }
+  if (hasAnyError.value) {
+    return 'outline-error'
+  }
+  if (executing.value) {
+    return 'outline-blue-500'
+  }
+  return 'outline-black dark-theme:outline-white'
+})
+
 // Event handlers
 const handlePointerDown = (event: PointerEvent) => {
   if (!nodeData) {