@zvk/themes 0.1.0

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/LICENSE.md +3 -0
  3. package/README.md +59 -0
  4. package/dist/css-variables.d.ts +6 -0
  5. package/dist/css-variables.js +35 -0
  6. package/dist/index.d.ts +3 -0
  7. package/dist/index.js +2 -0
  8. package/dist/presets.d.ts +60 -0
  9. package/dist/presets.js +76 -0
  10. package/dist/styles.css +854 -0
  11. package/dist/types.d.ts +13 -0
  12. package/dist/types.js +1 -0
  13. package/package.json +60 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,5 @@
1
+ # @zvk/themes Changelog
2
+
3
+ ## 0.1.0
4
+
5
+ - Initial package scaffold for ten preset theme metadata entries, light/dark preset CSS, SSR-safe imports, and package verification.
package/LICENSE.md ADDED
@@ -0,0 +1,3 @@
1
+ # License
2
+
3
+ See the repository license for terms.
package/README.md ADDED
@@ -0,0 +1,59 @@
1
+ # @zvk/themes
2
+
3
+ Preset theme configurations for ZVK UI, composite, chart, and graph packages.
4
+
5
+ ```ts
6
+ import "@zvk/ui/styles.css";
7
+ import "@zvk/themes/styles.css";
8
+ import "@zvk/composite/styles.css";
9
+ import "@zvk/charts/styles.css";
10
+ import "@zvk/graphs/styles.css";
11
+ ```
12
+
13
+ `@zvk/themes` has no runtime dependencies and no React entry point. The root package exports typed preset metadata, attribute names, mode names, and the CSS variable contract. `@zvk/themes/styles.css` provides preset CSS variables for existing ZVK styles.
14
+
15
+ ## Presets
16
+
17
+ The package includes eleven preset IDs:
18
+
19
+ - `slate`
20
+ - `teal`
21
+ - `indigo`
22
+ - `rose`
23
+ - `amber`
24
+ - `sky`
25
+ - `emerald`
26
+ - `violet`
27
+ - `copper`
28
+ - `graphite`
29
+ - `glass`
30
+
31
+ Each preset supports the existing UI mode axis through `data-zvk-ui-theme="light"` and `data-zvk-ui-theme="dark"`. Apply the preset and mode attributes to the same root scope:
32
+
33
+ ```tsx
34
+ <div className="zvk-ui-root" data-zvk-ui-preset="sky" data-zvk-ui-theme="dark">
35
+ {/* app */}
36
+ </div>
37
+ ```
38
+
39
+ ## Styling
40
+
41
+ Load `@zvk/themes/styles.css` after `@zvk/ui/styles.css` and before composite, chart, and graph package styles. The preset stylesheet overrides the `--zvk-ui-*` color and control variables that those packages already consume.
42
+
43
+ `@zvk/themes` is intentionally scoped to color and control semantics only. Typography, spacing, density, radius, motion, and stack variables remain owned by `@zvk/ui`.
44
+
45
+ When theme attributes are scoped to a subtree (for example a page section), downstream package CSS should read `--zvk-ui-*` from that local scope so package components and aliases resolve correctly.
46
+
47
+ The preset axis is separate from light and dark modes:
48
+
49
+ - `data-zvk-ui-preset` chooses the color scheme family.
50
+ - `data-zvk-ui-theme` chooses light or dark mode for that family.
51
+
52
+ The `glass` preset is a material-heavy preset for translucent controls, navigation,
53
+ floating overlays, and focused app surfaces. It uses progressive enhancement through
54
+ generic `@zvk/ui` material tokens, so unsupported or reduced-transparency environments
55
+ fall back to more opaque surfaces.
56
+
57
+ ## Server Safety
58
+
59
+ The root metadata entry point does not read browser globals, React, or sibling ZVK packages at module initialization.
package/dist/css-variables.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export declare const ZVK_THEME_MODE_ATTRIBUTE = "data-zvk-ui-theme";
2
+ export declare const ZVK_THEME_PRESET_ATTRIBUTE = "data-zvk-ui-preset";
3
+ export declare const ZVK_THEME_MODES: readonly ["light", "dark"];
4
+ export declare const ZVK_THEME_CSS_VARIABLES: readonly ["--zvk-ui-color-background", "--zvk-ui-color-foreground", "--zvk-ui-color-muted", "--zvk-ui-color-muted-foreground", "--zvk-ui-color-surface", "--zvk-ui-color-surface-raised", "--zvk-ui-color-border", "--zvk-ui-color-border-subtle", "--zvk-ui-color-border-strong", "--zvk-ui-color-accent", "--zvk-ui-color-ring", "--zvk-ui-color-primary", "--zvk-ui-color-primary-hover", "--zvk-ui-color-primary-foreground", "--zvk-ui-color-primary-soft", "--zvk-ui-color-primary-border", "--zvk-ui-color-success", "--zvk-ui-color-success-border", "--zvk-ui-color-warning", "--zvk-ui-color-warning-border", "--zvk-ui-color-destructive", "--zvk-ui-color-destructive-border", "--zvk-ui-color-info", "--zvk-ui-color-info-border", "--zvk-ui-control-background", "--zvk-ui-control-border", "--zvk-ui-control-border-strong", "--zvk-ui-control-hover", "--zvk-ui-control-active", "--zvk-ui-card-border"];
5
+ export type ZvkThemeMode = (typeof ZVK_THEME_MODES)[number];
6
+ export type ZvkThemeCssVariable = (typeof ZVK_THEME_CSS_VARIABLES)[number];
package/dist/css-variables.js ADDED
@@ -0,0 +1,35 @@
1
+ export const ZVK_THEME_MODE_ATTRIBUTE = "data-zvk-ui-theme";
2
+ export const ZVK_THEME_PRESET_ATTRIBUTE = "data-zvk-ui-preset";
3
+ export const ZVK_THEME_MODES = ["light", "dark"];
4
+ export const ZVK_THEME_CSS_VARIABLES = [
5
+ "--zvk-ui-color-background",
6
+ "--zvk-ui-color-foreground",
7
+ "--zvk-ui-color-muted",
8
+ "--zvk-ui-color-muted-foreground",
9
+ "--zvk-ui-color-surface",
10
+ "--zvk-ui-color-surface-raised",
11
+ "--zvk-ui-color-border",
12
+ "--zvk-ui-color-border-subtle",
13
+ "--zvk-ui-color-border-strong",
14
+ "--zvk-ui-color-accent",
15
+ "--zvk-ui-color-ring",
16
+ "--zvk-ui-color-primary",
17
+ "--zvk-ui-color-primary-hover",
18
+ "--zvk-ui-color-primary-foreground",
19
+ "--zvk-ui-color-primary-soft",
20
+ "--zvk-ui-color-primary-border",
21
+ "--zvk-ui-color-success",
22
+ "--zvk-ui-color-success-border",
23
+ "--zvk-ui-color-warning",
24
+ "--zvk-ui-color-warning-border",
25
+ "--zvk-ui-color-destructive",
26
+ "--zvk-ui-color-destructive-border",
27
+ "--zvk-ui-color-info",
28
+ "--zvk-ui-color-info-border",
29
+ "--zvk-ui-control-background",
30
+ "--zvk-ui-control-border",
31
+ "--zvk-ui-control-border-strong",
32
+ "--zvk-ui-control-hover",
33
+ "--zvk-ui-control-active",
34
+ "--zvk-ui-card-border"
35
+ ];
package/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { ZVK_THEME_CSS_VARIABLES, ZVK_THEME_MODE_ATTRIBUTE, ZVK_THEME_MODES, ZVK_THEME_PRESET_ATTRIBUTE, type ZvkThemeCssVariable, type ZvkThemeMode } from "./css-variables.js";
2
+ export { ZVK_THEME_PRESET_IDS, ZVK_THEME_PRESETS, getZvkThemePreset, isZvkThemePresetId } from "./presets.js";
3
+ export type { ZvkThemeImportOrder, ZvkThemePreset, ZvkThemePresetId } from "./types.js";
package/dist/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { ZVK_THEME_CSS_VARIABLES, ZVK_THEME_MODE_ATTRIBUTE, ZVK_THEME_MODES, ZVK_THEME_PRESET_ATTRIBUTE } from "./css-variables.js";
2
+ export { ZVK_THEME_PRESET_IDS, ZVK_THEME_PRESETS, getZvkThemePreset, isZvkThemePresetId } from "./presets.js";
package/dist/presets.d.ts ADDED
@@ -0,0 +1,60 @@
1
+ import type { ZvkThemePreset, ZvkThemePresetId } from "./types.js";
2
+ export declare const ZVK_THEME_PRESETS: readonly [{
3
+ readonly id: "slate";
4
+ readonly label: "Slate";
5
+ readonly description: "A neutral blue-gray preset for dense operational interfaces.";
6
+ readonly modes: readonly ["light", "dark"];
7
+ }, {
8
+ readonly id: "teal";
9
+ readonly label: "Teal";
10
+ readonly description: "A calm green-blue preset for product and workspace surfaces.";
11
+ readonly modes: readonly ["light", "dark"];
12
+ }, {
13
+ readonly id: "indigo";
14
+ readonly label: "Indigo";
15
+ readonly description: "A cool violet-blue preset for developer-facing tools.";
16
+ readonly modes: readonly ["light", "dark"];
17
+ }, {
18
+ readonly id: "rose";
19
+ readonly label: "Rose";
20
+ readonly description: "A warm red-pink preset for editorial or review-heavy workflows.";
21
+ readonly modes: readonly ["light", "dark"];
22
+ }, {
23
+ readonly id: "amber";
24
+ readonly label: "Amber";
25
+ readonly description: "A warm gold preset for planning, finance, and status-heavy dashboards.";
26
+ readonly modes: readonly ["light", "dark"];
27
+ }, {
28
+ readonly id: "sky";
29
+ readonly label: "Sky";
30
+ readonly description: "A bright blue preset for clean product dashboards and reporting surfaces.";
31
+ readonly modes: readonly ["light", "dark"];
32
+ }, {
33
+ readonly id: "emerald";
34
+ readonly label: "Emerald";
35
+ readonly description: "A confident green preset for growth, operations, and health-oriented workflows.";
36
+ readonly modes: readonly ["light", "dark"];
37
+ }, {
38
+ readonly id: "violet";
39
+ readonly label: "Violet";
40
+ readonly description: "A rich purple preset for creative tools, AI surfaces, and exploratory workspaces.";
41
+ readonly modes: readonly ["light", "dark"];
42
+ }, {
43
+ readonly id: "copper";
44
+ readonly label: "Copper";
45
+ readonly description: "A grounded warm preset for finance, planning, and executive review surfaces.";
46
+ readonly modes: readonly ["light", "dark"];
47
+ }, {
48
+ readonly id: "graphite";
49
+ readonly label: "Graphite";
50
+ readonly description: "A crisp neutral preset for high-density administration and developer tools.";
51
+ readonly modes: readonly ["light", "dark"];
52
+ }, {
53
+ readonly id: "glass";
54
+ readonly label: "Glass";
55
+ readonly description: "A translucent material preset for floating controls, navigation, and focused app surfaces.";
56
+ readonly modes: readonly ["light", "dark"];
57
+ }];
58
+ export declare const ZVK_THEME_PRESET_IDS: readonly ZvkThemePresetId[];
59
+ export declare function isZvkThemePresetId(value: string): value is ZvkThemePresetId;
60
+ export declare function getZvkThemePreset(id: ZvkThemePresetId): ZvkThemePreset;
package/dist/presets.js ADDED
@@ -0,0 +1,76 @@
1
+ import { ZVK_THEME_MODES } from "./css-variables.js";
2
+ export const ZVK_THEME_PRESETS = [
3
+ {
4
+ id: "slate",
5
+ label: "Slate",
6
+ description: "A neutral blue-gray preset for dense operational interfaces.",
7
+ modes: ZVK_THEME_MODES
8
+ },
9
+ {
10
+ id: "teal",
11
+ label: "Teal",
12
+ description: "A calm green-blue preset for product and workspace surfaces.",
13
+ modes: ZVK_THEME_MODES
14
+ },
15
+ {
16
+ id: "indigo",
17
+ label: "Indigo",
18
+ description: "A cool violet-blue preset for developer-facing tools.",
19
+ modes: ZVK_THEME_MODES
20
+ },
21
+ {
22
+ id: "rose",
23
+ label: "Rose",
24
+ description: "A warm red-pink preset for editorial or review-heavy workflows.",
25
+ modes: ZVK_THEME_MODES
26
+ },
27
+ {
28
+ id: "amber",
29
+ label: "Amber",
30
+ description: "A warm gold preset for planning, finance, and status-heavy dashboards.",
31
+ modes: ZVK_THEME_MODES
32
+ },
33
+ {
34
+ id: "sky",
35
+ label: "Sky",
36
+ description: "A bright blue preset for clean product dashboards and reporting surfaces.",
37
+ modes: ZVK_THEME_MODES
38
+ },
39
+ {
40
+ id: "emerald",
41
+ label: "Emerald",
42
+ description: "A confident green preset for growth, operations, and health-oriented workflows.",
43
+ modes: ZVK_THEME_MODES
44
+ },
45
+ {
46
+ id: "violet",
47
+ label: "Violet",
48
+ description: "A rich purple preset for creative tools, AI surfaces, and exploratory workspaces.",
49
+ modes: ZVK_THEME_MODES
50
+ },
51
+ {
52
+ id: "copper",
53
+ label: "Copper",
54
+ description: "A grounded warm preset for finance, planning, and executive review surfaces.",
55
+ modes: ZVK_THEME_MODES
56
+ },
57
+ {
58
+ id: "graphite",
59
+ label: "Graphite",
60
+ description: "A crisp neutral preset for high-density administration and developer tools.",
61
+ modes: ZVK_THEME_MODES
62
+ },
63
+ {
64
+ id: "glass",
65
+ label: "Glass",
66
+ description: "A translucent material preset for floating controls, navigation, and focused app surfaces.",
67
+ modes: ZVK_THEME_MODES
68
+ }
69
+ ];
70
+ export const ZVK_THEME_PRESET_IDS = ZVK_THEME_PRESETS.map((preset) => preset.id);
71
+ export function isZvkThemePresetId(value) {
72
+ return ZVK_THEME_PRESET_IDS.includes(value);
73
+ }
74
+ export function getZvkThemePreset(id) {
75
+ return ZVK_THEME_PRESETS.find((preset) => preset.id === id) ?? ZVK_THEME_PRESETS[0];
76
+ }
package/dist/styles.css ADDED
@@ -0,0 +1,854 @@
1
+ @layer zvk-ui-themes {
2
+ [data-zvk-ui-preset="slate"],
3
+ [data-zvk-ui-preset="slate"][data-zvk-ui-theme="light"] {
4
+ color-scheme: light;
5
+ --zvk-ui-color-background: #f8fafc;
6
+ --zvk-ui-color-foreground: #111827;
7
+ --zvk-ui-color-muted: #f1f5f9;
8
+ --zvk-ui-color-muted-foreground: #64748b;
9
+ --zvk-ui-color-surface: #ffffff;
10
+ --zvk-ui-color-surface-raised: #ffffff;
11
+ --zvk-ui-color-border: #d9e0ea;
12
+ --zvk-ui-color-border-subtle: #e7ecf3;
13
+ --zvk-ui-color-border-strong: #b8c4d4;
14
+ --zvk-ui-color-accent: #eef4ff;
15
+ --zvk-ui-color-ring: #475569;
16
+ --zvk-ui-color-primary: #334155;
17
+ --zvk-ui-color-primary-hover: #1e293b;
18
+ --zvk-ui-color-primary-foreground: #ffffff;
19
+ --zvk-ui-color-primary-soft: #f1f5f9;
20
+ --zvk-ui-color-primary-border: #cbd5e1;
21
+ --zvk-ui-color-success: #0f8a6a;
22
+ --zvk-ui-color-success-border: #9adbc7;
23
+ --zvk-ui-color-warning: #b86f00;
24
+ --zvk-ui-color-warning-border: #f3cf7c;
25
+ --zvk-ui-color-destructive: #c62828;
26
+ --zvk-ui-color-destructive-border: #f2a4a4;
27
+ --zvk-ui-color-info: #087ea4;
28
+ --zvk-ui-color-info-border: #94dcef;
29
+ --zvk-ui-control-background: #ffffff;
30
+ --zvk-ui-control-border: #7f8ea3;
31
+ --zvk-ui-control-border-strong: #64748b;
32
+ --zvk-ui-control-hover: #f8fafc;
33
+ --zvk-ui-control-active: #f1f5f9;
34
+ --zvk-ui-card-border: #7f8ea3;
35
+ }
36
+
37
+ [data-zvk-ui-preset="slate"][data-zvk-ui-theme="dark"] {
38
+ color-scheme: dark;
39
+ --zvk-ui-color-background: #0f172a;
40
+ --zvk-ui-color-foreground: #f8fafc;
41
+ --zvk-ui-color-muted: #1e293b;
42
+ --zvk-ui-color-muted-foreground: #a6b3c5;
43
+ --zvk-ui-color-surface: #172033;
44
+ --zvk-ui-color-surface-raised: #1e293b;
45
+ --zvk-ui-color-border: #475569;
46
+ --zvk-ui-color-border-subtle: #334155;
47
+ --zvk-ui-color-border-strong: #64748b;
48
+ --zvk-ui-color-accent: #263449;
49
+ --zvk-ui-color-ring: #94a3b8;
50
+ --zvk-ui-color-primary: #cbd5e1;
51
+ --zvk-ui-color-primary-hover: #e2e8f0;
52
+ --zvk-ui-color-primary-foreground: #0f172a;
53
+ --zvk-ui-color-primary-soft: #263449;
54
+ --zvk-ui-color-primary-border: #64748b;
55
+ --zvk-ui-color-success: #3dd6aa;
56
+ --zvk-ui-color-success-border: #206b5b;
57
+ --zvk-ui-color-warning: #f5bd4f;
58
+ --zvk-ui-color-warning-border: #755015;
59
+ --zvk-ui-color-destructive: #ff6b6b;
60
+ --zvk-ui-color-destructive-border: #80363a;
61
+ --zvk-ui-color-info: #58d5f7;
62
+ --zvk-ui-color-info-border: #246f85;
63
+ --zvk-ui-control-background: #111827;
64
+ --zvk-ui-control-border: #64748b;
65
+ --zvk-ui-control-border-strong: #94a3b8;
66
+ --zvk-ui-control-hover: #1e293b;
67
+ --zvk-ui-control-active: #263449;
68
+ --zvk-ui-card-border: #64748b;
69
+ }
70
+
71
+ [data-zvk-ui-preset="teal"],
72
+ [data-zvk-ui-preset="teal"][data-zvk-ui-theme="light"] {
73
+ color-scheme: light;
74
+ --zvk-ui-color-background: #f6fbfa;
75
+ --zvk-ui-color-foreground: #10201d;
76
+ --zvk-ui-color-muted: #e8f4f1;
77
+ --zvk-ui-color-muted-foreground: #4f6f68;
78
+ --zvk-ui-color-surface: #ffffff;
79
+ --zvk-ui-color-surface-raised: #ffffff;
80
+ --zvk-ui-color-border: #cbded9;
81
+ --zvk-ui-color-border-subtle: #e1ece9;
82
+ --zvk-ui-color-border-strong: #8aaea6;
83
+ --zvk-ui-color-accent: #dff7f2;
84
+ --zvk-ui-color-ring: #0f766e;
85
+ --zvk-ui-color-primary: #0f766e;
86
+ --zvk-ui-color-primary-hover: #115e59;
87
+ --zvk-ui-color-primary-foreground: #ffffff;
88
+ --zvk-ui-color-primary-soft: #dff7f2;
89
+ --zvk-ui-color-primary-border: #8bd8c8;
90
+ --zvk-ui-color-success: #0f8a6a;
91
+ --zvk-ui-color-success-border: #9adbc7;
92
+ --zvk-ui-color-warning: #a75f00;
93
+ --zvk-ui-color-warning-border: #f0c46e;
94
+ --zvk-ui-color-destructive: #c62828;
95
+ --zvk-ui-color-destructive-border: #f2a4a4;
96
+ --zvk-ui-color-info: #087ea4;
97
+ --zvk-ui-color-info-border: #94dcef;
98
+ --zvk-ui-control-background: #ffffff;
99
+ --zvk-ui-control-border: #668a82;
100
+ --zvk-ui-control-border-strong: #42635c;
101
+ --zvk-ui-control-hover: #f0faf7;
102
+ --zvk-ui-control-active: #dff7f2;
103
+ --zvk-ui-card-border: #668a82;
104
+ }
105
+
106
+ [data-zvk-ui-preset="teal"][data-zvk-ui-theme="dark"] {
107
+ color-scheme: dark;
108
+ --zvk-ui-color-background: #081917;
109
+ --zvk-ui-color-foreground: #f2fbf8;
110
+ --zvk-ui-color-muted: #112421;
111
+ --zvk-ui-color-muted-foreground: #9bc0b8;
112
+ --zvk-ui-color-surface: #10211f;
113
+ --zvk-ui-color-surface-raised: #152d29;
114
+ --zvk-ui-color-border: #31524d;
115
+ --zvk-ui-color-border-subtle: #1f3935;
116
+ --zvk-ui-color-border-strong: #4f746d;
117
+ --zvk-ui-color-accent: #163f39;
118
+ --zvk-ui-color-ring: #5eead4;
119
+ --zvk-ui-color-primary: #5eead4;
120
+ --zvk-ui-color-primary-hover: #99f6e4;
121
+ --zvk-ui-color-primary-foreground: #05201c;
122
+ --zvk-ui-color-primary-soft: #0f302b;
123
+ --zvk-ui-color-primary-border: #1f766b;
124
+ --zvk-ui-color-success: #3dd6aa;
125
+ --zvk-ui-color-success-border: #206b5b;
126
+ --zvk-ui-color-warning: #f5bd4f;
127
+ --zvk-ui-color-warning-border: #755015;
128
+ --zvk-ui-color-destructive: #ff7a7a;
129
+ --zvk-ui-color-destructive-border: #80363a;
130
+ --zvk-ui-color-info: #67e8f9;
131
+ --zvk-ui-color-info-border: #247b88;
132
+ --zvk-ui-control-background: #0b1f1c;
133
+ --zvk-ui-control-border: #4f746d;
134
+ --zvk-ui-control-border-strong: #73a59b;
135
+ --zvk-ui-control-hover: #122b27;
136
+ --zvk-ui-control-active: #163f39;
137
+ --zvk-ui-card-border: #4f746d;
138
+ }
139
+
140
+ [data-zvk-ui-preset="indigo"],
141
+ [data-zvk-ui-preset="indigo"][data-zvk-ui-theme="light"] {
142
+ color-scheme: light;
143
+ --zvk-ui-color-background: #f8f8ff;
144
+ --zvk-ui-color-foreground: #171528;
145
+ --zvk-ui-color-muted: #f0f1ff;
146
+ --zvk-ui-color-muted-foreground: #5d5b82;
147
+ --zvk-ui-color-surface: #ffffff;
148
+ --zvk-ui-color-surface-raised: #ffffff;
149
+ --zvk-ui-color-border: #d8daf2;
150
+ --zvk-ui-color-border-subtle: #e8e9f8;
151
+ --zvk-ui-color-border-strong: #aeb4df;
152
+ --zvk-ui-color-accent: #eef2ff;
153
+ --zvk-ui-color-ring: #4f46e5;
154
+ --zvk-ui-color-primary: #4f46e5;
155
+ --zvk-ui-color-primary-hover: #4338ca;
156
+ --zvk-ui-color-primary-foreground: #ffffff;
157
+ --zvk-ui-color-primary-soft: #eef2ff;
158
+ --zvk-ui-color-primary-border: #c7d2fe;
159
+ --zvk-ui-color-success: #0f8a6a;
160
+ --zvk-ui-color-success-border: #9adbc7;
161
+ --zvk-ui-color-warning: #b86f00;
162
+ --zvk-ui-color-warning-border: #f3cf7c;
163
+ --zvk-ui-color-destructive: #c62828;
164
+ --zvk-ui-color-destructive-border: #f2a4a4;
165
+ --zvk-ui-color-info: #2563eb;
166
+ --zvk-ui-color-info-border: #a9c4ff;
167
+ --zvk-ui-control-background: #ffffff;
168
+ --zvk-ui-control-border: #757bb0;
169
+ --zvk-ui-control-border-strong: #585f97;
170
+ --zvk-ui-control-hover: #f5f6ff;
171
+ --zvk-ui-control-active: #eef2ff;
172
+ --zvk-ui-card-border: #757bb0;
173
+ }
174
+
175
+ [data-zvk-ui-preset="indigo"][data-zvk-ui-theme="dark"] {
176
+ color-scheme: dark;
177
+ --zvk-ui-color-background: #0f1026;
178
+ --zvk-ui-color-foreground: #f8f7ff;
179
+ --zvk-ui-color-muted: #1b1d38;
180
+ --zvk-ui-color-muted-foreground: #b0b3d8;
181
+ --zvk-ui-color-surface: #181a33;
182
+ --zvk-ui-color-surface-raised: #202445;
183
+ --zvk-ui-color-border: #444979;
184
+ --zvk-ui-color-border-subtle: #2d3158;
185
+ --zvk-ui-color-border-strong: #6269a3;
186
+ --zvk-ui-color-accent: #262b62;
187
+ --zvk-ui-color-ring: #a5b4fc;
188
+ --zvk-ui-color-primary: #a5b4fc;
189
+ --zvk-ui-color-primary-hover: #c4b5fd;
190
+ --zvk-ui-color-primary-foreground: #111236;
191
+ --zvk-ui-color-primary-soft: #20234a;
192
+ --zvk-ui-color-primary-border: #4f46e5;
193
+ --zvk-ui-color-success: #3dd6aa;
194
+ --zvk-ui-color-success-border: #206b5b;
195
+ --zvk-ui-color-warning: #f5bd4f;
196
+ --zvk-ui-color-warning-border: #755015;
197
+ --zvk-ui-color-destructive: #ff7a7a;
198
+ --zvk-ui-color-destructive-border: #80363a;
199
+ --zvk-ui-color-info: #93c5fd;
200
+ --zvk-ui-color-info-border: #2563eb;
201
+ --zvk-ui-control-background: #14162b;
202
+ --zvk-ui-control-border: #6269a3;
203
+ --zvk-ui-control-border-strong: #858dd1;
204
+ --zvk-ui-control-hover: #1f2342;
205
+ --zvk-ui-control-active: #262b62;
206
+ --zvk-ui-card-border: #6269a3;
207
+ }
208
+
209
+ [data-zvk-ui-preset="rose"],
210
+ [data-zvk-ui-preset="rose"][data-zvk-ui-theme="light"] {
211
+ color-scheme: light;
212
+ --zvk-ui-color-background: #fff8fa;
213
+ --zvk-ui-color-foreground: #251018;
214
+ --zvk-ui-color-muted: #fff1f2;
215
+ --zvk-ui-color-muted-foreground: #7f4f5d;
216
+ --zvk-ui-color-surface: #ffffff;
217
+ --zvk-ui-color-surface-raised: #ffffff;
218
+ --zvk-ui-color-border: #ead0d8;
219
+ --zvk-ui-color-border-subtle: #f4e2e7;
220
+ --zvk-ui-color-border-strong: #d49aa9;
221
+ --zvk-ui-color-accent: #ffe4e6;
222
+ --zvk-ui-color-ring: #e11d48;
223
+ --zvk-ui-color-primary: #e11d48;
224
+ --zvk-ui-color-primary-hover: #be123c;
225
+ --zvk-ui-color-primary-foreground: #ffffff;
226
+ --zvk-ui-color-primary-soft: #fff1f2;
227
+ --zvk-ui-color-primary-border: #fecdd3;
228
+ --zvk-ui-color-success: #0f8a6a;
229
+ --zvk-ui-color-success-border: #9adbc7;
230
+ --zvk-ui-color-warning: #a75f00;
231
+ --zvk-ui-color-warning-border: #f0c46e;
232
+ --zvk-ui-color-destructive: #b91c1c;
233
+ --zvk-ui-color-destructive-border: #f4a6a6;
234
+ --zvk-ui-color-info: #0e7490;
235
+ --zvk-ui-color-info-border: #9bdceb;
236
+ --zvk-ui-control-background: #ffffff;
237
+ --zvk-ui-control-border: #9c6474;
238
+ --zvk-ui-control-border-strong: #7b4555;
239
+ --zvk-ui-control-hover: #fff7f8;
240
+ --zvk-ui-control-active: #fff1f2;
241
+ --zvk-ui-card-border: #9c6474;
242
+ }
243
+
244
+ [data-zvk-ui-preset="rose"][data-zvk-ui-theme="dark"] {
245
+ color-scheme: dark;
246
+ --zvk-ui-color-background: #1f0b12;
247
+ --zvk-ui-color-foreground: #fff7f8;
248
+ --zvk-ui-color-muted: #31121c;
249
+ --zvk-ui-color-muted-foreground: #e1a9b7;
250
+ --zvk-ui-color-surface: #2a1019;
251
+ --zvk-ui-color-surface-raised: #371622;
252
+ --zvk-ui-color-border: #6a3444;
253
+ --zvk-ui-color-border-subtle: #492030;
254
+ --zvk-ui-color-border-strong: #8f4f62;
255
+ --zvk-ui-color-accent: #551f33;
256
+ --zvk-ui-color-ring: #fb7185;
257
+ --zvk-ui-color-primary: #fb7185;
258
+ --zvk-ui-color-primary-hover: #fda4af;
259
+ --zvk-ui-color-primary-foreground: #2b0711;
260
+ --zvk-ui-color-primary-soft: #481827;
261
+ --zvk-ui-color-primary-border: #be3b57;
262
+ --zvk-ui-color-success: #3dd6aa;
263
+ --zvk-ui-color-success-border: #206b5b;
264
+ --zvk-ui-color-warning: #f5bd4f;
265
+ --zvk-ui-color-warning-border: #755015;
266
+ --zvk-ui-color-destructive: #ff8585;
267
+ --zvk-ui-color-destructive-border: #80363a;
268
+ --zvk-ui-color-info: #67e8f9;
269
+ --zvk-ui-color-info-border: #247b88;
270
+ --zvk-ui-control-background: #270d16;
271
+ --zvk-ui-control-border: #8f4f62;
272
+ --zvk-ui-control-border-strong: #b76b80;
273
+ --zvk-ui-control-hover: #351320;
274
+ --zvk-ui-control-active: #551f33;
275
+ --zvk-ui-card-border: #8f4f62;
276
+ }
277
+
278
+ [data-zvk-ui-preset="amber"],
279
+ [data-zvk-ui-preset="amber"][data-zvk-ui-theme="light"] {
280
+ color-scheme: light;
281
+ --zvk-ui-color-background: #fffaf0;
282
+ --zvk-ui-color-foreground: #241500;
283
+ --zvk-ui-color-muted: #fffbeb;
284
+ --zvk-ui-color-muted-foreground: #71572c;
285
+ --zvk-ui-color-surface: #ffffff;
286
+ --zvk-ui-color-surface-raised: #ffffff;
287
+ --zvk-ui-color-border: #ead7b4;
288
+ --zvk-ui-color-border-subtle: #f4e8ce;
289
+ --zvk-ui-color-border-strong: #d0ad6f;
290
+ --zvk-ui-color-accent: #fef3c7;
291
+ --zvk-ui-color-ring: #b45309;
292
+ --zvk-ui-color-primary: #b45309;
293
+ --zvk-ui-color-primary-hover: #92400e;
294
+ --zvk-ui-color-primary-foreground: #ffffff;
295
+ --zvk-ui-color-primary-soft: #fffbeb;
296
+ --zvk-ui-color-primary-border: #fde68a;
297
+ --zvk-ui-color-success: #0f8a6a;
298
+ --zvk-ui-color-success-border: #9adbc7;
299
+ --zvk-ui-color-warning: #a75f00;
300
+ --zvk-ui-color-warning-border: #f0c46e;
301
+ --zvk-ui-color-destructive: #c62828;
302
+ --zvk-ui-color-destructive-border: #f2a4a4;
303
+ --zvk-ui-color-info: #087ea4;
304
+ --zvk-ui-color-info-border: #94dcef;
305
+ --zvk-ui-control-background: #ffffff;
306
+ --zvk-ui-control-border: #8b6a32;
307
+ --zvk-ui-control-border-strong: #6c4c16;
308
+ --zvk-ui-control-hover: #fff8e1;
309
+ --zvk-ui-control-active: #fffbeb;
310
+ --zvk-ui-card-border: #8b6a32;
311
+ }
312
+
313
+ [data-zvk-ui-preset="amber"][data-zvk-ui-theme="dark"] {
314
+ color-scheme: dark;
315
+ --zvk-ui-color-background: #1b1203;
316
+ --zvk-ui-color-foreground: #fff8eb;
317
+ --zvk-ui-color-muted: #2b1f0a;
318
+ --zvk-ui-color-muted-foreground: #d8bd87;
319
+ --zvk-ui-color-surface: #241805;
320
+ --zvk-ui-color-surface-raised: #322309;
321
+ --zvk-ui-color-border: #66502c;
322
+ --zvk-ui-color-border-subtle: #463417;
323
+ --zvk-ui-color-border-strong: #8a6a34;
324
+ --zvk-ui-color-accent: #4a3510;
325
+ --zvk-ui-color-ring: #fbbf24;
326
+ --zvk-ui-color-primary: #fbbf24;
327
+ --zvk-ui-color-primary-hover: #fcd34d;
328
+ --zvk-ui-color-primary-foreground: #251600;
329
+ --zvk-ui-color-primary-soft: #3d2a08;
330
+ --zvk-ui-color-primary-border: #a66d05;
331
+ --zvk-ui-color-success: #3dd6aa;
332
+ --zvk-ui-color-success-border: #206b5b;
333
+ --zvk-ui-color-warning: #f5bd4f;
334
+ --zvk-ui-color-warning-border: #755015;
335
+ --zvk-ui-color-destructive: #ff7a7a;
336
+ --zvk-ui-color-destructive-border: #80363a;
337
+ --zvk-ui-color-info: #67e8f9;
338
+ --zvk-ui-color-info-border: #247b88;
339
+ --zvk-ui-control-background: #1f1605;
340
+ --zvk-ui-control-border: #8a6a34;
341
+ --zvk-ui-control-border-strong: #b38a44;
342
+ --zvk-ui-control-hover: #2d2008;
343
+ --zvk-ui-control-active: #4a3510;
344
+ --zvk-ui-card-border: #8a6a34;
345
+ }
346
+
347
+ [data-zvk-ui-preset="sky"],
348
+ [data-zvk-ui-preset="sky"][data-zvk-ui-theme="light"] {
349
+ color-scheme: light;
350
+ --zvk-ui-color-background: #f5fbff;
351
+ --zvk-ui-color-foreground: #0c1f2e;
352
+ --zvk-ui-color-muted: #eaf6ff;
353
+ --zvk-ui-color-muted-foreground: #4f6e82;
354
+ --zvk-ui-color-surface: #ffffff;
355
+ --zvk-ui-color-surface-raised: #ffffff;
356
+ --zvk-ui-color-border: #c9dff0;
357
+ --zvk-ui-color-border-subtle: #e1eef8;
358
+ --zvk-ui-color-border-strong: #8bb5d6;
359
+ --zvk-ui-color-accent: #e0f2fe;
360
+ --zvk-ui-color-ring: #0284c7;
361
+ --zvk-ui-color-primary: #0369a1;
362
+ --zvk-ui-color-primary-hover: #075985;
363
+ --zvk-ui-color-primary-foreground: #ffffff;
364
+ --zvk-ui-color-primary-soft: #e0f2fe;
365
+ --zvk-ui-color-primary-border: #7dd3fc;
366
+ --zvk-ui-color-success: #0f8a6a;
367
+ --zvk-ui-color-success-border: #9adbc7;
368
+ --zvk-ui-color-warning: #a75f00;
369
+ --zvk-ui-color-warning-border: #f0c46e;
370
+ --zvk-ui-color-destructive: #c62828;
371
+ --zvk-ui-color-destructive-border: #f2a4a4;
372
+ --zvk-ui-color-info: #0369a1;
373
+ --zvk-ui-color-info-border: #93c5fd;
374
+ --zvk-ui-control-background: #ffffff;
375
+ --zvk-ui-control-border: #5f7f97;
376
+ --zvk-ui-control-border-strong: #46657e;
377
+ --zvk-ui-control-hover: #f0f9ff;
378
+ --zvk-ui-control-active: #e0f2fe;
379
+ --zvk-ui-card-border: #5f7f97;
380
+ }
381
+
382
+ [data-zvk-ui-preset="sky"][data-zvk-ui-theme="dark"] {
383
+ color-scheme: dark;
384
+ --zvk-ui-color-background: #061522;
385
+ --zvk-ui-color-foreground: #f2f9ff;
386
+ --zvk-ui-color-muted: #0f2535;
387
+ --zvk-ui-color-muted-foreground: #a2c2d8;
388
+ --zvk-ui-color-surface: #0d2030;
389
+ --zvk-ui-color-surface-raised: #132c40;
390
+ --zvk-ui-color-border: #31536c;
391
+ --zvk-ui-color-border-subtle: #20394d;
392
+ --zvk-ui-color-border-strong: #4f7795;
393
+ --zvk-ui-color-accent: #12395a;
394
+ --zvk-ui-color-ring: #38bdf8;
395
+ --zvk-ui-color-primary: #38bdf8;
396
+ --zvk-ui-color-primary-hover: #7dd3fc;
397
+ --zvk-ui-color-primary-foreground: #041724;
398
+ --zvk-ui-color-primary-soft: #0c314d;
399
+ --zvk-ui-color-primary-border: #0ea5e9;
400
+ --zvk-ui-color-success: #3dd6aa;
401
+ --zvk-ui-color-success-border: #206b5b;
402
+ --zvk-ui-color-warning: #f5bd4f;
403
+ --zvk-ui-color-warning-border: #755015;
404
+ --zvk-ui-color-destructive: #ff7a7a;
405
+ --zvk-ui-color-destructive-border: #80363a;
406
+ --zvk-ui-color-info: #7dd3fc;
407
+ --zvk-ui-color-info-border: #0e7490;
408
+ --zvk-ui-control-background: #091c2a;
409
+ --zvk-ui-control-border: #4f7795;
410
+ --zvk-ui-control-border-strong: #7ca7c4;
411
+ --zvk-ui-control-hover: #10283a;
412
+ --zvk-ui-control-active: #12395a;
413
+ --zvk-ui-card-border: #4f7795;
414
+ }
415
+
416
+ [data-zvk-ui-preset="emerald"],
417
+ [data-zvk-ui-preset="emerald"][data-zvk-ui-theme="light"] {
418
+ color-scheme: light;
419
+ --zvk-ui-color-background: #f5fbf7;
420
+ --zvk-ui-color-foreground: #0f2419;
421
+ --zvk-ui-color-muted: #eaf7ee;
422
+ --zvk-ui-color-muted-foreground: #4d725c;
423
+ --zvk-ui-color-surface: #ffffff;
424
+ --zvk-ui-color-surface-raised: #ffffff;
425
+ --zvk-ui-color-border: #c8dfcf;
426
+ --zvk-ui-color-border-subtle: #e0ede4;
427
+ --zvk-ui-color-border-strong: #8ab99a;
428
+ --zvk-ui-color-accent: #dcfce7;
429
+ --zvk-ui-color-ring: #15803d;
430
+ --zvk-ui-color-primary: #15803d;
431
+ --zvk-ui-color-primary-hover: #166534;
432
+ --zvk-ui-color-primary-foreground: #ffffff;
433
+ --zvk-ui-color-primary-soft: #dcfce7;
434
+ --zvk-ui-color-primary-border: #86efac;
435
+ --zvk-ui-color-success: #0f8a6a;
436
+ --zvk-ui-color-success-border: #9adbc7;
437
+ --zvk-ui-color-warning: #a75f00;
438
+ --zvk-ui-color-warning-border: #f0c46e;
439
+ --zvk-ui-color-destructive: #c62828;
440
+ --zvk-ui-color-destructive-border: #f2a4a4;
441
+ --zvk-ui-color-info: #087ea4;
442
+ --zvk-ui-color-info-border: #94dcef;
443
+ --zvk-ui-control-background: #ffffff;
444
+ --zvk-ui-control-border: #648a6f;
445
+ --zvk-ui-control-border-strong: #486a52;
446
+ --zvk-ui-control-hover: #f0fbf3;
447
+ --zvk-ui-control-active: #dcfce7;
448
+ --zvk-ui-card-border: #648a6f;
449
+ }
450
+
451
+ [data-zvk-ui-preset="emerald"][data-zvk-ui-theme="dark"] {
452
+ color-scheme: dark;
453
+ --zvk-ui-color-background: #07170d;
454
+ --zvk-ui-color-foreground: #f2fbf4;
455
+ --zvk-ui-color-muted: #102318;
456
+ --zvk-ui-color-muted-foreground: #9cc5a7;
457
+ --zvk-ui-color-surface: #0f2116;
458
+ --zvk-ui-color-surface-raised: #162d1f;
459
+ --zvk-ui-color-border: #31583d;
460
+ --zvk-ui-color-border-subtle: #203c29;
461
+ --zvk-ui-color-border-strong: #4f7d5d;
462
+ --zvk-ui-color-accent: #174a2a;
463
+ --zvk-ui-color-ring: #4ade80;
464
+ --zvk-ui-color-primary: #4ade80;
465
+ --zvk-ui-color-primary-hover: #86efac;
466
+ --zvk-ui-color-primary-foreground: #06220f;
467
+ --zvk-ui-color-primary-soft: #12381f;
468
+ --zvk-ui-color-primary-border: #15803d;
469
+ --zvk-ui-color-success: #3dd6aa;
470
+ --zvk-ui-color-success-border: #206b5b;
471
+ --zvk-ui-color-warning: #f5bd4f;
472
+ --zvk-ui-color-warning-border: #755015;
473
+ --zvk-ui-color-destructive: #ff7a7a;
474
+ --zvk-ui-color-destructive-border: #80363a;
475
+ --zvk-ui-color-info: #67e8f9;
476
+ --zvk-ui-color-info-border: #247b88;
477
+ --zvk-ui-control-background: #0a1c11;
478
+ --zvk-ui-control-border: #4f7d5d;
479
+ --zvk-ui-control-border-strong: #77a986;
480
+ --zvk-ui-control-hover: #122818;
481
+ --zvk-ui-control-active: #174a2a;
482
+ --zvk-ui-card-border: #4f7d5d;
483
+ }
484
+
485
+ [data-zvk-ui-preset="violet"],
486
+ [data-zvk-ui-preset="violet"][data-zvk-ui-theme="light"] {
487
+ color-scheme: light;
488
+ --zvk-ui-color-background: #fbf8ff;
489
+ --zvk-ui-color-foreground: #21152e;
490
+ --zvk-ui-color-muted: #f5efff;
491
+ --zvk-ui-color-muted-foreground: #69597e;
492
+ --zvk-ui-color-surface: #ffffff;
493
+ --zvk-ui-color-surface-raised: #ffffff;
494
+ --zvk-ui-color-border: #ddd0ef;
495
+ --zvk-ui-color-border-subtle: #ecdef8;
496
+ --zvk-ui-color-border-strong: #bca0dd;
497
+ --zvk-ui-color-accent: #f3e8ff;
498
+ --zvk-ui-color-ring: #7e22ce;
499
+ --zvk-ui-color-primary: #7e22ce;
500
+ --zvk-ui-color-primary-hover: #6b21a8;
501
+ --zvk-ui-color-primary-foreground: #ffffff;
502
+ --zvk-ui-color-primary-soft: #f3e8ff;
503
+ --zvk-ui-color-primary-border: #d8b4fe;
504
+ --zvk-ui-color-success: #0f8a6a;
505
+ --zvk-ui-color-success-border: #9adbc7;
506
+ --zvk-ui-color-warning: #a75f00;
507
+ --zvk-ui-color-warning-border: #f0c46e;
508
+ --zvk-ui-color-destructive: #c62828;
509
+ --zvk-ui-color-destructive-border: #f2a4a4;
510
+ --zvk-ui-color-info: #2563eb;
511
+ --zvk-ui-color-info-border: #a9c4ff;
512
+ --zvk-ui-control-background: #ffffff;
513
+ --zvk-ui-control-border: #80649d;
514
+ --zvk-ui-control-border-strong: #654a81;
515
+ --zvk-ui-control-hover: #fbf7ff;
516
+ --zvk-ui-control-active: #f3e8ff;
517
+ --zvk-ui-card-border: #80649d;
518
+ }
519
+
520
+ [data-zvk-ui-preset="violet"][data-zvk-ui-theme="dark"] {
521
+ color-scheme: dark;
522
+ --zvk-ui-color-background: #160b23;
523
+ --zvk-ui-color-foreground: #fbf7ff;
524
+ --zvk-ui-color-muted: #241334;
525
+ --zvk-ui-color-muted-foreground: #c2a9dc;
526
+ --zvk-ui-color-surface: #21122f;
527
+ --zvk-ui-color-surface-raised: #2d1a41;
528
+ --zvk-ui-color-border: #56366f;
529
+ --zvk-ui-color-border-subtle: #3b2452;
530
+ --zvk-ui-color-border-strong: #765090;
531
+ --zvk-ui-color-accent: #3b1760;
532
+ --zvk-ui-color-ring: #c084fc;
533
+ --zvk-ui-color-primary: #c084fc;
534
+ --zvk-ui-color-primary-hover: #d8b4fe;
535
+ --zvk-ui-color-primary-foreground: #230636;
536
+ --zvk-ui-color-primary-soft: #33164d;
537
+ --zvk-ui-color-primary-border: #8b5cf6;
538
+ --zvk-ui-color-success: #3dd6aa;
539
+ --zvk-ui-color-success-border: #206b5b;
540
+ --zvk-ui-color-warning: #f5bd4f;
541
+ --zvk-ui-color-warning-border: #755015;
542
+ --zvk-ui-color-destructive: #ff7a7a;
543
+ --zvk-ui-color-destructive-border: #80363a;
544
+ --zvk-ui-color-info: #93c5fd;
545
+ --zvk-ui-color-info-border: #2563eb;
546
+ --zvk-ui-control-background: #1b0f29;
547
+ --zvk-ui-control-border: #765090;
548
+ --zvk-ui-control-border-strong: #a779c4;
549
+ --zvk-ui-control-hover: #27163a;
550
+ --zvk-ui-control-active: #3b1760;
551
+ --zvk-ui-card-border: #765090;
552
+ }
553
+
554
+ [data-zvk-ui-preset="copper"],
555
+ [data-zvk-ui-preset="copper"][data-zvk-ui-theme="light"] {
556
+ color-scheme: light;
557
+ --zvk-ui-color-background: #fff8f2;
558
+ --zvk-ui-color-foreground: #25150b;
559
+ --zvk-ui-color-muted: #fff1e7;
560
+ --zvk-ui-color-muted-foreground: #76533d;
561
+ --zvk-ui-color-surface: #ffffff;
562
+ --zvk-ui-color-surface-raised: #ffffff;
563
+ --zvk-ui-color-border: #ebd2bf;
564
+ --zvk-ui-color-border-subtle: #f5e3d6;
565
+ --zvk-ui-color-border-strong: #d39d78;
566
+ --zvk-ui-color-accent: #ffedd5;
567
+ --zvk-ui-color-ring: #c2410c;
568
+ --zvk-ui-color-primary: #c2410c;
569
+ --zvk-ui-color-primary-hover: #9a3412;
570
+ --zvk-ui-color-primary-foreground: #ffffff;
571
+ --zvk-ui-color-primary-soft: #ffedd5;
572
+ --zvk-ui-color-primary-border: #fdba74;
573
+ --zvk-ui-color-success: #0f8a6a;
574
+ --zvk-ui-color-success-border: #9adbc7;
575
+ --zvk-ui-color-warning: #a75f00;
576
+ --zvk-ui-color-warning-border: #f0c46e;
577
+ --zvk-ui-color-destructive: #b91c1c;
578
+ --zvk-ui-color-destructive-border: #f4a6a6;
579
+ --zvk-ui-color-info: #087ea4;
580
+ --zvk-ui-color-info-border: #94dcef;
581
+ --zvk-ui-control-background: #ffffff;
582
+ --zvk-ui-control-border: #8d634a;
583
+ --zvk-ui-control-border-strong: #6f442d;
584
+ --zvk-ui-control-hover: #fff7ed;
585
+ --zvk-ui-control-active: #ffedd5;
586
+ --zvk-ui-card-border: #8d634a;
587
+ }
588
+
589
+ [data-zvk-ui-preset="copper"][data-zvk-ui-theme="dark"] {
590
+ color-scheme: dark;
591
+ --zvk-ui-color-background: #1e0f08;
592
+ --zvk-ui-color-foreground: #fff7ed;
593
+ --zvk-ui-color-muted: #2e1a10;
594
+ --zvk-ui-color-muted-foreground: #d7ad91;
595
+ --zvk-ui-color-surface: #28150b;
596
+ --zvk-ui-color-surface-raised: #361e12;
597
+ --zvk-ui-color-border: #6d3f2a;
598
+ --zvk-ui-color-border-subtle: #4b2a1c;
599
+ --zvk-ui-color-border-strong: #925b3d;
600
+ --zvk-ui-color-accent: #54270f;
601
+ --zvk-ui-color-ring: #fb923c;
602
+ --zvk-ui-color-primary: #fb923c;
603
+ --zvk-ui-color-primary-hover: #fdba74;
604
+ --zvk-ui-color-primary-foreground: #271003;
605
+ --zvk-ui-color-primary-soft: #431f0b;
606
+ --zvk-ui-color-primary-border: #c2410c;
607
+ --zvk-ui-color-success: #3dd6aa;
608
+ --zvk-ui-color-success-border: #206b5b;
609
+ --zvk-ui-color-warning: #f5bd4f;
610
+ --zvk-ui-color-warning-border: #755015;
611
+ --zvk-ui-color-destructive: #ff8585;
612
+ --zvk-ui-color-destructive-border: #80363a;
613
+ --zvk-ui-color-info: #67e8f9;
614
+ --zvk-ui-color-info-border: #247b88;
615
+ --zvk-ui-control-background: #241209;
616
+ --zvk-ui-control-border: #925b3d;
617
+ --zvk-ui-control-border-strong: #bd7a55;
618
+ --zvk-ui-control-hover: #311b10;
619
+ --zvk-ui-control-active: #54270f;
620
+ --zvk-ui-card-border: #925b3d;
621
+ }
622
+
623
+ [data-zvk-ui-preset="graphite"],
624
+ [data-zvk-ui-preset="graphite"][data-zvk-ui-theme="light"] {
625
+ color-scheme: light;
626
+ --zvk-ui-color-background: #f7f7f5;
627
+ --zvk-ui-color-foreground: #171717;
628
+ --zvk-ui-color-muted: #eeeeec;
629
+ --zvk-ui-color-muted-foreground: #5f625f;
630
+ --zvk-ui-color-surface: #ffffff;
631
+ --zvk-ui-color-surface-raised: #ffffff;
632
+ --zvk-ui-color-border: #d8d8d4;
633
+ --zvk-ui-color-border-subtle: #e7e7e3;
634
+ --zvk-ui-color-border-strong: #b7b7b2;
635
+ --zvk-ui-color-accent: #eceff1;
636
+ --zvk-ui-color-ring: #3f3f46;
637
+ --zvk-ui-color-primary: #27272a;
638
+ --zvk-ui-color-primary-hover: #18181b;
639
+ --zvk-ui-color-primary-foreground: #ffffff;
640
+ --zvk-ui-color-primary-soft: #f0f0ee;
641
+ --zvk-ui-color-primary-border: #c6c6c1;
642
+ --zvk-ui-color-success: #0f8a6a;
643
+ --zvk-ui-color-success-border: #9adbc7;
644
+ --zvk-ui-color-warning: #a75f00;
645
+ --zvk-ui-color-warning-border: #f0c46e;
646
+ --zvk-ui-color-destructive: #c62828;
647
+ --zvk-ui-color-destructive-border: #f2a4a4;
648
+ --zvk-ui-color-info: #087ea4;
649
+ --zvk-ui-color-info-border: #94dcef;
650
+ --zvk-ui-control-background: #ffffff;
651
+ --zvk-ui-control-border: #737373;
652
+ --zvk-ui-control-border-strong: #525252;
653
+ --zvk-ui-control-hover: #f4f4f2;
654
+ --zvk-ui-control-active: #eceff1;
655
+ --zvk-ui-card-border: #737373;
656
+ }
657
+
658
+ [data-zvk-ui-preset="graphite"][data-zvk-ui-theme="dark"] {
659
+ color-scheme: dark;
660
+ --zvk-ui-color-background: #0c0c0d;
661
+ --zvk-ui-color-foreground: #f7f7f7;
662
+ --zvk-ui-color-muted: #18181b;
663
+ --zvk-ui-color-muted-foreground: #b5b5b5;
664
+ --zvk-ui-color-surface: #151518;
665
+ --zvk-ui-color-surface-raised: #202023;
666
+ --zvk-ui-color-border: #46464c;
667
+ --zvk-ui-color-border-subtle: #2e2e33;
668
+ --zvk-ui-color-border-strong: #66666d;
669
+ --zvk-ui-color-accent: #2a2d32;
670
+ --zvk-ui-color-ring: #d4d4d8;
671
+ --zvk-ui-color-primary: #d4d4d8;
672
+ --zvk-ui-color-primary-hover: #f4f4f5;
673
+ --zvk-ui-color-primary-foreground: #111113;
674
+ --zvk-ui-color-primary-soft: #252529;
675
+ --zvk-ui-color-primary-border: #71717a;
676
+ --zvk-ui-color-success: #3dd6aa;
677
+ --zvk-ui-color-success-border: #206b5b;
678
+ --zvk-ui-color-warning: #f5bd4f;
679
+ --zvk-ui-color-warning-border: #755015;
680
+ --zvk-ui-color-destructive: #ff7a7a;
681
+ --zvk-ui-color-destructive-border: #80363a;
682
+ --zvk-ui-color-info: #58d5f7;
683
+ --zvk-ui-color-info-border: #246f85;
684
+ --zvk-ui-control-background: #111113;
685
+ --zvk-ui-control-border: #66666d;
686
+ --zvk-ui-control-border-strong: #8d8d95;
687
+ --zvk-ui-control-hover: #1d1d21;
688
+ --zvk-ui-control-active: #2a2d32;
689
+ --zvk-ui-card-border: #66666d;
690
+ }
691
+
692
+ [data-zvk-ui-preset="glass"],
693
+ [data-zvk-ui-preset="glass"][data-zvk-ui-theme="light"] {
694
+ color-scheme: light;
695
+ --zvk-ui-color-background: #eef4fb;
696
+ --zvk-ui-color-foreground: #111827;
697
+ --zvk-ui-color-muted: #e6eef8;
698
+ --zvk-ui-color-muted-foreground: #526070;
699
+ --zvk-ui-color-surface: rgb(255 255 255 / 0.62);
700
+ --zvk-ui-color-surface-raised: rgb(255 255 255 / 0.76);
701
+ --zvk-ui-color-border: rgb(80 96 116 / 0.34);
702
+ --zvk-ui-color-border-subtle: rgb(255 255 255 / 0.54);
703
+ --zvk-ui-color-border-strong: rgb(62 82 108 / 0.58);
704
+ --zvk-ui-color-accent: rgb(223 242 255 / 0.74);
705
+ --zvk-ui-color-ring: #1479d4;
706
+ --zvk-ui-color-primary: #0b67c2;
707
+ --zvk-ui-color-primary-hover: #0957a5;
708
+ --zvk-ui-color-primary-foreground: #ffffff;
709
+ --zvk-ui-color-primary-soft: rgb(212 235 255 / 0.72);
710
+ --zvk-ui-color-primary-border: rgb(84 164 232 / 0.5);
711
+ --zvk-ui-color-success: #0f8a6a;
712
+ --zvk-ui-color-success-border: #9adbc7;
713
+ --zvk-ui-color-warning: #a75f00;
714
+ --zvk-ui-color-warning-border: #f0c46e;
715
+ --zvk-ui-color-destructive: #c62828;
716
+ --zvk-ui-color-destructive-border: #f2a4a4;
717
+ --zvk-ui-color-info: #087ea4;
718
+ --zvk-ui-color-info-border: #94dcef;
719
+ --zvk-ui-control-background: rgb(255 255 255 / 0.52);
720
+ --zvk-ui-control-border: rgb(72 91 116 / 0.46);
721
+ --zvk-ui-control-border-strong: rgb(53 71 96 / 0.68);
722
+ --zvk-ui-control-hover: rgb(255 255 255 / 0.7);
723
+ --zvk-ui-control-active: rgb(226 241 255 / 0.82);
724
+ --zvk-ui-card-border: rgb(72 91 116 / 0.42);
725
+ --zvk-ui-material-surface-backdrop-filter: blur(18px) saturate(170%) contrast(1.03);
726
+ --zvk-ui-material-floating-backdrop-filter: blur(24px) saturate(185%) contrast(1.05);
727
+ --zvk-ui-material-control-backdrop-filter: blur(14px) saturate(170%) contrast(1.04);
728
+ --zvk-ui-material-glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.72), inset 0 -1px 0 rgb(255 255 255 / 0.28);
729
+ --zvk-ui-material-glass-shadow: 0 18px 48px rgb(15 23 42 / 0.14), 0 2px 10px rgb(15 23 42 / 0.08);
730
+ --zvk-ui-material-overlay-background: rgb(20 30 44 / 0.26);
731
+ --zvk-ui-material-reduced-transparency-surface: #f8fbff;
732
+ --zvk-ui-material-reduced-transparency-surface-raised: #ffffff;
733
+ --zvk-ui-material-reduced-transparency-control: #ffffff;
734
+ --zvk-ui-button-backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
735
+ --zvk-ui-select-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
736
+ --zvk-ui-dialog-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
737
+ --zvk-ui-alert-dialog-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
738
+ --zvk-ui-sheet-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
739
+ --zvk-ui-popover-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
740
+ --zvk-ui-hover-card-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
741
+ --zvk-ui-tooltip-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
742
+ --zvk-ui-dropdown-menu-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
743
+ --zvk-ui-combobox-popup-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
744
+ --zvk-ui-context-menu-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
745
+ --zvk-ui-menubar-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
746
+ --zvk-ui-sidebar-shell-sidebar-backdrop-filter: var(--zvk-ui-material-surface-backdrop-filter);
747
+ --zvk-ui-toast-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
748
+ }
749
+
750
+ [data-zvk-ui-preset="glass"][data-zvk-ui-theme="dark"] {
751
+ color-scheme: dark;
752
+ --zvk-ui-color-background: #08111d;
753
+ --zvk-ui-color-foreground: #f5f8fc;
754
+ --zvk-ui-color-muted: #111c2b;
755
+ --zvk-ui-color-muted-foreground: #a8b7c9;
756
+ --zvk-ui-color-surface: rgb(20 30 44 / 0.58);
757
+ --zvk-ui-color-surface-raised: rgb(25 38 56 / 0.72);
758
+ --zvk-ui-color-border: rgb(202 220 240 / 0.24);
759
+ --zvk-ui-color-border-subtle: rgb(202 220 240 / 0.14);
760
+ --zvk-ui-color-border-strong: rgb(220 236 255 / 0.42);
761
+ --zvk-ui-color-accent: rgb(42 82 120 / 0.48);
762
+ --zvk-ui-color-ring: #8cc8ff;
763
+ --zvk-ui-color-primary: #9ad2ff;
764
+ --zvk-ui-color-primary-hover: #c1e3ff;
765
+ --zvk-ui-color-primary-foreground: #06111e;
766
+ --zvk-ui-color-primary-soft: rgb(36 73 110 / 0.72);
767
+ --zvk-ui-color-primary-border: rgb(115 181 235 / 0.5);
768
+ --zvk-ui-color-success: #3dd6aa;
769
+ --zvk-ui-color-success-border: #206b5b;
770
+ --zvk-ui-color-warning: #f5bd4f;
771
+ --zvk-ui-color-warning-border: #755015;
772
+ --zvk-ui-color-destructive: #ff6b6b;
773
+ --zvk-ui-color-destructive-border: #80363a;
774
+ --zvk-ui-color-info: #58d5f7;
775
+ --zvk-ui-color-info-border: #246f85;
776
+ --zvk-ui-control-background: rgb(16 28 42 / 0.52);
777
+ --zvk-ui-control-border: rgb(210 228 246 / 0.3);
778
+ --zvk-ui-control-border-strong: rgb(226 240 255 / 0.5);
779
+ --zvk-ui-control-hover: rgb(30 47 68 / 0.7);
780
+ --zvk-ui-control-active: rgb(42 82 120 / 0.82);
781
+ --zvk-ui-card-border: rgb(210 228 246 / 0.26);
782
+ --zvk-ui-material-surface-backdrop-filter: blur(18px) saturate(155%) contrast(1.08);
783
+ --zvk-ui-material-floating-backdrop-filter: blur(24px) saturate(170%) contrast(1.1);
784
+ --zvk-ui-material-control-backdrop-filter: blur(14px) saturate(160%) contrast(1.08);
785
+ --zvk-ui-material-glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -1px 0 rgb(255 255 255 / 0.08);
786
+ --zvk-ui-material-glass-shadow: 0 20px 56px rgb(0 0 0 / 0.34), 0 2px 12px rgb(0 0 0 / 0.22);
787
+ --zvk-ui-material-overlay-background: rgb(0 6 14 / 0.48);
788
+ --zvk-ui-material-reduced-transparency-surface: #111c2b;
789
+ --zvk-ui-material-reduced-transparency-surface-raised: #18263a;
790
+ --zvk-ui-material-reduced-transparency-control: #101b2a;
791
+ --zvk-ui-button-backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
792
+ --zvk-ui-select-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
793
+ --zvk-ui-dialog-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
794
+ --zvk-ui-alert-dialog-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
795
+ --zvk-ui-sheet-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
796
+ --zvk-ui-popover-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
797
+ --zvk-ui-hover-card-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
798
+ --zvk-ui-tooltip-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
799
+ --zvk-ui-dropdown-menu-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
800
+ --zvk-ui-combobox-popup-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
801
+ --zvk-ui-context-menu-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
802
+ --zvk-ui-menubar-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
803
+ --zvk-ui-sidebar-shell-sidebar-backdrop-filter: var(--zvk-ui-material-surface-backdrop-filter);
804
+ --zvk-ui-toast-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
805
+ }
806
+
807
+ [data-zvk-ui-preset="glass"][data-zvk-ui-transparency="reduced"] {
808
+ --zvk-ui-color-surface: var(--zvk-ui-material-reduced-transparency-surface);
809
+ --zvk-ui-color-surface-raised: var(--zvk-ui-material-reduced-transparency-surface-raised);
810
+ --zvk-ui-control-background: var(--zvk-ui-material-reduced-transparency-control);
811
+ --zvk-ui-material-surface-backdrop-filter: none;
812
+ --zvk-ui-material-floating-backdrop-filter: none;
813
+ --zvk-ui-material-control-backdrop-filter: none;
814
+ --zvk-ui-button-backdrop-filter: none;
815
+ --zvk-ui-select-content-backdrop-filter: none;
816
+ --zvk-ui-dialog-content-backdrop-filter: none;
817
+ --zvk-ui-alert-dialog-content-backdrop-filter: none;
818
+ --zvk-ui-sheet-content-backdrop-filter: none;
819
+ --zvk-ui-popover-content-backdrop-filter: none;
820
+ --zvk-ui-hover-card-content-backdrop-filter: none;
821
+ --zvk-ui-tooltip-backdrop-filter: none;
822
+ --zvk-ui-dropdown-menu-content-backdrop-filter: none;
823
+ --zvk-ui-combobox-popup-backdrop-filter: none;
824
+ --zvk-ui-context-menu-content-backdrop-filter: none;
825
+ --zvk-ui-menubar-content-backdrop-filter: none;
826
+ --zvk-ui-sidebar-shell-sidebar-backdrop-filter: none;
827
+ --zvk-ui-toast-backdrop-filter: none;
828
+ }
829
+
830
+ @media (prefers-reduced-transparency: reduce) {
831
+ [data-zvk-ui-preset="glass"] {
832
+ --zvk-ui-color-surface: var(--zvk-ui-material-reduced-transparency-surface);
833
+ --zvk-ui-color-surface-raised: var(--zvk-ui-material-reduced-transparency-surface-raised);
834
+ --zvk-ui-control-background: var(--zvk-ui-material-reduced-transparency-control);
835
+ --zvk-ui-material-surface-backdrop-filter: none;
836
+ --zvk-ui-material-floating-backdrop-filter: none;
837
+ --zvk-ui-material-control-backdrop-filter: none;
838
+ --zvk-ui-button-backdrop-filter: none;
839
+ --zvk-ui-select-content-backdrop-filter: none;
840
+ --zvk-ui-dialog-content-backdrop-filter: none;
841
+ --zvk-ui-alert-dialog-content-backdrop-filter: none;
842
+ --zvk-ui-sheet-content-backdrop-filter: none;
843
+ --zvk-ui-popover-content-backdrop-filter: none;
844
+ --zvk-ui-hover-card-content-backdrop-filter: none;
845
+ --zvk-ui-tooltip-backdrop-filter: none;
846
+ --zvk-ui-dropdown-menu-content-backdrop-filter: none;
847
+ --zvk-ui-combobox-popup-backdrop-filter: none;
848
+ --zvk-ui-context-menu-content-backdrop-filter: none;
849
+ --zvk-ui-menubar-content-backdrop-filter: none;
850
+ --zvk-ui-sidebar-shell-sidebar-backdrop-filter: none;
851
+ --zvk-ui-toast-backdrop-filter: none;
852
+ }
853
+ }
854
+ }
package/dist/types.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import type { ZvkThemeMode } from "./css-variables.js";
2
+ export type ZvkThemePresetId = "slate" | "teal" | "indigo" | "rose" | "amber" | "sky" | "emerald" | "violet" | "copper" | "graphite" | "glass";
3
+ export type ZvkThemeImportOrder = readonly [
4
+ "@zvk/ui/styles.css",
5
+ "@zvk/themes/styles.css",
6
+ ...string[]
7
+ ];
8
+ export interface ZvkThemePreset {
9
+ readonly id: ZvkThemePresetId;
10
+ readonly label: string;
11
+ readonly description: string;
12
+ readonly modes: readonly ZvkThemeMode[];
13
+ }
package/dist/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/package.json ADDED
@@ -0,0 +1,60 @@
1
+ {
2
+ "name": "@zvk/themes",
3
+ "version": "0.1.0",
4
+ "description": "Preset theme configurations for ZVK UI, composite, chart, and graph packages.",
5
+ "private": false,
6
+ "type": "module",
7
+ "license": "SEE LICENSE IN LICENSE.md",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/brandon-schabel/zvk.git"
11
+ },
12
+ "publishConfig": {
13
+ "access": "public"
14
+ },
15
+ "sideEffects": [
16
+ "**/*.css"
17
+ ],
18
+ "files": [
19
+ "dist",
20
+ "CHANGELOG.md",
21
+ "LICENSE.md",
22
+ "README.md"
23
+ ],
24
+ "types": "./dist/index.d.ts",
25
+ "exports": {
26
+ ".": {
27
+ "types": "./dist/index.d.ts",
28
+ "import": "./dist/index.js",
29
+ "default": "./dist/index.js"
30
+ },
31
+ "./styles.css": "./dist/styles.css",
32
+ "./package.json": "./package.json"
33
+ },
34
+ "scripts": {
35
+ "clean": "bun run scripts/clean.mjs",
36
+ "build:types": "tsc -p tsconfig.build.json",
37
+ "build:css": "bun run scripts/build-css.mjs",
38
+ "build": "bun run clean && bun run build:types && bun run build:css",
39
+ "typecheck": "tsc -p tsconfig.json --noEmit",
40
+ "test": "vitest run",
41
+ "test:ssr": "vitest run tests/ssr --environment node",
42
+ "test:exports": "vitest run tests/exports --environment node",
43
+ "test:types": "tsd",
44
+ "validate:exports": "bun run scripts/validate-exports.mjs",
45
+ "tarball:inspect": "bun run scripts/check-tarball.mjs",
46
+ "pack:dry": "bun pm pack --dry-run",
47
+ "preflight": "bun run build && bun run typecheck && bun run test && bun run test:ssr && bun run test:types && bun run test:exports && bun run validate:exports && bun run tarball:inspect && bun run pack:dry",
48
+ "preflight:ci": "bun run build && bun run typecheck && bun run test && bun run test:ssr && bun run test:types && bun run test:exports && bun run validate:exports && bun run tarball:inspect && bun run pack:dry"
49
+ },
50
+ "dependencies": {},
51
+ "tsd": {
52
+ "directory": "tests/types"
53
+ },
54
+ "devDependencies": {
55
+ "@types/node": "^25.9.1",
56
+ "tsd": "^0.33.0",
57
+ "typescript": "^6.0.3",
58
+ "vitest": "^4.1.8"
59
+ }
60
+ }