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/core/graph/subgraph/SubgraphNode.vue

@@ -246,7 +246,7 @@ onBeforeUnmount(() => {
   />
   <div
     v-if="filteredActive.length"
-    class="pt-1 pb-4 border-b-1 border-sand-100 dark-theme:border-charcoal-600"
+    class="pt-1 pb-4 border-b-1 border-node-component-border"
   >
     <div class="flex py-0 px-4 justify-between">
       <div class="text-slate-100 text-[9px] font-semibold uppercase">
@@ -302,7 +302,7 @@ onBeforeUnmount(() => {
   </div>
   <div
     v-if="recommendedWidgets.length"
-    class="justify-center flex py-4 border-t-1 border-sand-100 dark-theme:border-charcoal-600"
+    class="justify-center flex py-4 border-t-1 border-node-component-border"
   >
     <Button
       size="small"

src/core/graph/subgraph/SubgraphNodeWidget.vue

@@ -16,7 +16,7 @@ defineEmits<{
 function classes() {
   return cn(
     'flex py-1 pr-4 pl-0 break-all rounded items-center gap-1',
-    'bg-pure-white dark-theme:bg-charcoal-800',
+    'bg-node-component-surface',
     props.isDraggable
       ? 'drag-handle cursor-grab [.is-draggable]:cursor-grabbing'
       : ''

src/core/graph/subgraph/useSubgraphNodeDialog.ts

@@ -10,7 +10,7 @@ export function showSubgraphNodeDialog() {
     position: 'topright',
     pt: {
       root: {
-        class: 'bg-pure-white dark-theme:bg-charcoal-800 mt-22'
+        class: 'bg-node-component-surface mt-22'
       },
       header: {
         class: 'h-8 text-xs ml-3'