@blackbaud/skyux-design-tokens 0.0.59 → 0.0.61
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 +25 -0
- package/README.md +4 -0
- package/assets/scss/blackbaud.css +73 -2
- package/assets/scss/modern.css +73 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,31 @@
|
|
|
2
2
|
|
|
3
3
|
- Added `neutral-medium-dark` token in modern. [#64](https://github.com/blackbaud/skyux-design-tokens/pull/64)
|
|
4
4
|
|
|
5
|
+
## [0.0.61](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.60...0.0.61) (2025-06-06)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* enable adding CSS to local preview ([#182](https://github.com/blackbaud/skyux-design-tokens/issues/182)) ([d2bd141](https://github.com/blackbaud/skyux-design-tokens/commit/d2bd14166d7cfdf50da43363cfb5868c8579b065))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* css output orders media queries based on breakpoint order ([#184](https://github.com/blackbaud/skyux-design-tokens/issues/184)) ([1d47a49](https://github.com/blackbaud/skyux-design-tokens/commit/1d47a497ec65c4129a2f290ec72c97b815da3db4))
|
|
16
|
+
|
|
17
|
+
## [0.0.60](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.59...0.0.60) (2025-06-05)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* remove border separator dark ([#178](https://github.com/blackbaud/skyux-design-tokens/issues/178)) ([f36e60c](https://github.com/blackbaud/skyux-design-tokens/commit/f36e60c5931c6e068541bfdbd92bc63060219008))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### Bug Fixes
|
|
26
|
+
|
|
27
|
+
* configure reference token set breakpoints ([#181](https://github.com/blackbaud/skyux-design-tokens/issues/181)) ([87f6df6](https://github.com/blackbaud/skyux-design-tokens/commit/87f6df667ee6ae0d2d236277e3940c3a02dcb8da))
|
|
28
|
+
* toaster component token specifies a bottom value ([#180](https://github.com/blackbaud/skyux-design-tokens/issues/180)) ([06c9310](https://github.com/blackbaud/skyux-design-tokens/commit/06c9310eb5ebd5e0562c0d2951003751e75dfc25))
|
|
29
|
+
|
|
5
30
|
## [0.0.59](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.58...0.0.59) (2025-05-30)
|
|
6
31
|
|
|
7
32
|
|
package/README.md
CHANGED
|
@@ -19,3 +19,7 @@ To create these result files locally, clone this repository, run `npm install` a
|
|
|
19
19
|
## Updating snapshot tests
|
|
20
20
|
|
|
21
21
|
If you see a test failure that indicates the test is "obsolete," it means that the outputted tokens have changed and the snapshot test failed. To update the snapshot, run `vitest run --update` and review the changes to the snapshot file to ensure they are all expected. If you do not have `vitest` installed, run `npm i -g vitest`.
|
|
22
|
+
|
|
23
|
+
## Testing CSS with local preview
|
|
24
|
+
|
|
25
|
+
To add CSS to any SPA you are locally previewing, create a file `src/dev/extra-styles.css`. `:ng-deep`, `:host`, and SCSS syntax will not work in this file.
|
|
@@ -358,7 +358,6 @@
|
|
|
358
358
|
--sky-color-border-progress_step: var(--bb-color-gray-400);
|
|
359
359
|
--sky-color-border-selected: var(--bb-color-blue-600);
|
|
360
360
|
--sky-color-border-selected_soft: var(--bb-color-blue-300);
|
|
361
|
-
--sky-color-border-separator-dark: var(--bb-color-gray-100);
|
|
362
361
|
--sky-color-border-separator-light: var(--bb-color-gray-50);
|
|
363
362
|
--sky-color-border-separator-row: var(--bb-color-gray-50);
|
|
364
363
|
--sky-color-border-success: var(--bb-color-green-700);
|
|
@@ -734,7 +733,7 @@
|
|
|
734
733
|
--sky-comp-toast-space-inset-left: var(--bb-size-fluid-75);
|
|
735
734
|
--sky-comp-toast-space-inset-right: var(--bb-size-fluid-75);
|
|
736
735
|
--sky-comp-toast-space-inset-top: var(--bb-size-fluid-75);
|
|
737
|
-
--sky-comp-toaster-space-inset-bottom: var(--bb-size-
|
|
736
|
+
--sky-comp-toaster-space-inset-bottom: var(--bb-size-fluid-150);
|
|
738
737
|
--sky-comp-toaster-space-inset-left: var(--bb-size-fluid-150);
|
|
739
738
|
--sky-comp-toaster-space-inset-right: var(--bb-size-fluid-150);
|
|
740
739
|
--sky-comp-toaster-space-inset-top: var(--bb-size-fluid-150);
|
|
@@ -1057,3 +1056,75 @@
|
|
|
1057
1056
|
--sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/var(--sky-font-line_height-hint-s) var(--sky-font-family-primary);
|
|
1058
1057
|
--sky-type-input-label: var(--sky-font-style-input-label) var(--sky-font-size-input-label)/var(--sky-font-line_height-input-label) var(--sky-font-family-primary);
|
|
1059
1058
|
}
|
|
1059
|
+
@media (min-width: 768px) {
|
|
1060
|
+
.sky-theme-modern.sky-theme-brand-base {
|
|
1061
|
+
--sky-comp-modal-fullscreen-space-offset-bottom: var(--bb-size-fixed-75);
|
|
1062
|
+
--sky-comp-modal-fullscreen-space-offset-left: var(--bb-size-fixed-75);
|
|
1063
|
+
--sky-comp-modal-fullscreen-space-offset-right: var(--bb-size-fixed-75);
|
|
1064
|
+
--sky-comp-modal-fullscreen-space-offset-top: var(--bb-size-fixed-75);
|
|
1065
|
+
--sky-comp-modal-space-offset-bottom: var(--bb-size-fixed-100);
|
|
1066
|
+
--sky-comp-modal-space-offset-left: var(--bb-size-fixed-100);
|
|
1067
|
+
--sky-comp-modal-space-offset-right: var(--bb-size-fixed-100);
|
|
1068
|
+
--sky-comp-modal-space-offset-top: var(--bb-size-fixed-100);
|
|
1069
|
+
--sky-comp-page-content-blocks-space-inset-bottom: var(--bb-size-fluid-150);
|
|
1070
|
+
--sky-comp-page-content-blocks-space-inset-left: var(--bb-size-fluid-150);
|
|
1071
|
+
--sky-comp-page-content-blocks-space-inset-right: var(--bb-size-fluid-150);
|
|
1072
|
+
--sky-comp-page-content-blocks-space-inset-top: var(--bb-size-fluid-150);
|
|
1073
|
+
--sky-comp-page-content-fit-space-inset-bottom: var(--bb-size-0);
|
|
1074
|
+
--sky-comp-page-content-fit-space-inset-left: var(--bb-size-fluid-150);
|
|
1075
|
+
--sky-comp-page-content-fit-space-inset-right: var(--bb-size-fluid-150);
|
|
1076
|
+
--sky-comp-page-content-fit-space-inset-top: var(--bb-size-0);
|
|
1077
|
+
--sky-comp-page-content-list-space-inset-bottom: var(--bb-size-0);
|
|
1078
|
+
--sky-comp-page-content-list-space-inset-left: var(--bb-size-fluid-150);
|
|
1079
|
+
--sky-comp-page-content-list-space-inset-right: var(--bb-size-fluid-150);
|
|
1080
|
+
--sky-comp-page-content-list-space-inset-top: var(--bb-size-0);
|
|
1081
|
+
--sky-comp-page-content-tabs-space-inset-bottom: var(--bb-size-0);
|
|
1082
|
+
--sky-comp-page-content-tabs-space-inset-left: var(--bb-size-0);
|
|
1083
|
+
--sky-comp-page-content-tabs-space-inset-right: var(--bb-size-0);
|
|
1084
|
+
--sky-comp-page-content-tabs-space-inset-top: var(--bb-size-0);
|
|
1085
|
+
--sky-comp-page-header-blocks-space-inset-bottom: var(--bb-size-0);
|
|
1086
|
+
--sky-comp-page-header-blocks-space-inset-left: var(--bb-size-fluid-150);
|
|
1087
|
+
--sky-comp-page-header-blocks-space-inset-right: var(--bb-size-fluid-150);
|
|
1088
|
+
--sky-comp-page-header-blocks-space-inset-top: var(--bb-size-fluid-150);
|
|
1089
|
+
--sky-comp-page-header-fit-space-inset-bottom: var(--bb-size-fluid-100);
|
|
1090
|
+
--sky-comp-page-header-fit-space-inset-left: var(--bb-size-fluid-150);
|
|
1091
|
+
--sky-comp-page-header-fit-space-inset-right: var(--bb-size-fluid-150);
|
|
1092
|
+
--sky-comp-page-header-fit-space-inset-top: var(--bb-size-fluid-150);
|
|
1093
|
+
--sky-comp-page-header-list-space-inset-bottom: var(--bb-size-fluid-100);
|
|
1094
|
+
--sky-comp-page-header-list-space-inset-left: var(--bb-size-fluid-150);
|
|
1095
|
+
--sky-comp-page-header-list-space-inset-right: var(--bb-size-fluid-150);
|
|
1096
|
+
--sky-comp-page-header-list-space-inset-top: var(--bb-size-fluid-150);
|
|
1097
|
+
--sky-comp-page-header-tabs-space-inset-bottom: var(--bb-size-fluid-100);
|
|
1098
|
+
--sky-comp-page-header-tabs-space-inset-left: var(--bb-size-fluid-150);
|
|
1099
|
+
--sky-comp-page-header-tabs-space-inset-right: var(--bb-size-fluid-150);
|
|
1100
|
+
--sky-comp-page-header-tabs-space-inset-top: var(--bb-size-fluid-150);
|
|
1101
|
+
--sky-comp-page-links-blocks-space-inset-bottom: var(--bb-size-fluid-150);
|
|
1102
|
+
--sky-comp-page-links-blocks-space-inset-left: var(--bb-size-fluid-150);
|
|
1103
|
+
--sky-comp-page-links-blocks-space-inset-right: var(--bb-size-fluid-150);
|
|
1104
|
+
--sky-comp-page-links-blocks-space-inset-top: var(--bb-size-fluid-150);
|
|
1105
|
+
--sky-comp-page-links-list-space-inset-bottom: var(--bb-size-fluid-150);
|
|
1106
|
+
--sky-comp-page-links-list-space-inset-left: var(--bb-size-fluid-150);
|
|
1107
|
+
--sky-comp-page-links-list-space-inset-right: var(--bb-size-fluid-150);
|
|
1108
|
+
--sky-comp-page-links-list-space-inset-top: var(--bb-size-fluid-150);
|
|
1109
|
+
--sky-comp-page-links-tabs-space-inset-bottom: var(--bb-size-fluid-150);
|
|
1110
|
+
--sky-comp-page-links-tabs-space-inset-left: var(--bb-size-fluid-150);
|
|
1111
|
+
--sky-comp-page-links-tabs-space-inset-right: var(--bb-size-fluid-150);
|
|
1112
|
+
--sky-comp-page-links-tabs-space-inset-top: var(--bb-size-fluid-150);
|
|
1113
|
+
--sky-comp-page-tabset-tabs-space-inset-bottom: var(--bb-size-0);
|
|
1114
|
+
--sky-comp-page-tabset-tabs-space-inset-left: var(--bb-size-fluid-150);
|
|
1115
|
+
--sky-comp-page-tabset-tabs-space-inset-right: var(--bb-size-0);
|
|
1116
|
+
--sky-comp-page-tabset-tabs-space-inset-top: var(--bb-size-0);
|
|
1117
|
+
--sky-comp-search-space-inset-bottom: var(--bb-size-fluid-50);
|
|
1118
|
+
--sky-comp-search-space-inset-left: var(--bb-size-fluid-50);
|
|
1119
|
+
--sky-comp-search-space-inset-right: var(--bb-size-fluid-50);
|
|
1120
|
+
--sky-comp-search-space-inset-top: var(--bb-size-fluid-50);
|
|
1121
|
+
--sky-comp-tile-dashboard-column-space-inset-bottom: var(--bb-size-0);
|
|
1122
|
+
--sky-comp-tile-dashboard-column-space-inset-left: var(--bb-size-fluid-75);
|
|
1123
|
+
--sky-comp-tile-dashboard-column-space-inset-right: var(--bb-size-fluid-75);
|
|
1124
|
+
--sky-comp-tile-dashboard-column-space-inset-top: var(--bb-size-0);
|
|
1125
|
+
--sky-comp-tile-dashboard-space-inset-bottom: var(--bb-size-0);
|
|
1126
|
+
--sky-comp-tile-dashboard-space-inset-left: var(--bb-size-fluid-50);
|
|
1127
|
+
--sky-comp-tile-dashboard-space-inset-right: var(--bb-size-fluid-50);
|
|
1128
|
+
--sky-comp-tile-dashboard-space-inset-top: var(--bb-size-0);
|
|
1129
|
+
}
|
|
1130
|
+
}
|
package/assets/scss/modern.css
CHANGED
|
@@ -230,7 +230,6 @@
|
|
|
230
230
|
--sky-color-border-progress_step: var(--modern-color-gray-50);
|
|
231
231
|
--sky-color-border-selected: var(--modern-color-blue-74);
|
|
232
232
|
--sky-color-border-selected_soft: var(--modern-color-blue-30);
|
|
233
|
-
--sky-color-border-separator-dark: var(--modern-color-gray-20);
|
|
234
233
|
--sky-color-border-separator-light: var(--modern-color-gray-10);
|
|
235
234
|
--sky-color-border-separator-row: var(--modern-color-gray-20);
|
|
236
235
|
--sky-color-border-success: var(--modern-color-green-50);
|
|
@@ -605,7 +604,7 @@
|
|
|
605
604
|
--sky-comp-toast-space-inset-left: var(--modern-size-15);
|
|
606
605
|
--sky-comp-toast-space-inset-right: var(--modern-size-15);
|
|
607
606
|
--sky-comp-toast-space-inset-top: var(--modern-size-15);
|
|
608
|
-
--sky-comp-toaster-space-inset-bottom: var(--modern-size-
|
|
607
|
+
--sky-comp-toaster-space-inset-bottom: var(--modern-size-30);
|
|
609
608
|
--sky-comp-toaster-space-inset-left: var(--modern-size-30);
|
|
610
609
|
--sky-comp-toaster-space-inset-right: var(--modern-size-30);
|
|
611
610
|
--sky-comp-toaster-space-inset-top: var(--modern-size-30);
|
|
@@ -913,3 +912,75 @@
|
|
|
913
912
|
--sky-font-family-primary: var(--modern-font-blkb_sans-family);
|
|
914
913
|
--sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
|
|
915
914
|
}
|
|
915
|
+
@media (min-width: 768px) {
|
|
916
|
+
.sky-theme-modern {
|
|
917
|
+
--sky-comp-modal-fullscreen-space-offset-bottom: var(--modern-size-15);
|
|
918
|
+
--sky-comp-modal-fullscreen-space-offset-left: var(--modern-size-15);
|
|
919
|
+
--sky-comp-modal-fullscreen-space-offset-right: var(--modern-size-15);
|
|
920
|
+
--sky-comp-modal-fullscreen-space-offset-top: var(--modern-size-15);
|
|
921
|
+
--sky-comp-modal-space-offset-bottom: var(--modern-size-20);
|
|
922
|
+
--sky-comp-modal-space-offset-left: var(--modern-size-20);
|
|
923
|
+
--sky-comp-modal-space-offset-right: var(--modern-size-20);
|
|
924
|
+
--sky-comp-modal-space-offset-top: var(--modern-size-20);
|
|
925
|
+
--sky-comp-page-content-blocks-space-inset-bottom: var(--modern-space-xl);
|
|
926
|
+
--sky-comp-page-content-blocks-space-inset-left: var(--modern-space-xl);
|
|
927
|
+
--sky-comp-page-content-blocks-space-inset-right: var(--modern-space-xl);
|
|
928
|
+
--sky-comp-page-content-blocks-space-inset-top: var(--modern-space-xl);
|
|
929
|
+
--sky-comp-page-content-fit-space-inset-bottom: var(--modern-size-0);
|
|
930
|
+
--sky-comp-page-content-fit-space-inset-left: var(--modern-space-xl);
|
|
931
|
+
--sky-comp-page-content-fit-space-inset-right: var(--modern-space-xl);
|
|
932
|
+
--sky-comp-page-content-fit-space-inset-top: var(--modern-size-0);
|
|
933
|
+
--sky-comp-page-content-list-space-inset-bottom: var(--modern-size-0);
|
|
934
|
+
--sky-comp-page-content-list-space-inset-left: var(--modern-space-xl);
|
|
935
|
+
--sky-comp-page-content-list-space-inset-right: var(--modern-space-xl);
|
|
936
|
+
--sky-comp-page-content-list-space-inset-top: var(--modern-size-0);
|
|
937
|
+
--sky-comp-page-content-tabs-space-inset-bottom: var(--modern-size-0);
|
|
938
|
+
--sky-comp-page-content-tabs-space-inset-left: var(--modern-size-0);
|
|
939
|
+
--sky-comp-page-content-tabs-space-inset-right: var(--modern-size-0);
|
|
940
|
+
--sky-comp-page-content-tabs-space-inset-top: var(--modern-size-0);
|
|
941
|
+
--sky-comp-page-header-blocks-space-inset-bottom: var(--modern-space-xl);
|
|
942
|
+
--sky-comp-page-header-blocks-space-inset-left: var(--modern-space-xl);
|
|
943
|
+
--sky-comp-page-header-blocks-space-inset-right: var(--modern-space-xl);
|
|
944
|
+
--sky-comp-page-header-blocks-space-inset-top: var(--modern-space-xl);
|
|
945
|
+
--sky-comp-page-header-fit-space-inset-bottom: var(--modern-space-lg);
|
|
946
|
+
--sky-comp-page-header-fit-space-inset-left: var(--modern-space-xl);
|
|
947
|
+
--sky-comp-page-header-fit-space-inset-right: var(--modern-space-xl);
|
|
948
|
+
--sky-comp-page-header-fit-space-inset-top: var(--modern-space-xl);
|
|
949
|
+
--sky-comp-page-header-list-space-inset-bottom: var(--modern-space-lg);
|
|
950
|
+
--sky-comp-page-header-list-space-inset-left: var(--modern-space-xl);
|
|
951
|
+
--sky-comp-page-header-list-space-inset-right: var(--modern-space-xl);
|
|
952
|
+
--sky-comp-page-header-list-space-inset-top: var(--modern-space-xl);
|
|
953
|
+
--sky-comp-page-header-tabs-space-inset-bottom: var(--modern-space-lg);
|
|
954
|
+
--sky-comp-page-header-tabs-space-inset-left: var(--modern-space-xl);
|
|
955
|
+
--sky-comp-page-header-tabs-space-inset-right: var(--modern-space-xl);
|
|
956
|
+
--sky-comp-page-header-tabs-space-inset-top: var(--modern-space-xl);
|
|
957
|
+
--sky-comp-page-links-blocks-space-inset-bottom: var(--modern-space-xl);
|
|
958
|
+
--sky-comp-page-links-blocks-space-inset-left: var(--modern-space-xl);
|
|
959
|
+
--sky-comp-page-links-blocks-space-inset-right: var(--modern-space-xl);
|
|
960
|
+
--sky-comp-page-links-blocks-space-inset-top: var(--modern-space-xl);
|
|
961
|
+
--sky-comp-page-links-list-space-inset-bottom: var(--modern-space-xl);
|
|
962
|
+
--sky-comp-page-links-list-space-inset-left: var(--modern-space-xl);
|
|
963
|
+
--sky-comp-page-links-list-space-inset-right: var(--modern-space-xl);
|
|
964
|
+
--sky-comp-page-links-list-space-inset-top: var(--modern-space-xl);
|
|
965
|
+
--sky-comp-page-links-tabs-space-inset-bottom: var(--modern-space-xl);
|
|
966
|
+
--sky-comp-page-links-tabs-space-inset-left: var(--modern-space-xl);
|
|
967
|
+
--sky-comp-page-links-tabs-space-inset-right: var(--modern-space-xl);
|
|
968
|
+
--sky-comp-page-links-tabs-space-inset-top: var(--modern-space-xl);
|
|
969
|
+
--sky-comp-page-tabset-tabs-space-inset-bottom: var(--modern-size-0);
|
|
970
|
+
--sky-comp-page-tabset-tabs-space-inset-left: var(--modern-space-xl);
|
|
971
|
+
--sky-comp-page-tabset-tabs-space-inset-right: var(--modern-size-0);
|
|
972
|
+
--sky-comp-page-tabset-tabs-space-inset-top: var(--modern-size-0);
|
|
973
|
+
--sky-comp-search-space-inset-bottom: var(--modern-space-s);
|
|
974
|
+
--sky-comp-search-space-inset-left: var(--modern-space-s);
|
|
975
|
+
--sky-comp-search-space-inset-right: var(--modern-space-s);
|
|
976
|
+
--sky-comp-search-space-inset-top: var(--modern-space-s);
|
|
977
|
+
--sky-comp-tile-dashboard-column-space-inset-bottom: var(--modern-size-0);
|
|
978
|
+
--sky-comp-tile-dashboard-column-space-inset-left: var(--modern-space-md);
|
|
979
|
+
--sky-comp-tile-dashboard-column-space-inset-right: var(--modern-space-md);
|
|
980
|
+
--sky-comp-tile-dashboard-column-space-inset-top: var(--modern-size-0);
|
|
981
|
+
--sky-comp-tile-dashboard-space-inset-bottom: var(--modern-size-0);
|
|
982
|
+
--sky-comp-tile-dashboard-space-inset-left: var(--modern-space-s);
|
|
983
|
+
--sky-comp-tile-dashboard-space-inset-right: var(--modern-space-s);
|
|
984
|
+
--sky-comp-tile-dashboard-space-inset-top: var(--modern-size-0);
|
|
985
|
+
}
|
|
986
|
+
}
|