@zc-ui/theme 1.0.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 (31) hide show
  1. package/LICENSE +21 -0
  2. package/dist/index.cjs +5 -0
  3. package/dist/index.mjs +761 -0
  4. package/dist/types/__tests__/color-generator.spec.d.ts +2 -0
  5. package/dist/types/__tests__/color-generator.spec.d.ts.map +1 -0
  6. package/dist/types/__tests__/component-theme.spec.d.ts +2 -0
  7. package/dist/types/__tests__/component-theme.spec.d.ts.map +1 -0
  8. package/dist/types/__tests__/css-layers.spec.d.ts +2 -0
  9. package/dist/types/__tests__/css-layers.spec.d.ts.map +1 -0
  10. package/dist/types/__tests__/namespace.spec.d.ts +2 -0
  11. package/dist/types/__tests__/namespace.spec.d.ts.map +1 -0
  12. package/dist/types/__tests__/presets.spec.d.ts +2 -0
  13. package/dist/types/__tests__/presets.spec.d.ts.map +1 -0
  14. package/dist/types/__tests__/runtime-theme.spec.d.ts +2 -0
  15. package/dist/types/__tests__/runtime-theme.spec.d.ts.map +1 -0
  16. package/dist/types/color-generator.d.ts +138 -0
  17. package/dist/types/color-generator.d.ts.map +1 -0
  18. package/dist/types/colors.d.ts +44 -0
  19. package/dist/types/colors.d.ts.map +1 -0
  20. package/dist/types/css-layers.d.ts +72 -0
  21. package/dist/types/css-layers.d.ts.map +1 -0
  22. package/dist/types/index.d.ts +181 -0
  23. package/dist/types/index.d.ts.map +1 -0
  24. package/dist/types/namespace.d.ts +79 -0
  25. package/dist/types/namespace.d.ts.map +1 -0
  26. package/dist/types/presets.d.ts +185 -0
  27. package/dist/types/presets.d.ts.map +1 -0
  28. package/dist/types/runtime-theme.d.ts +162 -0
  29. package/dist/types/runtime-theme.d.ts.map +1 -0
  30. package/package.json +51 -0
  31. package/src/styles.css +293 -0
package/src/styles.css ADDED
@@ -0,0 +1,293 @@
1
+ @import 'tailwindcss';
2
+
3
+ /* ============================================================
4
+ * CSS Cascade Layers
5
+ *
6
+ * Establishes a predictable priority order so that:
7
+ * - ZC UI component styles don't accidentally override user CSS
8
+ * - Runtime theme overrides always take precedence
9
+ *
10
+ * Priority (low → high):
11
+ * zc-reset → zc-tokens → zc-base → zc-components → zc-overrides
12
+ * ============================================================ */
13
+ @layer zc-reset, zc-tokens, zc-base, zc-components, zc-overrides;
14
+
15
+ /* ============================================================
16
+ * ZC UI Tailwind CSS v4 Theme Integration
17
+ *
18
+ * Maps design tokens from @zc-ui/theme into Tailwind's
19
+ * CSS-first theme configuration.
20
+ *
21
+ * Color usage:
22
+ * bg-zc-primary-500, text-zc-danger-300, border-zc-info-700, ...
23
+ *
24
+ * Dark mode:
25
+ * <html class="dark"> activates dark overrides.
26
+ * Use dark: prefix: class="dark:bg-zc-info-900"
27
+ * ============================================================ */
28
+
29
+ /* Dark mode: triggered by `.dark` class on <html> */
30
+ @custom-variant dark (&:where(.dark, .dark *));
31
+
32
+ @layer zc-tokens {
33
+ @theme {
34
+ /* ---- Primary (blue) ---- */
35
+ --color-zc-primary-50: #ecf5ff;
36
+ --color-zc-primary-100: #d9ecff;
37
+ --color-zc-primary-200: #c6e2ff;
38
+ --color-zc-primary-300: #a0cfff;
39
+ --color-zc-primary-400: #79bbff;
40
+ --color-zc-primary-500: #409eff;
41
+ --color-zc-primary-600: #337ecc;
42
+ --color-zc-primary-700: #2a6cb3;
43
+ --color-zc-primary-800: #1d4f7f;
44
+ --color-zc-primary-900: #0d2640;
45
+ --color-zc-primary-950: #06121e;
46
+
47
+ /* ---- Success (green) ---- */
48
+ --color-zc-success-50: #f0f9eb;
49
+ --color-zc-success-100: #e1f3d8;
50
+ --color-zc-success-200: #cfe8c3;
51
+ --color-zc-success-300: #b3e19d;
52
+ --color-zc-success-400: #95d575;
53
+ --color-zc-success-500: #67c23a;
54
+ --color-zc-success-600: #529b2e;
55
+ --color-zc-success-700: #427a27;
56
+ --color-zc-success-800: #325a1c;
57
+ --color-zc-success-900: #1f3a10;
58
+ --color-zc-success-950: #0e1d07;
59
+
60
+ /* ---- Warning (orange) ---- */
61
+ --color-zc-warning-50: #fdf6ec;
62
+ --color-zc-warning-100: #faecd8;
63
+ --color-zc-warning-200: #f8e3c5;
64
+ --color-zc-warning-300: #f3d19e;
65
+ --color-zc-warning-400: #ecbe77;
66
+ --color-zc-warning-500: #e6a23c;
67
+ --color-zc-warning-600: #b88230;
68
+ --color-zc-warning-700: #946626;
69
+ --color-zc-warning-800: #6f4c1c;
70
+ --color-zc-warning-900: #4a3212;
71
+ --color-zc-warning-950: #241907;
72
+
73
+ /* ---- Danger (red) ---- */
74
+ --color-zc-danger-50: #fef0f0;
75
+ --color-zc-danger-100: #fde2e2;
76
+ --color-zc-danger-200: #fcd3d3;
77
+ --color-zc-danger-300: #fab6b6;
78
+ --color-zc-danger-400: #f78989;
79
+ --color-zc-danger-500: #f56c6c;
80
+ --color-zc-danger-600: #c45656;
81
+ --color-zc-danger-700: #9d4444;
82
+ --color-zc-danger-800: #763231;
83
+ --color-zc-danger-900: #4f211f;
84
+ --color-zc-danger-950: #2a1010;
85
+
86
+ /* ---- Info (gray) ---- */
87
+ --color-zc-info-50: #f4f4f5;
88
+ --color-zc-info-100: #e9e9eb;
89
+ --color-zc-info-200: #dedfe0;
90
+ --color-zc-info-300: #c8c9cc;
91
+ --color-zc-info-400: #a6a9ad;
92
+ --color-zc-info-500: #909399;
93
+ --color-zc-info-600: #73767a;
94
+ --color-zc-info-700: #5c5e62;
95
+ --color-zc-info-800: #45474a;
96
+ --color-zc-info-900: #2e3032;
97
+ --color-zc-info-950: #171819;
98
+
99
+ /* ---- Text colors ---- */
100
+ --color-zc-text-primary: #303133;
101
+ --color-zc-text-regular: #606266;
102
+ --color-zc-text-secondary: #909399;
103
+ --color-zc-text-placeholder: #a8abb2;
104
+
105
+ /* ---- Border colors ---- */
106
+ --color-zc-border-base: #dcdfe6;
107
+ --color-zc-border-light: #e4e7ed;
108
+ --color-zc-border-lighter: #ebeef5;
109
+ --color-zc-border-extralight: #f2f6fc;
110
+
111
+ /* ---- Fill colors ---- */
112
+ --color-zc-fill-base: #f0f2f5;
113
+ --color-zc-fill-light: #f5f7fa;
114
+ --color-zc-fill-lighter: #fafafa;
115
+
116
+ /* ---- Background colors ---- */
117
+ --color-zc-bg-base: #ffffff;
118
+ --color-zc-bg: #ffffff;
119
+ --color-zc-white: #ffffff;
120
+
121
+ /* ---- Disabled text ---- */
122
+ --color-zc-text-disabled: #c0c4cc;
123
+
124
+ /* ---- Font sizes ---- */
125
+ --text-zc-xs: 12px;
126
+ --text-zc-sm: 13px;
127
+ --text-zc-base: 14px;
128
+ --text-zc-md: 16px;
129
+ --text-zc-lg: 18px;
130
+ --text-zc-xl: 20px;
131
+
132
+ /* ---- Border radius ---- */
133
+ --radius-zc-sm: 2px;
134
+ --radius-zc-base: 4px;
135
+ --radius-zc-md: 6px;
136
+ --radius-zc-lg: 8px;
137
+ --radius-zc-round: 20px;
138
+ --radius-zc-circle: 50%;
139
+
140
+ /* ---- Spacing ---- */
141
+ --spacing-zc-xs: 4px;
142
+ --spacing-zc-sm: 8px;
143
+ --spacing-zc-base: 12px;
144
+ --spacing-zc-md: 16px;
145
+ --spacing-zc-lg: 24px;
146
+ --spacing-zc-xl: 32px;
147
+
148
+ /* ---- Shadows (box-shadow) ---- */
149
+ --shadow-zc-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
150
+ --shadow-zc-base: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
151
+ --shadow-zc-md: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
152
+ --shadow-zc-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
153
+ --shadow-zc-xl: 0 16px 48px 0 rgba(0, 0, 0, 0.16);
154
+ --shadow-zc-dark: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
155
+
156
+ /* ---- Transition durations ---- */
157
+ --transition-duration-zc-fast: 0.15s;
158
+ --transition-duration-zc-base: 0.25s;
159
+ --transition-duration-zc-slow: 0.35s;
160
+
161
+ /* ---- Transition timing functions ---- */
162
+ --ease-zc-in: cubic-bezier(0.4, 0, 1, 1);
163
+ --ease-zc-out: cubic-bezier(0, 0, 0.2, 1);
164
+ --ease-zc-in-out: cubic-bezier(0.4, 0, 0.2, 1);
165
+ --ease-zc-sharp: cubic-bezier(0.4, 0, 0.6, 1);
166
+
167
+ /* ---- Z-index layers ---- */
168
+ --z-zc-base: 1;
169
+ --z-zc-dropdown: 1000;
170
+ --z-zc-sticky: 1100;
171
+ --z-zc-fixed: 1200;
172
+ --z-zc-modal: 1300;
173
+ --z-zc-popover: 1400;
174
+ --z-zc-tooltip: 1500;
175
+ --z-zc-message: 1600;
176
+ }
177
+ } /* end @layer zc-tokens */
178
+
179
+ /* ============================================================
180
+ * Dark mode overrides
181
+ *
182
+ * Activated by adding `.dark` class to <html>.
183
+ * - Color scales (50–950) are inverted via color-mix():
184
+ * 50–400 → dark surface tinted with the color
185
+ * 500 → kept as-is (brand color)
186
+ * 600–950 → lightened for readability on dark surfaces
187
+ * - Semantic tokens (text/border/fill/shadow) use hand-picked values.
188
+ * Usage: toggleDark() / setTheme('dark') from @zc-ui/theme
189
+ * ============================================================ */
190
+
191
+ @layer zc-overrides {
192
+
193
+ .dark {
194
+ /* ---- Primary scale (dark) ---- */
195
+ --color-zc-primary-50: color-mix(in srgb, #409eff 5%, #1a1a1a);
196
+ --color-zc-primary-100: color-mix(in srgb, #409eff 8%, #1a1a1a);
197
+ --color-zc-primary-200: color-mix(in srgb, #409eff 12%, #1a1a1a);
198
+ --color-zc-primary-300: color-mix(in srgb, #409eff 16%, #1a1a1a);
199
+ --color-zc-primary-400: color-mix(in srgb, #409eff 24%, #1a1a1a);
200
+ --color-zc-primary-500: #409eff;
201
+ --color-zc-primary-600: color-mix(in srgb, #409eff 85%, #ffffff);
202
+ --color-zc-primary-700: color-mix(in srgb, #409eff 70%, #ffffff);
203
+ --color-zc-primary-800: color-mix(in srgb, #409eff 55%, #ffffff);
204
+ --color-zc-primary-900: color-mix(in srgb, #409eff 40%, #ffffff);
205
+ --color-zc-primary-950: color-mix(in srgb, #409eff 30%, #ffffff);
206
+
207
+ /* ---- Success scale (dark) ---- */
208
+ --color-zc-success-50: color-mix(in srgb, #67c23a 5%, #1a1a1a);
209
+ --color-zc-success-100: color-mix(in srgb, #67c23a 8%, #1a1a1a);
210
+ --color-zc-success-200: color-mix(in srgb, #67c23a 12%, #1a1a1a);
211
+ --color-zc-success-300: color-mix(in srgb, #67c23a 16%, #1a1a1a);
212
+ --color-zc-success-400: color-mix(in srgb, #67c23a 24%, #1a1a1a);
213
+ --color-zc-success-500: #67c23a;
214
+ --color-zc-success-600: color-mix(in srgb, #67c23a 85%, #ffffff);
215
+ --color-zc-success-700: color-mix(in srgb, #67c23a 70%, #ffffff);
216
+ --color-zc-success-800: color-mix(in srgb, #67c23a 55%, #ffffff);
217
+ --color-zc-success-900: color-mix(in srgb, #67c23a 40%, #ffffff);
218
+ --color-zc-success-950: color-mix(in srgb, #67c23a 30%, #ffffff);
219
+
220
+ /* ---- Warning scale (dark) ---- */
221
+ --color-zc-warning-50: color-mix(in srgb, #e6a23c 5%, #1a1a1a);
222
+ --color-zc-warning-100: color-mix(in srgb, #e6a23c 8%, #1a1a1a);
223
+ --color-zc-warning-200: color-mix(in srgb, #e6a23c 12%, #1a1a1a);
224
+ --color-zc-warning-300: color-mix(in srgb, #e6a23c 16%, #1a1a1a);
225
+ --color-zc-warning-400: color-mix(in srgb, #e6a23c 24%, #1a1a1a);
226
+ --color-zc-warning-500: #e6a23c;
227
+ --color-zc-warning-600: color-mix(in srgb, #e6a23c 85%, #ffffff);
228
+ --color-zc-warning-700: color-mix(in srgb, #e6a23c 70%, #ffffff);
229
+ --color-zc-warning-800: color-mix(in srgb, #e6a23c 55%, #ffffff);
230
+ --color-zc-warning-900: color-mix(in srgb, #e6a23c 40%, #ffffff);
231
+ --color-zc-warning-950: color-mix(in srgb, #e6a23c 30%, #ffffff);
232
+
233
+ /* ---- Danger scale (dark) ---- */
234
+ --color-zc-danger-50: color-mix(in srgb, #f56c6c 5%, #1a1a1a);
235
+ --color-zc-danger-100: color-mix(in srgb, #f56c6c 8%, #1a1a1a);
236
+ --color-zc-danger-200: color-mix(in srgb, #f56c6c 12%, #1a1a1a);
237
+ --color-zc-danger-300: color-mix(in srgb, #f56c6c 16%, #1a1a1a);
238
+ --color-zc-danger-400: color-mix(in srgb, #f56c6c 24%, #1a1a1a);
239
+ --color-zc-danger-500: #f56c6c;
240
+ --color-zc-danger-600: color-mix(in srgb, #f56c6c 85%, #ffffff);
241
+ --color-zc-danger-700: color-mix(in srgb, #f56c6c 70%, #ffffff);
242
+ --color-zc-danger-800: color-mix(in srgb, #f56c6c 55%, #ffffff);
243
+ --color-zc-danger-900: color-mix(in srgb, #f56c6c 40%, #ffffff);
244
+ --color-zc-danger-950: color-mix(in srgb, #f56c6c 30%, #ffffff);
245
+
246
+ /* ---- Info scale (dark) ---- */
247
+ --color-zc-info-50: color-mix(in srgb, #909399 5%, #1a1a1a);
248
+ --color-zc-info-100: color-mix(in srgb, #909399 8%, #1a1a1a);
249
+ --color-zc-info-200: color-mix(in srgb, #909399 12%, #1a1a1a);
250
+ --color-zc-info-300: color-mix(in srgb, #909399 16%, #1a1a1a);
251
+ --color-zc-info-400: color-mix(in srgb, #909399 24%, #1a1a1a);
252
+ --color-zc-info-500: #909399;
253
+ --color-zc-info-600: color-mix(in srgb, #909399 85%, #ffffff);
254
+ --color-zc-info-700: color-mix(in srgb, #909399 70%, #ffffff);
255
+ --color-zc-info-800: color-mix(in srgb, #909399 55%, #ffffff);
256
+ --color-zc-info-900: color-mix(in srgb, #909399 40%, #ffffff);
257
+ --color-zc-info-950: color-mix(in srgb, #909399 30%, #ffffff);
258
+
259
+ /* ---- Text colors ---- */
260
+ --color-zc-text-primary: #e5eaf3;
261
+ --color-zc-text-regular: #cfd3dc;
262
+ --color-zc-text-secondary: #a3a6ad;
263
+ --color-zc-text-placeholder: #8d9095;
264
+
265
+ /* ---- Border colors ---- */
266
+ --color-zc-border-base: #4c4d4f;
267
+ --color-zc-border-light: #414243;
268
+ --color-zc-border-lighter: #363637;
269
+ --color-zc-border-extralight: #2b2b2c;
270
+
271
+ /* ---- Fill colors ---- */
272
+ --color-zc-fill-base: #303030;
273
+ --color-zc-fill-light: #262727;
274
+ --color-zc-fill-lighter: #1d1d1d;
275
+
276
+ /* ---- Background colors ---- */
277
+ --color-zc-bg-base: #1d1d1d;
278
+ --color-zc-bg: #1d1d1d;
279
+ --color-zc-white: #1a1a1a;
280
+
281
+ /* ---- Disabled text ---- */
282
+ --color-zc-text-disabled: #5c5e62;
283
+
284
+ /* ---- Shadow adjustments (deeper for dark mode) ---- */
285
+ --shadow-zc-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
286
+ --shadow-zc-base: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
287
+ --shadow-zc-md: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
288
+ --shadow-zc-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.6);
289
+ --shadow-zc-xl: 0 16px 48px 0 rgba(0, 0, 0, 0.7);
290
+ --shadow-zc-dark: 0 4px 12px 0 rgba(0, 0, 0, 0.8);
291
+ }
292
+
293
+ } /* end @layer zc-overrides */