@refraction-ui/tailwind-config 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs ADDED
@@ -0,0 +1,1223 @@
1
+ 'use strict';
2
+
3
+ // src/colors.ts
4
+ var colors = {
5
+ background: "hsl(var(--background))",
6
+ foreground: "hsl(var(--foreground))",
7
+ card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" },
8
+ popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))" },
9
+ primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
10
+ secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
11
+ muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
12
+ accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
13
+ destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
14
+ border: "hsl(var(--border))",
15
+ input: "hsl(var(--input))",
16
+ ring: "hsl(var(--ring))",
17
+ chart: {
18
+ 1: "hsl(var(--chart-1))",
19
+ 2: "hsl(var(--chart-2))",
20
+ 3: "hsl(var(--chart-3))",
21
+ 4: "hsl(var(--chart-4))",
22
+ 5: "hsl(var(--chart-5))"
23
+ },
24
+ sidebar: {
25
+ DEFAULT: "hsl(var(--sidebar-background))",
26
+ foreground: "hsl(var(--sidebar-foreground))",
27
+ primary: "hsl(var(--sidebar-primary))",
28
+ "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
29
+ accent: "hsl(var(--sidebar-accent))",
30
+ "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
31
+ border: "hsl(var(--sidebar-border))",
32
+ ring: "hsl(var(--sidebar-ring))"
33
+ }
34
+ };
35
+
36
+ // src/animations.ts
37
+ var keyframes = {
38
+ "fade-in": {
39
+ from: { opacity: "0" },
40
+ to: { opacity: "1" }
41
+ },
42
+ "fade-in-up": {
43
+ from: { opacity: "0", transform: "translateY(8px)" },
44
+ to: { opacity: "1", transform: "translateY(0)" }
45
+ },
46
+ "fade-in-scale": {
47
+ from: { opacity: "0", transform: "scale(0.95)" },
48
+ to: { opacity: "1", transform: "scale(1)" }
49
+ },
50
+ "slide-up": {
51
+ from: { transform: "translateY(100%)" },
52
+ to: { transform: "translateY(0)" }
53
+ },
54
+ "slide-in-right": {
55
+ from: { opacity: "0", transform: "translateX(20px)" },
56
+ to: { opacity: "1", transform: "translateX(0)" }
57
+ },
58
+ "toast-in": {
59
+ from: { opacity: "0", transform: "translateY(16px) scale(0.95)" },
60
+ to: { opacity: "1", transform: "translateY(0) scale(1)" }
61
+ },
62
+ "toast-out": {
63
+ from: { opacity: "1", transform: "translateY(0) scale(1)" },
64
+ to: { opacity: "0", transform: "translateY(16px) scale(0.95)" }
65
+ },
66
+ "accordion-down": {
67
+ from: { height: "0" },
68
+ to: { height: "var(--radix-accordion-content-height)" }
69
+ },
70
+ "accordion-up": {
71
+ from: { height: "var(--radix-accordion-content-height)" },
72
+ to: { height: "0" }
73
+ },
74
+ "scale-in": {
75
+ from: { opacity: "0", transform: "scale(0.9)" },
76
+ to: { opacity: "1", transform: "scale(1)" }
77
+ }
78
+ };
79
+ var animation = {
80
+ "fade-in": "fade-in 0.4s ease-out",
81
+ "fade-in-up": "fade-in-up 0.4s ease-out",
82
+ "fade-in-scale": "fade-in-scale 0.3s ease-out",
83
+ "slide-up": "slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1)",
84
+ "slide-in-right": "slide-in-right 0.3s ease-out",
85
+ "toast-in": "toast-in 0.3s ease-out",
86
+ "toast-out": "toast-out 0.2s ease-in",
87
+ "accordion-down": "accordion-down 0.2s ease-out",
88
+ "accordion-up": "accordion-up 0.2s ease-out",
89
+ "scale-in": "scale-in 0.2s ease-out"
90
+ };
91
+
92
+ // src/preset.ts
93
+ var refractionPreset = {
94
+ darkMode: "class",
95
+ theme: {
96
+ container: {
97
+ center: true,
98
+ padding: "2rem",
99
+ screens: {
100
+ "2xl": "1400px"
101
+ }
102
+ },
103
+ extend: {
104
+ colors,
105
+ borderRadius: {
106
+ lg: "var(--radius)",
107
+ md: "calc(var(--radius) - 2px)",
108
+ sm: "calc(var(--radius) - 4px)"
109
+ },
110
+ fontFamily: {
111
+ sans: ["var(--font-sans)", "system-ui", "-apple-system", "sans-serif"],
112
+ mono: ["var(--font-mono)", "ui-monospace", "SFMono-Regular", "monospace"],
113
+ serif: ["var(--font-serif)", "Georgia", '"Times New Roman"', "serif"],
114
+ heading: ["var(--font-heading)", "var(--font-sans)", "system-ui", "sans-serif"]
115
+ },
116
+ fontSize: {
117
+ xs: "var(--font-size-xs)",
118
+ sm: "var(--font-size-sm)",
119
+ base: "var(--font-size-base)",
120
+ lg: "var(--font-size-lg)",
121
+ xl: "var(--font-size-xl)",
122
+ "2xl": "var(--font-size-2xl)",
123
+ "3xl": "var(--font-size-3xl)",
124
+ "4xl": "var(--font-size-4xl)",
125
+ "5xl": "var(--font-size-5xl)"
126
+ },
127
+ boxShadow: {
128
+ sm: "var(--shadow-sm)",
129
+ md: "var(--shadow-md)",
130
+ lg: "var(--shadow-lg)",
131
+ xl: "var(--shadow-xl)"
132
+ },
133
+ letterSpacing: {
134
+ tighter: "var(--letter-spacing-tighter)",
135
+ tight: "var(--letter-spacing-tight)",
136
+ normal: "var(--letter-spacing-normal)",
137
+ wide: "var(--letter-spacing-wide)",
138
+ wider: "var(--letter-spacing-wider)"
139
+ },
140
+ lineHeight: {
141
+ tight: "var(--line-height-tight)",
142
+ normal: "var(--line-height-normal)",
143
+ relaxed: "var(--line-height-relaxed)"
144
+ },
145
+ transitionDuration: {
146
+ DEFAULT: "var(--transition-duration)"
147
+ },
148
+ transitionTimingFunction: {
149
+ DEFAULT: "var(--transition-easing)"
150
+ },
151
+ backdropBlur: {
152
+ DEFAULT: "var(--backdrop-blur)"
153
+ },
154
+ keyframes,
155
+ animation
156
+ }
157
+ }
158
+ };
159
+
160
+ // src/utilities.ts
161
+ var utilitiesPlugin = ({ addUtilities }) => {
162
+ addUtilities({
163
+ ".scrollbar-hide": {
164
+ "-ms-overflow-style": "none",
165
+ "scrollbar-width": "none",
166
+ "&::-webkit-scrollbar": { display: "none" }
167
+ },
168
+ ".safe-top": {
169
+ "padding-top": "env(safe-area-inset-top)"
170
+ },
171
+ ".safe-bottom": {
172
+ "padding-bottom": "env(safe-area-inset-bottom)"
173
+ },
174
+ ".snap-lane": {
175
+ "scroll-snap-type": "x mandatory",
176
+ "& > *": { "scroll-snap-align": "start" }
177
+ },
178
+ ".momentum-scroll": {
179
+ "-webkit-overflow-scrolling": "touch"
180
+ },
181
+ ".press-scale": {
182
+ "&:active": { transform: "scale(0.97)" }
183
+ },
184
+ ".drag-handle": {
185
+ width: "36px",
186
+ height: "4px",
187
+ "border-radius": "2px",
188
+ "background-color": "hsl(var(--muted-foreground) / 0.3)",
189
+ margin: "8px auto"
190
+ },
191
+ ".text-gradient": {
192
+ "background-image": "linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)))",
193
+ "-webkit-background-clip": "text",
194
+ "-webkit-text-fill-color": "transparent",
195
+ "background-clip": "text"
196
+ },
197
+ ".glass": {
198
+ background: "hsl(var(--background) / 0.8)",
199
+ "-webkit-backdrop-filter": "blur(12px)",
200
+ "backdrop-filter": "blur(12px)"
201
+ },
202
+ ".motion-safe": {
203
+ "@media (prefers-reduced-motion: no-preference)": {
204
+ "animation-duration": "var(--animation-duration, inherit)"
205
+ }
206
+ },
207
+ ".motion-reduce": {
208
+ "@media (prefers-reduced-motion: reduce)": {
209
+ "animation-duration": "0.01ms !important",
210
+ "animation-iteration-count": "1 !important",
211
+ "transition-duration": "0.01ms !important"
212
+ }
213
+ }
214
+ });
215
+ };
216
+
217
+ // src/themes/glassa.ts
218
+ var refractionTheme = {
219
+ name: "refraction",
220
+ displayName: "Refraction",
221
+ description: "Calm, professional, no visual noise. Inspired by Linear and Vercel.",
222
+ colors: {
223
+ light: {
224
+ "--background": "0 0% 99%",
225
+ "--foreground": "240 10% 10%",
226
+ "--card": "0 0% 99%",
227
+ "--card-foreground": "240 10% 10%",
228
+ "--popover": "0 0% 100%",
229
+ "--popover-foreground": "240 10% 10%",
230
+ "--primary": "250 50% 50%",
231
+ "--primary-foreground": "0 0% 100%",
232
+ "--secondary": "240 5% 96%",
233
+ "--secondary-foreground": "240 4% 44%",
234
+ "--accent": "250 30% 95%",
235
+ "--accent-foreground": "250 50% 40%",
236
+ "--muted": "240 5% 96%",
237
+ "--muted-foreground": "240 4% 44%",
238
+ "--destructive": "0 84% 50%",
239
+ "--destructive-foreground": "0 0% 100%",
240
+ "--success": "142 71% 35%",
241
+ "--success-foreground": "0 0% 100%",
242
+ "--warning": "38 92% 50%",
243
+ "--warning-foreground": "240 10% 10%",
244
+ "--border": "240 6% 92%",
245
+ "--input": "240 6% 92%",
246
+ "--ring": "250 50% 50%",
247
+ "--radius": "0.375rem",
248
+ // Charts — colorblind-safe, spread across spectrum
249
+ "--chart-1": "250 50% 50%",
250
+ "--chart-2": "173 80% 36%",
251
+ "--chart-3": "38 92% 50%",
252
+ "--chart-4": "330 65% 50%",
253
+ "--chart-5": "201 96% 42%",
254
+ // Sidebar
255
+ "--sidebar-background": "0 0% 98%",
256
+ "--sidebar-foreground": "240 10% 10%",
257
+ "--sidebar-primary": "250 50% 50%",
258
+ "--sidebar-primary-foreground": "0 0% 100%",
259
+ "--sidebar-accent": "250 30% 95%",
260
+ "--sidebar-accent-foreground": "250 50% 40%",
261
+ "--sidebar-border": "240 6% 92%",
262
+ "--sidebar-ring": "250 50% 50%"
263
+ },
264
+ dark: {
265
+ "--background": "240 10% 4%",
266
+ "--foreground": "0 0% 98%",
267
+ "--card": "240 10% 8%",
268
+ "--card-foreground": "0 0% 98%",
269
+ "--popover": "240 10% 8%",
270
+ "--popover-foreground": "0 0% 98%",
271
+ "--primary": "250 50% 65%",
272
+ "--primary-foreground": "240 10% 4%",
273
+ "--secondary": "240 5% 16%",
274
+ "--secondary-foreground": "240 5% 65%",
275
+ "--accent": "250 30% 20%",
276
+ "--accent-foreground": "250 60% 80%",
277
+ "--muted": "240 5% 16%",
278
+ "--muted-foreground": "240 5% 65%",
279
+ "--destructive": "0 63% 31%",
280
+ "--destructive-foreground": "0 0% 98%",
281
+ "--success": "142 71% 45%",
282
+ "--success-foreground": "0 0% 98%",
283
+ "--warning": "38 92% 50%",
284
+ "--warning-foreground": "240 10% 4%",
285
+ "--border": "240 5% 16%",
286
+ "--input": "240 5% 16%",
287
+ "--ring": "250 50% 65%",
288
+ "--radius": "0.375rem",
289
+ "--chart-1": "250 50% 65%",
290
+ "--chart-2": "173 70% 50%",
291
+ "--chart-3": "38 92% 60%",
292
+ "--chart-4": "330 60% 65%",
293
+ "--chart-5": "201 90% 55%",
294
+ "--sidebar-background": "240 10% 4%",
295
+ "--sidebar-foreground": "0 0% 98%",
296
+ "--sidebar-primary": "250 50% 65%",
297
+ "--sidebar-primary-foreground": "240 10% 4%",
298
+ "--sidebar-accent": "250 30% 20%",
299
+ "--sidebar-accent-foreground": "250 60% 80%",
300
+ "--sidebar-border": "240 5% 16%",
301
+ "--sidebar-ring": "250 50% 65%"
302
+ }
303
+ },
304
+ fonts: {
305
+ sans: "'Inter', system-ui, sans-serif",
306
+ heading: "'Inter', system-ui, sans-serif",
307
+ mono: "'JetBrains Mono', ui-monospace, monospace"
308
+ },
309
+ headingWeight: "600",
310
+ headingLetterSpacing: "-0.02em",
311
+ headingLineHeight: "1.2",
312
+ fontSizeBase: "1rem",
313
+ radius: "0.375rem",
314
+ avatarRadius: "9999px",
315
+ badgeRadius: "9999px",
316
+ buttonRadius: "0.375rem",
317
+ cardRadius: "0.5rem",
318
+ shadows: {
319
+ sm: "0 1px 2px 0 rgb(0 0 0 / 0.03)",
320
+ md: "0 2px 4px -1px rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.03)",
321
+ lg: "0 6px 10px -2px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.03)"
322
+ },
323
+ cardShadow: "0 1px 2px 0 rgb(0 0 0 / 0.03)",
324
+ buttonShadow: "none",
325
+ overlayOpacity: "0.5",
326
+ backdropBlur: "8px",
327
+ glassBackground: "rgba(252, 252, 253, 0.8)",
328
+ spacingScale: 1,
329
+ containerMaxWidth: "1280px",
330
+ cardPadding: "1.5rem",
331
+ inputHeight: "2.5rem",
332
+ borderWidth: "1px",
333
+ inputStyle: "bordered",
334
+ buttonStyle: "filled",
335
+ hoverEffect: "darken",
336
+ disabledOpacity: "0.5",
337
+ linkStyle: "color-only",
338
+ focusRingStyle: "ring",
339
+ iconStyle: "outlined",
340
+ iconStrokeWidth: "1.5",
341
+ scrollbarStyle: "thin",
342
+ selectionBackground: "250 50% 50%",
343
+ selectionForeground: "0 0% 100%",
344
+ tooltipStyle: "dark",
345
+ tableStyle: "clean"
346
+ };
347
+ var luxeTheme = {
348
+ name: "luxe",
349
+ displayName: "Luxe",
350
+ description: "Premium, spacious, every pixel matters. Inspired by Apple product pages.",
351
+ colors: {
352
+ light: {
353
+ "--background": "0 0% 100%",
354
+ "--foreground": "0 0% 12%",
355
+ "--card": "0 0% 100%",
356
+ "--card-foreground": "0 0% 12%",
357
+ "--popover": "0 0% 100%",
358
+ "--popover-foreground": "0 0% 12%",
359
+ "--primary": "220 90% 45%",
360
+ "--primary-foreground": "0 0% 100%",
361
+ "--secondary": "220 5% 96%",
362
+ "--secondary-foreground": "220 5% 40%",
363
+ "--accent": "220 30% 95%",
364
+ "--accent-foreground": "220 60% 35%",
365
+ "--muted": "220 5% 96%",
366
+ "--muted-foreground": "220 5% 40%",
367
+ "--destructive": "0 72% 45%",
368
+ "--destructive-foreground": "0 0% 100%",
369
+ "--success": "142 71% 35%",
370
+ "--success-foreground": "0 0% 100%",
371
+ "--warning": "38 92% 50%",
372
+ "--warning-foreground": "0 0% 12%",
373
+ "--border": "220 6% 93%",
374
+ "--input": "220 6% 93%",
375
+ "--ring": "220 90% 45%",
376
+ "--radius": "0.75rem",
377
+ "--chart-1": "220 90% 45%",
378
+ "--chart-2": "160 65% 38%",
379
+ "--chart-3": "38 85% 50%",
380
+ "--chart-4": "280 50% 50%",
381
+ "--chart-5": "350 60% 50%",
382
+ "--sidebar-background": "0 0% 98%",
383
+ "--sidebar-foreground": "0 0% 12%",
384
+ "--sidebar-primary": "220 90% 45%",
385
+ "--sidebar-primary-foreground": "0 0% 100%",
386
+ "--sidebar-accent": "220 30% 95%",
387
+ "--sidebar-accent-foreground": "220 60% 35%",
388
+ "--sidebar-border": "220 6% 93%",
389
+ "--sidebar-ring": "220 90% 45%"
390
+ },
391
+ dark: {
392
+ "--background": "0 0% 7%",
393
+ "--foreground": "0 0% 98%",
394
+ "--card": "0 0% 10%",
395
+ "--card-foreground": "0 0% 98%",
396
+ "--popover": "0 0% 10%",
397
+ "--popover-foreground": "0 0% 98%",
398
+ "--primary": "220 85% 60%",
399
+ "--primary-foreground": "0 0% 7%",
400
+ "--secondary": "220 5% 16%",
401
+ "--secondary-foreground": "220 5% 65%",
402
+ "--accent": "220 25% 18%",
403
+ "--accent-foreground": "220 60% 75%",
404
+ "--muted": "220 5% 16%",
405
+ "--muted-foreground": "220 5% 60%",
406
+ "--destructive": "0 63% 31%",
407
+ "--destructive-foreground": "0 0% 98%",
408
+ "--success": "142 71% 45%",
409
+ "--success-foreground": "0 0% 98%",
410
+ "--warning": "38 92% 50%",
411
+ "--warning-foreground": "0 0% 7%",
412
+ "--border": "220 5% 16%",
413
+ "--input": "220 5% 16%",
414
+ "--ring": "220 85% 60%",
415
+ "--radius": "0.75rem",
416
+ "--chart-1": "220 85% 60%",
417
+ "--chart-2": "160 55% 48%",
418
+ "--chart-3": "38 85% 58%",
419
+ "--chart-4": "280 45% 60%",
420
+ "--chart-5": "350 55% 60%",
421
+ "--sidebar-background": "0 0% 5%",
422
+ "--sidebar-foreground": "0 0% 98%",
423
+ "--sidebar-primary": "220 85% 60%",
424
+ "--sidebar-primary-foreground": "0 0% 7%",
425
+ "--sidebar-accent": "220 25% 18%",
426
+ "--sidebar-accent-foreground": "220 60% 75%",
427
+ "--sidebar-border": "220 5% 16%",
428
+ "--sidebar-ring": "220 85% 60%"
429
+ }
430
+ },
431
+ fonts: {
432
+ sans: "system-ui, -apple-system, 'Segoe UI', sans-serif",
433
+ heading: "system-ui, -apple-system, 'Segoe UI', sans-serif",
434
+ mono: "'SF Mono', ui-monospace, monospace"
435
+ },
436
+ headingWeight: "300",
437
+ headingLetterSpacing: "-0.03em",
438
+ headingLineHeight: "1.1",
439
+ fontSizeBase: "1rem",
440
+ radius: "0.75rem",
441
+ avatarRadius: "9999px",
442
+ badgeRadius: "9999px",
443
+ buttonRadius: "9999px",
444
+ cardRadius: "1rem",
445
+ shadows: {
446
+ sm: "0 1px 3px 0 rgb(0 0 0 / 0.04)",
447
+ md: "0 4px 8px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04)",
448
+ lg: "0 8px 16px -4px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04)"
449
+ },
450
+ cardShadow: "0 4px 8px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04)",
451
+ buttonShadow: "0 1px 3px 0 rgb(0 0 0 / 0.04)",
452
+ overlayOpacity: "0.35",
453
+ backdropBlur: "20px",
454
+ glassBackground: "rgba(255, 255, 255, 0.85)",
455
+ spacingScale: 1.15,
456
+ containerMaxWidth: "1200px",
457
+ cardPadding: "2rem",
458
+ inputHeight: "2.75rem",
459
+ borderWidth: "0px",
460
+ inputStyle: "filled",
461
+ buttonStyle: "filled",
462
+ hoverEffect: "shadow-lift",
463
+ disabledOpacity: "0.4",
464
+ linkStyle: "underline-on-hover",
465
+ focusRingStyle: "shadow",
466
+ iconStyle: "filled",
467
+ iconStrokeWidth: "1.5",
468
+ scrollbarStyle: "hidden",
469
+ selectionBackground: "220 90% 45%",
470
+ selectionForeground: "0 0% 100%",
471
+ tooltipStyle: "light",
472
+ tableStyle: "clean"
473
+ };
474
+ var warmTheme = {
475
+ name: "warm",
476
+ displayName: "Warm",
477
+ description: "Inviting, hospitable, cozy. Inspired by Airbnb and Notion.",
478
+ colors: {
479
+ light: {
480
+ "--background": "35 40% 99%",
481
+ "--foreground": "15 20% 12%",
482
+ "--card": "35 30% 99%",
483
+ "--card-foreground": "15 20% 12%",
484
+ "--popover": "35 30% 99%",
485
+ "--popover-foreground": "15 20% 12%",
486
+ "--primary": "350 85% 46%",
487
+ "--primary-foreground": "0 0% 100%",
488
+ "--secondary": "30 15% 95%",
489
+ "--secondary-foreground": "25 10% 40%",
490
+ "--accent": "350 30% 94%",
491
+ "--accent-foreground": "350 60% 38%",
492
+ "--muted": "30 15% 95%",
493
+ "--muted-foreground": "25 10% 40%",
494
+ "--destructive": "0 72% 45%",
495
+ "--destructive-foreground": "0 0% 100%",
496
+ "--success": "142 71% 35%",
497
+ "--success-foreground": "0 0% 100%",
498
+ "--warning": "38 92% 50%",
499
+ "--warning-foreground": "15 20% 12%",
500
+ "--border": "30 12% 90%",
501
+ "--input": "30 12% 90%",
502
+ "--ring": "350 85% 46%",
503
+ "--radius": "0.75rem",
504
+ "--chart-1": "350 85% 46%",
505
+ "--chart-2": "195 70% 42%",
506
+ "--chart-3": "155 60% 38%",
507
+ "--chart-4": "270 50% 55%",
508
+ "--chart-5": "45 85% 48%",
509
+ "--sidebar-background": "35 25% 97%",
510
+ "--sidebar-foreground": "15 20% 12%",
511
+ "--sidebar-primary": "350 85% 46%",
512
+ "--sidebar-primary-foreground": "0 0% 100%",
513
+ "--sidebar-accent": "350 30% 94%",
514
+ "--sidebar-accent-foreground": "350 60% 38%",
515
+ "--sidebar-border": "30 12% 90%",
516
+ "--sidebar-ring": "350 85% 46%"
517
+ },
518
+ dark: {
519
+ "--background": "15 15% 5%",
520
+ "--foreground": "30 20% 95%",
521
+ "--card": "15 15% 9%",
522
+ "--card-foreground": "30 20% 95%",
523
+ "--popover": "15 15% 9%",
524
+ "--popover-foreground": "30 20% 95%",
525
+ "--primary": "350 80% 65%",
526
+ "--primary-foreground": "15 15% 5%",
527
+ "--secondary": "20 10% 16%",
528
+ "--secondary-foreground": "25 10% 65%",
529
+ "--accent": "350 25% 18%",
530
+ "--accent-foreground": "350 50% 70%",
531
+ "--muted": "20 10% 16%",
532
+ "--muted-foreground": "30 10% 60%",
533
+ "--destructive": "0 63% 31%",
534
+ "--destructive-foreground": "0 0% 98%",
535
+ "--success": "142 71% 45%",
536
+ "--success-foreground": "0 0% 98%",
537
+ "--warning": "38 92% 50%",
538
+ "--warning-foreground": "15 15% 5%",
539
+ "--border": "20 10% 16%",
540
+ "--input": "20 10% 16%",
541
+ "--ring": "350 80% 65%",
542
+ "--radius": "0.75rem",
543
+ "--chart-1": "350 80% 65%",
544
+ "--chart-2": "195 65% 52%",
545
+ "--chart-3": "155 50% 48%",
546
+ "--chart-4": "270 45% 65%",
547
+ "--chart-5": "45 80% 58%",
548
+ "--sidebar-background": "15 15% 5%",
549
+ "--sidebar-foreground": "30 20% 95%",
550
+ "--sidebar-primary": "350 80% 65%",
551
+ "--sidebar-primary-foreground": "15 15% 5%",
552
+ "--sidebar-accent": "350 25% 18%",
553
+ "--sidebar-accent-foreground": "350 50% 70%",
554
+ "--sidebar-border": "20 10% 16%",
555
+ "--sidebar-ring": "350 80% 65%"
556
+ }
557
+ },
558
+ fonts: {
559
+ sans: "system-ui, -apple-system, 'Segoe UI', sans-serif",
560
+ heading: "system-ui, -apple-system, 'Segoe UI', sans-serif",
561
+ mono: "'JetBrains Mono', ui-monospace, monospace"
562
+ },
563
+ headingWeight: "600",
564
+ headingLetterSpacing: "-0.01em",
565
+ headingLineHeight: "1.25",
566
+ fontSizeBase: "1rem",
567
+ radius: "0.75rem",
568
+ avatarRadius: "9999px",
569
+ badgeRadius: "9999px",
570
+ buttonRadius: "0.75rem",
571
+ cardRadius: "1rem",
572
+ shadows: {
573
+ sm: "0 1px 3px 0 rgb(120 80 40 / 0.06)",
574
+ md: "0 4px 6px -1px rgb(120 80 40 / 0.08), 0 2px 4px -2px rgb(120 80 40 / 0.06)",
575
+ lg: "0 10px 15px -3px rgb(120 80 40 / 0.08), 0 4px 6px -4px rgb(120 80 40 / 0.06)"
576
+ },
577
+ cardShadow: "0 1px 3px 0 rgb(120 80 40 / 0.06)",
578
+ buttonShadow: "none",
579
+ overlayOpacity: "0.45",
580
+ backdropBlur: "12px",
581
+ glassBackground: "rgba(255, 252, 248, 0.85)",
582
+ spacingScale: 1.05,
583
+ containerMaxWidth: "1280px",
584
+ cardPadding: "1.5rem",
585
+ inputHeight: "2.5rem",
586
+ borderWidth: "1px",
587
+ inputStyle: "bordered",
588
+ buttonStyle: "filled",
589
+ hoverEffect: "darken",
590
+ disabledOpacity: "0.5",
591
+ linkStyle: "underline",
592
+ focusRingStyle: "ring",
593
+ iconStyle: "outlined",
594
+ iconStrokeWidth: "2",
595
+ scrollbarStyle: "default",
596
+ selectionBackground: "350 85% 46%",
597
+ selectionForeground: "0 0% 100%",
598
+ tooltipStyle: "dark",
599
+ tableStyle: "clean"
600
+ };
601
+ var signalTheme = {
602
+ name: "signal",
603
+ displayName: "Signal",
604
+ description: "Focused, dense, productive. Inspired by Slack and Linear.",
605
+ colors: {
606
+ light: {
607
+ "--background": "0 0% 100%",
608
+ "--foreground": "210 15% 12%",
609
+ "--card": "0 0% 100%",
610
+ "--card-foreground": "210 15% 12%",
611
+ "--popover": "0 0% 100%",
612
+ "--popover-foreground": "210 15% 12%",
613
+ "--primary": "190 80% 32%",
614
+ "--primary-foreground": "0 0% 100%",
615
+ "--secondary": "200 8% 95%",
616
+ "--secondary-foreground": "210 8% 40%",
617
+ "--accent": "190 25% 93%",
618
+ "--accent-foreground": "190 60% 28%",
619
+ "--muted": "200 8% 95%",
620
+ "--muted-foreground": "210 8% 40%",
621
+ "--destructive": "0 72% 45%",
622
+ "--destructive-foreground": "0 0% 100%",
623
+ "--success": "142 71% 35%",
624
+ "--success-foreground": "0 0% 100%",
625
+ "--warning": "38 92% 50%",
626
+ "--warning-foreground": "210 15% 12%",
627
+ "--border": "210 10% 90%",
628
+ "--input": "210 10% 90%",
629
+ "--ring": "190 80% 32%",
630
+ "--radius": "0.375rem",
631
+ "--chart-1": "190 80% 32%",
632
+ "--chart-2": "35 85% 50%",
633
+ "--chart-3": "252 65% 55%",
634
+ "--chart-4": "340 60% 50%",
635
+ "--chart-5": "160 70% 38%",
636
+ "--sidebar-background": "200 8% 97%",
637
+ "--sidebar-foreground": "210 15% 12%",
638
+ "--sidebar-primary": "190 80% 32%",
639
+ "--sidebar-primary-foreground": "0 0% 100%",
640
+ "--sidebar-accent": "190 25% 93%",
641
+ "--sidebar-accent-foreground": "190 60% 28%",
642
+ "--sidebar-border": "210 10% 90%",
643
+ "--sidebar-ring": "190 80% 32%"
644
+ },
645
+ dark: {
646
+ "--background": "210 15% 5%",
647
+ "--foreground": "190 10% 95%",
648
+ "--card": "210 13% 9%",
649
+ "--card-foreground": "190 10% 95%",
650
+ "--popover": "210 13% 9%",
651
+ "--popover-foreground": "190 10% 95%",
652
+ "--primary": "190 70% 50%",
653
+ "--primary-foreground": "210 15% 5%",
654
+ "--secondary": "210 8% 16%",
655
+ "--secondary-foreground": "210 8% 65%",
656
+ "--accent": "190 20% 18%",
657
+ "--accent-foreground": "190 50% 65%",
658
+ "--muted": "210 8% 16%",
659
+ "--muted-foreground": "210 8% 60%",
660
+ "--destructive": "0 63% 31%",
661
+ "--destructive-foreground": "0 0% 98%",
662
+ "--success": "142 71% 45%",
663
+ "--success-foreground": "0 0% 98%",
664
+ "--warning": "38 92% 50%",
665
+ "--warning-foreground": "210 15% 5%",
666
+ "--border": "210 10% 16%",
667
+ "--input": "210 10% 16%",
668
+ "--ring": "190 70% 50%",
669
+ "--radius": "0.375rem",
670
+ "--chart-1": "190 70% 50%",
671
+ "--chart-2": "35 80% 58%",
672
+ "--chart-3": "252 55% 65%",
673
+ "--chart-4": "340 55% 60%",
674
+ "--chart-5": "160 55% 48%",
675
+ "--sidebar-background": "210 15% 5%",
676
+ "--sidebar-foreground": "190 10% 95%",
677
+ "--sidebar-primary": "190 70% 50%",
678
+ "--sidebar-primary-foreground": "210 15% 5%",
679
+ "--sidebar-accent": "190 20% 18%",
680
+ "--sidebar-accent-foreground": "190 50% 65%",
681
+ "--sidebar-border": "210 10% 16%",
682
+ "--sidebar-ring": "190 70% 50%"
683
+ }
684
+ },
685
+ fonts: {
686
+ sans: "system-ui, -apple-system, 'Segoe UI', sans-serif",
687
+ heading: "system-ui, -apple-system, 'Segoe UI', sans-serif",
688
+ mono: "'JetBrains Mono', ui-monospace, monospace"
689
+ },
690
+ headingWeight: "600",
691
+ headingLetterSpacing: "-0.02em",
692
+ headingLineHeight: "1.2",
693
+ fontSizeBase: "1rem",
694
+ radius: "0.375rem",
695
+ avatarRadius: "0.25rem",
696
+ badgeRadius: "0.25rem",
697
+ buttonRadius: "0.25rem",
698
+ cardRadius: "0.375rem",
699
+ shadows: {
700
+ sm: "0 1px 2px 0 rgb(0 0 0 / 0.06)",
701
+ md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.08)",
702
+ lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.08)"
703
+ },
704
+ cardShadow: "0 1px 2px 0 rgb(0 0 0 / 0.06)",
705
+ buttonShadow: "none",
706
+ overlayOpacity: "0.6",
707
+ backdropBlur: "0px",
708
+ glassBackground: "rgba(255, 255, 255, 0.95)",
709
+ spacingScale: 0.85,
710
+ containerMaxWidth: "1400px",
711
+ cardPadding: "1rem",
712
+ inputHeight: "2rem",
713
+ borderWidth: "1px",
714
+ inputStyle: "bordered",
715
+ buttonStyle: "filled",
716
+ hoverEffect: "darken",
717
+ disabledOpacity: "0.4",
718
+ linkStyle: "color-only",
719
+ focusRingStyle: "ring",
720
+ iconStyle: "outlined",
721
+ iconStrokeWidth: "1.5",
722
+ scrollbarStyle: "thin",
723
+ selectionBackground: "190 80% 32%",
724
+ selectionForeground: "0 0% 100%",
725
+ tooltipStyle: "dark",
726
+ tableStyle: "bordered"
727
+ };
728
+ var pulseTheme = {
729
+ name: "pulse",
730
+ displayName: "Pulse",
731
+ description: "Energetic, bold, playful. Inspired by Spotify and Discord.",
732
+ colors: {
733
+ light: {
734
+ "--background": "240 10% 97%",
735
+ "--foreground": "240 10% 10%",
736
+ "--card": "240 8% 99%",
737
+ "--card-foreground": "240 10% 10%",
738
+ "--popover": "240 8% 99%",
739
+ "--popover-foreground": "240 10% 10%",
740
+ "--primary": "265 80% 55%",
741
+ "--primary-foreground": "0 0% 100%",
742
+ "--secondary": "240 8% 93%",
743
+ "--secondary-foreground": "240 6% 40%",
744
+ "--accent": "265 30% 94%",
745
+ "--accent-foreground": "265 60% 40%",
746
+ "--muted": "240 8% 93%",
747
+ "--muted-foreground": "240 6% 40%",
748
+ "--destructive": "0 72% 45%",
749
+ "--destructive-foreground": "0 0% 100%",
750
+ "--success": "142 71% 35%",
751
+ "--success-foreground": "0 0% 100%",
752
+ "--warning": "38 92% 50%",
753
+ "--warning-foreground": "240 10% 10%",
754
+ "--border": "240 8% 90%",
755
+ "--input": "240 8% 90%",
756
+ "--ring": "265 80% 55%",
757
+ "--radius": "1rem",
758
+ "--chart-1": "265 80% 55%",
759
+ "--chart-2": "190 80% 42%",
760
+ "--chart-3": "55 80% 48%",
761
+ "--chart-4": "340 65% 50%",
762
+ "--chart-5": "140 60% 40%",
763
+ "--sidebar-background": "240 8% 96%",
764
+ "--sidebar-foreground": "240 10% 10%",
765
+ "--sidebar-primary": "265 80% 55%",
766
+ "--sidebar-primary-foreground": "0 0% 100%",
767
+ "--sidebar-accent": "265 30% 94%",
768
+ "--sidebar-accent-foreground": "265 60% 40%",
769
+ "--sidebar-border": "240 8% 90%",
770
+ "--sidebar-ring": "265 80% 55%"
771
+ },
772
+ dark: {
773
+ "--background": "260 15% 5%",
774
+ "--foreground": "260 10% 96%",
775
+ "--card": "260 12% 8%",
776
+ "--card-foreground": "260 10% 96%",
777
+ "--popover": "260 12% 8%",
778
+ "--popover-foreground": "260 10% 96%",
779
+ "--primary": "265 75% 65%",
780
+ "--primary-foreground": "260 15% 5%",
781
+ "--secondary": "260 6% 16%",
782
+ "--secondary-foreground": "260 6% 65%",
783
+ "--accent": "265 25% 18%",
784
+ "--accent-foreground": "265 55% 75%",
785
+ "--muted": "260 6% 16%",
786
+ "--muted-foreground": "260 6% 60%",
787
+ "--destructive": "0 63% 31%",
788
+ "--destructive-foreground": "0 0% 98%",
789
+ "--success": "142 71% 45%",
790
+ "--success-foreground": "0 0% 98%",
791
+ "--warning": "38 92% 50%",
792
+ "--warning-foreground": "260 15% 5%",
793
+ "--border": "260 6% 16%",
794
+ "--input": "260 6% 16%",
795
+ "--ring": "265 75% 65%",
796
+ "--radius": "1rem",
797
+ "--chart-1": "265 75% 65%",
798
+ "--chart-2": "190 75% 52%",
799
+ "--chart-3": "55 75% 58%",
800
+ "--chart-4": "340 55% 60%",
801
+ "--chart-5": "140 50% 50%",
802
+ "--sidebar-background": "260 15% 5%",
803
+ "--sidebar-foreground": "260 10% 96%",
804
+ "--sidebar-primary": "265 75% 65%",
805
+ "--sidebar-primary-foreground": "260 15% 5%",
806
+ "--sidebar-accent": "265 25% 18%",
807
+ "--sidebar-accent-foreground": "265 55% 75%",
808
+ "--sidebar-border": "260 6% 16%",
809
+ "--sidebar-ring": "265 75% 65%"
810
+ }
811
+ },
812
+ fonts: {
813
+ sans: "system-ui, -apple-system, 'Segoe UI', sans-serif",
814
+ heading: "system-ui, -apple-system, 'Segoe UI', sans-serif",
815
+ mono: "'JetBrains Mono', ui-monospace, monospace"
816
+ },
817
+ headingWeight: "700",
818
+ headingLetterSpacing: "-0.01em",
819
+ headingLineHeight: "1.15",
820
+ fontSizeBase: "1rem",
821
+ radius: "1rem",
822
+ avatarRadius: "9999px",
823
+ badgeRadius: "9999px",
824
+ buttonRadius: "9999px",
825
+ cardRadius: "1.25rem",
826
+ shadows: {
827
+ sm: "0 2px 4px 0 rgb(0 0 0 / 0.08)",
828
+ md: "0 6px 10px -2px rgb(0 0 0 / 0.12), 0 3px 5px -2px rgb(0 0 0 / 0.08)",
829
+ lg: "0 14px 20px -4px rgb(0 0 0 / 0.14), 0 6px 8px -4px rgb(0 0 0 / 0.1)"
830
+ },
831
+ cardShadow: "0 2px 4px 0 rgb(0 0 0 / 0.08)",
832
+ buttonShadow: "0 2px 4px 0 rgb(0 0 0 / 0.08)",
833
+ overlayOpacity: "0.5",
834
+ backdropBlur: "16px",
835
+ glassBackground: "rgba(248, 247, 252, 0.8)",
836
+ spacingScale: 1,
837
+ containerMaxWidth: "1280px",
838
+ cardPadding: "1.5rem",
839
+ inputHeight: "2.5rem",
840
+ borderWidth: "1px",
841
+ inputStyle: "filled",
842
+ buttonStyle: "filled",
843
+ hoverEffect: "lighten",
844
+ disabledOpacity: "0.4",
845
+ linkStyle: "color-only",
846
+ focusRingStyle: "ring",
847
+ iconStyle: "filled",
848
+ iconStrokeWidth: "1.5",
849
+ scrollbarStyle: "thin",
850
+ selectionBackground: "265 80% 55%",
851
+ selectionForeground: "0 0% 100%",
852
+ tooltipStyle: "primary",
853
+ tableStyle: "striped"
854
+ };
855
+ var monoTheme = {
856
+ name: "mono",
857
+ displayName: "Mono",
858
+ description: "Technical, precise, code-first. Inspired by Stripe docs and GitHub.",
859
+ colors: {
860
+ light: {
861
+ "--background": "210 20% 98%",
862
+ "--foreground": "210 15% 20%",
863
+ "--card": "210 20% 98%",
864
+ "--card-foreground": "210 15% 20%",
865
+ "--popover": "0 0% 100%",
866
+ "--popover-foreground": "210 15% 20%",
867
+ "--primary": "210 10% 23%",
868
+ "--primary-foreground": "0 0% 100%",
869
+ "--secondary": "210 12% 94%",
870
+ "--secondary-foreground": "210 10% 40%",
871
+ "--accent": "210 15% 93%",
872
+ "--accent-foreground": "210 10% 20%",
873
+ "--muted": "210 12% 94%",
874
+ "--muted-foreground": "210 10% 40%",
875
+ "--destructive": "0 72% 45%",
876
+ "--destructive-foreground": "0 0% 100%",
877
+ "--success": "142 71% 35%",
878
+ "--success-foreground": "0 0% 100%",
879
+ "--warning": "38 92% 50%",
880
+ "--warning-foreground": "210 15% 20%",
881
+ "--border": "210 14% 89%",
882
+ "--input": "210 14% 89%",
883
+ "--ring": "210 10% 23%",
884
+ "--radius": "0.25rem",
885
+ "--chart-1": "210 10% 23%",
886
+ "--chart-2": "210 10% 40%",
887
+ "--chart-3": "210 10% 55%",
888
+ "--chart-4": "210 10% 70%",
889
+ "--chart-5": "210 10% 82%",
890
+ "--sidebar-background": "210 18% 96%",
891
+ "--sidebar-foreground": "210 15% 20%",
892
+ "--sidebar-primary": "210 10% 23%",
893
+ "--sidebar-primary-foreground": "0 0% 100%",
894
+ "--sidebar-accent": "210 15% 93%",
895
+ "--sidebar-accent-foreground": "210 10% 20%",
896
+ "--sidebar-border": "210 14% 89%",
897
+ "--sidebar-ring": "210 10% 23%"
898
+ },
899
+ dark: {
900
+ "--background": "210 15% 5%",
901
+ "--foreground": "210 15% 93%",
902
+ "--card": "210 13% 8%",
903
+ "--card-foreground": "210 15% 93%",
904
+ "--popover": "210 13% 8%",
905
+ "--popover-foreground": "210 15% 93%",
906
+ "--primary": "210 10% 80%",
907
+ "--primary-foreground": "210 15% 5%",
908
+ "--secondary": "210 8% 14%",
909
+ "--secondary-foreground": "210 8% 65%",
910
+ "--accent": "210 10% 18%",
911
+ "--accent-foreground": "210 10% 80%",
912
+ "--muted": "210 8% 14%",
913
+ "--muted-foreground": "210 8% 60%",
914
+ "--destructive": "0 63% 31%",
915
+ "--destructive-foreground": "0 0% 98%",
916
+ "--success": "142 71% 45%",
917
+ "--success-foreground": "0 0% 98%",
918
+ "--warning": "38 92% 50%",
919
+ "--warning-foreground": "210 15% 5%",
920
+ "--border": "210 8% 16%",
921
+ "--input": "210 8% 16%",
922
+ "--ring": "210 10% 80%",
923
+ "--radius": "0.25rem",
924
+ "--chart-1": "210 10% 80%",
925
+ "--chart-2": "210 10% 65%",
926
+ "--chart-3": "210 10% 50%",
927
+ "--chart-4": "210 10% 35%",
928
+ "--chart-5": "210 10% 22%",
929
+ "--sidebar-background": "210 15% 5%",
930
+ "--sidebar-foreground": "210 15% 93%",
931
+ "--sidebar-primary": "210 10% 80%",
932
+ "--sidebar-primary-foreground": "210 15% 5%",
933
+ "--sidebar-accent": "210 10% 18%",
934
+ "--sidebar-accent-foreground": "210 10% 80%",
935
+ "--sidebar-border": "210 8% 16%",
936
+ "--sidebar-ring": "210 10% 80%"
937
+ }
938
+ },
939
+ fonts: {
940
+ sans: "system-ui, -apple-system, 'Segoe UI', sans-serif",
941
+ heading: "'JetBrains Mono', ui-monospace, monospace",
942
+ mono: "'JetBrains Mono', ui-monospace, monospace"
943
+ },
944
+ headingWeight: "500",
945
+ headingLetterSpacing: "-0.02em",
946
+ headingLineHeight: "1.25",
947
+ fontSizeBase: "1rem",
948
+ radius: "0.25rem",
949
+ avatarRadius: "0.25rem",
950
+ badgeRadius: "0.125rem",
951
+ buttonRadius: "0.25rem",
952
+ cardRadius: "0.25rem",
953
+ shadows: {
954
+ sm: "none",
955
+ md: "none",
956
+ lg: "none"
957
+ },
958
+ cardShadow: "none",
959
+ buttonShadow: "none",
960
+ overlayOpacity: "0.65",
961
+ backdropBlur: "0px",
962
+ glassBackground: "rgba(246, 249, 252, 0.95)",
963
+ spacingScale: 1,
964
+ containerMaxWidth: "1200px",
965
+ cardPadding: "1.5rem",
966
+ inputHeight: "2.25rem",
967
+ borderWidth: "1px",
968
+ inputStyle: "bordered",
969
+ buttonStyle: "filled",
970
+ hoverEffect: "darken",
971
+ disabledOpacity: "0.5",
972
+ linkStyle: "underline-on-hover",
973
+ focusRingStyle: "outline",
974
+ iconStyle: "outlined",
975
+ iconStrokeWidth: "1.5",
976
+ scrollbarStyle: "default",
977
+ selectionBackground: "210 10% 23%",
978
+ selectionForeground: "0 0% 100%",
979
+ tooltipStyle: "dark",
980
+ tableStyle: "bordered"
981
+ };
982
+ var THEMES = {
983
+ refraction: refractionTheme,
984
+ luxe: luxeTheme,
985
+ warm: warmTheme,
986
+ signal: signalTheme,
987
+ pulse: pulseTheme,
988
+ mono: monoTheme
989
+ };
990
+ var DEFAULT_THEME = "refraction";
991
+ var glassaTheme = {
992
+ name: refractionTheme.name,
993
+ light: refractionTheme.colors.light,
994
+ dark: refractionTheme.colors.dark
995
+ };
996
+ function generateThemeCSS(theme = refractionTheme) {
997
+ const colorVarsLight = Object.entries(theme.colors.light).map(([key, value]) => ` ${key}: ${value};`).join("\n");
998
+ const colorVarsDark = Object.entries(theme.colors.dark).map(([key, value]) => ` ${key}: ${value};`).join("\n");
999
+ const typographyVars = [
1000
+ ` --font-sans: ${theme.fonts.sans};`,
1001
+ ` --font-heading: ${theme.fonts.heading};`,
1002
+ ` --font-mono: ${theme.fonts.mono};`,
1003
+ "",
1004
+ ` --heading-weight: ${theme.headingWeight};`,
1005
+ ` --heading-letter-spacing: ${theme.headingLetterSpacing};`,
1006
+ ` --heading-line-height: ${theme.headingLineHeight};`,
1007
+ ` --font-size-base: ${theme.fontSizeBase};`
1008
+ ].join("\n");
1009
+ const layoutVars = [
1010
+ ` --radius: ${theme.radius};`,
1011
+ ` --avatar-radius: ${theme.avatarRadius};`,
1012
+ ` --badge-radius: ${theme.badgeRadius};`,
1013
+ ` --button-radius: ${theme.buttonRadius};`,
1014
+ ` --card-radius: ${theme.cardRadius};`
1015
+ ].join("\n");
1016
+ const shadowVars = [
1017
+ ` --shadow-sm: ${theme.shadows.sm};`,
1018
+ ` --shadow-md: ${theme.shadows.md};`,
1019
+ ` --shadow-lg: ${theme.shadows.lg};`,
1020
+ ` --card-shadow: ${theme.cardShadow};`,
1021
+ ` --button-shadow: ${theme.buttonShadow};`
1022
+ ].join("\n");
1023
+ const brandingVars = [
1024
+ // Glass & overlay
1025
+ ` --overlay-opacity: ${theme.overlayOpacity};`,
1026
+ ` --backdrop-blur: ${theme.backdropBlur};`,
1027
+ ` --glass-bg: ${theme.glassBackground};`,
1028
+ // Spacing & density
1029
+ ` --spacing-scale: ${theme.spacingScale};`,
1030
+ ` --container-max-width: ${theme.containerMaxWidth};`,
1031
+ ` --card-padding: ${theme.cardPadding};`,
1032
+ ` --input-height: ${theme.inputHeight};`,
1033
+ // Borders
1034
+ ` --border-width: ${theme.borderWidth};`,
1035
+ // Component styles
1036
+ ` --input-style: ${theme.inputStyle};`,
1037
+ ` --button-style: ${theme.buttonStyle};`,
1038
+ ` --hover-effect: ${theme.hoverEffect};`,
1039
+ ` --disabled-opacity: ${theme.disabledOpacity};`,
1040
+ ` --link-style: ${theme.linkStyle};`,
1041
+ ` --focus-ring-style: ${theme.focusRingStyle};`,
1042
+ ` --icon-style: ${theme.iconStyle};`,
1043
+ ` --icon-stroke-width: ${theme.iconStrokeWidth};`,
1044
+ ` --scrollbar-style: ${theme.scrollbarStyle};`,
1045
+ ` --tooltip-style: ${theme.tooltipStyle};`,
1046
+ ` --table-style: ${theme.tableStyle};`,
1047
+ // Selection
1048
+ ` --selection-background: ${theme.selectionBackground};`,
1049
+ ` --selection-foreground: ${theme.selectionForeground};`
1050
+ ].join("\n");
1051
+ return [
1052
+ ":root {",
1053
+ " /* Colors */",
1054
+ colorVarsLight,
1055
+ "",
1056
+ " /* Typography */",
1057
+ typographyVars,
1058
+ "",
1059
+ " /* Layout */",
1060
+ layoutVars,
1061
+ "",
1062
+ " /* Shadows */",
1063
+ shadowVars,
1064
+ "",
1065
+ " /* Branding */",
1066
+ brandingVars,
1067
+ "}",
1068
+ "",
1069
+ ".dark {",
1070
+ colorVarsDark,
1071
+ "}",
1072
+ ""
1073
+ ].join("\n");
1074
+ }
1075
+ function getThemeVariableNames() {
1076
+ return Object.keys(refractionTheme.colors.light);
1077
+ }
1078
+
1079
+ // src/contrast.ts
1080
+ function parseHSL(hsl) {
1081
+ const parts = hsl.trim().split(/\s+/);
1082
+ if (parts.length !== 3) {
1083
+ throw new Error(`Invalid HSL string: "${hsl}". Expected "H S% L%" format.`);
1084
+ }
1085
+ const h = parseFloat(parts[0]);
1086
+ const s = parseFloat(parts[1].replace("%", ""));
1087
+ const l = parseFloat(parts[2].replace("%", ""));
1088
+ if (isNaN(h) || isNaN(s) || isNaN(l)) {
1089
+ throw new Error(`Invalid HSL values in: "${hsl}"`);
1090
+ }
1091
+ return { h, s, l };
1092
+ }
1093
+ function sRGBToLinear(c) {
1094
+ return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
1095
+ }
1096
+ function hslToRGB(h, s, l) {
1097
+ const sNorm = s / 100;
1098
+ const lNorm = l / 100;
1099
+ const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
1100
+ const x = c * (1 - Math.abs(h / 60 % 2 - 1));
1101
+ const m = lNorm - c / 2;
1102
+ let r = 0, g = 0, b = 0;
1103
+ if (h < 60) {
1104
+ r = c;
1105
+ g = x;
1106
+ b = 0;
1107
+ } else if (h < 120) {
1108
+ r = x;
1109
+ g = c;
1110
+ b = 0;
1111
+ } else if (h < 180) {
1112
+ r = 0;
1113
+ g = c;
1114
+ b = x;
1115
+ } else if (h < 240) {
1116
+ r = 0;
1117
+ g = x;
1118
+ b = c;
1119
+ } else if (h < 300) {
1120
+ r = x;
1121
+ g = 0;
1122
+ b = c;
1123
+ } else {
1124
+ r = c;
1125
+ g = 0;
1126
+ b = x;
1127
+ }
1128
+ return [r + m, g + m, b + m];
1129
+ }
1130
+ function hslToLuminance(h, s, l) {
1131
+ const [r, g, b] = hslToRGB(h, s, l);
1132
+ const rLin = sRGBToLinear(r);
1133
+ const gLin = sRGBToLinear(g);
1134
+ const bLin = sRGBToLinear(b);
1135
+ return 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin;
1136
+ }
1137
+ function contrastRatio(l1, l2) {
1138
+ const lighter = Math.max(l1, l2);
1139
+ const darker = Math.min(l1, l2);
1140
+ return (lighter + 0.05) / (darker + 0.05);
1141
+ }
1142
+ function meetsWCAG_AA(foreground, background, isLargeText = false) {
1143
+ const fg = parseHSL(foreground);
1144
+ const bg = parseHSL(background);
1145
+ const fgLum = hslToLuminance(fg.h, fg.s, fg.l);
1146
+ const bgLum = hslToLuminance(bg.h, bg.s, bg.l);
1147
+ const ratio = contrastRatio(fgLum, bgLum);
1148
+ return ratio >= (isLargeText ? 3 : 4.5);
1149
+ }
1150
+ function meetsWCAG_AAA(foreground, background, isLargeText = false) {
1151
+ const fg = parseHSL(foreground);
1152
+ const bg = parseHSL(background);
1153
+ const fgLum = hslToLuminance(fg.h, fg.s, fg.l);
1154
+ const bgLum = hslToLuminance(bg.h, bg.s, bg.l);
1155
+ const ratio = contrastRatio(fgLum, bgLum);
1156
+ return ratio >= (isLargeText ? 4.5 : 7);
1157
+ }
1158
+ var THEME_PAIRS = [
1159
+ { pair: "foreground / background", fg: "--foreground", bg: "--background" },
1160
+ { pair: "primary / background", fg: "--primary", bg: "--background" },
1161
+ { pair: "primary-foreground / primary", fg: "--primary-foreground", bg: "--primary" },
1162
+ { pair: "secondary-foreground / secondary", fg: "--secondary-foreground", bg: "--secondary" },
1163
+ { pair: "muted-foreground / background", fg: "--muted-foreground", bg: "--background" },
1164
+ { pair: "muted-foreground / muted", fg: "--muted-foreground", bg: "--muted" },
1165
+ { pair: "accent-foreground / accent", fg: "--accent-foreground", bg: "--accent" },
1166
+ { pair: "destructive-foreground / destructive", fg: "--destructive-foreground", bg: "--destructive" },
1167
+ { pair: "card-foreground / card", fg: "--card-foreground", bg: "--card" },
1168
+ { pair: "popover-foreground / popover", fg: "--popover-foreground", bg: "--popover" },
1169
+ { pair: "sidebar-foreground / sidebar-background", fg: "--sidebar-foreground", bg: "--sidebar-background" },
1170
+ { pair: "sidebar-accent-foreground / sidebar-accent", fg: "--sidebar-accent-foreground", bg: "--sidebar-accent" }
1171
+ ];
1172
+ function validateThemeContrast(theme) {
1173
+ const results = [];
1174
+ for (const mode of ["light", "dark"]) {
1175
+ const vars = theme[mode];
1176
+ for (const { pair, fg, bg, largeText } of THEME_PAIRS) {
1177
+ const fgVal = vars[fg];
1178
+ const bgVal = vars[bg];
1179
+ if (!fgVal || !bgVal) continue;
1180
+ try {
1181
+ const fgHSL = parseHSL(fgVal);
1182
+ const bgHSL = parseHSL(bgVal);
1183
+ const fgLum = hslToLuminance(fgHSL.h, fgHSL.s, fgHSL.l);
1184
+ const bgLum = hslToLuminance(bgHSL.h, bgHSL.s, bgHSL.l);
1185
+ const ratio = contrastRatio(fgLum, bgLum);
1186
+ const threshold = largeText ? 3 : 4.5;
1187
+ results.push({
1188
+ pair: `${mode}: ${pair}`,
1189
+ mode,
1190
+ ratio: Math.round(ratio * 100) / 100,
1191
+ passes: ratio >= threshold
1192
+ });
1193
+ } catch {
1194
+ }
1195
+ }
1196
+ }
1197
+ return results;
1198
+ }
1199
+
1200
+ exports.DEFAULT_THEME = DEFAULT_THEME;
1201
+ exports.THEMES = THEMES;
1202
+ exports.animation = animation;
1203
+ exports.colors = colors;
1204
+ exports.contrastRatio = contrastRatio;
1205
+ exports.generateThemeCSS = generateThemeCSS;
1206
+ exports.getThemeVariableNames = getThemeVariableNames;
1207
+ exports.glassaTheme = glassaTheme;
1208
+ exports.hslToLuminance = hslToLuminance;
1209
+ exports.keyframes = keyframes;
1210
+ exports.luxeTheme = luxeTheme;
1211
+ exports.meetsWCAG_AA = meetsWCAG_AA;
1212
+ exports.meetsWCAG_AAA = meetsWCAG_AAA;
1213
+ exports.monoTheme = monoTheme;
1214
+ exports.parseHSL = parseHSL;
1215
+ exports.pulseTheme = pulseTheme;
1216
+ exports.refractionPreset = refractionPreset;
1217
+ exports.refractionTheme = refractionTheme;
1218
+ exports.signalTheme = signalTheme;
1219
+ exports.utilitiesPlugin = utilitiesPlugin;
1220
+ exports.validateThemeContrast = validateThemeContrast;
1221
+ exports.warmTheme = warmTheme;
1222
+ //# sourceMappingURL=index.cjs.map
1223
+ //# sourceMappingURL=index.cjs.map