@kungal/ui-tokens 1.6.3 → 1.8.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 +52 -0
  2. package/package.json +6 -2
  3. package/src/base.css +10 -2
  4. package/src/palette.generated.css +346 -0
  5. package/src/tokens.css +6 -313
package/CHANGELOG.md CHANGED
@@ -1,5 +1,57 @@
1
1
  # @kungal/ui-tokens
2
2
 
3
+ ## 1.8.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 3e821c4: feat(tokens,vue): surface-elevation system — cards & inputs pop by fill+shadow, not borders
8
+
9
+ Move from a border-defined look to an elevation scale. The page background is now
10
+ a soft neutral (light `#f5f5f7`, dark near-black `#0a0a0a`) instead of pure
11
+ white/black, so raised surfaces read as raised:
12
+
13
+ - **Card** is a raised surface — `bg-content1` (`#fff` / `#18181b`) + `shadow-kun-sm`;
14
+ border is now OFF by default (`bordered` is opt-in). It no longer shares the
15
+ page background.
16
+ - **Inputs are borderless and share the card surface**: Input, Textarea, Select,
17
+ NumberInput, TagInput, PinInput, Autocomplete, DatePicker trigger and the
18
+ Pagination field use `bg-content1` + `shadow-kun-sm` (same fill as a card, lifted
19
+ by a small shadow). The error state is a danger **ring**, not a border.
20
+ - **Floating panels lose their border** and rely on shadow + the `content1`
21
+ surface: Dropdown, Select/Autocomplete lists, ContextMenu, Popover, Tooltip,
22
+ DatePicker calendar, Modal, Drawer.
23
+ - **Placeholder** now uses a theme-adaptive `::placeholder` colour (the browser
24
+ default grey didn't follow light/dark).
25
+
26
+ Visual change only; component APIs are unchanged except `KunCard`'s `bordered`
27
+ default (true→false) and `KunTagInput`'s `variant` default (bordered→flat).
28
+
29
+ ## 1.7.0
30
+
31
+ ### Minor Changes
32
+
33
+ - 82de3b5: feat(tokens): regenerate the semantic palette in OKLCH with contrast-guaranteed on-colors
34
+
35
+ The whole semantic color system is now **generated** (scripts/gen-tokens.mjs,
36
+ OKLCH via culori) instead of hand-authored HSL. Each hue is defined once by its
37
+ OKLCH hue + a vivid `solidL`; every shade is laid on a perceptual lightness ramp
38
+ (so `-500` means the same perceived lightness for every color), and each color
39
+ ships a paired **`--color-{c}-foreground`** on-color DERIVED by measured WCAG
40
+ contrast. The generator asserts AA on every solid (fill, text) pair in BOTH light
41
+ and dark and fails the build on any regression — illegible solids can't ship
42
+ again. Adds the previously-missing `-950` shade.
43
+
44
+ What changes visually: solids keep HeroUI-style vivid fills (bright amber warning,
45
+ bright green success — no more muddy darkened `-600` fills), with white text on
46
+ the medium hues (primary/danger/default) and a refined dark tint on the bright
47
+ ones (secondary/success/warning/info). Solids are now mode-independent, so the
48
+ per-variant `dark:bg-{c}-{n}` pins are gone. **This is a visual change** to every
49
+ colored surface; the component API (color/variant names) is unchanged.
50
+
51
+ `@kungal/ui-core`: `kunSolidClasses` / `kunSolidFgClasses` / `kunSolidBgClasses`
52
+ and the Button solid/shadow rows now use `bg-{c} text-{c}-foreground`. CheckBox,
53
+ DatePicker, Switch, Carousel drop their hardcoded white/black + dark pins.
54
+
3
55
  ## 1.6.3
4
56
 
5
57
  ## 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.8.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,10 +38,18 @@
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
+
46
+ /* Placeholder text — a muted neutral that flips with the theme (the browser
47
+ * default is a fixed grey that doesn't follow light/dark). `opacity: 1` since
48
+ * the colour already carries its own muting and UA sheets dim placeholders. */
49
+ ::placeholder {
50
+ color: oklch(var(--default-400));
51
+ opacity: 1;
52
+ }
45
53
  }
46
54
 
47
55
  @layer utilities {
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: 0.9707 0.0027 286.35;
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.1448 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
- }