apply stylelint auto fixes (#5940)

## Summary

Applied stylelint auto-fixes and resolved manual CSS issues across 25
files to achieve full compliance with stylelint rules.

## Changes

- **What**: Auto-fixed 68 CSS issues (legacy color functions,
font-weight keywords, shorthand properties, pseudo-element notation) and
manually resolved 6 remaining issues (duplicate selectors, vendor prefix
duplicates, font fallbacks, Vue v-bind whitelisting)
- **Config**: Disabled `no-descending-specificity` rule (43 warnings
require architectural CSS refactor)

## Review Focus

Verify no visual regressions from modernized CSS syntax:
- Modern [color function
notation](https://www.w3.org/TR/css-color-4/#funcdef-rgb): `rgba(0, 0,
0, 0.5)` → `rgb(0 0 0 / 50%)`
- Numeric font weights: `bold`/`normal` → `700`/`400`
- Pseudo-element double colons: `:before` → `::before

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5940-apply-stylelint-auto-fixes-2846d73d365081ee8031c212a69a4bd4)
by [Unito](https://www.unito.io)

---------

Co-authored-by: DrJKL <[email protected]>

Author: christian-byrne

.stylelintrc.json

@@ -7,15 +7,15 @@
     }
   ],
   "rules": {
-    "import-notation": "url",
+    "import-notation": "string",
     "font-family-no-missing-generic-family-keyword": true,
-    "declaration-block-no-redundant-longhand-properties": true,
     "declaration-property-value-no-unknown": [
       true,
       {
         "ignoreProperties": {
           "speak": ["none"],
-          "app-region": ["drag", "no-drag"]
+          "app-region": ["drag", "no-drag"],
+          "/^(width|height)$/": ["/^v-bind/"]
         }
       }
     ],
@@ -35,7 +35,7 @@
     "selector-max-type": 2,
     "declaration-block-no-duplicate-properties": true,
     "block-no-empty": true,
-    "no-descending-specificity": true,
+    "no-descending-specificity": null,
     "no-duplicate-at-import-rules": true,
     "at-rule-no-unknown": [
       true,
@@ -57,7 +57,8 @@
       true,
       {
         "ignoreFunctions": [
-          "theme"
+          "theme",
+          "v-bind"
         ]
       }
     ]

apps/desktop-ui/src/components/install/InstallLocationPicker.vue

@@ -286,6 +286,12 @@ const onFocus = async () => {
     .p-accordionheader {
       @apply rounded-t-xl rounded-b-none;
     }
+
+    .p-accordionheader-toggle-icon {
+      &::before {
+        content: '\e902';
+      }
+    }
   }
 
   .p-accordioncontent {
@@ -302,13 +308,5 @@ const onFocus = async () => {
       content: '\e933';
     }
   }
-
-  .p-accordionpanel-active {
-    .p-accordionheader-toggle-icon {
-      &::before {
-        content: '\e902';
-      }
-    }
-  }
 }
 </style>

apps/desktop-ui/src/views/DesktopUpdateView.vue

@@ -65,12 +65,12 @@ onUnmounted(() => electron.Validation.dispose())
 
 .download-bg::before {
   @apply m-0 absolute text-muted;
-  font-family: 'primeicons';
+  font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: 2rem;
   speak: none;
   font-style: normal;
-  font-weight: normal;
+  font-weight: 400;
   font-variant: normal;
   text-transform: none;
   line-height: 1;

apps/desktop-ui/src/views/MaintenanceView.vue

@@ -186,12 +186,12 @@ onUnmounted(() => electron.Validation.dispose())
 
 .backspan::before {
   @apply m-0 absolute text-muted;
-  font-family: 'primeicons';
+  font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: -2rem;
   speak: none;
   font-style: normal;
-  font-weight: normal;
+  font-weight: 400;
   font-variant: normal;
   text-transform: none;
   line-height: 1;

apps/desktop-ui/src/views/ServerStartView.vue

@@ -18,16 +18,16 @@
         style="
           background: radial-gradient(
             ellipse 800px 600px at center,
-            rgba(23, 23, 23, 0.95) 0%,
-            rgba(23, 23, 23, 0.93) 10%,
-            rgba(23, 23, 23, 0.9) 20%,
-            rgba(23, 23, 23, 0.85) 30%,
-            rgba(23, 23, 23, 0.75) 40%,
-            rgba(23, 23, 23, 0.6) 50%,
-            rgba(23, 23, 23, 0.4) 60%,
-            rgba(23, 23, 23, 0.2) 70%,
-            rgba(23, 23, 23, 0.1) 80%,
-            rgba(23, 23, 23, 0.05) 90%,
+            rgb(23 23 23 / 0.95) 0%,
+            rgb(23 23 23 / 0.93) 10%,
+            rgb(23 23 23 / 0.9) 20%,
+            rgb(23 23 23 / 0.85) 30%,
+            rgb(23 23 23 / 0.75) 40%,
+            rgb(23 23 23 / 0.6) 50%,
+            rgb(23 23 23 / 0.4) 60%,
+            rgb(23 23 23 / 0.2) 70%,
+            rgb(23 23 23 / 0.1) 80%,
+            rgb(23 23 23 / 0.05) 90%,
             transparent 100%
           );
         "

knip.config.ts

@@ -44,9 +44,9 @@ const config: KnipConfig = {
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
     css: (text: string) =>
-      [
-        ...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)
-      ].join('\n')
+      [...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)]
+        .map((match) => match[0].replace(/url\(['"]?([^'"()]+)['"]?\)/, '$1'))
+        .join('\n')
   },
   vite: {
     config: ['vite?(.*).config.mts']

packages/design-system/src/css/style.css

@@ -9,35 +9,6 @@
 
 @config '../../tailwind.config.ts';
 
-:root {
-  --fg-color: #000;
-  --bg-color: #fff;
-  --comfy-menu-bg: #353535;
-  --comfy-menu-secondary-bg: #292929;
-  --comfy-topbar-height: 2.5rem;
-  --comfy-input-bg: #222;
-  --input-text: #ddd;
-  --descrip-text: #999;
-  --drag-text: #ccc;
-  --error-text: #ff4444;
-  --border-color: #4e4e4e;
-  --tr-even-bg-color: #222;
-  --tr-odd-bg-color: #353535;
-  --primary-bg: #236692;
-  --primary-fg: #ffffff;
-  --primary-hover-bg: #3485bb;
-  --primary-hover-fg: #ffffff;
-  --content-bg: #e0e0e0;
-  --content-fg: #000;
-  --content-hover-bg: #adadad;
-  --content-hover-fg: #000;
-
-  /* Code styling colors for help menu*/
-  --code-text-color: rgba(0, 122, 255, 1);
-  --code-bg-color: rgba(96, 165, 250, 0.2);
-  --code-block-bg-color: rgba(60, 60, 60, 0.12);
-}
-
 @media (prefers-color-scheme: dark) {
   :root {
     --fg-color: #fff;
@@ -129,6 +100,35 @@
 }
 
 :root {
+  --fg-color: #000;
+  --bg-color: #fff;
+  --comfy-menu-bg: #353535;
+  --comfy-menu-secondary-bg: #292929;
+  --comfy-topbar-height: 2.5rem;
+  --comfy-input-bg: #222;
+  --input-text: #ddd;
+  --descrip-text: #999;
+  --drag-text: #ccc;
+  --error-text: #ff4444;
+  --border-color: #4e4e4e;
+  --tr-even-bg-color: #222;
+  --tr-odd-bg-color: #353535;
+  --primary-bg: #236692;
+  --primary-fg: #ffffff;
+  --primary-hover-bg: #3485bb;
+  --primary-hover-fg: #ffffff;
+  --content-bg: #e0e0e0;
+  --content-fg: #000;
+  --content-hover-bg: #adadad;
+  --content-hover-fg: #000;
+
+  /* Code styling colors for help menu*/
+  --code-text-color: rgb(0 122 255 / 1);
+  --code-bg-color: rgb(96 165 250 / 0.2);
+  --code-block-bg-color: rgb(60 60 60 / 0.12);
+
+  /* --- */
+
   --backdrop: var(--color-white);
   --dialog-surface: var(--color-neutral-200);
   --node-component-border: var(--color-gray-400);
@@ -150,7 +150,9 @@
   --node-component-tooltip-border: var(--color-sand-100);
   --node-component-tooltip-surface: var(--color-white);
   --node-component-widget-input: var(--fg-color);
-  --node-component-widget-input-surface: rgb(from var(--color-zinc-500) r g b / 10%);
+  --node-component-widget-input-surface: rgb(
+    from var(--color-zinc-500) r g b / 10%
+  );
   --node-component-widget-skeleton-surface: var(--color-zinc-300);
   --node-stroke: var(--color-stone-100);
 }
@@ -496,7 +498,7 @@ body {
 
 /* Strong and emphasis */
 .comfy-markdown-content strong {
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .comfy-markdown-content em {
@@ -507,7 +509,7 @@ body {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 100; /* Sit on top */
-  padding: 30px 30px 10px 30px;
+  padding: 30px 30px 10px;
   background-color: var(--comfy-menu-bg); /* Modal background */
   color: var(--error-text);
   box-shadow: 0 0 20px #888888;
@@ -555,8 +557,8 @@ body {
   background-color: var(--comfy-menu-bg);
   font-family: sans-serif;
   padding: 10px;
-  border-radius: 0 8px 8px 8px;
-  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
+  border-radius: 0 8px 8px;
+  box-shadow: 3px 3px 8px rgb(0 0 0 / 0.4);
 }
 
 .comfy-menu-header {
@@ -574,7 +576,7 @@ body {
 }
 
 .comfy-menu .comfy-menu-actions button {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0);
   padding: 0;
   border: none;
   cursor: pointer;
@@ -689,7 +691,7 @@ span.drag-handle::after {
   min-width: 160px;
   margin: 0;
   padding: 3px;
-  font-weight: normal;
+  font-weight: 400;
 }
 
 .comfy-list-items button {
@@ -806,7 +808,7 @@ dialog {
 }
 
 dialog::backdrop {
-  background: rgba(0, 0, 0, 0.5);
+  background: rgb(0 0 0 / 0.5);
 }
 
 .comfy-dialog.comfyui-dialog.comfy-modal {
@@ -1012,9 +1014,6 @@ audio.comfy-audio.empty-audio-widget {
 .lg-node {
   /* Disable text selection on all nodes */
   user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
 }
 
 .lg-node .lg-slot,
@@ -1041,7 +1040,6 @@ audio.comfy-audio.empty-audio-widget {
   filter: none;
   backdrop-filter: none;
   text-shadow: none;
-  -webkit-mask-image: none;
   mask-image: none;
   clip-path: none;
   background-image: none;

src/components/graph/NodeTooltip.vue

@@ -136,7 +136,7 @@ useEventListener(window, 'click', hideTooltip)
   pointer-events: none;
   background: var(--comfy-input-bg);
   border-radius: 5px;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 5px rgb(0 0 0 / 0.4);
   color: var(--input-text);
   font-family: sans-serif;
   left: 0;

src/components/graph/modals/ZoomControlsModal.vue

@@ -229,10 +229,10 @@ watch(
 </script>
 <style>
 .zoomInputContainer:focus-within {
-  border: 1px solid rgb(204, 204, 204);
+  border: 1px solid rgb(204 204 204);
 }
 
 .dark-theme .zoomInputContainer:focus-within {
-  border: 1px solid rgb(204, 204, 204);
+  border: 1px solid rgb(204 204 204);
 }
 </style>

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -526,7 +526,7 @@ onMounted(async () => {
   overflow-y: auto;
   background: var(--p-content-background);
   border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 32px rgb(0 0 0 / 0.15);
   border: 1px solid var(--p-content-border-color);
   backdrop-filter: blur(8px);
   position: relative;
@@ -611,7 +611,7 @@ onMounted(async () => {
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--p-text-muted-color);
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 0.5rem;
   padding: 0 1rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -669,7 +669,7 @@ onMounted(async () => {
   background: var(--p-content-background);
   border-radius: 12px;
   border: 1px solid var(--p-content-border-color);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 32px rgb(0 0 0 / 0.15);
   overflow: hidden;
   transition: opacity 0.15s ease-out;
 }