@optiaxiom/globals 0.4.4 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -9,37 +9,21 @@ declare const theme: MapLeafNodes<{
9
9
  readonly sm: "4px";
10
10
  readonly md: "6px";
11
11
  readonly lg: "8px";
12
- readonly xl: "12px";
13
12
  readonly full: "9999px";
14
- readonly none: "0";
15
- };
16
- readonly borderWidth: {
17
- readonly "0": "0";
18
- readonly "1": "1px";
19
- readonly "2": "2px";
20
- readonly "4": "4px";
21
13
  };
22
14
  readonly boxShadow: {
23
- readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
24
15
  readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
25
16
  readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
26
17
  readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
27
- readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
28
- readonly inner: "inset 0 0 6px 0 rgb(0 0 0 / 0.1);";
29
- readonly none: "0 0 #0000";
30
18
  };
31
19
  readonly colors: {
32
- readonly current: "currentColor";
33
- readonly transparent: "transparent";
34
- readonly "avatar.bg.neutral": "#E9EDF5";
35
- readonly "avatar.bg.purple": "#E5DCF4";
36
- readonly "avatar.fg.neutral": "#4F576E";
37
- readonly "avatar.fg.purple": "#412470";
38
20
  readonly "bg.accent": "#0037FF";
39
21
  readonly "bg.accent.hovered": "#002CCC";
40
22
  readonly "bg.accent.light": "#B3C3FF";
41
23
  readonly "bg.accent.pressed": "#002894";
42
24
  readonly "bg.accent.subtle": "#F0F3FF";
25
+ readonly "bg.avatar.neutral": "#E9EDF5";
26
+ readonly "bg.avatar.purple": "#E5DCF4";
43
27
  readonly "bg.default": "#FFFFFF";
44
28
  readonly "bg.default.hovered": "#091E420A";
45
29
  readonly "bg.default.inverse": "#2E3442";
@@ -59,6 +43,8 @@ declare const theme: MapLeafNodes<{
59
43
  readonly "bg.page": "#F9FAFC";
60
44
  readonly "bg.secondary": "#F5F6FA";
61
45
  readonly "bg.secondary.hovered": "#F5F6FA";
46
+ readonly "bg.spinner.default": "#091E42";
47
+ readonly "bg.spinner.inverse": "#F9FAFC";
62
48
  readonly "bg.success": "#038047";
63
49
  readonly "bg.success.hovered": "#24663E";
64
50
  readonly "bg.success.light": "#A5E1C3";
@@ -85,6 +71,8 @@ declare const theme: MapLeafNodes<{
85
71
  readonly "fg.accent": "#0037FF";
86
72
  readonly "fg.accent.hovered": "#002CCC";
87
73
  readonly "fg.accent.strong": "#002894";
74
+ readonly "fg.avatar.neutral": "#4F576E";
75
+ readonly "fg.avatar.purple": "#412470";
88
76
  readonly "fg.default": "#2E3442";
89
77
  readonly "fg.default.inverse": "#FFFFFF";
90
78
  readonly "fg.disabled": "#CACFDC";
@@ -95,7 +83,14 @@ declare const theme: MapLeafNodes<{
95
83
  readonly "fg.information": "#2F7AEE";
96
84
  readonly "fg.information.light": "#7BAAF4";
97
85
  readonly "fg.information.strong": "#0D46A0";
86
+ readonly "fg.link.default": "#0037FF";
87
+ readonly "fg.link.default.hovered": "#002CCC";
88
+ readonly "fg.link.inverse": "#FFFFFF";
89
+ readonly "fg.link.subtle": "#2E3442";
90
+ readonly "fg.link.visited": "#532E8F";
98
91
  readonly "fg.secondary": "#4F576E";
92
+ readonly "fg.spinner.default": "#2E3442";
93
+ readonly "fg.spinner.inverse": "#CACFDC";
99
94
  readonly "fg.success": "#03A65D";
100
95
  readonly "fg.success.hovered": "#038047";
101
96
  readonly "fg.success.light": "#7CD2A7";
@@ -107,15 +102,6 @@ declare const theme: MapLeafNodes<{
107
102
  readonly "fg.warning.light": "#FFC84B";
108
103
  readonly "fg.warning.strong": "#B54707";
109
104
  readonly "fg.white": "#FFFFFF";
110
- readonly "link.fg.default": "#0037FF";
111
- readonly "link.fg.default.hovered": "#002CCC";
112
- readonly "link.fg.inverse": "#FFFFFF";
113
- readonly "link.fg.subtle": "#2E3442";
114
- readonly "link.fg.visited": "#532E8F";
115
- readonly "spinner.bg.default": "#091E42";
116
- readonly "spinner.bg.inverse": "#F9FAFC";
117
- readonly "spinner.fg.default": "#2E3442";
118
- readonly "spinner.fg.inverse": "#CACFDC";
119
105
  };
120
106
  readonly fontFamily: {
121
107
  readonly mono: "Fira Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace";
@@ -158,80 +144,16 @@ declare const theme: MapLeafNodes<{
158
144
  readonly fontSize: "36px";
159
145
  readonly lineHeight: "40px";
160
146
  };
161
- readonly "6xl": {
162
- readonly fontSize: "48px";
163
- readonly lineHeight: "1";
164
- };
165
- readonly "7xl": {
166
- readonly fontSize: "60px";
167
- readonly lineHeight: "1";
168
- };
169
- };
170
- readonly letterSpacing: {
171
- readonly tighter: "-0.05em";
172
- readonly tight: "-0.025em";
173
- readonly normal: "0";
174
- readonly wide: "0.025em";
175
- readonly wider: "0.05em";
176
- readonly widest: "0.1em";
177
- };
178
- readonly lineHeight: {
179
- readonly none: "1";
180
- readonly tight: "1.25";
181
- readonly normal: "1.5";
182
- readonly loose: "2";
183
- };
184
- readonly margins: {
185
- readonly "-xs": "-8px";
186
- readonly "-sm": "-12px";
187
- readonly "-md": "-16px";
188
- readonly "-lg": "-24px";
189
- readonly "-xl": "-32px";
190
- readonly "-2": "-2px";
191
- readonly "-4": "-4px";
192
- readonly "-6": "-6px";
193
- readonly "-8": "-8px";
194
- readonly "-10": "-10px";
195
- readonly "-12": "-12px";
196
- readonly "-16": "-16px";
197
- readonly "-24": "-24px";
198
- readonly "-32": "-32px";
199
- readonly "-48": "-48px";
200
- readonly "-64": "-64px";
201
- readonly "-80": "-80px";
202
- readonly xs: "8px";
203
- readonly sm: "12px";
204
- readonly md: "16px";
205
- readonly lg: "24px";
206
- readonly xl: "32px";
207
- readonly "0": "0";
208
- readonly "2": "2px";
209
- readonly "4": "4px";
210
- readonly "6": "6px";
211
- readonly "8": "8px";
212
- readonly "10": "10px";
213
- readonly "12": "12px";
214
- readonly "16": "16px";
215
- readonly "20": "20px";
216
- readonly "24": "24px";
217
- readonly "32": "32px";
218
- readonly "48": "48px";
219
- readonly "64": "64px";
220
- readonly "80": "80px";
221
147
  };
222
148
  readonly maxSize: {
223
149
  readonly xs: "320px";
224
150
  readonly sm: "384px";
225
151
  readonly md: "448px";
226
152
  readonly lg: "512px";
227
- readonly xl: "576px";
228
- readonly "2xl": "672px";
229
- readonly full: "100%";
230
153
  };
231
154
  readonly screens: {
232
155
  readonly sm: "600px";
233
156
  readonly md: "900px";
234
- readonly lg: "1200px";
235
157
  };
236
158
  readonly size: {
237
159
  readonly "2xs": "16px";
@@ -240,90 +162,19 @@ declare const theme: MapLeafNodes<{
240
162
  readonly md: "32px";
241
163
  readonly lg: "40px";
242
164
  readonly xl: "48px";
243
- readonly "2xl": "56px";
244
- readonly "5xl": "80px";
245
- readonly "0": "0";
246
- readonly "1": "1px";
247
- readonly "2": "2px";
248
- readonly "4": "4px";
249
- readonly "6": "6px";
250
- readonly "8": "8px";
251
- readonly "10": "10px";
252
- readonly "12": "12px";
253
- readonly "16": "16px";
254
- readonly "20": "20px";
255
- readonly "24": "24px";
256
- readonly "32": "32px";
257
- readonly "40": "40px";
258
- readonly "48": "48px";
259
- readonly "56": "56px";
260
- readonly "64": "64px";
261
- readonly "80": "80px";
262
- readonly "96": "96px";
263
- readonly "112": "112px";
264
- readonly "128": "128px";
265
- readonly "144": "144px";
266
- readonly "160": "160px";
267
- readonly "176": "176px";
268
- readonly "192": "192px";
269
- readonly "208": "208px";
270
- readonly "224": "224px";
271
- readonly "240": "240px";
272
- readonly "256": "256px";
273
- readonly "288": "288px";
274
- readonly "320": "320px";
275
- readonly "384": "384px";
276
- readonly "1/2": "50%";
277
- readonly "1/3": "33.333333%";
278
- readonly "2/3": "66.666666%";
279
- readonly "1/4": "25%";
280
- readonly "2/4": "50%";
281
- readonly "3/4": "75%";
282
- readonly auto: "auto";
283
- readonly fit: "fit-content";
284
- readonly full: "100%";
285
- readonly max: "max-content";
286
- readonly min: "min-content";
287
- };
288
- readonly spacing: {
289
- readonly xs: "8px";
290
- readonly sm: "12px";
291
- readonly md: "16px";
292
- readonly lg: "24px";
293
- readonly xl: "32px";
294
- readonly "0": "0";
295
- readonly "2": "2px";
296
- readonly "4": "4px";
297
- readonly "6": "6px";
298
- readonly "8": "8px";
299
- readonly "10": "10px";
300
- readonly "12": "12px";
301
- readonly "16": "16px";
302
- readonly "20": "20px";
303
- readonly "24": "24px";
304
- readonly "32": "32px";
305
- readonly "48": "48px";
306
- readonly "64": "64px";
307
- readonly "80": "80px";
165
+ readonly "3xl": "80px";
308
166
  };
309
167
  readonly zIndex: {
310
- readonly "0": "0";
311
- readonly "10": "10";
312
- readonly "20": "20";
313
- readonly "30": "30";
314
- readonly "40": "40";
315
- readonly "50": "50";
316
- readonly auto: "auto";
317
168
  readonly popover: "3000";
318
169
  readonly toast: "3010";
319
170
  readonly tooltip: "10000";
320
171
  };
321
172
  }, CSSVarFunction>;
322
- type CSSVarFunction = `var(--${string})` | `var(--${string}, ${number | string})`;
323
- type Primitive = boolean | null | number | string | undefined;
324
173
  type MapLeafNodes<Obj, LeafType> = {
325
174
  [Prop in keyof Obj]: Obj[Prop] extends Primitive ? LeafType : Obj[Prop] extends Record<number | string, any> ? MapLeafNodes<Obj[Prop], LeafType> : never;
326
175
  };
176
+ type CSSVarFunction = `var(--${string})` | `var(--${string}, ${number | string})`;
177
+ type Primitive = boolean | null | number | string | undefined;
327
178
 
328
179
  declare const ToastContextProvider: react.FC<{
329
180
  onOpenChange: (open: boolean) => void;
@@ -339,7 +190,7 @@ declare const useToastContext: (consumerName: string) => {
339
190
  type ToastItem = {
340
191
  id: string;
341
192
  open: boolean;
342
- toast: {
193
+ toast: ReactElement | {
343
194
  action?: {
344
195
  altText: string;
345
196
  label: string;
@@ -347,7 +198,7 @@ type ToastItem = {
347
198
  };
348
199
  title: string;
349
200
  type?: "danger" | "neutral" | "success" | "warning";
350
- } | ReactElement;
201
+ };
351
202
  };
352
203
  type Toaster = {
353
204
  clear: () => void;
@@ -364,37 +215,21 @@ declare const tokens: {
364
215
  readonly sm: "4px";
365
216
  readonly md: "6px";
366
217
  readonly lg: "8px";
367
- readonly xl: "12px";
368
218
  readonly full: "9999px";
369
- readonly none: "0";
370
- };
371
- readonly borderWidth: {
372
- readonly "0": "0";
373
- readonly "1": "1px";
374
- readonly "2": "2px";
375
- readonly "4": "4px";
376
219
  };
377
220
  readonly boxShadow: {
378
- readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
379
221
  readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
380
222
  readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
381
223
  readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
382
- readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
383
- readonly inner: "inset 0 0 6px 0 rgb(0 0 0 / 0.1);";
384
- readonly none: "0 0 #0000";
385
224
  };
386
225
  readonly colors: {
387
- readonly current: "currentColor";
388
- readonly transparent: "transparent";
389
- readonly "avatar.bg.neutral": "#E9EDF5";
390
- readonly "avatar.bg.purple": "#E5DCF4";
391
- readonly "avatar.fg.neutral": "#4F576E";
392
- readonly "avatar.fg.purple": "#412470";
393
226
  readonly "bg.accent": "#0037FF";
394
227
  readonly "bg.accent.hovered": "#002CCC";
395
228
  readonly "bg.accent.light": "#B3C3FF";
396
229
  readonly "bg.accent.pressed": "#002894";
397
230
  readonly "bg.accent.subtle": "#F0F3FF";
231
+ readonly "bg.avatar.neutral": "#E9EDF5";
232
+ readonly "bg.avatar.purple": "#E5DCF4";
398
233
  readonly "bg.default": "#FFFFFF";
399
234
  readonly "bg.default.hovered": "#091E420A";
400
235
  readonly "bg.default.inverse": "#2E3442";
@@ -414,6 +249,8 @@ declare const tokens: {
414
249
  readonly "bg.page": "#F9FAFC";
415
250
  readonly "bg.secondary": "#F5F6FA";
416
251
  readonly "bg.secondary.hovered": "#F5F6FA";
252
+ readonly "bg.spinner.default": "#091E42";
253
+ readonly "bg.spinner.inverse": "#F9FAFC";
417
254
  readonly "bg.success": "#038047";
418
255
  readonly "bg.success.hovered": "#24663E";
419
256
  readonly "bg.success.light": "#A5E1C3";
@@ -440,6 +277,8 @@ declare const tokens: {
440
277
  readonly "fg.accent": "#0037FF";
441
278
  readonly "fg.accent.hovered": "#002CCC";
442
279
  readonly "fg.accent.strong": "#002894";
280
+ readonly "fg.avatar.neutral": "#4F576E";
281
+ readonly "fg.avatar.purple": "#412470";
443
282
  readonly "fg.default": "#2E3442";
444
283
  readonly "fg.default.inverse": "#FFFFFF";
445
284
  readonly "fg.disabled": "#CACFDC";
@@ -450,7 +289,14 @@ declare const tokens: {
450
289
  readonly "fg.information": "#2F7AEE";
451
290
  readonly "fg.information.light": "#7BAAF4";
452
291
  readonly "fg.information.strong": "#0D46A0";
292
+ readonly "fg.link.default": "#0037FF";
293
+ readonly "fg.link.default.hovered": "#002CCC";
294
+ readonly "fg.link.inverse": "#FFFFFF";
295
+ readonly "fg.link.subtle": "#2E3442";
296
+ readonly "fg.link.visited": "#532E8F";
453
297
  readonly "fg.secondary": "#4F576E";
298
+ readonly "fg.spinner.default": "#2E3442";
299
+ readonly "fg.spinner.inverse": "#CACFDC";
454
300
  readonly "fg.success": "#03A65D";
455
301
  readonly "fg.success.hovered": "#038047";
456
302
  readonly "fg.success.light": "#7CD2A7";
@@ -462,15 +308,6 @@ declare const tokens: {
462
308
  readonly "fg.warning.light": "#FFC84B";
463
309
  readonly "fg.warning.strong": "#B54707";
464
310
  readonly "fg.white": "#FFFFFF";
465
- readonly "link.fg.default": "#0037FF";
466
- readonly "link.fg.default.hovered": "#002CCC";
467
- readonly "link.fg.inverse": "#FFFFFF";
468
- readonly "link.fg.subtle": "#2E3442";
469
- readonly "link.fg.visited": "#532E8F";
470
- readonly "spinner.bg.default": "#091E42";
471
- readonly "spinner.bg.inverse": "#F9FAFC";
472
- readonly "spinner.fg.default": "#2E3442";
473
- readonly "spinner.fg.inverse": "#CACFDC";
474
311
  };
475
312
  readonly fontFamily: {
476
313
  readonly mono: "Fira Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace";
@@ -513,80 +350,16 @@ declare const tokens: {
513
350
  readonly fontSize: "36px";
514
351
  readonly lineHeight: "40px";
515
352
  };
516
- readonly "6xl": {
517
- readonly fontSize: "48px";
518
- readonly lineHeight: "1";
519
- };
520
- readonly "7xl": {
521
- readonly fontSize: "60px";
522
- readonly lineHeight: "1";
523
- };
524
- };
525
- readonly letterSpacing: {
526
- readonly tighter: "-0.05em";
527
- readonly tight: "-0.025em";
528
- readonly normal: "0";
529
- readonly wide: "0.025em";
530
- readonly wider: "0.05em";
531
- readonly widest: "0.1em";
532
- };
533
- readonly lineHeight: {
534
- readonly none: "1";
535
- readonly tight: "1.25";
536
- readonly normal: "1.5";
537
- readonly loose: "2";
538
- };
539
- readonly margins: {
540
- readonly "-xs": "-8px";
541
- readonly "-sm": "-12px";
542
- readonly "-md": "-16px";
543
- readonly "-lg": "-24px";
544
- readonly "-xl": "-32px";
545
- readonly "-2": "-2px";
546
- readonly "-4": "-4px";
547
- readonly "-6": "-6px";
548
- readonly "-8": "-8px";
549
- readonly "-10": "-10px";
550
- readonly "-12": "-12px";
551
- readonly "-16": "-16px";
552
- readonly "-24": "-24px";
553
- readonly "-32": "-32px";
554
- readonly "-48": "-48px";
555
- readonly "-64": "-64px";
556
- readonly "-80": "-80px";
557
- readonly xs: "8px";
558
- readonly sm: "12px";
559
- readonly md: "16px";
560
- readonly lg: "24px";
561
- readonly xl: "32px";
562
- readonly "0": "0";
563
- readonly "2": "2px";
564
- readonly "4": "4px";
565
- readonly "6": "6px";
566
- readonly "8": "8px";
567
- readonly "10": "10px";
568
- readonly "12": "12px";
569
- readonly "16": "16px";
570
- readonly "20": "20px";
571
- readonly "24": "24px";
572
- readonly "32": "32px";
573
- readonly "48": "48px";
574
- readonly "64": "64px";
575
- readonly "80": "80px";
576
353
  };
577
354
  readonly maxSize: {
578
355
  readonly xs: "320px";
579
356
  readonly sm: "384px";
580
357
  readonly md: "448px";
581
358
  readonly lg: "512px";
582
- readonly xl: "576px";
583
- readonly "2xl": "672px";
584
- readonly full: "100%";
585
359
  };
586
360
  readonly screens: {
587
361
  readonly sm: "600px";
588
362
  readonly md: "900px";
589
- readonly lg: "1200px";
590
363
  };
591
364
  readonly size: {
592
365
  readonly "2xs": "16px";
@@ -595,80 +368,9 @@ declare const tokens: {
595
368
  readonly md: "32px";
596
369
  readonly lg: "40px";
597
370
  readonly xl: "48px";
598
- readonly "2xl": "56px";
599
- readonly "5xl": "80px";
600
- readonly "0": "0";
601
- readonly "1": "1px";
602
- readonly "2": "2px";
603
- readonly "4": "4px";
604
- readonly "6": "6px";
605
- readonly "8": "8px";
606
- readonly "10": "10px";
607
- readonly "12": "12px";
608
- readonly "16": "16px";
609
- readonly "20": "20px";
610
- readonly "24": "24px";
611
- readonly "32": "32px";
612
- readonly "40": "40px";
613
- readonly "48": "48px";
614
- readonly "56": "56px";
615
- readonly "64": "64px";
616
- readonly "80": "80px";
617
- readonly "96": "96px";
618
- readonly "112": "112px";
619
- readonly "128": "128px";
620
- readonly "144": "144px";
621
- readonly "160": "160px";
622
- readonly "176": "176px";
623
- readonly "192": "192px";
624
- readonly "208": "208px";
625
- readonly "224": "224px";
626
- readonly "240": "240px";
627
- readonly "256": "256px";
628
- readonly "288": "288px";
629
- readonly "320": "320px";
630
- readonly "384": "384px";
631
- readonly "1/2": "50%";
632
- readonly "1/3": "33.333333%";
633
- readonly "2/3": "66.666666%";
634
- readonly "1/4": "25%";
635
- readonly "2/4": "50%";
636
- readonly "3/4": "75%";
637
- readonly auto: "auto";
638
- readonly fit: "fit-content";
639
- readonly full: "100%";
640
- readonly max: "max-content";
641
- readonly min: "min-content";
642
- };
643
- readonly spacing: {
644
- readonly xs: "8px";
645
- readonly sm: "12px";
646
- readonly md: "16px";
647
- readonly lg: "24px";
648
- readonly xl: "32px";
649
- readonly "0": "0";
650
- readonly "2": "2px";
651
- readonly "4": "4px";
652
- readonly "6": "6px";
653
- readonly "8": "8px";
654
- readonly "10": "10px";
655
- readonly "12": "12px";
656
- readonly "16": "16px";
657
- readonly "20": "20px";
658
- readonly "24": "24px";
659
- readonly "32": "32px";
660
- readonly "48": "48px";
661
- readonly "64": "64px";
662
- readonly "80": "80px";
371
+ readonly "3xl": "80px";
663
372
  };
664
373
  readonly zIndex: {
665
- readonly "0": "0";
666
- readonly "10": "10";
667
- readonly "20": "20";
668
- readonly "30": "30";
669
- readonly "40": "40";
670
- readonly "50": "50";
671
- readonly auto: "auto";
672
374
  readonly popover: "3000";
673
375
  readonly toast: "3010";
674
376
  readonly tooltip: "10000";
@@ -676,17 +378,13 @@ declare const tokens: {
676
378
  };
677
379
  declare const tokensDark: {
678
380
  readonly colors: {
679
- readonly current: "currentColor";
680
- readonly transparent: "transparent";
681
- readonly "avatar.bg.neutral": "#2E3442";
682
- readonly "avatar.bg.purple": "#331C59";
683
- readonly "avatar.fg.neutral": "#E9EDF5";
684
- readonly "avatar.fg.purple": "#E5DCF4";
685
381
  readonly "bg.accent": "#2E66F7";
686
382
  readonly "bg.accent.hovered": "#2E66F7";
687
383
  readonly "bg.accent.light": "#001666";
688
384
  readonly "bg.accent.pressed": "#002CCC";
689
385
  readonly "bg.accent.subtle": "#000B33";
386
+ readonly "bg.avatar.neutral": "#2E3442";
387
+ readonly "bg.avatar.purple": "#331C59";
690
388
  readonly "bg.default": "#1C2029";
691
389
  readonly "bg.default.hovered": "#F9FAFC0F";
692
390
  readonly "bg.default.inverse": "#E9EDF5";
@@ -706,6 +404,8 @@ declare const tokensDark: {
706
404
  readonly "bg.page": "#171A23";
707
405
  readonly "bg.secondary": "#1C212B";
708
406
  readonly "bg.secondary.hovered": "#F9FAFC1F";
407
+ readonly "bg.spinner.default": "#F9FAFC";
408
+ readonly "bg.spinner.inverse": "#F9FAFC";
709
409
  readonly "bg.success": "#038047";
710
410
  readonly "bg.success.hovered": "#5AC58A";
711
411
  readonly "bg.success.light": "#17492B";
@@ -732,6 +432,8 @@ declare const tokensDark: {
732
432
  readonly "fg.accent": "#6A8FFC";
733
433
  readonly "fg.accent.hovered": "#0037FF";
734
434
  readonly "fg.accent.strong": "#2E66F7";
435
+ readonly "fg.avatar.neutral": "#E9EDF5";
436
+ readonly "fg.avatar.purple": "#E5DCF4";
735
437
  readonly "fg.default": "#F5F6FA";
736
438
  readonly "fg.default.inverse": "#2E3442";
737
439
  readonly "fg.disabled": "#F9FAFC52";
@@ -742,7 +444,14 @@ declare const tokensDark: {
742
444
  readonly "fg.information": "#7BAAF4";
743
445
  readonly "fg.information.light": "#7BAAF4";
744
446
  readonly "fg.information.strong": "#A1C2F7";
447
+ readonly "fg.link.default": "#2E66F7";
448
+ readonly "fg.link.default.hovered": "#B3C3FF";
449
+ readonly "fg.link.inverse": "#FFFFFF";
450
+ readonly "fg.link.subtle": "#2E3442";
451
+ readonly "fg.link.visited": "#693AB6";
745
452
  readonly "fg.secondary": "#CACFDC";
453
+ readonly "fg.spinner.default": "#CACFDC";
454
+ readonly "fg.spinner.inverse": "#2E3442";
746
455
  readonly "fg.success": "#7CD2A7";
747
456
  readonly "fg.success.hovered": "#038047";
748
457
  readonly "fg.success.light": "#7CD2A7";
@@ -754,39 +463,18 @@ declare const tokensDark: {
754
463
  readonly "fg.warning.light": "#FFC84B";
755
464
  readonly "fg.warning.strong": "#FEDF88";
756
465
  readonly "fg.white": "#FFFFFF";
757
- readonly "link.fg.default": "#2E66F7";
758
- readonly "link.fg.default.hovered": "#B3C3FF";
759
- readonly "link.fg.inverse": "#FFFFFF";
760
- readonly "link.fg.subtle": "#2E3442";
761
- readonly "link.fg.visited": "#693AB6";
762
- readonly "spinner.bg.default": "#F9FAFC";
763
- readonly "spinner.bg.inverse": "#F9FAFC";
764
- readonly "spinner.fg.default": "#CACFDC";
765
- readonly "spinner.fg.inverse": "#2E3442";
766
466
  };
767
467
  readonly borderRadius: {
768
468
  readonly xs: "2px";
769
469
  readonly sm: "4px";
770
470
  readonly md: "6px";
771
471
  readonly lg: "8px";
772
- readonly xl: "12px";
773
472
  readonly full: "9999px";
774
- readonly none: "0";
775
- };
776
- readonly borderWidth: {
777
- readonly "0": "0";
778
- readonly "1": "1px";
779
- readonly "2": "2px";
780
- readonly "4": "4px";
781
473
  };
782
474
  readonly boxShadow: {
783
- readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
784
475
  readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
785
476
  readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
786
477
  readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
787
- readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
788
- readonly inner: "inset 0 0 6px 0 rgb(0 0 0 / 0.1);";
789
- readonly none: "0 0 #0000";
790
478
  };
791
479
  readonly fontFamily: {
792
480
  readonly mono: "Fira Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace";
@@ -829,80 +517,16 @@ declare const tokensDark: {
829
517
  readonly fontSize: "36px";
830
518
  readonly lineHeight: "40px";
831
519
  };
832
- readonly "6xl": {
833
- readonly fontSize: "48px";
834
- readonly lineHeight: "1";
835
- };
836
- readonly "7xl": {
837
- readonly fontSize: "60px";
838
- readonly lineHeight: "1";
839
- };
840
- };
841
- readonly letterSpacing: {
842
- readonly tighter: "-0.05em";
843
- readonly tight: "-0.025em";
844
- readonly normal: "0";
845
- readonly wide: "0.025em";
846
- readonly wider: "0.05em";
847
- readonly widest: "0.1em";
848
- };
849
- readonly lineHeight: {
850
- readonly none: "1";
851
- readonly tight: "1.25";
852
- readonly normal: "1.5";
853
- readonly loose: "2";
854
- };
855
- readonly margins: {
856
- readonly "-xs": "-8px";
857
- readonly "-sm": "-12px";
858
- readonly "-md": "-16px";
859
- readonly "-lg": "-24px";
860
- readonly "-xl": "-32px";
861
- readonly "-2": "-2px";
862
- readonly "-4": "-4px";
863
- readonly "-6": "-6px";
864
- readonly "-8": "-8px";
865
- readonly "-10": "-10px";
866
- readonly "-12": "-12px";
867
- readonly "-16": "-16px";
868
- readonly "-24": "-24px";
869
- readonly "-32": "-32px";
870
- readonly "-48": "-48px";
871
- readonly "-64": "-64px";
872
- readonly "-80": "-80px";
873
- readonly xs: "8px";
874
- readonly sm: "12px";
875
- readonly md: "16px";
876
- readonly lg: "24px";
877
- readonly xl: "32px";
878
- readonly "0": "0";
879
- readonly "2": "2px";
880
- readonly "4": "4px";
881
- readonly "6": "6px";
882
- readonly "8": "8px";
883
- readonly "10": "10px";
884
- readonly "12": "12px";
885
- readonly "16": "16px";
886
- readonly "20": "20px";
887
- readonly "24": "24px";
888
- readonly "32": "32px";
889
- readonly "48": "48px";
890
- readonly "64": "64px";
891
- readonly "80": "80px";
892
520
  };
893
521
  readonly maxSize: {
894
522
  readonly xs: "320px";
895
523
  readonly sm: "384px";
896
524
  readonly md: "448px";
897
525
  readonly lg: "512px";
898
- readonly xl: "576px";
899
- readonly "2xl": "672px";
900
- readonly full: "100%";
901
526
  };
902
527
  readonly screens: {
903
528
  readonly sm: "600px";
904
529
  readonly md: "900px";
905
- readonly lg: "1200px";
906
530
  };
907
531
  readonly size: {
908
532
  readonly "2xs": "16px";
@@ -911,80 +535,9 @@ declare const tokensDark: {
911
535
  readonly md: "32px";
912
536
  readonly lg: "40px";
913
537
  readonly xl: "48px";
914
- readonly "2xl": "56px";
915
- readonly "5xl": "80px";
916
- readonly "0": "0";
917
- readonly "1": "1px";
918
- readonly "2": "2px";
919
- readonly "4": "4px";
920
- readonly "6": "6px";
921
- readonly "8": "8px";
922
- readonly "10": "10px";
923
- readonly "12": "12px";
924
- readonly "16": "16px";
925
- readonly "20": "20px";
926
- readonly "24": "24px";
927
- readonly "32": "32px";
928
- readonly "40": "40px";
929
- readonly "48": "48px";
930
- readonly "56": "56px";
931
- readonly "64": "64px";
932
- readonly "80": "80px";
933
- readonly "96": "96px";
934
- readonly "112": "112px";
935
- readonly "128": "128px";
936
- readonly "144": "144px";
937
- readonly "160": "160px";
938
- readonly "176": "176px";
939
- readonly "192": "192px";
940
- readonly "208": "208px";
941
- readonly "224": "224px";
942
- readonly "240": "240px";
943
- readonly "256": "256px";
944
- readonly "288": "288px";
945
- readonly "320": "320px";
946
- readonly "384": "384px";
947
- readonly "1/2": "50%";
948
- readonly "1/3": "33.333333%";
949
- readonly "2/3": "66.666666%";
950
- readonly "1/4": "25%";
951
- readonly "2/4": "50%";
952
- readonly "3/4": "75%";
953
- readonly auto: "auto";
954
- readonly fit: "fit-content";
955
- readonly full: "100%";
956
- readonly max: "max-content";
957
- readonly min: "min-content";
958
- };
959
- readonly spacing: {
960
- readonly xs: "8px";
961
- readonly sm: "12px";
962
- readonly md: "16px";
963
- readonly lg: "24px";
964
- readonly xl: "32px";
965
- readonly "0": "0";
966
- readonly "2": "2px";
967
- readonly "4": "4px";
968
- readonly "6": "6px";
969
- readonly "8": "8px";
970
- readonly "10": "10px";
971
- readonly "12": "12px";
972
- readonly "16": "16px";
973
- readonly "20": "20px";
974
- readonly "24": "24px";
975
- readonly "32": "32px";
976
- readonly "48": "48px";
977
- readonly "64": "64px";
978
- readonly "80": "80px";
538
+ readonly "3xl": "80px";
979
539
  };
980
540
  readonly zIndex: {
981
- readonly "0": "0";
982
- readonly "10": "10";
983
- readonly "20": "20";
984
- readonly "30": "30";
985
- readonly "40": "40";
986
- readonly "50": "50";
987
- readonly auto: "auto";
988
541
  readonly popover: "3000";
989
542
  readonly toast: "3010";
990
543
  readonly tooltip: "10000";
package/dist/theme-css.js CHANGED
@@ -1,3 +1,3 @@
1
- var theme = {borderRadius:{xs:'var(--ax-borderRadius-xs)',sm:'var(--ax-borderRadius-sm)',md:'var(--ax-borderRadius-md)',lg:'var(--ax-borderRadius-lg)',xl:'var(--ax-borderRadius-xl)',full:'var(--ax-borderRadius-full)',none:'var(--ax-borderRadius-none)'},borderWidth:{'0':'var(--ax-borderWidth-0)','1':'var(--ax-borderWidth-1)','2':'var(--ax-borderWidth-2)','4':'var(--ax-borderWidth-4)'},boxShadow:{xs:'var(--ax-boxShadow-xs)',sm:'var(--ax-boxShadow-sm)',md:'var(--ax-boxShadow-md)',lg:'var(--ax-boxShadow-lg)',xl:'var(--ax-boxShadow-xl)',inner:'var(--ax-boxShadow-inner)',none:'var(--ax-boxShadow-none)'},colors:{current:'var(--ax-colors-current)',transparent:'var(--ax-colors-transparent)','avatar.bg.neutral':'var(--ax-colors-avatar-bg-neutral)','avatar.bg.purple':'var(--ax-colors-avatar-bg-purple)','avatar.fg.neutral':'var(--ax-colors-avatar-fg-neutral)','avatar.fg.purple':'var(--ax-colors-avatar-fg-purple)','bg.accent':'var(--ax-colors-bg-accent)','bg.accent.hovered':'var(--ax-colors-bg-accent-hovered)','bg.accent.light':'var(--ax-colors-bg-accent-light)','bg.accent.pressed':'var(--ax-colors-bg-accent-pressed)','bg.accent.subtle':'var(--ax-colors-bg-accent-subtle)','bg.default':'var(--ax-colors-bg-default)','bg.default.hovered':'var(--ax-colors-bg-default-hovered)','bg.default.inverse':'var(--ax-colors-bg-default-inverse)','bg.default.inverse.hovered':'var(--ax-colors-bg-default-inverse-hovered)','bg.default.inverse.pressed':'var(--ax-colors-bg-default-inverse-pressed)','bg.default.pressed':'var(--ax-colors-bg-default-pressed)','bg.error':'var(--ax-colors-bg-error)','bg.error.hovered':'var(--ax-colors-bg-error-hovered)','bg.error.light':'var(--ax-colors-bg-error-light)','bg.error.pressed':'var(--ax-colors-bg-error-pressed)','bg.error.subtle':'var(--ax-colors-bg-error-subtle)','bg.error.subtlest':'var(--ax-colors-bg-error-subtlest)','bg.information':'var(--ax-colors-bg-information)','bg.information.light':'var(--ax-colors-bg-information-light)','bg.information.subtle':'var(--ax-colors-bg-information-subtle)','bg.overlay':'var(--ax-colors-bg-overlay)','bg.page':'var(--ax-colors-bg-page)','bg.secondary':'var(--ax-colors-bg-secondary)','bg.secondary.hovered':'var(--ax-colors-bg-secondary-hovered)','bg.success':'var(--ax-colors-bg-success)','bg.success.hovered':'var(--ax-colors-bg-success-hovered)','bg.success.light':'var(--ax-colors-bg-success-light)','bg.success.subtle':'var(--ax-colors-bg-success-subtle)','bg.tertiary':'var(--ax-colors-bg-tertiary)','bg.tertiary.hovered':'var(--ax-colors-bg-tertiary-hovered)','bg.warning':'var(--ax-colors-bg-warning)','bg.warning.hovered':'var(--ax-colors-bg-warning-hovered)','bg.warning.light':'var(--ax-colors-bg-warning-light)','bg.warning.subtle':'var(--ax-colors-bg-warning-subtle)','border.accent':'var(--ax-colors-border-accent)','border.active':'var(--ax-colors-border-active)','border.active.hovered':'var(--ax-colors-border-active-hovered)','border.default':'var(--ax-colors-border-default)','border.default.hovered':'var(--ax-colors-border-default-hovered)','border.disabled':'var(--ax-colors-border-disabled)','border.error':'var(--ax-colors-border-error)','border.focus':'var(--ax-colors-border-focus)','border.focus.error':'var(--ax-colors-border-focus-error)','border.secondary':'var(--ax-colors-border-secondary)','border.success':'var(--ax-colors-border-success)','border.tertiary':'var(--ax-colors-border-tertiary)','border.warning':'var(--ax-colors-border-warning)','fg.accent':'var(--ax-colors-fg-accent)','fg.accent.hovered':'var(--ax-colors-fg-accent-hovered)','fg.accent.strong':'var(--ax-colors-fg-accent-strong)','fg.default':'var(--ax-colors-fg-default)','fg.default.inverse':'var(--ax-colors-fg-default-inverse)','fg.disabled':'var(--ax-colors-fg-disabled)','fg.error':'var(--ax-colors-fg-error)','fg.error.hovered':'var(--ax-colors-fg-error-hovered)','fg.error.light':'var(--ax-colors-fg-error-light)','fg.error.strong':'var(--ax-colors-fg-error-strong)','fg.information':'var(--ax-colors-fg-information)','fg.information.light':'var(--ax-colors-fg-information-light)','fg.information.strong':'var(--ax-colors-fg-information-strong)','fg.secondary':'var(--ax-colors-fg-secondary)','fg.success':'var(--ax-colors-fg-success)','fg.success.hovered':'var(--ax-colors-fg-success-hovered)','fg.success.light':'var(--ax-colors-fg-success-light)','fg.success.strong':'var(--ax-colors-fg-success-strong)','fg.tertiary':'var(--ax-colors-fg-tertiary)','fg.warning':'var(--ax-colors-fg-warning)','fg.warning.hovered':'var(--ax-colors-fg-warning-hovered)','fg.warning.inverse':'var(--ax-colors-fg-warning-inverse)','fg.warning.light':'var(--ax-colors-fg-warning-light)','fg.warning.strong':'var(--ax-colors-fg-warning-strong)','fg.white':'var(--ax-colors-fg-white)','link.fg.default':'var(--ax-colors-link-fg-default)','link.fg.default.hovered':'var(--ax-colors-link-fg-default-hovered)','link.fg.inverse':'var(--ax-colors-link-fg-inverse)','link.fg.subtle':'var(--ax-colors-link-fg-subtle)','link.fg.visited':'var(--ax-colors-link-fg-visited)','spinner.bg.default':'var(--ax-colors-spinner-bg-default)','spinner.bg.inverse':'var(--ax-colors-spinner-bg-inverse)','spinner.fg.default':'var(--ax-colors-spinner-fg-default)','spinner.fg.inverse':'var(--ax-colors-spinner-fg-inverse)'},fontFamily:{mono:'var(--ax-fontFamily-mono)',sans:'var(--ax-fontFamily-sans)'},fontSize:{xs:{fontSize:'var(--ax-fontSize-xs-fontSize)',lineHeight:'var(--ax-fontSize-xs-lineHeight)'},sm:{fontSize:'var(--ax-fontSize-sm-fontSize)',lineHeight:'var(--ax-fontSize-sm-lineHeight)'},md:{fontSize:'var(--ax-fontSize-md-fontSize)',lineHeight:'var(--ax-fontSize-md-lineHeight)'},lg:{fontSize:'var(--ax-fontSize-lg-fontSize)',lineHeight:'var(--ax-fontSize-lg-lineHeight)'},xl:{fontSize:'var(--ax-fontSize-xl-fontSize)',lineHeight:'var(--ax-fontSize-xl-lineHeight)'},'2xl':{fontSize:'var(--ax-fontSize-2xl-fontSize)',lineHeight:'var(--ax-fontSize-2xl-lineHeight)'},'3xl':{fontSize:'var(--ax-fontSize-3xl-fontSize)',lineHeight:'var(--ax-fontSize-3xl-lineHeight)'},'4xl':{fontSize:'var(--ax-fontSize-4xl-fontSize)',lineHeight:'var(--ax-fontSize-4xl-lineHeight)'},'5xl':{fontSize:'var(--ax-fontSize-5xl-fontSize)',lineHeight:'var(--ax-fontSize-5xl-lineHeight)'},'6xl':{fontSize:'var(--ax-fontSize-6xl-fontSize)',lineHeight:'var(--ax-fontSize-6xl-lineHeight)'},'7xl':{fontSize:'var(--ax-fontSize-7xl-fontSize)',lineHeight:'var(--ax-fontSize-7xl-lineHeight)'}},letterSpacing:{tighter:'var(--ax-letterSpacing-tighter)',tight:'var(--ax-letterSpacing-tight)',normal:'var(--ax-letterSpacing-normal)',wide:'var(--ax-letterSpacing-wide)',wider:'var(--ax-letterSpacing-wider)',widest:'var(--ax-letterSpacing-widest)'},lineHeight:{none:'var(--ax-lineHeight-none)',tight:'var(--ax-lineHeight-tight)',normal:'var(--ax-lineHeight-normal)',loose:'var(--ax-lineHeight-loose)'},margins:{'0':'var(--ax-margins-0)','2':'var(--ax-margins-2)','4':'var(--ax-margins-4)','6':'var(--ax-margins-6)','8':'var(--ax-margins-8)','10':'var(--ax-margins-10)','12':'var(--ax-margins-12)','16':'var(--ax-margins-16)','20':'var(--ax-margins-20)','24':'var(--ax-margins-24)','32':'var(--ax-margins-32)','48':'var(--ax-margins-48)','64':'var(--ax-margins-64)','80':'var(--ax-margins-80)',xs:'var(--ax-margins-xs)',sm:'var(--ax-margins-sm)',md:'var(--ax-margins-md)',lg:'var(--ax-margins-lg)',xl:'var(--ax-margins-xl)','-xs':'var(--ax-margins--xs)','-sm':'var(--ax-margins--sm)','-md':'var(--ax-margins--md)','-lg':'var(--ax-margins--lg)','-xl':'var(--ax-margins--xl)','-2':'var(--ax-margins--2)','-4':'var(--ax-margins--4)','-6':'var(--ax-margins--6)','-8':'var(--ax-margins--8)','-10':'var(--ax-margins--10)','-12':'var(--ax-margins--12)','-16':'var(--ax-margins--16)','-24':'var(--ax-margins--24)','-32':'var(--ax-margins--32)','-48':'var(--ax-margins--48)','-64':'var(--ax-margins--64)','-80':'var(--ax-margins--80)'},maxSize:{xs:'var(--ax-maxSize-xs)',sm:'var(--ax-maxSize-sm)',md:'var(--ax-maxSize-md)',lg:'var(--ax-maxSize-lg)',xl:'var(--ax-maxSize-xl)','2xl':'var(--ax-maxSize-2xl)',full:'var(--ax-maxSize-full)'},screens:{sm:'var(--ax-screens-sm)',md:'var(--ax-screens-md)',lg:'var(--ax-screens-lg)'},size:{'0':'var(--ax-size-0)','1':'var(--ax-size-1)','2':'var(--ax-size-2)','4':'var(--ax-size-4)','6':'var(--ax-size-6)','8':'var(--ax-size-8)','10':'var(--ax-size-10)','12':'var(--ax-size-12)','16':'var(--ax-size-16)','20':'var(--ax-size-20)','24':'var(--ax-size-24)','32':'var(--ax-size-32)','40':'var(--ax-size-40)','48':'var(--ax-size-48)','56':'var(--ax-size-56)','64':'var(--ax-size-64)','80':'var(--ax-size-80)','96':'var(--ax-size-96)','112':'var(--ax-size-112)','128':'var(--ax-size-128)','144':'var(--ax-size-144)','160':'var(--ax-size-160)','176':'var(--ax-size-176)','192':'var(--ax-size-192)','208':'var(--ax-size-208)','224':'var(--ax-size-224)','240':'var(--ax-size-240)','256':'var(--ax-size-256)','288':'var(--ax-size-288)','320':'var(--ax-size-320)','384':'var(--ax-size-384)','2xs':'var(--ax-size-2xs)',xs:'var(--ax-size-xs)',sm:'var(--ax-size-sm)',md:'var(--ax-size-md)',lg:'var(--ax-size-lg)',xl:'var(--ax-size-xl)','2xl':'var(--ax-size-2xl)','5xl':'var(--ax-size-5xl)','1/2':'var(--ax-size-1-2)','1/3':'var(--ax-size-1-3)','2/3':'var(--ax-size-2-3)','1/4':'var(--ax-size-1-4)','2/4':'var(--ax-size-2-4)','3/4':'var(--ax-size-3-4)',auto:'var(--ax-size-auto)',fit:'var(--ax-size-fit)',full:'var(--ax-size-full)',max:'var(--ax-size-max)',min:'var(--ax-size-min)'},spacing:{'0':'var(--ax-spacing-0)','2':'var(--ax-spacing-2)','4':'var(--ax-spacing-4)','6':'var(--ax-spacing-6)','8':'var(--ax-spacing-8)','10':'var(--ax-spacing-10)','12':'var(--ax-spacing-12)','16':'var(--ax-spacing-16)','20':'var(--ax-spacing-20)','24':'var(--ax-spacing-24)','32':'var(--ax-spacing-32)','48':'var(--ax-spacing-48)','64':'var(--ax-spacing-64)','80':'var(--ax-spacing-80)',xs:'var(--ax-spacing-xs)',sm:'var(--ax-spacing-sm)',md:'var(--ax-spacing-md)',lg:'var(--ax-spacing-lg)',xl:'var(--ax-spacing-xl)'},zIndex:{'0':'var(--ax-zIndex-0)','10':'var(--ax-zIndex-10)','20':'var(--ax-zIndex-20)','30':'var(--ax-zIndex-30)','40':'var(--ax-zIndex-40)','50':'var(--ax-zIndex-50)',auto:'var(--ax-zIndex-auto)',popover:'var(--ax-zIndex-popover)',toast:'var(--ax-zIndex-toast)',tooltip:'var(--ax-zIndex-tooltip)'}};
1
+ var theme = {borderRadius:{xs:'var(--ax-borderRadius-xs)',sm:'var(--ax-borderRadius-sm)',md:'var(--ax-borderRadius-md)',lg:'var(--ax-borderRadius-lg)',full:'var(--ax-borderRadius-full)'},boxShadow:{sm:'var(--ax-boxShadow-sm)',md:'var(--ax-boxShadow-md)',lg:'var(--ax-boxShadow-lg)'},colors:{'bg.accent':'var(--ax-colors-bg-accent)','bg.accent.hovered':'var(--ax-colors-bg-accent-hovered)','bg.accent.light':'var(--ax-colors-bg-accent-light)','bg.accent.pressed':'var(--ax-colors-bg-accent-pressed)','bg.accent.subtle':'var(--ax-colors-bg-accent-subtle)','bg.avatar.neutral':'var(--ax-colors-bg-avatar-neutral)','bg.avatar.purple':'var(--ax-colors-bg-avatar-purple)','bg.default':'var(--ax-colors-bg-default)','bg.default.hovered':'var(--ax-colors-bg-default-hovered)','bg.default.inverse':'var(--ax-colors-bg-default-inverse)','bg.default.inverse.hovered':'var(--ax-colors-bg-default-inverse-hovered)','bg.default.inverse.pressed':'var(--ax-colors-bg-default-inverse-pressed)','bg.default.pressed':'var(--ax-colors-bg-default-pressed)','bg.error':'var(--ax-colors-bg-error)','bg.error.hovered':'var(--ax-colors-bg-error-hovered)','bg.error.light':'var(--ax-colors-bg-error-light)','bg.error.pressed':'var(--ax-colors-bg-error-pressed)','bg.error.subtle':'var(--ax-colors-bg-error-subtle)','bg.error.subtlest':'var(--ax-colors-bg-error-subtlest)','bg.information':'var(--ax-colors-bg-information)','bg.information.light':'var(--ax-colors-bg-information-light)','bg.information.subtle':'var(--ax-colors-bg-information-subtle)','bg.overlay':'var(--ax-colors-bg-overlay)','bg.page':'var(--ax-colors-bg-page)','bg.secondary':'var(--ax-colors-bg-secondary)','bg.secondary.hovered':'var(--ax-colors-bg-secondary-hovered)','bg.spinner.default':'var(--ax-colors-bg-spinner-default)','bg.spinner.inverse':'var(--ax-colors-bg-spinner-inverse)','bg.success':'var(--ax-colors-bg-success)','bg.success.hovered':'var(--ax-colors-bg-success-hovered)','bg.success.light':'var(--ax-colors-bg-success-light)','bg.success.subtle':'var(--ax-colors-bg-success-subtle)','bg.tertiary':'var(--ax-colors-bg-tertiary)','bg.tertiary.hovered':'var(--ax-colors-bg-tertiary-hovered)','bg.warning':'var(--ax-colors-bg-warning)','bg.warning.hovered':'var(--ax-colors-bg-warning-hovered)','bg.warning.light':'var(--ax-colors-bg-warning-light)','bg.warning.subtle':'var(--ax-colors-bg-warning-subtle)','border.accent':'var(--ax-colors-border-accent)','border.active':'var(--ax-colors-border-active)','border.active.hovered':'var(--ax-colors-border-active-hovered)','border.default':'var(--ax-colors-border-default)','border.default.hovered':'var(--ax-colors-border-default-hovered)','border.disabled':'var(--ax-colors-border-disabled)','border.error':'var(--ax-colors-border-error)','border.focus':'var(--ax-colors-border-focus)','border.focus.error':'var(--ax-colors-border-focus-error)','border.secondary':'var(--ax-colors-border-secondary)','border.success':'var(--ax-colors-border-success)','border.tertiary':'var(--ax-colors-border-tertiary)','border.warning':'var(--ax-colors-border-warning)','fg.accent':'var(--ax-colors-fg-accent)','fg.accent.hovered':'var(--ax-colors-fg-accent-hovered)','fg.accent.strong':'var(--ax-colors-fg-accent-strong)','fg.avatar.neutral':'var(--ax-colors-fg-avatar-neutral)','fg.avatar.purple':'var(--ax-colors-fg-avatar-purple)','fg.default':'var(--ax-colors-fg-default)','fg.default.inverse':'var(--ax-colors-fg-default-inverse)','fg.disabled':'var(--ax-colors-fg-disabled)','fg.error':'var(--ax-colors-fg-error)','fg.error.hovered':'var(--ax-colors-fg-error-hovered)','fg.error.light':'var(--ax-colors-fg-error-light)','fg.error.strong':'var(--ax-colors-fg-error-strong)','fg.information':'var(--ax-colors-fg-information)','fg.information.light':'var(--ax-colors-fg-information-light)','fg.information.strong':'var(--ax-colors-fg-information-strong)','fg.link.default':'var(--ax-colors-fg-link-default)','fg.link.default.hovered':'var(--ax-colors-fg-link-default-hovered)','fg.link.inverse':'var(--ax-colors-fg-link-inverse)','fg.link.subtle':'var(--ax-colors-fg-link-subtle)','fg.link.visited':'var(--ax-colors-fg-link-visited)','fg.secondary':'var(--ax-colors-fg-secondary)','fg.spinner.default':'var(--ax-colors-fg-spinner-default)','fg.spinner.inverse':'var(--ax-colors-fg-spinner-inverse)','fg.success':'var(--ax-colors-fg-success)','fg.success.hovered':'var(--ax-colors-fg-success-hovered)','fg.success.light':'var(--ax-colors-fg-success-light)','fg.success.strong':'var(--ax-colors-fg-success-strong)','fg.tertiary':'var(--ax-colors-fg-tertiary)','fg.warning':'var(--ax-colors-fg-warning)','fg.warning.hovered':'var(--ax-colors-fg-warning-hovered)','fg.warning.inverse':'var(--ax-colors-fg-warning-inverse)','fg.warning.light':'var(--ax-colors-fg-warning-light)','fg.warning.strong':'var(--ax-colors-fg-warning-strong)','fg.white':'var(--ax-colors-fg-white)'},fontFamily:{mono:'var(--ax-fontFamily-mono)',sans:'var(--ax-fontFamily-sans)'},fontSize:{xs:{fontSize:'var(--ax-fontSize-xs-fontSize)',lineHeight:'var(--ax-fontSize-xs-lineHeight)'},sm:{fontSize:'var(--ax-fontSize-sm-fontSize)',lineHeight:'var(--ax-fontSize-sm-lineHeight)'},md:{fontSize:'var(--ax-fontSize-md-fontSize)',lineHeight:'var(--ax-fontSize-md-lineHeight)'},lg:{fontSize:'var(--ax-fontSize-lg-fontSize)',lineHeight:'var(--ax-fontSize-lg-lineHeight)'},xl:{fontSize:'var(--ax-fontSize-xl-fontSize)',lineHeight:'var(--ax-fontSize-xl-lineHeight)'},'2xl':{fontSize:'var(--ax-fontSize-2xl-fontSize)',lineHeight:'var(--ax-fontSize-2xl-lineHeight)'},'3xl':{fontSize:'var(--ax-fontSize-3xl-fontSize)',lineHeight:'var(--ax-fontSize-3xl-lineHeight)'},'4xl':{fontSize:'var(--ax-fontSize-4xl-fontSize)',lineHeight:'var(--ax-fontSize-4xl-lineHeight)'},'5xl':{fontSize:'var(--ax-fontSize-5xl-fontSize)',lineHeight:'var(--ax-fontSize-5xl-lineHeight)'}},maxSize:{xs:'var(--ax-maxSize-xs)',sm:'var(--ax-maxSize-sm)',md:'var(--ax-maxSize-md)',lg:'var(--ax-maxSize-lg)'},screens:{sm:'var(--ax-screens-sm)',md:'var(--ax-screens-md)'},size:{'2xs':'var(--ax-size-2xs)',xs:'var(--ax-size-xs)',sm:'var(--ax-size-sm)',md:'var(--ax-size-md)',lg:'var(--ax-size-lg)',xl:'var(--ax-size-xl)','3xl':'var(--ax-size-3xl)'},zIndex:{popover:'var(--ax-zIndex-popover)',toast:'var(--ax-zIndex-toast)',tooltip:'var(--ax-zIndex-tooltip)'}};
2
2
 
3
3
  export { theme };
@@ -5,9 +5,7 @@ const borderRadius = {
5
5
  sm: rem("4px"),
6
6
  md: rem("6px"),
7
7
  lg: rem("8px"),
8
- xl: rem("12px"),
9
- full: "9999px",
10
- none: "0"
8
+ full: "9999px"
11
9
  };
12
10
 
13
11
  export { borderRadius };
@@ -1,11 +1,7 @@
1
1
  const boxShadow = {
2
- xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
3
2
  sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
4
3
  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
5
- lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
6
- xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
7
- inner: "inset 0 0 6px 0 rgb(0 0 0 / 0.1);",
8
- none: "0 0 #0000"
4
+ lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
9
5
  };
10
6
 
11
7
  export { boxShadow };
@@ -106,17 +106,13 @@ const colorPalette = {
106
106
  "yellow.900": "#4E1D09"
107
107
  };
108
108
  const colors = {
109
- current: "currentColor",
110
- transparent: "transparent",
111
- "avatar.bg.neutral": colorPalette["neutral.100"],
112
- "avatar.bg.purple": colorPalette["purple.100"],
113
- "avatar.fg.neutral": colorPalette["neutral.700"],
114
- "avatar.fg.purple": colorPalette["purple.700"],
115
109
  "bg.accent": colorPalette["brand.500"],
116
110
  "bg.accent.hovered": colorPalette["brand.600"],
117
111
  "bg.accent.light": colorPalette["brand.200"],
118
112
  "bg.accent.pressed": colorPalette["brand.700"],
119
113
  "bg.accent.subtle": colorPalette["brand.50"],
114
+ "bg.avatar.neutral": colorPalette["neutral.100"],
115
+ "bg.avatar.purple": colorPalette["purple.100"],
120
116
  "bg.default": colorPalette["neutral.00"],
121
117
  "bg.default.hovered": colorPalette["neutral.1200/4"],
122
118
  "bg.default.inverse": colorPalette["neutral.800"],
@@ -136,6 +132,8 @@ const colors = {
136
132
  "bg.page": colorPalette["neutral.50"],
137
133
  "bg.secondary": colorPalette["neutral.75"],
138
134
  "bg.secondary.hovered": colorPalette["neutral.75"],
135
+ "bg.spinner.default": colorPalette["neutral.1200"],
136
+ "bg.spinner.inverse": colorPalette["neutral.50"],
139
137
  "bg.success": colorPalette["green.600"],
140
138
  "bg.success.hovered": colorPalette["green.700"],
141
139
  "bg.success.light": colorPalette["green.200"],
@@ -162,6 +160,8 @@ const colors = {
162
160
  "fg.accent": colorPalette["brand.500"],
163
161
  "fg.accent.hovered": colorPalette["brand.600"],
164
162
  "fg.accent.strong": colorPalette["brand.700"],
163
+ "fg.avatar.neutral": colorPalette["neutral.700"],
164
+ "fg.avatar.purple": colorPalette["purple.700"],
165
165
  "fg.default": colorPalette["neutral.800"],
166
166
  "fg.default.inverse": colorPalette["neutral.00"],
167
167
  "fg.disabled": colorPalette["neutral.200"],
@@ -172,7 +172,14 @@ const colors = {
172
172
  "fg.information": colorPalette["blue.500"],
173
173
  "fg.information.light": colorPalette["blue.300"],
174
174
  "fg.information.strong": colorPalette["blue.700"],
175
+ "fg.link.default": colorPalette["brand.500"],
176
+ "fg.link.default.hovered": colorPalette["brand.600"],
177
+ "fg.link.inverse": colorPalette["neutral.00"],
178
+ "fg.link.subtle": colorPalette["neutral.800"],
179
+ "fg.link.visited": colorPalette["purple.600"],
175
180
  "fg.secondary": colorPalette["neutral.700"],
181
+ "fg.spinner.default": colorPalette["neutral.800"],
182
+ "fg.spinner.inverse": colorPalette["neutral.200"],
176
183
  "fg.success": colorPalette["green.500"],
177
184
  "fg.success.hovered": colorPalette["green.600"],
178
185
  "fg.success.light": colorPalette["green.300"],
@@ -183,29 +190,16 @@ const colors = {
183
190
  "fg.warning.inverse": colorPalette["neutral.800"],
184
191
  "fg.warning.light": colorPalette["yellow.300"],
185
192
  "fg.warning.strong": colorPalette["yellow.700"],
186
- "fg.white": colorPalette["neutral.00"],
187
- "link.fg.default": colorPalette["brand.500"],
188
- "link.fg.default.hovered": colorPalette["brand.600"],
189
- "link.fg.inverse": colorPalette["neutral.00"],
190
- "link.fg.subtle": colorPalette["neutral.800"],
191
- "link.fg.visited": colorPalette["purple.600"],
192
- "spinner.bg.default": colorPalette["neutral.1200"],
193
- "spinner.bg.inverse": colorPalette["neutral.50"],
194
- "spinner.fg.default": colorPalette["neutral.800"],
195
- "spinner.fg.inverse": colorPalette["neutral.200"]
193
+ "fg.white": colorPalette["neutral.00"]
196
194
  };
197
195
  const colorsDark = {
198
- current: "currentColor",
199
- transparent: "transparent",
200
- "avatar.bg.neutral": colorPalette["neutral.800"],
201
- "avatar.bg.purple": colorPalette["purple.800"],
202
- "avatar.fg.neutral": colorPalette["neutral.100"],
203
- "avatar.fg.purple": colorPalette["purple.100"],
204
196
  "bg.accent": colorPalette["brand.400"],
205
197
  "bg.accent.hovered": colorPalette["brand.400"],
206
198
  "bg.accent.light": colorPalette["brand.800"],
207
199
  "bg.accent.pressed": colorPalette["brand.600"],
208
200
  "bg.accent.subtle": colorPalette["brand.900"],
201
+ "bg.avatar.neutral": colorPalette["neutral.800"],
202
+ "bg.avatar.purple": colorPalette["purple.800"],
209
203
  "bg.default": colorPalette["neutral.1000"],
210
204
  "bg.default.hovered": colorPalette["neutral.50/6"],
211
205
  "bg.default.inverse": colorPalette["neutral.100"],
@@ -225,6 +219,8 @@ const colorsDark = {
225
219
  "bg.page": colorPalette["neutral.1100"],
226
220
  "bg.secondary": colorPalette["neutral.900"],
227
221
  "bg.secondary.hovered": colorPalette["neutral.50/12"],
222
+ "bg.spinner.default": colorPalette["neutral.50"],
223
+ "bg.spinner.inverse": colorPalette["neutral.50"],
228
224
  "bg.success": colorPalette["green.600"],
229
225
  "bg.success.hovered": colorPalette["green.400"],
230
226
  "bg.success.light": colorPalette["green.800"],
@@ -251,6 +247,8 @@ const colorsDark = {
251
247
  "fg.accent": colorPalette["brand.300"],
252
248
  "fg.accent.hovered": colorPalette["brand.500"],
253
249
  "fg.accent.strong": colorPalette["brand.400"],
250
+ "fg.avatar.neutral": colorPalette["neutral.100"],
251
+ "fg.avatar.purple": colorPalette["purple.100"],
254
252
  "fg.default": colorPalette["neutral.75"],
255
253
  "fg.default.inverse": colorPalette["neutral.800"],
256
254
  "fg.disabled": colorPalette["neutral.50/32"],
@@ -261,7 +259,14 @@ const colorsDark = {
261
259
  "fg.information": colorPalette["blue.300"],
262
260
  "fg.information.light": colorPalette["blue.300"],
263
261
  "fg.information.strong": colorPalette["blue.200"],
262
+ "fg.link.default": colorPalette["brand.400"],
263
+ "fg.link.default.hovered": colorPalette["brand.200"],
264
+ "fg.link.inverse": colorPalette["neutral.00"],
265
+ "fg.link.subtle": colorPalette["neutral.800"],
266
+ "fg.link.visited": colorPalette["purple.500"],
264
267
  "fg.secondary": colorPalette["neutral.200"],
268
+ "fg.spinner.default": colorPalette["neutral.200"],
269
+ "fg.spinner.inverse": colorPalette["neutral.800"],
265
270
  "fg.success": colorPalette["green.300"],
266
271
  "fg.success.hovered": colorPalette["green.600"],
267
272
  "fg.success.light": colorPalette["green.300"],
@@ -272,16 +277,7 @@ const colorsDark = {
272
277
  "fg.warning.inverse": colorPalette["neutral.800"],
273
278
  "fg.warning.light": colorPalette["yellow.300"],
274
279
  "fg.warning.strong": colorPalette["yellow.200"],
275
- "fg.white": colorPalette["neutral.00"],
276
- "link.fg.default": colorPalette["brand.400"],
277
- "link.fg.default.hovered": colorPalette["brand.200"],
278
- "link.fg.inverse": colorPalette["neutral.00"],
279
- "link.fg.subtle": colorPalette["neutral.800"],
280
- "link.fg.visited": colorPalette["purple.500"],
281
- "spinner.bg.default": colorPalette["neutral.50"],
282
- "spinner.bg.inverse": colorPalette["neutral.50"],
283
- "spinner.fg.default": colorPalette["neutral.200"],
284
- "spinner.fg.inverse": colorPalette["neutral.800"]
280
+ "fg.white": colorPalette["neutral.00"]
285
281
  };
286
282
 
287
283
  export { colorPalette, colors, colorsDark };
@@ -36,14 +36,6 @@ const fontSize = {
36
36
  "5xl": {
37
37
  fontSize: rem("36px"),
38
38
  lineHeight: rem("40px")
39
- },
40
- "6xl": {
41
- fontSize: rem("48px"),
42
- lineHeight: "1"
43
- },
44
- "7xl": {
45
- fontSize: rem("60px"),
46
- lineHeight: "1"
47
39
  }
48
40
  };
49
41
 
@@ -1,32 +1,22 @@
1
1
  import { borderRadius } from './borderRadius.js';
2
- import { borderWidth } from './borderWidth.js';
3
2
  import { boxShadow } from './boxShadow.js';
4
3
  import { colors, colorsDark } from './colors.js';
5
4
  import { fontFamily } from './fontFamily.js';
6
5
  import { fontSize } from './fontSize.js';
7
- import { letterSpacing } from './letterSpacing.js';
8
- import { lineHeight } from './lineHeight.js';
9
- import { margins } from './margins.js';
10
6
  import { maxSize } from './maxSize.js';
11
7
  import { screens } from './screens.js';
12
8
  import { size } from './size.js';
13
- import { spacing } from './spacing.js';
14
9
  import { zIndex } from './zIndex.js';
15
10
 
16
11
  const tokens = {
17
12
  borderRadius,
18
- borderWidth,
19
13
  boxShadow,
20
14
  colors,
21
15
  fontFamily,
22
16
  fontSize,
23
- letterSpacing,
24
- lineHeight,
25
- margins,
26
17
  maxSize,
27
18
  screens,
28
19
  size,
29
- spacing,
30
20
  zIndex
31
21
  };
32
22
  const tokensDark = {
@@ -4,10 +4,7 @@ const maxSize = {
4
4
  xs: rem("320px"),
5
5
  sm: rem("384px"),
6
6
  md: rem("448px"),
7
- lg: rem("512px"),
8
- xl: rem("576px"),
9
- "2xl": rem("672px"),
10
- full: "100%"
7
+ lg: rem("512px")
11
8
  };
12
9
 
13
10
  export { maxSize };
@@ -2,8 +2,7 @@ import { rem } from './rem.js';
2
2
 
3
3
  const screens = {
4
4
  sm: rem("600px"),
5
- md: rem("900px"),
6
- lg: rem("1200px")
5
+ md: rem("900px")
7
6
  };
8
7
 
9
8
  export { screens };
@@ -7,50 +7,7 @@ const size = {
7
7
  md: rem("32px"),
8
8
  lg: rem("40px"),
9
9
  xl: rem("48px"),
10
- "2xl": rem("56px"),
11
- "5xl": rem("80px"),
12
- "0": "0",
13
- "1": rem("1px"),
14
- "2": rem("2px"),
15
- "4": rem("4px"),
16
- "6": rem("6px"),
17
- "8": rem("8px"),
18
- "10": rem("10px"),
19
- "12": rem("12px"),
20
- "16": rem("16px"),
21
- "20": rem("20px"),
22
- "24": rem("24px"),
23
- "32": rem("32px"),
24
- "40": rem("40px"),
25
- "48": rem("48px"),
26
- "56": rem("56px"),
27
- "64": rem("64px"),
28
- "80": rem("80px"),
29
- "96": rem("96px"),
30
- "112": rem("112px"),
31
- "128": rem("128px"),
32
- "144": rem("144px"),
33
- "160": rem("160px"),
34
- "176": rem("176px"),
35
- "192": rem("192px"),
36
- "208": rem("208px"),
37
- "224": rem("224px"),
38
- "240": rem("240px"),
39
- "256": rem("256px"),
40
- "288": rem("288px"),
41
- "320": rem("320px"),
42
- "384": rem("384px"),
43
- "1/2": "50%",
44
- "1/3": "33.333333%",
45
- "2/3": "66.666666%",
46
- "1/4": "25%",
47
- "2/4": "50%",
48
- "3/4": "75%",
49
- auto: "auto",
50
- fit: "fit-content",
51
- full: "100%",
52
- max: "max-content",
53
- min: "min-content"
10
+ "3xl": rem("80px")
54
11
  };
55
12
 
56
13
  export { size };
@@ -1,11 +1,4 @@
1
1
  const zIndex = {
2
- "0": "0",
3
- "10": "10",
4
- "20": "20",
5
- "30": "30",
6
- "40": "40",
7
- "50": "50",
8
- auto: "auto",
9
2
  popover: "3000",
10
3
  toast: "3010",
11
4
  tooltip: "10000"
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "url": "https://github.com/optimizely-axiom/optiaxiom.git"
8
8
  },
9
9
  "type": "module",
10
- "version": "0.4.4",
10
+ "version": "0.5.0",
11
11
  "files": [
12
12
  "dist/**",
13
13
  "LICENSE"
@@ -1,8 +0,0 @@
1
- const borderWidth = {
2
- "0": "0",
3
- "1": "1px",
4
- "2": "2px",
5
- "4": "4px"
6
- };
7
-
8
- export { borderWidth };
@@ -1,10 +0,0 @@
1
- const letterSpacing = {
2
- tighter: "-0.05em",
3
- tight: "-0.025em",
4
- normal: "0",
5
- wide: "0.025em",
6
- wider: "0.05em",
7
- widest: "0.1em"
8
- };
9
-
10
- export { letterSpacing };
@@ -1,8 +0,0 @@
1
- const lineHeight = {
2
- none: "1",
3
- tight: "1.25",
4
- normal: "1.5",
5
- loose: "2"
6
- };
7
-
8
- export { lineHeight };
@@ -1,25 +0,0 @@
1
- import { rem } from './rem.js';
2
- import { spacing } from './spacing.js';
3
-
4
- const margins = {
5
- ...spacing,
6
- "-xs": rem("-8px"),
7
- "-sm": rem("-12px"),
8
- "-md": rem("-16px"),
9
- "-lg": rem("-24px"),
10
- "-xl": rem("-32px"),
11
- "-2": rem("-2px"),
12
- "-4": rem("-4px"),
13
- "-6": rem("-6px"),
14
- "-8": rem("-8px"),
15
- "-10": rem("-10px"),
16
- "-12": rem("-12px"),
17
- "-16": rem("-16px"),
18
- "-24": rem("-24px"),
19
- "-32": rem("-32px"),
20
- "-48": rem("-48px"),
21
- "-64": rem("-64px"),
22
- "-80": rem("-80px")
23
- };
24
-
25
- export { margins };
@@ -1,25 +0,0 @@
1
- import { rem } from './rem.js';
2
-
3
- const spacing = {
4
- xs: rem("8px"),
5
- sm: rem("12px"),
6
- md: rem("16px"),
7
- lg: rem("24px"),
8
- xl: rem("32px"),
9
- "0": "0",
10
- "2": rem("2px"),
11
- "4": rem("4px"),
12
- "6": rem("6px"),
13
- "8": rem("8px"),
14
- "10": rem("10px"),
15
- "12": rem("12px"),
16
- "16": rem("16px"),
17
- "20": rem("20px"),
18
- "24": rem("24px"),
19
- "32": rem("32px"),
20
- "48": rem("48px"),
21
- "64": rem("64px"),
22
- "80": rem("80px")
23
- };
24
-
25
- export { spacing };