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