@box/blueprint-web-assets 4.50.1 → 4.52.1

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 (8) hide show
  1. package/dist/tokens/px-tokens.d.ts +41 -7
  2. package/dist/tokens/px-tokens.js +83 -84
  3. package/dist/tokens/tokens-css-vars.scss +747 -748
  4. package/dist/tokens/tokens.d.ts +40 -5
  5. package/dist/tokens/tokens.js +82 -82
  6. package/dist/tokens/tokens.json +82 -82
  7. package/dist/tokens/tokens.scss +2 -2
  8. package/package.json +8 -5
package/dist/tokens/tokens-css-vars.scss CHANGED
@@ -1,755 +1,754 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Thu, 05 Jun 2025 10:14:08 GMT
2
+ * Do not edit directly, this file was auto-generated.
4
3
  */
5
4
 
6
5
  :root {
7
- --notification-default-paragraph-indent: 0rem;
8
- --notification-default-paragraph-spacing: 0;
9
- --notification-default-text-case: none;
10
- --notification-default-text-decoration: none;
11
- --notification-default-letter-spacing: 0.01875rem;
12
- --notification-default-font-size: 0.5625rem;
13
- --notification-default-line-height: 0.75rem;
14
- --breakpoint-xlarge: 1219px;
15
- --breakpoint-large: 1023px;
16
- --breakpoint-medium: 767px;
17
- --breakpoint-small: 374px;
18
- --animation-easing-ease-base: cubic-bezier(0.16, 1, 0.3, 1);
19
- --animation-duration-4: 400ms;
20
- --animation-duration-3: 300ms;
21
- --animation-duration-2: 200ms;
22
- --text-decoration-underline: underline;
23
- --font-weights-black: 900;
24
- --font-weights-bold: 700;
25
- --font-weights-semibold: 600;
26
- --font-weights-regular: 400;
27
- --font-families-sans: Lato, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue',
28
- sans-serif;
29
- --border-8: 0.5rem;
30
- --border-6: 0.375rem;
31
- --border-4: 0.25rem;
32
- --white-opacity-30: #ffffff4d;
33
- --white-opacity-70: #ffffffb3;
34
- --size-20: 5rem;
35
- --size-18: 4.5rem;
36
- --size-16: 4rem;
37
- --size-15: 3.75rem;
38
- --size-14: 3.5rem;
39
- --size-12: 3rem;
40
- --size-11: 2.75rem;
41
- --size-10: 2.5rem;
42
- --size-9: 2.25rem;
43
- --size-8: 2rem;
44
- --size-7: 1.75rem;
45
- --size-6: 1.5rem;
46
- --size-5: 1.25rem;
47
- --size-4: 1rem;
48
- --size-3: 0.75rem;
49
- --size-2: 0.5rem;
50
- --size-1: 0.25rem;
51
- --size-05: 0.125rem;
52
- --black-opacity-00: rgba(0, 0, 0, 0);
53
- --black-opacity-04: rgba(0, 0, 0, 0.04);
54
- --black-opacity-08: rgba(0, 0, 0, 0.08);
55
- --black-opacity-50: rgba(0, 0, 0, 0.5);
56
- --black-opacity-60: rgba(0, 0, 0, 0.6);
57
- --black-opacity-80: rgba(0, 0, 0, 0.8);
58
- --innershadow-1: inset 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.1);
59
- --dropshadow-1: 0 0 0.5rem 0 rgba(0, 0, 0, 0.05);
60
- --dropshadow-2: 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1);
61
- --dropshadow-3-inverse: 0 -0.25rem 0.75rem 0 rgba(0, 0, 0, 0.1);
62
- --dropshadow-3: 0 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.1);
63
- --space-20: 5rem;
64
- --space-18: 4.5rem;
65
- --space-16: 4rem;
66
- --space-15: 3.75rem;
67
- --space-14: 3.5rem;
68
- --space-12: 3rem;
69
- --space-11: 2.75rem;
70
- --space-10: 2.5rem;
71
- --space-9: 2.25rem;
72
- --space-8: 2rem;
73
- --space-7: 1.75rem;
74
- --space-6: 1.5rem;
75
- --space-5: 1.25rem;
76
- --space-4: 1rem;
77
- --space-3: 0.75rem;
78
- --space-2: 0.5rem;
79
- --space-1: 0.25rem;
80
- --space-05: 0.125rem;
81
- --border-3: 0.1875rem;
82
- --border-2: 0.125rem;
83
- --border-1: 0.0625rem;
84
- --radius-half: 2rem;
85
- --radius-8: 1.75rem;
86
- --radius-7: 1.5rem;
87
- --radius-6: 1.25rem;
88
- --radius-5: 1rem;
89
- --radius-4: 0.75rem;
90
- --radius-3: 0.5rem;
91
- --radius-2: 0.375rem;
92
- --radius-1: 0.25rem;
93
- --radius-05: 0.125rem;
94
- --link-default-text-case: none;
95
- --link-default-paragraph-indent: 0rem;
96
- --link-default-paragraph-spacing: 0;
97
- --link-default-letter-spacing: 0.01875rem;
98
- --link-default-font-size: 0.875rem;
99
- --link-default-line-height: 1.25rem;
100
- --label-default-text-decoration: none;
101
- --label-default-text-case: none;
102
- --label-default-paragraph-spacing: 0;
103
- --label-default-letter-spacing: 0.0375rem;
104
- --label-default-font-size: 0.625rem;
105
- --label-default-line-height: 1rem;
106
- --label-bold-text-decoration: none;
107
- --label-bold-text-case: none;
108
- --label-bold-paragraph-spacing: 0;
109
- --label-bold-letter-spacing: 0.0375rem;
110
- --label-bold-font-size: 0.625rem;
111
- --label-bold-line-height: 1rem;
112
- --caption-default-text-decoration: none;
113
- --caption-default-text-case: none;
114
- --caption-default-paragraph-spacing: 0;
115
- --caption-default-letter-spacing: 0.01875rem;
116
- --caption-default-font-size: 0.75rem;
117
- --caption-default-line-height: 0.875rem;
118
- --caption-bold-text-decoration: none;
119
- --caption-bold-text-case: none;
120
- --caption-bold-paragraph-spacing: 0;
121
- --caption-bold-letter-spacing: 0.01875rem;
122
- --caption-bold-font-size: 0.75rem;
123
- --caption-bold-line-height: 0.875rem;
124
- --body-default-text-decoration: none;
125
- --body-default-text-case: none;
126
- --body-default-paragraph-spacing: 0;
127
- --body-default-letter-spacing: 0.01875rem;
128
- --body-default-font-size: 0.875rem;
129
- --body-default-line-height: 1.25rem;
130
- --body-default-semibold-text-decoration: none;
131
- --body-default-semibold-text-case: none;
132
- --body-default-semibold-paragraph-spacing: 0;
133
- --body-default-semibold-letter-spacing: 0.01875rem;
134
- --body-default-semibold-font-size: 0.875rem;
135
- --body-default-semibold-line-height: 1.25rem;
136
- --body-default-bold-text-decoration: none;
137
- --body-default-bold-text-case: none;
138
- --body-default-bold-paragraph-spacing: 0;
139
- --body-default-bold-letter-spacing: 0.01875rem;
140
- --body-default-bold-font-size: 0.875rem;
141
- --body-default-bold-line-height: 1.25rem;
142
- --body-large-bold-text-decoration: none;
143
- --body-large-bold-text-case: none;
144
- --body-large-bold-paragraph-spacing: 0;
145
- --body-large-bold-letter-spacing: 0.01875rem;
146
- --body-large-bold-font-size: 1rem;
147
- --body-large-bold-line-height: 1.5rem;
148
- --body-large-text-decoration: none;
149
- --body-large-text-case: none;
150
- --body-large-paragraph-spacing: 0;
151
- --body-large-letter-spacing: 0.01875rem;
152
- --body-large-font-size: 1rem;
153
- --body-large-line-height: 1.5rem;
154
- --title-mondo-text-decoration: none;
155
- --title-mondo-text-case: none;
156
- --title-mondo-paragraph-spacing: 0;
157
- --title-mondo-letter-spacing: 0;
158
- --title-mondo-font-size: 2.25rem;
159
- --title-mondo-line-height: 2.75rem;
160
- --title-x-large-text-decoration: none;
161
- --title-x-large-text-case: none;
162
- --title-x-large-paragraph-spacing: 0;
163
- --title-x-large-letter-spacing: 0.01875rem;
164
- --title-x-large-font-size: 1.3125rem;
165
- --title-x-large-line-height: 2rem;
166
- --title-large-text-decoration: none;
167
- --title-large-text-case: none;
168
- --title-large-paragraph-spacing: 0;
169
- --title-large-letter-spacing: 0.01875rem;
170
- --title-large-font-size: 1.125rem;
171
- --title-large-line-height: 1.5rem;
172
- --title-medium-text-decoration: none;
173
- --title-medium-text-case: none;
174
- --title-medium-paragraph-spacing: 0;
175
- --title-medium-letter-spacing: 0.01875rem;
176
- --title-medium-font-size: 1rem;
177
- --title-medium-line-height: 1.5rem;
178
- --title-small-text-decoration: none;
179
- --title-small-text-case: none;
180
- --title-small-paragraph-spacing: 0;
181
- --title-small-letter-spacing: 0.01875rem;
182
- --title-small-font-size: 0.9375rem;
183
- --title-small-line-height: 1.25rem;
184
- --title-subtitle-text-decoration: none;
185
- --title-subtitle-text-case: none;
186
- --title-subtitle-paragraph-spacing: 0;
187
- --title-subtitle-letter-spacing: 0.01875rem;
188
- --title-subtitle-font-size: 0.875rem;
189
- --title-subtitle-line-height: 1.25rem;
190
- --grimace-02: #fbfbfe;
191
- --grimace-05: #f6f4fc;
192
- --grimace-180: #0e0827;
193
- --grimace-170: #160b3a;
194
- --grimace-160: #1d0f4e;
195
- --grimace-150: #241361;
196
- --grimace-120: #3a1e9b;
197
- --grimace-110: #4122af;
198
- --grimace-100: #4826c2;
199
- --grimace-50: #a392e0;
200
- --grimace-20: #dad4f3;
201
- --grimace-10: #ece9f8;
202
- --purple-rain-02: #fdfbff;
203
- --purple-rain-05: #faf5fe;
204
- --purple-rain-180: #200d2f;
205
- --purple-rain-170: #301347;
206
- --purple-rain-160: #40195f;
207
- --purple-rain-150: #4f1f76;
208
- --purple-rain-120: #7f32be;
209
- --purple-rain-110: #8f39d5;
210
- --purple-rain-100: #9f3fed;
211
- --purple-rain-50: #cf9ff6;
212
- --purple-rain-20: #ecd9fb;
213
- --purple-rain-10: #f5ebfd;
214
- --yellow-02: #fffefa;
215
- --yellow-05: #fffdf2;
216
- --yellow-180: #332b00;
217
- --yellow-170: #4c4000;
218
- --yellow-160: #665600;
219
- --yellow-150: #806b00;
220
- --yellow-120: #ccac00;
221
- --yellow-110: #e6c100;
222
- --yellow-100: #ffd700;
223
- --yellow-50: #ffeb7f;
224
- --yellow-20: #fff7cc;
225
- --yellow-10: #fffbe5;
226
- --yellorange-02: #fffefb;
227
- --yellorange-05: #fefbf3;
228
- --yellorange-180: #312405;
229
- --yellorange-170: #493608;
230
- --yellorange-160: #62480b;
231
- --yellorange-150: #7a590d;
232
- --yellorange-120: #c48f16;
233
- --yellorange-110: #dca118;
234
- --yellorange-100: #f5b31b;
235
- --yellorange-50: #fad98d;
236
- --yellorange-20: #fdf0d1;
237
- --yellorange-10: #fef7e8;
238
- --orange-02: #fffdfb;
239
- --orange-05: #fef8f3;
240
- --orange-180: #301a05;
241
- --orange-170: #482708;
242
- --orange-160: #60340a;
243
- --orange-150: #78400d;
244
- --orange-120: #c16715;
245
- --orange-110: #d97417;
246
- --orange-100: #f1811a;
247
- --orange-50: #f8c08c;
248
- --orange-20: #fce6d1;
249
- --orange-10: #fdf2e8;
250
- --watermelon-red-02: #fffbfc;
251
- --watermelon-red-05: #fef5f6;
252
- --watermelon-red-180: #2f0b11;
253
- --watermelon-red-170: #47101a;
254
- --watermelon-red-160: #5f1623;
255
- --watermelon-red-150: #761b2b;
256
- --watermelon-red-120: #be2c46;
257
- --watermelon-red-110: #d5324e;
258
- --watermelon-red-100: #ed3757;
259
- --watermelon-red-50: #f69bab;
260
- --watermelon-red-20: #fbd7dd;
261
- --watermelon-red-10: #fdebee;
262
- --green-light-02: #fbfefd;
263
- --green-light-05: #f4fcf8;
264
- --green-light-180: #08271a;
265
- --green-light-170: #0b3a27;
266
- --green-light-160: #0f4e34;
267
- --green-light-150: #136140;
268
- --green-light-120: #1e9b67;
269
- --green-light-110: #22af74;
270
- --green-light-100: #26c281;
271
- --green-light-50: #92e0c0;
272
- --green-light-20: #d4f3e6;
273
- --green-light-10: #e9f8f2;
274
- --light-blue-02: #fbfdff;
275
- --light-blue-05: #f4f9ff;
276
- --light-blue-180: #071b32;
277
- --light-blue-170: #0b284c;
278
- --light-blue-160: #0e3665;
279
- --light-blue-150: #12437e;
280
- --light-blue-120: #1d6bca;
281
- --light-blue-110: #2079e3;
282
- --light-blue-100: #2486fc;
283
- --light-blue-50: #91c2fd;
284
- --light-blue-20: #d3e7fe;
285
- --light-blue-10: #e9f2fe;
286
- --dark-blue-02: #fafbfd;
287
- --dark-blue-05: #f2f5f9;
288
- --dark-blue-180: #000c1a;
289
- --dark-blue-170: #001228;
290
- --dark-blue-160: #001835;
291
- --dark-blue-150: #001e42;
292
- --dark-blue-120: #00306a;
293
- --dark-blue-110: #003677;
294
- --dark-blue-100: #003c84;
295
- --dark-blue-50: #7f9dc1;
296
- --dark-blue-20: #ccd8e6;
297
- --dark-blue-10: #e5ebf2;
298
- --box-blue-02: #fafcfe;
299
- --box-blue-05: #f2f7fd;
300
- --box-blue-180: #00132b;
301
- --box-blue-170: #001d40;
302
- --box-blue-160: #002755;
303
- --box-blue-150: #00316b;
304
- --box-blue-120: #004eaa;
305
- --box-blue-110: #0057c0;
306
- --box-blue-100: #0061d5;
307
- --box-blue-80: #3381dd;
308
- --box-blue-50: #7fb0ea;
309
- --box-blue-40: #99c0ee;
310
- --box-blue-30: #b2cff2;
311
- --box-blue-20: #ccdff7;
312
- --box-blue-10: #e5effa;
313
- --gray-white: #ffffff;
314
- --gray-black: #000000;
315
- --gray-05: #f4f4f4;
316
- --gray-02: #fbfbfb;
317
- --gray-100: #222222;
318
- --gray-90: #383838;
319
- --gray-80: #4e4e4e;
320
- --gray-65: #6f6f6f;
321
- --gray-50: #909090;
322
- --gray-40: #a7a7a7;
323
- --gray-30: #bcbcbc;
324
- --gray-20: #d3d3d3;
325
- --gray-10: #e8e8e8;
326
- --brand-box-ai-140: linear-gradient(135deg, #980284 0%, #174f96 100%);
327
- --brand-box-ai-120: linear-gradient(135deg, #cb02b0 0%, #1f6ac8 100%);
328
- --brand-box-ai-100: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
329
- --border-cta-border-outline-disabled: #646464;
330
- --surface-badge-video-surface: #009aed;
331
- --surface-badge-keynote-surface: #0a84ff;
332
- --surface-badge-pages-surface: #ff9500;
333
- --surface-badge-sheets-surface: #21a464;
334
- --surface-badge-docs-surface: #4083f7;
335
- --surface-badge-pdf-surface: #d0021b;
336
- --surface-surface-brand-disabled: #0061d5;
337
- --surface-surface-brand-busy: #0061d5;
338
- --surface-surface-brand-pressed: #004eac;
339
- --surface-surface-brand-hover: #006ae9;
340
- --surface-surface-brand: #0061d5;
341
- --notification-default-font-weight: 700;
342
- --notification-default-font-family: var(--font-families-sans);
343
- --motion-transition-slide-in: var(--animation-duration-4) var(--animation-easing-ease-base);
344
- --link-default-text-decoration: var(--text-decoration-underline);
345
- --link-default-font-weight: 400;
346
- --link-default-font-family: var(--font-families-sans);
347
- --label-default-font-weight: 400;
348
- --label-default-font-family: var(--font-families-sans);
349
- --label-bold-font-weight: 700;
350
- --label-bold-font-family: var(--font-families-sans);
351
- --caption-default-font-weight: 400;
352
- --caption-default-font-family: var(--font-families-sans);
353
- --caption-bold-font-weight: 700;
354
- --caption-bold-font-family: var(--font-families-sans);
355
- --body-default-font-weight: 400;
356
- --body-default-font-family: var(--font-families-sans);
357
- --body-default-semibold-font-weight: 600;
358
- --body-default-semibold-font-family: var(--font-families-sans);
359
- --body-default-bold-font-weight: 700;
360
- --body-default-bold-font-family: var(--font-families-sans);
361
- --body-large-bold-font-weight: 700;
362
- --body-large-bold-font-family: var(--font-families-sans);
363
- --body-large-font-weight: 400;
364
- --body-large-font-family: var(--font-families-sans);
365
- --title-mondo-font-weight: 900;
366
- --title-mondo-font-family: var(--font-families-sans);
367
- --title-x-large-font-weight: 700;
368
- --title-x-large-font-family: var(--font-families-sans);
369
- --title-large-font-weight: 700;
370
- --title-large-font-family: var(--font-families-sans);
371
- --title-medium-font-weight: 700;
372
- --title-medium-font-family: var(--font-families-sans);
373
- --title-small-font-weight: 700;
374
- --title-small-font-family: var(--font-families-sans);
375
- --title-subtitle-font-weight: 700;
376
- --title-subtitle-font-family: var(--font-families-sans);
377
- --brand-sign-tertiary: var(--dark-blue-10);
378
- --brand-sign-secondary: var(--dark-blue-20);
379
- --brand-sign-primary: var(--dark-blue-100);
380
- --brand-docgen-tertiary: var(--grimace-10);
381
- --brand-docgen-secondary: var(--grimace-20);
382
- --brand-docgen-primary: var(--grimace-120);
383
- --brand-forms-tertiary: var(--green-light-10);
384
- --brand-forms-secondary: var(--green-light-20);
385
- --brand-forms-primary: var(--green-light-120);
386
- --brand-box-tertiary: var(--box-blue-10);
387
- --brand-box-secondary: var(--box-blue-20);
388
- --brand-box-primary: var(--box-blue-100);
389
- --overlay-modal-overlay: var(--black-opacity-80);
390
- --overlay-sidepanel-overlay: var(--black-opacity-50);
391
- --text-text-destructive-on-light: var(--watermelon-red-110);
392
- --text-toggletext-text: var(--box-blue-120);
393
- --text-text-on-light-disabled: var(--gray-30);
394
- --text-cta-link-disabled: var(--box-blue-30);
395
- --text-cta-promo: var(--grimace-100);
396
- --text-cta-link-secondary-hover: var(--gray-65);
397
- --text-cta-link-secondary-pressed: var(--gray-65);
398
- --text-cta-link-secondary: var(--gray-65);
399
- --text-text-error-on-light: var(--watermelon-red-110);
400
- --text-nav-text-on-light-focus: var(--gray-white);
401
- --text-nav-text-on-light-selected: var(--gray-white);
402
- --text-nav-text-on-light-hover: var(--gray-white);
403
- --text-nav-text-on-light: var(--gray-white);
404
- --text-nav-text-on-dark-focus: var(--gray-white);
405
- --text-nav-text-on-dark-selected: var(--gray-white);
406
- --text-nav-text-on-dark-hover: var(--gray-white);
407
- --text-nav-text-on-dark: var(--gray-white);
408
- --text-cta-link-pressed: var(--light-blue-100);
409
- --text-cta-link-hover: var(--light-blue-120);
410
- --text-cta-link: var(--box-blue-100);
411
- --text-text-brand-on-color: var(--gray-white);
412
- --text-text-on-dark: var(--gray-white);
413
- --text-text-on-light-secondary-hover: var(--gray-80);
414
- --text-text-on-light-tertiary: var(--gray-50);
415
- --text-text-on-light-secondary: var(--gray-65);
416
- --text-text-on-light: var(--gray-100);
417
- --outline-focus-on-dark: var(--gray-white);
418
- --outline-focus-on-light: var(--light-blue-100);
419
- --icon-icon-destructive-on-light: var(--watermelon-red-110);
420
- --icon-icon-blue: var(--box-blue-100);
421
- --icon-cta-icon-on-color-pressed: var(--gray-black);
422
- --icon-cta-icon-on-color-hover: var(--gray-black);
423
- --icon-cta-icon-on-color: var(--gray-black);
424
- --icon-cta-icon-utility-pressed: var(--gray-black);
425
- --icon-cta-icon-utility-hover: var(--gray-black);
426
- --icon-cta-icon-utility: var(--gray-80);
427
- --icon-cta-icon-pressed: var(--gray-100);
428
- --icon-cta-icon-hover: var(--gray-100);
429
- --icon-cta-icon: var(--gray-65);
430
- --icon-nav-icon-on-light-focus: var(--gray-100);
431
- --icon-nav-icon-on-light-selected: var(--gray-100);
432
- --icon-nav-icon-on-light-hover: var(--gray-100);
433
- --icon-nav-icon-on-light: var(--gray-100);
434
- --icon-nav-icon-on-dark-focus: var(--gray-white);
435
- --icon-nav-icon-on-dark-selected: var(--gray-white);
436
- --icon-nav-icon-on-dark-hover: var(--gray-white);
437
- --icon-nav-icon-on-dark: var(--gray-white);
438
- --icon-icon-required-on-light: var(--watermelon-red-110);
439
- --icon-icon-error-on-light: var(--watermelon-red-110);
440
- --icon-icon-on-dark: var(--gray-white);
441
- --icon-icon-on-light-tertiary: var(--gray-50);
442
- --icon-icon-on-light-secondary: var(--gray-65);
443
- --icon-icon-on-light: var(--gray-100);
444
- --border-toggletext-border-off-ai-pressed: var(--brand-box-ai-100);
445
- --border-toggletext-border-off-ai-hover: var(--brand-box-ai-100);
446
- --border-toggletext-border-off-ai: var(--gray-30);
447
- --border-toggletext-border-on-ai-pressed: var(--brand-box-ai-100);
448
- --border-toggletext-border-on-ai-hover: var(--brand-box-ai-100);
449
- --border-toggletext-border-on-ai: var(--brand-box-ai-100);
450
- --border-toggletext-border-on-pressed: var(--box-blue-40);
451
- --border-toggletext-border-on-hover: var(--box-blue-40);
452
- --border-toggletext-border-on: var(--box-blue-40);
453
- --border-toggletext-border-off-pressed: var(--gray-10);
454
- --border-toggletext-border-off-hover: var(--gray-05);
455
- --border-toggletext-border-off: var(--gray-white);
456
- --border-radiotile-border-selected: var(--box-blue-100);
457
- --border-radiotile-border-hover: var(--gray-30);
458
- --border-radiotile-border: var(--gray-30);
459
- --border-cta-border-secondary-disabled: var(--gray-10);
460
- --border-toggle-border-on: var(--box-blue-40);
461
- --border-contentbutton-border-selected: var(--gray-50);
462
- --border-cta-border-ai: var(--brand-box-ai-100);
463
- --border-card-border-ai: var(--brand-box-ai-100);
464
- --border-toggle-border: var(--gray-30);
465
- --border-badge-border: var(--gray-white);
466
- --border-collapsible-border: var(--gray-20);
467
- --border-filterchip-border-multi-on-hover: var(--box-blue-40);
468
- --border-filterchip-border-multi-on: var(--box-blue-40);
469
- --border-gridthumbnail-border: var(--gray-10);
470
- --border-search-global-border-hover: var(--gray-10);
471
- --border-search-border-hover: var(--gray-65);
472
- --border-search-border: var(--gray-05);
473
- --border-status-border-hover: var(--black-opacity-04);
474
- --border-avatar-border-pressed: var(--black-opacity-08);
475
- --border-avatar-border-hover: var(--black-opacity-04);
476
- --border-inputchip-border-error: var(--watermelon-red-100);
477
- --border-card-border-pressed: var(--gray-10);
478
- --border-divider-border: var(--gray-10);
479
- --border-checkbox-border-selected-hover: var(--light-blue-110);
480
- --border-checkbox-border-selected: var(--box-blue-100);
481
- --border-checkbox-border-hover: var(--gray-80);
482
- --border-checkbox-border: var(--gray-65);
483
- --border-radio-border-hover: var(--gray-80);
484
- --border-radio-border-selected-hover: var(--light-blue-110);
485
- --border-radio-border-selected: var(--box-blue-100);
486
- --border-radio-border: var(--gray-65);
487
- --border-switch-border-hover: var(--gray-30);
488
- --border-switch-border: var(--gray-30);
489
- --border-item-small-border-selected: var(--box-blue-100);
490
- --border-item-border-selected: var(--box-blue-100);
491
- --border-item-border-hover: var(--gray-10);
492
- --border-cta-border-outline-pressed: var(--gray-black);
493
- --border-cta-border-outline-hover: var(--gray-black);
494
- --border-cta-border-outline: var(--gray-black);
495
- --border-tab-border-hover: var(--gray-30);
496
- --border-tab-border: var(--gray-10);
497
- --border-tab-border-selected-focus: var(--box-blue-100);
498
- --border-tab-border-selected-hover: var(--box-blue-100);
499
- --border-tab-border-selected: var(--box-blue-100);
500
- --border-tooltip-border-error: var(--watermelon-red-50);
501
- --border-dropdown-border-error-focus: var(--watermelon-red-100);
502
- --border-dropdown-border-error-hover: var(--watermelon-red-100);
503
- --border-dropdown-border-error: var(--watermelon-red-100);
504
- --border-dropdown-border-focus: var(--box-blue-100);
505
- --border-dropdown-border-hover: var(--gray-65);
506
- --border-dropdown-border: var(--gray-30);
507
- --border-input-border-error-focus: var(--watermelon-red-100);
508
- --border-input-border-error-hover: var(--watermelon-red-100);
509
- --border-input-border-error: var(--watermelon-red-100);
510
- --border-input-border-focus: var(--light-blue-100);
511
- --border-input-border-hover: var(--gray-65);
512
- --border-input-border: var(--gray-50);
513
- --border-message-border-error-secondary: var(--watermelon-red-50);
514
- --border-message-border-error: var(--watermelon-red-100);
515
- --border-message-border-warning-secondary: var(--yellorange-50);
516
- --border-message-border-warning: var(--yellorange-100);
517
- --border-message-border-success-secondary: var(--green-light-50);
518
- --border-message-border-success: var(--green-light-100);
519
- --border-message-border-info-secondary: var(--light-blue-50);
520
- --border-message-border-info: var(--box-blue-100);
521
- --border-message-border-generic-secondary: var(--gray-50);
522
- --border-message-border-generic: var(--gray-100);
523
- --border-card-border-focus: var(--box-blue-100);
524
- --border-card-border-hover: var(--gray-10);
525
- --border-card-border: var(--gray-10);
526
- --border-cta-border-secondary-hover: var(--gray-30);
527
- --border-cta-border-secondary-pressed: var(--gray-30);
528
- --border-cta-border-secondary: var(--gray-30);
529
- --surface-toggletext-surface-off-ai-pressed: var(--gray-10);
530
- --surface-toggletext-surface-off-ai-hover: var(--gray-05);
531
- --surface-toggletext-surface-off-ai: var(--gray-white);
532
- --surface-toggletext-surface-on-ai-pressed: var(--brand-box-ai-140);
533
- --surface-toggletext-surface-on-ai-hover: var(--brand-box-ai-120);
534
- --surface-toggletext-surface-on-ai: var(--brand-box-ai-100);
535
- --surface-toggletext-surface-on-pressed: var(--box-blue-30);
536
- --surface-toggletext-surface-on-hover: var(--box-blue-20);
537
- --surface-toggletext-surface-on: var(--box-blue-10);
538
- --surface-radiotile-surface-selected: var(--box-blue-05);
539
- --surface-radiotile-surface-hover: var(--gray-05);
540
- --surface-radiotile-surface: var(--gray-white);
541
- --surface-cta-surface-disabled: var(--box-blue-30);
542
- --surface-toggle-surface-on-pressed: var(--box-blue-30);
543
- --surface-toggle-surface-off-pressed: var(--gray-10);
544
- --surface-toolbar-surface: var(--gray-100);
545
- --surface-contentswitcher-surface: var(--gray-10);
546
- --surface-contentbutton-surface-surface-selected: var(--gray-white);
547
- --surface-cta-surface-promo-focus-pressed: var(--grimace-120);
548
- --surface-cta-surface-promo-focus: var(--grimace-100);
549
- --surface-cta-surface-promo-pressed: var(--grimace-120);
550
- --surface-cta-surface-promo-hover: var(--grimace-100);
551
- --surface-cta-surface-promo: var(--grimace-110);
552
- --surface-upload-surface-brand-neutral: var(--box-blue-100);
553
- --surface-illustration-surface-box: var(--box-blue-100);
554
- --surface-illustration-surface-box-neutral: var(--box-blue-100);
555
- --surface-progressbar-surface-brand: var(--box-blue-100);
556
- --surface-nav-surface-brand: var(--box-blue-100);
557
- --surface-text-highlight-surface: var(--yellow-20);
558
- --surface-toggle-surface-pressed-hover: var(--box-blue-80);
559
- --surface-toggle-surface-pressed: var(--box-blue-100);
560
- --surface-toggle-surface-hover: var(--gray-05);
561
- --surface-toggle-surface: var(--gray-white);
562
- --surface-dropdown-secondary-surface-pressed: var(--gray-10);
563
- --surface-dropdown-secondary-surface-hover: var(--gray-05);
564
- --surface-dropdown-secondary-surface: var(--gray-white);
565
- --surface-dropdown-primary-surface-pressed: var(--gray-10);
566
- --surface-dropdown-primary-surface-hover: var(--gray-05);
567
- --surface-option-grid-surface-selected: var(--black-opacity-08);
568
- --surface-option-grid-surface-hover: var(--black-opacity-04);
569
- --surface-page-surface: var(--gray-white);
570
- --surface-chip-button-surface-hover: var(--black-opacity-08);
571
- --surface-chip-button-surface: var(--black-opacity-04);
572
- --surface-badge-notification-surface: var(--watermelon-red-110);
573
- --surface-badge-progress-surface: var(--yellorange-100);
574
- --surface-badge-offline-surface: var(--green-light-100);
575
- --surface-badge-collection-surface: var(--gray-10);
576
- --surface-badge-pin-surface: var(--gray-10);
577
- --surface-badge-online-surface: var(--green-light-120);
578
- --surface-badge-coadmin-surface: var(--purple-rain-100);
579
- --surface-badge-admin-surface: var(--dark-blue-100);
580
- --surface-badge-external-surface: var(--gray-50);
581
- --surface-badge-error-surface: var(--watermelon-red-110);
582
- --surface-badge-rejected-surface: var(--watermelon-red-110);
583
- --surface-badge-completed-surface: var(--green-light-100);
584
- --surface-badge-annotation-surface: var(--yellorange-100);
585
- --surface-badge-taskapproval-surface: var(--light-blue-120);
586
- --surface-badge-task-surface: var(--light-blue-100);
587
- --surface-badge-mention-surface: var(--light-blue-120);
588
- --surface-badge-relay-surface: var(--light-blue-120);
589
- --surface-badge-foldershared-surface: var(--light-blue-100);
590
- --surface-badge-folderexternal-surface: var(--gray-65);
591
- --surface-badge-boxnote-surface: var(--gray-10);
592
- --surface-badge-canvas-surface: var(--orange-100);
593
- --surface-badge-image-surface: var(--green-light-100);
594
- --surface-accordion-surface-hover: var(--gray-05);
595
- --surface-accordion-surface: var(--gray-white);
596
- --surface-tab-surface-pressed: var(--gray-10);
597
- --surface-tab-surface-hover: var(--gray-05);
598
- --surface-day-surface-selected-hover: var(--dark-blue-100);
599
- --surface-day-surface-selected: var(--box-blue-100);
600
- --surface-day-surface-hover: var(--gray-05);
601
- --surface-day-surface: var(--gray-white);
602
- --surface-search-surface-focused: var(--gray-white);
603
- --surface-search-surface-hover: var(--gray-02);
604
- --surface-search-global-surface: var(--gray-05);
605
- --surface-search-surface: var(--gray-05);
606
- --surface-scrollbar-surface: var(--black-opacity-50);
607
- --surface-sliderthumb-surface-hover: var(--light-blue-100);
608
- --surface-sliderthumb-surface: var(--box-blue-100);
609
- --surface-slidertrack-surface: var(--gray-65);
610
- --surface-filterchip-surface-single-on-hover: var(--box-blue-100);
611
- --surface-filterchip-surface-single-on: var(--box-blue-100);
612
- --surface-filterchip-surface-single-hover: var(--black-opacity-08);
613
- --surface-filterchip-surface-single: var(--black-opacity-04);
614
- --surface-filterchip-surface-multi-on-hover: var(--box-blue-20);
615
- --surface-filterchip-surface-multi-on: var(--box-blue-10);
616
- --surface-filterchip-surface-multi-hover: var(--black-opacity-08);
617
- --surface-filterchip-surface-multi: var(--black-opacity-04);
618
- --surface-inputchip-surface-error: var(--watermelon-red-10);
619
- --surface-inputchip-surface-hover: var(--gray-10);
620
- --surface-inputchip-surface: var(--gray-10);
621
- --surface-ghost-surface-secondary: var(--gray-05);
622
- --surface-ghost-surface: var(--gray-02);
623
- --surface-checkbox-surface-selected-hover: var(--light-blue-110);
624
- --surface-checkbox-surface-selected: var(--box-blue-100);
625
- --surface-checkbox-surface-hover: var(--gray-white);
626
- --surface-checkbox-surface: var(--gray-white);
627
- --surface-radio-surface-selected-hover: var(--light-blue-110);
628
- --surface-radio-surface-selected: var(--box-blue-100);
629
- --surface-radio-surface-hover: var(--gray-white);
630
- --surface-radio-surface: var(--gray-white);
631
- --surface-switch-surface-on-hover: var(--light-blue-110);
632
- --surface-switch-surface-on: var(--box-blue-100);
633
- --surface-switch-surface-off-hover: var(--gray-30);
634
- --surface-switch-surface-off: var(--gray-20);
635
- --surface-switch-surface-hover: var(--gray-white);
636
- --surface-switch-surface: var(--gray-white);
637
- --surface-item-small-surface-selected: var(--box-blue-05);
638
- --surface-item-small-surface-hover: var(--gray-05);
639
- --surface-item-small-surface: var(--gray-white);
640
- --surface-item-surface-selected: var(--box-blue-05);
641
- --surface-item-surface-hover: var(--gray-white);
642
- --surface-status-surface-gray-focus: var(--gray-10);
643
- --surface-status-surface-gray-hover: var(--gray-10);
644
- --surface-status-surface-gray: var(--gray-10);
645
- --surface-status-surface-boxblue-focus: var(--box-blue-100);
646
- --surface-status-surface-boxblue-hover: var(--box-blue-100);
647
- --surface-status-surface-boxblue: var(--box-blue-100);
648
- --surface-status-surface-green-focus: var(--green-light-50);
649
- --surface-status-surface-green-hover: var(--green-light-50);
650
- --surface-status-surface-green: var(--green-light-50);
651
- --surface-status-surface-dark-blue-focus: var(--dark-blue-50);
652
- --surface-status-surface-dark-blue-hover: var(--dark-blue-50);
653
- --surface-status-surface-dark-blue: var(--dark-blue-50);
654
- --surface-status-surface-light-blue-focus: var(--light-blue-50);
655
- --surface-status-surface-light-blue-hover: var(--light-blue-50);
656
- --surface-status-surface-light-blue: var(--light-blue-50);
657
- --surface-status-surface-purple-focus: var(--purple-rain-50);
658
- --surface-status-surface-purple-hover: var(--purple-rain-50);
659
- --surface-status-surface-purple: var(--purple-rain-50);
660
- --surface-status-surface-red-focus: var(--watermelon-red-50);
661
- --surface-status-surface-red-hover: var(--watermelon-red-50);
662
- --surface-status-surface-red: var(--watermelon-red-50);
663
- --surface-status-surface-orange-focus: var(--orange-50);
664
- --surface-status-surface-orange-hover: var(--orange-50);
665
- --surface-status-surface-orange: var(--orange-50);
666
- --surface-status-surface-yellow-focus: var(--yellow-50);
667
- --surface-status-surface-yellow-hover: var(--yellow-50);
668
- --surface-status-surface-yellow: var(--yellow-50);
669
- --surface-cta-surface-tertiary-promo-focus-pressed: var(--grimace-20);
670
- --surface-cta-surface-tertiary-promo-focus: var(--grimace-05);
671
- --surface-cta-surface-tertiary-promo-pressed: var(--grimace-20);
672
- --surface-cta-surface-tertiary-promo-hover: var(--grimace-05);
673
- --surface-cta-surface-tertiary-promo: var(--grimace-10);
674
- --surface-cta-surface-tertiary-pressed: var(--gray-10);
675
- --surface-cta-surface-tertiary-hover: var(--gray-05);
676
- --surface-cta-surface-tertiary: var(--gray-white);
677
- --surface-cta-surface-icon-utility-pressed: var(--gray-30);
678
- --surface-cta-surface-icon-utility-hover: var(--gray-20);
679
- --surface-cta-surface-icon-utility: var(--gray-10);
680
- --surface-cta-surface-icon-pressed: var(--black-opacity-08);
681
- --surface-cta-surface-icon-hover: var(--black-opacity-04);
682
- --surface-cta-surface-icon-disabled: var(--black-opacity-00);
683
- --surface-cta-surface-icon: var(--black-opacity-00);
684
- --surface-cta-surface-outline-pressed: var(--black-opacity-08);
685
- --surface-cta-surface-outline-hover: var(--black-opacity-04);
686
- --surface-cta-surface-outline: var(--black-opacity-00);
687
- --surface-status-surface-inprogress: var(--yellorange-100);
688
- --surface-status-surface-uploading: var(--box-blue-100);
689
- --surface-status-surface-scheduled: var(--purple-rain-100);
690
- --surface-status-surface-pending: var(--gray-40);
691
- --surface-status-surface-error: var(--watermelon-red-100);
692
- --surface-status-surface-success: var(--green-light-100);
693
- --surface-status-surface-generic: var(--gray-40);
694
- --surface-filter-surface-selected-focus: var(--box-blue-100);
695
- --surface-filter-surface-selected: var(--box-blue-100);
696
- --surface-filter-surface-focus: var(--box-blue-100);
697
- --surface-filter-surface-hover: var(--box-blue-100);
698
- --surface-filter-surface: var(--box-blue-100);
699
- --surface-pill-surface-focus: var(--gray-10);
700
- --surface-pill-surface-hover: var(--gray-10);
701
- --surface-pill-surface: var(--gray-10);
702
- --surface-message-surface-promo-secondary: var(--grimace-10);
703
- --surface-message-surface-success-secondary: var(--green-light-10);
704
- --surface-message-surface-success: var(--green-light-20);
705
- --surface-message-surface-info-secondary: var(--light-blue-10);
706
- --surface-message-surface-info: var(--light-blue-20);
707
- --surface-message-surface-generic-secondary: var(--gray-10);
708
- --surface-message-surface-generic: var(--gray-10);
709
- --surface-tooltip-surface-error: var(--watermelon-red-10);
710
- --surface-tooltip-surface: var(--gray-80);
711
- --surface-message-surface-error-secondary: var(--watermelon-red-10);
712
- --surface-message-surface-error: var(--watermelon-red-20);
713
- --surface-message-surface-warning-secondary: var(--yellorange-10);
714
- --surface-message-surface-warning: var(--yellorange-20);
715
- --surface-toggle-surface-on-hover: var(--box-blue-20);
716
- --surface-toggle-surface-on: var(--box-blue-10);
717
- --surface-toggle-surface-off-hover: var(--gray-05);
718
- --surface-input-surface-error-focus: var(--gray-white);
719
- --surface-input-surface-error-hover: var(--gray-white);
720
- --surface-input-surface-error: var(--gray-white);
721
- --surface-input-surface-focus: var(--gray-white);
722
- --surface-input-surface-hover: var(--gray-white);
723
- --surface-input-surface: var(--gray-white);
724
- --surface-dropdown-surface-error-focus: var(--gray-white);
725
- --surface-dropdown-surface-error-hover: var(--gray-white);
726
- --surface-dropdown-surface-error: var(--gray-white);
727
- --surface-dropdown-surface-focus: var(--gray-white);
728
- --surface-dropdown-surface-hover: var(--gray-white);
729
- --surface-dropdown-surface: var(--gray-white);
730
- --surface-cta-surface-secondary-focus-pressed: var(--gray-10);
731
- --surface-cta-surface-secondary-pressed: var(--gray-10);
732
- --surface-cta-surface-secondary-focus: var(--gray-05);
733
- --surface-cta-surface-secondary-hover: var(--gray-05);
734
- --surface-cta-surface-secondary-disabled: var(--gray-white);
735
- --surface-cta-surface-secondary-busy: var(--gray-white);
736
- --surface-cta-surface-secondary: var(--gray-white);
737
- --surface-surface-brand-secondary: var(--box-blue-10);
738
- --surface-menu-surface-focus: var(--gray-05);
739
- --surface-menu-surface-pressed: var(--gray-05);
740
- --surface-menu-surface-hover: var(--gray-05);
741
- --surface-menu-surface: var(--gray-white);
742
- --surface-card-surface-pressed: var(--gray-02);
743
- --surface-card-surface-focus: var(--box-blue-05);
744
- --surface-card-surface-hover: var(--gray-white);
745
- --surface-card-surface: var(--gray-white);
746
- --surface-surface-secondary-focus: var(--gray-02);
747
- --surface-surface-secondary-hover: var(--gray-05);
748
- --surface-surface-quaternary: var(--gray-20);
749
- --surface-surface-tertiary: var(--gray-10);
750
- --surface-surface-secondary: var(--gray-02);
751
- --surface-surface-hover: var(--gray-05);
752
- --surface-surface: var(--gray-white);
6
+ --surface-surface-brand: #0061d5;
7
+ --surface-surface-brand-hover: #006ae9;
8
+ --surface-surface-brand-pressed: #004eac;
9
+ --surface-surface-brand-busy: #0061d5;
10
+ --surface-surface-brand-disabled: #0061d5;
11
+ --surface-badge-pdf-surface: #d0021b;
12
+ --surface-badge-docs-surface: #4083f7;
13
+ --surface-badge-sheets-surface: #21a464;
14
+ --surface-badge-pages-surface: #ff9500;
15
+ --surface-badge-keynote-surface: #0a84ff;
16
+ --surface-badge-video-surface: #009aed;
17
+ --border-cta-border-outline-disabled: #646464;
18
+ --brand-box-ai-100: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
19
+ --brand-box-ai-120: linear-gradient(135deg, #cb02b0 0%, #1f6ac8 100%);
20
+ --brand-box-ai-140: linear-gradient(135deg, #980284 0%, #174f96 100%);
21
+ --gray-10: #e8e8e8;
22
+ --gray-20: #d3d3d3;
23
+ --gray-30: #bcbcbc;
24
+ --gray-40: #a7a7a7;
25
+ --gray-50: #909090;
26
+ --gray-65: #6f6f6f;
27
+ --gray-80: #4e4e4e;
28
+ --gray-90: #383838;
29
+ --gray-100: #222222;
30
+ --gray-02: #fbfbfb;
31
+ --gray-05: #f4f4f4;
32
+ --gray-black: #000000;
33
+ --gray-white: #ffffff;
34
+ --box-blue-10: #e5effa;
35
+ --box-blue-20: #ccdff7;
36
+ --box-blue-30: #b2cff2;
37
+ --box-blue-40: #99c0ee;
38
+ --box-blue-50: #7fb0ea;
39
+ --box-blue-80: #3381dd;
40
+ --box-blue-100: #0061d5;
41
+ --box-blue-110: #0057c0;
42
+ --box-blue-120: #004eaa;
43
+ --box-blue-150: #00316b;
44
+ --box-blue-160: #002755;
45
+ --box-blue-170: #001d40;
46
+ --box-blue-180: #00132b;
47
+ --box-blue-05: #f2f7fd;
48
+ --box-blue-02: #fafcfe;
49
+ --dark-blue-10: #e5ebf2;
50
+ --dark-blue-20: #ccd8e6;
51
+ --dark-blue-50: #7f9dc1;
52
+ --dark-blue-100: #003c84;
53
+ --dark-blue-110: #003677;
54
+ --dark-blue-120: #00306a;
55
+ --dark-blue-150: #001e42;
56
+ --dark-blue-160: #001835;
57
+ --dark-blue-170: #001228;
58
+ --dark-blue-180: #000c1a;
59
+ --dark-blue-05: #f2f5f9;
60
+ --dark-blue-02: #fafbfd;
61
+ --light-blue-10: #e9f2fe;
62
+ --light-blue-20: #d3e7fe;
63
+ --light-blue-50: #91c2fd;
64
+ --light-blue-100: #2486fc;
65
+ --light-blue-110: #2079e3;
66
+ --light-blue-120: #1d6bca;
67
+ --light-blue-150: #12437e;
68
+ --light-blue-160: #0e3665;
69
+ --light-blue-170: #0b284c;
70
+ --light-blue-180: #071b32;
71
+ --light-blue-05: #f4f9ff;
72
+ --light-blue-02: #fbfdff;
73
+ --green-light-10: #e9f8f2;
74
+ --green-light-20: #d4f3e6;
75
+ --green-light-50: #92e0c0;
76
+ --green-light-100: #26c281;
77
+ --green-light-110: #22af74;
78
+ --green-light-120: #1e9b67;
79
+ --green-light-150: #136140;
80
+ --green-light-160: #0f4e34;
81
+ --green-light-170: #0b3a27;
82
+ --green-light-180: #08271a;
83
+ --green-light-05: #f4fcf8;
84
+ --green-light-02: #fbfefd;
85
+ --watermelon-red-10: #fdebee;
86
+ --watermelon-red-20: #fbd7dd;
87
+ --watermelon-red-50: #f69bab;
88
+ --watermelon-red-100: #ed3757;
89
+ --watermelon-red-110: #d5324e;
90
+ --watermelon-red-120: #be2c46;
91
+ --watermelon-red-150: #761b2b;
92
+ --watermelon-red-160: #5f1623;
93
+ --watermelon-red-170: #47101a;
94
+ --watermelon-red-180: #2f0b11;
95
+ --watermelon-red-05: #fef5f6;
96
+ --watermelon-red-02: #fffbfc;
97
+ --orange-10: #fdf2e8;
98
+ --orange-20: #fce6d1;
99
+ --orange-50: #f8c08c;
100
+ --orange-100: #f1811a;
101
+ --orange-110: #d97417;
102
+ --orange-120: #c16715;
103
+ --orange-150: #78400d;
104
+ --orange-160: #60340a;
105
+ --orange-170: #482708;
106
+ --orange-180: #301a05;
107
+ --orange-05: #fef8f3;
108
+ --orange-02: #fffdfb;
109
+ --yellorange-10: #fef7e8;
110
+ --yellorange-20: #fdf0d1;
111
+ --yellorange-50: #fad98d;
112
+ --yellorange-100: #f5b31b;
113
+ --yellorange-110: #dca118;
114
+ --yellorange-120: #c48f16;
115
+ --yellorange-150: #7a590d;
116
+ --yellorange-160: #62480b;
117
+ --yellorange-170: #493608;
118
+ --yellorange-180: #312405;
119
+ --yellorange-05: #fefbf3;
120
+ --yellorange-02: #fffefb;
121
+ --yellow-10: #fffbe5;
122
+ --yellow-20: #fff7cc;
123
+ --yellow-50: #ffeb7f;
124
+ --yellow-100: #ffd700;
125
+ --yellow-110: #e6c100;
126
+ --yellow-120: #ccac00;
127
+ --yellow-150: #806b00;
128
+ --yellow-160: #665600;
129
+ --yellow-170: #4c4000;
130
+ --yellow-180: #332b00;
131
+ --yellow-05: #fffdf2;
132
+ --yellow-02: #fffefa;
133
+ --purple-rain-10: #f5ebfd;
134
+ --purple-rain-20: #ecd9fb;
135
+ --purple-rain-50: #cf9ff6;
136
+ --purple-rain-100: #9f3fed;
137
+ --purple-rain-110: #8f39d5;
138
+ --purple-rain-120: #7f32be;
139
+ --purple-rain-150: #4f1f76;
140
+ --purple-rain-160: #40195f;
141
+ --purple-rain-170: #301347;
142
+ --purple-rain-180: #200d2f;
143
+ --purple-rain-05: #faf5fe;
144
+ --purple-rain-02: #fdfbff;
145
+ --grimace-10: #ece9f8;
146
+ --grimace-20: #dad4f3;
147
+ --grimace-50: #a392e0;
148
+ --grimace-100: #4826c2;
149
+ --grimace-110: #4122af;
150
+ --grimace-120: #3a1e9b;
151
+ --grimace-150: #241361;
152
+ --grimace-160: #1d0f4e;
153
+ --grimace-170: #160b3a;
154
+ --grimace-180: #0e0827;
155
+ --grimace-05: #f6f4fc;
156
+ --grimace-02: #fbfbfe;
157
+ --title-subtitle-line-height: 1.25rem;
158
+ --title-subtitle-font-size: 0.875rem;
159
+ --title-subtitle-letter-spacing: 0.01875rem;
160
+ --title-subtitle-paragraph-spacing: 0;
161
+ --title-subtitle-text-case: none;
162
+ --title-subtitle-text-decoration: none;
163
+ --title-small-line-height: 1.25rem;
164
+ --title-small-font-size: 0.9375rem;
165
+ --title-small-letter-spacing: 0.01875rem;
166
+ --title-small-paragraph-spacing: 0;
167
+ --title-small-text-case: none;
168
+ --title-small-text-decoration: none;
169
+ --title-medium-line-height: 1.5rem;
170
+ --title-medium-font-size: 1rem;
171
+ --title-medium-letter-spacing: 0.01875rem;
172
+ --title-medium-paragraph-spacing: 0;
173
+ --title-medium-text-case: none;
174
+ --title-medium-text-decoration: none;
175
+ --title-large-line-height: 1.5rem;
176
+ --title-large-font-size: 1.125rem;
177
+ --title-large-letter-spacing: 0.01875rem;
178
+ --title-large-paragraph-spacing: 0;
179
+ --title-large-text-case: none;
180
+ --title-large-text-decoration: none;
181
+ --title-x-large-line-height: 2rem;
182
+ --title-x-large-font-size: 1.3125rem;
183
+ --title-x-large-letter-spacing: 0.01875rem;
184
+ --title-x-large-paragraph-spacing: 0;
185
+ --title-x-large-text-case: none;
186
+ --title-x-large-text-decoration: none;
187
+ --title-mondo-line-height: 2.75rem;
188
+ --title-mondo-font-size: 2.25rem;
189
+ --title-mondo-letter-spacing: 0;
190
+ --title-mondo-paragraph-spacing: 0;
191
+ --title-mondo-text-case: none;
192
+ --title-mondo-text-decoration: none;
193
+ --body-large-line-height: 1.5rem;
194
+ --body-large-font-size: 1rem;
195
+ --body-large-letter-spacing: 0.01875rem;
196
+ --body-large-paragraph-spacing: 0;
197
+ --body-large-text-case: none;
198
+ --body-large-text-decoration: none;
199
+ --body-large-bold-line-height: 1.5rem;
200
+ --body-large-bold-font-size: 1rem;
201
+ --body-large-bold-letter-spacing: 0.01875rem;
202
+ --body-large-bold-paragraph-spacing: 0;
203
+ --body-large-bold-text-case: none;
204
+ --body-large-bold-text-decoration: none;
205
+ --body-default-bold-line-height: 1.25rem;
206
+ --body-default-bold-font-size: 0.875rem;
207
+ --body-default-bold-letter-spacing: 0.01875rem;
208
+ --body-default-bold-paragraph-spacing: 0;
209
+ --body-default-bold-text-case: none;
210
+ --body-default-bold-text-decoration: none;
211
+ --body-default-semibold-line-height: 1.25rem;
212
+ --body-default-semibold-font-size: 0.875rem;
213
+ --body-default-semibold-letter-spacing: 0.01875rem;
214
+ --body-default-semibold-paragraph-spacing: 0;
215
+ --body-default-semibold-text-case: none;
216
+ --body-default-semibold-text-decoration: none;
217
+ --body-default-line-height: 1.25rem;
218
+ --body-default-font-size: 0.875rem;
219
+ --body-default-letter-spacing: 0.01875rem;
220
+ --body-default-paragraph-spacing: 0;
221
+ --body-default-text-case: none;
222
+ --body-default-text-decoration: none;
223
+ --caption-bold-line-height: 0.875rem;
224
+ --caption-bold-font-size: 0.75rem;
225
+ --caption-bold-letter-spacing: 0.01875rem;
226
+ --caption-bold-paragraph-spacing: 0;
227
+ --caption-bold-text-case: none;
228
+ --caption-bold-text-decoration: none;
229
+ --caption-default-line-height: 0.875rem;
230
+ --caption-default-font-size: 0.75rem;
231
+ --caption-default-letter-spacing: 0.01875rem;
232
+ --caption-default-paragraph-spacing: 0;
233
+ --caption-default-text-case: none;
234
+ --caption-default-text-decoration: none;
235
+ --label-bold-line-height: 1rem;
236
+ --label-bold-font-size: 0.625rem;
237
+ --label-bold-letter-spacing: 0.0375rem;
238
+ --label-bold-paragraph-spacing: 0;
239
+ --label-bold-text-case: none;
240
+ --label-bold-text-decoration: none;
241
+ --label-default-line-height: 1rem;
242
+ --label-default-font-size: 0.625rem;
243
+ --label-default-letter-spacing: 0.0375rem;
244
+ --label-default-paragraph-spacing: 0;
245
+ --label-default-text-case: none;
246
+ --label-default-text-decoration: none;
247
+ --link-default-line-height: 1.25rem;
248
+ --link-default-font-size: 0.875rem;
249
+ --link-default-letter-spacing: 0.01875rem;
250
+ --link-default-paragraph-spacing: 0;
251
+ --link-default-paragraph-indent: 0rem;
252
+ --link-default-text-case: none;
253
+ --radius-05: 0.125rem;
254
+ --radius-1: 0.25rem;
255
+ --radius-2: 0.375rem;
256
+ --radius-3: 0.5rem;
257
+ --radius-4: 0.75rem;
258
+ --radius-5: 1rem;
259
+ --radius-6: 1.25rem;
260
+ --radius-7: 1.5rem;
261
+ --radius-8: 1.75rem;
262
+ --radius-half: 2rem;
263
+ --border-1: 0.0625rem;
264
+ --border-2: 0.125rem;
265
+ --border-3: 0.1875rem;
266
+ --space-05: 0.125rem;
267
+ --space-1: 0.25rem;
268
+ --space-2: 0.5rem;
269
+ --space-3: 0.75rem;
270
+ --space-4: 1rem;
271
+ --space-5: 1.25rem;
272
+ --space-6: 1.5rem;
273
+ --space-7: 1.75rem;
274
+ --space-8: 2rem;
275
+ --space-9: 2.25rem;
276
+ --space-10: 2.5rem;
277
+ --space-11: 2.75rem;
278
+ --space-12: 3rem;
279
+ --space-14: 3.5rem;
280
+ --space-15: 3.75rem;
281
+ --space-16: 4rem;
282
+ --space-18: 4.5rem;
283
+ --space-20: 5rem;
284
+ --dropshadow-3: 0 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.1);
285
+ --dropshadow-3-inverse: 0 -0.25rem 0.75rem 0 rgba(0, 0, 0, 0.1);
286
+ --dropshadow-2: 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1);
287
+ --dropshadow-1: 0 0 0.5rem 0 rgba(0, 0, 0, 0.05);
288
+ --innershadow-1: inset 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.1);
289
+ --black-opacity-80: rgba(0, 0, 0, 0.8);
290
+ --black-opacity-60: rgba(0, 0, 0, 0.6);
291
+ --black-opacity-50: rgba(0, 0, 0, 0.5);
292
+ --black-opacity-08: rgba(0, 0, 0, 0.08);
293
+ --black-opacity-04: rgba(0, 0, 0, 0.04);
294
+ --black-opacity-00: rgba(0, 0, 0, 0);
295
+ --size-05: 0.125rem;
296
+ --size-1: 0.25rem;
297
+ --size-2: 0.5rem;
298
+ --size-3: 0.75rem;
299
+ --size-4: 1rem;
300
+ --size-5: 1.25rem;
301
+ --size-6: 1.5rem;
302
+ --size-7: 1.75rem;
303
+ --size-8: 2rem;
304
+ --size-9: 2.25rem;
305
+ --size-10: 2.5rem;
306
+ --size-11: 2.75rem;
307
+ --size-12: 3rem;
308
+ --size-14: 3.5rem;
309
+ --size-15: 3.75rem;
310
+ --size-16: 4rem;
311
+ --size-18: 4.5rem;
312
+ --size-20: 5rem;
313
+ --white-opacity-70: rgba(255, 255, 255, 0.7);
314
+ --white-opacity-30: rgba(255, 255, 255, 0.3);
315
+ --border-4: 0.25rem;
316
+ --border-6: 0.375rem;
317
+ --border-8: 0.5rem;
318
+ --font-families-sans: Lato, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue',
319
+ sans-serif;
320
+ --font-weights-regular: 400;
321
+ --font-weights-semibold: 600;
322
+ --font-weights-bold: 700;
323
+ --font-weights-black: 900;
324
+ --text-decoration-underline: underline;
325
+ --animation-duration-2: 200ms;
326
+ --animation-duration-3: 300ms;
327
+ --animation-duration-4: 400ms;
328
+ --animation-easing-ease-base: cubic-bezier(0.16, 1, 0.3, 1);
329
+ --breakpoint-small: 374px;
330
+ --breakpoint-medium: 767px;
331
+ --breakpoint-large: 1023px;
332
+ --breakpoint-xlarge: 1219px;
333
+ --notification-default-line-height: 0.75rem;
334
+ --notification-default-font-size: 0.5625rem;
335
+ --notification-default-letter-spacing: 0.01875rem;
336
+ --notification-default-text-decoration: none;
337
+ --notification-default-text-case: none;
338
+ --notification-default-paragraph-spacing: 0;
339
+ --notification-default-paragraph-indent: 0rem;
753
340
  --background-background: var(--gray-white);
341
+ --surface-surface: var(--gray-white);
342
+ --surface-surface-hover: var(--gray-05);
343
+ --surface-surface-secondary: var(--gray-02);
344
+ --surface-surface-tertiary: var(--gray-10);
345
+ --surface-surface-quaternary: var(--gray-20);
346
+ --surface-surface-secondary-hover: var(--gray-05);
347
+ --surface-surface-secondary-focus: var(--gray-02);
348
+ --surface-card-surface: var(--gray-white);
349
+ --surface-card-surface-hover: var(--gray-white);
350
+ --surface-card-surface-focus: var(--box-blue-05);
351
+ --surface-card-surface-pressed: var(--gray-02);
352
+ --surface-menu-surface: var(--gray-white);
353
+ --surface-menu-surface-hover: var(--gray-05);
354
+ --surface-menu-surface-pressed: var(--gray-05);
355
+ --surface-menu-surface-focus: var(--gray-05);
356
+ --surface-surface-brand-secondary: var(--box-blue-10);
357
+ --surface-cta-surface-secondary: var(--gray-white);
358
+ --surface-cta-surface-secondary-busy: var(--gray-white);
359
+ --surface-cta-surface-secondary-disabled: var(--gray-white);
360
+ --surface-cta-surface-secondary-hover: var(--gray-05);
361
+ --surface-cta-surface-secondary-focus: var(--gray-05);
362
+ --surface-cta-surface-secondary-pressed: var(--gray-10);
363
+ --surface-cta-surface-secondary-focus-pressed: var(--gray-10);
364
+ --surface-dropdown-surface: var(--gray-white);
365
+ --surface-dropdown-surface-hover: var(--gray-white);
366
+ --surface-dropdown-surface-focus: var(--gray-white);
367
+ --surface-dropdown-surface-error: var(--gray-white);
368
+ --surface-dropdown-surface-error-hover: var(--gray-white);
369
+ --surface-dropdown-surface-error-focus: var(--gray-white);
370
+ --surface-input-surface: var(--gray-white);
371
+ --surface-input-surface-hover: var(--gray-white);
372
+ --surface-input-surface-focus: var(--gray-white);
373
+ --surface-input-surface-error: var(--gray-white);
374
+ --surface-input-surface-error-hover: var(--gray-white);
375
+ --surface-input-surface-error-focus: var(--gray-white);
376
+ --surface-toggle-surface-off-hover: var(--gray-05);
377
+ --surface-toggle-surface-on: var(--box-blue-10);
378
+ --surface-toggle-surface-on-hover: var(--box-blue-20);
379
+ --surface-message-surface-warning: var(--yellorange-20);
380
+ --surface-message-surface-warning-secondary: var(--yellorange-10);
381
+ --surface-message-surface-error: var(--watermelon-red-20);
382
+ --surface-message-surface-error-secondary: var(--watermelon-red-10);
383
+ --surface-tooltip-surface: var(--gray-80);
384
+ --surface-tooltip-surface-error: var(--watermelon-red-10);
385
+ --surface-message-surface-generic: var(--gray-10);
386
+ --surface-message-surface-generic-secondary: var(--gray-10);
387
+ --surface-message-surface-info: var(--light-blue-20);
388
+ --surface-message-surface-info-secondary: var(--light-blue-10);
389
+ --surface-message-surface-success: var(--green-light-20);
390
+ --surface-message-surface-success-secondary: var(--green-light-10);
391
+ --surface-message-surface-promo-secondary: var(--grimace-10);
392
+ --surface-pill-surface: var(--gray-10);
393
+ --surface-pill-surface-hover: var(--gray-10);
394
+ --surface-pill-surface-focus: var(--gray-10);
395
+ --surface-filter-surface: var(--box-blue-100);
396
+ --surface-filter-surface-hover: var(--box-blue-100);
397
+ --surface-filter-surface-focus: var(--box-blue-100);
398
+ --surface-filter-surface-selected: var(--box-blue-100);
399
+ --surface-filter-surface-selected-focus: var(--box-blue-100);
400
+ --surface-status-surface-generic: var(--gray-40);
401
+ --surface-status-surface-success: var(--green-light-100);
402
+ --surface-status-surface-error: var(--watermelon-red-100);
403
+ --surface-status-surface-pending: var(--gray-40);
404
+ --surface-status-surface-scheduled: var(--purple-rain-100);
405
+ --surface-status-surface-uploading: var(--box-blue-100);
406
+ --surface-status-surface-inprogress: var(--yellorange-100);
407
+ --surface-cta-surface-outline: var(--black-opacity-00);
408
+ --surface-cta-surface-outline-hover: var(--black-opacity-04);
409
+ --surface-cta-surface-outline-pressed: var(--black-opacity-08);
410
+ --surface-cta-surface-icon: var(--black-opacity-00);
411
+ --surface-cta-surface-icon-disabled: var(--black-opacity-00);
412
+ --surface-cta-surface-icon-hover: var(--black-opacity-04);
413
+ --surface-cta-surface-icon-pressed: var(--black-opacity-08);
414
+ --surface-cta-surface-icon-utility: var(--gray-10);
415
+ --surface-cta-surface-icon-utility-hover: var(--gray-20);
416
+ --surface-cta-surface-icon-utility-pressed: var(--gray-30);
417
+ --surface-cta-surface-tertiary: var(--gray-white);
418
+ --surface-cta-surface-tertiary-hover: var(--gray-05);
419
+ --surface-cta-surface-tertiary-pressed: var(--gray-10);
420
+ --surface-cta-surface-tertiary-promo: var(--grimace-10);
421
+ --surface-cta-surface-tertiary-promo-hover: var(--grimace-05);
422
+ --surface-cta-surface-tertiary-promo-pressed: var(--grimace-20);
423
+ --surface-cta-surface-tertiary-promo-focus: var(--grimace-05);
424
+ --surface-cta-surface-tertiary-promo-focus-pressed: var(--grimace-20);
425
+ --surface-status-surface-yellow: var(--yellow-50);
426
+ --surface-status-surface-yellow-hover: var(--yellow-50);
427
+ --surface-status-surface-yellow-focus: var(--yellow-50);
428
+ --surface-status-surface-orange: var(--orange-50);
429
+ --surface-status-surface-orange-hover: var(--orange-50);
430
+ --surface-status-surface-orange-focus: var(--orange-50);
431
+ --surface-status-surface-red: var(--watermelon-red-50);
432
+ --surface-status-surface-red-hover: var(--watermelon-red-50);
433
+ --surface-status-surface-red-focus: var(--watermelon-red-50);
434
+ --surface-status-surface-purple: var(--purple-rain-50);
435
+ --surface-status-surface-purple-hover: var(--purple-rain-50);
436
+ --surface-status-surface-purple-focus: var(--purple-rain-50);
437
+ --surface-status-surface-light-blue: var(--light-blue-50);
438
+ --surface-status-surface-light-blue-hover: var(--light-blue-50);
439
+ --surface-status-surface-light-blue-focus: var(--light-blue-50);
440
+ --surface-status-surface-dark-blue: var(--dark-blue-50);
441
+ --surface-status-surface-dark-blue-hover: var(--dark-blue-50);
442
+ --surface-status-surface-dark-blue-focus: var(--dark-blue-50);
443
+ --surface-status-surface-green: var(--green-light-50);
444
+ --surface-status-surface-green-hover: var(--green-light-50);
445
+ --surface-status-surface-green-focus: var(--green-light-50);
446
+ --surface-status-surface-boxblue: var(--box-blue-100);
447
+ --surface-status-surface-boxblue-hover: var(--box-blue-100);
448
+ --surface-status-surface-boxblue-focus: var(--box-blue-100);
449
+ --surface-status-surface-gray: var(--gray-10);
450
+ --surface-status-surface-gray-hover: var(--gray-10);
451
+ --surface-status-surface-gray-focus: var(--gray-10);
452
+ --surface-item-surface-hover: var(--gray-white);
453
+ --surface-item-surface-selected: var(--box-blue-05);
454
+ --surface-item-small-surface: var(--gray-white);
455
+ --surface-item-small-surface-hover: var(--gray-05);
456
+ --surface-item-small-surface-selected: var(--box-blue-05);
457
+ --surface-switch-surface: var(--gray-white);
458
+ --surface-switch-surface-hover: var(--gray-white);
459
+ --surface-switch-surface-off: var(--gray-20);
460
+ --surface-switch-surface-off-hover: var(--gray-30);
461
+ --surface-switch-surface-on: var(--box-blue-100);
462
+ --surface-switch-surface-on-hover: var(--light-blue-110);
463
+ --surface-radio-surface: var(--gray-white);
464
+ --surface-radio-surface-hover: var(--gray-white);
465
+ --surface-radio-surface-selected: var(--box-blue-100);
466
+ --surface-radio-surface-selected-hover: var(--light-blue-110);
467
+ --surface-checkbox-surface: var(--gray-white);
468
+ --surface-checkbox-surface-hover: var(--gray-white);
469
+ --surface-checkbox-surface-selected: var(--box-blue-100);
470
+ --surface-checkbox-surface-selected-hover: var(--light-blue-110);
471
+ --surface-ghost-surface: var(--gray-02);
472
+ --surface-ghost-surface-secondary: var(--gray-05);
473
+ --surface-inputchip-surface: var(--gray-10);
474
+ --surface-inputchip-surface-hover: var(--gray-10);
475
+ --surface-inputchip-surface-error: var(--watermelon-red-10);
476
+ --surface-filterchip-surface-multi: var(--black-opacity-04);
477
+ --surface-filterchip-surface-multi-hover: var(--black-opacity-08);
478
+ --surface-filterchip-surface-multi-on: var(--box-blue-10);
479
+ --surface-filterchip-surface-multi-on-hover: var(--box-blue-20);
480
+ --surface-filterchip-surface-single: var(--black-opacity-04);
481
+ --surface-filterchip-surface-single-hover: var(--black-opacity-08);
482
+ --surface-filterchip-surface-single-on: var(--box-blue-100);
483
+ --surface-filterchip-surface-single-on-hover: var(--box-blue-100);
484
+ --surface-slidertrack-surface: var(--gray-65);
485
+ --surface-sliderthumb-surface: var(--box-blue-100);
486
+ --surface-sliderthumb-surface-hover: var(--light-blue-100);
487
+ --surface-scrollbar-surface: var(--black-opacity-50);
488
+ --surface-search-surface: var(--gray-05);
489
+ --surface-search-global-surface: var(--gray-05);
490
+ --surface-search-surface-hover: var(--gray-02);
491
+ --surface-search-surface-focused: var(--gray-white);
492
+ --surface-day-surface: var(--gray-white);
493
+ --surface-day-surface-hover: var(--gray-05);
494
+ --surface-day-surface-selected: var(--box-blue-100);
495
+ --surface-day-surface-selected-hover: var(--dark-blue-100);
496
+ --surface-tab-surface-hover: var(--gray-05);
497
+ --surface-tab-surface-pressed: var(--gray-10);
498
+ --surface-accordion-surface: var(--gray-white);
499
+ --surface-accordion-surface-hover: var(--gray-05);
500
+ --surface-badge-image-surface: var(--green-light-100);
501
+ --surface-badge-canvas-surface: var(--orange-100);
502
+ --surface-badge-boxnote-surface: var(--gray-10);
503
+ --surface-badge-folderexternal-surface: var(--gray-65);
504
+ --surface-badge-foldershared-surface: var(--light-blue-100);
505
+ --surface-badge-relay-surface: var(--light-blue-120);
506
+ --surface-badge-mention-surface: var(--light-blue-120);
507
+ --surface-badge-task-surface: var(--light-blue-100);
508
+ --surface-badge-taskapproval-surface: var(--light-blue-120);
509
+ --surface-badge-annotation-surface: var(--yellorange-100);
510
+ --surface-badge-completed-surface: var(--green-light-100);
511
+ --surface-badge-rejected-surface: var(--watermelon-red-110);
512
+ --surface-badge-error-surface: var(--watermelon-red-110);
513
+ --surface-badge-external-surface: var(--gray-50);
514
+ --surface-badge-admin-surface: var(--dark-blue-100);
515
+ --surface-badge-coadmin-surface: var(--purple-rain-100);
516
+ --surface-badge-online-surface: var(--green-light-120);
517
+ --surface-badge-pin-surface: var(--gray-10);
518
+ --surface-badge-collection-surface: var(--gray-10);
519
+ --surface-badge-offline-surface: var(--green-light-100);
520
+ --surface-badge-progress-surface: var(--yellorange-100);
521
+ --surface-badge-notification-surface: var(--watermelon-red-110);
522
+ --surface-chip-button-surface: var(--black-opacity-04);
523
+ --surface-chip-button-surface-hover: var(--black-opacity-08);
524
+ --surface-page-surface: var(--gray-white);
525
+ --surface-option-grid-surface-hover: var(--black-opacity-04);
526
+ --surface-option-grid-surface-selected: var(--black-opacity-08);
527
+ --surface-dropdown-primary-surface-hover: var(--gray-05);
528
+ --surface-dropdown-primary-surface-pressed: var(--gray-10);
529
+ --surface-dropdown-secondary-surface: var(--gray-white);
530
+ --surface-dropdown-secondary-surface-hover: var(--gray-05);
531
+ --surface-dropdown-secondary-surface-pressed: var(--gray-10);
532
+ --surface-toggle-surface: var(--gray-white);
533
+ --surface-toggle-surface-hover: var(--gray-05);
534
+ --surface-toggle-surface-pressed: var(--box-blue-100);
535
+ --surface-toggle-surface-pressed-hover: var(--box-blue-80);
536
+ --surface-text-highlight-surface: var(--yellow-20);
537
+ --surface-nav-surface-brand: var(--box-blue-100);
538
+ --surface-progressbar-surface-brand: var(--box-blue-100);
539
+ --surface-illustration-surface-box-neutral: var(--box-blue-100);
540
+ --surface-illustration-surface-box: var(--box-blue-100);
541
+ --surface-upload-surface-brand-neutral: var(--box-blue-100);
542
+ --surface-cta-surface-promo: var(--grimace-110);
543
+ --surface-cta-surface-promo-hover: var(--grimace-100);
544
+ --surface-cta-surface-promo-pressed: var(--grimace-120);
545
+ --surface-cta-surface-promo-focus: var(--grimace-100);
546
+ --surface-cta-surface-promo-focus-pressed: var(--grimace-120);
547
+ --surface-contentbutton-surface-surface-selected: var(--gray-white);
548
+ --surface-contentswitcher-surface: var(--gray-10);
549
+ --surface-toolbar-surface: var(--gray-100);
550
+ --surface-toggle-surface-off-pressed: var(--gray-10);
551
+ --surface-toggle-surface-on-pressed: var(--box-blue-30);
552
+ --surface-cta-surface-disabled: var(--box-blue-30);
553
+ --surface-radiotile-surface: var(--gray-white);
554
+ --surface-radiotile-surface-hover: var(--gray-05);
555
+ --surface-radiotile-surface-selected: var(--box-blue-05);
556
+ --surface-toggletext-surface-on: var(--box-blue-10);
557
+ --surface-toggletext-surface-on-hover: var(--box-blue-20);
558
+ --surface-toggletext-surface-on-pressed: var(--box-blue-30);
559
+ --surface-toggletext-surface-on-ai: var(--brand-box-ai-100);
560
+ --surface-toggletext-surface-on-ai-hover: var(--brand-box-ai-120);
561
+ --surface-toggletext-surface-on-ai-pressed: var(--brand-box-ai-140);
562
+ --surface-toggletext-surface-off-ai: var(--gray-white);
563
+ --surface-toggletext-surface-off-ai-hover: var(--gray-05);
564
+ --surface-toggletext-surface-off-ai-pressed: var(--gray-10);
565
+ --border-cta-border-secondary: var(--gray-30);
566
+ --border-cta-border-secondary-pressed: var(--gray-30);
567
+ --border-cta-border-secondary-hover: var(--gray-30);
568
+ --border-card-border: var(--gray-10);
569
+ --border-card-border-hover: var(--gray-10);
570
+ --border-card-border-focus: var(--box-blue-100);
571
+ --border-message-border-generic: var(--gray-100);
572
+ --border-message-border-generic-secondary: var(--gray-50);
573
+ --border-message-border-info: var(--box-blue-100);
574
+ --border-message-border-info-secondary: var(--light-blue-50);
575
+ --border-message-border-success: var(--green-light-100);
576
+ --border-message-border-success-secondary: var(--green-light-50);
577
+ --border-message-border-warning: var(--yellorange-100);
578
+ --border-message-border-warning-secondary: var(--yellorange-50);
579
+ --border-message-border-error: var(--watermelon-red-100);
580
+ --border-message-border-error-secondary: var(--watermelon-red-50);
581
+ --border-input-border: var(--gray-50);
582
+ --border-input-border-hover: var(--gray-65);
583
+ --border-input-border-focus: var(--light-blue-100);
584
+ --border-input-border-error: var(--watermelon-red-100);
585
+ --border-input-border-error-hover: var(--watermelon-red-100);
586
+ --border-input-border-error-focus: var(--watermelon-red-100);
587
+ --border-dropdown-border: var(--gray-30);
588
+ --border-dropdown-border-hover: var(--gray-65);
589
+ --border-dropdown-border-focus: var(--box-blue-100);
590
+ --border-dropdown-border-error: var(--watermelon-red-100);
591
+ --border-dropdown-border-error-hover: var(--watermelon-red-100);
592
+ --border-dropdown-border-error-focus: var(--watermelon-red-100);
593
+ --border-tooltip-border-error: var(--watermelon-red-50);
594
+ --border-tab-border-selected: var(--box-blue-100);
595
+ --border-tab-border-selected-hover: var(--box-blue-100);
596
+ --border-tab-border-selected-focus: var(--box-blue-100);
597
+ --border-tab-border: var(--gray-10);
598
+ --border-tab-border-hover: var(--gray-30);
599
+ --border-cta-border-outline: var(--gray-black);
600
+ --border-cta-border-outline-hover: var(--gray-black);
601
+ --border-cta-border-outline-pressed: var(--gray-black);
602
+ --border-item-border-hover: var(--gray-10);
603
+ --border-item-border-selected: var(--box-blue-100);
604
+ --border-item-small-border-selected: var(--box-blue-100);
605
+ --border-switch-border: var(--gray-30);
606
+ --border-switch-border-hover: var(--gray-30);
607
+ --border-radio-border: var(--gray-65);
608
+ --border-radio-border-selected: var(--box-blue-100);
609
+ --border-radio-border-selected-hover: var(--light-blue-110);
610
+ --border-radio-border-hover: var(--gray-80);
611
+ --border-checkbox-border: var(--gray-65);
612
+ --border-checkbox-border-hover: var(--gray-80);
613
+ --border-checkbox-border-selected: var(--box-blue-100);
614
+ --border-checkbox-border-selected-hover: var(--light-blue-110);
615
+ --border-divider-border: var(--gray-10);
616
+ --border-card-border-pressed: var(--gray-10);
617
+ --border-inputchip-border-error: var(--watermelon-red-100);
618
+ --border-avatar-border-hover: var(--black-opacity-04);
619
+ --border-avatar-border-pressed: var(--black-opacity-08);
620
+ --border-status-border-hover: var(--black-opacity-04);
621
+ --border-search-border: var(--gray-05);
622
+ --border-search-border-hover: var(--gray-65);
623
+ --border-search-global-border-hover: var(--gray-10);
624
+ --border-gridthumbnail-border: var(--gray-10);
625
+ --border-filterchip-border-multi-on: var(--box-blue-40);
626
+ --border-filterchip-border-multi-on-hover: var(--box-blue-40);
627
+ --border-collapsible-border: var(--gray-20);
628
+ --border-badge-border: var(--gray-white);
629
+ --border-toggle-border: var(--gray-30);
630
+ --border-card-border-ai: var(--brand-box-ai-100);
631
+ --border-cta-border-ai: var(--brand-box-ai-100);
632
+ --border-contentbutton-border-selected: var(--gray-50);
633
+ --border-toggle-border-on: var(--box-blue-40);
634
+ --border-cta-border-secondary-disabled: var(--gray-10);
635
+ --border-radiotile-border: var(--gray-30);
636
+ --border-radiotile-border-hover: var(--gray-30);
637
+ --border-radiotile-border-selected: var(--box-blue-100);
638
+ --border-toggletext-border-off: var(--gray-white);
639
+ --border-toggletext-border-off-hover: var(--gray-05);
640
+ --border-toggletext-border-off-pressed: var(--gray-10);
641
+ --border-toggletext-border-on: var(--box-blue-40);
642
+ --border-toggletext-border-on-hover: var(--box-blue-40);
643
+ --border-toggletext-border-on-pressed: var(--box-blue-40);
644
+ --border-toggletext-border-on-ai: var(--brand-box-ai-100);
645
+ --border-toggletext-border-on-ai-hover: var(--brand-box-ai-100);
646
+ --border-toggletext-border-on-ai-pressed: var(--brand-box-ai-100);
647
+ --border-toggletext-border-off-ai: var(--gray-30);
648
+ --border-toggletext-border-off-ai-hover: var(--brand-box-ai-100);
649
+ --border-toggletext-border-off-ai-pressed: var(--brand-box-ai-100);
650
+ --icon-icon-on-light: var(--gray-100);
651
+ --icon-icon-on-light-secondary: var(--gray-65);
652
+ --icon-icon-on-light-tertiary: var(--gray-50);
653
+ --icon-icon-on-dark: var(--gray-white);
654
+ --icon-icon-error-on-light: var(--watermelon-red-110);
655
+ --icon-icon-required-on-light: var(--watermelon-red-110);
656
+ --icon-nav-icon-on-dark: var(--gray-white);
657
+ --icon-nav-icon-on-dark-hover: var(--gray-white);
658
+ --icon-nav-icon-on-dark-selected: var(--gray-white);
659
+ --icon-nav-icon-on-dark-focus: var(--gray-white);
660
+ --icon-nav-icon-on-light: var(--gray-100);
661
+ --icon-nav-icon-on-light-hover: var(--gray-100);
662
+ --icon-nav-icon-on-light-selected: var(--gray-100);
663
+ --icon-nav-icon-on-light-focus: var(--gray-100);
664
+ --icon-cta-icon: var(--gray-65);
665
+ --icon-cta-icon-hover: var(--gray-100);
666
+ --icon-cta-icon-pressed: var(--gray-100);
667
+ --icon-cta-icon-utility: var(--gray-80);
668
+ --icon-cta-icon-utility-hover: var(--gray-black);
669
+ --icon-cta-icon-utility-pressed: var(--gray-black);
670
+ --icon-cta-icon-on-color: var(--gray-black);
671
+ --icon-cta-icon-on-color-hover: var(--gray-black);
672
+ --icon-cta-icon-on-color-pressed: var(--gray-black);
673
+ --icon-icon-blue: var(--box-blue-100);
674
+ --icon-icon-destructive-on-light: var(--watermelon-red-110);
675
+ --outline-focus-on-light: var(--light-blue-100);
676
+ --outline-focus-on-dark: var(--gray-white);
677
+ --text-text-on-light: var(--gray-100);
678
+ --text-text-on-light-secondary: var(--gray-65);
679
+ --text-text-on-light-tertiary: var(--gray-50);
680
+ --text-text-on-light-secondary-hover: var(--gray-80);
681
+ --text-text-on-dark: var(--gray-white);
682
+ --text-text-brand-on-color: var(--gray-white);
683
+ --text-cta-link: var(--box-blue-100);
684
+ --text-cta-link-hover: var(--light-blue-120);
685
+ --text-cta-link-pressed: var(--light-blue-100);
686
+ --text-nav-text-on-dark: var(--gray-white);
687
+ --text-nav-text-on-dark-hover: var(--gray-white);
688
+ --text-nav-text-on-dark-selected: var(--gray-white);
689
+ --text-nav-text-on-dark-focus: var(--gray-white);
690
+ --text-nav-text-on-light: var(--gray-white);
691
+ --text-nav-text-on-light-hover: var(--gray-white);
692
+ --text-nav-text-on-light-selected: var(--gray-white);
693
+ --text-nav-text-on-light-focus: var(--gray-white);
694
+ --text-text-error-on-light: var(--watermelon-red-110);
695
+ --text-cta-link-secondary: var(--gray-65);
696
+ --text-cta-link-secondary-pressed: var(--gray-65);
697
+ --text-cta-link-secondary-hover: var(--gray-65);
698
+ --text-cta-promo: var(--grimace-100);
699
+ --text-cta-link-disabled: var(--box-blue-30);
700
+ --text-text-on-light-disabled: var(--gray-30);
701
+ --text-toggletext-text: var(--box-blue-120);
702
+ --text-text-destructive-on-light: var(--watermelon-red-110);
703
+ --overlay-sidepanel-overlay: var(--black-opacity-50);
704
+ --overlay-modal-overlay: var(--black-opacity-80);
705
+ --brand-box-primary: var(--box-blue-100);
706
+ --brand-box-secondary: var(--box-blue-20);
707
+ --brand-box-tertiary: var(--box-blue-10);
708
+ --brand-forms-primary: var(--green-light-120);
709
+ --brand-forms-secondary: var(--green-light-20);
710
+ --brand-forms-tertiary: var(--green-light-10);
711
+ --brand-docgen-primary: var(--grimace-120);
712
+ --brand-docgen-secondary: var(--grimace-20);
713
+ --brand-docgen-tertiary: var(--grimace-10);
714
+ --brand-sign-primary: var(--dark-blue-100);
715
+ --brand-sign-secondary: var(--dark-blue-20);
716
+ --brand-sign-tertiary: var(--dark-blue-10);
717
+ --title-subtitle-font-family: var(--font-families-sans);
718
+ --title-subtitle-font-weight: var(--font-weights-bold);
719
+ --title-small-font-family: var(--font-families-sans);
720
+ --title-small-font-weight: var(--font-weights-bold);
721
+ --title-medium-font-family: var(--font-families-sans);
722
+ --title-medium-font-weight: var(--font-weights-bold);
723
+ --title-large-font-family: var(--font-families-sans);
724
+ --title-large-font-weight: var(--font-weights-bold);
725
+ --title-x-large-font-family: var(--font-families-sans);
726
+ --title-x-large-font-weight: var(--font-weights-bold);
727
+ --title-mondo-font-family: var(--font-families-sans);
728
+ --title-mondo-font-weight: var(--font-weights-black);
729
+ --body-large-font-family: var(--font-families-sans);
730
+ --body-large-font-weight: var(--font-weights-regular);
731
+ --body-large-bold-font-family: var(--font-families-sans);
732
+ --body-large-bold-font-weight: var(--font-weights-bold);
733
+ --body-default-bold-font-family: var(--font-families-sans);
734
+ --body-default-bold-font-weight: var(--font-weights-bold);
735
+ --body-default-semibold-font-family: var(--font-families-sans);
736
+ --body-default-semibold-font-weight: var(--font-weights-semibold);
737
+ --body-default-font-family: var(--font-families-sans);
738
+ --body-default-font-weight: var(--font-weights-regular);
739
+ --caption-bold-font-family: var(--font-families-sans);
740
+ --caption-bold-font-weight: var(--font-weights-bold);
741
+ --caption-default-font-family: var(--font-families-sans);
742
+ --caption-default-font-weight: var(--font-weights-regular);
743
+ --label-bold-font-family: var(--font-families-sans);
744
+ --label-bold-font-weight: var(--font-weights-bold);
745
+ --label-default-font-family: var(--font-families-sans);
746
+ --label-default-font-weight: var(--font-weights-regular);
747
+ --link-default-font-family: var(--font-families-sans);
748
+ --link-default-font-weight: var(--font-weights-regular);
749
+ --link-default-text-decoration: var(--text-decoration-underline);
750
+ --motion-transition-slide-in: var(--animation-duration-4) var(--animation-easing-ease-base);
751
+ --notification-default-font-family: var(--font-families-sans);
752
+ --notification-default-font-weight: var(--font-weights-bold);
754
753
  --border-divider-border-brand: var(--border-divider-border);
755
754
  }