@fastwork/xosmoz-theme 0.0.3

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,876 @@
1
+ 'use strict';
2
+
3
+ // src/tokens/colors.ts
4
+ var primary = {
5
+ 50: "#E5F0FF",
6
+ 100: "#CCE0FF",
7
+ 200: "#99C2FF",
8
+ 300: "#66A3FF",
9
+ 400: "#3385FF",
10
+ 500: "#0569FF",
11
+ 600: "#0052CC",
12
+ 700: "#003D99",
13
+ 800: "#002966",
14
+ 900: "#001433"
15
+ };
16
+ var neutral = {
17
+ 50: "#FFFFFF",
18
+ 100: "#FBFBFC",
19
+ 200: "#F6F7F8",
20
+ 300: "#E8EAEE",
21
+ 400: "#D6DAE1",
22
+ 500: "#9BA6B5",
23
+ 600: "#8793A6",
24
+ 700: "#728197",
25
+ 800: "#485261",
26
+ 900: "#38404C",
27
+ 1e3: "#2B313B",
28
+ 1100: "#000000"
29
+ };
30
+ var green = {
31
+ 50: "#EBFFF3",
32
+ 100: "#D7F1E2",
33
+ 200: "#AFE3C5",
34
+ 300: "#87D5A7",
35
+ 400: "#5FC78A",
36
+ 500: "#37B96D",
37
+ 600: "#2C9457",
38
+ 700: "#216F41",
39
+ 800: "#164A2C",
40
+ 900: "#0B2516"
41
+ };
42
+ var yellow = {
43
+ 50: "#FFF8E5",
44
+ 100: "#FFF4CC",
45
+ 200: "#FFE999",
46
+ 300: "#FFDE66",
47
+ 400: "#FFD333",
48
+ 500: "#FFC800",
49
+ 600: "#CCA000",
50
+ 700: "#997800",
51
+ 800: "#665000",
52
+ 900: "#332800"
53
+ };
54
+ var red = {
55
+ 50: "#FCE3E3",
56
+ 100: "#FAD8D7",
57
+ 200: "#F5B0AF",
58
+ 300: "#F08987",
59
+ 400: "#EC615F",
60
+ 500: "#E73A37",
61
+ 600: "#B92E2C",
62
+ 700: "#8A2321",
63
+ 800: "#5C1716",
64
+ 900: "#411110"
65
+ };
66
+ var orange = {
67
+ 50: "#FEF0E6",
68
+ 100: "#FEE1CD",
69
+ 200: "#FCC49C",
70
+ 300: "#FBA66A",
71
+ 400: "#FA8938",
72
+ 500: "#F97416",
73
+ 600: "#C75605",
74
+ 700: "#954004",
75
+ 800: "#632B03",
76
+ 900: "#321501"
77
+ };
78
+ var purple = {
79
+ 50: "#F0F2FD",
80
+ 100: "#E9E8FA",
81
+ 200: "#D2D1F6",
82
+ 300: "#BCBBF1",
83
+ 400: "#A5A4ED",
84
+ 500: "#8F8DE8",
85
+ 600: "#7271BA",
86
+ 700: "#56558B",
87
+ 800: "#39385D",
88
+ 900: "#1D1C2E"
89
+ };
90
+ var cyan = {
91
+ 50: "#E5F5FC",
92
+ 100: "#D7EFF8",
93
+ 200: "#AFDEF1",
94
+ 300: "#88CEEA",
95
+ 400: "#60BDE3",
96
+ 500: "#38ADDC",
97
+ 600: "#2D8AB0",
98
+ 700: "#226884",
99
+ 800: "#164558",
100
+ 900: "#0B232C"
101
+ };
102
+ var blackAlpha = {
103
+ 50: "rgb(0 0 0 / 0.05)",
104
+ 100: "rgb(0 0 0 / 0.1)",
105
+ 200: "rgb(0 0 0 / 0.2)",
106
+ 300: "rgb(0 0 0 / 0.3)",
107
+ 400: "rgb(0 0 0 / 0.4)",
108
+ 500: "rgb(0 0 0 / 0.5)",
109
+ 600: "rgb(0 0 0 / 0.6)",
110
+ 700: "rgb(0 0 0 / 0.7)",
111
+ 800: "rgb(0 0 0 / 0.8)",
112
+ 900: "rgb(0 0 0 / 0.9)"
113
+ };
114
+ var whiteAlpha = {
115
+ 50: "rgb(255 255 255 / 0.05)",
116
+ 100: "rgb(255 255 255 / 0.1)",
117
+ 200: "rgb(255 255 255 / 0.2)",
118
+ 300: "rgb(255 255 255 / 0.3)",
119
+ 400: "rgb(255 255 255 / 0.4)",
120
+ 500: "rgb(255 255 255 / 0.5)",
121
+ 600: "rgb(255 255 255 / 0.6)",
122
+ 700: "rgb(255 255 255 / 0.7)",
123
+ 800: "rgb(255 255 255 / 0.8)",
124
+ 900: "rgb(255 255 255 / 0.9)"
125
+ };
126
+ var colors = {
127
+ primary,
128
+ neutral,
129
+ green,
130
+ yellow,
131
+ red,
132
+ orange,
133
+ purple,
134
+ cyan,
135
+ "black-alpha": blackAlpha,
136
+ "white-alpha": whiteAlpha
137
+ };
138
+
139
+ // src/tokens/typography.ts
140
+ var fontSize = {
141
+ 50: "0.5rem",
142
+ // 8px
143
+ 100: "0.625rem",
144
+ // 10px
145
+ 200: "0.75rem",
146
+ // 12px
147
+ 300: "0.875rem",
148
+ // 14px
149
+ 400: "1rem",
150
+ // 16px
151
+ 500: "1.125rem",
152
+ // 18px
153
+ 600: "1.25rem",
154
+ // 20px
155
+ 700: "1.5rem",
156
+ // 24px
157
+ 800: "1.625rem",
158
+ // 26px
159
+ 900: "2rem",
160
+ // 32px
161
+ 1e3: "2.375rem",
162
+ // 38px
163
+ 1100: "2.5rem",
164
+ // 40px
165
+ 1200: "2.6875rem",
166
+ // 43px
167
+ 1300: "3rem",
168
+ // 48px
169
+ 1400: "3.5rem",
170
+ // 56px
171
+ 1500: "4rem",
172
+ // 64px
173
+ 1600: "4.5rem"
174
+ // 72px
175
+ };
176
+ var fontWeight = {
177
+ 100: 100,
178
+ 200: 200,
179
+ 300: 300,
180
+ 400: 400,
181
+ 500: 500,
182
+ 600: 600,
183
+ 700: 700,
184
+ 800: 800,
185
+ 900: 900
186
+ };
187
+ var fontFamily = {
188
+ primary: '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
189
+ secondary: '"Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif'
190
+ };
191
+ var lineHeight = {
192
+ "100pct": "1",
193
+ "125pct": "1.25",
194
+ "135pct": "1.35",
195
+ "150pct": "1.5",
196
+ "165pct": "1.65",
197
+ "200pct": "2"
198
+ };
199
+ var headings = {
200
+ h1: {
201
+ fontFamily: fontFamily.secondary,
202
+ fontSize: {
203
+ desktop: fontSize[1600],
204
+ // 72px
205
+ mobile: fontSize[1300]
206
+ // 48px
207
+ },
208
+ fontWeight: fontWeight[700]
209
+ },
210
+ h2: {
211
+ fontFamily: fontFamily.secondary,
212
+ fontSize: {
213
+ desktop: fontSize[1500],
214
+ // 64px
215
+ mobile: fontSize[1200]
216
+ // 43px
217
+ },
218
+ fontWeight: fontWeight[700]
219
+ },
220
+ h3: {
221
+ fontFamily: fontFamily.secondary,
222
+ fontSize: {
223
+ desktop: fontSize[1400],
224
+ // 56px
225
+ mobile: fontSize[1e3]
226
+ // 38px
227
+ },
228
+ fontWeight: fontWeight[700]
229
+ },
230
+ h4: {
231
+ fontFamily: fontFamily.secondary,
232
+ fontSize: {
233
+ desktop: fontSize[1300],
234
+ // 48px
235
+ mobile: fontSize[900]
236
+ // 32px
237
+ },
238
+ fontWeight: fontWeight[700]
239
+ },
240
+ h5: {
241
+ fontFamily: fontFamily.secondary,
242
+ fontSize: {
243
+ desktop: fontSize[1100],
244
+ // 40px
245
+ mobile: fontSize[800]
246
+ // 26px
247
+ },
248
+ fontWeight: fontWeight[700]
249
+ },
250
+ h6: {
251
+ fontFamily: fontFamily.secondary,
252
+ fontSize: {
253
+ desktop: fontSize[900],
254
+ // 32px
255
+ mobile: fontSize[700]
256
+ // 24px
257
+ },
258
+ fontWeight: fontWeight[700]
259
+ }
260
+ };
261
+ var titles = {
262
+ title1: {
263
+ fontFamily: fontFamily.secondary,
264
+ fontSize: {
265
+ desktop: fontSize[700],
266
+ // 24px
267
+ mobile: fontSize[600]
268
+ // 20px
269
+ },
270
+ fontWeight: fontWeight[700]
271
+ },
272
+ title2: {
273
+ fontFamily: fontFamily.secondary,
274
+ fontSize: {
275
+ desktop: fontSize[600],
276
+ // 20px
277
+ mobile: fontSize[500]
278
+ // 18px
279
+ },
280
+ fontWeight: fontWeight[700]
281
+ },
282
+ title3: {
283
+ fontFamily: fontFamily.secondary,
284
+ fontSize: {
285
+ desktop: fontSize[500],
286
+ // 18px
287
+ mobile: fontSize[400]
288
+ // 16px
289
+ },
290
+ fontWeight: fontWeight[700]
291
+ },
292
+ title4: {
293
+ fontFamily: fontFamily.secondary,
294
+ fontSize: {
295
+ desktop: fontSize[400],
296
+ // 16px
297
+ mobile: fontSize[300]
298
+ // 14px
299
+ },
300
+ fontWeight: fontWeight[700]
301
+ }
302
+ };
303
+ var subtitles = {
304
+ subtitle1Bold: {
305
+ fontFamily: fontFamily.secondary,
306
+ fontSize: {
307
+ desktop: fontSize[400],
308
+ // 16px
309
+ mobile: fontSize[300]
310
+ // 14px
311
+ },
312
+ fontWeight: fontWeight[700]
313
+ },
314
+ subtitle1Regular: {
315
+ fontFamily: fontFamily.secondary,
316
+ fontSize: {
317
+ desktop: fontSize[400],
318
+ // 16px
319
+ mobile: fontSize[300]
320
+ // 14px
321
+ },
322
+ fontWeight: fontWeight[400]
323
+ },
324
+ subtitle2Bold: {
325
+ fontFamily: fontFamily.secondary,
326
+ fontSize: {
327
+ desktop: fontSize[300],
328
+ // 14px
329
+ mobile: fontSize[200]
330
+ // 12px
331
+ },
332
+ fontWeight: fontWeight[700]
333
+ },
334
+ subtitle2Regular: {
335
+ fontFamily: fontFamily.secondary,
336
+ fontSize: {
337
+ desktop: fontSize[300],
338
+ // 14px
339
+ mobile: fontSize[200]
340
+ // 12px
341
+ },
342
+ fontWeight: fontWeight[400]
343
+ },
344
+ subtitle3Bold: {
345
+ fontFamily: fontFamily.secondary,
346
+ fontSize: {
347
+ desktop: fontSize[200],
348
+ // 12px
349
+ mobile: fontSize[100]
350
+ // 10px
351
+ },
352
+ fontWeight: fontWeight[700]
353
+ },
354
+ subtitle3Regular: {
355
+ fontFamily: fontFamily.secondary,
356
+ fontSize: {
357
+ desktop: fontSize[200],
358
+ // 12px
359
+ mobile: fontSize[100]
360
+ // 10px
361
+ },
362
+ fontWeight: fontWeight[400]
363
+ }
364
+ };
365
+ var body = {
366
+ body1: {
367
+ fontFamily: fontFamily.secondary,
368
+ fontSize: {
369
+ desktop: fontSize[400],
370
+ // 16px
371
+ mobile: fontSize[300]
372
+ // 14px
373
+ },
374
+ fontWeight: fontWeight[400]
375
+ },
376
+ body2: {
377
+ fontFamily: fontFamily.secondary,
378
+ fontSize: {
379
+ desktop: fontSize[300],
380
+ // 14px
381
+ mobile: fontSize[200]
382
+ // 12px
383
+ },
384
+ fontWeight: fontWeight[400]
385
+ },
386
+ body3: {
387
+ fontFamily: fontFamily.secondary,
388
+ fontSize: {
389
+ desktop: fontSize[200],
390
+ // 12px
391
+ mobile: fontSize[100]
392
+ // 10px
393
+ },
394
+ fontWeight: fontWeight[400]
395
+ },
396
+ body4: {
397
+ fontFamily: fontFamily.secondary,
398
+ fontSize: {
399
+ desktop: fontSize[100],
400
+ // 10px
401
+ mobile: fontSize[50]
402
+ // 8px
403
+ },
404
+ fontWeight: fontWeight[400]
405
+ }
406
+ };
407
+ var typography = {
408
+ fontSize,
409
+ fontWeight,
410
+ fontFamily,
411
+ lineHeight,
412
+ headings,
413
+ titles,
414
+ subtitles,
415
+ body
416
+ };
417
+
418
+ // src/tokens/spacing.ts
419
+ var spacing = {
420
+ 0: "0",
421
+ px: "1px",
422
+ 0.5: "0.125rem",
423
+ // 2px
424
+ 1: "0.25rem",
425
+ // 4px
426
+ 1.5: "0.375rem",
427
+ // 6px
428
+ 2: "0.5rem",
429
+ // 8px
430
+ 2.5: "0.625rem",
431
+ // 10px
432
+ 3: "0.75rem",
433
+ // 12px
434
+ 3.5: "0.875rem",
435
+ // 14px
436
+ 4: "1rem",
437
+ // 16px
438
+ 5: "1.25rem",
439
+ // 20px
440
+ 6: "1.5rem",
441
+ // 24px
442
+ 7: "1.75rem",
443
+ // 28px
444
+ 8: "2rem",
445
+ // 32px
446
+ 9: "2.25rem",
447
+ // 36px
448
+ 10: "2.5rem",
449
+ // 40px
450
+ 11: "2.75rem",
451
+ // 44px
452
+ 12: "3rem",
453
+ // 48px
454
+ 14: "3.5rem",
455
+ // 56px
456
+ 16: "4rem",
457
+ // 64px
458
+ 20: "5rem",
459
+ // 80px
460
+ 24: "6rem",
461
+ // 96px
462
+ 28: "7rem",
463
+ // 112px
464
+ 32: "8rem",
465
+ // 128px
466
+ 36: "9rem",
467
+ // 144px
468
+ 40: "10rem",
469
+ // 160px
470
+ 44: "11rem",
471
+ // 176px
472
+ 48: "12rem",
473
+ // 192px
474
+ 52: "13rem",
475
+ // 208px
476
+ 56: "14rem",
477
+ // 224px
478
+ 60: "15rem",
479
+ // 240px
480
+ 64: "16rem",
481
+ // 256px
482
+ 72: "18rem",
483
+ // 288px
484
+ 80: "20rem",
485
+ // 320px
486
+ 96: "24rem"
487
+ // 384px
488
+ };
489
+
490
+ // src/tokens/shadows.ts
491
+ var shadows = {
492
+ xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
493
+ sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
494
+ base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
495
+ md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
496
+ lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
497
+ xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
498
+ "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
499
+ inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
500
+ none: "0 0 #0000"
501
+ };
502
+
503
+ // src/tokens/radius.ts
504
+ var borderRadius = {
505
+ none: "0",
506
+ sm: "0.125rem",
507
+ // 2px
508
+ base: "0.25rem",
509
+ // 4px
510
+ md: "0.375rem",
511
+ // 6px
512
+ lg: "0.5rem",
513
+ // 8px
514
+ xl: "0.75rem",
515
+ // 12px
516
+ "2xl": "1rem",
517
+ // 16px
518
+ "3xl": "1.5rem",
519
+ // 24px
520
+ full: "9999px"
521
+ };
522
+
523
+ // src/theme.ts
524
+ var defaultTheme = {
525
+ colors,
526
+ typography,
527
+ spacing,
528
+ borderRadius,
529
+ shadows
530
+ };
531
+ function createTheme(overrides = {}) {
532
+ return {
533
+ ...defaultTheme,
534
+ ...overrides,
535
+ colors: {
536
+ ...defaultTheme.colors,
537
+ ...overrides.colors
538
+ },
539
+ typography: {
540
+ ...defaultTheme.typography,
541
+ ...overrides.typography
542
+ },
543
+ spacing: {
544
+ ...defaultTheme.spacing,
545
+ ...overrides.spacing
546
+ },
547
+ borderRadius: {
548
+ ...defaultTheme.borderRadius,
549
+ ...overrides.borderRadius
550
+ },
551
+ shadows: {
552
+ ...defaultTheme.shadows,
553
+ ...overrides.shadows
554
+ }
555
+ };
556
+ }
557
+ function themeToCSSVariables(theme) {
558
+ const cssVars = {};
559
+ Object.entries(theme.colors).forEach(([colorName, colorScale]) => {
560
+ Object.entries(colorScale).forEach(([shade, value]) => {
561
+ cssVars[`--xosmoz-color-${colorName}-${shade}`] = value;
562
+ });
563
+ });
564
+ Object.entries(theme.typography.fontSize).forEach(([key, value]) => {
565
+ cssVars[`--xosmoz-font-size-${key}`] = value;
566
+ });
567
+ Object.entries(theme.typography.fontWeight).forEach(([key, value]) => {
568
+ cssVars[`--xosmoz-font-weight-${key}`] = String(value);
569
+ });
570
+ Object.entries(theme.typography.lineHeight).forEach(([key, value]) => {
571
+ cssVars[`--xosmoz-line-height-${key}`] = value;
572
+ });
573
+ Object.entries(theme.spacing).forEach(([key, value]) => {
574
+ cssVars[`--xosmoz-spacing-${key}`] = value;
575
+ });
576
+ Object.entries(theme.borderRadius).forEach(([key, value]) => {
577
+ cssVars[`--xosmoz-radius-${key}`] = value;
578
+ });
579
+ Object.entries(theme.shadows).forEach(([key, value]) => {
580
+ cssVars[`--xosmoz-shadow-${key}`] = value;
581
+ });
582
+ return cssVars;
583
+ }
584
+ function generateCSSVariables(theme = defaultTheme) {
585
+ const cssVars = themeToCSSVariables(theme);
586
+ const cssLines = Object.entries(cssVars).map(
587
+ ([key, value]) => ` ${key}: ${value};`
588
+ );
589
+ return `:root {
590
+ ${cssLines.join("\n")}
591
+ }`;
592
+ }
593
+
594
+ // src/themes/light.ts
595
+ var lightTheme = {
596
+ name: "light",
597
+ colors: {
598
+ // Base
599
+ background: colors.neutral[50],
600
+ foreground: colors.neutral[900],
601
+ // Muted
602
+ muted: colors.neutral[100],
603
+ mutedForeground: colors.neutral[600],
604
+ // Border and input
605
+ border: colors.neutral[200],
606
+ input: colors.neutral[200],
607
+ ring: colors.primary[500],
608
+ // Card
609
+ card: colors.neutral[50],
610
+ cardForeground: colors.neutral[900],
611
+ // Popover
612
+ popover: colors.neutral[50],
613
+ popoverForeground: colors.neutral[900],
614
+ // Primary
615
+ primary: colors.primary[500],
616
+ primaryForeground: colors.neutral[50],
617
+ // Secondary
618
+ secondary: colors.neutral[600],
619
+ secondaryForeground: colors.neutral[50],
620
+ // Accent
621
+ accent: colors.primary[600],
622
+ accentForeground: colors.neutral[50],
623
+ // Destructive
624
+ destructive: colors.red[500],
625
+ destructiveForeground: colors.neutral[50],
626
+ // Success
627
+ success: colors.green[500],
628
+ successForeground: colors.neutral[50],
629
+ // Warning
630
+ warning: colors.yellow[500],
631
+ warningForeground: colors.neutral[900],
632
+ // Info
633
+ info: colors.cyan[500],
634
+ infoForeground: colors.neutral[50]
635
+ }
636
+ };
637
+
638
+ // src/themes/dark.ts
639
+ var darkTheme = {
640
+ name: "dark",
641
+ colors: {
642
+ // Base
643
+ background: colors.neutral[900],
644
+ foreground: colors.neutral[50],
645
+ // Muted
646
+ muted: colors.neutral[900],
647
+ mutedForeground: colors.neutral[400],
648
+ // Border and input
649
+ border: colors.neutral[800],
650
+ input: colors.neutral[800],
651
+ ring: colors.primary[400],
652
+ // Card
653
+ card: colors.neutral[900],
654
+ cardForeground: colors.neutral[50],
655
+ // Popover
656
+ popover: colors.neutral[900],
657
+ popoverForeground: colors.neutral[50],
658
+ // Primary
659
+ primary: colors.primary[500],
660
+ primaryForeground: colors.neutral[50],
661
+ // Secondary
662
+ secondary: colors.neutral[400],
663
+ secondaryForeground: colors.neutral[900],
664
+ // Accent
665
+ accent: colors.primary[400],
666
+ accentForeground: colors.neutral[50],
667
+ // Destructive
668
+ destructive: colors.red[500],
669
+ destructiveForeground: colors.neutral[50],
670
+ // Success
671
+ success: colors.green[500],
672
+ successForeground: colors.neutral[50],
673
+ // Warning
674
+ warning: colors.yellow[500],
675
+ warningForeground: colors.neutral[900],
676
+ // Info
677
+ info: colors.cyan[500],
678
+ infoForeground: colors.neutral[50]
679
+ }
680
+ };
681
+
682
+ // src/themes/cyberpunk.ts
683
+ var cyberpunkTheme = {
684
+ name: "cyberpunk",
685
+ colors: {
686
+ // Base - Deep dark with slight purple tint
687
+ background: "#0a0118",
688
+ foreground: "#e0e7ff",
689
+ // Muted - Dark purple
690
+ muted: "#1e1432",
691
+ mutedForeground: "#a78bfa",
692
+ // Border and input - Neon purple
693
+ border: "#6d28d9",
694
+ input: "#4c1d95",
695
+ ring: "#a855f7",
696
+ // Card - Slightly lighter dark
697
+ card: "#150828",
698
+ cardForeground: "#e0e7ff",
699
+ // Popover
700
+ popover: "#1e1432",
701
+ popoverForeground: "#e0e7ff",
702
+ // Primary - Neon pink/magenta
703
+ primary: "#f0abfc",
704
+ primaryForeground: "#0a0118",
705
+ // Secondary - Neon cyan
706
+ secondary: "#22d3ee",
707
+ secondaryForeground: "#0a0118",
708
+ // Accent - Neon yellow
709
+ accent: "#fde047",
710
+ accentForeground: "#0a0118",
711
+ // Destructive - Hot pink
712
+ destructive: "#ec4899",
713
+ destructiveForeground: "#0a0118",
714
+ // Success - Neon green
715
+ success: "#10b981",
716
+ successForeground: "#0a0118",
717
+ // Warning - Electric orange
718
+ warning: "#fb923c",
719
+ warningForeground: "#0a0118",
720
+ // Info - Neon blue
721
+ info: "#3b82f6",
722
+ infoForeground: "#0a0118"
723
+ }
724
+ };
725
+
726
+ // src/themes/forest.ts
727
+ var forestTheme = {
728
+ name: "forest",
729
+ colors: {
730
+ // Base - Soft cream/beige
731
+ background: "#faf8f3",
732
+ foreground: "#1c3d29",
733
+ // Muted - Light sage
734
+ muted: "#e8f0e6",
735
+ mutedForeground: "#4a6f58",
736
+ // Border and input - Moss green
737
+ border: "#c4d9c4",
738
+ input: "#d4e4d4",
739
+ ring: "#2d7d46",
740
+ // Card - White with slight green tint
741
+ card: "#f5faf5",
742
+ cardForeground: "#1c3d29",
743
+ // Popover
744
+ popover: "#ffffff",
745
+ popoverForeground: "#1c3d29",
746
+ // Primary - Forest green
747
+ primary: "#2d7d46",
748
+ primaryForeground: "#ffffff",
749
+ // Secondary - Olive
750
+ secondary: "#6b8e4e",
751
+ secondaryForeground: "#ffffff",
752
+ // Accent - Amber
753
+ accent: "#d97706",
754
+ accentForeground: "#ffffff",
755
+ // Destructive - Rust red
756
+ destructive: "#b91c1c",
757
+ destructiveForeground: "#ffffff",
758
+ // Success - Vibrant green
759
+ success: "#059669",
760
+ successForeground: "#ffffff",
761
+ // Warning - Golden yellow
762
+ warning: "#ca8a04",
763
+ warningForeground: "#1c3d29",
764
+ // Info - Sky blue
765
+ info: "#0284c7",
766
+ infoForeground: "#ffffff"
767
+ }
768
+ };
769
+
770
+ // src/themes/ocean.ts
771
+ var oceanTheme = {
772
+ name: "ocean",
773
+ colors: {
774
+ // Base - Deep navy blue
775
+ background: "#0c1e2e",
776
+ foreground: "#e0f2fe",
777
+ // Muted - Dark ocean blue
778
+ muted: "#1e3a4f",
779
+ mutedForeground: "#94c5d9",
780
+ // Border and input - Teal
781
+ border: "#155e75",
782
+ input: "#164e63",
783
+ ring: "#06b6d4",
784
+ // Card - Slightly lighter navy
785
+ card: "#14293d",
786
+ cardForeground: "#e0f2fe",
787
+ // Popover
788
+ popover: "#1e3a4f",
789
+ popoverForeground: "#e0f2fe",
790
+ // Primary - Bright cyan
791
+ primary: "#06b6d4",
792
+ primaryForeground: "#0c1e2e",
793
+ // Secondary - Aqua
794
+ secondary: "#14b8a6",
795
+ secondaryForeground: "#0c1e2e",
796
+ // Accent - Coral
797
+ accent: "#fb7185",
798
+ accentForeground: "#ffffff",
799
+ // Destructive - Bright red
800
+ destructive: "#ef4444",
801
+ destructiveForeground: "#ffffff",
802
+ // Success - Sea green
803
+ success: "#10b981",
804
+ successForeground: "#ffffff",
805
+ // Warning - Sandy yellow
806
+ warning: "#eab308",
807
+ warningForeground: "#0c1e2e",
808
+ // Info - Sky blue
809
+ info: "#38bdf8",
810
+ infoForeground: "#0c1e2e"
811
+ }
812
+ };
813
+
814
+ // src/themes/index.ts
815
+ var themes = {
816
+ light: lightTheme,
817
+ dark: darkTheme,
818
+ cyberpunk: cyberpunkTheme,
819
+ forest: forestTheme,
820
+ ocean: oceanTheme
821
+ };
822
+ function getTheme(name) {
823
+ return themes[name];
824
+ }
825
+ function getThemeNames() {
826
+ return Object.keys(themes);
827
+ }
828
+ function createCustomTheme(name, colors2, baseTheme = "light") {
829
+ const base = themes[baseTheme];
830
+ return {
831
+ name,
832
+ colors: {
833
+ ...base.colors,
834
+ ...colors2
835
+ }
836
+ };
837
+ }
838
+
839
+ exports.blackAlpha = blackAlpha;
840
+ exports.body = body;
841
+ exports.borderRadius = borderRadius;
842
+ exports.colors = colors;
843
+ exports.createCustomTheme = createCustomTheme;
844
+ exports.createTheme = createTheme;
845
+ exports.cyan = cyan;
846
+ exports.cyberpunkTheme = cyberpunkTheme;
847
+ exports.darkTheme = darkTheme;
848
+ exports.defaultTheme = defaultTheme;
849
+ exports.fontFamily = fontFamily;
850
+ exports.fontSize = fontSize;
851
+ exports.fontWeight = fontWeight;
852
+ exports.forestTheme = forestTheme;
853
+ exports.generateCSSVariables = generateCSSVariables;
854
+ exports.getTheme = getTheme;
855
+ exports.getThemeNames = getThemeNames;
856
+ exports.green = green;
857
+ exports.headings = headings;
858
+ exports.lightTheme = lightTheme;
859
+ exports.lineHeight = lineHeight;
860
+ exports.neutral = neutral;
861
+ exports.oceanTheme = oceanTheme;
862
+ exports.orange = orange;
863
+ exports.primary = primary;
864
+ exports.purple = purple;
865
+ exports.red = red;
866
+ exports.shadows = shadows;
867
+ exports.spacing = spacing;
868
+ exports.subtitles = subtitles;
869
+ exports.themeToCSSVariables = themeToCSSVariables;
870
+ exports.themes = themes;
871
+ exports.titles = titles;
872
+ exports.typography = typography;
873
+ exports.whiteAlpha = whiteAlpha;
874
+ exports.yellow = yellow;
875
+ //# sourceMappingURL=index.js.map
876
+ //# sourceMappingURL=index.js.map