[backport core/1.30]: UI color updates & tweaks (#6679)

## Summary Backports PR #6381 (UI color updates & tweaks) to core/1.30 branch. This includes: - Text readability improvements - Semantic color token consistency updates - UI element styling refinements - Component import path fixes (ComfyLogoTransparent → ComfyLogo) ## Merge Conflicts Resolved - **ComfyMenuButton.vue**: Accepted cherry-picked version with import changes - **20 browser test snapshots**: Used backportee's copy as instructed **Original commit**: fd236b3587 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6679-Backport-PR-6381-to-core-1-30-UI-color-updates-tweaks-2aa6d73d3650815689defd191e3dd86e) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com>
2026-02-21 23:34:31 +00:00 · 2025-11-14 10:40:10 -08:00
parent 3be12e18e8
commit bf24b6e729
185 changed files with 531 additions and 544 deletions
--- a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
--- a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
--- a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
--- a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -5,7 +5,6 @@ import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescrip
 import { importX } from 'eslint-plugin-import-x'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import storybook from 'eslint-plugin-storybook'
-import tailwind from 'eslint-plugin-tailwindcss'
 import unusedImports from 'eslint-plugin-unused-imports'
 import pluginVue from 'eslint-plugin-vue'
 import { defineConfig } from 'eslint/config'
@@ -34,11 +33,7 @@ const settings = {
      ],
      noWarnOnMultipleProjects: true
    })
-  ],
-  tailwindcss: {
-    config: `${import.meta.dirname}/packages/design-system/src/css/style.css`,
-    functions: ['cn', 'clsx', 'tw']
-  }
+  ]
 } as const

 const commonParserOptions = {
@@ -94,10 +89,6 @@ export default defineConfig([
  pluginJs.configs.recommended,

  tseslintConfigs.recommended,
-  // Difference in typecheck on CI vs Local
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore Bad types in the plugin
-  tailwind.configs['flat/recommended'],
  pluginVue.configs['flat/recommended'],
  eslintPluginPrettierRecommended,
  storybook.configs['flat/recommended'],
@@ -129,7 +120,6 @@ export default defineConfig([
      'import-x/no-relative-packages': 'error',
      'unused-imports/no-unused-imports': 'error',
      'no-console': ['error', { allow: ['warn', 'error'] }],
-      'tailwindcss/no-custom-classname': 'off', // TODO: fix
      'vue/no-v-html': 'off',
      // Enforce dark-theme: instead of dark: prefix
      'vue/no-restricted-class': ['error', '/^dark:/'],
--- a/package.json
+++ b/package.json
@@ -61,7 +61,6 @@
    "@storybook/vue3-vite": "catalog:",
    "@tailwindcss/vite": "catalog:",
    "@trivago/prettier-plugin-sort-imports": "catalog:",
-    "@types/eslint-plugin-tailwindcss": "catalog:",
    "@types/fs-extra": "catalog:",
    "@types/jsdom": "catalog:",
    "@types/node": "catalog:",
@@ -78,7 +77,6 @@
    "eslint-plugin-import-x": "catalog:",
    "eslint-plugin-prettier": "catalog:",
    "eslint-plugin-storybook": "catalog:",
-    "eslint-plugin-tailwindcss": "catalog:",
    "eslint-plugin-unused-imports": "catalog:",
    "eslint-plugin-vue": "catalog:",
    "fs-extra": "^11.2.0",
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -237,6 +237,18 @@
  --border-subtle: var(--color-smoke-400);
  --muted-background: var(--color-smoke-700);
  --accent-background: var(--color-smoke-800);
+
+  /* Default UI element color palette variables */
+   --palette-contrast-mix-color: #fff;
+   --palette-interface-panel-surface: var(--comfy-menu-bg);
+   --palette-interface-stroke: color-mix(in srgb, var(--interface-panel-surface) 75.5%, var(--contrast-mix-color));
+
+   --palette-interface-panel-box-shadow: 1px 1px 8px 0 rgb(0 0 0 / 0.4);
+   --palette-interface-panel-drop-shadow: 1px 1px 4px rgb(0 0 0 / 0.4);
+   --palette-interface-panel-hover-surface: color-mix(in srgb, var(--interface-panel-surface) 92.5%, var(--contrast-mix-color));
+   --palette-interface-panel-selected-surface: color-mix(in srgb, var(--interface-panel-surface) 87.5%, var(--contrast-mix-color));
+   --palette-interface-button-hover-surface:  color-mix(in srgb, var(--interface-panel-surface) 82%, var(--contrast-mix-color));
+
 }

 .dark-theme {
--- a/packages/design-system/tailwind.config.ts
+++ b/packages/design-system/tailwind.config.ts
@@ -4,6 +4,13 @@ import { addDynamicIconSelectors } from '@iconify/tailwind'
 import { iconCollection } from './src/iconCollection'

 export default {
+  theme: {
+    extend: {
+      boxShadow: {
+        interface: 'var(--interface-panel-box-shadow)'
+      }
+    }
+  },
  plugins: [
    addDynamicIconSelectors({
      iconSets: {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,9 +87,6 @@ catalogs:
    '@trivago/prettier-plugin-sort-imports':
      specifier: ^5.2.0
      version: 5.2.2
-    '@types/eslint-plugin-tailwindcss':
-      specifier: ^3.17.0
-      version: 3.17.0
    '@types/fs-extra':
      specifier: ^11.0.4
      version: 11.0.4
@@ -153,9 +150,6 @@ catalogs:
    eslint-plugin-storybook:
      specifier: ^9.1.6
      version: 9.1.6
-    eslint-plugin-tailwindcss:
-      specifier: 4.0.0-beta.0
-      version: 4.0.0-beta.0
    eslint-plugin-unused-imports:
      specifier: ^4.2.0
      version: 4.2.0
@@ -519,9 +513,6 @@ importers:
      '@trivago/prettier-plugin-sort-imports':
        specifier: 'catalog:'
        version: 5.2.2(@vue/compiler-sfc@3.5.13)(prettier@3.6.2)
-      '@types/eslint-plugin-tailwindcss':
-        specifier: 'catalog:'
-        version: 3.17.0
      '@types/fs-extra':
        specifier: 'catalog:'
        version: 11.0.4
@@ -570,9 +561,6 @@ importers:
      eslint-plugin-storybook:
        specifier: 'catalog:'
        version: 9.1.6(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
-      eslint-plugin-tailwindcss:
-        specifier: 'catalog:'
-        version: 4.0.0-beta.0(tailwindcss@4.1.12)
      eslint-plugin-unused-imports:
        specifier: 'catalog:'
        version: 4.2.0(@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))
@@ -3155,9 +3143,6 @@ packages:
  '@types/diff-match-patch@1.0.36':
    resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==}

-  '@types/eslint-plugin-tailwindcss@3.17.0':
-    resolution: {integrity: sha512-ucQGf2YIdTcndYcxRU3UdZgmhUHsOlbIF4BaRtl0op+7k2JmqM2i3aXZ6XIcfZgVq1ZKov7VM5c/BR81ukmkyg==}
-
  '@types/estree@1.0.5':
    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}

@@ -4700,12 +4685,6 @@ packages:
      eslint: '>=8'
      storybook: ^9.1.6

-  eslint-plugin-tailwindcss@4.0.0-beta.0:
-    resolution: {integrity: sha512-WWCajZgQu38Sd67ZCl2W6i3MRzqB0d+H8s4qV9iB6lBJbsDOIpIlj6R1Fj2FXkoWErbo05pZnZYbCGIU9o/DsA==}
-    engines: {node: '>=18.12.0'}
-    peerDependencies:
-      tailwindcss: ^3.4.0 || ^4.0.0
-
  eslint-plugin-unused-imports@4.2.0:
    resolution: {integrity: sha512-hLbJ2/wnjKq4kGA9AUaExVFIbNzyxYdVo49QZmKCnhk5pc9wcYRbfgLHvWJ8tnsdcseGhoUAddm9gn/lt+d74w==}
    peerDependencies:
@@ -7163,11 +7142,6 @@ packages:
    resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
    engines: {node: '>=10.0.0'}

-  tailwind-api-utils@1.0.3:
-    resolution: {integrity: sha512-KpzUHkH1ug1sq4394SLJX38ZtpeTiqQ1RVyFTTSY2XuHsNSTWUkRo108KmyyrMWdDbQrLYkSHaNKj/a3bmA4sQ==}
-    peerDependencies:
-      tailwindcss: ^3.3.0 || ^4.0.0 || ^4.0.0-beta
-
  tailwind-merge@2.6.0:
    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}

@@ -7626,6 +7600,9 @@ packages:
  vue-component-type-helpers@3.1.1:
    resolution: {integrity: sha512-B0kHv7qX6E7+kdc5nsaqjdGZ1KwNKSUQDWGy7XkTYT7wFsOpkEyaJ1Vq79TjwrrtuLRgizrTV7PPuC4rRQo+vw==}

+  vue-component-type-helpers@3.1.3:
+    resolution: {integrity: sha512-V1dOD8XYfstOKCnXbWyEJIrhTBMwSyNjv271L1Jlx9ExpNlCSuqOs3OdWrGJ0V544zXufKbcYabi/o+gK8lyfQ==}
+
  vue-demi@0.14.10:
    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
    engines: {node: '>=12'}
@@ -10308,7 +10285,7 @@ snapshots:
      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
      type-fest: 2.19.0
      vue: 3.5.13(typescript@5.9.2)
-      vue-component-type-helpers: 3.1.1
+      vue-component-type-helpers: 3.1.3

  '@swc/helpers@0.5.17':
    dependencies:
@@ -10613,8 +10590,6 @@ snapshots:

  '@types/diff-match-patch@1.0.36': {}

-  '@types/eslint-plugin-tailwindcss@3.17.0': {}
-
  '@types/estree@1.0.5': {}

  '@types/estree@1.0.8': {}
@@ -12380,14 +12355,6 @@ snapshots:
      - supports-color
      - typescript

-  eslint-plugin-tailwindcss@4.0.0-beta.0(tailwindcss@4.1.12):
-    dependencies:
-      fast-glob: 3.3.3
-      postcss: 8.5.6
-      synckit: 0.11.11
-      tailwind-api-utils: 1.0.3(tailwindcss@4.1.12)
-      tailwindcss: 4.1.12
-
  eslint-plugin-unused-imports@4.2.0(@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2)):
    dependencies:
      eslint: 9.35.0(jiti@2.4.2)
@@ -15431,13 +15398,6 @@ snapshots:
      string-width: 4.2.3
      strip-ansi: 6.0.1

-  tailwind-api-utils@1.0.3(tailwindcss@4.1.12):
-    dependencies:
-      enhanced-resolve: 5.18.3
-      jiti: 2.5.1
-      local-pkg: 1.1.2
-      tailwindcss: 4.1.12
-
  tailwind-merge@2.6.0: {}

  tailwindcss-primeui@0.6.1(tailwindcss@4.1.12):
@@ -15983,6 +15943,8 @@ snapshots:

  vue-component-type-helpers@3.1.1: {}

+  vue-component-type-helpers@3.1.3: {}
+
  vue-demi@0.14.10(vue@3.5.13(typescript@5.9.2)):
    dependencies:
      vue: 3.5.13(typescript@5.9.2)
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -30,7 +30,6 @@ catalog:
  '@storybook/vue3-vite': ^9.1.1
  '@tailwindcss/vite': ^4.1.12
  '@trivago/prettier-plugin-sort-imports': ^5.2.0
-  '@types/eslint-plugin-tailwindcss': ^3.17.0
  '@types/fs-extra': ^11.0.4
  '@types/jsdom': ^21.1.7
  '@types/node': ^20.14.8
@@ -52,7 +51,6 @@ catalog:
  eslint-plugin-import-x: ^4.16.1
  eslint-plugin-prettier: ^5.5.4
  eslint-plugin-storybook: ^9.1.6
-  eslint-plugin-tailwindcss: 4.0.0-beta.0
  eslint-plugin-unused-imports: ^4.2.0
  eslint-plugin-vue: ^10.4.0
  firebase: ^11.6.0
@@ -64,6 +62,7 @@ catalog:
  knip: ^5.62.0
  lint-staged: ^15.2.7
  markdown-table: ^3.0.4
+  mixpanel-browser: ^2.71.0
  nx: 21.4.1
  picocolors: ^1.1.1
  pinia: ^2.1.7
@@ -99,7 +98,6 @@ catalog:
  zod: ^3.23.8
  zod-to-json-schema: ^3.24.1
  zod-validation-error: ^3.3.0
-  mixpanel-browser: ^2.71.0

 cleanupUnusedCatalogs: true

--- a/src/assets/palettes/dark.json
+++ b/src/assets/palettes/dark.json
@@ -52,7 +52,7 @@
    "comfy_base": {
      "fg-color": "#fff",
      "bg-color": "#202020",
-      "comfy-menu-bg": "#353535",
+      "comfy-menu-bg": "#11141a",
      "comfy-menu-secondary-bg": "#303030",
      "comfy-input-bg": "#222",
      "input-text": "#ddd",
--- a/src/assets/palettes/light.json
+++ b/src/assets/palettes/light.json
@@ -68,7 +68,12 @@
      "content-fg": "#222",
      "content-hover-bg": "#adadad",
      "content-hover-fg": "#222",
-      "bar-shadow": "rgba(16, 16, 16, 0.25) 0 0 0.5rem"
+      "bar-shadow": "rgba(16, 16, 16, 0.25) 0 0 0.5rem",
+      "interface-panel-box-shadow": "1px 1px 8px 0 rgba(0, 0, 0, 0.2)",
+      "interface-panel-drop-shadow": "1px 1px 4px rgba(0, 0, 0, 0.4)",
+      "interface-panel-hover-surface": "var(--color-gray-200)",
+      "interface-panel-selected-surface": "color-mix(in srgb, var(--interface-panel-surface) 78%, var(--contrast-mix-color))",
+      "contrast-mix-color": "#000"
    }
  }
 }
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -42,7 +42,7 @@
          <slot name="topmenu" :sidebar-panel-visible="sidebarPanelVisible" />

          <Splitter
-            class="splitter-overlay splitter-overlay-bottom mr-1 mb-1 ml-1 flex-1"
+            class="splitter-overlay splitter-overlay-bottom mx-1 mb-1 flex-1"
            layout="vertical"
            :pt:gutter="
              'rounded-tl-lg rounded-tr-lg ' +
--- a/src/components/MenuHamburger.vue
+++ b/src/components/MenuHamburger.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    v-show="workspaceState.focusMode"
-    class="comfy-menu-hamburger no-drag top-0 right-0"
+    class="comfy-menu-hamburger no-drag right-0 top-0"
  >
    <Button
      v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -5,7 +5,7 @@
    </div>

    <div
-      class="actionbar-container pointer-events-auto mx-1 flex h-12 items-center rounded-lg px-2 shadow-md"
+      class="actionbar-container shadow-interface pointer-events-auto mx-1 flex h-12 items-center rounded-lg border border-[var(--interface-stroke)] px-2"
    >
      <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
      <div
@@ -48,6 +48,5 @@ onMounted(() => {
 <style scoped>
 .actionbar-container {
  background-color: var(--comfy-menu-bg);
-  border: 1px solid var(--p-panel-border-color);
 }
 </style>
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -10,7 +10,7 @@
    </div>

    <Panel
-      class="pointer-events-auto z-1000"
+      class="z-1000 pointer-events-auto"
      :style="style"
      :class="panelClass"
      :pt="{
@@ -18,7 +18,7 @@
        content: { class: isDocked ? 'p-0' : 'p-1' }
      }"
    >
-      <div ref="panelRef" class="flex items-center select-none">
+      <div ref="panelRef" class="flex select-none items-center">
        <span
          ref="dragHandleRef"
          :class="
@@ -258,7 +258,9 @@ const panelClass = computed(() =>
  cn(
    'actionbar pointer-events-auto z1000',
    isDragging.value && 'select-none pointer-events-none',
-    isDocked.value ? 'p-0 static mr-2 border-none bg-transparent' : 'fixed'
+    isDocked.value
+      ? 'p-0 static mr-2 border-none bg-transparent'
+      : 'fixed shadow-interface'
  )
 )
 </script>
--- a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
+++ b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
@@ -7,7 +7,7 @@
        class="flex flex-col"
      >
        <h3
-          class="subcategory-title mb-4 text-xs font-bold tracking-wide text-surface-600 uppercase dark-theme:text-surface-400"
+          class="subcategory-title text-surface-600 dark-theme:text-surface-400 mb-4 text-xs font-bold uppercase tracking-wide"
        >
          {{ getSubcategoryTitle(subcategory) }}
        </h3>
@@ -16,7 +16,7 @@
          <div
            v-for="command in subcategoryCommands"
            :key="command.id"
-            class="shortcut-item flex items-center justify-between rounded py-2 transition-colors duration-200 hover:bg-surface-100 dark-theme:hover:bg-surface-700"
+            class="shortcut-item hover:bg-surface-100 dark-theme:hover:bg-surface-700 flex items-center justify-between rounded py-2 transition-colors duration-200"
          >
            <div class="shortcut-info grow pr-4">
              <div class="shortcut-name text-sm font-medium">
@@ -32,7 +32,7 @@
                <span
                  v-for="key in command.keybinding!.combo.getKeySequences()"
                  :key="key"
-                  class="key-badge min-w-6 rounded border bg-surface-200 px-2 py-1 text-center font-mono text-xs dark-theme:bg-surface-600"
+                  class="key-badge bg-surface-200 dark-theme:bg-surface-600 min-w-6 rounded border px-2 py-1 text-center font-mono text-xs"
                >
                  {{ formatKey(key) }}
                </span>
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -1,9 +1,6 @@
 <template>
-  <div
-    ref="rootEl"
-    class="relative h-full w-full overflow-hidden bg-neutral-900"
-  >
-    <div class="p-terminal h-full w-full rounded-none p-2">
+  <div ref="rootEl" class="relative size-full overflow-hidden bg-neutral-900">
+    <div class="p-terminal size-full rounded-none p-2">
      <div ref="terminalEl" class="terminal-host h-full" />
    </div>
    <Button
--- a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full bg-transparent">
+  <div class="size-full bg-transparent">
    <p v-if="errorMessage" class="p-4 text-center">
      {{ errorMessage }}
    </p>
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="subgraph-breadcrumb w-auto drop-shadow-md"
+    class="subgraph-breadcrumb w-auto drop-shadow-[var(--interface-panel-drop-shadow)]"
    :class="{
      'subgraph-breadcrumb-collapse': collapseTabs,
      'subgraph-breadcrumb-overflow': overflowingTabs
@@ -201,8 +201,8 @@ onUpdated(() => {
 :deep(.p-breadcrumb-separator),
 :deep(.p-breadcrumb-item) {
  @apply h-12;
-  border-top: 1px solid var(--p-panel-border-color);
-  border-bottom: 1px solid var(--p-panel-border-color);
+  border-top: 1px solid var(--interface-stroke);
+  border-bottom: 1px solid var(--interface-stroke);
  background-color: var(--comfy-menu-bg);
 }

@@ -214,7 +214,7 @@ onUpdated(() => {
  @apply rounded-l-lg;
  /* Then collapse the root workflow */
  flex-shrink: 5000;
-  border-left: 1px solid var(--p-panel-border-color);
+  border-left: 1px solid var(--interface-stroke);

  .p-breadcrumb-item-link {
    padding-left: var(--p-breadcrumb-item-padding);
@@ -225,7 +225,7 @@ onUpdated(() => {
  @apply rounded-r-lg;
  /* Then collapse the active item */
  flex-shrink: 1;
-  border-right: 1px solid var(--p-panel-border-color);
+  border-right: 1px solid var(--interface-stroke);
 }

 :deep(.p-breadcrumb-item-link:hover),
--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -38,7 +38,7 @@
    v-if="isEditing"
    ref="itemInputRef"
    v-model="itemLabel"
-    class="fixed z-10000 px-2 py-2 text-[.8rem]"
+    class="z-10000 fixed p-2 text-[.8rem]"
    @blur="inputBlur(false)"
    @click.stop
    @keydown.enter="inputBlur(true)"
--- a/src/components/card/CardDescription.vue
+++ b/src/components/card/CardDescription.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="line-clamp-2 h-7 text-xs text-zinc-500 dark-theme:text-zinc-400">
+  <div class="dark-theme:text-zinc-400 line-clamp-2 h-7 text-xs text-zinc-500">
    <slot></slot>
  </div>
 </template>
--- a/src/components/card/CardTop.vue
+++ b/src/components/card/CardTop.vue
@@ -1,6 +1,6 @@
 <template>
  <div :class="topStyle">
-    <slot class="absolute top-0 left-0 h-full w-full"></slot>
+    <slot class="absolute left-0 top-0 size-full"></slot>

    <div v-if="slots['top-left']" :class="slotClasses['top-left']">
      <slot name="top-left"></slot>
--- a/src/components/common/FormImageUpload.vue
+++ b/src/components/common/FormImageUpload.vue
@@ -2,7 +2,7 @@
  <div class="image-upload-wrapper">
    <div class="flex items-center gap-2">
      <div
-        class="preview-box flex h-16 w-16 items-center justify-center rounded border p-2"
+        class="preview-box flex size-16 items-center justify-center rounded border p-2"
        :class="{ 'bg-smoke-100 dark-theme:bg-smoke-800': !modelValue }"
      >
        <img
@@ -10,7 +10,7 @@
          :src="modelValue"
          class="max-h-full max-w-full object-contain"
        />
-        <i v-else class="pi pi-image text-xl text-smoke-400" />
+        <i v-else class="pi pi-image text-smoke-400 text-xl" />
      </div>

      <div class="flex flex-col gap-2">
--- a/src/components/common/LazyImage.vue
+++ b/src/components/common/LazyImage.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    ref="containerRef"
-    class="relative flex h-full w-full items-center justify-center overflow-hidden"
+    class="relative flex size-full items-center justify-center overflow-hidden"
    :class="containerClass"
  >
    <Skeleton
@@ -23,7 +23,7 @@
    />
    <div
      v-if="hasError"
-      class="absolute inset-0 flex items-center justify-center bg-surface-50 text-muted dark-theme:bg-surface-800"
+      class="bg-surface-50 text-muted dark-theme:bg-surface-800 absolute inset-0 flex items-center justify-center"
    >
      <img
        src="/assets/images/default-template.png"
--- a/src/components/common/NoResultsPlaceholder.vue
+++ b/src/components/common/NoResultsPlaceholder.vue
@@ -5,7 +5,7 @@
        <div class="flex flex-col items-center">
          <i :class="icon" style="font-size: 3rem; margin-bottom: 1rem" />
          <h3>{{ title }}</h3>
-          <p :class="textClass" class="text-center whitespace-pre-line">
+          <p :class="textClass" class="whitespace-pre-line text-center">
            {{ message }}
          </p>
          <Button
--- a/src/components/common/UserAvatar.test.ts
+++ b/src/components/common/UserAvatar.test.ts
@@ -56,7 +56,7 @@ describe('UserAvatar', () => {
    const avatar = wrapper.findComponent(Avatar)
    expect(avatar.exists()).toBe(true)
    expect(avatar.props('image')).toBeNull()
-    expect(avatar.props('icon')).toBe('pi pi-user')
+    expect(avatar.props('icon')).toBe('icon-[lucide--user]')
  })

  it('renders with default icon when provided photo Url is null', () => {
@@ -67,7 +67,7 @@ describe('UserAvatar', () => {
    const avatar = wrapper.findComponent(Avatar)
    expect(avatar.exists()).toBe(true)
    expect(avatar.props('image')).toBeNull()
-    expect(avatar.props('icon')).toBe('pi pi-user')
+    expect(avatar.props('icon')).toBe('icon-[lucide--user]')
  })

  it('falls back to icon when image fails to load', async () => {
@@ -82,7 +82,7 @@ describe('UserAvatar', () => {
    avatar.vm.$emit('error')
    await nextTick()

-    expect(avatar.props('icon')).toBe('pi pi-user')
+    expect(avatar.props('icon')).toBe('icon-[lucide--user]')
  })

  it('uses provided ariaLabel', () => {
--- a/src/components/common/UserAvatar.vue
+++ b/src/components/common/UserAvatar.vue
@@ -1,7 +1,9 @@
 <template>
  <Avatar
+    class="dark-theme:bg-[var(--interface-panel-selected-surface)] bg-gray-200"
    :image="photoUrl ?? undefined"
-    :icon="hasAvatar ? undefined : 'pi pi-user'"
+    :icon="hasAvatar ? undefined : 'icon-[lucide--user]'"
+    :pt:icon:class="{ 'size-4': !hasAvatar }"
    shape="circle"
    :aria-label="ariaLabel ?? $t('auth.login.userAvatar')"
    @error="handleImageError"
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -36,7 +36,7 @@
    </template>

    <template #contentFilter>
-      <div class="relative flex flex-wrap gap-2 px-6 pt-2 pb-4">
+      <div class="relative flex flex-wrap gap-2 px-6 pb-4 pt-2">
        <!-- Model Filter -->
        <MultiSelect
          v-model="selectedModelObjects"
@@ -97,7 +97,7 @@
      </div>
      <div
        v-if="!isLoading"
-        class="text-neutral px-6 pt-4 pb-2 text-2xl font-semibold"
+        class="text-neutral px-6 pb-2 pt-4 text-2xl font-semibold"
      >
        <span>
          {{ pageTitle }}
@@ -111,7 +111,7 @@
        v-if="!isLoading && filteredTemplates.length === 0"
        class="flex h-64 flex-col items-center justify-center text-neutral-500"
      >
-        <i class="mb-4 icon-[lucide--search] h-12 w-12 opacity-50" />
+        <i class="icon-[lucide--search] mb-4 size-12 opacity-50" />
        <p class="mb-2 text-lg">
          {{ $t('templateWorkflows.noResults', 'No templates found') }}
        </p>
@@ -128,7 +128,7 @@
        <!-- Title -->
        <span
          v-if="isLoading"
-          class="inline-block h-8 w-48 animate-pulse rounded bg-dialog-surface"
+          class="bg-dialog-surface inline-block h-8 w-48 animate-pulse rounded"
        ></span>

        <!-- Template Cards Grid -->
@@ -149,9 +149,7 @@
            <template #top>
              <CardTop ratio="landscape">
                <template #default>
-                  <div
-                    class="h-full w-full animate-pulse bg-dialog-surface"
-                  ></div>
+                  <div class="bg-dialog-surface size-full animate-pulse"></div>
                </template>
              </CardTop>
            </template>
@@ -159,10 +157,10 @@
              <CardBottom>
                <div class="px-4 py-3">
                  <div
-                    class="mb-2 h-6 animate-pulse rounded bg-dialog-surface"
+                    class="bg-dialog-surface mb-2 h-6 animate-pulse rounded"
                  ></div>
                  <div
-                    class="h-4 animate-pulse rounded bg-dialog-surface"
+                    class="bg-dialog-surface h-4 animate-pulse rounded"
                  ></div>
                </div>
              </CardBottom>
@@ -187,9 +185,7 @@
              <CardTop ratio="square">
                <template #default>
                  <!-- Template Thumbnail -->
-                  <div
-                    class="relative h-full w-full overflow-hidden rounded-lg"
-                  >
+                  <div class="relative size-full overflow-hidden rounded-lg">
                    <template v-if="template.mediaType === 'audio'">
                      <AudioThumbnail :src="getBaseThumbnailSrc(template)" />
                    </template>
@@ -252,7 +248,7 @@
                    </template>
                    <ProgressSpinner
                      v-if="loadingTemplate === template.name"
-                      class="absolute inset-0 z-10 m-auto h-12 w-12"
+                      class="absolute inset-0 z-10 m-auto size-12"
                    />
                  </div>
                </template>
@@ -289,7 +285,7 @@
                  <div class="flex justify-between gap-2">
                    <div class="flex-1">
                      <p
-                        class="m-0 line-clamp-2 text-sm text-muted"
+                        class="text-muted m-0 line-clamp-2 text-sm"
                        :title="getTemplateDescription(template)"
                      >
                        {{ getTemplateDescription(template) }}
@@ -328,9 +324,7 @@
            <template #top>
              <CardTop ratio="square">
                <template #default>
-                  <div
-                    class="h-full w-full animate-pulse bg-dialog-surface"
-                  ></div>
+                  <div class="bg-dialog-surface size-full animate-pulse"></div>
                </template>
              </CardTop>
            </template>
@@ -338,10 +332,10 @@
              <CardBottom>
                <div class="px-4 py-3">
                  <div
-                    class="mb-2 h-6 animate-pulse rounded bg-dialog-surface"
+                    class="bg-dialog-surface mb-2 h-6 animate-pulse rounded"
                  ></div>
                  <div
-                    class="h-4 animate-pulse rounded bg-dialog-surface"
+                    class="bg-dialog-surface h-4 animate-pulse rounded"
                  ></div>
                </div>
              </CardBottom>
@@ -356,7 +350,7 @@
        ref="loadTrigger"
        class="mt-4 flex h-4 w-full items-center justify-center"
      >
-        <div v-if="isLoadingMore" class="text-sm text-muted">
+        <div v-if="isLoadingMore" class="text-muted text-sm">
          {{ $t('templateWorkflows.loadingMore', 'Loading more...') }}
        </div>
      </div>
@@ -364,7 +358,7 @@
      <!-- Results Summary -->
      <div
        v-if="!isLoading"
-        class="mt-6 px-6 text-sm text-neutral-600 dark-theme:text-neutral-400"
+        class="dark-theme:text-neutral-400 mt-6 px-6 text-sm text-neutral-600"
      >
        {{
          $t('templateWorkflows.resultsCount', {
--- a/src/components/dialog/content/ApiNodesSignInContent.vue
+++ b/src/components/dialog/content/ApiNodesSignInContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-110 max-w-96 flex-col gap-4 p-2">
+  <div class="h-110 flex max-w-96 flex-col gap-4 p-2">
    <div class="mb-2 text-2xl font-medium">
      {{ t('apiNodesSignInDialog.title') }}
    </div>
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/src/components/dialog/content/ErrorDialogContent.vue
@@ -30,7 +30,7 @@
    <template v-if="reportOpen">
      <Divider />
      <ScrollPanel class="h-[400px] w-full max-w-[80vw]">
-        <pre class="break-words whitespace-pre-wrap">{{ reportContent }}</pre>
+        <pre class="whitespace-pre-wrap break-words">{{ reportContent }}</pre>
      </ScrollPanel>
      <Divider />
    </template>
--- a/src/components/dialog/content/MissingCoreNodesMessage.vue
+++ b/src/components/dialog/content/MissingCoreNodesMessage.vue
@@ -3,7 +3,7 @@
    v-if="hasMissingCoreNodes"
    severity="info"
    icon="pi pi-info-circle"
-    class="mx-2 my-2"
+    class="m-2"
    :pt="{
      root: { class: 'flex-col' },
      text: { class: 'flex-1' }
@@ -25,7 +25,7 @@
        class="ml-4"
      >
        <div
-          class="text-sm font-medium text-surface-600 dark-theme:text-surface-400"
+          class="text-surface-600 dark-theme:text-surface-400 text-sm font-medium"
        >
          {{
            $t('loadWorkflowWarning.coreNodesFromVersion', {
@@ -33,7 +33,7 @@
            })
          }}
        </div>
-        <div class="ml-4 text-sm text-surface-500 dark-theme:text-surface-500">
+        <div class="text-surface-500 dark-theme:text-surface-500 ml-4 text-sm">
          {{ getUniqueNodeNames(nodes).join(', ') }}
        </div>
      </div>
--- a/src/components/dialog/content/SignInContent.vue
+++ b/src/components/dialog/content/SignInContent.vue
@@ -8,7 +8,7 @@
    <template v-else>
      <!-- Header -->
      <div class="mb-8 flex flex-col gap-4">
-        <h1 class="my-0 text-2xl leading-normal font-medium">
+        <h1 class="my-0 text-2xl font-medium leading-normal">
          {{ isSignIn ? t('auth.login.title') : t('auth.signup.title') }}
        </h1>
        <p class="my-0 text-base">
@@ -88,12 +88,12 @@
        >
          <img
            src="/assets/images/comfy-logo-mono.svg"
-            class="mr-2 h-5 w-5"
+            class="mr-2 size-5"
            :alt="$t('g.comfy')"
          />
          {{ t('auth.login.useApiKey') }}
        </Button>
-        <small class="text-center text-muted">
+        <small class="text-muted text-center">
          {{ t('auth.apiKey.helpText') }}
          <a
            :href="`${COMFY_PLATFORM_BASE_URL}/login`"
@@ -115,7 +115,7 @@
      </div>

      <!-- Terms & Contact -->
-      <p class="mt-8 text-xs text-muted">
+      <p class="text-muted mt-8 text-xs">
        {{ t('auth.login.termsText') }}
        <a
          href="https://www.comfy.org/terms-of-service"
--- a/src/components/dialog/content/TopUpCreditsDialogContent.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContent.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex w-96 flex-col gap-10 p-2">
    <div v-if="isInsufficientCredits" class="flex flex-col gap-4">
-      <h1 class="my-0 text-2xl leading-normal font-medium">
+      <h1 class="my-0 text-2xl font-medium leading-normal">
        {{ $t('credits.topUp.insufficientTitle') }}
      </h1>
      <p class="my-0 text-base">
@@ -12,7 +12,7 @@
    <!-- Balance Section -->
    <div class="flex items-center justify-between">
      <div class="flex w-full flex-col gap-2">
-        <div class="text-base text-muted">
+        <div class="text-muted text-base">
          {{ $t('credits.yourCreditBalance') }}
        </div>
        <div class="flex w-full items-center justify-between">
@@ -30,7 +30,7 @@

    <!-- Amount Input Section -->
    <div class="flex flex-col gap-2">
-      <span class="text-sm text-muted"
+      <span class="text-muted text-sm"
        >{{ $t('credits.topUp.quickPurchase') }}:</span
      >
      <div class="grid grid-cols-[2fr_1fr] gap-2">
--- a/src/components/dialog/content/credit/CreditTopUpOption.vue
+++ b/src/components/dialog/content/credit/CreditTopUpOption.vue
@@ -21,7 +21,7 @@
    />
    <span v-else class="text-xl">{{ amount }}</span>
  </div>
-  <ProgressSpinner v-if="loading" class="h-8 w-8" />
+  <ProgressSpinner v-if="loading" class="size-8" />
  <Button
    v-else
    :severity="preselected ? 'primary' : 'secondary'"
--- a/src/components/dialog/content/setting/CreditsPanel.vue
+++ b/src/components/dialog/content/setting/CreditsPanel.vue
@@ -8,7 +8,7 @@
      <Divider />

      <div class="flex flex-col gap-2">
-        <h3 class="text-sm font-medium text-muted">
+        <h3 class="text-muted text-sm font-medium">
          {{ $t('credits.yourCreditBalance') }}
        </h3>
        <div class="flex items-center justify-between">
@@ -28,7 +28,7 @@
            height="1rem"
            class="text-xs"
          />
-          <div v-else-if="formattedLastUpdateTime" class="text-xs text-muted">
+          <div v-else-if="formattedLastUpdateTime" class="text-muted text-xs">
            {{ $t('credits.lastUpdated') }}: {{ formattedLastUpdateTime }}
          </div>
          <Button
@@ -59,7 +59,7 @@
            <Column field="title" :header="$t('g.name')">
              <template #body="{ data }">
                <div class="text-sm font-medium">{{ data.title }}</div>
-                <div class="text-xs text-muted">{{ data.timestamp }}</div>
+                <div class="text-muted text-xs">{{ data.timestamp }}</div>
              </template>
            </Column>
            <Column field="amount" :header="$t('g.amount')">
--- a/src/components/dialog/content/setting/PanelTemplate.vue
+++ b/src/components/dialog/content/setting/PanelTemplate.vue
@@ -1,6 +1,6 @@
 <template>
-  <TabPanel :value="props.value" class="h-full w-full" :class="props.class">
-    <div class="flex h-full w-full flex-col gap-2">
+  <TabPanel :value="props.value" class="size-full" :class="props.class">
+    <div class="flex size-full flex-col gap-2">
      <slot name="header" />
      <ScrollPanel class="h-0 grow pr-2">
        <slot />
--- a/src/components/dialog/content/setting/UsageLogsTable.vue
+++ b/src/components/dialog/content/setting/UsageLogsTable.vue
@@ -50,7 +50,7 @@
                <div class="font-semibold">
                  {{ data.params?.api_name || 'API' }}
                </div>
-                <div class="text-sm text-smoke-400">
+                <div class="text-smoke-400 text-sm">
                  {{ $t('credits.model') }}: {{ data.params?.model || '-' }}
                </div>
              </div>
--- a/src/components/dialog/content/setting/UserPanel.vue
+++ b/src/components/dialog/content/setting/UserPanel.vue
@@ -35,7 +35,7 @@
          <h3 class="font-medium">
            {{ $t('userSettings.provider') }}
          </h3>
-          <div class="flex items-center gap-1 text-muted">
+          <div class="text-muted flex items-center gap-1">
            <i :class="providerIcon" />
            {{ providerName }}
            <Button
@@ -54,7 +54,7 @@

        <ProgressSpinner
          v-if="loading"
-          class="mt-4 h-8 w-8"
+          class="mt-4 size-8"
          style="--pc-spinner-color: #000"
        />
        <div v-else class="mt-4 flex flex-col gap-2">
--- a/src/components/dialog/content/signin/ApiKeyForm.vue
+++ b/src/components/dialog/content/signin/ApiKeyForm.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="flex flex-col gap-6">
    <div class="mb-8 flex flex-col gap-4">
-      <h1 class="my-0 text-2xl leading-normal font-medium">
+      <h1 class="my-0 text-2xl font-medium leading-normal">
        {{ t('auth.apiKey.title') }}
      </h1>
      <div class="flex flex-col gap-2">
-        <p class="my-0 text-base text-muted">
+        <p class="text-muted my-0 text-base">
          {{ t('auth.apiKey.description') }}
        </p>
        <a
--- a/src/components/dialog/content/signin/SignInForm.vue
+++ b/src/components/dialog/content/signin/SignInForm.vue
@@ -34,7 +34,7 @@
          {{ t('auth.login.passwordLabel') }}
        </label>
        <span
-          class="cursor-pointer text-base font-medium text-muted select-none"
+          class="text-muted cursor-pointer select-none text-base font-medium"
          :class="{
            'text-link-disabled': !$form.email?.value || $form.email?.invalid
          }"
@@ -60,7 +60,7 @@
    </div>

    <!-- Submit Button -->
-    <ProgressSpinner v-if="loading" class="h-8 w-8" />
+    <ProgressSpinner v-if="loading" class="size-8" />
    <Button
      v-else
      type="submit"
--- a/src/components/graph/CanvasModeSelector.vue
+++ b/src/components/graph/CanvasModeSelector.vue
@@ -2,18 +2,18 @@
  <Button
    ref="buttonRef"
    severity="secondary"
-    class="group h-8 rounded-none! bg-interface-panel-surface p-0 transition-none! hover:rounded-lg! hover:bg-button-hover-surface!"
+    class="rounded-none! bg-interface-panel-surface transition-none! hover:rounded-lg! hover:bg-button-hover-surface! group h-8 p-0"
    :style="buttonStyles"
    @click="toggle"
  >
    <template #default>
      <div class="flex items-center gap-1 pr-0.5">
        <div
-          class="rounded-lg bg-button-active-surface p-2 group-hover:bg-button-hover-surface"
+          class="bg-button-active-surface group-hover:bg-button-hover-surface rounded-lg p-2"
        >
-          <i :class="currentModeIcon" class="block h-4 w-4" />
+          <i :class="currentModeIcon" class="block size-4" />
        </div>
-        <i class="icon-[lucide--chevron-down] block h-4 w-4 pr-1.5" />
+        <i class="icon-[lucide--chevron-down] block size-4 pr-1.5" />
      </div>
    </template>
  </Button>
@@ -29,27 +29,27 @@
  >
    <div class="flex flex-col gap-1">
      <div
-        class="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+        class="hover:bg-node-component-surface-hovered flex cursor-pointer items-center justify-between px-3 py-2 text-sm"
        @click="setMode('select')"
      >
        <div class="flex items-center gap-2">
-          <i class="icon-[lucide--mouse-pointer-2] h-4 w-4" />
+          <i class="icon-[lucide--mouse-pointer-2] size-4" />
          <span>{{ $t('graphCanvasMenu.select') }}</span>
        </div>
-        <span class="text-[9px] text-text-primary">{{
+        <span class="text-text-primary text-[9px]">{{
          unlockCommandText
        }}</span>
      </div>

      <div
-        class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+        class="hover:bg-node-component-surface-hovered flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm"
        @click="setMode('hand')"
      >
        <div class="flex items-center gap-2">
-          <i class="icon-[lucide--hand] h-4 w-4" />
+          <i class="icon-[lucide--hand] size-4" />
          <span>{{ $t('graphCanvasMenu.hand') }}</span>
        </div>
-        <span class="text-[9px] text-text-primary">{{ lockCommandText }}</span>
+        <span class="text-text-primary text-[9px]">{{ lockCommandText }}</span>
      </div>
    </div>
  </Popover>
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -5,12 +5,12 @@
  <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady">
    <template v-if="showUI && workflowTabsPosition === 'Topbar'" #workflow-tabs>
      <div
-        class="workflow-tabs-container pointer-events-auto relative h-9.5 w-full"
+        class="workflow-tabs-container h-9.5 pointer-events-auto relative w-full"
      >
        <!-- Native drag area for Electron -->
        <div
          v-if="isNativeWindow() && workflowTabsPosition !== 'Topbar'"
-          class="app-drag fixed top-0 left-0 z-10 h-[var(--comfy-topbar-height)] w-full"
+          class="app-drag fixed left-0 top-0 z-10 h-[var(--comfy-topbar-height)] w-full"
        />
        <div class="flex h-full items-center">
          <WorkflowTabs />
@@ -23,7 +23,7 @@
    </template>
    <template v-if="showUI" #side-bar-panel>
      <div
-        class="sidebar-content-container h-full w-full overflow-x-hidden overflow-y-auto"
+        class="sidebar-content-container size-full overflow-y-auto overflow-x-hidden"
      >
        <ExtensionSlot v-if="activeSidebarTab" :extension="activeSidebarTab" />
      </div>
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -5,20 +5,22 @@
    <!-- Backdrop -->
    <div
      v-if="hasActivePopup"
-      class="fixed inset-0 z-1200"
+      class="z-1200 fixed inset-0"
      @click="hideModal"
    ></div>

    <ButtonGroup
-      class="absolute right-0 bottom-0 z-[1200] flex-row gap-1 border-[1px] border-node-border bg-interface-panel-surface p-2"
-      :style="stringifiedMinimapStyles.buttonGroupStyles"
+      class="bg-interface-panel-surface absolute bottom-0 right-0 z-[1200] flex-row gap-1 border border-[var(--interface-stroke)] p-2"
+      :style="{
+        ...stringifiedMinimapStyles.buttonGroupStyles
+      }"
      @wheel="canvasInteractions.handleWheel"
    >
      <CanvasModeSelector
        :button-styles="stringifiedMinimapStyles.buttonStyles"
      />

-      <div class="h-[27px] w-[1px] self-center bg-node-divider" />
+      <div class="bg-node-divider h-[27px] w-px self-center" />

      <Button
        v-tooltip.top="fitViewTooltip"
@@ -26,11 +28,11 @@
        icon="pi pi-expand"
        :aria-label="fitViewTooltip"
        :style="stringifiedMinimapStyles.buttonStyles"
-        class="h-8 w-8 bg-interface-panel-surface p-0 hover:bg-button-hover-surface!"
+        class="bg-interface-panel-surface hover:bg-button-hover-surface! size-8 p-0"
        @click="() => commandStore.execute('Comfy.Canvas.FitView')"
      >
        <template #icon>
-          <i class="icon-[lucide--focus] h-4 w-4" />
+          <i class="icon-[lucide--focus] size-4" />
        </template>
      </Button>

@@ -47,11 +49,11 @@
      >
        <span class="inline-flex items-center gap-1 px-2 text-xs">
          <span>{{ canvasStore.appScalePercentage }}%</span>
-          <i class="icon-[lucide--chevron-down] h-4 w-4" />
+          <i class="icon-[lucide--chevron-down] size-4" />
        </span>
      </Button>

-      <div class="h-[27px] w-[1px] self-center bg-node-divider" />
+      <div class="bg-node-divider h-[27px] w-px self-center" />

      <Button
        ref="minimapButton"
@@ -64,7 +66,7 @@
        @click="() => commandStore.execute('Comfy.Canvas.ToggleMinimap')"
      >
        <template #icon>
-          <i class="icon-[lucide--map] h-4 w-4" />
+          <i class="icon-[lucide--map] size-4" />
        </template>
      </Button>

@@ -85,7 +87,7 @@
        @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
      >
        <template #icon>
-          <i class="icon-[lucide--route-off] h-4 w-4" />
+          <i class="icon-[lucide--route-off] size-4" />
        </template>
      </Button>
    </ButtonGroup>
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -2,12 +2,12 @@
  <div
    ref="toolboxRef"
    style="transform: translate(var(--tb-x), var(--tb-y))"
-    class="pointer-events-none fixed top-0 left-0 z-40"
+    class="pointer-events-none fixed left-0 top-0 z-40"
  >
    <Transition name="slide-up">
      <Panel
        v-if="visible"
-        class="selection-toolbox pointer-events-auto rounded-lg border border-interface-stroke bg-interface-panel-surface"
+        class="selection-toolbox border-interface-stroke bg-interface-panel-surface pointer-events-auto rounded-lg border"
        :pt="{
          header: 'hidden',
          content: 'p-2 h-12 flex flex-row gap-1'
--- a/src/components/graph/modals/ZoomControlsModal.vue
+++ b/src/components/graph/modals/ZoomControlsModal.vue
@@ -1,51 +1,51 @@
 <template>
  <div
    v-if="visible"
-    class="absolute right-0 bottom-[62px] z-1300 flex w-[250px] justify-center border-0! bg-inherit!"
+    class="z-1300 border-0! bg-inherit! absolute bottom-[62px] right-0 flex w-[250px] justify-center"
  >
    <div
-      class="w-4/5 rounded-lg border border-node-border bg-interface-panel-surface p-2 text-text-primary shadow-lg select-none"
+      class="border-node-border bg-interface-panel-surface text-text-primary w-4/5 select-none rounded-lg border p-2 shadow-lg"
      :style="filteredMinimapStyles"
      @click.stop
    >
      <div class="flex flex-col gap-1">
        <div
-          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+          class="hover:bg-node-component-surface-hovered flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm"
          @mousedown="startRepeat('Comfy.Canvas.ZoomIn')"
          @mouseup="stopRepeat"
          @mouseleave="stopRepeat"
        >
          <span class="font-medium">{{ $t('graphCanvasMenu.zoomIn') }}</span>
-          <span class="text-[9px] text-text-primary">{{
+          <span class="text-text-primary text-[9px]">{{
            zoomInCommandText
          }}</span>
        </div>

        <div
-          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+          class="hover:bg-node-component-surface-hovered flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm"
          @mousedown="startRepeat('Comfy.Canvas.ZoomOut')"
          @mouseup="stopRepeat"
          @mouseleave="stopRepeat"
        >
          <span class="font-medium">{{ $t('graphCanvasMenu.zoomOut') }}</span>
-          <span class="text-[9px] text-text-primary">{{
+          <span class="text-text-primary text-[9px]">{{
            zoomOutCommandText
          }}</span>
        </div>

        <div
-          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+          class="hover:bg-node-component-surface-hovered flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm"
          @click="executeCommand('Comfy.Canvas.FitView')"
        >
          <span class="font-medium">{{ $t('zoomControls.zoomToFit') }}</span>
-          <span class="text-[9px] text-text-primary">{{
+          <span class="text-text-primary text-[9px]">{{
            zoomToFitCommandText
          }}</span>
        </div>

        <div
          ref="zoomInputContainer"
-          class="zoomInputContainer flex items-center gap-1 rounded bg-input-surface p-2"
+          class="zoomInputContainer bg-input-surface flex items-center gap-1 rounded p-2"
        >
          <InputNumber
            ref="zoomInput"
@@ -60,7 +60,7 @@
            @input="applyZoom"
            @keyup.enter="applyZoom"
          />
-          <span class="flex-shrink-0 text-sm text-text-primary">%</span>
+          <span class="text-text-primary shrink-0 text-sm">%</span>
        </div>
      </div>
    </div>
--- a/src/components/graph/selectionToolbox/BypassButton.vue
+++ b/src/components/graph/selectionToolbox/BypassButton.vue
@@ -11,7 +11,7 @@
    @click="toggleBypass"
  >
    <template #icon>
-      <i class="icon-[lucide--ban] h-4 w-4" />
+      <i class="icon-[lucide--ban] size-4" />
    </template>
  </Button>
 </template>
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -12,11 +12,11 @@
    >
      <div class="flex items-center gap-1 px-0">
        <i
-          class="pi pi-circle-fill h-4 w-4"
+          class="pi pi-circle-fill size-4"
          :style="{ color: currentColor ?? '' }"
        />
        <i
-          class="pi pi-chevron-down h-4 w-4 py-1"
+          class="pi pi-chevron-down size-4 py-1"
          :style="{ fontSize: '0.5rem' }"
        />
      </div>
--- a/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
+++ b/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
@@ -11,7 +11,7 @@
    @click="() => commandStore.execute('Comfy.Graph.UnpackSubgraph')"
  >
    <template #icon>
-      <i class="icon-[lucide--expand] h-4 w-4" />
+      <i class="icon-[lucide--expand] size-4" />
    </template>
  </Button>
  <Button
--- a/src/components/graph/selectionToolbox/ExecuteButton.vue
+++ b/src/components/graph/selectionToolbox/ExecuteButton.vue
@@ -4,7 +4,7 @@
      value: t('selectionToolbox.executeButton.tooltip'),
      showDelay: 1000
    }"
-    class="size-8 bg-azure-400 !p-0 dark-theme:bg-azure-600"
+    class="bg-azure-400 dark-theme:bg-azure-600 size-8 !p-0"
    text
    @mouseenter="() => handleMouseEnter()"
    @mouseleave="() => handleMouseLeave()"
--- a/src/components/graph/selectionToolbox/FrameNodes.vue
+++ b/src/components/graph/selectionToolbox/FrameNodes.vue
@@ -9,7 +9,7 @@
    severity="secondary"
    @click="frameNodes"
  >
-    <i class="icon-[lucide--frame] h-4 w-4" />
+    <i class="icon-[lucide--frame] size-4" />
  </Button>
 </template>

--- a/src/components/graph/selectionToolbox/InfoButton.vue
+++ b/src/components/graph/selectionToolbox/InfoButton.vue
@@ -9,7 +9,7 @@
    severity="secondary"
    @click="toggleHelp"
  >
-    <i class="icon-[lucide--info] h-4 w-4" />
+    <i class="icon-[lucide--info] size-4" />
  </Button>
 </template>

--- a/src/components/graph/selectionToolbox/MenuOptionItem.vue
+++ b/src/components/graph/selectionToolbox/MenuOptionItem.vue
@@ -1,19 +1,19 @@
 <template>
  <div
    v-if="option.type === 'divider'"
-    class="my-1 h-px bg-smoke-200 dark-theme:bg-zinc-700"
+    class="bg-smoke-200 dark-theme:bg-zinc-700 my-1 h-px"
  />
  <div
    v-else
    role="button"
-    class="group flex cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm text-text-primary hover:bg-interface-menu-component-surface-hovered"
+    class="text-text-primary hover:bg-interface-menu-component-surface-hovered group flex cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm"
    @click="handleClick"
  >
-    <i v-if="option.icon" :class="[option.icon, 'h-4 w-4']" />
+    <i v-if="option.icon" :class="[option.icon, 'size-4']" />
    <span class="flex-1">{{ option.label }}</span>
    <span
      v-if="option.shortcut"
-      class="flex h-3.5 min-w-3.5 items-center justify-center rounded bg-interface-menu-keybind-surface-default px-1 py-0 text-xxs"
+      class="bg-interface-menu-keybind-surface-default text-xxs flex h-3.5 min-w-3.5 items-center justify-center rounded px-1 py-0"
    >
      {{ option.shortcut }}
    </span>
@@ -29,9 +29,9 @@
      :class="{
        'rounded-4xl bg-azure-400 dark-theme:bg-azure-600':
          option.badge === 'new',
-        'rounded-4xl bg-slate-100 dark-theme:bg-black':
+        'rounded-4xl dark-theme:bg-black bg-slate-100':
          option.badge === 'deprecated',
-        'h-4 gap-2.5 px-1 text-[9px] text-white uppercase': true
+        'h-4 gap-2.5 px-1 text-[9px] uppercase text-white': true
      }"
    />
  </div>
--- a/src/components/graph/selectionToolbox/NodeOptionsButton.vue
+++ b/src/components/graph/selectionToolbox/NodeOptionsButton.vue
@@ -7,11 +7,11 @@
    }"
    data-testid="more-options-button"
    text
-    class="h-8 w-8 px-0"
+    class="size-8 px-0"
    severity="secondary"
    @click="handleClick"
  >
-    <i class="icon-[lucide--more-vertical] h-4 w-4" />
+    <i class="icon-[lucide--more-vertical] size-4" />
  </Button>
 </template>

--- a/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
+++ b/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
@@ -7,7 +7,7 @@
    data-testid="refresh-button"
    @click="refreshSelected"
  >
-    <i class="icon-[lucide--refresh-cw] h-4 w-4" />
+    <i class="icon-[lucide--refresh-cw] size-4" />
  </Button>
 </template>

--- a/src/components/graph/selectionToolbox/SubmenuPopover.vue
+++ b/src/components/graph/selectionToolbox/SubmenuPopover.vue
@@ -28,15 +28,15 @@
      >
        <div
          v-if="subOption.color"
-          class="h-5 w-5 rounded-full border border-smoke-300 dark-theme:border-zinc-600"
+          class="border-smoke-300 dark-theme:border-zinc-600 size-5 rounded-full border"
          :style="{ backgroundColor: subOption.color }"
        />
        <template v-else-if="!subOption.color">
          <i
            v-if="isShapeSelected(subOption)"
-            class="icon-[lucide--check] h-4 w-4 flex-shrink-0"
+            class="icon-[lucide--check] size-4 shrink-0"
          />
-          <div v-else class="w-4 flex-shrink-0" />
+          <div v-else class="w-4 shrink-0" />
          <span>{{ subOption.label }}</span>
        </template>
      </div>
--- a/src/components/graph/selectionToolbox/VerticalDivider.vue
+++ b/src/components/graph/selectionToolbox/VerticalDivider.vue
@@ -1,5 +1,5 @@
 <template>
  <div
-    class="h-6 w-px self-center bg-smoke-300/10 dark-theme:bg-smoke-600/10"
+    class="bg-smoke-300/10 dark-theme:bg-smoke-600/10 h-6 w-px self-center"
  />
 </template>
--- a/src/components/graph/widgets/ChatHistoryWidget.vue
+++ b/src/components/graph/widgets/ChatHistoryWidget.vue
@@ -1,7 +1,7 @@
 <template>
  <ScrollPanel
    ref="scrollPanelRef"
-    class="min-h-[400px] w-full rounded-lg px-2 py-2 text-xs"
+    class="min-h-[400px] w-full rounded-lg p-2 text-xs"
    :pt="{ content: { id: 'chat-scroll-content' } }"
  >
    <div v-for="(item, i) in parsedHistory" :key="i" class="mb-4">
@@ -13,12 +13,12 @@
      >
        <div class="mb-1 flex justify-end">
          <div
-            class="max-w-[80%] rounded-xl bg-smoke-300 px-4 py-1 text-right dark-theme:bg-smoke-800"
+            class="bg-smoke-300 dark-theme:bg-smoke-800 max-w-[80%] rounded-xl px-4 py-1 text-right"
          >
-            <div class="text-[12px] break-words">{{ item.prompt }}</div>
+            <div class="break-words text-[12px]">{{ item.prompt }}</div>
          </div>
        </div>
-        <div class="mr-1 mb-2 flex justify-end">
+        <div class="mb-2 mr-1 flex justify-end">
          <CopyButton :text="item.prompt" />
          <Button
            v-tooltip="
@@ -26,7 +26,7 @@
            "
            text
            rounded
-            class="h-4! w-4! p-1! text-smoke-400 transition hover:text-smoke-600 hover:dark-theme:text-smoke-200"
+            class="h-4! w-4! p-1! text-smoke-400 hover:text-smoke-600 hover:dark-theme:text-smoke-200 transition"
            pt:icon:class="text-xs!"
            :icon="editIndex === i ? 'pi pi-times' : 'pi pi-pencil'"
            :aria-label="
--- a/src/components/graph/widgets/chatHistory/CopyButton.vue
+++ b/src/components/graph/widgets/chatHistory/CopyButton.vue
@@ -5,7 +5,7 @@
    "
    text
    rounded
-    class="h-4! w-6! p-1! text-smoke-400 transition hover:text-smoke-600 hover:dark-theme:text-smoke-200"
+    class="h-4! w-6! p-1! text-smoke-400 hover:text-smoke-600 hover:dark-theme:text-smoke-200 transition"
    pt:icon:class="text-xs!"
    :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
    :aria-label="
--- a/src/components/graph/widgets/chatHistory/ResponseBlurb.vue
+++ b/src/components/graph/widgets/chatHistory/ResponseBlurb.vue
@@ -2,7 +2,7 @@
  <span>
    <div class="mb-1 flex justify-start">
      <div class="max-w-[80%] rounded-xl px-4 py-1">
-        <div class="text-[12px] break-words">
+        <div class="break-words text-[12px]">
          <slot />
        </div>
      </div>
--- a/src/components/icons/ComfyLogoTransparent.vue
+++ b/src/components/icons/ComfyLogoTransparent.vue
@@ -4,13 +4,11 @@
    :width="size"
    :height="size"
    viewBox="0 0 18 18"
-    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M14.8193 0.600586C15.1248 0.600586 15.3296 0.70893 15.459 0.881836C15.5914 1.05888 15.6471 1.33774 15.5527 1.66895L14.8037 4.30176C14.7063 4.64386 14.4729 4.97024 14.1641 5.21191C13.8544 5.45415 13.496 5.58984 13.1699 5.58984H13.1689L9.5791 5.59668H7.90625C7.52654 5.59668 7.19496 5.84986 7.09082 6.21289L5.69434 11.0889C5.63007 11.3133 5.66134 11.5534 5.77734 11.7529L5.83203 11.8359C5.99177 12.0491 6.24252 12.1758 6.50977 12.1758H6.51074L8.88281 12.1709H11.4971C11.7643 12.171 11.9541 12.254 12.084 12.3906L12.1357 12.4521C12.2685 12.6295 12.3249 12.9089 12.2305 13.2402L11.4805 15.8721C11.383 16.2144 11.1498 16.5415 10.8408 16.7832C10.5314 17.0252 10.1736 17.161 9.84766 17.1611H9.84668L6.25684 17.168H3.64258C3.33762 17.1679 3.13349 17.0588 3.00391 16.8857C2.87135 16.7087 2.81482 16.43 2.90918 16.0986L3.39551 14.3887C3.46841 14.1327 3.41794 13.8576 3.25879 13.6445V13.6436C3.09901 13.4303 2.84745 13.3037 2.58008 13.3037H1.18066C0.875088 13.3037 0.670398 13.1953 0.541016 13.0225C0.408483 12.8451 0.351891 12.5655 0.446289 12.2344L2.11914 6.38965L2.30371 5.74707V5.74609C2.40139 5.40341 2.63456 5.07671 2.94336 4.83496C3.25302 4.59258 3.61143 4.45705 3.9375 4.45703H5.6123C5.94484 4.45703 6.24083 4.26316 6.37891 3.9707L6.42773 3.83984L6.98145 1.89551C7.07894 1.55317 7.31212 1.22614 7.62109 0.984375C7.93074 0.742127 8.2892 0.606445 8.61523 0.606445H8.61621L12.1982 0.600586H14.8193Z"
-      :stroke="color"
-      stroke-width="1"
+      v-bind="attributes"
    />
  </svg>
 </template>
@@ -22,11 +20,18 @@ interface Props {
  size?: number | string
  color?: string
  class?: string
+  mode?: 'outline' | 'fill'
 }
 const {
  size = 16,
  color = 'currentColor',
+  mode = 'outline',
  class: className
 } = defineProps<Props>()
 const iconClass = computed(() => className || '')
+const attributes = computed(() => ({
+  stroke: mode === 'outline' ? color : undefined,
+  strokeWidth: mode === 'outline' ? 1 : undefined,
+  fill: mode === 'fill' ? color : 'none'
+}))
 </script>
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -24,7 +24,7 @@
      v-if="showSearchBox || showSelectedCount || showClearButton"
      #header
    >
-      <div class="flex flex-col px-2 pt-2 pb-0">
+      <div class="flex flex-col px-2 pb-0 pt-2">
        <SearchBox
          v-if="showSearchBox"
          v-model="searchQuery"
@@ -39,7 +39,7 @@
        >
          <span
            v-if="showSelectedCount"
-            class="px-1 text-sm text-neutral-400 dark-theme:text-zinc-500"
+            class="dark-theme:text-zinc-500 px-1 text-sm text-neutral-400"
          >
            {{
              selectedCount > 0
@@ -52,22 +52,22 @@
            :label="$t('g.clearAll')"
            type="transparent"
            size="fit-content"
-            class="text-sm text-blue-500 dark-theme:text-blue-600"
+            class="dark-theme:text-blue-600 text-sm text-blue-500"
            @click.stop="selectedItems = []"
          />
        </div>
-        <div class="my-4 h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
+        <div class="dark-theme:bg-zinc-700 my-4 h-px bg-zinc-200"></div>
      </div>
    </template>

    <!-- Trigger value (keep text scale identical) -->
    <template #value>
-      <span class="text-sm text-zinc-700 dark-theme:text-smoke-200">
+      <span class="dark-theme:text-smoke-200 text-sm text-zinc-700">
        {{ label }}
      </span>
      <span
        v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 text-xs font-semibold text-white dark-theme:bg-blue-500"
+        class="dark-theme:bg-blue-500 pointer-events-none absolute -right-2 -top-2 z-10 flex size-5 items-center justify-center rounded-full bg-blue-400 text-xs font-semibold text-white"
      >
        {{ selectedCount }}
      </span>
@@ -82,7 +82,7 @@
    <template #option="slotProps">
      <div class="flex items-center gap-2" :style="popoverStyle">
        <div
-          class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+          class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
          :class="
            slotProps.selected
              ? 'bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -26,11 +26,11 @@
        <slot name="icon" />
        <span
          v-if="slotProps.value !== null && slotProps.value !== undefined"
-          class="text-zinc-700 dark-theme:text-smoke-200"
+          class="dark-theme:text-smoke-200 text-zinc-700"
        >
          {{ getLabel(slotProps.value) }}
        </span>
-        <span v-else class="text-zinc-700 dark-theme:text-smoke-200">
+        <span v-else class="dark-theme:text-smoke-200 text-zinc-700">
          {{ label }}
        </span>
      </div>
@@ -50,7 +50,7 @@
        <span class="truncate">{{ option.name }}</span>
        <i
          v-if="selected"
-          class="icon-[lucide--check] text-neutral-600 dark-theme:text-white"
+          class="icon-[lucide--check] dark-theme:text-white text-neutral-600"
        />
      </div>
    </template>
--- a/src/components/load3d/Load3D.vue
+++ b/src/components/load3d/Load3D.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="relative h-full w-full"
+    class="relative size-full"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
@@ -59,7 +59,7 @@
    />
    <div
      v-if="enable3DViewer"
-      class="pointer-events-auto absolute top-12 right-2 z-20"
+      class="pointer-events-auto absolute right-2 top-12 z-20"
    >
      <ViewerControls :node="node" />
    </div>
--- a/src/components/load3d/Load3DAnimation.vue
+++ b/src/components/load3d/Load3DAnimation.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="relative h-full w-full"
+    class="relative size-full"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
@@ -34,7 +34,7 @@
      @up-direction-change="listenUpDirectionChange"
      @recording-status-change="listenRecordingStatusChange"
    />
-    <div class="pointer-events-none absolute top-0 left-0 h-full w-full">
+    <div class="pointer-events-none absolute left-0 top-0 size-full">
      <Load3DControls
        :input-spec="inputSpec"
        :background-color="backgroundColor"
@@ -69,7 +69,7 @@
    </div>
    <div
      v-if="showRecordingControls"
-      class="pointer-events-auto absolute top-12 right-2 z-20"
+      class="pointer-events-auto absolute right-2 top-12 z-20"
    >
      <RecordingControls
        :node="node"
--- a/src/components/load3d/Load3DAnimationControls.vue
+++ b/src/components/load3d/Load3DAnimationControls.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    v-if="animations && animations.length > 0"
-    class="pointer-events-auto absolute top-0 left-0 z-10 flex w-full items-center justify-center gap-2 pt-2"
+    class="pointer-events-auto absolute left-0 top-0 z-10 flex w-full items-center justify-center gap-2 pt-2"
  >
    <Button class="p-button-rounded p-button-text" @click="togglePlay">
      <i
--- a/src/components/load3d/Load3DControls.vue
+++ b/src/components/load3d/Load3DControls.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-smoke-700/30"
+    class="bg-smoke-700/30 pointer-events-auto absolute left-2 top-12 z-20 flex flex-col rounded-lg"
  >
    <div class="show-menu relative">
      <Button class="p-button-rounded p-button-text" @click="toggleMenu">
@@ -9,7 +9,7 @@

      <div
        v-show="isMenuOpen"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
+        class="absolute left-12 top-0 rounded-lg bg-black/50 shadow-lg"
      >
        <div class="flex flex-col">
          <Button
@@ -26,7 +26,7 @@
      </div>
    </div>

-    <div v-show="activeCategory" class="rounded-lg bg-smoke-700/30">
+    <div v-show="activeCategory" class="bg-smoke-700/30 rounded-lg">
      <SceneControls
        v-if="activeCategory === 'scene'"
        ref="sceneControlsRef"
--- a/src/components/load3d/Load3DScene.vue
+++ b/src/components/load3d/Load3DScene.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="container" class="comfy-load-3d relative h-full w-full">
+  <div ref="container" class="comfy-load-3d relative size-full">
    <LoadingOverlay ref="loadingOverlayRef" />
  </div>
 </template>
--- a/src/components/load3d/Load3dViewerContent.vue
+++ b/src/components/load3d/Load3dViewerContent.vue
@@ -9,7 +9,7 @@
    <div ref="mainContentRef" class="relative flex-1">
      <div
        ref="containerRef"
-        class="comfy-load-3d-viewer absolute h-full w-full"
+        class="comfy-load-3d-viewer absolute size-full"
        @resize="viewer.handleResize"
      />
    </div>
--- a/src/components/load3d/controls/CameraControls.vue
+++ b/src/components/load3d/controls/CameraControls.vue
@@ -18,7 +18,7 @@
      </Button>
      <div
        v-show="showFOV"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
+        class="absolute left-12 top-0 rounded-lg bg-black/50 p-4 shadow-lg"
        style="width: 150px"
      >
        <Slider
--- a/src/components/load3d/controls/ExportControls.vue
+++ b/src/components/load3d/controls/ExportControls.vue
@@ -15,7 +15,7 @@
      </Button>
      <div
        v-show="showExportFormats"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
+        class="absolute left-12 top-0 rounded-lg bg-black/50 shadow-lg"
      >
        <div class="flex flex-col">
          <Button
--- a/src/components/load3d/controls/LightControls.vue
+++ b/src/components/load3d/controls/LightControls.vue
@@ -15,7 +15,7 @@
      </Button>
      <div
        v-show="showLightIntensity"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
+        class="absolute left-12 top-0 rounded-lg bg-black/50 p-4 shadow-lg"
        style="width: 150px"
      >
        <Slider
--- a/src/components/load3d/controls/ModelControls.vue
+++ b/src/components/load3d/controls/ModelControls.vue
@@ -12,7 +12,7 @@
      </Button>
      <div
        v-show="showUpDirection"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
+        class="absolute left-12 top-0 rounded-lg bg-black/50 shadow-lg"
      >
        <div class="flex flex-col">
          <Button
@@ -43,7 +43,7 @@
      </Button>
      <div
        v-show="showMaterialMode"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
+        class="absolute left-12 top-0 rounded-lg bg-black/50 shadow-lg"
      >
        <div class="flex flex-col">
          <Button
@@ -74,7 +74,7 @@
      </Button>
      <div
        v-show="showEdgeThreshold"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
+        class="absolute left-12 top-0 rounded-lg bg-black/50 p-4 shadow-lg"
        style="width: 150px"
      >
        <label class="mb-1 block text-xs text-white"
--- a/src/components/load3d/controls/RecordingControls.vue
+++ b/src/components/load3d/controls/RecordingControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative rounded-lg bg-smoke-700/30">
+  <div class="bg-smoke-700/30 relative rounded-lg">
    <div class="flex flex-col gap-2">
      <Button
        class="p-button-rounded p-button-text"
--- a/src/components/load3d/controls/SceneControls.vue
+++ b/src/components/load3d/controls/SceneControls.vue
@@ -24,7 +24,7 @@
          ref="colorPickerRef"
          type="color"
          :value="backgroundColor"
-          class="pointer-events-none absolute m-0 h-0 w-0 p-0 opacity-0"
+          class="pointer-events-none absolute m-0 size-0 p-0 opacity-0"
          @input="
            updateBackgroundColor(($event.target as HTMLInputElement).value)
          "
@@ -45,7 +45,7 @@
          ref="imagePickerRef"
          type="file"
          accept="image/*"
-          class="pointer-events-none absolute m-0 h-0 w-0 p-0 opacity-0"
+          class="pointer-events-none absolute m-0 size-0 p-0 opacity-0"
          @change="uploadBackgroundImage"
        />
      </Button>
--- a/src/components/load3d/controls/ViewerControls.vue
+++ b/src/components/load3d/controls/ViewerControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative rounded-lg bg-smoke-700/30">
+  <div class="bg-smoke-700/30 relative rounded-lg">
    <div class="flex flex-col gap-2">
      <Button class="p-button-rounded p-button-text" @click="openIn3DViewer">
        <i
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -4,7 +4,7 @@
  >
    <div
      v-if="enableNodePreview"
-      class="comfy-vue-node-preview-container absolute top-[50px] left-[-350px]"
+      class="comfy-vue-node-preview-container absolute left-[-350px] top-[50px]"
    >
      <NodePreview
        v-if="hoveredSuggestion"
--- a/src/components/searchbox/NodeSearchItem.vue
+++ b/src/components/searchbox/NodeSearchItem.vue
@@ -15,7 +15,7 @@
      </div>
      <div
        v-if="showCategory"
-        class="option-category truncate text-sm font-light text-muted"
+        class="option-category text-muted truncate text-sm font-light"
      >
        {{ nodeDef.category.replaceAll('/', ' > ') }}
      </div>
--- a/src/components/sidebar/ComfyMenuButton.vue
+++ b/src/components/sidebar/ComfyMenuButton.vue
@@ -1,21 +1,23 @@
 <template>
  <div
-    class="comfy-menu-button-wrapper flex shrink-0 cursor-pointer flex-col items-center justify-center rounded-t-md p-2 transition-colors"
+    v-tooltip="{
+      value: t('sideToolbar.labels.menu'),
+      showDelay: 300,
+      hideDelay: 300
+    }"
+    class="comfy-menu-button-wrapper flex shrink-0 cursor-pointer flex-col items-center justify-center p-2 transition-colors"
    :class="{
      'comfy-menu-button-active': menuRef?.visible
    }"
    @click="menuRef?.toggle($event)"
  >
-    <ComfyLogoTransparent
-      alt="ComfyUI Logo"
-      class="comfyui-logo h-[18px] w-[18px]"
-    />
-
-    <span
-      v-if="!isSmall"
-      class="side-bar-button-label mt-1 text-center text-[10px]"
-      >{{ t('sideToolbar.labels.menu') }}</span
-    >
+    <div class="flex size-8 items-center justify-center rounded-lg bg-black">
+      <ComfyLogo
+        alt="ComfyUI Logo"
+        class="comfyui-logo size-[18px] text-white"
+        mode="fill"
+      />
+    </div>
  </div>

  <TieredMenu
@@ -57,7 +59,7 @@
        />
        <span
          v-if="item?.comfyCommand?.keybinding"
-          class="keybinding-tag ml-auto rounded border border-surface p-1 text-xs text-nowrap text-muted"
+          class="keybinding-tag border-surface text-muted ml-auto text-nowrap rounded border p-1 text-xs"
        >
          {{ item.comfyCommand.keybinding.combo.toString() }}
        </span>
@@ -75,7 +77,7 @@ import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
-import ComfyLogoTransparent from '@/components/icons/ComfyLogoTransparent.vue'
+import ComfyLogo from '@/components/icons/ComfyLogo.vue'
 import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useCommandStore } from '@/stores/commandStore'
@@ -95,10 +97,6 @@ const colorPaletteService = useColorPaletteService()
 const dialogStore = useDialogStore()
 const managerState = useManagerState()

-const { isSmall = false } = defineProps<{
-  isSmall?: boolean
-}>()
-
 const menuRef = ref<
  ({ dirty: boolean } & TieredMenuMethods & TieredMenuState) | null
 >(null)
@@ -276,12 +274,12 @@ const hasActiveStateSiblings = (item: MenuItem): boolean => {
 }

 .comfy-menu-button-wrapper:hover {
-  background: var(--p-button-text-secondary-hover-background);
+  background: var(--interface-panel-hover-surface);
 }

 .comfy-menu-button-active,
 .comfy-menu-button-active:hover {
-  background-color: var(--content-hover-bg);
+  background: var(--interface-panel-selected-surface);
 }

 .keybinding-tag {
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -1,12 +1,13 @@
 <template>
  <nav
    ref="sideToolbarRef"
-    class="side-tool-bar-container flex h-full flex-col items-center bg-transparent [.floating-sidebar]:-mr-2"
+    class="side-tool-bar-container [.floating-sidebar]:-mr-2 flex h-full flex-col items-center bg-transparent"
    :class="{
      'small-sidebar': isSmall,
      'connected-sidebar': isConnected,
      'floating-sidebar': !isConnected,
-      'overflowing-sidebar': isOverflowing
+      'overflowing-sidebar': isOverflowing,
+      'shadow-interface border-r border-[var(--interface-stroke)]': isConnected
    }"
  >
    <div
@@ -18,7 +19,7 @@
      "
    >
      <div ref="topToolbarRef" :class="groupClasses">
-        <ComfyMenuButton :is-small="isSmall" />
+        <ComfyMenuButton />
        <SidebarIcon
          v-for="tab in tabs"
          :key="tab.id"
@@ -114,7 +115,7 @@ const isOverflowing = ref(false)
 const groupClasses = computed(() =>
  cn(
    'sidebar-item-group pointer-events-auto flex flex-col items-center overflow-hidden flex-shrink-0' +
-      (isConnected.value ? '' : ' rounded-lg shadow-md')
+      (isConnected.value ? '' : ' rounded-lg shadow-interface')
  )
 )

@@ -183,7 +184,7 @@ onMounted(() => {
  --sidebar-padding: 4px;
  --sidebar-icon-size: 1rem;

-  --sidebar-default-floating-width: 56px;
+  --sidebar-default-floating-width: 48px;
  --sidebar-default-connected-width: calc(
    var(--sidebar-default-floating-width) + var(--sidebar-padding) * 2
  );
--- a/src/components/sidebar/SidebarIcon.vue
+++ b/src/components/sidebar/SidebarIcon.vue
@@ -86,7 +86,11 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 }

 .side-bar-button-selected {
-  background-color: var(--content-hover-bg);
+  background-color: var(--interface-panel-selected-surface);
+  color: var(--content-hover-fg);
+}
+.side-bar-button:hover {
+  background-color: var(--interface-panel-hover-surface);
  color: var(--content-hover-fg);
 }

--- a/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue
+++ b/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue
@@ -30,7 +30,7 @@
      <Button
        v-if="download.status === 'in_progress'"
        v-tooltip.top="t('electronFileDownload.pause')"
-        class="file-action-button h-[22px] w-[22px]"
+        class="file-action-button size-[22px]"
        size="small"
        rounded
        icon="pi pi-pause"
@@ -40,7 +40,7 @@
      <Button
        v-if="download.status === 'paused'"
        v-tooltip.top="t('electronFileDownload.resume')"
-        class="file-action-button h-[22px] w-[22px]"
+        class="file-action-button size-[22px]"
        size="small"
        rounded
        icon="pi pi-play"
@@ -50,7 +50,7 @@
      <Button
        v-if="['in_progress', 'paused'].includes(download.status ?? '')"
        v-tooltip.top="t('electronFileDownload.cancel')"
-        class="file-action-button p-red h-[22px] w-[22px]"
+        class="file-action-button p-red size-[22px]"
        size="small"
        rounded
        severity="danger"
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="container" class="model-lib-node-container h-full w-full">
+  <div ref="container" class="model-lib-node-container size-full">
    <TreeExplorerTreeNode :node="node">
      <template #before-label>
        <span v-if="modelPreviewUrl" class="model-lib-model-icon-container">
--- a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex h-full flex-col overflow-auto bg-(--p-tree-background)">
+  <div class="bg-(--p-tree-background) flex h-full flex-col overflow-auto">
    <div
-      class="flex items-center border-b border-(--p-divider-color) px-3 py-2"
+      class="border-(--p-divider-color) flex items-center border-b px-3 py-2"
    >
      <Button
        v-tooltip.bottom="$t('g.back')"
--- a/Show More
+++ b/Show More