@common-origin/design-system 2.12.2 → 2.14.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/client.esm.js +7544 -0
- package/dist/client.esm.js.map +1 -0
- package/dist/client.js +7602 -0
- package/dist/client.js.map +1 -0
- package/dist/components/molecules/Alert/Alert.d.ts +2 -1
- package/dist/components/molecules/Sheet/Sheet.d.ts +2 -2
- package/dist/data.esm.js +1921 -0
- package/dist/data.esm.js.map +1 -0
- package/dist/data.js +1926 -0
- package/dist/data.js.map +1 -0
- package/dist/index.esm.js +7 -9015
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +64 -9068
- package/dist/index.js.map +1 -1
- package/dist/lib/styleUtils.d.ts +3 -0
- package/dist/lib/usePresence.d.ts +16 -0
- package/dist/styles/tokens.json +231 -3
- package/dist/tokens/index.esm.js +231 -3
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +231 -3
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/types/tokens.d.ts +228 -0
- package/dist/types/tokens.d.ts +228 -0
- package/package.json +18 -6
package/dist/lib/styleUtils.d.ts
CHANGED
|
@@ -14,3 +14,6 @@ export declare const media: {
|
|
|
14
14
|
xl: string;
|
|
15
15
|
'2xl': string;
|
|
16
16
|
};
|
|
17
|
+
export declare const reducedMotion = "@media (prefers-reduced-motion: reduce)";
|
|
18
|
+
export declare const exitAnimation: import("styled-components").RuleSet<object>;
|
|
19
|
+
export declare const visuallyHidden: import("styled-components").RuleSet<object>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type RefObject } from 'react';
|
|
2
|
+
export declare const EXIT_DURATION_MS: number;
|
|
3
|
+
/**
|
|
4
|
+
* Keeps an element mounted for `exitMs` after `isOpen` turns false, so its exit
|
|
5
|
+
* animation can run before it unmounts (decision 0005).
|
|
6
|
+
*/
|
|
7
|
+
export declare function usePresence(isOpen: boolean, exitMs?: number): {
|
|
8
|
+
isPresent: boolean;
|
|
9
|
+
isExiting: boolean;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Makes an element inert while `isInert` is true, so an exiting overlay's controls leave
|
|
13
|
+
* the tab order and can't be activated. Set through the DOM because React 18 has no
|
|
14
|
+
* `inert` prop.
|
|
15
|
+
*/
|
|
16
|
+
export declare function useInert(ref: RefObject<HTMLElement | null>, isInert: boolean): void;
|
package/dist/styles/tokens.json
CHANGED
|
@@ -76,17 +76,29 @@
|
|
|
76
76
|
"8": "2rem",
|
|
77
77
|
"9": "2.25rem",
|
|
78
78
|
"10": "2.5rem",
|
|
79
|
+
"11": "2.75rem",
|
|
79
80
|
"12": "3rem",
|
|
80
81
|
"14": "3.5rem",
|
|
82
|
+
"15": "3.75rem",
|
|
81
83
|
"16": "4rem",
|
|
84
|
+
"18": "4.5rem",
|
|
82
85
|
"20": "5rem",
|
|
83
86
|
"24": "6rem",
|
|
84
87
|
"28": "7rem",
|
|
88
|
+
"30": "7.5rem",
|
|
85
89
|
"32": "8rem",
|
|
86
90
|
"40": "10rem",
|
|
91
|
+
"45": "11.25rem",
|
|
87
92
|
"48": "12rem",
|
|
93
|
+
"50": "12.5rem",
|
|
88
94
|
"56": "14rem",
|
|
89
95
|
"64": "16rem",
|
|
96
|
+
"75": "18.75rem",
|
|
97
|
+
"90": "22.5rem",
|
|
98
|
+
"100": "25rem",
|
|
99
|
+
"140": "35rem",
|
|
100
|
+
"180": "45rem",
|
|
101
|
+
"192": "48rem",
|
|
90
102
|
"auto": "auto",
|
|
91
103
|
"full": "100%",
|
|
92
104
|
"screen": "100vh",
|
|
@@ -276,7 +288,8 @@
|
|
|
276
288
|
"8": "2.5rem",
|
|
277
289
|
"9": "3rem",
|
|
278
290
|
"10": "4.5rem",
|
|
279
|
-
"11": "5rem"
|
|
291
|
+
"11": "5rem",
|
|
292
|
+
"none": "1"
|
|
280
293
|
},
|
|
281
294
|
"letterSpacing": {
|
|
282
295
|
"0": "-0.125rem",
|
|
@@ -649,6 +662,9 @@
|
|
|
649
662
|
"textColor": "#adb5bd",
|
|
650
663
|
"borderColor": "#dee2e6",
|
|
651
664
|
"cursor": "not-allowed"
|
|
665
|
+
},
|
|
666
|
+
"textarea": {
|
|
667
|
+
"minHeight": "7.5rem"
|
|
652
668
|
}
|
|
653
669
|
},
|
|
654
670
|
"badge": {
|
|
@@ -658,12 +674,138 @@
|
|
|
658
674
|
"count": {
|
|
659
675
|
"minWidth": "1rem",
|
|
660
676
|
"height": "1rem",
|
|
661
|
-
"paddingX": "0.25rem"
|
|
677
|
+
"paddingX": "0.25rem",
|
|
678
|
+
"lineHeight": "1"
|
|
662
679
|
},
|
|
663
680
|
"ring": {
|
|
664
681
|
"width": "0.125rem"
|
|
665
682
|
},
|
|
666
|
-
"borderRadius": "10rem"
|
|
683
|
+
"borderRadius": "10rem",
|
|
684
|
+
"label": {
|
|
685
|
+
"fontWeight": "500",
|
|
686
|
+
"typography": {
|
|
687
|
+
"small": "400 0.75rem/1rem 'Inter', sans-serif",
|
|
688
|
+
"medium": "400 0.875rem/1.25rem 'Inter', sans-serif"
|
|
689
|
+
}
|
|
690
|
+
}
|
|
691
|
+
},
|
|
692
|
+
"field": {
|
|
693
|
+
"gap": "0.5rem",
|
|
694
|
+
"label": {
|
|
695
|
+
"typography": "600 0.875rem/1.25rem 'Inter', sans-serif",
|
|
696
|
+
"color": "#212529",
|
|
697
|
+
"colorDisabled": "#adb5bd",
|
|
698
|
+
"gap": "0.25rem"
|
|
699
|
+
},
|
|
700
|
+
"requiredIndicator": {
|
|
701
|
+
"color": "#D31510",
|
|
702
|
+
"fontWeight": "700"
|
|
703
|
+
},
|
|
704
|
+
"helperText": {
|
|
705
|
+
"typography": "400 0.75rem/1rem 'Inter', sans-serif",
|
|
706
|
+
"color": "#495057",
|
|
707
|
+
"colorError": "#D31510"
|
|
708
|
+
}
|
|
709
|
+
},
|
|
710
|
+
"alert": {
|
|
711
|
+
"title": {
|
|
712
|
+
"typography": "500 1.125rem/1.5rem 'Inter', sans-serif",
|
|
713
|
+
"fontWeight": "600",
|
|
714
|
+
"lineHeight": "1.25rem"
|
|
715
|
+
},
|
|
716
|
+
"message": {
|
|
717
|
+
"typography": "400 1rem/1.5rem 'Inter', sans-serif",
|
|
718
|
+
"lineHeight": "1.25rem"
|
|
719
|
+
}
|
|
720
|
+
},
|
|
721
|
+
"tabBar": {
|
|
722
|
+
"badge": {
|
|
723
|
+
"typography": "400 0.75rem/1rem 'Inter', sans-serif",
|
|
724
|
+
"fontWeight": "700",
|
|
725
|
+
"size": "1.25rem"
|
|
726
|
+
},
|
|
727
|
+
"scrollbar": {
|
|
728
|
+
"height": "0.25rem"
|
|
729
|
+
}
|
|
730
|
+
},
|
|
731
|
+
"searchField": {
|
|
732
|
+
"sectionHeader": {
|
|
733
|
+
"typography": "400 0.75rem/1rem 'Inter', sans-serif",
|
|
734
|
+
"letterSpacing": "0.125rem"
|
|
735
|
+
}
|
|
736
|
+
},
|
|
737
|
+
"avatar": {
|
|
738
|
+
"initials": {
|
|
739
|
+
"fontFamily": "'Inter', sans-serif",
|
|
740
|
+
"fontWeight": "500",
|
|
741
|
+
"lineHeight": "1",
|
|
742
|
+
"fontSize": {
|
|
743
|
+
"xs": "0.75rem",
|
|
744
|
+
"sm": "0.875rem",
|
|
745
|
+
"md": "1rem",
|
|
746
|
+
"lg": "1.125rem",
|
|
747
|
+
"xl": "1.25rem"
|
|
748
|
+
}
|
|
749
|
+
}
|
|
750
|
+
},
|
|
751
|
+
"codeBlock": {
|
|
752
|
+
"fontFamily": "Menlo, Monaco, Consolas, Courier New, monospace",
|
|
753
|
+
"fontSize": "0.75rem",
|
|
754
|
+
"lineHeight": "1.25rem"
|
|
755
|
+
},
|
|
756
|
+
"slider": {
|
|
757
|
+
"thumb": {
|
|
758
|
+
"shadow": {
|
|
759
|
+
"default": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
|
|
760
|
+
"hover": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
|
761
|
+
"active": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
|
|
762
|
+
}
|
|
763
|
+
}
|
|
764
|
+
},
|
|
765
|
+
"accountCard": {
|
|
766
|
+
"header": {
|
|
767
|
+
"minHeight": "3rem"
|
|
768
|
+
},
|
|
769
|
+
"minWidth": "18.75rem"
|
|
770
|
+
},
|
|
771
|
+
"breadcrumbs": {
|
|
772
|
+
"item": {
|
|
773
|
+
"maxWidth": "11.25rem"
|
|
774
|
+
}
|
|
775
|
+
},
|
|
776
|
+
"cardLarge": {
|
|
777
|
+
"maxWidth": "48rem"
|
|
778
|
+
},
|
|
779
|
+
"checkbox": {
|
|
780
|
+
"box": {
|
|
781
|
+
"size": "1.25rem"
|
|
782
|
+
},
|
|
783
|
+
"row": {
|
|
784
|
+
"minHeight": "2rem"
|
|
785
|
+
}
|
|
786
|
+
},
|
|
787
|
+
"emptyState": {
|
|
788
|
+
"illustration": {
|
|
789
|
+
"small": "5rem",
|
|
790
|
+
"medium": "7.5rem",
|
|
791
|
+
"large": "12.5rem"
|
|
792
|
+
},
|
|
793
|
+
"maxWidth": "25rem",
|
|
794
|
+
"text": {
|
|
795
|
+
"maxWidth": "22.5rem"
|
|
796
|
+
},
|
|
797
|
+
"actions": {
|
|
798
|
+
"maxWidth": "18.75rem"
|
|
799
|
+
}
|
|
800
|
+
},
|
|
801
|
+
"listItem": {
|
|
802
|
+
"expandedIndent": {
|
|
803
|
+
"compact": "3rem",
|
|
804
|
+
"comfortable": "3.75rem"
|
|
805
|
+
}
|
|
806
|
+
},
|
|
807
|
+
"transactionListItem": {
|
|
808
|
+
"minHeight": "4.5rem"
|
|
667
809
|
},
|
|
668
810
|
"$ref": "./component/index.json"
|
|
669
811
|
},
|
|
@@ -676,12 +818,63 @@
|
|
|
676
818
|
"overlay": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
|
677
819
|
"sticky": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
|
|
678
820
|
},
|
|
821
|
+
"breakpoint": {
|
|
822
|
+
"xs": "0px",
|
|
823
|
+
"sm": "640px",
|
|
824
|
+
"md": "768px",
|
|
825
|
+
"lg": "1024px",
|
|
826
|
+
"xl": "1280px",
|
|
827
|
+
"2xl": "1536px"
|
|
828
|
+
},
|
|
829
|
+
"opacity": {
|
|
830
|
+
"disabled": "0.5",
|
|
831
|
+
"full": "1"
|
|
832
|
+
},
|
|
833
|
+
"fontFamily": {
|
|
834
|
+
"body": "'Inter', sans-serif",
|
|
835
|
+
"monospace": "Menlo, Monaco, Consolas, Courier New, monospace"
|
|
836
|
+
},
|
|
837
|
+
"fontSize": {
|
|
838
|
+
"xs": "0.75rem",
|
|
839
|
+
"sm": "0.875rem",
|
|
840
|
+
"md": "1rem",
|
|
841
|
+
"lg": "1.125rem",
|
|
842
|
+
"xl": "1.25rem"
|
|
843
|
+
},
|
|
844
|
+
"lineHeight": {
|
|
845
|
+
"none": "1",
|
|
846
|
+
"tight": "1.25rem",
|
|
847
|
+
"normal": "1.5rem"
|
|
848
|
+
},
|
|
849
|
+
"letterSpacing": {
|
|
850
|
+
"tighter": "-0.125rem",
|
|
851
|
+
"tight": "-0.0625rem",
|
|
852
|
+
"normal": "0rem",
|
|
853
|
+
"wide": "0.125rem"
|
|
854
|
+
},
|
|
855
|
+
"fontWeight": {
|
|
856
|
+
"regular": "400",
|
|
857
|
+
"medium": "500",
|
|
858
|
+
"semibold": "600",
|
|
859
|
+
"bold": "700"
|
|
860
|
+
},
|
|
861
|
+
"zIndex": {
|
|
862
|
+
"sticky": "10",
|
|
863
|
+
"dropdown": "1000",
|
|
864
|
+
"overlay": "1010",
|
|
865
|
+
"modal": "1020"
|
|
866
|
+
},
|
|
679
867
|
"border": {
|
|
680
868
|
"default": "0.0625rem solid #e9ecef",
|
|
681
869
|
"subtle": "0.0625rem solid #dee2e6",
|
|
682
870
|
"strong": "0.0625rem solid #343a40",
|
|
683
871
|
"focus": "0.125rem solid #343a40",
|
|
684
872
|
"tooltip": "0.125rem dotted #dee2e6",
|
|
873
|
+
"width": {
|
|
874
|
+
"thin": "0.0625rem",
|
|
875
|
+
"thick": "0.125rem"
|
|
876
|
+
},
|
|
877
|
+
"focusOffset": "0.125rem",
|
|
685
878
|
"radius": {
|
|
686
879
|
"none": "0",
|
|
687
880
|
"xs": "0.125rem",
|
|
@@ -695,6 +888,31 @@
|
|
|
695
888
|
}
|
|
696
889
|
},
|
|
697
890
|
"size": {
|
|
891
|
+
"touchTarget": "2.75rem",
|
|
892
|
+
"overlay": {
|
|
893
|
+
"sm": "25rem",
|
|
894
|
+
"md": "35rem",
|
|
895
|
+
"lg": "45rem"
|
|
896
|
+
},
|
|
897
|
+
"menu": {
|
|
898
|
+
"maxHeight": "18.75rem"
|
|
899
|
+
},
|
|
900
|
+
"dimension": {
|
|
901
|
+
"1": "0.25rem",
|
|
902
|
+
"5": "1.25rem",
|
|
903
|
+
"8": "2rem",
|
|
904
|
+
"12": "3rem",
|
|
905
|
+
"15": "3.75rem",
|
|
906
|
+
"18": "4.5rem",
|
|
907
|
+
"20": "5rem",
|
|
908
|
+
"30": "7.5rem",
|
|
909
|
+
"45": "11.25rem",
|
|
910
|
+
"50": "12.5rem",
|
|
911
|
+
"75": "18.75rem",
|
|
912
|
+
"90": "22.5rem",
|
|
913
|
+
"100": "25rem",
|
|
914
|
+
"192": "48rem"
|
|
915
|
+
},
|
|
698
916
|
"icon": {
|
|
699
917
|
"xs": "0.75rem",
|
|
700
918
|
"sm": "1rem",
|
|
@@ -742,6 +960,7 @@
|
|
|
742
960
|
"8xl": "3.5rem",
|
|
743
961
|
"9xl": "4rem",
|
|
744
962
|
"10xl": "5rem",
|
|
963
|
+
"11xl": "6rem",
|
|
745
964
|
"auto": "auto"
|
|
746
965
|
}
|
|
747
966
|
},
|
|
@@ -871,6 +1090,15 @@
|
|
|
871
1090
|
"breadcrumb": "400 0.75rem/1.125rem 'Inter', sans-serif"
|
|
872
1091
|
},
|
|
873
1092
|
"motion": {
|
|
1093
|
+
"duration": {
|
|
1094
|
+
"normal": "200ms",
|
|
1095
|
+
"fast": "150ms",
|
|
1096
|
+
"slow": "300ms"
|
|
1097
|
+
},
|
|
1098
|
+
"easing": {
|
|
1099
|
+
"easeInOut": "ease-in-out",
|
|
1100
|
+
"easeOut": "ease-out"
|
|
1101
|
+
},
|
|
874
1102
|
"transition": {
|
|
875
1103
|
"fast": "all 150ms ease-out",
|
|
876
1104
|
"normal": "all 200ms ease-in-out",
|
package/dist/tokens/index.esm.js
CHANGED
|
@@ -75,17 +75,29 @@ var base = {
|
|
|
75
75
|
"8": "2rem",
|
|
76
76
|
"9": "2.25rem",
|
|
77
77
|
"10": "2.5rem",
|
|
78
|
+
"11": "2.75rem",
|
|
78
79
|
"12": "3rem",
|
|
79
80
|
"14": "3.5rem",
|
|
81
|
+
"15": "3.75rem",
|
|
80
82
|
"16": "4rem",
|
|
83
|
+
"18": "4.5rem",
|
|
81
84
|
"20": "5rem",
|
|
82
85
|
"24": "6rem",
|
|
83
86
|
"28": "7rem",
|
|
87
|
+
"30": "7.5rem",
|
|
84
88
|
"32": "8rem",
|
|
85
89
|
"40": "10rem",
|
|
90
|
+
"45": "11.25rem",
|
|
86
91
|
"48": "12rem",
|
|
92
|
+
"50": "12.5rem",
|
|
87
93
|
"56": "14rem",
|
|
88
94
|
"64": "16rem",
|
|
95
|
+
"75": "18.75rem",
|
|
96
|
+
"90": "22.5rem",
|
|
97
|
+
"100": "25rem",
|
|
98
|
+
"140": "35rem",
|
|
99
|
+
"180": "45rem",
|
|
100
|
+
"192": "48rem",
|
|
89
101
|
auto: "auto",
|
|
90
102
|
full: "100%",
|
|
91
103
|
screen: "100vh",
|
|
@@ -275,7 +287,8 @@ var base = {
|
|
|
275
287
|
"8": "2.5rem",
|
|
276
288
|
"9": "3rem",
|
|
277
289
|
"10": "4.5rem",
|
|
278
|
-
"11": "5rem"
|
|
290
|
+
"11": "5rem",
|
|
291
|
+
none: "1"
|
|
279
292
|
},
|
|
280
293
|
letterSpacing: {
|
|
281
294
|
"0": "-0.125rem",
|
|
@@ -648,6 +661,9 @@ var component = {
|
|
|
648
661
|
textColor: "#adb5bd",
|
|
649
662
|
borderColor: "#dee2e6",
|
|
650
663
|
cursor: "not-allowed"
|
|
664
|
+
},
|
|
665
|
+
textarea: {
|
|
666
|
+
minHeight: "7.5rem"
|
|
651
667
|
}
|
|
652
668
|
},
|
|
653
669
|
badge: {
|
|
@@ -657,12 +673,138 @@ var component = {
|
|
|
657
673
|
count: {
|
|
658
674
|
minWidth: "1rem",
|
|
659
675
|
height: "1rem",
|
|
660
|
-
paddingX: "0.25rem"
|
|
676
|
+
paddingX: "0.25rem",
|
|
677
|
+
lineHeight: "1"
|
|
661
678
|
},
|
|
662
679
|
ring: {
|
|
663
680
|
width: "0.125rem"
|
|
664
681
|
},
|
|
665
|
-
borderRadius: "10rem"
|
|
682
|
+
borderRadius: "10rem",
|
|
683
|
+
label: {
|
|
684
|
+
fontWeight: "500",
|
|
685
|
+
typography: {
|
|
686
|
+
small: "400 0.75rem/1rem 'Inter', sans-serif",
|
|
687
|
+
medium: "400 0.875rem/1.25rem 'Inter', sans-serif"
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
},
|
|
691
|
+
field: {
|
|
692
|
+
gap: "0.5rem",
|
|
693
|
+
label: {
|
|
694
|
+
typography: "600 0.875rem/1.25rem 'Inter', sans-serif",
|
|
695
|
+
color: "#212529",
|
|
696
|
+
colorDisabled: "#adb5bd",
|
|
697
|
+
gap: "0.25rem"
|
|
698
|
+
},
|
|
699
|
+
requiredIndicator: {
|
|
700
|
+
color: "#D31510",
|
|
701
|
+
fontWeight: "700"
|
|
702
|
+
},
|
|
703
|
+
helperText: {
|
|
704
|
+
typography: "400 0.75rem/1rem 'Inter', sans-serif",
|
|
705
|
+
color: "#495057",
|
|
706
|
+
colorError: "#D31510"
|
|
707
|
+
}
|
|
708
|
+
},
|
|
709
|
+
alert: {
|
|
710
|
+
title: {
|
|
711
|
+
typography: "500 1.125rem/1.5rem 'Inter', sans-serif",
|
|
712
|
+
fontWeight: "600",
|
|
713
|
+
lineHeight: "1.25rem"
|
|
714
|
+
},
|
|
715
|
+
message: {
|
|
716
|
+
typography: "400 1rem/1.5rem 'Inter', sans-serif",
|
|
717
|
+
lineHeight: "1.25rem"
|
|
718
|
+
}
|
|
719
|
+
},
|
|
720
|
+
tabBar: {
|
|
721
|
+
badge: {
|
|
722
|
+
typography: "400 0.75rem/1rem 'Inter', sans-serif",
|
|
723
|
+
fontWeight: "700",
|
|
724
|
+
size: "1.25rem"
|
|
725
|
+
},
|
|
726
|
+
scrollbar: {
|
|
727
|
+
height: "0.25rem"
|
|
728
|
+
}
|
|
729
|
+
},
|
|
730
|
+
searchField: {
|
|
731
|
+
sectionHeader: {
|
|
732
|
+
typography: "400 0.75rem/1rem 'Inter', sans-serif",
|
|
733
|
+
letterSpacing: "0.125rem"
|
|
734
|
+
}
|
|
735
|
+
},
|
|
736
|
+
avatar: {
|
|
737
|
+
initials: {
|
|
738
|
+
fontFamily: "'Inter', sans-serif",
|
|
739
|
+
fontWeight: "500",
|
|
740
|
+
lineHeight: "1",
|
|
741
|
+
fontSize: {
|
|
742
|
+
xs: "0.75rem",
|
|
743
|
+
sm: "0.875rem",
|
|
744
|
+
md: "1rem",
|
|
745
|
+
lg: "1.125rem",
|
|
746
|
+
xl: "1.25rem"
|
|
747
|
+
}
|
|
748
|
+
}
|
|
749
|
+
},
|
|
750
|
+
codeBlock: {
|
|
751
|
+
fontFamily: "Menlo, Monaco, Consolas, Courier New, monospace",
|
|
752
|
+
fontSize: "0.75rem",
|
|
753
|
+
lineHeight: "1.25rem"
|
|
754
|
+
},
|
|
755
|
+
slider: {
|
|
756
|
+
thumb: {
|
|
757
|
+
shadow: {
|
|
758
|
+
"default": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
|
|
759
|
+
hover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
|
760
|
+
active: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
},
|
|
764
|
+
accountCard: {
|
|
765
|
+
header: {
|
|
766
|
+
minHeight: "3rem"
|
|
767
|
+
},
|
|
768
|
+
minWidth: "18.75rem"
|
|
769
|
+
},
|
|
770
|
+
breadcrumbs: {
|
|
771
|
+
item: {
|
|
772
|
+
maxWidth: "11.25rem"
|
|
773
|
+
}
|
|
774
|
+
},
|
|
775
|
+
cardLarge: {
|
|
776
|
+
maxWidth: "48rem"
|
|
777
|
+
},
|
|
778
|
+
checkbox: {
|
|
779
|
+
box: {
|
|
780
|
+
size: "1.25rem"
|
|
781
|
+
},
|
|
782
|
+
row: {
|
|
783
|
+
minHeight: "2rem"
|
|
784
|
+
}
|
|
785
|
+
},
|
|
786
|
+
emptyState: {
|
|
787
|
+
illustration: {
|
|
788
|
+
small: "5rem",
|
|
789
|
+
medium: "7.5rem",
|
|
790
|
+
large: "12.5rem"
|
|
791
|
+
},
|
|
792
|
+
maxWidth: "25rem",
|
|
793
|
+
text: {
|
|
794
|
+
maxWidth: "22.5rem"
|
|
795
|
+
},
|
|
796
|
+
actions: {
|
|
797
|
+
maxWidth: "18.75rem"
|
|
798
|
+
}
|
|
799
|
+
},
|
|
800
|
+
listItem: {
|
|
801
|
+
expandedIndent: {
|
|
802
|
+
compact: "3rem",
|
|
803
|
+
comfortable: "3.75rem"
|
|
804
|
+
}
|
|
805
|
+
},
|
|
806
|
+
transactionListItem: {
|
|
807
|
+
minHeight: "4.5rem"
|
|
666
808
|
},
|
|
667
809
|
$ref: "./component/index.json"
|
|
668
810
|
};
|
|
@@ -675,12 +817,63 @@ var semantic = {
|
|
|
675
817
|
overlay: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
|
676
818
|
sticky: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
|
|
677
819
|
},
|
|
820
|
+
breakpoint: {
|
|
821
|
+
xs: "0px",
|
|
822
|
+
sm: "640px",
|
|
823
|
+
md: "768px",
|
|
824
|
+
lg: "1024px",
|
|
825
|
+
xl: "1280px",
|
|
826
|
+
"2xl": "1536px"
|
|
827
|
+
},
|
|
828
|
+
opacity: {
|
|
829
|
+
disabled: "0.5",
|
|
830
|
+
full: "1"
|
|
831
|
+
},
|
|
832
|
+
fontFamily: {
|
|
833
|
+
body: "'Inter', sans-serif",
|
|
834
|
+
monospace: "Menlo, Monaco, Consolas, Courier New, monospace"
|
|
835
|
+
},
|
|
836
|
+
fontSize: {
|
|
837
|
+
xs: "0.75rem",
|
|
838
|
+
sm: "0.875rem",
|
|
839
|
+
md: "1rem",
|
|
840
|
+
lg: "1.125rem",
|
|
841
|
+
xl: "1.25rem"
|
|
842
|
+
},
|
|
843
|
+
lineHeight: {
|
|
844
|
+
none: "1",
|
|
845
|
+
tight: "1.25rem",
|
|
846
|
+
normal: "1.5rem"
|
|
847
|
+
},
|
|
848
|
+
letterSpacing: {
|
|
849
|
+
tighter: "-0.125rem",
|
|
850
|
+
tight: "-0.0625rem",
|
|
851
|
+
normal: "0rem",
|
|
852
|
+
wide: "0.125rem"
|
|
853
|
+
},
|
|
854
|
+
fontWeight: {
|
|
855
|
+
regular: "400",
|
|
856
|
+
medium: "500",
|
|
857
|
+
semibold: "600",
|
|
858
|
+
bold: "700"
|
|
859
|
+
},
|
|
860
|
+
zIndex: {
|
|
861
|
+
sticky: "10",
|
|
862
|
+
dropdown: "1000",
|
|
863
|
+
overlay: "1010",
|
|
864
|
+
modal: "1020"
|
|
865
|
+
},
|
|
678
866
|
border: {
|
|
679
867
|
"default": "0.0625rem solid #e9ecef",
|
|
680
868
|
subtle: "0.0625rem solid #dee2e6",
|
|
681
869
|
strong: "0.0625rem solid #343a40",
|
|
682
870
|
focus: "0.125rem solid #343a40",
|
|
683
871
|
tooltip: "0.125rem dotted #dee2e6",
|
|
872
|
+
width: {
|
|
873
|
+
thin: "0.0625rem",
|
|
874
|
+
thick: "0.125rem"
|
|
875
|
+
},
|
|
876
|
+
focusOffset: "0.125rem",
|
|
684
877
|
radius: {
|
|
685
878
|
none: "0",
|
|
686
879
|
xs: "0.125rem",
|
|
@@ -694,6 +887,31 @@ var semantic = {
|
|
|
694
887
|
}
|
|
695
888
|
},
|
|
696
889
|
size: {
|
|
890
|
+
touchTarget: "2.75rem",
|
|
891
|
+
overlay: {
|
|
892
|
+
sm: "25rem",
|
|
893
|
+
md: "35rem",
|
|
894
|
+
lg: "45rem"
|
|
895
|
+
},
|
|
896
|
+
menu: {
|
|
897
|
+
maxHeight: "18.75rem"
|
|
898
|
+
},
|
|
899
|
+
dimension: {
|
|
900
|
+
"1": "0.25rem",
|
|
901
|
+
"5": "1.25rem",
|
|
902
|
+
"8": "2rem",
|
|
903
|
+
"12": "3rem",
|
|
904
|
+
"15": "3.75rem",
|
|
905
|
+
"18": "4.5rem",
|
|
906
|
+
"20": "5rem",
|
|
907
|
+
"30": "7.5rem",
|
|
908
|
+
"45": "11.25rem",
|
|
909
|
+
"50": "12.5rem",
|
|
910
|
+
"75": "18.75rem",
|
|
911
|
+
"90": "22.5rem",
|
|
912
|
+
"100": "25rem",
|
|
913
|
+
"192": "48rem"
|
|
914
|
+
},
|
|
697
915
|
icon: {
|
|
698
916
|
xs: "0.75rem",
|
|
699
917
|
sm: "1rem",
|
|
@@ -741,6 +959,7 @@ var semantic = {
|
|
|
741
959
|
"8xl": "3.5rem",
|
|
742
960
|
"9xl": "4rem",
|
|
743
961
|
"10xl": "5rem",
|
|
962
|
+
"11xl": "6rem",
|
|
744
963
|
auto: "auto"
|
|
745
964
|
}
|
|
746
965
|
},
|
|
@@ -870,6 +1089,15 @@ var semantic = {
|
|
|
870
1089
|
breadcrumb: "400 0.75rem/1.125rem 'Inter', sans-serif"
|
|
871
1090
|
},
|
|
872
1091
|
motion: {
|
|
1092
|
+
duration: {
|
|
1093
|
+
normal: "200ms",
|
|
1094
|
+
fast: "150ms",
|
|
1095
|
+
slow: "300ms"
|
|
1096
|
+
},
|
|
1097
|
+
easing: {
|
|
1098
|
+
easeInOut: "ease-in-out",
|
|
1099
|
+
easeOut: "ease-out"
|
|
1100
|
+
},
|
|
873
1101
|
transition: {
|
|
874
1102
|
fast: "all 150ms ease-out",
|
|
875
1103
|
normal: "all 200ms ease-in-out",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;"}
|