Style: Make components themeable (#5908)

## Summary

Replace color/dark-color pairs in components with design tokens to allow
for easy overriding.
<!-- Also standardizes the icon pattern to simplify the tailwind config.
-->

## Changes

- **What**: Token based colors, for now, mostly.
- **Breaking**: Got approval from Design to collapse some very similar
pairs of colors that seem to have diverged in implementations over time.
Some of the colors might be a little different, but we can tweak them
later.

## Review Focus

Still have quite a few places from which to remove `dark-theme`, but
this at least gets the theming much closer.
Need to decide if I want to keep going in here or cut this and do the
rest in a subsequent PR.

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5908-WIP-Make-components-themeable-2816d73d365081ffbc05d189fe71084b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

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

@@ -4,24 +4,37 @@
   </div>
   <div
     v-else
-    class="lg-node-header p-4 rounded-t-2xl cursor-move w-full"
+    :class="
+      cn(
+        'lg-node-header p-4 rounded-t-2xl cursor-move w-full bg-node-component-header-surface text-node-component-header',
+        collapsed && 'rounded-2xl'
+      )
+    "
     :style="headerStyle"
     :data-testid="`node-header-${nodeData?.id || ''}`"
     @dblclick="handleDoubleClick"
   >
     <div class="flex items-center justify-between gap-2.5 relative">
       <!-- Collapse/Expand Button -->
-      <button
-        class="bg-transparent border-transparent flex items-center lod-toggle"
-        data-testid="node-collapse-button"
-        @click.stop="handleCollapse"
-        @dblclick.stop
-      >
-        <i
-          :class="collapsed ? 'pi pi-chevron-right' : 'pi pi-chevron-down'"
-          class="text-xs leading-none relative top-px text-stone-200 dark-theme:text-slate-300"
-        ></i>
-      </button>
+      <div class="flex items-center lod-toggle shrink-0 px-0.5">
+        <IconButton
+          size="fit-content"
+          type="transparent"
+          data-testid="node-collapse-button"
+          @click.stop="handleCollapse"
+          @dblclick.stop
+        >
+          <i
+            :class="
+              cn(
+                'icon-[lucide--chevron-down] size-5 transition-transform',
+                collapsed && '-rotate-90'
+              )
+            "
+            class="text-xs leading-none relative top-px text-node-component-header-icon"
+          ></i>
+        </IconButton>
+      </div>
 
       <!-- Node Title -->
       <div
@@ -38,7 +51,7 @@
         />
         <i-lucide:pin
           v-if="isPinned"
-          class="w-5 h-5 text-stone-200 dark-theme:text-slate-300"
+          class="size-5 text-node-component-header-icon"
           data-testid="node-pin-indicator"
         />
       </div>
@@ -48,12 +61,13 @@
           v-tooltip.top="enterSubgraphTooltipConfig"
           size="sm"
           type="transparent"
-          class="text-stone-200 dark-theme:text-slate-300"
           data-testid="subgraph-enter-button"
           @click.stop="handleEnterSubgraph"
           @dblclick.stop
         >
-          <i class="pi pi-external-link"></i>
+          <i
+            class="icon-[lucide--picture-in-picture] size-5 text-node-component-header-icon"
+          ></i>
         </IconButton>
       </div>
       <LODFallback />
@@ -79,6 +93,7 @@ import {
   getLocatorIdFromNodeData,
   getNodeByLocatorId
 } from '@/utils/graphTraversalUtil'
+import { cn } from '@/utils/tailwindUtil'
 
 import LODFallback from './LODFallback.vue'