@comfyorg/design-system 1.3.0-alpha.0 → 1.3.0-alpha.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 +18 -12
- package/dist/common/HighlightedText.vue.js +2 -1
- package/dist/splitter/SplitterResizeHandle.vue.js +1 -1
- package/package.json +1 -1
- package/src/css/_baseline.css +143 -0
- package/src/css/baseline.css +3 -0
- package/src/css/theme.css +1 -69
- package/src/css/component-support.css +0 -69
- package/src/css/themes/void.css +0 -102
package/README.md
CHANGED
|
@@ -34,22 +34,29 @@ For the palette and fonts without the Tailwind layers or icon plugins:
|
|
|
34
34
|
@import '@comfyorg/design-system/css/base.css';
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
##
|
|
37
|
+
## Baseline for other apps
|
|
38
38
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
ComfyUI's colors and app-wide rules:
|
|
39
|
+
An app with its own Tailwind build and global styles, such as Comfy Desktop,
|
|
40
|
+
imports the baseline instead of `style.css`, which adds ComfyUI's app-wide rules:
|
|
42
41
|
|
|
43
42
|
```css
|
|
44
43
|
@import 'tailwindcss';
|
|
45
|
-
@import '@comfyorg/design-system/css/
|
|
44
|
+
@import '@comfyorg/design-system/css/baseline.css';
|
|
45
|
+
|
|
46
|
+
:root {
|
|
47
|
+
--background: oklch(0.19 0.003 285);
|
|
48
|
+
--primary: var(--foreground);
|
|
49
|
+
}
|
|
46
50
|
```
|
|
47
51
|
|
|
48
|
-
The
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
52
|
+
The baseline holds the palette, the semantic colors components use, their icon
|
|
53
|
+
plugins, stacking layers, text sizes, shadows and scrollbar utilities, and
|
|
54
|
+
registers the compiled component sources for Tailwind. Override only the
|
|
55
|
+
variables that differ: `--background`, `--foreground`, `--card`, `--popover`,
|
|
56
|
+
`--primary`, `--secondary`, `--muted`, `--muted-foreground`, `--accent`,
|
|
57
|
+
`--destructive`, `--border`, `--input`, `--ring`, `--warning` and
|
|
58
|
+
`--shadow-color`. The host provides fonts. Published consumers still import
|
|
59
|
+
`components.css`, as described under [Vue components](#vue-components).
|
|
53
60
|
|
|
54
61
|
## Exports
|
|
55
62
|
|
|
@@ -58,8 +65,7 @@ still import `components.css`, as described under [Vue components](#vue-componen
|
|
|
58
65
|
| `./css/style.css` | Full theme — palette, fonts, Tailwind layers, icon plugins |
|
|
59
66
|
| `./css/theme.css` | Full theme without automatic component source registration |
|
|
60
67
|
| `./css/base.css` | Palette and fonts only |
|
|
61
|
-
| `./css/
|
|
62
|
-
| `./css/themes/void.css` | Void theme for apps other than ComfyUI, including component support |
|
|
68
|
+
| `./css/baseline.css` | Component colors, plugins, tokens and utilities for apps other than ComfyUI |
|
|
63
69
|
| `./css/_palette.css` | Color variables |
|
|
64
70
|
| `./css/fonts.css` | Font faces |
|
|
65
71
|
| `./css/_deprecated-aliases.css` | Deprecated variable names kept for extensions; scheduled for removal |
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { t as cn } from "../shared/src-DTwuqov4.js";
|
|
2
2
|
import { Fragment, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref } from "vue";
|
|
3
3
|
// src/components/common/highlightQuery.ts
|
|
4
|
+
var MAX_QUERY_LENGTH = 1024;
|
|
4
5
|
function highlightQuery(text, query) {
|
|
5
|
-
if (!query) return [{
|
|
6
|
+
if (!query || query.length > text.length || query.length > MAX_QUERY_LENGTH) return [{
|
|
6
7
|
text,
|
|
7
8
|
highlighted: false
|
|
8
9
|
}];
|
|
@@ -25,7 +25,7 @@ var SplitterResizeHandle_default = /* @__PURE__ */ defineComponent({
|
|
|
25
25
|
const restProps = createPropsRestProxy(__props, ["class"]);
|
|
26
26
|
const forwarded = useForwardPropsEmits(restProps, __emit);
|
|
27
27
|
return (_ctx, _cache) => {
|
|
28
|
-
return openBlock(), createBlock(unref(SplitterResizeHandle), mergeProps(unref(forwarded), { class: unref(cn)("relative z-10 flex w-px shrink-0 items-center justify-center bg-border outline-none", "after:absolute after:inset-y-0 after:left-1/2 after:w-
|
|
28
|
+
return openBlock(), createBlock(unref(SplitterResizeHandle), mergeProps(unref(forwarded), { class: unref(cn)("relative z-10 flex w-px shrink-0 items-center justify-center bg-border outline-none", "after:absolute after:inset-y-0 after:left-1/2 after:w-2.75 after:-translate-x-1/2 pointer-coarse:data-[orientation=horizontal]:after:w-7.75", "hover:bg-primary data-[state=drag]:bg-primary", "focus-visible:ring-1 focus-visible:ring-ring", "data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full", "data-[orientation=vertical]:after:inset-x-0 data-[orientation=vertical]:after:top-1/2 data-[orientation=vertical]:after:h-2.75 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:translate-x-0 data-[orientation=vertical]:after:-translate-y-1/2 pointer-coarse:data-[orientation=vertical]:after:h-7.75", __props.class) }), {
|
|
29
29
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
30
30
|
_: 3
|
|
31
31
|
}, 16, ["class"]);
|
package/package.json
CHANGED
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
@import './_palette.css';
|
|
2
|
+
@import 'tw-animate-css';
|
|
3
|
+
|
|
4
|
+
@plugin "./iconifyDynamicPlugin.ts";
|
|
5
|
+
|
|
6
|
+
@plugin "./lucideStrokePlugin.js";
|
|
7
|
+
|
|
8
|
+
@custom-variant touch (@media (hover: none));
|
|
9
|
+
|
|
10
|
+
@theme {
|
|
11
|
+
--z-index-panel: 1100;
|
|
12
|
+
--z-index-education: 1500;
|
|
13
|
+
--z-index-onboarding: 1600;
|
|
14
|
+
--z-index-overlay: 1700;
|
|
15
|
+
--z-index-tour: 1800;
|
|
16
|
+
--z-index-toast: 9999;
|
|
17
|
+
--z-index-blocking: 10000;
|
|
18
|
+
|
|
19
|
+
--text-2xs: 0.625rem;
|
|
20
|
+
--text-2xs--line-height: calc(1 / 0.625);
|
|
21
|
+
|
|
22
|
+
--text-3xs: 0.5625rem;
|
|
23
|
+
--text-3xs--line-height: calc(1 / 0.5625);
|
|
24
|
+
|
|
25
|
+
--color-credit: #ddbd31;
|
|
26
|
+
--color-warning-foreground: var(--color-charcoal-800);
|
|
27
|
+
|
|
28
|
+
--shadow-2xs: 0 1px 1px var(--shadow-color);
|
|
29
|
+
--shadow-xs: 0 1px 2px var(--shadow-color);
|
|
30
|
+
--shadow-sm: 0 1px 4px var(--shadow-color);
|
|
31
|
+
--shadow-md: 1px 1px 8px 0 var(--shadow-color);
|
|
32
|
+
--shadow-lg: 0 2px 16px 0 var(--shadow-color);
|
|
33
|
+
--shadow-xl: 0 8px 24px var(--shadow-color);
|
|
34
|
+
--shadow-2xl: 0 24px 80px var(--shadow-color);
|
|
35
|
+
--drop-shadow-xs: 0 1px 1px var(--shadow-color);
|
|
36
|
+
--drop-shadow-sm: 1px 1px 4px var(--shadow-color);
|
|
37
|
+
--drop-shadow-md: 1px 1px 8px var(--shadow-color);
|
|
38
|
+
--drop-shadow-lg: 0 9px 7px var(--shadow-color);
|
|
39
|
+
|
|
40
|
+
--color-success: var(--color-jade-600);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:root {
|
|
44
|
+
color-scheme: dark;
|
|
45
|
+
|
|
46
|
+
--background: var(--color-charcoal-800);
|
|
47
|
+
--foreground: var(--color-white);
|
|
48
|
+
--card: var(--color-charcoal-600);
|
|
49
|
+
--primary: var(--color-azure-600);
|
|
50
|
+
--secondary: var(--color-charcoal-600);
|
|
51
|
+
--muted: var(--color-charcoal-300);
|
|
52
|
+
--muted-foreground: var(--color-smoke-800);
|
|
53
|
+
--accent: var(--color-charcoal-400);
|
|
54
|
+
--destructive: var(--color-coral-700);
|
|
55
|
+
--border: var(--color-charcoal-200);
|
|
56
|
+
--ring: var(--muted-foreground);
|
|
57
|
+
--popover: var(--background);
|
|
58
|
+
--input: var(--accent);
|
|
59
|
+
|
|
60
|
+
--warning: var(--color-gold-600);
|
|
61
|
+
--shadow-color: rgb(0 0 0 / 0.4);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@theme inline {
|
|
65
|
+
--color-background: var(--background);
|
|
66
|
+
--color-foreground: var(--foreground);
|
|
67
|
+
--color-card: var(--card);
|
|
68
|
+
--color-popover: var(--popover);
|
|
69
|
+
--color-primary: var(--primary);
|
|
70
|
+
--color-secondary: var(--secondary);
|
|
71
|
+
--color-muted: var(--muted);
|
|
72
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
73
|
+
--color-accent: var(--accent);
|
|
74
|
+
--color-destructive: var(--destructive);
|
|
75
|
+
--color-border: var(--border);
|
|
76
|
+
--color-input: var(--input);
|
|
77
|
+
--color-ring: var(--ring);
|
|
78
|
+
--color-warning: var(--warning);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@layer base {
|
|
82
|
+
*,
|
|
83
|
+
::before,
|
|
84
|
+
::after {
|
|
85
|
+
box-sizing: border-box;
|
|
86
|
+
border-color: var(--border);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
button,
|
|
90
|
+
input,
|
|
91
|
+
select,
|
|
92
|
+
optgroup,
|
|
93
|
+
textarea,
|
|
94
|
+
::file-selector-button {
|
|
95
|
+
font: inherit;
|
|
96
|
+
font-feature-settings: inherit;
|
|
97
|
+
font-variation-settings: inherit;
|
|
98
|
+
letter-spacing: inherit;
|
|
99
|
+
color: inherit;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@utility highlight {
|
|
104
|
+
background-color: color-mix(in srgb, currentColor 20%, transparent);
|
|
105
|
+
font-weight: 700;
|
|
106
|
+
border-radius: 0.25rem;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@utility scrollbar-hide {
|
|
110
|
+
scrollbar-width: none;
|
|
111
|
+
&::-webkit-scrollbar {
|
|
112
|
+
width: 1px;
|
|
113
|
+
}
|
|
114
|
+
&::-webkit-scrollbar-thumb {
|
|
115
|
+
background-color: transparent;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@utility scrollbar-custom {
|
|
120
|
+
overflow-y: auto;
|
|
121
|
+
scrollbar-width: thin;
|
|
122
|
+
scrollbar-color: var(--muted) transparent;
|
|
123
|
+
|
|
124
|
+
&::-webkit-scrollbar {
|
|
125
|
+
width: 10px;
|
|
126
|
+
height: 10px;
|
|
127
|
+
background-color: transparent;
|
|
128
|
+
}
|
|
129
|
+
&::-webkit-scrollbar-track {
|
|
130
|
+
background: transparent;
|
|
131
|
+
}
|
|
132
|
+
&::-webkit-scrollbar-thumb {
|
|
133
|
+
background: var(--muted);
|
|
134
|
+
border-radius: 9999px;
|
|
135
|
+
border: 2px solid transparent;
|
|
136
|
+
}
|
|
137
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
138
|
+
background: var(--muted);
|
|
139
|
+
}
|
|
140
|
+
&::-webkit-scrollbar-corner {
|
|
141
|
+
background: transparent;
|
|
142
|
+
}
|
|
143
|
+
}
|
package/src/css/theme.css
CHANGED
|
@@ -1,34 +1,12 @@
|
|
|
1
1
|
@layer theme, base, components, utilities;
|
|
2
2
|
|
|
3
3
|
@import './fonts.css';
|
|
4
|
-
@import './
|
|
4
|
+
@import './_baseline.css';
|
|
5
5
|
@import './_deprecated-aliases.css';
|
|
6
6
|
@import './_legacy-palette.css';
|
|
7
7
|
@import 'tailwindcss/theme' layer(theme);
|
|
8
8
|
@import 'tailwindcss/utilities' layer(utilities);
|
|
9
9
|
|
|
10
|
-
@layer base {
|
|
11
|
-
*,
|
|
12
|
-
::before,
|
|
13
|
-
::after {
|
|
14
|
-
box-sizing: border-box;
|
|
15
|
-
border-color: var(--border);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
button,
|
|
19
|
-
input,
|
|
20
|
-
select,
|
|
21
|
-
optgroup,
|
|
22
|
-
textarea,
|
|
23
|
-
::file-selector-button {
|
|
24
|
-
font: inherit;
|
|
25
|
-
font-feature-settings: inherit;
|
|
26
|
-
font-variation-settings: inherit;
|
|
27
|
-
letter-spacing: inherit;
|
|
28
|
-
color: inherit;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
10
|
/* Safelist dynamic comfy icons for node library folders */
|
|
33
11
|
@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}]");
|
|
34
12
|
|
|
@@ -36,74 +14,28 @@
|
|
|
36
14
|
@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}]");
|
|
37
15
|
|
|
38
16
|
@theme {
|
|
39
|
-
--shadow-2xs: 0 1px 1px var(--shadow-color);
|
|
40
|
-
--shadow-xs: 0 1px 2px var(--shadow-color);
|
|
41
|
-
--shadow-sm: 0 1px 4px var(--shadow-color);
|
|
42
|
-
--shadow-md: 1px 1px 8px 0 var(--shadow-color);
|
|
43
|
-
--shadow-lg: 0 2px 16px 0 var(--shadow-color);
|
|
44
|
-
--shadow-xl: 0 8px 24px var(--shadow-color);
|
|
45
|
-
--shadow-2xl: 0 24px 80px var(--shadow-color);
|
|
46
|
-
--drop-shadow-xs: 0 1px 1px var(--shadow-color);
|
|
47
|
-
--drop-shadow-sm: 1px 1px 4px var(--shadow-color);
|
|
48
|
-
--drop-shadow-md: 1px 1px 8px var(--shadow-color);
|
|
49
|
-
--drop-shadow-lg: 0 9px 7px var(--shadow-color);
|
|
50
17
|
--shadow-inset-highlight: inset 0 1px 0 0 rgb(from white r g b / 0.1);
|
|
51
18
|
|
|
52
19
|
--color-bypass: #6a246a;
|
|
53
|
-
--color-success: var(--color-jade-600);
|
|
54
20
|
}
|
|
55
21
|
|
|
56
22
|
:root {
|
|
57
|
-
color-scheme: dark;
|
|
58
|
-
|
|
59
|
-
--background: var(--color-charcoal-800);
|
|
60
|
-
--foreground: var(--color-white);
|
|
61
|
-
--card: var(--color-charcoal-600);
|
|
62
23
|
--node-foreground: var(--color-smoke-700);
|
|
63
24
|
--node-header: var(--color-charcoal-700);
|
|
64
25
|
--node-border: var(--color-charcoal-100);
|
|
65
|
-
--primary: var(--color-azure-600);
|
|
66
|
-
--secondary: var(--color-charcoal-600);
|
|
67
|
-
--muted: var(--color-charcoal-300);
|
|
68
|
-
--muted-foreground: var(--color-smoke-800);
|
|
69
|
-
--accent: var(--color-charcoal-400);
|
|
70
|
-
--destructive: var(--color-coral-700);
|
|
71
|
-
--border: var(--color-charcoal-200);
|
|
72
|
-
--ring: var(--muted-foreground);
|
|
73
|
-
--popover: var(--background);
|
|
74
|
-
--input: var(--accent);
|
|
75
26
|
--node: var(--card);
|
|
76
27
|
|
|
77
28
|
--default-transition-duration: 0.1s;
|
|
78
29
|
--comfy-topbar-height: 2.5rem;
|
|
79
30
|
--workflow-tabs-height: 2.375rem;
|
|
80
31
|
--comfy-textarea-font-size: 10px;
|
|
81
|
-
|
|
82
|
-
--warning: var(--color-gold-600);
|
|
83
|
-
--shadow-color: rgb(0 0 0 / 0.4);
|
|
84
32
|
}
|
|
85
33
|
|
|
86
34
|
@theme inline {
|
|
87
|
-
--color-background: var(--background);
|
|
88
|
-
--color-foreground: var(--foreground);
|
|
89
|
-
--color-card: var(--card);
|
|
90
35
|
--color-node: var(--node);
|
|
91
36
|
--color-node-foreground: var(--node-foreground);
|
|
92
37
|
--color-node-header: var(--node-header);
|
|
93
38
|
--color-node-border: var(--node-border);
|
|
94
|
-
--color-popover: var(--popover);
|
|
95
|
-
--color-primary: var(--primary);
|
|
96
|
-
--color-secondary: var(--secondary);
|
|
97
|
-
--color-muted: var(--muted);
|
|
98
|
-
--color-muted-foreground: var(--muted-foreground);
|
|
99
|
-
--color-accent: var(--accent);
|
|
100
|
-
--color-destructive: var(--destructive);
|
|
101
|
-
--color-border: var(--border);
|
|
102
|
-
--color-input: var(--input);
|
|
103
|
-
--color-ring: var(--ring);
|
|
104
|
-
|
|
105
|
-
/* Semantic tokens */
|
|
106
|
-
--color-warning: var(--warning);
|
|
107
39
|
}
|
|
108
40
|
|
|
109
41
|
@utility floating-panel {
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
@import './_palette.css';
|
|
2
|
-
@import 'tw-animate-css';
|
|
3
|
-
|
|
4
|
-
@plugin "./iconifyDynamicPlugin.ts";
|
|
5
|
-
|
|
6
|
-
@plugin "./lucideStrokePlugin.js";
|
|
7
|
-
|
|
8
|
-
@custom-variant touch (@media (hover: none));
|
|
9
|
-
|
|
10
|
-
@theme {
|
|
11
|
-
--z-index-panel: 1100;
|
|
12
|
-
--z-index-education: 1500;
|
|
13
|
-
--z-index-onboarding: 1600;
|
|
14
|
-
--z-index-overlay: 1700;
|
|
15
|
-
--z-index-tour: 1800;
|
|
16
|
-
--z-index-toast: 9999;
|
|
17
|
-
--z-index-blocking: 10000;
|
|
18
|
-
|
|
19
|
-
--text-2xs: 0.625rem;
|
|
20
|
-
--text-2xs--line-height: calc(1 / 0.625);
|
|
21
|
-
|
|
22
|
-
--text-3xs: 0.5625rem;
|
|
23
|
-
--text-3xs--line-height: calc(1 / 0.5625);
|
|
24
|
-
|
|
25
|
-
--color-credit: #ddbd31;
|
|
26
|
-
--color-warning-foreground: var(--color-charcoal-800);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
@utility highlight {
|
|
30
|
-
background-color: color-mix(in srgb, currentColor 20%, transparent);
|
|
31
|
-
font-weight: 700;
|
|
32
|
-
border-radius: 0.25rem;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
@utility scrollbar-hide {
|
|
36
|
-
scrollbar-width: none;
|
|
37
|
-
&::-webkit-scrollbar {
|
|
38
|
-
width: 1px;
|
|
39
|
-
}
|
|
40
|
-
&::-webkit-scrollbar-thumb {
|
|
41
|
-
background-color: transparent;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
@utility scrollbar-custom {
|
|
46
|
-
overflow-y: auto;
|
|
47
|
-
scrollbar-width: thin;
|
|
48
|
-
scrollbar-color: var(--muted) transparent;
|
|
49
|
-
|
|
50
|
-
&::-webkit-scrollbar {
|
|
51
|
-
width: 10px;
|
|
52
|
-
height: 10px;
|
|
53
|
-
background-color: transparent;
|
|
54
|
-
}
|
|
55
|
-
&::-webkit-scrollbar-track {
|
|
56
|
-
background: transparent;
|
|
57
|
-
}
|
|
58
|
-
&::-webkit-scrollbar-thumb {
|
|
59
|
-
background: var(--muted);
|
|
60
|
-
border-radius: 9999px;
|
|
61
|
-
border: 2px solid transparent;
|
|
62
|
-
}
|
|
63
|
-
&::-webkit-scrollbar-thumb:hover {
|
|
64
|
-
background: var(--muted);
|
|
65
|
-
}
|
|
66
|
-
&::-webkit-scrollbar-corner {
|
|
67
|
-
background: transparent;
|
|
68
|
-
}
|
|
69
|
-
}
|
package/src/css/themes/void.css
DELETED
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
@import '../component-support.css';
|
|
2
|
-
|
|
3
|
-
@source '../../../dist';
|
|
4
|
-
|
|
5
|
-
@theme static {
|
|
6
|
-
--font-inter: 'Inter', system-ui, sans-serif;
|
|
7
|
-
--font-sans: 'Inter', system-ui, sans-serif;
|
|
8
|
-
--font-display: 'PP Formula', 'Inter', system-ui, sans-serif;
|
|
9
|
-
|
|
10
|
-
--color-background: oklch(0.19 0.003 285);
|
|
11
|
-
--color-foreground: oklch(0.955 0.002 285);
|
|
12
|
-
--color-card: oklch(0.23 0.008 285);
|
|
13
|
-
--color-popover: oklch(0.23 0.008 285);
|
|
14
|
-
--color-primary: #0b8ce9;
|
|
15
|
-
--color-secondary: oklch(1 0 0 / 0.06);
|
|
16
|
-
--color-muted: oklch(1 0 0 / 0.06);
|
|
17
|
-
--color-muted-foreground: oklch(0.76 0.006 285);
|
|
18
|
-
--color-accent: oklch(1 0 0 / 0.1);
|
|
19
|
-
--color-input: oklch(1 0 0 / 0.06);
|
|
20
|
-
--color-border: oklch(1 0 0 / 0.08);
|
|
21
|
-
--color-ring: oklch(1 0 0 / 0.45);
|
|
22
|
-
--color-destructive: oklch(0.62 0.19 25);
|
|
23
|
-
--color-warning: oklch(0.82 0.14 85);
|
|
24
|
-
--color-success: oklch(0.78 0.15 155);
|
|
25
|
-
|
|
26
|
-
--color-content-background: oklch(0.14 0.005 285);
|
|
27
|
-
--color-card-hover: oklch(0.265 0.009 285);
|
|
28
|
-
--color-subtle-foreground: oklch(0.6 0.008 285);
|
|
29
|
-
--color-border-strong: oklch(1 0 0 / 0.14);
|
|
30
|
-
--color-media-overlay: oklch(0 0 0 / 0.55);
|
|
31
|
-
|
|
32
|
-
--text-ui: 13px;
|
|
33
|
-
--text-ui--line-height: 20px;
|
|
34
|
-
--text-heading: 16px;
|
|
35
|
-
--text-heading--line-height: 24px;
|
|
36
|
-
--text-title: 22px;
|
|
37
|
-
--text-title--line-height: 28px;
|
|
38
|
-
--text-display: 34px;
|
|
39
|
-
--text-display--line-height: 40px;
|
|
40
|
-
|
|
41
|
-
--radius-panel: 16px;
|
|
42
|
-
--radius-card: 12px;
|
|
43
|
-
--radius-control: 8px;
|
|
44
|
-
--radius-min: 4px;
|
|
45
|
-
|
|
46
|
-
--shadow-elev:
|
|
47
|
-
inset 0 1px 0 oklch(1 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.35),
|
|
48
|
-
0 6px 18px oklch(0 0 0 / 0.28);
|
|
49
|
-
--shadow-elev-hover:
|
|
50
|
-
inset 0 1px 0 oklch(1 0 0 / 0.09), 0 2px 4px oklch(0 0 0 / 0.35),
|
|
51
|
-
0 10px 26px oklch(0 0 0 / 0.34);
|
|
52
|
-
--shadow-popover:
|
|
53
|
-
inset 0 1px 0 oklch(1 0 0 / 0.07), 0 12px 32px oklch(0 0 0 / 0.45);
|
|
54
|
-
--shadow-highlight: inset 0 1px 0 oklch(1 0 0 / 0.06);
|
|
55
|
-
|
|
56
|
-
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
57
|
-
--animate-pop-in: pop-in 160ms var(--ease-out-expo);
|
|
58
|
-
--animate-fade-in: fade-in 160ms ease-out;
|
|
59
|
-
--animate-status-pulse: status-pulse 2s ease-out infinite;
|
|
60
|
-
--animate-shimmer: shimmer 1.6s ease-in-out infinite;
|
|
61
|
-
|
|
62
|
-
@keyframes pop-in {
|
|
63
|
-
from {
|
|
64
|
-
opacity: 0;
|
|
65
|
-
transform: translateY(4px) scale(0.98);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
@keyframes fade-in {
|
|
69
|
-
from {
|
|
70
|
-
opacity: 0;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
@keyframes status-pulse {
|
|
74
|
-
0% {
|
|
75
|
-
box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 55%, transparent);
|
|
76
|
-
}
|
|
77
|
-
70%,
|
|
78
|
-
100% {
|
|
79
|
-
box-shadow: 0 0 0 5px transparent;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
@keyframes shimmer {
|
|
83
|
-
from {
|
|
84
|
-
background-position: 150% 0;
|
|
85
|
-
}
|
|
86
|
-
to {
|
|
87
|
-
background-position: -50% 0;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
:root {
|
|
93
|
-
--muted: var(--color-muted);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
@layer base {
|
|
97
|
-
*,
|
|
98
|
-
::before,
|
|
99
|
-
::after {
|
|
100
|
-
border-color: var(--color-border);
|
|
101
|
-
}
|
|
102
|
-
}
|