@metamask-previews/design-tokens 8.2.2-preview.645f8b0 → 8.2.2-preview.96aaa54
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/package.json +4 -10
- package/dist/tailwind/theme.css +0 -1225
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metamask-previews/design-tokens",
|
|
3
|
-
"version": "8.2.2-preview.
|
|
3
|
+
"version": "8.2.2-preview.96aaa54",
|
|
4
4
|
"description": "Design tokens to be used throughout MetaMask products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"MetaMask",
|
|
@@ -27,8 +27,7 @@
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
"./package.json": "./package.json",
|
|
30
|
-
"./styles.css": "./dist/styles.css"
|
|
31
|
-
"./tailwind/theme.css": "./dist/tailwind/theme.css"
|
|
30
|
+
"./styles.css": "./dist/styles.css"
|
|
32
31
|
},
|
|
33
32
|
"main": "./dist/index.cjs",
|
|
34
33
|
"module": "./dist/index.mjs",
|
|
@@ -38,9 +37,7 @@
|
|
|
38
37
|
],
|
|
39
38
|
"scripts": {
|
|
40
39
|
"build": "ts-bridge --project tsconfig.build.json --verbose --clean --no-references && yarn build:css",
|
|
41
|
-
"build:css": "cleancss -o dist/styles.css src/css/index.css
|
|
42
|
-
"build:css:tailwind": "mkdir -p dist/tailwind && postcss src/tailwind/theme.css --use postcss-import -o dist/tailwind/theme.css --no-map",
|
|
43
|
-
"check:tailwind-theme-parity": "tsx scripts/check-tailwind-theme-parity.ts",
|
|
40
|
+
"build:css": "cleancss -o dist/styles.css src/css/index.css",
|
|
44
41
|
"changelog:update": "../../scripts/update-changelog.sh @metamask/design-tokens",
|
|
45
42
|
"changelog:validate": "../../scripts/validate-changelog.sh @metamask/design-tokens",
|
|
46
43
|
"publish:preview": "yarn npm publish --tag preview",
|
|
@@ -51,17 +48,14 @@
|
|
|
51
48
|
"test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
|
|
52
49
|
},
|
|
53
50
|
"devDependencies": {
|
|
54
|
-
"@metamask-previews/design-system-react": "0.11.0-preview.
|
|
51
|
+
"@metamask-previews/design-system-react": "0.11.0-preview.96aaa54",
|
|
55
52
|
"@metamask/auto-changelog": "^5.3.2",
|
|
56
|
-
"@tailwindcss/postcss": "^4.0.0",
|
|
57
53
|
"@ts-bridge/cli": "^0.6.3",
|
|
58
54
|
"@types/jest": "^27.4.1",
|
|
59
55
|
"@types/node": "^16.18.54",
|
|
60
56
|
"clean-css-cli": "^5.6.3",
|
|
61
57
|
"jest": "^29.7.0",
|
|
62
58
|
"postcss": "^8.4.47",
|
|
63
|
-
"postcss-cli": "^11.0.1",
|
|
64
|
-
"postcss-import": "^16.1.1",
|
|
65
59
|
"react": "^18.2.0",
|
|
66
60
|
"ts-jest": "^29.2.5",
|
|
67
61
|
"typescript": "~5.2.2"
|
package/dist/tailwind/theme.css
DELETED
|
@@ -1,1225 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Brand Colors
|
|
3
|
-
* Do not use "--brand-colors" in your code
|
|
4
|
-
* Instead use the "--color-" variables to ensure
|
|
5
|
-
* theme compatible styles
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
:root {
|
|
9
|
-
/* Grey */
|
|
10
|
-
--brand-colors-grey-grey100: #ededed;
|
|
11
|
-
--brand-colors-grey-grey200: #babbbe;
|
|
12
|
-
--brand-colors-grey-grey300: #a3a4a7;
|
|
13
|
-
--brand-colors-grey-grey400: #949596;
|
|
14
|
-
--brand-colors-grey-grey500: #66676a;
|
|
15
|
-
--brand-colors-grey-grey600: #47484a;
|
|
16
|
-
--brand-colors-grey-grey700: #252628;
|
|
17
|
-
--brand-colors-grey-grey800: #1c1d1f;
|
|
18
|
-
--brand-colors-grey-grey900: #131416;
|
|
19
|
-
--brand-colors-grey-grey1000: #0c0d0f;
|
|
20
|
-
--brand-colors-grey-grey050: #f3f3f4;
|
|
21
|
-
--brand-colors-grey-grey000: #ffffff;
|
|
22
|
-
--brand-colors-grey-grey025: #f7f9fc;
|
|
23
|
-
/* Blue */
|
|
24
|
-
--brand-colors-blue-blue100: #d6dbff;
|
|
25
|
-
--brand-colors-blue-blue200: #adb6fe;
|
|
26
|
-
--brand-colors-blue-blue300: #8b99ff;
|
|
27
|
-
--brand-colors-blue-blue400: #6f7eff;
|
|
28
|
-
--brand-colors-blue-blue500: #4459ff;
|
|
29
|
-
--brand-colors-blue-blue600: #2c3dc5;
|
|
30
|
-
--brand-colors-blue-blue700: #1c277f;
|
|
31
|
-
--brand-colors-blue-blue800: #131b59;
|
|
32
|
-
--brand-colors-blue-blue900: #0b0f32;
|
|
33
|
-
--brand-colors-blue-blue050: #f4f5ff;
|
|
34
|
-
--brand-colors-blue-blue025: #f8f9ff;
|
|
35
|
-
/* Green */
|
|
36
|
-
--brand-colors-green-green100: #c1e6c9;
|
|
37
|
-
--brand-colors-green-green200: #80cb91;
|
|
38
|
-
--brand-colors-green-green300: #4cb564;
|
|
39
|
-
--brand-colors-green-green400: #279f41;
|
|
40
|
-
--brand-colors-green-green500: #1c7e33;
|
|
41
|
-
--brand-colors-green-green600: #145d25;
|
|
42
|
-
--brand-colors-green-green700: #0d3b18;
|
|
43
|
-
--brand-colors-green-green800: #092912;
|
|
44
|
-
--brand-colors-green-green900: #051709;
|
|
45
|
-
--brand-colors-green-green050: #ebf7ee;
|
|
46
|
-
--brand-colors-green-green025: #f1faf4;
|
|
47
|
-
/* Red */
|
|
48
|
-
--brand-colors-red-red100: #ffd2d5;
|
|
49
|
-
--brand-colors-red-red200: #ffa1aa;
|
|
50
|
-
--brand-colors-red-red300: #ff7584;
|
|
51
|
-
--brand-colors-red-red400: #f74d5e;
|
|
52
|
-
--brand-colors-red-red500: #ca3542;
|
|
53
|
-
--brand-colors-red-red600: #952731;
|
|
54
|
-
--brand-colors-red-red700: #611a20;
|
|
55
|
-
--brand-colors-red-red800: #431216;
|
|
56
|
-
--brand-colors-red-red900: #3b0f13;
|
|
57
|
-
--brand-colors-red-red050: #fff2f3;
|
|
58
|
-
--brand-colors-red-red025: #fff6f7;
|
|
59
|
-
/* Yellow */
|
|
60
|
-
--brand-colors-yellow-yellow100: #ffd957;
|
|
61
|
-
--brand-colors-yellow-yellow200: #f0b034;
|
|
62
|
-
--brand-colors-yellow-yellow300: #e18f01;
|
|
63
|
-
--brand-colors-yellow-yellow400: #c37b02;
|
|
64
|
-
--brand-colors-yellow-yellow500: #9a6300;
|
|
65
|
-
--brand-colors-yellow-yellow600: #714802;
|
|
66
|
-
--brand-colors-yellow-yellow700: #482d01;
|
|
67
|
-
--brand-colors-yellow-yellow800: #321f00;
|
|
68
|
-
--brand-colors-yellow-yellow900: #1c1100;
|
|
69
|
-
--brand-colors-yellow-yellow050: #fff5d5;
|
|
70
|
-
--brand-colors-yellow-yellow025: #fff9e6;
|
|
71
|
-
/* Orange */
|
|
72
|
-
--brand-colors-orange-orange100: #ffd4c1;
|
|
73
|
-
--brand-colors-orange-orange200: #ffa680;
|
|
74
|
-
--brand-colors-orange-orange300: #ff7940;
|
|
75
|
-
--brand-colors-orange-orange400: #ff5c16;
|
|
76
|
-
--brand-colors-orange-orange500: #c3420d;
|
|
77
|
-
--brand-colors-orange-orange600: #932d06;
|
|
78
|
-
--brand-colors-orange-orange700: #661800;
|
|
79
|
-
--brand-colors-orange-orange800: #451100;
|
|
80
|
-
--brand-colors-orange-orange900: #280a00;
|
|
81
|
-
--brand-colors-orange-orange050: #fff0ea;
|
|
82
|
-
--brand-colors-orange-orange025: #fff8f5;
|
|
83
|
-
/* Purple */
|
|
84
|
-
--brand-colors-purple-purple100: #eac2ff;
|
|
85
|
-
--brand-colors-purple-purple200: #dfa4ff;
|
|
86
|
-
--brand-colors-purple-purple300: #d075ff;
|
|
87
|
-
--brand-colors-purple-purple400: #b864f5;
|
|
88
|
-
--brand-colors-purple-purple500: #8f44e4;
|
|
89
|
-
--brand-colors-purple-purple600: #6c2ab2;
|
|
90
|
-
--brand-colors-purple-purple700: #6c2ab2;
|
|
91
|
-
--brand-colors-purple-purple800: #3d065f;
|
|
92
|
-
--brand-colors-purple-purple900: #280a00;
|
|
93
|
-
--brand-colors-purple-purple050: #fbf2ff;
|
|
94
|
-
--brand-colors-purple-purple025: #fcf6ff;
|
|
95
|
-
/* Lime */
|
|
96
|
-
--brand-colors-lime-lime100: #baf24a;
|
|
97
|
-
--brand-colors-lime-lime200: #95ca45;
|
|
98
|
-
--brand-colors-lime-lime300: #7ab040;
|
|
99
|
-
--brand-colors-lime-lime400: #64993d;
|
|
100
|
-
--brand-colors-lime-lime500: #457a39;
|
|
101
|
-
--brand-colors-lime-lime600: #275b35;
|
|
102
|
-
--brand-colors-lime-lime700: #013330;
|
|
103
|
-
--brand-colors-lime-lime800: #012826;
|
|
104
|
-
--brand-colors-lime-lime900: #011515;
|
|
105
|
-
--brand-colors-lime-lime025: #effed9;
|
|
106
|
-
--brand-colors-lime-lime050: #e5ffc3;
|
|
107
|
-
/* Indigo */
|
|
108
|
-
--brand-colors-indigo-indigo025: #f3faff;
|
|
109
|
-
--brand-colors-indigo-indigo050: #ebf5ff;
|
|
110
|
-
--brand-colors-indigo-indigo100: #cce7ff;
|
|
111
|
-
--brand-colors-indigo-indigo200: #89b0ff;
|
|
112
|
-
--brand-colors-indigo-indigo300: #7e9ff0;
|
|
113
|
-
--brand-colors-indigo-indigo400: #6f87db;
|
|
114
|
-
--brand-colors-indigo-indigo500: #5b66bf;
|
|
115
|
-
--brand-colors-indigo-indigo600: #4544a1;
|
|
116
|
-
--brand-colors-indigo-indigo700: #2e2082;
|
|
117
|
-
--brand-colors-indigo-indigo800: #190066;
|
|
118
|
-
--brand-colors-indigo-indigo900: #13004a;
|
|
119
|
-
/* White */
|
|
120
|
-
--brand-colors-white: #ffffff;
|
|
121
|
-
/* Black */
|
|
122
|
-
--brand-colors-black: #000000;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
/**
|
|
126
|
-
* Typography
|
|
127
|
-
*/
|
|
128
|
-
|
|
129
|
-
:root {
|
|
130
|
-
/* font family */
|
|
131
|
-
--font-family-default: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
132
|
-
--font-family-accent: 'MMSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
133
|
-
--font-family-hero: 'MMPoly', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
134
|
-
/* font sizes */
|
|
135
|
-
--font-size-base: 16px;
|
|
136
|
-
--font-size-1: 0.625rem;
|
|
137
|
-
--font-size-2: 0.75rem;
|
|
138
|
-
--font-size-3: 0.875rem;
|
|
139
|
-
--font-size-4: 1rem;
|
|
140
|
-
--font-size-5: 1.25rem;
|
|
141
|
-
--font-size-6: 1.5rem;
|
|
142
|
-
--font-size-7: 2rem;
|
|
143
|
-
--font-size-8: 2.5rem;
|
|
144
|
-
--font-size-9: 3rem;
|
|
145
|
-
--font-size-10: 3.75rem;
|
|
146
|
-
/* line heights */
|
|
147
|
-
--line-height-1: 1rem;
|
|
148
|
-
--line-height-2: 1.25rem;
|
|
149
|
-
--line-height-3: 1.375rem;
|
|
150
|
-
--line-height-4: 1.5rem;
|
|
151
|
-
--line-height-5: 2rem;
|
|
152
|
-
--line-height-6: 2.5rem;
|
|
153
|
-
--line-height-7: 3.125rem;
|
|
154
|
-
--line-height-8: 3.5rem;
|
|
155
|
-
--line-height-9: 4.6875rem;
|
|
156
|
-
/* font weights */
|
|
157
|
-
--font-weight-regular: 400;
|
|
158
|
-
--font-weight-medium: 500;
|
|
159
|
-
--font-weight-bold: 700;
|
|
160
|
-
/* letter spacing */
|
|
161
|
-
--letter-spacing-0: 0;
|
|
162
|
-
--letter-spacing-1: 2.5%;
|
|
163
|
-
/* typography scale small screen */
|
|
164
|
-
--typography-s-display-lg-font-size: var(--font-size-8);
|
|
165
|
-
--typography-s-display-lg-line-height: var(--line-height-7);
|
|
166
|
-
--typography-s-display-lg-font-weight: var(--font-weight-bold);
|
|
167
|
-
--typography-s-display-lg-letter-spacing: var(--letter-spacing-0);
|
|
168
|
-
--typography-s-display-md-font-size: var(--font-size-7);
|
|
169
|
-
--typography-s-display-md-line-height: var(--line-height-6);
|
|
170
|
-
--typography-s-display-md-font-weight: var(--font-weight-bold);
|
|
171
|
-
--typography-s-display-md-letter-spacing: var(--letter-spacing-0);
|
|
172
|
-
--typography-s-heading-lg-font-size: var(--font-size-6);
|
|
173
|
-
--typography-s-heading-lg-line-height: var(--line-height-5);
|
|
174
|
-
--typography-s-heading-lg-font-weight: var(--font-weight-bold);
|
|
175
|
-
--typography-s-heading-lg-letter-spacing: var(--letter-spacing-0);
|
|
176
|
-
--typography-s-heading-md-font-size: var(--font-size-5);
|
|
177
|
-
--typography-s-heading-md-line-height: var(--line-height-4);
|
|
178
|
-
--typography-s-heading-md-font-weight: var(--font-weight-bold);
|
|
179
|
-
--typography-s-heading-md-letter-spacing: var(--letter-spacing-0);
|
|
180
|
-
--typography-s-heading-sm-font-size: var(--font-size-4);
|
|
181
|
-
--typography-s-heading-sm-line-height: var(--line-height-4);
|
|
182
|
-
--typography-s-heading-sm-font-weight: var(--font-weight-bold);
|
|
183
|
-
--typography-s-heading-sm-letter-spacing: var(--letter-spacing-0);
|
|
184
|
-
--typography-s-body-lg-medium-font-size: var(--font-size-5);
|
|
185
|
-
--typography-s-body-lg-medium-line-height: var(--line-height-4);
|
|
186
|
-
--typography-s-body-lg-medium-font-weight: var(--font-weight-medium);
|
|
187
|
-
--typography-s-body-lg-medium-letter-spacing: var(--letter-spacing-0);
|
|
188
|
-
--typography-s-body-lg-regular-font-size: var(--font-size-5);
|
|
189
|
-
--typography-s-body-lg-regular-line-height: var(--line-height-4);
|
|
190
|
-
--typography-s-body-lg-regular-font-weight: var(--font-weight-medium);
|
|
191
|
-
--typography-s-body-lg-regular-letter-spacing: var(--letter-spacing-0);
|
|
192
|
-
--typography-s-body-md-bold-font-size: var(--font-size-4);
|
|
193
|
-
--typography-s-body-md-bold-line-height: var(--line-height-4);
|
|
194
|
-
--typography-s-body-md-bold-font-weight: var(--font-weight-bold);
|
|
195
|
-
--typography-s-body-md-bold-letter-spacing: var(--letter-spacing-0);
|
|
196
|
-
--typography-s-body-md-medium-font-size: var(--font-size-4);
|
|
197
|
-
--typography-s-body-md-medium-line-height: var(--line-height-4);
|
|
198
|
-
--typography-s-body-md-medium-font-weight: var(--font-weight-medium);
|
|
199
|
-
--typography-s-body-md-medium-letter-spacing: var(--letter-spacing-0);
|
|
200
|
-
--typography-s-body-md-font-size: var(--font-size-4);
|
|
201
|
-
--typography-s-body-md-line-height: var(--line-height-4);
|
|
202
|
-
--typography-s-body-md-font-weight: var(--font-weight-regular);
|
|
203
|
-
--typography-s-body-md-letter-spacing: var(--letter-spacing-0);
|
|
204
|
-
--typography-s-body-sm-bold-font-size: var(--font-size-3);
|
|
205
|
-
--typography-s-body-sm-bold-line-height: var(--line-height-3);
|
|
206
|
-
--typography-s-body-sm-bold-font-weight: var(--font-weight-bold);
|
|
207
|
-
--typography-s-body-sm-bold-letter-spacing: var(--letter-spacing-0);
|
|
208
|
-
--typography-s-body-sm-medium-font-size: var(--font-size-3);
|
|
209
|
-
--typography-s-body-sm-medium-line-height: var(--line-height-3);
|
|
210
|
-
--typography-s-body-sm-medium-font-weight: var(--font-weight-medium);
|
|
211
|
-
--typography-s-body-sm-medium-letter-spacing: var(--letter-spacing-0);
|
|
212
|
-
--typography-s-body-sm-font-size: var(--font-size-3);
|
|
213
|
-
--typography-s-body-sm-line-height: var(--line-height-3);
|
|
214
|
-
--typography-s-body-sm-font-weight: var(--font-weight-regular);
|
|
215
|
-
--typography-s-body-sm-letter-spacing: var(--letter-spacing-0);
|
|
216
|
-
--typography-s-body-xs-medium-font-size: var(--font-size-2);
|
|
217
|
-
--typography-s-body-xs-medium-line-height: var(--line-height-2);
|
|
218
|
-
--typography-s-body-xs-medium-font-weight: var(--font-weight-medium);
|
|
219
|
-
--typography-s-body-xs-medium-letter-spacing: var(--letter-spacing-1);
|
|
220
|
-
--typography-s-body-xs-font-size: var(--font-size-2);
|
|
221
|
-
--typography-s-body-xs-line-height: var(--line-height-2);
|
|
222
|
-
--typography-s-body-xs-font-weight: var(--font-weight-regular);
|
|
223
|
-
--typography-s-body-xs-letter-spacing: var(--letter-spacing-1);
|
|
224
|
-
--typography-s-page-heading-font-size: var(--font-size-6);
|
|
225
|
-
--typography-s-page-heading-line-height: var(--line-height-5);
|
|
226
|
-
--typography-s-page-heading-font-weight: var(--font-weight-bold);
|
|
227
|
-
--typography-s-page-heading-letter-spacing: var(--letter-spacing-0);
|
|
228
|
-
--typography-s-section-heading-font-size: var(--font-size-5);
|
|
229
|
-
--typography-s-section-heading-line-height: var(--line-height-4);
|
|
230
|
-
--typography-s-section-heading-font-weight: var(--font-weight-bold);
|
|
231
|
-
--typography-s-section-heading-letter-spacing: var(--letter-spacing-0);
|
|
232
|
-
--typography-s-button-label-md-font-size: var(--font-size-4);
|
|
233
|
-
--typography-s-button-label-md-line-height: var(--line-height-4);
|
|
234
|
-
--typography-s-button-label-md-font-weight: var(--font-weight-medium);
|
|
235
|
-
--typography-s-button-label-md-letter-spacing: var(--letter-spacing-0);
|
|
236
|
-
--typography-s-button-label-lg-font-size: var(--font-size-5);
|
|
237
|
-
--typography-s-button-label-lg-line-height: var(--line-height-4);
|
|
238
|
-
--typography-s-button-label-lg-font-weight: var(--font-weight-medium);
|
|
239
|
-
--typography-s-button-label-lg-letter-spacing: var(--letter-spacing-0);
|
|
240
|
-
--typography-s-amount-display-lg-font-size: var(--font-size-8);
|
|
241
|
-
--typography-s-amount-display-lg-line-height: var(--line-height-7);
|
|
242
|
-
--typography-s-amount-display-lg-font-weight: var(--font-weight-bold);
|
|
243
|
-
--typography-s-amount-display-lg-letter-spacing: var(--letter-spacing-0);
|
|
244
|
-
|
|
245
|
-
/* typography scale large screen */
|
|
246
|
-
--typography-l-display-lg-font-size: var(--font-size-10);
|
|
247
|
-
--typography-l-display-lg-line-height: var(--line-height-9);
|
|
248
|
-
--typography-l-display-lg-font-weight: var(--font-weight-medium);
|
|
249
|
-
--typography-l-display-lg-letter-spacing: var(--letter-spacing-0);
|
|
250
|
-
--typography-l-display-md-font-size: var(--font-size-9);
|
|
251
|
-
--typography-l-display-md-line-height: var(--line-height-8);
|
|
252
|
-
--typography-l-display-md-font-weight: var(--font-weight-medium);
|
|
253
|
-
--typography-l-display-md-letter-spacing: var(--letter-spacing-0);
|
|
254
|
-
--typography-l-heading-lg-font-size: var(--font-size-7);
|
|
255
|
-
--typography-l-heading-lg-line-height: var(--line-height-6);
|
|
256
|
-
--typography-l-heading-lg-font-weight: var(--font-weight-bold);
|
|
257
|
-
--typography-l-heading-lg-letter-spacing: var(--letter-spacing-0);
|
|
258
|
-
--typography-l-heading-md-font-size: var(--font-size-6);
|
|
259
|
-
--typography-l-heading-md-line-height: var(--line-height-5);
|
|
260
|
-
--typography-l-heading-md-font-weight: var(--font-weight-bold);
|
|
261
|
-
--typography-l-heading-md-letter-spacing: var(--letter-spacing-0);
|
|
262
|
-
--typography-l-heading-sm-font-size: var(--font-size-5);
|
|
263
|
-
--typography-l-heading-sm-line-height: var(--line-height-4);
|
|
264
|
-
--typography-l-heading-sm-font-weight: var(--font-weight-bold);
|
|
265
|
-
--typography-l-heading-sm-letter-spacing: var(--letter-spacing-0);
|
|
266
|
-
--typography-l-body-lg-medium-font-size: var(--font-size-5);
|
|
267
|
-
--typography-l-body-lg-medium-line-height: var(--line-height-4);
|
|
268
|
-
--typography-l-body-lg-medium-font-weight: var(--font-weight-medium);
|
|
269
|
-
--typography-l-body-lg-medium-letter-spacing: var(--letter-spacing-0);
|
|
270
|
-
--typography-l-body-md-bold-font-size: var(--font-size-4);
|
|
271
|
-
--typography-l-body-md-bold-line-height: var(--line-height-4);
|
|
272
|
-
--typography-l-body-md-bold-font-weight: var(--font-weight-bold);
|
|
273
|
-
--typography-l-body-md-bold-letter-spacing: var(--letter-spacing-0);
|
|
274
|
-
--typography-l-body-md-medium-font-size: var(--font-size-4);
|
|
275
|
-
--typography-l-body-md-medium-line-height: var(--line-height-4);
|
|
276
|
-
--typography-l-body-md-medium-font-weight: var(--font-weight-medium);
|
|
277
|
-
--typography-l-body-md-medium-letter-spacing: var(--letter-spacing-0);
|
|
278
|
-
--typography-l-body-md-font-size: var(--font-size-4);
|
|
279
|
-
--typography-l-body-md-line-height: var(--line-height-4);
|
|
280
|
-
--typography-l-body-md-font-weight: var(--font-weight-regular);
|
|
281
|
-
--typography-l-body-md-letter-spacing: var(--letter-spacing-0);
|
|
282
|
-
--typography-l-body-sm-bold-font-size: var(--font-size-3);
|
|
283
|
-
--typography-l-body-sm-bold-line-height: var(--line-height-3);
|
|
284
|
-
--typography-l-body-sm-bold-font-weight: var(--font-weight-bold);
|
|
285
|
-
--typography-l-body-sm-bold-letter-spacing: var(--letter-spacing-0);
|
|
286
|
-
--typography-l-body-sm-medium-font-size: var(--font-size-3);
|
|
287
|
-
--typography-l-body-sm-medium-line-height: var(--line-height-3);
|
|
288
|
-
--typography-l-body-sm-medium-font-weight: var(--font-weight-medium);
|
|
289
|
-
--typography-l-body-sm-medium-letter-spacing: var(--letter-spacing-0);
|
|
290
|
-
--typography-l-body-sm-font-size: var(--font-size-3);
|
|
291
|
-
--typography-l-body-sm-line-height: var(--line-height-3);
|
|
292
|
-
--typography-l-body-sm-font-weight: var(--font-weight-regular);
|
|
293
|
-
--typography-l-body-sm-letter-spacing: var(--letter-spacing-0);
|
|
294
|
-
--typography-l-body-xs-medium-font-size: var(--font-size-2);
|
|
295
|
-
--typography-l-body-xs-medium-line-height: var(--line-height-2);
|
|
296
|
-
--typography-l-body-xs-medium-font-weight: var(--font-weight-medium);
|
|
297
|
-
--typography-l-body-xs-medium-letter-spacing: var(--letter-spacing-1);
|
|
298
|
-
--typography-l-body-xs-font-size: var(--font-size-2);
|
|
299
|
-
--typography-l-body-xs-line-height: var(--line-height-2);
|
|
300
|
-
--typography-l-body-xs-font-weight: var(--font-weight-regular);
|
|
301
|
-
--typography-l-body-xs-letter-spacing: var(--letter-spacing-1);
|
|
302
|
-
--typography-l-page-heading-font-size: var(--font-size-7);
|
|
303
|
-
--typography-l-page-heading-line-height: var(--line-height-6);
|
|
304
|
-
--typography-l-page-heading-font-weight: var(--font-weight-bold);
|
|
305
|
-
--typography-l-page-heading-letter-spacing: var(--letter-spacing-0);
|
|
306
|
-
--typography-l-section-heading-font-size: var(--font-size-6);
|
|
307
|
-
--typography-l-section-heading-line-height: var(--line-height-5);
|
|
308
|
-
--typography-l-section-heading-font-weight: var(--font-weight-bold);
|
|
309
|
-
--typography-l-section-heading-letter-spacing: var(--letter-spacing-0);
|
|
310
|
-
--typography-l-button-label-md-font-size: var(--font-size-4);
|
|
311
|
-
--typography-l-button-label-md-line-height: var(--line-height-4);
|
|
312
|
-
--typography-l-button-label-md-font-weight: var(--font-weight-medium);
|
|
313
|
-
--typography-l-button-label-md-letter-spacing: var(--letter-spacing-0);
|
|
314
|
-
--typography-l-button-label-lg-font-size: var(--font-size-5);
|
|
315
|
-
--typography-l-button-label-lg-line-height: var(--line-height-4);
|
|
316
|
-
--typography-l-button-label-lg-font-weight: var(--font-weight-medium);
|
|
317
|
-
--typography-l-button-label-lg-letter-spacing: var(--letter-spacing-0);
|
|
318
|
-
--typography-l-amount-display-lg-font-size: var(--font-size-10);
|
|
319
|
-
--typography-l-amount-display-lg-line-height: var(--line-height-9);
|
|
320
|
-
--typography-l-amount-display-lg-font-weight: var(--font-weight-medium);
|
|
321
|
-
--typography-l-amount-display-lg-letter-spacing: var(--letter-spacing-0);
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
/**
|
|
325
|
-
* Shadow
|
|
326
|
-
*/
|
|
327
|
-
|
|
328
|
-
:root {
|
|
329
|
-
/* shadow */
|
|
330
|
-
--shadow-size-xs: 0 2px 4px 0;
|
|
331
|
-
--shadow-size-sm: 0 2px 8px 0;
|
|
332
|
-
--shadow-size-md: 0 2px 16px 0;
|
|
333
|
-
--shadow-size-lg: 0 2px 40px 0;
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
@theme {
|
|
337
|
-
--font-size-*: initial;
|
|
338
|
-
--font-weight-*: initial;
|
|
339
|
-
--color-*: initial;
|
|
340
|
-
--box-shadow-*: initial;
|
|
341
|
-
|
|
342
|
-
--color-inherit: inherit;
|
|
343
|
-
--color-current: currentColor;
|
|
344
|
-
--color-transparent: transparent;
|
|
345
|
-
--color-black: #000000;
|
|
346
|
-
--color-white: #ffffff;
|
|
347
|
-
|
|
348
|
-
/* Background default should be the darkest shade, 0 elevation.
|
|
349
|
-
Section is +1 elevation, subsection is +2 elevation.
|
|
350
|
-
Alternative should be deprecated. */
|
|
351
|
-
--color-background-default: var(--brand-colors-grey-grey000);
|
|
352
|
-
--color-background-section: var(--brand-colors-grey-grey050);
|
|
353
|
-
--color-background-subsection: var(--brand-colors-grey-grey000);
|
|
354
|
-
--color-background-alternative: var(--brand-colors-grey-grey050);
|
|
355
|
-
|
|
356
|
-
/* Applied to interactive elements, such as buttons.
|
|
357
|
-
For light mode, we use 8% increments of opacity to offer
|
|
358
|
-
sufficient affordance for usability. */
|
|
359
|
-
--color-background-muted: #b4b4b528;
|
|
360
|
-
--color-background-muted-hover: #b4b4b53d;
|
|
361
|
-
--color-background-muted-pressed: #b4b4b552;
|
|
362
|
-
|
|
363
|
-
/* Ensures visual consistency with section and subsection. */
|
|
364
|
-
--color-background-default-hover: var(--brand-colors-grey-grey050);
|
|
365
|
-
--color-background-default-pressed: var(--brand-colors-grey-grey100);
|
|
366
|
-
|
|
367
|
-
/* These colors should be deprecated eventually for simplicity */
|
|
368
|
-
--color-background-alternative-hover: #ebedf1;
|
|
369
|
-
--color-background-alternative-pressed: #e1e4ea;
|
|
370
|
-
|
|
371
|
-
/* These have opacities of pure white for general usage.
|
|
372
|
-
Visually, they align with section and subsection.*/
|
|
373
|
-
--color-background-hover: #b4b4b528;
|
|
374
|
-
--color-background-pressed: #b4b4b53d;
|
|
375
|
-
|
|
376
|
-
/* These are our content colors.
|
|
377
|
-
Contrast ratio of alternative: 5.7 on default, 5.1 on section.
|
|
378
|
-
Contrast ratio of muted: 1.9 on default, 1.7 on section.*/
|
|
379
|
-
--color-text-default: var(--brand-colors-grey-grey900);
|
|
380
|
-
--color-text-alternative: var(--brand-colors-grey-grey500);
|
|
381
|
-
--color-text-muted: var(--brand-colors-grey-grey200);
|
|
382
|
-
|
|
383
|
-
--color-icon-default: var(--brand-colors-grey-grey900);
|
|
384
|
-
--color-icon-default-hover: #2a2b2c;
|
|
385
|
-
--color-icon-default-pressed: #414243;
|
|
386
|
-
|
|
387
|
-
--color-icon-alternative: var(--brand-colors-grey-grey500);
|
|
388
|
-
--color-icon-muted: var(--brand-colors-grey-grey200);
|
|
389
|
-
--color-icon-inverse: var(--brand-colors-grey-grey000);
|
|
390
|
-
|
|
391
|
-
/* Border default has a 3:3 ratio when applied on bg-default
|
|
392
|
-
and 3.0 on section. We use opacity for border-muted so it
|
|
393
|
-
maintains sufficient contrast on bg-default and bg-section.*/
|
|
394
|
-
--color-border-default: var(--brand-colors-grey-grey400);
|
|
395
|
-
--color-border-muted: #b4b4b566;
|
|
396
|
-
|
|
397
|
-
/* Derived from the background hue, 264.5, for consistency.
|
|
398
|
-
Opacity for default is 36%, alternative is 57%. Default is meant
|
|
399
|
-
to be the inverse of dark mode so the layering feels consistent
|
|
400
|
-
across themes. Alternative is relatively darker in light mode for
|
|
401
|
-
better contrast.*/
|
|
402
|
-
--color-overlay-default: #0a0d135c;
|
|
403
|
-
--color-overlay-alternative: #0a0d1392;
|
|
404
|
-
--color-overlay-inverse: var(--brand-colors-grey-grey000);
|
|
405
|
-
|
|
406
|
-
/* For primary semantic elements: interactive, active, selected (#4459ff) */
|
|
407
|
-
--color-primary-default: var(--brand-colors-blue-blue500);
|
|
408
|
-
/* Stronger color for primary semantic elements (#2c3dc5) */
|
|
409
|
-
--color-primary-alternative: var(--brand-colors-blue-blue600);
|
|
410
|
-
/* Muted color for primary semantic elements (#4459ff1a) */
|
|
411
|
-
--color-primary-muted: #4459ff1a;
|
|
412
|
-
/* For elements placed on top of primary/default (#ffffff) */
|
|
413
|
-
--color-primary-inverse: var(--brand-colors-grey-grey000);
|
|
414
|
-
/* Hover state surface for primary/default (#384df5) */
|
|
415
|
-
--color-primary-default-hover: #384df5;
|
|
416
|
-
/* Pressed state surface for primary/default (#2b3eda) */
|
|
417
|
-
--color-primary-default-pressed: #2b3eda;
|
|
418
|
-
/* Hover state surface for primary/muted (#4459ff26) */
|
|
419
|
-
--color-primary-muted-hover: #4459ff26;
|
|
420
|
-
/* Pressed state surface for primary/muted (#4459ff33) */
|
|
421
|
-
--color-primary-muted-pressed: #4459ff33;
|
|
422
|
-
/* For danger semantic elements: error, critical, destructive (#ca3542) */
|
|
423
|
-
--color-error-default: var(--brand-colors-red-red500);
|
|
424
|
-
/* Stronger color for error semantic (#952731) */
|
|
425
|
-
--color-error-alternative: var(--brand-colors-red-red600);
|
|
426
|
-
/* Muted color for error semantic (#ca35421a) */
|
|
427
|
-
--color-error-muted: #ca35421a;
|
|
428
|
-
/* For elements placed on top of error/default (#ffffff) */
|
|
429
|
-
--color-error-inverse: var(--brand-colors-grey-grey000);
|
|
430
|
-
/* Hover state surface for error/default (#ba313d) */
|
|
431
|
-
--color-error-default-hover: #ba313d;
|
|
432
|
-
/* Pressed state surface for error/default (#9a2832) */
|
|
433
|
-
--color-error-default-pressed: #9a2832;
|
|
434
|
-
/* Hover state surface for error/muted (#ca354226) */
|
|
435
|
-
--color-error-muted-hover: #ca354226;
|
|
436
|
-
/* Pressed state surface for error/muted (#ca354233) */
|
|
437
|
-
--color-error-muted-pressed: #ca354233;
|
|
438
|
-
/* For warning semantic elements: caution, attention, precaution (#9a6300) */
|
|
439
|
-
--color-warning-default: var(--brand-colors-yellow-yellow500);
|
|
440
|
-
/* Muted color option for warning semantic (#9a63001a) */
|
|
441
|
-
--color-warning-muted: #9a63001a;
|
|
442
|
-
/* For elements placed on top of warning/default (#ffffff) */
|
|
443
|
-
--color-warning-inverse: var(--brand-colors-grey-grey000);
|
|
444
|
-
/* Hover state surface for warning/default (#855500) */
|
|
445
|
-
--color-warning-default-hover: #855500;
|
|
446
|
-
/* Pressed state surface for warning/default (#5c3b00) */
|
|
447
|
-
--color-warning-default-pressed: #5c3b00;
|
|
448
|
-
/* Hover state surface for warning/muted (#9a630026) */
|
|
449
|
-
--color-warning-muted-hover: #9a630026;
|
|
450
|
-
/* Pressed state surface for warning/muted (#9a630033) */
|
|
451
|
-
--color-warning-muted-pressed: #9a630033;
|
|
452
|
-
/* For positive semantic elements: success, confirm, complete, safe (#457A39) */
|
|
453
|
-
--color-success-default: var(--brand-colors-lime-lime500);
|
|
454
|
-
/* Muted color for positive semantic (#457a391a) */
|
|
455
|
-
--color-success-muted: #457a391a;
|
|
456
|
-
/* For elements placed on top of success/default (#ffffff) */
|
|
457
|
-
--color-success-inverse: var(--brand-colors-grey-grey000);
|
|
458
|
-
/* Hover state surface for success/default (#3d6c32) */
|
|
459
|
-
--color-success-default-hover: #3d6c32;
|
|
460
|
-
/* Pressed state surface for success/default (#2d5025) */
|
|
461
|
-
--color-success-default-pressed: #2d5025;
|
|
462
|
-
/* Hover state surface for success/muted (#457a3926) */
|
|
463
|
-
--color-success-muted-hover: #457a3926;
|
|
464
|
-
/* Pressed state surface for success/muted (#457a3933) */
|
|
465
|
-
--color-success-muted-pressed: #457a3933;
|
|
466
|
-
/* For informational read-only elements: info, reminder, hint (#4459ff) */
|
|
467
|
-
--color-info-default: var(--brand-colors-blue-blue500);
|
|
468
|
-
/* Muted color for informational semantic (#4459ff1a) */
|
|
469
|
-
--color-info-muted: #4459ff1a;
|
|
470
|
-
/* For elements placed on top of info/default (#ffffff) */
|
|
471
|
-
--color-info-inverse: var(--brand-colors-grey-grey000);
|
|
472
|
-
/* Expressive color in light orange (#ffa680) */
|
|
473
|
-
--color-accent01-light: var(--brand-colors-orange-orange200);
|
|
474
|
-
/* Expressive color in orange (#ff5c16) */
|
|
475
|
-
--color-accent01-normal: var(--brand-colors-orange-orange400);
|
|
476
|
-
/* Expressive color in dark orange (#661800) */
|
|
477
|
-
--color-accent01-dark: var(--brand-colors-orange-orange700);
|
|
478
|
-
/* Expressive color in light purple (#eac2ff) */
|
|
479
|
-
--color-accent02-light: var(--brand-colors-purple-purple100);
|
|
480
|
-
/* Expressive color in purple (#d075ff) */
|
|
481
|
-
--color-accent02-normal: var(--brand-colors-purple-purple300);
|
|
482
|
-
/* Expressive color in dark purple (#3d065f) */
|
|
483
|
-
--color-accent02-dark: var(--brand-colors-purple-purple800);
|
|
484
|
-
/* Expressive color in light lime (#e5ffc3) */
|
|
485
|
-
--color-accent03-light: var(--brand-colors-lime-lime050);
|
|
486
|
-
/* Expressive color in lime (#baf24a) */
|
|
487
|
-
--color-accent03-normal: var(--brand-colors-lime-lime100);
|
|
488
|
-
/* Expressive color in dark lime (#013330) */
|
|
489
|
-
--color-accent03-dark: var(--brand-colors-lime-lime700);
|
|
490
|
-
/* Expressive color in light indigo (#) */
|
|
491
|
-
--color-accent04-light: var(--brand-colors-indigo-indigo100);
|
|
492
|
-
/* Expressive color in indigo (#) */
|
|
493
|
-
--color-accent04-normal: var(--brand-colors-indigo-indigo200);
|
|
494
|
-
/* Expressive color in dark indigo (#) */
|
|
495
|
-
--color-accent04-dark: var(--brand-colors-indigo-indigo800);
|
|
496
|
-
/* For Flask primary accent color (#8f44e4) */
|
|
497
|
-
--color-flask-default: var(--brand-colors-purple-purple500);
|
|
498
|
-
/* For elements placed on top of flask/default (#ffffff) */
|
|
499
|
-
--color-flask-inverse: var(--brand-colors-grey-grey000);
|
|
500
|
-
/* For neutral drop shadow color (black-10% | black-40%) */
|
|
501
|
-
--color-shadow-default: #0000001a;
|
|
502
|
-
/* For primary drop shadow color (blue500-20% | blue300-20%) */
|
|
503
|
-
--color-shadow-primary: #4459ff33;
|
|
504
|
-
/* For critical/danger drop shadow color (red50-20% | red300-20%) */
|
|
505
|
-
--color-shadow-error: #ca354266;
|
|
506
|
-
|
|
507
|
-
/* Box Shadows */
|
|
508
|
-
--box-shadow-xs: var(--shadow-size-xs)
|
|
509
|
-
var(--shadow-color, var(--color-shadow-default));
|
|
510
|
-
--box-shadow-sm: var(--shadow-size-sm)
|
|
511
|
-
var(--shadow-color, var(--color-shadow-default));
|
|
512
|
-
--box-shadow-md: var(--shadow-size-md)
|
|
513
|
-
var(--shadow-color, var(--color-shadow-default));
|
|
514
|
-
--box-shadow-lg: var(--shadow-size-lg)
|
|
515
|
-
var(--shadow-color, var(--color-shadow-default));
|
|
516
|
-
}
|
|
517
|
-
|
|
518
|
-
/**
|
|
519
|
-
* Light Theme Colors
|
|
520
|
-
* Explicitly scoped so .light resets variables when nested inside .dark.
|
|
521
|
-
* The :root values come from @theme above — this block only needs
|
|
522
|
-
* the class/attribute selectors for runtime theme switching.
|
|
523
|
-
*/
|
|
524
|
-
|
|
525
|
-
[data-theme='light'],
|
|
526
|
-
.light {
|
|
527
|
-
--color-background-default: var(--brand-colors-grey-grey000);
|
|
528
|
-
--color-background-section: var(--brand-colors-grey-grey050);
|
|
529
|
-
--color-background-subsection: var(--brand-colors-grey-grey000);
|
|
530
|
-
--color-background-alternative: var(--brand-colors-grey-grey050);
|
|
531
|
-
--color-background-muted: #b4b4b528;
|
|
532
|
-
--color-background-muted-hover: #b4b4b53d;
|
|
533
|
-
--color-background-muted-pressed: #b4b4b552;
|
|
534
|
-
--color-background-default-hover: var(--brand-colors-grey-grey050);
|
|
535
|
-
--color-background-default-pressed: var(--brand-colors-grey-grey100);
|
|
536
|
-
--color-background-alternative-hover: #ebedf1;
|
|
537
|
-
--color-background-alternative-pressed: #e1e4ea;
|
|
538
|
-
--color-background-hover: #b4b4b528;
|
|
539
|
-
--color-background-pressed: #b4b4b53d;
|
|
540
|
-
--color-text-default: var(--brand-colors-grey-grey900);
|
|
541
|
-
--color-text-alternative: var(--brand-colors-grey-grey500);
|
|
542
|
-
--color-text-muted: var(--brand-colors-grey-grey200);
|
|
543
|
-
--color-icon-default: var(--brand-colors-grey-grey900);
|
|
544
|
-
--color-icon-default-hover: #2a2b2c;
|
|
545
|
-
--color-icon-default-pressed: #414243;
|
|
546
|
-
--color-icon-alternative: var(--brand-colors-grey-grey500);
|
|
547
|
-
--color-icon-muted: var(--brand-colors-grey-grey200);
|
|
548
|
-
--color-icon-inverse: var(--brand-colors-grey-grey000);
|
|
549
|
-
--color-border-default: var(--brand-colors-grey-grey400);
|
|
550
|
-
--color-border-muted: #b4b4b566;
|
|
551
|
-
--color-overlay-default: #0a0d135c;
|
|
552
|
-
--color-overlay-alternative: #0a0d1392;
|
|
553
|
-
--color-overlay-inverse: var(--brand-colors-grey-grey000);
|
|
554
|
-
--color-primary-default: var(--brand-colors-blue-blue500);
|
|
555
|
-
--color-primary-alternative: var(--brand-colors-blue-blue600);
|
|
556
|
-
--color-primary-muted: #4459ff1a;
|
|
557
|
-
--color-primary-inverse: var(--brand-colors-grey-grey000);
|
|
558
|
-
--color-primary-default-hover: #384df5;
|
|
559
|
-
--color-primary-default-pressed: #2b3eda;
|
|
560
|
-
--color-primary-muted-hover: #4459ff26;
|
|
561
|
-
--color-primary-muted-pressed: #4459ff33;
|
|
562
|
-
--color-error-default: var(--brand-colors-red-red500);
|
|
563
|
-
--color-error-alternative: var(--brand-colors-red-red600);
|
|
564
|
-
--color-error-muted: #ca35421a;
|
|
565
|
-
--color-error-inverse: var(--brand-colors-grey-grey000);
|
|
566
|
-
--color-error-default-hover: #ba313d;
|
|
567
|
-
--color-error-default-pressed: #9a2832;
|
|
568
|
-
--color-error-muted-hover: #ca354226;
|
|
569
|
-
--color-error-muted-pressed: #ca354233;
|
|
570
|
-
--color-warning-default: var(--brand-colors-yellow-yellow500);
|
|
571
|
-
--color-warning-muted: #9a63001a;
|
|
572
|
-
--color-warning-inverse: var(--brand-colors-grey-grey000);
|
|
573
|
-
--color-warning-default-hover: #855500;
|
|
574
|
-
--color-warning-default-pressed: #5c3b00;
|
|
575
|
-
--color-warning-muted-hover: #9a630026;
|
|
576
|
-
--color-warning-muted-pressed: #9a630033;
|
|
577
|
-
--color-success-default: var(--brand-colors-lime-lime500);
|
|
578
|
-
--color-success-muted: #457a391a;
|
|
579
|
-
--color-success-inverse: var(--brand-colors-grey-grey000);
|
|
580
|
-
--color-success-default-hover: #3d6c32;
|
|
581
|
-
--color-success-default-pressed: #2d5025;
|
|
582
|
-
--color-success-muted-hover: #457a3926;
|
|
583
|
-
--color-success-muted-pressed: #457a3933;
|
|
584
|
-
--color-info-default: var(--brand-colors-blue-blue500);
|
|
585
|
-
--color-info-muted: #4459ff1a;
|
|
586
|
-
--color-info-inverse: var(--brand-colors-grey-grey000);
|
|
587
|
-
--color-accent01-light: var(--brand-colors-orange-orange200);
|
|
588
|
-
--color-accent01-normal: var(--brand-colors-orange-orange400);
|
|
589
|
-
--color-accent01-dark: var(--brand-colors-orange-orange700);
|
|
590
|
-
--color-accent02-light: var(--brand-colors-purple-purple100);
|
|
591
|
-
--color-accent02-normal: var(--brand-colors-purple-purple300);
|
|
592
|
-
--color-accent02-dark: var(--brand-colors-purple-purple800);
|
|
593
|
-
--color-accent03-light: var(--brand-colors-lime-lime050);
|
|
594
|
-
--color-accent03-normal: var(--brand-colors-lime-lime100);
|
|
595
|
-
--color-accent03-dark: var(--brand-colors-lime-lime700);
|
|
596
|
-
--color-accent04-light: var(--brand-colors-indigo-indigo100);
|
|
597
|
-
--color-accent04-normal: var(--brand-colors-indigo-indigo200);
|
|
598
|
-
--color-accent04-dark: var(--brand-colors-indigo-indigo800);
|
|
599
|
-
--color-flask-default: var(--brand-colors-purple-purple500);
|
|
600
|
-
--color-flask-inverse: var(--brand-colors-grey-grey000);
|
|
601
|
-
--color-shadow-default: #0000001a;
|
|
602
|
-
--color-shadow-primary: #4459ff33;
|
|
603
|
-
--color-shadow-error: #ca354266;
|
|
604
|
-
}
|
|
605
|
-
|
|
606
|
-
/**
|
|
607
|
-
* Dark Theme Colors
|
|
608
|
-
*/
|
|
609
|
-
|
|
610
|
-
[data-theme='dark'],
|
|
611
|
-
.dark {
|
|
612
|
-
/* Background default should be the darkest shade, 0 elevation.
|
|
613
|
-
Section is +1 elevation, subsection is +2 elevation.
|
|
614
|
-
Alternative should be deprecated. */
|
|
615
|
-
--color-background-default: var(--brand-colors-grey-grey900);
|
|
616
|
-
--color-background-section: var(--brand-colors-grey-grey800);
|
|
617
|
-
--color-background-subsection: var(--brand-colors-grey-grey700);
|
|
618
|
-
--color-background-alternative: var(--brand-colors-grey-grey1000);
|
|
619
|
-
|
|
620
|
-
/* Applied to interactive elements, such as buttons.
|
|
621
|
-
For dark mode, we apply pure white with 4% opacity so these
|
|
622
|
-
tokens inherit the background hue of 264.5. */
|
|
623
|
-
--color-background-muted: #ffffff0a;
|
|
624
|
-
--color-background-muted-hover: #ffffff14;
|
|
625
|
-
--color-background-muted-pressed: #ffffff1f;
|
|
626
|
-
|
|
627
|
-
/* Ensures visual consistency with section and subsection. */
|
|
628
|
-
--color-background-default-hover: var(--brand-colors-grey-grey800);
|
|
629
|
-
--color-background-default-pressed: var(--brand-colors-grey-grey700);
|
|
630
|
-
|
|
631
|
-
/* Hover state surface for background/alternative (#0d0d0e) */
|
|
632
|
-
--color-background-alternative-hover: #0d0d0e;
|
|
633
|
-
--color-background-alternative-pressed: #161617;
|
|
634
|
-
|
|
635
|
-
/* These have opacities of pure white for general usage.
|
|
636
|
-
We set 8% for hover and 12% for pressed so these tokens pick up
|
|
637
|
-
background hues and are consistent with +1 and +2 elevations.*/
|
|
638
|
-
--color-background-hover: #ffffff0a;
|
|
639
|
-
--color-background-pressed: #ffffff1f;
|
|
640
|
-
|
|
641
|
-
/* These are our content colors.
|
|
642
|
-
Contrast ratio of alternative: 7.4 on default, 8.5 on section.
|
|
643
|
-
Contrast ratio of muted: 2.0 on default, 1.8 on section.*/
|
|
644
|
-
--color-text-default: var(--brand-colors-grey-grey000);
|
|
645
|
-
--color-text-alternative: var(--brand-colors-grey-grey300);
|
|
646
|
-
--color-text-muted: var(--brand-colors-grey-grey600);
|
|
647
|
-
|
|
648
|
-
--color-icon-default: var(--brand-colors-grey-grey000);
|
|
649
|
-
--color-icon-default-hover: #f0f0f0;
|
|
650
|
-
--color-icon-default-pressed: #d0d0d0;
|
|
651
|
-
|
|
652
|
-
--color-icon-alternative: var(--brand-colors-grey-grey300);
|
|
653
|
-
--color-icon-muted: var(--brand-colors-grey-grey600);
|
|
654
|
-
--color-icon-inverse: var(--brand-colors-grey-grey900);
|
|
655
|
-
|
|
656
|
-
/* Contrast of border-default: 3:3 on bg-default, 3.0 on section.
|
|
657
|
-
We use 8% opacify of pure white for border-muted so it maintains
|
|
658
|
-
sufficient contrast on bg-default and bg-section.*/
|
|
659
|
-
--color-border-default: var(--brand-colors-grey-grey500);
|
|
660
|
-
--color-border-muted: #ffffff14;
|
|
661
|
-
|
|
662
|
-
/* Derived from the same hue as bg-default, 264.5, for visual
|
|
663
|
-
consistency. Ensures we don't have too much "red".
|
|
664
|
-
Opacities are 72% and 84% for default and alternative. */
|
|
665
|
-
--color-overlay-default: #030304b8;
|
|
666
|
-
--color-overlay-alternative: #030304d6;
|
|
667
|
-
--color-overlay-inverse: var(--brand-colors-grey-grey000);
|
|
668
|
-
|
|
669
|
-
/* For primary semantic elements: interactive, active, selected (#8b99ff) */
|
|
670
|
-
--color-primary-default: var(--brand-colors-blue-blue300);
|
|
671
|
-
/* Stronger color for primary semantic elements (#adb6fe) */
|
|
672
|
-
--color-primary-alternative: var(--brand-colors-blue-blue200);
|
|
673
|
-
/* Muted color for primary semantic elements (#8b99ff26) */
|
|
674
|
-
--color-primary-muted: #8b99ff26;
|
|
675
|
-
/* For elements placed on top of primary/default (#121314) */
|
|
676
|
-
--color-primary-inverse: var(--brand-colors-grey-grey900);
|
|
677
|
-
/* Hover state surface for primary/default (#9eaaff) */
|
|
678
|
-
--color-primary-default-hover: #9eaaff;
|
|
679
|
-
/* Pressed state surface for primary/default (#c7ceff) */
|
|
680
|
-
--color-primary-default-pressed: #c7ceff;
|
|
681
|
-
/* Hover state surface for primary/muted (#8b99ff33) */
|
|
682
|
-
--color-primary-muted-hover: #8b99ff33;
|
|
683
|
-
/* Pressed state surface for primary/muted (#8b99ff40) */
|
|
684
|
-
--color-primary-muted-pressed: #8b99ff40;
|
|
685
|
-
/* For danger semantic elements: error, critical, destructive (#ff7584) */
|
|
686
|
-
--color-error-default: var(--brand-colors-red-red300);
|
|
687
|
-
/* Stronger color for error semantic (#ffa1aa) */
|
|
688
|
-
--color-error-alternative: var(--brand-colors-red-red200);
|
|
689
|
-
/* Muted color for error semantic (#ff758426) */
|
|
690
|
-
--color-error-muted: #ff758426;
|
|
691
|
-
/* For elements placed on top of error/default (#121314) */
|
|
692
|
-
--color-error-inverse: var(--brand-colors-grey-grey900);
|
|
693
|
-
/* Hover state surface for error/default (#ff8a96) */
|
|
694
|
-
--color-error-default-hover: #ff8a96;
|
|
695
|
-
/* Pressed state surface for error/default (#ffb2bb) */
|
|
696
|
-
--color-error-default-pressed: #ffb2bb;
|
|
697
|
-
/* Hover state surface for error/muted (#ff758433) */
|
|
698
|
-
--color-error-muted-hover: #ff758433;
|
|
699
|
-
/* Pressed state surface for error/muted (#ff758440) */
|
|
700
|
-
--color-error-muted-pressed: #ff758440;
|
|
701
|
-
/* For warning semantic elements: caution, attention, precaution (#f0b034) */
|
|
702
|
-
--color-warning-default: var(--brand-colors-yellow-yellow200);
|
|
703
|
-
/* Muted color option for warning semantic (#f0b03426) */
|
|
704
|
-
--color-warning-muted: #f0b03426;
|
|
705
|
-
/* For elements placed on top of warning/default (#121314) */
|
|
706
|
-
--color-warning-inverse: var(--brand-colors-grey-grey900);
|
|
707
|
-
/* Hover state surface for warning/default (#f3be59) */
|
|
708
|
-
--color-warning-default-hover: #f3be59;
|
|
709
|
-
/* Pressed state surface for warning/default (#f6cd7f) */
|
|
710
|
-
--color-warning-default-pressed: #f6cd7f;
|
|
711
|
-
/* Hover state surface for warning/muted (#f0b03433) */
|
|
712
|
-
--color-warning-muted-hover: #f0b03433;
|
|
713
|
-
/* Pressed state surface for warning/muted (#f0b03440) */
|
|
714
|
-
--color-warning-muted-pressed: #f0b03440;
|
|
715
|
-
/* For positive semantic elements: success, confirm, complete, safe (#baf24a) */
|
|
716
|
-
--color-success-default: var(--brand-colors-lime-lime100);
|
|
717
|
-
/* Muted color for positive semantic (#baf24a26) */
|
|
718
|
-
--color-success-muted: #baf24a26;
|
|
719
|
-
/* For elements placed on top of success/default (#121314) */
|
|
720
|
-
--color-success-inverse: var(--brand-colors-grey-grey900);
|
|
721
|
-
/* Hover state surface for success/default (#c9f570) */
|
|
722
|
-
--color-success-default-hover: #c9f570;
|
|
723
|
-
/* Pressed state surface for success/default (#d7f796) */
|
|
724
|
-
--color-success-default-pressed: #d7f796;
|
|
725
|
-
/* Hover state surface for success/muted (#baf24a33) */
|
|
726
|
-
--color-success-muted-hover: #baf24a33;
|
|
727
|
-
/* Pressed state surface for success/muted (#baf24a40) */
|
|
728
|
-
--color-success-muted-pressed: #baf24a40;
|
|
729
|
-
/* For informational read-only elements: info, reminder, hint (#8b99ff) */
|
|
730
|
-
--color-info-default: var(--brand-colors-blue-blue300);
|
|
731
|
-
/* Muted color for informational semantic (#8b99ff26) */
|
|
732
|
-
--color-info-muted: #8b99ff26;
|
|
733
|
-
/* For elements placed on top of info/default (#121314) */
|
|
734
|
-
--color-info-inverse: var(--brand-colors-grey-grey900);
|
|
735
|
-
/* Expressive color in light orange (#ffa680) */
|
|
736
|
-
--color-accent01-light: var(--brand-colors-orange-orange200);
|
|
737
|
-
/* Expressive color in orange (#ff5c16) */
|
|
738
|
-
--color-accent01-normal: var(--brand-colors-orange-orange400);
|
|
739
|
-
/* Expressive color in dark orange (#661800) */
|
|
740
|
-
--color-accent01-dark: var(--brand-colors-orange-orange700);
|
|
741
|
-
/* Expressive color in light purple (#eac2ff) */
|
|
742
|
-
--color-accent02-light: var(--brand-colors-purple-purple100);
|
|
743
|
-
/* Expressive color in purple (#d075ff) */
|
|
744
|
-
--color-accent02-normal: var(--brand-colors-purple-purple300);
|
|
745
|
-
/* Expressive color in dark purple (#3d065f) */
|
|
746
|
-
--color-accent02-dark: var(--brand-colors-purple-purple800);
|
|
747
|
-
/* Expressive color in light lime (#e5ffc3) */
|
|
748
|
-
--color-accent03-light: var(--brand-colors-lime-lime050);
|
|
749
|
-
/* Expressive color in lime (#baf24a) */
|
|
750
|
-
--color-accent03-normal: var(--brand-colors-lime-lime100);
|
|
751
|
-
/* Expressive color in dark lime (#013330) */
|
|
752
|
-
--color-accent03-dark: var(--brand-colors-lime-lime700);
|
|
753
|
-
/* Expressive color in light indigo (#cce7ff) */
|
|
754
|
-
--color-accent04-light: var(--brand-colors-indigo-indigo100);
|
|
755
|
-
/* Expressive color in indigo (#89b0ff) */
|
|
756
|
-
--color-accent04-normal: var(--brand-colors-indigo-indigo200);
|
|
757
|
-
/* Expressive color in dark indigo (#190066) */
|
|
758
|
-
--color-accent04-dark: var(--brand-colors-indigo-indigo800);
|
|
759
|
-
/* For Flask primary accent color (#d27dff) */
|
|
760
|
-
--color-flask-default: var(--brand-colors-purple-purple300);
|
|
761
|
-
/* For elements placed on top of flask/default (#121314) */
|
|
762
|
-
--color-flask-inverse: var(--brand-colors-grey-grey900);
|
|
763
|
-
/* For neutral drop shadow color (black-40%) */
|
|
764
|
-
--color-shadow-default: #00000066;
|
|
765
|
-
/* For primary drop shadow color (#8b99ff33) */
|
|
766
|
-
--color-shadow-primary: #8b99ff33;
|
|
767
|
-
/* For critical/danger drop shadow color (#ff758433) */
|
|
768
|
-
--color-shadow-error: #ff758433;
|
|
769
|
-
}
|
|
770
|
-
|
|
771
|
-
/* Color Shortcut Utilities - Enable shorter class names */
|
|
772
|
-
|
|
773
|
-
/* Text shortcuts: text-default instead of text-text-default */
|
|
774
|
-
|
|
775
|
-
@utility text-default {
|
|
776
|
-
color: var(--color-text-default);
|
|
777
|
-
}
|
|
778
|
-
|
|
779
|
-
@utility text-alternative {
|
|
780
|
-
color: var(--color-text-alternative);
|
|
781
|
-
}
|
|
782
|
-
|
|
783
|
-
@utility text-muted {
|
|
784
|
-
color: var(--color-text-muted);
|
|
785
|
-
}
|
|
786
|
-
|
|
787
|
-
/* Background shortcuts: bg-default instead of bg-background-default */
|
|
788
|
-
|
|
789
|
-
@utility bg-default {
|
|
790
|
-
background-color: var(--color-background-default);
|
|
791
|
-
}
|
|
792
|
-
|
|
793
|
-
@utility bg-default-hover {
|
|
794
|
-
background-color: var(--color-background-default-hover);
|
|
795
|
-
}
|
|
796
|
-
|
|
797
|
-
@utility bg-default-pressed {
|
|
798
|
-
background-color: var(--color-background-default-pressed);
|
|
799
|
-
}
|
|
800
|
-
|
|
801
|
-
@utility bg-alternative {
|
|
802
|
-
background-color: var(--color-background-alternative);
|
|
803
|
-
}
|
|
804
|
-
|
|
805
|
-
@utility bg-alternative-hover {
|
|
806
|
-
background-color: var(--color-background-alternative-hover);
|
|
807
|
-
}
|
|
808
|
-
|
|
809
|
-
@utility bg-alternative-pressed {
|
|
810
|
-
background-color: var(--color-background-alternative-pressed);
|
|
811
|
-
}
|
|
812
|
-
|
|
813
|
-
@utility bg-section {
|
|
814
|
-
background-color: var(--color-background-section);
|
|
815
|
-
}
|
|
816
|
-
|
|
817
|
-
@utility bg-subsection {
|
|
818
|
-
background-color: var(--color-background-subsection);
|
|
819
|
-
}
|
|
820
|
-
|
|
821
|
-
@utility bg-muted {
|
|
822
|
-
background-color: var(--color-background-muted);
|
|
823
|
-
}
|
|
824
|
-
|
|
825
|
-
@utility bg-muted-hover {
|
|
826
|
-
background-color: var(--color-background-muted-hover);
|
|
827
|
-
}
|
|
828
|
-
|
|
829
|
-
@utility bg-muted-pressed {
|
|
830
|
-
background-color: var(--color-background-muted-pressed);
|
|
831
|
-
}
|
|
832
|
-
|
|
833
|
-
@utility bg-hover {
|
|
834
|
-
background-color: var(--color-background-hover);
|
|
835
|
-
}
|
|
836
|
-
|
|
837
|
-
@utility bg-pressed {
|
|
838
|
-
background-color: var(--color-background-pressed);
|
|
839
|
-
}
|
|
840
|
-
|
|
841
|
-
/* Border shortcuts: border-default instead of border-border-default */
|
|
842
|
-
|
|
843
|
-
@utility border-default {
|
|
844
|
-
border-color: var(--color-border-default);
|
|
845
|
-
}
|
|
846
|
-
|
|
847
|
-
@utility border-muted {
|
|
848
|
-
border-color: var(--color-border-muted);
|
|
849
|
-
}
|
|
850
|
-
|
|
851
|
-
/* Legacy typography classnames parity with the old preset */
|
|
852
|
-
|
|
853
|
-
@utility text-s-display-lg {
|
|
854
|
-
font-size: var(--typography-s-display-lg-font-size);
|
|
855
|
-
}
|
|
856
|
-
|
|
857
|
-
@utility text-s-display-md {
|
|
858
|
-
font-size: var(--typography-s-display-md-font-size);
|
|
859
|
-
}
|
|
860
|
-
|
|
861
|
-
@utility text-s-heading-lg {
|
|
862
|
-
font-size: var(--typography-s-heading-lg-font-size);
|
|
863
|
-
}
|
|
864
|
-
|
|
865
|
-
@utility text-s-heading-md {
|
|
866
|
-
font-size: var(--typography-s-heading-md-font-size);
|
|
867
|
-
}
|
|
868
|
-
|
|
869
|
-
@utility text-s-heading-sm {
|
|
870
|
-
font-size: var(--typography-s-heading-sm-font-size);
|
|
871
|
-
}
|
|
872
|
-
|
|
873
|
-
@utility text-s-body-lg {
|
|
874
|
-
font-size: var(--typography-s-body-lg-regular-font-size);
|
|
875
|
-
}
|
|
876
|
-
|
|
877
|
-
@utility text-s-body-md {
|
|
878
|
-
font-size: var(--typography-s-body-md-font-size);
|
|
879
|
-
}
|
|
880
|
-
|
|
881
|
-
@utility text-s-body-sm {
|
|
882
|
-
font-size: var(--typography-s-body-sm-font-size);
|
|
883
|
-
}
|
|
884
|
-
|
|
885
|
-
@utility text-s-body-xs {
|
|
886
|
-
font-size: var(--typography-s-body-xs-font-size);
|
|
887
|
-
}
|
|
888
|
-
|
|
889
|
-
@utility text-s-page-heading {
|
|
890
|
-
font-size: var(--typography-s-page-heading-font-size);
|
|
891
|
-
}
|
|
892
|
-
|
|
893
|
-
@utility text-s-section-heading {
|
|
894
|
-
font-size: var(--typography-s-section-heading-font-size);
|
|
895
|
-
}
|
|
896
|
-
|
|
897
|
-
@utility text-s-button-label-md {
|
|
898
|
-
font-size: var(--typography-s-button-label-md-font-size);
|
|
899
|
-
}
|
|
900
|
-
|
|
901
|
-
@utility text-s-button-label-lg {
|
|
902
|
-
font-size: var(--typography-s-button-label-lg-font-size);
|
|
903
|
-
}
|
|
904
|
-
|
|
905
|
-
@utility text-s-amount-display-lg {
|
|
906
|
-
font-size: var(--typography-s-amount-display-lg-font-size);
|
|
907
|
-
}
|
|
908
|
-
|
|
909
|
-
@utility text-l-display-lg {
|
|
910
|
-
font-size: var(--typography-l-display-lg-font-size);
|
|
911
|
-
}
|
|
912
|
-
|
|
913
|
-
@utility text-l-display-md {
|
|
914
|
-
font-size: var(--typography-l-display-md-font-size);
|
|
915
|
-
}
|
|
916
|
-
|
|
917
|
-
@utility text-l-heading-lg {
|
|
918
|
-
font-size: var(--typography-l-heading-lg-font-size);
|
|
919
|
-
}
|
|
920
|
-
|
|
921
|
-
@utility text-l-heading-md {
|
|
922
|
-
font-size: var(--typography-l-heading-md-font-size);
|
|
923
|
-
}
|
|
924
|
-
|
|
925
|
-
@utility text-l-heading-sm {
|
|
926
|
-
font-size: var(--typography-l-heading-sm-font-size);
|
|
927
|
-
}
|
|
928
|
-
|
|
929
|
-
@utility text-l-body-lg {
|
|
930
|
-
font-size: var(--typography-l-body-lg-medium-font-size);
|
|
931
|
-
}
|
|
932
|
-
|
|
933
|
-
@utility text-l-body-md {
|
|
934
|
-
font-size: var(--typography-l-body-md-font-size);
|
|
935
|
-
}
|
|
936
|
-
|
|
937
|
-
@utility text-l-body-sm {
|
|
938
|
-
font-size: var(--typography-l-body-sm-font-size);
|
|
939
|
-
}
|
|
940
|
-
|
|
941
|
-
@utility text-l-body-xs {
|
|
942
|
-
font-size: var(--typography-l-body-xs-font-size);
|
|
943
|
-
}
|
|
944
|
-
|
|
945
|
-
@utility text-l-page-heading {
|
|
946
|
-
font-size: var(--typography-l-page-heading-font-size);
|
|
947
|
-
}
|
|
948
|
-
|
|
949
|
-
@utility text-l-section-heading {
|
|
950
|
-
font-size: var(--typography-l-section-heading-font-size);
|
|
951
|
-
}
|
|
952
|
-
|
|
953
|
-
@utility text-l-button-label-md {
|
|
954
|
-
font-size: var(--typography-l-button-label-md-font-size);
|
|
955
|
-
}
|
|
956
|
-
|
|
957
|
-
@utility text-l-button-label-lg {
|
|
958
|
-
font-size: var(--typography-l-button-label-lg-font-size);
|
|
959
|
-
}
|
|
960
|
-
|
|
961
|
-
@utility text-l-amount-display-lg {
|
|
962
|
-
font-size: var(--typography-l-amount-display-lg-font-size);
|
|
963
|
-
}
|
|
964
|
-
|
|
965
|
-
@utility leading-s-display-lg {
|
|
966
|
-
line-height: var(--typography-s-display-lg-line-height);
|
|
967
|
-
}
|
|
968
|
-
|
|
969
|
-
@utility leading-s-display-md {
|
|
970
|
-
line-height: var(--typography-s-display-md-line-height);
|
|
971
|
-
}
|
|
972
|
-
|
|
973
|
-
@utility leading-s-heading-lg {
|
|
974
|
-
line-height: var(--typography-s-heading-lg-line-height);
|
|
975
|
-
}
|
|
976
|
-
|
|
977
|
-
@utility leading-s-heading-md {
|
|
978
|
-
line-height: var(--typography-s-heading-md-line-height);
|
|
979
|
-
}
|
|
980
|
-
|
|
981
|
-
@utility leading-s-heading-sm {
|
|
982
|
-
line-height: var(--typography-s-heading-sm-line-height);
|
|
983
|
-
}
|
|
984
|
-
|
|
985
|
-
@utility leading-s-body-lg {
|
|
986
|
-
line-height: var(--typography-s-body-lg-regular-line-height);
|
|
987
|
-
}
|
|
988
|
-
|
|
989
|
-
@utility leading-s-body-md {
|
|
990
|
-
line-height: var(--typography-s-body-md-line-height);
|
|
991
|
-
}
|
|
992
|
-
|
|
993
|
-
@utility leading-s-body-sm {
|
|
994
|
-
line-height: var(--typography-s-body-sm-line-height);
|
|
995
|
-
}
|
|
996
|
-
|
|
997
|
-
@utility leading-s-body-xs {
|
|
998
|
-
line-height: var(--typography-s-body-xs-line-height);
|
|
999
|
-
}
|
|
1000
|
-
|
|
1001
|
-
@utility leading-s-page-heading {
|
|
1002
|
-
line-height: var(--typography-s-page-heading-line-height);
|
|
1003
|
-
}
|
|
1004
|
-
|
|
1005
|
-
@utility leading-s-section-heading {
|
|
1006
|
-
line-height: var(--typography-s-section-heading-line-height);
|
|
1007
|
-
}
|
|
1008
|
-
|
|
1009
|
-
@utility leading-s-button-label-md {
|
|
1010
|
-
line-height: var(--typography-s-button-label-md-line-height);
|
|
1011
|
-
}
|
|
1012
|
-
|
|
1013
|
-
@utility leading-s-button-label-lg {
|
|
1014
|
-
line-height: var(--typography-s-button-label-lg-line-height);
|
|
1015
|
-
}
|
|
1016
|
-
|
|
1017
|
-
@utility leading-s-amount-display-lg {
|
|
1018
|
-
line-height: var(--typography-s-amount-display-lg-line-height);
|
|
1019
|
-
}
|
|
1020
|
-
|
|
1021
|
-
@utility leading-l-display-lg {
|
|
1022
|
-
line-height: var(--typography-l-display-lg-line-height);
|
|
1023
|
-
}
|
|
1024
|
-
|
|
1025
|
-
@utility leading-l-display-md {
|
|
1026
|
-
line-height: var(--typography-l-display-md-line-height);
|
|
1027
|
-
}
|
|
1028
|
-
|
|
1029
|
-
@utility leading-l-heading-lg {
|
|
1030
|
-
line-height: var(--typography-l-heading-lg-line-height);
|
|
1031
|
-
}
|
|
1032
|
-
|
|
1033
|
-
@utility leading-l-heading-md {
|
|
1034
|
-
line-height: var(--typography-l-heading-md-line-height);
|
|
1035
|
-
}
|
|
1036
|
-
|
|
1037
|
-
@utility leading-l-heading-sm {
|
|
1038
|
-
line-height: var(--typography-l-heading-sm-line-height);
|
|
1039
|
-
}
|
|
1040
|
-
|
|
1041
|
-
@utility leading-l-body-lg {
|
|
1042
|
-
line-height: var(--typography-l-body-lg-medium-line-height);
|
|
1043
|
-
}
|
|
1044
|
-
|
|
1045
|
-
@utility leading-l-body-md {
|
|
1046
|
-
line-height: var(--typography-l-body-md-line-height);
|
|
1047
|
-
}
|
|
1048
|
-
|
|
1049
|
-
@utility leading-l-body-sm {
|
|
1050
|
-
line-height: var(--typography-l-body-sm-line-height);
|
|
1051
|
-
}
|
|
1052
|
-
|
|
1053
|
-
@utility leading-l-body-xs {
|
|
1054
|
-
line-height: var(--typography-l-body-xs-line-height);
|
|
1055
|
-
}
|
|
1056
|
-
|
|
1057
|
-
@utility leading-l-page-heading {
|
|
1058
|
-
line-height: var(--typography-l-page-heading-line-height);
|
|
1059
|
-
}
|
|
1060
|
-
|
|
1061
|
-
@utility leading-l-section-heading {
|
|
1062
|
-
line-height: var(--typography-l-section-heading-line-height);
|
|
1063
|
-
}
|
|
1064
|
-
|
|
1065
|
-
@utility leading-l-button-label-md {
|
|
1066
|
-
line-height: var(--typography-l-button-label-md-line-height);
|
|
1067
|
-
}
|
|
1068
|
-
|
|
1069
|
-
@utility leading-l-button-label-lg {
|
|
1070
|
-
line-height: var(--typography-l-button-label-lg-line-height);
|
|
1071
|
-
}
|
|
1072
|
-
|
|
1073
|
-
@utility leading-l-amount-display-lg {
|
|
1074
|
-
line-height: var(--typography-l-amount-display-lg-line-height);
|
|
1075
|
-
}
|
|
1076
|
-
|
|
1077
|
-
@utility tracking-s-display-lg {
|
|
1078
|
-
letter-spacing: var(--typography-s-display-lg-letter-spacing);
|
|
1079
|
-
}
|
|
1080
|
-
|
|
1081
|
-
@utility tracking-s-display-md {
|
|
1082
|
-
letter-spacing: var(--typography-s-display-md-letter-spacing);
|
|
1083
|
-
}
|
|
1084
|
-
|
|
1085
|
-
@utility tracking-s-heading-lg {
|
|
1086
|
-
letter-spacing: var(--typography-s-heading-lg-letter-spacing);
|
|
1087
|
-
}
|
|
1088
|
-
|
|
1089
|
-
@utility tracking-s-heading-md {
|
|
1090
|
-
letter-spacing: var(--typography-s-heading-md-letter-spacing);
|
|
1091
|
-
}
|
|
1092
|
-
|
|
1093
|
-
@utility tracking-s-heading-sm {
|
|
1094
|
-
letter-spacing: var(--typography-s-heading-sm-letter-spacing);
|
|
1095
|
-
}
|
|
1096
|
-
|
|
1097
|
-
@utility tracking-s-body-lg {
|
|
1098
|
-
letter-spacing: var(--typography-s-body-lg-regular-letter-spacing);
|
|
1099
|
-
}
|
|
1100
|
-
|
|
1101
|
-
@utility tracking-s-body-md {
|
|
1102
|
-
letter-spacing: var(--typography-s-body-md-letter-spacing);
|
|
1103
|
-
}
|
|
1104
|
-
|
|
1105
|
-
@utility tracking-s-body-sm {
|
|
1106
|
-
letter-spacing: var(--typography-s-body-sm-letter-spacing);
|
|
1107
|
-
}
|
|
1108
|
-
|
|
1109
|
-
@utility tracking-s-body-xs {
|
|
1110
|
-
letter-spacing: var(--typography-s-body-xs-letter-spacing);
|
|
1111
|
-
}
|
|
1112
|
-
|
|
1113
|
-
@utility tracking-s-page-heading {
|
|
1114
|
-
letter-spacing: var(--typography-s-page-heading-letter-spacing);
|
|
1115
|
-
}
|
|
1116
|
-
|
|
1117
|
-
@utility tracking-s-section-heading {
|
|
1118
|
-
letter-spacing: var(--typography-s-section-heading-letter-spacing);
|
|
1119
|
-
}
|
|
1120
|
-
|
|
1121
|
-
@utility tracking-s-button-label-md {
|
|
1122
|
-
letter-spacing: var(--typography-s-button-label-md-letter-spacing);
|
|
1123
|
-
}
|
|
1124
|
-
|
|
1125
|
-
@utility tracking-s-button-label-lg {
|
|
1126
|
-
letter-spacing: var(--typography-s-button-label-lg-letter-spacing);
|
|
1127
|
-
}
|
|
1128
|
-
|
|
1129
|
-
@utility tracking-s-amount-display-lg {
|
|
1130
|
-
letter-spacing: var(--typography-s-amount-display-lg-letter-spacing);
|
|
1131
|
-
}
|
|
1132
|
-
|
|
1133
|
-
@utility tracking-l-display-lg {
|
|
1134
|
-
letter-spacing: var(--typography-l-display-lg-letter-spacing);
|
|
1135
|
-
}
|
|
1136
|
-
|
|
1137
|
-
@utility tracking-l-display-md {
|
|
1138
|
-
letter-spacing: var(--typography-l-display-md-letter-spacing);
|
|
1139
|
-
}
|
|
1140
|
-
|
|
1141
|
-
@utility tracking-l-heading-lg {
|
|
1142
|
-
letter-spacing: var(--typography-l-heading-lg-letter-spacing);
|
|
1143
|
-
}
|
|
1144
|
-
|
|
1145
|
-
@utility tracking-l-heading-md {
|
|
1146
|
-
letter-spacing: var(--typography-l-heading-md-letter-spacing);
|
|
1147
|
-
}
|
|
1148
|
-
|
|
1149
|
-
@utility tracking-l-heading-sm {
|
|
1150
|
-
letter-spacing: var(--typography-l-heading-sm-letter-spacing);
|
|
1151
|
-
}
|
|
1152
|
-
|
|
1153
|
-
@utility tracking-l-body-lg {
|
|
1154
|
-
letter-spacing: var(--typography-l-body-lg-medium-letter-spacing);
|
|
1155
|
-
}
|
|
1156
|
-
|
|
1157
|
-
@utility tracking-l-body-md {
|
|
1158
|
-
letter-spacing: var(--typography-l-body-md-letter-spacing);
|
|
1159
|
-
}
|
|
1160
|
-
|
|
1161
|
-
@utility tracking-l-body-sm {
|
|
1162
|
-
letter-spacing: var(--typography-l-body-sm-letter-spacing);
|
|
1163
|
-
}
|
|
1164
|
-
|
|
1165
|
-
@utility tracking-l-body-xs {
|
|
1166
|
-
letter-spacing: var(--typography-l-body-xs-letter-spacing);
|
|
1167
|
-
}
|
|
1168
|
-
|
|
1169
|
-
@utility tracking-l-page-heading {
|
|
1170
|
-
letter-spacing: var(--typography-l-page-heading-letter-spacing);
|
|
1171
|
-
}
|
|
1172
|
-
|
|
1173
|
-
@utility tracking-l-section-heading {
|
|
1174
|
-
letter-spacing: var(--typography-l-section-heading-letter-spacing);
|
|
1175
|
-
}
|
|
1176
|
-
|
|
1177
|
-
@utility tracking-l-button-label-md {
|
|
1178
|
-
letter-spacing: var(--typography-l-button-label-md-letter-spacing);
|
|
1179
|
-
}
|
|
1180
|
-
|
|
1181
|
-
@utility tracking-l-button-label-lg {
|
|
1182
|
-
letter-spacing: var(--typography-l-button-label-lg-letter-spacing);
|
|
1183
|
-
}
|
|
1184
|
-
|
|
1185
|
-
@utility tracking-l-amount-display-lg {
|
|
1186
|
-
letter-spacing: var(--typography-l-amount-display-lg-letter-spacing);
|
|
1187
|
-
}
|
|
1188
|
-
|
|
1189
|
-
@utility font-default {
|
|
1190
|
-
font-family: var(--font-family-default);
|
|
1191
|
-
}
|
|
1192
|
-
|
|
1193
|
-
@utility font-accent {
|
|
1194
|
-
font-family: var(--font-family-accent);
|
|
1195
|
-
}
|
|
1196
|
-
|
|
1197
|
-
@utility font-hero {
|
|
1198
|
-
font-family: var(--font-family-hero);
|
|
1199
|
-
}
|
|
1200
|
-
|
|
1201
|
-
@utility font-regular {
|
|
1202
|
-
font-weight: var(--font-weight-regular);
|
|
1203
|
-
}
|
|
1204
|
-
|
|
1205
|
-
@utility font-medium {
|
|
1206
|
-
font-weight: var(--font-weight-medium);
|
|
1207
|
-
}
|
|
1208
|
-
|
|
1209
|
-
@utility font-bold {
|
|
1210
|
-
font-weight: var(--font-weight-bold);
|
|
1211
|
-
}
|
|
1212
|
-
|
|
1213
|
-
/* Legacy shadow color utilities parity with old shadow plugin */
|
|
1214
|
-
|
|
1215
|
-
@utility shadow-default {
|
|
1216
|
-
--shadow-color: var(--color-shadow-default) !important;
|
|
1217
|
-
}
|
|
1218
|
-
|
|
1219
|
-
@utility shadow-primary {
|
|
1220
|
-
--shadow-color: var(--color-shadow-primary) !important;
|
|
1221
|
-
}
|
|
1222
|
-
|
|
1223
|
-
@utility shadow-error {
|
|
1224
|
-
--shadow-color: var(--color-shadow-error) !important;
|
|
1225
|
-
}
|