@leonio/kern-ux-tailwind 0.0.0-stage → 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 (6) hide show
  1. package/LICENSE.md +287 -0
  2. package/README.md +97 -2
  3. package/package.json +71 -5
  4. package/src/remap.css +368 -0
  5. package/src/theme.css +193 -0
  6. package/src/tokens.css +345 -0
package/src/remap.css ADDED
@@ -0,0 +1,368 @@
1
+ /*
2
+ * Generated by scripts/generate.ts from the installed @kern-ux/native and
3
+ * tailwindcss. Don't edit it by hand: run `npm run tokens`.
4
+ *
5
+ * Points Tailwind's default palette, radii and shadows at KERN, for
6
+ * components that hard-code them (bg-indigo-600, rounded-lg, shadow-sm).
7
+ * Each Tailwind step takes the step of its KERN family with the nearest
8
+ * OKLCH lightness, so a pair like text-gray-500 on bg-gray-50 keeps about
9
+ * the contrast its author chose.
10
+ */
11
+ @theme inline {
12
+ /* red → red */
13
+ --color-red-50: var(--kern-color-red-025);
14
+ --color-red-100: var(--kern-color-red-050);
15
+ --color-red-200: var(--kern-color-red-150);
16
+ --color-red-300: var(--kern-color-red-250);
17
+ --color-red-400: var(--kern-color-red-400);
18
+ --color-red-500: var(--kern-color-red-450);
19
+ --color-red-600: var(--kern-color-red-500);
20
+ --color-red-700: var(--kern-color-red-650);
21
+ --color-red-800: var(--kern-color-red-700);
22
+ --color-red-900: var(--kern-color-red-750);
23
+ --color-red-950: var(--kern-color-red-900);
24
+
25
+ /* orange → orange */
26
+ --color-orange-50: var(--kern-color-orange-025);
27
+ --color-orange-100: var(--kern-color-orange-025);
28
+ --color-orange-200: var(--kern-color-orange-100);
29
+ --color-orange-300: var(--kern-color-orange-200);
30
+ --color-orange-400: var(--kern-color-orange-300);
31
+ --color-orange-500: var(--kern-color-orange-350);
32
+ --color-orange-600: var(--kern-color-orange-450);
33
+ --color-orange-700: var(--kern-color-orange-550);
34
+ --color-orange-800: var(--kern-color-orange-650);
35
+ --color-orange-900: var(--kern-color-orange-700);
36
+ --color-orange-950: var(--kern-color-orange-900);
37
+
38
+ /* amber → orange */
39
+ --color-amber-50: var(--kern-color-orange-025);
40
+ --color-amber-100: var(--kern-color-orange-025);
41
+ --color-amber-200: var(--kern-color-orange-100);
42
+ --color-amber-300: var(--kern-color-orange-150);
43
+ --color-amber-400: var(--kern-color-orange-200);
44
+ --color-amber-500: var(--kern-color-orange-300);
45
+ --color-amber-600: var(--kern-color-orange-400);
46
+ --color-amber-700: var(--kern-color-orange-550);
47
+ --color-amber-800: var(--kern-color-orange-650);
48
+ --color-amber-900: var(--kern-color-orange-700);
49
+ --color-amber-950: var(--kern-color-orange-850);
50
+
51
+ /* yellow → yellow */
52
+ --color-yellow-50: var(--kern-color-yellow-025);
53
+ --color-yellow-100: var(--kern-color-yellow-025);
54
+ --color-yellow-200: var(--kern-color-yellow-050);
55
+ --color-yellow-300: var(--kern-color-yellow-100);
56
+ --color-yellow-400: var(--kern-color-yellow-150);
57
+ --color-yellow-500: var(--kern-color-yellow-250);
58
+ --color-yellow-600: var(--kern-color-yellow-400);
59
+ --color-yellow-700: var(--kern-color-yellow-500);
60
+ --color-yellow-800: var(--kern-color-yellow-650);
61
+ --color-yellow-900: var(--kern-color-yellow-700);
62
+ --color-yellow-950: var(--kern-color-yellow-850);
63
+
64
+ /* lime → limette */
65
+ --color-lime-50: var(--kern-color-limette-025);
66
+ --color-lime-100: var(--kern-color-limette-025);
67
+ --color-lime-200: var(--kern-color-limette-050);
68
+ --color-lime-300: var(--kern-color-limette-100);
69
+ --color-lime-400: var(--kern-color-limette-150);
70
+ --color-lime-500: var(--kern-color-limette-250);
71
+ --color-lime-600: var(--kern-color-limette-400);
72
+ --color-lime-700: var(--kern-color-limette-550);
73
+ --color-lime-800: var(--kern-color-limette-650);
74
+ --color-lime-900: var(--kern-color-limette-700);
75
+ --color-lime-950: var(--kern-color-limette-850);
76
+
77
+ /* green → green */
78
+ --color-green-50: var(--kern-color-green-025);
79
+ --color-green-100: var(--kern-color-green-025);
80
+ --color-green-200: var(--kern-color-green-050);
81
+ --color-green-300: var(--kern-color-green-150);
82
+ --color-green-400: var(--kern-color-green-200);
83
+ --color-green-500: var(--kern-color-green-300);
84
+ --color-green-600: var(--kern-color-green-450);
85
+ --color-green-700: var(--kern-color-green-550);
86
+ --color-green-800: var(--kern-color-green-650);
87
+ --color-green-900: var(--kern-color-green-700);
88
+ --color-green-950: var(--kern-color-green-850);
89
+
90
+ /* emerald → turquois */
91
+ --color-emerald-50: var(--kern-color-turquois-025);
92
+ --color-emerald-100: var(--kern-color-turquois-025);
93
+ --color-emerald-200: var(--kern-color-turquois-100);
94
+ --color-emerald-300: var(--kern-color-turquois-150);
95
+ --color-emerald-400: var(--kern-color-turquois-250);
96
+ --color-emerald-500: var(--kern-color-turquois-350);
97
+ --color-emerald-600: var(--kern-color-turquois-450);
98
+ --color-emerald-700: var(--kern-color-turquois-550);
99
+ --color-emerald-800: var(--kern-color-turquois-650);
100
+ --color-emerald-900: var(--kern-color-turquois-750);
101
+ --color-emerald-950: var(--kern-color-turquois-900);
102
+
103
+ /* teal → turquois */
104
+ --color-teal-50: var(--kern-color-turquois-025);
105
+ --color-teal-100: var(--kern-color-turquois-025);
106
+ --color-teal-200: var(--kern-color-turquois-100);
107
+ --color-teal-300: var(--kern-color-turquois-150);
108
+ --color-teal-400: var(--kern-color-turquois-250);
109
+ --color-teal-500: var(--kern-color-turquois-350);
110
+ --color-teal-600: var(--kern-color-turquois-450);
111
+ --color-teal-700: var(--kern-color-turquois-550);
112
+ --color-teal-800: var(--kern-color-turquois-650);
113
+ --color-teal-900: var(--kern-color-turquois-750);
114
+ --color-teal-950: var(--kern-color-turquois-850);
115
+
116
+ /* cyan → lightblue */
117
+ --color-cyan-50: var(--kern-color-lightblue-025);
118
+ --color-cyan-100: var(--kern-color-lightblue-025);
119
+ --color-cyan-200: var(--kern-color-lightblue-100);
120
+ --color-cyan-300: var(--kern-color-lightblue-150);
121
+ --color-cyan-400: var(--kern-color-lightblue-250);
122
+ --color-cyan-500: var(--kern-color-lightblue-350);
123
+ --color-cyan-600: var(--kern-color-lightblue-450);
124
+ --color-cyan-700: var(--kern-color-lightblue-550);
125
+ --color-cyan-800: var(--kern-color-lightblue-650);
126
+ --color-cyan-900: var(--kern-color-lightblue-700);
127
+ --color-cyan-950: var(--kern-color-lightblue-850);
128
+
129
+ /* sky → lightblue */
130
+ --color-sky-50: var(--kern-color-lightblue-025);
131
+ --color-sky-100: var(--kern-color-lightblue-025);
132
+ --color-sky-200: var(--kern-color-lightblue-100);
133
+ --color-sky-300: var(--kern-color-lightblue-200);
134
+ --color-sky-400: var(--kern-color-lightblue-300);
135
+ --color-sky-500: var(--kern-color-lightblue-350);
136
+ --color-sky-600: var(--kern-color-lightblue-500);
137
+ --color-sky-700: var(--kern-color-lightblue-600);
138
+ --color-sky-800: var(--kern-color-lightblue-650);
139
+ --color-sky-900: var(--kern-color-lightblue-750);
140
+ --color-sky-950: var(--kern-color-lightblue-850);
141
+
142
+ /* blue → darkblue */
143
+ --color-blue-50: var(--kern-color-darkblue-025);
144
+ --color-blue-100: var(--kern-color-darkblue-050);
145
+ --color-blue-200: var(--kern-color-darkblue-150);
146
+ --color-blue-300: var(--kern-color-darkblue-200);
147
+ --color-blue-400: var(--kern-color-darkblue-350);
148
+ --color-blue-500: var(--kern-color-darkblue-450);
149
+ --color-blue-600: var(--kern-color-darkblue-550);
150
+ --color-blue-700: var(--kern-color-darkblue-650);
151
+ --color-blue-800: var(--kern-color-darkblue-700);
152
+ --color-blue-900: var(--kern-color-darkblue-750);
153
+ --color-blue-950: var(--kern-color-darkblue-900);
154
+
155
+ /* indigo → darkblue */
156
+ --color-indigo-50: var(--kern-color-darkblue-025);
157
+ --color-indigo-100: var(--kern-color-darkblue-050);
158
+ --color-indigo-200: var(--kern-color-darkblue-150);
159
+ --color-indigo-300: var(--kern-color-darkblue-250);
160
+ --color-indigo-400: var(--kern-color-darkblue-400);
161
+ --color-indigo-500: var(--kern-color-darkblue-500);
162
+ --color-indigo-600: var(--kern-color-darkblue-600);
163
+ --color-indigo-700: var(--kern-color-darkblue-650);
164
+ --color-indigo-800: var(--kern-color-darkblue-750);
165
+ --color-indigo-900: var(--kern-color-darkblue-800);
166
+ --color-indigo-950: var(--kern-color-darkblue-900);
167
+
168
+ /* violet → violet */
169
+ --color-violet-50: var(--kern-color-violet-025);
170
+ --color-violet-100: var(--kern-color-violet-050);
171
+ --color-violet-200: var(--kern-color-violet-100);
172
+ --color-violet-300: var(--kern-color-violet-200);
173
+ --color-violet-400: var(--kern-color-violet-400);
174
+ --color-violet-500: var(--kern-color-violet-500);
175
+ --color-violet-600: var(--kern-color-violet-600);
176
+ --color-violet-700: var(--kern-color-violet-650);
177
+ --color-violet-800: var(--kern-color-violet-700);
178
+ --color-violet-900: var(--kern-color-violet-800);
179
+ --color-violet-950: var(--kern-color-violet-900);
180
+
181
+ /* purple → violet */
182
+ --color-purple-50: var(--kern-color-violet-025);
183
+ --color-purple-100: var(--kern-color-violet-050);
184
+ --color-purple-200: var(--kern-color-violet-100);
185
+ --color-purple-300: var(--kern-color-violet-200);
186
+ --color-purple-400: var(--kern-color-violet-350);
187
+ --color-purple-500: var(--kern-color-violet-450);
188
+ --color-purple-600: var(--kern-color-violet-550);
189
+ --color-purple-700: var(--kern-color-violet-650);
190
+ --color-purple-800: var(--kern-color-violet-700);
191
+ --color-purple-900: var(--kern-color-violet-800);
192
+ --color-purple-950: var(--kern-color-violet-850);
193
+
194
+ /* fuchsia → violet */
195
+ --color-fuchsia-50: var(--kern-color-violet-025);
196
+ --color-fuchsia-100: var(--kern-color-violet-050);
197
+ --color-fuchsia-200: var(--kern-color-violet-100);
198
+ --color-fuchsia-300: var(--kern-color-violet-200);
199
+ --color-fuchsia-400: var(--kern-color-violet-350);
200
+ --color-fuchsia-500: var(--kern-color-violet-450);
201
+ --color-fuchsia-600: var(--kern-color-violet-500);
202
+ --color-fuchsia-700: var(--kern-color-violet-600);
203
+ --color-fuchsia-800: var(--kern-color-violet-700);
204
+ --color-fuchsia-900: var(--kern-color-violet-750);
205
+ --color-fuchsia-950: var(--kern-color-violet-850);
206
+
207
+ /* pink → red */
208
+ --color-pink-50: var(--kern-color-red-025);
209
+ --color-pink-100: var(--kern-color-red-050);
210
+ --color-pink-200: var(--kern-color-red-100);
211
+ --color-pink-300: var(--kern-color-red-200);
212
+ --color-pink-400: var(--kern-color-red-350);
213
+ --color-pink-500: var(--kern-color-red-450);
214
+ --color-pink-600: var(--kern-color-red-500);
215
+ --color-pink-700: var(--kern-color-red-600);
216
+ --color-pink-800: var(--kern-color-red-700);
217
+ --color-pink-900: var(--kern-color-red-750);
218
+ --color-pink-950: var(--kern-color-red-900);
219
+
220
+ /* rose → red */
221
+ --color-rose-50: var(--kern-color-red-025);
222
+ --color-rose-100: var(--kern-color-red-050);
223
+ --color-rose-200: var(--kern-color-red-150);
224
+ --color-rose-300: var(--kern-color-red-200);
225
+ --color-rose-400: var(--kern-color-red-350);
226
+ --color-rose-500: var(--kern-color-red-450);
227
+ --color-rose-600: var(--kern-color-red-500);
228
+ --color-rose-700: var(--kern-color-red-600);
229
+ --color-rose-800: var(--kern-color-red-700);
230
+ --color-rose-900: var(--kern-color-red-750);
231
+ --color-rose-950: var(--kern-color-red-900);
232
+
233
+ /* slate → neutral */
234
+ --color-slate-50: var(--kern-color-neutral-025);
235
+ --color-slate-100: var(--kern-color-neutral-025);
236
+ --color-slate-200: var(--kern-color-neutral-050);
237
+ --color-slate-300: var(--kern-color-neutral-150);
238
+ --color-slate-400: var(--kern-color-neutral-350);
239
+ --color-slate-500: var(--kern-color-neutral-500);
240
+ --color-slate-600: var(--kern-color-neutral-650);
241
+ --color-slate-700: var(--kern-color-neutral-750);
242
+ --color-slate-800: var(--kern-color-neutral-850);
243
+ --color-slate-900: var(--kern-color-neutral-950);
244
+ --color-slate-950: var(--kern-color-neutral-950);
245
+
246
+ /* gray → neutral */
247
+ --color-gray-50: var(--kern-color-neutral-025);
248
+ --color-gray-100: var(--kern-color-neutral-025);
249
+ --color-gray-200: var(--kern-color-neutral-050);
250
+ --color-gray-300: var(--kern-color-neutral-150);
251
+ --color-gray-400: var(--kern-color-neutral-350);
252
+ --color-gray-500: var(--kern-color-neutral-550);
253
+ --color-gray-600: var(--kern-color-neutral-650);
254
+ --color-gray-700: var(--kern-color-neutral-750);
255
+ --color-gray-800: var(--kern-color-neutral-850);
256
+ --color-gray-900: var(--kern-color-neutral-950);
257
+ --color-gray-950: var(--kern-color-neutral-950);
258
+
259
+ /* zinc → neutral */
260
+ --color-zinc-50: var(--kern-color-neutral-025);
261
+ --color-zinc-100: var(--kern-color-neutral-025);
262
+ --color-zinc-200: var(--kern-color-neutral-100);
263
+ --color-zinc-300: var(--kern-color-neutral-150);
264
+ --color-zinc-400: var(--kern-color-neutral-350);
265
+ --color-zinc-500: var(--kern-color-neutral-500);
266
+ --color-zinc-600: var(--kern-color-neutral-700);
267
+ --color-zinc-700: var(--kern-color-neutral-750);
268
+ --color-zinc-800: var(--kern-color-neutral-850);
269
+ --color-zinc-900: var(--kern-color-neutral-950);
270
+ --color-zinc-950: var(--kern-color-neutral-950);
271
+
272
+ /* neutral → grey */
273
+ --color-neutral-50: var(--kern-color-grey-025);
274
+ --color-neutral-100: var(--kern-color-grey-025);
275
+ --color-neutral-200: var(--kern-color-grey-100);
276
+ --color-neutral-300: var(--kern-color-grey-150);
277
+ --color-neutral-400: var(--kern-color-grey-350);
278
+ --color-neutral-500: var(--kern-color-grey-500);
279
+ --color-neutral-600: var(--kern-color-grey-700);
280
+ --color-neutral-700: var(--kern-color-grey-750);
281
+ --color-neutral-800: var(--kern-color-grey-900);
282
+ --color-neutral-900: var(--kern-color-grey-950);
283
+ --color-neutral-950: var(--kern-color-grey-950);
284
+
285
+ /* stone → grey */
286
+ --color-stone-50: var(--kern-color-grey-025);
287
+ --color-stone-100: var(--kern-color-grey-025);
288
+ --color-stone-200: var(--kern-color-grey-100);
289
+ --color-stone-300: var(--kern-color-grey-150);
290
+ --color-stone-400: var(--kern-color-grey-350);
291
+ --color-stone-500: var(--kern-color-grey-500);
292
+ --color-stone-600: var(--kern-color-grey-650);
293
+ --color-stone-700: var(--kern-color-grey-750);
294
+ --color-stone-800: var(--kern-color-grey-900);
295
+ --color-stone-900: var(--kern-color-grey-950);
296
+ --color-stone-950: var(--kern-color-grey-950);
297
+
298
+ /* mauve → grey */
299
+ --color-mauve-50: var(--kern-color-grey-025);
300
+ --color-mauve-100: var(--kern-color-grey-025);
301
+ --color-mauve-200: var(--kern-color-grey-100);
302
+ --color-mauve-300: var(--kern-color-grey-150);
303
+ --color-mauve-400: var(--kern-color-grey-350);
304
+ --color-mauve-500: var(--kern-color-grey-550);
305
+ --color-mauve-600: var(--kern-color-grey-700);
306
+ --color-mauve-700: var(--kern-color-grey-750);
307
+ --color-mauve-800: var(--kern-color-grey-900);
308
+ --color-mauve-900: var(--kern-color-grey-950);
309
+ --color-mauve-950: var(--kern-color-grey-950);
310
+
311
+ /* olive → grey */
312
+ --color-olive-50: var(--kern-color-grey-025);
313
+ --color-olive-100: var(--kern-color-grey-025);
314
+ --color-olive-200: var(--kern-color-grey-050);
315
+ --color-olive-300: var(--kern-color-grey-150);
316
+ --color-olive-400: var(--kern-color-grey-300);
317
+ --color-olive-500: var(--kern-color-grey-500);
318
+ --color-olive-600: var(--kern-color-grey-650);
319
+ --color-olive-700: var(--kern-color-grey-750);
320
+ --color-olive-800: var(--kern-color-grey-850);
321
+ --color-olive-900: var(--kern-color-grey-900);
322
+ --color-olive-950: var(--kern-color-grey-950);
323
+
324
+ /* mist → grey */
325
+ --color-mist-50: var(--kern-color-grey-025);
326
+ --color-mist-100: var(--kern-color-grey-025);
327
+ --color-mist-200: var(--kern-color-grey-050);
328
+ --color-mist-300: var(--kern-color-grey-150);
329
+ --color-mist-400: var(--kern-color-grey-350);
330
+ --color-mist-500: var(--kern-color-grey-500);
331
+ --color-mist-600: var(--kern-color-grey-650);
332
+ --color-mist-700: var(--kern-color-grey-750);
333
+ --color-mist-800: var(--kern-color-grey-850);
334
+ --color-mist-900: var(--kern-color-grey-950);
335
+ --color-mist-950: var(--kern-color-grey-950);
336
+
337
+ /* taupe → grey */
338
+ --color-taupe-50: var(--kern-color-grey-025);
339
+ --color-taupe-100: var(--kern-color-grey-025);
340
+ --color-taupe-200: var(--kern-color-grey-100);
341
+ --color-taupe-300: var(--kern-color-grey-150);
342
+ --color-taupe-400: var(--kern-color-grey-350);
343
+ --color-taupe-500: var(--kern-color-grey-550);
344
+ --color-taupe-600: var(--kern-color-grey-700);
345
+ --color-taupe-700: var(--kern-color-grey-750);
346
+ --color-taupe-800: var(--kern-color-grey-900);
347
+ --color-taupe-900: var(--kern-color-grey-950);
348
+ --color-taupe-950: var(--kern-color-grey-950);
349
+
350
+ /* Radii */
351
+ --radius-xs: var(--kern-metric-border-radius-small);
352
+ --radius-sm: var(--kern-metric-border-radius-default);
353
+ --radius-md: var(--kern-metric-border-radius-default);
354
+ --radius-lg: var(--kern-metric-border-radius-large);
355
+ --radius-xl: var(--kern-metric-border-radius-large);
356
+ --radius-2xl: var(--kern-metric-border-radius-large);
357
+ --radius-3xl: var(--kern-metric-border-radius-large);
358
+ --radius-4xl: var(--kern-metric-border-radius-large);
359
+
360
+ /* Shadows */
361
+ --shadow-2xs: var(--kern-shadow-elevation-low);
362
+ --shadow-xs: var(--kern-shadow-elevation-low);
363
+ --shadow-sm: var(--kern-shadow-elevation-low);
364
+ --shadow-md: var(--kern-shadow-elevation-default);
365
+ --shadow-lg: var(--kern-shadow-elevation-high);
366
+ --shadow-xl: var(--kern-shadow-elevation-high);
367
+ --shadow-2xl: var(--kern-shadow-elevation-high);
368
+ }
package/src/theme.css ADDED
@@ -0,0 +1,193 @@
1
+ /*
2
+ * KERN-UX as a Tailwind CSS v4 theme. Import it after Tailwind:
3
+ *
4
+ * @import "tailwindcss";
5
+ * @import "@leonio/kern-ux-tailwind";
6
+ *
7
+ * It loads KERN's stylesheet into Tailwind's base layer, after preflight, so
8
+ * KERN's components keep their look and utilities still override them
9
+ * (kern-btn w-full). Imported before Tailwind, preflight would come last.
10
+ *
11
+ * Everything here is `@theme inline`: a utility like bg-primary compiles to
12
+ * var(--kern-color-action-default-contextual) instead of a Tailwind variable
13
+ * set once on :root. KERN redefines its tokens on [data-kern-theme], .kern-dark,
14
+ * .kern-level-* and body, and only the inlined reference follows them there.
15
+ */
16
+ @import "@kern-ux/native/dist/kern.min.css" layer(base);
17
+ @import "./tokens.css";
18
+
19
+ /*
20
+ * KERN's dark theme comes from the system preference unless an ancestor sets
21
+ * data-kern-theme="light|dark" or .kern-light|.kern-dark. A light section
22
+ * inside a dark page still gets dark: styles; the token utilities are right
23
+ * at any depth, so prefer them over dark: pairs.
24
+ */
25
+ @custom-variant dark {
26
+ &:where(
27
+ [data-kern-theme="dark"],
28
+ [data-kern-theme="dark"] *,
29
+ .kern-dark,
30
+ .kern-dark *
31
+ ) {
32
+ @slot;
33
+ }
34
+ @media (prefers-color-scheme: dark) {
35
+ &:not(
36
+ :where(
37
+ [data-kern-theme="light"],
38
+ [data-kern-theme="light"] *,
39
+ .kern-light,
40
+ .kern-light *
41
+ )
42
+ ) {
43
+ @slot;
44
+ }
45
+ }
46
+ }
47
+
48
+ /* After KERN in the same layer, so these win where specificity ties. */
49
+ @layer base {
50
+ /*
51
+ * KERN gives every element its font (*:not(i)), so font-mono on a <pre>
52
+ * wouldn't reach the <code> inside. Below body, inherit it instead: the
53
+ * body still gets KERN's font, and KERN's components set theirs by class.
54
+ */
55
+ :where(body *):not(i) {
56
+ font-family: inherit;
57
+ }
58
+
59
+ /*
60
+ * KERN centres its dialog with the browser's margin: auto, which
61
+ * preflight resets. :where() keeps KERN's own dialog margins ahead.
62
+ */
63
+ :where(.kern-dialog) {
64
+ margin: auto;
65
+ }
66
+ }
67
+
68
+ @theme inline {
69
+ --font-sans: var(--kern-typography-font-family-default);
70
+ --font-mono: var(--kern-typography-font-family-fira-mono);
71
+
72
+ /*
73
+ * The semantic names most Tailwind component code uses, shadcn/ui's among
74
+ * them, on KERN's contextual tokens: they resolve from the light or dark
75
+ * theme and the level a component sits on.
76
+ */
77
+ --color-background: var(--kern-color-layout-background-default-contextual);
78
+ --color-foreground: var(--kern-color-layout-text-default-contextual);
79
+ --color-card: var(--kern-color-layout-background-default-contextual);
80
+ --color-card-foreground: var(--kern-color-layout-text-default-contextual);
81
+ --color-popover: var(--kern-color-layout-background-default-contextual);
82
+ --color-popover-foreground: var(--kern-color-layout-text-default-contextual);
83
+ --color-primary: var(--kern-color-action-default-contextual);
84
+ --color-primary-foreground: var(--kern-color-action-on-default-contextual);
85
+ --color-secondary: var(--kern-color-layout-layer-surface-contextual);
86
+ --color-secondary-foreground: var(
87
+ --kern-color-layout-text-default-contextual
88
+ );
89
+ --color-muted: var(--kern-color-layout-layer-surface-contextual);
90
+ --color-muted-foreground: var(--kern-color-layout-text-muted-contextual);
91
+ --color-accent: var(--kern-color-layout-layer-surface-contextual);
92
+ --color-accent-foreground: var(--kern-color-layout-text-default-contextual);
93
+ --color-destructive: var(--kern-color-feedback-danger-contextual);
94
+ --color-border: var(--kern-color-decorative-border-contextual);
95
+ --color-input: var(--kern-color-form-input-border-contextual);
96
+ --color-ring: var(--kern-color-action-focus-default-contextual);
97
+
98
+ /* KERN's type roles: text-kern-body sets size, line height and weight. */
99
+ --text-kern-body-small: var(--kern-typography-font-size-small-static);
100
+ --text-kern-body-small--line-height: var(
101
+ --kern-typography-line-height-medium-static
102
+ );
103
+ --text-kern-body-small--font-weight: var(
104
+ --kern-typography-font-weight-body-default
105
+ );
106
+ --text-kern-body: var(--kern-typography-font-size-medium-static);
107
+ --text-kern-body--line-height: var(
108
+ --kern-typography-line-height-medium-static
109
+ );
110
+ --text-kern-body--font-weight: var(
111
+ --kern-typography-font-weight-body-default
112
+ );
113
+ --text-kern-body-large: var(--kern-typography-font-size-large-static);
114
+ --text-kern-body-large--line-height: var(
115
+ --kern-typography-line-height-large-static
116
+ );
117
+ --text-kern-body-large--font-weight: var(
118
+ --kern-typography-font-weight-body-default
119
+ );
120
+ --text-kern-label: var(--kern-typography-font-size-medium-static);
121
+ --text-kern-label--line-height: var(
122
+ --kern-typography-line-height-medium-static
123
+ );
124
+ --text-kern-label--font-weight: var(
125
+ --kern-typography-font-weight-label-default
126
+ );
127
+ --text-kern-heading-small: var(--kern-typography-font-size-medium-static);
128
+ --text-kern-heading-small--line-height: var(
129
+ --kern-typography-line-height-medium-static
130
+ );
131
+ --text-kern-heading-small--font-weight: var(
132
+ --kern-typography-font-weight-heading-default
133
+ );
134
+ --text-kern-heading-medium: var(--kern-typography-font-size-medium-adaptive);
135
+ --text-kern-heading-medium--line-height: var(
136
+ --kern-typography-line-height-medium-adaptive
137
+ );
138
+ --text-kern-heading-medium--font-weight: var(
139
+ --kern-typography-font-weight-heading-default
140
+ );
141
+ --text-kern-heading-large: var(--kern-typography-font-size-large-adaptive);
142
+ --text-kern-heading-large--line-height: var(
143
+ --kern-typography-line-height-large-adaptive
144
+ );
145
+ --text-kern-heading-large--font-weight: var(
146
+ --kern-typography-font-weight-heading-default
147
+ );
148
+ --text-kern-heading-x-large: var(
149
+ --kern-typography-font-size-x-large-adaptive
150
+ );
151
+ --text-kern-heading-x-large--line-height: var(
152
+ --kern-typography-line-height-x-large-adaptive
153
+ );
154
+ --text-kern-heading-x-large--font-weight: var(
155
+ --kern-typography-font-weight-heading-balanced
156
+ );
157
+ --text-kern-heading-display: var(
158
+ --kern-typography-font-size-2x-large-adaptive
159
+ );
160
+ --text-kern-heading-display--line-height: var(
161
+ --kern-typography-line-height-2x-large-adaptive
162
+ );
163
+ --text-kern-heading-display--font-weight: var(
164
+ --kern-typography-font-weight-heading-balanced
165
+ );
166
+
167
+ /* Tailwind's 0.25rem spacing step is KERN's grid: p-4 is space-default. */
168
+ --spacing-kern-2x-small: var(--kern-metric-space-2x-small);
169
+ --spacing-kern-x-small: var(--kern-metric-space-x-small);
170
+ --spacing-kern-small: var(--kern-metric-space-small);
171
+ --spacing-kern-default: var(--kern-metric-space-default);
172
+ --spacing-kern-large: var(--kern-metric-space-large);
173
+ --spacing-kern-x-large: var(--kern-metric-space-x-large);
174
+ --spacing-kern-2x-large: var(--kern-metric-space-2x-large);
175
+ --spacing-kern-3x-large: var(--kern-metric-space-3x-large);
176
+ --spacing-kern-4x-large: var(--kern-metric-space-4x-large);
177
+ --spacing-kern-5x-large: var(--kern-metric-space-5x-large);
178
+
179
+ --radius-kern-small: var(--kern-metric-border-radius-small);
180
+ --radius-kern-default: var(--kern-metric-border-radius-default);
181
+ --radius-kern-large: var(--kern-metric-border-radius-large);
182
+
183
+ --shadow-kern-low: var(--kern-shadow-elevation-low);
184
+ --shadow-kern-default: var(--kern-shadow-elevation-default);
185
+ --shadow-kern-high: var(--kern-shadow-elevation-high);
186
+
187
+ /* KERN's grid breakpoints. Media queries can't read custom properties, so these are values. */
188
+ --breakpoint-sm: 36rem;
189
+ --breakpoint-md: 48rem;
190
+ --breakpoint-lg: 62rem;
191
+ --breakpoint-xl: 75rem;
192
+ --breakpoint-2xl: 100rem;
193
+ }