@blackbaud/skyux-design-tokens 6.3.0 → 6.4.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 (10) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/assets/assets.json +1 -1
  3. package/assets/scss/base.css +41 -10
  4. package/assets/scss/blackbaud.css +25 -10
  5. package/bundles/base.css +41 -10
  6. package/bundles/blackbaud.css +25 -10
  7. package/bundles/public-api-styles.json +47 -0
  8. package/bundles/public-api-tokens.json +43 -0
  9. package/bundles/public-api.css +22 -0
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -5,6 +5,21 @@
5
5
 
6
6
  * add omnibar toaster padding ([#342](https://github.com/blackbaud/skyux-design-tokens/issues/342)) ([4095f97](https://github.com/blackbaud/skyux-design-tokens/commit/4095f97ba31a2f619444bf41dd6d279475258066))
7
7
 
8
+ ## [6.4.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.3.1...6.4.0) (2026-08-21)
9
+
10
+
11
+ ### Features
12
+
13
+ * add underline styling for dark mode links ([#397](https://github.com/blackbaud/skyux-design-tokens/issues/397)) ([de51fab](https://github.com/blackbaud/skyux-design-tokens/commit/de51fab90ac76e62e6b1de2ed3125d06326a6e08))
14
+ * prominent header and content tokens ([#398](https://github.com/blackbaud/skyux-design-tokens/issues/398)) ([47c6f4b](https://github.com/blackbaud/skyux-design-tokens/commit/47c6f4b3766e5cf4a11365aa793d21ecef176a09))
15
+
16
+ ## [6.3.1](https://github.com/blackbaud/skyux-design-tokens/compare/6.3.0...6.3.1) (2026-08-18)
17
+
18
+
19
+ ### Bug Fixes
20
+
21
+ * update blocking wait background in dark mode ([#380](https://github.com/blackbaud/skyux-design-tokens/issues/380)) ([98754ee](https://github.com/blackbaud/skyux-design-tokens/commit/98754eeffa812a1b34b23858539d13fc162ba16f))
22
+
8
23
  ## [6.3.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.2.1...6.3.0) (2026-08-18)
9
24
 
10
25
 
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.3.0/assets/images/favicon.ico"
5
+ "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/favicon.ico"
6
6
  }
7
7
  },
8
8
  "strings": {
package/assets/scss/base.css CHANGED
@@ -240,6 +240,7 @@
240
240
  --bb-color-rgba-red-dark-600-50: rgba(181, 47, 50, 0.5);
241
241
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
242
242
  --bb-color-rgba-steel-fusion-100-5: rgba(243, 246, 249, 0.05);
243
+ --bb-color-rgba-steel-fusion-1100-70: rgba(28, 34, 40, 0.7);
243
244
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
244
245
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
245
246
  --bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
@@ -380,15 +381,15 @@
380
381
  --bb-font-weight-light: 300;
381
382
  --bb-font-weight-regular: 400;
382
383
  --bb-font-weight-semibold: 600;
383
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/bb-logo.png');
384
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
385
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-base-light.svg');
386
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
387
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
388
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
389
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
390
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
391
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
384
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/bb-logo.png');
385
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
386
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-base-light.svg');
387
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
388
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
389
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
390
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
391
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
392
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
392
393
  --bb-letter_spacing-normal: normal;
393
394
  --bb-letter_spacing-wider: 0.01rem;
394
395
  --bb-letter_spacing-widest: 0.046875rem;
@@ -521,11 +522,16 @@
521
522
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
522
523
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
523
524
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
525
+ --sky-color-background-action-tertiary-on_prominent-active: var(--bb-color-slate-600);
526
+ --sky-color-background-action-tertiary-on_prominent-base: var(--bb-color-transparent);
527
+ --sky-color-background-action-tertiary-on_prominent-focus: var(--bb-color-transparent);
528
+ --sky-color-background-action-tertiary-on_prominent-hover: var(--bb-color-slate-700);
524
529
  --sky-color-background-blocking: var(--bb-color-rgba-white-70);
525
530
  --sky-color-background-container-backdrop: var(--bb-color-gray-200);
526
531
  --sky-color-background-container-base: var(--bb-color-white);
527
532
  --sky-color-background-container-danger: var(--bb-color-red-200);
528
533
  --sky-color-background-container-dimmed: var(--bb-color-gray-25);
534
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
529
535
  --sky-color-background-container-info: var(--bb-color-blue-200);
530
536
  --sky-color-background-container-menu: var(--bb-color-white);
531
537
  --sky-color-background-container-success: var(--bb-color-green-200);
@@ -590,8 +596,13 @@
590
596
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
591
597
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
592
598
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
599
+ --sky-color-border-action-tertiary-on_prominent-active: var(--bb-color-slate-300);
600
+ --sky-color-border-action-tertiary-on_prominent-base: var(--bb-color-transparent);
601
+ --sky-color-border-action-tertiary-on_prominent-focus: var(--bb-color-slate-300);
602
+ --sky-color-border-action-tertiary-on_prominent-hover: var(--bb-color-slate-300);
593
603
  --sky-color-border-column_divider: var(--bb-color-blue-600);
594
604
  --sky-color-border-container-base: var(--bb-color-gray-200);
605
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
595
606
  --sky-color-border-danger: var(--bb-color-red-600);
596
607
  --sky-color-border-disabled: var(--bb-color-gray-300);
597
608
  --sky-color-border-divider: var(--bb-color-gray-300);
@@ -657,6 +668,7 @@
657
668
  --sky-color-icon-info: var(--bb-color-blue-600);
658
669
  --sky-color-icon-input-action: var(--bb-color-gray-600);
659
670
  --sky-color-icon-inverse: var(--bb-color-white);
671
+ --sky-color-icon-on_prominent: var(--bb-color-white);
660
672
  --sky-color-icon-selected: var(--bb-color-blue-600);
661
673
  --sky-color-icon-success: var(--bb-color-green-600);
662
674
  --sky-color-icon-warning: var(--bb-color-yellow-400);
@@ -671,6 +683,7 @@
671
683
  --sky-color-text-default: var(--bb-color-gray-1000);
672
684
  --sky-color-text-heading: var(--bb-color-gray-1100);
673
685
  --sky-color-text-inverse: var(--bb-color-white);
686
+ --sky-color-text-on_prominent: var(--bb-color-white);
674
687
  --sky-color-text-selected: var(--bb-color-blue-600);
675
688
  --sky-color-viz-axis: var(--bb-color-gray-500);
676
689
  --sky-color-viz-category-1: var(--bb-color-teal-500);
@@ -723,6 +736,7 @@
723
736
  --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
724
737
  --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
725
738
  --sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
739
+ --sky-color-background-action-tertiary-on_prominent-disabled: var(--sky-color-background-disabled);
726
740
  --sky-color-background-input-disabled: var(--sky-color-background-disabled);
727
741
  --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
728
742
  --sky-color-background-row-disabled: var(--sky-color-background-disabled);
@@ -734,6 +748,7 @@
734
748
  --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
735
749
  --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
736
750
  --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
751
+ --sky-color-border-action-tertiary-on_prominent-disabled: var(--sky-color-border-disabled);
737
752
  --sky-color-border-input-disabled: var(--sky-color-border-disabled);
738
753
  --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
739
754
  --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
@@ -811,11 +826,16 @@
811
826
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
812
827
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
813
828
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
814
- --sky-color-background-blocking: var(--bb-color-rgba-black-70);
829
+ --sky-color-background-action-tertiary-on_prominent-active: var(--bb-color-slate-600);
830
+ --sky-color-background-action-tertiary-on_prominent-base: var(--bb-color-transparent);
831
+ --sky-color-background-action-tertiary-on_prominent-focus: var(--bb-color-transparent);
832
+ --sky-color-background-action-tertiary-on_prominent-hover: var(--bb-color-slate-700);
833
+ --sky-color-background-blocking: var(--bb-color-rgba-steel-fusion-1100-70);
815
834
  --sky-color-background-container-backdrop: var(--bb-color-gray-900);
816
835
  --sky-color-background-container-base: var(--bb-color-gray-1000);
817
836
  --sky-color-background-container-danger: var(--bb-color-red-800);
818
837
  --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
838
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
819
839
  --sky-color-background-container-info: var(--bb-color-blue-800);
820
840
  --sky-color-background-container-menu: var(--bb-color-gray-900);
821
841
  --sky-color-background-container-success: var(--bb-color-green-900);
@@ -880,8 +900,13 @@
880
900
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
881
901
  --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
882
902
  --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
903
+ --sky-color-border-action-tertiary-on_prominent-active: var(--bb-color-slate-300);
904
+ --sky-color-border-action-tertiary-on_prominent-base: var(--bb-color-transparent);
905
+ --sky-color-border-action-tertiary-on_prominent-focus: var(--bb-color-slate-300);
906
+ --sky-color-border-action-tertiary-on_prominent-hover: var(--bb-color-slate-300);
883
907
  --sky-color-border-column_divider: var(--bb-color-blue-400);
884
908
  --sky-color-border-container-base: var(--bb-color-blue-900);
909
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
885
910
  --sky-color-border-danger: var(--bb-color-red-400);
886
911
  --sky-color-border-disabled: var(--bb-color-gray-800);
887
912
  --sky-color-border-divider: var(--bb-color-gray-800);
@@ -947,6 +972,7 @@
947
972
  --sky-color-icon-info: var(--bb-color-blue-600);
948
973
  --sky-color-icon-input-action: var(--bb-color-sky-600);
949
974
  --sky-color-icon-inverse: var(--bb-color-gray-1100);
975
+ --sky-color-icon-on_prominent: var(--bb-color-white);
950
976
  --sky-color-icon-selected: var(--bb-color-blue-600);
951
977
  --sky-color-icon-success: var(--bb-color-green-700);
952
978
  --sky-color-icon-warning: var(--bb-color-yellow-600);
@@ -961,6 +987,7 @@
961
987
  --sky-color-text-default: var(--bb-color-gray-25);
962
988
  --sky-color-text-heading: var(--bb-color-gray-50);
963
989
  --sky-color-text-inverse: var(--bb-color-gray-1100);
990
+ --sky-color-text-on_prominent: var(--bb-color-white);
964
991
  --sky-color-text-selected: var(--bb-color-blue-400);
965
992
  --sky-color-viz-axis: var(--bb-color-gray-600);
966
993
  --sky-color-viz-category-1: var(--bb-color-teal-600);
@@ -1013,6 +1040,7 @@
1013
1040
  --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
1014
1041
  --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
1015
1042
  --sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
1043
+ --sky-color-background-action-tertiary-on_prominent-disabled: var(--sky-color-background-disabled);
1016
1044
  --sky-color-background-input-disabled: var(--sky-color-background-disabled);
1017
1045
  --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
1018
1046
  --sky-color-background-row-disabled: var(--sky-color-background-disabled);
@@ -1024,6 +1052,7 @@
1024
1052
  --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
1025
1053
  --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
1026
1054
  --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
1055
+ --sky-color-border-action-tertiary-on_prominent-disabled: var(--sky-color-border-disabled);
1027
1056
  --sky-color-border-input-disabled: var(--sky-color-border-disabled);
1028
1057
  --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
1029
1058
  --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
@@ -1687,6 +1716,8 @@
1687
1716
  --sky-size-picker_btn: var(--bb-size-fluid-200);
1688
1717
  --sky-size-progress_step: var(--bb-size-fluid-75);
1689
1718
  --sky-size-switch: var(--bb-size-fluid-125);
1719
+ --sky-size-text_underline-offset: var(--bb-size-fluid-12);
1720
+ --sky-size-text_underline-thickness: var(--bb-size-fluid-6);
1690
1721
  --sky-size-thumbnail-l: var(--bb-size-fixed-600);
1691
1722
  --sky-size-width-modal-l: var(--bb-size-fixed-6000);
1692
1723
  --sky-size-width-modal-m: var(--bb-size-fixed-4000);
package/assets/scss/blackbaud.css CHANGED
@@ -240,6 +240,7 @@
240
240
  --bb-color-rgba-red-dark-600-50: rgba(181, 47, 50, 0.5);
241
241
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
242
242
  --bb-color-rgba-steel-fusion-100-5: rgba(243, 246, 249, 0.05);
243
+ --bb-color-rgba-steel-fusion-1100-70: rgba(28, 34, 40, 0.7);
243
244
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
244
245
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
245
246
  --bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
@@ -380,15 +381,15 @@
380
381
  --bb-font-weight-light: 300;
381
382
  --bb-font-weight-regular: 400;
382
383
  --bb-font-weight-semibold: 600;
383
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/bb-logo.png');
384
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
385
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-base-light.svg');
386
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
387
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
388
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
389
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
390
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
391
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
384
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/bb-logo.png');
385
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
386
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-base-light.svg');
387
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
388
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
389
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
390
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
391
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
392
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
392
393
  --bb-letter_spacing-normal: normal;
393
394
  --bb-letter_spacing-wider: 0.01rem;
394
395
  --bb-letter_spacing-widest: 0.046875rem;
@@ -597,11 +598,16 @@
597
598
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
598
599
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
599
600
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
600
- --sky-color-background-blocking: var(--bb-color-rgba-black-70);
601
+ --sky-color-background-action-tertiary-on_prominent-active: var(--bb-color-slate-600);
602
+ --sky-color-background-action-tertiary-on_prominent-base: var(--bb-color-transparent);
603
+ --sky-color-background-action-tertiary-on_prominent-focus: var(--bb-color-transparent);
604
+ --sky-color-background-action-tertiary-on_prominent-hover: var(--bb-color-slate-700);
605
+ --sky-color-background-blocking: var(--bb-color-rgba-steel-fusion-1100-70);
601
606
  --sky-color-background-container-backdrop: var(--bb-color-steel-fusion-1000);
602
607
  --sky-color-background-container-base: var(--bb-color-steel-fusion-1100);
603
608
  --sky-color-background-container-danger: var(--bb-color-rgba-red-dark-600-35);
604
609
  --sky-color-background-container-dimmed: var(--bb-color-steel-fusion-1050);
610
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
605
611
  --sky-color-background-container-info: var(--bb-color-rgba-blue-600-35);
606
612
  --sky-color-background-container-menu: var(--bb-color-steel-fusion-1000);
607
613
  --sky-color-background-container-success: var(--bb-color-rgba-green-600-35);
@@ -672,8 +678,13 @@
672
678
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
673
679
  --sky-color-border-action-tertiary-focus: var(--bb-color-oklch-blue-375);
674
680
  --sky-color-border-action-tertiary-hover: var(--bb-color-oklch-blue-375);
681
+ --sky-color-border-action-tertiary-on_prominent-active: var(--bb-color-slate-300);
682
+ --sky-color-border-action-tertiary-on_prominent-base: var(--bb-color-transparent);
683
+ --sky-color-border-action-tertiary-on_prominent-focus: var(--bb-color-slate-300);
684
+ --sky-color-border-action-tertiary-on_prominent-hover: var(--bb-color-slate-300);
675
685
  --sky-color-border-column_divider: var(--bb-color-blue-400);
676
686
  --sky-color-border-container-base: var(--bb-color-steel-fusion-800);
687
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
677
688
  --sky-color-border-danger: var(--bb-color-red-600);
678
689
  --sky-color-border-disabled: var(--bb-color-gray-800);
679
690
  --sky-color-border-divider: var(--bb-color-gray-700);
@@ -736,6 +747,7 @@
736
747
  --sky-color-icon-info: var(--bb-color-blue-600);
737
748
  --sky-color-icon-input-action: var(--bb-color-oklch-blue-375);
738
749
  --sky-color-icon-inverse: var(--bb-color-black);
750
+ --sky-color-icon-on_prominent: var(--bb-color-white);
739
751
  --sky-color-icon-selected: var(--bb-color-oklch-blue-375);
740
752
  --sky-color-icon-success: var(--bb-color-green-600);
741
753
  --sky-color-icon-warning: var(--bb-color-yellow-600);
@@ -750,12 +762,15 @@
750
762
  --sky-color-text-default: var(--bb-color-steel-fusion-200);
751
763
  --sky-color-text-heading: var(--bb-color-steel-fusion-100);
752
764
  --sky-color-text-inverse: var(--bb-color-black);
765
+ --sky-color-text-on_prominent: var(--bb-color-white);
753
766
  --sky-color-text-selected: var(--bb-color-oklch-blue-375);
754
767
  --sky-image-select_icon-base: var(--bb-image-select_icon-bb-dark-src);
755
768
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-dark-src);
756
769
  --sky-opacity-wait: var(--bb-opacity-600);
757
770
  --sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
771
+ --sky-color-background-action-tertiary-on_prominent-disabled: var(--sky-color-background-disabled);
758
772
  --sky-color-border-action-accent-base: var(--bb-color-gradient-brand-secondary);
773
+ --sky-color-border-action-tertiary-on_prominent-disabled: var(--sky-color-border-disabled);
759
774
  --sky-elevation-focus: var(--bb-shadow-heavy-black-200);
760
775
  --sky-elevation-none: var(--bb-shadow-heavy-black-0);
761
776
  --sky-elevation-overflow: var(--bb-shadow-heavy-black-200);
package/bundles/base.css CHANGED
@@ -240,6 +240,7 @@
240
240
  --bb-color-rgba-red-dark-600-50: rgba(181, 47, 50, 0.5);
241
241
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
242
242
  --bb-color-rgba-steel-fusion-100-5: rgba(243, 246, 249, 0.05);
243
+ --bb-color-rgba-steel-fusion-1100-70: rgba(28, 34, 40, 0.7);
243
244
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
244
245
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
245
246
  --bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
@@ -380,15 +381,15 @@
380
381
  --bb-font-weight-light: 300;
381
382
  --bb-font-weight-regular: 400;
382
383
  --bb-font-weight-semibold: 600;
383
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/bb-logo.png');
384
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
385
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-base-light.svg');
386
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
387
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
388
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
389
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
390
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
391
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
384
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/bb-logo.png');
385
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
386
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-base-light.svg');
387
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
388
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
389
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
390
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
391
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
392
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
392
393
  --bb-letter_spacing-normal: normal;
393
394
  --bb-letter_spacing-wider: 0.01rem;
394
395
  --bb-letter_spacing-widest: 0.046875rem;
@@ -521,11 +522,16 @@
521
522
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
522
523
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
523
524
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
525
+ --sky-color-background-action-tertiary-on_prominent-active: var(--bb-color-slate-600);
526
+ --sky-color-background-action-tertiary-on_prominent-base: var(--bb-color-transparent);
527
+ --sky-color-background-action-tertiary-on_prominent-focus: var(--bb-color-transparent);
528
+ --sky-color-background-action-tertiary-on_prominent-hover: var(--bb-color-slate-700);
524
529
  --sky-color-background-blocking: var(--bb-color-rgba-white-70);
525
530
  --sky-color-background-container-backdrop: var(--bb-color-gray-200);
526
531
  --sky-color-background-container-base: var(--bb-color-white);
527
532
  --sky-color-background-container-danger: var(--bb-color-red-200);
528
533
  --sky-color-background-container-dimmed: var(--bb-color-gray-25);
534
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
529
535
  --sky-color-background-container-info: var(--bb-color-blue-200);
530
536
  --sky-color-background-container-menu: var(--bb-color-white);
531
537
  --sky-color-background-container-success: var(--bb-color-green-200);
@@ -590,8 +596,13 @@
590
596
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
591
597
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
592
598
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
599
+ --sky-color-border-action-tertiary-on_prominent-active: var(--bb-color-slate-300);
600
+ --sky-color-border-action-tertiary-on_prominent-base: var(--bb-color-transparent);
601
+ --sky-color-border-action-tertiary-on_prominent-focus: var(--bb-color-slate-300);
602
+ --sky-color-border-action-tertiary-on_prominent-hover: var(--bb-color-slate-300);
593
603
  --sky-color-border-column_divider: var(--bb-color-blue-600);
594
604
  --sky-color-border-container-base: var(--bb-color-gray-200);
605
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
595
606
  --sky-color-border-danger: var(--bb-color-red-600);
596
607
  --sky-color-border-disabled: var(--bb-color-gray-300);
597
608
  --sky-color-border-divider: var(--bb-color-gray-300);
@@ -657,6 +668,7 @@
657
668
  --sky-color-icon-info: var(--bb-color-blue-600);
658
669
  --sky-color-icon-input-action: var(--bb-color-gray-600);
659
670
  --sky-color-icon-inverse: var(--bb-color-white);
671
+ --sky-color-icon-on_prominent: var(--bb-color-white);
660
672
  --sky-color-icon-selected: var(--bb-color-blue-600);
661
673
  --sky-color-icon-success: var(--bb-color-green-600);
662
674
  --sky-color-icon-warning: var(--bb-color-yellow-400);
@@ -671,6 +683,7 @@
671
683
  --sky-color-text-default: var(--bb-color-gray-1000);
672
684
  --sky-color-text-heading: var(--bb-color-gray-1100);
673
685
  --sky-color-text-inverse: var(--bb-color-white);
686
+ --sky-color-text-on_prominent: var(--bb-color-white);
674
687
  --sky-color-text-selected: var(--bb-color-blue-600);
675
688
  --sky-color-viz-axis: var(--bb-color-gray-500);
676
689
  --sky-color-viz-category-1: var(--bb-color-teal-500);
@@ -723,6 +736,7 @@
723
736
  --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
724
737
  --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
725
738
  --sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
739
+ --sky-color-background-action-tertiary-on_prominent-disabled: var(--sky-color-background-disabled);
726
740
  --sky-color-background-input-disabled: var(--sky-color-background-disabled);
727
741
  --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
728
742
  --sky-color-background-row-disabled: var(--sky-color-background-disabled);
@@ -734,6 +748,7 @@
734
748
  --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
735
749
  --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
736
750
  --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
751
+ --sky-color-border-action-tertiary-on_prominent-disabled: var(--sky-color-border-disabled);
737
752
  --sky-color-border-input-disabled: var(--sky-color-border-disabled);
738
753
  --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
739
754
  --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
@@ -811,11 +826,16 @@
811
826
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
812
827
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
813
828
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
814
- --sky-color-background-blocking: var(--bb-color-rgba-black-70);
829
+ --sky-color-background-action-tertiary-on_prominent-active: var(--bb-color-slate-600);
830
+ --sky-color-background-action-tertiary-on_prominent-base: var(--bb-color-transparent);
831
+ --sky-color-background-action-tertiary-on_prominent-focus: var(--bb-color-transparent);
832
+ --sky-color-background-action-tertiary-on_prominent-hover: var(--bb-color-slate-700);
833
+ --sky-color-background-blocking: var(--bb-color-rgba-steel-fusion-1100-70);
815
834
  --sky-color-background-container-backdrop: var(--bb-color-gray-900);
816
835
  --sky-color-background-container-base: var(--bb-color-gray-1000);
817
836
  --sky-color-background-container-danger: var(--bb-color-red-800);
818
837
  --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
838
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
819
839
  --sky-color-background-container-info: var(--bb-color-blue-800);
820
840
  --sky-color-background-container-menu: var(--bb-color-gray-900);
821
841
  --sky-color-background-container-success: var(--bb-color-green-900);
@@ -880,8 +900,13 @@
880
900
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
881
901
  --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
882
902
  --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
903
+ --sky-color-border-action-tertiary-on_prominent-active: var(--bb-color-slate-300);
904
+ --sky-color-border-action-tertiary-on_prominent-base: var(--bb-color-transparent);
905
+ --sky-color-border-action-tertiary-on_prominent-focus: var(--bb-color-slate-300);
906
+ --sky-color-border-action-tertiary-on_prominent-hover: var(--bb-color-slate-300);
883
907
  --sky-color-border-column_divider: var(--bb-color-blue-400);
884
908
  --sky-color-border-container-base: var(--bb-color-blue-900);
909
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
885
910
  --sky-color-border-danger: var(--bb-color-red-400);
886
911
  --sky-color-border-disabled: var(--bb-color-gray-800);
887
912
  --sky-color-border-divider: var(--bb-color-gray-800);
@@ -947,6 +972,7 @@
947
972
  --sky-color-icon-info: var(--bb-color-blue-600);
948
973
  --sky-color-icon-input-action: var(--bb-color-sky-600);
949
974
  --sky-color-icon-inverse: var(--bb-color-gray-1100);
975
+ --sky-color-icon-on_prominent: var(--bb-color-white);
950
976
  --sky-color-icon-selected: var(--bb-color-blue-600);
951
977
  --sky-color-icon-success: var(--bb-color-green-700);
952
978
  --sky-color-icon-warning: var(--bb-color-yellow-600);
@@ -961,6 +987,7 @@
961
987
  --sky-color-text-default: var(--bb-color-gray-25);
962
988
  --sky-color-text-heading: var(--bb-color-gray-50);
963
989
  --sky-color-text-inverse: var(--bb-color-gray-1100);
990
+ --sky-color-text-on_prominent: var(--bb-color-white);
964
991
  --sky-color-text-selected: var(--bb-color-blue-400);
965
992
  --sky-color-viz-axis: var(--bb-color-gray-600);
966
993
  --sky-color-viz-category-1: var(--bb-color-teal-600);
@@ -1013,6 +1040,7 @@
1013
1040
  --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
1014
1041
  --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
1015
1042
  --sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
1043
+ --sky-color-background-action-tertiary-on_prominent-disabled: var(--sky-color-background-disabled);
1016
1044
  --sky-color-background-input-disabled: var(--sky-color-background-disabled);
1017
1045
  --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
1018
1046
  --sky-color-background-row-disabled: var(--sky-color-background-disabled);
@@ -1024,6 +1052,7 @@
1024
1052
  --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
1025
1053
  --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
1026
1054
  --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
1055
+ --sky-color-border-action-tertiary-on_prominent-disabled: var(--sky-color-border-disabled);
1027
1056
  --sky-color-border-input-disabled: var(--sky-color-border-disabled);
1028
1057
  --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
1029
1058
  --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
@@ -1687,6 +1716,8 @@
1687
1716
  --sky-size-picker_btn: var(--bb-size-fluid-200);
1688
1717
  --sky-size-progress_step: var(--bb-size-fluid-75);
1689
1718
  --sky-size-switch: var(--bb-size-fluid-125);
1719
+ --sky-size-text_underline-offset: var(--bb-size-fluid-12);
1720
+ --sky-size-text_underline-thickness: var(--bb-size-fluid-6);
1690
1721
  --sky-size-thumbnail-l: var(--bb-size-fixed-600);
1691
1722
  --sky-size-width-modal-l: var(--bb-size-fixed-6000);
1692
1723
  --sky-size-width-modal-m: var(--bb-size-fixed-4000);
package/bundles/blackbaud.css CHANGED
@@ -240,6 +240,7 @@
240
240
  --bb-color-rgba-red-dark-600-50: rgba(181, 47, 50, 0.5);
241
241
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
242
242
  --bb-color-rgba-steel-fusion-100-5: rgba(243, 246, 249, 0.05);
243
+ --bb-color-rgba-steel-fusion-1100-70: rgba(28, 34, 40, 0.7);
243
244
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
244
245
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
245
246
  --bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
@@ -380,15 +381,15 @@
380
381
  --bb-font-weight-light: 300;
381
382
  --bb-font-weight-regular: 400;
382
383
  --bb-font-weight-semibold: 600;
383
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/bb-logo.png');
384
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
385
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-base-light.svg');
386
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
387
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
388
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
389
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
390
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
391
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.3.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
384
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/bb-logo.png');
385
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
386
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-base-light.svg');
387
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
388
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
389
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
390
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
391
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
392
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.4.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
392
393
  --bb-letter_spacing-normal: normal;
393
394
  --bb-letter_spacing-wider: 0.01rem;
394
395
  --bb-letter_spacing-widest: 0.046875rem;
@@ -597,11 +598,16 @@
597
598
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
598
599
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
599
600
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
600
- --sky-color-background-blocking: var(--bb-color-rgba-black-70);
601
+ --sky-color-background-action-tertiary-on_prominent-active: var(--bb-color-slate-600);
602
+ --sky-color-background-action-tertiary-on_prominent-base: var(--bb-color-transparent);
603
+ --sky-color-background-action-tertiary-on_prominent-focus: var(--bb-color-transparent);
604
+ --sky-color-background-action-tertiary-on_prominent-hover: var(--bb-color-slate-700);
605
+ --sky-color-background-blocking: var(--bb-color-rgba-steel-fusion-1100-70);
601
606
  --sky-color-background-container-backdrop: var(--bb-color-steel-fusion-1000);
602
607
  --sky-color-background-container-base: var(--bb-color-steel-fusion-1100);
603
608
  --sky-color-background-container-danger: var(--bb-color-rgba-red-dark-600-35);
604
609
  --sky-color-background-container-dimmed: var(--bb-color-steel-fusion-1050);
610
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
605
611
  --sky-color-background-container-info: var(--bb-color-rgba-blue-600-35);
606
612
  --sky-color-background-container-menu: var(--bb-color-steel-fusion-1000);
607
613
  --sky-color-background-container-success: var(--bb-color-rgba-green-600-35);
@@ -672,8 +678,13 @@
672
678
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
673
679
  --sky-color-border-action-tertiary-focus: var(--bb-color-oklch-blue-375);
674
680
  --sky-color-border-action-tertiary-hover: var(--bb-color-oklch-blue-375);
681
+ --sky-color-border-action-tertiary-on_prominent-active: var(--bb-color-slate-300);
682
+ --sky-color-border-action-tertiary-on_prominent-base: var(--bb-color-transparent);
683
+ --sky-color-border-action-tertiary-on_prominent-focus: var(--bb-color-slate-300);
684
+ --sky-color-border-action-tertiary-on_prominent-hover: var(--bb-color-slate-300);
675
685
  --sky-color-border-column_divider: var(--bb-color-blue-400);
676
686
  --sky-color-border-container-base: var(--bb-color-steel-fusion-800);
687
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
677
688
  --sky-color-border-danger: var(--bb-color-red-600);
678
689
  --sky-color-border-disabled: var(--bb-color-gray-800);
679
690
  --sky-color-border-divider: var(--bb-color-gray-700);
@@ -736,6 +747,7 @@
736
747
  --sky-color-icon-info: var(--bb-color-blue-600);
737
748
  --sky-color-icon-input-action: var(--bb-color-oklch-blue-375);
738
749
  --sky-color-icon-inverse: var(--bb-color-black);
750
+ --sky-color-icon-on_prominent: var(--bb-color-white);
739
751
  --sky-color-icon-selected: var(--bb-color-oklch-blue-375);
740
752
  --sky-color-icon-success: var(--bb-color-green-600);
741
753
  --sky-color-icon-warning: var(--bb-color-yellow-600);
@@ -750,12 +762,15 @@
750
762
  --sky-color-text-default: var(--bb-color-steel-fusion-200);
751
763
  --sky-color-text-heading: var(--bb-color-steel-fusion-100);
752
764
  --sky-color-text-inverse: var(--bb-color-black);
765
+ --sky-color-text-on_prominent: var(--bb-color-white);
753
766
  --sky-color-text-selected: var(--bb-color-oklch-blue-375);
754
767
  --sky-image-select_icon-base: var(--bb-image-select_icon-bb-dark-src);
755
768
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-dark-src);
756
769
  --sky-opacity-wait: var(--bb-opacity-600);
757
770
  --sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
771
+ --sky-color-background-action-tertiary-on_prominent-disabled: var(--sky-color-background-disabled);
758
772
  --sky-color-border-action-accent-base: var(--bb-color-gradient-brand-secondary);
773
+ --sky-color-border-action-tertiary-on_prominent-disabled: var(--sky-color-border-disabled);
759
774
  --sky-elevation-focus: var(--bb-shadow-heavy-black-200);
760
775
  --sky-elevation-none: var(--bb-shadow-heavy-black-0);
761
776
  --sky-elevation-overflow: var(--bb-shadow-heavy-black-200);
package/bundles/public-api-styles.json CHANGED
@@ -1378,6 +1378,17 @@
1378
1378
  "type": "color-swatch"
1379
1379
  }
1380
1380
  },
1381
+ {
1382
+ "name": "Prominent container header background",
1383
+ "className": "sky-theme-color-background-container-header-prominent",
1384
+ "description": "The background color for headers of containers of tools that work alongside the main page content.",
1385
+ "properties": {
1386
+ "background-color": "var(--sky-theme-color-background-container-header-prominent)"
1387
+ },
1388
+ "demoMetadata": {
1389
+ "type": "color-swatch"
1390
+ }
1391
+ },
1381
1392
  {
1382
1393
  "name": "Disabled background",
1383
1394
  "className": "sky-theme-color-background-disabled",
@@ -1434,6 +1445,18 @@
1434
1445
  "type": "text-color",
1435
1446
  "background": "--sky-theme-color-background-icon_matte-info"
1436
1447
  }
1448
+ },
1449
+ {
1450
+ "name": "Prominent container header text",
1451
+ "className": "sky-theme-color-text-on_prominent",
1452
+ "description": "The color for text on prominent container headers.",
1453
+ "properties": {
1454
+ "color": "var(--sky-theme-color-text-on_prominent)"
1455
+ },
1456
+ "demoMetadata": {
1457
+ "type": "text-color",
1458
+ "background": "--sky-theme-color-background-container-header-prominent"
1459
+ }
1437
1460
  }
1438
1461
  ]
1439
1462
  },
@@ -1490,6 +1513,18 @@
1490
1513
  "type": "icon-color",
1491
1514
  "background": "--sky-theme-color-background-icon_matte-info"
1492
1515
  }
1516
+ },
1517
+ {
1518
+ "name": "Prominent container header icon",
1519
+ "className": "sky-theme-color-icon-on_prominent",
1520
+ "description": "The color for icons on prominent container headers.",
1521
+ "properties": {
1522
+ "color": "var(--sky-theme-color-icon-on_prominent)"
1523
+ },
1524
+ "demoMetadata": {
1525
+ "type": "icon-color",
1526
+ "background": "--sky-theme-color-background-container-header-prominent"
1527
+ }
1493
1528
  }
1494
1529
  ]
1495
1530
  },
@@ -1914,6 +1949,7 @@
1914
1949
  {
1915
1950
  "name": "Container default",
1916
1951
  "className": "sky-theme-border-container-default",
1952
+ "description": "The default border around most containers that don't overlay other content.",
1917
1953
  "properties": {
1918
1954
  "border": "var(--sky-theme-border-container-default)"
1919
1955
  },
@@ -1925,6 +1961,17 @@
1925
1961
  "demoMetadata": {
1926
1962
  "type": "border"
1927
1963
  }
1964
+ },
1965
+ {
1966
+ "name": "Prominent container header border",
1967
+ "className": "sky-theme-border-container-header-prominent",
1968
+ "description": "The bottom border for the header on a prominent container.",
1969
+ "properties": {
1970
+ "border-bottom": "var(--sky-theme-border-container-header-prominent)"
1971
+ },
1972
+ "demoMetadata": {
1973
+ "type": "border"
1974
+ }
1928
1975
  }
1929
1976
  ],
1930
1977
  "demoMetadata": {
package/bundles/public-api-tokens.json CHANGED
@@ -2292,6 +2292,14 @@
2292
2292
  "type": "color-swatch"
2293
2293
  }
2294
2294
  },
2295
+ {
2296
+ "name": "Prominent container header background",
2297
+ "customProperty": "--sky-theme-color-background-container-header-prominent",
2298
+ "description": "The background color for headers of containers of tools that work alongside the main page content.",
2299
+ "demoMetadata": {
2300
+ "type": "color-swatch"
2301
+ }
2302
+ },
2295
2303
  {
2296
2304
  "name": "Disabled background",
2297
2305
  "customProperty": "--sky-theme-color-background-disabled",
@@ -2331,6 +2339,14 @@
2331
2339
  "type": "border-color"
2332
2340
  }
2333
2341
  },
2342
+ {
2343
+ "name": "Prominent header border",
2344
+ "customProperty": "--sky-theme-color-border-container-header-prominent",
2345
+ "description": "The bottom border color for headers of prominent containers.",
2346
+ "demoMetadata": {
2347
+ "type": "border-color"
2348
+ }
2349
+ },
2334
2350
  {
2335
2351
  "name": "Disabled border",
2336
2352
  "customProperty": "--sky-theme-color-border-disabled",
@@ -2454,6 +2470,15 @@
2454
2470
  "type": "text-color",
2455
2471
  "background": "--sky-theme-color-background-icon_matte-info"
2456
2472
  }
2473
+ },
2474
+ {
2475
+ "name": "Prominent container header text",
2476
+ "customProperty": "--sky-theme-color-text-on_prominent",
2477
+ "description": "The color for text on prominent container headers.",
2478
+ "demoMetadata": {
2479
+ "type": "text-color",
2480
+ "background": "--sky-theme-color-background-container-header-prominent"
2481
+ }
2457
2482
  }
2458
2483
  ]
2459
2484
  },
@@ -2498,6 +2523,15 @@
2498
2523
  "type": "icon-color",
2499
2524
  "background": "--sky-theme-color-background-icon_matte-info"
2500
2525
  }
2526
+ },
2527
+ {
2528
+ "name": "Prominent container header icon",
2529
+ "customProperty": "--sky-theme-color-icon-on_prominent",
2530
+ "description": "The color for icons on prominent container headers.",
2531
+ "demoMetadata": {
2532
+ "type": "icon-color",
2533
+ "background": "--sky-theme-color-background-container-header-prominent"
2534
+ }
2501
2535
  }
2502
2536
  ]
2503
2537
  },
@@ -3737,10 +3771,19 @@
3737
3771
  "tokens": [
3738
3772
  {
3739
3773
  "name": "Container default",
3774
+ "description": "The default border around most containers that don't overlay other content.",
3740
3775
  "customProperty": "--sky-theme-border-container-default",
3741
3776
  "demoMetadata": {
3742
3777
  "type": "border"
3743
3778
  }
3779
+ },
3780
+ {
3781
+ "name": "Prominent header border",
3782
+ "description": "The bottom border for the header on a prominent container.",
3783
+ "customProperty": "--sky-theme-border-container-header-prominent",
3784
+ "demoMetadata": {
3785
+ "type": "border"
3786
+ }
3744
3787
  }
3745
3788
  ]
3746
3789
  },
package/bundles/public-api.css CHANGED
@@ -112,6 +112,7 @@
112
112
  --sky-theme-color-background-container-danger: var(--sky-color-background-container-danger);
113
113
  --sky-theme-color-background-container-default: var(--sky-color-background-container-base);
114
114
  --sky-theme-color-background-container-dimmed: var(--sky-color-background-container-dimmed);
115
+ --sky-theme-color-background-container-header-prominent: var(--sky-color-background-container-header-prominent);
115
116
  --sky-theme-color-background-container-info: var(--sky-color-background-container-info);
116
117
  --sky-theme-color-background-container-success: var(--sky-color-background-container-success);
117
118
  --sky-theme-color-background-container-warning: var(--sky-color-background-container-warning);
@@ -123,6 +124,7 @@
123
124
  --sky-theme-color-background-icon_matte-warning: var(--sky-color-background-icon_matte-warning);
124
125
  --sky-theme-color-background-page: var(--sky-color-background-page);
125
126
  --sky-theme-color-border-container-default: var(--sky-color-border-container-base);
127
+ --sky-theme-color-border-container-header-prominent: var(--sky-color-border-container-header-prominent);
126
128
  --sky-theme-color-border-danger: var(--sky-color-border-danger);
127
129
  --sky-theme-color-border-disabled: var(--sky-color-border-disabled);
128
130
  --sky-theme-color-border-divider-default: var(--sky-color-border-divider);
@@ -150,6 +152,7 @@
150
152
  --sky-theme-color-icon-default: var(--sky-color-icon-default);
151
153
  --sky-theme-color-icon-info: var(--sky-color-icon-info);
152
154
  --sky-theme-color-icon-inverse: var(--sky-color-icon-inverse);
155
+ --sky-theme-color-icon-on_prominent: var(--sky-color-icon-on_prominent);
153
156
  --sky-theme-color-icon-success: var(--sky-color-icon-success);
154
157
  --sky-theme-color-text-action: var(--sky-color-text-action);
155
158
  --sky-theme-color-text-action_contrast: var(--sky-color-text-action_contrast);
@@ -157,6 +160,7 @@
157
160
  --sky-theme-color-text-default: var(--sky-color-text-default);
158
161
  --sky-theme-color-text-heading: var(--sky-color-text-heading);
159
162
  --sky-theme-color-text-inverse: var(--sky-color-text-inverse);
163
+ --sky-theme-color-text-on_prominent: var(--sky-color-text-on_prominent);
160
164
  --sky-theme-color-viz-axis: var(--sky-color-viz-axis);
161
165
  --sky-theme-color-viz-category-1: var(--sky-color-viz-category-1);
162
166
  --sky-theme-color-viz-category-2: var(--sky-color-viz-category-2);
@@ -201,6 +205,7 @@
201
205
  }
202
206
  .sky-theme-modern.sky-theme-brand-base {
203
207
  --sky-theme-border-container-default: var(--sky-border-width-container-base) var(--sky-border-style-divider) var(--sky-color-border-container-base);
208
+ --sky-theme-border-container-header-prominent: var(--sky-border-width-emphasized) var(--sky-border-style-divider) var(--sky-color-border-container-header-prominent);
204
209
  --sky-theme-border-danger: var(--sky-border-width-container-base) var(--sky-border-style-divider) var(--sky-color-border-danger);
205
210
  --sky-theme-border-divider-default: var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider);
206
211
  --sky-theme-border-divider-soft: var(--sky-border-width-separator-row) var(--sky-border-style-separator-row) var(--sky-color-border-separator-row);
@@ -335,6 +340,7 @@
335
340
  --sky-theme-color-background-container-danger: #f7a08f;
336
341
  --sky-theme-color-background-container-default: #ffffff;
337
342
  --sky-theme-color-background-container-dimmed: #eeeeef;
343
+ --sky-theme-color-background-container-header-prominent: #32435e;
338
344
  --sky-theme-color-background-container-info: #81d4f7;
339
345
  --sky-theme-color-background-container-success: #b7da9b;
340
346
  --sky-theme-color-background-container-warning: #ffd597;
@@ -346,6 +352,7 @@
346
352
  --sky-theme-color-background-icon_matte-warning: #ffd597;
347
353
  --sky-theme-color-background-page: #ffffff;
348
354
  --sky-theme-color-border-container-default: #cdcfd2;
355
+ --sky-theme-color-border-container-header-prominent: #7289af;
349
356
  --sky-theme-color-border-danger: #ef4044;
350
357
  --sky-theme-color-border-disabled: #cdcfd2;
351
358
  --sky-theme-color-border-divider-default: #cdcfd2;
@@ -373,6 +380,7 @@
373
380
  --sky-theme-color-icon-default: #212327;
374
381
  --sky-theme-color-icon-info: #00b4f1;
375
382
  --sky-theme-color-icon-inverse: #ffffff;
383
+ --sky-theme-color-icon-on_prominent: #ffffff;
376
384
  --sky-theme-color-icon-success: #72bf44;
377
385
  --sky-theme-color-text-action: #0974a1;
378
386
  --sky-theme-color-text-action_contrast: #0974a1;
@@ -380,6 +388,7 @@
380
388
  --sky-theme-color-text-default: #212327;
381
389
  --sky-theme-color-text-heading: #212327;
382
390
  --sky-theme-color-text-inverse: #ffffff;
391
+ --sky-theme-color-text-on_prominent: #ffffff;
383
392
  --sky-theme-color-viz-axis: #85888d;
384
393
  --sky-theme-color-viz-category-1: #06a39e;
385
394
  --sky-theme-color-viz-category-2: #6d3c96;
@@ -424,6 +433,7 @@
424
433
  }
425
434
  :root {
426
435
  --sky-theme-border-container-default: 1px solid #cdcfd2;
436
+ --sky-theme-border-container-header-prominent: 1px solid #7289AF;
427
437
  --sky-theme-border-danger: 1px solid #ef4044;
428
438
  --sky-theme-border-divider-default: 1px solid #cdcfd2;
429
439
  --sky-theme-border-divider-soft: 1px solid #cdcfd2;
@@ -811,6 +821,9 @@ em {
811
821
  .sky-theme-color-background-container-backdrop {
812
822
  background-color: var(--sky-theme-color-background-container-backdrop);
813
823
  }
824
+ .sky-theme-color-background-container-header-prominent {
825
+ background-color: var(--sky-theme-color-background-container-header-prominent);
826
+ }
814
827
  .sky-theme-color-background-disabled {
815
828
  background-color: var(--sky-theme-color-background-disabled);
816
829
  }
@@ -820,6 +833,9 @@ em {
820
833
  .sky-theme-color-text-inverse {
821
834
  color: var(--sky-theme-color-text-inverse);
822
835
  }
836
+ .sky-theme-color-text-on_prominent {
837
+ color: var(--sky-theme-color-text-on_prominent);
838
+ }
823
839
  .sky-theme-color-icon-default {
824
840
  color: var(--sky-theme-color-icon-default);
825
841
  }
@@ -832,6 +848,9 @@ em {
832
848
  .sky-theme-color-icon-inverse {
833
849
  color: var(--sky-theme-color-icon-inverse);
834
850
  }
851
+ .sky-theme-color-icon-on_prominent {
852
+ color: var(--sky-theme-color-icon-on_prominent);
853
+ }
835
854
  .sky-theme-color-background-icon_matte-action-soft {
836
855
  background-color: var(--sky-theme-color-background-icon_matte-action-soft);
837
856
  }
@@ -913,6 +932,9 @@ em {
913
932
  .sky-theme-border-container-default {
914
933
  border: var(--sky-theme-border-container-default);
915
934
  }
935
+ .sky-theme-border-container-header-prominent {
936
+ border-bottom: var(--sky-theme-border-container-header-prominent);
937
+ }
916
938
  .sky-theme-border-divider-default-top {
917
939
  border-top: var(--sky-theme-border-divider-default);
918
940
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "6.3.0",
3
+ "version": "6.4.0",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",