@skyux/theme 13.16.4 → 13.17.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.
@@ -68,6 +68,7 @@
68
68
  --bb-color-blue-600: #2b6bd5;
69
69
  --bb-color-blue-700: #2256aa;
70
70
  --bb-color-blue-800: #1a4080;
71
+ --bb-color-blue-850: #16366b;
71
72
  --bb-color-blue-900: #112b55;
72
73
  --bb-color-brand-impact_green: #0cd973;
73
74
  --bb-color-brand-trusted_blue: #004054;
@@ -77,6 +78,7 @@
77
78
  --bb-color-gray-1200: #0f1114;
78
79
  --bb-color-gray-200: #e0e1e2;
79
80
  --bb-color-gray-25: #fbfbfb;
81
+ --bb-color-gray-250: #d5d6d8;
80
82
  --bb-color-gray-300: #c2c4c6;
81
83
  --bb-color-gray-400: #a3a6a9;
82
84
  --bb-color-gray-50: #f4f4f5;
@@ -84,6 +86,7 @@
84
86
  --bb-color-gray-600: #666b70;
85
87
  --bb-color-gray-700: #51555c;
86
88
  --bb-color-gray-800: #3b4047;
89
+ --bb-color-gray-850: #30363d;
87
90
  --bb-color-gray-900: #252b33;
88
91
  --bb-color-green-100: #d8f9e9;
89
92
  --bb-color-green-1000: #033019;
@@ -188,6 +191,7 @@
188
191
  --bb-color-slate-600: #536f9d;
189
192
  --bb-color-slate-700: #42597e;
190
193
  --bb-color-slate-800: #32435e;
194
+ --bb-color-slate-850: #2a384f;
191
195
  --bb-color-slate-900: #212c3f;
192
196
  --bb-color-teal-100: #dcf6f5;
193
197
  --bb-color-teal-1000: #022a28;
@@ -219,6 +223,8 @@
219
223
  --bb-color-yellow-700: #92661e;
220
224
  --bb-color-yellow-800: #6e4d17;
221
225
  --bb-color-yellow-900: #503811;
226
+ --bb-duration-150: 150ms;
227
+ --bb-duration-250: 250ms;
222
228
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
223
229
  --bb-font-blkb_sans-name: BLKB Sans;
224
230
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
@@ -230,6 +236,7 @@
230
236
  --bb-font-size-650: 1.3125rem;
231
237
  --bb-font-size-700: 1.5rem;
232
238
  --bb-font-size-800: 1.6875rem;
239
+ --bb-font-style-bold: 700;
233
240
  --bb-font-style-italic-style: italic;
234
241
  --bb-font-style-italic-weight: 400;
235
242
  --bb-font-style-light: 300;
@@ -246,22 +253,24 @@
246
253
  --bb-font-weight-light: 300;
247
254
  --bb-font-weight-regular: 400;
248
255
  --bb-font-weight-semibold: 600;
249
- --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/bb-logo.png");
250
- --bb-image-select_icon-base-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-base-dark.svg");
251
- --bb-image-select_icon-base-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-base-light.svg");
252
- --bb-image-select_icon-bb-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-bb-dark.svg");
253
- --bb-image-select_icon-bb-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-bb-light.svg");
254
- --bb-image-select_icon-disabled-base-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg");
255
- --bb-image-select_icon-disabled-base-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg");
256
- --bb-image-select_icon-disabled-bb-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg");
257
- --bb-image-select_icon-disabled-bb-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg");
256
+ --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/bb-logo.png");
257
+ --bb-image-select_icon-base-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-base-dark.svg");
258
+ --bb-image-select_icon-base-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-base-light.svg");
259
+ --bb-image-select_icon-bb-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-bb-dark.svg");
260
+ --bb-image-select_icon-bb-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-bb-light.svg");
261
+ --bb-image-select_icon-disabled-base-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg");
262
+ --bb-image-select_icon-disabled-base-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg");
263
+ --bb-image-select_icon-disabled-bb-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg");
264
+ --bb-image-select_icon-disabled-bb-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg");
258
265
  --bb-letter_spacing-normal: normal;
259
266
  --bb-letter_spacing-wider: 0.01rem;
260
267
  --bb-letter_spacing-widest: 0.046875rem;
261
268
  --bb-line_height-200: calc(16/11);
262
269
  --bb-line_height-300: calc(18/13);
263
270
  --bb-line_height-400: calc(20/15);
271
+ --bb-line_height-450: calc(22/15);
264
272
  --bb-line_height-500: calc(24/17);
273
+ --bb-line_height-550: calc(26/17);
265
274
  --bb-line_height-600: calc(28/19);
266
275
  --bb-line_height-650: calc(28/21);
267
276
  --bb-line_height-700: calc(32/24);
@@ -277,6 +286,7 @@
277
286
  --bb-size-fixed-2000: 320px;
278
287
  --bb-size-fixed-25: 4px;
279
288
  --bb-size-fixed-250: 36px;
289
+ --bb-size-fixed-300: 48px;
280
290
  --bb-size-fixed-37: 6px;
281
291
  --bb-size-fixed-4000: 640px;
282
292
  --bb-size-fixed-50: 8px;
@@ -328,6 +338,7 @@
328
338
  --bb-shadow-gray-400: 0 2px 4px -1px rgba(22, 26, 31, 0.2), 0 1px 10px 0 rgba(22, 26, 31, 0.12), 0 4px 5px 0 rgba(22, 26, 31, 0.14);
329
339
  --bb-shadow-gray-50: 0 1px 1px 0 rgba(22, 26, 31, 0.12), 0 1.5px 1px -1px rgba(22, 26, 31, 0.12);
330
340
  --bb-shadow-gray-800: 0 5px 5px -3px rgba(22, 26, 31, 0.2), 0 3px 14px 2px rgba(22, 26, 31, 0.12), 0 8px 10px 1px rgba(22, 26, 31, 0.14);
341
+ --bb-shadow-gray-simple-400: 1px 2px 4px 0 rgba(22, 26, 31, 0.5);
331
342
  --bb-shadow-slate-100: 0 1px 3px 0 rgba(33, 44, 63, 0.2), 0 2px 1px -1px rgba(33, 44, 63, 0.12), 0 1px 1px 0 rgba(33, 44, 63, 0.14);
332
343
  --bb-shadow-slate-1600: 0 8px 10px -5px rgba(33, 44, 63, 0.2), 0 6px 30px 5px rgba(33, 44, 63, 0.12), 0 16px 24px 2px rgba(33, 44, 63, 0.14);
333
344
  --bb-shadow-slate-200: 0 1px 8px 0 rgba(33, 44, 63, 0.2), 0 3px 3px -2px rgba(33, 44, 63, 0.12), 0 3px 4px 0 rgba(33, 44, 63, 0.14);
@@ -336,258 +347,7 @@
336
347
  --bb-shadow-slate-400: 0 2px 4px -1px rgba(33, 44, 63, 0.2), 0 1px 10px 0 rgba(33, 44, 63, 0.12), 0 4px 5px 0 rgba(33, 44, 63, 0.14);
337
348
  --bb-shadow-slate-50: 0 1px 1px 0 rgba(33, 44, 63, 0.12), 0 1.5px 1px -1px rgba(33, 44, 63, 0.12);
338
349
  --bb-shadow-slate-800: 0 5px 5px -3px rgba(33, 44, 63, 0.2), 0 3px 14px 2px rgba(33, 44, 63, 0.12), 0 8px 10px 1px rgba(33, 44, 63, 0.14);
339
- }
340
-
341
- .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
342
- --sky-color-background-action-accent-active: var(--bb-color-gray-600);
343
- --sky-color-background-action-accent-base: var(--bb-color-blue-900);
344
- --sky-color-background-action-accent-focus: var(--bb-color-gray-700);
345
- --sky-color-background-action-accent-hover: var(--bb-color-gray-700);
346
- --sky-color-background-action-danger-active: var(--bb-color-red-600);
347
- --sky-color-background-action-danger-base: var(--bb-color-red-600);
348
- --sky-color-background-action-danger-focus: var(--bb-color-red-600);
349
- --sky-color-background-action-danger-hover: var(--bb-color-red-600);
350
- --sky-color-background-action-input-active: var(--bb-color-transparent);
351
- --sky-color-background-action-input-base: var(--bb-color-blue-900);
352
- --sky-color-background-action-input-focus: var(--bb-color-blue-900);
353
- --sky-color-background-action-input-hover: var(--bb-color-transparent);
354
- --sky-color-background-action-primary-active: var(--bb-color-sky-500);
355
- --sky-color-background-action-primary-base: var(--bb-color-sky-600);
356
- --sky-color-background-action-primary-focus: var(--bb-color-sky-600);
357
- --sky-color-background-action-primary-hover: var(--bb-color-sky-600);
358
- --sky-color-background-action-secondary-active: var(--bb-color-gray-600);
359
- --sky-color-background-action-secondary-base: var(--bb-color-gray-800);
360
- --sky-color-background-action-secondary-focus: var(--bb-color-gray-700);
361
- --sky-color-background-action-secondary-hover: var(--bb-color-gray-700);
362
- --sky-color-background-action-tertiary-active: var(--bb-color-transparent);
363
- --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
364
- --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
365
- --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
366
- --sky-color-background-blocking: var(--bb-color-rgba-black-70);
367
- --sky-color-background-container-base: var(--bb-color-gray-1000);
368
- --sky-color-background-container-danger: var(--bb-color-red-800);
369
- --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
370
- --sky-color-background-container-info: var(--bb-color-blue-800);
371
- --sky-color-background-container-menu: var(--bb-color-gray-900);
372
- --sky-color-background-container-success: var(--bb-color-green-900);
373
- --sky-color-background-container-tooltip: var(--bb-color-gray-25);
374
- --sky-color-background-container-warning: var(--bb-color-yellow-800);
375
- --sky-color-background-disabled: var(--bb-color-gray-700);
376
- --sky-color-background-file_drop: var(--bb-color-gray-1000);
377
- --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
378
- --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
379
- --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
380
- --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
381
- --sky-color-background-icon_matte-success: var(--bb-color-green-700);
382
- --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
383
- --sky-color-background-input-base: var(--bb-color-gray-900);
384
- --sky-color-background-nav-active: var(--bb-color-transparent);
385
- --sky-color-background-nav-base: var(--bb-color-transparent);
386
- --sky-color-background-nav-focus: var(--bb-color-transparent);
387
- --sky-color-background-nav-hover: var(--bb-color-transparent);
388
- --sky-color-background-page: var(--bb-color-gray-1100);
389
- --sky-color-background-row-active: var(--bb-color-transparent);
390
- --sky-color-background-row-base: var(--bb-color-gray-1000);
391
- --sky-color-background-row-focus: var(--bb-color-gray-1000);
392
- --sky-color-background-row-hover: var(--bb-color-transparent);
393
- --sky-color-background-scrim: var(--bb-color-scrim);
394
- --sky-color-background-selected-danger: var(--bb-color-red-900);
395
- --sky-color-background-selected-heavy: var(--bb-color-blue-600);
396
- --sky-color-background-selected-soft: var(--bb-color-blue-900);
397
- --sky-color-background-selected-success: var(--bb-color-green-900);
398
- --sky-color-background-selected-switch-base: var(--bb-color-blue-600);
399
- --sky-color-background-selected-warning: var(--bb-color-yellow-900);
400
- --sky-color-background-tab-active: var(--bb-color-transparent);
401
- --sky-color-background-tab-base: var(--bb-color-transparent);
402
- --sky-color-background-tab-focus: var(--bb-color-transparent);
403
- --sky-color-background-tab-hover: var(--bb-color-transparent);
404
- --sky-color-background-tab-selected: var(--bb-color-transparent);
405
- --sky-color-background-tab-wizard-disabled: var(--bb-color-transparent);
406
- --sky-color-background-text_highlight: var(--bb-color-yellow-800);
407
- --sky-color-background-thumb-base: var(--bb-color-white);
408
- --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
409
- --sky-color-background-thumbnail_matte: var(--bb-color-white);
410
- --sky-color-border-action-accent-active: var(--bb-color-sky-500);
411
- --sky-color-border-action-accent-base: var(--bb-color-gray-700);
412
- --sky-color-border-action-accent-focus: var(--bb-color-sky-600);
413
- --sky-color-border-action-accent-hover: var(--bb-color-sky-600);
414
- --sky-color-border-action-danger-active: var(--bb-color-red-200);
415
- --sky-color-border-action-danger-base: var(--bb-color-red-600);
416
- --sky-color-border-action-danger-focus: var(--bb-color-red-200);
417
- --sky-color-border-action-danger-hover: var(--bb-color-red-200);
418
- --sky-color-border-action-input-active: var(--bb-color-blue-600);
419
- --sky-color-border-action-input-base: var(--bb-color-blue-400);
420
- --sky-color-border-action-input-focus: var(--bb-color-blue-600);
421
- --sky-color-border-action-input-hover: var(--bb-color-blue-600);
422
- --sky-color-border-action-primary-active: var(--bb-color-sky-500);
423
- --sky-color-border-action-primary-base: var(--bb-color-sky-600);
424
- --sky-color-border-action-primary-focus: var(--bb-color-sky-600);
425
- --sky-color-border-action-primary-hover: var(--bb-color-sky-600);
426
- --sky-color-border-action-secondary-active: var(--bb-color-sky-500);
427
- --sky-color-border-action-secondary-base: var(--bb-color-gray-700);
428
- --sky-color-border-action-secondary-focus: var(--bb-color-sky-600);
429
- --sky-color-border-action-secondary-hover: var(--bb-color-sky-600);
430
- --sky-color-border-action-tertiary-active: var(--bb-color-sky-500);
431
- --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
432
- --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
433
- --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
434
- --sky-color-border-column_divider: var(--bb-color-blue-400);
435
- --sky-color-border-container-base: var(--bb-color-blue-900);
436
- --sky-color-border-danger: var(--bb-color-red-400);
437
- --sky-color-border-disabled: var(--bb-color-gray-800);
438
- --sky-color-border-divider: var(--bb-color-gray-800);
439
- --sky-color-border-elevation: var(--bb-color-gray-800);
440
- --sky-color-border-info: var(--bb-color-blue-400);
441
- --sky-color-border-input-active: var(--bb-color-blue-600);
442
- --sky-color-border-input-base: var(--bb-color-blue-200);
443
- --sky-color-border-input-error: var(--bb-color-red-600);
444
- --sky-color-border-input-focus: var(--bb-color-blue-600);
445
- --sky-color-border-input-hover: var(--bb-color-blue-600);
446
- --sky-color-border-nav-active: var(--bb-color-sky-500);
447
- --sky-color-border-nav-base: var(--bb-color-transparent);
448
- --sky-color-border-nav-focus: var(--bb-color-sky-600);
449
- --sky-color-border-nav-hover: var(--bb-color-sky-600);
450
- --sky-color-border-progress_step: var(--bb-color-gray-600);
451
- --sky-color-border-selected: var(--bb-color-blue-400);
452
- --sky-color-border-selected_soft: var(--bb-color-blue-500);
453
- --sky-color-border-separator-dark: var(--bb-color-gray-800);
454
- --sky-color-border-separator-light: var(--bb-color-gray-700);
455
- --sky-color-border-separator-row: var(--bb-color-gray-800);
456
- --sky-color-border-success: var(--bb-color-green-400);
457
- --sky-color-border-switch-active: var(--bb-color-blue-600);
458
- --sky-color-border-switch-base: var(--bb-color-blue-500);
459
- --sky-color-border-switch-error: var(--bb-color-red-600);
460
- --sky-color-border-switch-focus: var(--bb-color-blue-600);
461
- --sky-color-border-switch-hover: var(--bb-color-blue-600);
462
- --sky-color-border-switch-selected-active: var(--bb-color-blue-900);
463
- --sky-color-border-switch-selected-base: var(--bb-color-transparent);
464
- --sky-color-border-switch-selected-focus: var(--bb-color-blue-900);
465
- --sky-color-border-switch-selected-hover: var(--bb-color-blue-900);
466
- --sky-color-border-tab-active: var(--bb-color-sky-500);
467
- --sky-color-border-tab-base: var(--bb-color-transparent);
468
- --sky-color-border-tab-focus: var(--bb-color-sky-600);
469
- --sky-color-border-tab-hover: var(--bb-color-sky-600);
470
- --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
471
- --sky-color-border-text_highlight: var(--bb-color-yellow-600);
472
- --sky-color-border-warning: var(--bb-color-yellow-400);
473
- --sky-color-category-blue: var(--bb-color-sky-900);
474
- --sky-color-category-green: var(--bb-color-green-900);
475
- --sky-color-category-orange: var(--bb-color-orange-900);
476
- --sky-color-category-purple: var(--bb-color-purple-900);
477
- --sky-color-category-red: var(--bb-color-red-900);
478
- --sky-color-category-teal: var(--bb-color-teal-900);
479
- --sky-color-category-yellow: var(--bb-color-yellow-900);
480
- --sky-color-classify-1-heavy: var(--bb-color-teal-400);
481
- --sky-color-classify-1-soft: var(--bb-color-teal-900);
482
- --sky-color-classify-2-heavy: var(--bb-color-purple-400);
483
- --sky-color-classify-2-soft: var(--bb-color-purple-900);
484
- --sky-color-classify-3-heavy: var(--bb-color-sky-400);
485
- --sky-color-classify-3-soft: var(--bb-color-sky-900);
486
- --sky-color-classify-4-heavy: var(--bb-color-orange-400);
487
- --sky-color-classify-4-soft: var(--bb-color-orange-900);
488
- --sky-color-classify-5-heavy: var(--bb-color-pink-400);
489
- --sky-color-classify-5-soft: var(--bb-color-pink-900);
490
- --sky-color-classify-6-heavy: var(--bb-color-green-400);
491
- --sky-color-classify-6-soft: var(--bb-color-green-900);
492
- --sky-color-classify-7-heavy: var(--bb-color-red-400);
493
- --sky-color-classify-7-soft: var(--bb-color-red-900);
494
- --sky-color-icon-action: var(--bb-color-sky-600);
495
- --sky-color-icon-danger: var(--bb-color-red-400);
496
- --sky-color-icon-deemphasized: var(--bb-color-gray-300);
497
- --sky-color-icon-default: var(--bb-color-gray-25);
498
- --sky-color-icon-eyebrow: var(--bb-color-brand-impact_green);
499
- --sky-color-icon-info: var(--bb-color-blue-600);
500
- --sky-color-icon-input-action: var(--bb-color-sky-600);
501
- --sky-color-icon-inverse: var(--bb-color-gray-1100);
502
- --sky-color-icon-selected: var(--bb-color-blue-600);
503
- --sky-color-icon-success: var(--bb-color-green-700);
504
- --sky-color-icon-warning: var(--bb-color-yellow-600);
505
- --sky-color-illustration-fill-heavy: var(--bb-color-green-700);
506
- --sky-color-illustration-fill-soft: var(--bb-color-green-900);
507
- --sky-color-illustration-fill-softest: var(--bb-color-gray-900);
508
- --sky-color-illustration-stroke: var(--bb-color-green-200);
509
- --sky-color-text-action: var(--bb-color-sky-600);
510
- --sky-color-text-action_contrast: var(--bb-color-blue-300);
511
- --sky-color-text-danger: var(--bb-color-red-400);
512
- --sky-color-text-deemphasized: var(--bb-color-gray-300);
513
- --sky-color-text-default: var(--bb-color-gray-25);
514
- --sky-color-text-heading: var(--bb-color-gray-50);
515
- --sky-color-text-inverse: var(--bb-color-gray-1100);
516
- --sky-color-text-selected: var(--bb-color-blue-400);
517
- --sky-color-viz-axis: var(--bb-color-gray-600);
518
- --sky-color-viz-category-1: var(--bb-color-teal-600);
519
- --sky-color-viz-category-2: var(--bb-color-purple-300);
520
- --sky-color-viz-category-3: var(--bb-color-blue-600);
521
- --sky-color-viz-category-4: var(--bb-color-sky-200);
522
- --sky-color-viz-category-5: var(--bb-color-orange-500);
523
- --sky-color-viz-category-6: var(--bb-color-red-300);
524
- --sky-color-viz-category-7: var(--bb-color-pink-500);
525
- --sky-color-viz-category-8: var(--bb-color-green-400);
526
- --sky-color-viz-diverge-neg-1: var(--bb-color-red-1000);
527
- --sky-color-viz-diverge-neg-10: var(--bb-color-red-100);
528
- --sky-color-viz-diverge-neg-2: var(--bb-color-red-900);
529
- --sky-color-viz-diverge-neg-3: var(--bb-color-red-800);
530
- --sky-color-viz-diverge-neg-4: var(--bb-color-red-700);
531
- --sky-color-viz-diverge-neg-5: var(--bb-color-red-600);
532
- --sky-color-viz-diverge-neg-6: var(--bb-color-red-500);
533
- --sky-color-viz-diverge-neg-7: var(--bb-color-red-400);
534
- --sky-color-viz-diverge-neg-8: var(--bb-color-red-300);
535
- --sky-color-viz-diverge-neg-9: var(--bb-color-red-200);
536
- --sky-color-viz-diverge-pos-1: var(--bb-color-blue-1000);
537
- --sky-color-viz-diverge-pos-10: var(--bb-color-blue-100);
538
- --sky-color-viz-diverge-pos-2: var(--bb-color-blue-900);
539
- --sky-color-viz-diverge-pos-3: var(--bb-color-blue-800);
540
- --sky-color-viz-diverge-pos-4: var(--bb-color-blue-700);
541
- --sky-color-viz-diverge-pos-5: var(--bb-color-blue-600);
542
- --sky-color-viz-diverge-pos-6: var(--bb-color-blue-500);
543
- --sky-color-viz-diverge-pos-7: var(--bb-color-blue-400);
544
- --sky-color-viz-diverge-pos-8: var(--bb-color-blue-300);
545
- --sky-color-viz-diverge-pos-9: var(--bb-color-blue-200);
546
- --sky-color-viz-gridline: var(--bb-color-gray-900);
547
- --sky-color-viz-marker: var(--bb-color-gray-200);
548
- --sky-color-viz-sequence-1: var(--bb-color-teal-1000);
549
- --sky-color-viz-sequence-10: var(--bb-color-teal-100);
550
- --sky-color-viz-sequence-2: var(--bb-color-teal-900);
551
- --sky-color-viz-sequence-3: var(--bb-color-teal-800);
552
- --sky-color-viz-sequence-4: var(--bb-color-teal-700);
553
- --sky-color-viz-sequence-5: var(--bb-color-teal-600);
554
- --sky-color-viz-sequence-6: var(--bb-color-teal-500);
555
- --sky-color-viz-sequence-7: var(--bb-color-teal-400);
556
- --sky-color-viz-sequence-8: var(--bb-color-teal-300);
557
- --sky-color-viz-sequence-9: var(--bb-color-teal-200);
558
- --sky-elevation-none: var(--bb-shadow-gray-0);
559
- --sky-image-select_icon-base: var(--bb-image-select_icon-base-dark-src);
560
- --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-dark-src);
561
- --sky-opacity-wait: var(--bb-opacity-600);
562
- --sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
563
- --sky-color-background-action-danger-disabled: var(--sky-color-background-disabled);
564
- --sky-color-background-action-input-disabled: var(--sky-color-background-disabled);
565
- --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
566
- --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
567
- --sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
568
- --sky-color-background-input-disabled: var(--sky-color-background-disabled);
569
- --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
570
- --sky-color-background-row-disabled: var(--sky-color-background-disabled);
571
- --sky-color-background-selected-switch-disabled: var(--sky-color-background-disabled);
572
- --sky-color-background-tab-disabled: var(--sky-color-background-disabled);
573
- --sky-color-border-action-accent-disabled: var(--sky-color-background-disabled);
574
- --sky-color-border-action-danger-disabled: var(--sky-color-border-disabled);
575
- --sky-color-border-action-input-disabled: var(--sky-color-border-disabled);
576
- --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
577
- --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
578
- --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
579
- --sky-color-border-input-disabled: var(--sky-color-border-disabled);
580
- --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
581
- --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
582
- --sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
583
- --sky-color-border-tab-disabled: var(--sky-color-border-disabled);
584
- --sky-elevation-focus: var(--bb-shadow-gray-200);
585
- --sky-elevation-overflow: var(--bb-shadow-gray-200);
586
- --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
587
- --sky-elevation-overlay-200: var(--bb-shadow-gray-800);
588
- --sky-elevation-overlay-300: var(--bb-shadow-gray-1600);
589
- --sky-elevation-overlay-400: var(--bb-shadow-gray-2400);
590
- --sky-elevation-raised-100: var(--bb-shadow-gray-100);
350
+ --bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
591
351
  }
592
352
 
593
353
  .sky-theme-modern.sky-theme-brand-base {
@@ -617,6 +377,7 @@
617
377
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
618
378
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
619
379
  --sky-color-background-blocking: var(--bb-color-rgba-white-70);
380
+ --sky-color-background-container-backdrop: var(--bb-color-gray-200);
620
381
  --sky-color-background-container-base: var(--bb-color-white);
621
382
  --sky-color-background-container-danger: var(--bb-color-red-200);
622
383
  --sky-color-background-container-dimmed: var(--bb-color-gray-25);
@@ -795,7 +556,7 @@
795
556
  --sky-color-viz-diverge-pos-7: var(--bb-color-blue-700);
796
557
  --sky-color-viz-diverge-pos-8: var(--bb-color-blue-800);
797
558
  --sky-color-viz-diverge-pos-9: var(--bb-color-blue-900);
798
- --sky-color-viz-gridline: var(--bb-color-gray-200);
559
+ --sky-color-viz-gridline: var(--bb-color-gray-250);
799
560
  --sky-color-viz-marker: var(--bb-color-gray-1000);
800
561
  --sky-color-viz-sequence-1: var(--bb-color-teal-100);
801
562
  --sky-color-viz-sequence-10: var(--bb-color-teal-1000);
@@ -872,12 +633,269 @@
872
633
  --sky-elevation-overlay-200: var(--bb-shadow-gray-800);
873
634
  --sky-elevation-overlay-300: var(--bb-shadow-gray-1600);
874
635
  --sky-elevation-overlay-400: var(--bb-shadow-gray-2400);
636
+ --sky-elevation-overlay-simple-100: var(--bb-shadow-gray-simple-400);
637
+ --sky-elevation-raised-100: var(--bb-shadow-gray-100);
638
+ }
639
+
640
+ .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
641
+ --sky-color-background-action-accent-active: var(--bb-color-gray-600);
642
+ --sky-color-background-action-accent-base: var(--bb-color-blue-900);
643
+ --sky-color-background-action-accent-focus: var(--bb-color-gray-700);
644
+ --sky-color-background-action-accent-hover: var(--bb-color-gray-700);
645
+ --sky-color-background-action-danger-active: var(--bb-color-red-600);
646
+ --sky-color-background-action-danger-base: var(--bb-color-red-600);
647
+ --sky-color-background-action-danger-focus: var(--bb-color-red-600);
648
+ --sky-color-background-action-danger-hover: var(--bb-color-red-600);
649
+ --sky-color-background-action-input-active: var(--bb-color-transparent);
650
+ --sky-color-background-action-input-base: var(--bb-color-blue-900);
651
+ --sky-color-background-action-input-focus: var(--bb-color-blue-900);
652
+ --sky-color-background-action-input-hover: var(--bb-color-transparent);
653
+ --sky-color-background-action-primary-active: var(--bb-color-sky-500);
654
+ --sky-color-background-action-primary-base: var(--bb-color-sky-600);
655
+ --sky-color-background-action-primary-focus: var(--bb-color-sky-600);
656
+ --sky-color-background-action-primary-hover: var(--bb-color-sky-600);
657
+ --sky-color-background-action-secondary-active: var(--bb-color-gray-600);
658
+ --sky-color-background-action-secondary-base: var(--bb-color-gray-800);
659
+ --sky-color-background-action-secondary-focus: var(--bb-color-gray-700);
660
+ --sky-color-background-action-secondary-hover: var(--bb-color-gray-700);
661
+ --sky-color-background-action-tertiary-active: var(--bb-color-transparent);
662
+ --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
663
+ --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
664
+ --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
665
+ --sky-color-background-blocking: var(--bb-color-rgba-black-70);
666
+ --sky-color-background-container-backdrop: var(--bb-color-gray-900);
667
+ --sky-color-background-container-base: var(--bb-color-gray-1000);
668
+ --sky-color-background-container-danger: var(--bb-color-red-800);
669
+ --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
670
+ --sky-color-background-container-info: var(--bb-color-blue-800);
671
+ --sky-color-background-container-menu: var(--bb-color-gray-900);
672
+ --sky-color-background-container-success: var(--bb-color-green-900);
673
+ --sky-color-background-container-tooltip: var(--bb-color-gray-25);
674
+ --sky-color-background-container-warning: var(--bb-color-yellow-800);
675
+ --sky-color-background-disabled: var(--bb-color-gray-700);
676
+ --sky-color-background-file_drop: var(--bb-color-gray-1000);
677
+ --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
678
+ --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
679
+ --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
680
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
681
+ --sky-color-background-icon_matte-success: var(--bb-color-green-700);
682
+ --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
683
+ --sky-color-background-input-base: var(--bb-color-gray-900);
684
+ --sky-color-background-nav-active: var(--bb-color-transparent);
685
+ --sky-color-background-nav-base: var(--bb-color-transparent);
686
+ --sky-color-background-nav-focus: var(--bb-color-transparent);
687
+ --sky-color-background-nav-hover: var(--bb-color-transparent);
688
+ --sky-color-background-page: var(--bb-color-gray-1100);
689
+ --sky-color-background-row-active: var(--bb-color-transparent);
690
+ --sky-color-background-row-base: var(--bb-color-gray-1000);
691
+ --sky-color-background-row-focus: var(--bb-color-gray-1000);
692
+ --sky-color-background-row-hover: var(--bb-color-transparent);
693
+ --sky-color-background-scrim: var(--bb-color-scrim);
694
+ --sky-color-background-selected-danger: var(--bb-color-red-900);
695
+ --sky-color-background-selected-heavy: var(--bb-color-blue-600);
696
+ --sky-color-background-selected-soft: var(--bb-color-blue-900);
697
+ --sky-color-background-selected-success: var(--bb-color-green-900);
698
+ --sky-color-background-selected-switch-base: var(--bb-color-blue-600);
699
+ --sky-color-background-selected-warning: var(--bb-color-yellow-900);
700
+ --sky-color-background-tab-active: var(--bb-color-transparent);
701
+ --sky-color-background-tab-base: var(--bb-color-transparent);
702
+ --sky-color-background-tab-focus: var(--bb-color-transparent);
703
+ --sky-color-background-tab-hover: var(--bb-color-transparent);
704
+ --sky-color-background-tab-selected: var(--bb-color-transparent);
705
+ --sky-color-background-tab-wizard-disabled: var(--bb-color-transparent);
706
+ --sky-color-background-text_highlight: var(--bb-color-yellow-800);
707
+ --sky-color-background-thumb-base: var(--bb-color-white);
708
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
709
+ --sky-color-background-thumbnail_matte: var(--bb-color-white);
710
+ --sky-color-border-action-accent-active: var(--bb-color-sky-500);
711
+ --sky-color-border-action-accent-base: var(--bb-color-gray-700);
712
+ --sky-color-border-action-accent-focus: var(--bb-color-sky-600);
713
+ --sky-color-border-action-accent-hover: var(--bb-color-sky-600);
714
+ --sky-color-border-action-danger-active: var(--bb-color-red-200);
715
+ --sky-color-border-action-danger-base: var(--bb-color-red-600);
716
+ --sky-color-border-action-danger-focus: var(--bb-color-red-200);
717
+ --sky-color-border-action-danger-hover: var(--bb-color-red-200);
718
+ --sky-color-border-action-input-active: var(--bb-color-blue-600);
719
+ --sky-color-border-action-input-base: var(--bb-color-blue-400);
720
+ --sky-color-border-action-input-focus: var(--bb-color-blue-600);
721
+ --sky-color-border-action-input-hover: var(--bb-color-blue-600);
722
+ --sky-color-border-action-primary-active: var(--bb-color-sky-500);
723
+ --sky-color-border-action-primary-base: var(--bb-color-sky-600);
724
+ --sky-color-border-action-primary-focus: var(--bb-color-sky-600);
725
+ --sky-color-border-action-primary-hover: var(--bb-color-sky-600);
726
+ --sky-color-border-action-secondary-active: var(--bb-color-sky-500);
727
+ --sky-color-border-action-secondary-base: var(--bb-color-gray-700);
728
+ --sky-color-border-action-secondary-focus: var(--bb-color-sky-600);
729
+ --sky-color-border-action-secondary-hover: var(--bb-color-sky-600);
730
+ --sky-color-border-action-tertiary-active: var(--bb-color-sky-500);
731
+ --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
732
+ --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
733
+ --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
734
+ --sky-color-border-column_divider: var(--bb-color-blue-400);
735
+ --sky-color-border-container-base: var(--bb-color-blue-900);
736
+ --sky-color-border-danger: var(--bb-color-red-400);
737
+ --sky-color-border-disabled: var(--bb-color-gray-800);
738
+ --sky-color-border-divider: var(--bb-color-gray-800);
739
+ --sky-color-border-elevation: var(--bb-color-gray-800);
740
+ --sky-color-border-info: var(--bb-color-blue-400);
741
+ --sky-color-border-input-active: var(--bb-color-blue-600);
742
+ --sky-color-border-input-base: var(--bb-color-blue-200);
743
+ --sky-color-border-input-error: var(--bb-color-red-600);
744
+ --sky-color-border-input-focus: var(--bb-color-blue-600);
745
+ --sky-color-border-input-hover: var(--bb-color-blue-600);
746
+ --sky-color-border-nav-active: var(--bb-color-sky-500);
747
+ --sky-color-border-nav-base: var(--bb-color-transparent);
748
+ --sky-color-border-nav-focus: var(--bb-color-sky-600);
749
+ --sky-color-border-nav-hover: var(--bb-color-sky-600);
750
+ --sky-color-border-progress_step: var(--bb-color-gray-600);
751
+ --sky-color-border-selected: var(--bb-color-blue-400);
752
+ --sky-color-border-selected_soft: var(--bb-color-blue-500);
753
+ --sky-color-border-separator-dark: var(--bb-color-gray-800);
754
+ --sky-color-border-separator-light: var(--bb-color-gray-700);
755
+ --sky-color-border-separator-row: var(--bb-color-gray-800);
756
+ --sky-color-border-success: var(--bb-color-green-400);
757
+ --sky-color-border-switch-active: var(--bb-color-blue-600);
758
+ --sky-color-border-switch-base: var(--bb-color-blue-500);
759
+ --sky-color-border-switch-error: var(--bb-color-red-600);
760
+ --sky-color-border-switch-focus: var(--bb-color-blue-600);
761
+ --sky-color-border-switch-hover: var(--bb-color-blue-600);
762
+ --sky-color-border-switch-selected-active: var(--bb-color-blue-900);
763
+ --sky-color-border-switch-selected-base: var(--bb-color-transparent);
764
+ --sky-color-border-switch-selected-focus: var(--bb-color-blue-900);
765
+ --sky-color-border-switch-selected-hover: var(--bb-color-blue-900);
766
+ --sky-color-border-tab-active: var(--bb-color-sky-500);
767
+ --sky-color-border-tab-base: var(--bb-color-transparent);
768
+ --sky-color-border-tab-focus: var(--bb-color-sky-600);
769
+ --sky-color-border-tab-hover: var(--bb-color-sky-600);
770
+ --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
771
+ --sky-color-border-text_highlight: var(--bb-color-yellow-600);
772
+ --sky-color-border-warning: var(--bb-color-yellow-400);
773
+ --sky-color-category-blue: var(--bb-color-sky-900);
774
+ --sky-color-category-green: var(--bb-color-green-900);
775
+ --sky-color-category-orange: var(--bb-color-orange-900);
776
+ --sky-color-category-purple: var(--bb-color-purple-900);
777
+ --sky-color-category-red: var(--bb-color-red-900);
778
+ --sky-color-category-teal: var(--bb-color-teal-900);
779
+ --sky-color-category-yellow: var(--bb-color-yellow-900);
780
+ --sky-color-classify-1-heavy: var(--bb-color-teal-400);
781
+ --sky-color-classify-1-soft: var(--bb-color-teal-900);
782
+ --sky-color-classify-2-heavy: var(--bb-color-purple-400);
783
+ --sky-color-classify-2-soft: var(--bb-color-purple-900);
784
+ --sky-color-classify-3-heavy: var(--bb-color-sky-400);
785
+ --sky-color-classify-3-soft: var(--bb-color-sky-900);
786
+ --sky-color-classify-4-heavy: var(--bb-color-orange-400);
787
+ --sky-color-classify-4-soft: var(--bb-color-orange-900);
788
+ --sky-color-classify-5-heavy: var(--bb-color-pink-400);
789
+ --sky-color-classify-5-soft: var(--bb-color-pink-900);
790
+ --sky-color-classify-6-heavy: var(--bb-color-green-400);
791
+ --sky-color-classify-6-soft: var(--bb-color-green-900);
792
+ --sky-color-classify-7-heavy: var(--bb-color-red-400);
793
+ --sky-color-classify-7-soft: var(--bb-color-red-900);
794
+ --sky-color-icon-action: var(--bb-color-sky-600);
795
+ --sky-color-icon-danger: var(--bb-color-red-400);
796
+ --sky-color-icon-deemphasized: var(--bb-color-gray-300);
797
+ --sky-color-icon-default: var(--bb-color-gray-25);
798
+ --sky-color-icon-eyebrow: var(--bb-color-brand-impact_green);
799
+ --sky-color-icon-info: var(--bb-color-blue-600);
800
+ --sky-color-icon-input-action: var(--bb-color-sky-600);
801
+ --sky-color-icon-inverse: var(--bb-color-gray-1100);
802
+ --sky-color-icon-selected: var(--bb-color-blue-600);
803
+ --sky-color-icon-success: var(--bb-color-green-700);
804
+ --sky-color-icon-warning: var(--bb-color-yellow-600);
805
+ --sky-color-illustration-fill-heavy: var(--bb-color-green-700);
806
+ --sky-color-illustration-fill-soft: var(--bb-color-green-900);
807
+ --sky-color-illustration-fill-softest: var(--bb-color-gray-900);
808
+ --sky-color-illustration-stroke: var(--bb-color-green-200);
809
+ --sky-color-text-action: var(--bb-color-sky-600);
810
+ --sky-color-text-action_contrast: var(--bb-color-blue-300);
811
+ --sky-color-text-danger: var(--bb-color-red-400);
812
+ --sky-color-text-deemphasized: var(--bb-color-gray-300);
813
+ --sky-color-text-default: var(--bb-color-gray-25);
814
+ --sky-color-text-heading: var(--bb-color-gray-50);
815
+ --sky-color-text-inverse: var(--bb-color-gray-1100);
816
+ --sky-color-text-selected: var(--bb-color-blue-400);
817
+ --sky-color-viz-axis: var(--bb-color-gray-600);
818
+ --sky-color-viz-category-1: var(--bb-color-teal-600);
819
+ --sky-color-viz-category-2: var(--bb-color-purple-300);
820
+ --sky-color-viz-category-3: var(--bb-color-blue-600);
821
+ --sky-color-viz-category-4: var(--bb-color-sky-200);
822
+ --sky-color-viz-category-5: var(--bb-color-orange-500);
823
+ --sky-color-viz-category-6: var(--bb-color-red-300);
824
+ --sky-color-viz-category-7: var(--bb-color-pink-500);
825
+ --sky-color-viz-category-8: var(--bb-color-green-400);
826
+ --sky-color-viz-diverge-neg-1: var(--bb-color-red-1000);
827
+ --sky-color-viz-diverge-neg-10: var(--bb-color-red-100);
828
+ --sky-color-viz-diverge-neg-2: var(--bb-color-red-900);
829
+ --sky-color-viz-diverge-neg-3: var(--bb-color-red-800);
830
+ --sky-color-viz-diverge-neg-4: var(--bb-color-red-700);
831
+ --sky-color-viz-diverge-neg-5: var(--bb-color-red-600);
832
+ --sky-color-viz-diverge-neg-6: var(--bb-color-red-500);
833
+ --sky-color-viz-diverge-neg-7: var(--bb-color-red-400);
834
+ --sky-color-viz-diverge-neg-8: var(--bb-color-red-300);
835
+ --sky-color-viz-diverge-neg-9: var(--bb-color-red-200);
836
+ --sky-color-viz-diverge-pos-1: var(--bb-color-blue-1000);
837
+ --sky-color-viz-diverge-pos-10: var(--bb-color-blue-100);
838
+ --sky-color-viz-diverge-pos-2: var(--bb-color-blue-900);
839
+ --sky-color-viz-diverge-pos-3: var(--bb-color-blue-800);
840
+ --sky-color-viz-diverge-pos-4: var(--bb-color-blue-700);
841
+ --sky-color-viz-diverge-pos-5: var(--bb-color-blue-600);
842
+ --sky-color-viz-diverge-pos-6: var(--bb-color-blue-500);
843
+ --sky-color-viz-diverge-pos-7: var(--bb-color-blue-400);
844
+ --sky-color-viz-diverge-pos-8: var(--bb-color-blue-300);
845
+ --sky-color-viz-diverge-pos-9: var(--bb-color-blue-200);
846
+ --sky-color-viz-gridline: var(--bb-color-gray-850);
847
+ --sky-color-viz-marker: var(--bb-color-gray-200);
848
+ --sky-color-viz-sequence-1: var(--bb-color-teal-1000);
849
+ --sky-color-viz-sequence-10: var(--bb-color-teal-100);
850
+ --sky-color-viz-sequence-2: var(--bb-color-teal-900);
851
+ --sky-color-viz-sequence-3: var(--bb-color-teal-800);
852
+ --sky-color-viz-sequence-4: var(--bb-color-teal-700);
853
+ --sky-color-viz-sequence-5: var(--bb-color-teal-600);
854
+ --sky-color-viz-sequence-6: var(--bb-color-teal-500);
855
+ --sky-color-viz-sequence-7: var(--bb-color-teal-400);
856
+ --sky-color-viz-sequence-8: var(--bb-color-teal-300);
857
+ --sky-color-viz-sequence-9: var(--bb-color-teal-200);
858
+ --sky-elevation-none: var(--bb-shadow-gray-0);
859
+ --sky-image-select_icon-base: var(--bb-image-select_icon-base-dark-src);
860
+ --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-dark-src);
861
+ --sky-opacity-wait: var(--bb-opacity-600);
862
+ --sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
863
+ --sky-color-background-action-danger-disabled: var(--sky-color-background-disabled);
864
+ --sky-color-background-action-input-disabled: var(--sky-color-background-disabled);
865
+ --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
866
+ --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
867
+ --sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
868
+ --sky-color-background-input-disabled: var(--sky-color-background-disabled);
869
+ --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
870
+ --sky-color-background-row-disabled: var(--sky-color-background-disabled);
871
+ --sky-color-background-selected-switch-disabled: var(--sky-color-background-disabled);
872
+ --sky-color-background-tab-disabled: var(--sky-color-background-disabled);
873
+ --sky-color-border-action-accent-disabled: var(--sky-color-background-disabled);
874
+ --sky-color-border-action-danger-disabled: var(--sky-color-border-disabled);
875
+ --sky-color-border-action-input-disabled: var(--sky-color-border-disabled);
876
+ --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
877
+ --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
878
+ --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
879
+ --sky-color-border-input-disabled: var(--sky-color-border-disabled);
880
+ --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
881
+ --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
882
+ --sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
883
+ --sky-color-border-tab-disabled: var(--sky-color-border-disabled);
884
+ --sky-elevation-focus: var(--bb-shadow-gray-200);
885
+ --sky-elevation-overflow: var(--bb-shadow-gray-200);
886
+ --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
887
+ --sky-elevation-overlay-200: var(--bb-shadow-gray-800);
888
+ --sky-elevation-overlay-300: var(--bb-shadow-gray-1600);
889
+ --sky-elevation-overlay-400: var(--bb-shadow-gray-2400);
890
+ --sky-elevation-overlay-simple-100: var(--bb-shadow-gray-simple-400);
875
891
  --sky-elevation-raised-100: var(--bb-shadow-gray-100);
876
892
  }
877
893
 
878
894
  .sky-theme-modern.sky-theme-brand-base {
879
895
  --sky-font-style-deemphasized-style: italic;
880
896
  --sky-font-style-deemphasized-weight: 400;
897
+ --sky-font-style-em-style: italic;
898
+ --sky-font-style-em-weight: 400;
881
899
  --sky-font-style-hint-m-style: italic;
882
900
  --sky-font-style-hint-m-weight: 400;
883
901
  --sky-font-style-hint-s-style: italic;
@@ -1003,6 +1021,14 @@
1003
1021
  --sky-comp-card-space-offset-left: var(--bb-size-0);
1004
1022
  --sky-comp-card-space-offset-right: var(--bb-size-fluid-50);
1005
1023
  --sky-comp-card-space-offset-top: var(--bb-size-0);
1024
+ --sky-comp-chart-legend_item-space-inset-bottom: var(--bb-size-fluid-25);
1025
+ --sky-comp-chart-legend_item-space-inset-left: var(--bb-size-fluid-50);
1026
+ --sky-comp-chart-legend_item-space-inset-right: var(--bb-size-fluid-50);
1027
+ --sky-comp-chart-legend_item-space-inset-top: var(--bb-size-fluid-25);
1028
+ --sky-comp-chart-tooltip-space-inset-bottom: var(--bb-size-fluid-50);
1029
+ --sky-comp-chart-tooltip-space-inset-left: var(--bb-size-fluid-50);
1030
+ --sky-comp-chart-tooltip-space-inset-right: var(--bb-size-fluid-50);
1031
+ --sky-comp-chart-tooltip-space-inset-top: var(--bb-size-fluid-50);
1006
1032
  --sky-comp-colorpicker-content-space-inset-bottom: var(--bb-size-fluid-50);
1007
1033
  --sky-comp-colorpicker-content-space-inset-left: var(--bb-size-fluid-75);
1008
1034
  --sky-comp-colorpicker-content-space-inset-right: var(--bb-size-fluid-75);
@@ -1203,6 +1229,7 @@
1203
1229
  --sky-comp-navbar_item-space-inset-left: var(--bb-size-fluid-50);
1204
1230
  --sky-comp-navbar_item-space-inset-right: var(--bb-size-fluid-50);
1205
1231
  --sky-comp-navbar_item-space-inset-top: var(--bb-size-fluid-75);
1232
+ --sky-comp-omnibar-toaster-space-inset-bottom: var(--bb-size-fixed-300);
1206
1233
  --sky-comp-omnibar-vertical-item-space-inset-bottom: var(--bb-size-fixed-50);
1207
1234
  --sky-comp-omnibar-vertical-item-space-inset-left: var(--bb-size-fixed-50);
1208
1235
  --sky-comp-omnibar-vertical-item-space-inset-right: var(--bb-size-fixed-50);
@@ -1391,6 +1418,8 @@
1391
1418
  --sky-comp-wizard-tabset-tabs-space-inset-left: var(--bb-size-fluid-150);
1392
1419
  --sky-comp-wizard-tabset-tabs-space-inset-right: var(--bb-size-fluid-150);
1393
1420
  --sky-comp-wizard-tabset-tabs-space-inset-top: var(--bb-size-0);
1421
+ --sky-duration-medium: var(--bb-duration-250);
1422
+ --sky-duration-short: var(--bb-duration-150);
1394
1423
  --sky-font-family-monospaced: var(--bb-font-monospaced-family);
1395
1424
  --sky-font-letter_spacing-eyebrow: var(--bb-letter_spacing-widest);
1396
1425
  --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-wider);
@@ -1413,6 +1442,8 @@
1413
1442
  --sky-font-line_height-hint-s: var(--bb-line_height-300);
1414
1443
  --sky-font-line_height-input-label: var(--bb-line_height-300);
1415
1444
  --sky-font-line_height-input-val: var(--bb-line_height-400);
1445
+ --sky-font-line_height-paragraph-l: var(--bb-line_height-550);
1446
+ --sky-font-line_height-paragraph-m: var(--bb-line_height-450);
1416
1447
  --sky-font-size-body-l: var(--bb-font-size-500);
1417
1448
  --sky-font-size-body-m: var(--bb-font-size-400);
1418
1449
  --sky-font-size-body-s: var(--bb-font-size-300);
@@ -1447,10 +1478,13 @@
1447
1478
  --sky-font-style-heading-4: var(--bb-font-style-semibold);
1448
1479
  --sky-font-style-heading-5: var(--bb-font-style-semibold);
1449
1480
  --sky-font-style-input-label: var(--bb-font-style-regular);
1481
+ --sky-font-style-strong: var(--bb-font-style-bold);
1450
1482
  --sky-font-text_transform-eyebrow: var(--bb-font-text_transform-uppercase);
1451
1483
  --sky-size-avatar-l: var(--bb-size-fluid-550);
1452
1484
  --sky-size-avatar-m: var(--bb-size-fluid-350);
1453
1485
  --sky-size-avatar-s: var(--bb-size-fluid-200);
1486
+ --sky-size-chart-tick_length-category: var(--bb-size-0);
1487
+ --sky-size-chart-tick_length-measure: var(--bb-size-fluid-75);
1454
1488
  --sky-size-icon-l: var(--bb-size-fluid-150);
1455
1489
  --sky-size-icon-m: var(--bb-size-fluid-125);
1456
1490
  --sky-size-icon-s: var(--bb-size-fluid-100);
@@ -1661,6 +1695,7 @@
1661
1695
  --bb-color-blue-600: #2b6bd5;
1662
1696
  --bb-color-blue-700: #2256aa;
1663
1697
  --bb-color-blue-800: #1a4080;
1698
+ --bb-color-blue-850: #16366b;
1664
1699
  --bb-color-blue-900: #112b55;
1665
1700
  --bb-color-brand-impact_green: #0cd973;
1666
1701
  --bb-color-brand-trusted_blue: #004054;
@@ -1670,6 +1705,7 @@
1670
1705
  --bb-color-gray-1200: #0f1114;
1671
1706
  --bb-color-gray-200: #e0e1e2;
1672
1707
  --bb-color-gray-25: #fbfbfb;
1708
+ --bb-color-gray-250: #d5d6d8;
1673
1709
  --bb-color-gray-300: #c2c4c6;
1674
1710
  --bb-color-gray-400: #a3a6a9;
1675
1711
  --bb-color-gray-50: #f4f4f5;
@@ -1677,6 +1713,7 @@
1677
1713
  --bb-color-gray-600: #666b70;
1678
1714
  --bb-color-gray-700: #51555c;
1679
1715
  --bb-color-gray-800: #3b4047;
1716
+ --bb-color-gray-850: #30363d;
1680
1717
  --bb-color-gray-900: #252b33;
1681
1718
  --bb-color-green-100: #d8f9e9;
1682
1719
  --bb-color-green-1000: #033019;
@@ -1781,6 +1818,7 @@
1781
1818
  --bb-color-slate-600: #536f9d;
1782
1819
  --bb-color-slate-700: #42597e;
1783
1820
  --bb-color-slate-800: #32435e;
1821
+ --bb-color-slate-850: #2a384f;
1784
1822
  --bb-color-slate-900: #212c3f;
1785
1823
  --bb-color-teal-100: #dcf6f5;
1786
1824
  --bb-color-teal-1000: #022a28;
@@ -1812,6 +1850,8 @@
1812
1850
  --bb-color-yellow-700: #92661e;
1813
1851
  --bb-color-yellow-800: #6e4d17;
1814
1852
  --bb-color-yellow-900: #503811;
1853
+ --bb-duration-150: 150ms;
1854
+ --bb-duration-250: 250ms;
1815
1855
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
1816
1856
  --bb-font-blkb_sans-name: BLKB Sans;
1817
1857
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
@@ -1823,6 +1863,7 @@
1823
1863
  --bb-font-size-650: 1.3125rem;
1824
1864
  --bb-font-size-700: 1.5rem;
1825
1865
  --bb-font-size-800: 1.6875rem;
1866
+ --bb-font-style-bold: 700;
1826
1867
  --bb-font-style-italic-style: italic;
1827
1868
  --bb-font-style-italic-weight: 400;
1828
1869
  --bb-font-style-light: 300;
@@ -1839,22 +1880,24 @@
1839
1880
  --bb-font-weight-light: 300;
1840
1881
  --bb-font-weight-regular: 400;
1841
1882
  --bb-font-weight-semibold: 600;
1842
- --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/bb-logo.png");
1843
- --bb-image-select_icon-base-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-base-dark.svg");
1844
- --bb-image-select_icon-base-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-base-light.svg");
1845
- --bb-image-select_icon-bb-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-bb-dark.svg");
1846
- --bb-image-select_icon-bb-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-bb-light.svg");
1847
- --bb-image-select_icon-disabled-base-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg");
1848
- --bb-image-select_icon-disabled-base-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg");
1849
- --bb-image-select_icon-disabled-bb-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg");
1850
- --bb-image-select_icon-disabled-bb-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg");
1883
+ --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/bb-logo.png");
1884
+ --bb-image-select_icon-base-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-base-dark.svg");
1885
+ --bb-image-select_icon-base-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-base-light.svg");
1886
+ --bb-image-select_icon-bb-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-bb-dark.svg");
1887
+ --bb-image-select_icon-bb-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-bb-light.svg");
1888
+ --bb-image-select_icon-disabled-base-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg");
1889
+ --bb-image-select_icon-disabled-base-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg");
1890
+ --bb-image-select_icon-disabled-bb-dark-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg");
1891
+ --bb-image-select_icon-disabled-bb-light-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.7.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg");
1851
1892
  --bb-letter_spacing-normal: normal;
1852
1893
  --bb-letter_spacing-wider: 0.01rem;
1853
1894
  --bb-letter_spacing-widest: 0.046875rem;
1854
1895
  --bb-line_height-200: calc(16/11);
1855
1896
  --bb-line_height-300: calc(18/13);
1856
1897
  --bb-line_height-400: calc(20/15);
1898
+ --bb-line_height-450: calc(22/15);
1857
1899
  --bb-line_height-500: calc(24/17);
1900
+ --bb-line_height-550: calc(26/17);
1858
1901
  --bb-line_height-600: calc(28/19);
1859
1902
  --bb-line_height-650: calc(28/21);
1860
1903
  --bb-line_height-700: calc(32/24);
@@ -1870,6 +1913,7 @@
1870
1913
  --bb-size-fixed-2000: 320px;
1871
1914
  --bb-size-fixed-25: 4px;
1872
1915
  --bb-size-fixed-250: 36px;
1916
+ --bb-size-fixed-300: 48px;
1873
1917
  --bb-size-fixed-37: 6px;
1874
1918
  --bb-size-fixed-4000: 640px;
1875
1919
  --bb-size-fixed-50: 8px;
@@ -1921,6 +1965,7 @@
1921
1965
  --bb-shadow-gray-400: 0 2px 4px -1px rgba(22, 26, 31, 0.2), 0 1px 10px 0 rgba(22, 26, 31, 0.12), 0 4px 5px 0 rgba(22, 26, 31, 0.14);
1922
1966
  --bb-shadow-gray-50: 0 1px 1px 0 rgba(22, 26, 31, 0.12), 0 1.5px 1px -1px rgba(22, 26, 31, 0.12);
1923
1967
  --bb-shadow-gray-800: 0 5px 5px -3px rgba(22, 26, 31, 0.2), 0 3px 14px 2px rgba(22, 26, 31, 0.12), 0 8px 10px 1px rgba(22, 26, 31, 0.14);
1968
+ --bb-shadow-gray-simple-400: 1px 2px 4px 0 rgba(22, 26, 31, 0.5);
1924
1969
  --bb-shadow-slate-100: 0 1px 3px 0 rgba(33, 44, 63, 0.2), 0 2px 1px -1px rgba(33, 44, 63, 0.12), 0 1px 1px 0 rgba(33, 44, 63, 0.14);
1925
1970
  --bb-shadow-slate-1600: 0 8px 10px -5px rgba(33, 44, 63, 0.2), 0 6px 30px 5px rgba(33, 44, 63, 0.12), 0 16px 24px 2px rgba(33, 44, 63, 0.14);
1926
1971
  --bb-shadow-slate-200: 0 1px 8px 0 rgba(33, 44, 63, 0.2), 0 3px 3px -2px rgba(33, 44, 63, 0.12), 0 3px 4px 0 rgba(33, 44, 63, 0.14);
@@ -1929,11 +1974,13 @@
1929
1974
  --bb-shadow-slate-400: 0 2px 4px -1px rgba(33, 44, 63, 0.2), 0 1px 10px 0 rgba(33, 44, 63, 0.12), 0 4px 5px 0 rgba(33, 44, 63, 0.14);
1930
1975
  --bb-shadow-slate-50: 0 1px 1px 0 rgba(33, 44, 63, 0.12), 0 1.5px 1px -1px rgba(33, 44, 63, 0.12);
1931
1976
  --bb-shadow-slate-800: 0 5px 5px -3px rgba(33, 44, 63, 0.2), 0 3px 14px 2px rgba(33, 44, 63, 0.12), 0 8px 10px 1px rgba(33, 44, 63, 0.14);
1977
+ --bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
1932
1978
  }
1933
1979
 
1934
1980
  .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud {
1935
1981
  --sky-brand-name: var(--bb-brand-name);
1936
1982
  --sky-color-background-action-accent-base: var(--bb-color-blue-25);
1983
+ --sky-color-background-container-backdrop: var(--bb-color-slate-200);
1937
1984
  --sky-color-background-container-dimmed: var(--bb-color-slate-25);
1938
1985
  --sky-color-background-file_drop: var(--bb-color-slate-25);
1939
1986
  --sky-color-background-input-base: var(--bb-color-slate-25);
@@ -1999,6 +2046,7 @@
1999
2046
  --sky-elevation-overlay-200: var(--bb-shadow-slate-800);
2000
2047
  --sky-elevation-overlay-300: var(--bb-shadow-slate-1600);
2001
2048
  --sky-elevation-overlay-400: var(--bb-shadow-slate-2400);
2049
+ --sky-elevation-overlay-simple-100: var(--bb-shadow-slate-simple-400);
2002
2050
  --sky-elevation-raised-100: var(--bb-shadow-slate-100);
2003
2051
  }
2004
2052
 
@@ -2183,6 +2231,7 @@
2183
2231
  --sky-elevation-overlay-200: var(--bb-shadow-slate-800);
2184
2232
  --sky-elevation-overlay-300: var(--bb-shadow-slate-1600);
2185
2233
  --sky-elevation-overlay-400: var(--bb-shadow-slate-2400);
2234
+ --sky-elevation-overlay-simple-100: var(--bb-shadow-slate-simple-400);
2186
2235
  --sky-elevation-raised-100: var(--bb-shadow-slate-100);
2187
2236
  }
2188
2237
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/theme",
3
- "version": "13.16.4",
3
+ "version": "13.17.0",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -20,7 +20,7 @@
20
20
  "@angular/core": "^20.3.17"
21
21
  },
22
22
  "dependencies": {
23
- "@blackbaud/skyux-design-tokens": "5.0.0",
23
+ "@blackbaud/skyux-design-tokens": "5.7.0",
24
24
  "fontfaceobserver": "2.3.0",
25
25
  "tslib": "^2.8.1"
26
26
  },