@comfyorg/design-system 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -0
- package/package.json +4 -1
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# @comfyorg/design-system
|
|
2
|
+
|
|
3
|
+
Shared design tokens, theme, and icon set for Comfy Org frontends. Ships raw CSS
|
|
4
|
+
and SVG so consumers compile them with their own Tailwind build.
|
|
5
|
+
|
|
6
|
+
## Install
|
|
7
|
+
|
|
8
|
+
```sh
|
|
9
|
+
pnpm add @comfyorg/design-system tailwindcss
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Tailwind v4 is a peer dependency — `style.css` imports `tailwindcss/theme` and
|
|
13
|
+
`tailwindcss/utilities`, and the bundled plugins import `tailwindcss/plugin`.
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
Import the full theme from your app's entry stylesheet:
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
@import '@comfyorg/design-system/css/style.css';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
This pulls in the fonts, the color palette, the Tailwind theme and utilities
|
|
24
|
+
layers, `tw-animate-css`, the PrimeUI plugin, and the Comfy and Lucide icon
|
|
25
|
+
plugins.
|
|
26
|
+
|
|
27
|
+
For the palette and fonts without the Tailwind layers or icon plugins:
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import '@comfyorg/design-system/css/base.css';
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Exports
|
|
34
|
+
|
|
35
|
+
| Path | Contents |
|
|
36
|
+
| -------------------- | ---------------------------------------------------------- |
|
|
37
|
+
| `./css/style.css` | Full theme — palette, fonts, Tailwind layers, icon plugins |
|
|
38
|
+
| `./css/base.css` | Palette and fonts only |
|
|
39
|
+
| `./css/_palette.css` | Color variables |
|
|
40
|
+
| `./css/fonts.css` | Font faces |
|
|
41
|
+
| `./icons/*.svg` | Comfy icon set source SVGs |
|
|
42
|
+
|
|
43
|
+
Icons are exposed to Tailwind as `icon-[comfy--*]` and `icon-mask-[comfy--*]`
|
|
44
|
+
utilities. Size them with `size-*`, not font-size classes.
|
|
45
|
+
|
|
46
|
+
## Releasing
|
|
47
|
+
|
|
48
|
+
Run the **Version Bump Design System** workflow to open a version PR, then merge
|
|
49
|
+
it with the `Release` label. Publishing to npm happens automatically on merge.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@comfyorg/design-system",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Shared design system for ComfyUI Frontend",
|
|
5
5
|
"homepage": "https://comfy.org",
|
|
6
6
|
"license": "MIT",
|
|
@@ -37,6 +37,9 @@
|
|
|
37
37
|
"tailwindcss": "^4.3.2",
|
|
38
38
|
"typescript": "^6.0.3"
|
|
39
39
|
},
|
|
40
|
+
"peerDependencies": {
|
|
41
|
+
"tailwindcss": "^4.1.0"
|
|
42
|
+
},
|
|
40
43
|
"scripts": {
|
|
41
44
|
"typecheck": "tsc --noEmit"
|
|
42
45
|
}
|