@blackbaud/skyux-design-tokens 7.0.0-alpha.2 → 7.0.0-alpha.4

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 +48 -5
  2. package/assets/assets.json +1 -1
  3. package/assets/scss/base.css +46 -10
  4. package/assets/scss/blackbaud.css +26 -10
  5. package/bundles/base.css +46 -10
  6. package/bundles/blackbaud.css +26 -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
@@ -1,19 +1,55 @@
1
1
  # Changelog
2
2
 
3
- ## [7.0.0-alpha.2](https://github.com/blackbaud/skyux-design-tokens/compare/7.0.0-alpha.1...7.0.0-alpha.2) (2026-08-17)
3
+ ## [7.0.0-alpha.4](https://github.com/blackbaud/skyux-design-tokens/compare/7.0.0-alpha.3...7.0.0-alpha.4) (2026-08-21)
4
+
5
+
6
+ ### Features
7
+
8
+ * add underline styling for dark mode links ([#397](https://github.com/blackbaud/skyux-design-tokens/issues/397)) ([#402](https://github.com/blackbaud/skyux-design-tokens/issues/402)) ([0772ffc](https://github.com/blackbaud/skyux-design-tokens/commit/0772ffcbd3236a835495a03374d62c853569a825))
9
+ * prominent header and content tokens ([#398](https://github.com/blackbaud/skyux-design-tokens/issues/398)) ([#400](https://github.com/blackbaud/skyux-design-tokens/issues/400)) ([f0a7234](https://github.com/blackbaud/skyux-design-tokens/commit/f0a723445a27c42c063c6f5c11b9039b408a39ee))
10
+
11
+ ## [6.4.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.3.1...6.4.0) (2026-08-21)
12
+
13
+
14
+ ### Features
15
+
16
+ * 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))
17
+ * 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))
18
+
19
+ ## [7.0.0-alpha.3](https://github.com/blackbaud/skyux-design-tokens/compare/7.0.0-alpha.2...7.0.0-alpha.3) (2026-08-20)
20
+
21
+
22
+ ### Features
23
+
24
+ * add tokens for container overlay border styles ([#384](https://github.com/blackbaud/skyux-design-tokens/issues/384)) ([#386](https://github.com/blackbaud/skyux-design-tokens/issues/386)) ([deaf1cd](https://github.com/blackbaud/skyux-design-tokens/commit/deaf1cd5988cd83baed33302659c589491245e0a))
4
25
 
5
26
 
6
27
  ### Bug Fixes
7
28
 
8
- * dark mode backdrop fix ([#375](https://github.com/blackbaud/skyux-design-tokens/issues/375)) ([d447cac](https://github.com/blackbaud/skyux-design-tokens/commit/d447cac4bb928c5d42995564ea19e9e642d1d8c9))
9
- * fix specificity for light mode tokens and validate light and dark mode "base" brand tokens match ([#381](https://github.com/blackbaud/skyux-design-tokens/issues/381)) ([#382](https://github.com/blackbaud/skyux-design-tokens/issues/382)) ([0a460f4](https://github.com/blackbaud/skyux-design-tokens/commit/0a460f4775bbde92b00057f831ddf20b76accf46))
29
+ * update blocking wait background in dark mode ([#380](https://github.com/blackbaud/skyux-design-tokens/issues/380)) ([#395](https://github.com/blackbaud/skyux-design-tokens/issues/395)) ([c177b19](https://github.com/blackbaud/skyux-design-tokens/commit/c177b19e231f5686796483eb01e06c423c8bf98e))
10
30
 
11
- ## [7.0.0-alpha.1](https://github.com/blackbaud/skyux-design-tokens/compare/7.0.0-alpha.0...7.0.0-alpha.1) (2026-08-04)
31
+ ## [6.3.1](https://github.com/blackbaud/skyux-design-tokens/compare/6.3.0...6.3.1) (2026-08-18)
32
+
33
+
34
+ ### Bug Fixes
35
+
36
+ * 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))
37
+
38
+ ## [6.3.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.2.1...6.3.0) (2026-08-18)
12
39
 
13
40
 
14
41
  ### Features
15
42
 
16
- * add tokens for styling scrollbars ([#370](https://github.com/blackbaud/skyux-design-tokens/issues/370)) ([#372](https://github.com/blackbaud/skyux-design-tokens/issues/372)) ([5460b7d](https://github.com/blackbaud/skyux-design-tokens/commit/5460b7d393c4e18e5427be6997e91bac12977009))
43
+ * add tokens for container overlay border styles ([#384](https://github.com/blackbaud/skyux-design-tokens/issues/384)) ([26dcc8f](https://github.com/blackbaud/skyux-design-tokens/commit/26dcc8f6f8a24eb7ff66fe36b9c9d45880f49410))
44
+
45
+ ## [7.0.0-alpha.2](https://github.com/blackbaud/skyux-design-tokens/compare/7.0.0-alpha.1...7.0.0-alpha.2) (2026-08-17)
46
+
47
+
48
+ ### Bug Fixes
49
+
50
+ * dark mode backdrop fix ([#375](https://github.com/blackbaud/skyux-design-tokens/issues/375)) ([d447cac](https://github.com/blackbaud/skyux-design-tokens/commit/d447cac4bb928c5d42995564ea19e9e642d1d8c9))
51
+ * fix specificity for light mode tokens and validate light and dark mode "base" brand tokens match ([#381](https://github.com/blackbaud/skyux-design-tokens/issues/381)) ([#382](https://github.com/blackbaud/skyux-design-tokens/issues/382)) ([0a460f4](https://github.com/blackbaud/skyux-design-tokens/commit/0a460f4775bbde92b00057f831ddf20b76accf46))
52
+
17
53
 
18
54
  ## [6.2.1](https://github.com/blackbaud/skyux-design-tokens/compare/6.2.0...6.2.1) (2026-08-17)
19
55
 
@@ -23,6 +59,13 @@
23
59
  * dark mode backdrop fix ([#375](https://github.com/blackbaud/skyux-design-tokens/issues/375)) ([#377](https://github.com/blackbaud/skyux-design-tokens/issues/377)) ([645ebf9](https://github.com/blackbaud/skyux-design-tokens/commit/645ebf92868bd089cbfdc004034f7ea9232b4480))
24
60
  * fix specificity for light mode tokens and validate light and dark mode "base" brand tokens match ([#381](https://github.com/blackbaud/skyux-design-tokens/issues/381)) ([bb974b7](https://github.com/blackbaud/skyux-design-tokens/commit/bb974b7a39c6e6c064986e27f54a5f4b9f88e998))
25
61
 
62
+ ## [7.0.0-alpha.1](https://github.com/blackbaud/skyux-design-tokens/compare/7.0.0-alpha.0...7.0.0-alpha.1) (2026-08-04)
63
+
64
+
65
+ ### Features
66
+
67
+ * add tokens for styling scrollbars ([#370](https://github.com/blackbaud/skyux-design-tokens/issues/370)) ([#372](https://github.com/blackbaud/skyux-design-tokens/issues/372)) ([5460b7d](https://github.com/blackbaud/skyux-design-tokens/commit/5460b7d393c4e18e5427be6997e91bac12977009))
68
+
26
69
  ## [6.2.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.1.2...6.2.0) (2026-08-04)
27
70
 
28
71
 
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/7.0.0-alpha.2/assets/images/favicon.ico"
5
+ "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.4/assets/images/favicon.ico"
6
6
  }
7
7
  },
8
8
  "strings": {
package/assets/scss/base.css CHANGED
@@ -60,6 +60,7 @@
60
60
  --bb-border-radius-pill: 999rem;
61
61
  --bb-border-radius-round: 50%;
62
62
  --bb-border-style-dotted: dotted;
63
+ --bb-border-style-none: none;
63
64
  --bb-border-style-solid: solid;
64
65
  --bb-brand-name: 'Blackbaud';
65
66
  --bb-color-black: #000000;
@@ -239,6 +240,7 @@
239
240
  --bb-color-rgba-red-dark-600-50: rgba(181, 47, 50, 0.5);
240
241
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
241
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);
242
244
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
243
245
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
244
246
  --bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
@@ -379,15 +381,15 @@
379
381
  --bb-font-weight-light: 300;
380
382
  --bb-font-weight-regular: 400;
381
383
  --bb-font-weight-semibold: 600;
382
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/bb-logo.png');
383
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-base-dark.svg');
384
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-base-light.svg');
385
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-bb-dark.svg');
386
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-bb-light.svg');
387
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
388
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
389
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
390
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/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/7.0.0-alpha.4/assets/images/bb-logo.png');
385
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
391
393
  --bb-letter_spacing-normal: normal;
392
394
  --bb-letter_spacing-wider: 0.01rem;
393
395
  --bb-letter_spacing-widest: 0.046875rem;
@@ -520,11 +522,16 @@
520
522
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
521
523
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
522
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);
523
529
  --sky-color-background-blocking: var(--bb-color-rgba-white-70);
524
530
  --sky-color-background-container-backdrop: var(--bb-color-gray-200);
525
531
  --sky-color-background-container-base: var(--bb-color-white);
526
532
  --sky-color-background-container-danger: var(--bb-color-red-200);
527
533
  --sky-color-background-container-dimmed: var(--bb-color-gray-25);
534
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
528
535
  --sky-color-background-container-info: var(--bb-color-blue-200);
529
536
  --sky-color-background-container-menu: var(--bb-color-white);
530
537
  --sky-color-background-container-success: var(--bb-color-green-200);
@@ -589,8 +596,13 @@
589
596
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
590
597
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
591
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);
592
603
  --sky-color-border-column_divider: var(--bb-color-blue-600);
593
604
  --sky-color-border-container-base: var(--bb-color-gray-200);
605
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
594
606
  --sky-color-border-danger: var(--bb-color-red-600);
595
607
  --sky-color-border-disabled: var(--bb-color-gray-300);
596
608
  --sky-color-border-divider: var(--bb-color-gray-300);
@@ -656,6 +668,7 @@
656
668
  --sky-color-icon-info: var(--bb-color-blue-600);
657
669
  --sky-color-icon-input-action: var(--bb-color-gray-600);
658
670
  --sky-color-icon-inverse: var(--bb-color-white);
671
+ --sky-color-icon-on_prominent: var(--bb-color-white);
659
672
  --sky-color-icon-selected: var(--bb-color-blue-600);
660
673
  --sky-color-icon-success: var(--bb-color-green-600);
661
674
  --sky-color-icon-warning: var(--bb-color-yellow-400);
@@ -670,6 +683,7 @@
670
683
  --sky-color-text-default: var(--bb-color-gray-1000);
671
684
  --sky-color-text-heading: var(--bb-color-gray-1100);
672
685
  --sky-color-text-inverse: var(--bb-color-white);
686
+ --sky-color-text-on_prominent: var(--bb-color-white);
673
687
  --sky-color-text-selected: var(--bb-color-blue-600);
674
688
  --sky-color-viz-axis: var(--bb-color-gray-500);
675
689
  --sky-color-viz-category-1: var(--bb-color-teal-500);
@@ -722,6 +736,7 @@
722
736
  --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
723
737
  --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
724
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);
725
740
  --sky-color-background-input-disabled: var(--sky-color-background-disabled);
726
741
  --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
727
742
  --sky-color-background-row-disabled: var(--sky-color-background-disabled);
@@ -733,6 +748,7 @@
733
748
  --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
734
749
  --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
735
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);
736
752
  --sky-color-border-input-disabled: var(--sky-color-border-disabled);
737
753
  --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
738
754
  --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
@@ -810,11 +826,16 @@
810
826
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
811
827
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
812
828
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
813
- --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);
814
834
  --sky-color-background-container-backdrop: var(--bb-color-gray-900);
815
835
  --sky-color-background-container-base: var(--bb-color-gray-1000);
816
836
  --sky-color-background-container-danger: var(--bb-color-red-800);
817
837
  --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
838
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
818
839
  --sky-color-background-container-info: var(--bb-color-blue-800);
819
840
  --sky-color-background-container-menu: var(--bb-color-gray-900);
820
841
  --sky-color-background-container-success: var(--bb-color-green-900);
@@ -879,8 +900,13 @@
879
900
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
880
901
  --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
881
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);
882
907
  --sky-color-border-column_divider: var(--bb-color-blue-400);
883
908
  --sky-color-border-container-base: var(--bb-color-blue-900);
909
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
884
910
  --sky-color-border-danger: var(--bb-color-red-400);
885
911
  --sky-color-border-disabled: var(--bb-color-gray-800);
886
912
  --sky-color-border-divider: var(--bb-color-gray-800);
@@ -946,6 +972,7 @@
946
972
  --sky-color-icon-info: var(--bb-color-blue-600);
947
973
  --sky-color-icon-input-action: var(--bb-color-sky-600);
948
974
  --sky-color-icon-inverse: var(--bb-color-gray-1100);
975
+ --sky-color-icon-on_prominent: var(--bb-color-white);
949
976
  --sky-color-icon-selected: var(--bb-color-blue-600);
950
977
  --sky-color-icon-success: var(--bb-color-green-700);
951
978
  --sky-color-icon-warning: var(--bb-color-yellow-600);
@@ -960,6 +987,7 @@
960
987
  --sky-color-text-default: var(--bb-color-gray-25);
961
988
  --sky-color-text-heading: var(--bb-color-gray-50);
962
989
  --sky-color-text-inverse: var(--bb-color-gray-1100);
990
+ --sky-color-text-on_prominent: var(--bb-color-white);
963
991
  --sky-color-text-selected: var(--bb-color-blue-400);
964
992
  --sky-color-viz-axis: var(--bb-color-gray-600);
965
993
  --sky-color-viz-category-1: var(--bb-color-teal-600);
@@ -1012,6 +1040,7 @@
1012
1040
  --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
1013
1041
  --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
1014
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);
1015
1044
  --sky-color-background-input-disabled: var(--sky-color-background-disabled);
1016
1045
  --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
1017
1046
  --sky-color-background-row-disabled: var(--sky-color-background-disabled);
@@ -1023,6 +1052,7 @@
1023
1052
  --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
1024
1053
  --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
1025
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);
1026
1056
  --sky-color-border-input-disabled: var(--sky-color-border-disabled);
1027
1057
  --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
1028
1058
  --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
@@ -1104,6 +1134,7 @@
1104
1134
  --sky-border-radius-thumb: var(--bb-border-radius-round);
1105
1135
  --sky-border-radius-xs: var(--bb-border-radius-012);
1106
1136
  --sky-border-style-accent: var(--bb-border-style-solid);
1137
+ --sky-border-style-container-overlay: var(--bb-border-style-none);
1107
1138
  --sky-border-style-divider: var(--bb-border-style-solid);
1108
1139
  --sky-border-style-elevation: var(--bb-border-style-solid);
1109
1140
  --sky-border-style-separator-dark: var(--bb-border-style-solid);
@@ -1685,6 +1716,8 @@
1685
1716
  --sky-size-picker_btn: var(--bb-size-fluid-200);
1686
1717
  --sky-size-progress_step: var(--bb-size-fluid-75);
1687
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);
1688
1721
  --sky-size-thumbnail-l: var(--bb-size-fixed-600);
1689
1722
  --sky-size-width-modal-l: var(--bb-size-fixed-6000);
1690
1723
  --sky-size-width-modal-m: var(--bb-size-fixed-4000);
@@ -1807,3 +1840,6 @@
1807
1840
  --sky-type-heading-1: var(--sky-font-style-heading-1) var(--sky-font-size-heading-1)/36 'var(--bb-font-blkb_sans-name)';
1808
1841
  --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/20 'var(--bb-font-blkb_sans-name)';
1809
1842
  }
1843
+ .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
1844
+ --sky-border-style-container-overlay: var(--bb-border-style-solid);
1845
+ }
package/assets/scss/blackbaud.css CHANGED
@@ -60,6 +60,7 @@
60
60
  --bb-border-radius-pill: 999rem;
61
61
  --bb-border-radius-round: 50%;
62
62
  --bb-border-style-dotted: dotted;
63
+ --bb-border-style-none: none;
63
64
  --bb-border-style-solid: solid;
64
65
  --bb-brand-name: 'Blackbaud';
65
66
  --bb-color-black: #000000;
@@ -239,6 +240,7 @@
239
240
  --bb-color-rgba-red-dark-600-50: rgba(181, 47, 50, 0.5);
240
241
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
241
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);
242
244
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
243
245
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
244
246
  --bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
@@ -379,15 +381,15 @@
379
381
  --bb-font-weight-light: 300;
380
382
  --bb-font-weight-regular: 400;
381
383
  --bb-font-weight-semibold: 600;
382
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/bb-logo.png');
383
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-base-dark.svg');
384
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-base-light.svg');
385
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-bb-dark.svg');
386
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-bb-light.svg');
387
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
388
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
389
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
390
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/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/7.0.0-alpha.4/assets/images/bb-logo.png');
385
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
391
393
  --bb-letter_spacing-normal: normal;
392
394
  --bb-letter_spacing-wider: 0.01rem;
393
395
  --bb-letter_spacing-widest: 0.046875rem;
@@ -596,11 +598,16 @@
596
598
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
597
599
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
598
600
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
599
- --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);
600
606
  --sky-color-background-container-backdrop: var(--bb-color-steel-fusion-1000);
601
607
  --sky-color-background-container-base: var(--bb-color-steel-fusion-1100);
602
608
  --sky-color-background-container-danger: var(--bb-color-rgba-red-dark-600-35);
603
609
  --sky-color-background-container-dimmed: var(--bb-color-steel-fusion-1050);
610
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
604
611
  --sky-color-background-container-info: var(--bb-color-rgba-blue-600-35);
605
612
  --sky-color-background-container-menu: var(--bb-color-steel-fusion-1000);
606
613
  --sky-color-background-container-success: var(--bb-color-rgba-green-600-35);
@@ -671,8 +678,13 @@
671
678
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
672
679
  --sky-color-border-action-tertiary-focus: var(--bb-color-oklch-blue-375);
673
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);
674
685
  --sky-color-border-column_divider: var(--bb-color-blue-400);
675
686
  --sky-color-border-container-base: var(--bb-color-steel-fusion-800);
687
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
676
688
  --sky-color-border-danger: var(--bb-color-red-600);
677
689
  --sky-color-border-disabled: var(--bb-color-gray-800);
678
690
  --sky-color-border-divider: var(--bb-color-gray-700);
@@ -735,6 +747,7 @@
735
747
  --sky-color-icon-info: var(--bb-color-blue-600);
736
748
  --sky-color-icon-input-action: var(--bb-color-oklch-blue-375);
737
749
  --sky-color-icon-inverse: var(--bb-color-black);
750
+ --sky-color-icon-on_prominent: var(--bb-color-white);
738
751
  --sky-color-icon-selected: var(--bb-color-oklch-blue-375);
739
752
  --sky-color-icon-success: var(--bb-color-green-600);
740
753
  --sky-color-icon-warning: var(--bb-color-yellow-600);
@@ -749,12 +762,15 @@
749
762
  --sky-color-text-default: var(--bb-color-steel-fusion-200);
750
763
  --sky-color-text-heading: var(--bb-color-steel-fusion-100);
751
764
  --sky-color-text-inverse: var(--bb-color-black);
765
+ --sky-color-text-on_prominent: var(--bb-color-white);
752
766
  --sky-color-text-selected: var(--bb-color-oklch-blue-375);
753
767
  --sky-image-select_icon-base: var(--bb-image-select_icon-bb-dark-src);
754
768
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-dark-src);
755
769
  --sky-opacity-wait: var(--bb-opacity-600);
756
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);
757
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);
758
774
  --sky-elevation-focus: var(--bb-shadow-heavy-black-200);
759
775
  --sky-elevation-none: var(--bb-shadow-heavy-black-0);
760
776
  --sky-elevation-overflow: var(--bb-shadow-heavy-black-200);
package/bundles/base.css CHANGED
@@ -60,6 +60,7 @@
60
60
  --bb-border-radius-pill: 999rem;
61
61
  --bb-border-radius-round: 50%;
62
62
  --bb-border-style-dotted: dotted;
63
+ --bb-border-style-none: none;
63
64
  --bb-border-style-solid: solid;
64
65
  --bb-brand-name: 'Blackbaud';
65
66
  --bb-color-black: #000000;
@@ -239,6 +240,7 @@
239
240
  --bb-color-rgba-red-dark-600-50: rgba(181, 47, 50, 0.5);
240
241
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
241
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);
242
244
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
243
245
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
244
246
  --bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
@@ -379,15 +381,15 @@
379
381
  --bb-font-weight-light: 300;
380
382
  --bb-font-weight-regular: 400;
381
383
  --bb-font-weight-semibold: 600;
382
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/bb-logo.png');
383
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-base-dark.svg');
384
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-base-light.svg');
385
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-bb-dark.svg');
386
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-bb-light.svg');
387
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
388
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
389
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
390
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/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/7.0.0-alpha.4/assets/images/bb-logo.png');
385
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
391
393
  --bb-letter_spacing-normal: normal;
392
394
  --bb-letter_spacing-wider: 0.01rem;
393
395
  --bb-letter_spacing-widest: 0.046875rem;
@@ -520,11 +522,16 @@
520
522
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
521
523
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
522
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);
523
529
  --sky-color-background-blocking: var(--bb-color-rgba-white-70);
524
530
  --sky-color-background-container-backdrop: var(--bb-color-gray-200);
525
531
  --sky-color-background-container-base: var(--bb-color-white);
526
532
  --sky-color-background-container-danger: var(--bb-color-red-200);
527
533
  --sky-color-background-container-dimmed: var(--bb-color-gray-25);
534
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
528
535
  --sky-color-background-container-info: var(--bb-color-blue-200);
529
536
  --sky-color-background-container-menu: var(--bb-color-white);
530
537
  --sky-color-background-container-success: var(--bb-color-green-200);
@@ -589,8 +596,13 @@
589
596
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
590
597
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
591
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);
592
603
  --sky-color-border-column_divider: var(--bb-color-blue-600);
593
604
  --sky-color-border-container-base: var(--bb-color-gray-200);
605
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
594
606
  --sky-color-border-danger: var(--bb-color-red-600);
595
607
  --sky-color-border-disabled: var(--bb-color-gray-300);
596
608
  --sky-color-border-divider: var(--bb-color-gray-300);
@@ -656,6 +668,7 @@
656
668
  --sky-color-icon-info: var(--bb-color-blue-600);
657
669
  --sky-color-icon-input-action: var(--bb-color-gray-600);
658
670
  --sky-color-icon-inverse: var(--bb-color-white);
671
+ --sky-color-icon-on_prominent: var(--bb-color-white);
659
672
  --sky-color-icon-selected: var(--bb-color-blue-600);
660
673
  --sky-color-icon-success: var(--bb-color-green-600);
661
674
  --sky-color-icon-warning: var(--bb-color-yellow-400);
@@ -670,6 +683,7 @@
670
683
  --sky-color-text-default: var(--bb-color-gray-1000);
671
684
  --sky-color-text-heading: var(--bb-color-gray-1100);
672
685
  --sky-color-text-inverse: var(--bb-color-white);
686
+ --sky-color-text-on_prominent: var(--bb-color-white);
673
687
  --sky-color-text-selected: var(--bb-color-blue-600);
674
688
  --sky-color-viz-axis: var(--bb-color-gray-500);
675
689
  --sky-color-viz-category-1: var(--bb-color-teal-500);
@@ -722,6 +736,7 @@
722
736
  --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
723
737
  --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
724
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);
725
740
  --sky-color-background-input-disabled: var(--sky-color-background-disabled);
726
741
  --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
727
742
  --sky-color-background-row-disabled: var(--sky-color-background-disabled);
@@ -733,6 +748,7 @@
733
748
  --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
734
749
  --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
735
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);
736
752
  --sky-color-border-input-disabled: var(--sky-color-border-disabled);
737
753
  --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
738
754
  --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
@@ -810,11 +826,16 @@
810
826
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
811
827
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
812
828
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
813
- --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);
814
834
  --sky-color-background-container-backdrop: var(--bb-color-gray-900);
815
835
  --sky-color-background-container-base: var(--bb-color-gray-1000);
816
836
  --sky-color-background-container-danger: var(--bb-color-red-800);
817
837
  --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
838
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
818
839
  --sky-color-background-container-info: var(--bb-color-blue-800);
819
840
  --sky-color-background-container-menu: var(--bb-color-gray-900);
820
841
  --sky-color-background-container-success: var(--bb-color-green-900);
@@ -879,8 +900,13 @@
879
900
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
880
901
  --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
881
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);
882
907
  --sky-color-border-column_divider: var(--bb-color-blue-400);
883
908
  --sky-color-border-container-base: var(--bb-color-blue-900);
909
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
884
910
  --sky-color-border-danger: var(--bb-color-red-400);
885
911
  --sky-color-border-disabled: var(--bb-color-gray-800);
886
912
  --sky-color-border-divider: var(--bb-color-gray-800);
@@ -946,6 +972,7 @@
946
972
  --sky-color-icon-info: var(--bb-color-blue-600);
947
973
  --sky-color-icon-input-action: var(--bb-color-sky-600);
948
974
  --sky-color-icon-inverse: var(--bb-color-gray-1100);
975
+ --sky-color-icon-on_prominent: var(--bb-color-white);
949
976
  --sky-color-icon-selected: var(--bb-color-blue-600);
950
977
  --sky-color-icon-success: var(--bb-color-green-700);
951
978
  --sky-color-icon-warning: var(--bb-color-yellow-600);
@@ -960,6 +987,7 @@
960
987
  --sky-color-text-default: var(--bb-color-gray-25);
961
988
  --sky-color-text-heading: var(--bb-color-gray-50);
962
989
  --sky-color-text-inverse: var(--bb-color-gray-1100);
990
+ --sky-color-text-on_prominent: var(--bb-color-white);
963
991
  --sky-color-text-selected: var(--bb-color-blue-400);
964
992
  --sky-color-viz-axis: var(--bb-color-gray-600);
965
993
  --sky-color-viz-category-1: var(--bb-color-teal-600);
@@ -1012,6 +1040,7 @@
1012
1040
  --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
1013
1041
  --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
1014
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);
1015
1044
  --sky-color-background-input-disabled: var(--sky-color-background-disabled);
1016
1045
  --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
1017
1046
  --sky-color-background-row-disabled: var(--sky-color-background-disabled);
@@ -1023,6 +1052,7 @@
1023
1052
  --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
1024
1053
  --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
1025
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);
1026
1056
  --sky-color-border-input-disabled: var(--sky-color-border-disabled);
1027
1057
  --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
1028
1058
  --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
@@ -1104,6 +1134,7 @@
1104
1134
  --sky-border-radius-thumb: var(--bb-border-radius-round);
1105
1135
  --sky-border-radius-xs: var(--bb-border-radius-012);
1106
1136
  --sky-border-style-accent: var(--bb-border-style-solid);
1137
+ --sky-border-style-container-overlay: var(--bb-border-style-none);
1107
1138
  --sky-border-style-divider: var(--bb-border-style-solid);
1108
1139
  --sky-border-style-elevation: var(--bb-border-style-solid);
1109
1140
  --sky-border-style-separator-dark: var(--bb-border-style-solid);
@@ -1685,6 +1716,8 @@
1685
1716
  --sky-size-picker_btn: var(--bb-size-fluid-200);
1686
1717
  --sky-size-progress_step: var(--bb-size-fluid-75);
1687
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);
1688
1721
  --sky-size-thumbnail-l: var(--bb-size-fixed-600);
1689
1722
  --sky-size-width-modal-l: var(--bb-size-fixed-6000);
1690
1723
  --sky-size-width-modal-m: var(--bb-size-fixed-4000);
@@ -1807,3 +1840,6 @@
1807
1840
  --sky-type-heading-1: var(--sky-font-style-heading-1) var(--sky-font-size-heading-1)/36 'var(--bb-font-blkb_sans-name)';
1808
1841
  --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/20 'var(--bb-font-blkb_sans-name)';
1809
1842
  }
1843
+ .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
1844
+ --sky-border-style-container-overlay: var(--bb-border-style-solid);
1845
+ }
package/bundles/blackbaud.css CHANGED
@@ -60,6 +60,7 @@
60
60
  --bb-border-radius-pill: 999rem;
61
61
  --bb-border-radius-round: 50%;
62
62
  --bb-border-style-dotted: dotted;
63
+ --bb-border-style-none: none;
63
64
  --bb-border-style-solid: solid;
64
65
  --bb-brand-name: 'Blackbaud';
65
66
  --bb-color-black: #000000;
@@ -239,6 +240,7 @@
239
240
  --bb-color-rgba-red-dark-600-50: rgba(181, 47, 50, 0.5);
240
241
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
241
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);
242
244
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
243
245
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
244
246
  --bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
@@ -379,15 +381,15 @@
379
381
  --bb-font-weight-light: 300;
380
382
  --bb-font-weight-regular: 400;
381
383
  --bb-font-weight-semibold: 600;
382
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/bb-logo.png');
383
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-base-dark.svg');
384
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-base-light.svg');
385
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-bb-dark.svg');
386
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-bb-light.svg');
387
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
388
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
389
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
390
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/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/7.0.0-alpha.4/assets/images/bb-logo.png');
385
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/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/7.0.0-alpha.4/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
391
393
  --bb-letter_spacing-normal: normal;
392
394
  --bb-letter_spacing-wider: 0.01rem;
393
395
  --bb-letter_spacing-widest: 0.046875rem;
@@ -596,11 +598,16 @@
596
598
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
597
599
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
598
600
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
599
- --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);
600
606
  --sky-color-background-container-backdrop: var(--bb-color-steel-fusion-1000);
601
607
  --sky-color-background-container-base: var(--bb-color-steel-fusion-1100);
602
608
  --sky-color-background-container-danger: var(--bb-color-rgba-red-dark-600-35);
603
609
  --sky-color-background-container-dimmed: var(--bb-color-steel-fusion-1050);
610
+ --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
604
611
  --sky-color-background-container-info: var(--bb-color-rgba-blue-600-35);
605
612
  --sky-color-background-container-menu: var(--bb-color-steel-fusion-1000);
606
613
  --sky-color-background-container-success: var(--bb-color-rgba-green-600-35);
@@ -671,8 +678,13 @@
671
678
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
672
679
  --sky-color-border-action-tertiary-focus: var(--bb-color-oklch-blue-375);
673
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);
674
685
  --sky-color-border-column_divider: var(--bb-color-blue-400);
675
686
  --sky-color-border-container-base: var(--bb-color-steel-fusion-800);
687
+ --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
676
688
  --sky-color-border-danger: var(--bb-color-red-600);
677
689
  --sky-color-border-disabled: var(--bb-color-gray-800);
678
690
  --sky-color-border-divider: var(--bb-color-gray-700);
@@ -735,6 +747,7 @@
735
747
  --sky-color-icon-info: var(--bb-color-blue-600);
736
748
  --sky-color-icon-input-action: var(--bb-color-oklch-blue-375);
737
749
  --sky-color-icon-inverse: var(--bb-color-black);
750
+ --sky-color-icon-on_prominent: var(--bb-color-white);
738
751
  --sky-color-icon-selected: var(--bb-color-oklch-blue-375);
739
752
  --sky-color-icon-success: var(--bb-color-green-600);
740
753
  --sky-color-icon-warning: var(--bb-color-yellow-600);
@@ -749,12 +762,15 @@
749
762
  --sky-color-text-default: var(--bb-color-steel-fusion-200);
750
763
  --sky-color-text-heading: var(--bb-color-steel-fusion-100);
751
764
  --sky-color-text-inverse: var(--bb-color-black);
765
+ --sky-color-text-on_prominent: var(--bb-color-white);
752
766
  --sky-color-text-selected: var(--bb-color-oklch-blue-375);
753
767
  --sky-image-select_icon-base: var(--bb-image-select_icon-bb-dark-src);
754
768
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-dark-src);
755
769
  --sky-opacity-wait: var(--bb-opacity-600);
756
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);
757
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);
758
774
  --sky-elevation-focus: var(--bb-shadow-heavy-black-200);
759
775
  --sky-elevation-none: var(--bb-shadow-heavy-black-0);
760
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": "7.0.0-alpha.2",
3
+ "version": "7.0.0-alpha.4",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",