flowbite-svelte 2.0.0-next.11 → 2.0.0-next.13

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 (22) hide show
  1. package/dist/alert/theme.js +1 -1
  2. package/dist/badge/theme.js +2 -2
  3. package/dist/forms/input-field/theme.js +1 -1
  4. package/dist/forms/timepicker/Timepicker.svelte +14 -4
  5. package/dist/theme-selector/ThemeSelector.svelte +57 -8
  6. package/dist/theme-selector/themeStore.svelte.d.ts +2 -2
  7. package/dist/theme-selector/themeStore.svelte.js +14 -15
  8. package/dist/theme-selector/themes/default-runtime.css +33 -20
  9. package/dist/theme-selector/themes/default.css +229 -0
  10. package/dist/theme-selector/themes/enterprise.css +209 -0
  11. package/dist/theme-selector/themes/minimal.css +213 -0
  12. package/dist/theme-selector/themes/mono.css +205 -0
  13. package/dist/theme-selector/themes/playful-runtime.css +0 -1
  14. package/dist/theme-selector/themes/playful.css +206 -0
  15. package/dist/theme-selector/themes.js +5 -5
  16. package/dist/utils/index.d.ts +1 -1
  17. package/dist/utils/index.js +1 -1
  18. package/dist/utils/responsive.svelte.d.ts +0 -18
  19. package/dist/utils/responsive.svelte.js +99 -0
  20. package/package.json +1 -1
  21. package/dist/theme-selector/themes/themes-runtime.css +0 -1104
  22. package/dist/utils/responsive.svelte +0 -111
package/dist/theme-selector/themes/themes-runtime.css DELETED
@@ -1,1104 +0,0 @@
1
- :root {
2
- --font-sans:
3
- "Inter", "ui-sans-serif", "system-ui", "-apple-system", "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji",
4
- "Segoe UI Symbol", "Noto Color Emoji";
5
- --font-body:
6
- "Inter", "ui-sans-serif", "system-ui", "-apple-system", "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji",
7
- "Segoe UI Symbol", "Noto Color Emoji";
8
- --font-mono: "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace";
9
-
10
- /* TEXT VARIABLES */
11
- --text-2xs: 0.625rem;
12
- --spacing-8xl: 90rem;
13
- --leading-9: 2.25rem;
14
- --leading-7: 1.75rem;
15
- --leading-8: 2rem;
16
- --leading-6: 1.5rem;
17
- --leading-4: 1rem;
18
- --leading-none: 0.0625rem;
19
- --leading-5: 1.25rem;
20
- --tracking-tighter: -0.05rem;
21
- --leading-heading-none: 3.75rem;
22
- --tracking-tight: -0.025rem;
23
-
24
- /* BORDER RADIUS VARIABLES */
25
- --radius-0: 0px;
26
- --radius-xxs: 2px;
27
- --radius-xs: 4px;
28
- --radius-sm: 6px;
29
- --radius: 8px;
30
- --radius-base: 12px;
31
- --radius-lg: 16px;
32
-
33
- /* BORDER WIDTH VARIABLES */
34
- --default-border-width: 1px;
35
-
36
- /* TEXT COLORS VARIABLES */
37
- /* main text color */
38
- --color-body: var(--color-gray-600);
39
- --color-body-subtle: var(--color-gray-500);
40
-
41
- /* text heading colors */
42
- --color-heading: var(--color-gray-900);
43
-
44
- /* used for custom brand colors */
45
- --color-fg-brand-subtle: var(--color-blue-200);
46
- --color-fg-brand: var(--color-blue-700);
47
- --color-fg-brand-strong: var(--color-blue-900);
48
-
49
- /* used for status colors */
50
- --color-fg-success: var(--color-emerald-700);
51
- --color-fg-success-strong: var(--color-emerald-900);
52
- --color-fg-danger: var(--color-rose-700);
53
- --color-fg-danger-strong: var(--color-rose-900);
54
- --color-fg-warning-subtle: var(--color-orange-600);
55
- --color-fg-warning: var(--color-orange-900);
56
- --color-fg-yellow: var(--color-yellow-400);
57
- --color-fg-disabled: var(--color-gray-400);
58
- --color-fg-purple: var(--color-purple-600);
59
- --color-fg-cyan: var(--color-cyan-600);
60
- --color-fg-indigo: var(--color-indigo-600);
61
- --color-fg-pink: var(--color-pink-600);
62
- --color-fg-lime: var(--color-lime-600);
63
-
64
- /* BACKGROUND COLOR VARIABLES */
65
- /* used for neutral colors */
66
- --color-neutral-primary-soft: var(--color-white);
67
- --color-neutral-primary: var(--color-white);
68
- --color-neutral-primary-medium: var(--color-white);
69
- --color-neutral-primary-strong: var(--color-white);
70
- --color-neutral-secondary-soft: var(--color-gray-50);
71
- --color-neutral-secondary: var(--color-gray-50);
72
- --color-neutral-secondary-medium: var(--color-gray-50);
73
- --color-neutral-secondary-strong: var(--color-gray-50);
74
- --color-neutral-secondary-strongest: var(--color-gray-50);
75
- --color-neutral-tertiary-soft: var(--color-gray-100);
76
- --color-neutral-tertiary: var(--color-gray-100);
77
- --color-neutral-tertiary-medium: var(--color-gray-100);
78
- --color-neutral-quaternary: var(--color-gray-200);
79
- --color-neutral-quaternary-medium: var(--color-gray-200);
80
- --color-gray: var(--color-gray-300);
81
-
82
- /* used for brand colors */
83
- --color-brand-softer: var(--color-blue-50);
84
- --color-brand-soft: var(--color-blue-100);
85
- --color-brand: var(--color-blue-700);
86
- --color-brand-medium: var(--color-blue-200);
87
- --color-brand-strong: var(--color-blue-800);
88
-
89
- /* used for status colors */
90
- --color-success-soft: var(--color-emerald-50);
91
- --color-success: var(--color-emerald-700);
92
- --color-success-medium: var(--color-emerald-100);
93
- --color-success-strong: var(--color-emerald-800);
94
- --color-danger-soft: var(--color-rose-50);
95
- --color-danger: var(--color-rose-700);
96
- --color-danger-medium: var(--color-rose-100);
97
- --color-danger-strong: var(--color-rose-800);
98
- --color-warning-soft: var(--color-orange-50);
99
- --color-warning: var(--color-orange-500);
100
- --color-warning-medium: var(--color-orange-100);
101
- --color-warning-strong: var(--color-orange-700);
102
- --color-dark-soft: var(--color-gray-800);
103
- --color-dark: var(--color-gray-800);
104
- --color-dark-strong: var(--color-gray-900);
105
- --color-disabled: var(--color-gray-100);
106
- --color-purple: var(--color-purple-500);
107
- --color-sky: var(--color-sky-500);
108
- --color-teal: var(--color-teal-600);
109
- --color-pink: var(--color-pink-600);
110
- --color-cyan: var(--color-cyan-500);
111
- --color-fuchsia: var(--color-fuchsia-600);
112
- --color-indigo: var(--color-indigo-600);
113
- --color-orange: var(--color-orange-400);
114
-
115
- /* BORDER COLOR VARIABLES */
116
- --color-buffer: var(--color-white);
117
- --color-buffer-medium: var(--color-white);
118
- --color-buffer-strong: var(--color-white);
119
- --color-muted: var(--color-gray-50);
120
- --color-light-subtle: var(--color-gray-100);
121
- --color-light: var(--color-gray-100);
122
- --color-light-medium: var(--color-gray-100);
123
- --color-default-subtle: var(--color-gray-200);
124
- --color-default: var(--color-gray-200);
125
- --color-default-medium: var(--color-gray-200);
126
- --color-default-strong: var(--color-gray-200);
127
-
128
- /* used for status colors */
129
- --color-success-subtle: var(--color-emerald-200);
130
- --color-danger-subtle: var(--color-rose-200);
131
- --color-warning-subtle: var(--color-orange-200);
132
- --color-brand-subtle: var(--color-blue-200);
133
- --color-brand-light: var(--color-blue-600);
134
- --color-dark-subtle: var(--color-gray-800);
135
- --color-dark-backdrop: var(--color-gray-950);
136
-
137
- --squares-pattern-light-url: url(/docs/images/patterns/squares.svg);
138
- --squares-pattern-dark-url: url(/docs/images/patterns/squares-dark.svg);
139
-
140
- /* shiki variables */
141
- --color-shiki-fg-brand: #79b8ff;
142
- --color-shiki-fg-brand-subtle: #9ecbff;
143
- }
144
-
145
- @layer theme {
146
- [data-theme="minimal"] {
147
- --font-sans: "Open Sans", sans-serif;
148
- --font-body: "Open Sans", sans-serif;
149
-
150
- /* Flowbite variables */
151
-
152
- /* shadow variables */
153
- --shadow-xs: 0;
154
- --shadow-sm: 0;
155
- --shadow-md: 0;
156
- --shadow-lg: 0;
157
- --shadow-xl: 0;
158
- --shadow: 0;
159
- /* text variables */
160
- --leading-9: 2.25rem;
161
- --leading-7: 1.75rem;
162
- --leading-8: 2rem;
163
- --leading-6: 1.5rem;
164
- --leading-4: 1rem;
165
- --leading-none: 0.0625rem;
166
- --leading-5: 1.25rem;
167
- --tracking-tighter: -0.05rem;
168
- --leading-heading-none: 3.75rem;
169
- --tracking-tight: -0.025rem;
170
-
171
- /* radius variables */
172
- --radius-0: 0px;
173
- --radius-xxs: 2px;
174
- --radius-xs: 2px;
175
- --radius-sm: 4px;
176
- --radius: 6px;
177
- --radius-base: 8px;
178
- --radius-lg: 16px;
179
-
180
- /* border width variables */
181
- --default-border-width: 1px;
182
-
183
- /* text color variables */
184
- --color-body: var(--color-stone-600);
185
- --color-body-subtle: var(--color-stone-500);
186
- --color-heading: var(--color-stone-900);
187
- --color-fg-brand-subtle: var(--color-stone-200);
188
- --color-fg-brand: var(--color-stone-950);
189
- --color-fg-brand-strong: var(--color-stone-900);
190
- --color-fg-success: var(--color-green-700);
191
- --color-fg-success-strong: var(--color-green-900);
192
- --color-fg-danger: var(--color-red-700);
193
- --color-fg-danger-strong: var(--color-red-900);
194
- --color-fg-warning-subtle: var(--color-orange-600);
195
- --color-fg-warning: var(--color-orange-900);
196
- --color-fg-yellow: var(--color-yellow-400);
197
- --color-fg-disabled: var(--color-stone-400);
198
- --color-fg-purple: var(--color-purple-600);
199
- --color-fg-cyan: var(--color-cyan-600);
200
- --color-fg-indigo: var(--color-indigo-600);
201
- --color-fg-pink: var(--color-pink-600);
202
- --color-fg-lime: var(--color-lime-600);
203
-
204
- /* background color variables */
205
- --color-neutral-primary-soft: var(--color-white);
206
- --color-neutral-primary: var(--color-white);
207
- --color-neutral-primary-medium: var(--color-white);
208
- --color-neutral-primary-strong: var(--color-white);
209
- --color-neutral-secondary-soft: var(--color-stone-100);
210
- --color-neutral-secondary: var(--color-stone-100);
211
- --color-neutral-secondary-medium: var(--color-stone-100);
212
- --color-neutral-secondary-strong: var(--color-stone-100);
213
- --color-neutral-secondary-strongest: var(--color-stone-100);
214
- --color-neutral-tertiary-soft: var(--color-stone-100);
215
- --color-neutral-tertiary: var(--color-stone-100);
216
- --color-neutral-tertiary-medium: var(--color-stone-100);
217
- --color-neutral-quaternary: var(--color-stone-200);
218
- --color-neutral-quaternary-medium: var(--color-stone-200);
219
- --color-gray: var(--color-stone-300);
220
- --color-brand-softer: var(--color-stone-50);
221
- --color-brand-soft: var(--color-stone-100);
222
- --color-brand: var(--color-stone-900);
223
- --color-brand-medium: var(--color-stone-200);
224
- --color-brand-strong: var(--color-stone-800);
225
- --color-success-soft: var(--color-green-50);
226
- --color-success: var(--color-green-700);
227
- --color-success-medium: var(--color-green-100);
228
- --color-success-strong: var(--color-green-800);
229
- --color-danger-soft: var(--color-red-50);
230
- --color-danger: var(--color-red-700);
231
- --color-danger-medium: var(--color-red-100);
232
- --color-danger-strong: var(--color-red-800);
233
- --color-warning-soft: var(--color-orange-50);
234
- --color-warning: var(--color-orange-500);
235
- --color-warning-medium: var(--color-orange-100);
236
- --color-warning-strong: var(--color-orange-700);
237
- --color-dark-soft: var(--color-stone-800);
238
- --color-dark: var(--color-stone-800);
239
- --color-dark-strong: var(--color-stone-900);
240
- --color-disabled: var(--color-stone-100);
241
- --color-purple: var(--color-purple-500);
242
- --color-sky: var(--color-sky-500);
243
- --color-teal: var(--color-teal-600);
244
- --color-pink: var(--color-pink-600);
245
- --color-cyan: var(--color-cyan-500);
246
- --color-fuchsia: var(--color-fuchsia-600);
247
- --color-indigo: var(--color-indigo-600);
248
- --color-orange: var(--color-orange-400);
249
-
250
- /* border color variables */
251
- --color-buffer: var(--color-white);
252
- --color-buffer-medium: var(--color-white);
253
- --color-buffer-strong: var(--color-white);
254
- --color-muted: var(--color-stone-50);
255
- --color-light-subtle: var(--color-stone-50);
256
- --color-light: var(--color-stone-50);
257
- --color-light-medium: var(--color-stone-50);
258
- --color-default-subtle: var(--color-stone-100);
259
- --color-default: var(--color-stone-100);
260
- --color-default-medium: var(--color-stone-100);
261
- --color-default-strong: var(--color-stone-100);
262
- --color-success-subtle: var(--color-green-200);
263
- --color-danger-subtle: var(--color-red-200);
264
- --color-warning-subtle: var(--color-orange-200);
265
- --color-brand-subtle: var(--color-stone-200);
266
- --color-brand-light: var(--color-stone-600);
267
- --color-dark-subtle: var(--color-stone-800);
268
- --color-dark-backdrop: var(--color-stone-950);
269
-
270
- --squares-pattern-light-url: url(/docs/images/patterns/squares-minimal.svg);
271
- --squares-pattern-dark-url: url(/docs/images/patterns/squares-minimal-dark.svg);
272
-
273
- /* shiki variables */
274
- --color-shiki-fg-brand: white; /* bright but still readable on dark bg */
275
- --color-shiki-fg-brand-subtle: white; /* softer, pastel-like tint */
276
- }
277
-
278
- [data-theme="enterprise"] {
279
- --font-sans: "STIX Two Text", serif;
280
- --font-body: "STIX Two Text", serif;
281
-
282
- /* Flowbite variables */
283
-
284
- --leading-9: 2.25rem;
285
- --leading-7: 1.75rem;
286
- --leading-8: 2rem;
287
- --leading-6: 1.5rem;
288
- --leading-4: 1rem;
289
- --leading-none: 0.0625rem;
290
- --leading-5: 1.25rem;
291
- --tracking-tighter: -0.05rem;
292
- --leading-heading-none: 3.75rem;
293
- --tracking-tight: -0.025rem;
294
-
295
- --text-xs: 0.825rem;
296
- --text-sm: 0.925rem;
297
- --text-base: 1.125rem;
298
-
299
- /* radius variables */
300
- --radius-xxs: 1px;
301
- --radius-xs: 1px;
302
- --radius-sm: 1px;
303
- --radius: 4px;
304
- --radius-md: 4px;
305
- --radius-base: 4px;
306
- --radius-lg: 4px;
307
-
308
- /* border width variables */
309
- --default-border-width: 1px;
310
-
311
- /* text color variables */
312
- --color-body: var(--color-zinc-600);
313
- --color-body-subtle: var(--color-zinc-500);
314
- --color-heading: var(--color-zinc-900);
315
- --color-fg-brand-subtle: var(--color-cyan-200);
316
- --color-fg-brand: var(--color-cyan-700);
317
- --color-fg-brand-strong: var(--color-cyan-900);
318
- --color-fg-success: var(--color-green-700);
319
- --color-fg-success-strong: var(--color-green-900);
320
- --color-fg-danger: var(--color-red-700);
321
- --color-fg-danger-strong: var(--color-red-900);
322
- --color-fg-warning-subtle: var(--color-orange-600);
323
- --color-fg-warning: var(--color-orange-900);
324
- --color-fg-yellow: var(--color-yellow-400);
325
- --color-fg-disabled: var(--color-zinc-400);
326
- --color-fg-purple: var(--color-purple-600);
327
- --color-fg-cyan: var(--color-cyan-600);
328
- --color-fg-indigo: var(--color-cyan-600);
329
- --color-fg-pink: var(--color-pink-600);
330
- --color-fg-lime: var(--color-lime-600);
331
-
332
- /* background color variables */
333
- --color-neutral-primary-soft: var(--color-white);
334
- --color-neutral-primary: var(--color-white);
335
- --color-neutral-primary-medium: var(--color-white);
336
- --color-neutral-primary-strong: var(--color-white);
337
- --color-neutral-secondary-soft: var(--color-white);
338
- --color-neutral-secondary: var(--color-white);
339
- --color-neutral-secondary-medium: var(--color-white);
340
- --color-neutral-secondary-strong: var(--color-white);
341
- --color-neutral-secondary-strongest: var(--color-white);
342
- --color-neutral-tertiary-soft: var(--color-zinc-100);
343
- --color-neutral-tertiary: var(--color-zinc-100);
344
- --color-neutral-tertiary-medium: var(--color-zinc-100);
345
- --color-neutral-quaternary: var(--color-zinc-200);
346
- --color-neutral-quaternary-medium: var(--color-zinc-200);
347
- --color-gray: var(--color-zinc-300);
348
- --color-brand-softer: var(--color-cyan-50);
349
- --color-brand-soft: var(--color-cyan-100);
350
- --color-brand: var(--color-cyan-900);
351
- --color-brand-medium: var(--color-cyan-200);
352
- --color-brand-strong: var(--color-cyan-800);
353
- --color-success-soft: var(--color-green-50);
354
- --color-success: var(--color-green-700);
355
- --color-success-medium: var(--color-green-100);
356
- --color-success-strong: var(--color-green-800);
357
- --color-danger-soft: var(--color-red-50);
358
- --color-danger: var(--color-red-700);
359
- --color-danger-medium: var(--color-red-100);
360
- --color-danger-strong: var(--color-red-800);
361
- --color-warning-soft: var(--color-orange-50);
362
- --color-warning: var(--color-orange-500);
363
- --color-warning-medium: var(--color-orange-100);
364
- --color-warning-strong: var(--color-orange-700);
365
- --color-dark-soft: var(--color-zinc-800);
366
- --color-dark: var(--color-zinc-800);
367
- --color-dark-strong: var(--color-zinc-900);
368
- --color-disabled: var(--color-zinc-100);
369
- --color-purple: var(--color-purple-500);
370
- --color-sky: var(--color-sky-500);
371
- --color-teal: var(--color-teal-600);
372
- --color-pink: var(--color-pink-600);
373
- --color-cyan: var(--color-cyan-500);
374
- --color-fuchsia: var(--color-fuchsia-600);
375
- --color-indigo: var(--color-cyan-600);
376
- --color-orange: var(--color-orange-400);
377
-
378
- /* border color variables */
379
- --color-buffer: var(--color-white);
380
- --color-buffer-medium: var(--color-white);
381
- --color-buffer-strong: var(--color-white);
382
- --color-muted: var(--color-zinc-50);
383
- --color-light-subtle: var(--color-zinc-100);
384
- --color-light: var(--color-zinc-100);
385
- --color-light-medium: var(--color-zinc-100);
386
- --color-default-subtle: var(--color-zinc-200);
387
- --color-default: var(--color-zinc-200);
388
- --color-default-medium: var(--color-zinc-200);
389
- --color-default-strong: var(--color-zinc-200);
390
- --color-success-subtle: var(--color-green-200);
391
- --color-danger-subtle: var(--color-red-200);
392
- --color-warning-subtle: var(--color-orange-200);
393
- --color-brand-subtle: var(--color-cyan-200);
394
- --color-brand-light: var(--color-cyan-600);
395
- --color-dark-subtle: var(--color-zinc-800);
396
- --color-dark-backdrop: var(--color-zinc-950);
397
-
398
- --squares-pattern-light-url: url(/docs/images/patterns/squares-enterprise.svg);
399
- --squares-pattern-dark-url: url(/docs/images/patterns/squares-enterprise-dark.svg);
400
-
401
- /* shiki variables */
402
- --color-shiki-fg-brand: #56c0d8; /* medium-light tint */
403
- --color-shiki-fg-brand-subtle: #8ad9e7; /* lighter, softer tint */
404
- }
405
-
406
- [data-theme="playful"] {
407
- --font-sans: "Shantell Sans", cursive;
408
- --font-body: "Shantell Sans", cursive;
409
-
410
- /* Flowbite variables */
411
-
412
- --leading-9: 2.25rem;
413
- --leading-7: 1.75rem;
414
- --leading-8: 2rem;
415
- --leading-6: 1.5rem;
416
- --leading-4: 1rem;
417
- --leading-none: 0.0625rem;
418
- --leading-5: 1.25rem;
419
- --tracking-tighter: -0.05rem;
420
- --leading-heading-none: 3.75rem;
421
- --tracking-tight: -0.025rem;
422
-
423
- /* radius variables */
424
- --radius-xxs: 2px;
425
- --radius-xs: 2px;
426
- --radius-sm: 10px;
427
- --radius: 12px;
428
- --radius-md: 14px;
429
- --radius-base: 20px;
430
- --radius-lg: 16px;
431
-
432
- /* border width variables */
433
- --default-border-width: 1px;
434
-
435
- /* text color variables */
436
- --color-body: var(--color-slate-600);
437
- --color-body-subtle: var(--color-slate-500);
438
- --color-heading: var(--color-slate-900);
439
- --color-fg-brand-subtle: var(--color-pink-200);
440
- --color-fg-brand: var(--color-pink-700);
441
- --color-fg-brand-strong: var(--color-pink-900);
442
- --color-fg-success: var(--color-green-700);
443
- --color-fg-success-strong: var(--color-green-900);
444
- --color-fg-danger: var(--color-red-700);
445
- --color-fg-danger-strong: var(--color-red-900);
446
- --color-fg-warning-subtle: var(--color-orange-600);
447
- --color-fg-warning: var(--color-orange-900);
448
- --color-fg-yellow: var(--color-yellow-400);
449
- --color-fg-disabled: var(--color-slate-400);
450
- --color-fg-purple: var(--color-purple-600);
451
- --color-fg-cyan: var(--color-cyan-600);
452
- --color-fg-indigo: var(--color-indigo-600);
453
- --color-fg-pink: var(--color-pink-600);
454
- --color-fg-lime: var(--color-lime-600);
455
-
456
- /* background color variables */
457
- --color-neutral-primary-soft: var(--color-white);
458
- --color-neutral-primary: var(--color-white);
459
- --color-neutral-primary-medium: var(--color-white);
460
- --color-neutral-primary-strong: var(--color-white);
461
- --color-neutral-secondary-soft: var(--color-slate-50);
462
- --color-neutral-secondary: var(--color-slate-50);
463
- --color-neutral-secondary-medium: var(--color-slate-50);
464
- --color-neutral-secondary-strong: var(--color-slate-50);
465
- --color-neutral-secondary-strongest: var(--color-slate-50);
466
- --color-neutral-tertiary-soft: var(--color-slate-100);
467
- --color-neutral-tertiary: var(--color-slate-100);
468
- --color-neutral-tertiary-medium: var(--color-slate-100);
469
- --color-neutral-quaternary: var(--color-slate-200);
470
- --color-neutral-quaternary-medium: var(--color-slate-200);
471
- --color-gray: var(--color-slate-300);
472
- --color-brand-softer: var(--color-pink-50);
473
- --color-brand-soft: var(--color-pink-100);
474
- --color-brand: var(--color-pink-900);
475
- --color-brand-medium: var(--color-pink-200);
476
- --color-brand-strong: var(--color-pink-800);
477
- --color-success-soft: var(--color-green-50);
478
- --color-success: var(--color-green-700);
479
- --color-success-medium: var(--color-green-100);
480
- --color-success-strong: var(--color-green-800);
481
- --color-danger-soft: var(--color-red-50);
482
- --color-danger: var(--color-red-700);
483
- --color-danger-medium: var(--color-red-100);
484
- --color-danger-strong: var(--color-red-800);
485
- --color-warning-soft: var(--color-orange-50);
486
- --color-warning: var(--color-orange-500);
487
- --color-warning-medium: var(--color-orange-100);
488
- --color-warning-strong: var(--color-orange-700);
489
- --color-dark-soft: var(--color-slate-800);
490
- --color-dark: var(--color-slate-800);
491
- --color-dark-strong: var(--color-slate-900);
492
- --color-disabled: var(--color-slate-100);
493
- --color-purple: var(--color-purple-500);
494
- --color-sky: var(--color-sky-500);
495
- --color-teal: var(--color-teal-600);
496
- --color-pink: var(--color-pink-600);
497
- --color-cyan: var(--color-cyan-500);
498
- --color-fuchsia: var(--color-fuchsia-600);
499
- --color-indigo: var(--color-indigo-600);
500
- --color-orange: var(--color-orange-400);
501
-
502
- /* border color variables */
503
- --color-buffer: var(--color-white);
504
- --color-buffer-medium: var(--color-white);
505
- --color-buffer-strong: var(--color-white);
506
- --color-muted: var(--color-slate-50);
507
- --color-light-subtle: var(--color-slate-100);
508
- --color-light: var(--color-slate-100);
509
- --color-light-medium: var(--color-slate-100);
510
- --color-default-subtle: var(--color-slate-200);
511
- --color-default: var(--color-slate-200);
512
- --color-default-medium: var(--color-slate-200);
513
- --color-default-strong: var(--color-slate-200);
514
- --color-success-subtle: var(--color-green-200);
515
- --color-danger-subtle: var(--color-red-200);
516
- --color-warning-subtle: var(--color-orange-200);
517
- --color-brand-subtle: var(--color-pink-200);
518
- --color-brand-light: var(--color-pink-600);
519
- --color-dark-subtle: var(--color-slate-800);
520
- --color-dark-backdrop: var(--color-slate-950);
521
-
522
- --squares-pattern-light-url: url(/docs/images/patterns/squares-playful.svg);
523
- --squares-pattern-dark-url: url(/docs/images/patterns/squares-playful-dark.svg);
524
-
525
- /* shiki variables */
526
- --color-shiki-fg-brand: #f06292; /* vivid but readable on dark bg */
527
- --color-shiki-fg-brand-subtle: #f48fb1; /* lighter and friendlier tone */
528
- }
529
-
530
- [data-theme="mono"] {
531
- --font-sans: "Google Sans Code", monospace;
532
- --font-body: "Google Sans Code", monospace;
533
-
534
- /* Flowbite variables */
535
-
536
- --leading-9: 2.25rem;
537
- --leading-7: 1.75rem;
538
- --leading-8: 2rem;
539
- --leading-6: 1.5rem;
540
- --leading-4: 1rem;
541
- --leading-none: 0.0625rem;
542
- --leading-5: 1.25rem;
543
- --tracking-tighter: -0.05rem;
544
- --leading-heading-none: 3.75rem;
545
- --tracking-tight: -0.025rem;
546
- --tracking-normal: -0.4px;
547
-
548
- /* radius variables */
549
- --radius-xxs: 1px;
550
- --radius-xs: 1px;
551
- --radius-sm: 1px;
552
- --radius: 1px;
553
- --radius-md: 1px;
554
- --radius-base: 1px;
555
- --radius-lg: 1px;
556
-
557
- /* border width variables */
558
- --default-border-width: 1px;
559
-
560
- /* text color variables */
561
- --color-body: var(--color-neutral-600);
562
- --color-body-subtle: var(--color-neutral-500);
563
- --color-heading: var(--color-neutral-900);
564
- --color-fg-brand-subtle: var(--color-indigo-200);
565
- --color-fg-brand: var(--color-indigo-700);
566
- --color-fg-brand-strong: var(--color-indigo-900);
567
- --color-fg-success: var(--color-green-700);
568
- --color-fg-success-strong: var(--color-green-900);
569
- --color-fg-danger: var(--color-red-700);
570
- --color-fg-danger-strong: var(--color-red-900);
571
- --color-fg-warning-subtle: var(--color-orange-600);
572
- --color-fg-warning: var(--color-orange-900);
573
- --color-fg-yellow: var(--color-yellow-400);
574
- --color-fg-disabled: var(--color-neutral-400);
575
- --color-fg-purple: var(--color-purple-600);
576
- --color-fg-cyan: var(--color-cyan-600);
577
- --color-fg-indigo: var(--color-indigo-600);
578
- --color-fg-pink: var(--color-pink-600);
579
- --color-fg-lime: var(--color-lime-600);
580
-
581
- /* background color variables */
582
- --color-neutral-primary-soft: var(--color-white);
583
- --color-neutral-primary: var(--color-white);
584
- --color-neutral-primary-medium: var(--color-white);
585
- --color-neutral-primary-strong: var(--color-white);
586
- --color-neutral-secondary-soft: var(--color-neutral-50);
587
- --color-neutral-secondary: var(--color-neutral-50);
588
- --color-neutral-secondary-medium: var(--color-neutral-50);
589
- --color-neutral-secondary-strong: var(--color-neutral-50);
590
- --color-neutral-secondary-strongest: var(--color-neutral-50);
591
- --color-neutral-tertiary-soft: var(--color-neutral-100);
592
- --color-neutral-tertiary: var(--color-neutral-100);
593
- --color-neutral-tertiary-medium: var(--color-neutral-100);
594
- --color-neutral-quaternary: var(--color-neutral-200);
595
- --color-neutral-quaternary-medium: var(--color-neutral-200);
596
- --color-gray: var(--color-neutral-300);
597
- --color-brand-softer: var(--color-indigo-50);
598
- --color-brand-soft: var(--color-indigo-100);
599
- --color-brand: var(--color-indigo-900);
600
- --color-brand-medium: var(--color-indigo-200);
601
- --color-brand-strong: var(--color-indigo-800);
602
- --color-success-soft: var(--color-green-50);
603
- --color-success: var(--color-green-700);
604
- --color-success-medium: var(--color-green-100);
605
- --color-success-strong: var(--color-green-800);
606
- --color-danger-soft: var(--color-red-50);
607
- --color-danger: var(--color-red-700);
608
- --color-danger-medium: var(--color-red-100);
609
- --color-danger-strong: var(--color-red-800);
610
- --color-warning-soft: var(--color-orange-50);
611
- --color-warning: var(--color-orange-500);
612
- --color-warning-medium: var(--color-orange-100);
613
- --color-warning-strong: var(--color-orange-700);
614
- --color-dark-soft: var(--color-neutral-800);
615
- --color-dark: var(--color-neutral-800);
616
- --color-dark-strong: var(--color-neutral-900);
617
- --color-disabled: var(--color-neutral-100);
618
- --color-purple: var(--color-purple-500);
619
- --color-sky: var(--color-sky-500);
620
- --color-teal: var(--color-teal-600);
621
- --color-pink: var(--color-pink-600);
622
- --color-cyan: var(--color-cyan-500);
623
- --color-fuchsia: var(--color-fuchsia-600);
624
- --color-indigo: var(--color-indigo-600);
625
- --color-orange: var(--color-orange-400);
626
-
627
- /* border color variables */
628
- --color-buffer: var(--color-white);
629
- --color-buffer-medium: var(--color-white);
630
- --color-buffer-strong: var(--color-white);
631
- --color-muted: var(--color-neutral-50);
632
- --color-light-subtle: var(--color-neutral-100);
633
- --color-light: var(--color-neutral-100);
634
- --color-light-medium: var(--color-neutral-100);
635
- --color-default-subtle: var(--color-neutral-200);
636
- --color-default: var(--color-neutral-200);
637
- --color-default-medium: var(--color-neutral-200);
638
- --color-default-strong: var(--color-neutral-200);
639
- --color-success-subtle: var(--color-green-200);
640
- --color-danger-subtle: var(--color-red-200);
641
- --color-warning-subtle: var(--color-orange-200);
642
- --color-brand-subtle: var(--color-indigo-200);
643
- --color-brand-light: var(--color-indigo-600);
644
- --color-dark-subtle: var(--color-neutral-800);
645
- --color-dark-backdrop: var(--color-neutral-950);
646
-
647
- --squares-pattern-light-url: url(/docs/images/patterns/squares-mono.svg);
648
- --squares-pattern-dark-url: url(/docs/images/patterns/squares-mono-dark.svg);
649
-
650
- /* shiki variables */
651
- --color-shiki-fg-brand: #9387ff; /* balanced mid-light tint */
652
- --color-shiki-fg-brand-subtle: #b4adff; /* gentle highlight version */
653
- }
654
- }
655
-
656
- [data-theme="modern"].dark,
657
- [data-theme="modern"] .dark {
658
- /* text color variables */
659
- --color-body: var(--color-gray-400);
660
- --color-body-subtle: var(--color-gray-400);
661
- --color-heading: var(--color-white);
662
- --color-fg-brand-subtle: var(--color-blue-200);
663
- --color-fg-brand: var(--color-blue-500);
664
- --color-fg-brand-strong: var(--color-blue-400);
665
- --color-fg-success: var(--color-emerald-600);
666
- --color-fg-success-strong: var(--color-emerald-300);
667
- --color-fg-danger: var(--color-rose-500);
668
- --color-fg-danger-strong: var(--color-rose-300);
669
- --color-fg-warning-subtle: var(--color-orange-500);
670
- --color-fg-warning: var(--color-orange-300);
671
- --color-fg-yellow: var(--color-yellow-400);
672
- --color-fg-disabled: var(--color-gray-600);
673
- --color-fg-purple: var(--color-purple-500);
674
- --color-fg-cyan: var(--color-cyan-500);
675
- --color-fg-indigo: var(--color-indigo-500);
676
- --color-fg-pink: var(--color-pink-500);
677
- --color-fg-lime: var(--color-lime-500);
678
-
679
- /* background color variables */
680
- --color-neutral-primary-soft: var(--color-gray-900);
681
- --color-neutral-primary: var(--color-gray-950);
682
- --color-neutral-primary-medium: var(--color-gray-800);
683
- --color-neutral-primary-strong: var(--color-gray-700);
684
- --color-neutral-secondary-soft: var(--color-gray-900);
685
- --color-neutral-secondary: var(--color-gray-950);
686
- --color-neutral-secondary-medium: var(--color-gray-800);
687
- --color-neutral-secondary-strong: var(--color-gray-700);
688
- --color-neutral-secondary-strongest: var(--color-gray-600);
689
- --color-neutral-tertiary-soft: var(--color-gray-900);
690
- --color-neutral-tertiary: var(--color-gray-800);
691
- --color-neutral-tertiary-medium: var(--color-gray-700);
692
- --color-neutral-quaternary: var(--color-gray-700);
693
- --color-neutral-quaternary-medium: var(--color-gray-600);
694
- --color-gray: var(--color-gray-600);
695
- --color-brand-softer: var(--color-blue-950);
696
- --color-brand-soft: var(--color-blue-900);
697
- --color-brand: var(--color-blue-600);
698
- --color-brand-medium: var(--color-blue-900);
699
- --color-brand-strong: var(--color-blue-700);
700
- --color-success-soft: var(--color-emerald-950);
701
- --color-success: var(--color-emerald-600);
702
- --color-success-medium: var(--color-emerald-900);
703
- --color-success-strong: var(--color-emerald-700);
704
- --color-danger-soft: var(--color-rose-950);
705
- --color-danger: var(--color-rose-700);
706
- --color-danger-medium: var(--color-rose-900);
707
- --color-danger-strong: var(--color-rose-800);
708
- --color-warning-soft: var(--color-orange-950);
709
- --color-warning: var(--color-orange-600);
710
- --color-warning-medium: var(--color-orange-900);
711
- --color-warning-strong: var(--color-orange-700);
712
- --color-dark-soft: var(--color-gray-700);
713
- --color-dark: var(--color-gray-800);
714
- --color-dark-strong: var(--color-gray-700);
715
- --color-disabled: var(--color-gray-800);
716
- --color-purple: var(--color-purple-500);
717
- --color-sky: var(--color-sky-500);
718
- --color-teal: var(--color-teal-500);
719
- --color-pink: var(--color-pink-500);
720
- --color-cyan: var(--color-cyan-500);
721
- --color-fuchsia: var(--color-fuchsia-500);
722
- --color-indigo: var(--color-indigo-500);
723
- --color-orange: var(--color-orange-400);
724
-
725
- /* border color variables */
726
- --color-buffer: var(--color-gray-950);
727
- --color-buffer-medium: var(--color-gray-900);
728
- --color-buffer-strong: var(--color-gray-800);
729
- --color-muted: var(--color-gray-900);
730
- --color-light-subtle: var(--color-gray-900);
731
- --color-light: var(--color-gray-800);
732
- --color-light-medium: var(--color-gray-700);
733
- --color-default-subtle: var(--color-gray-900);
734
- --color-default: var(--color-gray-800);
735
- --color-default-medium: var(--color-gray-700);
736
- --color-default-strong: var(--color-gray-600);
737
- --color-success-subtle: var(--color-emerald-900);
738
- --color-danger-subtle: var(--color-rose-900);
739
- --color-warning-subtle: var(--color-orange-900);
740
- --color-brand-subtle: var(--color-blue-900);
741
- --color-brand-light: var(--color-blue-600);
742
- --color-dark-subtle: var(--color-gray-700);
743
- --color-dark-backdrop: var(--color-gray-950);
744
- }
745
-
746
- [data-theme="minimal"].dark,
747
- [data-theme="minimal"] .dark {
748
- /* text color variables */
749
- --color-body: var(--color-stone-400);
750
- --color-body-subtle: var(--color-stone-400);
751
- --color-heading: var(--color-white);
752
- --color-fg-brand-subtle: var(--color-stone-200);
753
- --color-fg-brand: var(--color-white);
754
- --color-fg-brand-strong: var(--color-stone-200);
755
- --color-fg-success: var(--color-green-600);
756
- --color-fg-success-strong: var(--color-green-300);
757
- --color-fg-danger: var(--color-red-500);
758
- --color-fg-danger-strong: var(--color-red-300);
759
- --color-fg-warning-subtle: var(--color-orange-500);
760
- --color-fg-warning: var(--color-orange-300);
761
- --color-fg-yellow: var(--color-yellow-400);
762
- --color-fg-disabled: var(--color-stone-600);
763
- --color-fg-purple: var(--color-purple-500);
764
- --color-fg-cyan: var(--color-cyan-500);
765
- --color-fg-indigo: var(--color-indigo-500);
766
- --color-fg-pink: var(--color-pink-500);
767
- --color-fg-lime: var(--color-lime-500);
768
-
769
- /* background color variables */
770
- --color-neutral-primary-soft: var(--color-stone-900);
771
- --color-neutral-primary: var(--color-stone-950);
772
- --color-neutral-primary-medium: var(--color-stone-800);
773
- --color-neutral-primary-strong: var(--color-stone-700);
774
- --color-neutral-secondary-soft: var(--color-stone-900);
775
- --color-neutral-secondary: var(--color-stone-950);
776
- --color-neutral-secondary-medium: var(--color-stone-800);
777
- --color-neutral-secondary-strong: var(--color-stone-700);
778
- --color-neutral-secondary-strongest: var(--color-stone-600);
779
- --color-neutral-tertiary-soft: var(--color-stone-900);
780
- --color-neutral-tertiary: var(--color-stone-800);
781
- --color-neutral-tertiary-medium: var(--color-stone-700);
782
- --color-neutral-quaternary: var(--color-stone-700);
783
- --color-neutral-quaternary-medium: var(--color-stone-600);
784
- --color-gray: var(--color-stone-600);
785
- --color-brand-softer: var(--color-stone-900);
786
- --color-brand-soft: var(--color-stone-900);
787
- --color-brand: var(--color-stone-600);
788
- --color-brand-medium: var(--color-stone-900);
789
- --color-brand-strong: var(--color-stone-700);
790
- --color-success-soft: var(--color-green-950);
791
- --color-success: var(--color-green-600);
792
- --color-success-medium: var(--color-green-900);
793
- --color-success-strong: var(--color-green-700);
794
- --color-danger-soft: var(--color-red-950);
795
- --color-danger: var(--color-red-700);
796
- --color-danger-medium: var(--color-red-900);
797
- --color-danger-strong: var(--color-red-800);
798
- --color-warning-soft: var(--color-orange-950);
799
- --color-warning: var(--color-orange-600);
800
- --color-warning-medium: var(--color-orange-900);
801
- --color-warning-strong: var(--color-orange-700);
802
- --color-dark-soft: var(--color-stone-700);
803
- --color-dark: var(--color-stone-800);
804
- --color-dark-strong: var(--color-stone-700);
805
- --color-disabled: var(--color-stone-800);
806
- --color-purple: var(--color-purple-500);
807
- --color-sky: var(--color-sky-500);
808
- --color-teal: var(--color-teal-500);
809
- --color-pink: var(--color-pink-500);
810
- --color-cyan: var(--color-cyan-500);
811
- --color-fuchsia: var(--color-fuchsia-500);
812
- --color-indigo: var(--color-indigo-500);
813
- --color-orange: var(--color-orange-400);
814
-
815
- /* border color variables */
816
- --color-buffer: var(--color-stone-950);
817
- --color-buffer-medium: var(--color-stone-900);
818
- --color-buffer-strong: var(--color-stone-800);
819
- --color-muted: var(--color-stone-900);
820
- --color-light-subtle: var(--color-stone-900);
821
- --color-light: var(--color-stone-800);
822
- --color-light-medium: var(--color-stone-700);
823
- --color-default-subtle: var(--color-stone-900);
824
- --color-default: var(--color-stone-900);
825
- --color-default-medium: var(--color-stone-800);
826
- --color-default-strong: var(--color-stone-700);
827
- --color-success-subtle: var(--color-green-900);
828
- --color-danger-subtle: var(--color-red-900);
829
- --color-warning-subtle: var(--color-orange-900);
830
- --color-brand-subtle: var(--color-stone-900);
831
- --color-brand-light: var(--color-stone-600);
832
- --color-dark-subtle: var(--color-stone-700);
833
- --color-dark-backdrop: var(--color-stone-950);
834
- }
835
-
836
- [data-theme="enterprise"].dark,
837
- [data-theme="enterprise"] .dark {
838
- /* text color variables */
839
- --color-body: var(--color-zinc-400);
840
- --color-body-subtle: var(--color-zinc-400);
841
- --color-heading: var(--color-white);
842
- --color-fg-brand-subtle: var(--color-cyan-200);
843
- --color-fg-brand: var(--color-cyan-500);
844
- --color-fg-brand-strong: var(--color-cyan-400);
845
- --color-fg-success: var(--color-green-600);
846
- --color-fg-success-strong: var(--color-green-300);
847
- --color-fg-danger: var(--color-red-500);
848
- --color-fg-danger-strong: var(--color-red-300);
849
- --color-fg-warning-subtle: var(--color-orange-500);
850
- --color-fg-warning: var(--color-orange-300);
851
- --color-fg-yellow: var(--color-yellow-400);
852
- --color-fg-disabled: var(--color-zinc-600);
853
- --color-fg-purple: var(--color-purple-500);
854
- --color-fg-cyan: var(--color-cyan-500);
855
- --color-fg-indigo: var(--color-cyan-500);
856
- --color-fg-pink: var(--color-pink-500);
857
- --color-fg-lime: var(--color-lime-500);
858
-
859
- /* background color variables */
860
- --color-neutral-primary-soft: var(--color-zinc-900);
861
- --color-neutral-primary: var(--color-zinc-950);
862
- --color-neutral-primary-medium: var(--color-zinc-800);
863
- --color-neutral-primary-strong: var(--color-zinc-700);
864
- --color-neutral-secondary-soft: var(--color-zinc-900);
865
- --color-neutral-secondary: var(--color-zinc-950);
866
- --color-neutral-secondary-medium: var(--color-zinc-800);
867
- --color-neutral-secondary-strong: var(--color-zinc-700);
868
- --color-neutral-secondary-strongest: var(--color-zinc-600);
869
- --color-neutral-tertiary-soft: var(--color-zinc-900);
870
- --color-neutral-tertiary: var(--color-zinc-800);
871
- --color-neutral-tertiary-medium: var(--color-zinc-700);
872
- --color-neutral-quaternary: var(--color-zinc-700);
873
- --color-neutral-quaternary-medium: var(--color-zinc-600);
874
- --color-gray: var(--color-zinc-600);
875
- --color-brand-softer: var(--color-cyan-950);
876
- --color-brand-soft: var(--color-cyan-900);
877
- --color-brand: var(--color-cyan-600);
878
- --color-brand-medium: var(--color-cyan-900);
879
- --color-brand-strong: var(--color-cyan-700);
880
- --color-success-soft: var(--color-green-950);
881
- --color-success: var(--color-green-600);
882
- --color-success-medium: var(--color-green-900);
883
- --color-success-strong: var(--color-green-700);
884
- --color-danger-soft: var(--color-red-950);
885
- --color-danger: var(--color-red-700);
886
- --color-danger-medium: var(--color-red-900);
887
- --color-danger-strong: var(--color-red-800);
888
- --color-warning-soft: var(--color-orange-950);
889
- --color-warning: var(--color-orange-600);
890
- --color-warning-medium: var(--color-orange-900);
891
- --color-warning-strong: var(--color-orange-700);
892
- --color-dark-soft: var(--color-zinc-700);
893
- --color-dark: var(--color-zinc-800);
894
- --color-dark-strong: var(--color-zinc-700);
895
- --color-disabled: var(--color-zinc-800);
896
- --color-purple: var(--color-purple-500);
897
- --color-sky: var(--color-sky-500);
898
- --color-teal: var(--color-teal-500);
899
- --color-pink: var(--color-pink-500);
900
- --color-cyan: var(--color-cyan-500);
901
- --color-fuchsia: var(--color-fuchsia-500);
902
- --color-indigo: var(--color-cyan-500);
903
- --color-orange: var(--color-orange-400);
904
-
905
- /* border color variables */
906
- --color-buffer: var(--color-zinc-950);
907
- --color-buffer-medium: var(--color-zinc-900);
908
- --color-buffer-strong: var(--color-zinc-800);
909
- --color-muted: var(--color-zinc-900);
910
- --color-light-subtle: var(--color-zinc-900);
911
- --color-light: var(--color-zinc-800);
912
- --color-light-medium: var(--color-zinc-700);
913
- --color-default-subtle: var(--color-zinc-900);
914
- --color-default: var(--color-zinc-800);
915
- --color-default-medium: var(--color-zinc-700);
916
- --color-default-strong: var(--color-zinc-600);
917
- --color-success-subtle: var(--color-green-900);
918
- --color-danger-subtle: var(--color-red-900);
919
- --color-warning-subtle: var(--color-orange-900);
920
- --color-brand-subtle: var(--color-cyan-900);
921
- --color-brand-light: var(--color-cyan-600);
922
- --color-dark-subtle: var(--color-zinc-700);
923
- --color-dark-backdrop: var(--color-zinc-950);
924
- }
925
-
926
- [data-theme="playful"].dark,
927
- [data-theme="playful"] .dark {
928
- /* text color variables */
929
- --color-body: var(--color-slate-400);
930
- --color-body-subtle: var(--color-slate-400);
931
- --color-heading: var(--color-white);
932
- --color-fg-brand-subtle: var(--color-pink-200);
933
- --color-fg-brand: var(--color-pink-500);
934
- --color-fg-brand-strong: var(--color-pink-400);
935
- --color-fg-success: var(--color-green-600);
936
- --color-fg-success-strong: var(--color-green-300);
937
- --color-fg-danger: var(--color-red-500);
938
- --color-fg-danger-strong: var(--color-red-300);
939
- --color-fg-warning-subtle: var(--color-orange-500);
940
- --color-fg-warning: var(--color-orange-300);
941
- --color-fg-yellow: var(--color-yellow-400);
942
- --color-fg-disabled: var(--color-slate-600);
943
- --color-fg-purple: var(--color-purple-500);
944
- --color-fg-cyan: var(--color-cyan-500);
945
- --color-fg-indigo: var(--color-indigo-500);
946
- --color-fg-pink: var(--color-pink-500);
947
- --color-fg-lime: var(--color-lime-500);
948
-
949
- /* background color variables */
950
- --color-neutral-primary-soft: var(--color-slate-900);
951
- --color-neutral-primary: var(--color-slate-950);
952
- --color-neutral-primary-medium: var(--color-slate-800);
953
- --color-neutral-primary-strong: var(--color-slate-700);
954
- --color-neutral-secondary-soft: var(--color-slate-900);
955
- --color-neutral-secondary: var(--color-slate-950);
956
- --color-neutral-secondary-medium: var(--color-slate-800);
957
- --color-neutral-secondary-strong: var(--color-slate-700);
958
- --color-neutral-secondary-strongest: var(--color-slate-600);
959
- --color-neutral-tertiary-soft: var(--color-slate-900);
960
- --color-neutral-tertiary: var(--color-slate-800);
961
- --color-neutral-tertiary-medium: var(--color-slate-700);
962
- --color-neutral-quaternary: var(--color-slate-700);
963
- --color-neutral-quaternary-medium: var(--color-slate-600);
964
- --color-gray: var(--color-slate-600);
965
- --color-brand-softer: var(--color-pink-950);
966
- --color-brand-soft: var(--color-pink-900);
967
- --color-brand: var(--color-pink-600);
968
- --color-brand-medium: var(--color-pink-900);
969
- --color-brand-strong: var(--color-pink-700);
970
- --color-success-soft: var(--color-green-950);
971
- --color-success: var(--color-green-600);
972
- --color-success-medium: var(--color-green-900);
973
- --color-success-strong: var(--color-green-700);
974
- --color-danger-soft: var(--color-red-950);
975
- --color-danger: var(--color-red-700);
976
- --color-danger-medium: var(--color-red-900);
977
- --color-danger-strong: var(--color-red-800);
978
- --color-warning-soft: var(--color-orange-950);
979
- --color-warning: var(--color-orange-600);
980
- --color-warning-medium: var(--color-orange-900);
981
- --color-warning-strong: var(--color-orange-700);
982
- --color-dark-soft: var(--color-slate-700);
983
- --color-dark: var(--color-slate-800);
984
- --color-dark-strong: var(--color-slate-700);
985
- --color-disabled: var(--color-slate-800);
986
- --color-purple: var(--color-purple-500);
987
- --color-sky: var(--color-sky-500);
988
- --color-teal: var(--color-teal-500);
989
- --color-pink: var(--color-pink-500);
990
- --color-cyan: var(--color-cyan-500);
991
- --color-fuchsia: var(--color-fuchsia-500);
992
- --color-indigo: var(--color-indigo-500);
993
- --color-orange: var(--color-orange-400);
994
-
995
- /* border color variables */
996
- --color-buffer: var(--color-slate-950);
997
- --color-buffer-medium: var(--color-slate-900);
998
- --color-buffer-strong: var(--color-slate-800);
999
- --color-muted: var(--color-slate-900);
1000
- --color-light-subtle: var(--color-slate-900);
1001
- --color-light: var(--color-slate-800);
1002
- --color-light-medium: var(--color-slate-700);
1003
- --color-default-subtle: var(--color-slate-900);
1004
- --color-default: var(--color-slate-800);
1005
- --color-default-medium: var(--color-slate-700);
1006
- --color-default-strong: var(--color-slate-600);
1007
- --color-success-subtle: var(--color-green-900);
1008
- --color-danger-subtle: var(--color-red-900);
1009
- --color-warning-subtle: var(--color-orange-900);
1010
- --color-brand-subtle: var(--color-pink-900);
1011
- --color-brand-light: var(--color-pink-600);
1012
- --color-dark-subtle: var(--color-slate-700);
1013
- --color-dark-backdrop: var(--color-slate-950);
1014
- }
1015
-
1016
- [data-theme="mono"].dark,
1017
- [data-theme="mono"] .dark {
1018
- /* text color variables */
1019
- --color-body: var(--color-neutral-400);
1020
- --color-body-subtle: var(--color-neutral-400);
1021
- --color-heading: var(--color-white);
1022
- --color-fg-brand-subtle: var(--color-indigo-200);
1023
- --color-fg-brand: var(--color-indigo-500);
1024
- --color-fg-brand-strong: var(--color-indigo-400);
1025
- --color-fg-success: var(--color-green-600);
1026
- --color-fg-success-strong: var(--color-green-300);
1027
- --color-fg-danger: var(--color-red-500);
1028
- --color-fg-danger-strong: var(--color-red-300);
1029
- --color-fg-warning-subtle: var(--color-orange-500);
1030
- --color-fg-warning: var(--color-orange-300);
1031
- --color-fg-yellow: var(--color-yellow-400);
1032
- --color-fg-disabled: var(--color-neutral-600);
1033
- --color-fg-purple: var(--color-purple-500);
1034
- --color-fg-cyan: var(--color-cyan-500);
1035
- --color-fg-indigo: var(--color-indigo-500);
1036
- --color-fg-pink: var(--color-pink-500);
1037
- --color-fg-lime: var(--color-lime-500);
1038
-
1039
- /* background color variables */
1040
- --color-neutral-primary-soft: var(--color-neutral-900);
1041
- --color-neutral-primary: var(--color-neutral-950);
1042
- --color-neutral-primary-medium: var(--color-neutral-800);
1043
- --color-neutral-primary-strong: var(--color-neutral-700);
1044
- --color-neutral-secondary-soft: var(--color-neutral-900);
1045
- --color-neutral-secondary: var(--color-neutral-950);
1046
- --color-neutral-secondary-medium: var(--color-neutral-800);
1047
- --color-neutral-secondary-strong: var(--color-neutral-700);
1048
- --color-neutral-secondary-strongest: var(--color-neutral-600);
1049
- --color-neutral-tertiary-soft: var(--color-neutral-900);
1050
- --color-neutral-tertiary: var(--color-neutral-800);
1051
- --color-neutral-tertiary-medium: var(--color-neutral-700);
1052
- --color-neutral-quaternary: var(--color-neutral-700);
1053
- --color-neutral-quaternary-medium: var(--color-neutral-600);
1054
- --color-gray: var(--color-neutral-600);
1055
- --color-brand-softer: var(--color-indigo-950);
1056
- --color-brand-soft: var(--color-indigo-900);
1057
- --color-brand: var(--color-indigo-600);
1058
- --color-brand-medium: var(--color-indigo-900);
1059
- --color-brand-strong: var(--color-indigo-700);
1060
- --color-success-soft: var(--color-green-950);
1061
- --color-success: var(--color-green-600);
1062
- --color-success-medium: var(--color-green-900);
1063
- --color-success-strong: var(--color-green-700);
1064
- --color-danger-soft: var(--color-red-950);
1065
- --color-danger: var(--color-red-700);
1066
- --color-danger-medium: var(--color-red-900);
1067
- --color-danger-strong: var(--color-red-800);
1068
- --color-warning-soft: var(--color-orange-950);
1069
- --color-warning: var(--color-orange-600);
1070
- --color-warning-medium: var(--color-orange-900);
1071
- --color-warning-strong: var(--color-orange-700);
1072
- --color-dark-soft: var(--color-neutral-700);
1073
- --color-dark: var(--color-neutral-800);
1074
- --color-dark-strong: var(--color-neutral-700);
1075
- --color-disabled: var(--color-neutral-800);
1076
- --color-purple: var(--color-purple-500);
1077
- --color-sky: var(--color-sky-500);
1078
- --color-teal: var(--color-teal-500);
1079
- --color-pink: var(--color-pink-500);
1080
- --color-cyan: var(--color-cyan-500);
1081
- --color-fuchsia: var(--color-fuchsia-500);
1082
- --color-indigo: var(--color-indigo-500);
1083
- --color-orange: var(--color-orange-400);
1084
-
1085
- /* border color variables */
1086
- --color-buffer: var(--color-neutral-950);
1087
- --color-buffer-medium: var(--color-neutral-900);
1088
- --color-buffer-strong: var(--color-neutral-800);
1089
- --color-muted: var(--color-neutral-900);
1090
- --color-light-subtle: var(--color-neutral-900);
1091
- --color-light: var(--color-neutral-800);
1092
- --color-light-medium: var(--color-neutral-700);
1093
- --color-default-subtle: var(--color-neutral-900);
1094
- --color-default: var(--color-neutral-800);
1095
- --color-default-medium: var(--color-neutral-700);
1096
- --color-default-strong: var(--color-neutral-600);
1097
- --color-success-subtle: var(--color-green-900);
1098
- --color-danger-subtle: var(--color-red-900);
1099
- --color-warning-subtle: var(--color-orange-900);
1100
- --color-brand-subtle: var(--color-indigo-900);
1101
- --color-brand-light: var(--color-indigo-600);
1102
- --color-dark-subtle: var(--color-neutral-700);
1103
- --color-dark-backdrop: var(--color-neutral-950);
1104
- }