@fastwork/xosmoz-theme 0.0.14 → 0.0.15

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 CHANGED
@@ -1,177 +1,27 @@
1
1
  'use strict';
2
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
- };
3
+ var __defProp = Object.defineProperty;
4
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
138
5
 
139
6
  // src/tokens/typography.ts
140
7
  var fontSize = {
141
8
  50: "0.5rem",
142
- // 8px
143
9
  100: "0.625rem",
144
- // 10px
145
10
  200: "0.75rem",
146
- // 12px
147
11
  300: "0.875rem",
148
- // 14px
149
12
  400: "1rem",
150
- // 16px
151
13
  500: "1.125rem",
152
- // 18px
153
14
  600: "1.25rem",
154
- // 20px
155
15
  700: "1.5rem",
156
- // 24px
157
16
  800: "1.625rem",
158
- // 26px
159
17
  900: "2rem",
160
- // 32px
161
18
  1e3: "2.375rem",
162
- // 38px
163
19
  1100: "2.5rem",
164
- // 40px
165
20
  1200: "2.6875rem",
166
- // 43px
167
21
  1300: "3rem",
168
- // 48px
169
22
  1400: "3.5rem",
170
- // 56px
171
23
  1500: "4rem",
172
- // 64px
173
24
  1600: "4.5rem"
174
- // 72px
175
25
  };
176
26
  var fontWeight = {
177
27
  100: 100,
@@ -201,9 +51,7 @@ var headings = {
201
51
  fontFamily: fontFamily.secondary,
202
52
  fontSize: {
203
53
  desktop: fontSize[1600],
204
- // 72px
205
54
  mobile: fontSize[1300]
206
- // 48px
207
55
  },
208
56
  fontWeight: fontWeight[700]
209
57
  },
@@ -211,9 +59,7 @@ var headings = {
211
59
  fontFamily: fontFamily.secondary,
212
60
  fontSize: {
213
61
  desktop: fontSize[1500],
214
- // 64px
215
62
  mobile: fontSize[1200]
216
- // 43px
217
63
  },
218
64
  fontWeight: fontWeight[700]
219
65
  },
@@ -221,9 +67,7 @@ var headings = {
221
67
  fontFamily: fontFamily.secondary,
222
68
  fontSize: {
223
69
  desktop: fontSize[1400],
224
- // 56px
225
70
  mobile: fontSize[1e3]
226
- // 38px
227
71
  },
228
72
  fontWeight: fontWeight[700]
229
73
  },
@@ -231,9 +75,7 @@ var headings = {
231
75
  fontFamily: fontFamily.secondary,
232
76
  fontSize: {
233
77
  desktop: fontSize[1300],
234
- // 48px
235
78
  mobile: fontSize[900]
236
- // 32px
237
79
  },
238
80
  fontWeight: fontWeight[700]
239
81
  },
@@ -241,9 +83,7 @@ var headings = {
241
83
  fontFamily: fontFamily.secondary,
242
84
  fontSize: {
243
85
  desktop: fontSize[1100],
244
- // 40px
245
86
  mobile: fontSize[800]
246
- // 26px
247
87
  },
248
88
  fontWeight: fontWeight[700]
249
89
  },
@@ -251,9 +91,7 @@ var headings = {
251
91
  fontFamily: fontFamily.secondary,
252
92
  fontSize: {
253
93
  desktop: fontSize[900],
254
- // 32px
255
94
  mobile: fontSize[700]
256
- // 24px
257
95
  },
258
96
  fontWeight: fontWeight[700]
259
97
  }
@@ -263,9 +101,7 @@ var titles = {
263
101
  fontFamily: fontFamily.secondary,
264
102
  fontSize: {
265
103
  desktop: fontSize[700],
266
- // 24px
267
104
  mobile: fontSize[600]
268
- // 20px
269
105
  },
270
106
  fontWeight: fontWeight[700]
271
107
  },
@@ -273,9 +109,7 @@ var titles = {
273
109
  fontFamily: fontFamily.secondary,
274
110
  fontSize: {
275
111
  desktop: fontSize[600],
276
- // 20px
277
112
  mobile: fontSize[500]
278
- // 18px
279
113
  },
280
114
  fontWeight: fontWeight[700]
281
115
  },
@@ -283,9 +117,7 @@ var titles = {
283
117
  fontFamily: fontFamily.secondary,
284
118
  fontSize: {
285
119
  desktop: fontSize[500],
286
- // 18px
287
120
  mobile: fontSize[400]
288
- // 16px
289
121
  },
290
122
  fontWeight: fontWeight[700]
291
123
  },
@@ -293,9 +125,7 @@ var titles = {
293
125
  fontFamily: fontFamily.secondary,
294
126
  fontSize: {
295
127
  desktop: fontSize[400],
296
- // 16px
297
128
  mobile: fontSize[300]
298
- // 14px
299
129
  },
300
130
  fontWeight: fontWeight[700]
301
131
  }
@@ -305,9 +135,7 @@ var subtitles = {
305
135
  fontFamily: fontFamily.secondary,
306
136
  fontSize: {
307
137
  desktop: fontSize[400],
308
- // 16px
309
138
  mobile: fontSize[300]
310
- // 14px
311
139
  },
312
140
  fontWeight: fontWeight[700]
313
141
  },
@@ -315,9 +143,7 @@ var subtitles = {
315
143
  fontFamily: fontFamily.secondary,
316
144
  fontSize: {
317
145
  desktop: fontSize[400],
318
- // 16px
319
146
  mobile: fontSize[300]
320
- // 14px
321
147
  },
322
148
  fontWeight: fontWeight[400]
323
149
  },
@@ -325,9 +151,7 @@ var subtitles = {
325
151
  fontFamily: fontFamily.secondary,
326
152
  fontSize: {
327
153
  desktop: fontSize[300],
328
- // 14px
329
154
  mobile: fontSize[200]
330
- // 12px
331
155
  },
332
156
  fontWeight: fontWeight[700]
333
157
  },
@@ -335,9 +159,7 @@ var subtitles = {
335
159
  fontFamily: fontFamily.secondary,
336
160
  fontSize: {
337
161
  desktop: fontSize[300],
338
- // 14px
339
162
  mobile: fontSize[200]
340
- // 12px
341
163
  },
342
164
  fontWeight: fontWeight[400]
343
165
  },
@@ -345,9 +167,7 @@ var subtitles = {
345
167
  fontFamily: fontFamily.secondary,
346
168
  fontSize: {
347
169
  desktop: fontSize[200],
348
- // 12px
349
170
  mobile: fontSize[100]
350
- // 10px
351
171
  },
352
172
  fontWeight: fontWeight[700]
353
173
  },
@@ -355,9 +175,7 @@ var subtitles = {
355
175
  fontFamily: fontFamily.secondary,
356
176
  fontSize: {
357
177
  desktop: fontSize[200],
358
- // 12px
359
178
  mobile: fontSize[100]
360
- // 10px
361
179
  },
362
180
  fontWeight: fontWeight[400]
363
181
  }
@@ -367,9 +185,7 @@ var body = {
367
185
  fontFamily: fontFamily.secondary,
368
186
  fontSize: {
369
187
  desktop: fontSize[400],
370
- // 16px
371
188
  mobile: fontSize[300]
372
- // 14px
373
189
  },
374
190
  fontWeight: fontWeight[400]
375
191
  },
@@ -377,9 +193,7 @@ var body = {
377
193
  fontFamily: fontFamily.secondary,
378
194
  fontSize: {
379
195
  desktop: fontSize[300],
380
- // 14px
381
196
  mobile: fontSize[200]
382
- // 12px
383
197
  },
384
198
  fontWeight: fontWeight[400]
385
199
  },
@@ -387,9 +201,7 @@ var body = {
387
201
  fontFamily: fontFamily.secondary,
388
202
  fontSize: {
389
203
  desktop: fontSize[200],
390
- // 12px
391
204
  mobile: fontSize[100]
392
- // 10px
393
205
  },
394
206
  fontWeight: fontWeight[400]
395
207
  },
@@ -397,9 +209,7 @@ var body = {
397
209
  fontFamily: fontFamily.secondary,
398
210
  fontSize: {
399
211
  desktop: fontSize[100],
400
- // 10px
401
212
  mobile: fontSize[50]
402
- // 8px
403
213
  },
404
214
  fontWeight: fontWeight[400]
405
215
  }
@@ -420,71 +230,38 @@ var spacing = {
420
230
  0: "0",
421
231
  px: "1px",
422
232
  0.5: "0.125rem",
423
- // 2px
424
233
  1: "0.25rem",
425
- // 4px
426
234
  1.5: "0.375rem",
427
- // 6px
428
235
  2: "0.5rem",
429
- // 8px
430
236
  2.5: "0.625rem",
431
- // 10px
432
237
  3: "0.75rem",
433
- // 12px
434
238
  3.5: "0.875rem",
435
- // 14px
436
239
  4: "1rem",
437
- // 16px
438
240
  5: "1.25rem",
439
- // 20px
440
241
  6: "1.5rem",
441
- // 24px
442
242
  7: "1.75rem",
443
- // 28px
444
243
  8: "2rem",
445
- // 32px
446
244
  9: "2.25rem",
447
- // 36px
448
245
  10: "2.5rem",
449
- // 40px
450
246
  11: "2.75rem",
451
- // 44px
452
247
  12: "3rem",
453
- // 48px
454
248
  14: "3.5rem",
455
- // 56px
456
249
  16: "4rem",
457
- // 64px
458
250
  20: "5rem",
459
- // 80px
460
251
  24: "6rem",
461
- // 96px
462
252
  28: "7rem",
463
- // 112px
464
253
  32: "8rem",
465
- // 128px
466
254
  36: "9rem",
467
- // 144px
468
255
  40: "10rem",
469
- // 160px
470
256
  44: "11rem",
471
- // 176px
472
257
  48: "12rem",
473
- // 192px
474
258
  52: "13rem",
475
- // 208px
476
259
  56: "14rem",
477
- // 224px
478
260
  60: "15rem",
479
- // 240px
480
261
  64: "16rem",
481
- // 256px
482
262
  72: "18rem",
483
- // 288px
484
263
  80: "20rem",
485
- // 320px
486
264
  96: "24rem"
487
- // 384px
488
265
  };
489
266
 
490
267
  // src/tokens/shadows.ts
@@ -504,373 +281,587 @@ var shadows = {
504
281
  var borderRadius = {
505
282
  none: "0",
506
283
  sm: "0.125rem",
507
- // 2px
508
284
  base: "0.25rem",
509
- // 4px
510
285
  md: "0.375rem",
511
- // 6px
512
286
  lg: "0.5rem",
513
- // 8px
514
287
  xl: "0.75rem",
515
- // 12px
516
288
  "2xl": "1rem",
517
- // 16px
518
289
  "3xl": "1.5rem",
519
- // 24px
520
290
  full: "9999px"
521
291
  };
522
292
 
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
293
  // src/themes/light.ts
294
+ var blackAlpha = {
295
+ 100: "oklch(0 0 0 / 0.1)",
296
+ 200: "oklch(0 0 0 / 0.2)",
297
+ 300: "oklch(0 0 0 / 0.3)",
298
+ 400: "oklch(0 0 0 / 0.4)",
299
+ 500: "oklch(0 0 0 / 0.5)",
300
+ 600: "oklch(0 0 0 / 0.6)",
301
+ 700: "oklch(0 0 0 / 0.7)",
302
+ 800: "oklch(0 0 0 / 0.8)",
303
+ 900: "oklch(0 0 0 / 0.9)",
304
+ 1e3: "oklch(0 0 0 / 1)"
305
+ };
306
+ var whiteAlpha = {
307
+ 100: "oklch(1 0 0 / 0.1)",
308
+ 200: "oklch(1 0 0 / 0.2)",
309
+ 300: "oklch(1 0 0 / 0.3)",
310
+ 400: "oklch(1 0 0 / 0.4)",
311
+ 500: "oklch(1 0 0 / 0.5)",
312
+ 600: "oklch(1 0 0 / 0.6)",
313
+ 700: "oklch(1 0 0 / 0.7)",
314
+ 800: "oklch(1 0 0 / 0.8)",
315
+ 900: "oklch(1 0 0 / 0.9)",
316
+ 1e3: "oklch(1 0 0 / 1)"
317
+ };
318
+ var fastwork = {
319
+ 100: "oklch(0.96 .0223 260)",
320
+ 200: "oklch(0.94 .0299 260)",
321
+ 300: "oklch(0.92 .0369 260)",
322
+ 400: "oklch(0.90 .0471 260)",
323
+ 500: "oklch(0.84 .1018 260)",
324
+ 600: "oklch(0.72 .1881 260)",
325
+ 700: "oklch(0.58 .2524 260)",
326
+ 800: "oklch(0.54 .2482 260)",
327
+ 900: "oklch(0.54 .2320 260)",
328
+ 1e3: "oklch(0.28 .1041 260)"
329
+ };
330
+ var gray = {
331
+ 100: "oklch(0.96 0.005 260)",
332
+ 200: "oklch(0.94 0.005 260)",
333
+ 300: "oklch(0.92 0.005 260)",
334
+ 400: "oklch(0.90 0.005 260)",
335
+ 500: "oklch(0.84 0.005 260)",
336
+ 600: "oklch(0.72 0.005 260)",
337
+ 700: "oklch(0.62 0.005 260)",
338
+ 800: "oklch(0.58 0.005 260)",
339
+ 900: "oklch(0.54 0.005 260)",
340
+ 1e3: "oklch(0.28 0.005 260)"
341
+ };
342
+ var green = {
343
+ 100: "oklch(0.96 .0223 143)",
344
+ 200: "oklch(0.94 .0299 143)",
345
+ 300: "oklch(0.92 .0369 143)",
346
+ 400: "oklch(0.90 .0471 143)",
347
+ 500: "oklch(0.84 .1018 143)",
348
+ 600: "oklch(0.72 .1881 143)",
349
+ 700: "oklch(0.62 .2524 143)",
350
+ 800: "oklch(0.58 .2482 143)",
351
+ 900: "oklch(0.54 .2320 143)",
352
+ 1e3: "oklch(0.28 .1041 143)"
353
+ };
354
+ var mint = {
355
+ 100: "oklch(0.96 .0223 163)",
356
+ 200: "oklch(0.94 .0299 163)",
357
+ 300: "oklch(0.92 .0369 163)",
358
+ 400: "oklch(0.90 .0471 163)",
359
+ 500: "oklch(0.84 .1018 163)",
360
+ 600: "oklch(0.72 .1881 163)",
361
+ 700: "oklch(0.62 .2524 163)",
362
+ 800: "oklch(0.58 .2482 163)",
363
+ 900: "oklch(0.54 .2320 163)",
364
+ 1e3: "oklch(0.28 .1041 163)"
365
+ };
366
+ var amber = {
367
+ 100: "oklch(0.96 .0223 79)",
368
+ 200: "oklch(0.94 .0299 79)",
369
+ 300: "oklch(0.92 .0369 79)",
370
+ 400: "oklch(0.90 .0471 79)",
371
+ 500: "oklch(0.84 .1018 79)",
372
+ 600: "oklch(0.72 .1881 79)",
373
+ 700: "oklch(0.62 .2524 79)",
374
+ 800: "oklch(0.58 .2482 79)",
375
+ 900: "oklch(0.54 .2320 79)",
376
+ 1e3: "oklch(0.28 .1041 79)"
377
+ };
378
+ var red = {
379
+ 100: "oklch(0.96 .0223 30)",
380
+ 200: "oklch(0.94 .0299 30)",
381
+ 300: "oklch(0.92 .0369 30)",
382
+ 400: "oklch(0.90 .0471 30)",
383
+ 500: "oklch(0.84 .1018 30)",
384
+ 600: "oklch(0.72 .1881 30)",
385
+ 700: "oklch(0.62 .2524 30)",
386
+ 800: "oklch(0.58 .2482 30)",
387
+ 900: "oklch(0.54 .2320 30)",
388
+ 1e3: "oklch(0.28 .1041 30)"
389
+ };
390
+ var orange = {
391
+ 100: "oklch(0.96 .0223 48)",
392
+ 200: "oklch(0.94 .0299 48)",
393
+ 300: "oklch(0.92 .0369 48)",
394
+ 400: "oklch(0.90 .0471 48)",
395
+ 500: "oklch(0.84 .1018 48)",
396
+ 600: "oklch(0.72 .1881 48)",
397
+ 700: "oklch(0.62 .2524 48)",
398
+ 800: "oklch(0.58 .2482 48)",
399
+ 900: "oklch(0.54 .2320 48)",
400
+ 1e3: "oklch(0.28 .1041 48)"
401
+ };
402
+ var purple = {
403
+ 100: "oklch(0.96 .0223 293)",
404
+ 200: "oklch(0.94 .0299 293)",
405
+ 300: "oklch(0.92 .0369 293)",
406
+ 400: "oklch(0.90 .0471 293)",
407
+ 500: "oklch(0.84 .1018 293)",
408
+ 600: "oklch(0.72 .1881 293)",
409
+ 700: "oklch(0.62 .2524 293)",
410
+ 800: "oklch(0.58 .2482 293)",
411
+ 900: "oklch(0.54 .2320 293)",
412
+ 1e3: "oklch(0.28 .1041 293)"
413
+ };
414
+ var cyan = {
415
+ 100: "oklch(0.96 .0223 213)",
416
+ 200: "oklch(0.94 .0299 213)",
417
+ 300: "oklch(0.92 .0369 213)",
418
+ 400: "oklch(0.90 .0471 213)",
419
+ 500: "oklch(0.84 .1018 213)",
420
+ 600: "oklch(0.72 .1881 213)",
421
+ 700: "oklch(0.62 .2524 213)",
422
+ 800: "oklch(0.58 .2482 213)",
423
+ 900: "oklch(0.54 .2320 213)",
424
+ 1e3: "oklch(0.28 .1041 213)"
425
+ };
595
426
  var lightTheme = {
596
427
  name: "light",
597
428
  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]
429
+ bg: {
430
+ 100: "oklch(1.00 0.00 260)",
431
+ 200: "oklch(0.98 0.005 260)",
432
+ 300: "oklch(0.95 0.01 260)",
433
+ 400: "oklch(0.92 0.01 260)"
434
+ },
435
+ content: {
436
+ 100: "oklch(21% 0.006 285.885)",
437
+ 200: "color-mix(in oklab, var(--xz-color-content-100) 60%, transparent)"
438
+ },
439
+ line: {
440
+ 100: blackAlpha[100],
441
+ 200: blackAlpha[200],
442
+ 300: blackAlpha[300]
443
+ },
444
+ primary: {
445
+ soft: {
446
+ 100: fastwork[100],
447
+ 200: fastwork[200],
448
+ 300: fastwork[300]
449
+ },
450
+ line: {
451
+ 100: fastwork[400],
452
+ 200: fastwork[500],
453
+ 300: fastwork[600]
454
+ },
455
+ bg: {
456
+ 100: fastwork[700],
457
+ 200: fastwork[800]
458
+ },
459
+ content: {
460
+ 100: fastwork[900],
461
+ 200: fastwork[1e3]
462
+ },
463
+ fg: "oklch(1 0 0)"
464
+ },
465
+ danger: {
466
+ soft: {
467
+ 100: red[100],
468
+ 200: red[200],
469
+ 300: red[300]
470
+ },
471
+ line: {
472
+ 100: red[400],
473
+ 200: red[500],
474
+ 300: red[600]
475
+ },
476
+ bg: {
477
+ 100: red[700],
478
+ 200: red[800]
479
+ },
480
+ content: {
481
+ 100: red[900],
482
+ 200: red[1e3]
483
+ },
484
+ fg: "oklch(1 0 0)"
485
+ },
486
+ success: {
487
+ soft: {
488
+ 100: green[100],
489
+ 200: green[200],
490
+ 300: green[300]
491
+ },
492
+ line: {
493
+ 100: green[400],
494
+ 200: green[500],
495
+ 300: green[600]
496
+ },
497
+ bg: {
498
+ 100: green[700],
499
+ 200: green[800]
500
+ },
501
+ content: {
502
+ 100: green[900],
503
+ 200: green[1e3]
504
+ },
505
+ fg: "oklch(1 0 0)"
506
+ },
507
+ warning: {
508
+ soft: {
509
+ 100: amber[100],
510
+ 200: amber[200],
511
+ 300: amber[300]
512
+ },
513
+ line: {
514
+ 100: amber[400],
515
+ 200: amber[500],
516
+ 300: amber[600]
517
+ },
518
+ bg: {
519
+ 100: amber[700],
520
+ 200: amber[800]
521
+ },
522
+ content: {
523
+ 100: amber[900],
524
+ 200: amber[1e3]
525
+ },
526
+ fg: "oklch(1 0 0)"
527
+ },
528
+ info: {
529
+ soft: {
530
+ 100: cyan[100],
531
+ 200: cyan[200],
532
+ 300: cyan[300]
533
+ },
534
+ line: {
535
+ 100: cyan[400],
536
+ 200: cyan[500],
537
+ 300: cyan[600]
538
+ },
539
+ bg: {
540
+ 100: cyan[700],
541
+ 200: cyan[800]
542
+ },
543
+ content: {
544
+ 100: cyan[900],
545
+ 200: cyan[1e3]
546
+ },
547
+ fg: "oklch(1 0 0)"
548
+ },
549
+ // Color tokens
550
+ fastwork,
551
+ gray,
552
+ green,
553
+ mint,
554
+ amber,
555
+ red,
556
+ orange,
557
+ purple,
558
+ cyan,
559
+ blackAlpha,
560
+ whiteAlpha
635
561
  }
636
562
  };
637
563
 
638
564
  // 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
- }
565
+ var blackAlpha2 = {
566
+ 100: "oklch(0 0 0 / 0.1)",
567
+ 200: "oklch(0 0 0 / 0.2)",
568
+ 300: "oklch(0 0 0 / 0.3)",
569
+ 400: "oklch(0 0 0 / 0.4)",
570
+ 500: "oklch(0 0 0 / 0.5)",
571
+ 600: "oklch(0 0 0 / 0.6)",
572
+ 700: "oklch(0 0 0 / 0.7)",
573
+ 800: "oklch(0 0 0 / 0.8)",
574
+ 900: "oklch(0 0 0 / 0.9)",
575
+ 1e3: "oklch(0 0 0 / 1)"
680
576
  };
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
- }
577
+ var whiteAlpha2 = {
578
+ 100: "oklch(1 0 0 / 0.1)",
579
+ 200: "oklch(1 0 0 / 0.2)",
580
+ 300: "oklch(1 0 0 / 0.3)",
581
+ 400: "oklch(1 0 0 / 0.4)",
582
+ 500: "oklch(1 0 0 / 0.5)",
583
+ 600: "oklch(1 0 0 / 0.6)",
584
+ 700: "oklch(1 0 0 / 0.7)",
585
+ 800: "oklch(1 0 0 / 0.8)",
586
+ 900: "oklch(1 0 0 / 0.9)",
587
+ 1e3: "oklch(1 0 0 / 1)"
724
588
  };
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
- }
589
+ var fastwork2 = {
590
+ 100: "oklch(0.22 .069 260)",
591
+ 200: "oklch(0.25 .081 260)",
592
+ 300: "oklch(0.30 .102 260)",
593
+ 400: "oklch(0.34 .121 260)",
594
+ 500: "oklch(0.38 .140 260)",
595
+ 600: "oklch(0.64 .198 260)",
596
+ 700: "oklch(0.57 .232 260)",
597
+ 800: "oklch(0.51 .230 260)",
598
+ 900: "oklch(0.77 .164 260)",
599
+ 1e3: "oklch(0.96 .017 260)"
768
600
  };
769
-
770
- // src/themes/ocean.ts
771
- var oceanTheme = {
772
- name: "ocean",
601
+ var gray2 = {
602
+ 100: "oklch(0.22 0.005 260)",
603
+ 200: "oklch(0.25 0.005 260)",
604
+ 300: "oklch(0.30 0.005 260)",
605
+ 400: "oklch(0.34 0.005 260)",
606
+ 500: "oklch(0.38 0.005 260)",
607
+ 600: "oklch(0.64 0.005 260)",
608
+ 700: "oklch(0.57 0.005 260)",
609
+ 800: "oklch(0.51 0.005 260)",
610
+ 900: "oklch(0.77 0.005 260)",
611
+ 1e3: "oklch(0.96 0.005 260)"
612
+ };
613
+ var green2 = {
614
+ 100: "oklch(0.22 .069 143)",
615
+ 200: "oklch(0.25 .081 143)",
616
+ 300: "oklch(0.30 .102 143)",
617
+ 400: "oklch(0.34 .121 143)",
618
+ 500: "oklch(0.38 .140 143)",
619
+ 600: "oklch(0.64 .198 143)",
620
+ 700: "oklch(0.57 .232 143)",
621
+ 800: "oklch(0.51 .230 143)",
622
+ 900: "oklch(0.77 .164 143)",
623
+ 1e3: "oklch(0.96 .017 143)"
624
+ };
625
+ var mint2 = {
626
+ 100: "oklch(0.22 .069 163)",
627
+ 200: "oklch(0.25 .081 163)",
628
+ 300: "oklch(0.30 .102 163)",
629
+ 400: "oklch(0.34 .121 163)",
630
+ 500: "oklch(0.38 .140 163)",
631
+ 600: "oklch(0.64 .198 163)",
632
+ 700: "oklch(0.57 .232 163)",
633
+ 800: "oklch(0.51 .230 163)",
634
+ 900: "oklch(0.77 .164 163)",
635
+ 1e3: "oklch(0.96 .017 163)"
636
+ };
637
+ var amber2 = {
638
+ 100: "oklch(0.22 .069 79)",
639
+ 200: "oklch(0.25 .081 79)",
640
+ 300: "oklch(0.30 .102 79)",
641
+ 400: "oklch(0.34 .121 79)",
642
+ 500: "oklch(0.38 .140 79)",
643
+ 600: "oklch(0.64 .198 79)",
644
+ 700: "oklch(0.57 .232 79)",
645
+ 800: "oklch(0.51 .230 79)",
646
+ 900: "oklch(0.77 .164 79)",
647
+ 1e3: "oklch(0.96 .017 79)"
648
+ };
649
+ var red2 = {
650
+ 100: "oklch(0.22 .069 30)",
651
+ 200: "oklch(0.25 .081 30)",
652
+ 300: "oklch(0.30 .102 30)",
653
+ 400: "oklch(0.34 .121 30)",
654
+ 500: "oklch(0.38 .140 30)",
655
+ 600: "oklch(0.64 .198 30)",
656
+ 700: "oklch(0.57 .232 30)",
657
+ 800: "oklch(0.51 .230 30)",
658
+ 900: "oklch(0.77 .164 30)",
659
+ 1e3: "oklch(0.96 .017 30)"
660
+ };
661
+ var orange2 = {
662
+ 100: "oklch(0.22 .069 48)",
663
+ 200: "oklch(0.25 .081 48)",
664
+ 300: "oklch(0.30 .102 48)",
665
+ 400: "oklch(0.34 .121 48)",
666
+ 500: "oklch(0.38 .140 48)",
667
+ 600: "oklch(0.64 .198 48)",
668
+ 700: "oklch(0.57 .232 48)",
669
+ 800: "oklch(0.51 .230 48)",
670
+ 900: "oklch(0.77 .164 48)",
671
+ 1e3: "oklch(0.96 .017 48)"
672
+ };
673
+ var purple2 = {
674
+ 100: "oklch(0.22 .069 293)",
675
+ 200: "oklch(0.25 .081 293)",
676
+ 300: "oklch(0.30 .102 293)",
677
+ 400: "oklch(0.34 .121 293)",
678
+ 500: "oklch(0.38 .140 293)",
679
+ 600: "oklch(0.64 .198 293)",
680
+ 700: "oklch(0.57 .232 293)",
681
+ 800: "oklch(0.51 .230 293)",
682
+ 900: "oklch(0.77 .164 293)",
683
+ 1e3: "oklch(0.96 .017 293)"
684
+ };
685
+ var cyan2 = {
686
+ 100: "oklch(0.22 .069 213)",
687
+ 200: "oklch(0.25 .081 213)",
688
+ 300: "oklch(0.30 .102 213)",
689
+ 400: "oklch(0.34 .121 213)",
690
+ 500: "oklch(0.38 .140 213)",
691
+ 600: "oklch(0.64 .198 213)",
692
+ 700: "oklch(0.57 .232 213)",
693
+ 800: "oklch(0.51 .230 213)",
694
+ 900: "oklch(0.77 .164 213)",
695
+ 1e3: "oklch(0.96 .017 213)"
696
+ };
697
+ var darkTheme = {
698
+ name: "dark",
773
699
  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"
700
+ bg: {
701
+ 100: "oklch(0.165 0.01 260)",
702
+ 200: "oklch(0.22 0.01 260)",
703
+ 300: "oklch(0.27 0.01 260)",
704
+ 400: "oklch(0.32 0.01 260)"
705
+ },
706
+ content: {
707
+ 100: "oklch(96% 0.01 260)",
708
+ 200: "color-mix(in oklab, var(--xz-color-content-100) 60%, transparent)"
709
+ },
710
+ line: {
711
+ 100: whiteAlpha2[100],
712
+ 200: whiteAlpha2[200],
713
+ 300: whiteAlpha2[300]
714
+ },
715
+ primary: {
716
+ soft: {
717
+ 100: fastwork2[100],
718
+ 200: fastwork2[200],
719
+ 300: fastwork2[300]
720
+ },
721
+ line: {
722
+ 100: fastwork2[400],
723
+ 200: fastwork2[500],
724
+ 300: fastwork2[600]
725
+ },
726
+ bg: {
727
+ 100: fastwork2[700],
728
+ 200: fastwork2[800]
729
+ },
730
+ content: {
731
+ 100: fastwork2[900],
732
+ 200: fastwork2[1e3]
733
+ },
734
+ fg: "oklch(1 0 0)"
735
+ },
736
+ danger: {
737
+ soft: {
738
+ 100: red2[100],
739
+ 200: red2[200],
740
+ 300: red2[300]
741
+ },
742
+ line: {
743
+ 100: red2[400],
744
+ 200: red2[500],
745
+ 300: red2[600]
746
+ },
747
+ bg: {
748
+ 100: red2[700],
749
+ 200: red2[800]
750
+ },
751
+ content: {
752
+ 100: red2[900],
753
+ 200: red2[1e3]
754
+ },
755
+ fg: "oklch(1 0 0)"
756
+ },
757
+ success: {
758
+ soft: {
759
+ 100: green2[100],
760
+ 200: green2[200],
761
+ 300: green2[300]
762
+ },
763
+ line: {
764
+ 100: green2[400],
765
+ 200: green2[500],
766
+ 300: green2[600]
767
+ },
768
+ bg: {
769
+ 100: green2[700],
770
+ 200: green2[800]
771
+ },
772
+ content: {
773
+ 100: green2[900],
774
+ 200: green2[1e3]
775
+ },
776
+ fg: "oklch(1 0 0)"
777
+ },
778
+ warning: {
779
+ soft: {
780
+ 100: amber2[100],
781
+ 200: amber2[200],
782
+ 300: amber2[300]
783
+ },
784
+ line: {
785
+ 100: amber2[400],
786
+ 200: amber2[500],
787
+ 300: amber2[600]
788
+ },
789
+ bg: {
790
+ 100: amber2[700],
791
+ 200: amber2[800]
792
+ },
793
+ content: {
794
+ 100: amber2[900],
795
+ 200: amber2[1e3]
796
+ },
797
+ fg: "oklch(1 0 0)"
798
+ },
799
+ info: {
800
+ soft: {
801
+ 100: cyan2[100],
802
+ 200: cyan2[200],
803
+ 300: cyan2[300]
804
+ },
805
+ line: {
806
+ 100: cyan2[400],
807
+ 200: cyan2[500],
808
+ 300: cyan2[600]
809
+ },
810
+ bg: {
811
+ 100: cyan2[700],
812
+ 200: cyan2[800]
813
+ },
814
+ content: {
815
+ 100: cyan2[900],
816
+ 200: cyan2[1e3]
817
+ },
818
+ fg: "oklch(1 0 0)"
819
+ },
820
+ // Color tokens
821
+ fastwork: fastwork2,
822
+ gray: gray2,
823
+ green: green2,
824
+ mint: mint2,
825
+ amber: amber2,
826
+ red: red2,
827
+ orange: orange2,
828
+ purple: purple2,
829
+ cyan: cyan2,
830
+ blackAlpha: blackAlpha2,
831
+ whiteAlpha: whiteAlpha2
811
832
  }
812
833
  };
813
834
 
814
835
  // src/themes/index.ts
815
836
  var themes = {
816
837
  light: lightTheme,
817
- dark: darkTheme,
818
- cyberpunk: cyberpunkTheme,
819
- forest: forestTheme,
820
- ocean: oceanTheme
838
+ dark: darkTheme
821
839
  };
822
840
  function getTheme(name) {
823
841
  return themes[name];
824
842
  }
843
+ __name(getTheme, "getTheme");
825
844
  function getThemeNames() {
826
845
  return Object.keys(themes);
827
846
  }
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
- }
847
+ __name(getThemeNames, "getThemeNames");
838
848
 
839
- exports.blackAlpha = blackAlpha;
840
849
  exports.body = body;
841
850
  exports.borderRadius = borderRadius;
842
- exports.colors = colors;
843
- exports.createCustomTheme = createCustomTheme;
844
- exports.createTheme = createTheme;
845
- exports.cyan = cyan;
846
- exports.cyberpunkTheme = cyberpunkTheme;
847
851
  exports.darkTheme = darkTheme;
848
- exports.defaultTheme = defaultTheme;
849
852
  exports.fontFamily = fontFamily;
850
853
  exports.fontSize = fontSize;
851
854
  exports.fontWeight = fontWeight;
852
- exports.forestTheme = forestTheme;
853
- exports.generateCSSVariables = generateCSSVariables;
854
855
  exports.getTheme = getTheme;
855
856
  exports.getThemeNames = getThemeNames;
856
- exports.green = green;
857
857
  exports.headings = headings;
858
858
  exports.lightTheme = lightTheme;
859
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
860
  exports.shadows = shadows;
867
861
  exports.spacing = spacing;
868
862
  exports.subtitles = subtitles;
869
- exports.themeToCSSVariables = themeToCSSVariables;
870
863
  exports.themes = themes;
871
864
  exports.titles = titles;
872
865
  exports.typography = typography;
873
- exports.whiteAlpha = whiteAlpha;
874
- exports.yellow = yellow;
875
866
  //# sourceMappingURL=index.js.map
876
867
  //# sourceMappingURL=index.js.map