@comfyorg/design-system 1.2.0 → 1.3.0-alpha.1

package/src/css/theme.css

@@ -0,0 +1,175 @@
+@layer theme, base, components, utilities;
+
+@import './fonts.css';
+@import './_baseline.css';
+@import './_deprecated-aliases.css';
+@import './_legacy-palette.css';
+@import 'tailwindcss/theme' layer(theme);
+@import 'tailwindcss/utilities' layer(utilities);
+
+/* Safelist dynamic comfy icons for node library folders */
+@source inline("icon-[comfy--{ai-model,anthropic,bfl,bria,bytedance,claude,comfy-cloud,comfy-logo,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver}]");
+
+/* Badge icon names are built at runtime, so the scanner cannot find them. */
+@source inline("icon-mask-[comfy--{3d-decomp,ai-model,anthropic,batch-images-node,bfl,bria,brightness-contrast,bytedance,canny,canny-to-image,canny-to-video,channels,chromatic-aberration,claude,comfy-c,comfy-logo,credits,depth-to-image,depth-to-video,dial,elevenlabs,extensions-blocks,file-output,frames-to-video,gemini,get-video-components,glow,grain,grok,hitpaw,ideogram,image-ai-edit,image-batch,image-blur,image-canny,image-captioning,image-collage,image-compare,image-depth,image-edit,image-inpaint,image-invert,image-outpaint,image-outpainting,image-remove-background,image-rotate,image-select-object-segmentation,image-shader,image-sharpen,image-to-3d,image-to-image,image-to-layers,image-to-video,image-upscale,image-vectorize,kling,load-3d,load-audio,load-video,lora-loader,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,open-ai-chat-node,openai,pin,pixverse,play,pose-to-image,pose-to-video,quiver,recraft,reve,rodin,runway,save-3d,save-audio,save-video,send,sora,stability-ai,template,tencent,text-prompt-enhance,text-to-3d,text-to-audio,text-to-image,text-to-video,topaz,tripo,veo,video-captioning,video-edit,video-enhance,video-extract-frame,video-inpaint,video-interpolation,video-select-object-segmentation,video-slice,video-split-screen,video-trim,video-upscale,vidu,voice-clone,wan,wavespeed,workflow}]");
+
+@theme {
+  --shadow-inset-highlight: inset 0 1px 0 0 rgb(from white r g b / 0.1);
+
+  --color-bypass: #6a246a;
+}
+
+:root {
+  --node-foreground: var(--color-smoke-700);
+  --node-header: var(--color-charcoal-700);
+  --node-border: var(--color-charcoal-100);
+  --node: var(--card);
+
+  --default-transition-duration: 0.1s;
+  --comfy-topbar-height: 2.5rem;
+  --workflow-tabs-height: 2.375rem;
+  --comfy-textarea-font-size: 10px;
+}
+
+@theme inline {
+  --color-node: var(--node);
+  --color-node-foreground: var(--node-foreground);
+  --color-node-header: var(--node-header);
+  --color-node-border: var(--node-border);
+}
+
+@utility floating-panel {
+  border-radius: var(--radius-xl);
+  padding: --spacing(1);
+  background-color: var(--background);
+  box-shadow: var(--shadow-inset-highlight), theme(boxShadow.lg);
+}
+
+/* Everthing below here to be cleaned up over time. */
+
+:root[data-palette-switching] * {
+  transition: none;
+}
+
+body {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+  min-height: -webkit-fill-available;
+  max-height: -webkit-fill-available;
+  min-width: -webkit-fill-available;
+  max-width: -webkit-fill-available;
+  font-family: Inter, Arial, sans-serif;
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+.comfy-multiline-input {
+  background-color: var(--input);
+  color: var(--foreground);
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 2px;
+  resize: none;
+  border: none;
+  box-sizing: border-box;
+  font-family: var(--font-mono);
+  font-size: var(--comfy-textarea-font-size);
+}
+
+@import './_markdown.css';
+
+@import './_legacy-ui.css';
+
+audio.comfy-audio.empty-audio-widget {
+  display: none;
+}
+
+#vue-app {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* [Desktop] Electron window specific styles */
+.app-drag {
+  app-region: drag;
+}
+
+.no-drag {
+  app-region: no-drag;
+}
+
+.window-actions-spacer {
+  width: calc(100vw - env(titlebar-area-width, 100vw));
+}
+/* End of [Desktop] Electron window specific styles */
+
+.lg-node {
+  /* Disable text selection on all nodes */
+  user-select: none;
+}
+
+.lg-node .lg-slot {
+  transition:
+    opacity 0.1s ease,
+    font-size 0.1s ease;
+}
+
+@import './_mask-editor.css';
+
+/* ===================== Skeleton Shimmer ===================== */
+.skeleton-shimmer {
+  background:
+    linear-gradient(135deg, rgb(188 188 188 / 0.5) 0%, rgb(0 0 0 / 0.5) 100%) 0
+      0 / 200% 200%,
+    #000;
+  animation: skeleton-shimmer 2s ease-in-out infinite;
+}
+
+@keyframes skeleton-shimmer {
+  0%,
+  100% {
+    background-position: 100% 100%;
+  }
+  50% {
+    background-position: 0 0;
+  }
+}
+
+@utility scroll-shadows-* {
+  overflow: auto;
+
+  background:
+    /* Shadow Cover TOP */
+    linear-gradient(--value(--color-*) 30%, transparent) center top,
+    /* Shadow Cover BOTTOM */
+    linear-gradient(transparent, --value(--color-*) 70%) center bottom,
+    /* Shadow TOP */
+    radial-gradient(
+        farthest-side at 50% 0,
+        color-mix(in oklab, --value(--color-*), #777777 35%),
+        60%,
+        transparent
+      )
+      center top,
+    /* Shadow BOTTOM */
+    radial-gradient(
+        farthest-side at 50% 100%,
+        color-mix(in oklab, --value(--color-*), #777777 35%),
+        60%,
+        transparent
+      )
+      center bottom;
+
+  background-repeat: no-repeat;
+  background-size:
+    300% 40px,
+    300% 40px,
+    300% 14px,
+    300% 14px;
+  background-attachment: local, local, scroll, scroll;
+}

package/src/icons/README.md

@@ -1,62 +1,34 @@
 # ComfyUI Icons Guide
 
-ComfyUI supports three types of icons that can be used throughout the interface. All icons are automatically imported - no manual imports needed!
+ComfyUI supports two types of icons: Lucide icons and custom icons. All icons are automatically imported - no manual imports needed!
 
 ## Quick Start - Code Examples
 
-### 1. PrimeIcons
+Lucide is the only third-party icon set. Don't add icons from other sets such as Heroicons, Tabler, or Carbon. PrimeIcons and Material Design Icons (`mdi`) are being phased out; don't add new uses, in first-party code or extensions. See [PrimeIcons (deprecated)](#primeicons-deprecated).
 
-```vue
-<template>
-  <!-- Basic usage -->
-  <i class="pi pi-plus" />
-  <i class="pi pi-cog" />
-  <i class="pi pi-check text-green-500" />
-
-  <!-- In a design-system Button -->
-  <Button>
-    <i class="pi pi-save" />
-    Save
-  </Button>
-</template>
-```
-
-[Browse all PrimeIcons →](https://github.com/primefaces/primeicons)
-
-### 2. Iconify Icons (Recommended)
+### 1. Lucide Icons
 
 ```vue
 <template>
-  <!-- Primary icon set: Lucide -->
   <i class="icon-[lucide--download]" />
   <i class="icon-[lucide--settings]" />
-  <i class="icon-[lucide--workflow]" class="text-2xl" />
-
-  <!-- Other popular icon sets -->
-  <i-mdi:folder-open />
-  <!-- Material Design Icons -->
-  <i-heroicons:document-text />
-  <!-- Heroicons -->
-  <i-tabler:brand-github />
-  <!-- Tabler Icons -->
-  <i-carbon:cloud-upload />
-  <!-- Carbon Icons -->
+  <i class="icon-[lucide--workflow] size-6" />
 
   <!-- With styling -->
-  <i class="icon-[lucide--save]" class="w-6 h-6 text-blue-500" />
+  <i class="icon-[lucide--save] size-6 text-blue-500" />
 </template>
 ```
 
-[Browse 200,000+ icons →](https://icon-sets.iconify.design/)
+[Browse Lucide icons →](https://lucide.dev/icons/)
 
-### 3. Custom Icons
+### 2. Custom Icons
 
 ```vue
 <template>
   <!-- Your custom SVG icons from packages/design-system/src/icons/ -->
   <i-comfy:workflow />
   <i-comfy:node-tree />
-  <i-comfy:my-custom-icon class="text-xl" />
+  <i-comfy:my-custom-icon class="size-5" />
 
   <!-- In a design-system Button -->
   <Button variant="secondary">
@@ -71,13 +43,6 @@ ComfyUI supports three types of icons that can be used throughout the interface.
 
 ```vue
 <template>
-  <!-- PrimeIcon in button -->
-  <Button>
-    <i class="pi pi-check" />
-    Confirm
-  </Button>
-
-  <!-- Iconify/Custom in button -->
   <Button>
     <i class="icon-[lucide--save]" />
     Save File
@@ -115,22 +80,11 @@ can reach it. See `packages/design-system/src/components/tooltip/README.md` for
 </template>
 ```
 
-## Using Iconify Icons
+## Finding Lucide Icons
 
-### Finding Icons
-
-1. Visit [Iconify Icon Sets](https://icon-sets.iconify.design/)
-2. Search or browse collections
-3. Click on any icon to get its name
-4. Use with `i-[collection]:[icon-name]` format
-
-### Popular Collections
-
-- **Lucide** (`i-lucide:`) - Our primary icon set, clean and consistent
-- **Material Design Icons** (`i-mdi:`) - Comprehensive Material Design icons
-- **Heroicons** (`i-heroicons:`) - Beautiful hand-crafted SVG icons
-- **Tabler** (`i-tabler:`) - 3000+ free SVG icons
-- **Carbon** (`i-carbon:`) - IBM's design system icons
+1. Search [Lucide Icons](https://lucide.dev/icons/)
+2. Copy the icon's name, such as `folder-open`
+3. Use it as `icon-[lucide--folder-open]`
 
 ## Adding Custom Icons
 
@@ -208,23 +162,20 @@ claude.svg     fill="#d97757"       -> image (brand color preserved)
 
 ### Size & Styling
 
+`icon-[...]`, `icon-img-[...]`, and `icon-mask-[...]` default to `size-4` (16px). Font size has no effect on them, so don't size them with `text-*`. Override the size with `size-*` on the `<i>` itself:
+
 ```vue
 <template>
-  <!-- Size with Tailwind classes -->
-  <i class="icon-[lucide--plus]" class="w-4 h-4" />
-  <!-- 16px -->
-  <i class="icon-[lucide--plus]" class="w-6 h-6" />
-  <!-- 24px (default) -->
-  <i class="icon-[lucide--plus]" class="w-8 h-8" />
-  <!-- 32px -->
-
-  <!-- Or text size -->
-  <i class="icon-[lucide--plus]" class="text-sm" />
-  <i class="icon-[lucide--plus]" class="text-2xl" />
+  <i class="icon-[lucide--plus]" />
+  <!-- 16px (default) -->
+  <i class="icon-[lucide--plus] size-3" />
+  <!-- 12px -->
+  <i class="icon-[lucide--plus] size-6" />
+  <!-- 24px -->
 
   <!-- Colors -->
-  <i class="icon-[lucide--check]" class="text-green-500" />
-  <i class="icon-[lucide--x]" class="text-red-500" />
+  <i class="icon-[lucide--check] text-green-500" />
+  <i class="icon-[lucide--x] text-red-500" />
 </template>
 ```
 
@@ -262,6 +213,20 @@ Always use `currentColor` in SVGs for automatic theme adaptation:
 </template>
 ```
 
+A `pi` glyph sized with a `text-*` class becomes an explicit `size-*` class. Pick the size by eye rather than converting the font size, because Lucide glyphs fill their viewBox differently from PrimeIcons:
+
+```vue
+<template>
+  <!-- Before -->
+  <i class="pi pi-folder text-lg" />
+
+  <!-- After -->
+  <i class="icon-[lucide--folder] size-5" />
+</template>
+```
+
+Use `scale-*` only when a wrapper hardcodes the icon's size, such as `SidebarIcon`, which sets `size-5` on the `<i>` it renders from an icon class string.
+
 ### From Inline SVG to Custom Icon
 
 ```vue
@@ -276,6 +241,10 @@ Always use `currentColor` in SVGs for automatic theme adaptation:
 </template>
 ```
 
+## PrimeIcons (deprecated)
+
+`primeicons` is still imported in `src/main.ts` only so existing extensions that render `pi pi-*` classes keep working while it is phased out. Don't use PrimeIcons in new code, including extensions.
+
 ## Technical Details
 
 ### Auto-Import System
@@ -287,7 +256,7 @@ Icons are automatically imported using `unplugin-icons` - no manual imports need
 The icon system has two layers:
 
 1. **Tailwind CSS Plugin** (`@iconify/tailwind4`):
-   - Configured via `@plugin` directive in `packages/design-system/src/css/style.css`
+   - Configured via `@plugin` directive in `packages/design-system/src/css/theme.css`
    - Uses `from-folder(comfy, ...)` to load SVGs from `packages/design-system/src/icons/`
    - Auto-cleans and optimizes SVGs at build time
 
@@ -352,19 +321,7 @@ Icons are fully typed. If TypeScript doesn't recognize a new custom icon:
 4. **Theme support**: Always use `currentColor` for adaptable icons
 5. **Test both themes**: Verify icons look good in light and dark modes
 
-## Adding Icon Collections
-
-To add an entire icon set from npm:
-
-1. Install the icon package
-2. Configure in `vite.config.mts`
-3. Use with the appropriate prefix
-
-See the [unplugin-icons documentation](https://github.com/unplugin/unplugin-icons) for details.
-
 ## Resources
 
-- [PrimeIcons List](https://github.com/primefaces/primeicons)
-- [Iconify Icon Browser](https://icon-sets.iconify.design/)
 - [Lucide Icons](https://lucide.dev/icons/)
 - [unplugin-icons docs](https://github.com/unplugin/unplugin-icons)