@bcc-code/design-tokens 5.0.2 → 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 +109 -97
  2. package/build/bcc/css/dark.css +66 -54
  3. package/build/bcc/css/light.css +66 -54
  4. package/build/bcc/css/tailwind-auto.css +109 -97
  5. package/build/bcc/css/tailwind-dark.css +66 -54
  6. package/build/bcc/css/tailwind-light.css +66 -54
  7. package/build/bcc/js/dark.d.ts +16 -2
  8. package/build/bcc/js/dark.js +25 -11
  9. package/build/bcc/js/light.d.ts +16 -2
  10. package/build/bcc/js/light.js +26 -12
  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/tailwind-dark.css CHANGED
@@ -192,6 +192,7 @@
192
192
  --font-weight-regular: 400;
193
193
  --font-weight-medium: 500;
194
194
  --font-weight-bold: 700;
195
+ --font-weight-semibold: 600;
195
196
  --leading-1: 14px;
196
197
  --leading-2: 16px;
197
198
  --leading-3: 20px;
@@ -211,22 +212,30 @@
211
212
  --text-2xl: 2em; /** 32px */
212
213
  --text-3xl: 2.25rem; /** 36px */
213
214
  --text-4xl: 3rem; /** 48px */
214
- --shadow-overlow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
215
+ --text-5xl: 3.5rem; /** 56px */
216
+ --shadow-oveflow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
215
217
  --shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
216
218
  --shadow-raised: 0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31);
219
+ --color-brand-100: var(--color-bcc-100);
220
+ --color-brand-200: var(--color-bcc-200);
221
+ --color-brand-300: var(--color-bcc-300);
222
+ --color-brand-400: var(--color-bcc-400);
223
+ --color-brand-500: var(--color-bcc-500);
224
+ --color-brand-600: var(--color-bcc-600);
225
+ --color-brand-700: var(--color-bcc-700);
226
+ --color-brand-800: var(--color-bcc-800);
227
+ --color-brand-900: var(--color-bcc-900);
228
+ --color-brand-1000: var(--color-bcc-1000);
217
229
  --color-text-default: var(--color-dark-neutral-1100);
218
230
  --color-text-subtle: var(--color-dark-neutral-800);
219
231
  --color-text-subtlest: var(--color-dark-neutral-700);
220
232
  --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
221
- --color-text-selected: var(--color-bcc-400);
222
233
  --color-text-inverse: var(--color-dark-neutral-100);
223
234
  --color-text-success: var(--color-green-300);
224
235
  --color-text-danger: var(--color-red-300);
225
236
  --color-text-information: var(--color-blue-300);
226
237
  --color-text-warning-default: var(--color-yellow-300);
227
238
  --color-text-warning-inverse: var(--color-dark-neutral-100);
228
- --color-text-brand-default: var(--color-bcc-400);
229
- --color-text-brand-bold: var(--color-bcc-300);
230
239
  --color-text-accent-gray-default: var(--color-dark-neutral-800);
231
240
  --color-text-accent-gray-bold: var(--color-dark-neutral-1100);
232
241
  --color-text-accent-blue-default: var(--color-blue-300);
@@ -255,15 +264,12 @@
255
264
  --color-icon-subtle: var(--color-dark-neutral-800);
256
265
  --color-icon-subtlest: var(--color-dark-neutral-700);
257
266
  --color-icon-disabled: var(--color-dark-neutral-alpha-400-a);
258
- --color-icon-selected: var(--color-bcc-400);
259
267
  --color-icon-inverse: var(--color-dark-neutral-100);
260
268
  --color-icon-success: var(--color-green-500);
261
269
  --color-icon-danger: var(--color-red-500);
262
270
  --color-icon-information: var(--color-blue-500);
263
271
  --color-icon-warning-default: var(--color-yellow-300);
264
272
  --color-icon-warning-inverse: var(--color-dark-neutral-100);
265
- --color-icon-brand-default: var(--color-bcc-400);
266
- --color-icon-brand-bold: var(--color-bcc-300);
267
273
  --color-icon-accent-gray-default: var(--color-dark-neutral-600);
268
274
  --color-icon-accent-gray-bold: var(--color-dark-neutral-700);
269
275
  --color-icon-accent-blue-default: var(--color-blue-500);
@@ -287,7 +293,6 @@
287
293
  --color-border-default: var(--color-dark-neutral-alpha-400-a);
288
294
  --color-border-bold: var(--color-dark-neutral-600);
289
295
  --color-border-disabled: var(--color-dark-neutral-alpha-200-a);
290
- --color-border-selected: var(--color-bcc-400);
291
296
  --color-border-focused: var(--color-dark-neutral-800);
292
297
  --color-border-inverse: var(--color-dark-neutral-0);
293
298
  --color-border-input: var(--color-dark-neutral-500);
@@ -295,7 +300,6 @@
295
300
  --color-border-information: var(--color-blue-500);
296
301
  --color-border-danger: var(--color-red-500);
297
302
  --color-border-warning: var(--color-yellow-500);
298
- --color-border-brand: var(--color-bcc-400);
299
303
  --color-border-accent-gray: var(--color-dark-neutral-600);
300
304
  --color-border-accent-blue: var(--color-blue-500);
301
305
  --color-border-accent-teal: var(--color-teal-500);
@@ -307,12 +311,6 @@
307
311
  --color-border-accent-magenta: var(--color-magenta-500);
308
312
  --color-border-accent-purple: var(--color-purple-500);
309
313
  --color-background-disabled-default: var(--color-dark-neutral-alpha-300-a);
310
- --color-background-selected-default: var(--color-bcc-1000); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
311
- --color-background-selected-hovered: var(--color-bcc-900); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
312
- --color-background-selected-pressed: var(--color-bcc-800); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
313
- --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. */
314
- --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. */
315
- --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. */
316
314
  --color-background-input-default: var(--color-dark-neutral-200); /** Use for background of form UI elements, such as text fields, checkboxes, and radio buttons. */
317
315
  --color-background-input-hovered: var(--color-dark-neutral-300); /** Hovered state for color.background.input */
318
316
  --color-background-input-pressed: var(--color-dark-neutral-200); /** Pressed state for color.background.input */
@@ -340,36 +338,21 @@
340
338
  --color-background-warning-bolder-default: var(--color-yellow-400);
341
339
  --color-background-warning-bolder-hover: var(--color-yellow-300);
342
340
  --color-background-warning-bolder-pressed: var(--color-yellow-200);
343
- --color-background-brand-subtlest-default: var(--color-bcc-1000);
344
- --color-background-brand-subtlest-hover: var(--color-bcc-900);
345
- --color-background-brand-subtlest-pressed: var(--color-bcc-800);
346
- --color-background-brand-subtler-default: var(--color-bcc-900);
347
- --color-background-brand-subtler-hover: var(--color-bcc-800);
348
- --color-background-brand-subtler-pressed: var(--color-bcc-700);
349
- --color-background-brand-subtle-default: var(--color-bcc-700);
350
- --color-background-brand-subtle-hover: var(--color-bcc-600);
351
- --color-background-brand-subtle-pressed: var(--color-bcc-500);
352
- --color-background-brand-bolder-default: var(--color-bcc-400);
353
- --color-background-brand-bolder-hover: var(--color-bcc-300);
354
- --color-background-brand-bolder-pressed: var(--color-bcc-200);
355
- --color-background-brand-boldest-default: var(--color-bcc-100);
356
- --color-background-brand-boldest-hover: var(--color-bcc-200);
357
- --color-background-brand-boldest-pressed: var(--color-bcc-300);
358
- --color-background-neutral-default: var(--color-dark-neutral-alpha-300-a);
359
- --color-background-neutral-hover: var(--color-dark-neutral-alpha-400-a);
360
- --color-background-neutral-pressed: var(--color-dark-neutral-alpha-500-a);
361
- --color-background-neutral-subtle-default: var(--color-dark-neutral-alpha-200-a);
362
- --color-background-neutral-subtle-hover: var(--color-dark-neutral-alpha-300-a);
363
- --color-background-neutral-subtle-pressed: var(--color-dark-neutral-alpha-400-a);
364
- --color-background-neutral-subtler-default: var(--color-dark-neutral-alpha-100-a);
365
- --color-background-neutral-subtler-hover: var(--color-dark-neutral-alpha-200-a);
366
- --color-background-neutral-subtler-pressed: var(--color-dark-neutral-alpha-300-a);
367
- --color-background-neutral-subtlest-default: var(--color-transparent);
368
- --color-background-neutral-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
369
- --color-background-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
370
- --color-background-neutral-bold-default: var(--color-dark-neutral-alpha-500-a);
371
- --color-background-neutral-bold-hover: var(--color-dark-neutral-alpha-400-a);
372
- --color-background-neutral-bold-pressed: var(--color-dark-neutral-alpha-300-a);
341
+ --color-background-alpha-default: var(--color-dark-neutral-alpha-300-a);
342
+ --color-background-alpha-hover: var(--color-dark-neutral-alpha-400-a);
343
+ --color-background-alpha-pressed: var(--color-dark-neutral-alpha-500-a);
344
+ --color-background-alpha-subtle-default: var(--color-dark-neutral-alpha-200-a);
345
+ --color-background-alpha-subtle-hover: var(--color-dark-neutral-alpha-300-a);
346
+ --color-background-alpha-subtle-pressed: var(--color-dark-neutral-alpha-400-a);
347
+ --color-background-alpha-subtler-default: var(--color-dark-neutral-alpha-100-a);
348
+ --color-background-alpha-subtler-hover: var(--color-dark-neutral-alpha-200-a);
349
+ --color-background-alpha-subtler-pressed: var(--color-dark-neutral-alpha-300-a);
350
+ --color-background-alpha-subtlest-default: var(--color-transparent);
351
+ --color-background-alpha-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
352
+ --color-background-alpha-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
353
+ --color-background-alpha-bold-default: var(--color-dark-neutral-alpha-500-a);
354
+ --color-background-alpha-bold-hover: var(--color-dark-neutral-alpha-400-a);
355
+ --color-background-alpha-bold-pressed: var(--color-dark-neutral-alpha-300-a);
373
356
  --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
374
357
  --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
375
358
  --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
@@ -516,18 +499,47 @@
516
499
  --icon-size-md: var(--spacing-300); /** 24px */
517
500
  --icon-size-lg: var(--spacing-400); /** 32px */
518
501
  --icon-size-xl: var(--spacing-600); /** 48px */
519
- --heading-xs: var(--font-weight-bold) var(--text-xs)/var(--leading-1) var(--font-archivo);
520
- --heading-sm: var(--font-weight-bold) var(--text-sm)/var(--leading-2) var(--font-archivo);
521
- --heading-md: var(--font-weight-bold) var(--text-md)/var(--leading-3) var(--font-archivo);
522
- --heading-lg: var(--font-weight-bold) var(--text-lg)/var(--leading-4) var(--font-archivo);
523
- --heading-xl: var(--font-weight-bold) var(--text-xl)/var(--leading-5) var(--font-archivo);
524
- --heading-2xl: var(--font-weight-bold) var(--text-2xl)/var(--leading-6) var(--font-archivo);
525
- --heading-3xl: var(--font-weight-bold) var(--text-3xl)/var(--leading-8) var(--font-archivo);
526
- --heading-4xl: var(--font-weight-bold) var(--text-4xl)/var(--leading-9) var(--font-archivo);
527
- --heading-5xl: var(--font-weight-bold) var(--text-4xl)/var(--leading-10) var(--font-archivo);
502
+ --heading-xs: var(--font-weight-semibold) var(--text-xs)/var(--leading-1) var(--font-archivo);
503
+ --heading-sm: var(--font-weight-semibold) var(--text-sm)/var(--leading-2) var(--font-archivo);
504
+ --heading-md: var(--font-weight-semibold) var(--text-md)/var(--leading-3) var(--font-archivo);
505
+ --heading-lg: var(--font-weight-semibold) var(--text-lg)/var(--leading-4) var(--font-archivo);
506
+ --heading-xl: var(--font-weight-semibold) var(--text-xl)/var(--leading-5) var(--font-archivo);
507
+ --heading-2xl: var(--font-weight-semibold) var(--text-2xl)/var(--leading-6) var(--font-archivo);
508
+ --heading-3xl: var(--font-weight-semibold) var(--text-3xl)/var(--leading-8) var(--font-archivo);
509
+ --heading-4xl: var(--font-weight-semibold) var(--text-4xl)/var(--leading-9) var(--font-archivo);
510
+ --heading-5xl: var(--font-weight-semibold) var(--text-5xl)/var(--leading-10) var(--font-archivo);
528
511
  --body-sm: var(--font-weight-regular) var(--text-xs)/var(--leading-2) var(--font-archivo);
529
512
  --body-md: var(--font-weight-regular) var(--text-sm)/var(--leading-3) var(--font-archivo);
530
513
  --body-lg: var(--font-weight-regular) var(--text-md)/var(--leading-4) var(--font-archivo);
514
+ --color-text-selected: var(--color-brand-400);
515
+ --color-text-brand-default: var(--color-brand-400);
516
+ --color-text-brand-bold: var(--color-brand-300);
517
+ --color-icon-selected: var(--color-brand-400);
518
+ --color-icon-brand-default: var(--color-brand-400);
519
+ --color-icon-brand-bold: var(--color-brand-300);
520
+ --color-border-selected: var(--color-brand-400);
521
+ --color-border-brand: var(--color-brand-400);
522
+ --color-background-selected-default: var(--color-brand-1000); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
523
+ --color-background-selected-hovered: var(--color-brand-900); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
524
+ --color-background-selected-pressed: var(--color-brand-800); /** 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-400); /** 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-300); /** 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-200); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
528
+ --color-background-brand-subtlest-default: var(--color-brand-1000);
529
+ --color-background-brand-subtlest-hover: var(--color-brand-900);
530
+ --color-background-brand-subtlest-pressed: var(--color-brand-800);
531
+ --color-background-brand-subtler-default: var(--color-brand-900);
532
+ --color-background-brand-subtler-hover: var(--color-brand-800);
533
+ --color-background-brand-subtler-pressed: var(--color-brand-700);
534
+ --color-background-brand-subtle-default: var(--color-brand-700);
535
+ --color-background-brand-subtle-hover: var(--color-brand-600);
536
+ --color-background-brand-subtle-pressed: var(--color-brand-500);
537
+ --color-background-brand-bolder-default: var(--color-brand-400);
538
+ --color-background-brand-bolder-hover: var(--color-brand-300);
539
+ --color-background-brand-bolder-pressed: var(--color-brand-200);
540
+ --color-background-brand-boldest-default: var(--color-brand-100);
541
+ --color-background-brand-boldest-hover: var(--color-brand-200);
542
+ --color-background-brand-boldest-pressed: var(--color-brand-300);
531
543
  }
532
544
 
533
545
  @utility text-* {
package/build/bcc/css/tailwind-light.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
  --leading-1: 14px;
195
196
  --leading-2: 16px;
196
197
  --leading-3: 20px;
@@ -210,22 +211,30 @@
210
211
  --text-2xl: 2em; /** 32px */
211
212
  --text-3xl: 2.25rem; /** 36px */
212
213
  --text-4xl: 3rem; /** 48px */
213
- --shadow-overlow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
214
+ --text-5xl: 3.5rem; /** 56px */
215
+ --shadow-oveflow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
214
216
  --shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
215
217
  --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);
@@ -286,7 +292,6 @@
286
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(--spacing-300); /** 24px */
517
500
  --icon-size-lg: var(--spacing-400); /** 32px */
518
501
  --icon-size-xl: var(--spacing-600); /** 48px */
519
- --heading-xs: var(--font-weight-bold) var(--text-xs)/var(--leading-1) var(--font-archivo);
520
- --heading-sm: var(--font-weight-bold) var(--text-sm)/var(--leading-2) var(--font-archivo);
521
- --heading-md: var(--font-weight-bold) var(--text-md)/var(--leading-3) var(--font-archivo);
522
- --heading-lg: var(--font-weight-bold) var(--text-lg)/var(--leading-4) var(--font-archivo);
523
- --heading-xl: var(--font-weight-bold) var(--text-xl)/var(--leading-5) var(--font-archivo);
524
- --heading-2xl: var(--font-weight-bold) var(--text-2xl)/var(--leading-6) var(--font-archivo);
525
- --heading-3xl: var(--font-weight-bold) var(--text-3xl)/var(--leading-8) var(--font-archivo);
526
- --heading-4xl: var(--font-weight-bold) var(--text-4xl)/var(--leading-9) var(--font-archivo);
527
- --heading-5xl: var(--font-weight-bold) var(--text-4xl)/var(--leading-10) var(--font-archivo);
502
+ --heading-xs: var(--font-weight-semibold) var(--text-xs)/var(--leading-1) var(--font-archivo);
503
+ --heading-sm: var(--font-weight-semibold) var(--text-sm)/var(--leading-2) var(--font-archivo);
504
+ --heading-md: var(--font-weight-semibold) var(--text-md)/var(--leading-3) var(--font-archivo);
505
+ --heading-lg: var(--font-weight-semibold) var(--text-lg)/var(--leading-4) var(--font-archivo);
506
+ --heading-xl: var(--font-weight-semibold) var(--text-xl)/var(--leading-5) var(--font-archivo);
507
+ --heading-2xl: var(--font-weight-semibold) var(--text-2xl)/var(--leading-6) var(--font-archivo);
508
+ --heading-3xl: var(--font-weight-semibold) var(--text-3xl)/var(--leading-8) var(--font-archivo);
509
+ --heading-4xl: var(--font-weight-semibold) var(--text-4xl)/var(--leading-9) var(--font-archivo);
510
+ --heading-5xl: var(--font-weight-semibold) var(--text-5xl)/var(--leading-10) var(--font-archivo);
528
511
  --body-sm: var(--font-weight-regular) var(--text-xs)/var(--leading-2) var(--font-archivo);
529
512
  --body-md: var(--font-weight-regular) var(--text-sm)/var(--leading-3) var(--font-archivo);
530
513
  --body-lg: var(--font-weight-regular) var(--text-md)/var(--leading-4) var(--font-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
  @utility text-* {
package/build/bcc/js/dark.d.ts CHANGED
@@ -171,6 +171,18 @@ declare const tokens: {
171
171
  "1000": string;
172
172
  };
173
173
  transparent: string;
174
+ brand: {
175
+ "100": string;
176
+ "200": string;
177
+ "300": string;
178
+ "400": string;
179
+ "500": string;
180
+ "600": string;
181
+ "700": string;
182
+ "800": string;
183
+ "900": string;
184
+ "1000": string;
185
+ };
174
186
  text: {
175
187
  default: string;
176
188
  subtle: string;
@@ -420,7 +432,7 @@ declare const tokens: {
420
432
  pressed: string;
421
433
  };
422
434
  };
423
- neutral: {
435
+ alpha: {
424
436
  default: string;
425
437
  hover: string;
426
438
  pressed: string;
@@ -774,6 +786,7 @@ declare const tokens: {
774
786
  regular: number;
775
787
  medium: number;
776
788
  bold: number;
789
+ semibold: number;
777
790
  };
778
791
  "line-height": {
779
792
  "1": string;
@@ -797,6 +810,7 @@ declare const tokens: {
797
810
  "2xl": string;
798
811
  "3xl": string;
799
812
  "4xl": string;
813
+ "5xl": string;
800
814
  };
801
815
  heading: {
802
816
  xs: string;
@@ -816,7 +830,7 @@ declare const tokens: {
816
830
  };
817
831
  elevation: {
818
832
  shadow: {
819
- overlow: string;
833
+ oveflow: string;
820
834
  overlay: string;
821
835
  raised: string;
822
836
  };
package/build/bcc/js/dark.js CHANGED
@@ -171,6 +171,18 @@ export default {
171
171
  1000: "#1d154d",
172
172
  },
173
173
  transparent: "rgba(0, 0, 0, 0)",
174
+ brand: {
175
+ 100: "#f0fcfa",
176
+ 200: "#d2eeeb",
177
+ 300: "#a0cec8",
178
+ 400: "#6fb5ad",
179
+ 500: "#3e9f97",
180
+ 600: "#1d7f78",
181
+ 700: "#0c625c",
182
+ 800: "#014d49",
183
+ 900: "#0b3633",
184
+ 1000: "#012320",
185
+ },
174
186
  text: {
175
187
  default: "#e2e3e4",
176
188
  subtle: "#a9abaf",
@@ -420,7 +432,7 @@ export default {
420
432
  pressed: "#a0cec8",
421
433
  },
422
434
  },
423
- neutral: {
435
+ alpha: {
424
436
  default: "rgba(227, 228, 242, 0.12)",
425
437
  hover: "rgba(229, 233, 246, 0.25)",
426
438
  pressed: "rgba(233, 240, 251, 0.36)",
@@ -774,6 +786,7 @@ export default {
774
786
  regular: 400,
775
787
  medium: 500,
776
788
  bold: 700,
789
+ semibold: 600,
777
790
  },
778
791
  "line-height": {
779
792
  1: "14px",
@@ -797,17 +810,18 @@ export default {
797
810
  "2xl": "2em",
798
811
  "3xl": "2.25rem",
799
812
  "4xl": "3rem",
813
+ "5xl": "3.5rem",
800
814
  },
801
815
  heading: {
802
- xs: "700 0.75rem/14px Archivo",
803
- sm: "700 0.875rem/16px Archivo",
804
- md: "700 1rem/20px Archivo",
805
- lg: "700 1.25rem/24px Archivo",
806
- xl: "700 1.5rem/28px Archivo",
807
- "2xl": "700 2em/32px Archivo",
808
- "3xl": "700 2.25rem/40px Archivo",
809
- "4xl": "700 3rem/56px Archivo",
810
- "5xl": "700 3rem/64px Archivo",
816
+ xs: "600 0.75rem/14px Archivo",
817
+ sm: "600 0.875rem/16px Archivo",
818
+ md: "600 1rem/20px Archivo",
819
+ lg: "600 1.25rem/24px Archivo",
820
+ xl: "600 1.5rem/28px Archivo",
821
+ "2xl": "600 2em/32px Archivo",
822
+ "3xl": "600 2.25rem/40px Archivo",
823
+ "4xl": "600 3rem/56px Archivo",
824
+ "5xl": "600 3.5rem/64px Archivo",
811
825
  },
812
826
  body: {
813
827
  sm: "400 0.75rem/16px Archivo",
@@ -816,7 +830,7 @@ export default {
816
830
  },
817
831
  elevation: {
818
832
  shadow: {
819
- overlow: "0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12)",
833
+ oveflow: "0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12)",
820
834
  overlay:
821
835
  "0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31)",
822
836
  raised: "0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31)",
package/build/bcc/js/light.d.ts CHANGED
@@ -171,6 +171,18 @@ declare const tokens: {
171
171
  "1000": string;
172
172
  };
173
173
  transparent: string;
174
+ brand: {
175
+ "100": string;
176
+ "200": string;
177
+ "300": string;
178
+ "400": string;
179
+ "500": string;
180
+ "600": string;
181
+ "700": string;
182
+ "800": string;
183
+ "900": string;
184
+ "1000": string;
185
+ };
174
186
  text: {
175
187
  default: string;
176
188
  subtle: string;
@@ -420,7 +432,7 @@ declare const tokens: {
420
432
  pressed: string;
421
433
  };
422
434
  };
423
- neutral: {
435
+ alpha: {
424
436
  default: string;
425
437
  hover: string;
426
438
  pressed: string;
@@ -774,6 +786,7 @@ declare const tokens: {
774
786
  regular: number;
775
787
  medium: number;
776
788
  bold: number;
789
+ semibold: number;
777
790
  };
778
791
  "line-height": {
779
792
  "1": string;
@@ -797,6 +810,7 @@ declare const tokens: {
797
810
  "2xl": string;
798
811
  "3xl": string;
799
812
  "4xl": string;
813
+ "5xl": string;
800
814
  };
801
815
  heading: {
802
816
  xs: string;
@@ -816,7 +830,7 @@ declare const tokens: {
816
830
  };
817
831
  elevation: {
818
832
  shadow: {
819
- overlow: string;
833
+ oveflow: string;
820
834
  overlay: string;
821
835
  raised: string;
822
836
  };
package/build/bcc/js/light.js CHANGED
@@ -171,12 +171,24 @@ export default {
171
171
  1000: "#1d154d",
172
172
  },
173
173
  transparent: "rgba(0, 0, 0, 0)",
174
+ brand: {
175
+ 100: "#f0fcfa",
176
+ 200: "#d2eeeb",
177
+ 300: "#a0cec8",
178
+ 400: "#6fb5ad",
179
+ 500: "#3e9f97",
180
+ 600: "#1d7f78",
181
+ 700: "#0c625c",
182
+ 800: "#014d49",
183
+ 900: "#0b3633",
184
+ 1000: "#012320",
185
+ },
174
186
  text: {
175
187
  default: "#292a2e",
176
188
  subtle: "#505258",
177
189
  subtlest: "#6b6e76",
178
190
  disabled: "rgba(8, 15, 33, 0.29)",
179
- selected: "#014d49",
191
+ selected: "#0c625c",
180
192
  inverse: "#ffffff",
181
193
  success: "#094c3b",
182
194
  information: "#273c8f",
@@ -420,7 +432,7 @@ export default {
420
432
  pressed: "#014d49",
421
433
  },
422
434
  },
423
- neutral: {
435
+ alpha: {
424
436
  default: "rgba(11, 18, 14, 0.14)",
425
437
  hover: "rgba(8, 15, 33, 0.29)",
426
438
  pressed: "rgba(5, 12, 31, 0.46)",
@@ -774,6 +786,7 @@ export default {
774
786
  regular: 400,
775
787
  medium: 500,
776
788
  bold: 700,
789
+ semibold: 600,
777
790
  },
778
791
  "line-height": {
779
792
  1: "14px",
@@ -797,17 +810,18 @@ export default {
797
810
  "2xl": "2em",
798
811
  "3xl": "2.25rem",
799
812
  "4xl": "3rem",
813
+ "5xl": "3.5rem",
800
814
  },
801
815
  heading: {
802
- xs: "700 0.75rem/14px Archivo",
803
- sm: "700 0.875rem/16px Archivo",
804
- md: "700 1rem/20px Archivo",
805
- lg: "700 1.25rem/24px Archivo",
806
- xl: "700 1.5rem/28px Archivo",
807
- "2xl": "700 2em/32px Archivo",
808
- "3xl": "700 2.25rem/40px Archivo",
809
- "4xl": "700 3rem/56px Archivo",
810
- "5xl": "700 3rem/64px Archivo",
816
+ xs: "600 0.75rem/14px Archivo",
817
+ sm: "600 0.875rem/16px Archivo",
818
+ md: "600 1rem/20px Archivo",
819
+ lg: "600 1.25rem/24px Archivo",
820
+ xl: "600 1.5rem/28px Archivo",
821
+ "2xl": "600 2em/32px Archivo",
822
+ "3xl": "600 2.25rem/40px Archivo",
823
+ "4xl": "600 3rem/56px Archivo",
824
+ "5xl": "600 3.5rem/64px Archivo",
811
825
  },
812
826
  body: {
813
827
  sm: "400 0.75rem/16px Archivo",
@@ -816,7 +830,7 @@ export default {
816
830
  },
817
831
  elevation: {
818
832
  shadow: {
819
- overlow: "0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12)",
833
+ oveflow: "0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12)",
820
834
  overlay:
821
835
  "0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31)",
822
836
  raised: "0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31)",