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

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 (7) hide show
  1. package/CHANGELOG.md +35 -2
  2. package/assets/assets.json +1 -1
  3. package/assets/scss/base.css +60 -11
  4. package/assets/scss/blackbaud.css +23 -11
  5. package/bundles/base.css +60 -11
  6. package/bundles/blackbaud.css +23 -11
  7. package/package.json +14 -14
package/CHANGELOG.md CHANGED
@@ -1,9 +1,34 @@
1
- ## [5.7.0](https://github.com/blackbaud/skyux-design-tokens/compare/5.6.0...5.7.0) (2026-04-07)
1
+ # Changelog
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)
4
+
5
+
6
+ ### Bug Fixes
7
+
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))
10
+
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)
2
12
 
3
13
 
4
14
  ### Features
5
15
 
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))
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))
17
+
18
+ ## [6.2.1](https://github.com/blackbaud/skyux-design-tokens/compare/6.2.0...6.2.1) (2026-08-17)
19
+
20
+
21
+ ### Bug Fixes
22
+
23
+ * 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
+ * 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
+
26
+ ## [6.2.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.1.2...6.2.0) (2026-08-04)
27
+
28
+
29
+ ### Features
30
+
31
+ * add tokens for styling scrollbars ([#370](https://github.com/blackbaud/skyux-design-tokens/issues/370)) ([0b88c85](https://github.com/blackbaud/skyux-design-tokens/commit/0b88c85fbb12bf73417340947dae5ace0a92eda1))
7
32
 
8
33
  ## [7.0.0-alpha.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.1.2...7.0.0-alpha.0) (2026-07-22)
9
34
 
@@ -82,6 +107,14 @@
82
107
 
83
108
  * update token types for public border tokens ([#344](https://github.com/blackbaud/skyux-design-tokens/issues/344)) ([d4b9050](https://github.com/blackbaud/skyux-design-tokens/commit/d4b9050b83af188a246b9c740e530279671b3e1a))
84
109
 
110
+ ## [5.7.0](https://github.com/blackbaud/skyux-design-tokens/compare/5.6.0...5.7.0) (2026-04-07)
111
+
112
+
113
+ ### Features
114
+
115
+ * add omnibar toaster padding ([#342](https://github.com/blackbaud/skyux-design-tokens/issues/342)) ([4095f97](https://github.com/blackbaud/skyux-design-tokens/commit/4095f97ba31a2f619444bf41dd6d279475258066))
116
+
117
+
85
118
  ## [5.6.0](https://github.com/blackbaud/skyux-design-tokens/compare/5.5.0...5.6.0) (2026-03-27)
86
119
 
87
120
 
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.0/assets/images/favicon.ico"
5
+ "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.2/assets/images/favicon.ico"
6
6
  }
7
7
  },
8
8
  "strings": {
package/assets/scss/base.css CHANGED
@@ -379,15 +379,15 @@
379
379
  --bb-font-weight-light: 300;
380
380
  --bb-font-weight-regular: 400;
381
381
  --bb-font-weight-semibold: 600;
382
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.0/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.0/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.0/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.0/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.0/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.0/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.0/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.0/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.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
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');
391
391
  --bb-letter_spacing-normal: normal;
392
392
  --bb-letter_spacing-wider: 0.01rem;
393
393
  --bb-letter_spacing-widest: 0.046875rem;
@@ -486,7 +486,15 @@
486
486
  --bb-shadow-slate-800: 0 5px 5px -3px rgba(33, 44, 63, 0.2), 0 3px 14px 2px rgba(33, 44, 63, 0.12), 0 8px 10px 1px rgba(33, 44, 63, 0.14);
487
487
  --bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
488
488
  }
489
- .sky-theme-modern.sky-theme-brand-base {
489
+ :root:has(body.sky-theme-modern.sky-theme-brand-base) {
490
+ --bb-color-scrollbar-base-dark-thumb: #51555c;
491
+ --bb-color-scrollbar-base-dark-track: #1e2229;
492
+ --bb-color-scrollbar-base-light-thumb: #85888d;
493
+ --bb-color-scrollbar-base-light-track: #ffffff;
494
+ --bb-color-scrollbar-bb-dark-thumb: #51555c;
495
+ --bb-color-scrollbar-bb-dark-track: #1c2228;
496
+ }
497
+ .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-light {
490
498
  --sky-brand-name: var(--bb-brand-name);
491
499
  --sky-color-background-action-accent-active: var(--bb-color-blue-100);
492
500
  --sky-color-background-action-accent-base: var(--bb-color-white);
@@ -772,7 +780,12 @@
772
780
  --sky-elevation-overlay-simple-100: var(--bb-shadow-gray-simple-400);
773
781
  --sky-elevation-raised-100: var(--bb-shadow-gray-100);
774
782
  }
783
+ :root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-light) {
784
+ --sky-color-scrollbar-thumb: var(--bb-color-scrollbar-base-light-thumb);
785
+ --sky-color-scrollbar-track: var(--bb-color-scrollbar-base-light-track);
786
+ }
775
787
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
788
+ --sky-brand-name: var(--bb-brand-name);
776
789
  --sky-color-background-action-accent-active: var(--bb-color-gray-600);
777
790
  --sky-color-background-action-accent-base: var(--bb-color-blue-900);
778
791
  --sky-color-background-action-accent-focus: var(--bb-color-gray-700);
@@ -885,7 +898,6 @@
885
898
  --sky-color-border-progress_step: var(--bb-color-gray-600);
886
899
  --sky-color-border-selected: var(--bb-color-blue-400);
887
900
  --sky-color-border-selected_soft: var(--bb-color-blue-500);
888
- --sky-color-border-separator-dark: var(--bb-color-gray-800);
889
901
  --sky-color-border-separator-light: var(--bb-color-gray-700);
890
902
  --sky-color-border-separator-row: var(--bb-color-gray-800);
891
903
  --sky-color-border-success: var(--bb-color-green-400);
@@ -990,6 +1002,7 @@
990
1002
  --sky-color-viz-sequence-7: var(--bb-color-teal-400);
991
1003
  --sky-color-viz-sequence-8: var(--bb-color-teal-300);
992
1004
  --sky-color-viz-sequence-9: var(--bb-color-teal-200);
1005
+ --sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
993
1006
  --sky-image-select_icon-base: var(--bb-image-select_icon-base-dark-src);
994
1007
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-dark-src);
995
1008
  --sky-opacity-wait: var(--bb-opacity-600);
@@ -1015,7 +1028,39 @@
1015
1028
  --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
1016
1029
  --sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
1017
1030
  --sky-color-border-tab-disabled: var(--sky-color-border-disabled);
1031
+ --sky-elevation-action-danger-active: var(--bb-shadow-gray-0);
1032
+ --sky-elevation-action-danger-base: var(--bb-shadow-gray-0);
1033
+ --sky-elevation-action-danger-disabled: var(--bb-shadow-gray-0);
1034
+ --sky-elevation-action-danger-focus: var(--bb-shadow-gray-0);
1035
+ --sky-elevation-action-danger-hover: var(--bb-shadow-gray-0);
1036
+ --sky-elevation-action-input-active: var(--bb-shadow-gray-0);
1037
+ --sky-elevation-action-input-base: var(--bb-shadow-gray-0);
1038
+ --sky-elevation-action-input-disabled: var(--bb-shadow-gray-0);
1039
+ --sky-elevation-action-input-focus: var(--bb-shadow-gray-0);
1040
+ --sky-elevation-action-input-hover: var(--bb-shadow-gray-0);
1041
+ --sky-elevation-action-primary-active: var(--bb-shadow-gray-0);
1042
+ --sky-elevation-action-primary-base: var(--bb-shadow-gray-0);
1043
+ --sky-elevation-action-primary-disabled: var(--bb-shadow-gray-0);
1044
+ --sky-elevation-action-primary-focus: var(--bb-shadow-gray-0);
1045
+ --sky-elevation-action-primary-hover: var(--bb-shadow-gray-0);
1046
+ --sky-elevation-action-secondary-active: var(--bb-shadow-gray-0);
1047
+ --sky-elevation-action-secondary-base: var(--bb-shadow-gray-0);
1048
+ --sky-elevation-action-secondary-disabled: var(--bb-shadow-gray-0);
1049
+ --sky-elevation-action-secondary-focus: var(--bb-shadow-gray-0);
1050
+ --sky-elevation-action-secondary-hover: var(--bb-shadow-gray-0);
1051
+ --sky-elevation-action-tertiary-active: var(--bb-shadow-gray-0);
1052
+ --sky-elevation-action-tertiary-base: var(--bb-shadow-gray-0);
1053
+ --sky-elevation-action-tertiary-disabled: var(--bb-shadow-gray-0);
1054
+ --sky-elevation-action-tertiary-focus: var(--bb-shadow-gray-0);
1055
+ --sky-elevation-action-tertiary-hover: var(--bb-shadow-gray-0);
1056
+ --sky-elevation-action-toolbar-active: var(--bb-shadow-gray-0);
1057
+ --sky-elevation-action-toolbar-base: var(--bb-shadow-gray-0);
1058
+ --sky-elevation-action-toolbar-disabled: var(--bb-shadow-gray-0);
1059
+ --sky-elevation-action-toolbar-focus: var(--bb-shadow-gray-0);
1060
+ --sky-elevation-action-toolbar-hover: var(--bb-shadow-gray-0);
1018
1061
  --sky-elevation-focus: var(--bb-shadow-gray-200);
1062
+ --sky-elevation-input-base: var(--bb-shadow-gray-0);
1063
+ --sky-elevation-input-disabled: var(--bb-shadow-gray-0);
1019
1064
  --sky-elevation-none: var(--bb-shadow-gray-0);
1020
1065
  --sky-elevation-overflow: var(--bb-shadow-gray-200);
1021
1066
  --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
@@ -1025,6 +1070,10 @@
1025
1070
  --sky-elevation-overlay-simple-100: var(--bb-shadow-gray-simple-400);
1026
1071
  --sky-elevation-raised-100: var(--bb-shadow-gray-100);
1027
1072
  }
1073
+ :root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark) {
1074
+ --sky-color-scrollbar-thumb: var(--bb-color-scrollbar-base-dark-thumb);
1075
+ --sky-color-scrollbar-track: var(--bb-color-scrollbar-base-dark-track);
1076
+ }
1028
1077
  .sky-theme-modern.sky-theme-brand-base {
1029
1078
  --sky-font-style-deemphasized-style: italic;
1030
1079
  --sky-font-style-deemphasized-weight: 400;
package/assets/scss/blackbaud.css CHANGED
@@ -379,15 +379,15 @@
379
379
  --bb-font-weight-light: 300;
380
380
  --bb-font-weight-regular: 400;
381
381
  --bb-font-weight-semibold: 600;
382
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.0/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.0/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.0/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.0/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.0/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.0/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.0/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.0/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.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
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');
391
391
  --bb-letter_spacing-normal: normal;
392
392
  --bb-letter_spacing-wider: 0.01rem;
393
393
  --bb-letter_spacing-widest: 0.046875rem;
@@ -486,7 +486,15 @@
486
486
  --bb-shadow-slate-800: 0 5px 5px -3px rgba(33, 44, 63, 0.2), 0 3px 14px 2px rgba(33, 44, 63, 0.12), 0 8px 10px 1px rgba(33, 44, 63, 0.14);
487
487
  --bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
488
488
  }
489
- .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud {
489
+ :root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud) {
490
+ --bb-color-scrollbar-base-dark-thumb: #51555c;
491
+ --bb-color-scrollbar-base-dark-track: #1e2229;
492
+ --bb-color-scrollbar-base-light-thumb: #85888d;
493
+ --bb-color-scrollbar-base-light-track: #ffffff;
494
+ --bb-color-scrollbar-bb-dark-thumb: #51555c;
495
+ --bb-color-scrollbar-bb-dark-track: #1c2228;
496
+ }
497
+ .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-light {
490
498
  --sky-brand-name: var(--bb-brand-name);
491
499
  --sky-color-background-action-accent-base: var(--bb-color-blue-25);
492
500
  --sky-color-background-container-backdrop: var(--bb-color-slate-200);
@@ -589,6 +597,7 @@
589
597
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
590
598
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
591
599
  --sky-color-background-blocking: var(--bb-color-rgba-black-70);
600
+ --sky-color-background-container-backdrop: var(--bb-color-steel-fusion-1000);
592
601
  --sky-color-background-container-base: var(--bb-color-steel-fusion-1100);
593
602
  --sky-color-background-container-danger: var(--bb-color-rgba-red-dark-600-35);
594
603
  --sky-color-background-container-dimmed: var(--bb-color-steel-fusion-1050);
@@ -683,7 +692,6 @@
683
692
  --sky-color-border-progress_step: var(--bb-color-gray-600);
684
693
  --sky-color-border-selected: var(--bb-color-blue-400);
685
694
  --sky-color-border-selected_soft: var(--bb-color-blue-600);
686
- --sky-color-border-separator-dark: var(--bb-color-gray-800);
687
695
  --sky-color-border-separator-light: var(--bb-color-gray-700);
688
696
  --sky-color-border-separator-row: var(--bb-color-gray-800);
689
697
  --sky-color-border-success: var(--bb-color-green-500);
@@ -757,3 +765,7 @@
757
765
  --sky-elevation-overlay-simple-100: var(--bb-shadow-heavy-black-simple-400);
758
766
  --sky-elevation-raised-100: var(--bb-shadow-heavy-black-100);
759
767
  }
768
+ :root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-dark) {
769
+ --sky-color-scrollbar-thumb: var(--bb-color-scrollbar-bb-dark-thumb);
770
+ --sky-color-scrollbar-track: var(--bb-color-scrollbar-bb-dark-track);
771
+ }
package/bundles/base.css CHANGED
@@ -379,15 +379,15 @@
379
379
  --bb-font-weight-light: 300;
380
380
  --bb-font-weight-regular: 400;
381
381
  --bb-font-weight-semibold: 600;
382
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.0/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.0/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.0/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.0/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.0/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.0/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.0/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.0/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.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
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');
391
391
  --bb-letter_spacing-normal: normal;
392
392
  --bb-letter_spacing-wider: 0.01rem;
393
393
  --bb-letter_spacing-widest: 0.046875rem;
@@ -486,7 +486,15 @@
486
486
  --bb-shadow-slate-800: 0 5px 5px -3px rgba(33, 44, 63, 0.2), 0 3px 14px 2px rgba(33, 44, 63, 0.12), 0 8px 10px 1px rgba(33, 44, 63, 0.14);
487
487
  --bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
488
488
  }
489
- .sky-theme-modern.sky-theme-brand-base {
489
+ :root:has(body.sky-theme-modern.sky-theme-brand-base) {
490
+ --bb-color-scrollbar-base-dark-thumb: #51555c;
491
+ --bb-color-scrollbar-base-dark-track: #1e2229;
492
+ --bb-color-scrollbar-base-light-thumb: #85888d;
493
+ --bb-color-scrollbar-base-light-track: #ffffff;
494
+ --bb-color-scrollbar-bb-dark-thumb: #51555c;
495
+ --bb-color-scrollbar-bb-dark-track: #1c2228;
496
+ }
497
+ .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-light {
490
498
  --sky-brand-name: var(--bb-brand-name);
491
499
  --sky-color-background-action-accent-active: var(--bb-color-blue-100);
492
500
  --sky-color-background-action-accent-base: var(--bb-color-white);
@@ -772,7 +780,12 @@
772
780
  --sky-elevation-overlay-simple-100: var(--bb-shadow-gray-simple-400);
773
781
  --sky-elevation-raised-100: var(--bb-shadow-gray-100);
774
782
  }
783
+ :root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-light) {
784
+ --sky-color-scrollbar-thumb: var(--bb-color-scrollbar-base-light-thumb);
785
+ --sky-color-scrollbar-track: var(--bb-color-scrollbar-base-light-track);
786
+ }
775
787
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
788
+ --sky-brand-name: var(--bb-brand-name);
776
789
  --sky-color-background-action-accent-active: var(--bb-color-gray-600);
777
790
  --sky-color-background-action-accent-base: var(--bb-color-blue-900);
778
791
  --sky-color-background-action-accent-focus: var(--bb-color-gray-700);
@@ -885,7 +898,6 @@
885
898
  --sky-color-border-progress_step: var(--bb-color-gray-600);
886
899
  --sky-color-border-selected: var(--bb-color-blue-400);
887
900
  --sky-color-border-selected_soft: var(--bb-color-blue-500);
888
- --sky-color-border-separator-dark: var(--bb-color-gray-800);
889
901
  --sky-color-border-separator-light: var(--bb-color-gray-700);
890
902
  --sky-color-border-separator-row: var(--bb-color-gray-800);
891
903
  --sky-color-border-success: var(--bb-color-green-400);
@@ -990,6 +1002,7 @@
990
1002
  --sky-color-viz-sequence-7: var(--bb-color-teal-400);
991
1003
  --sky-color-viz-sequence-8: var(--bb-color-teal-300);
992
1004
  --sky-color-viz-sequence-9: var(--bb-color-teal-200);
1005
+ --sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
993
1006
  --sky-image-select_icon-base: var(--bb-image-select_icon-base-dark-src);
994
1007
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-dark-src);
995
1008
  --sky-opacity-wait: var(--bb-opacity-600);
@@ -1015,7 +1028,39 @@
1015
1028
  --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
1016
1029
  --sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
1017
1030
  --sky-color-border-tab-disabled: var(--sky-color-border-disabled);
1031
+ --sky-elevation-action-danger-active: var(--bb-shadow-gray-0);
1032
+ --sky-elevation-action-danger-base: var(--bb-shadow-gray-0);
1033
+ --sky-elevation-action-danger-disabled: var(--bb-shadow-gray-0);
1034
+ --sky-elevation-action-danger-focus: var(--bb-shadow-gray-0);
1035
+ --sky-elevation-action-danger-hover: var(--bb-shadow-gray-0);
1036
+ --sky-elevation-action-input-active: var(--bb-shadow-gray-0);
1037
+ --sky-elevation-action-input-base: var(--bb-shadow-gray-0);
1038
+ --sky-elevation-action-input-disabled: var(--bb-shadow-gray-0);
1039
+ --sky-elevation-action-input-focus: var(--bb-shadow-gray-0);
1040
+ --sky-elevation-action-input-hover: var(--bb-shadow-gray-0);
1041
+ --sky-elevation-action-primary-active: var(--bb-shadow-gray-0);
1042
+ --sky-elevation-action-primary-base: var(--bb-shadow-gray-0);
1043
+ --sky-elevation-action-primary-disabled: var(--bb-shadow-gray-0);
1044
+ --sky-elevation-action-primary-focus: var(--bb-shadow-gray-0);
1045
+ --sky-elevation-action-primary-hover: var(--bb-shadow-gray-0);
1046
+ --sky-elevation-action-secondary-active: var(--bb-shadow-gray-0);
1047
+ --sky-elevation-action-secondary-base: var(--bb-shadow-gray-0);
1048
+ --sky-elevation-action-secondary-disabled: var(--bb-shadow-gray-0);
1049
+ --sky-elevation-action-secondary-focus: var(--bb-shadow-gray-0);
1050
+ --sky-elevation-action-secondary-hover: var(--bb-shadow-gray-0);
1051
+ --sky-elevation-action-tertiary-active: var(--bb-shadow-gray-0);
1052
+ --sky-elevation-action-tertiary-base: var(--bb-shadow-gray-0);
1053
+ --sky-elevation-action-tertiary-disabled: var(--bb-shadow-gray-0);
1054
+ --sky-elevation-action-tertiary-focus: var(--bb-shadow-gray-0);
1055
+ --sky-elevation-action-tertiary-hover: var(--bb-shadow-gray-0);
1056
+ --sky-elevation-action-toolbar-active: var(--bb-shadow-gray-0);
1057
+ --sky-elevation-action-toolbar-base: var(--bb-shadow-gray-0);
1058
+ --sky-elevation-action-toolbar-disabled: var(--bb-shadow-gray-0);
1059
+ --sky-elevation-action-toolbar-focus: var(--bb-shadow-gray-0);
1060
+ --sky-elevation-action-toolbar-hover: var(--bb-shadow-gray-0);
1018
1061
  --sky-elevation-focus: var(--bb-shadow-gray-200);
1062
+ --sky-elevation-input-base: var(--bb-shadow-gray-0);
1063
+ --sky-elevation-input-disabled: var(--bb-shadow-gray-0);
1019
1064
  --sky-elevation-none: var(--bb-shadow-gray-0);
1020
1065
  --sky-elevation-overflow: var(--bb-shadow-gray-200);
1021
1066
  --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
@@ -1025,6 +1070,10 @@
1025
1070
  --sky-elevation-overlay-simple-100: var(--bb-shadow-gray-simple-400);
1026
1071
  --sky-elevation-raised-100: var(--bb-shadow-gray-100);
1027
1072
  }
1073
+ :root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark) {
1074
+ --sky-color-scrollbar-thumb: var(--bb-color-scrollbar-base-dark-thumb);
1075
+ --sky-color-scrollbar-track: var(--bb-color-scrollbar-base-dark-track);
1076
+ }
1028
1077
  .sky-theme-modern.sky-theme-brand-base {
1029
1078
  --sky-font-style-deemphasized-style: italic;
1030
1079
  --sky-font-style-deemphasized-weight: 400;
package/bundles/blackbaud.css CHANGED
@@ -379,15 +379,15 @@
379
379
  --bb-font-weight-light: 300;
380
380
  --bb-font-weight-regular: 400;
381
381
  --bb-font-weight-semibold: 600;
382
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.0/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.0/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.0/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.0/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.0/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.0/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.0/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.0/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.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
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');
391
391
  --bb-letter_spacing-normal: normal;
392
392
  --bb-letter_spacing-wider: 0.01rem;
393
393
  --bb-letter_spacing-widest: 0.046875rem;
@@ -486,7 +486,15 @@
486
486
  --bb-shadow-slate-800: 0 5px 5px -3px rgba(33, 44, 63, 0.2), 0 3px 14px 2px rgba(33, 44, 63, 0.12), 0 8px 10px 1px rgba(33, 44, 63, 0.14);
487
487
  --bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
488
488
  }
489
- .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud {
489
+ :root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud) {
490
+ --bb-color-scrollbar-base-dark-thumb: #51555c;
491
+ --bb-color-scrollbar-base-dark-track: #1e2229;
492
+ --bb-color-scrollbar-base-light-thumb: #85888d;
493
+ --bb-color-scrollbar-base-light-track: #ffffff;
494
+ --bb-color-scrollbar-bb-dark-thumb: #51555c;
495
+ --bb-color-scrollbar-bb-dark-track: #1c2228;
496
+ }
497
+ .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-light {
490
498
  --sky-brand-name: var(--bb-brand-name);
491
499
  --sky-color-background-action-accent-base: var(--bb-color-blue-25);
492
500
  --sky-color-background-container-backdrop: var(--bb-color-slate-200);
@@ -589,6 +597,7 @@
589
597
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
590
598
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
591
599
  --sky-color-background-blocking: var(--bb-color-rgba-black-70);
600
+ --sky-color-background-container-backdrop: var(--bb-color-steel-fusion-1000);
592
601
  --sky-color-background-container-base: var(--bb-color-steel-fusion-1100);
593
602
  --sky-color-background-container-danger: var(--bb-color-rgba-red-dark-600-35);
594
603
  --sky-color-background-container-dimmed: var(--bb-color-steel-fusion-1050);
@@ -683,7 +692,6 @@
683
692
  --sky-color-border-progress_step: var(--bb-color-gray-600);
684
693
  --sky-color-border-selected: var(--bb-color-blue-400);
685
694
  --sky-color-border-selected_soft: var(--bb-color-blue-600);
686
- --sky-color-border-separator-dark: var(--bb-color-gray-800);
687
695
  --sky-color-border-separator-light: var(--bb-color-gray-700);
688
696
  --sky-color-border-separator-row: var(--bb-color-gray-800);
689
697
  --sky-color-border-success: var(--bb-color-green-500);
@@ -757,3 +765,7 @@
757
765
  --sky-elevation-overlay-simple-100: var(--bb-shadow-heavy-black-simple-400);
758
766
  --sky-elevation-raised-100: var(--bb-shadow-heavy-black-100);
759
767
  }
768
+ :root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-dark) {
769
+ --sky-color-scrollbar-thumb: var(--bb-color-scrollbar-bb-dark-thumb);
770
+ --sky-color-scrollbar-track: var(--bb-color-scrollbar-bb-dark-track);
771
+ }
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "7.0.0-alpha.0",
3
+ "version": "7.0.0-alpha.2",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",
7
7
  "type": "module",
8
8
  "scripts": {
9
9
  "dev": "vite",
10
- "build": "vite build",
10
+ "build": "tsc && vite build",
11
11
  "lint": "eslint .",
12
12
  "lint:fix": "eslint . --fix",
13
13
  "test": "vitest run"
@@ -17,23 +17,23 @@
17
17
  "publishToNPM": true
18
18
  },
19
19
  "devDependencies": {
20
- "@blackbaud/skyux-branding-builder": "5.0.1",
21
- "@skyux/dev-infra-private": "github:blackbaud/skyux-dev-infra-private-builds#12.0.0-alpha.21",
20
+ "@blackbaud/skyux-branding-builder": "5.1.0",
21
+ "@skyux/dev-infra-private": "github:blackbaud/skyux-dev-infra-private-builds#12.0.0-alpha.26",
22
22
  "@tokens-studio/sd-transforms": "2.0.3",
23
23
  "@types/fs-extra": "11.0.4",
24
- "@types/node": "22.15.19",
25
- "@vitest/coverage-v8": "4.1.4",
24
+ "@types/node": "24.10.0",
25
+ "@vitest/coverage-v8": "4.1.10",
26
26
  "eslint": "9.32.0",
27
27
  "eslint-config-prettier": "10.1.8",
28
- "fs-extra": "11.3.4",
28
+ "fs-extra": "11.4.0",
29
29
  "glob": "13.0.6",
30
- "js-yaml": "4.1.1",
31
- "prettier": "3.6.2",
32
- "style-dictionary": "5.4.0",
33
- "typescript": "5.8.3",
34
- "typescript-eslint": "8.38.0",
35
- "vite": "8.0.8",
36
- "vitest": "4.1.4"
30
+ "js-yaml": "5.2.3",
31
+ "prettier": "3.9.6",
32
+ "style-dictionary": "5.5.1",
33
+ "typescript": "6.0.3",
34
+ "typescript-eslint": "8.67.0",
35
+ "vite": "8.2.1",
36
+ "vitest": "4.1.10"
37
37
  },
38
38
  "repository": {
39
39
  "type": "git",