fix: apply stylelint auto-fixes

Auto-fix 68 CSS issues found by stylelint:
- Convert legacy color functions (rgba() → rgb())
- Normalize font weights (bold/normal → 700/400)
- Use shorthand properties (top/right/bottom/left → inset)
- Add url() wrapper to @import statements
- Remove redundant shorthand values
- Fix pseudo-element notation (: → ::)

Remaining 45 issues require manual review:
- 44 descending specificity warnings
- 1 duplicate selector

Author: christian-byrne

apps/desktop-ui/src/assets/css/style.css

@@ -1,4 +1,4 @@
-@import '@comfyorg/design-system/css/style.css';
+@import url('@comfyorg/design-system/css/style.css');
 
 #desktop-app {
   position: absolute;

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

@@ -70,7 +70,7 @@ onUnmounted(() => electron.Validation.dispose())
   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

@@ -191,7 +191,7 @@ onUnmounted(() => electron.Validation.dispose())
   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%
           );
         "

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

@@ -1,9 +1,9 @@
 @layer theme, base, primevue, components, utilities;
 
-@import './fonts.css';
-@import 'tailwindcss/theme' layer(theme);
-@import 'tailwindcss/utilities' layer(utilities);
-@import 'tw-animate-css';
+@import url('./fonts.css');
+@import url('tailwindcss/theme') layer(theme);
+@import url('tailwindcss/utilities') layer(utilities);
+@import url('tw-animate-css');
 
 @plugin 'tailwindcss-primeui';
 
@@ -33,9 +33,9 @@
   --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);
+  --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);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -496,7 +496,7 @@ body {
 
 /* Strong and emphasis */
 .comfy-markdown-content strong {
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .comfy-markdown-content em {
@@ -507,7 +507,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 +555,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 +574,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 +689,7 @@ span.drag-handle::after {
   min-width: 160px;
   margin: 0;
   padding: 3px;
-  font-weight: normal;
+  font-weight: 400;
 }
 
 .comfy-list-items button {
@@ -744,10 +744,7 @@ button.comfy-queue-btn {
 
 @media only screen and (max-height: 850px) {
   .comfy-menu {
-    top: 0 !important;
-    bottom: 0 !important;
-    left: auto !important;
-    right: 0 !important;
+    inset: 0 0 0 auto !important;
     border-radius: 0;
   }
 
@@ -806,14 +803,11 @@ dialog {
 }
 
 dialog::backdrop {
-  background: rgba(0, 0, 0, 0.5);
+  background: rgb(0 0 0 / 0.5);
 }
 
 .comfy-dialog.comfyui-dialog.comfy-modal {
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   transform: none;
 }
 
@@ -825,8 +819,7 @@ dialog::backdrop {
 }
 
 .comfy-dialog .comfy-modal-content {
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   gap: 10px;
   color: var(--fg-color);
 }
@@ -898,8 +891,7 @@ dialog::backdrop {
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
-  align-content: flex-start;
-  justify-content: center;
+  place-content: flex-start center;
 }
 
 .comfy-img-preview img {
@@ -1012,9 +1004,9 @@ 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;
+  user-select: none;
+  user-select: none;
+  user-select: none;
 }
 
 .lg-node .lg-slot,
@@ -1041,7 +1033,7 @@ audio.comfy-audio.empty-audio-widget {
   filter: none;
   backdrop-filter: none;
   text-shadow: none;
-  -webkit-mask-image: none;
+  mask-image: none;
   mask-image: none;
   clip-path: none;
   background-image: none;

src/assets/css/style.css

@@ -1 +1 @@
-@import '@comfyorg/design-system/css/style.css';
+@import url('@comfyorg/design-system/css/style.css');

src/components/common/TreeExplorer.vue

@@ -263,10 +263,7 @@ defineExpose({
 :deep(.p-tree-node-content:has(.tree-folder.can-drop))::after {
   content: '';
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   border: 1px solid var(--p-content-color);
   pointer-events: 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;
 }