@bcc-code/design-tokens 5.0.1 → 5.0.3

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 (20) hide show
  1. package/build/bcc/css/auto.css +111 -99
  2. package/build/bcc/css/dark.css +67 -55
  3. package/build/bcc/css/light.css +67 -55
  4. package/build/bcc/css/tailwind-auto.css +111 -99
  5. package/build/bcc/css/tailwind-dark.css +67 -55
  6. package/build/bcc/css/tailwind-light.css +67 -55
  7. package/build/bcc/js/dark.d.ts +16 -2
  8. package/build/bcc/js/dark.js +26 -12
  9. package/build/bcc/js/light.d.ts +16 -2
  10. package/build/bcc/js/light.js +27 -13
  11. package/{config/primevue.config.d.ts → build/primevue/config.d.ts} +11 -11
  12. package/build/primevue/config.js +3647 -0
  13. package/package.json +4 -7
  14. package/build/primevue/component-dark.js +0 -2390
  15. package/build/primevue/component-light.js +0 -2390
  16. package/build/primevue/primitive.js +0 -554
  17. package/build/primevue/semantic-dark.js +0 -368
  18. package/build/primevue/semantic-light.js +0 -368
  19. package/config/primevue.config.js +0 -987
  20. /package/{config/primevue-overrides.css → build/primevue/overrides.css} +0 -0
package/build/bcc/css/auto.css CHANGED
@@ -191,6 +191,7 @@
191
191
  --font-weight-regular: 400;
192
192
  --font-weight-medium: 500;
193
193
  --font-weight-bold: 700;
194
+ --font-weight-semibold: 600;
194
195
  --line-height-1: 14px;
195
196
  --line-height-2: 16px;
196
197
  --line-height-3: 20px;
@@ -210,22 +211,30 @@
210
211
  --font-size-2xl: 2em; /** 32px */
211
212
  --font-size-3xl: 2.25rem; /** 36px */
212
213
  --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
+ --font-size-5xl: 3.5rem; /** 56px */
215
+ --elevation-shadow-oveflow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
214
216
  --elevation-shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
215
217
  --elevation-shadow-raised: 0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31);
218
+ --color-brand-100: var(--color-bcc-100);
219
+ --color-brand-200: var(--color-bcc-200);
220
+ --color-brand-300: var(--color-bcc-300);
221
+ --color-brand-400: var(--color-bcc-400);
222
+ --color-brand-500: var(--color-bcc-500);
223
+ --color-brand-600: var(--color-bcc-600);
224
+ --color-brand-700: var(--color-bcc-700);
225
+ --color-brand-800: var(--color-bcc-800);
226
+ --color-brand-900: var(--color-bcc-900);
227
+ --color-brand-1000: var(--color-bcc-1000);
216
228
  --color-text-default: var(--color-neutral-1000);
217
229
  --color-text-subtle: var(--color-neutral-800);
218
230
  --color-text-subtlest: var(--color-neutral-700);
219
231
  --color-text-disabled: var(--color-neutral-alpha-400-a);
220
- --color-text-selected: var(--color-bcc-800);
221
232
  --color-text-inverse: var(--color-neutral-0);
222
233
  --color-text-success: var(--color-green-800);
223
234
  --color-text-information: var(--color-blue-800);
224
235
  --color-text-danger: var(--color-red-800);
225
236
  --color-text-warning-default: var(--color-yellow-800);
226
237
  --color-text-warning-inverse: var(--color-yellow-900);
227
- --color-text-brand-default: var(--color-bcc-800);
228
- --color-text-brand-bold: var(--color-bcc-900);
229
238
  --color-text-accent-gray-default: var(--color-neutral-800);
230
239
  --color-text-accent-gray-bold: var(--color-neutral-1100);
231
240
  --color-text-accent-blue-default: var(--color-blue-800);
@@ -254,15 +263,12 @@
254
263
  --color-icon-subtle: var(--color-neutral-800);
255
264
  --color-icon-subtlest: var(--color-neutral-700);
256
265
  --color-icon-disabled: var(--color-neutral-alpha-400-a);
257
- --color-icon-selected: var(--color-bcc-700);
258
266
  --color-icon-inverse: var(--color-neutral-0);
259
267
  --color-icon-success: var(--color-green-800);
260
268
  --color-icon-information: var(--color-blue-800);
261
269
  --color-icon-danger: var(--color-red-800);
262
270
  --color-icon-warning-default: var(--color-yellow-800);
263
271
  --color-icon-warning-inverse: var(--color-yellow-900);
264
- --color-icon-brand-default: var(--color-bcc-800);
265
- --color-icon-brand-bold: var(--color-bcc-900);
266
272
  --color-icon-accent-gray-default: var(--color-neutral-800);
267
273
  --color-icon-accent-gray-bold: var(--color-neutral-1100);
268
274
  --color-icon-accent-blue-default: var(--color-blue-800);
@@ -283,10 +289,9 @@
283
289
  --color-icon-accent-magenta-bold: var(--color-magenta-900);
284
290
  --color-icon-accent-purple-default: var(--color-purple-800);
285
291
  --color-icon-accent-purple-bold: var(--color-purple-900);
286
- --color-border-default: var(--color-neutral-400);
292
+ --color-border-default: var(--color-neutral-alpha-300-a);
287
293
  --color-border-bold: var(--color-neutral-600);
288
294
  --color-border-disabled: var(--color-neutral-alpha-200-a);
289
- --color-border-selected: var(--color-bcc-700);
290
295
  --color-border-focused: var(--color-neutral-800);
291
296
  --color-border-inverse: var(--color-neutral-0);
292
297
  --color-border-input: var(--color-neutral-500);
@@ -294,7 +299,6 @@
294
299
  --color-border-information: var(--color-blue-600);
295
300
  --color-border-danger: var(--color-red-600);
296
301
  --color-border-warning: var(--color-orange-600);
297
- --color-border-brand: var(--color-bcc-700);
298
302
  --color-border-accent-gray: var(--color-neutral-600);
299
303
  --color-border-accent-blue: var(--color-blue-600);
300
304
  --color-border-accent-teal: var(--color-teal-600);
@@ -306,12 +310,6 @@
306
310
  --color-border-accent-magenta: var(--color-magenta-600);
307
311
  --color-border-accent-purple: var(--color-purple-600);
308
312
  --color-background-disabled-default: var(--color-neutral-alpha-200-a);
309
- --color-background-selected-default: var(--color-bcc-100); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
310
- --color-background-selected-hovered: var(--color-bcc-200); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
311
- --color-background-selected-pressed: var(--color-bcc-300); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
312
- --color-background-selected-bold-default: var(--color-bcc-700); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
313
- --color-background-selected-bold-hovered: var(--color-bcc-800); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
314
- --color-background-selected-bold-pressed: var(--color-bcc-900); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
315
313
  --color-background-input-default: var(--color-neutral-0); /** Use for background of form UI elements, such as text fields, checkboxes, and radio buttons. */
316
314
  --color-background-input-hovered: var(--color-neutral-100); /** Hovered state for color.background.input */
317
315
  --color-background-input-pressed: var(--color-neutral-0); /** Pressed state for color.background.input */
@@ -339,36 +337,21 @@
339
337
  --color-background-warning-bolder-default: var(--color-yellow-300);
340
338
  --color-background-warning-bolder-hover: var(--color-yellow-400);
341
339
  --color-background-warning-bolder-pressed: var(--color-yellow-500);
342
- --color-background-brand-subtle-default: var(--color-bcc-400);
343
- --color-background-brand-subtle-hover: var(--color-bcc-300);
344
- --color-background-brand-subtle-pressed: var(--color-bcc-200);
345
- --color-background-brand-subtler-default: var(--color-bcc-200);
346
- --color-background-brand-subtler-hover: var(--color-bcc-300);
347
- --color-background-brand-subtler-pressed: var(--color-bcc-400);
348
- --color-background-brand-subtlest-default: var(--color-bcc-100);
349
- --color-background-brand-subtlest-hover: var(--color-bcc-200);
350
- --color-background-brand-subtlest-pressed: var(--color-bcc-300);
351
- --color-background-brand-bolder-default: var(--color-bcc-700);
352
- --color-background-brand-bolder-hover: var(--color-bcc-800);
353
- --color-background-brand-bolder-pressed: var(--color-bcc-900);
354
- --color-background-brand-boldest-default: var(--color-bcc-1000);
355
- --color-background-brand-boldest-hover: var(--color-bcc-900);
356
- --color-background-brand-boldest-pressed: var(--color-bcc-800);
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);
369
- --color-background-neutral-bold-default: var(--color-neutral-alpha-500-a);
370
- --color-background-neutral-bold-hover: var(--color-neutral-alpha-400-a);
371
- --color-background-neutral-bold-pressed: var(--color-neutral-alpha-300-a);
340
+ --color-background-alpha-default: var(--color-neutral-alpha-300-a);
341
+ --color-background-alpha-hover: var(--color-neutral-alpha-400-a);
342
+ --color-background-alpha-pressed: var(--color-neutral-alpha-500-a);
343
+ --color-background-alpha-subtle-default: var(--color-neutral-alpha-200-a);
344
+ --color-background-alpha-subtle-hover: var(--color-neutral-alpha-300-a);
345
+ --color-background-alpha-subtle-pressed: var(--color-neutral-alpha-400-a);
346
+ --color-background-alpha-subtler-default: var(--color-neutral-alpha-100-a);
347
+ --color-background-alpha-subtler-hover: var(--color-neutral-alpha-200-a);
348
+ --color-background-alpha-subtler-pressed: var(--color-neutral-alpha-300-a);
349
+ --color-background-alpha-subtlest-default: var(--color-transparent);
350
+ --color-background-alpha-subtlest-hover: var(--color-neutral-alpha-100-a);
351
+ --color-background-alpha-subtlest-pressed: var(--color-neutral-alpha-200-a);
352
+ --color-background-alpha-bold-default: var(--color-neutral-alpha-500-a);
353
+ --color-background-alpha-bold-hover: var(--color-neutral-alpha-400-a);
354
+ --color-background-alpha-bold-pressed: var(--color-neutral-alpha-300-a);
372
355
  --color-background-accent-blue-subtle-default: var(--color-blue-400);
373
356
  --color-background-accent-blue-subtle-hover: var(--color-blue-300);
374
357
  --color-background-accent-blue-subtle-pressed: var(--color-blue-200);
@@ -516,18 +499,47 @@
516
499
  --icon-size-md: var(--space-300); /** 24px */
517
500
  --icon-size-lg: var(--space-400); /** 32px */
518
501
  --icon-size-xl: var(--space-600); /** 48px */
519
- --heading-xs: var(--font-weight-bold) var(--font-size-xs)/var(--line-height-1) var(--font-family-archivo);
520
- --heading-sm: var(--font-weight-bold) var(--font-size-sm)/var(--line-height-2) var(--font-family-archivo);
521
- --heading-md: var(--font-weight-bold) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
522
- --heading-lg: var(--font-weight-bold) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
523
- --heading-xl: var(--font-weight-bold) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
524
- --heading-2xl: var(--font-weight-bold) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
525
- --heading-3xl: var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
526
- --heading-4xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
527
- --heading-5xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-10) var(--font-family-archivo);
502
+ --heading-xs: var(--font-weight-semibold) var(--font-size-xs)/var(--line-height-1) var(--font-family-archivo);
503
+ --heading-sm: var(--font-weight-semibold) var(--font-size-sm)/var(--line-height-2) var(--font-family-archivo);
504
+ --heading-md: var(--font-weight-semibold) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
505
+ --heading-lg: var(--font-weight-semibold) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
506
+ --heading-xl: var(--font-weight-semibold) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
507
+ --heading-2xl: var(--font-weight-semibold) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
508
+ --heading-3xl: var(--font-weight-semibold) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
509
+ --heading-4xl: var(--font-weight-semibold) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
510
+ --heading-5xl: var(--font-weight-semibold) var(--font-size-5xl)/var(--line-height-10) var(--font-family-archivo);
528
511
  --body-sm: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
529
512
  --body-md: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-3) var(--font-family-archivo);
530
513
  --body-lg: var(--font-weight-regular) var(--font-size-md)/var(--line-height-4) var(--font-family-archivo);
514
+ --color-text-selected: var(--color-brand-700);
515
+ --color-text-brand-default: var(--color-brand-800);
516
+ --color-text-brand-bold: var(--color-brand-900);
517
+ --color-icon-selected: var(--color-brand-700);
518
+ --color-icon-brand-default: var(--color-brand-800);
519
+ --color-icon-brand-bold: var(--color-brand-900);
520
+ --color-border-selected: var(--color-brand-700);
521
+ --color-border-brand: var(--color-brand-700);
522
+ --color-background-selected-default: var(--color-brand-100); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
523
+ --color-background-selected-hovered: var(--color-brand-200); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
524
+ --color-background-selected-pressed: var(--color-brand-300); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
525
+ --color-background-selected-bold-default: var(--color-brand-700); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
526
+ --color-background-selected-bold-hovered: var(--color-brand-800); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
527
+ --color-background-selected-bold-pressed: var(--color-brand-900); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
528
+ --color-background-brand-subtle-default: var(--color-brand-400);
529
+ --color-background-brand-subtle-hover: var(--color-brand-300);
530
+ --color-background-brand-subtle-pressed: var(--color-brand-200);
531
+ --color-background-brand-subtler-default: var(--color-brand-200);
532
+ --color-background-brand-subtler-hover: var(--color-brand-300);
533
+ --color-background-brand-subtler-pressed: var(--color-brand-400);
534
+ --color-background-brand-subtlest-default: var(--color-brand-100);
535
+ --color-background-brand-subtlest-hover: var(--color-brand-200);
536
+ --color-background-brand-subtlest-pressed: var(--color-brand-300);
537
+ --color-background-brand-bolder-default: var(--color-brand-700);
538
+ --color-background-brand-bolder-hover: var(--color-brand-800);
539
+ --color-background-brand-bolder-pressed: var(--color-brand-900);
540
+ --color-background-brand-boldest-default: var(--color-brand-1000);
541
+ --color-background-brand-boldest-hover: var(--color-brand-900);
542
+ --color-background-brand-boldest-pressed: var(--color-brand-800);
531
543
  }
532
544
 
533
545
  .dark {
@@ -543,15 +555,12 @@
543
555
  --color-text-subtle: var(--color-dark-neutral-800);
544
556
  --color-text-subtlest: var(--color-dark-neutral-700);
545
557
  --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
546
- --color-text-selected: var(--color-bcc-400);
547
558
  --color-text-inverse: var(--color-dark-neutral-100);
548
559
  --color-text-success: var(--color-green-300);
549
560
  --color-text-danger: var(--color-red-300);
550
561
  --color-text-information: var(--color-blue-300);
551
562
  --color-text-warning-default: var(--color-yellow-300);
552
563
  --color-text-warning-inverse: var(--color-dark-neutral-100);
553
- --color-text-brand-default: var(--color-bcc-400);
554
- --color-text-brand-bold: var(--color-bcc-300);
555
564
  --color-text-accent-gray-default: var(--color-dark-neutral-800);
556
565
  --color-text-accent-gray-bold: var(--color-dark-neutral-1100);
557
566
  --color-text-accent-blue-default: var(--color-blue-300);
@@ -580,15 +589,12 @@
580
589
  --color-icon-subtle: var(--color-dark-neutral-800);
581
590
  --color-icon-subtlest: var(--color-dark-neutral-700);
582
591
  --color-icon-disabled: var(--color-dark-neutral-alpha-400-a);
583
- --color-icon-selected: var(--color-bcc-400);
584
592
  --color-icon-inverse: var(--color-dark-neutral-100);
585
593
  --color-icon-success: var(--color-green-500);
586
594
  --color-icon-danger: var(--color-red-500);
587
595
  --color-icon-information: var(--color-blue-500);
588
596
  --color-icon-warning-default: var(--color-yellow-300);
589
597
  --color-icon-warning-inverse: var(--color-dark-neutral-100);
590
- --color-icon-brand-default: var(--color-bcc-400);
591
- --color-icon-brand-bold: var(--color-bcc-300);
592
598
  --color-icon-accent-gray-default: var(--color-dark-neutral-600);
593
599
  --color-icon-accent-gray-bold: var(--color-dark-neutral-700);
594
600
  --color-icon-accent-blue-default: var(--color-blue-500);
@@ -609,10 +615,9 @@
609
615
  --color-icon-accent-magenta-bold: var(--color-magenta-400);
610
616
  --color-icon-accent-purple-default: var(--color-purple-500);
611
617
  --color-icon-accent-purple-bold: var(--color-purple-400);
612
- --color-border-default: var(--color-dark-neutral-400);
618
+ --color-border-default: var(--color-dark-neutral-alpha-400-a);
613
619
  --color-border-bold: var(--color-dark-neutral-600);
614
620
  --color-border-disabled: var(--color-dark-neutral-alpha-200-a);
615
- --color-border-selected: var(--color-bcc-400);
616
621
  --color-border-focused: var(--color-dark-neutral-800);
617
622
  --color-border-inverse: var(--color-dark-neutral-0);
618
623
  --color-border-input: var(--color-dark-neutral-500);
@@ -620,7 +625,6 @@
620
625
  --color-border-information: var(--color-blue-500);
621
626
  --color-border-danger: var(--color-red-500);
622
627
  --color-border-warning: var(--color-yellow-500);
623
- --color-border-brand: var(--color-bcc-400);
624
628
  --color-border-accent-gray: var(--color-dark-neutral-600);
625
629
  --color-border-accent-blue: var(--color-blue-500);
626
630
  --color-border-accent-teal: var(--color-teal-500);
@@ -632,12 +636,6 @@
632
636
  --color-border-accent-magenta: var(--color-magenta-500);
633
637
  --color-border-accent-purple: var(--color-purple-500);
634
638
  --color-background-disabled-default: var(--color-dark-neutral-alpha-300-a);
635
- --color-background-selected-default: var(--color-bcc-1000);
636
- --color-background-selected-hovered: var(--color-bcc-900);
637
- --color-background-selected-pressed: var(--color-bcc-800);
638
- --color-background-selected-bold-default: var(--color-bcc-400);
639
- --color-background-selected-bold-hovered: var(--color-bcc-300);
640
- --color-background-selected-bold-pressed: var(--color-bcc-200);
641
639
  --color-background-input-default: var(--color-dark-neutral-200);
642
640
  --color-background-input-hovered: var(--color-dark-neutral-300);
643
641
  --color-background-input-pressed: var(--color-dark-neutral-200);
@@ -665,35 +663,20 @@
665
663
  --color-background-warning-bolder-default: var(--color-yellow-400);
666
664
  --color-background-warning-bolder-hover: var(--color-yellow-300);
667
665
  --color-background-warning-bolder-pressed: var(--color-yellow-200);
668
- --color-background-brand-subtlest-default: var(--color-bcc-1000);
669
- --color-background-brand-subtlest-hover: var(--color-bcc-900);
670
- --color-background-brand-subtlest-pressed: var(--color-bcc-800);
671
- --color-background-brand-subtler-default: var(--color-bcc-900);
672
- --color-background-brand-subtler-hover: var(--color-bcc-800);
673
- --color-background-brand-subtler-pressed: var(--color-bcc-700);
674
- --color-background-brand-subtle-default: var(--color-bcc-700);
675
- --color-background-brand-subtle-hover: var(--color-bcc-600);
676
- --color-background-brand-subtle-pressed: var(--color-bcc-500);
677
- --color-background-brand-bolder-default: var(--color-bcc-400);
678
- --color-background-brand-bolder-hover: var(--color-bcc-300);
679
- --color-background-brand-bolder-pressed: var(--color-bcc-200);
680
- --color-background-brand-boldest-default: var(--color-bcc-100);
681
- --color-background-brand-boldest-hover: var(--color-bcc-200);
682
- --color-background-brand-boldest-pressed: var(--color-bcc-300);
683
- --color-background-neutral-default: var(--color-dark-neutral-alpha-300-a);
684
- --color-background-neutral-hover: var(--color-dark-neutral-alpha-400-a);
685
- --color-background-neutral-pressed: var(--color-dark-neutral-alpha-500-a);
686
- --color-background-neutral-subtle-default: var(--color-dark-neutral-alpha-200-a);
687
- --color-background-neutral-subtle-hover: var(--color-dark-neutral-alpha-300-a);
688
- --color-background-neutral-subtle-pressed: var(--color-dark-neutral-alpha-400-a);
689
- --color-background-neutral-subtler-default: var(--color-dark-neutral-alpha-100-a);
690
- --color-background-neutral-subtler-hover: var(--color-dark-neutral-alpha-200-a);
691
- --color-background-neutral-subtler-pressed: var(--color-dark-neutral-alpha-300-a);
692
- --color-background-neutral-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
693
- --color-background-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
694
- --color-background-neutral-bold-default: var(--color-dark-neutral-alpha-500-a);
695
- --color-background-neutral-bold-hover: var(--color-dark-neutral-alpha-400-a);
696
- --color-background-neutral-bold-pressed: var(--color-dark-neutral-alpha-300-a);
666
+ --color-background-alpha-default: var(--color-dark-neutral-alpha-300-a);
667
+ --color-background-alpha-hover: var(--color-dark-neutral-alpha-400-a);
668
+ --color-background-alpha-pressed: var(--color-dark-neutral-alpha-500-a);
669
+ --color-background-alpha-subtle-default: var(--color-dark-neutral-alpha-200-a);
670
+ --color-background-alpha-subtle-hover: var(--color-dark-neutral-alpha-300-a);
671
+ --color-background-alpha-subtle-pressed: var(--color-dark-neutral-alpha-400-a);
672
+ --color-background-alpha-subtler-default: var(--color-dark-neutral-alpha-100-a);
673
+ --color-background-alpha-subtler-hover: var(--color-dark-neutral-alpha-200-a);
674
+ --color-background-alpha-subtler-pressed: var(--color-dark-neutral-alpha-300-a);
675
+ --color-background-alpha-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
676
+ --color-background-alpha-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
677
+ --color-background-alpha-bold-default: var(--color-dark-neutral-alpha-500-a);
678
+ --color-background-alpha-bold-hover: var(--color-dark-neutral-alpha-400-a);
679
+ --color-background-alpha-bold-pressed: var(--color-dark-neutral-alpha-300-a);
697
680
  --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
698
681
  --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
699
682
  --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
@@ -834,4 +817,33 @@
834
817
  --color-elevation-surface-raised-hovered: var(--color-dark-neutral-300);
835
818
  --color-elevation-surface-raised-pressed: var(--color-dark-neutral-400);
836
819
  --color-elevation-surface-sunken-default: var(--color-dark-neutral-0);
820
+ --color-text-selected: var(--color-brand-400);
821
+ --color-text-brand-default: var(--color-brand-400);
822
+ --color-text-brand-bold: var(--color-brand-300);
823
+ --color-icon-selected: var(--color-brand-400);
824
+ --color-icon-brand-default: var(--color-brand-400);
825
+ --color-icon-brand-bold: var(--color-brand-300);
826
+ --color-border-selected: var(--color-brand-400);
827
+ --color-border-brand: var(--color-brand-400);
828
+ --color-background-selected-default: var(--color-brand-1000);
829
+ --color-background-selected-hovered: var(--color-brand-900);
830
+ --color-background-selected-pressed: var(--color-brand-800);
831
+ --color-background-selected-bold-default: var(--color-brand-400);
832
+ --color-background-selected-bold-hovered: var(--color-brand-300);
833
+ --color-background-selected-bold-pressed: var(--color-brand-200);
834
+ --color-background-brand-subtlest-default: var(--color-brand-1000);
835
+ --color-background-brand-subtlest-hover: var(--color-brand-900);
836
+ --color-background-brand-subtlest-pressed: var(--color-brand-800);
837
+ --color-background-brand-subtler-default: var(--color-brand-900);
838
+ --color-background-brand-subtler-hover: var(--color-brand-800);
839
+ --color-background-brand-subtler-pressed: var(--color-brand-700);
840
+ --color-background-brand-subtle-default: var(--color-brand-700);
841
+ --color-background-brand-subtle-hover: var(--color-brand-600);
842
+ --color-background-brand-subtle-pressed: var(--color-brand-500);
843
+ --color-background-brand-bolder-default: var(--color-brand-400);
844
+ --color-background-brand-bolder-hover: var(--color-brand-300);
845
+ --color-background-brand-bolder-pressed: var(--color-brand-200);
846
+ --color-background-brand-boldest-default: var(--color-brand-100);
847
+ --color-background-brand-boldest-hover: var(--color-brand-200);
848
+ --color-background-brand-boldest-pressed: var(--color-brand-300);
837
849
  }
package/build/bcc/css/dark.css CHANGED
@@ -193,6 +193,7 @@
193
193
  --font-weight-regular: 400;
194
194
  --font-weight-medium: 500;
195
195
  --font-weight-bold: 700;
196
+ --font-weight-semibold: 600;
196
197
  --line-height-1: 14px;
197
198
  --line-height-2: 16px;
198
199
  --line-height-3: 20px;
@@ -212,22 +213,30 @@
212
213
  --font-size-2xl: 2em; /** 32px */
213
214
  --font-size-3xl: 2.25rem; /** 36px */
214
215
  --font-size-4xl: 3rem; /** 48px */
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
+ --font-size-5xl: 3.5rem; /** 56px */
217
+ --elevation-shadow-oveflow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
216
218
  --elevation-shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
217
219
  --elevation-shadow-raised: 0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31);
220
+ --color-brand-100: var(--color-bcc-100);
221
+ --color-brand-200: var(--color-bcc-200);
222
+ --color-brand-300: var(--color-bcc-300);
223
+ --color-brand-400: var(--color-bcc-400);
224
+ --color-brand-500: var(--color-bcc-500);
225
+ --color-brand-600: var(--color-bcc-600);
226
+ --color-brand-700: var(--color-bcc-700);
227
+ --color-brand-800: var(--color-bcc-800);
228
+ --color-brand-900: var(--color-bcc-900);
229
+ --color-brand-1000: var(--color-bcc-1000);
218
230
  --color-text-default: var(--color-dark-neutral-1100);
219
231
  --color-text-subtle: var(--color-dark-neutral-800);
220
232
  --color-text-subtlest: var(--color-dark-neutral-700);
221
233
  --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
222
- --color-text-selected: var(--color-bcc-400);
223
234
  --color-text-inverse: var(--color-dark-neutral-100);
224
235
  --color-text-success: var(--color-green-300);
225
236
  --color-text-danger: var(--color-red-300);
226
237
  --color-text-information: var(--color-blue-300);
227
238
  --color-text-warning-default: var(--color-yellow-300);
228
239
  --color-text-warning-inverse: var(--color-dark-neutral-100);
229
- --color-text-brand-default: var(--color-bcc-400);
230
- --color-text-brand-bold: var(--color-bcc-300);
231
240
  --color-text-accent-gray-default: var(--color-dark-neutral-800);
232
241
  --color-text-accent-gray-bold: var(--color-dark-neutral-1100);
233
242
  --color-text-accent-blue-default: var(--color-blue-300);
@@ -256,15 +265,12 @@
256
265
  --color-icon-subtle: var(--color-dark-neutral-800);
257
266
  --color-icon-subtlest: var(--color-dark-neutral-700);
258
267
  --color-icon-disabled: var(--color-dark-neutral-alpha-400-a);
259
- --color-icon-selected: var(--color-bcc-400);
260
268
  --color-icon-inverse: var(--color-dark-neutral-100);
261
269
  --color-icon-success: var(--color-green-500);
262
270
  --color-icon-danger: var(--color-red-500);
263
271
  --color-icon-information: var(--color-blue-500);
264
272
  --color-icon-warning-default: var(--color-yellow-300);
265
273
  --color-icon-warning-inverse: var(--color-dark-neutral-100);
266
- --color-icon-brand-default: var(--color-bcc-400);
267
- --color-icon-brand-bold: var(--color-bcc-300);
268
274
  --color-icon-accent-gray-default: var(--color-dark-neutral-600);
269
275
  --color-icon-accent-gray-bold: var(--color-dark-neutral-700);
270
276
  --color-icon-accent-blue-default: var(--color-blue-500);
@@ -285,10 +291,9 @@
285
291
  --color-icon-accent-magenta-bold: var(--color-magenta-400);
286
292
  --color-icon-accent-purple-default: var(--color-purple-500);
287
293
  --color-icon-accent-purple-bold: var(--color-purple-400);
288
- --color-border-default: var(--color-dark-neutral-400);
294
+ --color-border-default: var(--color-dark-neutral-alpha-400-a);
289
295
  --color-border-bold: var(--color-dark-neutral-600);
290
296
  --color-border-disabled: var(--color-dark-neutral-alpha-200-a);
291
- --color-border-selected: var(--color-bcc-400);
292
297
  --color-border-focused: var(--color-dark-neutral-800);
293
298
  --color-border-inverse: var(--color-dark-neutral-0);
294
299
  --color-border-input: var(--color-dark-neutral-500);
@@ -296,7 +301,6 @@
296
301
  --color-border-information: var(--color-blue-500);
297
302
  --color-border-danger: var(--color-red-500);
298
303
  --color-border-warning: var(--color-yellow-500);
299
- --color-border-brand: var(--color-bcc-400);
300
304
  --color-border-accent-gray: var(--color-dark-neutral-600);
301
305
  --color-border-accent-blue: var(--color-blue-500);
302
306
  --color-border-accent-teal: var(--color-teal-500);
@@ -308,12 +312,6 @@
308
312
  --color-border-accent-magenta: var(--color-magenta-500);
309
313
  --color-border-accent-purple: var(--color-purple-500);
310
314
  --color-background-disabled-default: var(--color-dark-neutral-alpha-300-a);
311
- --color-background-selected-default: var(--color-bcc-1000); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
312
- --color-background-selected-hovered: var(--color-bcc-900); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
313
- --color-background-selected-pressed: var(--color-bcc-800); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
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. */
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. */
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. */
317
315
  --color-background-input-default: var(--color-dark-neutral-200); /** Use for background of form UI elements, such as text fields, checkboxes, and radio buttons. */
318
316
  --color-background-input-hovered: var(--color-dark-neutral-300); /** Hovered state for color.background.input */
319
317
  --color-background-input-pressed: var(--color-dark-neutral-200); /** Pressed state for color.background.input */
@@ -341,36 +339,21 @@
341
339
  --color-background-warning-bolder-default: var(--color-yellow-400);
342
340
  --color-background-warning-bolder-hover: var(--color-yellow-300);
343
341
  --color-background-warning-bolder-pressed: var(--color-yellow-200);
344
- --color-background-brand-subtlest-default: var(--color-bcc-1000);
345
- --color-background-brand-subtlest-hover: var(--color-bcc-900);
346
- --color-background-brand-subtlest-pressed: var(--color-bcc-800);
347
- --color-background-brand-subtler-default: var(--color-bcc-900);
348
- --color-background-brand-subtler-hover: var(--color-bcc-800);
349
- --color-background-brand-subtler-pressed: var(--color-bcc-700);
350
- --color-background-brand-subtle-default: var(--color-bcc-700);
351
- --color-background-brand-subtle-hover: var(--color-bcc-600);
352
- --color-background-brand-subtle-pressed: var(--color-bcc-500);
353
- --color-background-brand-bolder-default: var(--color-bcc-400);
354
- --color-background-brand-bolder-hover: var(--color-bcc-300);
355
- --color-background-brand-bolder-pressed: var(--color-bcc-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-neutral-bold-default: var(--color-dark-neutral-alpha-500-a);
372
- --color-background-neutral-bold-hover: var(--color-dark-neutral-alpha-400-a);
373
- --color-background-neutral-bold-pressed: var(--color-dark-neutral-alpha-300-a);
342
+ --color-background-alpha-default: var(--color-dark-neutral-alpha-300-a);
343
+ --color-background-alpha-hover: var(--color-dark-neutral-alpha-400-a);
344
+ --color-background-alpha-pressed: var(--color-dark-neutral-alpha-500-a);
345
+ --color-background-alpha-subtle-default: var(--color-dark-neutral-alpha-200-a);
346
+ --color-background-alpha-subtle-hover: var(--color-dark-neutral-alpha-300-a);
347
+ --color-background-alpha-subtle-pressed: var(--color-dark-neutral-alpha-400-a);
348
+ --color-background-alpha-subtler-default: var(--color-dark-neutral-alpha-100-a);
349
+ --color-background-alpha-subtler-hover: var(--color-dark-neutral-alpha-200-a);
350
+ --color-background-alpha-subtler-pressed: var(--color-dark-neutral-alpha-300-a);
351
+ --color-background-alpha-subtlest-default: var(--color-transparent);
352
+ --color-background-alpha-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
353
+ --color-background-alpha-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
354
+ --color-background-alpha-bold-default: var(--color-dark-neutral-alpha-500-a);
355
+ --color-background-alpha-bold-hover: var(--color-dark-neutral-alpha-400-a);
356
+ --color-background-alpha-bold-pressed: var(--color-dark-neutral-alpha-300-a);
374
357
  --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
375
358
  --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
376
359
  --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
@@ -517,17 +500,46 @@
517
500
  --icon-size-md: var(--space-300); /** 24px */
518
501
  --icon-size-lg: var(--space-400); /** 32px */
519
502
  --icon-size-xl: var(--space-600); /** 48px */
520
- --heading-xs: var(--font-weight-bold) var(--font-size-xs)/var(--line-height-1) var(--font-family-archivo);
521
- --heading-sm: var(--font-weight-bold) var(--font-size-sm)/var(--line-height-2) var(--font-family-archivo);
522
- --heading-md: var(--font-weight-bold) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
523
- --heading-lg: var(--font-weight-bold) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
524
- --heading-xl: var(--font-weight-bold) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
525
- --heading-2xl: var(--font-weight-bold) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
526
- --heading-3xl: var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
527
- --heading-4xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
528
- --heading-5xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-10) var(--font-family-archivo);
503
+ --heading-xs: var(--font-weight-semibold) var(--font-size-xs)/var(--line-height-1) var(--font-family-archivo);
504
+ --heading-sm: var(--font-weight-semibold) var(--font-size-sm)/var(--line-height-2) var(--font-family-archivo);
505
+ --heading-md: var(--font-weight-semibold) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
506
+ --heading-lg: var(--font-weight-semibold) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
507
+ --heading-xl: var(--font-weight-semibold) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
508
+ --heading-2xl: var(--font-weight-semibold) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
509
+ --heading-3xl: var(--font-weight-semibold) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
510
+ --heading-4xl: var(--font-weight-semibold) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
511
+ --heading-5xl: var(--font-weight-semibold) var(--font-size-5xl)/var(--line-height-10) var(--font-family-archivo);
529
512
  --body-sm: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
530
513
  --body-md: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-3) var(--font-family-archivo);
531
514
  --body-lg: var(--font-weight-regular) var(--font-size-md)/var(--line-height-4) var(--font-family-archivo);
515
+ --color-text-selected: var(--color-brand-400);
516
+ --color-text-brand-default: var(--color-brand-400);
517
+ --color-text-brand-bold: var(--color-brand-300);
518
+ --color-icon-selected: var(--color-brand-400);
519
+ --color-icon-brand-default: var(--color-brand-400);
520
+ --color-icon-brand-bold: var(--color-brand-300);
521
+ --color-border-selected: var(--color-brand-400);
522
+ --color-border-brand: var(--color-brand-400);
523
+ --color-background-selected-default: var(--color-brand-1000); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
524
+ --color-background-selected-hovered: var(--color-brand-900); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
525
+ --color-background-selected-pressed: var(--color-brand-800); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
526
+ --color-background-selected-bold-default: var(--color-brand-400); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
527
+ --color-background-selected-bold-hovered: var(--color-brand-300); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
528
+ --color-background-selected-bold-pressed: var(--color-brand-200); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
529
+ --color-background-brand-subtlest-default: var(--color-brand-1000);
530
+ --color-background-brand-subtlest-hover: var(--color-brand-900);
531
+ --color-background-brand-subtlest-pressed: var(--color-brand-800);
532
+ --color-background-brand-subtler-default: var(--color-brand-900);
533
+ --color-background-brand-subtler-hover: var(--color-brand-800);
534
+ --color-background-brand-subtler-pressed: var(--color-brand-700);
535
+ --color-background-brand-subtle-default: var(--color-brand-700);
536
+ --color-background-brand-subtle-hover: var(--color-brand-600);
537
+ --color-background-brand-subtle-pressed: var(--color-brand-500);
538
+ --color-background-brand-bolder-default: var(--color-brand-400);
539
+ --color-background-brand-bolder-hover: var(--color-brand-300);
540
+ --color-background-brand-bolder-pressed: var(--color-brand-200);
541
+ --color-background-brand-boldest-default: var(--color-brand-100);
542
+ --color-background-brand-boldest-hover: var(--color-brand-200);
543
+ --color-background-brand-boldest-pressed: var(--color-brand-300);
532
544
  }
533
545
  }