@comfyorg/design-system 1.0.0

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@comfyorg/design-system",
+  "version": "1.0.0",
+  "description": "Shared design system for ComfyUI Frontend",
+  "homepage": "https://comfy.org",
+  "license": "MIT",
+  "author": {
+    "name": "Comfy Org",
+    "email": "support@comfy.org",
+    "url": "https://www.comfy.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Comfy-Org/ComfyUI_frontend.git"
+  },
+  "files": [
+    "src/css",
+    "src/icons"
+  ],
+  "type": "module",
+  "exports": {
+    "./css/*": "./src/css/*",
+    "./icons/*": "./src/icons/*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.1.178",
+    "@iconify/tailwind4": "^1.2.3",
+    "@iconify/tools": "^5.0.3",
+    "@iconify/utils": "^3.1.0",
+    "tailwindcss-primeui": "^0.6.1",
+    "tw-animate-css": "^1.3.8"
+  },
+  "devDependencies": {
+    "tailwindcss": "^4.3.2",
+    "typescript": "^6.0.3"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/css/_palette.css

@@ -0,0 +1,55 @@
+@theme {
+  /* Font Families */
+  --font-inter: 'Inter', sans-serif;
+
+  /* Palette Colors */
+  --color-charcoal-100: #55565e;
+  --color-charcoal-200: #494a50;
+  --color-charcoal-300: #3c3d42;
+  --color-charcoal-400: #313235;
+  --color-charcoal-500: #2d2e32;
+  --color-charcoal-600: #262729;
+  --color-charcoal-700: #202121;
+  --color-charcoal-800: #171718;
+
+  --color-neutral-550: #636363;
+
+  --color-ash-300: #bbbbbb;
+  --color-ash-500: #828282;
+  --color-ash-800: #444444;
+
+  --color-smoke-100: #f3f3f3;
+  --color-smoke-200: #e9e9e9;
+  --color-smoke-300: #e1e1e1;
+  --color-smoke-400: #d9d9d9;
+  --color-smoke-500: #c5c5c5;
+  --color-smoke-600: #b4b4b4;
+  --color-smoke-700: #a0a0a0;
+  --color-smoke-800: #8a8a8a;
+
+  /* Plum */
+  --color-plum-300: #afa3db;
+  --color-plum-400: #8d7fc5;
+  --color-plum-500: #6b5ca8;
+  --color-plum-600: #49378b;
+
+  /* Ink */
+  --color-ink-100: #5c5362;
+  --color-ink-200: #4f4754;
+  --color-ink-300: #413b45;
+  --color-ink-400: #353139;
+  --color-ink-500: #312c34;
+  --color-ink-600: #29252c;
+  --color-ink-700: #232025;
+  --color-ink-800: #19161a;
+  --color-ink-900: #151317;
+
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* Brand Colors */
+  --color-electric-400: #f0ff41;
+  --color-sapphire-700: #172dd7;
+  --color-brand-yellow: var(--color-electric-400);
+  --color-brand-blue: var(--color-sapphire-700);
+}

package/src/css/base.css

@@ -0,0 +1,8 @@
+/*
+ * 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/comfyIconSet.js

@@ -0,0 +1,30 @@
+import { cleanupSVG, importDirectorySync, runSVGO } from '@iconify/tools'
+import { resolve } from 'node:path'
+
+export const COMFY_ICON_PREFIX = 'comfy'
+
+const COMFY_ICONS_DIR = resolve(import.meta.dirname, '../icons')
+
+let cached
+
+export function loadComfyIconSet() {
+  if (cached) return cached
+  const iconSet = importDirectorySync(COMFY_ICONS_DIR)
+  iconSet.forEachSync((name, type) => {
+    if (type !== 'icon') return
+    const svg = iconSet.toSVG(name)
+    if (!svg) {
+      iconSet.remove(name)
+      return
+    }
+    try {
+      cleanupSVG(svg)
+      runSVGO(svg)
+      iconSet.fromSVG(name, svg)
+    } catch {
+      iconSet.remove(name)
+    }
+  })
+  cached = iconSet.export()
+  return cached
+}

package/src/css/fonts.css

@@ -0,0 +1,17 @@
+/* Inter Font Family */
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-latin-normal.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-latin-italic.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}

package/src/css/iconifyDynamicPlugin.ts

@@ -0,0 +1,49 @@
+import { loadIconSet } from '@iconify/tailwind4/lib/helpers/loader.js'
+import { getDynamicCSSRules } from '@iconify/tailwind4/lib/plugins/dynamic.js'
+import { getIconsCSSData } from '@iconify/utils/lib/css/icons'
+import { matchIconName } from '@iconify/utils/lib/icon/name'
+import plugin from 'tailwindcss/plugin'
+
+import { COMFY_ICON_PREFIX, loadComfyIconSet } from './comfyIconSet.js'
+
+const SCALE = 1.2
+
+const options = {
+  iconSets: { [COMFY_ICON_PREFIX]: loadComfyIconSet() },
+  scale: SCALE
+}
+
+function getModeCSSRules(icon: string, mode: 'mask' | 'background') {
+  const nameParts = icon.split(/--|:/)
+  if (nameParts.length !== 2) return {}
+
+  const [prefix, name] = nameParts
+  if (!(prefix.match(matchIconName) && name.match(matchIconName))) return {}
+
+  const iconSet =
+    prefix === COMFY_ICON_PREFIX ? loadComfyIconSet() : loadIconSet(prefix)
+  if (!iconSet) return {}
+
+  const generated = getIconsCSSData(iconSet, [name], {
+    iconSelector: '.icon',
+    mode
+  })
+  if (generated.css.length !== 1) return {}
+
+  const size = { width: `${SCALE}em`, height: `${SCALE}em` }
+  return { ...generated.common?.rules, ...size, ...generated.css[0].rules }
+}
+
+export default plugin(({ matchComponents }) => {
+  matchComponents({
+    icon: (icon) => {
+      try {
+        return getDynamicCSSRules(icon, options)
+      } catch {
+        return {}
+      }
+    },
+    'icon-img': (icon) => getModeCSSRules(icon, 'background'),
+    'icon-mask': (icon) => getModeCSSRules(icon, 'mask')
+  })
+})

package/src/css/lucideStrokePlugin.js

@@ -0,0 +1,88 @@
+import { getIconsCSSData } from '@iconify/utils/lib/css/icons'
+import { matchIconName } from '@iconify/utils/lib/icon/name'
+import { loadIconSet } from '@iconify/tailwind4/lib/helpers/loader.js'
+import plugin from 'tailwindcss/plugin'
+
+import { COMFY_ICON_PREFIX, loadComfyIconSet } from './comfyIconSet.js'
+
+/**
+ * Tailwind 4 plugin that provides icon variants with configurable
+ * stroke-width via class prefix. Supports lucide and comfy icon sets.
+ *
+ * Usage in CSS:
+ *   @plugin "./lucideStrokePlugin.js";
+ *
+ * Usage in templates:
+ *   <i class="icon-s1-[lucide--settings]" />     <!-- stroke-width: 1 -->
+ *   <i class="icon-s1.5-[lucide--settings]" />   <!-- stroke-width: 1.5 -->
+ *   <i class="icon-s2.5-[comfy--workflow]" />    <!-- stroke-width: 2.5 -->
+ *
+ * The plain `icon-[...]` class keeps each icon's native stroke-width.
+ */
+
+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 STROKE_WIDTH_ATTR_RE = /stroke-width="[^"]*"/g
+
+class InvalidIconProbeError extends Error {}
+
+function resolveIconSet(prefix) {
+  if (prefix === COMFY_ICON_PREFIX) return loadComfyIconSet()
+  return loadIconSet(prefix)
+}
+
+function getDynamicCSSRulesWithStroke(icon, strokeWidth) {
+  const nameParts = icon.split(/--|:/)
+  if (nameParts.length !== 2) {
+    throw new InvalidIconProbeError(`Invalid icon name: "${icon}"`)
+  }
+  const [prefix, name] = nameParts
+  if (!SUPPORTED_PREFIXES.has(prefix)) {
+    throw new InvalidIconProbeError(`Unsupported icon prefix: "${prefix}"`)
+  }
+  if (!(prefix.match(matchIconName) && name.match(matchIconName))) {
+    throw new InvalidIconProbeError(`Invalid icon name: "${icon}"`)
+  }
+  const iconSet = resolveIconSet(prefix)
+  if (!iconSet) {
+    throw new Error(
+      `Cannot load icon set for "${prefix}". Install "@iconify-json/${prefix}" as dev dependency?`
+    )
+  }
+  const generated = getIconsCSSData(iconSet, [name], {
+    iconSelector: '.icon',
+    customise: (content) =>
+      content.replace(STROKE_WIDTH_ATTR_RE, `stroke-width="${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
+  }
+}
+
+export default plugin(({ matchComponents }) => {
+  for (const sw of STROKE_WIDTHS) {
+    matchComponents({
+      [`icon-s${sw}`]: (icon) => {
+        try {
+          return getDynamicCSSRulesWithStroke(icon, sw)
+        } catch (err) {
+          if (err instanceof InvalidIconProbeError) return {}
+          throw err
+        }
+      }
+    })
+  }
+})