@granto-umbrella/umbrella-components 2.3.21 → 2.3.23

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.
Files changed (36) hide show
  1. package/dist/umbrella-components.es.js +36414 -36248
  2. package/dist/umbrella-components.umd.js +495 -375
  3. package/package.json +4 -3
  4. package/src/components/atoms/Badge/Badge.styles.ts +24 -17
  5. package/src/components/atoms/Badge/Badge.tsx +19 -11
  6. package/src/components/atoms/Badge/Badge.types.ts +3 -2
  7. package/src/components/atoms/Breadcrumb/Breadcrumb.styles.ts +18 -11
  8. package/src/components/atoms/Breadcrumb/Breadcrumb.tsx +11 -3
  9. package/src/components/atoms/Button/Button.styles.ts +86 -12
  10. package/src/components/atoms/Button/Button.types.ts +6 -1
  11. package/src/components/atoms/Checkbox/Checkbox.styles.ts +4 -4
  12. package/src/components/atoms/Checkbox/Checkbox.tsx +2 -1
  13. package/src/components/atoms/CodeInput/CodeInput.styles.tsx +39 -0
  14. package/src/components/atoms/CodeInput/CodeInput.tsx +19 -0
  15. package/src/components/atoms/CodeInput/CodeInput.types.ts +3 -0
  16. package/src/components/atoms/CodeInput/index.tsx +1 -0
  17. package/src/components/atoms/Input/Input.styles.ts +24 -8
  18. package/src/components/atoms/Input/Input.tsx +10 -9
  19. package/src/components/atoms/Input/Input.types.ts +4 -25
  20. package/src/components/atoms/Label/Label.styles.ts +8 -7
  21. package/src/components/atoms/RadioButton/RadioButton.styles.ts +3 -2
  22. package/src/components/atoms/RadioButton/RadioButton.tsx +1 -0
  23. package/src/components/atoms/Select/Select.styles.ts +81 -23
  24. package/src/components/atoms/Select/Select.tsx +17 -30
  25. package/src/components/atoms/Select/Select.types.ts +17 -9
  26. package/src/components/atoms/Switch/Switch.styles.ts +13 -8
  27. package/src/components/atoms/Switch/Switch.tsx +1 -1
  28. package/src/components/atoms/Text/Text.tsx +1 -0
  29. package/src/components/atoms/Textarea/Textarea.styles.ts +7 -8
  30. package/src/components/atoms/Textarea/Textarea.tsx +1 -1
  31. package/src/components/molecules/ButtonGroup/ButtonGroup.tsx +12 -6
  32. package/src/components/molecules/ButtonGroup/ButtonGroup.types.ts +16 -2
  33. package/src/index.ts +5 -1
  34. package/src/styles/tokens/colors.ts +102 -96
  35. package/src/styles/tokens/shadows.ts +3 -3
  36. package/src/styles/tokens/typography.ts +148 -123
package/src/styles/tokens/colors.ts CHANGED
@@ -1,112 +1,112 @@
1
1
  export const primitiveColors = {
2
2
  base: {
3
- white: "#ffffff",
4
- black: "#000000",
3
+ white: '#ffffff',
4
+ black: '#000000',
5
5
  },
6
6
  gray: {
7
- 100: "#f7f7f7",
8
- 200: "#f0f0f0",
9
- 300: "#e3e3e3",
10
- 400: "#cfcfcf",
11
- 500: "#b7b7b7",
12
- 600: "#9b9b9b",
13
- 700: "#7f7f7f",
14
- 800: "#606060",
15
- 900: "#464646",
16
- 1000: "#333333",
17
- 1100: "#1d1d1d",
18
- 1200: "#0f0f0f",
19
- 1300: "#070707",
7
+ 100: '#f7f7f7',
8
+ 200: '#f0f0f0',
9
+ 300: '#e3e3e3',
10
+ 400: '#cfcfcf',
11
+ 500: '#b7b7b7',
12
+ 600: '#9b9b9b',
13
+ 700: '#7f7f7f',
14
+ 800: '#606060',
15
+ 900: '#464646',
16
+ 1000: '#333333',
17
+ 1100: '#1d1d1d',
18
+ 1200: '#0f0f0f',
19
+ 1300: '#070707',
20
20
  },
21
21
  purple: {
22
- 100: "#cdb7f4",
23
- 200: "#b899ee",
24
- 300: "#a37ce8",
25
- 400: "#8e5fe0",
26
- 500: "#7943d9",
27
- 600: "#662ccb",
28
- 700: "#5828ac",
29
- 800: "#492290",
30
- 900: "#3b1c73",
31
- 1000: "#2c1557",
32
- 1100: "#1e0f3b",
33
- 1200: "#100820",
34
- 1300: "#020104",
22
+ 100: '#cdb7f4',
23
+ 200: '#b899ee',
24
+ 300: '#a37ce8',
25
+ 400: '#8e5fe0',
26
+ 500: '#7943d9',
27
+ 600: '#662ccb',
28
+ 700: '#5828ac',
29
+ 800: '#492290',
30
+ 900: '#3b1c73',
31
+ 1000: '#2c1557',
32
+ 1100: '#1e0f3b',
33
+ 1200: '#100820',
34
+ 1300: '#020104',
35
35
  },
36
36
  green: {
37
- 100: "#bef4b7",
38
- 200: "#a3ee99",
39
- 300: "#88e87c",
40
- 400: "#6de05f",
41
- 500: "#53d943",
42
- 600: "#3dcb2c",
43
- 700: "#35ac28",
44
- 800: "#2b9022",
45
- 900: "#21731c",
46
- 1000: "#185715",
47
- 1100: "#103b0f",
48
- 1200: "#082008",
49
- 1300: "#010401",
37
+ 100: '#bef4b7',
38
+ 200: '#a3ee99',
39
+ 300: '#88e87c',
40
+ 400: '#6de05f',
41
+ 500: '#53d943',
42
+ 600: '#3dcb2c',
43
+ 700: '#35ac28',
44
+ 800: '#2b9022',
45
+ 900: '#21731c',
46
+ 1000: '#185715',
47
+ 1100: '#103b0f',
48
+ 1200: '#082008',
49
+ 1300: '#010401',
50
50
  },
51
51
  red: {
52
- 100: "#f4b7b8",
53
- 200: "#ee999a",
54
- 300: "#e87c7d",
55
- 400: "#e05f60",
56
- 500: "#d94344",
57
- 600: "#cb2c2d",
58
- 700: "#ac2828",
59
- 800: "#902222",
60
- 900: "#731c1c",
61
- 1000: "#571515",
62
- 1100: "#3b0f0f",
63
- 1200: "#200808",
64
- 1300: "#040101",
52
+ 100: '#f4b7b8',
53
+ 200: '#ee999a',
54
+ 300: '#e87c7d',
55
+ 400: '#e05f60',
56
+ 500: '#d94344',
57
+ 600: '#cb2c2d',
58
+ 700: '#ac2828',
59
+ 800: '#902222',
60
+ 900: '#731c1c',
61
+ 1000: '#571515',
62
+ 1100: '#3b0f0f',
63
+ 1200: '#200808',
64
+ 1300: '#040101',
65
65
  },
66
66
  blue: {
67
- 100: "#b7c1f4",
68
- 200: "#99a7ee",
69
- 300: "#7c8de8",
70
- 400: "#5f73e0",
71
- 500: "#435ad9",
72
- 600: "#2c45cb",
73
- 700: "#283cac",
74
- 800: "#223690",
75
- 900: "#1c2e73",
76
- 1000: "#152557",
77
- 1100: "#0f1b3b",
78
- 1200: "#080f20",
79
- 1300: "#010204",
67
+ 100: '#b7c1f4',
68
+ 200: '#99a7ee',
69
+ 300: '#7c8de8',
70
+ 400: '#5f73e0',
71
+ 500: '#435ad9',
72
+ 600: '#2c45cb',
73
+ 700: '#283cac',
74
+ 800: '#223690',
75
+ 900: '#1c2e73',
76
+ 1000: '#152557',
77
+ 1100: '#0f1b3b',
78
+ 1200: '#080f20',
79
+ 1300: '#010204',
80
80
  },
81
81
  orange: {
82
- 100: "#f4d1b7",
83
- 200: "#eebd99",
84
- 300: "#e8aa7c",
85
- 400: "#e0975f",
86
- 500: "#d98343",
87
- 600: "#cb712c",
88
- 700: "#ac6128",
89
- 800: "#904f22",
90
- 900: "#733f1c",
91
- 1000: "#572e15",
92
- 1100: "#3b1f0f",
93
- 1200: "#201008",
94
- 1300: "#040201",
82
+ 100: '#f4d1b7',
83
+ 200: '#eebd99',
84
+ 300: '#e8aa7c',
85
+ 400: '#e0975f',
86
+ 500: '#d98343',
87
+ 600: '#cb712c',
88
+ 700: '#ac6128',
89
+ 800: '#904f22',
90
+ 900: '#733f1c',
91
+ 1000: '#572e15',
92
+ 1100: '#3b1f0f',
93
+ 1200: '#201008',
94
+ 1300: '#040201',
95
95
  },
96
96
  yellow: {
97
- 100: "#f4f3b7",
98
- 200: "#eeed99",
99
- 300: "#e8e67c",
100
- 400: "#e0df5f",
101
- 500: "#d9d843",
102
- 600: "#cbcb2c",
103
- 700: "#acac28",
104
- 800: "#909022",
105
- 900: "#73731c",
106
- 1000: "#575715",
107
- 1100: "#3b3b0f",
108
- 1200: "#202008",
109
- 1300: "#040401",
97
+ 100: '#f4f3b7',
98
+ 200: '#eeed99',
99
+ 300: '#e8e67c',
100
+ 400: '#e0df5f',
101
+ 500: '#d9d843',
102
+ 600: '#cbcb2c',
103
+ 700: '#acac28',
104
+ 800: '#909022',
105
+ 900: '#73731c',
106
+ 1000: '#575715',
107
+ 1100: '#3b3b0f',
108
+ 1200: '#202008',
109
+ 1300: '#040401',
110
110
  },
111
111
  };
112
112
 
@@ -132,17 +132,17 @@ export const semanticColors = {
132
132
  pressed: primitiveColors.purple[1000],
133
133
  },
134
134
  border: {
135
+ disabled: primitiveColors.purple[100],
135
136
  enabled: primitiveColors.purple[700],
136
137
  hover: primitiveColors.purple[800],
137
138
  pressed: primitiveColors.purple[1000],
138
- disabled: primitiveColors.purple[100],
139
139
  },
140
140
  text: {
141
141
  accent: {
142
+ disabled: primitiveColors.purple[100],
142
143
  enabled: primitiveColors.purple[700],
143
144
  hover: primitiveColors.purple[800],
144
145
  pressed: primitiveColors.purple[1000],
145
- disabled: primitiveColors.purple[100],
146
146
  },
147
147
  onSurfaceAccent: {
148
148
  enabled: primitiveColors.base.white,
@@ -230,7 +230,7 @@ export const semanticColors = {
230
230
 
231
231
  surface: {
232
232
  default: primitiveColors.base.white,
233
- overlay: "rgba(0, 0, 0, 0.5)",
233
+ overlay: 'rgba(0, 0, 0, 0.5)',
234
234
  disabled: primitiveColors.gray[200],
235
235
  danger: {
236
236
  enabled: primitiveColors.red[600],
@@ -238,6 +238,11 @@ export const semanticColors = {
238
238
  pressed: primitiveColors.red[900],
239
239
  disabled: primitiveColors.red[100],
240
240
  },
241
+ status: {
242
+ online: primitiveColors.green[600],
243
+ notification: primitiveColors.red[600],
244
+ offline: primitiveColors.gray[600],
245
+ },
241
246
  },
242
247
 
243
248
  status: {
@@ -273,6 +278,7 @@ export const semanticColors = {
273
278
  default: primitiveColors.gray[200],
274
279
  medium: primitiveColors.gray[400],
275
280
  strong: primitiveColors.gray[700],
281
+ disabled: primitiveColors.gray[300],
276
282
  feedback: {
277
283
  error: primitiveColors.red[900],
278
284
  info: primitiveColors.blue[900],
package/src/styles/tokens/shadows.ts CHANGED
@@ -6,9 +6,9 @@ export const primitiveShadows = {
6
6
  danger: `0px 0px 0px 2px ${semanticColors.danger.border.enabled}`,
7
7
  none: "none",
8
8
  default:
9
- "0px 44px 12px 0px rgba(158, 158, 158, 0.00), 0px 28px 11px 0px rgba(158, 158, 158, 0.01), 0px 16px 9px 0px rgba(158, 158, 158, 0.03), 0px 7px 7px 0px rgba(158, 158, 158, 0.04), 0px 2px 4px 0px rgba(158, 158, 158, 0.05)",
10
- md: "0px 47px 13px 0px rgba(158, 158, 158, 0.00), 0px 30px 12px 0px rgba(158, 158, 158, 0.03), 0px 17px 10px 0px rgba(158, 158, 158, 0.10), 0px 8px 8px 0px rgba(158, 158, 158, 0.17), 0px 2px 4px 0px rgba(158, 158, 158, 0.20)",
11
- lg: "24px 26px 10px 0px rgba(214, 214, 214, 0.00), 15px 17px 9px 0px rgba(214, 214, 214, 0.03), 9px 10px 8px 0px rgba(214, 214, 214, 0.10), 4px 4px 6px 0px rgba(214, 214, 214, 0.17), 1px 1px 3px 0px rgba(214, 214, 214, 0.20)",
9
+ "0px 2px 4px rgba(158, 158, 158, 0.05), 0px 7px 7px rgba(158, 158, 158, 0.04), 0px 16px 9px rgba(158, 158, 158, 0.03), 0px 28px 11px rgba(158, 158, 158, 0.01), 0px 44px 12px rgba(158, 158, 158, 0)",
10
+ md: "0px 2px 4px rgba(158, 158, 158, 0.2), 0px 8px 8px rgba(158, 158, 158, 0.17), 0px 17px 10px rgba(158, 158, 158, 0.1), 0px 30px 12px rgba(158, 158, 158, 0.03), 0px 47px 13px rgba(158, 158, 158, 0)",
11
+ lg: "1px 1px 3px rgba(214, 214, 214, 0.2), 4px 4px 6px rgba(214, 214, 214, 0.17), 9px 10px 8px rgba(214, 214, 214, 0.1), 15px 17px 9px rgba(214, 214, 214, 0.03), 24px 26px 10px rgba(214, 214, 214, 0)",
12
12
  },
13
13
  };
14
14
 
package/src/styles/tokens/typography.ts CHANGED
@@ -3,134 +3,159 @@ export const typographyTokens = {
3
3
  base: "'Mulish', sans-serif",
4
4
  },
5
5
  fontSizes: {
6
- displayXL: "48px",
7
- displayL: "36px",
8
- displayM: "32px",
9
- headingL: "28px",
10
- headingM: "24px",
11
- headingS: "20px",
12
- bodyL: "18px",
13
- bodyM: "16px",
14
- bodyS: "14px",
15
- labelL: "18px",
16
- labelM: "16px",
17
- labelS: "14px",
18
- captionM: "12px",
19
- captionS: "10px",
6
+ displayXL: '36px',
7
+ displayL: '32px',
8
+ displayM: '24px',
9
+ headingL: '20px',
10
+ headingM: '18px',
11
+ headingS: '16px',
12
+ bodyL: '20px',
13
+ bodyM: '18px',
14
+ bodyS: '16px',
15
+ bodyXS: '14px',
16
+ labelL: '18px',
17
+ labelM: '16px',
18
+ labelS: '14px',
19
+ captionM: '12px',
20
+ captionS: '10px',
20
21
  },
21
22
  lineHeights: {
22
- displayXL: "56px",
23
- displayL: "44px",
24
- displayM: "40px",
25
- headingL: "34px",
26
- headingM: "28px",
27
- headingS: "26px",
28
- bodyL: "24px",
29
- bodyM: "22px",
30
- bodyS: "20px",
31
- labelL: "24px",
32
- labelM: "22px",
33
- labelS: "20px",
34
- captionM: "16px",
35
- captionS: "14px",
23
+ displayXL: '44px',
24
+ displayL: '38px',
25
+ displayM: '28px',
26
+ headingL: '26px',
27
+ headingM: '24px',
28
+ headingS: '22px',
29
+ bodyL: '26px',
30
+ bodyM: '24px',
31
+ bodyS: '22px',
32
+ bodyXS: '20px',
33
+ labelL: '24px',
34
+ labelM: '22px',
35
+ labelS: '18px',
36
+ captionM: '16px',
37
+ captionS: '14px',
36
38
  },
37
39
  fontWeights: {
38
- bold: "700",
39
- semibold: "600",
40
- medium: "500",
41
- regular: "400",
40
+ bold: '700',
41
+ semibold: '600',
42
+ medium: '500',
43
+ regular: '400',
42
44
  },
43
45
  letterSpacing: {
44
- displayXL: "-4%",
45
- displayL: "-3%",
46
- displayM: "-2%",
47
- headingL: "-1%",
48
- default: "0%",
49
- },
50
- textStyles: {
51
- displayXL: {
52
- fontSize: "48px",
53
- lineHeight: "56px",
54
- fontWeight: "700", // Bold
55
- letterSpacing: "-4%",
56
- },
57
- displayL: {
58
- fontSize: "36px",
59
- lineHeight: "44px",
60
- fontWeight: "600", // Semibold
61
- letterSpacing: "-3%",
62
- },
63
- displayM: {
64
- fontSize: "32px",
65
- lineHeight: "40px",
66
- fontWeight: "600", // Semibold
67
- letterSpacing: "-2%",
68
- },
69
- headingL: {
70
- fontSize: "28px",
71
- lineHeight: "34px",
72
- fontWeight: "600", // Semibold
73
- letterSpacing: "-1%",
74
- },
75
- headingM: {
76
- fontSize: "24px",
77
- lineHeight: "28px",
78
- fontWeight: "500", // Medium
79
- letterSpacing: "0%",
80
- },
81
- headingS: {
82
- fontSize: "20px",
83
- lineHeight: "26px",
84
- fontWeight: "500", // Medium
85
- letterSpacing: "0%",
86
- },
87
- bodyL: {
88
- fontSize: "18px",
89
- lineHeight: "24px",
90
- fontWeight: "400", // Regular
91
- letterSpacing: "0%",
92
- },
93
- bodyM: {
94
- fontSize: "16px",
95
- lineHeight: "22px",
96
- fontWeight: "400", // Regular
97
- letterSpacing: "0%",
98
- },
99
- bodyS: {
100
- fontSize: "14px",
101
- lineHeight: "20px",
102
- fontWeight: "400", // Regular
103
- letterSpacing: "0%",
104
- },
105
- labelL: {
106
- fontSize: "18px",
107
- lineHeight: "24px",
108
- fontWeight: "600", // Semibold
109
- letterSpacing: "0%",
110
- },
111
- labelM: {
112
- fontSize: "16px",
113
- lineHeight: "22px",
114
- fontWeight: "500", // Medium
115
- letterSpacing: "0%",
116
- },
117
- labelS: {
118
- fontSize: "14px",
119
- lineHeight: "20px",
120
- fontWeight: "500", // Medium
121
- letterSpacing: "0%",
122
- },
123
- captionM: {
124
- fontSize: "12px",
125
- lineHeight: "16px",
126
- fontWeight: "500", // Medium
127
- letterSpacing: "0%",
128
- },
129
- captionS: {
130
- fontSize: "10px",
131
- lineHeight: "14px",
132
- fontWeight: "500", // Medium
133
- letterSpacing: "0%",
134
- },
46
+ displayXL: '-3%',
47
+ displayL: '-2%',
48
+ default: '0%',
49
+ },
50
+ };
51
+
52
+ export const textStyles = {
53
+ displayXL: {
54
+ fontSize: typographyTokens.fontSizes.displayXL,
55
+ lineHeight: typographyTokens.lineHeights.displayXL,
56
+ fontWeight: typographyTokens.fontWeights.semibold,
57
+ letterSpacing: typographyTokens.letterSpacing.displayXL,
58
+ },
59
+ displayL: {
60
+ fontSize: typographyTokens.fontSizes.displayL,
61
+ lineHeight: typographyTokens.lineHeights.displayL,
62
+ fontWeight: typographyTokens.fontWeights.semibold,
63
+ letterSpacing: typographyTokens.letterSpacing.displayL,
64
+ },
65
+ displayM: {
66
+ fontSize: typographyTokens.fontSizes.displayM,
67
+ lineHeight: typographyTokens.lineHeights.displayM,
68
+ fontWeight: typographyTokens.fontWeights.medium,
69
+ letterSpacing: typographyTokens.letterSpacing.default,
70
+ },
71
+ headingL: {
72
+ fontSize: typographyTokens.fontSizes.headingL,
73
+ lineHeight: typographyTokens.lineHeights.headingL,
74
+ fontWeight: typographyTokens.fontWeights.medium,
75
+ letterSpacing: typographyTokens.letterSpacing.default,
76
+ },
77
+ headingM: {
78
+ fontSize: typographyTokens.fontSizes.headingM,
79
+ lineHeight: typographyTokens.lineHeights.headingM,
80
+ fontWeight: typographyTokens.fontWeights.medium,
81
+ letterSpacing: typographyTokens.letterSpacing.default,
82
+ },
83
+ headingS: {
84
+ fontSize: typographyTokens.fontSizes.headingS,
85
+ lineHeight: typographyTokens.lineHeights.headingS,
86
+ fontWeight: typographyTokens.fontWeights.medium,
87
+ letterSpacing: typographyTokens.letterSpacing.default,
88
+ },
89
+ bodyL: {
90
+ fontSize: typographyTokens.fontSizes.bodyL,
91
+ lineHeight: typographyTokens.lineHeights.bodyL,
92
+ fontWeight: typographyTokens.fontWeights.medium,
93
+ letterSpacing: typographyTokens.letterSpacing.default,
94
+ },
95
+ bodyM: {
96
+ fontSize: typographyTokens.fontSizes.bodyM,
97
+ lineHeight: typographyTokens.lineHeights.bodyM,
98
+ fontWeight: typographyTokens.fontWeights.medium,
99
+ letterSpacing: typographyTokens.letterSpacing.default,
100
+ },
101
+ bodyS: {
102
+ fontSize: typographyTokens.fontSizes.bodyS,
103
+ lineHeight: typographyTokens.lineHeights.bodyS,
104
+ fontWeight: typographyTokens.fontWeights.medium,
105
+ letterSpacing: typographyTokens.letterSpacing.default,
106
+ },
107
+ bodyS_semibold: {
108
+ fontSize: typographyTokens.fontSizes.bodyS,
109
+ lineHeight: typographyTokens.lineHeights.bodyS,
110
+ fontWeight: typographyTokens.fontWeights.semibold,
111
+ letterSpacing: typographyTokens.letterSpacing.default,
112
+ },
113
+ bodyXS: {
114
+ fontSize: typographyTokens.fontSizes.bodyXS,
115
+ lineHeight: typographyTokens.lineHeights.bodyXS,
116
+ fontWeight: typographyTokens.fontWeights.medium,
117
+ letterSpacing: typographyTokens.letterSpacing.default,
118
+ },
119
+ bodyXS_semibold: {
120
+ fontSize: typographyTokens.fontSizes.bodyXS,
121
+ lineHeight: typographyTokens.lineHeights.bodyXS,
122
+ fontWeight: typographyTokens.fontWeights.semibold,
123
+ letterSpacing: typographyTokens.letterSpacing.default,
124
+ },
125
+ labelL: {
126
+ fontSize: typographyTokens.fontSizes.labelL,
127
+ lineHeight: typographyTokens.lineHeights.labelL,
128
+ fontWeight: typographyTokens.fontWeights.semibold,
129
+ letterSpacing: typographyTokens.letterSpacing.default,
130
+ },
131
+ labelM_regular: {
132
+ fontSize: typographyTokens.fontSizes.labelM,
133
+ lineHeight: typographyTokens.lineHeights.labelM,
134
+ fontWeight: typographyTokens.fontWeights.regular,
135
+ letterSpacing: typographyTokens.letterSpacing.default,
136
+ },
137
+ labelM_medium: {
138
+ fontSize: typographyTokens.fontSizes.labelM,
139
+ lineHeight: typographyTokens.lineHeights.labelM,
140
+ fontWeight: typographyTokens.fontWeights.medium,
141
+ letterSpacing: typographyTokens.letterSpacing.default,
142
+ },
143
+ labelS: {
144
+ fontSize: typographyTokens.fontSizes.labelS,
145
+ lineHeight: typographyTokens.lineHeights.labelS,
146
+ fontWeight: typographyTokens.fontWeights.medium,
147
+ letterSpacing: typographyTokens.letterSpacing.default,
148
+ },
149
+ captionM: {
150
+ fontSize: typographyTokens.fontSizes.captionM,
151
+ lineHeight: typographyTokens.lineHeights.captionM,
152
+ fontWeight: typographyTokens.fontWeights.medium,
153
+ letterSpacing: typographyTokens.letterSpacing.default,
154
+ },
155
+ captionS: {
156
+ fontSize: typographyTokens.fontSizes.captionS,
157
+ lineHeight: typographyTokens.lineHeights.captionS,
158
+ fontWeight: typographyTokens.fontWeights.medium,
159
+ letterSpacing: typographyTokens.letterSpacing.default,
135
160
  },
136
161
  };