@bcc-code/design-tokens 3.0.12 → 3.0.16

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 (19) hide show
  1. package/README.md +65 -161
  2. package/build/bcc/css/auto.css +155 -52
  3. package/build/bcc/css/dark.css +141 -48
  4. package/build/bcc/css/light.css +45 -36
  5. package/build/bcc/css/tailwind-auto.css +155 -52
  6. package/build/bcc/css/tailwind-dark.css +141 -48
  7. package/build/bcc/css/tailwind-light.css +45 -36
  8. package/build/bcc/js/dark.js +213 -51
  9. package/build/bcc/js/light.js +57 -41
  10. package/build/primevue/component-dark.js +2390 -0
  11. package/build/primevue/component-light.js +2390 -0
  12. package/build/primevue/primitive.js +554 -0
  13. package/build/primevue/semantic-dark.js +345 -0
  14. package/build/primevue/semantic-light.js +345 -0
  15. package/config/primevue-overrides.css +179 -0
  16. package/config/primevue.config.d.ts +6 -2
  17. package/config/primevue.config.js +987 -23
  18. package/package.json +5 -6
  19. package/build/bcc/js/aura-bcc-config.js +0 -1148
package/build/bcc/css/dark.css CHANGED
@@ -5,7 +5,6 @@
5
5
 
6
6
  @media (prefers-color-scheme: dark) {
7
7
  :root {
8
- --font-family-archivo: Archivo;
9
8
  --color-neutral-0: #ffffff;
10
9
  --color-neutral-100: #f7f8f9;
11
10
  --color-neutral-200: #f1f2f4;
@@ -37,7 +36,6 @@
37
36
  --color-dark-neutral-900: #b6c2cf;
38
37
  --color-dark-neutral-1000: #c7d1db;
39
38
  --color-dark-neutral-1100: #dee4ea;
40
- --color-dark-neutral-negative-100: #101214;
41
39
  --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
42
40
  --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
43
41
  --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
@@ -149,7 +147,6 @@
149
147
  --color-background-inverse-subtle-default: rgba(255, 255, 255, 0.16); /** Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards. */
150
148
  --color-background-inverse-subtle-hovered: rgba(255, 255, 255, 0.24); /** Use for the hovered state of color.background.inverse.subtle */
151
149
  --color-background-inverse-subtle-pressed: rgba(255, 255, 255, 0.32); /** Use for the pressed state of color.background.inverse.subtle */
152
- --color-background-accent-neutral-subtle-default: rgba(0, 0, 0, 0);
153
150
  --color-blanket-default: rgba(16, 18, 20, 0.6); /** Use for the screen overlay that appears with modal dialogs */
154
151
  --color-blanket-selected: rgba(29, 122, 252, 0.08); /** Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements */
155
152
  --color-blanket-danger: rgba(227, 73, 53, 0.08); /** Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements */
@@ -179,26 +176,24 @@
179
176
  --space-negative-300: -1.5rem; /** -24px */
180
177
  --space-negative-400: -2rem; /** -32px */
181
178
  --border-radius-none: 0; /** 0 */
182
- --border-radius-xs: 0.125rem; /** 2px */
183
- --border-radius-sm: 0.25rem; /** 4px */
179
+ --border-radius-2xs: 0.125rem; /** 2px */
180
+ --border-radius-xs: 0.25rem; /** 4px */
181
+ --border-radius-sm: 0.375rem; /** 6px */
184
182
  --border-radius-md: 0.5rem; /** 8px */
185
- --border-radius-lg: 1rem; /** 16px */
186
- --border-radius-xl: 1.5rem; /** 24px */
187
- --border-radius-2xl: 2rem; /** 32px */
188
- --border-radius-3xl: 3rem; /** 48px */
183
+ --border-radius-lg: 0.75rem; /** 12px */
184
+ --border-radius-xl: 1rem; /** 16px */
185
+ --border-radius-2xl: 1.5rem; /** 24px */
186
+ --border-radius-3xl: 2rem; /** 32 */
187
+ --border-radius-4xl: 3rem; /** 48px */
189
188
  --border-radius-full: 999px;
190
- --icon-size-xs: 1rem; /** 16px */
191
- --icon-size-sm: 1.25rem; /** 20px */
192
- --icon-size-md: 1.5rem; /** 24px */
193
- --icon-size-lg: 2rem; /** 32px */
194
- --icon-size-xl: 3rem; /** 48px */
195
189
  --border-width-0: 0;
196
190
  --border-width-1: 1px;
197
191
  --border-width-2: 2px;
192
+ --font-family-archivo: Archivo;
198
193
  --font-weight-regular: 400;
199
194
  --font-weight-medium: 500;
200
195
  --font-weight-bold: 700;
201
- --line-height-1: 12px;
196
+ --line-height-1: 14px;
202
197
  --line-height-2: 16px;
203
198
  --line-height-3: 20px;
204
199
  --line-height-4: 24px;
@@ -206,9 +201,9 @@
206
201
  --line-height-6: 32px;
207
202
  --line-height-7: 36px;
208
203
  --line-height-8: 40px;
209
- --line-height-9: 52px;
204
+ --line-height-9: 56px;
210
205
  --line-height-10: 64px;
211
- --line-height-none: 1;
206
+ --line-height-none: normal;
212
207
  --font-size-xs: 0.75rem; /** 12px */
213
208
  --font-size-sm: 0.875rem; /** 14px */
214
209
  --font-size-md: 1rem; /** 16px */
@@ -217,11 +212,9 @@
217
212
  --font-size-2xl: 2em; /** 32px */
218
213
  --font-size-3xl: 2.25rem; /** 36px */
219
214
  --font-size-4xl: 3rem; /** 48px */
220
- --elevation-shadow-overflow-default: 0 0 12px 0 rgba(3, 4, 4, 0.56), 0 0 1px 0 rgba(3, 4, 4, 0.5); /** Use to create a shadow when content scrolls under other content. */
221
- --elevation-shadow-overflow-perimeter: inset 0 0 0 0 #091e421f;
222
- --elevation-shadow-overflow-spread: inset 0 0 0 0 #091e4229; /** Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow. */
223
- --elevation-shadow-overlay: 0 8px 12px 0 rgba(9, 30, 66, 0.15), 0 0 1px 0 1px rgba(9, 30, 66, 0.31); /** Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay Also use for the box shadow of raised cards in a dragged state. */
224
- --elevation-shadow-raised: 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31); /** Use for the box shadow of raised card elements */
215
+ --elevation-shadow-overlow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
216
+ --elevation-shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
217
+ --elevation-shadow-raised: 0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31);
225
218
  --color-text-default: var(--color-dark-neutral-900);
226
219
  --color-text-subtle: var(--color-dark-neutral-800);
227
220
  --color-text-subtlest: var(--color-dark-neutral-700);
@@ -321,7 +314,6 @@
321
314
  --color-background-selected-bold-default: var(--color-bcc-400); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
322
315
  --color-background-selected-bold-hovered: var(--color-bcc-300); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
323
316
  --color-background-selected-bold-pressed: var(--color-bcc-200); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
324
- --color-background-inverse-default: var(--color-neutral-0);
325
317
  --color-background-input-default: var(--color-dark-neutral-200); /** Use for background of form UI elements, such as text fields, checkboxes, and radio buttons. */
326
318
  --color-background-input-hovered: var(--color-dark-neutral-300); /** Hovered state for color.background.input */
327
319
  --color-background-input-pressed: var(--color-dark-neutral-200); /** Pressed state for color.background.input */
@@ -361,14 +353,105 @@
361
353
  --color-background-brand-bolder-default: var(--color-bcc-400);
362
354
  --color-background-brand-bolder-hover: var(--color-bcc-300);
363
355
  --color-background-brand-bolder-pressed: var(--color-bcc-200);
364
- --color-background-accent-neutral-subtlest-default: var(--color-dark-neutral-alpha-300-a);
365
- --color-background-accent-neutral-subtlest-hover: var(--color-dark-neutral-alpha-400-a);
366
- --color-background-accent-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-200-a);
367
- --color-background-accent-neutral-subtle-hover: var(--color-dark-neutral-alpha-200-a);
368
- --color-background-accent-neutral-subtle-pressed: var(--color-dark-neutral-alpha-300-a);
369
- --color-background-accent-neutral-bolder-default: var(--color-red-400);
370
- --color-background-accent-neutral-bolder-hover: var(--color-red-300);
371
- --color-background-accent-neutral-bolder-pressed: var(--color-red-200);
356
+ --color-background-brand-boldest-default: var(--color-bcc-100);
357
+ --color-background-brand-boldest-hover: var(--color-bcc-200);
358
+ --color-background-brand-boldest-pressed: var(--color-bcc-300);
359
+ --color-background-neutral-default: var(--color-dark-neutral-alpha-300-a);
360
+ --color-background-neutral-hover: var(--color-dark-neutral-alpha-400-a);
361
+ --color-background-neutral-pressed: var(--color-dark-neutral-alpha-500-a);
362
+ --color-background-neutral-subtle-default: var(--color-dark-neutral-alpha-200-a);
363
+ --color-background-neutral-subtle-hover: var(--color-dark-neutral-alpha-300-a);
364
+ --color-background-neutral-subtle-pressed: var(--color-dark-neutral-alpha-400-a);
365
+ --color-background-neutral-subtler-default: var(--color-dark-neutral-alpha-100-a);
366
+ --color-background-neutral-subtler-hover: var(--color-dark-neutral-alpha-200-a);
367
+ --color-background-neutral-subtler-pressed: var(--color-dark-neutral-alpha-300-a);
368
+ --color-background-neutral-subtlest-default: var(--color-transparent);
369
+ --color-background-neutral-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
370
+ --color-background-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
371
+ --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
372
+ --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
373
+ --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
374
+ --color-background-accent-blue-subtler-default: var(--color-blue-900);
375
+ --color-background-accent-blue-subtler-hover: var(--color-blue-800);
376
+ --color-background-accent-blue-subtler-pressed: var(--color-blue-700);
377
+ --color-background-accent-blue-subtle-default: var(--color-blue-700);
378
+ --color-background-accent-blue-subtle-hover: var(--color-blue-600);
379
+ --color-background-accent-blue-subtle-pressed: var(--color-blue-500);
380
+ --color-background-accent-blue-bolder-default: var(--color-blue-400);
381
+ --color-background-accent-blue-bolder-hover: var(--color-blue-300);
382
+ --color-background-accent-blue-bolder-pressed: var(--color-blue-200);
383
+ --color-background-accent-teal-subtlest-default: var(--color-teal-1000);
384
+ --color-background-accent-teal-subtlest-hover: var(--color-teal-900);
385
+ --color-background-accent-teal-subtlest-pressed: var(--color-teal-800);
386
+ --color-background-accent-teal-subtler-default: var(--color-teal-900);
387
+ --color-background-accent-teal-subtler-hover: var(--color-teal-800);
388
+ --color-background-accent-teal-subtler-pressed: var(--color-teal-700);
389
+ --color-background-accent-teal-subtle-default: var(--color-teal-700);
390
+ --color-background-accent-teal-subtle-hover: var(--color-teal-600);
391
+ --color-background-accent-teal-subtle-pressed: var(--color-teal-500);
392
+ --color-background-accent-teal-bolder-default: var(--color-teal-400);
393
+ --color-background-accent-teal-bolder-hover: var(--color-teal-300);
394
+ --color-background-accent-teal-bolder-pressed: var(--color-teal-200);
395
+ --color-background-accent-green-subtlest-default: var(--color-green-1000);
396
+ --color-background-accent-green-subtlest-hover: var(--color-green-900);
397
+ --color-background-accent-green-subtlest-pressed: var(--color-green-800);
398
+ --color-background-accent-green-subtler-default: var(--color-green-900);
399
+ --color-background-accent-green-subtler-hover: var(--color-green-800);
400
+ --color-background-accent-green-subtler-pressed: var(--color-green-700);
401
+ --color-background-accent-green-subtle-default: var(--color-green-700);
402
+ --color-background-accent-green-subtle-hover: var(--color-green-600);
403
+ --color-background-accent-green-subtle-pressed: var(--color-green-500);
404
+ --color-background-accent-green-bolder-default: var(--color-green-400);
405
+ --color-background-accent-green-bolder-hover: var(--color-green-300);
406
+ --color-background-accent-green-bolder-pressed: var(--color-green-200);
407
+ --color-background-accent-brown-subtlest-default: var(--color-brown-1000);
408
+ --color-background-accent-brown-subtlest-hover: var(--color-brown-900);
409
+ --color-background-accent-brown-subtlest-pressed: var(--color-brown-800);
410
+ --color-background-accent-brown-subtler-default: var(--color-brown-900);
411
+ --color-background-accent-brown-subtler-hover: var(--color-brown-800);
412
+ --color-background-accent-brown-subtler-pressed: var(--color-brown-700);
413
+ --color-background-accent-brown-subtle-default: var(--color-brown-700);
414
+ --color-background-accent-brown-subtle-hover: var(--color-brown-600);
415
+ --color-background-accent-brown-subtle-pressed: var(--color-brown-500);
416
+ --color-background-accent-brown-bolder-default: var(--color-brown-400);
417
+ --color-background-accent-brown-bolder-hover: var(--color-brown-300);
418
+ --color-background-accent-brown-bolder-pressed: var(--color-brown-200);
419
+ --color-background-accent-yellow-subtlest-default: var(--color-yellow-1000);
420
+ --color-background-accent-yellow-subtlest-hover: var(--color-yellow-900);
421
+ --color-background-accent-yellow-subtlest-pressed: var(--color-yellow-800);
422
+ --color-background-accent-yellow-subtler-default: var(--color-yellow-900);
423
+ --color-background-accent-yellow-subtler-hover: var(--color-yellow-800);
424
+ --color-background-accent-yellow-subtler-pressed: var(--color-yellow-700);
425
+ --color-background-accent-yellow-subtle-default: var(--color-yellow-700);
426
+ --color-background-accent-yellow-subtle-hover: var(--color-yellow-600);
427
+ --color-background-accent-yellow-subtle-pressed: var(--color-yellow-500);
428
+ --color-background-accent-yellow-bolder-default: var(--color-yellow-400);
429
+ --color-background-accent-yellow-bolder-hover: var(--color-yellow-300);
430
+ --color-background-accent-yellow-bolder-pressed: var(--color-yellow-200);
431
+ --color-background-accent-orange-subtlest-default: var(--color-orange-1000);
432
+ --color-background-accent-orange-subtlest-hover: var(--color-orange-900);
433
+ --color-background-accent-orange-subtlest-pressed: var(--color-orange-800);
434
+ --color-background-accent-orange-subtler-default: var(--color-orange-900);
435
+ --color-background-accent-orange-subtler-hover: var(--color-orange-800);
436
+ --color-background-accent-orange-subtler-pressed: var(--color-orange-700);
437
+ --color-background-accent-orange-subtle-default: var(--color-orange-700);
438
+ --color-background-accent-orange-subtle-hover: var(--color-orange-600);
439
+ --color-background-accent-orange-subtle-pressed: var(--color-orange-500);
440
+ --color-background-accent-orange-bolder-default: var(--color-orange-400);
441
+ --color-background-accent-orange-bolder-hover: var(--color-orange-300);
442
+ --color-background-accent-orange-bolder-pressed: var(--color-orange-200);
443
+ --color-background-accent-red-subtlest-default: var(--color-red-1000);
444
+ --color-background-accent-red-subtlest-hover: var(--color-red-900);
445
+ --color-background-accent-red-subtlest-pressed: var(--color-red-800);
446
+ --color-background-accent-red-subtler-default: var(--color-red-900);
447
+ --color-background-accent-red-subtler-hover: var(--color-red-800);
448
+ --color-background-accent-red-subtler-pressed: var(--color-red-700);
449
+ --color-background-accent-red-subtle-default: var(--color-red-700);
450
+ --color-background-accent-red-subtle-hover: var(--color-red-600);
451
+ --color-background-accent-red-subtle-pressed: var(--color-red-500);
452
+ --color-background-accent-red-bolder-default: var(--color-red-400);
453
+ --color-background-accent-red-bolder-hover: var(--color-red-300);
454
+ --color-background-accent-red-bolder-pressed: var(--color-red-200);
372
455
  --color-background-accent-purple-subtlest-default: var(--color-purple-1000);
373
456
  --color-background-accent-purple-subtlest-hover: var(--color-purple-900);
374
457
  --color-background-accent-purple-subtlest-pressed: var(--color-purple-800);
@@ -393,17 +476,20 @@
393
476
  --color-background-accent-magenta-bolder-default: var(--color-magenta-400);
394
477
  --color-background-accent-magenta-bolder-hover: var(--color-magenta-300);
395
478
  --color-background-accent-magenta-bolder-pressed: var(--color-magenta-200);
396
- --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-200);
397
- --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-300);
398
- --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-400);
399
- --color-background-accent-gray-subtler-default: var(--color-dark-neutral-400);
400
- --color-background-accent-gray-subtler-hover: var(--color-dark-neutral-500);
401
- --color-background-accent-gray-subtler-pressed: var(--color-dark-neutral-600);
402
- --color-background-accent-gray-subtle-default: var(--color-dark-neutral-500);
403
- --color-background-accent-gray-subtle-hover: var(--color-dark-neutral-400);
404
- --color-background-accent-gray-subtle-pressed: var(--color-dark-neutral-300);
479
+ --color-background-accent-gray-default: var(--color-dark-neutral-300);
480
+ --color-background-accent-gray-hover: var(--color-dark-neutral-400);
481
+ --color-background-accent-gray-pressed: var(--color-dark-neutral-500);
482
+ --color-background-accent-gray-subtle-default: var(--color-dark-neutral-200);
483
+ --color-background-accent-gray-subtle-hover: var(--color-dark-neutral-300);
484
+ --color-background-accent-gray-subtle-pressed: var(--color-dark-neutral-400);
485
+ --color-background-accent-gray-subtler-default: var(--color-dark-neutral-100);
486
+ --color-background-accent-gray-subtler-hover: var(--color-dark-neutral-200);
487
+ --color-background-accent-gray-subtler-pressed: var(--color-dark-neutral-300);
488
+ --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-0);
489
+ --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-100);
490
+ --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-200);
405
491
  --color-background-accent-gray-bolder-default: var(--color-dark-neutral-700);
406
- --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-900);
492
+ --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-800);
407
493
  --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-900);
408
494
  --color-skeleton-default: var(--color-dark-neutral-alpha-200-a); /** Use for skeleton loading states */
409
495
  --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a); /** Use for the pulse or shimmer effect in skeleton loading states */
@@ -417,13 +503,20 @@
417
503
  --color-elevation-surface-raised-hovered: var(--color-dark-neutral-300);
418
504
  --color-elevation-surface-raised-pressed: var(--color-dark-neutral-400);
419
505
  --color-elevation-surface-sunken-default: var(--color-dark-neutral-0);
420
- --heading-xs: var(--font-weight-medium) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
421
- --heading-sm: var(--font-weight-medium) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
422
- --heading-md: var(--font-weight-medium) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
423
- --heading-lg: var(--font-weight-medium) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
424
- --heading-xl: var(--font-weight-medium) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
425
- --heading-2xl: var(--font-weight-medium) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
426
- --heading-3xl: var(--font-weight-medium) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
506
+ --icon-size-xs: var(--space-200); /** 16px */
507
+ --icon-size-sm: var(--space-250); /** 20px */
508
+ --icon-size-md: var(--space-300); /** 24px */
509
+ --icon-size-lg: var(--space-400); /** 32px */
510
+ --icon-size-xl: var(--space-600); /** 48px */
511
+ --heading-xs: var(--font-weight-bold) var(--font-size-xs)/var(--line-height-1) var(--font-family-archivo);
512
+ --heading-sm: var(--font-weight-bold) var(--font-size-sm)/var(--line-height-2) var(--font-family-archivo);
513
+ --heading-md: var(--font-weight-bold) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
514
+ --heading-lg: var(--font-weight-bold) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
515
+ --heading-xl: var(--font-weight-bold) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
516
+ --heading-2xl: var(--font-weight-bold) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
517
+ --heading-3xl: var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
518
+ --heading-4xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
519
+ --heading-5xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-10) var(--font-family-archivo);
427
520
  --body-sm: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
428
521
  --body-md: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-3) var(--font-family-archivo);
429
522
  --body-lg: var(--font-weight-regular) var(--font-size-md)/var(--line-height-4) var(--font-family-archivo);
package/build/bcc/css/light.css CHANGED
@@ -4,7 +4,6 @@
4
4
 
5
5
 
6
6
  :root {
7
- --font-family-archivo: Archivo;
8
7
  --color-neutral-0: #ffffff;
9
8
  --color-neutral-100: #f7f8f9;
10
9
  --color-neutral-200: #f1f2f4;
@@ -36,7 +35,6 @@
36
35
  --color-dark-neutral-900: #b6c2cf;
37
36
  --color-dark-neutral-1000: #c7d1db;
38
37
  --color-dark-neutral-1100: #dee4ea;
39
- --color-dark-neutral-negative-100: #101214;
40
38
  --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
41
39
  --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
42
40
  --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
@@ -176,26 +174,24 @@
176
174
  --space-negative-300: -1.5rem; /** -24px */
177
175
  --space-negative-400: -2rem; /** -32px */
178
176
  --border-radius-none: 0; /** 0 */
179
- --border-radius-xs: 0.125rem; /** 2px */
180
- --border-radius-sm: 0.25rem; /** 4px */
177
+ --border-radius-2xs: 0.125rem; /** 2px */
178
+ --border-radius-xs: 0.25rem; /** 4px */
179
+ --border-radius-sm: 0.375rem; /** 6px */
181
180
  --border-radius-md: 0.5rem; /** 8px */
182
- --border-radius-lg: 1rem; /** 16px */
183
- --border-radius-xl: 1.5rem; /** 24px */
184
- --border-radius-2xl: 2rem; /** 32px */
185
- --border-radius-3xl: 3rem; /** 48px */
181
+ --border-radius-lg: 0.75rem; /** 12px */
182
+ --border-radius-xl: 1rem; /** 16px */
183
+ --border-radius-2xl: 1.5rem; /** 24px */
184
+ --border-radius-3xl: 2rem; /** 32 */
185
+ --border-radius-4xl: 3rem; /** 48px */
186
186
  --border-radius-full: 999px;
187
- --icon-size-xs: 1rem; /** 16px */
188
- --icon-size-sm: 1.25rem; /** 20px */
189
- --icon-size-md: 1.5rem; /** 24px */
190
- --icon-size-lg: 2rem; /** 32px */
191
- --icon-size-xl: 3rem; /** 48px */
192
187
  --border-width-0: 0;
193
188
  --border-width-1: 1px;
194
189
  --border-width-2: 2px;
190
+ --font-family-archivo: Archivo;
195
191
  --font-weight-regular: 400;
196
192
  --font-weight-medium: 500;
197
193
  --font-weight-bold: 700;
198
- --line-height-1: 12px;
194
+ --line-height-1: 14px;
199
195
  --line-height-2: 16px;
200
196
  --line-height-3: 20px;
201
197
  --line-height-4: 24px;
@@ -203,9 +199,9 @@
203
199
  --line-height-6: 32px;
204
200
  --line-height-7: 36px;
205
201
  --line-height-8: 40px;
206
- --line-height-9: 52px;
202
+ --line-height-9: 56px;
207
203
  --line-height-10: 64px;
208
- --line-height-none: 1;
204
+ --line-height-none: normal;
209
205
  --font-size-xs: 0.75rem; /** 12px */
210
206
  --font-size-sm: 0.875rem; /** 14px */
211
207
  --font-size-md: 1rem; /** 16px */
@@ -214,6 +210,9 @@
214
210
  --font-size-2xl: 2em; /** 32px */
215
211
  --font-size-3xl: 2.25rem; /** 36px */
216
212
  --font-size-4xl: 3rem; /** 48px */
213
+ --elevation-shadow-overlow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
214
+ --elevation-shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
215
+ --elevation-shadow-raised: 0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31);
217
216
  --color-text-default: var(--color-neutral-1000);
218
217
  --color-text-subtle: var(--color-neutral-800);
219
218
  --color-text-subtlest: var(--color-neutral-700);
@@ -355,18 +354,18 @@
355
354
  --color-background-brand-boldest-default: var(--color-bcc-1000);
356
355
  --color-background-brand-boldest-hover: var(--color-bcc-900);
357
356
  --color-background-brand-boldest-pressed: var(--color-bcc-800);
358
- --color-background-accent-neutral-default: var(--color-neutral-alpha-300-a);
359
- --color-background-accent-neutral-hover: var(--color-neutral-alpha-400-a);
360
- --color-background-accent-neutral-pressed: var(--color-neutral-alpha-500-a);
361
- --color-background-accent-neutral-subtle-default: var(--color-neutral-alpha-200-a);
362
- --color-background-accent-neutral-subtle-hover: var(--color-neutral-alpha-300-a);
363
- --color-background-accent-neutral-subtle-pressed: var(--color-neutral-alpha-400-a);
364
- --color-background-accent-neutral-subtler-default: var(--color-neutral-alpha-100-a);
365
- --color-background-accent-neutral-subtler-hover: var(--color-neutral-alpha-200-a);
366
- --color-background-accent-neutral-subtler-pressed: var(--color-neutral-alpha-300-a);
367
- --color-background-accent-neutral-subtlest-default: var(--color-transparent);
368
- --color-background-accent-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
369
- --color-background-accent-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
357
+ --color-background-neutral-default: var(--color-neutral-alpha-300-a);
358
+ --color-background-neutral-hover: var(--color-neutral-alpha-400-a);
359
+ --color-background-neutral-pressed: var(--color-neutral-alpha-500-a);
360
+ --color-background-neutral-subtle-default: var(--color-neutral-alpha-200-a);
361
+ --color-background-neutral-subtle-hover: var(--color-neutral-alpha-300-a);
362
+ --color-background-neutral-subtle-pressed: var(--color-neutral-alpha-400-a);
363
+ --color-background-neutral-subtler-default: var(--color-neutral-alpha-100-a);
364
+ --color-background-neutral-subtler-hover: var(--color-neutral-alpha-200-a);
365
+ --color-background-neutral-subtler-pressed: var(--color-neutral-alpha-300-a);
366
+ --color-background-neutral-subtlest-default: var(--color-transparent);
367
+ --color-background-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
368
+ --color-background-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
370
369
  --color-background-accent-blue-subtle-default: var(--color-blue-400);
371
370
  --color-background-accent-blue-subtle-hover: var(--color-blue-300);
372
371
  --color-background-accent-blue-subtle-pressed: var(--color-blue-200);
@@ -441,7 +440,10 @@
441
440
  --color-background-accent-orange-bolder-pressed: var(--color-orange-900);
442
441
  --color-background-accent-red-subtle-default: var(--color-red-400);
443
442
  --color-background-accent-red-subtle-hover: var(--color-red-300);
444
- --color-background-accent-red-subtle-pressed: var(--color-red-400);
443
+ --color-background-accent-red-subtle-pressed: var(--color-red-200);
444
+ --color-background-accent-red-subtler-default: var(--color-red-200);
445
+ --color-background-accent-red-subtler-hover: var(--color-red-300);
446
+ --color-background-accent-red-subtler-pressed: var(--color-red-400);
445
447
  --color-background-accent-red-subtlest-default: var(--color-red-100);
446
448
  --color-background-accent-red-subtlest-hover: var(--color-red-200);
447
449
  --color-background-accent-red-subtlest-pressed: var(--color-red-300);
@@ -500,13 +502,20 @@
500
502
  --color-elevation-surface-raised-hovered: var(--color-neutral-200);
501
503
  --color-elevation-surface-raised-pressed: var(--color-neutral-300);
502
504
  --color-elevation-surface-sunken-default: var(--color-neutral-100);
503
- --heading-xs: var(--font-weight-medium) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
504
- --heading-sm: var(--font-weight-medium) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
505
- --heading-md: var(--font-weight-medium) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
506
- --heading-lg: var(--font-weight-medium) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
507
- --heading-xl: var(--font-weight-medium) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
508
- --heading-2xl: var(--font-weight-medium) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
509
- --heading-3xl: var(--font-weight-medium) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
505
+ --icon-size-xs: var(--space-200); /** 16px */
506
+ --icon-size-sm: var(--space-250); /** 20px */
507
+ --icon-size-md: var(--space-300); /** 24px */
508
+ --icon-size-lg: var(--space-400); /** 32px */
509
+ --icon-size-xl: var(--space-600); /** 48px */
510
+ --heading-xs: var(--font-weight-bold) var(--font-size-xs)/var(--line-height-1) var(--font-family-archivo);
511
+ --heading-sm: var(--font-weight-bold) var(--font-size-sm)/var(--line-height-2) var(--font-family-archivo);
512
+ --heading-md: var(--font-weight-bold) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
513
+ --heading-lg: var(--font-weight-bold) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
514
+ --heading-xl: var(--font-weight-bold) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
515
+ --heading-2xl: var(--font-weight-bold) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
516
+ --heading-3xl: var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
517
+ --heading-4xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
518
+ --heading-5xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-10) var(--font-family-archivo);
510
519
  --body-sm: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
511
520
  --body-md: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-3) var(--font-family-archivo);
512
521
  --body-lg: var(--font-weight-regular) var(--font-size-md)/var(--line-height-4) var(--font-family-archivo);