@skyux/theme 15.0.0-alpha.7 → 15.0.0-alpha.9

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 (3) hide show
  1. package/css/sky.css +79 -0
  2. package/css/themes/modern/styles.css +355 -163
  3. package/package.json +2 -2
package/css/sky.css CHANGED
@@ -446,7 +446,9 @@ template {
446
446
  --sky-theme-color-background-container-danger: var(--sky-color-background-container-danger);
447
447
  --sky-theme-color-background-container-default: var(--sky-color-background-container-base);
448
448
  --sky-theme-color-background-container-dimmed: var(--sky-color-background-container-dimmed);
449
+ --sky-theme-color-background-container-header-prominent: var(--sky-color-background-container-header-prominent);
449
450
  --sky-theme-color-background-container-info: var(--sky-color-background-container-info);
451
+ --sky-theme-color-background-container-prominent: var(--sky-color-background-container-prominent);
450
452
  --sky-theme-color-background-container-success: var(--sky-color-background-container-success);
451
453
  --sky-theme-color-background-container-warning: var(--sky-color-background-container-warning);
452
454
  --sky-theme-color-background-disabled: var(--sky-color-background-disabled);
@@ -457,6 +459,7 @@ template {
457
459
  --sky-theme-color-background-icon_matte-warning: var(--sky-color-background-icon_matte-warning);
458
460
  --sky-theme-color-background-page: var(--sky-color-background-page);
459
461
  --sky-theme-color-border-container-default: var(--sky-color-border-container-base);
462
+ --sky-theme-color-border-container-header-prominent: var(--sky-color-border-container-header-prominent);
460
463
  --sky-theme-color-border-danger: var(--sky-color-border-danger);
461
464
  --sky-theme-color-border-disabled: var(--sky-color-border-disabled);
462
465
  --sky-theme-color-border-divider-default: var(--sky-color-border-divider);
@@ -484,6 +487,9 @@ template {
484
487
  --sky-theme-color-icon-default: var(--sky-color-icon-default);
485
488
  --sky-theme-color-icon-info: var(--sky-color-icon-info);
486
489
  --sky-theme-color-icon-inverse: var(--sky-color-icon-inverse);
490
+ --sky-theme-color-icon-on_prominent-base: var(--sky-color-icon-on_prominent-base);
491
+ --sky-theme-color-icon-on_prominent-disabled: var(--sky-color-icon-on_prominent-disabled);
492
+ --sky-theme-color-icon-on_status: var(--sky-color-icon-on_status);
487
493
  --sky-theme-color-icon-success: var(--sky-color-icon-success);
488
494
  --sky-theme-color-text-action: var(--sky-color-text-action);
489
495
  --sky-theme-color-text-action_contrast: var(--sky-color-text-action_contrast);
@@ -491,6 +497,8 @@ template {
491
497
  --sky-theme-color-text-default: var(--sky-color-text-default);
492
498
  --sky-theme-color-text-heading: var(--sky-color-text-heading);
493
499
  --sky-theme-color-text-inverse: var(--sky-color-text-inverse);
500
+ --sky-theme-color-text-on_prominent: var(--sky-color-text-on_prominent);
501
+ --sky-theme-color-text-on_status: var(--sky-color-text-on_status);
494
502
  --sky-theme-color-viz-axis: var(--sky-color-viz-axis);
495
503
  --sky-theme-color-viz-category-1: var(--sky-color-viz-category-1);
496
504
  --sky-theme-color-viz-category-2: var(--sky-color-viz-category-2);
@@ -536,6 +544,7 @@ template {
536
544
 
537
545
  .sky-theme-modern.sky-theme-brand-base {
538
546
  --sky-theme-border-container-default: var(--sky-border-width-container-base) var(--sky-border-style-divider) var(--sky-color-border-container-base);
547
+ --sky-theme-border-container-header-prominent: var(--sky-border-width-emphasized) var(--sky-border-style-divider) var(--sky-color-border-container-header-prominent);
539
548
  --sky-theme-border-danger: var(--sky-border-width-container-base) var(--sky-border-style-divider) var(--sky-color-border-danger);
540
549
  --sky-theme-border-divider-default: var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider);
541
550
  --sky-theme-border-divider-soft: var(--sky-border-width-separator-row) var(--sky-border-style-separator-row) var(--sky-color-border-separator-row);
@@ -674,7 +683,9 @@ template {
674
683
  --sky-theme-color-background-container-danger: #f7a08f;
675
684
  --sky-theme-color-background-container-default: #ffffff;
676
685
  --sky-theme-color-background-container-dimmed: #eeeeef;
686
+ --sky-theme-color-background-container-header-prominent: #32435e;
677
687
  --sky-theme-color-background-container-info: #81d4f7;
688
+ --sky-theme-color-background-container-prominent: #f6f8fa;
678
689
  --sky-theme-color-background-container-success: #b7da9b;
679
690
  --sky-theme-color-background-container-warning: #ffd597;
680
691
  --sky-theme-color-background-disabled: #cdcfd2;
@@ -685,6 +696,7 @@ template {
685
696
  --sky-theme-color-background-icon_matte-warning: #ffd597;
686
697
  --sky-theme-color-background-page: #ffffff;
687
698
  --sky-theme-color-border-container-default: #cdcfd2;
699
+ --sky-theme-color-border-container-header-prominent: #7289af;
688
700
  --sky-theme-color-border-danger: #ef4044;
689
701
  --sky-theme-color-border-disabled: #cdcfd2;
690
702
  --sky-theme-color-border-divider-default: #cdcfd2;
@@ -712,6 +724,9 @@ template {
712
724
  --sky-theme-color-icon-default: #212327;
713
725
  --sky-theme-color-icon-info: #00b4f1;
714
726
  --sky-theme-color-icon-inverse: #ffffff;
727
+ --sky-theme-color-icon-on_prominent-base: #ffffff;
728
+ --sky-theme-color-icon-on_prominent-disabled: #686c73;
729
+ --sky-theme-color-icon-on_status: #ffffff;
715
730
  --sky-theme-color-icon-success: #72bf44;
716
731
  --sky-theme-color-text-action: #0974a1;
717
732
  --sky-theme-color-text-action_contrast: #0974a1;
@@ -719,6 +734,8 @@ template {
719
734
  --sky-theme-color-text-default: #212327;
720
735
  --sky-theme-color-text-heading: #212327;
721
736
  --sky-theme-color-text-inverse: #ffffff;
737
+ --sky-theme-color-text-on_prominent: #ffffff;
738
+ --sky-theme-color-text-on_status: #212327;
722
739
  --sky-theme-color-viz-axis: #85888d;
723
740
  --sky-theme-color-viz-category-1: #06a39e;
724
741
  --sky-theme-color-viz-category-2: #6d3c96;
@@ -764,6 +781,7 @@ template {
764
781
 
765
782
  :root {
766
783
  --sky-theme-border-container-default: 1px solid #cdcfd2;
784
+ --sky-theme-border-container-header-prominent: 1px solid #7289AF;
767
785
  --sky-theme-border-danger: 1px solid #ef4044;
768
786
  --sky-theme-border-divider-default: 1px solid #cdcfd2;
769
787
  --sky-theme-border-divider-soft: 1px solid #cdcfd2;
@@ -1243,6 +1261,14 @@ em {
1243
1261
  background-color: var(--sky-theme-color-background-container-backdrop);
1244
1262
  }
1245
1263
 
1264
+ .sky-theme-color-background-container-prominent {
1265
+ background-color: var(--sky-theme-color-background-container-prominent);
1266
+ }
1267
+
1268
+ .sky-theme-color-background-container-header-prominent {
1269
+ background-color: var(--sky-theme-color-background-container-header-prominent);
1270
+ }
1271
+
1246
1272
  .sky-theme-color-background-disabled {
1247
1273
  background-color: var(--sky-theme-color-background-disabled);
1248
1274
  }
@@ -1255,6 +1281,14 @@ em {
1255
1281
  color: var(--sky-theme-color-text-inverse);
1256
1282
  }
1257
1283
 
1284
+ .sky-theme-color-text-on_status {
1285
+ color: var(--sky-theme-color-text-on_status);
1286
+ }
1287
+
1288
+ .sky-theme-color-text-on_prominent {
1289
+ color: var(--sky-theme-color-text-on_prominent);
1290
+ }
1291
+
1258
1292
  .sky-theme-color-icon-default {
1259
1293
  color: var(--sky-theme-color-icon-default);
1260
1294
  }
@@ -1271,6 +1305,14 @@ em {
1271
1305
  color: var(--sky-theme-color-icon-inverse);
1272
1306
  }
1273
1307
 
1308
+ .sky-theme-color-icon-on_status {
1309
+ color: var(--sky-theme-color-icon-on_status);
1310
+ }
1311
+
1312
+ .sky-theme-color-icon-on_prominent {
1313
+ color: var(--sky-theme-color-icon-on_prominent-base);
1314
+ }
1315
+
1274
1316
  .sky-theme-color-background-icon_matte-action-soft {
1275
1317
  background-color: var(--sky-theme-color-background-icon_matte-action-soft);
1276
1318
  }
@@ -1379,6 +1421,10 @@ em {
1379
1421
  border: var(--sky-theme-border-container-default);
1380
1422
  }
1381
1423
 
1424
+ .sky-theme-border-container-header-prominent {
1425
+ border-bottom: var(--sky-theme-border-container-header-prominent);
1426
+ }
1427
+
1382
1428
  .sky-theme-border-divider-default-top {
1383
1429
  border-top: var(--sky-theme-border-divider-default);
1384
1430
  }
@@ -1976,6 +2022,39 @@ a.sky-btn:hover {
1976
2022
  padding: 0;
1977
2023
  }
1978
2024
 
2025
+ .sky-btn-icon-borderless-on_prominent {
2026
+ background-color: transparent;
2027
+ border: 1px solid transparent;
2028
+ color: #ffffff;
2029
+ cursor: pointer;
2030
+ height: 26px;
2031
+ padding: 0;
2032
+ text-align: center;
2033
+ width: 26px;
2034
+ }
2035
+ .sky-btn-icon-borderless-on_prominent:hover {
2036
+ background-color: #42597e;
2037
+ border: 1px solid #aac4ee;
2038
+ color: #ffffff;
2039
+ }
2040
+ .sky-btn-icon-borderless-on_prominent:active, .sky-btn-icon-borderless-on_prominent.sky-btn-active {
2041
+ background-color: #536f9d;
2042
+ border: 1px solid #aac4ee;
2043
+ box-shadow: none;
2044
+ color: #ffffff;
2045
+ }
2046
+ .sky-btn-icon-borderless-on_prominent:focus-visible:not(:active) {
2047
+ background-color: transparent;
2048
+ border: 1px solid #aac4ee;
2049
+ outline: none;
2050
+ }
2051
+ .sky-btn-icon-borderless-on_prominent.sky-btn-disabled, .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:hover, .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:focus-visible, .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:active, .sky-btn-icon-borderless-on_prominent.sky-btn-disabled.sky-btn-active, .sky-btn-icon-borderless-on_prominent[disabled], .sky-btn-icon-borderless-on_prominent[disabled]:hover, .sky-btn-icon-borderless-on_prominent[disabled]:focus-visible, .sky-btn-icon-borderless-on_prominent[disabled]:active, .sky-btn-icon-borderless-on_prominent[disabled].sky-btn-active {
2052
+ background-color: #51555c;
2053
+ border: 1px solid #3b4047;
2054
+ color: #c2c4c6;
2055
+ opacity: 1;
2056
+ }
2057
+
1979
2058
  .sky-btn-block {
1980
2059
  display: block;
1981
2060
  overflow: hidden;
package/css/themes/modern/styles.css CHANGED
@@ -75,6 +75,7 @@
75
75
  --bb-color-blue-dark-1000: #00112b;
76
76
  --bb-color-blue-dark-200: #b4dbff;
77
77
  --bb-color-blue-dark-300: #83c1ff;
78
+ --bb-color-blue-dark-375: #79adf1;
78
79
  --bb-color-blue-dark-400: #59a6ff;
79
80
  --bb-color-blue-dark-500: #2885ef;
80
81
  --bb-color-blue-dark-600: #0066cd;
@@ -232,6 +233,10 @@
232
233
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
233
234
  --bb-color-rgba-steel-fusion-100-5: rgba(243, 246, 249, 0.05);
234
235
  --bb-color-rgba-steel-fusion-1100-70: rgba(28, 34, 40, 0.7);
236
+ --bb-color-rgba-steel-gray-100-10: rgba(245, 246, 247, 0.1);
237
+ --bb-color-rgba-steel-gray-100-15: rgba(245, 246, 247, 0.15);
238
+ --bb-color-rgba-steel-gray-100-25: rgba(245, 246, 247, 0.25);
239
+ --bb-color-rgba-white-18: rgba(255, 255, 255, 0.18);
235
240
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
236
241
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
237
242
  --bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
@@ -292,6 +297,22 @@
292
297
  --bb-color-steel-fusion-700: #5e6770;
293
298
  --bb-color-steel-fusion-800: #4a5259;
294
299
  --bb-color-steel-fusion-900: #363d44;
300
+ --bb-color-steel-gray-100: #f5f6f7;
301
+ --bb-color-steel-gray-1000: #2e3135;
302
+ --bb-color-steel-gray-1050: #25272a;
303
+ --bb-color-steel-gray-1075: #222427;
304
+ --bb-color-steel-gray-1100: #1f2224;
305
+ --bb-color-steel-gray-1125: #1e2022;
306
+ --bb-color-steel-gray-1150: #1c1e20;
307
+ --bb-color-steel-gray-1200: #17191b;
308
+ --bb-color-steel-gray-200: #e2e4e5;
309
+ --bb-color-steel-gray-300: #cbcdcf;
310
+ --bb-color-steel-gray-400: #b3b5b8;
311
+ --bb-color-steel-gray-500: #979a9d;
312
+ --bb-color-steel-gray-600: #7a7d81;
313
+ --bb-color-steel-gray-700: #636669;
314
+ --bb-color-steel-gray-800: #4e5154;
315
+ --bb-color-steel-gray-900: #3a3c3f;
295
316
  --bb-color-teal-100: #dcf6f5;
296
317
  --bb-color-teal-1000: #022a28;
297
318
  --bb-color-teal-1100: #011e1d;
@@ -372,15 +393,15 @@
372
393
  --bb-font-weight-light: 300;
373
394
  --bb-font-weight-regular: 400;
374
395
  --bb-font-weight-semibold: 600;
375
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/bb-logo.png');
376
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-base-dark.svg');
377
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-base-light.svg');
378
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-bb-dark.svg');
379
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-bb-light.svg');
380
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
381
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
382
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
383
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
396
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/bb-logo.png');
397
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-base-dark.svg');
398
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-base-light.svg');
399
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-bb-dark.svg');
400
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-bb-light.svg');
401
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
402
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
403
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
404
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
384
405
  --bb-letter_spacing-normal: normal;
385
406
  --bb-letter_spacing-wider: 0.01rem;
386
407
  --bb-letter_spacing-widest: 0.046875rem;
@@ -395,6 +416,8 @@
395
416
  --bb-line_height-700: calc(32/24);
396
417
  --bb-line_height-800: calc(36/27);
397
418
  --bb-opacity-600: .6;
419
+ --bb-shadow-slate-0: 0 0 0 0 rgba(0, 0, 0, 0);
420
+ --bb-shadow-steel-fusion-0: 0 0 0 0 rgba(0, 0, 0, 0);
398
421
  --bb-size-0: 0rem;
399
422
  --bb-size-fixed-100: 16px;
400
423
  --bb-size-fixed-12: 2px;
@@ -468,7 +491,6 @@
468
491
  --bb-shadow-heavy-black-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
469
492
  --bb-shadow-heavy-black-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
470
493
  --bb-shadow-heavy-black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
471
- --bb-shadow-slate-0: 0 0 0 0 rgba(33, 44, 63, 0);
472
494
  --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);
473
495
  --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);
474
496
  --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);
@@ -478,6 +500,25 @@
478
500
  --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);
479
501
  --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);
480
502
  --bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
503
+ --bb-shadow-steel-fusion-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
504
+ --bb-shadow-steel-fusion-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
505
+ --bb-shadow-steel-fusion-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
506
+ --bb-shadow-steel-fusion-2400: 0 11px 15px -7px rgba(0, 0, 0, 0.34), 0 9px 46px 8px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.24);
507
+ --bb-shadow-steel-fusion-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
508
+ --bb-shadow-steel-fusion-400: 0 2px 4px -1px rgba(0, 0, 0, 0.24), 0 1px 10px 0 rgba(0, 0, 0, 0.16), 0 4px 5px 0 rgba(0, 0, 0, 0.21);
509
+ --bb-shadow-steel-fusion-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
510
+ --bb-shadow-steel-fusion-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
511
+ --bb-shadow-steel-fusion-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
512
+ --bb-shadow-steel-gray-0: 0 0 0 0 rgba(33, 44, 63, 0);
513
+ --bb-shadow-steel-gray-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
514
+ --bb-shadow-steel-gray-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
515
+ --bb-shadow-steel-gray-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
516
+ --bb-shadow-steel-gray-2400: 0 11px 15px -7px rgba(0, 0, 0, 0.34), 0 9px 46px 8px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.24);
517
+ --bb-shadow-steel-gray-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
518
+ --bb-shadow-steel-gray-400: 0 2px 4px -1px rgba(0, 0, 0, 0.24), 0 1px 10px 0 rgba(0, 0, 0, 0.16), 0 4px 5px 0 rgba(0, 0, 0, 0.21);
519
+ --bb-shadow-steel-gray-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
520
+ --bb-shadow-steel-gray-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
521
+ --bb-shadow-steel-gray-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
481
522
  }
482
523
 
483
524
  :root:has(body.sky-theme-modern.sky-theme-brand-base) {
@@ -515,13 +556,20 @@
515
556
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
516
557
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
517
558
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
559
+ --sky-color-background-action-tertiary-on_prominent-active: var(--bb-color-slate-600);
560
+ --sky-color-background-action-tertiary-on_prominent-base: var(--bb-color-transparent);
561
+ --sky-color-background-action-tertiary-on_prominent-disabled: var(--bb-color-gray-700);
562
+ --sky-color-background-action-tertiary-on_prominent-focus: var(--bb-color-transparent);
563
+ --sky-color-background-action-tertiary-on_prominent-hover: var(--bb-color-slate-700);
518
564
  --sky-color-background-blocking: var(--bb-color-rgba-white-70);
519
565
  --sky-color-background-container-backdrop: var(--bb-color-gray-200);
520
566
  --sky-color-background-container-base: var(--bb-color-white);
521
567
  --sky-color-background-container-danger: var(--bb-color-red-200);
522
568
  --sky-color-background-container-dimmed: var(--bb-color-gray-25);
569
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
523
570
  --sky-color-background-container-info: var(--bb-color-blue-200);
524
571
  --sky-color-background-container-menu: var(--bb-color-white);
572
+ --sky-color-background-container-prominent: var(--bb-color-slate-50);
525
573
  --sky-color-background-container-success: var(--bb-color-green-200);
526
574
  --sky-color-background-container-tooltip: var(--bb-color-gray-1000);
527
575
  --sky-color-background-container-warning: var(--bb-color-yellow-200);
@@ -584,8 +632,14 @@
584
632
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
585
633
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
586
634
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
635
+ --sky-color-border-action-tertiary-on_prominent-active: var(--bb-color-blue-300);
636
+ --sky-color-border-action-tertiary-on_prominent-base: var(--bb-color-transparent);
637
+ --sky-color-border-action-tertiary-on_prominent-disabled: var(--bb-color-gray-800);
638
+ --sky-color-border-action-tertiary-on_prominent-focus: var(--bb-color-blue-300);
639
+ --sky-color-border-action-tertiary-on_prominent-hover: var(--bb-color-blue-300);
587
640
  --sky-color-border-column_divider: var(--bb-color-blue-600);
588
641
  --sky-color-border-container-base: var(--bb-color-gray-200);
642
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
589
643
  --sky-color-border-danger: var(--bb-color-red-600);
590
644
  --sky-color-border-disabled: var(--bb-color-gray-300);
591
645
  --sky-color-border-divider: var(--bb-color-gray-300);
@@ -651,6 +705,9 @@
651
705
  --sky-color-icon-info: var(--bb-color-blue-600);
652
706
  --sky-color-icon-input-action: var(--bb-color-gray-600);
653
707
  --sky-color-icon-inverse: var(--bb-color-white);
708
+ --sky-color-icon-on_prominent-base: var(--bb-color-white);
709
+ --sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
710
+ --sky-color-icon-on_status: var(--bb-color-white);
654
711
  --sky-color-icon-selected: var(--bb-color-blue-600);
655
712
  --sky-color-icon-success: var(--bb-color-green-600);
656
713
  --sky-color-icon-warning: var(--bb-color-yellow-400);
@@ -665,6 +722,8 @@
665
722
  --sky-color-text-default: var(--bb-color-gray-1000);
666
723
  --sky-color-text-heading: var(--bb-color-gray-1100);
667
724
  --sky-color-text-inverse: var(--bb-color-white);
725
+ --sky-color-text-on_prominent: var(--bb-color-white);
726
+ --sky-color-text-on_status: var(--bb-color-gray-1000);
668
727
  --sky-color-text-selected: var(--bb-color-blue-600);
669
728
  --sky-color-viz-axis: var(--bb-color-gray-500);
670
729
  --sky-color-viz-category-1: var(--bb-color-teal-500);
@@ -807,13 +866,19 @@
807
866
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
808
867
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
809
868
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
869
+ --sky-color-background-action-tertiary-on_prominent-active: var(--bb-color-slate-600);
870
+ --sky-color-background-action-tertiary-on_prominent-base: var(--bb-color-transparent);
871
+ --sky-color-background-action-tertiary-on_prominent-focus: var(--bb-color-transparent);
872
+ --sky-color-background-action-tertiary-on_prominent-hover: var(--bb-color-slate-700);
810
873
  --sky-color-background-blocking: var(--bb-color-rgba-steel-fusion-1100-70);
811
874
  --sky-color-background-container-backdrop: var(--bb-color-gray-900);
812
875
  --sky-color-background-container-base: var(--bb-color-gray-1000);
813
876
  --sky-color-background-container-danger: var(--bb-color-red-800);
814
877
  --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
878
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
815
879
  --sky-color-background-container-info: var(--bb-color-blue-800);
816
880
  --sky-color-background-container-menu: var(--bb-color-gray-900);
881
+ --sky-color-background-container-prominent: var(--bb-color-steel-gray-1125);
817
882
  --sky-color-background-container-success: var(--bb-color-green-900);
818
883
  --sky-color-background-container-tooltip: var(--bb-color-gray-25);
819
884
  --sky-color-background-container-warning: var(--bb-color-yellow-800);
@@ -876,8 +941,13 @@
876
941
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
877
942
  --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
878
943
  --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
944
+ --sky-color-border-action-tertiary-on_prominent-active: var(--bb-color-blue-300);
945
+ --sky-color-border-action-tertiary-on_prominent-base: var(--bb-color-transparent);
946
+ --sky-color-border-action-tertiary-on_prominent-focus: var(--bb-color-blue-300);
947
+ --sky-color-border-action-tertiary-on_prominent-hover: var(--bb-color-blue-300);
879
948
  --sky-color-border-column_divider: var(--bb-color-blue-400);
880
949
  --sky-color-border-container-base: var(--bb-color-blue-900);
950
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
881
951
  --sky-color-border-danger: var(--bb-color-red-400);
882
952
  --sky-color-border-disabled: var(--bb-color-gray-800);
883
953
  --sky-color-border-divider: var(--bb-color-gray-800);
@@ -943,6 +1013,9 @@
943
1013
  --sky-color-icon-info: var(--bb-color-blue-600);
944
1014
  --sky-color-icon-input-action: var(--bb-color-sky-600);
945
1015
  --sky-color-icon-inverse: var(--bb-color-gray-1100);
1016
+ --sky-color-icon-on_prominent-base: var(--bb-color-white);
1017
+ --sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
1018
+ --sky-color-icon-on_status: var(--bb-color-white);
946
1019
  --sky-color-icon-selected: var(--bb-color-blue-600);
947
1020
  --sky-color-icon-success: var(--bb-color-green-700);
948
1021
  --sky-color-icon-warning: var(--bb-color-yellow-600);
@@ -951,22 +1024,24 @@
951
1024
  --sky-color-illustration-fill-softest: var(--bb-color-gray-900);
952
1025
  --sky-color-illustration-stroke: var(--bb-color-green-200);
953
1026
  --sky-color-text-action: var(--bb-color-sky-600);
954
- --sky-color-text-action_contrast: var(--bb-color-blue-300);
1027
+ --sky-color-text-action_contrast: var(--bb-color-blue-dark-200);
955
1028
  --sky-color-text-danger: var(--bb-color-red-400);
956
1029
  --sky-color-text-deemphasized: var(--bb-color-gray-300);
957
1030
  --sky-color-text-default: var(--bb-color-gray-25);
958
1031
  --sky-color-text-heading: var(--bb-color-gray-50);
959
1032
  --sky-color-text-inverse: var(--bb-color-gray-1100);
1033
+ --sky-color-text-on_prominent: var(--bb-color-white);
1034
+ --sky-color-text-on_status: var(--bb-color-gray-1000);
960
1035
  --sky-color-text-selected: var(--bb-color-blue-400);
961
1036
  --sky-color-viz-axis: var(--bb-color-gray-600);
962
- --sky-color-viz-category-1: var(--bb-color-teal-600);
963
- --sky-color-viz-category-2: var(--bb-color-purple-300);
964
- --sky-color-viz-category-3: var(--bb-color-blue-600);
965
- --sky-color-viz-category-4: var(--bb-color-sky-200);
966
- --sky-color-viz-category-5: var(--bb-color-orange-500);
967
- --sky-color-viz-category-6: var(--bb-color-red-300);
968
- --sky-color-viz-category-7: var(--bb-color-pink-500);
969
- --sky-color-viz-category-8: var(--bb-color-green-400);
1037
+ --sky-color-viz-category-1: var(--bb-color-teal-dark-600);
1038
+ --sky-color-viz-category-2: var(--bb-color-purple-dark-300);
1039
+ --sky-color-viz-category-3: var(--bb-color-blue-dark-600);
1040
+ --sky-color-viz-category-4: var(--bb-color-sky-dark-200);
1041
+ --sky-color-viz-category-5: var(--bb-color-orange-dark-500);
1042
+ --sky-color-viz-category-6: var(--bb-color-red-dark-300);
1043
+ --sky-color-viz-category-7: var(--bb-color-pink-dark-500);
1044
+ --sky-color-viz-category-8: var(--bb-color-green-dark-400);
970
1045
  --sky-color-viz-diverge-neg-1: var(--bb-color-red-1000);
971
1046
  --sky-color-viz-diverge-neg-10: var(--bb-color-red-100);
972
1047
  --sky-color-viz-diverge-neg-2: var(--bb-color-red-900);
@@ -1009,6 +1084,7 @@
1009
1084
  --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
1010
1085
  --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
1011
1086
  --sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
1087
+ --sky-color-background-action-tertiary-on_prominent-disabled: var(--sky-color-background-disabled);
1012
1088
  --sky-color-background-input-disabled: var(--sky-color-background-disabled);
1013
1089
  --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
1014
1090
  --sky-color-background-row-disabled: var(--sky-color-background-disabled);
@@ -1020,6 +1096,7 @@
1020
1096
  --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
1021
1097
  --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
1022
1098
  --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
1099
+ --sky-color-border-action-tertiary-on_prominent-disabled: var(--sky-color-border-disabled);
1023
1100
  --sky-color-border-input-disabled: var(--sky-color-border-disabled);
1024
1101
  --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
1025
1102
  --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
@@ -1685,6 +1762,8 @@
1685
1762
  --sky-size-picker_btn: var(--bb-size-fluid-200);
1686
1763
  --sky-size-progress_step: var(--bb-size-fluid-75);
1687
1764
  --sky-size-switch: var(--bb-size-fluid-125);
1765
+ --sky-size-text_underline-offset: var(--bb-size-fluid-12);
1766
+ --sky-size-text_underline-thickness: var(--bb-size-fluid-6);
1688
1767
  --sky-size-thumbnail-l: var(--bb-size-fixed-600);
1689
1768
  --sky-size-width-modal-l: var(--bb-size-fixed-6000);
1690
1769
  --sky-size-width-modal-m: var(--bb-size-fixed-4000);
@@ -1809,6 +1888,7 @@
1809
1888
  }
1810
1889
 
1811
1890
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
1891
+ --sky-font-text_decoration-inline_link-base: underline;
1812
1892
  --sky-border-style-container-overlay: var(--bb-border-style-solid);
1813
1893
  }
1814
1894
 
@@ -1889,6 +1969,7 @@
1889
1969
  --bb-color-blue-dark-1000: #00112b;
1890
1970
  --bb-color-blue-dark-200: #b4dbff;
1891
1971
  --bb-color-blue-dark-300: #83c1ff;
1972
+ --bb-color-blue-dark-375: #79adf1;
1892
1973
  --bb-color-blue-dark-400: #59a6ff;
1893
1974
  --bb-color-blue-dark-500: #2885ef;
1894
1975
  --bb-color-blue-dark-600: #0066cd;
@@ -2046,6 +2127,10 @@
2046
2127
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
2047
2128
  --bb-color-rgba-steel-fusion-100-5: rgba(243, 246, 249, 0.05);
2048
2129
  --bb-color-rgba-steel-fusion-1100-70: rgba(28, 34, 40, 0.7);
2130
+ --bb-color-rgba-steel-gray-100-10: rgba(245, 246, 247, 0.1);
2131
+ --bb-color-rgba-steel-gray-100-15: rgba(245, 246, 247, 0.15);
2132
+ --bb-color-rgba-steel-gray-100-25: rgba(245, 246, 247, 0.25);
2133
+ --bb-color-rgba-white-18: rgba(255, 255, 255, 0.18);
2049
2134
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
2050
2135
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
2051
2136
  --bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
@@ -2106,6 +2191,22 @@
2106
2191
  --bb-color-steel-fusion-700: #5e6770;
2107
2192
  --bb-color-steel-fusion-800: #4a5259;
2108
2193
  --bb-color-steel-fusion-900: #363d44;
2194
+ --bb-color-steel-gray-100: #f5f6f7;
2195
+ --bb-color-steel-gray-1000: #2e3135;
2196
+ --bb-color-steel-gray-1050: #25272a;
2197
+ --bb-color-steel-gray-1075: #222427;
2198
+ --bb-color-steel-gray-1100: #1f2224;
2199
+ --bb-color-steel-gray-1125: #1e2022;
2200
+ --bb-color-steel-gray-1150: #1c1e20;
2201
+ --bb-color-steel-gray-1200: #17191b;
2202
+ --bb-color-steel-gray-200: #e2e4e5;
2203
+ --bb-color-steel-gray-300: #cbcdcf;
2204
+ --bb-color-steel-gray-400: #b3b5b8;
2205
+ --bb-color-steel-gray-500: #979a9d;
2206
+ --bb-color-steel-gray-600: #7a7d81;
2207
+ --bb-color-steel-gray-700: #636669;
2208
+ --bb-color-steel-gray-800: #4e5154;
2209
+ --bb-color-steel-gray-900: #3a3c3f;
2109
2210
  --bb-color-teal-100: #dcf6f5;
2110
2211
  --bb-color-teal-1000: #022a28;
2111
2212
  --bb-color-teal-1100: #011e1d;
@@ -2186,15 +2287,15 @@
2186
2287
  --bb-font-weight-light: 300;
2187
2288
  --bb-font-weight-regular: 400;
2188
2289
  --bb-font-weight-semibold: 600;
2189
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/bb-logo.png');
2190
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-base-dark.svg');
2191
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-base-light.svg');
2192
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-bb-dark.svg');
2193
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-bb-light.svg');
2194
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
2195
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
2196
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
2197
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
2290
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/bb-logo.png');
2291
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-base-dark.svg');
2292
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-base-light.svg');
2293
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-bb-dark.svg');
2294
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-bb-light.svg');
2295
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
2296
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
2297
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
2298
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.8/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
2198
2299
  --bb-letter_spacing-normal: normal;
2199
2300
  --bb-letter_spacing-wider: 0.01rem;
2200
2301
  --bb-letter_spacing-widest: 0.046875rem;
@@ -2209,6 +2310,8 @@
2209
2310
  --bb-line_height-700: calc(32/24);
2210
2311
  --bb-line_height-800: calc(36/27);
2211
2312
  --bb-opacity-600: .6;
2313
+ --bb-shadow-slate-0: 0 0 0 0 rgba(0, 0, 0, 0);
2314
+ --bb-shadow-steel-fusion-0: 0 0 0 0 rgba(0, 0, 0, 0);
2212
2315
  --bb-size-0: 0rem;
2213
2316
  --bb-size-fixed-100: 16px;
2214
2317
  --bb-size-fixed-12: 2px;
@@ -2282,7 +2385,6 @@
2282
2385
  --bb-shadow-heavy-black-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
2283
2386
  --bb-shadow-heavy-black-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
2284
2387
  --bb-shadow-heavy-black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
2285
- --bb-shadow-slate-0: 0 0 0 0 rgba(33, 44, 63, 0);
2286
2388
  --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);
2287
2389
  --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);
2288
2390
  --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);
@@ -2292,6 +2394,25 @@
2292
2394
  --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);
2293
2395
  --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);
2294
2396
  --bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
2397
+ --bb-shadow-steel-fusion-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
2398
+ --bb-shadow-steel-fusion-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
2399
+ --bb-shadow-steel-fusion-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
2400
+ --bb-shadow-steel-fusion-2400: 0 11px 15px -7px rgba(0, 0, 0, 0.34), 0 9px 46px 8px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.24);
2401
+ --bb-shadow-steel-fusion-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
2402
+ --bb-shadow-steel-fusion-400: 0 2px 4px -1px rgba(0, 0, 0, 0.24), 0 1px 10px 0 rgba(0, 0, 0, 0.16), 0 4px 5px 0 rgba(0, 0, 0, 0.21);
2403
+ --bb-shadow-steel-fusion-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
2404
+ --bb-shadow-steel-fusion-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
2405
+ --bb-shadow-steel-fusion-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
2406
+ --bb-shadow-steel-gray-0: 0 0 0 0 rgba(33, 44, 63, 0);
2407
+ --bb-shadow-steel-gray-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
2408
+ --bb-shadow-steel-gray-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
2409
+ --bb-shadow-steel-gray-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
2410
+ --bb-shadow-steel-gray-2400: 0 11px 15px -7px rgba(0, 0, 0, 0.34), 0 9px 46px 8px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.24);
2411
+ --bb-shadow-steel-gray-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
2412
+ --bb-shadow-steel-gray-400: 0 2px 4px -1px rgba(0, 0, 0, 0.24), 0 1px 10px 0 rgba(0, 0, 0, 0.16), 0 4px 5px 0 rgba(0, 0, 0, 0.21);
2413
+ --bb-shadow-steel-gray-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
2414
+ --bb-shadow-steel-gray-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
2415
+ --bb-shadow-steel-gray-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
2295
2416
  }
2296
2417
 
2297
2418
  :root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud) {
@@ -2327,46 +2448,46 @@
2327
2448
  --sky-color-illustration-fill-softest: var(--bb-color-white);
2328
2449
  --sky-color-illustration-stroke: var(--bb-color-brand-trusted_blue);
2329
2450
  --sky-color-text-heading: var(--bb-color-blue-900);
2451
+ --sky-elevation-action-danger-active: var(--bb-shadow-slate-0);
2452
+ --sky-elevation-action-danger-disabled: var(--bb-shadow-slate-0);
2453
+ --sky-elevation-action-input-disabled: var(--bb-shadow-slate-0);
2454
+ --sky-elevation-action-primary-active: var(--bb-shadow-slate-0);
2455
+ --sky-elevation-action-primary-disabled: var(--bb-shadow-slate-0);
2456
+ --sky-elevation-action-secondary-active: var(--bb-shadow-slate-0);
2457
+ --sky-elevation-action-secondary-disabled: var(--bb-shadow-slate-0);
2458
+ --sky-elevation-action-tertiary-active: var(--bb-shadow-slate-0);
2459
+ --sky-elevation-action-tertiary-base: var(--bb-shadow-slate-0);
2460
+ --sky-elevation-action-tertiary-disabled: var(--bb-shadow-slate-0);
2461
+ --sky-elevation-action-tertiary-focus: var(--bb-shadow-slate-0);
2462
+ --sky-elevation-action-toolbar-active: var(--bb-shadow-slate-0);
2463
+ --sky-elevation-action-toolbar-base: var(--bb-shadow-slate-0);
2464
+ --sky-elevation-action-toolbar-disabled: var(--bb-shadow-slate-0);
2465
+ --sky-elevation-action-toolbar-focus: var(--bb-shadow-slate-0);
2466
+ --sky-elevation-input-disabled: var(--bb-shadow-slate-0);
2467
+ --sky-elevation-none: var(--bb-shadow-slate-0);
2330
2468
  --sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
2331
2469
  --sky-image-select_icon-base: var(--bb-image-select_icon-bb-light-src);
2332
2470
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-light-src);
2333
2471
  --sky-opacity-wait: var(--bb-opacity-600);
2334
2472
  --sky-color-background-selected-switch-base: var(--bb-color-gradient-blue);
2335
2473
  --sky-color-border-action-accent-base: var(--bb-color-gradient-brand-secondary);
2336
- --sky-elevation-action-danger-active: var(--bb-shadow-slate-0);
2337
2474
  --sky-elevation-action-danger-base: var(--bb-shadow-slate-50);
2338
- --sky-elevation-action-danger-disabled: var(--bb-shadow-slate-0);
2339
2475
  --sky-elevation-action-danger-focus: var(--bb-shadow-slate-50);
2340
2476
  --sky-elevation-action-danger-hover: var(--bb-shadow-slate-50);
2341
2477
  --sky-elevation-action-input-active: var(--bb-shadow-slate-25);
2342
2478
  --sky-elevation-action-input-base: var(--bb-shadow-slate-25);
2343
- --sky-elevation-action-input-disabled: var(--bb-shadow-slate-0);
2344
2479
  --sky-elevation-action-input-focus: var(--bb-shadow-slate-25);
2345
2480
  --sky-elevation-action-input-hover: var(--bb-shadow-slate-25);
2346
- --sky-elevation-action-primary-active: var(--bb-shadow-slate-0);
2347
2481
  --sky-elevation-action-primary-base: var(--bb-shadow-slate-50);
2348
- --sky-elevation-action-primary-disabled: var(--bb-shadow-slate-0);
2349
2482
  --sky-elevation-action-primary-focus: var(--bb-shadow-slate-50);
2350
2483
  --sky-elevation-action-primary-hover: var(--bb-shadow-slate-50);
2351
- --sky-elevation-action-secondary-active: var(--bb-shadow-slate-0);
2352
2484
  --sky-elevation-action-secondary-base: var(--bb-shadow-slate-50);
2353
- --sky-elevation-action-secondary-disabled: var(--bb-shadow-slate-0);
2354
2485
  --sky-elevation-action-secondary-focus: var(--bb-shadow-slate-50);
2355
2486
  --sky-elevation-action-secondary-hover: var(--bb-shadow-slate-50);
2356
- --sky-elevation-action-tertiary-active: var(--bb-shadow-slate-0);
2357
- --sky-elevation-action-tertiary-base: var(--bb-shadow-slate-0);
2358
- --sky-elevation-action-tertiary-disabled: var(--bb-shadow-slate-0);
2359
- --sky-elevation-action-tertiary-focus: var(--bb-shadow-slate-0);
2360
2487
  --sky-elevation-action-tertiary-hover: var(--bb-shadow-slate-50);
2361
- --sky-elevation-action-toolbar-active: var(--bb-shadow-slate-0);
2362
- --sky-elevation-action-toolbar-base: var(--bb-shadow-slate-0);
2363
- --sky-elevation-action-toolbar-disabled: var(--bb-shadow-slate-0);
2364
- --sky-elevation-action-toolbar-focus: var(--bb-shadow-slate-0);
2365
2488
  --sky-elevation-action-toolbar-hover: var(--bb-shadow-slate-50);
2366
2489
  --sky-elevation-focus: var(--bb-shadow-slate-200);
2367
2490
  --sky-elevation-input-base: var(--bb-shadow-slate-25);
2368
- --sky-elevation-input-disabled: var(--bb-shadow-slate-0);
2369
- --sky-elevation-none: var(--bb-shadow-slate-0);
2370
2491
  --sky-elevation-overflow: var(--bb-shadow-slate-200);
2371
2492
  --sky-elevation-overlay-100: var(--bb-shadow-slate-400);
2372
2493
  --sky-elevation-overlay-200: var(--bb-shadow-slate-800);
@@ -2377,52 +2498,58 @@
2377
2498
  }
2378
2499
 
2379
2500
  .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-dark {
2380
- --sky-color-background-action-accent-active: var(--bb-color-steel-fusion-1000);
2381
- --sky-color-background-action-accent-base: var(--bb-color-steel-fusion-1100);
2382
- --sky-color-background-action-accent-focus: var(--bb-color-steel-fusion-1000);
2383
- --sky-color-background-action-accent-hover: var(--bb-color-steel-fusion-1000);
2384
- --sky-color-background-action-danger-active: var(--bb-color-red-600);
2385
- --sky-color-background-action-danger-base: var(--bb-color-red-600);
2501
+ --sky-color-background-action-accent-active: var(--bb-color-steel-gray-1000);
2502
+ --sky-color-background-action-accent-base: var(--bb-color-steel-gray-1100);
2503
+ --sky-color-background-action-accent-focus: var(--bb-color-steel-gray-1000);
2504
+ --sky-color-background-action-accent-hover: var(--bb-color-steel-gray-1000);
2505
+ --sky-color-background-action-danger-active: var(--bb-color-red-dark-300);
2506
+ --sky-color-background-action-danger-base: var(--bb-color-red-dark-400);
2386
2507
  --sky-color-background-action-danger-disabled: var(--bb-color-gray-700);
2387
- --sky-color-background-action-danger-focus: var(--bb-color-red-600);
2388
- --sky-color-background-action-danger-hover: var(--bb-color-red-600);
2508
+ --sky-color-background-action-danger-focus: var(--bb-color-red-dark-300);
2509
+ --sky-color-background-action-danger-hover: var(--bb-color-red-dark-300);
2389
2510
  --sky-color-background-action-input-active: var(--bb-color-transparent);
2390
2511
  --sky-color-background-action-input-base: var(--bb-color-transparent);
2391
2512
  --sky-color-background-action-input-disabled: var(--bb-color-gray-700);
2392
2513
  --sky-color-background-action-input-focus: var(--bb-color-transparent);
2393
2514
  --sky-color-background-action-input-hover: var(--bb-color-transparent);
2394
- --sky-color-background-action-primary-active: var(--bb-color-oklch-blue-375);
2395
- --sky-color-background-action-primary-base: var(--bb-color-blue-400);
2515
+ --sky-color-background-action-primary-active: var(--bb-color-blue-dark-400);
2516
+ --sky-color-background-action-primary-base: var(--bb-color-blue-dark-375);
2396
2517
  --sky-color-background-action-primary-disabled: var(--bb-color-gray-700);
2397
- --sky-color-background-action-primary-focus: var(--bb-color-oklch-blue-375);
2398
- --sky-color-background-action-primary-hover: var(--bb-color-oklch-blue-375);
2518
+ --sky-color-background-action-primary-focus: var(--bb-color-blue-dark-400);
2519
+ --sky-color-background-action-primary-hover: var(--bb-color-blue-dark-300);
2399
2520
  --sky-color-background-action-secondary-active: var(--bb-color-transparent);
2400
- --sky-color-background-action-secondary-base: var(--bb-color-rgba-steel-fusion-100-5);
2401
- --sky-color-background-action-secondary-disabled: var(--bb-color-steel-fusion-700);
2521
+ --sky-color-background-action-secondary-base: var(--bb-color-rgba-steel-gray-100-10);
2522
+ --sky-color-background-action-secondary-disabled: var(--bb-color-steel-gray-700);
2402
2523
  --sky-color-background-action-secondary-focus: var(--bb-color-transparent);
2403
- --sky-color-background-action-secondary-hover: var(--bb-color-steel-fusion-1000);
2524
+ --sky-color-background-action-secondary-hover: var(--bb-color-rgba-steel-gray-100-15);
2404
2525
  --sky-color-background-action-tertiary-active: var(--bb-color-transparent);
2405
2526
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
2406
2527
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
2407
2528
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
2408
2529
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
2530
+ --sky-color-background-action-tertiary-on_prominent-active: var(--bb-color-slate-600);
2531
+ --sky-color-background-action-tertiary-on_prominent-base: var(--bb-color-transparent);
2532
+ --sky-color-background-action-tertiary-on_prominent-focus: var(--bb-color-transparent);
2533
+ --sky-color-background-action-tertiary-on_prominent-hover: var(--bb-color-slate-700);
2409
2534
  --sky-color-background-blocking: var(--bb-color-rgba-steel-fusion-1100-70);
2410
- --sky-color-background-container-backdrop: var(--bb-color-steel-fusion-1000);
2411
- --sky-color-background-container-base: var(--bb-color-steel-fusion-1100);
2412
- --sky-color-background-container-danger: var(--bb-color-rgba-red-dark-600-35);
2413
- --sky-color-background-container-dimmed: var(--bb-color-steel-fusion-1050);
2414
- --sky-color-background-container-info: var(--bb-color-rgba-blue-600-35);
2415
- --sky-color-background-container-menu: var(--bb-color-steel-fusion-1000);
2416
- --sky-color-background-container-success: var(--bb-color-rgba-green-600-35);
2417
- --sky-color-background-container-warning: var(--bb-color-rgba-yellow-dark-600-35);
2535
+ --sky-color-background-container-backdrop: var(--bb-color-steel-gray-1000);
2536
+ --sky-color-background-container-base: var(--bb-color-steel-gray-1050);
2537
+ --sky-color-background-container-danger: var(--bb-color-red-dark-400);
2538
+ --sky-color-background-container-dimmed: var(--bb-color-steel-gray-1100);
2539
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
2540
+ --sky-color-background-container-info: var(--bb-color-blue-dark-400);
2541
+ --sky-color-background-container-menu: var(--bb-color-steel-gray-900);
2542
+ --sky-color-background-container-prominent: var(--bb-color-steel-gray-1125);
2543
+ --sky-color-background-container-success: var(--bb-color-green-dark-400);
2544
+ --sky-color-background-container-warning: var(--bb-color-yellow-dark-400);
2418
2545
  --sky-color-background-disabled: var(--bb-color-gray-700);
2419
2546
  --sky-color-background-file_drop: var(--bb-color-gray-1000);
2420
- --sky-color-background-icon_matte-action-heavy: var(--bb-color-oklch-blue-375);
2421
- --sky-color-background-icon_matte-action-soft: var(--bb-color-rgba-blue-600-25);
2422
- --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
2423
- --sky-color-background-icon_matte-info: var(--bb-color-blue-500);
2424
- --sky-color-background-icon_matte-success: var(--bb-color-green-500);
2425
- --sky-color-background-icon_matte-warning: var(--bb-color-yellow-500);
2547
+ --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-dark-400);
2548
+ --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-dark-900);
2549
+ --sky-color-background-icon_matte-danger: var(--bb-color-red-dark-600);
2550
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-dark-600);
2551
+ --sky-color-background-icon_matte-success: var(--bb-color-green-dark-700);
2552
+ --sky-color-background-icon_matte-warning: var(--bb-color-yellow-dark-600);
2426
2553
  --sky-color-background-input-base: var(--bb-color-rgba-white-5);
2427
2554
  --sky-color-background-input-disabled: var(--bb-color-gray-700);
2428
2555
  --sky-color-background-nav-active: var(--bb-color-transparent);
@@ -2430,20 +2557,20 @@
2430
2557
  --sky-color-background-nav-disabled: var(--bb-color-gray-700);
2431
2558
  --sky-color-background-nav-focus: var(--bb-color-transparent);
2432
2559
  --sky-color-background-nav-hover: var(--bb-color-transparent);
2433
- --sky-color-background-page: var(--bb-color-steel-fusion-1200);
2560
+ --sky-color-background-page: var(--bb-color-steel-gray-1200);
2434
2561
  --sky-color-background-row-active: var(--bb-color-transparent);
2435
- --sky-color-background-row-base: var(--bb-color-gray-1000);
2562
+ --sky-color-background-row-base: var(--bb-color-steel-gray-1050);
2436
2563
  --sky-color-background-row-disabled: var(--bb-color-gray-700);
2437
2564
  --sky-color-background-row-focus: var(--bb-color-transparent);
2438
2565
  --sky-color-background-row-hover: var(--bb-color-transparent);
2439
2566
  --sky-color-background-scrim: var(--bb-color-scrim-heavy);
2440
- --sky-color-background-selected-danger: var(--bb-color-red-900);
2441
- --sky-color-background-selected-heavy: var(--bb-color-blue-700);
2442
- --sky-color-background-selected-soft: var(--bb-color-rgba-blue-600-25);
2443
- --sky-color-background-selected-success: var(--bb-color-green-900);
2567
+ --sky-color-background-selected-danger: var(--bb-color-red-dark-900);
2568
+ --sky-color-background-selected-heavy: var(--bb-color-blue-dark-800);
2569
+ --sky-color-background-selected-soft: var(--bb-color-blue-dark-900);
2570
+ --sky-color-background-selected-success: var(--bb-color-green-dark-900);
2444
2571
  --sky-color-background-selected-switch-base: var(--bb-color-blue-400);
2445
- --sky-color-background-selected-switch-disabled: var(--bb-color-gray-700);
2446
- --sky-color-background-selected-warning: var(--bb-color-yellow-900);
2572
+ --sky-color-background-selected-switch-disabled: var(--bb-color-steel-gray-700);
2573
+ --sky-color-background-selected-warning: var(--bb-color-yellow-dark-900);
2447
2574
  --sky-color-background-tab-active: var(--bb-color-transparent);
2448
2575
  --sky-color-background-tab-base: var(--bb-color-transparent);
2449
2576
  --sky-color-background-tab-disabled: var(--bb-color-gray-700);
@@ -2454,76 +2581,82 @@
2454
2581
  --sky-color-background-text_highlight: var(--bb-color-yellow-800);
2455
2582
  --sky-color-background-thumb-base: var(--bb-color-white);
2456
2583
  --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
2457
- --sky-color-background-thumbnail_matte: var(--bb-color-white);
2458
- --sky-color-border-action-accent-hover: var(--bb-color-oklch-blue-375);
2459
- --sky-color-border-action-danger-active: var(--bb-color-red-200);
2460
- --sky-color-border-action-danger-base: var(--bb-color-red-600);
2584
+ --sky-color-background-thumbnail_matte: var(--bb-color-rgba-steel-gray-100-25);
2585
+ --sky-color-border-action-accent-hover: var(--bb-color-blue-dark-400);
2586
+ --sky-color-border-action-danger-active: var(--bb-color-red-dark-300);
2587
+ --sky-color-border-action-danger-base: var(--bb-color-red-dark-400);
2461
2588
  --sky-color-border-action-danger-disabled: var(--bb-color-gray-800);
2462
- --sky-color-border-action-danger-focus: var(--bb-color-red-200);
2463
- --sky-color-border-action-danger-hover: var(--bb-color-red-200);
2464
- --sky-color-border-action-input-active: var(--bb-color-oklch-blue-375);
2465
- --sky-color-border-action-input-base: var(--bb-color-oklch-blue-375);
2589
+ --sky-color-border-action-danger-focus: var(--bb-color-red-dark-300);
2590
+ --sky-color-border-action-danger-hover: var(--bb-color-red-dark-300);
2591
+ --sky-color-border-action-input-active: var(--bb-color-blue-dark-400);
2592
+ --sky-color-border-action-input-base: var(--bb-color-steel-gray-800);
2466
2593
  --sky-color-border-action-input-disabled: var(--bb-color-gray-800);
2467
- --sky-color-border-action-input-focus: var(--bb-color-oklch-blue-375);
2468
- --sky-color-border-action-input-hover: var(--bb-color-oklch-blue-375);
2469
- --sky-color-border-action-primary-active: var(--bb-color-oklch-blue-375);
2470
- --sky-color-border-action-primary-base: var(--bb-color-oklch-blue-375);
2594
+ --sky-color-border-action-input-focus: var(--bb-color-blue-dark-400);
2595
+ --sky-color-border-action-input-hover: var(--bb-color-blue-dark-400);
2596
+ --sky-color-border-action-primary-active: var(--bb-color-blue-dark-400);
2597
+ --sky-color-border-action-primary-base: var(--bb-color-blue-dark-375);
2471
2598
  --sky-color-border-action-primary-disabled: var(--bb-color-gray-800);
2472
- --sky-color-border-action-primary-focus: var(--bb-color-oklch-blue-375);
2473
- --sky-color-border-action-primary-hover: var(--bb-color-oklch-blue-375);
2474
- --sky-color-border-action-secondary-active: var(--bb-color-blue-500);
2475
- --sky-color-border-action-secondary-base: var(--bb-color-steel-fusion-600);
2476
- --sky-color-border-action-secondary-disabled: var(--bb-color-gray-800);
2477
- --sky-color-border-action-secondary-focus: var(--bb-color-blue-500);
2478
- --sky-color-border-action-secondary-hover: var(--bb-color-oklch-blue-375);
2479
- --sky-color-border-action-tertiary-active: var(--bb-color-oklch-blue-375);
2599
+ --sky-color-border-action-primary-focus: var(--bb-color-blue-dark-400);
2600
+ --sky-color-border-action-primary-hover: var(--bb-color-steel-gray-100);
2601
+ --sky-color-border-action-secondary-active: var(--bb-color-blue-dark-375);
2602
+ --sky-color-border-action-secondary-base: var(--bb-color-steel-gray-700);
2603
+ --sky-color-border-action-secondary-disabled: var(--bb-color-steel-gray-800);
2604
+ --sky-color-border-action-secondary-focus: var(--bb-color-blue-dark-375);
2605
+ --sky-color-border-action-secondary-hover: var(--bb-color-blue-dark-375);
2606
+ --sky-color-border-action-tertiary-active: var(--bb-color-blue-dark-400);
2480
2607
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
2481
2608
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
2482
- --sky-color-border-action-tertiary-focus: var(--bb-color-oklch-blue-375);
2483
- --sky-color-border-action-tertiary-hover: var(--bb-color-oklch-blue-375);
2609
+ --sky-color-border-action-tertiary-focus: var(--bb-color-blue-dark-400);
2610
+ --sky-color-border-action-tertiary-hover: var(--bb-color-blue-dark-400);
2611
+ --sky-color-border-action-tertiary-on_prominent-active: var(--bb-color-blue-300);
2612
+ --sky-color-border-action-tertiary-on_prominent-base: var(--bb-color-transparent);
2613
+ --sky-color-border-action-tertiary-on_prominent-focus: var(--bb-color-blue-300);
2614
+ --sky-color-border-action-tertiary-on_prominent-hover: var(--bb-color-blue-300);
2484
2615
  --sky-color-border-column_divider: var(--bb-color-blue-400);
2485
- --sky-color-border-container-base: var(--bb-color-steel-fusion-800);
2486
- --sky-color-border-danger: var(--bb-color-red-600);
2616
+ --sky-color-border-container-base: var(--bb-color-rgba-white-18);
2617
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
2618
+ --sky-color-border-danger: var(--bb-color-red-dark-700);
2487
2619
  --sky-color-border-disabled: var(--bb-color-gray-800);
2488
- --sky-color-border-divider: var(--bb-color-gray-700);
2489
- --sky-color-border-elevation: var(--bb-color-steel-fusion-800);
2490
- --sky-color-border-info: var(--bb-color-blue-400);
2491
- --sky-color-border-input-active: var(--bb-color-oklch-blue-375);
2492
- --sky-color-border-input-base: var(--bb-color-steel-fusion-800);
2493
- --sky-color-border-input-disabled: var(--bb-color-gray-400);
2620
+ --sky-color-border-divider: var(--bb-color-rgba-white-18);
2621
+ --sky-color-border-elevation: var(--bb-color-rgba-white-18);
2622
+ --sky-color-border-info: var(--bb-color-blue-dark-600);
2623
+ --sky-color-border-input-active: var(--bb-color-blue-dark-400);
2624
+ --sky-color-border-input-base: var(--bb-color-steel-gray-800);
2625
+ --sky-color-border-input-disabled: var(--bb-color-steel-gray-400);
2494
2626
  --sky-color-border-input-error: var(--bb-color-red-600);
2495
- --sky-color-border-input-focus: var(--bb-color-oklch-blue-375);
2496
- --sky-color-border-input-hover: var(--bb-color-oklch-blue-375);
2497
- --sky-color-border-nav-active: var(--bb-color-oklch-blue-375);
2627
+ --sky-color-border-input-focus: var(--bb-color-blue-dark-400);
2628
+ --sky-color-border-input-hover: var(--bb-color-blue-dark-400);
2629
+ --sky-color-border-nav-active: var(--bb-color-blue-dark-375);
2498
2630
  --sky-color-border-nav-base: var(--bb-color-transparent);
2499
- --sky-color-border-nav-disabled: var(--bb-color-gray-800);
2500
- --sky-color-border-nav-focus: var(--bb-color-oklch-blue-375);
2501
- --sky-color-border-nav-hover: var(--bb-color-oklch-blue-375);
2631
+ --sky-color-border-nav-disabled: var(--bb-color-steel-gray-1000);
2632
+ --sky-color-border-nav-focus: var(--bb-color-blue-dark-375);
2633
+ --sky-color-border-nav-hover: var(--bb-color-blue-dark-375);
2502
2634
  --sky-color-border-progress_step: var(--bb-color-gray-600);
2503
2635
  --sky-color-border-selected: var(--bb-color-blue-400);
2504
- --sky-color-border-selected_soft: var(--bb-color-blue-600);
2505
- --sky-color-border-separator-light: var(--bb-color-gray-700);
2506
- --sky-color-border-separator-row: var(--bb-color-gray-800);
2507
- --sky-color-border-success: var(--bb-color-green-500);
2508
- --sky-color-border-switch-active: var(--bb-color-oklch-blue-375);
2509
- --sky-color-border-switch-base: var(--bb-color-oklch-blue-375);
2510
- --sky-color-border-switch-disabled: var(--bb-color-gray-400);
2636
+ --sky-color-border-selected_soft: var(--bb-color-blue-400);
2637
+ --sky-color-border-separator-dark: var(--bb-color-rgba-white-18);
2638
+ --sky-color-border-separator-light: var(--bb-color-rgba-white-18);
2639
+ --sky-color-border-separator-row: var(--bb-color-rgba-white-18);
2640
+ --sky-color-border-success: var(--bb-color-green-dark-700);
2641
+ --sky-color-border-switch-active: var(--bb-color-blue-dark-400);
2642
+ --sky-color-border-switch-base: var(--bb-color-steel-gray-500);
2643
+ --sky-color-border-switch-disabled: var(--bb-color-steel-gray-400);
2511
2644
  --sky-color-border-switch-error: var(--bb-color-red-600);
2512
- --sky-color-border-switch-focus: var(--bb-color-oklch-blue-375);
2513
- --sky-color-border-switch-hover: var(--bb-color-oklch-blue-375);
2645
+ --sky-color-border-switch-focus: var(--bb-color-blue-dark-400);
2646
+ --sky-color-border-switch-hover: var(--bb-color-blue-dark-400);
2514
2647
  --sky-color-border-switch-selected-active: var(--bb-color-blue-900);
2515
2648
  --sky-color-border-switch-selected-base: var(--bb-color-transparent);
2516
- --sky-color-border-switch-selected-disabled: var(--bb-color-gray-400);
2517
- --sky-color-border-switch-selected-focus: var(--bb-color-blue-900);
2518
- --sky-color-border-switch-selected-hover: var(--bb-color-oklch-blue-375);
2519
- --sky-color-border-tab-active: var(--bb-color-oklch-blue-375);
2649
+ --sky-color-border-switch-selected-disabled: var(--bb-color-steel-gray-400);
2650
+ --sky-color-border-switch-selected-focus: var(--bb-color-blue-dark-900);
2651
+ --sky-color-border-switch-selected-hover: var(--bb-color-blue-dark-300);
2652
+ --sky-color-border-tab-active: var(--bb-color-blue-dark-300);
2520
2653
  --sky-color-border-tab-base: var(--bb-color-transparent);
2521
- --sky-color-border-tab-disabled: var(--bb-color-gray-800);
2522
- --sky-color-border-tab-focus: var(--bb-color-oklch-blue-375);
2523
- --sky-color-border-tab-hover: var(--bb-color-oklch-blue-375);
2654
+ --sky-color-border-tab-disabled: var(--bb-color-steel-gray-800);
2655
+ --sky-color-border-tab-focus: var(--bb-color-blue-dark-400);
2656
+ --sky-color-border-tab-hover: var(--bb-color-blue-dark-300);
2524
2657
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
2525
2658
  --sky-color-border-text_highlight: var(--bb-color-yellow-600);
2526
- --sky-color-border-warning: var(--bb-color-yellow-500);
2659
+ --sky-color-border-warning: var(--bb-color-yellow-dark-600);
2527
2660
  --sky-color-classify-1-heavy: var(--bb-color-teal-dark-300);
2528
2661
  --sky-color-classify-1-soft: var(--bb-color-teal-dark-700);
2529
2662
  --sky-color-classify-2-heavy: var(--bb-color-purple-dark-300);
@@ -2538,42 +2671,49 @@
2538
2671
  --sky-color-classify-6-soft: var(--bb-color-green-dark-700);
2539
2672
  --sky-color-classify-7-heavy: var(--bb-color-red-dark-300);
2540
2673
  --sky-color-classify-7-soft: var(--bb-color-red-dark-700);
2541
- --sky-color-icon-action: var(--bb-color-oklch-blue-375);
2542
- --sky-color-icon-danger: var(--bb-color-red-600);
2543
- --sky-color-icon-deemphasized: var(--bb-color-steel-fusion-400);
2544
- --sky-color-icon-default: var(--bb-color-steel-fusion-100);
2545
- --sky-color-icon-info: var(--bb-color-blue-600);
2674
+ --sky-color-icon-action: var(--bb-color-blue-dark-400);
2675
+ --sky-color-icon-danger: var(--bb-color-red-dark-400);
2676
+ --sky-color-icon-deemphasized: var(--bb-color-steel-gray-400);
2677
+ --sky-color-icon-default: var(--bb-color-steel-gray-100);
2678
+ --sky-color-icon-info: var(--bb-color-blue-dark-400);
2546
2679
  --sky-color-icon-input-action: var(--bb-color-oklch-blue-375);
2547
- --sky-color-icon-inverse: var(--bb-color-black);
2548
- --sky-color-icon-selected: var(--bb-color-oklch-blue-375);
2549
- --sky-color-icon-success: var(--bb-color-green-600);
2550
- --sky-color-icon-warning: var(--bb-color-yellow-600);
2680
+ --sky-color-icon-inverse: var(--bb-color-steel-gray-1100);
2681
+ --sky-color-icon-on_prominent-base: var(--bb-color-white);
2682
+ --sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
2683
+ --sky-color-icon-on_status: var(--bb-color-white);
2684
+ --sky-color-icon-selected: var(--bb-color-blue-dark-300);
2685
+ --sky-color-icon-success: var(--bb-color-green-dark-400);
2686
+ --sky-color-icon-warning: var(--bb-color-yellow-dark-400);
2551
2687
  --sky-color-illustration-fill-heavy: var(--bb-color-green-700);
2552
2688
  --sky-color-illustration-fill-soft: var(--bb-color-green-900);
2553
2689
  --sky-color-illustration-fill-softest: var(--bb-color-gray-900);
2554
2690
  --sky-color-illustration-stroke: var(--bb-color-green-200);
2555
- --sky-color-text-action: var(--bb-color-oklch-blue-375);
2556
- --sky-color-text-action_contrast: var(--bb-color-oklch-blue-375);
2557
- --sky-color-text-danger: var(--bb-color-red-400);
2558
- --sky-color-text-deemphasized: var(--bb-color-steel-fusion-400);
2559
- --sky-color-text-default: var(--bb-color-steel-fusion-200);
2560
- --sky-color-text-heading: var(--bb-color-steel-fusion-100);
2561
- --sky-color-text-inverse: var(--bb-color-black);
2562
- --sky-color-text-selected: var(--bb-color-oklch-blue-375);
2691
+ --sky-color-text-action: var(--bb-color-blue-dark-375);
2692
+ --sky-color-text-action_contrast: var(--bb-color-blue-dark-200);
2693
+ --sky-color-text-danger: var(--bb-color-red-dark-400);
2694
+ --sky-color-text-deemphasized: var(--bb-color-steel-gray-400);
2695
+ --sky-color-text-default: var(--bb-color-steel-gray-200);
2696
+ --sky-color-text-heading: var(--bb-color-steel-gray-100);
2697
+ --sky-color-text-inverse: var(--bb-color-steel-gray-1100);
2698
+ --sky-color-text-on_prominent: var(--bb-color-white);
2699
+ --sky-color-text-on_status: var(--bb-color-gray-1000);
2700
+ --sky-color-text-selected: var(--bb-color-steel-gray-100);
2563
2701
  --sky-image-select_icon-base: var(--bb-image-select_icon-bb-dark-src);
2564
2702
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-dark-src);
2565
2703
  --sky-opacity-wait: var(--bb-opacity-600);
2566
2704
  --sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
2705
+ --sky-color-background-action-tertiary-on_prominent-disabled: var(--sky-color-background-disabled);
2567
2706
  --sky-color-border-action-accent-base: var(--bb-color-gradient-brand-secondary);
2568
- --sky-elevation-focus: var(--bb-shadow-heavy-black-200);
2569
- --sky-elevation-none: var(--bb-shadow-heavy-black-0);
2570
- --sky-elevation-overflow: var(--bb-shadow-heavy-black-200);
2571
- --sky-elevation-overlay-100: var(--bb-shadow-heavy-black-400);
2572
- --sky-elevation-overlay-200: var(--bb-shadow-heavy-black-800);
2573
- --sky-elevation-overlay-300: var(--bb-shadow-heavy-black-1600);
2574
- --sky-elevation-overlay-400: var(--bb-shadow-heavy-black-2400);
2575
- --sky-elevation-overlay-simple-100: var(--bb-shadow-heavy-black-simple-400);
2576
- --sky-elevation-raised-100: var(--bb-shadow-heavy-black-100);
2707
+ --sky-color-border-action-tertiary-on_prominent-disabled: var(--sky-color-border-disabled);
2708
+ --sky-elevation-focus: var(--bb-shadow-steel-gray-200);
2709
+ --sky-elevation-none: var(--bb-shadow-steel-gray-0);
2710
+ --sky-elevation-overflow: var(--bb-shadow-steel-gray-200);
2711
+ --sky-elevation-overlay-100: var(--bb-shadow-steel-gray-400);
2712
+ --sky-elevation-overlay-200: var(--bb-shadow-steel-gray-800);
2713
+ --sky-elevation-overlay-300: var(--bb-shadow-steel-gray-1600);
2714
+ --sky-elevation-overlay-400: var(--bb-shadow-steel-gray-2400);
2715
+ --sky-elevation-overlay-simple-100: var(--bb-shadow-steel-gray-simple-400);
2716
+ --sky-elevation-raised-100: var(--bb-shadow-steel-gray-100);
2577
2717
  }
2578
2718
 
2579
2719
  :root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-dark) {
@@ -2682,6 +2822,7 @@
2682
2822
  .sky-theme-modern .sky-btn-link,
2683
2823
  .sky-theme-modern .sky-btn-borderless,
2684
2824
  .sky-theme-modern .sky-btn-icon-borderless,
2825
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent,
2685
2826
  .sky-theme-modern .sky-btn-icon,
2686
2827
  .sky-theme-modern .sky-btn-link-inline,
2687
2828
  .sky-theme-modern .sky-btn-borderless-inline {
@@ -2694,6 +2835,7 @@
2694
2835
  .sky-theme-modern .sky-btn-link:hover,
2695
2836
  .sky-theme-modern .sky-btn-borderless:hover,
2696
2837
  .sky-theme-modern .sky-btn-icon-borderless:hover,
2838
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent:hover,
2697
2839
  .sky-theme-modern .sky-btn-icon:hover,
2698
2840
  .sky-theme-modern .sky-btn-link-inline:hover,
2699
2841
  .sky-theme-modern .sky-btn-borderless-inline:hover {
@@ -2760,6 +2902,18 @@
2760
2902
  .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-focus,
2761
2903
  .sky-theme-modern .sky-btn-icon-borderless[disabled]:active,
2762
2904
  .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-active,
2905
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled,
2906
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:hover,
2907
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:focus-visible,
2908
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled.sky-btn-focus,
2909
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:active,
2910
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled.sky-btn-active,
2911
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled],
2912
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled]:hover,
2913
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled]:focus-visible,
2914
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled].sky-btn-focus,
2915
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled]:active,
2916
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled].sky-btn-active,
2763
2917
  .sky-theme-modern .sky-btn-icon.sky-btn-disabled,
2764
2918
  .sky-theme-modern .sky-btn-icon.sky-btn-disabled:hover,
2765
2919
  .sky-theme-modern .sky-btn-icon.sky-btn-disabled:focus-visible,
@@ -2861,6 +3015,18 @@
2861
3015
  .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-focus.sky-btn-link-inline,
2862
3016
  .sky-theme-modern .sky-btn-icon-borderless[disabled]:active.sky-btn-link-inline,
2863
3017
  .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-active.sky-btn-link-inline,
3018
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled.sky-btn-link-inline,
3019
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:hover.sky-btn-link-inline,
3020
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:focus-visible.sky-btn-link-inline,
3021
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled.sky-btn-focus.sky-btn-link-inline,
3022
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:active.sky-btn-link-inline,
3023
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled.sky-btn-active.sky-btn-link-inline,
3024
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled].sky-btn-link-inline,
3025
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled]:hover.sky-btn-link-inline,
3026
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled]:focus-visible.sky-btn-link-inline,
3027
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled].sky-btn-focus.sky-btn-link-inline,
3028
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled]:active.sky-btn-link-inline,
3029
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled].sky-btn-active.sky-btn-link-inline,
2864
3030
  .sky-theme-modern .sky-btn-icon.sky-btn-disabled.sky-btn-link-inline,
2865
3031
  .sky-theme-modern .sky-btn-icon.sky-btn-disabled:hover.sky-btn-link-inline,
2866
3032
  .sky-theme-modern .sky-btn-icon.sky-btn-disabled:focus-visible.sky-btn-link-inline,
@@ -3013,7 +3179,8 @@
3013
3179
  .sky-theme-modern .sky-btn-icon-borderless {
3014
3180
  color: var(--sky-color-icon-deemphasized);
3015
3181
  }
3016
- .sky-theme-modern .sky-btn-icon-borderless {
3182
+ .sky-theme-modern .sky-btn-icon-borderless,
3183
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent {
3017
3184
  padding: var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left);
3018
3185
  height: auto;
3019
3186
  width: auto;
@@ -3101,6 +3268,31 @@
3101
3268
  .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-active:is(:focus-visible, .sky-btn-focus) {
3102
3269
  box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled), var(--sky-comp-override-toolbar-button-elevation-disabled, var(--sky-elevation-action-tertiary-disabled));
3103
3270
  }
3271
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent {
3272
+ background-color: var(--sky-color-background-action-tertiary-on_prominent-base);
3273
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-on_prominent-base), var(--sky-elevation-action-tertiary-base);
3274
+ color: var(--sky-color-icon-on_prominent-base);
3275
+ }
3276
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent:hover {
3277
+ background-color: var(--sky-color-background-action-tertiary-on_prominent-hover);
3278
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-on_prominent-hover), var(--sky-elevation-action-tertiary-hover);
3279
+ color: var(--sky-color-icon-on_prominent-base);
3280
+ }
3281
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent:active, .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-active {
3282
+ background-color: var(--sky-color-background-action-tertiary-on_prominent-active);
3283
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-on_prominent-active), var(--sky-elevation-action-tertiary-active);
3284
+ transition: none;
3285
+ }
3286
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent:focus-visible:not(:active) {
3287
+ background-color: var(--sky-color-background-action-tertiary-on_prominent-focus);
3288
+ border: none;
3289
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-on_prominent-focus), var(--sky-elevation-action-tertiary-focus);
3290
+ }
3291
+ .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled, .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:active, .sky-theme-modern .sky-btn-icon-borderless-on_prominent.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled], .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled]:hover, .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled]:focus-visible, .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled]:active, .sky-theme-modern .sky-btn-icon-borderless-on_prominent[disabled].sky-btn-active {
3292
+ background-color: var(--sky-color-background-action-tertiary-on_prominent-disabled);
3293
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-on_prominent-disabled), var(--sky-elevation-action-tertiary-disabled);
3294
+ color: var(--sky-color-icon-on_prominent-disabled);
3295
+ }
3104
3296
  .sky-theme-modern .sky-btn-link-inline {
3105
3297
  background-color: transparent;
3106
3298
  border-radius: var(--sky-border-radius-s);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/theme",
3
- "version": "15.0.0-alpha.7",
3
+ "version": "15.0.0-alpha.9",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -20,7 +20,7 @@
20
20
  "@angular/core": "^22.1.2"
21
21
  },
22
22
  "dependencies": {
23
- "@blackbaud/skyux-design-tokens": "7.0.0-alpha.3",
23
+ "@blackbaud/skyux-design-tokens": "7.0.0-alpha.8",
24
24
  "fontfaceobserver": "2.3.0",
25
25
  "tslib": "^2.8.1"
26
26
  },