@kungal/ui-tokens 1.6.3 → 1.7.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 (5) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/package.json +6 -2
  3. package/src/base.css +2 -2
  4. package/src/palette.generated.css +346 -0
  5. package/src/tokens.css +6 -313
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # @kungal/ui-tokens
2
2
 
3
+ ## 1.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 82de3b5: feat(tokens): regenerate the semantic palette in OKLCH with contrast-guaranteed on-colors
8
+
9
+ The whole semantic color system is now **generated** (scripts/gen-tokens.mjs,
10
+ OKLCH via culori) instead of hand-authored HSL. Each hue is defined once by its
11
+ OKLCH hue + a vivid `solidL`; every shade is laid on a perceptual lightness ramp
12
+ (so `-500` means the same perceived lightness for every color), and each color
13
+ ships a paired **`--color-{c}-foreground`** on-color DERIVED by measured WCAG
14
+ contrast. The generator asserts AA on every solid (fill, text) pair in BOTH light
15
+ and dark and fails the build on any regression — illegible solids can't ship
16
+ again. Adds the previously-missing `-950` shade.
17
+
18
+ What changes visually: solids keep HeroUI-style vivid fills (bright amber warning,
19
+ bright green success — no more muddy darkened `-600` fills), with white text on
20
+ the medium hues (primary/danger/default) and a refined dark tint on the bright
21
+ ones (secondary/success/warning/info). Solids are now mode-independent, so the
22
+ per-variant `dark:bg-{c}-{n}` pins are gone. **This is a visual change** to every
23
+ colored surface; the component API (color/variant names) is unchanged.
24
+
25
+ `@kungal/ui-core`: `kunSolidClasses` / `kunSolidFgClasses` / `kunSolidBgClasses`
26
+ and the Button solid/shadow rows now use `bg-{c} text-{c}-foreground`. CheckBox,
27
+ DatePicker, Switch, Carousel drop their hardcoded white/black + dark pins.
28
+
3
29
  ## 1.6.3
4
30
 
5
31
  ## 1.6.2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kungal/ui-tokens",
3
- "version": "1.6.3",
3
+ "version": "1.7.0",
4
4
  "description": "KunUI design tokens — framework-agnostic Tailwind v4 theme (semantic colors, radius, z-index, animations).",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -40,9 +40,13 @@
40
40
  "peerDependencies": {
41
41
  "tailwindcss": "^4.0.0"
42
42
  },
43
+ "devDependencies": {
44
+ "culori": "^4.0.2"
45
+ },
43
46
  "scripts": {
44
47
  "build": "echo \"@kungal/ui-tokens ships CSS source, no build step\"",
45
48
  "typecheck": "echo \"@kungal/ui-tokens has no TypeScript\"",
46
- "clean": "echo \"@kungal/ui-tokens has nothing to clean\""
49
+ "clean": "echo \"@kungal/ui-tokens has nothing to clean\"",
50
+ "gen": "node scripts/gen-tokens.mjs"
47
51
  }
48
52
  }
package/src/base.css CHANGED
@@ -38,8 +38,8 @@
38
38
  * nothing sits behind the root. */
39
39
  html,
40
40
  body {
41
- background-color: hsl(var(--background));
42
- color: hsl(var(--foreground));
41
+ background-color: oklch(var(--background));
42
+ color: oklch(var(--foreground));
43
43
  min-height: 100vh;
44
44
  }
45
45
  }
package/src/palette.generated.css ADDED
@@ -0,0 +1,346 @@
1
+ /* ───────────────────────────────────────────────────────────────────────────
2
+ * AUTO-GENERATED by scripts/gen-tokens.mjs — DO NOT EDIT BY HAND.
3
+ * Edit packages/ui-tokens/scripts/gen-tokens.mjs (the HUES / ramp / accent
4
+ * policy) and rerun `pnpm --filter @kungal/ui-tokens gen`.
5
+ *
6
+ * Every solid (fill, on-color) pair below is WCAG-AA-verified in BOTH modes by
7
+ * the generator; the build fails if any pair regresses. Colors are OKLCH for
8
+ * perceptual uniformity (one shade key = one perceived lightness across hues).
9
+ * ─────────────────────────────────────────────────────────────────────────── */
10
+
11
+ @theme {
12
+ --color-background: oklch(var(--background) / var(--kun-global-opacity));
13
+ --color-foreground: oklch(var(--foreground));
14
+ --color-content1: oklch(var(--content1));
15
+ --color-content2: oklch(var(--content2));
16
+ --color-content3: oklch(var(--content3));
17
+ --color-content4: oklch(var(--content4));
18
+
19
+ --color-primary: oklch(var(--primary-accent));
20
+ --color-primary-foreground: oklch(var(--primary-on));
21
+ --color-primary-50: oklch(var(--primary-50));
22
+ --color-primary-100: oklch(var(--primary-100));
23
+ --color-primary-200: oklch(var(--primary-200));
24
+ --color-primary-300: oklch(var(--primary-300));
25
+ --color-primary-400: oklch(var(--primary-400));
26
+ --color-primary-500: oklch(var(--primary-500));
27
+ --color-primary-600: oklch(var(--primary-600));
28
+ --color-primary-700: oklch(var(--primary-700));
29
+ --color-primary-800: oklch(var(--primary-800));
30
+ --color-primary-900: oklch(var(--primary-900));
31
+ --color-primary-950: oklch(var(--primary-950));
32
+
33
+ --color-secondary: oklch(var(--secondary-accent));
34
+ --color-secondary-foreground: oklch(var(--secondary-on));
35
+ --color-secondary-50: oklch(var(--secondary-50));
36
+ --color-secondary-100: oklch(var(--secondary-100));
37
+ --color-secondary-200: oklch(var(--secondary-200));
38
+ --color-secondary-300: oklch(var(--secondary-300));
39
+ --color-secondary-400: oklch(var(--secondary-400));
40
+ --color-secondary-500: oklch(var(--secondary-500));
41
+ --color-secondary-600: oklch(var(--secondary-600));
42
+ --color-secondary-700: oklch(var(--secondary-700));
43
+ --color-secondary-800: oklch(var(--secondary-800));
44
+ --color-secondary-900: oklch(var(--secondary-900));
45
+ --color-secondary-950: oklch(var(--secondary-950));
46
+
47
+ --color-success: oklch(var(--success-accent));
48
+ --color-success-foreground: oklch(var(--success-on));
49
+ --color-success-50: oklch(var(--success-50));
50
+ --color-success-100: oklch(var(--success-100));
51
+ --color-success-200: oklch(var(--success-200));
52
+ --color-success-300: oklch(var(--success-300));
53
+ --color-success-400: oklch(var(--success-400));
54
+ --color-success-500: oklch(var(--success-500));
55
+ --color-success-600: oklch(var(--success-600));
56
+ --color-success-700: oklch(var(--success-700));
57
+ --color-success-800: oklch(var(--success-800));
58
+ --color-success-900: oklch(var(--success-900));
59
+ --color-success-950: oklch(var(--success-950));
60
+
61
+ --color-warning: oklch(var(--warning-accent));
62
+ --color-warning-foreground: oklch(var(--warning-on));
63
+ --color-warning-50: oklch(var(--warning-50));
64
+ --color-warning-100: oklch(var(--warning-100));
65
+ --color-warning-200: oklch(var(--warning-200));
66
+ --color-warning-300: oklch(var(--warning-300));
67
+ --color-warning-400: oklch(var(--warning-400));
68
+ --color-warning-500: oklch(var(--warning-500));
69
+ --color-warning-600: oklch(var(--warning-600));
70
+ --color-warning-700: oklch(var(--warning-700));
71
+ --color-warning-800: oklch(var(--warning-800));
72
+ --color-warning-900: oklch(var(--warning-900));
73
+ --color-warning-950: oklch(var(--warning-950));
74
+
75
+ --color-danger: oklch(var(--danger-accent));
76
+ --color-danger-foreground: oklch(var(--danger-on));
77
+ --color-danger-50: oklch(var(--danger-50));
78
+ --color-danger-100: oklch(var(--danger-100));
79
+ --color-danger-200: oklch(var(--danger-200));
80
+ --color-danger-300: oklch(var(--danger-300));
81
+ --color-danger-400: oklch(var(--danger-400));
82
+ --color-danger-500: oklch(var(--danger-500));
83
+ --color-danger-600: oklch(var(--danger-600));
84
+ --color-danger-700: oklch(var(--danger-700));
85
+ --color-danger-800: oklch(var(--danger-800));
86
+ --color-danger-900: oklch(var(--danger-900));
87
+ --color-danger-950: oklch(var(--danger-950));
88
+
89
+ --color-info: oklch(var(--info-accent));
90
+ --color-info-foreground: oklch(var(--info-on));
91
+ --color-info-50: oklch(var(--info-50));
92
+ --color-info-100: oklch(var(--info-100));
93
+ --color-info-200: oklch(var(--info-200));
94
+ --color-info-300: oklch(var(--info-300));
95
+ --color-info-400: oklch(var(--info-400));
96
+ --color-info-500: oklch(var(--info-500));
97
+ --color-info-600: oklch(var(--info-600));
98
+ --color-info-700: oklch(var(--info-700));
99
+ --color-info-800: oklch(var(--info-800));
100
+ --color-info-900: oklch(var(--info-900));
101
+ --color-info-950: oklch(var(--info-950));
102
+
103
+ --color-default: oklch(var(--default-accent));
104
+ --color-default-foreground: oklch(var(--default-on));
105
+ --color-default-50: oklch(var(--default-50));
106
+ --color-default-100: oklch(var(--default-100) / var(--kun-global-opacity));
107
+ --color-default-200: oklch(var(--default-200));
108
+ --color-default-300: oklch(var(--default-300));
109
+ --color-default-400: oklch(var(--default-400));
110
+ --color-default-500: oklch(var(--default-500));
111
+ --color-default-600: oklch(var(--default-600));
112
+ --color-default-700: oklch(var(--default-700));
113
+ --color-default-800: oklch(var(--default-800));
114
+ --color-default-900: oklch(var(--default-900));
115
+ --color-default-950: oklch(var(--default-950));
116
+ }
117
+
118
+ @layer base {
119
+ :root {
120
+ --background: 1 0 0;
121
+ --foreground: 0.2057 0.0132 233.66;
122
+ --content1: 1 0 0;
123
+ --content2: 0.9683 0.0014 286.37;
124
+ --content3: 0.9197 0.0041 286.32;
125
+ --content4: 0.8716 0.0056 286.28;
126
+
127
+ /* Blue */
128
+ --primary-accent: 0.57 0.2 257.9;
129
+ --primary-on: 1 0 0;
130
+ --primary-50: 0.972 0.0133 257.9;
131
+ --primary-100: 0.945 0.0264 257.9;
132
+ --primary-200: 0.892 0.0528 257.9;
133
+ --primary-300: 0.82 0.0906 257.9;
134
+ --primary-400: 0.715 0.1495 257.9;
135
+ --primary-500: 0.62 0.2 257.9;
136
+ --primary-600: 0.52 0.1917 257.9;
137
+ --primary-700: 0.44 0.1622 257.9;
138
+ --primary-800: 0.36 0.1327 257.9;
139
+ --primary-900: 0.28 0.1032 257.9;
140
+ --primary-950: 0.215 0.0792 257.9;
141
+
142
+ /* Magenta */
143
+ --secondary-accent: 0.74 0.2121 341.5;
144
+ --secondary-on: 0.2 0.03 341.5;
145
+ --secondary-50: 0.972 0.018 341.5;
146
+ --secondary-100: 0.945 0.0362 341.5;
147
+ --secondary-200: 0.892 0.0748 341.5;
148
+ --secondary-300: 0.82 0.1342 341.5;
149
+ --secondary-400: 0.715 0.2395 341.5;
150
+ --secondary-500: 0.62 0.26 341.5;
151
+ --secondary-600: 0.52 0.2244 341.5;
152
+ --secondary-700: 0.44 0.1899 341.5;
153
+ --secondary-800: 0.36 0.1554 341.5;
154
+ --secondary-900: 0.28 0.1208 341.5;
155
+ --secondary-950: 0.215 0.0928 341.5;
156
+
157
+ /* Green */
158
+ --success-accent: 0.72 0.18 150.9;
159
+ --success-on: 0.2 0.03 150.9;
160
+ --success-50: 0.972 0.0446 150.9;
161
+ --success-100: 0.945 0.0914 150.9;
162
+ --success-200: 0.892 0.18 150.9;
163
+ --success-300: 0.82 0.18 150.9;
164
+ --success-400: 0.715 0.18 150.9;
165
+ --success-500: 0.62 0.1672 150.9;
166
+ --success-600: 0.52 0.1402 150.9;
167
+ --success-700: 0.44 0.1186 150.9;
168
+ --success-800: 0.36 0.0971 150.9;
169
+ --success-900: 0.28 0.0755 150.9;
170
+ --success-950: 0.215 0.058 150.9;
171
+
172
+ /* Amber */
173
+ --warning-accent: 0.8 0.1686 72.2;
174
+ --warning-on: 0.2 0.03 72.2;
175
+ --warning-50: 0.972 0.0211 72.2;
176
+ --warning-100: 0.945 0.0421 72.2;
177
+ --warning-200: 0.892 0.0855 72.2;
178
+ --warning-300: 0.82 0.1496 72.2;
179
+ --warning-400: 0.715 0.1529 72.2;
180
+ --warning-500: 0.62 0.1326 72.2;
181
+ --warning-600: 0.52 0.1112 72.2;
182
+ --warning-700: 0.44 0.0941 72.2;
183
+ --warning-800: 0.36 0.077 72.2;
184
+ --warning-900: 0.28 0.0599 72.2;
185
+ --warning-950: 0.215 0.046 72.2;
186
+
187
+ /* Red */
188
+ --danger-accent: 0.58 0.23 11.1;
189
+ --danger-on: 1 0 0;
190
+ --danger-50: 0.972 0.0139 11.1;
191
+ --danger-100: 0.945 0.028 11.1;
192
+ --danger-200: 0.892 0.0577 11.1;
193
+ --danger-300: 0.82 0.1032 11.1;
194
+ --danger-400: 0.715 0.1833 11.1;
195
+ --danger-500: 0.62 0.23 11.1;
196
+ --danger-600: 0.52 0.2078 11.1;
197
+ --danger-700: 0.44 0.1759 11.1;
198
+ --danger-800: 0.36 0.1439 11.1;
199
+ --danger-900: 0.28 0.1119 11.1;
200
+ --danger-950: 0.215 0.0859 11.1;
201
+
202
+ /* Cyan */
203
+ --info-accent: 0.7 0.1262 218.5;
204
+ --info-on: 0.2 0.03 218.5;
205
+ --info-50: 0.972 0.0201 218.5;
206
+ --info-100: 0.945 0.0398 218.5;
207
+ --info-200: 0.892 0.0796 218.5;
208
+ --info-300: 0.82 0.1362 218.5;
209
+ --info-400: 0.715 0.1289 218.5;
210
+ --info-500: 0.62 0.1117 218.5;
211
+ --info-600: 0.52 0.0937 218.5;
212
+ --info-700: 0.44 0.0793 218.5;
213
+ --info-800: 0.36 0.0649 218.5;
214
+ --info-900: 0.28 0.0505 218.5;
215
+ --info-950: 0.215 0.0387 218.5;
216
+
217
+ /* Neutral */
218
+ --default-accent: 0.55 0.015 285.9;
219
+ --default-on: 1 0 0;
220
+ --default-50: 0.972 0.0137 285.9;
221
+ --default-100: 0.945 0.015 285.9;
222
+ --default-200: 0.892 0.015 285.9;
223
+ --default-300: 0.82 0.015 285.9;
224
+ --default-400: 0.715 0.015 285.9;
225
+ --default-500: 0.62 0.015 285.9;
226
+ --default-600: 0.52 0.015 285.9;
227
+ --default-700: 0.44 0.015 285.9;
228
+ --default-800: 0.36 0.015 285.9;
229
+ --default-900: 0.28 0.015 285.9;
230
+ --default-950: 0.215 0.015 285.9;
231
+ }
232
+
233
+ .kun-dark-mode {
234
+ --background: 0 0 0;
235
+ --foreground: 0.946 0.0018 247.84;
236
+ --content1: 0.2102 0.006 285.87;
237
+ --content2: 0.2747 0.006 286;
238
+ --content3: 0.3701 0.0113 285.84;
239
+ --content4: 0.4431 0.0141 285.81;
240
+
241
+ /* Blue */
242
+ --primary-accent: 0.57 0.2 257.9;
243
+ --primary-on: 1 0 0;
244
+ --primary-50: 0.215 0.0792 257.9;
245
+ --primary-100: 0.28 0.1032 257.9;
246
+ --primary-200: 0.36 0.1327 257.9;
247
+ --primary-300: 0.44 0.1622 257.9;
248
+ --primary-400: 0.52 0.1917 257.9;
249
+ --primary-500: 0.62 0.2 257.9;
250
+ --primary-600: 0.715 0.1495 257.9;
251
+ --primary-700: 0.82 0.0906 257.9;
252
+ --primary-800: 0.892 0.0528 257.9;
253
+ --primary-900: 0.945 0.0264 257.9;
254
+ --primary-950: 0.972 0.0133 257.9;
255
+
256
+ /* Magenta */
257
+ --secondary-accent: 0.74 0.2121 341.5;
258
+ --secondary-on: 0.2 0.03 341.5;
259
+ --secondary-50: 0.215 0.0928 341.5;
260
+ --secondary-100: 0.28 0.1208 341.5;
261
+ --secondary-200: 0.36 0.1554 341.5;
262
+ --secondary-300: 0.44 0.1899 341.5;
263
+ --secondary-400: 0.52 0.2244 341.5;
264
+ --secondary-500: 0.62 0.26 341.5;
265
+ --secondary-600: 0.715 0.2395 341.5;
266
+ --secondary-700: 0.82 0.1342 341.5;
267
+ --secondary-800: 0.892 0.0748 341.5;
268
+ --secondary-900: 0.945 0.0362 341.5;
269
+ --secondary-950: 0.972 0.018 341.5;
270
+
271
+ /* Green */
272
+ --success-accent: 0.72 0.18 150.9;
273
+ --success-on: 0.2 0.03 150.9;
274
+ --success-50: 0.215 0.058 150.9;
275
+ --success-100: 0.28 0.0755 150.9;
276
+ --success-200: 0.36 0.0971 150.9;
277
+ --success-300: 0.44 0.1186 150.9;
278
+ --success-400: 0.52 0.1402 150.9;
279
+ --success-500: 0.62 0.1672 150.9;
280
+ --success-600: 0.715 0.18 150.9;
281
+ --success-700: 0.82 0.18 150.9;
282
+ --success-800: 0.892 0.18 150.9;
283
+ --success-900: 0.945 0.0914 150.9;
284
+ --success-950: 0.972 0.0446 150.9;
285
+
286
+ /* Amber */
287
+ --warning-accent: 0.8 0.1686 72.2;
288
+ --warning-on: 0.2 0.03 72.2;
289
+ --warning-50: 0.215 0.046 72.2;
290
+ --warning-100: 0.28 0.0599 72.2;
291
+ --warning-200: 0.36 0.077 72.2;
292
+ --warning-300: 0.44 0.0941 72.2;
293
+ --warning-400: 0.52 0.1112 72.2;
294
+ --warning-500: 0.62 0.1326 72.2;
295
+ --warning-600: 0.715 0.1529 72.2;
296
+ --warning-700: 0.82 0.1496 72.2;
297
+ --warning-800: 0.892 0.0855 72.2;
298
+ --warning-900: 0.945 0.0421 72.2;
299
+ --warning-950: 0.972 0.0211 72.2;
300
+
301
+ /* Red */
302
+ --danger-accent: 0.58 0.23 11.1;
303
+ --danger-on: 1 0 0;
304
+ --danger-50: 0.215 0.0859 11.1;
305
+ --danger-100: 0.28 0.1119 11.1;
306
+ --danger-200: 0.36 0.1439 11.1;
307
+ --danger-300: 0.44 0.1759 11.1;
308
+ --danger-400: 0.52 0.2078 11.1;
309
+ --danger-500: 0.62 0.23 11.1;
310
+ --danger-600: 0.715 0.1833 11.1;
311
+ --danger-700: 0.82 0.1032 11.1;
312
+ --danger-800: 0.892 0.0577 11.1;
313
+ --danger-900: 0.945 0.028 11.1;
314
+ --danger-950: 0.972 0.0139 11.1;
315
+
316
+ /* Cyan */
317
+ --info-accent: 0.7 0.1262 218.5;
318
+ --info-on: 0.2 0.03 218.5;
319
+ --info-50: 0.215 0.0387 218.5;
320
+ --info-100: 0.28 0.0505 218.5;
321
+ --info-200: 0.36 0.0649 218.5;
322
+ --info-300: 0.44 0.0793 218.5;
323
+ --info-400: 0.52 0.0937 218.5;
324
+ --info-500: 0.62 0.1117 218.5;
325
+ --info-600: 0.715 0.1289 218.5;
326
+ --info-700: 0.82 0.1362 218.5;
327
+ --info-800: 0.892 0.0796 218.5;
328
+ --info-900: 0.945 0.0398 218.5;
329
+ --info-950: 0.972 0.0201 218.5;
330
+
331
+ /* Neutral */
332
+ --default-accent: 0.55 0.015 285.9;
333
+ --default-on: 1 0 0;
334
+ --default-50: 0.215 0.015 285.9;
335
+ --default-100: 0.28 0.015 285.9;
336
+ --default-200: 0.36 0.015 285.9;
337
+ --default-300: 0.44 0.015 285.9;
338
+ --default-400: 0.52 0.015 285.9;
339
+ --default-500: 0.62 0.015 285.9;
340
+ --default-600: 0.715 0.015 285.9;
341
+ --default-700: 0.82 0.015 285.9;
342
+ --default-800: 0.892 0.015 285.9;
343
+ --default-900: 0.945 0.015 285.9;
344
+ --default-950: 0.972 0.0137 285.9;
345
+ }
346
+ }
package/src/tokens.css CHANGED
@@ -22,6 +22,10 @@
22
22
 
23
23
  @custom-variant dark (&:is(.kun-dark-mode *));
24
24
 
25
+ /* Semantic color palette — generated (OKLCH, contrast-verified). See
26
+ * scripts/gen-tokens.mjs. Imported here so its @theme + @layer base merge in. */
27
+ @import './palette.generated.css';
28
+
25
29
  :root {
26
30
  /* Global alpha applied to "glassy" semantic surfaces (background +
27
31
  * default-100). Lower = more see-through. Apps may override in :root. */
@@ -38,99 +42,6 @@
38
42
  --color-black: #000;
39
43
  --color-white: #fff;
40
44
 
41
- --color-background: hsla(var(--background), var(--kun-global-opacity));
42
- --color-foreground: hsl(var(--foreground));
43
- --color-content1: hsl(var(--content1));
44
- --color-content2: hsl(var(--content2));
45
- --color-content3: hsl(var(--content3));
46
- --color-content4: hsl(var(--content4));
47
-
48
- --color-default: hsla(var(--default-500));
49
- --color-primary: hsl(var(--primary-500));
50
- --color-secondary: hsl(var(--secondary-500));
51
- --color-success: hsl(var(--success-500));
52
- --color-warning: hsl(var(--warning-500));
53
- --color-danger: hsl(var(--danger-500));
54
- --color-info: hsl(var(--info-500));
55
-
56
- --color-default-50: hsla(var(--default-50));
57
- --color-default-100: hsla(var(--default-100), var(--kun-global-opacity));
58
- --color-default-200: hsla(var(--default-200));
59
- --color-default-300: hsla(var(--default-300));
60
- --color-default-400: hsla(var(--default-400));
61
- --color-default-500: hsla(var(--default-500));
62
- --color-default-600: hsla(var(--default-600));
63
- --color-default-700: hsla(var(--default-700));
64
- --color-default-800: hsla(var(--default-800));
65
- --color-default-900: hsla(var(--default-900));
66
- --color-default-950: hsla(var(--default-950));
67
- --color-primary-50: hsl(var(--primary-50));
68
- --color-primary-100: hsl(var(--primary-100));
69
- --color-primary-200: hsl(var(--primary-200));
70
- --color-primary-300: hsl(var(--primary-300));
71
- --color-primary-400: hsl(var(--primary-400));
72
- --color-primary-500: hsl(var(--primary-500));
73
- --color-primary-600: hsl(var(--primary-600));
74
- --color-primary-700: hsl(var(--primary-700));
75
- --color-primary-800: hsl(var(--primary-800));
76
- --color-primary-900: hsl(var(--primary-900));
77
- --color-primary-950: hsl(var(--primary-950));
78
- --color-secondary-50: hsl(var(--secondary-50));
79
- --color-secondary-100: hsl(var(--secondary-100));
80
- --color-secondary-200: hsl(var(--secondary-200));
81
- --color-secondary-300: hsl(var(--secondary-300));
82
- --color-secondary-400: hsl(var(--secondary-400));
83
- --color-secondary-500: hsl(var(--secondary-500));
84
- --color-secondary-600: hsl(var(--secondary-600));
85
- --color-secondary-700: hsl(var(--secondary-700));
86
- --color-secondary-800: hsl(var(--secondary-800));
87
- --color-secondary-900: hsl(var(--secondary-900));
88
- --color-secondary-950: hsl(var(--secondary-950));
89
- --color-success-50: hsl(var(--success-50));
90
- --color-success-100: hsl(var(--success-100));
91
- --color-success-200: hsl(var(--success-200));
92
- --color-success-300: hsl(var(--success-300));
93
- --color-success-400: hsl(var(--success-400));
94
- --color-success-500: hsl(var(--success-500));
95
- --color-success-600: hsl(var(--success-600));
96
- --color-success-700: hsl(var(--success-700));
97
- --color-success-800: hsl(var(--success-800));
98
- --color-success-900: hsl(var(--success-900));
99
- --color-success-950: hsl(var(--success-950));
100
- --color-warning-50: hsl(var(--warning-50));
101
- --color-warning-100: hsl(var(--warning-100));
102
- --color-warning-200: hsl(var(--warning-200));
103
- --color-warning-300: hsl(var(--warning-300));
104
- --color-warning-400: hsl(var(--warning-400));
105
- --color-warning-500: hsl(var(--warning-500));
106
- --color-warning-600: hsl(var(--warning-600));
107
- --color-warning-700: hsl(var(--warning-700));
108
- --color-warning-800: hsl(var(--warning-800));
109
- --color-warning-900: hsl(var(--warning-900));
110
- --color-warning-950: hsl(var(--warning-950));
111
- --color-danger-50: hsl(var(--danger-50));
112
- --color-danger-100: hsl(var(--danger-100));
113
- --color-danger-200: hsl(var(--danger-200));
114
- --color-danger-300: hsl(var(--danger-300));
115
- --color-danger-400: hsl(var(--danger-400));
116
- --color-danger-500: hsl(var(--danger-500));
117
- --color-danger-600: hsl(var(--danger-600));
118
- --color-danger-700: hsl(var(--danger-700));
119
- --color-danger-800: hsl(var(--danger-800));
120
- --color-danger-900: hsl(var(--danger-900));
121
- --color-danger-950: hsl(var(--danger-950));
122
- --color-info-50: hsl(var(--info-50));
123
- --color-info-100: hsl(var(--info-100));
124
- --color-info-200: hsl(var(--info-200));
125
- --color-info-300: hsl(var(--info-300));
126
- --color-info-400: hsl(var(--info-400));
127
- --color-info-500: hsl(var(--info-500));
128
- --color-info-600: hsl(var(--info-600));
129
- --color-info-700: hsl(var(--info-700));
130
- --color-info-800: hsl(var(--info-800));
131
- --color-info-900: hsl(var(--info-900));
132
- --color-info-950: hsl(var(--info-950));
133
-
134
45
  /* Border radius — 5 buckets every KunUI component references.
135
46
  *
136
47
  * Each scalable bucket multiplies its base by --kun-radius-scale (default 1),
@@ -396,10 +307,10 @@
396
307
  * / `focus:border-*` still win (apply `border-kun` only in the non-error branch
397
308
  * so two plain border-color utilities never fight over source order). */
398
309
  :root {
399
- --color-kun-border: hsl(var(--default-200));
310
+ --color-kun-border: oklch(var(--default-200));
400
311
  }
401
312
  @utility border-kun {
402
- border-color: var(--color-kun-border, hsl(var(--default-200)));
313
+ border-color: var(--color-kun-border, oklch(var(--default-200)));
403
314
  }
404
315
 
405
316
  /* Duration utilities bound to the motion scale, so component transitions route
@@ -445,221 +356,3 @@
445
356
  --kun-dur-exit: 180ms;
446
357
  }
447
358
 
448
- @layer base {
449
- :root {
450
- /* Content color */
451
- --background: 0, 0%, 100%;
452
- --foreground: 202, 24%, 9%;
453
-
454
- --content1: 0, 0%, 100%;
455
- --content2: 240, 5%, 96%;
456
- --content3: 240, 6%, 90%;
457
- --content4: 240, 5%, 84%;
458
-
459
- /* Primary colors - Blue */
460
- --primary-50: 213, 92%, 95%;
461
- --primary-100: 212, 92%, 90%;
462
- --primary-200: 212, 92%, 79%;
463
- --primary-300: 212, 92%, 69%;
464
- --primary-400: 212, 92%, 58%;
465
- --primary-500: 212, 100%, 47%;
466
- --primary-600: 212, 100%, 38%;
467
- --primary-700: 212, 100%, 29%;
468
- --primary-800: 212, 100%, 19%;
469
- --primary-900: 212, 100%, 10%;
470
-
471
- /* Info colors - Cyan */
472
- --info-50: 192, 100%, 97%;
473
- --info-100: 190, 92%, 95%;
474
- --info-200: 189, 95%, 92%;
475
- --info-300: 189, 94%, 88%;
476
- --info-400: 190, 96%, 82%;
477
- --info-500: 190, 95%, 74%;
478
- --info-600: 190, 95%, 44%;
479
- --info-700: 191, 92%, 42%;
480
- --info-800: 192, 85%, 36%;
481
- --info-900: 192, 87%, 15%;
482
-
483
- /* Success colors - Green */
484
- --success-50: 147, 64%, 95%;
485
- --success-100: 146, 61%, 89%;
486
- --success-200: 146, 62%, 77%;
487
- --success-300: 146, 63%, 66%;
488
- --success-400: 146, 62%, 55%;
489
- --success-500: 146, 79%, 44%;
490
- --success-600: 146, 80%, 35%;
491
- --success-700: 146, 79%, 26%;
492
- --success-800: 146, 80%, 17%;
493
- --success-900: 146, 78%, 9%;
494
-
495
- /* Secondary colors - Pink */
496
- --secondary-50: 317, 100%, 96%;
497
- --secondary-100: 317, 100%, 93%;
498
- --secondary-200: 317, 100%, 86%;
499
- --secondary-300: 317, 100%, 79%;
500
- --secondary-400: 317, 100%, 72%;
501
- --secondary-500: 317, 100%, 65%;
502
- --secondary-600: 317, 58%, 52%;
503
- --secondary-700: 317, 53%, 39%;
504
- --secondary-800: 317, 53%, 26%;
505
- --secondary-900: 317, 52%, 13%;
506
-
507
- /* Default colors - Purple */
508
- --default-50: 270, 62%, 95%;
509
- --default-100: 270, 59%, 89%;
510
- --default-200: 270, 59%, 79%;
511
- --default-300: 270, 59%, 68%;
512
- --default-400: 270, 59%, 58%;
513
- --default-500: 270, 67%, 47%;
514
- --default-600: 270, 67%, 38%;
515
- --default-700: 270, 67%, 28%;
516
- --default-800: 270, 67%, 19%;
517
- --default-900: 270, 67%, 9%;
518
-
519
- /* Danger colors - Red */
520
- --danger-50: 339, 92%, 95%;
521
- --danger-100: 340, 92%, 90%;
522
- --danger-200: 339, 90%, 80%;
523
- --danger-300: 339, 91%, 71%;
524
- --danger-400: 339, 90%, 61%;
525
- --danger-500: 339, 90%, 51%;
526
- --danger-600: 339, 87%, 41%;
527
- --danger-700: 339, 86%, 31%;
528
- --danger-800: 339, 87%, 20%;
529
- --danger-900: 340, 85%, 10%;
530
-
531
- /* Warning colors - Yellow */
532
- --warning-50: 55, 92%, 95%;
533
- --warning-100: 37, 91%, 91%;
534
- --warning-200: 37, 91%, 82%;
535
- --warning-300: 37, 91%, 73%;
536
- --warning-400: 37, 91%, 64%;
537
- --warning-500: 37, 91%, 55%;
538
- --warning-600: 37, 74%, 44%;
539
- --warning-700: 37, 74%, 33%;
540
- --warning-800: 37, 75%, 22%;
541
- --warning-900: 37, 75%, 11%;
542
-
543
- /* Default colors - Zinc (overrides the purple block above; matches
544
- * the source layer, where the zinc scale is the effective default) */
545
- --default-50: 0, 0%, 98%;
546
- --default-100: 240, 5%, 96%;
547
- --default-200: 240, 6%, 90%;
548
- --default-300: 240, 5%, 84%;
549
- --default-400: 240, 5%, 65%;
550
- --default-500: 240, 4%, 46%;
551
- --default-600: 240, 5%, 34%;
552
- --default-700: 240, 5%, 26%;
553
- --default-800: 240, 4%, 16%;
554
- --default-900: 240, 6%, 10%;
555
-
556
- /* Radius */
557
- --radius: 0.5rem;
558
- }
559
-
560
- .kun-dark-mode {
561
- /* Content color */
562
- --background: 0, 0%, 0%;
563
- --foreground: 210, 6%, 93%;
564
- --content1: 240, 6%, 10%;
565
- --content2: 240, 4%, 16%;
566
- --content3: 240, 5%, 26%;
567
- --content4: 240, 5%, 34%;
568
-
569
- /* Primary colors - Blue */
570
- --primary-50: 212, 100%, 10%;
571
- --primary-100: 212, 100%, 19%;
572
- --primary-200: 212, 100%, 29%;
573
- --primary-300: 212, 100%, 38%;
574
- --primary-400: 212, 100%, 47%;
575
- --primary-500: 212, 92%, 58%;
576
- --primary-600: 212, 92%, 69%;
577
- --primary-700: 212, 92%, 79%;
578
- --primary-800: 212, 92%, 90%;
579
- --primary-900: 213, 92%, 95%;
580
-
581
- /* Info colors - Cyan */
582
- --info-50: 192, 87%, 15%;
583
- --info-100: 192, 85%, 36%;
584
- --info-200: 191, 92%, 42%;
585
- --info-300: 190, 95%, 44%;
586
- --info-400: 190, 95%, 74%;
587
- --info-500: 190, 96%, 82%;
588
- --info-600: 189, 94%, 88%;
589
- --info-700: 189, 95%, 92%;
590
- --info-800: 190, 92%, 95%;
591
- --info-900: 192, 100%, 97%;
592
-
593
- /* Success colors - Green */
594
- --success-50: 146, 78%, 9%;
595
- --success-100: 146, 80%, 17%;
596
- --success-200: 146, 79%, 26%;
597
- --success-300: 146, 80%, 35%;
598
- --success-400: 146, 79%, 44%;
599
- --success-500: 146, 62%, 55%;
600
- --success-600: 146, 63%, 66%;
601
- --success-700: 146, 62%, 77%;
602
- --success-800: 146, 61%, 89%;
603
- --success-900: 147, 64%, 95%;
604
-
605
- /* Secondary colors - Pink */
606
- --secondary-50: 317, 52%, 13%;
607
- --secondary-100: 317, 53%, 26%;
608
- --secondary-200: 317, 53%, 39%;
609
- --secondary-300: 317, 58%, 52%;
610
- --secondary-400: 317, 100%, 65%;
611
- --secondary-500: 317, 100%, 72%;
612
- --secondary-600: 317, 100%, 79%;
613
- --secondary-700: 317, 100%, 86%;
614
- --secondary-800: 317, 100%, 93%;
615
- --secondary-900: 317, 100%, 96%;
616
-
617
- /* Default colors - Purple */
618
- --default-50: 270, 67%, 9%;
619
- --default-100: 270, 67%, 19%;
620
- --default-200: 270, 67%, 28%;
621
- --default-300: 270, 67%, 38%;
622
- --default-400: 270, 67%, 47%;
623
- --default-500: 270, 59%, 58%;
624
- --default-600: 270, 59%, 68%;
625
- --default-700: 270, 59%, 79%;
626
- --default-800: 270, 59%, 89%;
627
- --default-900: 270, 62%, 95%;
628
-
629
- /* Danger colors - Red */
630
- --danger-50: 340, 85%, 10%;
631
- --danger-100: 339, 87%, 20%;
632
- --danger-200: 339, 86%, 31%;
633
- --danger-300: 339, 87%, 41%;
634
- --danger-400: 339, 90%, 51%;
635
- --danger-500: 339, 90%, 61%;
636
- --danger-600: 339, 91%, 71%;
637
- --danger-700: 339, 90%, 80%;
638
- --danger-800: 340, 92%, 90%;
639
- --danger-900: 339, 92%, 95%;
640
-
641
- /* Warning colors - Yellow */
642
- --warning-50: 37, 75%, 11%;
643
- --warning-100: 37, 75%, 22%;
644
- --warning-200: 37, 74%, 33%;
645
- --warning-300: 37, 74%, 44%;
646
- --warning-400: 37, 91%, 55%;
647
- --warning-500: 37, 91%, 64%;
648
- --warning-600: 37, 91%, 73%;
649
- --warning-700: 37, 91%, 82%;
650
- --warning-800: 37, 91%, 91%;
651
- --warning-900: 55, 92%, 95%;
652
-
653
- /* Default colors - Zinc */
654
- --default-50: 240, 6%, 10%;
655
- --default-100: 240, 4%, 16%;
656
- --default-200: 240, 5%, 26%;
657
- --default-300: 240, 5%, 34%;
658
- --default-400: 240, 4%, 46%;
659
- --default-500: 240, 5%, 65%;
660
- --default-600: 240, 5%, 84%;
661
- --default-700: 240, 6%, 90%;
662
- --default-800: 240, 5%, 96%;
663
- --default-900: 0, 0%, 98%;
664
- }
665
- }