@tenerife.music/ui 1.0.16 → 1.1.1

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.
@@ -115,1071 +115,7 @@ var init_default = __esm({
115
115
  }
116
116
  });
117
117
 
118
- // src/themes/minimal.ts
119
- var minimalBrand = {
120
- id: "minimal",
121
- name: "Minimal",
122
- description: "Clean, minimal brand theme with muted colors, light typography, and compact spacing",
123
- namespace: "minimal",
124
- version: "1.0.0",
125
- author: "Tenerife UI",
126
- themes: [
127
- {
128
- id: "minimal-day",
129
- name: "Minimal Day",
130
- description: "Light minimal theme with grayscale colors and subtle accents",
131
- mode: "day",
132
- overrides: {
133
- name: "minimal-day",
134
- description: "Light minimal theme for day mode",
135
- // Muted, low-saturation color overrides
136
- primaryColors: {
137
- 400: "0 0% 60%",
138
- // Muted gray
139
- 500: "0 0% 50%",
140
- // Neutral gray (#808080)
141
- 600: "0 0% 40%",
142
- 700: "0 0% 30%"
143
- },
144
- accentColors: {
145
- 400: "210 20% 70%",
146
- // Muted blue-gray
147
- 500: "210 20% 60%",
148
- // Subtle blue-gray
149
- 600: "210 20% 50%",
150
- 700: "210 20% 40%"
151
- },
152
- secondaryColors: {
153
- 400: "0 0% 70%",
154
- // Light gray
155
- 500: "0 0% 65%",
156
- // Neutral light gray
157
- 600: "0 0% 55%",
158
- 700: "0 0% 45%"
159
- },
160
- // Muted base colors for day mode
161
- baseColorsDay: {
162
- primary: "0 0% 50%",
163
- // Neutral gray
164
- primaryForeground: "0 0% 100%",
165
- secondary: "0 0% 96%",
166
- // Very light gray
167
- secondaryForeground: "0 0% 20%",
168
- accent: "210 20% 60%",
169
- // Subtle blue-gray
170
- accentForeground: "0 0% 100%"
171
- },
172
- // Subtle semantic colors
173
- semanticColorsDay: {
174
- success: "140 30% 45%",
175
- // Muted green
176
- info: "210 30% 50%",
177
- // Muted blue
178
- warning: "40 30% 50%",
179
- // Muted orange
180
- error: "0 40% 55%"
181
- // Muted red
182
- },
183
- // Typography overrides - lighter and smaller
184
- typography: {
185
- fontWeight: {
186
- normal: "400",
187
- // Normal weight
188
- medium: "500",
189
- semibold: "600",
190
- // Lighter than default
191
- bold: "700"
192
- // Standard bold
193
- },
194
- fontSize: {
195
- xs: [
196
- "clamp(0.6875rem, 0.65rem + 0.125vw, 0.75rem)",
197
- { lineHeight: "1rem", letterSpacing: "0.05em" }
198
- ],
199
- // Smaller
200
- sm: [
201
- "clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem)",
202
- { lineHeight: "1.25rem", letterSpacing: "0.025em" }
203
- ],
204
- // Smaller
205
- base: [
206
- "clamp(0.9375rem, 0.875rem + 0.25vw, 1rem)",
207
- { lineHeight: "1.5rem", letterSpacing: "0em" }
208
- ],
209
- // Smaller
210
- lg: [
211
- "clamp(1.0625rem, 0.95rem + 0.5vw, 1.125rem)",
212
- { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
213
- ],
214
- // Smaller
215
- xl: [
216
- "clamp(1.1875rem, 1rem + 0.75vw, 1.375rem)",
217
- { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
218
- ]
219
- // Smaller
220
- }
221
- },
222
- // Spacing overrides - compact spacing for tight layout
223
- spacing: {
224
- semanticSpacing: {
225
- xs: "0.125rem",
226
- // 2px (was 4px)
227
- sm: "0.25rem",
228
- // 4px (was 8px)
229
- md: "0.5rem",
230
- // 8px (was 16px)
231
- lg: "0.75rem",
232
- // 12px (was 24px)
233
- xl: "1rem",
234
- // 16px (was 32px)
235
- "2xl": "1.5rem"
236
- // 24px (was 48px)
237
- }
238
- },
239
- // Shadow overrides - subtle and minimal
240
- shadows: {
241
- elevationShadows: {
242
- xs: "0 1px 1px 0 rgb(0 0 0 / 0.03)",
243
- sm: "0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 1px -1px rgb(0 0 0 / 0.05)",
244
- md: "0 2px 4px -1px rgb(0 0 0 / 0.05), 0 1px 2px -2px rgb(0 0 0 / 0.05)",
245
- lg: "0 4px 8px -2px rgb(0 0 0 / 0.05), 0 2px 4px -3px rgb(0 0 0 / 0.05)",
246
- xl: "0 8px 12px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05)"
247
- },
248
- glowEffects: {
249
- "glow-primary": "0 0 8px 0 hsl(0 0% 50% / 0.2)",
250
- "glow-primary-subtle": "0 0 4px 0 hsl(0 0% 50% / 0.15)",
251
- "glow-primary-medium": "0 0 8px 0 hsl(0 0% 50% / 0.25)",
252
- "glow-primary-strong": "0 0 12px 0 hsl(0 0% 50% / 0.3)"
253
- }
254
- },
255
- // Radius overrides - smaller, sharper corners
256
- radius: {
257
- borderRadius: {
258
- xs: "0.0625rem",
259
- // 1px
260
- sm: "0.125rem",
261
- // 2px (was 4px)
262
- md: "0.1875rem",
263
- // 3px (was 6px)
264
- lg: "0.25rem",
265
- // 4px (was 8px)
266
- xl: "0.375rem",
267
- // 6px (was 12px)
268
- "2xl": "0.5rem"
269
- // 8px (was 16px)
270
- },
271
- componentRadius: {
272
- button: {
273
- sm: "0.125rem",
274
- // 2px
275
- md: "0.1875rem",
276
- // 3px
277
- lg: "0.25rem"
278
- // 4px
279
- },
280
- card: {
281
- sm: "0.1875rem",
282
- // 3px
283
- md: "0.25rem",
284
- // 4px
285
- lg: "0.375rem",
286
- // 6px
287
- xl: "0.5rem"
288
- // 8px
289
- },
290
- input: {
291
- sm: "0.125rem",
292
- // 2px
293
- md: "0.1875rem",
294
- // 3px
295
- lg: "0.25rem"
296
- // 4px
297
- },
298
- badge: {
299
- sm: "0.0625rem",
300
- // 1px
301
- md: "0.125rem",
302
- // 2px
303
- lg: "0.1875rem"
304
- // 3px
305
- }
306
- }
307
- }
308
- }
309
- },
310
- {
311
- id: "minimal-night",
312
- name: "Minimal Night",
313
- description: "Dark minimal theme with muted grayscale colors",
314
- mode: "night",
315
- overrides: {
316
- name: "minimal-night",
317
- description: "Dark minimal theme for night mode",
318
- // Muted colors for night mode (slightly lighter than day for contrast)
319
- primaryColors: {
320
- 400: "0 0% 65%",
321
- // Lighter gray for night
322
- 500: "0 0% 55%",
323
- // Neutral gray
324
- 600: "0 0% 45%",
325
- 700: "0 0% 35%"
326
- },
327
- accentColors: {
328
- 400: "210 20% 75%",
329
- // Lighter blue-gray
330
- 500: "210 20% 65%",
331
- // Subtle blue-gray
332
- 600: "210 20% 55%",
333
- 700: "210 20% 45%"
334
- },
335
- secondaryColors: {
336
- 400: "0 0% 75%",
337
- // Light gray
338
- 500: "0 0% 70%",
339
- // Neutral light gray
340
- 600: "0 0% 60%",
341
- 700: "0 0% 50%"
342
- },
343
- // Darker base colors for night mode
344
- baseColorsNight: {
345
- background: "240 10% 8%",
346
- // Dark gray background
347
- foreground: "0 0% 95%",
348
- card: "240 10% 10%",
349
- cardForeground: "0 0% 95%"
350
- },
351
- surfaceColorsNight: {
352
- base: "240 10% 8%",
353
- elevated1: "240 10% 10%",
354
- elevated2: "240 10% 12%",
355
- elevated3: "240 10% 14%"
356
- },
357
- // Subtle semantic colors for night
358
- semanticColorsNight: {
359
- success: "140 30% 50%",
360
- // Muted green
361
- info: "210 30% 55%",
362
- // Muted blue
363
- warning: "40 30% 55%",
364
- // Muted orange
365
- error: "0 40% 60%"
366
- // Muted red
367
- },
368
- // Typography overrides - same as day
369
- typography: {
370
- fontWeight: {
371
- normal: "400",
372
- medium: "500",
373
- semibold: "600",
374
- bold: "700"
375
- },
376
- fontSize: {
377
- xs: [
378
- "clamp(0.6875rem, 0.65rem + 0.125vw, 0.75rem)",
379
- { lineHeight: "1rem", letterSpacing: "0.05em" }
380
- ],
381
- sm: [
382
- "clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem)",
383
- { lineHeight: "1.25rem", letterSpacing: "0.025em" }
384
- ],
385
- base: [
386
- "clamp(0.9375rem, 0.875rem + 0.25vw, 1rem)",
387
- { lineHeight: "1.5rem", letterSpacing: "0em" }
388
- ],
389
- lg: [
390
- "clamp(1.0625rem, 0.95rem + 0.5vw, 1.125rem)",
391
- { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
392
- ],
393
- xl: [
394
- "clamp(1.1875rem, 1rem + 0.75vw, 1.375rem)",
395
- { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
396
- ]
397
- }
398
- },
399
- // Spacing overrides - same as day
400
- spacing: {
401
- semanticSpacing: {
402
- xs: "0.125rem",
403
- sm: "0.25rem",
404
- md: "0.5rem",
405
- lg: "0.75rem",
406
- xl: "1rem",
407
- "2xl": "1.5rem"
408
- }
409
- },
410
- // Shadow overrides - subtle for night
411
- shadows: {
412
- elevationShadows: {
413
- xs: "0 1px 2px 0 rgb(0 0 0 / 0.15)",
414
- sm: "0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2)",
415
- md: "0 2px 5px -1px rgb(0 0 0 / 0.2), 0 1px 3px -2px rgb(0 0 0 / 0.2)",
416
- lg: "0 4px 10px -2px rgb(0 0 0 / 0.2), 0 2px 5px -3px rgb(0 0 0 / 0.2)",
417
- xl: "0 8px 15px -3px rgb(0 0 0 / 0.2), 0 4px 8px -4px rgb(0 0 0 / 0.2)"
418
- },
419
- glowEffects: {
420
- "glow-primary": "0 0 8px 0 hsl(0 0% 55% / 0.25)",
421
- "glow-primary-subtle": "0 0 4px 0 hsl(0 0% 55% / 0.2)",
422
- "glow-primary-medium": "0 0 8px 0 hsl(0 0% 55% / 0.3)",
423
- "glow-primary-strong": "0 0 12px 0 hsl(0 0% 55% / 0.35)"
424
- }
425
- },
426
- // Radius overrides - same as day
427
- radius: {
428
- borderRadius: {
429
- xs: "0.0625rem",
430
- sm: "0.125rem",
431
- md: "0.1875rem",
432
- lg: "0.25rem",
433
- xl: "0.375rem",
434
- "2xl": "0.5rem"
435
- },
436
- componentRadius: {
437
- button: {
438
- sm: "0.125rem",
439
- md: "0.1875rem",
440
- lg: "0.25rem"
441
- },
442
- card: {
443
- sm: "0.1875rem",
444
- md: "0.25rem",
445
- lg: "0.375rem",
446
- xl: "0.5rem"
447
- },
448
- input: {
449
- sm: "0.125rem",
450
- md: "0.1875rem",
451
- lg: "0.25rem"
452
- },
453
- badge: {
454
- sm: "0.0625rem",
455
- md: "0.125rem",
456
- lg: "0.1875rem"
457
- }
458
- }
459
- }
460
- }
461
- }
462
- ]
463
- };
464
-
465
- // src/themes/neon.ts
466
- var neonBrand = {
467
- id: "neon",
468
- name: "Neon",
469
- description: "Vibrant brand theme with high-saturation neon colors, bold typography, and enhanced visual effects",
470
- namespace: "neon",
471
- version: "1.0.0",
472
- author: "Tenerife UI",
473
- themes: [
474
- {
475
- id: "neon-day",
476
- name: "Neon Day",
477
- description: "Bright neon theme for day mode with vibrant cyan, magenta, and yellow accents",
478
- mode: "day",
479
- overrides: {
480
- name: "neon-day",
481
- description: "Bright neon theme for day mode",
482
- // Vibrant neon color overrides
483
- primaryColors: {
484
- 400: "180 100% 50%",
485
- // Bright cyan
486
- 500: "180 100% 45%",
487
- // Vibrant cyan (#00e6ff)
488
- 600: "180 95% 40%",
489
- 700: "180 90% 35%"
490
- },
491
- accentColors: {
492
- 400: "320 100% 60%",
493
- // Bright magenta
494
- 500: "320 100% 55%",
495
- // Vibrant magenta (#ff00cc)
496
- 600: "320 95% 50%",
497
- 700: "320 90% 45%"
498
- },
499
- secondaryColors: {
500
- 400: "60 100% 60%",
501
- // Bright yellow
502
- 500: "60 100% 55%",
503
- // Vibrant yellow (#ffff00)
504
- 600: "60 95% 50%",
505
- 700: "60 90% 45%"
506
- },
507
- // Enhanced base colors for day mode
508
- baseColorsDay: {
509
- primary: "180 100% 45%",
510
- // Neon cyan
511
- primaryForeground: "0 0% 100%",
512
- accent: "320 100% 55%",
513
- // Neon magenta
514
- accentForeground: "0 0% 100%"
515
- },
516
- // Semantic colors with neon accents
517
- semanticColorsDay: {
518
- success: "145 80% 45%",
519
- // Neon green
520
- info: "180 100% 45%",
521
- // Neon cyan
522
- warning: "60 100% 55%",
523
- // Neon yellow
524
- error: "0 100% 60%"
525
- // Bright red
526
- },
527
- // Typography overrides - bolder and larger
528
- typography: {
529
- fontWeight: {
530
- normal: "500",
531
- // Heavier than default (400)
532
- medium: "600",
533
- // Heavier
534
- semibold: "700",
535
- // Bold
536
- bold: "800"
537
- // Extra bold
538
- },
539
- fontSize: {
540
- xs: [
541
- "clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
542
- { lineHeight: "1.25rem", letterSpacing: "0.025em" }
543
- ],
544
- // Larger than default
545
- sm: [
546
- "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
547
- { lineHeight: "1.5rem", letterSpacing: "0em" }
548
- ],
549
- // Larger
550
- base: [
551
- "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
552
- { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
553
- ],
554
- // Larger
555
- lg: [
556
- "clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
557
- { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
558
- ],
559
- // Larger
560
- xl: [
561
- "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
562
- { lineHeight: "2rem", letterSpacing: "-0.05em" }
563
- ]
564
- // Larger
565
- }
566
- },
567
- // Spacing overrides - larger spacing for breathing room
568
- spacing: {
569
- semanticSpacing: {
570
- xs: "0.5rem",
571
- // 8px (was 4px)
572
- sm: "1rem",
573
- // 16px (was 8px)
574
- md: "1.5rem",
575
- // 24px (was 16px)
576
- lg: "2rem",
577
- // 32px (was 24px)
578
- xl: "3rem",
579
- // 48px (was 32px)
580
- "2xl": "4rem"
581
- // 64px (was 48px)
582
- }
583
- },
584
- // Shadow overrides - stronger and more prominent
585
- shadows: {
586
- elevationShadows: {
587
- xs: "0 2px 4px 0 rgb(0 0 0 / 0.1)",
588
- sm: "0 2px 6px 0 rgb(0 0 0 / 0.15), 0 2px 4px -1px rgb(0 0 0 / 0.15)",
589
- md: "0 6px 10px -1px rgb(0 0 0 / 0.15), 0 4px 6px -2px rgb(0 0 0 / 0.15)",
590
- lg: "0 12px 20px -3px rgb(0 0 0 / 0.15), 0 6px 10px -4px rgb(0 0 0 / 0.15)",
591
- xl: "0 24px 32px -5px rgb(0 0 0 / 0.15), 0 10px 14px -6px rgb(0 0 0 / 0.15)"
592
- },
593
- glowEffects: {
594
- "glow-primary": "0 0 30px 0 hsl(180 100% 45% / 0.7), 0 0 60px 0 hsl(180 100% 45% / 0.4)",
595
- "glow-primary-subtle": "0 0 12px 0 hsl(180 100% 45% / 0.5)",
596
- "glow-primary-medium": "0 0 24px 0 hsl(180 100% 45% / 0.7)",
597
- "glow-primary-strong": "0 0 36px 0 hsl(180 100% 45% / 0.8)",
598
- "glow-accent": "0 0 30px 0 hsl(320 100% 55% / 0.7), 0 0 60px 0 hsl(320 100% 55% / 0.4)",
599
- "glow-accent-subtle": "0 0 12px 0 hsl(320 100% 55% / 0.5)",
600
- "glow-accent-medium": "0 0 24px 0 hsl(320 100% 55% / 0.7)",
601
- "glow-accent-strong": "0 0 36px 0 hsl(320 100% 55% / 0.8)"
602
- }
603
- },
604
- // Radius overrides - more rounded corners
605
- radius: {
606
- borderRadius: {
607
- sm: "0.375rem",
608
- // 6px (was 4px)
609
- md: "0.5rem",
610
- // 8px (was 6px)
611
- lg: "0.75rem",
612
- // 12px (was 8px)
613
- xl: "1rem",
614
- // 16px (was 12px)
615
- "2xl": "1.5rem",
616
- // 24px (was 16px)
617
- "3xl": "2rem"
618
- // 32px (was 24px)
619
- },
620
- componentRadius: {
621
- button: {
622
- sm: "0.5rem",
623
- // 8px
624
- md: "0.75rem",
625
- // 12px
626
- lg: "1rem"
627
- // 16px
628
- },
629
- card: {
630
- sm: "0.75rem",
631
- // 12px
632
- md: "1rem",
633
- // 16px
634
- lg: "1.25rem",
635
- // 20px
636
- xl: "1.5rem"
637
- // 24px
638
- },
639
- input: {
640
- sm: "0.5rem",
641
- // 8px
642
- md: "0.75rem",
643
- // 12px
644
- lg: "1rem"
645
- // 16px
646
- },
647
- badge: {
648
- sm: "0.375rem",
649
- // 6px
650
- md: "0.5rem",
651
- // 8px
652
- lg: "0.75rem"
653
- // 12px
654
- }
655
- }
656
- }
657
- }
658
- },
659
- {
660
- id: "neon-night",
661
- name: "Neon Night",
662
- description: "Dark neon theme for night mode with glowing neon accents on dark backgrounds",
663
- mode: "night",
664
- overrides: {
665
- name: "neon-night",
666
- description: "Dark neon theme for night mode",
667
- // Vibrant neon color overrides (same as day but with different base)
668
- primaryColors: {
669
- 400: "180 100% 55%",
670
- // Brighter cyan for night
671
- 500: "180 100% 50%",
672
- // Vibrant cyan
673
- 600: "180 95% 45%",
674
- 700: "180 90% 40%"
675
- },
676
- accentColors: {
677
- 400: "320 100% 65%",
678
- // Brighter magenta for night
679
- 500: "320 100% 60%",
680
- // Vibrant magenta
681
- 600: "320 95% 55%",
682
- 700: "320 90% 50%"
683
- },
684
- secondaryColors: {
685
- 400: "60 100% 65%",
686
- // Brighter yellow for night
687
- 500: "60 100% 60%",
688
- // Vibrant yellow
689
- 600: "60 95% 55%",
690
- 700: "60 90% 50%"
691
- },
692
- // Darker base colors for night mode
693
- baseColorsNight: {
694
- background: "240 10% 5%",
695
- // Very dark background
696
- foreground: "0 0% 98%",
697
- card: "240 10% 6%",
698
- cardForeground: "0 0% 98%"
699
- },
700
- surfaceColorsNight: {
701
- base: "240 10% 5%",
702
- // Very dark
703
- elevated1: "240 10% 7%",
704
- elevated2: "240 10% 9%",
705
- elevated3: "240 10% 11%"
706
- },
707
- // Semantic colors with neon accents for night
708
- semanticColorsNight: {
709
- success: "145 75% 50%",
710
- // Neon green
711
- info: "180 100% 50%",
712
- // Neon cyan
713
- warning: "60 100% 60%",
714
- // Neon yellow
715
- error: "0 100% 65%"
716
- // Bright red
717
- },
718
- // Typography overrides - same as day
719
- typography: {
720
- fontWeight: {
721
- normal: "500",
722
- medium: "600",
723
- semibold: "700",
724
- bold: "800"
725
- },
726
- fontSize: {
727
- xs: [
728
- "clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
729
- { lineHeight: "1.25rem", letterSpacing: "0.025em" }
730
- ],
731
- sm: [
732
- "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
733
- { lineHeight: "1.5rem", letterSpacing: "0em" }
734
- ],
735
- base: [
736
- "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
737
- { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
738
- ],
739
- lg: [
740
- "clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
741
- { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
742
- ],
743
- xl: [
744
- "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
745
- { lineHeight: "2rem", letterSpacing: "-0.05em" }
746
- ]
747
- }
748
- },
749
- // Spacing overrides - same as day
750
- spacing: {
751
- semanticSpacing: {
752
- xs: "0.5rem",
753
- sm: "1rem",
754
- md: "1.5rem",
755
- lg: "2rem",
756
- xl: "3rem",
757
- "2xl": "4rem"
758
- }
759
- },
760
- // Shadow overrides - even stronger glow for night
761
- shadows: {
762
- elevationShadows: {
763
- xs: "0 2px 4px 0 rgb(0 0 0 / 0.2)",
764
- sm: "0 2px 6px 0 rgb(0 0 0 / 0.25), 0 2px 4px -1px rgb(0 0 0 / 0.25)",
765
- md: "0 6px 10px -1px rgb(0 0 0 / 0.25), 0 4px 6px -2px rgb(0 0 0 / 0.25)",
766
- lg: "0 12px 20px -3px rgb(0 0 0 / 0.25), 0 6px 10px -4px rgb(0 0 0 / 0.25)",
767
- xl: "0 24px 32px -5px rgb(0 0 0 / 0.25), 0 10px 14px -6px rgb(0 0 0 / 0.25)"
768
- },
769
- glowEffects: {
770
- "glow-primary": "0 0 40px 0 hsl(180 100% 50% / 0.8), 0 0 80px 0 hsl(180 100% 50% / 0.5)",
771
- "glow-primary-subtle": "0 0 16px 0 hsl(180 100% 50% / 0.6)",
772
- "glow-primary-medium": "0 0 32px 0 hsl(180 100% 50% / 0.8)",
773
- "glow-primary-strong": "0 0 48px 0 hsl(180 100% 50% / 0.9)",
774
- "glow-accent": "0 0 40px 0 hsl(320 100% 60% / 0.8), 0 0 80px 0 hsl(320 100% 60% / 0.5)",
775
- "glow-accent-subtle": "0 0 16px 0 hsl(320 100% 60% / 0.6)",
776
- "glow-accent-medium": "0 0 32px 0 hsl(320 100% 60% / 0.8)",
777
- "glow-accent-strong": "0 0 48px 0 hsl(320 100% 60% / 0.9)"
778
- }
779
- },
780
- // Radius overrides - same as day
781
- radius: {
782
- borderRadius: {
783
- sm: "0.375rem",
784
- md: "0.5rem",
785
- lg: "0.75rem",
786
- xl: "1rem",
787
- "2xl": "1.5rem",
788
- "3xl": "2rem"
789
- },
790
- componentRadius: {
791
- button: {
792
- sm: "0.5rem",
793
- md: "0.75rem",
794
- lg: "1rem"
795
- },
796
- card: {
797
- sm: "0.75rem",
798
- md: "1rem",
799
- lg: "1.25rem",
800
- xl: "1.5rem"
801
- },
802
- input: {
803
- sm: "0.5rem",
804
- md: "0.75rem",
805
- lg: "1rem"
806
- },
807
- badge: {
808
- sm: "0.375rem",
809
- md: "0.5rem",
810
- lg: "0.75rem"
811
- }
812
- }
813
- }
814
- }
815
- }
816
- ]
817
- };
818
-
819
- // src/themes/brand_engine.ts
820
- var brandRegistry = /* @__PURE__ */ new Map();
821
- var activeBrand = null;
822
- var activeNamespace = null;
823
- var brandCache = /* @__PURE__ */ new Map();
824
- function validateBrand(brand) {
825
- const errors = [];
826
- const warnings = [];
827
- if (!brand || typeof brand !== "object") {
828
- return {
829
- valid: false,
830
- errors: ["Brand must be an object"],
831
- warnings: []
832
- };
833
- }
834
- const brandObj = brand;
835
- const requiredFields = ["id", "name", "namespace"];
836
- for (const field of requiredFields) {
837
- if (!(field in brandObj) || !brandObj[field]) {
838
- errors.push(`Missing required field: ${field}`);
839
- }
840
- }
841
- if (brandObj.id && typeof brandObj.id === "string") {
842
- const idRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
843
- if (!idRegex.test(brandObj.id)) {
844
- errors.push(
845
- `Invalid brand ID format: "${brandObj.id}". Must be kebab-case (e.g., "neon-brand")`
846
- );
847
- }
848
- }
849
- if (brandObj.namespace && typeof brandObj.namespace === "string") {
850
- const namespaceRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
851
- if (!namespaceRegex.test(brandObj.namespace)) {
852
- errors.push(
853
- `Invalid namespace format: "${brandObj.namespace}". Must be kebab-case (e.g., "neon")`
854
- );
855
- }
856
- }
857
- if (brandObj.themes) {
858
- if (!Array.isArray(brandObj.themes)) {
859
- errors.push("Brand themes must be an array");
860
- } else {
861
- const themes2 = brandObj.themes;
862
- if (themes2.length === 0) {
863
- warnings.push("Brand has no themes defined");
864
- }
865
- themes2.forEach((theme, index) => {
866
- if (!theme || typeof theme !== "object") {
867
- errors.push(`Theme at index ${index} must be an object`);
868
- return;
869
- }
870
- const themeObj = theme;
871
- if (!themeObj.id || typeof themeObj.id !== "string") {
872
- errors.push(`Theme at index ${index} is missing required field: id`);
873
- }
874
- if (!themeObj.name || typeof themeObj.name !== "string") {
875
- errors.push(`Theme at index ${index} is missing required field: name`);
876
- }
877
- if (!themeObj.mode || !["day", "night"].includes(themeObj.mode)) {
878
- errors.push(`Theme at index ${index} must have mode set to "day" or "night"`);
879
- }
880
- if (!themeObj.overrides || typeof themeObj.overrides !== "object") {
881
- errors.push(`Theme at index ${index} is missing required field: overrides`);
882
- }
883
- });
884
- }
885
- } else {
886
- errors.push("Brand must have at least one theme");
887
- }
888
- if (brandObj.version && typeof brandObj.version === "string") {
889
- const semverRegex = /^\d+\.\d+\.\d+$/;
890
- if (!semverRegex.test(brandObj.version)) {
891
- warnings.push(
892
- `Invalid version format: "${brandObj.version}". Should be semver (e.g., "1.0.0")`
893
- );
894
- }
895
- }
896
- if (brandObj.themes && Array.isArray(brandObj.themes)) {
897
- const themeIds = brandObj.themes.map(
898
- (theme) => theme?.id
899
- );
900
- const uniqueIds = new Set(themeIds);
901
- if (themeIds.length !== uniqueIds.size) {
902
- errors.push("Brand contains duplicate theme IDs");
903
- }
904
- }
905
- return {
906
- valid: errors.length === 0,
907
- errors,
908
- warnings
909
- };
910
- }
911
- function registerBrand(brand, options) {
912
- const validation = validateBrand(brand);
913
- if (!validation.valid) {
914
- throw new Error(`Invalid brand "${brand.id}": ${validation.errors.join(", ")}`);
915
- }
916
- if (validation.warnings.length > 0) {
917
- console.warn(`Brand "${brand.id}" validation warnings:`, validation.warnings.join(", "));
918
- }
919
- const existingEntry = brandRegistry.get(brand.id);
920
- if (existingEntry && existingEntry.brand.namespace === brand.namespace) {
921
- return;
922
- }
923
- if (brandRegistry.has(brand.id)) {
924
- throw new Error(`Brand "${brand.id}" is already registered`);
925
- }
926
- const existingBrand = Array.from(brandRegistry.values()).find(
927
- (entry) => entry.brand.namespace === brand.namespace
928
- );
929
- if (existingBrand) {
930
- throw new Error(
931
- `Brand namespace "${brand.namespace}" is already used by brand "${existingBrand.brand.id}"`
932
- );
933
- }
934
- brandRegistry.set(brand.id, {
935
- brand,
936
- enabled: options?.enabled !== false,
937
- loader: options?.loader
938
- });
939
- }
940
- async function loadBrand(brandId) {
941
- if (brandCache.has(brandId)) {
942
- return brandCache.get(brandId);
943
- }
944
- const entry = brandRegistry.get(brandId);
945
- if (!entry) {
946
- throw new Error(`Brand "${brandId}" not found in registry`);
947
- }
948
- if (entry.enabled === false) {
949
- throw new Error(`Brand "${brandId}" is disabled`);
950
- }
951
- if (entry.loader) {
952
- try {
953
- const module = await entry.loader();
954
- const loadedBrand = module.default;
955
- const validation = validateBrand(loadedBrand);
956
- if (!validation.valid) {
957
- throw new Error(`Invalid loaded brand "${brandId}": ${validation.errors.join(", ")}`);
958
- }
959
- brandCache.set(brandId, loadedBrand);
960
- return loadedBrand;
961
- } catch (error) {
962
- throw new Error(
963
- `Failed to load brand "${brandId}": ${error instanceof Error ? error.message : String(error)}`
964
- );
965
- }
966
- }
967
- brandCache.set(brandId, entry.brand);
968
- return entry.brand;
969
- }
970
- function getActiveBrand() {
971
- return activeBrand;
972
- }
973
- function setActiveBrand(brand) {
974
- activeBrand = brand;
975
- activeNamespace = brand?.namespace || null;
976
- }
977
- function clearActiveBrand() {
978
- activeBrand = null;
979
- activeNamespace = null;
980
- }
981
- function getBrandTheme(brand, mode) {
982
- return brand.themes.find((theme) => theme.mode === mode);
983
- }
984
- function applyBrandOverrides(brand, mode) {
985
- if (typeof document === "undefined") return;
986
- const theme = getBrandTheme(brand, mode);
987
- if (!theme) {
988
- console.warn(`Brand "${brand.id}" has no theme for mode "${mode}"`);
989
- return;
990
- }
991
- const root = document.documentElement;
992
- const { namespace } = brand;
993
- const { overrides } = theme;
994
- if (overrides.primaryColors) {
995
- Object.entries(overrides.primaryColors).forEach(([key, value]) => {
996
- root.style.setProperty(`--brand-${namespace}-primary-${key}`, value);
997
- });
998
- }
999
- if (overrides.accentColors) {
1000
- Object.entries(overrides.accentColors).forEach(([key, value]) => {
1001
- root.style.setProperty(`--brand-${namespace}-accent-${key}`, value);
1002
- });
1003
- }
1004
- if (overrides.secondaryColors) {
1005
- Object.entries(overrides.secondaryColors).forEach(([key, value]) => {
1006
- root.style.setProperty(`--brand-${namespace}-secondary-${key}`, value);
1007
- });
1008
- }
1009
- const modeColors = mode === "day" ? overrides.baseColorsDay : overrides.baseColorsNight;
1010
- if (modeColors) {
1011
- Object.entries(modeColors).forEach(([key, value]) => {
1012
- root.style.setProperty(`--brand-${namespace}-${key}`, value);
1013
- });
1014
- }
1015
- if (overrides.typography) {
1016
- if (overrides.typography.fontFamily) {
1017
- Object.entries(overrides.typography.fontFamily).forEach(([key, value]) => {
1018
- root.style.setProperty(
1019
- `--brand-${namespace}-font-${key}`,
1020
- Array.isArray(value) ? value.join(", ") : value
1021
- );
1022
- });
1023
- }
1024
- if (overrides.typography.fontSize) {
1025
- Object.entries(overrides.typography.fontSize).forEach(([key, value]) => {
1026
- const fontSizeValue = typeof value === "string" ? value : value[0];
1027
- root.style.setProperty(`--brand-${namespace}-font-size-${key}`, fontSizeValue);
1028
- });
1029
- }
1030
- if (overrides.typography.fontWeight) {
1031
- Object.entries(overrides.typography.fontWeight).forEach(([key, value]) => {
1032
- root.style.setProperty(`--brand-${namespace}-font-weight-${key}`, value);
1033
- });
1034
- }
1035
- if (overrides.typography.lineHeight) {
1036
- Object.entries(overrides.typography.lineHeight).forEach(([key, value]) => {
1037
- root.style.setProperty(`--brand-${namespace}-line-height-${key}`, value);
1038
- });
1039
- }
1040
- if (overrides.typography.letterSpacing) {
1041
- Object.entries(overrides.typography.letterSpacing).forEach(([key, value]) => {
1042
- root.style.setProperty(`--brand-${namespace}-letter-spacing-${key}`, value);
1043
- });
1044
- }
1045
- }
1046
- if (overrides.spacing) {
1047
- if (overrides.spacing.semanticSpacing) {
1048
- Object.entries(overrides.spacing.semanticSpacing).forEach(([key, value]) => {
1049
- root.style.setProperty(`--brand-${namespace}-spacing-${key}`, value);
1050
- });
1051
- }
1052
- if (overrides.spacing.layoutSpacing) {
1053
- const layout = overrides.spacing.layoutSpacing;
1054
- if (layout.section) {
1055
- Object.entries(layout.section).forEach(([key, value]) => {
1056
- if (typeof value === "string") {
1057
- root.style.setProperty(`--brand-${namespace}-layout-section-${key}`, value);
1058
- }
1059
- });
1060
- }
1061
- if (layout.container) {
1062
- Object.entries(layout.container).forEach(([key, value]) => {
1063
- if (typeof value === "string") {
1064
- root.style.setProperty(`--brand-${namespace}-layout-container-${key}`, value);
1065
- }
1066
- });
1067
- }
1068
- if (layout.grid) {
1069
- Object.entries(layout.grid).forEach(([key, value]) => {
1070
- if (typeof value === "string") {
1071
- root.style.setProperty(`--brand-${namespace}-layout-grid-${key}`, value);
1072
- }
1073
- });
1074
- }
1075
- if (layout.stack) {
1076
- Object.entries(layout.stack).forEach(([key, value]) => {
1077
- if (typeof value === "string") {
1078
- root.style.setProperty(`--brand-${namespace}-layout-stack-${key}`, value);
1079
- }
1080
- });
1081
- }
1082
- if (layout.component) {
1083
- Object.entries(layout.component).forEach(([key, value]) => {
1084
- if (typeof value === "string") {
1085
- root.style.setProperty(`--brand-${namespace}-layout-component-${key}`, value);
1086
- }
1087
- });
1088
- }
1089
- }
1090
- }
1091
- if (overrides.shadows) {
1092
- if (overrides.shadows.elevationShadows) {
1093
- Object.entries(overrides.shadows.elevationShadows).forEach(([key, value]) => {
1094
- root.style.setProperty(`--brand-${namespace}-shadow-${key}`, value);
1095
- });
1096
- }
1097
- if (overrides.shadows.primaryColoredShadows) {
1098
- Object.entries(overrides.shadows.primaryColoredShadows).forEach(([key, value]) => {
1099
- root.style.setProperty(`--brand-${namespace}-shadow-primary-${key}`, value);
1100
- });
1101
- }
1102
- if (overrides.shadows.accentColoredShadows) {
1103
- Object.entries(overrides.shadows.accentColoredShadows).forEach(([key, value]) => {
1104
- root.style.setProperty(`--brand-${namespace}-shadow-accent-${key}`, value);
1105
- });
1106
- }
1107
- if (overrides.shadows.glowEffects) {
1108
- Object.entries(overrides.shadows.glowEffects).forEach(([key, value]) => {
1109
- root.style.setProperty(`--brand-${namespace}-glow-${key}`, value);
1110
- });
1111
- }
1112
- if (overrides.shadows.focusRings) {
1113
- Object.entries(overrides.shadows.focusRings).forEach(([key, value]) => {
1114
- root.style.setProperty(`--brand-${namespace}-focus-ring-${key}`, value);
1115
- });
1116
- }
1117
- }
1118
- if (overrides.radius) {
1119
- if (overrides.radius.borderRadius) {
1120
- Object.entries(overrides.radius.borderRadius).forEach(([key, value]) => {
1121
- root.style.setProperty(`--brand-${namespace}-radius-${key}`, value);
1122
- });
1123
- }
1124
- if (overrides.radius.componentRadius) {
1125
- const { componentRadius: componentRadius2 } = overrides.radius;
1126
- if (componentRadius2.button) {
1127
- Object.entries(componentRadius2.button).forEach(([key, value]) => {
1128
- root.style.setProperty(`--brand-${namespace}-radius-button-${key}`, value);
1129
- });
1130
- }
1131
- if (componentRadius2.card) {
1132
- Object.entries(componentRadius2.card).forEach(([key, value]) => {
1133
- root.style.setProperty(`--brand-${namespace}-radius-card-${key}`, value);
1134
- });
1135
- }
1136
- if (componentRadius2.input) {
1137
- Object.entries(componentRadius2.input).forEach(([key, value]) => {
1138
- root.style.setProperty(`--brand-${namespace}-radius-input-${key}`, value);
1139
- });
1140
- }
1141
- }
1142
- }
1143
- setActiveBrand(brand);
1144
- root.setAttribute("data-brand", brand.id);
1145
- root.setAttribute("data-brand-namespace", namespace);
1146
- }
1147
- function removeBrandOverrides(namespace) {
1148
- if (typeof document === "undefined") return;
1149
- const root = document.documentElement;
1150
- const { style } = root;
1151
- const propsToRemove = [];
1152
- for (let i = 0; i < style.length; i++) {
1153
- const prop = style.item(i);
1154
- if (prop && prop.startsWith(`--brand-${namespace}-`)) {
1155
- propsToRemove.push(prop);
1156
- }
1157
- }
1158
- propsToRemove.forEach((prop) => {
1159
- style.removeProperty(prop);
1160
- });
1161
- root.removeAttribute("data-brand");
1162
- root.removeAttribute("data-brand-namespace");
1163
- if (activeNamespace === namespace) {
1164
- clearActiveBrand();
1165
- }
1166
- }
1167
-
1168
- // src/themes/index.ts
1169
- var themes = {
1170
- default: () => Promise.resolve().then(() => (init_default(), default_exports)).then((m) => m.defaultTheme),
1171
- dark: () => Promise.resolve().then(() => (init_dark(), dark_exports)).then((m) => m.darkTheme),
1172
- brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme)
1173
- };
1174
- async function getTheme(name) {
1175
- const themeLoader = themes[name];
1176
- if (!themeLoader) {
1177
- throw new Error(`Theme "${name}" not found`);
1178
- }
1179
- return await themeLoader();
1180
- }
1181
-
1182
- // src/tokens/colors.ts
118
+ // src/FOUNDATION/tokens/colors.ts
1183
119
  var primaryColors = {
1184
120
  50: "210 40% 98%",
1185
121
  // Lightest blue
@@ -1581,7 +517,7 @@ var tailwindThemeColors = {
1581
517
  }
1582
518
  };
1583
519
 
1584
- // src/tokens/motion/v2.ts
520
+ // src/FOUNDATION/tokens/motion/v2.ts
1585
521
  var motionV2Durations = {
1586
522
  fast: "150ms",
1587
523
  // Quick interactions
@@ -1625,7 +561,7 @@ var motionV2CSSVariables = {
1625
561
  "--motion-transition-reduced": motionV2Transitions.reduced
1626
562
  };
1627
563
 
1628
- // src/tokens/motion.ts
564
+ // src/FOUNDATION/tokens/motion.ts
1629
565
  var durations = {
1630
566
  instant: "0ms",
1631
567
  fast: "150ms",
@@ -1737,7 +673,7 @@ var motionCSSVariables = {
1737
673
  "--transition-elastic": transitions.elastic
1738
674
  };
1739
675
 
1740
- // src/tokens/radius.ts
676
+ // src/FOUNDATION/tokens/radius.ts
1741
677
  var borderRadius = {
1742
678
  // No radius
1743
679
  none: "0",
@@ -1831,7 +767,7 @@ var radiusCSSVariables = {
1831
767
  "--radius-image": componentRadius.image.md
1832
768
  };
1833
769
 
1834
- // src/tokens/shadows.ts
770
+ // src/FOUNDATION/tokens/shadows.ts
1835
771
  var shadowBase = {
1836
772
  black: "0 0 0"};
1837
773
  var shadowOpacity = {
@@ -1925,7 +861,7 @@ var shadowCSSVariables = {
1925
861
  "--focus-accent": focusRings["focus-accent"]
1926
862
  };
1927
863
 
1928
- // src/tokens/spacing.ts
864
+ // src/FOUNDATION/tokens/spacing.ts
1929
865
  var spacing = {
1930
866
  // Zero spacing
1931
867
  0: "0",
@@ -2140,7 +1076,7 @@ var spacingCSSVariables = {
2140
1076
  "--layout-component-xl": layoutSpacing.component.xl
2141
1077
  };
2142
1078
 
2143
- // src/tokens/typography.ts
1079
+ // src/FOUNDATION/tokens/typography.ts
2144
1080
  var fontFamily = {
2145
1081
  // Primary font - Inter (default sans)
2146
1082
  sans: [
@@ -2198,243 +1134,1307 @@ var fontFamily = {
2198
1134
  "monospace"
2199
1135
  ]
2200
1136
  };
2201
- var fontSize = {
2202
- // text-xs: 12px base, scales from 0.75rem to 0.875rem
2203
- xs: [
2204
- "clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem)",
2205
- { lineHeight: "1rem", letterSpacing: "0.05em" }
2206
- ],
2207
- // text-sm: 14px base, scales from 0.875rem to 1rem
2208
- sm: [
2209
- "clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
2210
- { lineHeight: "1.25rem", letterSpacing: "0.025em" }
2211
- ],
2212
- // text-base: 16px base, scales from 1rem to 1.125rem
2213
- base: ["clamp(1rem, 0.95rem + 0.25vw, 1.125rem)", { lineHeight: "1.5rem", letterSpacing: "0em" }],
2214
- // text-lg: 18px base, scales from 1.125rem to 1.25rem
2215
- lg: [
2216
- "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
2217
- { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
2218
- ],
2219
- // text-xl: 20px base, scales from 1.25rem to 1.5rem
2220
- xl: [
2221
- "clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
2222
- { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
2223
- ],
2224
- // text-2xl: 24px base, scales from 1.5rem to 2rem
2225
- "2xl": [
2226
- "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
2227
- { lineHeight: "2rem", letterSpacing: "-0.05em" }
2228
- ],
2229
- // text-3xl: 30px base, scales from 1.875rem to 2.5rem
2230
- "3xl": [
2231
- "clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem)",
2232
- { lineHeight: "2.25rem", letterSpacing: "-0.05em" }
2233
- ],
2234
- // text-4xl: 36px base, scales from 2.25rem to 3rem
2235
- "4xl": [
2236
- "clamp(2.25rem, 1.75rem + 2.5vw, 3rem)",
2237
- { lineHeight: "2.5rem", letterSpacing: "-0.025em" }
2238
- ],
2239
- // text-5xl: 48px base, scales from 3rem to 4rem
2240
- "5xl": ["clamp(3rem, 2rem + 5vw, 4rem)", { lineHeight: "1", letterSpacing: "-0.025em" }],
2241
- // text-6xl: 60px base, scales from 3.75rem to 5rem
2242
- "6xl": ["clamp(3.75rem, 2.5rem + 6.25vw, 5rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
2243
- // text-7xl: 72px base (optional, for hero sections)
2244
- "7xl": ["clamp(4.5rem, 3rem + 7.5vw, 6rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
2245
- // text-8xl: 96px base (optional, for hero sections)
2246
- "8xl": ["clamp(6rem, 4rem + 10vw, 8rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
2247
- // text-9xl: 128px base (optional, for hero sections)
2248
- "9xl": ["clamp(8rem, 5rem + 15vw, 12rem)", { lineHeight: "1", letterSpacing: "-0.05em" }]
2249
- };
2250
- var fontWeight = {
2251
- thin: "100",
2252
- extralight: "200",
2253
- light: "300",
2254
- normal: "400",
2255
- medium: "500",
2256
- semibold: "600",
2257
- bold: "700",
2258
- extrabold: "800",
2259
- black: "900"
2260
- };
2261
- var lineHeight = {
2262
- none: "1",
2263
- tight: "1.25",
2264
- snug: "1.375",
2265
- normal: "1.5",
2266
- relaxed: "1.625",
2267
- loose: "2"
2268
- };
2269
- var letterSpacing = {
2270
- tighter: "-0.05em",
2271
- tight: "-0.025em",
2272
- normal: "0em",
2273
- wide: "0.025em",
2274
- wider: "0.05em",
2275
- widest: "0.1em"
2276
- };
2277
- var typographyCSSVariables = {
2278
- // Font families
2279
- "--font-sans": fontFamily.sans.join(", "),
2280
- "--font-satoshi": fontFamily.satoshi.join(", "),
2281
- "--font-display": fontFamily.display.join(", "),
2282
- "--font-serif": fontFamily.serif.join(", "),
2283
- "--font-mono": fontFamily.mono.join(", "),
2284
- // Font sizes (using clamp values)
2285
- "--font-size-xs": fontSize.xs[0],
2286
- "--font-size-sm": fontSize.sm[0],
2287
- "--font-size-base": fontSize.base[0],
2288
- "--font-size-lg": fontSize.lg[0],
2289
- "--font-size-xl": fontSize.xl[0],
2290
- "--font-size-2xl": fontSize["2xl"][0],
2291
- "--font-size-3xl": fontSize["3xl"][0],
2292
- "--font-size-4xl": fontSize["4xl"][0],
2293
- "--font-size-5xl": fontSize["5xl"][0],
2294
- "--font-size-6xl": fontSize["6xl"][0],
2295
- // Font weights
2296
- "--font-weight-thin": fontWeight.thin,
2297
- "--font-weight-extralight": fontWeight.extralight,
2298
- "--font-weight-light": fontWeight.light,
2299
- "--font-weight-normal": fontWeight.normal,
2300
- "--font-weight-medium": fontWeight.medium,
2301
- "--font-weight-semibold": fontWeight.semibold,
2302
- "--font-weight-bold": fontWeight.bold,
2303
- "--font-weight-extrabold": fontWeight.extrabold,
2304
- "--font-weight-black": fontWeight.black,
2305
- // Line heights
2306
- "--line-height-none": lineHeight.none,
2307
- "--line-height-tight": lineHeight.tight,
2308
- "--line-height-snug": lineHeight.snug,
2309
- "--line-height-normal": lineHeight.normal,
2310
- "--line-height-relaxed": lineHeight.relaxed,
2311
- "--line-height-loose": lineHeight.loose,
2312
- // Letter spacing
2313
- "--letter-spacing-tighter": letterSpacing.tighter,
2314
- "--letter-spacing-tight": letterSpacing.tight,
2315
- "--letter-spacing-normal": letterSpacing.normal,
2316
- "--letter-spacing-wide": letterSpacing.wide,
2317
- "--letter-spacing-wider": letterSpacing.wider,
2318
- "--letter-spacing-widest": letterSpacing.widest
1137
+ var fontSize = {
1138
+ // text-xs: 12px base, scales from 0.75rem to 0.875rem
1139
+ xs: [
1140
+ "clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem)",
1141
+ { lineHeight: "1rem", letterSpacing: "0.05em" }
1142
+ ],
1143
+ // text-sm: 14px base, scales from 0.875rem to 1rem
1144
+ sm: [
1145
+ "clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
1146
+ { lineHeight: "1.25rem", letterSpacing: "0.025em" }
1147
+ ],
1148
+ // text-base: 16px base, scales from 1rem to 1.125rem
1149
+ base: ["clamp(1rem, 0.95rem + 0.25vw, 1.125rem)", { lineHeight: "1.5rem", letterSpacing: "0em" }],
1150
+ // text-lg: 18px base, scales from 1.125rem to 1.25rem
1151
+ lg: [
1152
+ "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
1153
+ { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
1154
+ ],
1155
+ // text-xl: 20px base, scales from 1.25rem to 1.5rem
1156
+ xl: [
1157
+ "clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
1158
+ { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
1159
+ ],
1160
+ // text-2xl: 24px base, scales from 1.5rem to 2rem
1161
+ "2xl": [
1162
+ "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
1163
+ { lineHeight: "2rem", letterSpacing: "-0.05em" }
1164
+ ],
1165
+ // text-3xl: 30px base, scales from 1.875rem to 2.5rem
1166
+ "3xl": [
1167
+ "clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem)",
1168
+ { lineHeight: "2.25rem", letterSpacing: "-0.05em" }
1169
+ ],
1170
+ // text-4xl: 36px base, scales from 2.25rem to 3rem
1171
+ "4xl": [
1172
+ "clamp(2.25rem, 1.75rem + 2.5vw, 3rem)",
1173
+ { lineHeight: "2.5rem", letterSpacing: "-0.025em" }
1174
+ ],
1175
+ // text-5xl: 48px base, scales from 3rem to 4rem
1176
+ "5xl": ["clamp(3rem, 2rem + 5vw, 4rem)", { lineHeight: "1", letterSpacing: "-0.025em" }],
1177
+ // text-6xl: 60px base, scales from 3.75rem to 5rem
1178
+ "6xl": ["clamp(3.75rem, 2.5rem + 6.25vw, 5rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
1179
+ // text-7xl: 72px base (optional, for hero sections)
1180
+ "7xl": ["clamp(4.5rem, 3rem + 7.5vw, 6rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
1181
+ // text-8xl: 96px base (optional, for hero sections)
1182
+ "8xl": ["clamp(6rem, 4rem + 10vw, 8rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
1183
+ // text-9xl: 128px base (optional, for hero sections)
1184
+ "9xl": ["clamp(8rem, 5rem + 15vw, 12rem)", { lineHeight: "1", letterSpacing: "-0.05em" }]
1185
+ };
1186
+ var fontWeight = {
1187
+ thin: "100",
1188
+ extralight: "200",
1189
+ light: "300",
1190
+ normal: "400",
1191
+ medium: "500",
1192
+ semibold: "600",
1193
+ bold: "700",
1194
+ extrabold: "800",
1195
+ black: "900"
1196
+ };
1197
+ var lineHeight = {
1198
+ none: "1",
1199
+ tight: "1.25",
1200
+ snug: "1.375",
1201
+ normal: "1.5",
1202
+ relaxed: "1.625",
1203
+ loose: "2"
1204
+ };
1205
+ var letterSpacing = {
1206
+ tighter: "-0.05em",
1207
+ tight: "-0.025em",
1208
+ normal: "0em",
1209
+ wide: "0.025em",
1210
+ wider: "0.05em",
1211
+ widest: "0.1em"
1212
+ };
1213
+ var typographyCSSVariables = {
1214
+ // Font families
1215
+ "--font-sans": fontFamily.sans.join(", "),
1216
+ "--font-satoshi": fontFamily.satoshi.join(", "),
1217
+ "--font-display": fontFamily.display.join(", "),
1218
+ "--font-serif": fontFamily.serif.join(", "),
1219
+ "--font-mono": fontFamily.mono.join(", "),
1220
+ // Font sizes (using clamp values)
1221
+ "--font-size-xs": fontSize.xs[0],
1222
+ "--font-size-sm": fontSize.sm[0],
1223
+ "--font-size-base": fontSize.base[0],
1224
+ "--font-size-lg": fontSize.lg[0],
1225
+ "--font-size-xl": fontSize.xl[0],
1226
+ "--font-size-2xl": fontSize["2xl"][0],
1227
+ "--font-size-3xl": fontSize["3xl"][0],
1228
+ "--font-size-4xl": fontSize["4xl"][0],
1229
+ "--font-size-5xl": fontSize["5xl"][0],
1230
+ "--font-size-6xl": fontSize["6xl"][0],
1231
+ // Font weights
1232
+ "--font-weight-thin": fontWeight.thin,
1233
+ "--font-weight-extralight": fontWeight.extralight,
1234
+ "--font-weight-light": fontWeight.light,
1235
+ "--font-weight-normal": fontWeight.normal,
1236
+ "--font-weight-medium": fontWeight.medium,
1237
+ "--font-weight-semibold": fontWeight.semibold,
1238
+ "--font-weight-bold": fontWeight.bold,
1239
+ "--font-weight-extrabold": fontWeight.extrabold,
1240
+ "--font-weight-black": fontWeight.black,
1241
+ // Line heights
1242
+ "--line-height-none": lineHeight.none,
1243
+ "--line-height-tight": lineHeight.tight,
1244
+ "--line-height-snug": lineHeight.snug,
1245
+ "--line-height-normal": lineHeight.normal,
1246
+ "--line-height-relaxed": lineHeight.relaxed,
1247
+ "--line-height-loose": lineHeight.loose,
1248
+ // Letter spacing
1249
+ "--letter-spacing-tighter": letterSpacing.tighter,
1250
+ "--letter-spacing-tight": letterSpacing.tight,
1251
+ "--letter-spacing-normal": letterSpacing.normal,
1252
+ "--letter-spacing-wide": letterSpacing.wide,
1253
+ "--letter-spacing-wider": letterSpacing.wider,
1254
+ "--letter-spacing-widest": letterSpacing.widest
1255
+ };
1256
+ ({
1257
+ // Display styles (for hero sections)
1258
+ display: {
1259
+ fontSize: fontSize["6xl"][0]},
1260
+ // Heading styles
1261
+ h1: {
1262
+ fontSize: fontSize["5xl"][0]},
1263
+ h2: {
1264
+ fontSize: fontSize["4xl"][0]},
1265
+ h3: {
1266
+ fontSize: fontSize["3xl"][0]},
1267
+ h4: {
1268
+ fontSize: fontSize["2xl"][0]},
1269
+ h5: {
1270
+ fontSize: fontSize.xl[0]},
1271
+ h6: {
1272
+ fontSize: fontSize.lg[0]},
1273
+ // Body text styles
1274
+ body: {
1275
+ fontSize: fontSize.base[0]},
1276
+ "body-sm": {
1277
+ fontSize: fontSize.sm[0]},
1278
+ "body-xs": {
1279
+ fontSize: fontSize.xs[0]},
1280
+ // Label styles
1281
+ label: {
1282
+ fontSize: fontSize.sm[0]},
1283
+ "label-sm": {
1284
+ fontSize: fontSize.xs[0]},
1285
+ // Caption styles
1286
+ caption: {
1287
+ fontSize: fontSize.xs[0]}
1288
+ });
1289
+ ({
1290
+ fontSize: {
1291
+ xs: [
1292
+ fontSize.xs[0],
1293
+ { lineHeight: fontSize.xs[1].lineHeight, letterSpacing: fontSize.xs[1].letterSpacing }
1294
+ ],
1295
+ sm: [
1296
+ fontSize.sm[0],
1297
+ { lineHeight: fontSize.sm[1].lineHeight, letterSpacing: fontSize.sm[1].letterSpacing }
1298
+ ],
1299
+ md: [
1300
+ fontSize.base[0],
1301
+ { lineHeight: fontSize.base[1].lineHeight, letterSpacing: fontSize.base[1].letterSpacing }
1302
+ ],
1303
+ base: [
1304
+ fontSize.base[0],
1305
+ { lineHeight: fontSize.base[1].lineHeight, letterSpacing: fontSize.base[1].letterSpacing }
1306
+ ],
1307
+ lg: [
1308
+ fontSize.lg[0],
1309
+ { lineHeight: fontSize.lg[1].lineHeight, letterSpacing: fontSize.lg[1].letterSpacing }
1310
+ ],
1311
+ xl: [
1312
+ fontSize.xl[0],
1313
+ { lineHeight: fontSize.xl[1].lineHeight, letterSpacing: fontSize.xl[1].letterSpacing }
1314
+ ],
1315
+ "2xl": [
1316
+ fontSize["2xl"][0],
1317
+ {
1318
+ lineHeight: fontSize["2xl"][1].lineHeight,
1319
+ letterSpacing: fontSize["2xl"][1].letterSpacing
1320
+ }
1321
+ ],
1322
+ "3xl": [
1323
+ fontSize["3xl"][0],
1324
+ {
1325
+ lineHeight: fontSize["3xl"][1].lineHeight,
1326
+ letterSpacing: fontSize["3xl"][1].letterSpacing
1327
+ }
1328
+ ],
1329
+ "4xl": [
1330
+ fontSize["4xl"][0],
1331
+ {
1332
+ lineHeight: fontSize["4xl"][1].lineHeight,
1333
+ letterSpacing: fontSize["4xl"][1].letterSpacing
1334
+ }
1335
+ ],
1336
+ "5xl": [
1337
+ fontSize["5xl"][0],
1338
+ {
1339
+ lineHeight: fontSize["5xl"][1].lineHeight,
1340
+ letterSpacing: fontSize["5xl"][1].letterSpacing
1341
+ }
1342
+ ],
1343
+ "6xl": [
1344
+ fontSize["6xl"][0],
1345
+ {
1346
+ lineHeight: fontSize["6xl"][1].lineHeight,
1347
+ letterSpacing: fontSize["6xl"][1].letterSpacing
1348
+ }
1349
+ ],
1350
+ "7xl": [
1351
+ fontSize["7xl"][0],
1352
+ {
1353
+ lineHeight: fontSize["7xl"][1].lineHeight,
1354
+ letterSpacing: fontSize["7xl"][1].letterSpacing
1355
+ }
1356
+ ],
1357
+ "8xl": [
1358
+ fontSize["8xl"][0],
1359
+ {
1360
+ lineHeight: fontSize["8xl"][1].lineHeight,
1361
+ letterSpacing: fontSize["8xl"][1].letterSpacing
1362
+ }
1363
+ ],
1364
+ "9xl": [
1365
+ fontSize["9xl"][0],
1366
+ {
1367
+ lineHeight: fontSize["9xl"][1].lineHeight,
1368
+ letterSpacing: fontSize["9xl"][1].letterSpacing
1369
+ }
1370
+ ]
1371
+ }});
1372
+
1373
+ // src/themes/minimal.ts
1374
+ var minimalBrand = {
1375
+ id: "minimal",
1376
+ name: "Minimal",
1377
+ description: "Clean, minimal brand theme with muted colors, light typography, and compact spacing",
1378
+ namespace: "minimal",
1379
+ version: "1.0.0",
1380
+ author: "Tenerife UI",
1381
+ themes: [
1382
+ {
1383
+ id: "minimal-day",
1384
+ name: "Minimal Day",
1385
+ description: "Light minimal theme with grayscale colors and subtle accents",
1386
+ mode: "day",
1387
+ overrides: {
1388
+ name: "minimal-day",
1389
+ description: "Light minimal theme for day mode",
1390
+ // Muted, low-saturation color overrides
1391
+ primaryColors: {
1392
+ 400: "0 0% 60%",
1393
+ // Muted gray
1394
+ 500: "0 0% 50%",
1395
+ // Neutral gray (#808080)
1396
+ 600: "0 0% 40%",
1397
+ 700: "0 0% 30%"
1398
+ },
1399
+ accentColors: {
1400
+ 400: "210 20% 70%",
1401
+ // Muted blue-gray
1402
+ 500: "210 20% 60%",
1403
+ // Subtle blue-gray
1404
+ 600: "210 20% 50%",
1405
+ 700: "210 20% 40%"
1406
+ },
1407
+ secondaryColors: {
1408
+ 400: "0 0% 70%",
1409
+ // Light gray
1410
+ 500: "0 0% 65%",
1411
+ // Neutral light gray
1412
+ 600: "0 0% 55%",
1413
+ 700: "0 0% 45%"
1414
+ },
1415
+ // Muted base colors for day mode
1416
+ baseColorsDay: {
1417
+ primary: "0 0% 50%",
1418
+ // Neutral gray
1419
+ primaryForeground: "0 0% 100%",
1420
+ secondary: "0 0% 96%",
1421
+ // Very light gray
1422
+ secondaryForeground: "0 0% 20%",
1423
+ accent: "210 20% 60%",
1424
+ // Subtle blue-gray
1425
+ accentForeground: "0 0% 100%"
1426
+ },
1427
+ // Subtle semantic colors
1428
+ semanticColorsDay: {
1429
+ success: "140 30% 45%",
1430
+ // Muted green
1431
+ info: "210 30% 50%",
1432
+ // Muted blue
1433
+ warning: "40 30% 50%",
1434
+ // Muted orange
1435
+ error: "0 40% 55%"
1436
+ // Muted red
1437
+ },
1438
+ // Typography overrides - lighter and smaller
1439
+ typography: {
1440
+ fontWeight: {
1441
+ normal: "400",
1442
+ // Normal weight
1443
+ medium: "500",
1444
+ semibold: "600",
1445
+ // Lighter than default
1446
+ bold: "700"
1447
+ // Standard bold
1448
+ },
1449
+ fontSize: {
1450
+ xs: [
1451
+ "clamp(0.6875rem, 0.65rem + 0.125vw, 0.75rem)",
1452
+ { lineHeight: "1rem", letterSpacing: "0.05em" }
1453
+ ],
1454
+ // Smaller
1455
+ sm: [
1456
+ "clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem)",
1457
+ { lineHeight: "1.25rem", letterSpacing: "0.025em" }
1458
+ ],
1459
+ // Smaller
1460
+ base: [
1461
+ "clamp(0.9375rem, 0.875rem + 0.25vw, 1rem)",
1462
+ { lineHeight: "1.5rem", letterSpacing: "0em" }
1463
+ ],
1464
+ // Smaller
1465
+ lg: [
1466
+ "clamp(1.0625rem, 0.95rem + 0.5vw, 1.125rem)",
1467
+ { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
1468
+ ],
1469
+ // Smaller
1470
+ xl: [
1471
+ "clamp(1.1875rem, 1rem + 0.75vw, 1.375rem)",
1472
+ { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
1473
+ ]
1474
+ // Smaller
1475
+ }
1476
+ },
1477
+ // Spacing overrides - compact spacing for tight layout
1478
+ spacing: {
1479
+ semanticSpacing: {
1480
+ xs: "0.125rem",
1481
+ // 2px (was 4px)
1482
+ sm: "0.25rem",
1483
+ // 4px (was 8px)
1484
+ md: "0.5rem",
1485
+ // 8px (was 16px)
1486
+ lg: "0.75rem",
1487
+ // 12px (was 24px)
1488
+ xl: "1rem",
1489
+ // 16px (was 32px)
1490
+ "2xl": "1.5rem"
1491
+ // 24px (was 48px)
1492
+ }
1493
+ },
1494
+ // Shadow overrides - subtle and minimal
1495
+ shadows: {
1496
+ elevationShadows: {
1497
+ xs: "0 1px 1px 0 rgb(0 0 0 / 0.03)",
1498
+ sm: "0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 1px -1px rgb(0 0 0 / 0.05)",
1499
+ md: "0 2px 4px -1px rgb(0 0 0 / 0.05), 0 1px 2px -2px rgb(0 0 0 / 0.05)",
1500
+ lg: "0 4px 8px -2px rgb(0 0 0 / 0.05), 0 2px 4px -3px rgb(0 0 0 / 0.05)",
1501
+ xl: "0 8px 12px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05)"
1502
+ },
1503
+ glowEffects: {
1504
+ "glow-primary": "0 0 8px 0 hsl(0 0% 50% / 0.2)",
1505
+ "glow-primary-subtle": "0 0 4px 0 hsl(0 0% 50% / 0.15)",
1506
+ "glow-primary-medium": "0 0 8px 0 hsl(0 0% 50% / 0.25)",
1507
+ "glow-primary-strong": "0 0 12px 0 hsl(0 0% 50% / 0.3)"
1508
+ }
1509
+ },
1510
+ // Radius overrides - smaller, sharper corners
1511
+ radius: {
1512
+ borderRadius: {
1513
+ xs: "0.0625rem",
1514
+ // 1px
1515
+ sm: "0.125rem",
1516
+ // 2px (was 4px)
1517
+ md: "0.1875rem",
1518
+ // 3px (was 6px)
1519
+ lg: "0.25rem",
1520
+ // 4px (was 8px)
1521
+ xl: "0.375rem",
1522
+ // 6px (was 12px)
1523
+ "2xl": "0.5rem"
1524
+ // 8px (was 16px)
1525
+ },
1526
+ componentRadius: {
1527
+ button: {
1528
+ sm: "0.125rem",
1529
+ // 2px
1530
+ md: "0.1875rem",
1531
+ // 3px
1532
+ lg: "0.25rem"
1533
+ // 4px
1534
+ },
1535
+ card: {
1536
+ sm: "0.1875rem",
1537
+ // 3px
1538
+ md: "0.25rem",
1539
+ // 4px
1540
+ lg: "0.375rem",
1541
+ // 6px
1542
+ xl: "0.5rem"
1543
+ // 8px
1544
+ },
1545
+ input: {
1546
+ sm: "0.125rem",
1547
+ // 2px
1548
+ md: "0.1875rem",
1549
+ // 3px
1550
+ lg: "0.25rem"
1551
+ // 4px
1552
+ },
1553
+ badge: {
1554
+ sm: "0.0625rem",
1555
+ // 1px
1556
+ md: "0.125rem",
1557
+ // 2px
1558
+ lg: "0.1875rem"
1559
+ // 3px
1560
+ }
1561
+ }
1562
+ }
1563
+ }
1564
+ },
1565
+ {
1566
+ id: "minimal-night",
1567
+ name: "Minimal Night",
1568
+ description: "Dark minimal theme with muted grayscale colors",
1569
+ mode: "night",
1570
+ overrides: {
1571
+ name: "minimal-night",
1572
+ description: "Dark minimal theme for night mode",
1573
+ // Muted colors for night mode (slightly lighter than day for contrast)
1574
+ primaryColors: {
1575
+ 400: "0 0% 65%",
1576
+ // Lighter gray for night
1577
+ 500: "0 0% 55%",
1578
+ // Neutral gray
1579
+ 600: "0 0% 45%",
1580
+ 700: "0 0% 35%"
1581
+ },
1582
+ accentColors: {
1583
+ 400: "210 20% 75%",
1584
+ // Lighter blue-gray
1585
+ 500: "210 20% 65%",
1586
+ // Subtle blue-gray
1587
+ 600: "210 20% 55%",
1588
+ 700: "210 20% 45%"
1589
+ },
1590
+ secondaryColors: {
1591
+ 400: "0 0% 75%",
1592
+ // Light gray
1593
+ 500: "0 0% 70%",
1594
+ // Neutral light gray
1595
+ 600: "0 0% 60%",
1596
+ 700: "0 0% 50%"
1597
+ },
1598
+ // Darker base colors for night mode
1599
+ baseColorsNight: {
1600
+ background: "240 10% 8%",
1601
+ // Dark gray background
1602
+ foreground: "0 0% 95%",
1603
+ card: "240 10% 10%",
1604
+ cardForeground: "0 0% 95%"
1605
+ },
1606
+ surfaceColorsNight: {
1607
+ base: "240 10% 8%",
1608
+ elevated1: "240 10% 10%",
1609
+ elevated2: "240 10% 12%",
1610
+ elevated3: "240 10% 14%"
1611
+ },
1612
+ // Subtle semantic colors for night
1613
+ semanticColorsNight: {
1614
+ success: "140 30% 50%",
1615
+ // Muted green
1616
+ info: "210 30% 55%",
1617
+ // Muted blue
1618
+ warning: "40 30% 55%",
1619
+ // Muted orange
1620
+ error: "0 40% 60%"
1621
+ // Muted red
1622
+ },
1623
+ // Typography overrides - same as day
1624
+ typography: {
1625
+ fontWeight: {
1626
+ normal: "400",
1627
+ medium: "500",
1628
+ semibold: "600",
1629
+ bold: "700"
1630
+ },
1631
+ fontSize: {
1632
+ xs: [
1633
+ "clamp(0.6875rem, 0.65rem + 0.125vw, 0.75rem)",
1634
+ { lineHeight: "1rem", letterSpacing: "0.05em" }
1635
+ ],
1636
+ sm: [
1637
+ "clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem)",
1638
+ { lineHeight: "1.25rem", letterSpacing: "0.025em" }
1639
+ ],
1640
+ base: [
1641
+ "clamp(0.9375rem, 0.875rem + 0.25vw, 1rem)",
1642
+ { lineHeight: "1.5rem", letterSpacing: "0em" }
1643
+ ],
1644
+ lg: [
1645
+ "clamp(1.0625rem, 0.95rem + 0.5vw, 1.125rem)",
1646
+ { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
1647
+ ],
1648
+ xl: [
1649
+ "clamp(1.1875rem, 1rem + 0.75vw, 1.375rem)",
1650
+ { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
1651
+ ]
1652
+ }
1653
+ },
1654
+ // Spacing overrides - same as day
1655
+ spacing: {
1656
+ semanticSpacing: {
1657
+ xs: "0.125rem",
1658
+ sm: "0.25rem",
1659
+ md: "0.5rem",
1660
+ lg: "0.75rem",
1661
+ xl: "1rem",
1662
+ "2xl": "1.5rem"
1663
+ }
1664
+ },
1665
+ // Shadow overrides - subtle for night
1666
+ shadows: {
1667
+ elevationShadows: {
1668
+ xs: "0 1px 2px 0 rgb(0 0 0 / 0.15)",
1669
+ sm: "0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2)",
1670
+ md: "0 2px 5px -1px rgb(0 0 0 / 0.2), 0 1px 3px -2px rgb(0 0 0 / 0.2)",
1671
+ lg: "0 4px 10px -2px rgb(0 0 0 / 0.2), 0 2px 5px -3px rgb(0 0 0 / 0.2)",
1672
+ xl: "0 8px 15px -3px rgb(0 0 0 / 0.2), 0 4px 8px -4px rgb(0 0 0 / 0.2)"
1673
+ },
1674
+ glowEffects: {
1675
+ "glow-primary": "0 0 8px 0 hsl(0 0% 55% / 0.25)",
1676
+ "glow-primary-subtle": "0 0 4px 0 hsl(0 0% 55% / 0.2)",
1677
+ "glow-primary-medium": "0 0 8px 0 hsl(0 0% 55% / 0.3)",
1678
+ "glow-primary-strong": "0 0 12px 0 hsl(0 0% 55% / 0.35)"
1679
+ }
1680
+ },
1681
+ // Radius overrides - same as day
1682
+ radius: {
1683
+ borderRadius: {
1684
+ xs: "0.0625rem",
1685
+ sm: "0.125rem",
1686
+ md: "0.1875rem",
1687
+ lg: "0.25rem",
1688
+ xl: "0.375rem",
1689
+ "2xl": "0.5rem"
1690
+ },
1691
+ componentRadius: {
1692
+ button: {
1693
+ sm: "0.125rem",
1694
+ md: "0.1875rem",
1695
+ lg: "0.25rem"
1696
+ },
1697
+ card: {
1698
+ sm: "0.1875rem",
1699
+ md: "0.25rem",
1700
+ lg: "0.375rem",
1701
+ xl: "0.5rem"
1702
+ },
1703
+ input: {
1704
+ sm: "0.125rem",
1705
+ md: "0.1875rem",
1706
+ lg: "0.25rem"
1707
+ },
1708
+ badge: {
1709
+ sm: "0.0625rem",
1710
+ md: "0.125rem",
1711
+ lg: "0.1875rem"
1712
+ }
1713
+ }
1714
+ }
1715
+ }
1716
+ }
1717
+ ]
1718
+ };
1719
+
1720
+ // src/themes/neon.ts
1721
+ var neonBrand = {
1722
+ id: "neon",
1723
+ name: "Neon",
1724
+ description: "Vibrant brand theme with high-saturation neon colors, bold typography, and enhanced visual effects",
1725
+ namespace: "neon",
1726
+ version: "1.0.0",
1727
+ author: "Tenerife UI",
1728
+ themes: [
1729
+ {
1730
+ id: "neon-day",
1731
+ name: "Neon Day",
1732
+ description: "Bright neon theme for day mode with vibrant cyan, magenta, and yellow accents",
1733
+ mode: "day",
1734
+ overrides: {
1735
+ name: "neon-day",
1736
+ description: "Bright neon theme for day mode",
1737
+ // Vibrant neon color overrides
1738
+ primaryColors: {
1739
+ 400: "180 100% 50%",
1740
+ // Bright cyan
1741
+ 500: "180 100% 45%",
1742
+ // Vibrant cyan (#00e6ff)
1743
+ 600: "180 95% 40%",
1744
+ 700: "180 90% 35%"
1745
+ },
1746
+ accentColors: {
1747
+ 400: "320 100% 60%",
1748
+ // Bright magenta
1749
+ 500: "320 100% 55%",
1750
+ // Vibrant magenta (#ff00cc)
1751
+ 600: "320 95% 50%",
1752
+ 700: "320 90% 45%"
1753
+ },
1754
+ secondaryColors: {
1755
+ 400: "60 100% 60%",
1756
+ // Bright yellow
1757
+ 500: "60 100% 55%",
1758
+ // Vibrant yellow (#ffff00)
1759
+ 600: "60 95% 50%",
1760
+ 700: "60 90% 45%"
1761
+ },
1762
+ // Enhanced base colors for day mode
1763
+ baseColorsDay: {
1764
+ primary: "180 100% 45%",
1765
+ // Neon cyan
1766
+ primaryForeground: "0 0% 100%",
1767
+ accent: "320 100% 55%",
1768
+ // Neon magenta
1769
+ accentForeground: "0 0% 100%"
1770
+ },
1771
+ // Semantic colors with neon accents
1772
+ semanticColorsDay: {
1773
+ success: "145 80% 45%",
1774
+ // Neon green
1775
+ info: "180 100% 45%",
1776
+ // Neon cyan
1777
+ warning: "60 100% 55%",
1778
+ // Neon yellow
1779
+ error: "0 100% 60%"
1780
+ // Bright red
1781
+ },
1782
+ // Typography overrides - bolder and larger
1783
+ typography: {
1784
+ fontWeight: {
1785
+ normal: "500",
1786
+ // Heavier than default (400)
1787
+ medium: "600",
1788
+ // Heavier
1789
+ semibold: "700",
1790
+ // Bold
1791
+ bold: "800"
1792
+ // Extra bold
1793
+ },
1794
+ fontSize: {
1795
+ xs: [
1796
+ "clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
1797
+ { lineHeight: "1.25rem", letterSpacing: "0.025em" }
1798
+ ],
1799
+ // Larger than default
1800
+ sm: [
1801
+ "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
1802
+ { lineHeight: "1.5rem", letterSpacing: "0em" }
1803
+ ],
1804
+ // Larger
1805
+ base: [
1806
+ "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
1807
+ { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
1808
+ ],
1809
+ // Larger
1810
+ lg: [
1811
+ "clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
1812
+ { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
1813
+ ],
1814
+ // Larger
1815
+ xl: [
1816
+ "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
1817
+ { lineHeight: "2rem", letterSpacing: "-0.05em" }
1818
+ ]
1819
+ // Larger
1820
+ }
1821
+ },
1822
+ // Spacing overrides - larger spacing for breathing room
1823
+ spacing: {
1824
+ semanticSpacing: {
1825
+ xs: "0.5rem",
1826
+ // 8px (was 4px)
1827
+ sm: "1rem",
1828
+ // 16px (was 8px)
1829
+ md: "1.5rem",
1830
+ // 24px (was 16px)
1831
+ lg: "2rem",
1832
+ // 32px (was 24px)
1833
+ xl: "3rem",
1834
+ // 48px (was 32px)
1835
+ "2xl": "4rem"
1836
+ // 64px (was 48px)
1837
+ }
1838
+ },
1839
+ // Shadow overrides - stronger and more prominent
1840
+ shadows: {
1841
+ elevationShadows: {
1842
+ xs: "0 2px 4px 0 rgb(0 0 0 / 0.1)",
1843
+ sm: "0 2px 6px 0 rgb(0 0 0 / 0.15), 0 2px 4px -1px rgb(0 0 0 / 0.15)",
1844
+ md: "0 6px 10px -1px rgb(0 0 0 / 0.15), 0 4px 6px -2px rgb(0 0 0 / 0.15)",
1845
+ lg: "0 12px 20px -3px rgb(0 0 0 / 0.15), 0 6px 10px -4px rgb(0 0 0 / 0.15)",
1846
+ xl: "0 24px 32px -5px rgb(0 0 0 / 0.15), 0 10px 14px -6px rgb(0 0 0 / 0.15)"
1847
+ },
1848
+ glowEffects: {
1849
+ "glow-primary": "0 0 30px 0 hsl(180 100% 45% / 0.7), 0 0 60px 0 hsl(180 100% 45% / 0.4)",
1850
+ "glow-primary-subtle": "0 0 12px 0 hsl(180 100% 45% / 0.5)",
1851
+ "glow-primary-medium": "0 0 24px 0 hsl(180 100% 45% / 0.7)",
1852
+ "glow-primary-strong": "0 0 36px 0 hsl(180 100% 45% / 0.8)",
1853
+ "glow-accent": "0 0 30px 0 hsl(320 100% 55% / 0.7), 0 0 60px 0 hsl(320 100% 55% / 0.4)",
1854
+ "glow-accent-subtle": "0 0 12px 0 hsl(320 100% 55% / 0.5)",
1855
+ "glow-accent-medium": "0 0 24px 0 hsl(320 100% 55% / 0.7)",
1856
+ "glow-accent-strong": "0 0 36px 0 hsl(320 100% 55% / 0.8)"
1857
+ }
1858
+ },
1859
+ // Radius overrides - more rounded corners
1860
+ radius: {
1861
+ borderRadius: {
1862
+ sm: "0.375rem",
1863
+ // 6px (was 4px)
1864
+ md: "0.5rem",
1865
+ // 8px (was 6px)
1866
+ lg: "0.75rem",
1867
+ // 12px (was 8px)
1868
+ xl: "1rem",
1869
+ // 16px (was 12px)
1870
+ "2xl": "1.5rem",
1871
+ // 24px (was 16px)
1872
+ "3xl": "2rem"
1873
+ // 32px (was 24px)
1874
+ },
1875
+ componentRadius: {
1876
+ button: {
1877
+ sm: "0.5rem",
1878
+ // 8px
1879
+ md: "0.75rem",
1880
+ // 12px
1881
+ lg: "1rem"
1882
+ // 16px
1883
+ },
1884
+ card: {
1885
+ sm: "0.75rem",
1886
+ // 12px
1887
+ md: "1rem",
1888
+ // 16px
1889
+ lg: "1.25rem",
1890
+ // 20px
1891
+ xl: "1.5rem"
1892
+ // 24px
1893
+ },
1894
+ input: {
1895
+ sm: "0.5rem",
1896
+ // 8px
1897
+ md: "0.75rem",
1898
+ // 12px
1899
+ lg: "1rem"
1900
+ // 16px
1901
+ },
1902
+ badge: {
1903
+ sm: "0.375rem",
1904
+ // 6px
1905
+ md: "0.5rem",
1906
+ // 8px
1907
+ lg: "0.75rem"
1908
+ // 12px
1909
+ }
1910
+ }
1911
+ }
1912
+ }
1913
+ },
1914
+ {
1915
+ id: "neon-night",
1916
+ name: "Neon Night",
1917
+ description: "Dark neon theme for night mode with glowing neon accents on dark backgrounds",
1918
+ mode: "night",
1919
+ overrides: {
1920
+ name: "neon-night",
1921
+ description: "Dark neon theme for night mode",
1922
+ // Vibrant neon color overrides (same as day but with different base)
1923
+ primaryColors: {
1924
+ 400: "180 100% 55%",
1925
+ // Brighter cyan for night
1926
+ 500: "180 100% 50%",
1927
+ // Vibrant cyan
1928
+ 600: "180 95% 45%",
1929
+ 700: "180 90% 40%"
1930
+ },
1931
+ accentColors: {
1932
+ 400: "320 100% 65%",
1933
+ // Brighter magenta for night
1934
+ 500: "320 100% 60%",
1935
+ // Vibrant magenta
1936
+ 600: "320 95% 55%",
1937
+ 700: "320 90% 50%"
1938
+ },
1939
+ secondaryColors: {
1940
+ 400: "60 100% 65%",
1941
+ // Brighter yellow for night
1942
+ 500: "60 100% 60%",
1943
+ // Vibrant yellow
1944
+ 600: "60 95% 55%",
1945
+ 700: "60 90% 50%"
1946
+ },
1947
+ // Darker base colors for night mode
1948
+ baseColorsNight: {
1949
+ background: "240 10% 5%",
1950
+ // Very dark background
1951
+ foreground: "0 0% 98%",
1952
+ card: "240 10% 6%",
1953
+ cardForeground: "0 0% 98%"
1954
+ },
1955
+ surfaceColorsNight: {
1956
+ base: "240 10% 5%",
1957
+ // Very dark
1958
+ elevated1: "240 10% 7%",
1959
+ elevated2: "240 10% 9%",
1960
+ elevated3: "240 10% 11%"
1961
+ },
1962
+ // Semantic colors with neon accents for night
1963
+ semanticColorsNight: {
1964
+ success: "145 75% 50%",
1965
+ // Neon green
1966
+ info: "180 100% 50%",
1967
+ // Neon cyan
1968
+ warning: "60 100% 60%",
1969
+ // Neon yellow
1970
+ error: "0 100% 65%"
1971
+ // Bright red
1972
+ },
1973
+ // Typography overrides - same as day
1974
+ typography: {
1975
+ fontWeight: {
1976
+ normal: "500",
1977
+ medium: "600",
1978
+ semibold: "700",
1979
+ bold: "800"
1980
+ },
1981
+ fontSize: {
1982
+ xs: [
1983
+ "clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
1984
+ { lineHeight: "1.25rem", letterSpacing: "0.025em" }
1985
+ ],
1986
+ sm: [
1987
+ "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
1988
+ { lineHeight: "1.5rem", letterSpacing: "0em" }
1989
+ ],
1990
+ base: [
1991
+ "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
1992
+ { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
1993
+ ],
1994
+ lg: [
1995
+ "clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
1996
+ { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
1997
+ ],
1998
+ xl: [
1999
+ "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
2000
+ { lineHeight: "2rem", letterSpacing: "-0.05em" }
2001
+ ]
2002
+ }
2003
+ },
2004
+ // Spacing overrides - same as day
2005
+ spacing: {
2006
+ semanticSpacing: {
2007
+ xs: "0.5rem",
2008
+ sm: "1rem",
2009
+ md: "1.5rem",
2010
+ lg: "2rem",
2011
+ xl: "3rem",
2012
+ "2xl": "4rem"
2013
+ }
2014
+ },
2015
+ // Shadow overrides - even stronger glow for night
2016
+ shadows: {
2017
+ elevationShadows: {
2018
+ xs: "0 2px 4px 0 rgb(0 0 0 / 0.2)",
2019
+ sm: "0 2px 6px 0 rgb(0 0 0 / 0.25), 0 2px 4px -1px rgb(0 0 0 / 0.25)",
2020
+ md: "0 6px 10px -1px rgb(0 0 0 / 0.25), 0 4px 6px -2px rgb(0 0 0 / 0.25)",
2021
+ lg: "0 12px 20px -3px rgb(0 0 0 / 0.25), 0 6px 10px -4px rgb(0 0 0 / 0.25)",
2022
+ xl: "0 24px 32px -5px rgb(0 0 0 / 0.25), 0 10px 14px -6px rgb(0 0 0 / 0.25)"
2023
+ },
2024
+ glowEffects: {
2025
+ "glow-primary": "0 0 40px 0 hsl(180 100% 50% / 0.8), 0 0 80px 0 hsl(180 100% 50% / 0.5)",
2026
+ "glow-primary-subtle": "0 0 16px 0 hsl(180 100% 50% / 0.6)",
2027
+ "glow-primary-medium": "0 0 32px 0 hsl(180 100% 50% / 0.8)",
2028
+ "glow-primary-strong": "0 0 48px 0 hsl(180 100% 50% / 0.9)",
2029
+ "glow-accent": "0 0 40px 0 hsl(320 100% 60% / 0.8), 0 0 80px 0 hsl(320 100% 60% / 0.5)",
2030
+ "glow-accent-subtle": "0 0 16px 0 hsl(320 100% 60% / 0.6)",
2031
+ "glow-accent-medium": "0 0 32px 0 hsl(320 100% 60% / 0.8)",
2032
+ "glow-accent-strong": "0 0 48px 0 hsl(320 100% 60% / 0.9)"
2033
+ }
2034
+ },
2035
+ // Radius overrides - same as day
2036
+ radius: {
2037
+ borderRadius: {
2038
+ sm: "0.375rem",
2039
+ md: "0.5rem",
2040
+ lg: "0.75rem",
2041
+ xl: "1rem",
2042
+ "2xl": "1.5rem",
2043
+ "3xl": "2rem"
2044
+ },
2045
+ componentRadius: {
2046
+ button: {
2047
+ sm: "0.5rem",
2048
+ md: "0.75rem",
2049
+ lg: "1rem"
2050
+ },
2051
+ card: {
2052
+ sm: "0.75rem",
2053
+ md: "1rem",
2054
+ lg: "1.25rem",
2055
+ xl: "1.5rem"
2056
+ },
2057
+ input: {
2058
+ sm: "0.5rem",
2059
+ md: "0.75rem",
2060
+ lg: "1rem"
2061
+ },
2062
+ badge: {
2063
+ sm: "0.375rem",
2064
+ md: "0.5rem",
2065
+ lg: "0.75rem"
2066
+ }
2067
+ }
2068
+ }
2069
+ }
2070
+ }
2071
+ ]
2319
2072
  };
2320
- ({
2321
- // Display styles (for hero sections)
2322
- display: {
2323
- fontSize: fontSize["6xl"][0]},
2324
- // Heading styles
2325
- h1: {
2326
- fontSize: fontSize["5xl"][0]},
2327
- h2: {
2328
- fontSize: fontSize["4xl"][0]},
2329
- h3: {
2330
- fontSize: fontSize["3xl"][0]},
2331
- h4: {
2332
- fontSize: fontSize["2xl"][0]},
2333
- h5: {
2334
- fontSize: fontSize.xl[0]},
2335
- h6: {
2336
- fontSize: fontSize.lg[0]},
2337
- // Body text styles
2338
- body: {
2339
- fontSize: fontSize.base[0]},
2340
- "body-sm": {
2341
- fontSize: fontSize.sm[0]},
2342
- "body-xs": {
2343
- fontSize: fontSize.xs[0]},
2344
- // Label styles
2345
- label: {
2346
- fontSize: fontSize.sm[0]},
2347
- "label-sm": {
2348
- fontSize: fontSize.xs[0]},
2349
- // Caption styles
2350
- caption: {
2351
- fontSize: fontSize.xs[0]}
2352
- });
2353
- ({
2354
- fontSize: {
2355
- xs: [
2356
- fontSize.xs[0],
2357
- { lineHeight: fontSize.xs[1].lineHeight, letterSpacing: fontSize.xs[1].letterSpacing }
2358
- ],
2359
- sm: [
2360
- fontSize.sm[0],
2361
- { lineHeight: fontSize.sm[1].lineHeight, letterSpacing: fontSize.sm[1].letterSpacing }
2362
- ],
2363
- md: [
2364
- fontSize.base[0],
2365
- { lineHeight: fontSize.base[1].lineHeight, letterSpacing: fontSize.base[1].letterSpacing }
2366
- ],
2367
- base: [
2368
- fontSize.base[0],
2369
- { lineHeight: fontSize.base[1].lineHeight, letterSpacing: fontSize.base[1].letterSpacing }
2370
- ],
2371
- lg: [
2372
- fontSize.lg[0],
2373
- { lineHeight: fontSize.lg[1].lineHeight, letterSpacing: fontSize.lg[1].letterSpacing }
2374
- ],
2375
- xl: [
2376
- fontSize.xl[0],
2377
- { lineHeight: fontSize.xl[1].lineHeight, letterSpacing: fontSize.xl[1].letterSpacing }
2378
- ],
2379
- "2xl": [
2380
- fontSize["2xl"][0],
2381
- {
2382
- lineHeight: fontSize["2xl"][1].lineHeight,
2383
- letterSpacing: fontSize["2xl"][1].letterSpacing
2073
+
2074
+ // src/themes/brand_engine.ts
2075
+ var brandRegistry = /* @__PURE__ */ new Map();
2076
+ var activeBrand = null;
2077
+ var activeNamespace = null;
2078
+ var brandCache = /* @__PURE__ */ new Map();
2079
+ function validateBrand(brand) {
2080
+ const errors = [];
2081
+ const warnings = [];
2082
+ if (!brand || typeof brand !== "object") {
2083
+ return {
2084
+ valid: false,
2085
+ errors: ["Brand must be an object"],
2086
+ warnings: []
2087
+ };
2088
+ }
2089
+ const brandObj = brand;
2090
+ const requiredFields = ["id", "name", "namespace"];
2091
+ for (const field of requiredFields) {
2092
+ if (!(field in brandObj) || !brandObj[field]) {
2093
+ errors.push(`Missing required field: ${field}`);
2094
+ }
2095
+ }
2096
+ if (brandObj.id && typeof brandObj.id === "string") {
2097
+ const idRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
2098
+ if (!idRegex.test(brandObj.id)) {
2099
+ errors.push(
2100
+ `Invalid brand ID format: "${brandObj.id}". Must be kebab-case (e.g., "neon-brand")`
2101
+ );
2102
+ }
2103
+ }
2104
+ if (brandObj.namespace && typeof brandObj.namespace === "string") {
2105
+ const namespaceRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
2106
+ if (!namespaceRegex.test(brandObj.namespace)) {
2107
+ errors.push(
2108
+ `Invalid namespace format: "${brandObj.namespace}". Must be kebab-case (e.g., "neon")`
2109
+ );
2110
+ }
2111
+ }
2112
+ if (brandObj.themes) {
2113
+ if (!Array.isArray(brandObj.themes)) {
2114
+ errors.push("Brand themes must be an array");
2115
+ } else {
2116
+ const themes2 = brandObj.themes;
2117
+ if (themes2.length === 0) {
2118
+ warnings.push("Brand has no themes defined");
2119
+ }
2120
+ themes2.forEach((theme, index) => {
2121
+ if (!theme || typeof theme !== "object") {
2122
+ errors.push(`Theme at index ${index} must be an object`);
2123
+ return;
2124
+ }
2125
+ const themeObj = theme;
2126
+ if (!themeObj.id || typeof themeObj.id !== "string") {
2127
+ errors.push(`Theme at index ${index} is missing required field: id`);
2128
+ }
2129
+ if (!themeObj.name || typeof themeObj.name !== "string") {
2130
+ errors.push(`Theme at index ${index} is missing required field: name`);
2131
+ }
2132
+ if (!themeObj.mode || !["day", "night"].includes(themeObj.mode)) {
2133
+ errors.push(`Theme at index ${index} must have mode set to "day" or "night"`);
2134
+ }
2135
+ if (!themeObj.overrides || typeof themeObj.overrides !== "object") {
2136
+ errors.push(`Theme at index ${index} is missing required field: overrides`);
2137
+ }
2138
+ });
2139
+ }
2140
+ } else {
2141
+ errors.push("Brand must have at least one theme");
2142
+ }
2143
+ if (brandObj.version && typeof brandObj.version === "string") {
2144
+ const semverRegex = /^\d+\.\d+\.\d+$/;
2145
+ if (!semverRegex.test(brandObj.version)) {
2146
+ warnings.push(
2147
+ `Invalid version format: "${brandObj.version}". Should be semver (e.g., "1.0.0")`
2148
+ );
2149
+ }
2150
+ }
2151
+ if (brandObj.themes && Array.isArray(brandObj.themes)) {
2152
+ const themeIds = brandObj.themes.map(
2153
+ (theme) => theme?.id
2154
+ );
2155
+ const uniqueIds = new Set(themeIds);
2156
+ if (themeIds.length !== uniqueIds.size) {
2157
+ errors.push("Brand contains duplicate theme IDs");
2158
+ }
2159
+ }
2160
+ return {
2161
+ valid: errors.length === 0,
2162
+ errors,
2163
+ warnings
2164
+ };
2165
+ }
2166
+ function registerBrand(brand, options) {
2167
+ const validation = validateBrand(brand);
2168
+ if (!validation.valid) {
2169
+ throw new Error(`Invalid brand "${brand.id}": ${validation.errors.join(", ")}`);
2170
+ }
2171
+ if (validation.warnings.length > 0) {
2172
+ console.warn(`Brand "${brand.id}" validation warnings:`, validation.warnings.join(", "));
2173
+ }
2174
+ const existingEntry = brandRegistry.get(brand.id);
2175
+ if (existingEntry && existingEntry.brand.namespace === brand.namespace) {
2176
+ return;
2177
+ }
2178
+ if (brandRegistry.has(brand.id)) {
2179
+ throw new Error(`Brand "${brand.id}" is already registered`);
2180
+ }
2181
+ const existingBrand = Array.from(brandRegistry.values()).find(
2182
+ (entry) => entry.brand.namespace === brand.namespace
2183
+ );
2184
+ if (existingBrand) {
2185
+ throw new Error(
2186
+ `Brand namespace "${brand.namespace}" is already used by brand "${existingBrand.brand.id}"`
2187
+ );
2188
+ }
2189
+ brandRegistry.set(brand.id, {
2190
+ brand,
2191
+ enabled: options?.enabled !== false,
2192
+ loader: options?.loader
2193
+ });
2194
+ }
2195
+ async function loadBrand(brandId) {
2196
+ if (brandCache.has(brandId)) {
2197
+ return brandCache.get(brandId);
2198
+ }
2199
+ const entry = brandRegistry.get(brandId);
2200
+ if (!entry) {
2201
+ throw new Error(`Brand "${brandId}" not found in registry`);
2202
+ }
2203
+ if (entry.enabled === false) {
2204
+ throw new Error(`Brand "${brandId}" is disabled`);
2205
+ }
2206
+ if (entry.loader) {
2207
+ try {
2208
+ const module = await entry.loader();
2209
+ const loadedBrand = module.default;
2210
+ const validation = validateBrand(loadedBrand);
2211
+ if (!validation.valid) {
2212
+ throw new Error(`Invalid loaded brand "${brandId}": ${validation.errors.join(", ")}`);
2213
+ }
2214
+ brandCache.set(brandId, loadedBrand);
2215
+ return loadedBrand;
2216
+ } catch (error) {
2217
+ throw new Error(
2218
+ `Failed to load brand "${brandId}": ${error instanceof Error ? error.message : String(error)}`
2219
+ );
2220
+ }
2221
+ }
2222
+ brandCache.set(brandId, entry.brand);
2223
+ return entry.brand;
2224
+ }
2225
+ function getActiveBrand() {
2226
+ return activeBrand;
2227
+ }
2228
+ function setActiveBrand(brand) {
2229
+ activeBrand = brand;
2230
+ activeNamespace = brand?.namespace || null;
2231
+ }
2232
+ function clearActiveBrand() {
2233
+ activeBrand = null;
2234
+ activeNamespace = null;
2235
+ }
2236
+ function getBrandTheme(brand, mode) {
2237
+ return brand.themes.find((theme) => theme.mode === mode);
2238
+ }
2239
+ function applyBrandOverrides(brand, mode) {
2240
+ if (typeof document === "undefined") return;
2241
+ const theme = getBrandTheme(brand, mode);
2242
+ if (!theme) {
2243
+ console.warn(`Brand "${brand.id}" has no theme for mode "${mode}"`);
2244
+ return;
2245
+ }
2246
+ const root = document.documentElement;
2247
+ const { namespace } = brand;
2248
+ const { overrides } = theme;
2249
+ if (overrides.primaryColors) {
2250
+ Object.entries(overrides.primaryColors).forEach(([key, value]) => {
2251
+ root.style.setProperty(`--brand-${namespace}-primary-${key}`, value);
2252
+ });
2253
+ }
2254
+ if (overrides.accentColors) {
2255
+ Object.entries(overrides.accentColors).forEach(([key, value]) => {
2256
+ root.style.setProperty(`--brand-${namespace}-accent-${key}`, value);
2257
+ });
2258
+ }
2259
+ if (overrides.secondaryColors) {
2260
+ Object.entries(overrides.secondaryColors).forEach(([key, value]) => {
2261
+ root.style.setProperty(`--brand-${namespace}-secondary-${key}`, value);
2262
+ });
2263
+ }
2264
+ const modeColors = mode === "day" ? overrides.baseColorsDay : overrides.baseColorsNight;
2265
+ if (modeColors) {
2266
+ Object.entries(modeColors).forEach(([key, value]) => {
2267
+ root.style.setProperty(`--brand-${namespace}-${key}`, value);
2268
+ });
2269
+ }
2270
+ if (overrides.typography) {
2271
+ if (overrides.typography.fontFamily) {
2272
+ Object.entries(overrides.typography.fontFamily).forEach(([key, value]) => {
2273
+ root.style.setProperty(
2274
+ `--brand-${namespace}-font-${key}`,
2275
+ Array.isArray(value) ? value.join(", ") : value
2276
+ );
2277
+ });
2278
+ }
2279
+ if (overrides.typography.fontSize) {
2280
+ Object.entries(overrides.typography.fontSize).forEach(([key, value]) => {
2281
+ const fontSizeValue = typeof value === "string" ? value : value[0];
2282
+ root.style.setProperty(`--brand-${namespace}-font-size-${key}`, fontSizeValue);
2283
+ });
2284
+ }
2285
+ if (overrides.typography.fontWeight) {
2286
+ Object.entries(overrides.typography.fontWeight).forEach(([key, value]) => {
2287
+ root.style.setProperty(`--brand-${namespace}-font-weight-${key}`, value);
2288
+ });
2289
+ }
2290
+ if (overrides.typography.lineHeight) {
2291
+ Object.entries(overrides.typography.lineHeight).forEach(([key, value]) => {
2292
+ root.style.setProperty(`--brand-${namespace}-line-height-${key}`, value);
2293
+ });
2294
+ }
2295
+ if (overrides.typography.letterSpacing) {
2296
+ Object.entries(overrides.typography.letterSpacing).forEach(([key, value]) => {
2297
+ root.style.setProperty(`--brand-${namespace}-letter-spacing-${key}`, value);
2298
+ });
2299
+ }
2300
+ }
2301
+ if (overrides.spacing) {
2302
+ if (overrides.spacing.semanticSpacing) {
2303
+ Object.entries(overrides.spacing.semanticSpacing).forEach(([key, value]) => {
2304
+ root.style.setProperty(`--brand-${namespace}-spacing-${key}`, value);
2305
+ });
2306
+ }
2307
+ if (overrides.spacing.layoutSpacing) {
2308
+ const layout = overrides.spacing.layoutSpacing;
2309
+ if (layout.section) {
2310
+ Object.entries(layout.section).forEach(([key, value]) => {
2311
+ if (typeof value === "string") {
2312
+ root.style.setProperty(`--brand-${namespace}-layout-section-${key}`, value);
2313
+ }
2314
+ });
2384
2315
  }
2385
- ],
2386
- "3xl": [
2387
- fontSize["3xl"][0],
2388
- {
2389
- lineHeight: fontSize["3xl"][1].lineHeight,
2390
- letterSpacing: fontSize["3xl"][1].letterSpacing
2316
+ if (layout.container) {
2317
+ Object.entries(layout.container).forEach(([key, value]) => {
2318
+ if (typeof value === "string") {
2319
+ root.style.setProperty(`--brand-${namespace}-layout-container-${key}`, value);
2320
+ }
2321
+ });
2391
2322
  }
2392
- ],
2393
- "4xl": [
2394
- fontSize["4xl"][0],
2395
- {
2396
- lineHeight: fontSize["4xl"][1].lineHeight,
2397
- letterSpacing: fontSize["4xl"][1].letterSpacing
2323
+ if (layout.grid) {
2324
+ Object.entries(layout.grid).forEach(([key, value]) => {
2325
+ if (typeof value === "string") {
2326
+ root.style.setProperty(`--brand-${namespace}-layout-grid-${key}`, value);
2327
+ }
2328
+ });
2398
2329
  }
2399
- ],
2400
- "5xl": [
2401
- fontSize["5xl"][0],
2402
- {
2403
- lineHeight: fontSize["5xl"][1].lineHeight,
2404
- letterSpacing: fontSize["5xl"][1].letterSpacing
2330
+ if (layout.stack) {
2331
+ Object.entries(layout.stack).forEach(([key, value]) => {
2332
+ if (typeof value === "string") {
2333
+ root.style.setProperty(`--brand-${namespace}-layout-stack-${key}`, value);
2334
+ }
2335
+ });
2405
2336
  }
2406
- ],
2407
- "6xl": [
2408
- fontSize["6xl"][0],
2409
- {
2410
- lineHeight: fontSize["6xl"][1].lineHeight,
2411
- letterSpacing: fontSize["6xl"][1].letterSpacing
2337
+ if (layout.component) {
2338
+ Object.entries(layout.component).forEach(([key, value]) => {
2339
+ if (typeof value === "string") {
2340
+ root.style.setProperty(`--brand-${namespace}-layout-component-${key}`, value);
2341
+ }
2342
+ });
2412
2343
  }
2413
- ],
2414
- "7xl": [
2415
- fontSize["7xl"][0],
2416
- {
2417
- lineHeight: fontSize["7xl"][1].lineHeight,
2418
- letterSpacing: fontSize["7xl"][1].letterSpacing
2344
+ }
2345
+ }
2346
+ if (overrides.shadows) {
2347
+ if (overrides.shadows.elevationShadows) {
2348
+ Object.entries(overrides.shadows.elevationShadows).forEach(([key, value]) => {
2349
+ root.style.setProperty(`--brand-${namespace}-shadow-${key}`, value);
2350
+ });
2351
+ }
2352
+ if (overrides.shadows.primaryColoredShadows) {
2353
+ Object.entries(overrides.shadows.primaryColoredShadows).forEach(([key, value]) => {
2354
+ root.style.setProperty(`--brand-${namespace}-shadow-primary-${key}`, value);
2355
+ });
2356
+ }
2357
+ if (overrides.shadows.accentColoredShadows) {
2358
+ Object.entries(overrides.shadows.accentColoredShadows).forEach(([key, value]) => {
2359
+ root.style.setProperty(`--brand-${namespace}-shadow-accent-${key}`, value);
2360
+ });
2361
+ }
2362
+ if (overrides.shadows.glowEffects) {
2363
+ Object.entries(overrides.shadows.glowEffects).forEach(([key, value]) => {
2364
+ root.style.setProperty(`--brand-${namespace}-glow-${key}`, value);
2365
+ });
2366
+ }
2367
+ if (overrides.shadows.focusRings) {
2368
+ Object.entries(overrides.shadows.focusRings).forEach(([key, value]) => {
2369
+ root.style.setProperty(`--brand-${namespace}-focus-ring-${key}`, value);
2370
+ });
2371
+ }
2372
+ }
2373
+ if (overrides.radius) {
2374
+ if (overrides.radius.borderRadius) {
2375
+ Object.entries(overrides.radius.borderRadius).forEach(([key, value]) => {
2376
+ root.style.setProperty(`--brand-${namespace}-radius-${key}`, value);
2377
+ });
2378
+ }
2379
+ if (overrides.radius.componentRadius) {
2380
+ const { componentRadius: componentRadius2 } = overrides.radius;
2381
+ if (componentRadius2.button) {
2382
+ Object.entries(componentRadius2.button).forEach(([key, value]) => {
2383
+ root.style.setProperty(`--brand-${namespace}-radius-button-${key}`, value);
2384
+ });
2419
2385
  }
2420
- ],
2421
- "8xl": [
2422
- fontSize["8xl"][0],
2423
- {
2424
- lineHeight: fontSize["8xl"][1].lineHeight,
2425
- letterSpacing: fontSize["8xl"][1].letterSpacing
2386
+ if (componentRadius2.card) {
2387
+ Object.entries(componentRadius2.card).forEach(([key, value]) => {
2388
+ root.style.setProperty(`--brand-${namespace}-radius-card-${key}`, value);
2389
+ });
2426
2390
  }
2427
- ],
2428
- "9xl": [
2429
- fontSize["9xl"][0],
2430
- {
2431
- lineHeight: fontSize["9xl"][1].lineHeight,
2432
- letterSpacing: fontSize["9xl"][1].letterSpacing
2391
+ if (componentRadius2.input) {
2392
+ Object.entries(componentRadius2.input).forEach(([key, value]) => {
2393
+ root.style.setProperty(`--brand-${namespace}-radius-input-${key}`, value);
2394
+ });
2433
2395
  }
2434
- ]
2435
- }});
2396
+ }
2397
+ }
2398
+ setActiveBrand(brand);
2399
+ root.setAttribute("data-brand", brand.id);
2400
+ root.setAttribute("data-brand-namespace", namespace);
2401
+ }
2402
+ function removeBrandOverrides(namespace) {
2403
+ if (typeof document === "undefined") return;
2404
+ const root = document.documentElement;
2405
+ const { style } = root;
2406
+ const propsToRemove = [];
2407
+ for (let i = 0; i < style.length; i++) {
2408
+ const prop = style.item(i);
2409
+ if (prop && prop.startsWith(`--brand-${namespace}-`)) {
2410
+ propsToRemove.push(prop);
2411
+ }
2412
+ }
2413
+ propsToRemove.forEach((prop) => {
2414
+ style.removeProperty(prop);
2415
+ });
2416
+ root.removeAttribute("data-brand");
2417
+ root.removeAttribute("data-brand-namespace");
2418
+ if (activeNamespace === namespace) {
2419
+ clearActiveBrand();
2420
+ }
2421
+ }
2422
+
2423
+ // src/themes/index.ts
2424
+ var themes = {
2425
+ default: () => Promise.resolve().then(() => (init_default(), default_exports)).then((m) => m.defaultTheme),
2426
+ dark: () => Promise.resolve().then(() => (init_dark(), dark_exports)).then((m) => m.darkTheme),
2427
+ brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme)
2428
+ };
2429
+ async function getTheme(name) {
2430
+ const themeLoader = themes[name];
2431
+ if (!themeLoader) {
2432
+ throw new Error(`Theme "${name}" not found`);
2433
+ }
2434
+ return await themeLoader();
2435
+ }
2436
2436
 
2437
- // src/tokens/state-matrix.ts
2437
+ // src/FOUNDATION/tokens/state-matrix.ts
2438
2438
  function getStateVariableName(component, variant, state, property) {
2439
2439
  const propertyMap = {
2440
2440
  background: "bg",
@@ -2470,7 +2470,7 @@ function flattenStateMatrix(stateMatrix) {
2470
2470
  return variables;
2471
2471
  }
2472
2472
 
2473
- // src/tokens/states.ts
2473
+ // src/FOUNDATION/tokens/states.ts
2474
2474
  function getButtonStateMatrix(mode, baseColors2, surfaceColors2) {
2475
2475
  const primaryBase = primaryColors[600];
2476
2476
  const primaryHover = primaryColors[700];
@@ -2600,7 +2600,7 @@ function getButtonStateMatrix(mode, baseColors2, surfaceColors2) {
2600
2600
  };
2601
2601
  }
2602
2602
 
2603
- // src/theme/applyStateMatrix.ts
2603
+ // src/FOUNDATION/theme/applyStateMatrix.ts
2604
2604
  function getMergedBaseTokens(_mode) {
2605
2605
  return {
2606
2606
  baseColors,
@@ -2671,7 +2671,7 @@ function updateStateMatrixFromTokens(mode) {
2671
2671
  }
2672
2672
  }
2673
2673
 
2674
- // src/theme/applyMode.ts
2674
+ // src/FOUNDATION/theme/applyMode.ts
2675
2675
  var MODE_ATTRIBUTE = "data-mode";
2676
2676
  var THEME_ATTRIBUTE = "data-theme-name";
2677
2677
  var MODE_THEME_ATTRIBUTE = "data-theme";
@@ -3084,7 +3084,7 @@ function persistBrand(brandId, storageKey = "tm_brand") {
3084
3084
  }
3085
3085
  }
3086
3086
 
3087
- // src/theme/registry.ts
3087
+ // src/FOUNDATION/theme/registry.ts
3088
3088
  var themeRegistry = /* @__PURE__ */ new Map();
3089
3089
  function registerTheme(entry) {
3090
3090
  themeRegistry.set(entry.metadata.id, entry);
@@ -3164,7 +3164,7 @@ function initializeDefaultThemes() {
3164
3164
  }
3165
3165
  initializeDefaultThemes();
3166
3166
 
3167
- // src/theme/schema.ts
3167
+ // src/FOUNDATION/theme/schema.ts
3168
3168
  var REQUIRED_FIELDS = ["id", "name"];
3169
3169
  function validateThemeSchema(theme) {
3170
3170
  const errors = [];
@@ -3258,7 +3258,7 @@ function createMinimalThemeSchema(id, name) {
3258
3258
  };
3259
3259
  }
3260
3260
 
3261
- // src/theme/loader.ts
3261
+ // src/FOUNDATION/theme/loader.ts
3262
3262
  var DEFAULT_OPTIONS = {
3263
3263
  fallbackThemeId: "default",
3264
3264
  validate: true,
@@ -3335,7 +3335,7 @@ async function canLoadTheme(themeId) {
3335
3335
  }
3336
3336
  }
3337
3337
 
3338
- // src/theme/spacing.ts
3338
+ // src/FOUNDATION/theme/spacing.ts
3339
3339
  var spacing2 = {
3340
3340
  none: "0",
3341
3341
  xs: "0.25rem",
@@ -3691,7 +3691,7 @@ function useTheme() {
3691
3691
  return context;
3692
3692
  }
3693
3693
 
3694
- // src/theme/typography.ts
3694
+ // src/FOUNDATION/theme/typography.ts
3695
3695
  var fontFamilies = {
3696
3696
  sans: [
3697
3697
  "ui-sans-serif",