From 482ad401d46995850d101d4d372631e4755adf37 Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Tue, 24 Feb 2026 21:23:52 -0800
Subject: [PATCH] fix: eradicate tailwind @apply usage in vue styles (#9146)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Remove Tailwind `@apply` from Vue styles across `src/` and
`apps/desktop-ui/src/` to align with Tailwind v4 guidance, replacing
usages with template utilities or native CSS while preserving behavior.

## Changes

- **What**:
- Batch 1: migrated low-risk template/style utility bundles out of
`@apply`.
- Batch 2: converted PrimeVue/`:deep()` override `@apply` blocks to
native CSS declarations.
- Batch 3: converted `src/components/node/NodeHelpContent.vue` markdown
styling from `@apply` to native CSS/token-based declarations.
- Batch 4: converted final desktop pseudo-element `@apply` styles and
removed stale `@reference` directives no longer required.
- Verified `rg -n "^\s*@apply\b" src apps -g "*.vue"` has no real CSS
`@apply` directives remaining (only known template false-positive event
binding in `NodeSearchContent.vue`).

## Review Focus

- Visual parity in components that previously depended on `@apply` in
`:deep()` selectors and markdown content:
  - topbar tabs/popovers, dialogs, breadcrumb, terminal overrides
  - desktop install/dialog/update/maintenance surfaces
  - node help markdown rendering
- Confirm no regressions from removal of now-unneeded `@reference`
directives.

## Screenshots (if applicable)

- No new screenshots included in this PR.
- Screenshot Playwright suite was run with `--grep="@screenshot"` and
reports baseline diffs in this environment (164 passed, 39 failed, 3
skipped) plus a teardown `EPERM` restore error on local path
`C:\Users\DrJKL\ComfyUI\LTXV\user`.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9146-fix-eradicate-tailwind-apply-usage-in-vue-styles-3116d73d3650813d8642e0bada13df32)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .stylelintrc.json                             |   2 +-
 apps/desktop-ui/src/assets/css/style.css      |  36 ++++
 .../tabs/terminal/BaseTerminal.vue            |  10 +-
 .../components/common/LanguageSelector.vue    |  12 +-
 .../install/InstallLocationPicker.vue         |  46 ++++-
 .../src/components/maintenance/TaskCard.vue   |  72 +++-----
 .../src/views/DesktopDialogView.vue           |  35 +---
 .../src/views/DesktopUpdateView.vue           |  17 +-
 apps/desktop-ui/src/views/InstallView.vue     |  20 ++-
 apps/desktop-ui/src/views/MaintenanceView.vue |   9 +-
 .../desktop-ui/src/views/NotSupportedView.vue |   5 +-
 apps/desktop-ui/src/views/ServerStartView.vue |   2 -
 browser_tests/fixtures/selectors.ts           |   7 +
 browser_tests/tests/selectionToolbox.spec.ts  |  74 ++++----
 .../tests/vueNodes/nodeStates/colors.spec.ts  |  15 +-
 docs/guidance/vue-components.md               |   4 +
 lint-staged.config.ts                         |  16 +-
 package.json                                  |   4 +-
 packages/design-system/src/css/style.css      |   1 +
 .../tabs/terminal/BaseTerminal.vue            |   7 +-
 .../breadcrumb/SubgraphBreadcrumb.vue         |  17 +-
 .../breadcrumb/SubgraphBreadcrumbItem.vue     |  10 +-
 src/components/common/FormItem.vue            |   8 +-
 src/components/common/SearchBox.vue           |   2 -
 src/components/common/SearchFilterChip.vue    |  42 ++---
 src/components/dialog/GlobalDialog.vue        |  22 ++-
 .../content/setting/KeybindingPanel.vue       |  31 ++--
 .../dialog/content/signin/SignInForm.test.ts  |   9 +-
 .../dialog/content/signin/SignInForm.vue      |  20 +--
 .../ColorPickerButton.test.ts                 |  38 +++-
 .../selectionToolbox/ColorPickerButton.vue    |  16 +-
 src/components/graph/widgets/DomWidget.vue    |  13 +-
 src/components/node/NodeHelpContent.vue       | 164 +++++++++++-------
 src/components/searchbox/NodeSearchFilter.vue |  16 +-
 src/components/sidebar/SideToolbar.vue        |   2 -
 src/components/sidebar/SidebarIcon.vue        |  17 +-
 .../sidebar/tabs/SidebarTabTemplate.vue       |  18 +-
 .../sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue |  10 +-
 src/components/topbar/WorkflowTabPopover.vue  |  37 ++--
 src/components/topbar/WorkflowTabs.vue        |  44 +++--
 40 files changed, 501 insertions(+), 429 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 26ce840f1e..4eaf9d1e23 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -40,12 +40,12 @@
     "block-no-empty": true,
     "no-descending-specificity": null,
     "no-duplicate-at-import-rules": true,
+    "at-rule-disallowed-list": ["apply"],
     "at-rule-no-unknown": [
       true,
       {
         "ignoreAtRules": [
           "tailwind",
-          "apply",
           "layer",
           "config",
           "theme",
diff --git a/apps/desktop-ui/src/assets/css/style.css b/apps/desktop-ui/src/assets/css/style.css
index 0eef377ae2..1ff895f064 100644
--- a/apps/desktop-ui/src/assets/css/style.css
+++ b/apps/desktop-ui/src/assets/css/style.css
@@ -4,3 +4,39 @@
   position: absolute;
   inset: 0;
 }
+
+.p-button-secondary {
+  border: none;
+  background-color: var(--color-neutral-600);
+  color: var(--color-white);
+}
+
+.p-button-secondary:hover {
+  background-color: var(--color-neutral-550);
+}
+
+.p-button-secondary:active {
+  background-color: var(--color-neutral-500);
+}
+
+.p-button-danger {
+  background-color: var(--color-coral-red-600);
+}
+
+.p-button-danger:hover {
+  background-color: var(--color-coral-red-500);
+}
+
+.p-button-danger:active {
+  background-color: var(--color-coral-red-400);
+}
+
+.task-div .p-card {
+  transition: opacity var(--default-transition-duration);
+  --p-card-background: var(--p-button-secondary-background);
+  opacity: 0.9;
+}
+
+.task-div .p-card:hover {
+  opacity: 1;
+}
diff --git a/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue b/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
index ca0dcf34ec..3bc8db4cf3 100644
--- a/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -101,13 +101,15 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@reference '../../../../assets/css/style.css';
-
+/* xterm renders its internal DOM outside Vue templates, so :deep selectors are
+ * required to style those generated nodes.
+ */
 :deep(.p-terminal) .xterm {
-  @apply overflow-hidden;
+  overflow: hidden;
 }
 
 :deep(.p-terminal) .xterm-screen {
-  @apply bg-neutral-900 overflow-hidden;
+  overflow: hidden;
+  background-color: var(--color-neutral-900);
 }
 </style>
diff --git a/apps/desktop-ui/src/components/common/LanguageSelector.vue b/apps/desktop-ui/src/components/common/LanguageSelector.vue
index 8853c105d0..d8cf45f7a0 100644
--- a/apps/desktop-ui/src/components/common/LanguageSelector.vue
+++ b/apps/desktop-ui/src/components/common/LanguageSelector.vue
@@ -187,13 +187,17 @@ async function onLocaleChange(event: SelectChangeEvent) {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 :deep(.p-dropdown-panel .p-dropdown-item) {
-  @apply transition-colors;
+  transition-property: color, background-color, border-color;
+  transition-duration: var(--default-transition-duration);
 }
 
 :deep(.p-dropdown) {
-  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-yellow/60 focus-visible:ring-offset-2;
+  &:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 2px var(--color-neutral-900),
+      0 0 0 4px color-mix(in srgb, var(--color-brand-yellow) 60%, transparent);
+  }
 }
 </style>
diff --git a/apps/desktop-ui/src/components/install/InstallLocationPicker.vue b/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
index f962ca56c8..9921df362b 100644
--- a/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
+++ b/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
@@ -269,26 +269,43 @@ const onFocus = async () => {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 :deep(.location-picker-accordion) {
-  @apply px-12;
+  padding-inline: calc(var(--spacing) * 12);
 
   .p-accordionpanel {
-    @apply border-0 bg-transparent;
+    border: 0;
+    background-color: transparent;
   }
 
   .p-accordionheader {
-    @apply bg-neutral-800/50 border-0 rounded-xl mt-2 hover:bg-neutral-700/50;
+    margin-top: calc(var(--spacing) * 2);
+    border: 0;
+    border-radius: var(--radius-xl);
+    background-color: color-mix(
+      in srgb,
+      var(--color-neutral-800) 50%,
+      transparent
+    );
     transition:
       background-color 0.2s ease,
       border-radius 0.5s ease;
+
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--color-neutral-700) 50%,
+        transparent
+      );
+    }
   }
 
   /* When panel is expanded, adjust header border radius */
   .p-accordionpanel-active {
     .p-accordionheader {
-      @apply rounded-t-xl rounded-b-none;
+      border-top-left-radius: var(--radius-xl);
+      border-top-right-radius: var(--radius-xl);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
     }
 
     .p-accordionheader-toggle-icon {
@@ -299,11 +316,24 @@ const onFocus = async () => {
   }
 
   .p-accordioncontent {
-    @apply bg-neutral-800/50 border-0 rounded-b-xl rounded-t-none;
+    border: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: var(--radius-xl);
+    border-bottom-left-radius: var(--radius-xl);
+    background-color: color-mix(
+      in srgb,
+      var(--color-neutral-800) 50%,
+      transparent
+    );
   }
 
   .p-accordioncontent-content {
-    @apply bg-transparent pt-3 pr-5 pb-5 pl-5;
+    background-color: transparent;
+    padding-top: calc(var(--spacing) * 3);
+    padding-right: calc(var(--spacing) * 5);
+    padding-bottom: calc(var(--spacing) * 5);
+    padding-left: calc(var(--spacing) * 5);
   }
 
   /* Override default chevron icons to use up/down */
diff --git a/apps/desktop-ui/src/components/maintenance/TaskCard.vue b/apps/desktop-ui/src/components/maintenance/TaskCard.vue
index e7d24d1004..ba120a371f 100644
--- a/apps/desktop-ui/src/components/maintenance/TaskCard.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskCard.vue
@@ -1,11 +1,20 @@
 <template>
   <div
-    class="task-div relative grid min-h-52 max-w-48"
-    :class="{ 'opacity-75': isLoading }"
+    :class="
+      cn(
+        'task-div group/task-card relative grid min-h-52 max-w-48',
+        isLoading && 'opacity-75'
+      )
+    "
   >
     <Card
-      class="relative h-full max-w-48 overflow-hidden"
-      :class="{ 'opacity-65': runner.state !== 'error' }"
+      :class="
+        cn(
+          'relative h-full max-w-48 overflow-hidden',
+          runner.state !== 'error' && 'opacity-65'
+        )
+      "
+      :pt="cardPt"
       v-bind="(({ onClick, ...rest }) => rest)($attrs)"
     >
       <template #header>
@@ -43,7 +52,7 @@
 
     <i
       v-if="!isLoading && runner.state === 'OK'"
-      class="task-card-ok pi pi-check"
+      class="pi pi-check pointer-events-none absolute -right-4 -bottom-4 col-span-full row-span-full z-10 text-[4rem] text-green-500 opacity-100 transition-opacity group-hover/task-card:opacity-20 [text-shadow:0.25rem_0_0.5rem_black]"
     />
   </div>
 </template>
@@ -55,6 +64,7 @@ import { computed } from 'vue'
 
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
+import { cn } from '@/utils/tailwindUtil'
 import { useMinLoadingDurationRef } from '@/utils/refUtil'
 
 const taskStore = useMaintenanceTaskStore()
@@ -83,51 +93,9 @@ const reactiveExecuting = computed(() => !!runner.value.executing)
 
 const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
 const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
+
+const cardPt = {
+  header: { class: 'z-0' },
+  body: { class: 'z-[1] grow justify-between' }
+}
 </script>
-
-<style scoped>
-@reference '../../assets/css/style.css';
-
-.task-card-ok {
-  @apply text-green-500 absolute -right-4 -bottom-4 opacity-100 row-span-full col-span-full transition-opacity;
-
-  font-size: 4rem;
-  text-shadow: 0.25rem 0 0.5rem black;
-  z-index: 10;
-}
-
-.p-card {
-  @apply transition-opacity;
-
-  --p-card-background: var(--p-button-secondary-background);
-  opacity: 0.9;
-
-  &.opacity-65 {
-    opacity: 0.4;
-  }
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-:deep(.p-card-header) {
-  z-index: 0;
-}
-
-:deep(.p-card-body) {
-  z-index: 1;
-  flex-grow: 1;
-  justify-content: space-between;
-}
-
-.task-div {
-  > i {
-    pointer-events: none;
-  }
-
-  &:hover > i {
-    opacity: 0.2;
-  }
-}
-</style>
diff --git a/apps/desktop-ui/src/views/DesktopDialogView.vue b/apps/desktop-ui/src/views/DesktopDialogView.vue
index 105117cab0..3fd28c35cf 100644
--- a/apps/desktop-ui/src/views/DesktopDialogView.vue
+++ b/apps/desktop-ui/src/views/DesktopDialogView.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
     <h1 class="font-inter font-semibold text-xl m-0 italic">
-      {{ t(`desktopDialogs.${id}.title`, title) }}
+      {{ $t(`desktopDialogs.${id}.title`, title) }}
     </h1>
     <p class="whitespace-pre-wrap">
-      {{ t(`desktopDialogs.${id}.message`, message) }}
+      {{ $t(`desktopDialogs.${id}.message`, message) }}
     </p>
     <div class="flex w-full gap-2">
       <Button
@@ -12,7 +12,7 @@
         :key="button.label"
         class="rounded-lg first:mr-auto"
         :label="
-          t(
+          $t(
             `desktopDialogs.${id}.buttons.${normalizeI18nKey(button.label)}`,
             button.label
           )
@@ -31,7 +31,6 @@ import { useRoute } from 'vue-router'
 
 import { getDialog } from '@/constants/desktopDialogs'
 import type { DialogAction } from '@/constants/desktopDialogs'
-import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
 const route = useRoute()
@@ -41,31 +40,3 @@ const handleButtonClick = async (button: DialogAction) => {
   await electronAPI().Dialog.clickButton(button.returnValue)
 }
 </script>
-
-<style scoped>
-@reference '../assets/css/style.css';
-
-.p-button-secondary {
-  @apply text-white border-none bg-neutral-600;
-}
-
-.p-button-secondary:hover {
-  @apply bg-neutral-550;
-}
-
-.p-button-secondary:active {
-  @apply bg-neutral-500;
-}
-
-.p-button-danger {
-  @apply bg-coral-red-600;
-}
-
-.p-button-danger:hover {
-  @apply bg-coral-red-500;
-}
-
-.p-button-danger:active {
-  @apply bg-coral-red-400;
-}
-</style>
diff --git a/apps/desktop-ui/src/views/DesktopUpdateView.vue b/apps/desktop-ui/src/views/DesktopUpdateView.vue
index 1cb9135e1b..9eac86c8c9 100644
--- a/apps/desktop-ui/src/views/DesktopUpdateView.vue
+++ b/apps/desktop-ui/src/views/DesktopUpdateView.vue
@@ -6,11 +6,11 @@
       <div class="relative m-8 text-center">
         <!-- Header -->
         <h1 class="download-bg pi-download text-4xl font-bold">
-          {{ t('desktopUpdate.title') }}
+          {{ $t('desktopUpdate.title') }}
         </h1>
 
         <div class="m-8">
-          <span>{{ t('desktopUpdate.description') }}</span>
+          <span>{{ $t('desktopUpdate.description') }}</span>
         </div>
 
         <ProgressSpinner class="m-8 w-48 h-48" />
@@ -19,7 +19,7 @@
         <Button
           style="transform: translateX(-50%)"
           class="fixed bottom-0 left-1/2 my-8"
-          :label="t('maintenance.consoleLogs')"
+          :label="$t('maintenance.consoleLogs')"
           icon="pi pi-desktop"
           icon-pos="left"
           severity="secondary"
@@ -28,8 +28,8 @@
 
         <TerminalOutputDrawer
           v-model="terminalVisible"
-          :header="t('g.terminal')"
-          :default-message="t('desktopUpdate.terminalDefaultMessage')"
+          :header="$t('g.terminal')"
+          :default-message="$t('desktopUpdate.terminalDefaultMessage')"
         />
       </div>
     </div>
@@ -44,7 +44,6 @@ import Toast from 'primevue/toast'
 import { onUnmounted, ref } from 'vue'
 
 import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
-import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
 import BaseViewTemplate from './templates/BaseViewTemplate.vue'
@@ -61,10 +60,10 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 .download-bg::before {
-  @apply m-0 absolute text-muted;
+  position: absolute;
+  margin: 0;
+  color: var(--muted-foreground);
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: 2rem;
diff --git a/apps/desktop-ui/src/views/InstallView.vue b/apps/desktop-ui/src/views/InstallView.vue
index 055b1f0272..dc199c8c08 100644
--- a/apps/desktop-ui/src/views/InstallView.vue
+++ b/apps/desktop-ui/src/views/InstallView.vue
@@ -183,33 +183,37 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 :deep(.p-steppanel) {
-  @apply mt-8 flex justify-center bg-transparent;
+  margin-top: calc(var(--spacing) * 8);
+  display: flex;
+  justify-content: center;
+  background-color: transparent;
 }
 
 /* Remove default padding/margin from StepPanels to make scrollbar flush */
 :deep(.p-steppanels) {
-  @apply p-0 m-0;
+  margin: 0;
+  padding: 0;
 }
 
 /* Ensure StepPanel content container has no top/bottom padding */
 :deep(.p-steppanel-content) {
-  @apply p-0;
+  padding: 0;
 }
 
 /* Custom overlay scrollbar for WebKit browsers (Electron, Chrome) */
 :deep(.p-steppanels::-webkit-scrollbar) {
-  @apply w-4;
+  width: calc(var(--spacing) * 4);
 }
 
 :deep(.p-steppanels::-webkit-scrollbar-track) {
-  @apply bg-transparent;
+  background-color: transparent;
 }
 
 :deep(.p-steppanels::-webkit-scrollbar-thumb) {
-  @apply bg-white/20 rounded-lg border-[4px] border-transparent;
+  border: 4px solid transparent;
+  border-radius: var(--radius-lg);
+  background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
   background-clip: content-box;
 }
 </style>
diff --git a/apps/desktop-ui/src/views/MaintenanceView.vue b/apps/desktop-ui/src/views/MaintenanceView.vue
index 0733f80fc2..4054092f0b 100644
--- a/apps/desktop-ui/src/views/MaintenanceView.vue
+++ b/apps/desktop-ui/src/views/MaintenanceView.vue
@@ -114,12 +114,12 @@ import Tag from 'primevue/tag'
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import RefreshButton from '@/components/common/RefreshButton.vue'
 import StatusTag from '@/components/maintenance/StatusTag.vue'
 import TaskListPanel from '@/components/maintenance/TaskListPanel.vue'
 import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
-import { t } from '@/i18n'
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceFilter } from '@/types/desktop/maintenanceTypes'
 import { electronAPI } from '@/utils/envUtil'
@@ -129,6 +129,7 @@ import BaseViewTemplate from './templates/BaseViewTemplate.vue'
 
 const electron = electronAPI()
 const toast = useToast()
+const { t } = useI18n()
 const taskStore = useMaintenanceTaskStore()
 const { clearResolved, processUpdate, refreshDesktopTasks } = taskStore
 
@@ -220,14 +221,14 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 :deep(.p-tag) {
   --p-tag-gap: 0.375rem;
 }
 
 .backspan::before {
-  @apply m-0 absolute text-muted;
+  position: absolute;
+  margin: 0;
+  color: var(--muted-foreground);
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: -2rem;
diff --git a/apps/desktop-ui/src/views/NotSupportedView.vue b/apps/desktop-ui/src/views/NotSupportedView.vue
index bb50a65ee2..ae0a00e57c 100644
--- a/apps/desktop-ui/src/views/NotSupportedView.vue
+++ b/apps/desktop-ui/src/views/NotSupportedView.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseViewTemplate>
-    <div class="sad-container">
+    <div class="sad-container grid items-center justify-evenly">
       <!-- Right side image -->
       <img
         class="sad-girl"
@@ -79,10 +79,7 @@ const continueToInstall = async () => {
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 .sad-container {
-  @apply grid items-center justify-evenly;
   grid-template-columns: 25rem 1fr;
 
   & > * {
diff --git a/apps/desktop-ui/src/views/ServerStartView.vue b/apps/desktop-ui/src/views/ServerStartView.vue
index f799b119b8..988a99b2d2 100644
--- a/apps/desktop-ui/src/views/ServerStartView.vue
+++ b/apps/desktop-ui/src/views/ServerStartView.vue
@@ -232,8 +232,6 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 /* Hide the xterm scrollbar completely */
 :deep(.p-terminal) .xterm-viewport {
   overflow: hidden !important;
diff --git a/browser_tests/fixtures/selectors.ts b/browser_tests/fixtures/selectors.ts
index 11994e860f..ff1fe58a7f 100644
--- a/browser_tests/fixtures/selectors.ts
+++ b/browser_tests/fixtures/selectors.ts
@@ -44,6 +44,12 @@ export const TestIds = {
   node: {
     titleInput: 'node-title-input'
   },
+  selectionToolbox: {
+    colorPickerButton: 'color-picker-button',
+    colorPickerCurrentColor: 'color-picker-current-color',
+    colorBlue: 'blue',
+    colorRed: 'red'
+  },
   widgets: {
     decrement: 'decrement',
     increment: 'increment',
@@ -74,6 +80,7 @@ export type TestIdValue =
   | (typeof TestIds.nodeLibrary)[keyof typeof TestIds.nodeLibrary]
   | (typeof TestIds.propertiesPanel)[keyof typeof TestIds.propertiesPanel]
   | (typeof TestIds.node)[keyof typeof TestIds.node]
+  | (typeof TestIds.selectionToolbox)[keyof typeof TestIds.selectionToolbox]
   | (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
   | (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
   | Exclude<
diff --git a/browser_tests/tests/selectionToolbox.spec.ts b/browser_tests/tests/selectionToolbox.spec.ts
index fb0966d808..5a89da6dd2 100644
--- a/browser_tests/tests/selectionToolbox.spec.ts
+++ b/browser_tests/tests/selectionToolbox.spec.ts
@@ -1,6 +1,8 @@
 import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
 
 import { comfyPageFixture } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 
 const test = comfyPageFixture
 
@@ -10,6 +12,17 @@ test.beforeEach(async ({ comfyPage }) => {
 const BLUE_COLOR = 'rgb(51, 51, 85)'
 const RED_COLOR = 'rgb(85, 51, 51)'
 
+const getColorPickerButton = (comfyPage: { page: Page }) =>
+  comfyPage.page.getByTestId(TestIds.selectionToolbox.colorPickerButton)
+
+const getColorPickerCurrentColor = (comfyPage: { page: Page }) =>
+  comfyPage.page.getByTestId(TestIds.selectionToolbox.colorPickerCurrentColor)
+
+const getColorPickerGroup = (comfyPage: { page: Page }) =>
+  comfyPage.page.getByRole('group').filter({
+    has: comfyPage.page.getByTestId(TestIds.selectionToolbox.colorBlue)
+  })
+
 test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
@@ -132,28 +145,24 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       await comfyPage.nodeOps.selectNodes(['KSampler'])
 
       // Color picker button should be visible
-      const colorPickerButton = comfyPage.page.locator(
-        '.selection-toolbox .pi-circle-fill'
-      )
+      const colorPickerButton = getColorPickerButton(comfyPage)
       await expect(colorPickerButton).toBeVisible()
 
       // Click color picker button
       await colorPickerButton.click()
 
       // Color picker dropdown should be visible
-      const colorPickerDropdown = comfyPage.page.locator(
-        '.color-picker-container'
-      )
-      await expect(colorPickerDropdown).toBeVisible()
+      const colorPickerGroup = getColorPickerGroup(comfyPage)
+      await expect(colorPickerGroup).toBeVisible()
 
       // Select a color (e.g., blue)
-      const blueColorOption = colorPickerDropdown.locator(
-        'i[data-testid="blue"]'
+      const blueColorOption = colorPickerGroup.getByTestId(
+        TestIds.selectionToolbox.colorBlue
       )
       await blueColorOption.click()
 
       // Dropdown should close after selection
-      await expect(colorPickerDropdown).not.toBeVisible()
+      await expect(colorPickerGroup).not.toBeVisible()
 
       // Node should have the selected color class/style
       // Note: Exact verification method depends on how color is applied to nodes
@@ -172,22 +181,21 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
         'CLIP Text Encode (Prompt)'
       ])
 
-      const colorPickerButton = comfyPage.page.locator(
-        '.selection-toolbox .pi-circle-fill'
-      )
+      const colorPickerButton = getColorPickerButton(comfyPage)
+      const colorPickerCurrentColor = getColorPickerCurrentColor(comfyPage)
 
       // Initially should show default color
       await expect(colorPickerButton).not.toHaveAttribute('color')
 
       // Click color picker and select a color
       await colorPickerButton.click()
-      const redColorOption = comfyPage.page.locator(
-        '.color-picker-container i[data-testid="red"]'
+      const redColorOption = getColorPickerGroup(comfyPage).getByTestId(
+        TestIds.selectionToolbox.colorRed
       )
       await redColorOption.click()
 
       // Button should now show the selected color
-      await expect(colorPickerButton).toHaveCSS('color', RED_COLOR)
+      await expect(colorPickerCurrentColor).toHaveCSS('color', RED_COLOR)
     })
 
     test('color picker shows mixed state for differently colored selections', async ({
@@ -195,17 +203,17 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     }) => {
       // Select first node and color it
       await comfyPage.nodeOps.selectNodes(['KSampler'])
-      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
-      await comfyPage.page
-        .locator('.color-picker-container i[data-testid="blue"]')
+      await getColorPickerButton(comfyPage).click()
+      await getColorPickerGroup(comfyPage)
+        .getByTestId(TestIds.selectionToolbox.colorBlue)
         .click()
       await comfyPage.nodeOps.selectNodes(['KSampler'])
 
       // Select second node and color it differently
       await comfyPage.nodeOps.selectNodes(['CLIP Text Encode (Prompt)'])
-      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
-      await comfyPage.page
-        .locator('.color-picker-container i[data-testid="red"]')
+      await getColorPickerButton(comfyPage).click()
+      await getColorPickerGroup(comfyPage)
+        .getByTestId(TestIds.selectionToolbox.colorRed)
         .click()
 
       // Select both nodes
@@ -215,9 +223,7 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       ])
 
       // Color picker should show null/mixed state
-      const colorPickerButton = comfyPage.page.locator(
-        '.selection-toolbox .pi-circle-fill'
-      )
+      const colorPickerButton = getColorPickerButton(comfyPage)
       await expect(colorPickerButton).not.toHaveAttribute('color')
     })
 
@@ -226,9 +232,9 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     }) => {
       // First color a node
       await comfyPage.nodeOps.selectNodes(['KSampler'])
-      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
-      await comfyPage.page
-        .locator('.color-picker-container i[data-testid="blue"]')
+      await getColorPickerButton(comfyPage).click()
+      await getColorPickerGroup(comfyPage)
+        .getByTestId(TestIds.selectionToolbox.colorBlue)
         .click()
 
       // Clear selection
@@ -238,10 +244,8 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       await comfyPage.nodeOps.selectNodes(['KSampler'])
 
       // Color picker button should show the correct color
-      const colorPickerButton = comfyPage.page.locator(
-        '.selection-toolbox .pi-circle-fill'
-      )
-      await expect(colorPickerButton).toHaveCSS('color', BLUE_COLOR)
+      const colorPickerCurrentColor = getColorPickerCurrentColor(comfyPage)
+      await expect(colorPickerCurrentColor).toHaveCSS('color', BLUE_COLOR)
     })
 
     test('colorization via color picker can be undone', async ({
@@ -249,9 +253,9 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     }) => {
       // Select a node and color it
       await comfyPage.nodeOps.selectNodes(['KSampler'])
-      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
-      await comfyPage.page
-        .locator('.color-picker-container i[data-testid="blue"]')
+      await getColorPickerButton(comfyPage).click()
+      await getColorPickerGroup(comfyPage)
+        .getByTestId(TestIds.selectionToolbox.colorBlue)
         .click()
 
       // Undo the colorization
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts
index dfdd173b95..4cedceef52 100644
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts
@@ -2,6 +2,7 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'
+import { TestIds } from '../../../fixtures/selectors'
 
 test.describe('Vue Node Custom Colors', { tag: '@screenshot' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -19,10 +20,16 @@ test.describe('Vue Node Custom Colors', { tag: '@screenshot' }, () => {
     })
     await loadCheckpointNode.getByText('Load Checkpoint').click()
 
-    await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
-    await comfyPage.page
-      .locator('.color-picker-container')
-      .locator('i[data-testid="blue"]')
+    const colorPickerButton = comfyPage.page.getByTestId(
+      TestIds.selectionToolbox.colorPickerButton
+    )
+    await colorPickerButton.click()
+
+    const colorPickerGroup = comfyPage.page.getByRole('group').filter({
+      has: comfyPage.page.getByTestId(TestIds.selectionToolbox.colorBlue)
+    })
+    await colorPickerGroup
+      .getByTestId(TestIds.selectionToolbox.colorBlue)
       .click()
 
     await expect(comfyPage.canvas).toHaveScreenshot(
diff --git a/docs/guidance/vue-components.md b/docs/guidance/vue-components.md
index 24bcf22fee..78dd931596 100644
--- a/docs/guidance/vue-components.md
+++ b/docs/guidance/vue-components.md
@@ -39,6 +39,10 @@ Prefer Vue native options when available:
 - Use inline Tailwind CSS only (no `<style>` blocks)
 - Use `cn()` from `@/utils/tailwindUtil` for conditional classes
 - Refer to packages/design-system/src/css/style.css for design tokens and tailwind configuration
+- Exception: when third-party libraries render runtime DOM outside Vue templates
+  (for example xterm internals inside PrimeVue terminal wrappers), scoped
+  `:deep()` selectors are allowed. Add a brief inline comment explaining why the
+  exception is required.
 
 ## Best Practices
 
diff --git a/lint-staged.config.ts b/lint-staged.config.ts
index dc4561066a..4af68e9aac 100644
--- a/lint-staged.config.ts
+++ b/lint-staged.config.ts
@@ -4,6 +4,11 @@ export default {
   'tests-ui/**': () =>
     'echo "Files in tests-ui/ are deprecated. Colocate tests with source files." && exit 1',
 
+  './**/*.{css,vue}': (stagedFiles: string[]) => {
+    const joinedPaths = toJoinedRelativePaths(stagedFiles)
+    return [`pnpm exec stylelint --allow-empty-input ${joinedPaths}`]
+  },
+
   './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),
 
   './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => {
@@ -22,12 +27,17 @@ export default {
 }
 
 function formatAndEslint(fileNames: string[]) {
-  // Convert absolute paths to relative paths for better ESLint resolution
-  const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
-  const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
+  const joinedPaths = toJoinedRelativePaths(fileNames)
   return [
     `pnpm exec oxfmt --write ${joinedPaths}`,
     `pnpm exec oxlint --fix ${joinedPaths}`,
     `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
   ]
 }
+
+function toJoinedRelativePaths(fileNames: string[]) {
+  const relativePaths = fileNames.map((f) =>
+    path.relative(process.cwd(), f).replace(/\\/g, '/')
+  )
+  return relativePaths.map((p) => `"${p}"`).join(' ')
+}
diff --git a/package.json b/package.json
index 2cc092dd04..81ac9dec47 100644
--- a/package.json
+++ b/package.json
@@ -29,10 +29,10 @@
     "knip": "knip --cache",
     "lint:fix:no-cache": "oxlint src --type-aware --fix && eslint src --fix",
     "lint:fix": "oxlint src --type-aware --fix && eslint src --cache --fix",
-    "lint:no-cache": "oxlint src --type-aware && eslint src",
+    "lint:no-cache": "pnpm exec stylelint '{apps,packages,src}/**/*.{css,vue}' && oxlint src --type-aware && eslint src",
     "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
     "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
-    "lint": "oxlint src --type-aware && eslint src --cache",
+    "lint": "pnpm stylelint && oxlint src --type-aware && eslint src --cache",
     "lint:desktop": "nx run @comfyorg/desktop-ui:lint",
     "locale": "lobe-i18n locale",
     "oxlint": "oxlint src --type-aware",
diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index de245dd3cd..99856b9cc3 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -156,6 +156,7 @@
 :root {
   --fg-color: #000;
   --bg-color: #fff;
+  --default-transition-duration: 0.1s;
   --comfy-menu-bg: #353535;
   --comfy-menu-secondary-bg: #292929;
   --comfy-topbar-height: 2.5rem;
diff --git a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
index 54b337c209..3abe7b8cac 100644
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -103,13 +103,12 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@reference '../../../../assets/css/style.css';
-
 :deep(.p-terminal) .xterm {
-  @apply overflow-hidden;
+  overflow: hidden;
 }
 
 :deep(.p-terminal) .xterm-screen {
-  @apply bg-neutral-900 overflow-hidden;
+  overflow: hidden;
+  background-color: var(--color-neutral-900);
 }
 </style>
diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue
index a3abaa4ebd..57ca316d78 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -195,8 +195,6 @@ onUpdated(() => {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 .subgraph-breadcrumb:not(:empty) {
   flex: auto;
   flex-shrink: 10000;
@@ -205,7 +203,7 @@ onUpdated(() => {
 
 .subgraph-breadcrumb,
 :deep(.p-breadcrumb) {
-  @apply overflow-hidden;
+  overflow: hidden;
 }
 
 :deep(.p-breadcrumb) {
@@ -214,7 +212,10 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item) {
-  @apply flex items-center overflow-hidden h-8;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  height: calc(var(--spacing) * 8);
   min-width: calc(var(--p-breadcrumb-item-min-width) + 1rem);
   border: 1px solid transparent;
   background-color: transparent;
@@ -236,7 +237,7 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item:hover) {
-  @apply rounded-lg;
+  border-radius: var(--radius-lg);
   border-color: var(--interface-stroke);
   background-color: var(--comfy-menu-bg);
 }
@@ -270,18 +271,16 @@ onUpdated(() => {
 </style>
 
 <style>
-@reference '../../assets/css/style.css';
-
 .subgraph-breadcrumb-collapse .p-breadcrumb-list {
   .p-breadcrumb-item,
   .p-breadcrumb-separator {
-    @apply hidden;
+    display: none;
   }
 
   .p-breadcrumb-item:nth-last-child(3),
   .p-breadcrumb-separator:nth-last-child(2),
   .p-breadcrumb-item:nth-last-child(1) {
-    @apply flex;
+    display: flex;
   }
 }
 </style>
diff --git a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
index 4f3f628d17..2e22c1424e 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -186,19 +186,19 @@ const inputBlur = async (doRename: boolean) => {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 .p-breadcrumb-item-link,
 .p-breadcrumb-item-icon {
-  @apply select-none;
+  user-select: none;
 }
 
 .p-breadcrumb-item-link {
-  @apply overflow-hidden;
+  overflow: hidden;
 }
 
 .p-breadcrumb-item-label {
-  @apply whitespace-nowrap text-ellipsis overflow-hidden;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .active-breadcrumb-item {
diff --git a/src/components/common/FormItem.vue b/src/components/common/FormItem.vue
index b2161b2e71..c3c76afe84 100644
--- a/src/components/common/FormItem.vue
+++ b/src/components/common/FormItem.vue
@@ -117,20 +117,18 @@ function getFormComponent(item: FormItem): Component {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 .form-input :deep(.input-slider) .p-inputnumber input,
 .form-input :deep(.input-slider) .slider-part {
-  @apply w-20;
+  width: 5rem;
 }
 
 .form-input :deep(.input-knob) .p-inputnumber input,
 .form-input :deep(.input-knob) .knob-part {
-  @apply w-32;
+  width: 8rem;
 }
 
 .form-input :deep(.p-inputtext),
 .form-input :deep(.p-select) {
-  @apply w-44;
+  width: 11rem;
 }
 </style>
diff --git a/src/components/common/SearchBox.vue b/src/components/common/SearchBox.vue
index 2c99dfd1c3..e927fdd074 100644
--- a/src/components/common/SearchBox.vue
+++ b/src/components/common/SearchBox.vue
@@ -133,8 +133,6 @@ const wrapperStyle = computed(() => {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 :deep(.p-inputtext) {
   --p-form-field-padding-x: 0.625rem;
 }
diff --git a/src/components/common/SearchFilterChip.vue b/src/components/common/SearchFilterChip.vue
index d4cd7704b1..8ed1fa821f 100644
--- a/src/components/common/SearchFilterChip.vue
+++ b/src/components/common/SearchFilterChip.vue
@@ -1,6 +1,6 @@
 <template>
-  <Chip removable @remove="$emit('remove', $event)">
-    <Badge size="small" :class="badgeClass">
+  <Chip removable @remove="emit('remove', $event)">
+    <Badge size="small" :class="semanticBadgeClass">
       {{ badge }}
     </Badge>
     {{ text }}
@@ -10,6 +10,7 @@
 <script setup lang="ts">
 import Badge from 'primevue/badge'
 import Chip from 'primevue/chip'
+import { computed } from 'vue'
 
 export interface SearchFilter {
   text: string
@@ -18,26 +19,19 @@ export interface SearchFilter {
   id: string | number
 }
 
-defineProps<Omit<SearchFilter, 'id'>>()
-defineEmits(['remove'])
+const semanticClassMap: Record<string, string> = {
+  'i-badge': 'bg-green-500 text-white',
+  'o-badge': 'bg-red-500 text-white',
+  'c-badge': 'bg-blue-500 text-white',
+  's-badge': 'bg-yellow-500'
+}
+
+const props = defineProps<Omit<SearchFilter, 'id'>>()
+const emit = defineEmits<{
+  (e: 'remove', event: Event): void
+}>()
+
+const semanticBadgeClass = computed(() => {
+  return semanticClassMap[props.badgeClass] ?? props.badgeClass
+})
 </script>
-
-<style scoped>
-@reference '../../assets/css/style.css';
-
-:deep(.i-badge) {
-  @apply bg-green-500 text-white;
-}
-
-:deep(.o-badge) {
-  @apply bg-red-500 text-white;
-}
-
-:deep(.c-badge) {
-  @apply bg-blue-500 text-white;
-}
-
-:deep(.s-badge) {
-  @apply bg-yellow-500;
-}
-</style>
diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index a903ac9347..0e8c9a016d 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -71,20 +71,30 @@ function getDialogPt(item: {
 </script>
 
 <style>
-@reference '../../assets/css/style.css';
-
 .global-dialog {
   max-width: calc(100vw - 1rem);
 }
 
 .global-dialog .p-dialog-header {
-  @apply p-2 2xl:p-[var(--p-dialog-header-padding)];
-  @apply pb-0;
+  padding: calc(var(--spacing) * 2);
+  padding-bottom: 0;
 }
 
 .global-dialog .p-dialog-content {
-  @apply p-2 2xl:p-[var(--p-dialog-content-padding)];
-  @apply pt-0;
+  padding: calc(var(--spacing) * 2);
+  padding-top: 0;
+}
+
+@media (min-width: 1536px) {
+  .global-dialog .p-dialog-header {
+    padding: var(--p-dialog-header-padding);
+    padding-bottom: 0;
+  }
+
+  .global-dialog .p-dialog-content {
+    padding: var(--p-dialog-content-padding);
+    padding-top: 0;
+  }
 }
 
 /* Workspace mode: wider settings dialog */
diff --git a/src/components/dialog/content/setting/KeybindingPanel.vue b/src/components/dialog/content/setting/KeybindingPanel.vue
index 5beb1ac366..4cec61c717 100644
--- a/src/components/dialog/content/setting/KeybindingPanel.vue
+++ b/src/components/dialog/content/setting/KeybindingPanel.vue
@@ -17,9 +17,9 @@
       }"
       @row-dblclick="editKeybinding($event.data)"
     >
-      <Column field="actions" header="">
+      <Column field="actions" header="" :pt="{ bodyCell: 'p-1 min-h-8' }">
         <template #body="slotProps">
-          <div class="actions invisible flex flex-row">
+          <div class="actions flex flex-row">
             <Button
               variant="textonly"
               size="icon"
@@ -56,6 +56,7 @@
         :header="$t('g.command')"
         sortable
         class="max-w-64 2xl:max-w-full"
+        :pt="{ bodyCell: 'p-1 min-h-8' }"
       >
         <template #body="slotProps">
           <div class="truncate" :title="slotProps.data.id">
@@ -63,7 +64,11 @@
           </div>
         </template>
       </Column>
-      <Column field="keybinding" :header="$t('g.keybinding')">
+      <Column
+        field="keybinding"
+        :header="$t('g.keybinding')"
+        :pt="{ bodyCell: 'p-1 min-h-8' }"
+      >
         <template #body="slotProps">
           <KeyComboDisplay
             v-if="slotProps.data.keybinding"
@@ -75,7 +80,11 @@
           <span v-else>-</span>
         </template>
       </Column>
-      <Column field="source" :header="$t('g.source')">
+      <Column
+        field="source"
+        :header="$t('g.source')"
+        :pt="{ bodyCell: 'p-1 min-h-8' }"
+      >
         <template #body="slotProps">
           <span class="overflow-hidden text-ellipsis">{{
             slotProps.data.source || '-'
@@ -293,17 +302,3 @@ async function resetAllKeybindings() {
   })
 }
 </script>
-
-<style scoped>
-@reference '../../../../assets/css/style.css';
-
-:deep(.p-datatable-tbody) > tr > td {
-  @apply p-1;
-  min-height: 2rem;
-}
-
-:deep(.p-datatable-row-selected) .actions,
-:deep(.p-datatable-selectable-row:hover) .actions {
-  @apply visible;
-}
-</style>
diff --git a/src/components/dialog/content/signin/SignInForm.test.ts b/src/components/dialog/content/signin/SignInForm.test.ts
index c27d159295..916d03e66d 100644
--- a/src/components/dialog/content/signin/SignInForm.test.ts
+++ b/src/components/dialog/content/signin/SignInForm.test.ts
@@ -98,16 +98,17 @@ describe('SignInForm', () => {
       await nextTick()
 
       const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.cursor-pointer'
+        'span.text-muted.text-base.font-medium.select-none'
       )
 
-      expect(forgotPasswordSpan.classes()).toContain('text-link-disabled')
+      expect(forgotPasswordSpan.classes()).toContain('cursor-not-allowed')
+      expect(forgotPasswordSpan.classes()).toContain('opacity-50')
     })
 
     it('shows toast and focuses email input when clicked while disabled', async () => {
       const wrapper = mountComponent()
       const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.cursor-pointer'
+        'span.text-muted.text-base.font-medium.select-none'
       )
 
       // Mock getElementById to track focus
@@ -152,7 +153,7 @@ describe('SignInForm', () => {
       )
 
       const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.cursor-pointer'
+        'span.text-muted.text-base.font-medium.select-none'
       )
 
       // Click the forgot password link
diff --git a/src/components/dialog/content/signin/SignInForm.vue b/src/components/dialog/content/signin/SignInForm.vue
index cbc946fea6..40e576c53d 100644
--- a/src/components/dialog/content/signin/SignInForm.vue
+++ b/src/components/dialog/content/signin/SignInForm.vue
@@ -34,10 +34,13 @@
           {{ t('auth.login.passwordLabel') }}
         </label>
         <span
-          class="cursor-pointer text-base font-medium text-muted select-none"
-          :class="{
-            'text-link-disabled': !$form.email?.value || $form.email?.invalid
-          }"
+          :class="
+            cn('text-base font-medium text-muted select-none', {
+              'cursor-not-allowed opacity-50':
+                !$form.email?.value || $form.email?.invalid,
+              'cursor-pointer': $form.email?.value && !$form.email?.invalid
+            })
+          "
           @click="handleForgotPassword($form.email?.value, $form.email?.valid)"
         >
           {{ t('auth.login.forgotPassword') }}
@@ -89,6 +92,7 @@ import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthAction
 import { signInSchema } from '@/schemas/signInSchema'
 import type { SignInData } from '@/schemas/signInSchema'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { cn } from '@/utils/tailwindUtil'
 
 const authStore = useFirebaseAuthStore()
 const firebaseAuthActions = useFirebaseAuthActions()
@@ -126,11 +130,3 @@ const handleForgotPassword = async (
   await firebaseAuthActions.sendPasswordReset(email)
 }
 </script>
-
-<style scoped>
-@reference '../../../../assets/css/style.css';
-
-.text-link-disabled {
-  @apply opacity-50 cursor-not-allowed;
-}
-</style>
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.test.ts b/src/components/graph/selectionToolbox/ColorPickerButton.test.ts
index cc4d7d6908..718455436c 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.test.ts
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.test.ts
@@ -8,20 +8,38 @@ import { createI18n } from 'vue-i18n'
 
 // Import after mocks
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import type { LoadedComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import type { LoadedComfyWorkflow } from '@/platform/workflow/management/stores/comfyWorkflow'
+import {
+  ComfyWorkflow,
+  useWorkflowStore
+} from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { ChangeTracker } from '@/scripts/changeTracker'
+import { defaultGraph } from '@/scripts/defaultGraph'
 import { createMockPositionable } from '@/utils/__tests__/litegraphTestUtils'
 
 function createMockWorkflow(
   overrides: Partial<LoadedComfyWorkflow> = {}
 ): LoadedComfyWorkflow {
-  return {
-    changeTracker: {
+  const workflow = new ComfyWorkflow({
+    path: 'workflows/color-picker-test.json',
+    modified: 0,
+    size: 0
+  })
+
+  const changeTracker = Object.assign(
+    new ChangeTracker(workflow, structuredClone(defaultGraph)),
+    {
       checkState: vi.fn() as Mock
-    },
+    }
+  )
+
+  const workflowOverrides = {
+    changeTracker,
     ...overrides
-  } as Partial<LoadedComfyWorkflow> as LoadedComfyWorkflow
+  } satisfies Partial<LoadedComfyWorkflow>
+
+  return Object.assign(workflow, workflowOverrides) as LoadedComfyWorkflow
 }
 
 // Mock the litegraph module
@@ -110,12 +128,14 @@ describe('ColorPickerButton', () => {
     const wrapper = createWrapper()
     const button = wrapper.find('button')
 
-    expect(wrapper.find('.color-picker-container').exists()).toBe(false)
+    expect(wrapper.findComponent({ name: 'SelectButton' }).exists()).toBe(false)
 
     await button.trigger('click')
-    expect(wrapper.find('.color-picker-container').exists()).toBe(true)
+    const picker = wrapper.findComponent({ name: 'SelectButton' })
+    expect(picker.exists()).toBe(true)
+    expect(picker.findAll('button').length).toBeGreaterThan(0)
 
     await button.trigger('click')
-    expect(wrapper.find('.color-picker-container').exists()).toBe(false)
+    expect(wrapper.findComponent({ name: 'SelectButton' }).exists()).toBe(false)
   })
 })
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.vue b/src/components/graph/selectionToolbox/ColorPickerButton.vue
index 17f350dbd9..e78bec6c30 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -11,13 +11,17 @@
       @click="() => (showColorPicker = !showColorPicker)"
     >
       <div class="flex items-center gap-1 px-0">
-        <i class="pi pi-circle-fill" :style="{ color: currentColor ?? '' }" />
+        <i
+          class="pi pi-circle-fill"
+          data-testid="color-picker-current-color"
+          :style="{ color: currentColor ?? '' }"
+        />
         <i class="icon-[lucide--chevron-down]" />
       </div>
     </Button>
     <div
       v-if="showColorPicker"
-      class="color-picker-container absolute -top-10 left-1/2"
+      class="absolute -top-10 left-1/2 -translate-x-1/2"
     >
       <SelectButton
         :model-value="selectedColorOption"
@@ -159,13 +163,7 @@ watch(
 </script>
 
 <style scoped>
-@reference '../../../assets/css/style.css';
-
-.color-picker-container {
-  transform: translateX(-50%);
-}
-
 :deep(.p-togglebutton) {
-  @apply py-2 px-1;
+  padding: calc(var(--spacing) * 2) var(--spacing);
 }
 </style>
diff --git a/src/components/graph/widgets/DomWidget.vue b/src/components/graph/widgets/DomWidget.vue
index 83f5e2ee45..8c7a583481 100644
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/src/components/graph/widgets/DomWidget.vue
@@ -2,13 +2,14 @@
   <div
     v-show="widgetState.visible"
     ref="widgetElement"
-    class="dom-widget"
+    class="dom-widget h-full w-full"
     :title="tooltip"
     :style="style"
   >
     <component
       :is="widget.component"
       v-if="isComponentWidget(widget)"
+      class="h-full w-full"
       :model-value="widget.value"
       :widget="widget"
       v-bind="widget.props"
@@ -174,6 +175,8 @@ const mountElementIfVisible = () => {
   if (widgetElement.value.contains(widget.element)) {
     return
   }
+
+  widget.element.classList.add('h-full', 'w-full')
   widgetElement.value.appendChild(widget.element)
 }
 
@@ -196,11 +199,3 @@ watch(
 
 whenever(() => !canvasStore.linearMode, mountElementIfVisible)
 </script>
-
-<style scoped>
-@reference '../../../assets/css/style.css';
-
-.dom-widget > * {
-  @apply h-full w-full;
-}
-</style>
diff --git a/src/components/node/NodeHelpContent.vue b/src/components/node/NodeHelpContent.vue
index ad1f75e3df..6e020b5ae0 100644
--- a/src/components/node/NodeHelpContent.vue
+++ b/src/components/node/NodeHelpContent.vue
@@ -8,11 +8,14 @@
     <!-- Markdown fetched successfully -->
     <div
       v-else-if="!error"
-      class="markdown-content"
+      class="markdown-content overflow-visible text-sm leading-(--text-sm--line-height)"
       v-html="renderedHelpHtml"
     />
     <!-- Fallback: markdown not found or fetch error -->
-    <div v-else class="fallback-content space-y-6 text-sm">
+    <div
+      v-else
+      class="fallback-content space-y-6 text-sm leading-(--text-sm--line-height)"
+    >
       <p v-if="node.description">
         <strong>{{ $t('g.description') }}:</strong> {{ node.description }}
       </p>
@@ -22,48 +25,52 @@
           <strong>{{ $t('nodeHelpPage.inputs') }}:</strong>
         </p>
         <!-- Using plain HTML table instead of DataTable for consistent styling with markdown content -->
-        <table class="overflow-x-auto">
-          <thead>
-            <tr>
-              <th>{{ $t('g.name') }}</th>
-              <th>{{ $t('nodeHelpPage.type') }}</th>
-              <th>{{ $t('g.description') }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="input in inputList" :key="input.name">
-              <td>
-                <code>{{ input.name }}</code>
-              </td>
-              <td>{{ input.type }}</td>
-              <td>{{ input.tooltip || '-' }}</td>
-            </tr>
-          </tbody>
-        </table>
+        <div class="overflow-x-auto">
+          <table>
+            <thead>
+              <tr>
+                <th>{{ $t('g.name') }}</th>
+                <th>{{ $t('nodeHelpPage.type') }}</th>
+                <th>{{ $t('g.description') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="input in inputList" :key="input.name">
+                <td>
+                  <code>{{ input.name }}</code>
+                </td>
+                <td>{{ input.type }}</td>
+                <td>{{ input.tooltip || '-' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
 
       <div v-if="outputList.length">
         <p>
           <strong>{{ $t('nodeHelpPage.outputs') }}:</strong>
         </p>
-        <table class="overflow-x-auto">
-          <thead>
-            <tr>
-              <th>{{ $t('g.name') }}</th>
-              <th>{{ $t('nodeHelpPage.type') }}</th>
-              <th>{{ $t('g.description') }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="output in outputList" :key="output.name">
-              <td>
-                <code>{{ output.name }}</code>
-              </td>
-              <td>{{ output.type }}</td>
-              <td>{{ output.tooltip || '-' }}</td>
-            </tr>
-          </tbody>
-        </table>
+        <div class="overflow-x-auto">
+          <table>
+            <thead>
+              <tr>
+                <th>{{ $t('g.name') }}</th>
+                <th>{{ $t('nodeHelpPage.type') }}</th>
+                <th>{{ $t('g.description') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="output in outputList" :key="output.name">
+                <td>
+                  <code>{{ output.name }}</code>
+                </td>
+                <td>{{ output.type }}</td>
+                <td>{{ output.tooltip || '-' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
@@ -100,39 +107,59 @@ const outputList = computed(() =>
 </script>
 
 <style scoped>
-@reference './../../assets/css/style.css';
-
 .node-help-content :deep(:is(img, video)) {
-  @apply max-w-full h-auto block mb-4;
-}
-
-.markdown-content,
-.fallback-content {
-  @apply text-sm overflow-visible;
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-bottom: calc(var(--spacing) * 4);
 }
 
 .markdown-content :deep(h1),
 .fallback-content h1 {
-  @apply text-[22px] font-bold mt-8 mb-4 first:mt-0;
+  margin-top: calc(var(--spacing) * 8);
+  margin-bottom: calc(var(--spacing) * 4);
+  font-size: var(--text-2xl);
+  font-weight: var(--font-weight-bold);
 }
 
 .markdown-content :deep(h2),
 .fallback-content h2 {
-  @apply text-[18px] font-bold mt-8 mb-4 first:mt-0;
+  margin-top: calc(var(--spacing) * 8);
+  margin-bottom: calc(var(--spacing) * 4);
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-bold);
 }
 
 .markdown-content :deep(h3),
 .fallback-content h3 {
-  @apply text-[16px] font-bold mt-8 mb-4 first:mt-0;
+  margin-top: calc(var(--spacing) * 8);
+  margin-bottom: calc(var(--spacing) * 4);
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-bold);
 }
 
 .markdown-content :deep(h4),
+.fallback-content h4 {
+  margin-top: calc(var(--spacing) * 8);
+  margin-bottom: calc(var(--spacing) * 4);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-bold);
+}
+
 .markdown-content :deep(h5),
+.fallback-content h5 {
+  margin-top: calc(var(--spacing) * 8);
+  margin-bottom: calc(var(--spacing) * 4);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-bold);
+}
+
 .markdown-content :deep(h6),
-.fallback-content h4,
-.fallback-content h5,
 .fallback-content h6 {
-  @apply mt-8 mb-4 first:mt-0;
+  margin-top: calc(var(--spacing) * 8);
+  margin-bottom: calc(var(--spacing) * 4);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-bold);
 }
 
 .markdown-content :deep(td),
@@ -155,7 +182,8 @@ const outputList = computed(() =>
 .markdown-content :deep(ol),
 .fallback-content ul,
 .fallback-content ol {
-  @apply pl-8 my-2;
+  margin-block: calc(var(--spacing) * 2);
+  padding-left: calc(var(--spacing) * 8);
 }
 
 .markdown-content :deep(ul ul),
@@ -166,36 +194,42 @@ const outputList = computed(() =>
 .fallback-content ol ol,
 .fallback-content ul ol,
 .fallback-content ol ul {
-  @apply pl-6 my-2;
+  margin-block: calc(var(--spacing) * 2);
+  padding-left: calc(var(--spacing) * 6);
 }
 
 .markdown-content :deep(li),
 .fallback-content li {
-  @apply my-2;
+  margin-block: calc(var(--spacing) * 2);
 }
 
 .markdown-content :deep(*:first-child),
 .fallback-content > *:first-child {
-  @apply mt-0;
+  margin-top: 0;
 }
 
 .markdown-content :deep(code),
 .fallback-content code {
   color: var(--code-text-color);
   background-color: var(--code-bg-color);
-  @apply rounded px-1.5 py-0.5;
+  border-radius: var(--radius);
+  padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
 }
 
 .markdown-content :deep(table),
 .fallback-content table {
-  @apply w-full border-collapse;
+  border-collapse: collapse;
+}
+
+.fallback-content table {
+  width: 100%;
 }
 
 .markdown-content :deep(th),
 .markdown-content :deep(td),
 .fallback-content th,
 .fallback-content td {
-  @apply px-2 py-2;
+  padding: calc(var(--spacing) * 2);
 }
 
 .markdown-content :deep(tr),
@@ -215,16 +249,22 @@ const outputList = computed(() =>
 
 .markdown-content :deep(pre),
 .fallback-content pre {
-  @apply rounded p-4 my-4 overflow-x-auto;
+  margin-block: calc(var(--spacing) * 4);
+  overflow-x: auto;
+  border-radius: var(--radius);
+  padding: calc(var(--spacing) * 4);
   background-color: var(--code-block-bg-color);
 
   code {
-    @apply bg-transparent p-0;
+    background-color: transparent;
+    padding: 0;
     color: var(--p-text-color);
   }
 }
 
 .markdown-content :deep(table) {
-  @apply overflow-x-auto;
+  display: block;
+  width: 100%;
+  overflow-x: auto;
 }
 </style>
diff --git a/src/components/searchbox/NodeSearchFilter.vue b/src/components/searchbox/NodeSearchFilter.vue
index 0f54248268..a308150797 100644
--- a/src/components/searchbox/NodeSearchFilter.vue
+++ b/src/components/searchbox/NodeSearchFilter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="_content">
+  <div class="flex flex-col gap-2">
     <SelectButton
       v-model="selectedFilter"
       class="filter-type-select"
@@ -16,7 +16,7 @@
       auto-filter-focus
     />
   </div>
-  <div class="_footer">
+  <div class="flex flex-col items-end pt-4">
     <Button type="button" @click="submit">{{ $t('g.add') }}</Button>
   </div>
 </template>
@@ -67,15 +67,3 @@ const submit = () => {
   })
 }
 </script>
-
-<style scoped>
-@reference '../../assets/css/style.css';
-
-._content {
-  @apply flex flex-col space-y-2;
-}
-
-._footer {
-  @apply flex flex-col pt-4 items-end;
-}
-</style>
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index fcc736a8dc..0faa70bca3 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -255,8 +255,6 @@ onMounted(() => {
 </style>
 
 <style scoped>
-@reference "tailwindcss";
-
 .floating-sidebar {
   padding: var(--sidebar-padding);
 }
diff --git a/src/components/sidebar/SidebarIcon.vue b/src/components/sidebar/SidebarIcon.vue
index 44e4a68e55..e6ace98869 100644
--- a/src/components/sidebar/SidebarIcon.vue
+++ b/src/components/sidebar/SidebarIcon.vue
@@ -15,7 +15,7 @@
     :aria-label="computedTooltip"
     @click="emit('click', $event)"
   >
-    <div class="side-bar-button-content">
+    <div class="side-bar-button-content flex flex-col items-center gap-2">
       <slot name="icon">
         <div class="sidebar-icon-wrapper relative">
           <i
@@ -40,9 +40,11 @@
           </span>
         </div>
       </slot>
-      <span v-if="label && !isSmall" class="side-bar-button-label">{{
-        st(label, label)
-      }}</span>
+      <span
+        v-if="label && !isSmall"
+        class="side-bar-button-label text-center text-[10px]"
+        >{{ st(label, label) }}</span
+      >
     </div>
   </Button>
 </template>
@@ -104,8 +106,6 @@ const computedTooltip = computed(() => st(tooltip, tooltip) + tooltipSuffix)
 </style>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 .side-bar-button {
   width: var(--sidebar-width);
   height: var(--sidebar-item-height);
@@ -117,12 +117,7 @@ const computedTooltip = computed(() => st(tooltip, tooltip) + tooltipSuffix)
   height: var(--sidebar-width);
 }
 
-.side-bar-button-content {
-  @apply flex flex-col items-center gap-2;
-}
-
 .side-bar-button-label {
-  @apply text-[10px] text-center;
   line-height: 1;
 }
 
diff --git a/src/components/sidebar/tabs/SidebarTabTemplate.vue b/src/components/sidebar/tabs/SidebarTabTemplate.vue
index 4d0414e92a..dcf4de709b 100644
--- a/src/components/sidebar/tabs/SidebarTabTemplate.vue
+++ b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -11,6 +11,7 @@
     <div class="comfy-vue-side-bar-header flex flex-col gap-2">
       <Toolbar
         class="min-h-16 bg-transparent rounded-none border-x-0 border-t-0 px-2 2xl:px-4"
+        :pt="sidebarPt"
       >
         <template #start>
           <span class="truncate font-bold" :title="props.title">
@@ -20,7 +21,7 @@
         </template>
         <template #end>
           <div
-            class="touch:w-auto touch:opacity-100 flex flex-row overflow-hidden transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100"
+            class="touch:w-auto touch:opacity-100 [&_.p-button]:py-1 2xl:[&_.p-button]:py-2 flex flex-row overflow-hidden transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100"
           >
             <slot name="tool-buttons" />
           </div>
@@ -54,19 +55,10 @@ const props = defineProps<{
   title: string
   class?: string
 }>()
+const sidebarPt = {
+  start: 'min-w-0 flex-1 overflow-hidden'
+}
 
 const containerRef = ref<HTMLElement | null>(null)
 provide(SidebarContainerKey, containerRef)
 </script>
-
-<style scoped>
-@reference '../../../assets/css/style.css';
-
-:deep(.p-toolbar-end) .p-button {
-  @apply py-1 2xl:py-2;
-}
-
-:deep(.p-toolbar-start) {
-  @apply min-w-0 flex-1 overflow-hidden;
-}
-</style>
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
index bbbe1013bb..926596aa65 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="container"
-    class="node-lib-node-container"
+    class="node-lib-node-container h-full w-full"
     data-testid="node-tree-leaf"
     :data-node-name="nodeDef.display_name"
   >
@@ -206,11 +206,3 @@ onUnmounted(() => {
   nodeContentElement.value?.removeEventListener('mouseleave', handleMouseLeave)
 })
 </script>
-
-<style scoped>
-@reference '../../../../assets/css/style.css';
-
-.node-lib-node-container {
-  @apply h-full w-full;
-}
-</style>
diff --git a/src/components/topbar/WorkflowTabPopover.vue b/src/components/topbar/WorkflowTabPopover.vue
index 27b113e73c..9485c5d268 100644
--- a/src/components/topbar/WorkflowTabPopover.vue
+++ b/src/components/topbar/WorkflowTabPopover.vue
@@ -140,54 +140,65 @@ defineExpose({
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 .workflow-preview-content {
-  @apply flex flex-col rounded-xl overflow-hidden;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--radius-xl);
   max-width: var(--popover-width);
   background-color: var(--comfy-menu-bg);
   color: var(--fg-color);
 }
 
 .workflow-preview-thumbnail {
-  @apply relative p-2;
+  position: relative;
+  padding: calc(var(--spacing) * 2);
 }
 
 .workflow-preview-thumbnail img {
-  @apply shadow-md;
+  box-shadow: var(--shadow-md);
   background-color: color-mix(in srgb, var(--comfy-menu-bg) 70%, black);
 }
 
 .dark-theme .workflow-preview-thumbnail img {
-  @apply shadow-lg;
+  box-shadow: var(--shadow-lg);
 }
 
 .workflow-preview-footer {
-  @apply pt-1 pb-2 px-3;
+  padding-top: calc(var(--spacing) * 1);
+  padding-right: calc(var(--spacing) * 3);
+  padding-bottom: calc(var(--spacing) * 2);
+  padding-left: calc(var(--spacing) * 3);
 }
 
 .workflow-preview-name {
-  @apply block text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height));
+  font-weight: var(--font-weight-medium);
   color: var(--fg-color);
 }
 </style>
 
 <style>
-@reference '../../assets/css/style.css';
-
 .workflow-popover-fade {
   --p-popover-background: transparent;
   --p-popover-content-padding: 0;
-  @apply bg-transparent rounded-xl shadow-lg;
+  border-radius: var(--radius-xl);
+  background-color: transparent;
+  box-shadow: var(--shadow-lg);
   transition: opacity 0.15s ease-out !important;
 }
 
 .workflow-popover-fade.p-popover-flipped {
-  @apply -translate-y-full;
+  transform: translateY(-100%);
 }
 
 .dark-theme .workflow-popover-fade {
-  @apply shadow-2xl;
+  box-shadow: var(--shadow-2xl);
 }
 
 .workflow-popover-fade.p-popover::after,
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index 5d9a4aca5f..f05383002b 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -300,63 +300,72 @@ onUpdated(() => {
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
-
 .workflow-tabs-container {
   background-color: var(--comfy-menu-bg);
 }
 
 :deep(.p-togglebutton) {
-  @apply p-0 bg-transparent rounded-none shrink relative border-0 border-r border-solid;
+  position: relative;
+  flex-shrink: 1;
+  border: 0;
+  border-right-style: solid;
+  border-right-width: 1px;
+  border-radius: 0;
+  background-color: transparent;
+  padding: 0;
   border-right-color: var(--border-color);
   min-width: 90px;
 }
 
 .overflow-arrow {
-  @apply px-2 rounded-none;
+  border-radius: 0;
+  padding-inline: calc(var(--spacing) * 2);
 }
 
 .overflow-arrow[disabled] {
-  @apply opacity-25;
+  opacity: 0.25;
 }
 
 :deep(.p-togglebutton > .p-togglebutton-content) {
-  @apply max-w-full;
+  max-width: 100%;
 }
 
 :deep(.workflow-tab) {
-  @apply max-w-full;
+  max-width: 100%;
 }
 
 :deep(.p-togglebutton::before) {
-  @apply hidden;
+  display: none;
 }
 
 :deep(.p-togglebutton:first-child) {
-  @apply border-l border-solid;
+  border-left-style: solid;
+  border-left-width: 1px;
   border-left-color: var(--border-color);
 }
 
 :deep(.p-togglebutton:not(:first-child)) {
-  @apply border-l-0;
+  border-left-width: 0;
 }
 
 :deep(.p-togglebutton.p-togglebutton-checked) {
-  @apply border-b border-solid h-full;
+  height: 100%;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
   border-bottom-color: var(--p-button-text-primary-color);
 }
 
 :deep(.p-togglebutton:not(.p-togglebutton-checked)) {
-  @apply opacity-75;
+  opacity: 0.75;
 }
 
 :deep(.p-togglebutton-checked) .close-button,
 :deep(.p-togglebutton:hover) .close-button {
-  @apply visible;
+  visibility: visible;
 }
 
 :deep(.p-scrollpanel-content) {
-  @apply h-full;
+  height: 100%;
 }
 
 :deep(.workflow-tabs) {
@@ -366,11 +375,12 @@ onUpdated(() => {
 /* Scrollbar half opacity to avoid blocking the active tab bottom border */
 :deep(.p-scrollpanel:hover .p-scrollpanel-bar),
 :deep(.p-scrollpanel:active .p-scrollpanel-bar) {
-  @apply opacity-50;
+  opacity: 0.5;
 }
 
 :deep(.p-selectbutton) {
-  @apply rounded-none h-full;
+  height: 100%;
+  border-radius: 0;
 }
 
 .workflow-tabs-container-desktop {
@@ -378,7 +388,7 @@ onUpdated(() => {
 }
 
 .window-actions-spacer {
-  @apply flex-auto;
+  flex: auto;
   /* If we are using custom titlebar, then we need to add a gap for the user to drag the window */
   --window-actions-spacer-width: min(75px, env(titlebar-area-width, 0) * 9999);
   min-width: var(--window-actions-spacer-width);