@blackbaud/skyux-design-tokens 6.11.2 → 6.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/assets/assets.json +1 -1
  3. package/assets/scss/base.css +69 -48
  4. package/assets/scss/blackbaud.css +126 -57
  5. package/bundles/base.css +69 -48
  6. package/bundles/base_blackbaud_public-api.css +195 -105
  7. package/bundles/base_public-api.css +69 -48
  8. package/bundles/blackbaud.css +126 -57
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## [6.12.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.11.2...6.12.0) (2026-09-25)
4
+
5
+
6
+ ### Features
7
+
8
+ * add shadow color tokens and refactor shadow definitions ([#491](https://github.com/blackbaud/skyux-design-tokens/issues/491)) ([153705c](https://github.com/blackbaud/skyux-design-tokens/commit/153705c54c7ff0e35899334ea892d0118405dc30))
9
+
3
10
  ## [6.11.2](https://github.com/blackbaud/skyux-design-tokens/compare/6.11.1...6.11.2) (2026-09-17)
4
11
 
5
12
 
package/assets/assets.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "fonts": [],
3
3
  "images": {
4
4
  "favicon": {
5
- "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/favicon.ico"
5
+ "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/favicon.ico"
6
6
  }
7
7
  },
8
8
  "strings": {
package/assets/scss/base.css CHANGED
@@ -236,6 +236,22 @@
236
236
  --bb-color-red_dark-700: #912528;
237
237
  --bb-color-red_dark-800: #6d1b1d;
238
238
  --bb-color-red_dark-900: #4a1213;
239
+ --bb-color-rgba-black-10: rgba(0, 0, 0, 0.1);
240
+ --bb-color-rgba-black-12: rgba(0, 0, 0, 0.12);
241
+ --bb-color-rgba-black-16: rgba(0, 0, 0, 0.16);
242
+ --bb-color-rgba-black-20: rgba(0, 0, 0, 0.2);
243
+ --bb-color-rgba-black-21: rgba(0, 0, 0, 0.21);
244
+ --bb-color-rgba-black-22: rgba(0, 0, 0, 0.22);
245
+ --bb-color-rgba-black-24: rgba(0, 0, 0, 0.24);
246
+ --bb-color-rgba-black-25: rgba(0, 0, 0, 0.25);
247
+ --bb-color-rgba-black-28: rgba(0, 0, 0, 0.28);
248
+ --bb-color-rgba-black-30: rgba(0, 0, 0, 0.3);
249
+ --bb-color-rgba-black-34: rgba(0, 0, 0, 0.34);
250
+ --bb-color-rgba-black-35: rgba(0, 0, 0, 0.35);
251
+ --bb-color-rgba-black-36: rgba(0, 0, 0, 0.36);
252
+ --bb-color-rgba-black-50: rgba(0, 0, 0, 0.5);
253
+ --bb-color-rgba-black-60: rgba(0, 0, 0, 0.6);
254
+ --bb-color-rgba-black-65: rgba(0, 0, 0, 0.65);
239
255
  --bb-color-rgba-black-70: rgba(0, 0, 0, 0.7);
240
256
  --bb-color-rgba-blue-600-25: rgba(43, 107, 213, 0.25);
241
257
  --bb-color-rgba-blue-600-35: rgba(43, 107, 213, 0.35);
@@ -247,6 +263,11 @@
247
263
  --bb-color-rgba-red_dark-600-35: rgba(181, 47, 50, 0.35);
248
264
  --bb-color-rgba-red_dark-600-50: rgba(181, 47, 50, 0.5);
249
265
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
266
+ --bb-color-rgba-slate-900-12: rgba(33, 44, 63, 0.12);
267
+ --bb-color-rgba-slate-900-14: rgba(33, 44, 63, 0.14);
268
+ --bb-color-rgba-slate-900-20: rgba(33, 44, 63, 0.2);
269
+ --bb-color-rgba-slate-900-5: rgba(33, 44, 63, 0.05);
270
+ --bb-color-rgba-slate-900-50: rgba(33, 44, 63, 0.5);
250
271
  --bb-color-rgba-steel_fusion-100-5: rgba(243, 246, 249, 0.05);
251
272
  --bb-color-rgba-steel_fusion-1100-70: rgba(28, 34, 40, 0.7);
252
273
  --bb-color-rgba-steel_gray-100-10: rgba(245, 246, 247, 0.1);
@@ -421,16 +442,16 @@
421
442
  --bb-font-weight-light: 300;
422
443
  --bb-font-weight-regular: 400;
423
444
  --bb-font-weight-semibold: 600;
424
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/bb-logo.png');
425
- --bb-image-logo-primary-white-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/bb-logo-white.png');
426
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-base-dark.svg');
427
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-base-light.svg');
428
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-bb-dark.svg');
429
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-bb-light.svg');
430
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
431
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
432
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
433
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
445
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/bb-logo.png');
446
+ --bb-image-logo-primary-white-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/bb-logo-white.png');
447
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
448
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-base-light.svg');
449
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
450
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
451
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
452
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
453
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
454
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
434
455
  --bb-letter_spacing-normal: normal;
435
456
  --bb-letter_spacing-wider: 0.01rem;
436
457
  --bb-letter_spacing-widest: 0.046875rem;
@@ -446,7 +467,7 @@
446
467
  --bb-line_height-800: calc(36/27);
447
468
  --bb-opacity-600: .6;
448
469
  --bb-shadow-slate-0: 0 0 0 0 rgba(0, 0, 0, 0);
449
- --bb-shadow-steel-fusion-0: 0 0 0 0 rgba(0, 0, 0, 0);
470
+ --bb-shadow-steel_fusion-0: 0 0 0 0 rgba(0, 0, 0, 0);
450
471
  --bb-size-0: 0rem;
451
472
  --bb-size-fixed-100: 16px;
452
473
  --bb-size-fixed-12: 2px;
@@ -500,6 +521,16 @@
500
521
  --bb-color-gradient-brand-secondary-40: linear-gradient(90deg, var(--bb-color-rgba-sky-600-40) , var(--bb-color-rgba-purple-600-40));
501
522
  --bb-color-gradient-container-primary: linear-gradient(90deg, var(--bb-color-steel_fusion-700), var(--bb-color-steel_fusion-800));
502
523
  --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
524
+ --bb-shadow-black-0: 0 0 0 0 rgba(33, 44, 63, 0);
525
+ --bb-shadow-black-100: 0 1px 3px 0 var(--bb-color-rgba-black-30), 0 2px 1px -1px var(--bb-color-rgba-black-25), 0 1px 1px 0 var(--bb-color-rgba-black-28);
526
+ --bb-shadow-black-1600: 0 8px 10px -5px var(--bb-color-rgba-black-36), 0 6px 30px 5px var(--bb-color-rgba-black-22), 0 16px 24px 2px var(--bb-color-rgba-black-25);
527
+ --bb-shadow-black-200: 0 1px 8px 0 var(--bb-color-rgba-black-50), 0 3px 3px -2px var(--bb-color-rgba-black-30), 0 3px 4px 0 var(--bb-color-rgba-black-35);
528
+ --bb-shadow-black-2400: 0 11px 15px -7px var(--bb-color-rgba-black-34), 0 9px 46px 8px var(--bb-color-rgba-black-20), 0 24px 38px 3px var(--bb-color-rgba-black-24);
529
+ --bb-shadow-black-25: 0 1px 1px 0 var(--bb-color-rgba-black-35);
530
+ --bb-shadow-black-400: 0 2px 4px -1px var(--bb-color-rgba-black-24), 0 1px 10px 0 var(--bb-color-rgba-black-16), 0 4px 5px 0 var(--bb-color-rgba-black-21);
531
+ --bb-shadow-black-50: 0 1px 1px 0 var(--bb-color-rgba-black-30), 0 1.5px 1px -1px var(--bb-color-rgba-black-60);
532
+ --bb-shadow-black-800: 0 5px 5px -3px var(--bb-color-rgba-black-24), 0 3px 14px 2px var(--bb-color-rgba-black-12), 0 8px 10px 1px var(--bb-color-rgba-black-10);
533
+ --bb-shadow-black-simple-400: 1px 2px 4px 0 var(--bb-color-rgba-black-65);
503
534
  --bb-shadow-gray-0: 0 0 0 0 rgba(22, 26, 31, 0);
504
535
  --bb-shadow-gray-100: 0 1px 3px 0 rgba(22, 26, 31, 0.2), 0 2px 1px -1px rgba(22, 26, 31, 0.12), 0 1px 1px 0 rgba(22, 26, 31, 0.14);
505
536
  --bb-shadow-gray-1600: 0 8px 10px -5px rgba(22, 26, 31, 0.2), 0 6px 30px 5px rgba(22, 26, 31, 0.12), 0 16px 24px 2px rgba(30, 34, 41, 0.14);
@@ -510,44 +541,34 @@
510
541
  --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);
511
542
  --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);
512
543
  --bb-shadow-gray-simple-400: 1px 2px 4px 0 rgba(22, 26, 31, 0.5);
513
- --bb-shadow-heavy-black-0: 0 0 0 0 rgba(0, 0, 0, 0);
514
- --bb-shadow-heavy-black-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);
515
- --bb-shadow-heavy-black-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);
516
- --bb-shadow-heavy-black-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);
517
- --bb-shadow-heavy-black-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);
518
- --bb-shadow-heavy-black-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
519
- --bb-shadow-heavy-black-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);
520
- --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);
521
- --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);
522
- --bb-shadow-heavy-black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
523
- --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);
544
+ --bb-shadow-heavy_black-0: 0 0 0 0 rgba(0, 0, 0, 0);
545
+ --bb-shadow-heavy_black-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);
546
+ --bb-shadow-heavy_black-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);
547
+ --bb-shadow-heavy_black-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);
548
+ --bb-shadow-heavy_black-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);
549
+ --bb-shadow-heavy_black-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
550
+ --bb-shadow-heavy_black-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);
551
+ --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);
552
+ --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);
553
+ --bb-shadow-heavy_black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
554
+ --bb-shadow-slate-100: 0 1px 3px 0 var(--bb-color-rgba-slate-900-20), 0 2px 1px -1px var(--bb-color-rgba-slate-900-12), 0 1px 1px 0 var(--bb-color-rgba-slate-900-14);
524
555
  --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);
525
- --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);
526
- --bb-shadow-slate-2400: 0 11px 15px -7px rgba(33, 44, 63, 0.2), 0 9px 46px 8px rgba(33, 44, 63, 0.12), 0 24px 38px 3px rgba(33, 44, 63, 0.14);
527
- --bb-shadow-slate-25: 0 1px 1px 0 rgba(33, 44, 63, 0.05);
528
- --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);
529
- --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);
530
- --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);
531
- --bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
532
- --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);
533
- --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);
534
- --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);
535
- --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);
536
- --bb-shadow-steel-fusion-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
537
- --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);
538
- --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);
539
- --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);
540
- --bb-shadow-steel-fusion-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
541
- --bb-shadow-steel-gray-0: 0 0 0 0 rgba(33, 44, 63, 0);
542
- --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);
543
- --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);
544
- --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);
545
- --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);
546
- --bb-shadow-steel-gray-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
547
- --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);
548
- --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);
549
- --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);
550
- --bb-shadow-steel-gray-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
556
+ --bb-shadow-slate-200: 0 1px 8px 0 var(--bb-color-rgba-slate-900-20), 0 3px 3px -2px var(--bb-color-rgba-slate-900-12), 0 3px 4px 0 var(--bb-color-rgba-slate-900-14);
557
+ --bb-shadow-slate-2400: 0 11px 15px -7px var(--bb-color-rgba-slate-900-20), 0 9px 46px 8px var(--bb-color-rgba-slate-900-12), 0 24px 38px 3px var(--bb-color-rgba-slate-900-14);
558
+ --bb-shadow-slate-25: 0 1px 1px 0 var(--bb-color-rgba-slate-900-5);
559
+ --bb-shadow-slate-400: 0 2px 4px -1px var(--bb-color-rgba-slate-900-20), 0 1px 10px 0 var(--bb-color-rgba-slate-900-12), 0 4px 5px 0 var(--bb-color-rgba-slate-900-14);
560
+ --bb-shadow-slate-50: 0 1px 1px 0 var(--bb-color-rgba-slate-900-12), 0 1.5px 1px -1px var(--bb-color-rgba-slate-900-12);
561
+ --bb-shadow-slate-800: 0 5px 5px -3px var(--bb-color-rgba-slate-900-20), 0 3px 14px 2px var(--bb-color-rgba-slate-900-12), 0 8px 10px 1px var(--bb-color-rgba-slate-900-14);
562
+ --bb-shadow-slate-simple-400: 1px 2px 4px 0 var(--bb-color-rgba-slate-900-50);
563
+ --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);
564
+ --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);
565
+ --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);
566
+ --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);
567
+ --bb-shadow-steel_fusion-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
568
+ --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);
569
+ --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);
570
+ --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);
571
+ --bb-shadow-steel_fusion-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
551
572
  }
552
573
  :root:has(body.sky-theme-modern.sky-theme-brand-base) {
553
574
  --bb-color-scrollbar-base-dark-thumb: #51555c;
package/assets/scss/blackbaud.css CHANGED
@@ -236,6 +236,22 @@
236
236
  --bb-color-red_dark-700: #912528;
237
237
  --bb-color-red_dark-800: #6d1b1d;
238
238
  --bb-color-red_dark-900: #4a1213;
239
+ --bb-color-rgba-black-10: rgba(0, 0, 0, 0.1);
240
+ --bb-color-rgba-black-12: rgba(0, 0, 0, 0.12);
241
+ --bb-color-rgba-black-16: rgba(0, 0, 0, 0.16);
242
+ --bb-color-rgba-black-20: rgba(0, 0, 0, 0.2);
243
+ --bb-color-rgba-black-21: rgba(0, 0, 0, 0.21);
244
+ --bb-color-rgba-black-22: rgba(0, 0, 0, 0.22);
245
+ --bb-color-rgba-black-24: rgba(0, 0, 0, 0.24);
246
+ --bb-color-rgba-black-25: rgba(0, 0, 0, 0.25);
247
+ --bb-color-rgba-black-28: rgba(0, 0, 0, 0.28);
248
+ --bb-color-rgba-black-30: rgba(0, 0, 0, 0.3);
249
+ --bb-color-rgba-black-34: rgba(0, 0, 0, 0.34);
250
+ --bb-color-rgba-black-35: rgba(0, 0, 0, 0.35);
251
+ --bb-color-rgba-black-36: rgba(0, 0, 0, 0.36);
252
+ --bb-color-rgba-black-50: rgba(0, 0, 0, 0.5);
253
+ --bb-color-rgba-black-60: rgba(0, 0, 0, 0.6);
254
+ --bb-color-rgba-black-65: rgba(0, 0, 0, 0.65);
239
255
  --bb-color-rgba-black-70: rgba(0, 0, 0, 0.7);
240
256
  --bb-color-rgba-blue-600-25: rgba(43, 107, 213, 0.25);
241
257
  --bb-color-rgba-blue-600-35: rgba(43, 107, 213, 0.35);
@@ -247,6 +263,11 @@
247
263
  --bb-color-rgba-red_dark-600-35: rgba(181, 47, 50, 0.35);
248
264
  --bb-color-rgba-red_dark-600-50: rgba(181, 47, 50, 0.5);
249
265
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
266
+ --bb-color-rgba-slate-900-12: rgba(33, 44, 63, 0.12);
267
+ --bb-color-rgba-slate-900-14: rgba(33, 44, 63, 0.14);
268
+ --bb-color-rgba-slate-900-20: rgba(33, 44, 63, 0.2);
269
+ --bb-color-rgba-slate-900-5: rgba(33, 44, 63, 0.05);
270
+ --bb-color-rgba-slate-900-50: rgba(33, 44, 63, 0.5);
250
271
  --bb-color-rgba-steel_fusion-100-5: rgba(243, 246, 249, 0.05);
251
272
  --bb-color-rgba-steel_fusion-1100-70: rgba(28, 34, 40, 0.7);
252
273
  --bb-color-rgba-steel_gray-100-10: rgba(245, 246, 247, 0.1);
@@ -421,16 +442,16 @@
421
442
  --bb-font-weight-light: 300;
422
443
  --bb-font-weight-regular: 400;
423
444
  --bb-font-weight-semibold: 600;
424
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/bb-logo.png');
425
- --bb-image-logo-primary-white-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/bb-logo-white.png');
426
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-base-dark.svg');
427
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-base-light.svg');
428
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-bb-dark.svg');
429
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-bb-light.svg');
430
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
431
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
432
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
433
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.2/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
445
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/bb-logo.png');
446
+ --bb-image-logo-primary-white-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/bb-logo-white.png');
447
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
448
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-base-light.svg');
449
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
450
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
451
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
452
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
453
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
454
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.12.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
434
455
  --bb-letter_spacing-normal: normal;
435
456
  --bb-letter_spacing-wider: 0.01rem;
436
457
  --bb-letter_spacing-widest: 0.046875rem;
@@ -446,7 +467,7 @@
446
467
  --bb-line_height-800: calc(36/27);
447
468
  --bb-opacity-600: .6;
448
469
  --bb-shadow-slate-0: 0 0 0 0 rgba(0, 0, 0, 0);
449
- --bb-shadow-steel-fusion-0: 0 0 0 0 rgba(0, 0, 0, 0);
470
+ --bb-shadow-steel_fusion-0: 0 0 0 0 rgba(0, 0, 0, 0);
450
471
  --bb-size-0: 0rem;
451
472
  --bb-size-fixed-100: 16px;
452
473
  --bb-size-fixed-12: 2px;
@@ -500,6 +521,16 @@
500
521
  --bb-color-gradient-brand-secondary-40: linear-gradient(90deg, var(--bb-color-rgba-sky-600-40) , var(--bb-color-rgba-purple-600-40));
501
522
  --bb-color-gradient-container-primary: linear-gradient(90deg, var(--bb-color-steel_fusion-700), var(--bb-color-steel_fusion-800));
502
523
  --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
524
+ --bb-shadow-black-0: 0 0 0 0 rgba(33, 44, 63, 0);
525
+ --bb-shadow-black-100: 0 1px 3px 0 var(--bb-color-rgba-black-30), 0 2px 1px -1px var(--bb-color-rgba-black-25), 0 1px 1px 0 var(--bb-color-rgba-black-28);
526
+ --bb-shadow-black-1600: 0 8px 10px -5px var(--bb-color-rgba-black-36), 0 6px 30px 5px var(--bb-color-rgba-black-22), 0 16px 24px 2px var(--bb-color-rgba-black-25);
527
+ --bb-shadow-black-200: 0 1px 8px 0 var(--bb-color-rgba-black-50), 0 3px 3px -2px var(--bb-color-rgba-black-30), 0 3px 4px 0 var(--bb-color-rgba-black-35);
528
+ --bb-shadow-black-2400: 0 11px 15px -7px var(--bb-color-rgba-black-34), 0 9px 46px 8px var(--bb-color-rgba-black-20), 0 24px 38px 3px var(--bb-color-rgba-black-24);
529
+ --bb-shadow-black-25: 0 1px 1px 0 var(--bb-color-rgba-black-35);
530
+ --bb-shadow-black-400: 0 2px 4px -1px var(--bb-color-rgba-black-24), 0 1px 10px 0 var(--bb-color-rgba-black-16), 0 4px 5px 0 var(--bb-color-rgba-black-21);
531
+ --bb-shadow-black-50: 0 1px 1px 0 var(--bb-color-rgba-black-30), 0 1.5px 1px -1px var(--bb-color-rgba-black-60);
532
+ --bb-shadow-black-800: 0 5px 5px -3px var(--bb-color-rgba-black-24), 0 3px 14px 2px var(--bb-color-rgba-black-12), 0 8px 10px 1px var(--bb-color-rgba-black-10);
533
+ --bb-shadow-black-simple-400: 1px 2px 4px 0 var(--bb-color-rgba-black-65);
503
534
  --bb-shadow-gray-0: 0 0 0 0 rgba(22, 26, 31, 0);
504
535
  --bb-shadow-gray-100: 0 1px 3px 0 rgba(22, 26, 31, 0.2), 0 2px 1px -1px rgba(22, 26, 31, 0.12), 0 1px 1px 0 rgba(22, 26, 31, 0.14);
505
536
  --bb-shadow-gray-1600: 0 8px 10px -5px rgba(22, 26, 31, 0.2), 0 6px 30px 5px rgba(22, 26, 31, 0.12), 0 16px 24px 2px rgba(30, 34, 41, 0.14);
@@ -510,44 +541,34 @@
510
541
  --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);
511
542
  --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);
512
543
  --bb-shadow-gray-simple-400: 1px 2px 4px 0 rgba(22, 26, 31, 0.5);
513
- --bb-shadow-heavy-black-0: 0 0 0 0 rgba(0, 0, 0, 0);
514
- --bb-shadow-heavy-black-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);
515
- --bb-shadow-heavy-black-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);
516
- --bb-shadow-heavy-black-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);
517
- --bb-shadow-heavy-black-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);
518
- --bb-shadow-heavy-black-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
519
- --bb-shadow-heavy-black-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);
520
- --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);
521
- --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);
522
- --bb-shadow-heavy-black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
523
- --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);
544
+ --bb-shadow-heavy_black-0: 0 0 0 0 rgba(0, 0, 0, 0);
545
+ --bb-shadow-heavy_black-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);
546
+ --bb-shadow-heavy_black-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);
547
+ --bb-shadow-heavy_black-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);
548
+ --bb-shadow-heavy_black-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);
549
+ --bb-shadow-heavy_black-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
550
+ --bb-shadow-heavy_black-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);
551
+ --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);
552
+ --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);
553
+ --bb-shadow-heavy_black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
554
+ --bb-shadow-slate-100: 0 1px 3px 0 var(--bb-color-rgba-slate-900-20), 0 2px 1px -1px var(--bb-color-rgba-slate-900-12), 0 1px 1px 0 var(--bb-color-rgba-slate-900-14);
524
555
  --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);
525
- --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);
526
- --bb-shadow-slate-2400: 0 11px 15px -7px rgba(33, 44, 63, 0.2), 0 9px 46px 8px rgba(33, 44, 63, 0.12), 0 24px 38px 3px rgba(33, 44, 63, 0.14);
527
- --bb-shadow-slate-25: 0 1px 1px 0 rgba(33, 44, 63, 0.05);
528
- --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);
529
- --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);
530
- --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);
531
- --bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
532
- --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);
533
- --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);
534
- --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);
535
- --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);
536
- --bb-shadow-steel-fusion-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
537
- --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);
538
- --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);
539
- --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);
540
- --bb-shadow-steel-fusion-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
541
- --bb-shadow-steel-gray-0: 0 0 0 0 rgba(33, 44, 63, 0);
542
- --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);
543
- --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);
544
- --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);
545
- --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);
546
- --bb-shadow-steel-gray-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
547
- --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);
548
- --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);
549
- --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);
550
- --bb-shadow-steel-gray-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
556
+ --bb-shadow-slate-200: 0 1px 8px 0 var(--bb-color-rgba-slate-900-20), 0 3px 3px -2px var(--bb-color-rgba-slate-900-12), 0 3px 4px 0 var(--bb-color-rgba-slate-900-14);
557
+ --bb-shadow-slate-2400: 0 11px 15px -7px var(--bb-color-rgba-slate-900-20), 0 9px 46px 8px var(--bb-color-rgba-slate-900-12), 0 24px 38px 3px var(--bb-color-rgba-slate-900-14);
558
+ --bb-shadow-slate-25: 0 1px 1px 0 var(--bb-color-rgba-slate-900-5);
559
+ --bb-shadow-slate-400: 0 2px 4px -1px var(--bb-color-rgba-slate-900-20), 0 1px 10px 0 var(--bb-color-rgba-slate-900-12), 0 4px 5px 0 var(--bb-color-rgba-slate-900-14);
560
+ --bb-shadow-slate-50: 0 1px 1px 0 var(--bb-color-rgba-slate-900-12), 0 1.5px 1px -1px var(--bb-color-rgba-slate-900-12);
561
+ --bb-shadow-slate-800: 0 5px 5px -3px var(--bb-color-rgba-slate-900-20), 0 3px 14px 2px var(--bb-color-rgba-slate-900-12), 0 8px 10px 1px var(--bb-color-rgba-slate-900-14);
562
+ --bb-shadow-slate-simple-400: 1px 2px 4px 0 var(--bb-color-rgba-slate-900-50);
563
+ --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);
564
+ --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);
565
+ --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);
566
+ --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);
567
+ --bb-shadow-steel_fusion-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
568
+ --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);
569
+ --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);
570
+ --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);
571
+ --bb-shadow-steel_fusion-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
551
572
  }
552
573
  :root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud) {
553
574
  --bb-color-scrollbar-base-dark-thumb: #51555c;
@@ -582,6 +603,30 @@
582
603
  --sky-color-illustration-fill-soft: var(--bb-color-green-50);
583
604
  --sky-color-illustration-fill-softest: var(--bb-color-white);
584
605
  --sky-color-illustration-stroke: var(--bb-color-brand-trusted_blue);
606
+ --sky-color-shadow-action: var(--bb-color-rgba-slate-900-12);
607
+ --sky-color-shadow-focus-1: var(--bb-color-rgba-slate-900-20);
608
+ --sky-color-shadow-focus-2: var(--bb-color-rgba-slate-900-12);
609
+ --sky-color-shadow-focus-3: var(--bb-color-rgba-slate-900-14);
610
+ --sky-color-shadow-input: var(--bb-color-rgba-slate-900-5);
611
+ --sky-color-shadow-overflow-1: var(--bb-color-rgba-slate-900-20);
612
+ --sky-color-shadow-overflow-2: var(--bb-color-rgba-slate-900-12);
613
+ --sky-color-shadow-overflow-3: var(--bb-color-rgba-slate-900-14);
614
+ --sky-color-shadow-overlay-100-1: var(--bb-color-rgba-slate-900-20);
615
+ --sky-color-shadow-overlay-100-2: var(--bb-color-rgba-slate-900-12);
616
+ --sky-color-shadow-overlay-100-3: var(--bb-color-rgba-slate-900-14);
617
+ --sky-color-shadow-overlay-200-1: var(--bb-color-rgba-slate-900-20);
618
+ --sky-color-shadow-overlay-200-2: var(--bb-color-rgba-slate-900-12);
619
+ --sky-color-shadow-overlay-200-3: var(--bb-color-rgba-slate-900-14);
620
+ --sky-color-shadow-overlay-300-1: var(--bb-color-rgba-slate-900-20);
621
+ --sky-color-shadow-overlay-300-2: var(--bb-color-rgba-slate-900-12);
622
+ --sky-color-shadow-overlay-300-3: var(--bb-color-rgba-slate-900-14);
623
+ --sky-color-shadow-overlay-400-1: var(--bb-color-rgba-slate-900-20);
624
+ --sky-color-shadow-overlay-400-2: var(--bb-color-rgba-slate-900-12);
625
+ --sky-color-shadow-overlay-400-3: var(--bb-color-rgba-slate-900-14);
626
+ --sky-color-shadow-overlay-simple-100: var(--bb-color-rgba-slate-900-50);
627
+ --sky-color-shadow-raised-100-1: var(--bb-color-rgba-slate-900-20);
628
+ --sky-color-shadow-raised-100-2: var(--bb-color-rgba-slate-900-12);
629
+ --sky-color-shadow-raised-100-3: var(--bb-color-rgba-slate-900-14);
585
630
  --sky-color-text-action_brand: var(--bb-color-sky-900);
586
631
  --sky-color-text-heading: var(--bb-color-blue-900);
587
632
  --sky-elevation-action-danger-active: var(--bb-shadow-slate-0);
@@ -819,6 +864,30 @@
819
864
  --sky-color-illustration-fill-soft: var(--bb-color-teal_dark-800);
820
865
  --sky-color-illustration-fill-softest: var(--bb-color-steel_gray-1100);
821
866
  --sky-color-illustration-stroke: var(--bb-color-teal_dark-100);
867
+ --sky-color-shadow-action: var(--bb-color-transparent);
868
+ --sky-color-shadow-focus-1: var(--bb-color-rgba-black-50);
869
+ --sky-color-shadow-focus-2: var(--bb-color-rgba-black-30);
870
+ --sky-color-shadow-focus-3: var(--bb-color-rgba-black-35);
871
+ --sky-color-shadow-input: var(--bb-color-transparent);
872
+ --sky-color-shadow-overflow-1: var(--bb-color-rgba-black-50);
873
+ --sky-color-shadow-overflow-2: var(--bb-color-rgba-black-30);
874
+ --sky-color-shadow-overflow-3: var(--bb-color-rgba-black-35);
875
+ --sky-color-shadow-overlay-100-1: var(--bb-color-rgba-black-24);
876
+ --sky-color-shadow-overlay-100-2: var(--bb-color-rgba-black-16);
877
+ --sky-color-shadow-overlay-100-3: var(--bb-color-rgba-black-21);
878
+ --sky-color-shadow-overlay-200-1: var(--bb-color-rgba-black-24);
879
+ --sky-color-shadow-overlay-200-2: var(--bb-color-rgba-black-12);
880
+ --sky-color-shadow-overlay-200-3: var(--bb-color-rgba-black-10);
881
+ --sky-color-shadow-overlay-300-1: var(--bb-color-rgba-black-36);
882
+ --sky-color-shadow-overlay-300-2: var(--bb-color-rgba-black-22);
883
+ --sky-color-shadow-overlay-300-3: var(--bb-color-rgba-black-25);
884
+ --sky-color-shadow-overlay-400-1: var(--bb-color-rgba-black-34);
885
+ --sky-color-shadow-overlay-400-2: var(--bb-color-rgba-black-20);
886
+ --sky-color-shadow-overlay-400-3: var(--bb-color-rgba-black-24);
887
+ --sky-color-shadow-overlay-simple-100: var(--bb-color-rgba-black-65);
888
+ --sky-color-shadow-raised-100-1: var(--bb-color-rgba-black-30);
889
+ --sky-color-shadow-raised-100-2: var(--bb-color-rgba-black-25);
890
+ --sky-color-shadow-raised-100-3: var(--bb-color-rgba-black-28);
822
891
  --sky-color-text-action: var(--bb-color-blue_dark-375);
823
892
  --sky-color-text-action_brand: var(--bb-color-sky_dark-100);
824
893
  --sky-color-text-action_contrast: var(--bb-color-blue_dark-200);
@@ -854,15 +923,15 @@
854
923
  --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
855
924
  --sky-color-border-action-tertiary-on_prominent-disabled: var(--sky-color-border-disabled);
856
925
  --sky-color-border-tab-disabled: var(--sky-color-border-disabled);
857
- --sky-elevation-focus: var(--bb-shadow-steel-gray-200);
858
- --sky-elevation-none: var(--bb-shadow-steel-gray-0);
859
- --sky-elevation-overflow: var(--bb-shadow-steel-gray-200);
860
- --sky-elevation-overlay-100: var(--bb-shadow-steel-gray-400);
861
- --sky-elevation-overlay-200: var(--bb-shadow-steel-gray-800);
862
- --sky-elevation-overlay-300: var(--bb-shadow-steel-gray-1600);
863
- --sky-elevation-overlay-400: var(--bb-shadow-steel-gray-2400);
864
- --sky-elevation-overlay-simple-100: var(--bb-shadow-steel-gray-simple-400);
865
- --sky-elevation-raised-100: var(--bb-shadow-steel-gray-100);
926
+ --sky-elevation-focus: var(--bb-shadow-black-200);
927
+ --sky-elevation-none: var(--bb-shadow-black-0);
928
+ --sky-elevation-overflow: var(--bb-shadow-black-200);
929
+ --sky-elevation-overlay-100: var(--bb-shadow-black-400);
930
+ --sky-elevation-overlay-200: var(--bb-shadow-black-800);
931
+ --sky-elevation-overlay-300: var(--bb-shadow-black-1600);
932
+ --sky-elevation-overlay-400: var(--bb-shadow-black-2400);
933
+ --sky-elevation-overlay-simple-100: var(--bb-shadow-black-simple-400);
934
+ --sky-elevation-raised-100: var(--bb-shadow-black-100);
866
935
  }
867
936
  :root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-dark) {
868
937
  --sky-color-scrollbar-thumb: var(--bb-color-scrollbar-bb-dark-thumb);