@blackbaud/skyux-design-tokens 6.7.0 → 6.8.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.
- package/CHANGELOG.md +14 -0
- package/assets/assets.json +1 -1
- package/assets/scss/base.css +26 -20
- package/assets/scss/blackbaud.css +23 -20
- package/bundles/base.css +26 -20
- package/bundles/base_blackbaud_public-api.css +64 -40
- package/bundles/base_public-api.css +41 -20
- package/bundles/blackbaud.css +23 -20
- package/bundles/public-api-styles.json +41 -6
- package/bundles/public-api-tokens.json +33 -7
- package/bundles/public-api.css +15 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [6.8.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.7.0...6.8.0) (2026-08-27)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* add on_status colors ([#414](https://github.com/blackbaud/skyux-design-tokens/issues/414)) ([f5b9b78](https://github.com/blackbaud/skyux-design-tokens/commit/f5b9b780daccdccf437cf1cf0e1367d0af618554))
|
|
9
|
+
* add prominent container background ([#431](https://github.com/blackbaud/skyux-design-tokens/issues/431)) ([609bce6](https://github.com/blackbaud/skyux-design-tokens/commit/609bce6dabbb08aacbc67cabda8381530574453e))
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
* remove light mode selector from light mode styles ([#436](https://github.com/blackbaud/skyux-design-tokens/issues/436)) ([6f22bce](https://github.com/blackbaud/skyux-design-tokens/commit/6f22bce654fb554c2e65bc12071219e6bff1854d))
|
|
15
|
+
* revert light-mode shadow-slate color shift from steel-gray merge ([#438](https://github.com/blackbaud/skyux-design-tokens/issues/438)) ([0467bb8](https://github.com/blackbaud/skyux-design-tokens/commit/0467bb83a1284eefd4bebeb138aa4c8f41f73c71))
|
|
16
|
+
|
|
3
17
|
## [6.7.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.6.0...6.7.0) (2026-08-26)
|
|
4
18
|
|
|
5
19
|
|
package/assets/assets.json
CHANGED
package/assets/scss/base.css
CHANGED
|
@@ -402,15 +402,15 @@
|
|
|
402
402
|
--bb-font-weight-light: 300;
|
|
403
403
|
--bb-font-weight-regular: 400;
|
|
404
404
|
--bb-font-weight-semibold: 600;
|
|
405
|
-
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
406
|
-
--bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
407
|
-
--bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
408
|
-
--bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
409
|
-
--bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
410
|
-
--bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
411
|
-
--bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
412
|
-
--bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
413
|
-
--bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
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');
|
|
414
414
|
--bb-letter_spacing-normal: normal;
|
|
415
415
|
--bb-letter_spacing-wider: 0.01rem;
|
|
416
416
|
--bb-letter_spacing-widest: 0.046875rem;
|
|
@@ -500,15 +500,15 @@
|
|
|
500
500
|
--bb-shadow-heavy-black-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
|
|
501
501
|
--bb-shadow-heavy-black-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
|
|
502
502
|
--bb-shadow-heavy-black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
|
|
503
|
-
--bb-shadow-slate-100: 0 1px 3px 0 rgba(
|
|
504
|
-
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(
|
|
505
|
-
--bb-shadow-slate-200: 0 1px 8px 0 rgba(
|
|
506
|
-
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(
|
|
507
|
-
--bb-shadow-slate-25: 0 1px 1px 0 rgba(
|
|
508
|
-
--bb-shadow-slate-400: 0 2px 4px -1px rgba(
|
|
509
|
-
--bb-shadow-slate-50: 0 1px 1px 0 rgba(
|
|
510
|
-
--bb-shadow-slate-800: 0 5px 5px -3px rgba(
|
|
511
|
-
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(
|
|
503
|
+
--bb-shadow-slate-100: 0 1px 3px 0 rgba(33, 44, 63, 0.2), 0 2px 1px -1px rgba(33, 44, 63, 0.12), 0 1px 1px 0 rgba(33, 44, 63, 0.14);
|
|
504
|
+
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(33, 44, 63, 0.2), 0 6px 30px 5px rgba(33, 44, 63, 0.12), 0 16px 24px 2px rgba(33, 44, 63, 0.14);
|
|
505
|
+
--bb-shadow-slate-200: 0 1px 8px 0 rgba(33, 44, 63, 0.2), 0 3px 3px -2px rgba(33, 44, 63, 0.12), 0 3px 4px 0 rgba(33, 44, 63, 0.14);
|
|
506
|
+
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(33, 44, 63, 0.2), 0 9px 46px 8px rgba(33, 44, 63, 0.12), 0 24px 38px 3px rgba(33, 44, 63, 0.14);
|
|
507
|
+
--bb-shadow-slate-25: 0 1px 1px 0 rgba(33, 44, 63, 0.05);
|
|
508
|
+
--bb-shadow-slate-400: 0 2px 4px -1px rgba(33, 44, 63, 0.2), 0 1px 10px 0 rgba(33, 44, 63, 0.12), 0 4px 5px 0 rgba(33, 44, 63, 0.14);
|
|
509
|
+
--bb-shadow-slate-50: 0 1px 1px 0 rgba(33, 44, 63, 0.12), 0 1.5px 1px -1px rgba(33, 44, 63, 0.12);
|
|
510
|
+
--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);
|
|
511
|
+
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
|
|
512
512
|
--bb-shadow-steel-fusion-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
|
|
513
513
|
--bb-shadow-steel-fusion-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
|
|
514
514
|
--bb-shadow-steel-fusion-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
|
|
@@ -537,7 +537,7 @@
|
|
|
537
537
|
--bb-color-scrollbar-bb-dark-thumb: #51555c;
|
|
538
538
|
--bb-color-scrollbar-bb-dark-track: #1c2228;
|
|
539
539
|
}
|
|
540
|
-
.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-
|
|
540
|
+
.sky-theme-modern.sky-theme-brand-base:not(.sky-theme-mode-dark) {
|
|
541
541
|
--sky-brand-name: var(--bb-brand-name);
|
|
542
542
|
--sky-color-background-action-accent-active: var(--bb-color-blue-100);
|
|
543
543
|
--sky-color-background-action-accent-base: var(--bb-color-white);
|
|
@@ -576,6 +576,7 @@
|
|
|
576
576
|
--sky-color-background-container-header-prominent: var(--bb-color-slate-800);
|
|
577
577
|
--sky-color-background-container-info: var(--bb-color-blue-200);
|
|
578
578
|
--sky-color-background-container-menu: var(--bb-color-white);
|
|
579
|
+
--sky-color-background-container-prominent: var(--bb-color-slate-50);
|
|
579
580
|
--sky-color-background-container-success: var(--bb-color-green-200);
|
|
580
581
|
--sky-color-background-container-tooltip: var(--bb-color-gray-1000);
|
|
581
582
|
--sky-color-background-container-warning: var(--bb-color-yellow-200);
|
|
@@ -713,6 +714,7 @@
|
|
|
713
714
|
--sky-color-icon-inverse: var(--bb-color-white);
|
|
714
715
|
--sky-color-icon-on_prominent-base: var(--bb-color-white);
|
|
715
716
|
--sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
|
|
717
|
+
--sky-color-icon-on_status: var(--bb-color-white);
|
|
716
718
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
717
719
|
--sky-color-icon-success: var(--bb-color-green-600);
|
|
718
720
|
--sky-color-icon-warning: var(--bb-color-yellow-400);
|
|
@@ -728,6 +730,7 @@
|
|
|
728
730
|
--sky-color-text-heading: var(--bb-color-gray-1100);
|
|
729
731
|
--sky-color-text-inverse: var(--bb-color-white);
|
|
730
732
|
--sky-color-text-on_prominent: var(--bb-color-white);
|
|
733
|
+
--sky-color-text-on_status: var(--bb-color-gray-1000);
|
|
731
734
|
--sky-color-text-selected: var(--bb-color-blue-600);
|
|
732
735
|
--sky-color-viz-axis: var(--bb-color-gray-500);
|
|
733
736
|
--sky-color-viz-category-1: var(--bb-color-teal-500);
|
|
@@ -838,7 +841,7 @@
|
|
|
838
841
|
--sky-elevation-overlay-simple-100: var(--bb-shadow-gray-simple-400);
|
|
839
842
|
--sky-elevation-raised-100: var(--bb-shadow-gray-100);
|
|
840
843
|
}
|
|
841
|
-
:root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-
|
|
844
|
+
:root:has(body.sky-theme-modern.sky-theme-brand-base:not(.sky-theme-mode-dark)) {
|
|
842
845
|
--sky-color-scrollbar-thumb: var(--bb-color-scrollbar-base-light-thumb);
|
|
843
846
|
--sky-color-scrollbar-track: var(--bb-color-scrollbar-base-light-track);
|
|
844
847
|
}
|
|
@@ -880,6 +883,7 @@
|
|
|
880
883
|
--sky-color-background-container-header-prominent: var(--bb-color-slate-800);
|
|
881
884
|
--sky-color-background-container-info: var(--bb-color-blue-800);
|
|
882
885
|
--sky-color-background-container-menu: var(--bb-color-gray-900);
|
|
886
|
+
--sky-color-background-container-prominent: var(--bb-color-steel-gray-1125);
|
|
883
887
|
--sky-color-background-container-success: var(--bb-color-green-900);
|
|
884
888
|
--sky-color-background-container-tooltip: var(--bb-color-gray-25);
|
|
885
889
|
--sky-color-background-container-warning: var(--bb-color-yellow-800);
|
|
@@ -1016,6 +1020,7 @@
|
|
|
1016
1020
|
--sky-color-icon-inverse: var(--bb-color-gray-1100);
|
|
1017
1021
|
--sky-color-icon-on_prominent-base: var(--bb-color-white);
|
|
1018
1022
|
--sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
|
|
1023
|
+
--sky-color-icon-on_status: var(--bb-color-white);
|
|
1019
1024
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
1020
1025
|
--sky-color-icon-success: var(--bb-color-green-700);
|
|
1021
1026
|
--sky-color-icon-warning: var(--bb-color-yellow-600);
|
|
@@ -1031,6 +1036,7 @@
|
|
|
1031
1036
|
--sky-color-text-heading: var(--bb-color-gray-50);
|
|
1032
1037
|
--sky-color-text-inverse: var(--bb-color-gray-1100);
|
|
1033
1038
|
--sky-color-text-on_prominent: var(--bb-color-white);
|
|
1039
|
+
--sky-color-text-on_status: var(--bb-color-gray-1000);
|
|
1034
1040
|
--sky-color-text-selected: var(--bb-color-blue-400);
|
|
1035
1041
|
--sky-color-viz-axis: var(--bb-color-gray-600);
|
|
1036
1042
|
--sky-color-viz-category-1: var(--bb-color-teal-dark-600);
|
|
@@ -402,15 +402,15 @@
|
|
|
402
402
|
--bb-font-weight-light: 300;
|
|
403
403
|
--bb-font-weight-regular: 400;
|
|
404
404
|
--bb-font-weight-semibold: 600;
|
|
405
|
-
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
406
|
-
--bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
407
|
-
--bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
408
|
-
--bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
409
|
-
--bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
410
|
-
--bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
411
|
-
--bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
412
|
-
--bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
413
|
-
--bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
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');
|
|
414
414
|
--bb-letter_spacing-normal: normal;
|
|
415
415
|
--bb-letter_spacing-wider: 0.01rem;
|
|
416
416
|
--bb-letter_spacing-widest: 0.046875rem;
|
|
@@ -500,15 +500,15 @@
|
|
|
500
500
|
--bb-shadow-heavy-black-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
|
|
501
501
|
--bb-shadow-heavy-black-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
|
|
502
502
|
--bb-shadow-heavy-black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
|
|
503
|
-
--bb-shadow-slate-100: 0 1px 3px 0 rgba(
|
|
504
|
-
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(
|
|
505
|
-
--bb-shadow-slate-200: 0 1px 8px 0 rgba(
|
|
506
|
-
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(
|
|
507
|
-
--bb-shadow-slate-25: 0 1px 1px 0 rgba(
|
|
508
|
-
--bb-shadow-slate-400: 0 2px 4px -1px rgba(
|
|
509
|
-
--bb-shadow-slate-50: 0 1px 1px 0 rgba(
|
|
510
|
-
--bb-shadow-slate-800: 0 5px 5px -3px rgba(
|
|
511
|
-
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(
|
|
503
|
+
--bb-shadow-slate-100: 0 1px 3px 0 rgba(33, 44, 63, 0.2), 0 2px 1px -1px rgba(33, 44, 63, 0.12), 0 1px 1px 0 rgba(33, 44, 63, 0.14);
|
|
504
|
+
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(33, 44, 63, 0.2), 0 6px 30px 5px rgba(33, 44, 63, 0.12), 0 16px 24px 2px rgba(33, 44, 63, 0.14);
|
|
505
|
+
--bb-shadow-slate-200: 0 1px 8px 0 rgba(33, 44, 63, 0.2), 0 3px 3px -2px rgba(33, 44, 63, 0.12), 0 3px 4px 0 rgba(33, 44, 63, 0.14);
|
|
506
|
+
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(33, 44, 63, 0.2), 0 9px 46px 8px rgba(33, 44, 63, 0.12), 0 24px 38px 3px rgba(33, 44, 63, 0.14);
|
|
507
|
+
--bb-shadow-slate-25: 0 1px 1px 0 rgba(33, 44, 63, 0.05);
|
|
508
|
+
--bb-shadow-slate-400: 0 2px 4px -1px rgba(33, 44, 63, 0.2), 0 1px 10px 0 rgba(33, 44, 63, 0.12), 0 4px 5px 0 rgba(33, 44, 63, 0.14);
|
|
509
|
+
--bb-shadow-slate-50: 0 1px 1px 0 rgba(33, 44, 63, 0.12), 0 1.5px 1px -1px rgba(33, 44, 63, 0.12);
|
|
510
|
+
--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);
|
|
511
|
+
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
|
|
512
512
|
--bb-shadow-steel-fusion-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
|
|
513
513
|
--bb-shadow-steel-fusion-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
|
|
514
514
|
--bb-shadow-steel-fusion-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
|
|
@@ -537,7 +537,7 @@
|
|
|
537
537
|
--bb-color-scrollbar-bb-dark-thumb: #51555c;
|
|
538
538
|
--bb-color-scrollbar-bb-dark-track: #1c2228;
|
|
539
539
|
}
|
|
540
|
-
.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-
|
|
540
|
+
.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud:not(.sky-theme-mode-dark) {
|
|
541
541
|
--sky-brand-name: var(--bb-brand-name);
|
|
542
542
|
--sky-color-background-action-accent-base: var(--bb-color-blue-25);
|
|
543
543
|
--sky-color-background-container-backdrop: var(--bb-color-slate-200);
|
|
@@ -651,6 +651,7 @@
|
|
|
651
651
|
--sky-color-background-container-header-prominent: var(--bb-color-slate-800);
|
|
652
652
|
--sky-color-background-container-info: var(--bb-color-blue-dark-400);
|
|
653
653
|
--sky-color-background-container-menu: var(--bb-color-steel-gray-900);
|
|
654
|
+
--sky-color-background-container-prominent: var(--bb-color-steel-gray-1125);
|
|
654
655
|
--sky-color-background-container-success: var(--bb-color-green-dark-400);
|
|
655
656
|
--sky-color-background-container-warning: var(--bb-color-yellow-dark-400);
|
|
656
657
|
--sky-color-background-disabled: var(--bb-color-gray-700);
|
|
@@ -787,10 +788,11 @@
|
|
|
787
788
|
--sky-color-icon-deemphasized: var(--bb-color-steel-gray-400);
|
|
788
789
|
--sky-color-icon-default: var(--bb-color-steel-gray-100);
|
|
789
790
|
--sky-color-icon-info: var(--bb-color-blue-dark-400);
|
|
790
|
-
--sky-color-icon-input-action: var(--bb-color-blue-
|
|
791
|
+
--sky-color-icon-input-action: var(--bb-color-oklch-blue-375);
|
|
791
792
|
--sky-color-icon-inverse: var(--bb-color-steel-gray-1100);
|
|
792
793
|
--sky-color-icon-on_prominent-base: var(--bb-color-white);
|
|
793
794
|
--sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
|
|
795
|
+
--sky-color-icon-on_status: var(--bb-color-white);
|
|
794
796
|
--sky-color-icon-selected: var(--bb-color-blue-dark-300);
|
|
795
797
|
--sky-color-icon-success: var(--bb-color-green-dark-400);
|
|
796
798
|
--sky-color-icon-warning: var(--bb-color-yellow-dark-400);
|
|
@@ -806,6 +808,7 @@
|
|
|
806
808
|
--sky-color-text-heading: var(--bb-color-steel-gray-100);
|
|
807
809
|
--sky-color-text-inverse: var(--bb-color-steel-gray-1100);
|
|
808
810
|
--sky-color-text-on_prominent: var(--bb-color-white);
|
|
811
|
+
--sky-color-text-on_status: var(--bb-color-gray-1000);
|
|
809
812
|
--sky-color-text-selected: var(--bb-color-steel-gray-100);
|
|
810
813
|
--sky-image-select_icon-base: var(--bb-image-select_icon-bb-dark-src);
|
|
811
814
|
--sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-dark-src);
|
package/bundles/base.css
CHANGED
|
@@ -402,15 +402,15 @@
|
|
|
402
402
|
--bb-font-weight-light: 300;
|
|
403
403
|
--bb-font-weight-regular: 400;
|
|
404
404
|
--bb-font-weight-semibold: 600;
|
|
405
|
-
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
406
|
-
--bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
407
|
-
--bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
408
|
-
--bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
409
|
-
--bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
410
|
-
--bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
411
|
-
--bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
412
|
-
--bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
413
|
-
--bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
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');
|
|
414
414
|
--bb-letter_spacing-normal: normal;
|
|
415
415
|
--bb-letter_spacing-wider: 0.01rem;
|
|
416
416
|
--bb-letter_spacing-widest: 0.046875rem;
|
|
@@ -500,15 +500,15 @@
|
|
|
500
500
|
--bb-shadow-heavy-black-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
|
|
501
501
|
--bb-shadow-heavy-black-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
|
|
502
502
|
--bb-shadow-heavy-black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
|
|
503
|
-
--bb-shadow-slate-100: 0 1px 3px 0 rgba(
|
|
504
|
-
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(
|
|
505
|
-
--bb-shadow-slate-200: 0 1px 8px 0 rgba(
|
|
506
|
-
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(
|
|
507
|
-
--bb-shadow-slate-25: 0 1px 1px 0 rgba(
|
|
508
|
-
--bb-shadow-slate-400: 0 2px 4px -1px rgba(
|
|
509
|
-
--bb-shadow-slate-50: 0 1px 1px 0 rgba(
|
|
510
|
-
--bb-shadow-slate-800: 0 5px 5px -3px rgba(
|
|
511
|
-
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(
|
|
503
|
+
--bb-shadow-slate-100: 0 1px 3px 0 rgba(33, 44, 63, 0.2), 0 2px 1px -1px rgba(33, 44, 63, 0.12), 0 1px 1px 0 rgba(33, 44, 63, 0.14);
|
|
504
|
+
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(33, 44, 63, 0.2), 0 6px 30px 5px rgba(33, 44, 63, 0.12), 0 16px 24px 2px rgba(33, 44, 63, 0.14);
|
|
505
|
+
--bb-shadow-slate-200: 0 1px 8px 0 rgba(33, 44, 63, 0.2), 0 3px 3px -2px rgba(33, 44, 63, 0.12), 0 3px 4px 0 rgba(33, 44, 63, 0.14);
|
|
506
|
+
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(33, 44, 63, 0.2), 0 9px 46px 8px rgba(33, 44, 63, 0.12), 0 24px 38px 3px rgba(33, 44, 63, 0.14);
|
|
507
|
+
--bb-shadow-slate-25: 0 1px 1px 0 rgba(33, 44, 63, 0.05);
|
|
508
|
+
--bb-shadow-slate-400: 0 2px 4px -1px rgba(33, 44, 63, 0.2), 0 1px 10px 0 rgba(33, 44, 63, 0.12), 0 4px 5px 0 rgba(33, 44, 63, 0.14);
|
|
509
|
+
--bb-shadow-slate-50: 0 1px 1px 0 rgba(33, 44, 63, 0.12), 0 1.5px 1px -1px rgba(33, 44, 63, 0.12);
|
|
510
|
+
--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);
|
|
511
|
+
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
|
|
512
512
|
--bb-shadow-steel-fusion-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
|
|
513
513
|
--bb-shadow-steel-fusion-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
|
|
514
514
|
--bb-shadow-steel-fusion-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
|
|
@@ -537,7 +537,7 @@
|
|
|
537
537
|
--bb-color-scrollbar-bb-dark-thumb: #51555c;
|
|
538
538
|
--bb-color-scrollbar-bb-dark-track: #1c2228;
|
|
539
539
|
}
|
|
540
|
-
.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-
|
|
540
|
+
.sky-theme-modern.sky-theme-brand-base:not(.sky-theme-mode-dark) {
|
|
541
541
|
--sky-brand-name: var(--bb-brand-name);
|
|
542
542
|
--sky-color-background-action-accent-active: var(--bb-color-blue-100);
|
|
543
543
|
--sky-color-background-action-accent-base: var(--bb-color-white);
|
|
@@ -576,6 +576,7 @@
|
|
|
576
576
|
--sky-color-background-container-header-prominent: var(--bb-color-slate-800);
|
|
577
577
|
--sky-color-background-container-info: var(--bb-color-blue-200);
|
|
578
578
|
--sky-color-background-container-menu: var(--bb-color-white);
|
|
579
|
+
--sky-color-background-container-prominent: var(--bb-color-slate-50);
|
|
579
580
|
--sky-color-background-container-success: var(--bb-color-green-200);
|
|
580
581
|
--sky-color-background-container-tooltip: var(--bb-color-gray-1000);
|
|
581
582
|
--sky-color-background-container-warning: var(--bb-color-yellow-200);
|
|
@@ -713,6 +714,7 @@
|
|
|
713
714
|
--sky-color-icon-inverse: var(--bb-color-white);
|
|
714
715
|
--sky-color-icon-on_prominent-base: var(--bb-color-white);
|
|
715
716
|
--sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
|
|
717
|
+
--sky-color-icon-on_status: var(--bb-color-white);
|
|
716
718
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
717
719
|
--sky-color-icon-success: var(--bb-color-green-600);
|
|
718
720
|
--sky-color-icon-warning: var(--bb-color-yellow-400);
|
|
@@ -728,6 +730,7 @@
|
|
|
728
730
|
--sky-color-text-heading: var(--bb-color-gray-1100);
|
|
729
731
|
--sky-color-text-inverse: var(--bb-color-white);
|
|
730
732
|
--sky-color-text-on_prominent: var(--bb-color-white);
|
|
733
|
+
--sky-color-text-on_status: var(--bb-color-gray-1000);
|
|
731
734
|
--sky-color-text-selected: var(--bb-color-blue-600);
|
|
732
735
|
--sky-color-viz-axis: var(--bb-color-gray-500);
|
|
733
736
|
--sky-color-viz-category-1: var(--bb-color-teal-500);
|
|
@@ -838,7 +841,7 @@
|
|
|
838
841
|
--sky-elevation-overlay-simple-100: var(--bb-shadow-gray-simple-400);
|
|
839
842
|
--sky-elevation-raised-100: var(--bb-shadow-gray-100);
|
|
840
843
|
}
|
|
841
|
-
:root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-
|
|
844
|
+
:root:has(body.sky-theme-modern.sky-theme-brand-base:not(.sky-theme-mode-dark)) {
|
|
842
845
|
--sky-color-scrollbar-thumb: var(--bb-color-scrollbar-base-light-thumb);
|
|
843
846
|
--sky-color-scrollbar-track: var(--bb-color-scrollbar-base-light-track);
|
|
844
847
|
}
|
|
@@ -880,6 +883,7 @@
|
|
|
880
883
|
--sky-color-background-container-header-prominent: var(--bb-color-slate-800);
|
|
881
884
|
--sky-color-background-container-info: var(--bb-color-blue-800);
|
|
882
885
|
--sky-color-background-container-menu: var(--bb-color-gray-900);
|
|
886
|
+
--sky-color-background-container-prominent: var(--bb-color-steel-gray-1125);
|
|
883
887
|
--sky-color-background-container-success: var(--bb-color-green-900);
|
|
884
888
|
--sky-color-background-container-tooltip: var(--bb-color-gray-25);
|
|
885
889
|
--sky-color-background-container-warning: var(--bb-color-yellow-800);
|
|
@@ -1016,6 +1020,7 @@
|
|
|
1016
1020
|
--sky-color-icon-inverse: var(--bb-color-gray-1100);
|
|
1017
1021
|
--sky-color-icon-on_prominent-base: var(--bb-color-white);
|
|
1018
1022
|
--sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
|
|
1023
|
+
--sky-color-icon-on_status: var(--bb-color-white);
|
|
1019
1024
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
1020
1025
|
--sky-color-icon-success: var(--bb-color-green-700);
|
|
1021
1026
|
--sky-color-icon-warning: var(--bb-color-yellow-600);
|
|
@@ -1031,6 +1036,7 @@
|
|
|
1031
1036
|
--sky-color-text-heading: var(--bb-color-gray-50);
|
|
1032
1037
|
--sky-color-text-inverse: var(--bb-color-gray-1100);
|
|
1033
1038
|
--sky-color-text-on_prominent: var(--bb-color-white);
|
|
1039
|
+
--sky-color-text-on_status: var(--bb-color-gray-1000);
|
|
1034
1040
|
--sky-color-text-selected: var(--bb-color-blue-400);
|
|
1035
1041
|
--sky-color-viz-axis: var(--bb-color-gray-600);
|
|
1036
1042
|
--sky-color-viz-category-1: var(--bb-color-teal-dark-600);
|
|
@@ -402,15 +402,15 @@
|
|
|
402
402
|
--bb-font-weight-light: 300;
|
|
403
403
|
--bb-font-weight-regular: 400;
|
|
404
404
|
--bb-font-weight-semibold: 600;
|
|
405
|
-
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
406
|
-
--bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
407
|
-
--bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
408
|
-
--bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
409
|
-
--bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
410
|
-
--bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
411
|
-
--bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
412
|
-
--bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
413
|
-
--bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
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');
|
|
414
414
|
--bb-letter_spacing-normal: normal;
|
|
415
415
|
--bb-letter_spacing-wider: 0.01rem;
|
|
416
416
|
--bb-letter_spacing-widest: 0.046875rem;
|
|
@@ -500,15 +500,15 @@
|
|
|
500
500
|
--bb-shadow-heavy-black-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
|
|
501
501
|
--bb-shadow-heavy-black-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
|
|
502
502
|
--bb-shadow-heavy-black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
|
|
503
|
-
--bb-shadow-slate-100: 0 1px 3px 0 rgba(
|
|
504
|
-
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(
|
|
505
|
-
--bb-shadow-slate-200: 0 1px 8px 0 rgba(
|
|
506
|
-
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(
|
|
507
|
-
--bb-shadow-slate-25: 0 1px 1px 0 rgba(
|
|
508
|
-
--bb-shadow-slate-400: 0 2px 4px -1px rgba(
|
|
509
|
-
--bb-shadow-slate-50: 0 1px 1px 0 rgba(
|
|
510
|
-
--bb-shadow-slate-800: 0 5px 5px -3px rgba(
|
|
511
|
-
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(
|
|
503
|
+
--bb-shadow-slate-100: 0 1px 3px 0 rgba(33, 44, 63, 0.2), 0 2px 1px -1px rgba(33, 44, 63, 0.12), 0 1px 1px 0 rgba(33, 44, 63, 0.14);
|
|
504
|
+
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(33, 44, 63, 0.2), 0 6px 30px 5px rgba(33, 44, 63, 0.12), 0 16px 24px 2px rgba(33, 44, 63, 0.14);
|
|
505
|
+
--bb-shadow-slate-200: 0 1px 8px 0 rgba(33, 44, 63, 0.2), 0 3px 3px -2px rgba(33, 44, 63, 0.12), 0 3px 4px 0 rgba(33, 44, 63, 0.14);
|
|
506
|
+
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(33, 44, 63, 0.2), 0 9px 46px 8px rgba(33, 44, 63, 0.12), 0 24px 38px 3px rgba(33, 44, 63, 0.14);
|
|
507
|
+
--bb-shadow-slate-25: 0 1px 1px 0 rgba(33, 44, 63, 0.05);
|
|
508
|
+
--bb-shadow-slate-400: 0 2px 4px -1px rgba(33, 44, 63, 0.2), 0 1px 10px 0 rgba(33, 44, 63, 0.12), 0 4px 5px 0 rgba(33, 44, 63, 0.14);
|
|
509
|
+
--bb-shadow-slate-50: 0 1px 1px 0 rgba(33, 44, 63, 0.12), 0 1.5px 1px -1px rgba(33, 44, 63, 0.12);
|
|
510
|
+
--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);
|
|
511
|
+
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
|
|
512
512
|
--bb-shadow-steel-fusion-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
|
|
513
513
|
--bb-shadow-steel-fusion-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
|
|
514
514
|
--bb-shadow-steel-fusion-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
|
|
@@ -537,7 +537,7 @@
|
|
|
537
537
|
--bb-color-scrollbar-bb-dark-thumb: #51555c;
|
|
538
538
|
--bb-color-scrollbar-bb-dark-track: #1c2228;
|
|
539
539
|
}
|
|
540
|
-
.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-
|
|
540
|
+
.sky-theme-modern.sky-theme-brand-base:not(.sky-theme-mode-dark) {
|
|
541
541
|
--sky-brand-name: var(--bb-brand-name);
|
|
542
542
|
--sky-color-background-action-accent-active: var(--bb-color-blue-100);
|
|
543
543
|
--sky-color-background-action-accent-base: var(--bb-color-white);
|
|
@@ -576,6 +576,7 @@
|
|
|
576
576
|
--sky-color-background-container-header-prominent: var(--bb-color-slate-800);
|
|
577
577
|
--sky-color-background-container-info: var(--bb-color-blue-200);
|
|
578
578
|
--sky-color-background-container-menu: var(--bb-color-white);
|
|
579
|
+
--sky-color-background-container-prominent: var(--bb-color-slate-50);
|
|
579
580
|
--sky-color-background-container-success: var(--bb-color-green-200);
|
|
580
581
|
--sky-color-background-container-tooltip: var(--bb-color-gray-1000);
|
|
581
582
|
--sky-color-background-container-warning: var(--bb-color-yellow-200);
|
|
@@ -713,6 +714,7 @@
|
|
|
713
714
|
--sky-color-icon-inverse: var(--bb-color-white);
|
|
714
715
|
--sky-color-icon-on_prominent-base: var(--bb-color-white);
|
|
715
716
|
--sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
|
|
717
|
+
--sky-color-icon-on_status: var(--bb-color-white);
|
|
716
718
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
717
719
|
--sky-color-icon-success: var(--bb-color-green-600);
|
|
718
720
|
--sky-color-icon-warning: var(--bb-color-yellow-400);
|
|
@@ -728,6 +730,7 @@
|
|
|
728
730
|
--sky-color-text-heading: var(--bb-color-gray-1100);
|
|
729
731
|
--sky-color-text-inverse: var(--bb-color-white);
|
|
730
732
|
--sky-color-text-on_prominent: var(--bb-color-white);
|
|
733
|
+
--sky-color-text-on_status: var(--bb-color-gray-1000);
|
|
731
734
|
--sky-color-text-selected: var(--bb-color-blue-600);
|
|
732
735
|
--sky-color-viz-axis: var(--bb-color-gray-500);
|
|
733
736
|
--sky-color-viz-category-1: var(--bb-color-teal-500);
|
|
@@ -838,7 +841,7 @@
|
|
|
838
841
|
--sky-elevation-overlay-simple-100: var(--bb-shadow-gray-simple-400);
|
|
839
842
|
--sky-elevation-raised-100: var(--bb-shadow-gray-100);
|
|
840
843
|
}
|
|
841
|
-
:root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-
|
|
844
|
+
:root:has(body.sky-theme-modern.sky-theme-brand-base:not(.sky-theme-mode-dark)) {
|
|
842
845
|
--sky-color-scrollbar-thumb: var(--bb-color-scrollbar-base-light-thumb);
|
|
843
846
|
--sky-color-scrollbar-track: var(--bb-color-scrollbar-base-light-track);
|
|
844
847
|
}
|
|
@@ -880,6 +883,7 @@
|
|
|
880
883
|
--sky-color-background-container-header-prominent: var(--bb-color-slate-800);
|
|
881
884
|
--sky-color-background-container-info: var(--bb-color-blue-800);
|
|
882
885
|
--sky-color-background-container-menu: var(--bb-color-gray-900);
|
|
886
|
+
--sky-color-background-container-prominent: var(--bb-color-steel-gray-1125);
|
|
883
887
|
--sky-color-background-container-success: var(--bb-color-green-900);
|
|
884
888
|
--sky-color-background-container-tooltip: var(--bb-color-gray-25);
|
|
885
889
|
--sky-color-background-container-warning: var(--bb-color-yellow-800);
|
|
@@ -1016,6 +1020,7 @@
|
|
|
1016
1020
|
--sky-color-icon-inverse: var(--bb-color-gray-1100);
|
|
1017
1021
|
--sky-color-icon-on_prominent-base: var(--bb-color-white);
|
|
1018
1022
|
--sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
|
|
1023
|
+
--sky-color-icon-on_status: var(--bb-color-white);
|
|
1019
1024
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
1020
1025
|
--sky-color-icon-success: var(--bb-color-green-700);
|
|
1021
1026
|
--sky-color-icon-warning: var(--bb-color-yellow-600);
|
|
@@ -1031,6 +1036,7 @@
|
|
|
1031
1036
|
--sky-color-text-heading: var(--bb-color-gray-50);
|
|
1032
1037
|
--sky-color-text-inverse: var(--bb-color-gray-1100);
|
|
1033
1038
|
--sky-color-text-on_prominent: var(--bb-color-white);
|
|
1039
|
+
--sky-color-text-on_status: var(--bb-color-gray-1000);
|
|
1034
1040
|
--sky-color-text-selected: var(--bb-color-blue-400);
|
|
1035
1041
|
--sky-color-viz-axis: var(--bb-color-gray-600);
|
|
1036
1042
|
--sky-color-viz-category-1: var(--bb-color-teal-dark-600);
|
|
@@ -2292,15 +2298,15 @@
|
|
|
2292
2298
|
--bb-font-weight-light: 300;
|
|
2293
2299
|
--bb-font-weight-regular: 400;
|
|
2294
2300
|
--bb-font-weight-semibold: 600;
|
|
2295
|
-
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
2296
|
-
--bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
2297
|
-
--bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
2298
|
-
--bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
2299
|
-
--bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
2300
|
-
--bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
2301
|
-
--bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
2302
|
-
--bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
2303
|
-
--bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
2301
|
+
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.8.0/assets/images/bb-logo.png');
|
|
2302
|
+
--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');
|
|
2303
|
+
--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');
|
|
2304
|
+
--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');
|
|
2305
|
+
--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');
|
|
2306
|
+
--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');
|
|
2307
|
+
--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');
|
|
2308
|
+
--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');
|
|
2309
|
+
--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');
|
|
2304
2310
|
--bb-letter_spacing-normal: normal;
|
|
2305
2311
|
--bb-letter_spacing-wider: 0.01rem;
|
|
2306
2312
|
--bb-letter_spacing-widest: 0.046875rem;
|
|
@@ -2390,15 +2396,15 @@
|
|
|
2390
2396
|
--bb-shadow-heavy-black-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
|
|
2391
2397
|
--bb-shadow-heavy-black-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
|
|
2392
2398
|
--bb-shadow-heavy-black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
|
|
2393
|
-
--bb-shadow-slate-100: 0 1px 3px 0 rgba(
|
|
2394
|
-
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(
|
|
2395
|
-
--bb-shadow-slate-200: 0 1px 8px 0 rgba(
|
|
2396
|
-
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(
|
|
2397
|
-
--bb-shadow-slate-25: 0 1px 1px 0 rgba(
|
|
2398
|
-
--bb-shadow-slate-400: 0 2px 4px -1px rgba(
|
|
2399
|
-
--bb-shadow-slate-50: 0 1px 1px 0 rgba(
|
|
2400
|
-
--bb-shadow-slate-800: 0 5px 5px -3px rgba(
|
|
2401
|
-
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(
|
|
2399
|
+
--bb-shadow-slate-100: 0 1px 3px 0 rgba(33, 44, 63, 0.2), 0 2px 1px -1px rgba(33, 44, 63, 0.12), 0 1px 1px 0 rgba(33, 44, 63, 0.14);
|
|
2400
|
+
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(33, 44, 63, 0.2), 0 6px 30px 5px rgba(33, 44, 63, 0.12), 0 16px 24px 2px rgba(33, 44, 63, 0.14);
|
|
2401
|
+
--bb-shadow-slate-200: 0 1px 8px 0 rgba(33, 44, 63, 0.2), 0 3px 3px -2px rgba(33, 44, 63, 0.12), 0 3px 4px 0 rgba(33, 44, 63, 0.14);
|
|
2402
|
+
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(33, 44, 63, 0.2), 0 9px 46px 8px rgba(33, 44, 63, 0.12), 0 24px 38px 3px rgba(33, 44, 63, 0.14);
|
|
2403
|
+
--bb-shadow-slate-25: 0 1px 1px 0 rgba(33, 44, 63, 0.05);
|
|
2404
|
+
--bb-shadow-slate-400: 0 2px 4px -1px rgba(33, 44, 63, 0.2), 0 1px 10px 0 rgba(33, 44, 63, 0.12), 0 4px 5px 0 rgba(33, 44, 63, 0.14);
|
|
2405
|
+
--bb-shadow-slate-50: 0 1px 1px 0 rgba(33, 44, 63, 0.12), 0 1.5px 1px -1px rgba(33, 44, 63, 0.12);
|
|
2406
|
+
--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);
|
|
2407
|
+
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
|
|
2402
2408
|
--bb-shadow-steel-fusion-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
|
|
2403
2409
|
--bb-shadow-steel-fusion-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
|
|
2404
2410
|
--bb-shadow-steel-fusion-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
|
|
@@ -2427,7 +2433,7 @@
|
|
|
2427
2433
|
--bb-color-scrollbar-bb-dark-thumb: #51555c;
|
|
2428
2434
|
--bb-color-scrollbar-bb-dark-track: #1c2228;
|
|
2429
2435
|
}
|
|
2430
|
-
.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-
|
|
2436
|
+
.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud:not(.sky-theme-mode-dark) {
|
|
2431
2437
|
--sky-brand-name: var(--bb-brand-name);
|
|
2432
2438
|
--sky-color-background-action-accent-base: var(--bb-color-blue-25);
|
|
2433
2439
|
--sky-color-background-container-backdrop: var(--bb-color-slate-200);
|
|
@@ -2541,6 +2547,7 @@
|
|
|
2541
2547
|
--sky-color-background-container-header-prominent: var(--bb-color-slate-800);
|
|
2542
2548
|
--sky-color-background-container-info: var(--bb-color-blue-dark-400);
|
|
2543
2549
|
--sky-color-background-container-menu: var(--bb-color-steel-gray-900);
|
|
2550
|
+
--sky-color-background-container-prominent: var(--bb-color-steel-gray-1125);
|
|
2544
2551
|
--sky-color-background-container-success: var(--bb-color-green-dark-400);
|
|
2545
2552
|
--sky-color-background-container-warning: var(--bb-color-yellow-dark-400);
|
|
2546
2553
|
--sky-color-background-disabled: var(--bb-color-gray-700);
|
|
@@ -2677,10 +2684,11 @@
|
|
|
2677
2684
|
--sky-color-icon-deemphasized: var(--bb-color-steel-gray-400);
|
|
2678
2685
|
--sky-color-icon-default: var(--bb-color-steel-gray-100);
|
|
2679
2686
|
--sky-color-icon-info: var(--bb-color-blue-dark-400);
|
|
2680
|
-
--sky-color-icon-input-action: var(--bb-color-blue-
|
|
2687
|
+
--sky-color-icon-input-action: var(--bb-color-oklch-blue-375);
|
|
2681
2688
|
--sky-color-icon-inverse: var(--bb-color-steel-gray-1100);
|
|
2682
2689
|
--sky-color-icon-on_prominent-base: var(--bb-color-white);
|
|
2683
2690
|
--sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
|
|
2691
|
+
--sky-color-icon-on_status: var(--bb-color-white);
|
|
2684
2692
|
--sky-color-icon-selected: var(--bb-color-blue-dark-300);
|
|
2685
2693
|
--sky-color-icon-success: var(--bb-color-green-dark-400);
|
|
2686
2694
|
--sky-color-icon-warning: var(--bb-color-yellow-dark-400);
|
|
@@ -2696,6 +2704,7 @@
|
|
|
2696
2704
|
--sky-color-text-heading: var(--bb-color-steel-gray-100);
|
|
2697
2705
|
--sky-color-text-inverse: var(--bb-color-steel-gray-1100);
|
|
2698
2706
|
--sky-color-text-on_prominent: var(--bb-color-white);
|
|
2707
|
+
--sky-color-text-on_status: var(--bb-color-gray-1000);
|
|
2699
2708
|
--sky-color-text-selected: var(--bb-color-steel-gray-100);
|
|
2700
2709
|
--sky-image-select_icon-base: var(--bb-image-select_icon-bb-dark-src);
|
|
2701
2710
|
--sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-dark-src);
|
|
@@ -2835,6 +2844,7 @@
|
|
|
2835
2844
|
--sky-theme-color-background-container-dimmed: var(--sky-color-background-container-dimmed);
|
|
2836
2845
|
--sky-theme-color-background-container-header-prominent: var(--sky-color-background-container-header-prominent);
|
|
2837
2846
|
--sky-theme-color-background-container-info: var(--sky-color-background-container-info);
|
|
2847
|
+
--sky-theme-color-background-container-prominent: var(--sky-color-background-container-prominent);
|
|
2838
2848
|
--sky-theme-color-background-container-success: var(--sky-color-background-container-success);
|
|
2839
2849
|
--sky-theme-color-background-container-warning: var(--sky-color-background-container-warning);
|
|
2840
2850
|
--sky-theme-color-background-disabled: var(--sky-color-background-disabled);
|
|
@@ -2875,6 +2885,7 @@
|
|
|
2875
2885
|
--sky-theme-color-icon-inverse: var(--sky-color-icon-inverse);
|
|
2876
2886
|
--sky-theme-color-icon-on_prominent-base: var(--sky-color-icon-on_prominent-base);
|
|
2877
2887
|
--sky-theme-color-icon-on_prominent-disabled: var(--sky-color-icon-on_prominent-disabled);
|
|
2888
|
+
--sky-theme-color-icon-on_status: var(--sky-color-icon-on_status);
|
|
2878
2889
|
--sky-theme-color-icon-success: var(--sky-color-icon-success);
|
|
2879
2890
|
--sky-theme-color-text-action: var(--sky-color-text-action);
|
|
2880
2891
|
--sky-theme-color-text-action_contrast: var(--sky-color-text-action_contrast);
|
|
@@ -2883,6 +2894,7 @@
|
|
|
2883
2894
|
--sky-theme-color-text-heading: var(--sky-color-text-heading);
|
|
2884
2895
|
--sky-theme-color-text-inverse: var(--sky-color-text-inverse);
|
|
2885
2896
|
--sky-theme-color-text-on_prominent: var(--sky-color-text-on_prominent);
|
|
2897
|
+
--sky-theme-color-text-on_status: var(--sky-color-text-on_status);
|
|
2886
2898
|
--sky-theme-color-viz-axis: var(--sky-color-viz-axis);
|
|
2887
2899
|
--sky-theme-color-viz-category-1: var(--sky-color-viz-category-1);
|
|
2888
2900
|
--sky-theme-color-viz-category-2: var(--sky-color-viz-category-2);
|
|
@@ -3064,6 +3076,7 @@
|
|
|
3064
3076
|
--sky-theme-color-background-container-dimmed: #eeeeef;
|
|
3065
3077
|
--sky-theme-color-background-container-header-prominent: #32435e;
|
|
3066
3078
|
--sky-theme-color-background-container-info: #81d4f7;
|
|
3079
|
+
--sky-theme-color-background-container-prominent: #f6f8fa;
|
|
3067
3080
|
--sky-theme-color-background-container-success: #b7da9b;
|
|
3068
3081
|
--sky-theme-color-background-container-warning: #ffd597;
|
|
3069
3082
|
--sky-theme-color-background-disabled: #cdcfd2;
|
|
@@ -3104,6 +3117,7 @@
|
|
|
3104
3117
|
--sky-theme-color-icon-inverse: #ffffff;
|
|
3105
3118
|
--sky-theme-color-icon-on_prominent-base: #ffffff;
|
|
3106
3119
|
--sky-theme-color-icon-on_prominent-disabled: #686c73;
|
|
3120
|
+
--sky-theme-color-icon-on_status: #ffffff;
|
|
3107
3121
|
--sky-theme-color-icon-success: #72bf44;
|
|
3108
3122
|
--sky-theme-color-text-action: #0974a1;
|
|
3109
3123
|
--sky-theme-color-text-action_contrast: #0974a1;
|
|
@@ -3112,6 +3126,7 @@
|
|
|
3112
3126
|
--sky-theme-color-text-heading: #212327;
|
|
3113
3127
|
--sky-theme-color-text-inverse: #ffffff;
|
|
3114
3128
|
--sky-theme-color-text-on_prominent: #ffffff;
|
|
3129
|
+
--sky-theme-color-text-on_status: #212327;
|
|
3115
3130
|
--sky-theme-color-viz-axis: #85888d;
|
|
3116
3131
|
--sky-theme-color-viz-category-1: #06a39e;
|
|
3117
3132
|
--sky-theme-color-viz-category-2: #6d3c96;
|
|
@@ -3544,6 +3559,9 @@ em {
|
|
|
3544
3559
|
.sky-theme-color-background-container-backdrop {
|
|
3545
3560
|
background-color: var(--sky-theme-color-background-container-backdrop);
|
|
3546
3561
|
}
|
|
3562
|
+
.sky-theme-color-background-container-prominent {
|
|
3563
|
+
background-color: var(--sky-theme-color-background-container-prominent);
|
|
3564
|
+
}
|
|
3547
3565
|
.sky-theme-color-background-container-header-prominent {
|
|
3548
3566
|
background-color: var(--sky-theme-color-background-container-header-prominent);
|
|
3549
3567
|
}
|
|
@@ -3556,6 +3574,9 @@ em {
|
|
|
3556
3574
|
.sky-theme-color-text-inverse {
|
|
3557
3575
|
color: var(--sky-theme-color-text-inverse);
|
|
3558
3576
|
}
|
|
3577
|
+
.sky-theme-color-text-on_status {
|
|
3578
|
+
color: var(--sky-theme-color-text-on_status);
|
|
3579
|
+
}
|
|
3559
3580
|
.sky-theme-color-text-on_prominent {
|
|
3560
3581
|
color: var(--sky-theme-color-text-on_prominent);
|
|
3561
3582
|
}
|
|
@@ -3571,6 +3592,9 @@ em {
|
|
|
3571
3592
|
.sky-theme-color-icon-inverse {
|
|
3572
3593
|
color: var(--sky-theme-color-icon-inverse);
|
|
3573
3594
|
}
|
|
3595
|
+
.sky-theme-color-icon-on_status {
|
|
3596
|
+
color: var(--sky-theme-color-icon-on_status);
|
|
3597
|
+
}
|
|
3574
3598
|
.sky-theme-color-icon-on_prominent {
|
|
3575
3599
|
color: var(--sky-theme-color-icon-on_prominent-base);
|
|
3576
3600
|
}
|
|
@@ -402,15 +402,15 @@
|
|
|
402
402
|
--bb-font-weight-light: 300;
|
|
403
403
|
--bb-font-weight-regular: 400;
|
|
404
404
|
--bb-font-weight-semibold: 600;
|
|
405
|
-
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
406
|
-
--bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
407
|
-
--bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
408
|
-
--bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
409
|
-
--bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
410
|
-
--bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
411
|
-
--bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
412
|
-
--bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
413
|
-
--bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
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');
|
|
414
414
|
--bb-letter_spacing-normal: normal;
|
|
415
415
|
--bb-letter_spacing-wider: 0.01rem;
|
|
416
416
|
--bb-letter_spacing-widest: 0.046875rem;
|
|
@@ -500,15 +500,15 @@
|
|
|
500
500
|
--bb-shadow-heavy-black-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
|
|
501
501
|
--bb-shadow-heavy-black-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
|
|
502
502
|
--bb-shadow-heavy-black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
|
|
503
|
-
--bb-shadow-slate-100: 0 1px 3px 0 rgba(
|
|
504
|
-
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(
|
|
505
|
-
--bb-shadow-slate-200: 0 1px 8px 0 rgba(
|
|
506
|
-
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(
|
|
507
|
-
--bb-shadow-slate-25: 0 1px 1px 0 rgba(
|
|
508
|
-
--bb-shadow-slate-400: 0 2px 4px -1px rgba(
|
|
509
|
-
--bb-shadow-slate-50: 0 1px 1px 0 rgba(
|
|
510
|
-
--bb-shadow-slate-800: 0 5px 5px -3px rgba(
|
|
511
|
-
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(
|
|
503
|
+
--bb-shadow-slate-100: 0 1px 3px 0 rgba(33, 44, 63, 0.2), 0 2px 1px -1px rgba(33, 44, 63, 0.12), 0 1px 1px 0 rgba(33, 44, 63, 0.14);
|
|
504
|
+
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(33, 44, 63, 0.2), 0 6px 30px 5px rgba(33, 44, 63, 0.12), 0 16px 24px 2px rgba(33, 44, 63, 0.14);
|
|
505
|
+
--bb-shadow-slate-200: 0 1px 8px 0 rgba(33, 44, 63, 0.2), 0 3px 3px -2px rgba(33, 44, 63, 0.12), 0 3px 4px 0 rgba(33, 44, 63, 0.14);
|
|
506
|
+
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(33, 44, 63, 0.2), 0 9px 46px 8px rgba(33, 44, 63, 0.12), 0 24px 38px 3px rgba(33, 44, 63, 0.14);
|
|
507
|
+
--bb-shadow-slate-25: 0 1px 1px 0 rgba(33, 44, 63, 0.05);
|
|
508
|
+
--bb-shadow-slate-400: 0 2px 4px -1px rgba(33, 44, 63, 0.2), 0 1px 10px 0 rgba(33, 44, 63, 0.12), 0 4px 5px 0 rgba(33, 44, 63, 0.14);
|
|
509
|
+
--bb-shadow-slate-50: 0 1px 1px 0 rgba(33, 44, 63, 0.12), 0 1.5px 1px -1px rgba(33, 44, 63, 0.12);
|
|
510
|
+
--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);
|
|
511
|
+
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
|
|
512
512
|
--bb-shadow-steel-fusion-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
|
|
513
513
|
--bb-shadow-steel-fusion-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
|
|
514
514
|
--bb-shadow-steel-fusion-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
|
|
@@ -537,7 +537,7 @@
|
|
|
537
537
|
--bb-color-scrollbar-bb-dark-thumb: #51555c;
|
|
538
538
|
--bb-color-scrollbar-bb-dark-track: #1c2228;
|
|
539
539
|
}
|
|
540
|
-
.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-
|
|
540
|
+
.sky-theme-modern.sky-theme-brand-base:not(.sky-theme-mode-dark) {
|
|
541
541
|
--sky-brand-name: var(--bb-brand-name);
|
|
542
542
|
--sky-color-background-action-accent-active: var(--bb-color-blue-100);
|
|
543
543
|
--sky-color-background-action-accent-base: var(--bb-color-white);
|
|
@@ -576,6 +576,7 @@
|
|
|
576
576
|
--sky-color-background-container-header-prominent: var(--bb-color-slate-800);
|
|
577
577
|
--sky-color-background-container-info: var(--bb-color-blue-200);
|
|
578
578
|
--sky-color-background-container-menu: var(--bb-color-white);
|
|
579
|
+
--sky-color-background-container-prominent: var(--bb-color-slate-50);
|
|
579
580
|
--sky-color-background-container-success: var(--bb-color-green-200);
|
|
580
581
|
--sky-color-background-container-tooltip: var(--bb-color-gray-1000);
|
|
581
582
|
--sky-color-background-container-warning: var(--bb-color-yellow-200);
|
|
@@ -713,6 +714,7 @@
|
|
|
713
714
|
--sky-color-icon-inverse: var(--bb-color-white);
|
|
714
715
|
--sky-color-icon-on_prominent-base: var(--bb-color-white);
|
|
715
716
|
--sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
|
|
717
|
+
--sky-color-icon-on_status: var(--bb-color-white);
|
|
716
718
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
717
719
|
--sky-color-icon-success: var(--bb-color-green-600);
|
|
718
720
|
--sky-color-icon-warning: var(--bb-color-yellow-400);
|
|
@@ -728,6 +730,7 @@
|
|
|
728
730
|
--sky-color-text-heading: var(--bb-color-gray-1100);
|
|
729
731
|
--sky-color-text-inverse: var(--bb-color-white);
|
|
730
732
|
--sky-color-text-on_prominent: var(--bb-color-white);
|
|
733
|
+
--sky-color-text-on_status: var(--bb-color-gray-1000);
|
|
731
734
|
--sky-color-text-selected: var(--bb-color-blue-600);
|
|
732
735
|
--sky-color-viz-axis: var(--bb-color-gray-500);
|
|
733
736
|
--sky-color-viz-category-1: var(--bb-color-teal-500);
|
|
@@ -838,7 +841,7 @@
|
|
|
838
841
|
--sky-elevation-overlay-simple-100: var(--bb-shadow-gray-simple-400);
|
|
839
842
|
--sky-elevation-raised-100: var(--bb-shadow-gray-100);
|
|
840
843
|
}
|
|
841
|
-
:root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-
|
|
844
|
+
:root:has(body.sky-theme-modern.sky-theme-brand-base:not(.sky-theme-mode-dark)) {
|
|
842
845
|
--sky-color-scrollbar-thumb: var(--bb-color-scrollbar-base-light-thumb);
|
|
843
846
|
--sky-color-scrollbar-track: var(--bb-color-scrollbar-base-light-track);
|
|
844
847
|
}
|
|
@@ -880,6 +883,7 @@
|
|
|
880
883
|
--sky-color-background-container-header-prominent: var(--bb-color-slate-800);
|
|
881
884
|
--sky-color-background-container-info: var(--bb-color-blue-800);
|
|
882
885
|
--sky-color-background-container-menu: var(--bb-color-gray-900);
|
|
886
|
+
--sky-color-background-container-prominent: var(--bb-color-steel-gray-1125);
|
|
883
887
|
--sky-color-background-container-success: var(--bb-color-green-900);
|
|
884
888
|
--sky-color-background-container-tooltip: var(--bb-color-gray-25);
|
|
885
889
|
--sky-color-background-container-warning: var(--bb-color-yellow-800);
|
|
@@ -1016,6 +1020,7 @@
|
|
|
1016
1020
|
--sky-color-icon-inverse: var(--bb-color-gray-1100);
|
|
1017
1021
|
--sky-color-icon-on_prominent-base: var(--bb-color-white);
|
|
1018
1022
|
--sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
|
|
1023
|
+
--sky-color-icon-on_status: var(--bb-color-white);
|
|
1019
1024
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
1020
1025
|
--sky-color-icon-success: var(--bb-color-green-700);
|
|
1021
1026
|
--sky-color-icon-warning: var(--bb-color-yellow-600);
|
|
@@ -1031,6 +1036,7 @@
|
|
|
1031
1036
|
--sky-color-text-heading: var(--bb-color-gray-50);
|
|
1032
1037
|
--sky-color-text-inverse: var(--bb-color-gray-1100);
|
|
1033
1038
|
--sky-color-text-on_prominent: var(--bb-color-white);
|
|
1039
|
+
--sky-color-text-on_status: var(--bb-color-gray-1000);
|
|
1034
1040
|
--sky-color-text-selected: var(--bb-color-blue-400);
|
|
1035
1041
|
--sky-color-viz-axis: var(--bb-color-gray-600);
|
|
1036
1042
|
--sky-color-viz-category-1: var(--bb-color-teal-dark-600);
|
|
@@ -2004,6 +2010,7 @@
|
|
|
2004
2010
|
--sky-theme-color-background-container-dimmed: var(--sky-color-background-container-dimmed);
|
|
2005
2011
|
--sky-theme-color-background-container-header-prominent: var(--sky-color-background-container-header-prominent);
|
|
2006
2012
|
--sky-theme-color-background-container-info: var(--sky-color-background-container-info);
|
|
2013
|
+
--sky-theme-color-background-container-prominent: var(--sky-color-background-container-prominent);
|
|
2007
2014
|
--sky-theme-color-background-container-success: var(--sky-color-background-container-success);
|
|
2008
2015
|
--sky-theme-color-background-container-warning: var(--sky-color-background-container-warning);
|
|
2009
2016
|
--sky-theme-color-background-disabled: var(--sky-color-background-disabled);
|
|
@@ -2044,6 +2051,7 @@
|
|
|
2044
2051
|
--sky-theme-color-icon-inverse: var(--sky-color-icon-inverse);
|
|
2045
2052
|
--sky-theme-color-icon-on_prominent-base: var(--sky-color-icon-on_prominent-base);
|
|
2046
2053
|
--sky-theme-color-icon-on_prominent-disabled: var(--sky-color-icon-on_prominent-disabled);
|
|
2054
|
+
--sky-theme-color-icon-on_status: var(--sky-color-icon-on_status);
|
|
2047
2055
|
--sky-theme-color-icon-success: var(--sky-color-icon-success);
|
|
2048
2056
|
--sky-theme-color-text-action: var(--sky-color-text-action);
|
|
2049
2057
|
--sky-theme-color-text-action_contrast: var(--sky-color-text-action_contrast);
|
|
@@ -2052,6 +2060,7 @@
|
|
|
2052
2060
|
--sky-theme-color-text-heading: var(--sky-color-text-heading);
|
|
2053
2061
|
--sky-theme-color-text-inverse: var(--sky-color-text-inverse);
|
|
2054
2062
|
--sky-theme-color-text-on_prominent: var(--sky-color-text-on_prominent);
|
|
2063
|
+
--sky-theme-color-text-on_status: var(--sky-color-text-on_status);
|
|
2055
2064
|
--sky-theme-color-viz-axis: var(--sky-color-viz-axis);
|
|
2056
2065
|
--sky-theme-color-viz-category-1: var(--sky-color-viz-category-1);
|
|
2057
2066
|
--sky-theme-color-viz-category-2: var(--sky-color-viz-category-2);
|
|
@@ -2233,6 +2242,7 @@
|
|
|
2233
2242
|
--sky-theme-color-background-container-dimmed: #eeeeef;
|
|
2234
2243
|
--sky-theme-color-background-container-header-prominent: #32435e;
|
|
2235
2244
|
--sky-theme-color-background-container-info: #81d4f7;
|
|
2245
|
+
--sky-theme-color-background-container-prominent: #f6f8fa;
|
|
2236
2246
|
--sky-theme-color-background-container-success: #b7da9b;
|
|
2237
2247
|
--sky-theme-color-background-container-warning: #ffd597;
|
|
2238
2248
|
--sky-theme-color-background-disabled: #cdcfd2;
|
|
@@ -2273,6 +2283,7 @@
|
|
|
2273
2283
|
--sky-theme-color-icon-inverse: #ffffff;
|
|
2274
2284
|
--sky-theme-color-icon-on_prominent-base: #ffffff;
|
|
2275
2285
|
--sky-theme-color-icon-on_prominent-disabled: #686c73;
|
|
2286
|
+
--sky-theme-color-icon-on_status: #ffffff;
|
|
2276
2287
|
--sky-theme-color-icon-success: #72bf44;
|
|
2277
2288
|
--sky-theme-color-text-action: #0974a1;
|
|
2278
2289
|
--sky-theme-color-text-action_contrast: #0974a1;
|
|
@@ -2281,6 +2292,7 @@
|
|
|
2281
2292
|
--sky-theme-color-text-heading: #212327;
|
|
2282
2293
|
--sky-theme-color-text-inverse: #ffffff;
|
|
2283
2294
|
--sky-theme-color-text-on_prominent: #ffffff;
|
|
2295
|
+
--sky-theme-color-text-on_status: #212327;
|
|
2284
2296
|
--sky-theme-color-viz-axis: #85888d;
|
|
2285
2297
|
--sky-theme-color-viz-category-1: #06a39e;
|
|
2286
2298
|
--sky-theme-color-viz-category-2: #6d3c96;
|
|
@@ -2713,6 +2725,9 @@ em {
|
|
|
2713
2725
|
.sky-theme-color-background-container-backdrop {
|
|
2714
2726
|
background-color: var(--sky-theme-color-background-container-backdrop);
|
|
2715
2727
|
}
|
|
2728
|
+
.sky-theme-color-background-container-prominent {
|
|
2729
|
+
background-color: var(--sky-theme-color-background-container-prominent);
|
|
2730
|
+
}
|
|
2716
2731
|
.sky-theme-color-background-container-header-prominent {
|
|
2717
2732
|
background-color: var(--sky-theme-color-background-container-header-prominent);
|
|
2718
2733
|
}
|
|
@@ -2725,6 +2740,9 @@ em {
|
|
|
2725
2740
|
.sky-theme-color-text-inverse {
|
|
2726
2741
|
color: var(--sky-theme-color-text-inverse);
|
|
2727
2742
|
}
|
|
2743
|
+
.sky-theme-color-text-on_status {
|
|
2744
|
+
color: var(--sky-theme-color-text-on_status);
|
|
2745
|
+
}
|
|
2728
2746
|
.sky-theme-color-text-on_prominent {
|
|
2729
2747
|
color: var(--sky-theme-color-text-on_prominent);
|
|
2730
2748
|
}
|
|
@@ -2740,6 +2758,9 @@ em {
|
|
|
2740
2758
|
.sky-theme-color-icon-inverse {
|
|
2741
2759
|
color: var(--sky-theme-color-icon-inverse);
|
|
2742
2760
|
}
|
|
2761
|
+
.sky-theme-color-icon-on_status {
|
|
2762
|
+
color: var(--sky-theme-color-icon-on_status);
|
|
2763
|
+
}
|
|
2743
2764
|
.sky-theme-color-icon-on_prominent {
|
|
2744
2765
|
color: var(--sky-theme-color-icon-on_prominent-base);
|
|
2745
2766
|
}
|
package/bundles/blackbaud.css
CHANGED
|
@@ -402,15 +402,15 @@
|
|
|
402
402
|
--bb-font-weight-light: 300;
|
|
403
403
|
--bb-font-weight-regular: 400;
|
|
404
404
|
--bb-font-weight-semibold: 600;
|
|
405
|
-
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
406
|
-
--bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
407
|
-
--bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
408
|
-
--bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
409
|
-
--bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
410
|
-
--bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
411
|
-
--bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
412
|
-
--bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
413
|
-
--bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.
|
|
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');
|
|
414
414
|
--bb-letter_spacing-normal: normal;
|
|
415
415
|
--bb-letter_spacing-wider: 0.01rem;
|
|
416
416
|
--bb-letter_spacing-widest: 0.046875rem;
|
|
@@ -500,15 +500,15 @@
|
|
|
500
500
|
--bb-shadow-heavy-black-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
|
|
501
501
|
--bb-shadow-heavy-black-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
|
|
502
502
|
--bb-shadow-heavy-black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
|
|
503
|
-
--bb-shadow-slate-100: 0 1px 3px 0 rgba(
|
|
504
|
-
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(
|
|
505
|
-
--bb-shadow-slate-200: 0 1px 8px 0 rgba(
|
|
506
|
-
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(
|
|
507
|
-
--bb-shadow-slate-25: 0 1px 1px 0 rgba(
|
|
508
|
-
--bb-shadow-slate-400: 0 2px 4px -1px rgba(
|
|
509
|
-
--bb-shadow-slate-50: 0 1px 1px 0 rgba(
|
|
510
|
-
--bb-shadow-slate-800: 0 5px 5px -3px rgba(
|
|
511
|
-
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(
|
|
503
|
+
--bb-shadow-slate-100: 0 1px 3px 0 rgba(33, 44, 63, 0.2), 0 2px 1px -1px rgba(33, 44, 63, 0.12), 0 1px 1px 0 rgba(33, 44, 63, 0.14);
|
|
504
|
+
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(33, 44, 63, 0.2), 0 6px 30px 5px rgba(33, 44, 63, 0.12), 0 16px 24px 2px rgba(33, 44, 63, 0.14);
|
|
505
|
+
--bb-shadow-slate-200: 0 1px 8px 0 rgba(33, 44, 63, 0.2), 0 3px 3px -2px rgba(33, 44, 63, 0.12), 0 3px 4px 0 rgba(33, 44, 63, 0.14);
|
|
506
|
+
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(33, 44, 63, 0.2), 0 9px 46px 8px rgba(33, 44, 63, 0.12), 0 24px 38px 3px rgba(33, 44, 63, 0.14);
|
|
507
|
+
--bb-shadow-slate-25: 0 1px 1px 0 rgba(33, 44, 63, 0.05);
|
|
508
|
+
--bb-shadow-slate-400: 0 2px 4px -1px rgba(33, 44, 63, 0.2), 0 1px 10px 0 rgba(33, 44, 63, 0.12), 0 4px 5px 0 rgba(33, 44, 63, 0.14);
|
|
509
|
+
--bb-shadow-slate-50: 0 1px 1px 0 rgba(33, 44, 63, 0.12), 0 1.5px 1px -1px rgba(33, 44, 63, 0.12);
|
|
510
|
+
--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);
|
|
511
|
+
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
|
|
512
512
|
--bb-shadow-steel-fusion-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
|
|
513
513
|
--bb-shadow-steel-fusion-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
|
|
514
514
|
--bb-shadow-steel-fusion-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
|
|
@@ -537,7 +537,7 @@
|
|
|
537
537
|
--bb-color-scrollbar-bb-dark-thumb: #51555c;
|
|
538
538
|
--bb-color-scrollbar-bb-dark-track: #1c2228;
|
|
539
539
|
}
|
|
540
|
-
.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-
|
|
540
|
+
.sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud:not(.sky-theme-mode-dark) {
|
|
541
541
|
--sky-brand-name: var(--bb-brand-name);
|
|
542
542
|
--sky-color-background-action-accent-base: var(--bb-color-blue-25);
|
|
543
543
|
--sky-color-background-container-backdrop: var(--bb-color-slate-200);
|
|
@@ -651,6 +651,7 @@
|
|
|
651
651
|
--sky-color-background-container-header-prominent: var(--bb-color-slate-800);
|
|
652
652
|
--sky-color-background-container-info: var(--bb-color-blue-dark-400);
|
|
653
653
|
--sky-color-background-container-menu: var(--bb-color-steel-gray-900);
|
|
654
|
+
--sky-color-background-container-prominent: var(--bb-color-steel-gray-1125);
|
|
654
655
|
--sky-color-background-container-success: var(--bb-color-green-dark-400);
|
|
655
656
|
--sky-color-background-container-warning: var(--bb-color-yellow-dark-400);
|
|
656
657
|
--sky-color-background-disabled: var(--bb-color-gray-700);
|
|
@@ -787,10 +788,11 @@
|
|
|
787
788
|
--sky-color-icon-deemphasized: var(--bb-color-steel-gray-400);
|
|
788
789
|
--sky-color-icon-default: var(--bb-color-steel-gray-100);
|
|
789
790
|
--sky-color-icon-info: var(--bb-color-blue-dark-400);
|
|
790
|
-
--sky-color-icon-input-action: var(--bb-color-blue-
|
|
791
|
+
--sky-color-icon-input-action: var(--bb-color-oklch-blue-375);
|
|
791
792
|
--sky-color-icon-inverse: var(--bb-color-steel-gray-1100);
|
|
792
793
|
--sky-color-icon-on_prominent-base: var(--bb-color-white);
|
|
793
794
|
--sky-color-icon-on_prominent-disabled: var(--bb-color-gray-600);
|
|
795
|
+
--sky-color-icon-on_status: var(--bb-color-white);
|
|
794
796
|
--sky-color-icon-selected: var(--bb-color-blue-dark-300);
|
|
795
797
|
--sky-color-icon-success: var(--bb-color-green-dark-400);
|
|
796
798
|
--sky-color-icon-warning: var(--bb-color-yellow-dark-400);
|
|
@@ -806,6 +808,7 @@
|
|
|
806
808
|
--sky-color-text-heading: var(--bb-color-steel-gray-100);
|
|
807
809
|
--sky-color-text-inverse: var(--bb-color-steel-gray-1100);
|
|
808
810
|
--sky-color-text-on_prominent: var(--bb-color-white);
|
|
811
|
+
--sky-color-text-on_status: var(--bb-color-gray-1000);
|
|
809
812
|
--sky-color-text-selected: var(--bb-color-steel-gray-100);
|
|
810
813
|
--sky-image-select_icon-base: var(--bb-image-select_icon-bb-dark-src);
|
|
811
814
|
--sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-dark-src);
|
|
@@ -1378,6 +1378,17 @@
|
|
|
1378
1378
|
"type": "color-swatch"
|
|
1379
1379
|
}
|
|
1380
1380
|
},
|
|
1381
|
+
{
|
|
1382
|
+
"name": "Prominent container background",
|
|
1383
|
+
"className": "sky-theme-color-background-container-prominent",
|
|
1384
|
+
"description": "The background color for containers of tools that work alongside the main page content.",
|
|
1385
|
+
"properties": {
|
|
1386
|
+
"background-color": "var(--sky-theme-color-background-container-prominent)"
|
|
1387
|
+
},
|
|
1388
|
+
"demoMetadata": {
|
|
1389
|
+
"type": "color-swatch"
|
|
1390
|
+
}
|
|
1391
|
+
},
|
|
1381
1392
|
{
|
|
1382
1393
|
"name": "Prominent container header background",
|
|
1383
1394
|
"className": "sky-theme-color-background-container-header-prominent",
|
|
@@ -1446,6 +1457,18 @@
|
|
|
1446
1457
|
"background": "--sky-theme-color-background-icon_matte-info"
|
|
1447
1458
|
}
|
|
1448
1459
|
},
|
|
1460
|
+
{
|
|
1461
|
+
"name": "Text on status background",
|
|
1462
|
+
"className": "sky-theme-color-text-on_status",
|
|
1463
|
+
"description": "The color for text on status background colors.",
|
|
1464
|
+
"properties": {
|
|
1465
|
+
"color": "var(--sky-theme-color-text-on_status)"
|
|
1466
|
+
},
|
|
1467
|
+
"demoMetadata": {
|
|
1468
|
+
"type": "text-color",
|
|
1469
|
+
"background": "--sky-theme-color-background-container-success"
|
|
1470
|
+
}
|
|
1471
|
+
},
|
|
1449
1472
|
{
|
|
1450
1473
|
"name": "Prominent container header text",
|
|
1451
1474
|
"className": "sky-theme-color-text-on_prominent",
|
|
@@ -1511,7 +1534,19 @@
|
|
|
1511
1534
|
},
|
|
1512
1535
|
"demoMetadata": {
|
|
1513
1536
|
"type": "icon-color",
|
|
1514
|
-
"background": "--sky-theme-color-background-icon_matte-
|
|
1537
|
+
"background": "--sky-theme-color-background-icon_matte-action-heavy"
|
|
1538
|
+
}
|
|
1539
|
+
},
|
|
1540
|
+
{
|
|
1541
|
+
"name": "Icon on status matte",
|
|
1542
|
+
"className": "sky-theme-color-icon-on_status",
|
|
1543
|
+
"description": "The color for icons on status icon matte color backgrounds.",
|
|
1544
|
+
"properties": {
|
|
1545
|
+
"color": "var(--sky-theme-color-icon-on_status)"
|
|
1546
|
+
},
|
|
1547
|
+
"demoMetadata": {
|
|
1548
|
+
"type": "icon-color",
|
|
1549
|
+
"background": "--sky-theme-color-background-icon_matte-success"
|
|
1515
1550
|
}
|
|
1516
1551
|
},
|
|
1517
1552
|
{
|
|
@@ -1704,10 +1739,10 @@
|
|
|
1704
1739
|
},
|
|
1705
1740
|
{
|
|
1706
1741
|
"name": "Status icon mattes",
|
|
1707
|
-
"description": "Use status icon matte colors for small backgrounds behind icons that convey status or urgency.",
|
|
1742
|
+
"description": "Use status icon matte colors for small backgrounds behind icons that convey status or urgency. For foreground icons, use the icon on status matte color.",
|
|
1708
1743
|
"demoMetadata": {
|
|
1709
1744
|
"type": "icon-background-color",
|
|
1710
|
-
"color": "--sky-theme-color-icon-
|
|
1745
|
+
"color": "--sky-theme-color-icon-on_status"
|
|
1711
1746
|
},
|
|
1712
1747
|
"styles": [
|
|
1713
1748
|
{
|
|
@@ -1719,7 +1754,7 @@
|
|
|
1719
1754
|
},
|
|
1720
1755
|
"demoMetadata": {
|
|
1721
1756
|
"type": "icon-background-color",
|
|
1722
|
-
"color": "--sky-theme-color-icon-
|
|
1757
|
+
"color": "--sky-theme-color-icon-on_status"
|
|
1723
1758
|
}
|
|
1724
1759
|
},
|
|
1725
1760
|
{
|
|
@@ -1731,7 +1766,7 @@
|
|
|
1731
1766
|
},
|
|
1732
1767
|
"demoMetadata": {
|
|
1733
1768
|
"type": "icon-background-color",
|
|
1734
|
-
"color": "--sky-theme-color-icon-
|
|
1769
|
+
"color": "--sky-theme-color-icon-on_status"
|
|
1735
1770
|
}
|
|
1736
1771
|
},
|
|
1737
1772
|
{
|
|
@@ -1743,7 +1778,7 @@
|
|
|
1743
1778
|
},
|
|
1744
1779
|
"demoMetadata": {
|
|
1745
1780
|
"type": "icon-background-color",
|
|
1746
|
-
"color": "--sky-theme-color-icon-
|
|
1781
|
+
"color": "--sky-theme-color-icon-on_status"
|
|
1747
1782
|
}
|
|
1748
1783
|
},
|
|
1749
1784
|
{
|
|
@@ -2292,6 +2292,14 @@
|
|
|
2292
2292
|
"type": "color-swatch"
|
|
2293
2293
|
}
|
|
2294
2294
|
},
|
|
2295
|
+
{
|
|
2296
|
+
"name": "Prominent container background",
|
|
2297
|
+
"customProperty": "--sky-theme-color-background-container-prominent",
|
|
2298
|
+
"description": "The background color for containers of tools that work alongside the main page content.",
|
|
2299
|
+
"demoMetadata": {
|
|
2300
|
+
"type": "color-swatch"
|
|
2301
|
+
}
|
|
2302
|
+
},
|
|
2295
2303
|
{
|
|
2296
2304
|
"name": "Prominent container header background",
|
|
2297
2305
|
"customProperty": "--sky-theme-color-background-container-header-prominent",
|
|
@@ -2471,6 +2479,15 @@
|
|
|
2471
2479
|
"background": "--sky-theme-color-background-icon_matte-info"
|
|
2472
2480
|
}
|
|
2473
2481
|
},
|
|
2482
|
+
{
|
|
2483
|
+
"name": "Text on status background",
|
|
2484
|
+
"customProperty": "--sky-theme-color-text-on_status",
|
|
2485
|
+
"description": "The color for text on status background colors.",
|
|
2486
|
+
"demoMetadata": {
|
|
2487
|
+
"type": "text-color",
|
|
2488
|
+
"background": "--sky-theme-color-background-container-success"
|
|
2489
|
+
}
|
|
2490
|
+
},
|
|
2474
2491
|
{
|
|
2475
2492
|
"name": "Prominent container header text",
|
|
2476
2493
|
"customProperty": "--sky-theme-color-text-on_prominent",
|
|
@@ -2521,7 +2538,16 @@
|
|
|
2521
2538
|
"description": "The color for icons on heavy background colors, such as primary and danger button labels.",
|
|
2522
2539
|
"demoMetadata": {
|
|
2523
2540
|
"type": "icon-color",
|
|
2524
|
-
"background": "--sky-theme-color-background-icon_matte-
|
|
2541
|
+
"background": "--sky-theme-color-background-icon_matte-action-heavy"
|
|
2542
|
+
}
|
|
2543
|
+
},
|
|
2544
|
+
{
|
|
2545
|
+
"name": "Icon on status matte",
|
|
2546
|
+
"customProperty": "--sky-theme-color-icon-on_status",
|
|
2547
|
+
"description": "The color for foreground icons on status icon matte colors.",
|
|
2548
|
+
"demoMetadata": {
|
|
2549
|
+
"type": "icon-color",
|
|
2550
|
+
"background": "--sky-theme-color-background-icon_matte-success"
|
|
2525
2551
|
}
|
|
2526
2552
|
},
|
|
2527
2553
|
{
|
|
@@ -2731,10 +2757,10 @@
|
|
|
2731
2757
|
},
|
|
2732
2758
|
{
|
|
2733
2759
|
"groupName": "Status icon mattes",
|
|
2734
|
-
"description": "Use status icon matte colors for small backgrounds behind icons that convey status or urgency.",
|
|
2760
|
+
"description": "Use status icon matte colors for small backgrounds behind icons that convey status or urgency. For foreground icons, use the icon on status matte color.",
|
|
2735
2761
|
"demoMetadata": {
|
|
2736
2762
|
"type": "icon-background-color",
|
|
2737
|
-
"color": "--sky-theme-color-icon-
|
|
2763
|
+
"color": "--sky-theme-color-icon-on_status"
|
|
2738
2764
|
},
|
|
2739
2765
|
"tokens": [
|
|
2740
2766
|
{
|
|
@@ -2743,7 +2769,7 @@
|
|
|
2743
2769
|
"description": "The color for a small background behind an icon that conveys danger, error, or a critical warning.",
|
|
2744
2770
|
"demoMetadata": {
|
|
2745
2771
|
"type": "icon-background-color",
|
|
2746
|
-
"color": "--sky-theme-color-icon-
|
|
2772
|
+
"color": "--sky-theme-color-icon-on_status"
|
|
2747
2773
|
}
|
|
2748
2774
|
},
|
|
2749
2775
|
{
|
|
@@ -2752,7 +2778,7 @@
|
|
|
2752
2778
|
"description": "The color for a small background behind an icon that conveys important information, but no danger.",
|
|
2753
2779
|
"demoMetadata": {
|
|
2754
2780
|
"type": "icon-background-color",
|
|
2755
|
-
"color": "--sky-theme-color-icon-
|
|
2781
|
+
"color": "--sky-theme-color-icon-on_status"
|
|
2756
2782
|
}
|
|
2757
2783
|
},
|
|
2758
2784
|
{
|
|
@@ -2761,7 +2787,7 @@
|
|
|
2761
2787
|
"description": "The color for a small background behind an icon that conveys success or completion.",
|
|
2762
2788
|
"demoMetadata": {
|
|
2763
2789
|
"type": "icon-background-color",
|
|
2764
|
-
"color": "--sky-theme-color-icon-
|
|
2790
|
+
"color": "--sky-theme-color-icon-on_status"
|
|
2765
2791
|
}
|
|
2766
2792
|
},
|
|
2767
2793
|
{
|
|
@@ -2770,7 +2796,7 @@
|
|
|
2770
2796
|
"description": "The color for a small background behind an icon that conveys warning or caution.",
|
|
2771
2797
|
"demoMetadata": {
|
|
2772
2798
|
"type": "icon-background-color",
|
|
2773
|
-
"color": "--sky-theme-color-icon-
|
|
2799
|
+
"color": "--sky-theme-color-icon-on_status"
|
|
2774
2800
|
}
|
|
2775
2801
|
}
|
|
2776
2802
|
]
|
package/bundles/public-api.css
CHANGED
|
@@ -114,6 +114,7 @@
|
|
|
114
114
|
--sky-theme-color-background-container-dimmed: var(--sky-color-background-container-dimmed);
|
|
115
115
|
--sky-theme-color-background-container-header-prominent: var(--sky-color-background-container-header-prominent);
|
|
116
116
|
--sky-theme-color-background-container-info: var(--sky-color-background-container-info);
|
|
117
|
+
--sky-theme-color-background-container-prominent: var(--sky-color-background-container-prominent);
|
|
117
118
|
--sky-theme-color-background-container-success: var(--sky-color-background-container-success);
|
|
118
119
|
--sky-theme-color-background-container-warning: var(--sky-color-background-container-warning);
|
|
119
120
|
--sky-theme-color-background-disabled: var(--sky-color-background-disabled);
|
|
@@ -154,6 +155,7 @@
|
|
|
154
155
|
--sky-theme-color-icon-inverse: var(--sky-color-icon-inverse);
|
|
155
156
|
--sky-theme-color-icon-on_prominent-base: var(--sky-color-icon-on_prominent-base);
|
|
156
157
|
--sky-theme-color-icon-on_prominent-disabled: var(--sky-color-icon-on_prominent-disabled);
|
|
158
|
+
--sky-theme-color-icon-on_status: var(--sky-color-icon-on_status);
|
|
157
159
|
--sky-theme-color-icon-success: var(--sky-color-icon-success);
|
|
158
160
|
--sky-theme-color-text-action: var(--sky-color-text-action);
|
|
159
161
|
--sky-theme-color-text-action_contrast: var(--sky-color-text-action_contrast);
|
|
@@ -162,6 +164,7 @@
|
|
|
162
164
|
--sky-theme-color-text-heading: var(--sky-color-text-heading);
|
|
163
165
|
--sky-theme-color-text-inverse: var(--sky-color-text-inverse);
|
|
164
166
|
--sky-theme-color-text-on_prominent: var(--sky-color-text-on_prominent);
|
|
167
|
+
--sky-theme-color-text-on_status: var(--sky-color-text-on_status);
|
|
165
168
|
--sky-theme-color-viz-axis: var(--sky-color-viz-axis);
|
|
166
169
|
--sky-theme-color-viz-category-1: var(--sky-color-viz-category-1);
|
|
167
170
|
--sky-theme-color-viz-category-2: var(--sky-color-viz-category-2);
|
|
@@ -343,6 +346,7 @@
|
|
|
343
346
|
--sky-theme-color-background-container-dimmed: #eeeeef;
|
|
344
347
|
--sky-theme-color-background-container-header-prominent: #32435e;
|
|
345
348
|
--sky-theme-color-background-container-info: #81d4f7;
|
|
349
|
+
--sky-theme-color-background-container-prominent: #f6f8fa;
|
|
346
350
|
--sky-theme-color-background-container-success: #b7da9b;
|
|
347
351
|
--sky-theme-color-background-container-warning: #ffd597;
|
|
348
352
|
--sky-theme-color-background-disabled: #cdcfd2;
|
|
@@ -383,6 +387,7 @@
|
|
|
383
387
|
--sky-theme-color-icon-inverse: #ffffff;
|
|
384
388
|
--sky-theme-color-icon-on_prominent-base: #ffffff;
|
|
385
389
|
--sky-theme-color-icon-on_prominent-disabled: #686c73;
|
|
390
|
+
--sky-theme-color-icon-on_status: #ffffff;
|
|
386
391
|
--sky-theme-color-icon-success: #72bf44;
|
|
387
392
|
--sky-theme-color-text-action: #0974a1;
|
|
388
393
|
--sky-theme-color-text-action_contrast: #0974a1;
|
|
@@ -391,6 +396,7 @@
|
|
|
391
396
|
--sky-theme-color-text-heading: #212327;
|
|
392
397
|
--sky-theme-color-text-inverse: #ffffff;
|
|
393
398
|
--sky-theme-color-text-on_prominent: #ffffff;
|
|
399
|
+
--sky-theme-color-text-on_status: #212327;
|
|
394
400
|
--sky-theme-color-viz-axis: #85888d;
|
|
395
401
|
--sky-theme-color-viz-category-1: #06a39e;
|
|
396
402
|
--sky-theme-color-viz-category-2: #6d3c96;
|
|
@@ -823,6 +829,9 @@ em {
|
|
|
823
829
|
.sky-theme-color-background-container-backdrop {
|
|
824
830
|
background-color: var(--sky-theme-color-background-container-backdrop);
|
|
825
831
|
}
|
|
832
|
+
.sky-theme-color-background-container-prominent {
|
|
833
|
+
background-color: var(--sky-theme-color-background-container-prominent);
|
|
834
|
+
}
|
|
826
835
|
.sky-theme-color-background-container-header-prominent {
|
|
827
836
|
background-color: var(--sky-theme-color-background-container-header-prominent);
|
|
828
837
|
}
|
|
@@ -835,6 +844,9 @@ em {
|
|
|
835
844
|
.sky-theme-color-text-inverse {
|
|
836
845
|
color: var(--sky-theme-color-text-inverse);
|
|
837
846
|
}
|
|
847
|
+
.sky-theme-color-text-on_status {
|
|
848
|
+
color: var(--sky-theme-color-text-on_status);
|
|
849
|
+
}
|
|
838
850
|
.sky-theme-color-text-on_prominent {
|
|
839
851
|
color: var(--sky-theme-color-text-on_prominent);
|
|
840
852
|
}
|
|
@@ -850,6 +862,9 @@ em {
|
|
|
850
862
|
.sky-theme-color-icon-inverse {
|
|
851
863
|
color: var(--sky-theme-color-icon-inverse);
|
|
852
864
|
}
|
|
865
|
+
.sky-theme-color-icon-on_status {
|
|
866
|
+
color: var(--sky-theme-color-icon-on_status);
|
|
867
|
+
}
|
|
853
868
|
.sky-theme-color-icon-on_prominent {
|
|
854
869
|
color: var(--sky-theme-color-icon-on_prominent-base);
|
|
855
870
|
}
|