ng-blatui 1.0.0 → 1.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 (2) hide show
  1. package/foundations/blatui.css +1572 -0
  2. package/package.json +1 -1
package/foundations/blatui.css ADDED
@@ -0,0 +1,1572 @@
1
+ /* ng-blatui design tokens. In your app's styles.css:
2
+ * @import 'tailwindcss';
3
+ * @import 'ng-blatui/foundations/blatui.css';
4
+ * @source '../node_modules/ng-blatui'; (so Tailwind generates the lib's utilities)
5
+ */
6
+ @custom-variant dark (&:is(.dark *));
7
+
8
+ /* -------------------------------------------------------------------------- */
9
+ /* Theme tokens — mapped to Tailwind utilities (bg-background, font-sans, */
10
+ /* shadow-md, tracking-wide, …). Everything is referenced via var() so a */
11
+ /* preset can override the underlying token in :root/.dark/[data-*]. */
12
+ /* -------------------------------------------------------------------------- */
13
+ @theme inline {
14
+ /* Fonts */
15
+ --font-sans: var(--font-sans);
16
+ --font-serif: var(--font-serif);
17
+ --font-mono: var(--font-mono);
18
+ --font-heading: var(--font-heading);
19
+
20
+ /* Radius scale (derived from --radius) */
21
+ --radius-sm: calc(var(--radius) - 4px);
22
+ --radius-md: calc(var(--radius) - 2px);
23
+ --radius-lg: var(--radius);
24
+ --radius-xl: calc(var(--radius) + 4px);
25
+
26
+ /* Spacing base (every p-*, gap-*, w-*… derives from this) */
27
+ --spacing: var(--spacing);
28
+
29
+ /* Letter-spacing scale (derived from --tracking-normal) */
30
+ --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
31
+ --tracking-tight: calc(var(--tracking-normal) - 0.025em);
32
+ --tracking-normal: var(--tracking-normal);
33
+ --tracking-wide: calc(var(--tracking-normal) + 0.025em);
34
+ --tracking-wider: calc(var(--tracking-normal) + 0.05em);
35
+ --tracking-widest: calc(var(--tracking-normal) + 0.1em);
36
+
37
+ /* Box-shadow scale */
38
+ --shadow-2xs: var(--shadow-2xs);
39
+ --shadow-xs: var(--shadow-xs);
40
+ --shadow-sm: var(--shadow-sm);
41
+ --shadow: var(--shadow);
42
+ --shadow-md: var(--shadow-md);
43
+ --shadow-lg: var(--shadow-lg);
44
+ --shadow-xl: var(--shadow-xl);
45
+ --shadow-2xl: var(--shadow-2xl);
46
+
47
+ /* Colors */
48
+ --color-background: var(--background);
49
+ --color-foreground: var(--foreground);
50
+ --color-card: var(--card);
51
+ --color-card-foreground: var(--card-foreground);
52
+ --color-popover: var(--popover);
53
+ --color-popover-foreground: var(--popover-foreground);
54
+ --color-primary: var(--primary);
55
+ --color-primary-foreground: var(--primary-foreground);
56
+ --color-secondary: var(--secondary);
57
+ --color-secondary-foreground: var(--secondary-foreground);
58
+ --color-muted: var(--muted);
59
+ --color-muted-foreground: var(--muted-foreground);
60
+ --color-accent: var(--accent);
61
+ --color-accent-foreground: var(--accent-foreground);
62
+ --color-destructive: var(--destructive);
63
+ --color-destructive-foreground: var(--destructive-foreground);
64
+ --color-success: var(--success);
65
+ --color-success-foreground: var(--success-foreground);
66
+ --color-warning: var(--warning);
67
+ --color-warning-foreground: var(--warning-foreground);
68
+ --color-info: var(--info);
69
+ --color-info-foreground: var(--info-foreground);
70
+ --color-border: var(--border);
71
+ --color-input: var(--input);
72
+ --color-ring: var(--ring);
73
+ --color-chart-1: var(--chart-1);
74
+ --color-chart-2: var(--chart-2);
75
+ --color-chart-3: var(--chart-3);
76
+ --color-chart-4: var(--chart-4);
77
+ --color-chart-5: var(--chart-5);
78
+ --color-sidebar: var(--sidebar);
79
+ --color-sidebar-foreground: var(--sidebar-foreground);
80
+ --color-sidebar-primary: var(--sidebar-primary);
81
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
82
+ --color-sidebar-accent: var(--sidebar-accent);
83
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
84
+ --color-sidebar-border: var(--sidebar-border);
85
+ --color-sidebar-ring: var(--sidebar-ring);
86
+
87
+ --animate-caret-blink: caret-blink 1.25s ease-out infinite;
88
+
89
+ @keyframes caret-blink {
90
+ 0%,
91
+ 70%,
92
+ 100% {
93
+ opacity: 1;
94
+ }
95
+ 20%,
96
+ 50% {
97
+ opacity: 0;
98
+ }
99
+ }
100
+
101
+ --animate-progress-indeterminate: progress-indeterminate 1.4s ease-in-out infinite;
102
+
103
+ @keyframes progress-indeterminate {
104
+ 0% {
105
+ left: -40%;
106
+ }
107
+ 100% {
108
+ left: 100%;
109
+ }
110
+ }
111
+ }
112
+
113
+ /* -------------------------------------------------------------------------- */
114
+ /* Base preset (neutral) — identical to shadcn/ui defaults */
115
+ /* -------------------------------------------------------------------------- */
116
+ :root {
117
+ /* Geometry / rhythm */
118
+ --radius: 0.625rem;
119
+ --spacing: 0.25rem;
120
+ --tracking-normal: 0em;
121
+
122
+ /* Fonts */
123
+ --font-sans:
124
+ 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
125
+ 'Segoe UI Symbol', 'Noto Color Emoji';
126
+ --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
127
+ --font-mono:
128
+ ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
129
+
130
+ /* Heading font — defaults to the body font; overridden by [data-font-heading]. */
131
+ --font-heading: var(--font-sans);
132
+
133
+ /* Shadow scale (subtle default) */
134
+ --shadow-2xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
135
+ --shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
136
+ --shadow-sm: 0 1px 3px 0px oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
137
+ --shadow: 0 1px 3px 0px oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
138
+ --shadow-md: 0 1px 3px 0px oklch(0 0 0 / 0.1), 0 2px 4px -1px oklch(0 0 0 / 0.1);
139
+ --shadow-lg: 0 1px 3px 0px oklch(0 0 0 / 0.1), 0 4px 6px -1px oklch(0 0 0 / 0.1);
140
+ --shadow-xl: 0 1px 3px 0px oklch(0 0 0 / 0.1), 0 8px 10px -1px oklch(0 0 0 / 0.1);
141
+ --shadow-2xl: 0 1px 3px 0px oklch(0 0 0 / 0.25);
142
+
143
+ /* Colors */
144
+ --background: oklch(1 0 0);
145
+ --foreground: oklch(0.145 0 0);
146
+ --card: oklch(1 0 0);
147
+ --card-foreground: oklch(0.145 0 0);
148
+ --popover: oklch(1 0 0);
149
+ --popover-foreground: oklch(0.145 0 0);
150
+ --primary: oklch(0.205 0 0);
151
+ --primary-foreground: oklch(0.985 0 0);
152
+ --secondary: oklch(0.97 0 0);
153
+ --secondary-foreground: oklch(0.205 0 0);
154
+ --muted: oklch(0.97 0 0);
155
+ /* Darkened from 0.556 → 0.49 to meet WCAG AA 4.5:1 on muted/accent backgrounds (was 4.34:1). */
156
+ --muted-foreground: oklch(0.49 0 0);
157
+ --accent: oklch(0.97 0 0);
158
+ --accent-foreground: oklch(0.205 0 0);
159
+ /* Darkened to clear AA 4.5:1 for destructive text on white AND on the /10 soft tint. */
160
+ --destructive: oklch(0.505 0.225 27.325);
161
+ --destructive-foreground: oklch(0.985 0 0);
162
+ /* Semantic status tones — preset-independent (live once here, not per data-base).
163
+ Tuned so text-{tone} clears WCAG AA 4.5:1 on a /10 tint and white clears AA on the
164
+ solid fill. `danger` reuses --destructive. */
165
+ --success: oklch(0.455 0.125 150);
166
+ --success-foreground: oklch(0.985 0.018 155);
167
+ --warning: oklch(0.48 0.11 65);
168
+ --warning-foreground: oklch(0.987 0.022 95);
169
+ --info: oklch(0.475 0.16 250);
170
+ --info-foreground: oklch(0.985 0.015 255);
171
+ --border: oklch(0.922 0 0);
172
+ --input: oklch(0.922 0 0);
173
+ --ring: oklch(0.708 0 0);
174
+ --chart-1: oklch(0.646 0.222 41.116);
175
+ --chart-2: oklch(0.6 0.118 184.704);
176
+ --chart-3: oklch(0.398 0.07 227.392);
177
+ --chart-4: oklch(0.828 0.189 84.429);
178
+ --chart-5: oklch(0.769 0.188 70.08);
179
+ --sidebar: oklch(0.985 0 0);
180
+ --sidebar-foreground: oklch(0.145 0 0);
181
+ --sidebar-primary: oklch(0.205 0 0);
182
+ --sidebar-primary-foreground: oklch(0.985 0 0);
183
+ --sidebar-accent: oklch(0.97 0 0);
184
+ --sidebar-accent-foreground: oklch(0.205 0 0);
185
+ --sidebar-border: oklch(0.922 0 0);
186
+ --sidebar-ring: oklch(0.708 0 0);
187
+ }
188
+
189
+ .dark {
190
+ --background: oklch(0.145 0 0);
191
+ --foreground: oklch(0.985 0 0);
192
+ --card: oklch(0.205 0 0);
193
+ --card-foreground: oklch(0.985 0 0);
194
+ --popover: oklch(0.205 0 0);
195
+ --popover-foreground: oklch(0.985 0 0);
196
+ --primary: oklch(0.922 0 0);
197
+ --primary-foreground: oklch(0.205 0 0);
198
+ --secondary: oklch(0.269 0 0);
199
+ --secondary-foreground: oklch(0.985 0 0);
200
+ --muted: oklch(0.269 0 0);
201
+ --muted-foreground: oklch(0.708 0 0);
202
+ --accent: oklch(0.269 0 0);
203
+ --accent-foreground: oklch(0.985 0 0);
204
+ --destructive: oklch(0.704 0.191 22.216);
205
+ --destructive-foreground: oklch(0.985 0 0);
206
+ /* Semantic status tones — dark: lighter fills, so text-{tone} reads on dark surfaces. */
207
+ --success: oklch(0.7 0.15 155);
208
+ --success-foreground: oklch(0.21 0.05 155);
209
+ --warning: oklch(0.78 0.14 82);
210
+ --warning-foreground: oklch(0.26 0.05 75);
211
+ --info: oklch(0.7 0.14 245);
212
+ --info-foreground: oklch(0.21 0.05 250);
213
+ --border: oklch(1 0 0 / 10%);
214
+ --input: oklch(1 0 0 / 15%);
215
+ --ring: oklch(0.556 0 0);
216
+ --chart-1: oklch(0.488 0.243 264.376);
217
+ --chart-2: oklch(0.696 0.17 162.48);
218
+ --chart-3: oklch(0.769 0.188 70.08);
219
+ --chart-4: oklch(0.627 0.265 303.9);
220
+ --chart-5: oklch(0.645 0.246 16.439);
221
+ --sidebar: oklch(0.205 0 0);
222
+ --sidebar-foreground: oklch(0.985 0 0);
223
+ --sidebar-primary: oklch(0.488 0.243 264.376);
224
+ --sidebar-primary-foreground: oklch(0.985 0 0);
225
+ --sidebar-accent: oklch(0.269 0 0);
226
+ --sidebar-accent-foreground: oklch(0.985 0 0);
227
+ --sidebar-border: oklch(1 0 0 / 10%);
228
+ --sidebar-ring: oklch(0.556 0 0);
229
+ /* Slightly deeper shadows on dark surfaces */
230
+ --shadow-2xs: 0 1px 3px 0px oklch(0 0 0 / 0.15);
231
+ --shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.15);
232
+ --shadow-sm: 0 1px 3px 0px oklch(0 0 0 / 0.3), 0 1px 2px -1px oklch(0 0 0 / 0.3);
233
+ --shadow: 0 1px 3px 0px oklch(0 0 0 / 0.3), 0 1px 2px -1px oklch(0 0 0 / 0.3);
234
+ --shadow-md: 0 1px 3px 0px oklch(0 0 0 / 0.3), 0 2px 4px -1px oklch(0 0 0 / 0.3);
235
+ --shadow-lg: 0 1px 3px 0px oklch(0 0 0 / 0.3), 0 4px 6px -1px oklch(0 0 0 / 0.3);
236
+ --shadow-xl: 0 1px 3px 0px oklch(0 0 0 / 0.3), 0 8px 10px -1px oklch(0 0 0 / 0.3);
237
+ --shadow-2xl: 0 1px 3px 0px oklch(0 0 0 / 0.5);
238
+ }
239
+
240
+ /* ========================================================================== */
241
+ /* DIMENSION 1 — Base color (grayscale family). Switch: <html data-base="…"> */
242
+ /* Full palette per family. neutral is the default and lives in :root/.dark. */
243
+ /* ========================================================================== */
244
+
245
+ /* Stone */
246
+ [data-base='stone'] {
247
+ --background: oklch(1 0 0);
248
+ --foreground: oklch(0.147 0.004 49.25);
249
+ --card: oklch(1 0 0);
250
+ --card-foreground: oklch(0.147 0.004 49.25);
251
+ --popover: oklch(1 0 0);
252
+ --popover-foreground: oklch(0.147 0.004 49.25);
253
+ --primary: oklch(0.216 0.006 56.043);
254
+ --primary-foreground: oklch(0.985 0.001 106.423);
255
+ --secondary: oklch(0.97 0.001 106.424);
256
+ --secondary-foreground: oklch(0.216 0.006 56.043);
257
+ --muted: oklch(0.97 0.001 106.424);
258
+ --muted-foreground: oklch(0.49 0.013 58.071);
259
+ --accent: oklch(0.97 0.001 106.424);
260
+ --accent-foreground: oklch(0.216 0.006 56.043);
261
+ --destructive: oklch(0.55 0.238 27.325);
262
+ --border: oklch(0.923 0.003 48.717);
263
+ --input: oklch(0.923 0.003 48.717);
264
+ --ring: oklch(0.709 0.01 56.259);
265
+ --chart-1: oklch(0.869 0.005 56.366);
266
+ --chart-2: oklch(0.553 0.013 58.071);
267
+ --chart-3: oklch(0.444 0.011 73.639);
268
+ --chart-4: oklch(0.374 0.01 67.558);
269
+ --chart-5: oklch(0.268 0.007 34.298);
270
+ --sidebar: oklch(0.985 0.001 106.423);
271
+ --sidebar-foreground: oklch(0.147 0.004 49.25);
272
+ --sidebar-primary: oklch(0.216 0.006 56.043);
273
+ --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
274
+ --sidebar-accent: oklch(0.97 0.001 106.424);
275
+ --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
276
+ --sidebar-border: oklch(0.923 0.003 48.717);
277
+ --sidebar-ring: oklch(0.709 0.01 56.259);
278
+ }
279
+ .dark[data-base='stone'] {
280
+ --background: oklch(0.147 0.004 49.25);
281
+ --foreground: oklch(0.985 0.001 106.423);
282
+ --card: oklch(0.216 0.006 56.043);
283
+ --card-foreground: oklch(0.985 0.001 106.423);
284
+ --popover: oklch(0.216 0.006 56.043);
285
+ --popover-foreground: oklch(0.985 0.001 106.423);
286
+ --primary: oklch(0.923 0.003 48.717);
287
+ --primary-foreground: oklch(0.216 0.006 56.043);
288
+ --secondary: oklch(0.268 0.007 34.298);
289
+ --secondary-foreground: oklch(0.985 0.001 106.423);
290
+ --muted: oklch(0.268 0.007 34.298);
291
+ --muted-foreground: oklch(0.709 0.01 56.259);
292
+ --accent: oklch(0.268 0.007 34.298);
293
+ --accent-foreground: oklch(0.985 0.001 106.423);
294
+ --destructive: oklch(0.704 0.191 22.216);
295
+ --border: oklch(1 0 0 / 10%);
296
+ --input: oklch(1 0 0 / 15%);
297
+ --ring: oklch(0.553 0.013 58.071);
298
+ --chart-1: oklch(0.869 0.005 56.366);
299
+ --chart-2: oklch(0.553 0.013 58.071);
300
+ --chart-3: oklch(0.444 0.011 73.639);
301
+ --chart-4: oklch(0.374 0.01 67.558);
302
+ --chart-5: oklch(0.268 0.007 34.298);
303
+ --sidebar: oklch(0.216 0.006 56.043);
304
+ --sidebar-foreground: oklch(0.985 0.001 106.423);
305
+ --sidebar-primary: oklch(0.488 0.243 264.376);
306
+ --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
307
+ --sidebar-accent: oklch(0.268 0.007 34.298);
308
+ --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
309
+ --sidebar-border: oklch(1 0 0 / 10%);
310
+ --sidebar-ring: oklch(0.553 0.013 58.071);
311
+ }
312
+
313
+ /* Zinc */
314
+ [data-base='zinc'] {
315
+ --background: oklch(1 0 0);
316
+ --foreground: oklch(0.141 0.005 285.823);
317
+ --card: oklch(1 0 0);
318
+ --card-foreground: oklch(0.141 0.005 285.823);
319
+ --popover: oklch(1 0 0);
320
+ --popover-foreground: oklch(0.141 0.005 285.823);
321
+ --primary: oklch(0.21 0.006 285.885);
322
+ --primary-foreground: oklch(0.985 0 0);
323
+ --secondary: oklch(0.967 0.001 286.375);
324
+ --secondary-foreground: oklch(0.21 0.006 285.885);
325
+ --muted: oklch(0.967 0.001 286.375);
326
+ --muted-foreground: oklch(0.49 0.016 285.938);
327
+ --accent: oklch(0.967 0.001 286.375);
328
+ --accent-foreground: oklch(0.21 0.006 285.885);
329
+ --destructive: oklch(0.55 0.238 27.325);
330
+ --border: oklch(0.92 0.004 286.32);
331
+ --input: oklch(0.92 0.004 286.32);
332
+ --ring: oklch(0.705 0.015 286.067);
333
+ --chart-1: oklch(0.871 0.006 286.286);
334
+ --chart-2: oklch(0.552 0.016 285.938);
335
+ --chart-3: oklch(0.442 0.017 285.786);
336
+ --chart-4: oklch(0.37 0.013 285.805);
337
+ --chart-5: oklch(0.274 0.006 286.033);
338
+ --sidebar: oklch(0.985 0 0);
339
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
340
+ --sidebar-primary: oklch(0.21 0.006 285.885);
341
+ --sidebar-primary-foreground: oklch(0.985 0 0);
342
+ --sidebar-accent: oklch(0.967 0.001 286.375);
343
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
344
+ --sidebar-border: oklch(0.92 0.004 286.32);
345
+ --sidebar-ring: oklch(0.705 0.015 286.067);
346
+ }
347
+ .dark[data-base='zinc'] {
348
+ --background: oklch(0.141 0.005 285.823);
349
+ --foreground: oklch(0.985 0 0);
350
+ --card: oklch(0.21 0.006 285.885);
351
+ --card-foreground: oklch(0.985 0 0);
352
+ --popover: oklch(0.21 0.006 285.885);
353
+ --popover-foreground: oklch(0.985 0 0);
354
+ --primary: oklch(0.92 0.004 286.32);
355
+ --primary-foreground: oklch(0.21 0.006 285.885);
356
+ --secondary: oklch(0.274 0.006 286.033);
357
+ --secondary-foreground: oklch(0.985 0 0);
358
+ --muted: oklch(0.274 0.006 286.033);
359
+ --muted-foreground: oklch(0.705 0.015 286.067);
360
+ --accent: oklch(0.274 0.006 286.033);
361
+ --accent-foreground: oklch(0.985 0 0);
362
+ --destructive: oklch(0.704 0.191 22.216);
363
+ --border: oklch(1 0 0 / 10%);
364
+ --input: oklch(1 0 0 / 15%);
365
+ --ring: oklch(0.552 0.016 285.938);
366
+ --chart-1: oklch(0.871 0.006 286.286);
367
+ --chart-2: oklch(0.552 0.016 285.938);
368
+ --chart-3: oklch(0.442 0.017 285.786);
369
+ --chart-4: oklch(0.37 0.013 285.805);
370
+ --chart-5: oklch(0.274 0.006 286.033);
371
+ --sidebar: oklch(0.21 0.006 285.885);
372
+ --sidebar-foreground: oklch(0.985 0 0);
373
+ --sidebar-primary: oklch(0.488 0.243 264.376);
374
+ --sidebar-primary-foreground: oklch(0.985 0 0);
375
+ --sidebar-accent: oklch(0.274 0.006 286.033);
376
+ --sidebar-accent-foreground: oklch(0.985 0 0);
377
+ --sidebar-border: oklch(1 0 0 / 10%);
378
+ --sidebar-ring: oklch(0.552 0.016 285.938);
379
+ }
380
+
381
+ /* Mauve */
382
+ [data-base='mauve'] {
383
+ --background: oklch(1 0 0);
384
+ --foreground: oklch(0.145 0.008 326);
385
+ --card: oklch(1 0 0);
386
+ --card-foreground: oklch(0.145 0.008 326);
387
+ --popover: oklch(1 0 0);
388
+ --popover-foreground: oklch(0.145 0.008 326);
389
+ --primary: oklch(0.212 0.019 322.12);
390
+ --primary-foreground: oklch(0.985 0 0);
391
+ --secondary: oklch(0.96 0.003 325.6);
392
+ --secondary-foreground: oklch(0.212 0.019 322.12);
393
+ --muted: oklch(0.96 0.003 325.6);
394
+ --muted-foreground: oklch(0.485 0.034 322.5);
395
+ --accent: oklch(0.96 0.003 325.6);
396
+ --accent-foreground: oklch(0.212 0.019 322.12);
397
+ --destructive: oklch(0.55 0.238 27.325);
398
+ --border: oklch(0.922 0.005 325.62);
399
+ --input: oklch(0.922 0.005 325.62);
400
+ --ring: oklch(0.711 0.019 323.02);
401
+ --chart-1: oklch(0.865 0.012 325.68);
402
+ --chart-2: oklch(0.542 0.034 322.5);
403
+ --chart-3: oklch(0.435 0.029 321.78);
404
+ --chart-4: oklch(0.364 0.029 323.89);
405
+ --chart-5: oklch(0.263 0.024 320.12);
406
+ --sidebar: oklch(0.985 0 0);
407
+ --sidebar-foreground: oklch(0.145 0.008 326);
408
+ --sidebar-primary: oklch(0.212 0.019 322.12);
409
+ --sidebar-primary-foreground: oklch(0.985 0 0);
410
+ --sidebar-accent: oklch(0.96 0.003 325.6);
411
+ --sidebar-accent-foreground: oklch(0.212 0.019 322.12);
412
+ --sidebar-border: oklch(0.922 0.005 325.62);
413
+ --sidebar-ring: oklch(0.711 0.019 323.02);
414
+ }
415
+ .dark[data-base='mauve'] {
416
+ --background: oklch(0.145 0.008 326);
417
+ --foreground: oklch(0.985 0 0);
418
+ --card: oklch(0.212 0.019 322.12);
419
+ --card-foreground: oklch(0.985 0 0);
420
+ --popover: oklch(0.212 0.019 322.12);
421
+ --popover-foreground: oklch(0.985 0 0);
422
+ --primary: oklch(0.922 0.005 325.62);
423
+ --primary-foreground: oklch(0.212 0.019 322.12);
424
+ --secondary: oklch(0.263 0.024 320.12);
425
+ --secondary-foreground: oklch(0.985 0 0);
426
+ --muted: oklch(0.263 0.024 320.12);
427
+ --muted-foreground: oklch(0.711 0.019 323.02);
428
+ --accent: oklch(0.263 0.024 320.12);
429
+ --accent-foreground: oklch(0.985 0 0);
430
+ --destructive: oklch(0.704 0.191 22.216);
431
+ --border: oklch(1 0 0 / 10%);
432
+ --input: oklch(1 0 0 / 15%);
433
+ --ring: oklch(0.542 0.034 322.5);
434
+ --chart-1: oklch(0.865 0.012 325.68);
435
+ --chart-2: oklch(0.542 0.034 322.5);
436
+ --chart-3: oklch(0.435 0.029 321.78);
437
+ --chart-4: oklch(0.364 0.029 323.89);
438
+ --chart-5: oklch(0.263 0.024 320.12);
439
+ --sidebar: oklch(0.212 0.019 322.12);
440
+ --sidebar-foreground: oklch(0.985 0 0);
441
+ --sidebar-primary: oklch(0.488 0.243 264.376);
442
+ --sidebar-primary-foreground: oklch(0.985 0 0);
443
+ --sidebar-accent: oklch(0.263 0.024 320.12);
444
+ --sidebar-accent-foreground: oklch(0.985 0 0);
445
+ --sidebar-border: oklch(1 0 0 / 10%);
446
+ --sidebar-ring: oklch(0.542 0.034 322.5);
447
+ }
448
+
449
+ /* Olive */
450
+ [data-base='olive'] {
451
+ --background: oklch(1 0 0);
452
+ --foreground: oklch(0.153 0.006 107.1);
453
+ --card: oklch(1 0 0);
454
+ --card-foreground: oklch(0.153 0.006 107.1);
455
+ --popover: oklch(1 0 0);
456
+ --popover-foreground: oklch(0.153 0.006 107.1);
457
+ --primary: oklch(0.228 0.013 107.4);
458
+ --primary-foreground: oklch(0.988 0.003 106.5);
459
+ --secondary: oklch(0.966 0.005 106.5);
460
+ --secondary-foreground: oklch(0.228 0.013 107.4);
461
+ --muted: oklch(0.966 0.005 106.5);
462
+ --muted-foreground: oklch(0.5 0.031 107.3);
463
+ --accent: oklch(0.966 0.005 106.5);
464
+ --accent-foreground: oklch(0.228 0.013 107.4);
465
+ --destructive: oklch(0.55 0.238 27.325);
466
+ --border: oklch(0.93 0.007 106.5);
467
+ --input: oklch(0.93 0.007 106.5);
468
+ --ring: oklch(0.737 0.021 106.9);
469
+ --chart-1: oklch(0.88 0.011 106.6);
470
+ --chart-2: oklch(0.58 0.031 107.3);
471
+ --chart-3: oklch(0.466 0.025 107.3);
472
+ --chart-4: oklch(0.394 0.023 107.4);
473
+ --chart-5: oklch(0.286 0.016 107.4);
474
+ --sidebar: oklch(0.988 0.003 106.5);
475
+ --sidebar-foreground: oklch(0.153 0.006 107.1);
476
+ --sidebar-primary: oklch(0.228 0.013 107.4);
477
+ --sidebar-primary-foreground: oklch(0.988 0.003 106.5);
478
+ --sidebar-accent: oklch(0.966 0.005 106.5);
479
+ --sidebar-accent-foreground: oklch(0.228 0.013 107.4);
480
+ --sidebar-border: oklch(0.93 0.007 106.5);
481
+ --sidebar-ring: oklch(0.737 0.021 106.9);
482
+ }
483
+ .dark[data-base='olive'] {
484
+ --background: oklch(0.153 0.006 107.1);
485
+ --foreground: oklch(0.988 0.003 106.5);
486
+ --card: oklch(0.228 0.013 107.4);
487
+ --card-foreground: oklch(0.988 0.003 106.5);
488
+ --popover: oklch(0.228 0.013 107.4);
489
+ --popover-foreground: oklch(0.988 0.003 106.5);
490
+ --primary: oklch(0.93 0.007 106.5);
491
+ --primary-foreground: oklch(0.228 0.013 107.4);
492
+ --secondary: oklch(0.286 0.016 107.4);
493
+ --secondary-foreground: oklch(0.988 0.003 106.5);
494
+ --muted: oklch(0.286 0.016 107.4);
495
+ --muted-foreground: oklch(0.737 0.021 106.9);
496
+ --accent: oklch(0.286 0.016 107.4);
497
+ --accent-foreground: oklch(0.988 0.003 106.5);
498
+ --destructive: oklch(0.704 0.191 22.216);
499
+ --border: oklch(1 0 0 / 10%);
500
+ --input: oklch(1 0 0 / 15%);
501
+ --ring: oklch(0.58 0.031 107.3);
502
+ --chart-1: oklch(0.88 0.011 106.6);
503
+ --chart-2: oklch(0.58 0.031 107.3);
504
+ --chart-3: oklch(0.466 0.025 107.3);
505
+ --chart-4: oklch(0.394 0.023 107.4);
506
+ --chart-5: oklch(0.286 0.016 107.4);
507
+ --sidebar: oklch(0.228 0.013 107.4);
508
+ --sidebar-foreground: oklch(0.988 0.003 106.5);
509
+ --sidebar-primary: oklch(0.488 0.243 264.376);
510
+ --sidebar-primary-foreground: oklch(0.988 0.003 106.5);
511
+ --sidebar-accent: oklch(0.286 0.016 107.4);
512
+ --sidebar-accent-foreground: oklch(0.988 0.003 106.5);
513
+ --sidebar-border: oklch(1 0 0 / 10%);
514
+ --sidebar-ring: oklch(0.58 0.031 107.3);
515
+ }
516
+
517
+ /* Mist */
518
+ [data-base='mist'] {
519
+ --background: oklch(1 0 0);
520
+ --foreground: oklch(0.148 0.004 228.8);
521
+ --card: oklch(1 0 0);
522
+ --card-foreground: oklch(0.148 0.004 228.8);
523
+ --popover: oklch(1 0 0);
524
+ --popover-foreground: oklch(0.148 0.004 228.8);
525
+ --primary: oklch(0.218 0.008 223.9);
526
+ --primary-foreground: oklch(0.987 0.002 197.1);
527
+ --secondary: oklch(0.963 0.002 197.1);
528
+ --secondary-foreground: oklch(0.218 0.008 223.9);
529
+ --muted: oklch(0.963 0.002 197.1);
530
+ --muted-foreground: oklch(0.49 0.021 213.5);
531
+ --accent: oklch(0.963 0.002 197.1);
532
+ --accent-foreground: oklch(0.218 0.008 223.9);
533
+ --destructive: oklch(0.55 0.238 27.325);
534
+ --border: oklch(0.925 0.005 214.3);
535
+ --input: oklch(0.925 0.005 214.3);
536
+ --ring: oklch(0.723 0.014 214.4);
537
+ --chart-1: oklch(0.872 0.007 219.6);
538
+ --chart-2: oklch(0.56 0.021 213.5);
539
+ --chart-3: oklch(0.45 0.017 213.2);
540
+ --chart-4: oklch(0.378 0.015 216);
541
+ --chart-5: oklch(0.275 0.011 216.9);
542
+ --sidebar: oklch(0.987 0.002 197.1);
543
+ --sidebar-foreground: oklch(0.148 0.004 228.8);
544
+ --sidebar-primary: oklch(0.218 0.008 223.9);
545
+ --sidebar-primary-foreground: oklch(0.987 0.002 197.1);
546
+ --sidebar-accent: oklch(0.963 0.002 197.1);
547
+ --sidebar-accent-foreground: oklch(0.218 0.008 223.9);
548
+ --sidebar-border: oklch(0.925 0.005 214.3);
549
+ --sidebar-ring: oklch(0.723 0.014 214.4);
550
+ }
551
+ .dark[data-base='mist'] {
552
+ --background: oklch(0.148 0.004 228.8);
553
+ --foreground: oklch(0.987 0.002 197.1);
554
+ --card: oklch(0.218 0.008 223.9);
555
+ --card-foreground: oklch(0.987 0.002 197.1);
556
+ --popover: oklch(0.218 0.008 223.9);
557
+ --popover-foreground: oklch(0.987 0.002 197.1);
558
+ --primary: oklch(0.925 0.005 214.3);
559
+ --primary-foreground: oklch(0.218 0.008 223.9);
560
+ --secondary: oklch(0.275 0.011 216.9);
561
+ --secondary-foreground: oklch(0.987 0.002 197.1);
562
+ --muted: oklch(0.275 0.011 216.9);
563
+ --muted-foreground: oklch(0.723 0.014 214.4);
564
+ --accent: oklch(0.275 0.011 216.9);
565
+ --accent-foreground: oklch(0.987 0.002 197.1);
566
+ --destructive: oklch(0.704 0.191 22.216);
567
+ --border: oklch(1 0 0 / 10%);
568
+ --input: oklch(1 0 0 / 15%);
569
+ --ring: oklch(0.56 0.021 213.5);
570
+ --chart-1: oklch(0.872 0.007 219.6);
571
+ --chart-2: oklch(0.56 0.021 213.5);
572
+ --chart-3: oklch(0.45 0.017 213.2);
573
+ --chart-4: oklch(0.378 0.015 216);
574
+ --chart-5: oklch(0.275 0.011 216.9);
575
+ --sidebar: oklch(0.218 0.008 223.9);
576
+ --sidebar-foreground: oklch(0.987 0.002 197.1);
577
+ --sidebar-primary: oklch(0.488 0.243 264.376);
578
+ --sidebar-primary-foreground: oklch(0.987 0.002 197.1);
579
+ --sidebar-accent: oklch(0.275 0.011 216.9);
580
+ --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
581
+ --sidebar-border: oklch(1 0 0 / 10%);
582
+ --sidebar-ring: oklch(0.56 0.021 213.5);
583
+ }
584
+
585
+ /* Taupe */
586
+ [data-base='taupe'] {
587
+ --background: oklch(1 0 0);
588
+ --foreground: oklch(0.147 0.004 49.3);
589
+ --card: oklch(1 0 0);
590
+ --card-foreground: oklch(0.147 0.004 49.3);
591
+ --popover: oklch(1 0 0);
592
+ --popover-foreground: oklch(0.147 0.004 49.3);
593
+ --primary: oklch(0.214 0.009 43.1);
594
+ --primary-foreground: oklch(0.986 0.002 67.8);
595
+ --secondary: oklch(0.96 0.002 17.2);
596
+ --secondary-foreground: oklch(0.214 0.009 43.1);
597
+ --muted: oklch(0.96 0.002 17.2);
598
+ --muted-foreground: oklch(0.49 0.021 43.1);
599
+ --accent: oklch(0.96 0.002 17.2);
600
+ --accent-foreground: oklch(0.214 0.009 43.1);
601
+ --destructive: oklch(0.55 0.238 27.325);
602
+ --border: oklch(0.922 0.005 34.3);
603
+ --input: oklch(0.922 0.005 34.3);
604
+ --ring: oklch(0.714 0.014 41.2);
605
+ --chart-1: oklch(0.868 0.007 39.5);
606
+ --chart-2: oklch(0.547 0.021 43.1);
607
+ --chart-3: oklch(0.438 0.017 39.3);
608
+ --chart-4: oklch(0.367 0.016 35.7);
609
+ --chart-5: oklch(0.268 0.011 36.5);
610
+ --sidebar: oklch(0.986 0.002 67.8);
611
+ --sidebar-foreground: oklch(0.147 0.004 49.3);
612
+ --sidebar-primary: oklch(0.214 0.009 43.1);
613
+ --sidebar-primary-foreground: oklch(0.986 0.002 67.8);
614
+ --sidebar-accent: oklch(0.96 0.002 17.2);
615
+ --sidebar-accent-foreground: oklch(0.214 0.009 43.1);
616
+ --sidebar-border: oklch(0.922 0.005 34.3);
617
+ --sidebar-ring: oklch(0.714 0.014 41.2);
618
+ }
619
+ .dark[data-base='taupe'] {
620
+ --background: oklch(0.147 0.004 49.3);
621
+ --foreground: oklch(0.986 0.002 67.8);
622
+ --card: oklch(0.214 0.009 43.1);
623
+ --card-foreground: oklch(0.986 0.002 67.8);
624
+ --popover: oklch(0.214 0.009 43.1);
625
+ --popover-foreground: oklch(0.986 0.002 67.8);
626
+ --primary: oklch(0.922 0.005 34.3);
627
+ --primary-foreground: oklch(0.214 0.009 43.1);
628
+ --secondary: oklch(0.268 0.011 36.5);
629
+ --secondary-foreground: oklch(0.986 0.002 67.8);
630
+ --muted: oklch(0.268 0.011 36.5);
631
+ --muted-foreground: oklch(0.714 0.014 41.2);
632
+ --accent: oklch(0.268 0.011 36.5);
633
+ --accent-foreground: oklch(0.986 0.002 67.8);
634
+ --destructive: oklch(0.704 0.191 22.216);
635
+ --border: oklch(1 0 0 / 10%);
636
+ --input: oklch(1 0 0 / 15%);
637
+ --ring: oklch(0.547 0.021 43.1);
638
+ --chart-1: oklch(0.868 0.007 39.5);
639
+ --chart-2: oklch(0.547 0.021 43.1);
640
+ --chart-3: oklch(0.438 0.017 39.3);
641
+ --chart-4: oklch(0.367 0.016 35.7);
642
+ --chart-5: oklch(0.268 0.011 36.5);
643
+ --sidebar: oklch(0.214 0.009 43.1);
644
+ --sidebar-foreground: oklch(0.986 0.002 67.8);
645
+ --sidebar-primary: oklch(0.488 0.243 264.376);
646
+ --sidebar-primary-foreground: oklch(0.986 0.002 67.8);
647
+ --sidebar-accent: oklch(0.268 0.011 36.5);
648
+ --sidebar-accent-foreground: oklch(0.986 0.002 67.8);
649
+ --sidebar-border: oklch(1 0 0 / 10%);
650
+ --sidebar-ring: oklch(0.547 0.021 43.1);
651
+ }
652
+
653
+ /* Slate */
654
+ [data-base='slate'] {
655
+ --background: oklch(1 0 0);
656
+ --foreground: oklch(0.129 0.042 264.695);
657
+ --card: oklch(1 0 0);
658
+ --card-foreground: oklch(0.129 0.042 264.695);
659
+ --popover: oklch(1 0 0);
660
+ --popover-foreground: oklch(0.129 0.042 264.695);
661
+ --primary: oklch(0.208 0.042 265.755);
662
+ --primary-foreground: oklch(0.984 0.003 247.858);
663
+ --secondary: oklch(0.968 0.007 247.896);
664
+ --secondary-foreground: oklch(0.208 0.042 265.755);
665
+ --muted: oklch(0.968 0.007 247.896);
666
+ --muted-foreground: oklch(0.49 0.04 257.417);
667
+ --accent: oklch(0.968 0.007 247.896);
668
+ --accent-foreground: oklch(0.208 0.042 265.755);
669
+ --destructive: oklch(0.55 0.238 27.325);
670
+ --border: oklch(0.929 0.013 255.508);
671
+ --input: oklch(0.929 0.013 255.508);
672
+ --ring: oklch(0.704 0.04 256.788);
673
+ --chart-1: oklch(0.646 0.222 41.116);
674
+ --chart-2: oklch(0.6 0.118 184.704);
675
+ --chart-3: oklch(0.398 0.07 227.392);
676
+ --chart-4: oklch(0.828 0.189 84.429);
677
+ --chart-5: oklch(0.769 0.188 70.08);
678
+ --sidebar: oklch(0.984 0.003 247.858);
679
+ --sidebar-foreground: oklch(0.129 0.042 264.695);
680
+ --sidebar-primary: oklch(0.208 0.042 265.755);
681
+ --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
682
+ --sidebar-accent: oklch(0.968 0.007 247.896);
683
+ --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
684
+ --sidebar-border: oklch(0.929 0.013 255.508);
685
+ --sidebar-ring: oklch(0.704 0.04 256.788);
686
+ }
687
+ .dark[data-base='slate'] {
688
+ --background: oklch(0.129 0.042 264.695);
689
+ --foreground: oklch(0.984 0.003 247.858);
690
+ --card: oklch(0.208 0.042 265.755);
691
+ --card-foreground: oklch(0.984 0.003 247.858);
692
+ --popover: oklch(0.208 0.042 265.755);
693
+ --popover-foreground: oklch(0.984 0.003 247.858);
694
+ --primary: oklch(0.929 0.013 255.508);
695
+ --primary-foreground: oklch(0.208 0.042 265.755);
696
+ --secondary: oklch(0.279 0.041 260.031);
697
+ --secondary-foreground: oklch(0.984 0.003 247.858);
698
+ --muted: oklch(0.279 0.041 260.031);
699
+ --muted-foreground: oklch(0.704 0.04 256.788);
700
+ --accent: oklch(0.279 0.041 260.031);
701
+ --accent-foreground: oklch(0.984 0.003 247.858);
702
+ --destructive: oklch(0.704 0.191 22.216);
703
+ --border: oklch(1 0 0 / 10%);
704
+ --input: oklch(1 0 0 / 15%);
705
+ --ring: oklch(0.551 0.027 264.364);
706
+ --chart-1: oklch(0.488 0.243 264.376);
707
+ --chart-2: oklch(0.696 0.17 162.48);
708
+ --chart-3: oklch(0.769 0.188 70.08);
709
+ --chart-4: oklch(0.627 0.265 303.9);
710
+ --chart-5: oklch(0.645 0.246 16.439);
711
+ --sidebar: oklch(0.208 0.042 265.755);
712
+ --sidebar-foreground: oklch(0.984 0.003 247.858);
713
+ --sidebar-primary: oklch(0.488 0.243 264.376);
714
+ --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
715
+ --sidebar-accent: oklch(0.279 0.041 260.031);
716
+ --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
717
+ --sidebar-border: oklch(1 0 0 / 10%);
718
+ --sidebar-ring: oklch(0.551 0.027 264.364);
719
+ }
720
+
721
+ /* Gray */
722
+ [data-base='gray'] {
723
+ --background: oklch(1 0 0);
724
+ --foreground: oklch(0.13 0.028 261.692);
725
+ --card: oklch(1 0 0);
726
+ --card-foreground: oklch(0.13 0.028 261.692);
727
+ --popover: oklch(1 0 0);
728
+ --popover-foreground: oklch(0.13 0.028 261.692);
729
+ --primary: oklch(0.21 0.034 264.665);
730
+ --primary-foreground: oklch(0.985 0.002 247.839);
731
+ --secondary: oklch(0.967 0.003 264.542);
732
+ --secondary-foreground: oklch(0.21 0.034 264.665);
733
+ --muted: oklch(0.967 0.003 264.542);
734
+ --muted-foreground: oklch(0.49 0.027 264.364);
735
+ --accent: oklch(0.967 0.003 264.542);
736
+ --accent-foreground: oklch(0.21 0.034 264.665);
737
+ --destructive: oklch(0.55 0.238 27.325);
738
+ --border: oklch(0.928 0.006 264.531);
739
+ --input: oklch(0.928 0.006 264.531);
740
+ --ring: oklch(0.707 0.022 261.325);
741
+ --chart-1: oklch(0.646 0.222 41.116);
742
+ --chart-2: oklch(0.6 0.118 184.704);
743
+ --chart-3: oklch(0.398 0.07 227.392);
744
+ --chart-4: oklch(0.828 0.189 84.429);
745
+ --chart-5: oklch(0.769 0.188 70.08);
746
+ --sidebar: oklch(0.985 0.002 247.839);
747
+ --sidebar-foreground: oklch(0.13 0.028 261.692);
748
+ --sidebar-primary: oklch(0.21 0.034 264.665);
749
+ --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
750
+ --sidebar-accent: oklch(0.967 0.003 264.542);
751
+ --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
752
+ --sidebar-border: oklch(0.928 0.006 264.531);
753
+ --sidebar-ring: oklch(0.707 0.022 261.325);
754
+ }
755
+ .dark[data-base='gray'] {
756
+ --background: oklch(0.13 0.028 261.692);
757
+ --foreground: oklch(0.985 0.002 247.839);
758
+ --card: oklch(0.21 0.034 264.665);
759
+ --card-foreground: oklch(0.985 0.002 247.839);
760
+ --popover: oklch(0.21 0.034 264.665);
761
+ --popover-foreground: oklch(0.985 0.002 247.839);
762
+ --primary: oklch(0.928 0.006 264.531);
763
+ --primary-foreground: oklch(0.21 0.034 264.665);
764
+ --secondary: oklch(0.278 0.033 256.848);
765
+ --secondary-foreground: oklch(0.985 0.002 247.839);
766
+ --muted: oklch(0.278 0.033 256.848);
767
+ --muted-foreground: oklch(0.707 0.022 261.325);
768
+ --accent: oklch(0.278 0.033 256.848);
769
+ --accent-foreground: oklch(0.985 0.002 247.839);
770
+ --destructive: oklch(0.704 0.191 22.216);
771
+ --border: oklch(1 0 0 / 10%);
772
+ --input: oklch(1 0 0 / 15%);
773
+ --ring: oklch(0.551 0.027 264.364);
774
+ --chart-1: oklch(0.488 0.243 264.376);
775
+ --chart-2: oklch(0.696 0.17 162.48);
776
+ --chart-3: oklch(0.769 0.188 70.08);
777
+ --chart-4: oklch(0.627 0.265 303.9);
778
+ --chart-5: oklch(0.645 0.246 16.439);
779
+ --sidebar: oklch(0.21 0.034 264.665);
780
+ --sidebar-foreground: oklch(0.985 0.002 247.839);
781
+ --sidebar-primary: oklch(0.488 0.243 264.376);
782
+ --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
783
+ --sidebar-accent: oklch(0.278 0.033 256.848);
784
+ --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
785
+ --sidebar-border: oklch(1 0 0 / 10%);
786
+ --sidebar-ring: oklch(0.551 0.027 264.364);
787
+ }
788
+
789
+ /* ========================================================================== */
790
+ /* DIMENSION 2 — Accent / theme color. Switch: <html data-theme="…"> */
791
+ /* Overrides primary / secondary / charts / sidebar-primary. Placed AFTER */
792
+ /* base presets so it wins on shared tokens (equal specificity, source order). */
793
+ /* ========================================================================== */
794
+
795
+ /* Amber */
796
+ [data-theme='amber'] {
797
+ --primary: oklch(0.555 0.163 48.998);
798
+ --primary-foreground: oklch(0.987 0.022 95.277);
799
+ --secondary: oklch(0.967 0.001 286.375);
800
+ --secondary-foreground: oklch(0.21 0.006 285.885);
801
+ --chart-1: oklch(0.879 0.169 91.605);
802
+ --chart-2: oklch(0.769 0.188 70.08);
803
+ --chart-3: oklch(0.666 0.179 58.318);
804
+ --chart-4: oklch(0.555 0.163 48.998);
805
+ --chart-5: oklch(0.473 0.137 46.201);
806
+ --sidebar-primary: oklch(0.666 0.179 58.318);
807
+ --sidebar-primary-foreground: oklch(0.987 0.022 95.277);
808
+ }
809
+ .dark[data-theme='amber'] {
810
+ --primary: oklch(0.473 0.137 46.201);
811
+ --primary-foreground: oklch(0.987 0.022 95.277);
812
+ --secondary: oklch(0.274 0.006 286.033);
813
+ --secondary-foreground: oklch(0.985 0 0);
814
+ --chart-1: oklch(0.879 0.169 91.605);
815
+ --chart-2: oklch(0.769 0.188 70.08);
816
+ --chart-3: oklch(0.666 0.179 58.318);
817
+ --chart-4: oklch(0.555 0.163 48.998);
818
+ --chart-5: oklch(0.473 0.137 46.201);
819
+ --sidebar-primary: oklch(0.769 0.188 70.08);
820
+ --sidebar-primary-foreground: oklch(0.279 0.077 45.635);
821
+ }
822
+
823
+ /* Blue */
824
+ [data-theme='blue'] {
825
+ --primary: oklch(0.488 0.243 264.376);
826
+ --primary-foreground: oklch(0.97 0.014 254.604);
827
+ --secondary: oklch(0.967 0.001 286.375);
828
+ --secondary-foreground: oklch(0.21 0.006 285.885);
829
+ --chart-1: oklch(0.809 0.105 251.813);
830
+ --chart-2: oklch(0.623 0.214 259.815);
831
+ --chart-3: oklch(0.546 0.245 262.881);
832
+ --chart-4: oklch(0.488 0.243 264.376);
833
+ --chart-5: oklch(0.424 0.199 265.638);
834
+ --sidebar-primary: oklch(0.546 0.245 262.881);
835
+ --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
836
+ }
837
+ .dark[data-theme='blue'] {
838
+ --primary: oklch(0.424 0.199 265.638);
839
+ --primary-foreground: oklch(0.97 0.014 254.604);
840
+ --secondary: oklch(0.274 0.006 286.033);
841
+ --secondary-foreground: oklch(0.985 0 0);
842
+ --chart-1: oklch(0.809 0.105 251.813);
843
+ --chart-2: oklch(0.623 0.214 259.815);
844
+ --chart-3: oklch(0.546 0.245 262.881);
845
+ --chart-4: oklch(0.488 0.243 264.376);
846
+ --chart-5: oklch(0.424 0.199 265.638);
847
+ --sidebar-primary: oklch(0.623 0.214 259.815);
848
+ --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
849
+ }
850
+
851
+ /* Cyan */
852
+ [data-theme='cyan'] {
853
+ --primary: oklch(0.52 0.105 223.128);
854
+ --primary-foreground: oklch(0.984 0.019 200.873);
855
+ --secondary: oklch(0.967 0.001 286.375);
856
+ --secondary-foreground: oklch(0.21 0.006 285.885);
857
+ --chart-1: oklch(0.865 0.127 207.078);
858
+ --chart-2: oklch(0.715 0.143 215.221);
859
+ --chart-3: oklch(0.609 0.126 221.723);
860
+ --chart-4: oklch(0.52 0.105 223.128);
861
+ --chart-5: oklch(0.45 0.085 224.283);
862
+ --sidebar-primary: oklch(0.609 0.126 221.723);
863
+ --sidebar-primary-foreground: oklch(0.984 0.019 200.873);
864
+ }
865
+ .dark[data-theme='cyan'] {
866
+ --primary: oklch(0.45 0.085 224.283);
867
+ --primary-foreground: oklch(0.984 0.019 200.873);
868
+ --secondary: oklch(0.274 0.006 286.033);
869
+ --secondary-foreground: oklch(0.985 0 0);
870
+ --chart-1: oklch(0.865 0.127 207.078);
871
+ --chart-2: oklch(0.715 0.143 215.221);
872
+ --chart-3: oklch(0.609 0.126 221.723);
873
+ --chart-4: oklch(0.52 0.105 223.128);
874
+ --chart-5: oklch(0.45 0.085 224.283);
875
+ --sidebar-primary: oklch(0.715 0.143 215.221);
876
+ --sidebar-primary-foreground: oklch(0.302 0.056 229.695);
877
+ }
878
+
879
+ /* Emerald */
880
+ [data-theme='emerald'] {
881
+ --primary: oklch(0.508 0.118 165.612);
882
+ --primary-foreground: oklch(0.979 0.021 166.113);
883
+ --secondary: oklch(0.967 0.001 286.375);
884
+ --secondary-foreground: oklch(0.21 0.006 285.885);
885
+ --chart-1: oklch(0.845 0.143 164.978);
886
+ --chart-2: oklch(0.696 0.17 162.48);
887
+ --chart-3: oklch(0.596 0.145 163.225);
888
+ --chart-4: oklch(0.508 0.118 165.612);
889
+ --chart-5: oklch(0.432 0.095 166.913);
890
+ --sidebar-primary: oklch(0.596 0.145 163.225);
891
+ --sidebar-primary-foreground: oklch(0.979 0.021 166.113);
892
+ }
893
+ .dark[data-theme='emerald'] {
894
+ --primary: oklch(0.432 0.095 166.913);
895
+ --primary-foreground: oklch(0.979 0.021 166.113);
896
+ --secondary: oklch(0.274 0.006 286.033);
897
+ --secondary-foreground: oklch(0.985 0 0);
898
+ --chart-1: oklch(0.845 0.143 164.978);
899
+ --chart-2: oklch(0.696 0.17 162.48);
900
+ --chart-3: oklch(0.596 0.145 163.225);
901
+ --chart-4: oklch(0.508 0.118 165.612);
902
+ --chart-5: oklch(0.432 0.095 166.913);
903
+ --sidebar-primary: oklch(0.696 0.17 162.48);
904
+ --sidebar-primary-foreground: oklch(0.262 0.051 172.552);
905
+ }
906
+
907
+ /* Fuchsia */
908
+ [data-theme='fuchsia'] {
909
+ --primary: oklch(0.518 0.253 323.949);
910
+ --primary-foreground: oklch(0.977 0.017 320.058);
911
+ --secondary: oklch(0.967 0.001 286.375);
912
+ --secondary-foreground: oklch(0.21 0.006 285.885);
913
+ --chart-1: oklch(0.833 0.145 321.434);
914
+ --chart-2: oklch(0.667 0.295 322.15);
915
+ --chart-3: oklch(0.591 0.293 322.896);
916
+ --chart-4: oklch(0.518 0.253 323.949);
917
+ --chart-5: oklch(0.452 0.211 324.591);
918
+ --sidebar-primary: oklch(0.591 0.293 322.896);
919
+ --sidebar-primary-foreground: oklch(0.977 0.017 320.058);
920
+ }
921
+ .dark[data-theme='fuchsia'] {
922
+ --primary: oklch(0.452 0.211 324.591);
923
+ --primary-foreground: oklch(0.977 0.017 320.058);
924
+ --secondary: oklch(0.274 0.006 286.033);
925
+ --secondary-foreground: oklch(0.985 0 0);
926
+ --chart-1: oklch(0.833 0.145 321.434);
927
+ --chart-2: oklch(0.667 0.295 322.15);
928
+ --chart-3: oklch(0.591 0.293 322.896);
929
+ --chart-4: oklch(0.518 0.253 323.949);
930
+ --chart-5: oklch(0.452 0.211 324.591);
931
+ --sidebar-primary: oklch(0.667 0.295 322.15);
932
+ --sidebar-primary-foreground: oklch(0.977 0.017 320.058);
933
+ }
934
+
935
+ /* Green */
936
+ [data-theme='green'] {
937
+ --primary: oklch(0.527 0.154 150.069);
938
+ --primary-foreground: oklch(0.982 0.018 155.826);
939
+ --secondary: oklch(0.967 0.001 286.375);
940
+ --secondary-foreground: oklch(0.21 0.006 285.885);
941
+ --chart-1: oklch(0.871 0.15 154.449);
942
+ --chart-2: oklch(0.723 0.219 149.579);
943
+ --chart-3: oklch(0.627 0.194 149.214);
944
+ --chart-4: oklch(0.527 0.154 150.069);
945
+ --chart-5: oklch(0.448 0.119 151.328);
946
+ --sidebar-primary: oklch(0.627 0.194 149.214);
947
+ --sidebar-primary-foreground: oklch(0.982 0.018 155.826);
948
+ }
949
+ .dark[data-theme='green'] {
950
+ --primary: oklch(0.448 0.119 151.328);
951
+ --primary-foreground: oklch(0.982 0.018 155.826);
952
+ --secondary: oklch(0.274 0.006 286.033);
953
+ --secondary-foreground: oklch(0.985 0 0);
954
+ --chart-1: oklch(0.871 0.15 154.449);
955
+ --chart-2: oklch(0.723 0.219 149.579);
956
+ --chart-3: oklch(0.627 0.194 149.214);
957
+ --chart-4: oklch(0.527 0.154 150.069);
958
+ --chart-5: oklch(0.448 0.119 151.328);
959
+ --sidebar-primary: oklch(0.723 0.219 149.579);
960
+ --sidebar-primary-foreground: oklch(0.982 0.018 155.826);
961
+ }
962
+
963
+ /* Indigo */
964
+ [data-theme='indigo'] {
965
+ --primary: oklch(0.457 0.24 277.023);
966
+ --primary-foreground: oklch(0.962 0.018 272.314);
967
+ --secondary: oklch(0.967 0.001 286.375);
968
+ --secondary-foreground: oklch(0.21 0.006 285.885);
969
+ --chart-1: oklch(0.785 0.115 274.713);
970
+ --chart-2: oklch(0.585 0.233 277.117);
971
+ --chart-3: oklch(0.511 0.262 276.966);
972
+ --chart-4: oklch(0.457 0.24 277.023);
973
+ --chart-5: oklch(0.398 0.195 277.366);
974
+ --sidebar-primary: oklch(0.511 0.262 276.966);
975
+ --sidebar-primary-foreground: oklch(0.962 0.018 272.314);
976
+ }
977
+ .dark[data-theme='indigo'] {
978
+ --primary: oklch(0.398 0.195 277.366);
979
+ --primary-foreground: oklch(0.962 0.018 272.314);
980
+ --secondary: oklch(0.274 0.006 286.033);
981
+ --secondary-foreground: oklch(0.985 0 0);
982
+ --chart-1: oklch(0.785 0.115 274.713);
983
+ --chart-2: oklch(0.585 0.233 277.117);
984
+ --chart-3: oklch(0.511 0.262 276.966);
985
+ --chart-4: oklch(0.457 0.24 277.023);
986
+ --chart-5: oklch(0.398 0.195 277.366);
987
+ --sidebar-primary: oklch(0.585 0.233 277.117);
988
+ --sidebar-primary-foreground: oklch(0.962 0.018 272.314);
989
+ }
990
+
991
+ /* Lime */
992
+ [data-theme='lime'] {
993
+ --primary: oklch(0.841 0.238 128.85);
994
+ --primary-foreground: oklch(0.405 0.101 131.063);
995
+ --secondary: oklch(0.967 0.001 286.375);
996
+ --secondary-foreground: oklch(0.21 0.006 285.885);
997
+ --chart-1: oklch(0.897 0.196 126.665);
998
+ --chart-2: oklch(0.768 0.233 130.85);
999
+ --chart-3: oklch(0.648 0.2 131.684);
1000
+ --chart-4: oklch(0.532 0.157 131.589);
1001
+ --chart-5: oklch(0.453 0.124 130.933);
1002
+ --sidebar-primary: oklch(0.648 0.2 131.684);
1003
+ --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
1004
+ }
1005
+ .dark[data-theme='lime'] {
1006
+ --primary: oklch(0.768 0.233 130.85);
1007
+ --primary-foreground: oklch(0.405 0.101 131.063);
1008
+ --secondary: oklch(0.274 0.006 286.033);
1009
+ --secondary-foreground: oklch(0.985 0 0);
1010
+ --chart-1: oklch(0.897 0.196 126.665);
1011
+ --chart-2: oklch(0.768 0.233 130.85);
1012
+ --chart-3: oklch(0.648 0.2 131.684);
1013
+ --chart-4: oklch(0.532 0.157 131.589);
1014
+ --chart-5: oklch(0.453 0.124 130.933);
1015
+ --sidebar-primary: oklch(0.768 0.233 130.85);
1016
+ --sidebar-primary-foreground: oklch(0.274 0.072 132.109);
1017
+ }
1018
+
1019
+ /* Orange */
1020
+ [data-theme='orange'] {
1021
+ --primary: oklch(0.553 0.195 38.402);
1022
+ --primary-foreground: oklch(0.98 0.016 73.684);
1023
+ --secondary: oklch(0.967 0.001 286.375);
1024
+ --secondary-foreground: oklch(0.21 0.006 285.885);
1025
+ --chart-1: oklch(0.837 0.128 66.29);
1026
+ --chart-2: oklch(0.705 0.213 47.604);
1027
+ --chart-3: oklch(0.646 0.222 41.116);
1028
+ --chart-4: oklch(0.553 0.195 38.402);
1029
+ --chart-5: oklch(0.47 0.157 37.304);
1030
+ --sidebar-primary: oklch(0.646 0.222 41.116);
1031
+ --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
1032
+ }
1033
+ .dark[data-theme='orange'] {
1034
+ --primary: oklch(0.47 0.157 37.304);
1035
+ --primary-foreground: oklch(0.98 0.016 73.684);
1036
+ --secondary: oklch(0.274 0.006 286.033);
1037
+ --secondary-foreground: oklch(0.985 0 0);
1038
+ --chart-1: oklch(0.837 0.128 66.29);
1039
+ --chart-2: oklch(0.705 0.213 47.604);
1040
+ --chart-3: oklch(0.646 0.222 41.116);
1041
+ --chart-4: oklch(0.553 0.195 38.402);
1042
+ --chart-5: oklch(0.47 0.157 37.304);
1043
+ --sidebar-primary: oklch(0.705 0.213 47.604);
1044
+ --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
1045
+ }
1046
+
1047
+ /* Pink */
1048
+ [data-theme='pink'] {
1049
+ --primary: oklch(0.525 0.223 3.958);
1050
+ --primary-foreground: oklch(0.971 0.014 343.198);
1051
+ --secondary: oklch(0.967 0.001 286.375);
1052
+ --secondary-foreground: oklch(0.21 0.006 285.885);
1053
+ --chart-1: oklch(0.823 0.12 346.018);
1054
+ --chart-2: oklch(0.656 0.241 354.308);
1055
+ --chart-3: oklch(0.592 0.249 0.584);
1056
+ --chart-4: oklch(0.525 0.223 3.958);
1057
+ --chart-5: oklch(0.459 0.187 3.815);
1058
+ --sidebar-primary: oklch(0.592 0.249 0.584);
1059
+ --sidebar-primary-foreground: oklch(0.971 0.014 343.198);
1060
+ }
1061
+ .dark[data-theme='pink'] {
1062
+ --primary: oklch(0.459 0.187 3.815);
1063
+ --primary-foreground: oklch(0.971 0.014 343.198);
1064
+ --secondary: oklch(0.274 0.006 286.033);
1065
+ --secondary-foreground: oklch(0.985 0 0);
1066
+ --chart-1: oklch(0.823 0.12 346.018);
1067
+ --chart-2: oklch(0.656 0.241 354.308);
1068
+ --chart-3: oklch(0.592 0.249 0.584);
1069
+ --chart-4: oklch(0.525 0.223 3.958);
1070
+ --chart-5: oklch(0.459 0.187 3.815);
1071
+ --sidebar-primary: oklch(0.656 0.241 354.308);
1072
+ --sidebar-primary-foreground: oklch(0.971 0.014 343.198);
1073
+ }
1074
+
1075
+ /* Purple */
1076
+ [data-theme='purple'] {
1077
+ --primary: oklch(0.496 0.265 301.924);
1078
+ --primary-foreground: oklch(0.977 0.014 308.299);
1079
+ --secondary: oklch(0.967 0.001 286.375);
1080
+ --secondary-foreground: oklch(0.21 0.006 285.885);
1081
+ --chart-1: oklch(0.827 0.119 306.383);
1082
+ --chart-2: oklch(0.627 0.265 303.9);
1083
+ --chart-3: oklch(0.558 0.288 302.321);
1084
+ --chart-4: oklch(0.496 0.265 301.924);
1085
+ --chart-5: oklch(0.438 0.218 303.724);
1086
+ --sidebar-primary: oklch(0.558 0.288 302.321);
1087
+ --sidebar-primary-foreground: oklch(0.977 0.014 308.299);
1088
+ }
1089
+ .dark[data-theme='purple'] {
1090
+ --primary: oklch(0.438 0.218 303.724);
1091
+ --primary-foreground: oklch(0.977 0.014 308.299);
1092
+ --secondary: oklch(0.274 0.006 286.033);
1093
+ --secondary-foreground: oklch(0.985 0 0);
1094
+ --chart-1: oklch(0.827 0.119 306.383);
1095
+ --chart-2: oklch(0.627 0.265 303.9);
1096
+ --chart-3: oklch(0.558 0.288 302.321);
1097
+ --chart-4: oklch(0.496 0.265 301.924);
1098
+ --chart-5: oklch(0.438 0.218 303.724);
1099
+ --sidebar-primary: oklch(0.627 0.265 303.9);
1100
+ --sidebar-primary-foreground: oklch(0.977 0.014 308.299);
1101
+ }
1102
+
1103
+ /* Red */
1104
+ [data-theme='red'] {
1105
+ --primary: oklch(0.505 0.213 27.518);
1106
+ --primary-foreground: oklch(0.971 0.013 17.38);
1107
+ --secondary: oklch(0.967 0.001 286.375);
1108
+ --secondary-foreground: oklch(0.21 0.006 285.885);
1109
+ --chart-1: oklch(0.808 0.114 19.571);
1110
+ --chart-2: oklch(0.637 0.237 25.331);
1111
+ --chart-3: oklch(0.577 0.245 27.325);
1112
+ --chart-4: oklch(0.505 0.213 27.518);
1113
+ --chart-5: oklch(0.444 0.177 26.899);
1114
+ --sidebar-primary: oklch(0.577 0.245 27.325);
1115
+ --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
1116
+ }
1117
+ .dark[data-theme='red'] {
1118
+ --primary: oklch(0.444 0.177 26.899);
1119
+ --primary-foreground: oklch(0.971 0.013 17.38);
1120
+ --secondary: oklch(0.274 0.006 286.033);
1121
+ --secondary-foreground: oklch(0.985 0 0);
1122
+ --chart-1: oklch(0.808 0.114 19.571);
1123
+ --chart-2: oklch(0.637 0.237 25.331);
1124
+ --chart-3: oklch(0.577 0.245 27.325);
1125
+ --chart-4: oklch(0.505 0.213 27.518);
1126
+ --chart-5: oklch(0.444 0.177 26.899);
1127
+ --sidebar-primary: oklch(0.637 0.237 25.331);
1128
+ --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
1129
+ }
1130
+
1131
+ /* Rose */
1132
+ [data-theme='rose'] {
1133
+ --primary: oklch(0.514 0.222 16.935);
1134
+ --primary-foreground: oklch(0.969 0.015 12.422);
1135
+ --secondary: oklch(0.967 0.001 286.375);
1136
+ --secondary-foreground: oklch(0.21 0.006 285.885);
1137
+ --chart-1: oklch(0.81 0.117 11.638);
1138
+ --chart-2: oklch(0.645 0.246 16.439);
1139
+ --chart-3: oklch(0.586 0.253 17.585);
1140
+ --chart-4: oklch(0.514 0.222 16.935);
1141
+ --chart-5: oklch(0.455 0.188 13.697);
1142
+ --sidebar-primary: oklch(0.586 0.253 17.585);
1143
+ --sidebar-primary-foreground: oklch(0.969 0.015 12.422);
1144
+ }
1145
+ .dark[data-theme='rose'] {
1146
+ --primary: oklch(0.455 0.188 13.697);
1147
+ --primary-foreground: oklch(0.969 0.015 12.422);
1148
+ --secondary: oklch(0.274 0.006 286.033);
1149
+ --secondary-foreground: oklch(0.985 0 0);
1150
+ --chart-1: oklch(0.81 0.117 11.638);
1151
+ --chart-2: oklch(0.645 0.246 16.439);
1152
+ --chart-3: oklch(0.586 0.253 17.585);
1153
+ --chart-4: oklch(0.514 0.222 16.935);
1154
+ --chart-5: oklch(0.455 0.188 13.697);
1155
+ --sidebar: oklch(0.21 0.006 285.885);
1156
+ --sidebar-primary: oklch(0.645 0.246 16.439);
1157
+ --sidebar-primary-foreground: oklch(0.969 0.015 12.422);
1158
+ }
1159
+
1160
+ /* Sky */
1161
+ [data-theme='sky'] {
1162
+ --primary: oklch(0.5 0.134 242.749);
1163
+ --primary-foreground: oklch(0.977 0.013 236.62);
1164
+ --secondary: oklch(0.967 0.001 286.375);
1165
+ --secondary-foreground: oklch(0.21 0.006 285.885);
1166
+ --chart-1: oklch(0.828 0.111 230.318);
1167
+ --chart-2: oklch(0.685 0.169 237.323);
1168
+ --chart-3: oklch(0.588 0.158 241.966);
1169
+ --chart-4: oklch(0.5 0.134 242.749);
1170
+ --chart-5: oklch(0.443 0.11 240.79);
1171
+ --sidebar-primary: oklch(0.588 0.158 241.966);
1172
+ --sidebar-primary-foreground: oklch(0.977 0.013 236.62);
1173
+ }
1174
+ .dark[data-theme='sky'] {
1175
+ --primary: oklch(0.443 0.11 240.79);
1176
+ --primary-foreground: oklch(0.977 0.013 236.62);
1177
+ --secondary: oklch(0.274 0.006 286.033);
1178
+ --secondary-foreground: oklch(0.985 0 0);
1179
+ --chart-1: oklch(0.828 0.111 230.318);
1180
+ --chart-2: oklch(0.685 0.169 237.323);
1181
+ --chart-3: oklch(0.588 0.158 241.966);
1182
+ --chart-4: oklch(0.5 0.134 242.749);
1183
+ --chart-5: oklch(0.443 0.11 240.79);
1184
+ --sidebar-primary: oklch(0.685 0.169 237.323);
1185
+ --sidebar-primary-foreground: oklch(0.293 0.066 243.157);
1186
+ }
1187
+
1188
+ /* Teal */
1189
+ [data-theme='teal'] {
1190
+ --primary: oklch(0.511 0.096 186.391);
1191
+ --primary-foreground: oklch(0.984 0.014 180.72);
1192
+ --secondary: oklch(0.967 0.001 286.375);
1193
+ --secondary-foreground: oklch(0.21 0.006 285.885);
1194
+ --chart-1: oklch(0.855 0.138 181.071);
1195
+ --chart-2: oklch(0.704 0.14 182.503);
1196
+ --chart-3: oklch(0.6 0.118 184.704);
1197
+ --chart-4: oklch(0.511 0.096 186.391);
1198
+ --chart-5: oklch(0.437 0.078 188.216);
1199
+ --sidebar-primary: oklch(0.6 0.118 184.704);
1200
+ --sidebar-primary-foreground: oklch(0.984 0.014 180.72);
1201
+ }
1202
+ .dark[data-theme='teal'] {
1203
+ --primary: oklch(0.437 0.078 188.216);
1204
+ --primary-foreground: oklch(0.984 0.014 180.72);
1205
+ --secondary: oklch(0.274 0.006 286.033);
1206
+ --secondary-foreground: oklch(0.985 0 0);
1207
+ --chart-1: oklch(0.855 0.138 181.071);
1208
+ --chart-2: oklch(0.704 0.14 182.503);
1209
+ --chart-3: oklch(0.6 0.118 184.704);
1210
+ --chart-4: oklch(0.511 0.096 186.391);
1211
+ --chart-5: oklch(0.437 0.078 188.216);
1212
+ --sidebar-primary: oklch(0.704 0.14 182.503);
1213
+ --sidebar-primary-foreground: oklch(0.277 0.046 192.524);
1214
+ }
1215
+
1216
+ /* Violet */
1217
+ [data-theme='violet'] {
1218
+ --primary: oklch(0.491 0.27 292.581);
1219
+ --primary-foreground: oklch(0.969 0.016 293.756);
1220
+ --secondary: oklch(0.967 0.001 286.375);
1221
+ --secondary-foreground: oklch(0.21 0.006 285.885);
1222
+ --chart-1: oklch(0.811 0.111 293.571);
1223
+ --chart-2: oklch(0.606 0.25 292.717);
1224
+ --chart-3: oklch(0.541 0.281 293.009);
1225
+ --chart-4: oklch(0.491 0.27 292.581);
1226
+ --chart-5: oklch(0.432 0.232 292.759);
1227
+ --sidebar-primary: oklch(0.541 0.281 293.009);
1228
+ --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
1229
+ }
1230
+ .dark[data-theme='violet'] {
1231
+ --primary: oklch(0.432 0.232 292.759);
1232
+ --primary-foreground: oklch(0.969 0.016 293.756);
1233
+ --secondary: oklch(0.274 0.006 286.033);
1234
+ --secondary-foreground: oklch(0.985 0 0);
1235
+ --chart-1: oklch(0.811 0.111 293.571);
1236
+ --chart-2: oklch(0.606 0.25 292.717);
1237
+ --chart-3: oklch(0.541 0.281 293.009);
1238
+ --chart-4: oklch(0.491 0.27 292.581);
1239
+ --chart-5: oklch(0.432 0.232 292.759);
1240
+ --sidebar-primary: oklch(0.606 0.25 292.717);
1241
+ --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
1242
+ }
1243
+
1244
+ /* Yellow */
1245
+ [data-theme='yellow'] {
1246
+ --primary: oklch(0.852 0.199 91.936);
1247
+ --primary-foreground: oklch(0.421 0.095 57.708);
1248
+ --secondary: oklch(0.967 0.001 286.375);
1249
+ --secondary-foreground: oklch(0.21 0.006 285.885);
1250
+ --chart-1: oklch(0.905 0.182 98.111);
1251
+ --chart-2: oklch(0.795 0.184 86.047);
1252
+ --chart-3: oklch(0.681 0.162 75.834);
1253
+ --chart-4: oklch(0.554 0.135 66.442);
1254
+ --chart-5: oklch(0.476 0.114 61.907);
1255
+ --sidebar-primary: oklch(0.681 0.162 75.834);
1256
+ --sidebar-primary-foreground: oklch(0.987 0.026 102.212);
1257
+ }
1258
+ .dark[data-theme='yellow'] {
1259
+ --primary: oklch(0.795 0.184 86.047);
1260
+ --primary-foreground: oklch(0.421 0.095 57.708);
1261
+ --secondary: oklch(0.274 0.006 286.033);
1262
+ --secondary-foreground: oklch(0.985 0 0);
1263
+ --chart-1: oklch(0.905 0.182 98.111);
1264
+ --chart-2: oklch(0.795 0.184 86.047);
1265
+ --chart-3: oklch(0.681 0.162 75.834);
1266
+ --chart-4: oklch(0.554 0.135 66.442);
1267
+ --chart-5: oklch(0.476 0.114 61.907);
1268
+ --sidebar-primary: oklch(0.795 0.184 86.047);
1269
+ --sidebar-primary-foreground: oklch(0.987 0.026 102.212);
1270
+ }
1271
+
1272
+ /* ========================================================================== */
1273
+ /* DIMENSION 3 — Radius. Switch: <html data-radius="…"> */
1274
+ /* ========================================================================== */
1275
+ [data-radius='0'] {
1276
+ --radius: 0rem;
1277
+ }
1278
+ [data-radius='0.3'] {
1279
+ --radius: 0.3rem;
1280
+ }
1281
+ [data-radius='0.5'] {
1282
+ --radius: 0.5rem;
1283
+ }
1284
+ [data-radius='0.625'] {
1285
+ --radius: 0.625rem;
1286
+ }
1287
+ [data-radius='0.75'] {
1288
+ --radius: 0.75rem;
1289
+ }
1290
+ [data-radius='1'] {
1291
+ --radius: 1rem;
1292
+ }
1293
+
1294
+ /* ========================================================================== */
1295
+ /* DIMENSION 4 — Font family. Switch: <html data-font="…"> */
1296
+ /* ========================================================================== */
1297
+ [data-font='system'] {
1298
+ --font-sans:
1299
+ ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1300
+ }
1301
+ [data-font='serif'] {
1302
+ --font-sans: var(--font-serif);
1303
+ }
1304
+ [data-font='mono'] {
1305
+ --font-sans: var(--font-mono);
1306
+ }
1307
+ /* Webfont families (loaded via the Bunny <link> in the app layout). */
1308
+ [data-font='inter'] {
1309
+ --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
1310
+ }
1311
+ [data-font='geist'] {
1312
+ --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
1313
+ }
1314
+ [data-font='manrope'] {
1315
+ --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
1316
+ }
1317
+ [data-font='jakarta'] {
1318
+ --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
1319
+ }
1320
+ [data-font='space-grotesk'] {
1321
+ --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
1322
+ }
1323
+ [data-font='dm-sans'] {
1324
+ --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
1325
+ }
1326
+ [data-font='outfit'] {
1327
+ --font-sans: 'Outfit', ui-sans-serif, system-ui, sans-serif;
1328
+ }
1329
+ [data-font='sora'] {
1330
+ --font-sans: 'Sora', ui-sans-serif, system-ui, sans-serif;
1331
+ }
1332
+ [data-font='lora'] {
1333
+ --font-sans: 'Lora', ui-serif, Georgia, serif;
1334
+ }
1335
+ [data-font='source-serif'] {
1336
+ --font-sans: 'Source Serif 4', ui-serif, Georgia, serif;
1337
+ }
1338
+
1339
+ /* Heading font (h1–h6) — independent of body. data-font-heading="…" (default 'sans' = match body). */
1340
+ [data-font-heading='system'] {
1341
+ --font-heading:
1342
+ ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1343
+ }
1344
+ [data-font-heading='serif'] {
1345
+ --font-heading: var(--font-serif);
1346
+ }
1347
+ [data-font-heading='mono'] {
1348
+ --font-heading: var(--font-mono);
1349
+ }
1350
+ [data-font-heading='inter'] {
1351
+ --font-heading: 'Inter', ui-sans-serif, system-ui, sans-serif;
1352
+ }
1353
+ [data-font-heading='geist'] {
1354
+ --font-heading: 'Geist', ui-sans-serif, system-ui, sans-serif;
1355
+ }
1356
+ [data-font-heading='manrope'] {
1357
+ --font-heading: 'Manrope', ui-sans-serif, system-ui, sans-serif;
1358
+ }
1359
+ [data-font-heading='jakarta'] {
1360
+ --font-heading: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
1361
+ }
1362
+ [data-font-heading='space-grotesk'] {
1363
+ --font-heading: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
1364
+ }
1365
+ [data-font-heading='dm-sans'] {
1366
+ --font-heading: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
1367
+ }
1368
+ [data-font-heading='outfit'] {
1369
+ --font-heading: 'Outfit', ui-sans-serif, system-ui, sans-serif;
1370
+ }
1371
+ [data-font-heading='sora'] {
1372
+ --font-heading: 'Sora', ui-sans-serif, system-ui, sans-serif;
1373
+ }
1374
+ [data-font-heading='lora'] {
1375
+ --font-heading: 'Lora', ui-serif, Georgia, serif;
1376
+ }
1377
+ [data-font-heading='source-serif'] {
1378
+ --font-heading: 'Source Serif 4', ui-serif, Georgia, serif;
1379
+ }
1380
+
1381
+ /* ========================================================================== */
1382
+ /* DIMENSION 5 — Shadow intensity. Switch: <html data-shadow="…"> */
1383
+ /* ========================================================================== */
1384
+ [data-shadow='none'] {
1385
+ --shadow-2xs: none;
1386
+ --shadow-xs: none;
1387
+ --shadow-sm: none;
1388
+ --shadow: none;
1389
+ --shadow-md: none;
1390
+ --shadow-lg: none;
1391
+ --shadow-xl: none;
1392
+ --shadow-2xl: none;
1393
+ }
1394
+ [data-shadow='sm'] {
1395
+ --shadow-2xs: 0 1px 2px 0px oklch(0 0 0 / 0.03);
1396
+ --shadow-xs: 0 1px 2px 0px oklch(0 0 0 / 0.03);
1397
+ --shadow-sm: 0 1px 2px 0px oklch(0 0 0 / 0.06);
1398
+ --shadow: 0 1px 2px 0px oklch(0 0 0 / 0.06);
1399
+ --shadow-md: 0 2px 4px 0px oklch(0 0 0 / 0.06);
1400
+ --shadow-lg: 0 4px 6px 0px oklch(0 0 0 / 0.06);
1401
+ --shadow-xl: 0 8px 10px 0px oklch(0 0 0 / 0.06);
1402
+ --shadow-2xl: 0 12px 16px 0px oklch(0 0 0 / 0.12);
1403
+ }
1404
+ [data-shadow='lg'] {
1405
+ --shadow-2xs: 0 1px 3px 0px oklch(0 0 0 / 0.12);
1406
+ --shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.12);
1407
+ --shadow-sm: 0 2px 4px -1px oklch(0 0 0 / 0.18), 0 1px 2px -1px oklch(0 0 0 / 0.18);
1408
+ --shadow: 0 4px 6px -1px oklch(0 0 0 / 0.18), 0 2px 4px -2px oklch(0 0 0 / 0.18);
1409
+ --shadow-md: 0 6px 10px -2px oklch(0 0 0 / 0.18), 0 4px 6px -3px oklch(0 0 0 / 0.18);
1410
+ --shadow-lg: 0 12px 18px -3px oklch(0 0 0 / 0.18), 0 6px 8px -4px oklch(0 0 0 / 0.18);
1411
+ --shadow-xl: 0 20px 28px -5px oklch(0 0 0 / 0.18), 0 10px 12px -6px oklch(0 0 0 / 0.18);
1412
+ --shadow-2xl: 0 28px 56px -12px oklch(0 0 0 / 0.3);
1413
+ }
1414
+ [data-shadow='xl'] {
1415
+ --shadow-2xs: 0 2px 4px 0px oklch(0 0 0 / 0.16);
1416
+ --shadow-xs: 0 2px 4px 0px oklch(0 0 0 / 0.16);
1417
+ --shadow-sm: 0 4px 8px -1px oklch(0 0 0 / 0.24), 0 2px 4px -1px oklch(0 0 0 / 0.24);
1418
+ --shadow: 0 8px 12px -2px oklch(0 0 0 / 0.24), 0 4px 6px -2px oklch(0 0 0 / 0.24);
1419
+ --shadow-md: 0 12px 18px -3px oklch(0 0 0 / 0.24), 0 6px 8px -4px oklch(0 0 0 / 0.24);
1420
+ --shadow-lg: 0 20px 28px -5px oklch(0 0 0 / 0.24), 0 10px 12px -6px oklch(0 0 0 / 0.24);
1421
+ --shadow-xl: 0 28px 40px -8px oklch(0 0 0 / 0.24), 0 14px 18px -10px oklch(0 0 0 / 0.24);
1422
+ --shadow-2xl: 0 40px 72px -16px oklch(0 0 0 / 0.4);
1423
+ }
1424
+
1425
+ /* ========================================================================== */
1426
+ /* DIMENSION 6 — Spacing & letter-spacing. data-spacing / data-tracking */
1427
+ /* ========================================================================== */
1428
+ [data-spacing='compact'] {
1429
+ --spacing: 0.22rem;
1430
+ }
1431
+ [data-spacing='default'] {
1432
+ --spacing: 0.25rem;
1433
+ }
1434
+ [data-spacing='comfortable'] {
1435
+ --spacing: 0.28rem;
1436
+ }
1437
+
1438
+ [data-tracking='tight'] {
1439
+ --tracking-normal: -0.025em;
1440
+ }
1441
+ [data-tracking='normal'] {
1442
+ --tracking-normal: 0em;
1443
+ }
1444
+ [data-tracking='wide'] {
1445
+ --tracking-normal: 0.025em;
1446
+ }
1447
+
1448
+ /* ========================================================================== */
1449
+ /* DIMENSION 7 — Input style. Switch: <html data-input-style="…"> */
1450
+ /* outline = default (bordered, transparent). fill = filled muted, no border. */
1451
+ /* inset = recessed muted + border + subtle inner shadow (yields to focus ring */
1452
+ /* via :not(:focus-visible)). Unlayered so it wins over Tailwind utilities. */
1453
+ /* ========================================================================== */
1454
+ [data-input-style='fill']
1455
+ :is(
1456
+ [data-slot='input'],
1457
+ [data-slot='textarea'],
1458
+ [data-slot='select-trigger'],
1459
+ [data-slot='input-group']
1460
+ ) {
1461
+ background-color: var(--muted);
1462
+ border-color: transparent;
1463
+ }
1464
+ [data-input-style='inset']
1465
+ :is(
1466
+ [data-slot='input'],
1467
+ [data-slot='textarea'],
1468
+ [data-slot='select-trigger'],
1469
+ [data-slot='input-group']
1470
+ ) {
1471
+ background-color: color-mix(in oklab, var(--muted) 60%, transparent);
1472
+ border-color: var(--border);
1473
+ }
1474
+ [data-input-style='inset']
1475
+ :is([data-slot='input'], [data-slot='textarea'], [data-slot='select-trigger']):not(
1476
+ :focus-visible
1477
+ ) {
1478
+ box-shadow: inset 0 1px 2px 0 oklch(0 0 0 / 0.07);
1479
+ }
1480
+
1481
+ /* -------------------------------------------------------------------------- */
1482
+ /* Base layer */
1483
+ /* -------------------------------------------------------------------------- */
1484
+ @layer base {
1485
+ * {
1486
+ @apply border-border outline-ring/50;
1487
+ }
1488
+ body {
1489
+ @apply bg-background text-foreground;
1490
+ letter-spacing: var(--tracking-normal);
1491
+ }
1492
+ h1,
1493
+ h2,
1494
+ h3,
1495
+ h4,
1496
+ h5,
1497
+ h6 {
1498
+ font-family: var(--font-heading);
1499
+ }
1500
+ [x-cloak] {
1501
+ display: none !important;
1502
+ }
1503
+ }
1504
+
1505
+ /* -------------------------------------------------------------------------- */
1506
+ /* Native-control styling utilities */
1507
+ /* Drop these on a raw <input>/<select>/<textarea>/<input type=checkbox> to */
1508
+ /* get the BlatUI look on a NATIVE control (submits without JS, name-bound). */
1509
+ /* They mirror the matching <x-ui.*> components — keep in sync when those */
1510
+ /* change. Pairs with the `native` prop on x-ui.select / x-ui.checkbox. */
1511
+ /* -------------------------------------------------------------------------- */
1512
+ @layer components {
1513
+ .blat-input {
1514
+ @apply flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30;
1515
+ }
1516
+ .blat-textarea {
1517
+ @apply flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30;
1518
+ }
1519
+ /* Native <select>: same shell as the input, plus appearance-none + a chevron.
1520
+ Chevron is a static gray SVG so it needs no JS; flips side under RTL. */
1521
+ .blat-select {
1522
+ @apply flex h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent py-1 ps-3 pe-9 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30;
1523
+ /* Tailwind's `appearance-none` does not emit the -webkit- prefix; without it,
1524
+ iOS/Safari keeps its native ⇕ arrow on top of our custom chevron. */
1525
+ -webkit-appearance: none;
1526
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23717182' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
1527
+ background-repeat: no-repeat;
1528
+ background-position: right 0.625rem center;
1529
+ background-size: 1rem;
1530
+ }
1531
+ [dir='rtl'] .blat-select {
1532
+ background-position: left 0.625rem center;
1533
+ }
1534
+ /* Native checkboxes/radios: accent-color is the no-JS way to brand them. */
1535
+ .blat-checkbox {
1536
+ @apply size-4 shrink-0 rounded-[4px] border border-input accent-primary shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50;
1537
+ }
1538
+ .blat-radio {
1539
+ @apply size-4 shrink-0 rounded-full border border-input accent-primary shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50;
1540
+ }
1541
+ .blat-label {
1542
+ @apply flex items-center gap-2 text-sm leading-none font-medium select-none;
1543
+ }
1544
+ }
1545
+
1546
+ /* Mirror directional icons (arrows/chevrons) under RTL. Apply on the icon. */
1547
+ [dir='rtl'] .blat-rtl-flip {
1548
+ transform: scaleX(-1);
1549
+ }
1550
+
1551
+ /* Calendar: <x-ui.calendar show-outside-days="false"> hides prev/next-month filler days and
1552
+ collapses any week row that is entirely outside the current month. Keys off the
1553
+ data-day / data-outside attributes the calendar already sets on each day button. */
1554
+ [data-hide-outside-days] button[data-day][data-outside] {
1555
+ visibility: hidden;
1556
+ pointer-events: none;
1557
+ }
1558
+ [data-hide-outside-days] tbody tr:not(:has(button[data-day]:not([data-outside]))) {
1559
+ display: none;
1560
+ }
1561
+
1562
+ /* Marquee (<x-ui.marquee>): seamless infinite scroll of two duplicated content groups. */
1563
+ @keyframes blat-marquee-x {
1564
+ to {
1565
+ transform: translateX(-50%);
1566
+ }
1567
+ }
1568
+ @keyframes blat-marquee-y {
1569
+ to {
1570
+ transform: translateY(-50%);
1571
+ }
1572
+ }