@blackbaud/skyux-design-tokens 6.8.0 → 6.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/assets/assets.json +1 -1
  3. package/assets/images/bb-logo-white.png +0 -0
  4. package/assets/scss/base.css +71 -35
  5. package/assets/scss/blackbaud.css +56 -36
  6. package/bundles/base.css +71 -35
  7. package/bundles/base_blackbaud_public-api.css +143 -71
  8. package/bundles/base_public-api.css +87 -35
  9. package/bundles/blackbaud.css +56 -36
  10. package/bundles/public-api-styles.json +51 -0
  11. package/bundles/public-api-tokens.json +16 -0
  12. package/bundles/public-api.css +16 -0
  13. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # Changelog
2
2
 
3
+ ## [6.9.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.8.0...6.9.0) (2026-08-31)
4
+
5
+
6
+ ### Features
7
+
8
+ * add additional decoration definitions for dark mode ([#453](https://github.com/blackbaud/skyux-design-tokens/issues/453)) ([05bca0e](https://github.com/blackbaud/skyux-design-tokens/commit/05bca0eb85e49e48de42ea1d3fbb564becce69e5))
9
+ * add icon color on_status_bg ([#444](https://github.com/blackbaud/skyux-design-tokens/issues/444)) ([fdd249a](https://github.com/blackbaud/skyux-design-tokens/commit/fdd249a7d50f018975c087757e5d9eca9258aaeb))
10
+ * add public overlay border properties and classes ([#448](https://github.com/blackbaud/skyux-design-tokens/issues/448)) ([4ab7863](https://github.com/blackbaud/skyux-design-tokens/commit/4ab7863f6354dcc9a0b25cb7b9ac553035eae8f4))
11
+ * add white blackbaud logo for dark mode ([#450](https://github.com/blackbaud/skyux-design-tokens/issues/450)) ([50221eb](https://github.com/blackbaud/skyux-design-tokens/commit/50221ebc139e2b601dd95d1ace57f5e98df89c8f))
12
+
13
+
14
+ ### Bug Fixes
15
+
16
+ * dark mode selection color updates ([#443](https://github.com/blackbaud/skyux-design-tokens/issues/443)) ([f63e5e5](https://github.com/blackbaud/skyux-design-tokens/commit/f63e5e5568e543e9064d43b175dd7a86c0d71ac1))
17
+
3
18
  ## [6.8.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.7.0...6.8.0) (2026-08-27)
4
19
 
5
20
 
package/assets/assets.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "fonts": [],
3
3
  "images": {
4
4
  "favicon": {
5
- "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/favicon.ico"
5
+ "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/favicon.ico"
6
6
  }
7
7
  },
8
8
  "strings": {
package/assets/images/bb-logo-white.png ADDED
Binary file
package/assets/scss/base.css CHANGED
@@ -4,6 +4,12 @@
4
4
  initial-value: url('data:,');
5
5
  }
6
6
 
7
+ @property --bb-image-logo-primary-white-src {
8
+ syntax: '<url>';
9
+ inherits: true;
10
+ initial-value: url('data:,');
11
+ }
12
+
7
13
  @property --bb-image-select_icon-base-dark-src {
8
14
  syntax: '<url>';
9
15
  inherits: true;
@@ -234,6 +240,7 @@
234
240
  --bb-color-rgba-blue-600-25: rgba(43, 107, 213, 0.25);
235
241
  --bb-color-rgba-blue-600-35: rgba(43, 107, 213, 0.35);
236
242
  --bb-color-rgba-blue-600-50: rgba(43, 107, 213, 0.5);
243
+ --bb-color-rgba-blue-dark-600-20: rgba(0, 102, 205, 0.2);
237
244
  --bb-color-rgba-green-600-35: rgba(9, 156, 83, 0.35);
238
245
  --bb-color-rgba-green-600-50: rgba(9, 156, 83, 0.5);
239
246
  --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
@@ -245,6 +252,7 @@
245
252
  --bb-color-rgba-steel-gray-100-10: rgba(245, 246, 247, 0.1);
246
253
  --bb-color-rgba-steel-gray-100-15: rgba(245, 246, 247, 0.15);
247
254
  --bb-color-rgba-steel-gray-100-25: rgba(245, 246, 247, 0.25);
255
+ --bb-color-rgba-steel-gray-100-7: rgba(245, 246, 247, 0.07);
248
256
  --bb-color-rgba-white-18: rgba(255, 255, 255, 0.18);
249
257
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
250
258
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
@@ -292,6 +300,16 @@
292
300
  --bb-color-slate-800: #32435e;
293
301
  --bb-color-slate-850: #2a384f;
294
302
  --bb-color-slate-900: #212c3f;
303
+ --bb-color-steel-blue-dark-100: #617695;
304
+ --bb-color-steel-blue-dark-1000: #06152e;
305
+ --bb-color-steel-blue-dark-200: #566a88;
306
+ --bb-color-steel-blue-dark-300: #4b5f7c;
307
+ --bb-color-steel-blue-dark-400: #405371;
308
+ --bb-color-steel-blue-dark-500: #354865;
309
+ --bb-color-steel-blue-dark-600: #2b3e5a;
310
+ --bb-color-steel-blue-dark-700: #21334e;
311
+ --bb-color-steel-blue-dark-800: #172943;
312
+ --bb-color-steel-blue-dark-900: #0e1f39;
295
313
  --bb-color-steel-fusion-100: #f3f6f9;
296
314
  --bb-color-steel-fusion-1000: #2a313c;
297
315
  --bb-color-steel-fusion-1050: #21282f;
@@ -402,15 +420,16 @@
402
420
  --bb-font-weight-light: 300;
403
421
  --bb-font-weight-regular: 400;
404
422
  --bb-font-weight-semibold: 600;
405
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/bb-logo.png');
406
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
407
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-base-light.svg');
408
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
409
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
410
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
411
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
412
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
413
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
423
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/bb-logo.png');
424
+ --bb-image-logo-primary-white-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/bb-logo-white.png');
425
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
426
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-base-light.svg');
427
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
428
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
429
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
430
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
431
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
432
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
414
433
  --bb-letter_spacing-normal: normal;
415
434
  --bb-letter_spacing-wider: 0.01rem;
416
435
  --bb-letter_spacing-widest: 0.046875rem;
@@ -715,6 +734,7 @@
715
734
  --sky-color-icon-on_prominent-base: var(--bb-color-white);
716
735
  --sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
717
736
  --sky-color-icon-on_status: var(--bb-color-white);
737
+ --sky-color-icon-on_status_bg: var(--bb-color-gray-1000);
718
738
  --sky-color-icon-selected: var(--bb-color-blue-600);
719
739
  --sky-color-icon-success: var(--bb-color-green-600);
720
740
  --sky-color-icon-warning: var(--bb-color-yellow-400);
@@ -907,10 +927,10 @@
907
927
  --sky-color-background-row-hover: var(--bb-color-transparent);
908
928
  --sky-color-background-scrim: var(--bb-color-scrim-heavy);
909
929
  --sky-color-background-selected-danger: var(--bb-color-red-900);
910
- --sky-color-background-selected-heavy: var(--bb-color-blue-600);
911
- --sky-color-background-selected-soft: var(--bb-color-blue-900);
930
+ --sky-color-background-selected-heavy: var(--bb-color-blue-dark-375);
931
+ --sky-color-background-selected-soft: var(--bb-color-rgba-blue-dark-600-20);
912
932
  --sky-color-background-selected-success: var(--bb-color-green-900);
913
- --sky-color-background-selected-switch-base: var(--bb-color-blue-600);
933
+ --sky-color-background-selected-switch-base: var(--bb-color-blue-dark-375);
914
934
  --sky-color-background-selected-warning: var(--bb-color-yellow-900);
915
935
  --sky-color-background-tab-active: var(--bb-color-transparent);
916
936
  --sky-color-background-tab-base: var(--bb-color-transparent);
@@ -918,10 +938,10 @@
918
938
  --sky-color-background-tab-hover: var(--bb-color-transparent);
919
939
  --sky-color-background-tab-selected: var(--bb-color-transparent);
920
940
  --sky-color-background-tab-wizard-disabled: var(--bb-color-transparent);
921
- --sky-color-background-text_highlight: var(--bb-color-yellow-800);
941
+ --sky-color-background-text_highlight: var(--bb-color-yellow-dark-700);
922
942
  --sky-color-background-thumb-base: var(--bb-color-white);
923
943
  --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
924
- --sky-color-background-thumbnail_matte: var(--bb-color-white);
944
+ --sky-color-background-thumbnail_matte: var(--bb-color-rgba-steel-gray-100-7);
925
945
  --sky-color-border-action-accent-active: var(--bb-color-sky-500);
926
946
  --sky-color-border-action-accent-base: var(--bb-color-gray-700);
927
947
  --sky-color-border-action-accent-focus: var(--bb-color-sky-600);
@@ -934,23 +954,23 @@
934
954
  --sky-color-border-action-input-base: var(--bb-color-blue-400);
935
955
  --sky-color-border-action-input-focus: var(--bb-color-blue-600);
936
956
  --sky-color-border-action-input-hover: var(--bb-color-blue-600);
937
- --sky-color-border-action-primary-active: var(--bb-color-sky-500);
938
- --sky-color-border-action-primary-base: var(--bb-color-sky-600);
939
- --sky-color-border-action-primary-focus: var(--bb-color-sky-600);
940
- --sky-color-border-action-primary-hover: var(--bb-color-sky-600);
957
+ --sky-color-border-action-primary-active: var(--bb-color-blue-dark-100);
958
+ --sky-color-border-action-primary-base: var(--bb-color-blue-dark-375);
959
+ --sky-color-border-action-primary-focus: var(--bb-color-blue-dark-100);
960
+ --sky-color-border-action-primary-hover: var(--bb-color-blue-dark-100);
941
961
  --sky-color-border-action-secondary-active: var(--bb-color-sky-500);
942
962
  --sky-color-border-action-secondary-base: var(--bb-color-gray-700);
943
963
  --sky-color-border-action-secondary-focus: var(--bb-color-sky-600);
944
964
  --sky-color-border-action-secondary-hover: var(--bb-color-sky-600);
945
- --sky-color-border-action-tertiary-active: var(--bb-color-sky-500);
965
+ --sky-color-border-action-tertiary-active: var(--bb-color-blue-dark-375);
946
966
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
947
- --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
948
- --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
967
+ --sky-color-border-action-tertiary-focus: var(--bb-color-blue-dark-375);
968
+ --sky-color-border-action-tertiary-hover: var(--bb-color-blue-dark-375);
949
969
  --sky-color-border-action-tertiary-on_prominent-active: var(--bb-color-blue-300);
950
970
  --sky-color-border-action-tertiary-on_prominent-base: var(--bb-color-transparent);
951
971
  --sky-color-border-action-tertiary-on_prominent-focus: var(--bb-color-blue-300);
952
972
  --sky-color-border-action-tertiary-on_prominent-hover: var(--bb-color-blue-300);
953
- --sky-color-border-column_divider: var(--bb-color-blue-400);
973
+ --sky-color-border-column_divider: var(--bb-color-blue-dark-400);
954
974
  --sky-color-border-container-base: var(--bb-color-blue-900);
955
975
  --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
956
976
  --sky-color-border-danger: var(--bb-color-red-400);
@@ -960,7 +980,7 @@
960
980
  --sky-color-border-info: var(--bb-color-blue-400);
961
981
  --sky-color-border-input-active: var(--bb-color-blue-600);
962
982
  --sky-color-border-input-base: var(--bb-color-blue-200);
963
- --sky-color-border-input-error: var(--bb-color-red-600);
983
+ --sky-color-border-input-error: var(--bb-color-red-dark-600);
964
984
  --sky-color-border-input-focus: var(--bb-color-blue-600);
965
985
  --sky-color-border-input-hover: var(--bb-color-blue-600);
966
986
  --sky-color-border-nav-active: var(--bb-color-sky-500);
@@ -968,26 +988,26 @@
968
988
  --sky-color-border-nav-focus: var(--bb-color-sky-600);
969
989
  --sky-color-border-nav-hover: var(--bb-color-sky-600);
970
990
  --sky-color-border-progress_step: var(--bb-color-gray-600);
971
- --sky-color-border-selected: var(--bb-color-blue-400);
972
- --sky-color-border-selected_soft: var(--bb-color-blue-500);
991
+ --sky-color-border-selected: var(--bb-color-blue-dark-375);
992
+ --sky-color-border-selected_soft: var(--bb-color-blue-dark-600);
973
993
  --sky-color-border-separator-light: var(--bb-color-gray-700);
974
994
  --sky-color-border-separator-row: var(--bb-color-gray-800);
975
995
  --sky-color-border-success: var(--bb-color-green-400);
976
996
  --sky-color-border-switch-active: var(--bb-color-blue-600);
977
997
  --sky-color-border-switch-base: var(--bb-color-blue-500);
978
- --sky-color-border-switch-error: var(--bb-color-red-600);
998
+ --sky-color-border-switch-error: var(--bb-color-red-dark-600);
979
999
  --sky-color-border-switch-focus: var(--bb-color-blue-600);
980
1000
  --sky-color-border-switch-hover: var(--bb-color-blue-600);
981
- --sky-color-border-switch-selected-active: var(--bb-color-blue-900);
1001
+ --sky-color-border-switch-selected-active: var(--bb-color-blue-dark-100);
982
1002
  --sky-color-border-switch-selected-base: var(--bb-color-transparent);
983
- --sky-color-border-switch-selected-focus: var(--bb-color-blue-900);
984
- --sky-color-border-switch-selected-hover: var(--bb-color-blue-900);
1003
+ --sky-color-border-switch-selected-focus: var(--bb-color-blue-dark-100);
1004
+ --sky-color-border-switch-selected-hover: var(--bb-color-blue-dark-100);
985
1005
  --sky-color-border-tab-active: var(--bb-color-sky-500);
986
1006
  --sky-color-border-tab-base: var(--bb-color-transparent);
987
1007
  --sky-color-border-tab-focus: var(--bb-color-sky-600);
988
1008
  --sky-color-border-tab-hover: var(--bb-color-sky-600);
989
1009
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
990
- --sky-color-border-text_highlight: var(--bb-color-yellow-600);
1010
+ --sky-color-border-text_highlight: var(--bb-color-yellow-dark-400);
991
1011
  --sky-color-border-warning: var(--bb-color-yellow-400);
992
1012
  --sky-color-category-blue: var(--bb-color-sky-900);
993
1013
  --sky-color-category-green: var(--bb-color-green-900);
@@ -1021,13 +1041,14 @@
1021
1041
  --sky-color-icon-on_prominent-base: var(--bb-color-white);
1022
1042
  --sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
1023
1043
  --sky-color-icon-on_status: var(--bb-color-white);
1044
+ --sky-color-icon-on_status_bg: var(--bb-color-gray-1000);
1024
1045
  --sky-color-icon-selected: var(--bb-color-blue-600);
1025
1046
  --sky-color-icon-success: var(--bb-color-green-700);
1026
1047
  --sky-color-icon-warning: var(--bb-color-yellow-600);
1027
- --sky-color-illustration-fill-heavy: var(--bb-color-green-700);
1028
- --sky-color-illustration-fill-soft: var(--bb-color-green-900);
1029
- --sky-color-illustration-fill-softest: var(--bb-color-gray-900);
1030
- --sky-color-illustration-stroke: var(--bb-color-green-200);
1048
+ --sky-color-illustration-fill-heavy: var(--bb-color-teal-dark-600);
1049
+ --sky-color-illustration-fill-soft: var(--bb-color-teal-dark-800);
1050
+ --sky-color-illustration-fill-softest: var(--bb-color-steel-gray-1100);
1051
+ --sky-color-illustration-stroke: var(--bb-color-teal-dark-100);
1031
1052
  --sky-color-text-action: var(--bb-color-sky-600);
1032
1053
  --sky-color-text-action_contrast: var(--bb-color-blue-dark-200);
1033
1054
  --sky-color-text-danger: var(--bb-color-red-400);
@@ -1079,7 +1100,7 @@
1079
1100
  --sky-color-viz-sequence-7: var(--bb-color-teal-400);
1080
1101
  --sky-color-viz-sequence-8: var(--bb-color-teal-300);
1081
1102
  --sky-color-viz-sequence-9: var(--bb-color-teal-200);
1082
- --sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
1103
+ --sky-image-logo-primary-src: var(--bb-image-logo-primary-white-src);
1083
1104
  --sky-image-select_icon-base: var(--bb-image-select_icon-base-dark-src);
1084
1105
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-dark-src);
1085
1106
  --sky-opacity-wait: var(--bb-opacity-600);
@@ -1162,11 +1183,21 @@
1162
1183
  --sky-font-style-hint-m-weight: 400;
1163
1184
  --sky-font-style-hint-s-style: italic;
1164
1185
  --sky-font-style-hint-s-weight: 400;
1186
+ --sky-font-text_decoration-action-tertiary-active: none;
1187
+ --sky-font-text_decoration-action-tertiary-base: none;
1188
+ --sky-font-text_decoration-action-tertiary-disabled: none;
1189
+ --sky-font-text_decoration-action-tertiary-focus: none;
1190
+ --sky-font-text_decoration-action-tertiary-hover: none;
1165
1191
  --sky-font-text_decoration-inline_link-active: underline;
1166
1192
  --sky-font-text_decoration-inline_link-base: none;
1167
1193
  --sky-font-text_decoration-inline_link-disabled: none;
1168
1194
  --sky-font-text_decoration-inline_link-focus: none;
1169
1195
  --sky-font-text_decoration-inline_link-hover: underline;
1196
+ --sky-font-text_decoration-standalone_link-active: none;
1197
+ --sky-font-text_decoration-standalone_link-base: none;
1198
+ --sky-font-text_decoration-standalone_link-disabled: none;
1199
+ --sky-font-text_decoration-standalone_link-focus: none;
1200
+ --sky-font-text_decoration-standalone_link-hover: none;
1170
1201
  --sky-font-text_decoration-visible_link: underline;
1171
1202
  --sky-space-gap-action_group-0: 0rem;
1172
1203
  --sky-space-gap-form-0: 0rem;
@@ -1890,6 +1921,11 @@
1890
1921
  --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/20 'var(--bb-font-blkb_sans-name)';
1891
1922
  }
1892
1923
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
1924
+ --sky-font-text_decoration-action-tertiary-active: underline;
1925
+ --sky-font-text_decoration-action-tertiary-base: underline;
1926
+ --sky-font-text_decoration-action-tertiary-focus: underline;
1927
+ --sky-font-text_decoration-action-tertiary-hover: underline;
1893
1928
  --sky-font-text_decoration-inline_link-base: underline;
1929
+ --sky-font-text_decoration-inline_link-focus: underline;
1894
1930
  --sky-border-style-container-overlay: var(--bb-border-style-solid);
1895
1931
  }
package/assets/scss/blackbaud.css CHANGED
@@ -4,6 +4,12 @@
4
4
  initial-value: url('data:,');
5
5
  }
6
6
 
7
+ @property --bb-image-logo-primary-white-src {
8
+ syntax: '<url>';
9
+ inherits: true;
10
+ initial-value: url('data:,');
11
+ }
12
+
7
13
  @property --bb-image-select_icon-base-dark-src {
8
14
  syntax: '<url>';
9
15
  inherits: true;
@@ -234,6 +240,7 @@
234
240
  --bb-color-rgba-blue-600-25: rgba(43, 107, 213, 0.25);
235
241
  --bb-color-rgba-blue-600-35: rgba(43, 107, 213, 0.35);
236
242
  --bb-color-rgba-blue-600-50: rgba(43, 107, 213, 0.5);
243
+ --bb-color-rgba-blue-dark-600-20: rgba(0, 102, 205, 0.2);
237
244
  --bb-color-rgba-green-600-35: rgba(9, 156, 83, 0.35);
238
245
  --bb-color-rgba-green-600-50: rgba(9, 156, 83, 0.5);
239
246
  --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
@@ -245,6 +252,7 @@
245
252
  --bb-color-rgba-steel-gray-100-10: rgba(245, 246, 247, 0.1);
246
253
  --bb-color-rgba-steel-gray-100-15: rgba(245, 246, 247, 0.15);
247
254
  --bb-color-rgba-steel-gray-100-25: rgba(245, 246, 247, 0.25);
255
+ --bb-color-rgba-steel-gray-100-7: rgba(245, 246, 247, 0.07);
248
256
  --bb-color-rgba-white-18: rgba(255, 255, 255, 0.18);
249
257
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
250
258
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
@@ -292,6 +300,16 @@
292
300
  --bb-color-slate-800: #32435e;
293
301
  --bb-color-slate-850: #2a384f;
294
302
  --bb-color-slate-900: #212c3f;
303
+ --bb-color-steel-blue-dark-100: #617695;
304
+ --bb-color-steel-blue-dark-1000: #06152e;
305
+ --bb-color-steel-blue-dark-200: #566a88;
306
+ --bb-color-steel-blue-dark-300: #4b5f7c;
307
+ --bb-color-steel-blue-dark-400: #405371;
308
+ --bb-color-steel-blue-dark-500: #354865;
309
+ --bb-color-steel-blue-dark-600: #2b3e5a;
310
+ --bb-color-steel-blue-dark-700: #21334e;
311
+ --bb-color-steel-blue-dark-800: #172943;
312
+ --bb-color-steel-blue-dark-900: #0e1f39;
295
313
  --bb-color-steel-fusion-100: #f3f6f9;
296
314
  --bb-color-steel-fusion-1000: #2a313c;
297
315
  --bb-color-steel-fusion-1050: #21282f;
@@ -402,15 +420,16 @@
402
420
  --bb-font-weight-light: 300;
403
421
  --bb-font-weight-regular: 400;
404
422
  --bb-font-weight-semibold: 600;
405
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/bb-logo.png');
406
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
407
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-base-light.svg');
408
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
409
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
410
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
411
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
412
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
413
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
423
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/bb-logo.png');
424
+ --bb-image-logo-primary-white-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/bb-logo-white.png');
425
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
426
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-base-light.svg');
427
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
428
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
429
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
430
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
431
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
432
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.9.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
414
433
  --bb-letter_spacing-normal: normal;
415
434
  --bb-letter_spacing-wider: 0.01rem;
416
435
  --bb-letter_spacing-widest: 0.046875rem;
@@ -630,10 +649,10 @@
630
649
  --sky-color-background-action-primary-focus: var(--bb-color-blue-dark-400);
631
650
  --sky-color-background-action-primary-hover: var(--bb-color-blue-dark-300);
632
651
  --sky-color-background-action-secondary-active: var(--bb-color-transparent);
633
- --sky-color-background-action-secondary-base: var(--bb-color-rgba-steel-gray-100-10);
652
+ --sky-color-background-action-secondary-base: var(--bb-color-rgba-steel-gray-100-7);
634
653
  --sky-color-background-action-secondary-disabled: var(--bb-color-steel-gray-700);
635
654
  --sky-color-background-action-secondary-focus: var(--bb-color-transparent);
636
- --sky-color-background-action-secondary-hover: var(--bb-color-rgba-steel-gray-100-15);
655
+ --sky-color-background-action-secondary-hover: var(--bb-color-rgba-steel-gray-100-10);
637
656
  --sky-color-background-action-tertiary-active: var(--bb-color-transparent);
638
657
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
639
658
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
@@ -677,10 +696,10 @@
677
696
  --sky-color-background-row-hover: var(--bb-color-transparent);
678
697
  --sky-color-background-scrim: var(--bb-color-scrim-heavy);
679
698
  --sky-color-background-selected-danger: var(--bb-color-red-dark-900);
680
- --sky-color-background-selected-heavy: var(--bb-color-blue-dark-800);
681
- --sky-color-background-selected-soft: var(--bb-color-blue-dark-900);
699
+ --sky-color-background-selected-heavy: var(--bb-color-blue-dark-375);
700
+ --sky-color-background-selected-soft: var(--bb-color-steel-blue-dark-700);
682
701
  --sky-color-background-selected-success: var(--bb-color-green-dark-900);
683
- --sky-color-background-selected-switch-base: var(--bb-color-blue-400);
702
+ --sky-color-background-selected-switch-base: var(--bb-color-blue-dark-375);
684
703
  --sky-color-background-selected-switch-disabled: var(--bb-color-steel-gray-700);
685
704
  --sky-color-background-selected-warning: var(--bb-color-yellow-dark-900);
686
705
  --sky-color-background-tab-active: var(--bb-color-transparent);
@@ -690,10 +709,10 @@
690
709
  --sky-color-background-tab-hover: var(--bb-color-transparent);
691
710
  --sky-color-background-tab-selected: var(--bb-color-transparent);
692
711
  --sky-color-background-tab-wizard-disabled: var(--bb-color-transparent);
693
- --sky-color-background-text_highlight: var(--bb-color-yellow-800);
712
+ --sky-color-background-text_highlight: var(--bb-color-yellow-dark-700);
694
713
  --sky-color-background-thumb-base: var(--bb-color-white);
695
714
  --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
696
- --sky-color-background-thumbnail_matte: var(--bb-color-rgba-steel-gray-100-25);
715
+ --sky-color-background-thumbnail_matte: var(--bb-color-rgba-steel-gray-100-7);
697
716
  --sky-color-border-action-accent-hover: var(--bb-color-blue-dark-400);
698
717
  --sky-color-border-action-danger-active: var(--bb-color-red-dark-300);
699
718
  --sky-color-border-action-danger-base: var(--bb-color-red-dark-400);
@@ -705,26 +724,26 @@
705
724
  --sky-color-border-action-input-disabled: var(--bb-color-gray-800);
706
725
  --sky-color-border-action-input-focus: var(--bb-color-blue-dark-400);
707
726
  --sky-color-border-action-input-hover: var(--bb-color-blue-dark-400);
708
- --sky-color-border-action-primary-active: var(--bb-color-blue-dark-400);
727
+ --sky-color-border-action-primary-active: var(--bb-color-blue-dark-100);
709
728
  --sky-color-border-action-primary-base: var(--bb-color-blue-dark-375);
710
729
  --sky-color-border-action-primary-disabled: var(--bb-color-gray-800);
711
- --sky-color-border-action-primary-focus: var(--bb-color-blue-dark-400);
712
- --sky-color-border-action-primary-hover: var(--bb-color-steel-gray-100);
730
+ --sky-color-border-action-primary-focus: var(--bb-color-blue-dark-100);
731
+ --sky-color-border-action-primary-hover: var(--bb-color-blue-dark-100);
713
732
  --sky-color-border-action-secondary-active: var(--bb-color-blue-dark-375);
714
733
  --sky-color-border-action-secondary-base: var(--bb-color-steel-gray-700);
715
734
  --sky-color-border-action-secondary-disabled: var(--bb-color-steel-gray-800);
716
735
  --sky-color-border-action-secondary-focus: var(--bb-color-blue-dark-375);
717
736
  --sky-color-border-action-secondary-hover: var(--bb-color-blue-dark-375);
718
- --sky-color-border-action-tertiary-active: var(--bb-color-blue-dark-400);
737
+ --sky-color-border-action-tertiary-active: var(--bb-color-blue-dark-375);
719
738
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
720
- --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
721
- --sky-color-border-action-tertiary-focus: var(--bb-color-blue-dark-400);
722
- --sky-color-border-action-tertiary-hover: var(--bb-color-blue-dark-400);
739
+ --sky-color-border-action-tertiary-disabled: var(--bb-color-steel-gray-800);
740
+ --sky-color-border-action-tertiary-focus: var(--bb-color-blue-dark-375);
741
+ --sky-color-border-action-tertiary-hover: var(--bb-color-blue-dark-375);
723
742
  --sky-color-border-action-tertiary-on_prominent-active: var(--bb-color-blue-300);
724
743
  --sky-color-border-action-tertiary-on_prominent-base: var(--bb-color-transparent);
725
744
  --sky-color-border-action-tertiary-on_prominent-focus: var(--bb-color-blue-300);
726
745
  --sky-color-border-action-tertiary-on_prominent-hover: var(--bb-color-blue-300);
727
- --sky-color-border-column_divider: var(--bb-color-blue-400);
746
+ --sky-color-border-column_divider: var(--bb-color-blue-dark-400);
728
747
  --sky-color-border-container-base: var(--bb-color-rgba-white-18);
729
748
  --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
730
749
  --sky-color-border-danger: var(--bb-color-red-dark-700);
@@ -735,7 +754,7 @@
735
754
  --sky-color-border-input-active: var(--bb-color-blue-dark-400);
736
755
  --sky-color-border-input-base: var(--bb-color-steel-gray-800);
737
756
  --sky-color-border-input-disabled: var(--bb-color-steel-gray-400);
738
- --sky-color-border-input-error: var(--bb-color-red-600);
757
+ --sky-color-border-input-error: var(--bb-color-red-dark-600);
739
758
  --sky-color-border-input-focus: var(--bb-color-blue-dark-400);
740
759
  --sky-color-border-input-hover: var(--bb-color-blue-dark-400);
741
760
  --sky-color-border-nav-active: var(--bb-color-blue-dark-375);
@@ -744,8 +763,8 @@
744
763
  --sky-color-border-nav-focus: var(--bb-color-blue-dark-375);
745
764
  --sky-color-border-nav-hover: var(--bb-color-blue-dark-375);
746
765
  --sky-color-border-progress_step: var(--bb-color-gray-600);
747
- --sky-color-border-selected: var(--bb-color-blue-400);
748
- --sky-color-border-selected_soft: var(--bb-color-blue-400);
766
+ --sky-color-border-selected: var(--bb-color-blue-dark-375);
767
+ --sky-color-border-selected_soft: var(--bb-color-steel-blue-dark-100);
749
768
  --sky-color-border-separator-dark: var(--bb-color-rgba-white-18);
750
769
  --sky-color-border-separator-light: var(--bb-color-rgba-white-18);
751
770
  --sky-color-border-separator-row: var(--bb-color-rgba-white-18);
@@ -753,21 +772,21 @@
753
772
  --sky-color-border-switch-active: var(--bb-color-blue-dark-400);
754
773
  --sky-color-border-switch-base: var(--bb-color-steel-gray-500);
755
774
  --sky-color-border-switch-disabled: var(--bb-color-steel-gray-400);
756
- --sky-color-border-switch-error: var(--bb-color-red-600);
775
+ --sky-color-border-switch-error: var(--bb-color-red-dark-600);
757
776
  --sky-color-border-switch-focus: var(--bb-color-blue-dark-400);
758
777
  --sky-color-border-switch-hover: var(--bb-color-blue-dark-400);
759
- --sky-color-border-switch-selected-active: var(--bb-color-blue-900);
778
+ --sky-color-border-switch-selected-active: var(--bb-color-blue-dark-100);
760
779
  --sky-color-border-switch-selected-base: var(--bb-color-transparent);
761
780
  --sky-color-border-switch-selected-disabled: var(--bb-color-steel-gray-400);
762
- --sky-color-border-switch-selected-focus: var(--bb-color-blue-dark-900);
763
- --sky-color-border-switch-selected-hover: var(--bb-color-blue-dark-300);
781
+ --sky-color-border-switch-selected-focus: var(--bb-color-blue-dark-100);
782
+ --sky-color-border-switch-selected-hover: var(--bb-color-blue-dark-100);
764
783
  --sky-color-border-tab-active: var(--bb-color-blue-dark-300);
765
784
  --sky-color-border-tab-base: var(--bb-color-transparent);
766
785
  --sky-color-border-tab-disabled: var(--bb-color-steel-gray-800);
767
786
  --sky-color-border-tab-focus: var(--bb-color-blue-dark-400);
768
787
  --sky-color-border-tab-hover: var(--bb-color-blue-dark-300);
769
788
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
770
- --sky-color-border-text_highlight: var(--bb-color-yellow-600);
789
+ --sky-color-border-text_highlight: var(--bb-color-yellow-dark-400);
771
790
  --sky-color-border-warning: var(--bb-color-yellow-dark-600);
772
791
  --sky-color-classify-1-heavy: var(--bb-color-teal-dark-300);
773
792
  --sky-color-classify-1-soft: var(--bb-color-teal-dark-700);
@@ -793,13 +812,14 @@
793
812
  --sky-color-icon-on_prominent-base: var(--bb-color-white);
794
813
  --sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
795
814
  --sky-color-icon-on_status: var(--bb-color-white);
815
+ --sky-color-icon-on_status_bg: var(--bb-color-steel-gray-1100);
796
816
  --sky-color-icon-selected: var(--bb-color-blue-dark-300);
797
817
  --sky-color-icon-success: var(--bb-color-green-dark-400);
798
818
  --sky-color-icon-warning: var(--bb-color-yellow-dark-400);
799
- --sky-color-illustration-fill-heavy: var(--bb-color-green-700);
800
- --sky-color-illustration-fill-soft: var(--bb-color-green-900);
801
- --sky-color-illustration-fill-softest: var(--bb-color-gray-900);
802
- --sky-color-illustration-stroke: var(--bb-color-green-200);
819
+ --sky-color-illustration-fill-heavy: var(--bb-color-teal-dark-600);
820
+ --sky-color-illustration-fill-soft: var(--bb-color-teal-dark-800);
821
+ --sky-color-illustration-fill-softest: var(--bb-color-steel-gray-1100);
822
+ --sky-color-illustration-stroke: var(--bb-color-teal-dark-100);
803
823
  --sky-color-text-action: var(--bb-color-blue-dark-375);
804
824
  --sky-color-text-action_contrast: var(--bb-color-blue-dark-200);
805
825
  --sky-color-text-danger: var(--bb-color-red-dark-400);