@bcc-code/design-tokens 5.0.2 → 5.1.0

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