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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/design-system",
-  "version": "1.1.0",
+  "version": "1.3.0-alpha.0",
   "description": "Shared design system for ComfyUI Frontend",
   "homepage": "https://comfy.org",
   "license": "MIT",
@@ -14,15 +14,142 @@
     "url": "git+https://github.com/Comfy-Org/ComfyUI_frontend.git"
   },
   "files": [
+    "dist",
     "src/css",
     "src/icons",
-    "src/workspaceAvatar.ts"
+    "src/button.variants.ts",
+    "src/select.variants.ts",
+    "src/tag.variants.ts",
+    "src/workspaceAvatar.ts",
+    "dist-types/**/*.d.ts"
   ],
   "type": "module",
   "exports": {
+    "./*": {
+      "types": "./dist/*.vue.d.ts",
+      "import": "./dist/*.vue.js",
+      "default": "./dist/*.vue.js"
+    },
+    "./lib/color-picker/types": {
+      "types": "./dist/color-picker/types.d.ts",
+      "import": "./dist/color-picker/types.js",
+      "default": "./dist/color-picker/types.js"
+    },
+    "./lib/composables/useAttrsClass": {
+      "types": "./dist/composables/useAttrsClass.d.ts",
+      "import": "./dist/composables/useAttrsClass.js",
+      "default": "./dist/composables/useAttrsClass.js"
+    },
+    "./lib/composables/usePopoverSizing": {
+      "types": "./dist/composables/usePopoverSizing.d.ts",
+      "import": "./dist/composables/usePopoverSizing.js",
+      "default": "./dist/composables/usePopoverSizing.js"
+    },
+    "./lib/dialog/dialog.variants": {
+      "types": "./dist/dialog/dialog.variants.d.ts",
+      "import": "./dist/dialog/dialog.variants.js",
+      "default": "./dist/dialog/dialog.variants.js"
+    },
+    "./lib/dialog/types": {
+      "types": "./dist/dialog/types.d.ts",
+      "import": "./dist/dialog/types.js",
+      "default": "./dist/dialog/types.js"
+    },
+    "./lib/input-group/inputGroup.variants": {
+      "types": "./dist/input-group/inputGroup.variants.d.ts",
+      "import": "./dist/input-group/inputGroup.variants.js",
+      "default": "./dist/input-group/inputGroup.variants.js"
+    },
+    "./lib/menu/menuAnchor": {
+      "types": "./dist/menu/menuAnchor.d.ts",
+      "import": "./dist/menu/menuAnchor.js",
+      "default": "./dist/menu/menuAnchor.js"
+    },
+    "./lib/menu/menuStyles": {
+      "types": "./dist/menu/menuStyles.d.ts",
+      "import": "./dist/menu/menuStyles.js",
+      "default": "./dist/menu/menuStyles.js"
+    },
+    "./lib/menu/usePointMenu": {
+      "types": "./dist/menu/usePointMenu.d.ts",
+      "import": "./dist/menu/usePointMenu.js",
+      "default": "./dist/menu/usePointMenu.js"
+    },
+    "./lib/menu/types": {
+      "types": "./dist/menu/types.d.ts",
+      "import": "./dist/menu/types.js",
+      "default": "./dist/menu/types.js"
+    },
+    "./lib/message/message.variants": {
+      "types": "./dist/message/message.variants.d.ts",
+      "import": "./dist/message/message.variants.js",
+      "default": "./dist/message/message.variants.js"
+    },
+    "./lib/multi-select/types": {
+      "types": "./dist/multi-select/types.d.ts",
+      "import": "./dist/multi-select/types.js",
+      "default": "./dist/multi-select/types.js"
+    },
+    "./lib/navigation/types": {
+      "types": "./dist/navigation/types.d.ts",
+      "import": "./dist/navigation/types.js",
+      "default": "./dist/navigation/types.js"
+    },
+    "./lib/popover/usePopoverViewportDismiss": {
+      "types": "./dist/popover/usePopoverViewportDismiss.d.ts",
+      "import": "./dist/popover/usePopoverViewportDismiss.js",
+      "default": "./dist/popover/usePopoverViewportDismiss.js"
+    },
+    "./lib/select/types": {
+      "types": "./dist/select/types.d.ts",
+      "import": "./dist/select/types.js",
+      "default": "./dist/select/types.js"
+    },
+    "./lib/select/useSelectSearch": {
+      "types": "./dist/select/useSelectSearch.d.ts",
+      "import": "./dist/select/useSelectSearch.js",
+      "default": "./dist/select/useSelectSearch.js"
+    },
+    "./lib/single-select/types": {
+      "types": "./dist/single-select/types.d.ts",
+      "import": "./dist/single-select/types.js",
+      "default": "./dist/single-select/types.js"
+    },
+    "./lib/table/tableUtils": {
+      "types": "./dist/table/tableUtils.d.ts",
+      "import": "./dist/table/tableUtils.js",
+      "default": "./dist/table/tableUtils.js"
+    },
+    "./lib/tooltip/tooltipConfig": {
+      "types": "./dist/tooltip/tooltipConfig.d.ts",
+      "import": "./dist/tooltip/tooltipConfig.js",
+      "default": "./dist/tooltip/tooltipConfig.js"
+    },
+    "./lib/tree/treeStyles": {
+      "types": "./dist/tree/treeStyles.d.ts",
+      "import": "./dist/tree/treeStyles.js",
+      "default": "./dist/tree/treeStyles.js"
+    },
+    "./components.css": "./dist/components.css",
+    "./css/style.css": "./src/css/published.css",
     "./css/*": "./src/css/*",
     "./icons/*": "./src/icons/*",
-    "./workspaceAvatar": "./src/workspaceAvatar.ts"
+    "./button.variants": {
+      "types": "./dist-types/button.variants.d.ts",
+      "default": "./src/button.variants.ts"
+    },
+    "./select.variants": {
+      "types": "./dist-types/select.variants.d.ts",
+      "default": "./src/select.variants.ts"
+    },
+    "./tag.variants": {
+      "types": "./dist-types/tag.variants.d.ts",
+      "default": "./src/tag.variants.ts"
+    },
+    "./workspaceAvatar": {
+      "types": "./dist-types/workspaceAvatar.d.ts",
+      "default": "./src/workspaceAvatar.ts"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -32,17 +159,68 @@
     "@iconify/tailwind4": "^1.2.3",
     "@iconify/tools": "^5.0.3",
     "@iconify/utils": "^3.1.0",
-    "tailwindcss-primeui": "^0.6.1",
+    "chart.js": "^4.5.0",
+    "clsx": "^2.1.1",
+    "cva": "1.0.0-beta.4",
+    "dompurify": "^3.4.17",
+    "es-toolkit": "^1.39.9",
+    "fuse.js": "^7.0.0",
+    "tailwind-merge": "^2.2.0",
     "tw-animate-css": "^1.3.8"
   },
   "devDependencies": {
-    "tailwindcss": "^4.3.2",
-    "typescript": "^6.0.3"
+    "@comfyorg/shared-frontend-utils": "^1.0.0",
+    "@comfyorg/tailwind-utils": "^1.0.0",
+    "@storybook/vue3-vite": "^10.6.5",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/user-event": "^14.6.8",
+    "@testing-library/vue": "^8.1.0",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vitest/coverage-v8": "^5.0.5",
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/integrations": "^14.4.0",
+    "happy-dom": "21.0.4",
+    "reka-ui": "2.11.0",
+    "storybook": "^10.6.5",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.5",
+    "vite-plugin-dts": "^5.1.2",
+    "vitest": "^5.0.5",
+    "vue": "^3.5.44",
+    "vue-component-type-helpers": "^3.3.14"
   },
   "peerDependencies": {
-    "tailwindcss": "^4.1.0"
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/integrations": "^14.4.0",
+    "reka-ui": "^2.10.5",
+    "tailwindcss": "^4.1.0",
+    "vue": "^3.5.40",
+    "vue-component-type-helpers": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@vueuse/core": {
+      "optional": true
+    },
+    "@vueuse/integrations": {
+      "optional": true
+    },
+    "reka-ui": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "vue-component-type-helpers": {
+      "optional": true
+    }
   },
   "scripts": {
-    "typecheck": "tsc --noEmit"
+    "build": "vite build && tsc -b tsconfig.declarations.json",
+    "format": "oxfmt --write",
+    "format:check": "oxfmt --check",
+    "test": "vitest run",
+    "typecheck": "tsx ../../scripts/vue-tsc-native.ts --noEmit"
   }
 }

package/src/button.variants.ts

@@ -0,0 +1,84 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const buttonVariants = cva({
+  base: 'relative inline-flex cursor-pointer touch-manipulation appearance-none items-center justify-center gap-2 rounded-md border-none font-inter text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([width]):not([height])]:size-4',
+  variants: {
+    variant: {
+      secondary: 'bg-secondary text-foreground hover:bg-accent',
+      primary: 'bg-primary text-foreground hover:bg-primary/90',
+      inverted: 'bg-foreground text-background hover:bg-foreground/80',
+      destructive: 'bg-destructive text-foreground hover:bg-destructive/90',
+      textonly: 'bg-transparent text-foreground hover:bg-accent',
+      'muted-textonly': 'bg-transparent text-muted-foreground hover:bg-accent',
+      'destructive-textonly':
+        'bg-transparent text-destructive hover:bg-destructive/10',
+      outline:
+        'border border-solid bg-transparent text-foreground hover:bg-accent',
+      link: 'bg-transparent text-muted-foreground hover:text-foreground',
+      'overlay-white': 'bg-white text-gray-600 hover:bg-white/90',
+      base: 'bg-background text-foreground hover:bg-accent',
+      tertiary: 'bg-muted text-foreground hover:bg-muted/80',
+      subscribe:
+        'border-transparent bg-credit text-charcoal-800 hover:opacity-80',
+      'brand-ghost':
+        'bg-white/8 text-primary-warm-white hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-brand-yellow',
+      'brand-solid':
+        'bg-brand-yellow text-primary-comfy-ink hover:bg-brand-yellow/90 focus-visible:ring-2 focus-visible:ring-primary-warm-white',
+      'brand-ghost-accent':
+        'bg-white/8 text-primary-warm-white hover:bg-brand-yellow hover:text-primary-comfy-ink focus-visible:ring-2 focus-visible:ring-brand-yellow'
+    },
+    size: {
+      sm: 'h-6 rounded-sm px-2 py-1 text-xs',
+      md: 'h-8 rounded-lg p-2 text-xs',
+      lg: 'h-10 rounded-lg px-4 py-2 text-sm',
+      'icon-sm': 'size-5 p-0',
+      icon: 'size-8 rounded-lg',
+      'icon-lg': 'size-10 rounded-lg',
+      link: 'gap-1 px-0 py-2 text-sm/5 font-normal hover:underline',
+      brand:
+        'h-12 rounded-2xl px-5 font-formula text-sm font-semibold tracking-[0.7px] uppercase lg:h-13 xl:h-14 2xl:h-16',
+      'brand-icon': 'size-10 rounded-2xl xl:size-12',
+      unset: ''
+    }
+  },
+
+  defaultVariants: {
+    variant: 'secondary',
+    size: 'md'
+  }
+})
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
+
+const variants = [
+  'secondary',
+  'primary',
+  'inverted',
+  'destructive',
+  'textonly',
+  'muted-textonly',
+  'destructive-textonly',
+  'outline',
+  'link',
+  'base',
+  'tertiary',
+  'overlay-white',
+  'subscribe',
+  'brand-ghost',
+  'brand-solid',
+  'brand-ghost-accent'
+] as const satisfies Array<ButtonVariants['variant']>
+const sizes = [
+  'sm',
+  'md',
+  'lg',
+  'icon-sm',
+  'icon',
+  'icon-lg',
+  'link',
+  'brand',
+  'brand-icon'
+] as const satisfies Array<ButtonVariants['size']>
+
+export const FOR_STORIES = { variants, sizes } as const

package/src/css/_deprecated-aliases.css

@@ -0,0 +1,12 @@
+:root {
+  --base-background: var(--background);
+  --base-foreground: var(--foreground);
+  --border-default: var(--border);
+  --primary-background: var(--primary);
+  --secondary-background: var(--secondary);
+  --secondary-background-hover: var(--accent);
+  --component-node-widget-background: var(--input);
+  --component-node-widget-background-hovered: var(--accent);
+  --border-subtle: var(--border);
+  --component-node-background: var(--node);
+}

package/src/css/_legacy-palette.css

@@ -0,0 +1,33 @@
+:root {
+  --fg-color: var(--foreground);
+  --bg-color: var(--background);
+  --comfy-menu-bg: var(--background);
+  --comfy-menu-secondary-bg: var(--card);
+  --comfy-input-bg: var(--input);
+  --input-text: var(--foreground);
+  --descrip-text: var(--muted-foreground);
+  --drag-text: var(--muted-foreground);
+  --error-text: var(--destructive);
+  --border-color: var(--border);
+  --tr-even-bg-color: var(--background);
+  --tr-odd-bg-color: var(--secondary);
+  --primary-bg: var(--primary);
+  --primary-fg: var(--foreground);
+  --primary-hover-bg: var(--primary);
+  --primary-hover-fg: var(--foreground);
+  --content-bg: var(--secondary);
+  --content-fg: var(--foreground);
+  --content-hover-bg: var(--accent);
+  --content-hover-fg: var(--foreground);
+  --interface-stroke: var(--border);
+  --interface-panel-surface: var(--background);
+  --interface-panel-hover-surface: var(--accent);
+  --interface-panel-selected-surface: var(--muted);
+  --interface-button-hover-surface: var(--accent);
+  --contrast-mix-color: light-dark(#000, #fff);
+  --color-gray-200: theme(colors.gray.200);
+  --bar-shadow: 0 0 0.5rem var(--shadow-color);
+  --interface-panel-box-shadow: 1px 1px 8px 0 var(--shadow-color);
+  --interface-panel-drop-shadow: 1px 1px 4px var(--shadow-color);
+  --interface-floating-panel-shadow: 0 2px 16px 0 var(--shadow-color);
+}