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