@comfyorg/design-system 1.1.0 → 1.3.0-alpha.0

package/src/css/_mask-editor.css

@@ -0,0 +1,179 @@
+#maskEditor_brush {
+  position: absolute;
+  pointer-events: none;
+  border-radius: 50%;
+  overflow: visible;
+  outline: 1px dashed black;
+  box-shadow: 0 0 0 1px white;
+}
+#maskEditor_brushPreviewGradient {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  display: none;
+}
+
+.maskEditor_sidePanelBrushRange {
+  width: 180px;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+}
+.maskEditor_sidePanelBrushRange::-webkit-slider-thumb {
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  cursor: grab;
+  margin-top: -8px;
+  background: var(--muted);
+  border: 1px solid var(--border);
+}
+.maskEditor_sidePanelBrushRange::-moz-range-thumb {
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  cursor: grab;
+  background: var(--muted);
+  border: 1px solid var(--border);
+}
+.maskEditor_sidePanelBrushRange::-webkit-slider-runnable-track {
+  background: var(--border);
+  height: 3px;
+}
+.maskEditor_sidePanelBrushRange::-moz-range-track {
+  background: var(--border);
+  height: 3px;
+}
+
+.maskEditor_toolPanelContainer {
+  width: 4rem;
+  height: 4rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  transition: background-color 0.2s;
+}
+.maskEditor_toolPanelContainerSelected .maskEditor_toolPanelIndicator {
+  display: block;
+}
+.maskEditor_toolPanelContainer svg {
+  width: 75%;
+  aspect-ratio: 1/1;
+}
+
+.maskEditor_toolPanelIndicator {
+  display: none;
+  height: 100%;
+  width: 4px;
+  position: absolute;
+  left: 0;
+  background: currentColor;
+}
+
+#maskEditorCanvasContainer {
+  position: absolute;
+  width: 1000px;
+  height: 667px;
+  left: 359px;
+  top: 280px;
+}
+
+.maskEditor_sidePanelToggleContainer {
+  cursor: pointer;
+  display: inline-block;
+  position: absolute;
+  right: 0;
+}
+
+.maskEditor_sidePanelToggleSwitch {
+  display: inline-block;
+  border-radius: 16px;
+  width: 40px;
+  height: 24px;
+  position: relative;
+  vertical-align: middle;
+  transition: background 0.25s;
+  background: var(--muted);
+}
+
+.maskEditor_sidePanelToggleSwitch::before,
+.maskEditor_sidePanelToggleSwitch::after {
+  content: '';
+}
+.maskEditor_sidePanelToggleSwitch::before {
+  display: block;
+  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  transition: ease 0.2s;
+}
+.maskEditor_sidePanelToggleContainer:hover
+  .maskEditor_sidePanelToggleSwitch::before {
+  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
+}
+.maskEditor_sidePanelToggleCheckbox:checked
+  + .maskEditor_sidePanelToggleSwitch {
+  background: var(--primary);
+}
+.maskEditor_sidePanelToggleCheckbox:checked
+  + .maskEditor_sidePanelToggleSwitch::before {
+  background: var(--background);
+  left: 20px;
+}
+.maskEditor_sidePanelToggleCheckbox {
+  position: absolute;
+  visibility: hidden;
+}
+
+.maskEditor_sidePanelDropdown {
+  border: 1px solid var(--border);
+  background: var(--background);
+  height: 24px;
+  padding-left: 5px;
+  padding-right: 5px;
+  border-radius: 6px;
+  transition: background 0.1s;
+}
+
+.maskEditor_sidePanelDropdown option {
+  background: var(--background);
+}
+
+.maskEditor_sidePanelDropdown:focus {
+  outline: 1px solid var(--primary);
+}
+
+.maskEditor_sidePanelDropdown option:hover {
+  background: white;
+}
+.maskEditor_sidePanelDropdown option:active {
+  background: var(--muted);
+}
+
+.maskEditor_sidePanelLayerPreviewContainer {
+  width: 40px;
+  height: 30px;
+}
+
+.maskEditor_sidePanelLayerPreviewContainer > svg {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  fill: var(--foreground);
+}
+
+.maskEditor_sidePanelImageLayerImage {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.maskEditor_sidePanelLayerCheckbox {
+  margin-left: 15px;
+}

package/src/css/_palette.css

@@ -4,10 +4,6 @@
   --font-formula: 'PP Formula', 'Inter', sans-serif;
 
   /* Palette Colors */
-  --color-transparency-white-t8: rgb(255 255 255 / 0.08);
-  --color-transparency-white-t20: rgb(255 255 255 / 0.2);
-  --color-transparency-white-t40: rgb(255 255 255 / 0.4);
-
   --color-charcoal-100: #55565e;
   --color-charcoal-200: #494a50;
   --color-charcoal-300: #3c3d42;
@@ -34,6 +30,37 @@
   --color-smoke-700: #a0a0a0;
   --color-smoke-800: #8a8a8a;
 
+  --color-ivory-100: #fdfbfa;
+  --color-ivory-200: #faf9f5;
+  --color-ivory-300: #f0eee6;
+
+  --color-sand-100: #e1ded5;
+  --color-sand-200: #fff7d5;
+  --color-sand-300: #888682;
+  --color-sand-400: #eed7ac;
+
+  --color-azure-300: #78bae9;
+  --color-azure-400: #31b9f4;
+  --color-azure-600: #0b8ce9;
+
+  --color-cobalt-800: #185a8b;
+
+  --color-jade-400: #47e469;
+  --color-jade-600: #00cd72;
+
+  --color-gold-400: #fcbf64;
+  --color-gold-500: #fdab34;
+  --color-gold-600: #fd9903;
+  --color-gold-700: #c77700;
+  --color-gold-800: #8c6a38;
+
+  --color-coral-500: #f75951;
+  --color-coral-600: #e04e48;
+  --color-coral-700: #b33a3a;
+
+  --color-magenta-300: #ceaac9;
+  --color-magenta-700: #6a246a;
+
   /* Plum */
   --color-plum-300: #afa3db;
   --color-plum-400: #8d7fc5;
@@ -59,4 +86,13 @@
   --color-sapphire-700: #172dd7;
   --color-brand-yellow: var(--color-electric-400);
   --color-brand-blue: var(--color-sapphire-700);
+
+  --color-primary-comfy-ink: #211927;
+  --color-primary-comfy-canvas: #c2bfb9;
+  --color-primary-warm-white: #f0efed;
+  --color-primary-warm-gray: #7e7c78;
+
+  --color-ocean-300: #badde8;
+  --color-ocean-600: #2f687a;
+  --color-ocean-900: #253236;
 }

package/src/css/base.css

@@ -1,8 +1,2 @@
-/*
- * Design System Base — Brand tokens + fonts only.
- * For marketing sites that don't use PrimeVue or the node editor.
- * Import the full style.css instead for the desktop app.
- */
-
 @import './fonts.css';
 @import './_palette.css';

package/src/css/component-support.css

@@ -0,0 +1,69 @@
+@import './_palette.css';
+@import 'tw-animate-css';
+
+@plugin "./iconifyDynamicPlugin.ts";
+
+@plugin "./lucideStrokePlugin.js";
+
+@custom-variant touch (@media (hover: none));
+
+@theme {
+  --z-index-panel: 1100;
+  --z-index-education: 1500;
+  --z-index-onboarding: 1600;
+  --z-index-overlay: 1700;
+  --z-index-tour: 1800;
+  --z-index-toast: 9999;
+  --z-index-blocking: 10000;
+
+  --text-2xs: 0.625rem;
+  --text-2xs--line-height: calc(1 / 0.625);
+
+  --text-3xs: 0.5625rem;
+  --text-3xs--line-height: calc(1 / 0.5625);
+
+  --color-credit: #ddbd31;
+  --color-warning-foreground: var(--color-charcoal-800);
+}
+
+@utility highlight {
+  background-color: color-mix(in srgb, currentColor 20%, transparent);
+  font-weight: 700;
+  border-radius: 0.25rem;
+}
+
+@utility scrollbar-hide {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    width: 1px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+}
+
+@utility scrollbar-custom {
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--muted) transparent;
+
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--muted);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--muted);
+  }
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}

package/src/css/iconSizing.test.ts

@@ -0,0 +1,80 @@
+import tailwindcss from '@tailwindcss/vite'
+import { resolve } from 'node:path'
+import { build } from 'vite'
+import { assert, expect, it } from 'vitest'
+
+it('compiles non-shrinking size-4 icons with explicit overrides', async () => {
+  const entry = resolve(import.meta.dirname, 'icon-sizing.css')
+  const result = await build({
+    configFile: false,
+    logLevel: 'silent',
+    plugins: [
+      {
+        name: 'icon-sizing-fixture',
+        resolveId: (id) => (id === entry ? entry : undefined),
+        load: (id) =>
+          id === entry
+            ? `
+              @layer theme, components, utilities;
+              @import 'tailwindcss/theme' layer(theme);
+              @import 'tailwindcss/utilities' layer(utilities) source(none);
+              @plugin './iconifyDynamicPlugin.ts';
+              @plugin './lucideStrokePlugin.js';
+              @source inline('icon-[lucide--check] icon-img-[comfy--comfy-logo] icon-mask-[comfy--comfy-logo] icon-s1.5-[lucide--check] size-3 size-6 w-8 h-5 shrink');
+            `
+            : undefined
+      },
+      tailwindcss()
+    ],
+    build: {
+      write: false,
+      cssMinify: false,
+      rollupOptions: { input: entry }
+    }
+  })
+
+  assert(!Array.isArray(result) && 'output' in result)
+  const asset = result.output.find(
+    (entry) => entry.type === 'asset' && entry.fileName.endsWith('.css')
+  )
+  assert(asset?.type === 'asset')
+  const rules = new Map(
+    Array.from(
+      asset.source.toString().matchAll(/([^{}]+)\{([^{}]*)\}/g),
+      ([, selector, body]) => [
+        selector.trim().replaceAll('\\', ''),
+        Object.fromEntries(
+          Array.from(
+            body.matchAll(/([\w-]+):\s*([^;]+);/g),
+            ([, property, value]) => [property, value]
+          )
+        )
+      ]
+    )
+  )
+
+  expect(
+    [
+      '.icon-[lucide--check]',
+      '.icon-img-[comfy--comfy-logo]',
+      '.icon-mask-[comfy--comfy-logo]',
+      '.icon-s1.5-[lucide--check]'
+    ].map((selector) => {
+      const rule = rules.get(selector)
+      return [rule?.width, rule?.height, rule?.['flex-shrink']]
+    })
+  ).toEqual(
+    Array(4).fill(['calc(var(--spacing) * 4)', 'calc(var(--spacing) * 4)', '0'])
+  )
+  expect(rules.get('.size-3')).toEqual({
+    width: 'calc(var(--spacing) * 3)',
+    height: 'calc(var(--spacing) * 3)'
+  })
+  expect(rules.get('.size-6')).toEqual({
+    width: 'calc(var(--spacing) * 6)',
+    height: 'calc(var(--spacing) * 6)'
+  })
+  expect(rules.get('.w-8')?.width).toBe('calc(var(--spacing) * 8)')
+  expect(rules.get('.h-5')?.height).toBe('calc(var(--spacing) * 5)')
+  expect(rules.get('.shrink')?.['flex-shrink']).toBe('1')
+}, 30_000)

package/src/css/iconifyDynamicPlugin.ts

@@ -6,11 +6,10 @@ import plugin from 'tailwindcss/plugin'
 
 import { COMFY_ICON_PREFIX, loadComfyIconSet } from './comfyIconSet.js'
 
-const SCALE = 1.2
+const SIZE = 'calc(var(--spacing) * 4)'
 
 const options = {
-  iconSets: { [COMFY_ICON_PREFIX]: loadComfyIconSet() },
-  scale: SCALE
+  iconSets: { [COMFY_ICON_PREFIX]: loadComfyIconSet() }
 }
 
 function getModeCSSRules(icon: string, mode: 'mask' | 'background') {
@@ -30,15 +29,25 @@ function getModeCSSRules(icon: string, mode: 'mask' | 'background') {
   })
   if (generated.css.length !== 1) return {}
 
-  const size = { width: `${SCALE}em`, height: `${SCALE}em` }
-  return { ...generated.common?.rules, ...size, ...generated.css[0].rules }
+  return {
+    ...generated.common?.rules,
+    ...generated.css[0].rules,
+    width: SIZE,
+    height: SIZE,
+    'flex-shrink': '0'
+  }
 }
 
 export default plugin(({ matchComponents }) => {
   matchComponents({
     icon: (icon) => {
       try {
-        return getDynamicCSSRules(icon, options)
+        return {
+          ...getDynamicCSSRules(icon, options),
+          width: SIZE,
+          height: SIZE,
+          'flex-shrink': '0'
+        }
       } catch {
         return {}
       }

package/src/css/icons.test.ts

@@ -0,0 +1,17 @@
+import { SVG, cleanupSVG } from '@iconify/tools'
+import { readFileSync, readdirSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { expect, it } from 'vitest'
+
+const iconsDirectory = resolve(import.meta.dirname, '../icons')
+const icons = readdirSync(iconsDirectory).filter((name) =>
+  name.endsWith('.svg')
+)
+
+it.for(icons)('%s sanitizes without warnings', (name) => {
+  const svg = new SVG(readFileSync(resolve(iconsDirectory, name), 'utf8'))
+
+  cleanupSVG(svg)
+
+  expect(console.warn).not.toHaveBeenCalled()
+})

package/src/css/lucideStrokePlugin.js

@@ -25,7 +25,7 @@ const STROKE_WIDTHS = ['1', '1.3', '1.5', '2', '2.5']
 const LUCIDE_PREFIX = 'lucide'
 const SUPPORTED_PREFIXES = new Set([LUCIDE_PREFIX, COMFY_ICON_PREFIX])
 
-const SCALE = 1.2
+const SIZE = 'calc(var(--spacing) * 4)'
 
 const STROKE_WIDTH_ATTR_RE = /stroke-width="[^"]*"/g
 
@@ -62,13 +62,12 @@ function getDynamicCSSRulesWithStroke(icon, strokeWidth) {
   if (generated.css.length !== 1) {
     throw new Error(`Cannot find "${icon}". Bad icon name?`)
   }
-  if (SCALE && generated.common?.rules) {
-    generated.common.rules.height = SCALE + 'em'
-    generated.common.rules.width = SCALE + 'em'
-  }
   return {
     ...generated.common?.rules,
-    ...generated.css[0].rules
+    ...generated.css[0].rules,
+    width: SIZE,
+    height: SIZE,
+    'flex-shrink': '0'
   }
 }
 

package/src/css/published.css

@@ -0,0 +1,3 @@
+@import './theme.css';
+
+@source '../../dist';