@blackbaud/skyux-design-tokens 0.0.60 → 0.0.62

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 CHANGED
@@ -2,6 +2,25 @@
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.62](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.61...0.0.62) (2025-06-06)
6
+
7
+
8
+ ### Features
9
+
10
+ * adjust search inset spacing and add search offset tokens ([#185](https://github.com/blackbaud/skyux-design-tokens/issues/185)) ([e95b417](https://github.com/blackbaud/skyux-design-tokens/commit/e95b4176b51964de01cafb4029527fb426ff8b39))
11
+
12
+ ## [0.0.61](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.60...0.0.61) (2025-06-06)
13
+
14
+
15
+ ### Features
16
+
17
+ * 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))
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * 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))
23
+
5
24
  ## [0.0.60](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.59...0.0.60) (2025-06-05)
6
25
 
7
26
 
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.
@@ -256,79 +256,7 @@
256
256
  --sky-space-inset-letterbox-top-s: var(--bb-size-fluid-25);
257
257
  --sky-type-body-m: var(--bb-font-size-100) sans-serif;
258
258
  }
259
- @media (min-width: 768px) {
260
259
  .sky-theme-modern.sky-theme-brand-base {
261
- --sky-comp-modal-fullscreen-space-offset-bottom: var(--bb-size-fixed-75);
262
- --sky-comp-modal-fullscreen-space-offset-left: var(--bb-size-fixed-75);
263
- --sky-comp-modal-fullscreen-space-offset-right: var(--bb-size-fixed-75);
264
- --sky-comp-modal-fullscreen-space-offset-top: var(--bb-size-fixed-75);
265
- --sky-comp-modal-space-offset-bottom: var(--bb-size-fixed-100);
266
- --sky-comp-modal-space-offset-left: var(--bb-size-fixed-100);
267
- --sky-comp-modal-space-offset-right: var(--bb-size-fixed-100);
268
- --sky-comp-modal-space-offset-top: var(--bb-size-fixed-100);
269
- --sky-comp-page-content-blocks-space-inset-bottom: var(--bb-size-fluid-150);
270
- --sky-comp-page-content-blocks-space-inset-left: var(--bb-size-fluid-150);
271
- --sky-comp-page-content-blocks-space-inset-right: var(--bb-size-fluid-150);
272
- --sky-comp-page-content-blocks-space-inset-top: var(--bb-size-fluid-150);
273
- --sky-comp-page-content-fit-space-inset-bottom: var(--bb-size-0);
274
- --sky-comp-page-content-fit-space-inset-left: var(--bb-size-fluid-150);
275
- --sky-comp-page-content-fit-space-inset-right: var(--bb-size-fluid-150);
276
- --sky-comp-page-content-fit-space-inset-top: var(--bb-size-0);
277
- --sky-comp-page-content-list-space-inset-bottom: var(--bb-size-0);
278
- --sky-comp-page-content-list-space-inset-left: var(--bb-size-fluid-150);
279
- --sky-comp-page-content-list-space-inset-right: var(--bb-size-fluid-150);
280
- --sky-comp-page-content-list-space-inset-top: var(--bb-size-0);
281
- --sky-comp-page-content-tabs-space-inset-bottom: var(--bb-size-0);
282
- --sky-comp-page-content-tabs-space-inset-left: var(--bb-size-0);
283
- --sky-comp-page-content-tabs-space-inset-right: var(--bb-size-0);
284
- --sky-comp-page-content-tabs-space-inset-top: var(--bb-size-0);
285
- --sky-comp-page-header-blocks-space-inset-bottom: var(--bb-size-0);
286
- --sky-comp-page-header-blocks-space-inset-left: var(--bb-size-fluid-150);
287
- --sky-comp-page-header-blocks-space-inset-right: var(--bb-size-fluid-150);
288
- --sky-comp-page-header-blocks-space-inset-top: var(--bb-size-fluid-150);
289
- --sky-comp-page-header-fit-space-inset-bottom: var(--bb-size-fluid-100);
290
- --sky-comp-page-header-fit-space-inset-left: var(--bb-size-fluid-150);
291
- --sky-comp-page-header-fit-space-inset-right: var(--bb-size-fluid-150);
292
- --sky-comp-page-header-fit-space-inset-top: var(--bb-size-fluid-150);
293
- --sky-comp-page-header-list-space-inset-bottom: var(--bb-size-fluid-100);
294
- --sky-comp-page-header-list-space-inset-left: var(--bb-size-fluid-150);
295
- --sky-comp-page-header-list-space-inset-right: var(--bb-size-fluid-150);
296
- --sky-comp-page-header-list-space-inset-top: var(--bb-size-fluid-150);
297
- --sky-comp-page-header-tabs-space-inset-bottom: var(--bb-size-fluid-100);
298
- --sky-comp-page-header-tabs-space-inset-left: var(--bb-size-fluid-150);
299
- --sky-comp-page-header-tabs-space-inset-right: var(--bb-size-fluid-150);
300
- --sky-comp-page-header-tabs-space-inset-top: var(--bb-size-fluid-150);
301
- --sky-comp-page-links-blocks-space-inset-bottom: var(--bb-size-fluid-150);
302
- --sky-comp-page-links-blocks-space-inset-left: var(--bb-size-fluid-150);
303
- --sky-comp-page-links-blocks-space-inset-right: var(--bb-size-fluid-150);
304
- --sky-comp-page-links-blocks-space-inset-top: var(--bb-size-fluid-150);
305
- --sky-comp-page-links-list-space-inset-bottom: var(--bb-size-fluid-150);
306
- --sky-comp-page-links-list-space-inset-left: var(--bb-size-fluid-150);
307
- --sky-comp-page-links-list-space-inset-right: var(--bb-size-fluid-150);
308
- --sky-comp-page-links-list-space-inset-top: var(--bb-size-fluid-150);
309
- --sky-comp-page-links-tabs-space-inset-bottom: var(--bb-size-fluid-150);
310
- --sky-comp-page-links-tabs-space-inset-left: var(--bb-size-fluid-150);
311
- --sky-comp-page-links-tabs-space-inset-right: var(--bb-size-fluid-150);
312
- --sky-comp-page-links-tabs-space-inset-top: var(--bb-size-fluid-150);
313
- --sky-comp-page-tabset-tabs-space-inset-bottom: var(--bb-size-0);
314
- --sky-comp-page-tabset-tabs-space-inset-left: var(--bb-size-fluid-150);
315
- --sky-comp-page-tabset-tabs-space-inset-right: var(--bb-size-0);
316
- --sky-comp-page-tabset-tabs-space-inset-top: var(--bb-size-0);
317
- --sky-comp-search-space-inset-bottom: var(--bb-size-fluid-50);
318
- --sky-comp-search-space-inset-left: var(--bb-size-fluid-50);
319
- --sky-comp-search-space-inset-right: var(--bb-size-fluid-50);
320
- --sky-comp-search-space-inset-top: var(--bb-size-fluid-50);
321
- --sky-comp-tile-dashboard-column-space-inset-bottom: var(--bb-size-0);
322
- --sky-comp-tile-dashboard-column-space-inset-left: var(--bb-size-fluid-75);
323
- --sky-comp-tile-dashboard-column-space-inset-right: var(--bb-size-fluid-75);
324
- --sky-comp-tile-dashboard-column-space-inset-top: var(--bb-size-0);
325
- --sky-comp-tile-dashboard-space-inset-bottom: var(--bb-size-0);
326
- --sky-comp-tile-dashboard-space-inset-left: var(--bb-size-fluid-50);
327
- --sky-comp-tile-dashboard-space-inset-right: var(--bb-size-fluid-50);
328
- --sky-comp-tile-dashboard-space-inset-top: var(--bb-size-0);
329
- }
330
-
331
- }.sky-theme-modern.sky-theme-brand-base {
332
260
  --sky-color-background-action-danger-active: var(--bb-color-red-600);
333
261
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
334
262
  --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
@@ -734,9 +662,13 @@
734
662
  --sky-comp-sab-summary-inline-space-inset-right: var(--bb-size-fluid-150);
735
663
  --sky-comp-sab-summary-inline-space-inset-top: var(--bb-size-fluid-50);
736
664
  --sky-comp-search-space-inset-bottom: var(--bb-size-fluid-50);
737
- --sky-comp-search-space-inset-left: var(--bb-size-fluid-100);
738
- --sky-comp-search-space-inset-right: var(--bb-size-fluid-100);
665
+ --sky-comp-search-space-inset-left: var(--bb-size-fluid-50);
666
+ --sky-comp-search-space-inset-right: var(--bb-size-fluid-50);
739
667
  --sky-comp-search-space-inset-top: var(--bb-size-fluid-50);
668
+ --sky-comp-search-space-offset-bottom: var(--bb-size-fluid-25);
669
+ --sky-comp-search-space-offset-left: var(--bb-size-fluid-25);
670
+ --sky-comp-search-space-offset-right: var(--bb-size-fluid-25);
671
+ --sky-comp-search-space-offset-top: var(--bb-size-fluid-25);
740
672
  --sky-comp-selection_box-collapsed-space-inset-bottom: var(--bb-size-fluid-75);
741
673
  --sky-comp-selection_box-collapsed-space-inset-left: var(--bb-size-fluid-75);
742
674
  --sky-comp-selection_box-collapsed-space-inset-right: var(--bb-size-fluid-75);
@@ -1128,3 +1060,75 @@
1128
1060
  --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/var(--sky-font-line_height-hint-s) var(--sky-font-family-primary);
1129
1061
  --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);
1130
1062
  }
1063
+ @media (min-width: 768px) {
1064
+ .sky-theme-modern.sky-theme-brand-base {
1065
+ --sky-comp-modal-fullscreen-space-offset-bottom: var(--bb-size-fixed-75);
1066
+ --sky-comp-modal-fullscreen-space-offset-left: var(--bb-size-fixed-75);
1067
+ --sky-comp-modal-fullscreen-space-offset-right: var(--bb-size-fixed-75);
1068
+ --sky-comp-modal-fullscreen-space-offset-top: var(--bb-size-fixed-75);
1069
+ --sky-comp-modal-space-offset-bottom: var(--bb-size-fixed-100);
1070
+ --sky-comp-modal-space-offset-left: var(--bb-size-fixed-100);
1071
+ --sky-comp-modal-space-offset-right: var(--bb-size-fixed-100);
1072
+ --sky-comp-modal-space-offset-top: var(--bb-size-fixed-100);
1073
+ --sky-comp-page-content-blocks-space-inset-bottom: var(--bb-size-fluid-150);
1074
+ --sky-comp-page-content-blocks-space-inset-left: var(--bb-size-fluid-150);
1075
+ --sky-comp-page-content-blocks-space-inset-right: var(--bb-size-fluid-150);
1076
+ --sky-comp-page-content-blocks-space-inset-top: var(--bb-size-fluid-150);
1077
+ --sky-comp-page-content-fit-space-inset-bottom: var(--bb-size-0);
1078
+ --sky-comp-page-content-fit-space-inset-left: var(--bb-size-fluid-150);
1079
+ --sky-comp-page-content-fit-space-inset-right: var(--bb-size-fluid-150);
1080
+ --sky-comp-page-content-fit-space-inset-top: var(--bb-size-0);
1081
+ --sky-comp-page-content-list-space-inset-bottom: var(--bb-size-0);
1082
+ --sky-comp-page-content-list-space-inset-left: var(--bb-size-fluid-150);
1083
+ --sky-comp-page-content-list-space-inset-right: var(--bb-size-fluid-150);
1084
+ --sky-comp-page-content-list-space-inset-top: var(--bb-size-0);
1085
+ --sky-comp-page-content-tabs-space-inset-bottom: var(--bb-size-0);
1086
+ --sky-comp-page-content-tabs-space-inset-left: var(--bb-size-0);
1087
+ --sky-comp-page-content-tabs-space-inset-right: var(--bb-size-0);
1088
+ --sky-comp-page-content-tabs-space-inset-top: var(--bb-size-0);
1089
+ --sky-comp-page-header-blocks-space-inset-bottom: var(--bb-size-0);
1090
+ --sky-comp-page-header-blocks-space-inset-left: var(--bb-size-fluid-150);
1091
+ --sky-comp-page-header-blocks-space-inset-right: var(--bb-size-fluid-150);
1092
+ --sky-comp-page-header-blocks-space-inset-top: var(--bb-size-fluid-150);
1093
+ --sky-comp-page-header-fit-space-inset-bottom: var(--bb-size-fluid-100);
1094
+ --sky-comp-page-header-fit-space-inset-left: var(--bb-size-fluid-150);
1095
+ --sky-comp-page-header-fit-space-inset-right: var(--bb-size-fluid-150);
1096
+ --sky-comp-page-header-fit-space-inset-top: var(--bb-size-fluid-150);
1097
+ --sky-comp-page-header-list-space-inset-bottom: var(--bb-size-fluid-100);
1098
+ --sky-comp-page-header-list-space-inset-left: var(--bb-size-fluid-150);
1099
+ --sky-comp-page-header-list-space-inset-right: var(--bb-size-fluid-150);
1100
+ --sky-comp-page-header-list-space-inset-top: var(--bb-size-fluid-150);
1101
+ --sky-comp-page-header-tabs-space-inset-bottom: var(--bb-size-fluid-100);
1102
+ --sky-comp-page-header-tabs-space-inset-left: var(--bb-size-fluid-150);
1103
+ --sky-comp-page-header-tabs-space-inset-right: var(--bb-size-fluid-150);
1104
+ --sky-comp-page-header-tabs-space-inset-top: var(--bb-size-fluid-150);
1105
+ --sky-comp-page-links-blocks-space-inset-bottom: var(--bb-size-fluid-150);
1106
+ --sky-comp-page-links-blocks-space-inset-left: var(--bb-size-fluid-150);
1107
+ --sky-comp-page-links-blocks-space-inset-right: var(--bb-size-fluid-150);
1108
+ --sky-comp-page-links-blocks-space-inset-top: var(--bb-size-fluid-150);
1109
+ --sky-comp-page-links-list-space-inset-bottom: var(--bb-size-fluid-150);
1110
+ --sky-comp-page-links-list-space-inset-left: var(--bb-size-fluid-150);
1111
+ --sky-comp-page-links-list-space-inset-right: var(--bb-size-fluid-150);
1112
+ --sky-comp-page-links-list-space-inset-top: var(--bb-size-fluid-150);
1113
+ --sky-comp-page-links-tabs-space-inset-bottom: var(--bb-size-fluid-150);
1114
+ --sky-comp-page-links-tabs-space-inset-left: var(--bb-size-fluid-150);
1115
+ --sky-comp-page-links-tabs-space-inset-right: var(--bb-size-fluid-150);
1116
+ --sky-comp-page-links-tabs-space-inset-top: var(--bb-size-fluid-150);
1117
+ --sky-comp-page-tabset-tabs-space-inset-bottom: var(--bb-size-0);
1118
+ --sky-comp-page-tabset-tabs-space-inset-left: var(--bb-size-fluid-150);
1119
+ --sky-comp-page-tabset-tabs-space-inset-right: var(--bb-size-0);
1120
+ --sky-comp-page-tabset-tabs-space-inset-top: var(--bb-size-0);
1121
+ --sky-comp-search-space-inset-bottom: var(--bb-size-fluid-50);
1122
+ --sky-comp-search-space-inset-left: var(--bb-size-fluid-50);
1123
+ --sky-comp-search-space-inset-right: var(--bb-size-fluid-50);
1124
+ --sky-comp-search-space-inset-top: var(--bb-size-fluid-50);
1125
+ --sky-comp-tile-dashboard-column-space-inset-bottom: var(--bb-size-0);
1126
+ --sky-comp-tile-dashboard-column-space-inset-left: var(--bb-size-fluid-75);
1127
+ --sky-comp-tile-dashboard-column-space-inset-right: var(--bb-size-fluid-75);
1128
+ --sky-comp-tile-dashboard-column-space-inset-top: var(--bb-size-0);
1129
+ --sky-comp-tile-dashboard-space-inset-bottom: var(--bb-size-0);
1130
+ --sky-comp-tile-dashboard-space-inset-left: var(--bb-size-fluid-50);
1131
+ --sky-comp-tile-dashboard-space-inset-right: var(--bb-size-fluid-50);
1132
+ --sky-comp-tile-dashboard-space-inset-top: var(--bb-size-0);
1133
+ }
1134
+ }
@@ -128,79 +128,7 @@
128
128
  --modern-shadow-size-4: 0 1px 12px 0 var(--modern-color-shadow_color);
129
129
  --modern-shadow-size-8: 0 2px 15px 2px var(--modern-color-shadow_color);
130
130
  }
131
- @media (min-width: 768px) {
132
131
  .sky-theme-modern {
133
- --sky-comp-modal-fullscreen-space-offset-bottom: var(--modern-size-15);
134
- --sky-comp-modal-fullscreen-space-offset-left: var(--modern-size-15);
135
- --sky-comp-modal-fullscreen-space-offset-right: var(--modern-size-15);
136
- --sky-comp-modal-fullscreen-space-offset-top: var(--modern-size-15);
137
- --sky-comp-modal-space-offset-bottom: var(--modern-size-20);
138
- --sky-comp-modal-space-offset-left: var(--modern-size-20);
139
- --sky-comp-modal-space-offset-right: var(--modern-size-20);
140
- --sky-comp-modal-space-offset-top: var(--modern-size-20);
141
- --sky-comp-page-content-blocks-space-inset-bottom: var(--modern-space-xl);
142
- --sky-comp-page-content-blocks-space-inset-left: var(--modern-space-xl);
143
- --sky-comp-page-content-blocks-space-inset-right: var(--modern-space-xl);
144
- --sky-comp-page-content-blocks-space-inset-top: var(--modern-space-xl);
145
- --sky-comp-page-content-fit-space-inset-bottom: var(--modern-size-0);
146
- --sky-comp-page-content-fit-space-inset-left: var(--modern-space-xl);
147
- --sky-comp-page-content-fit-space-inset-right: var(--modern-space-xl);
148
- --sky-comp-page-content-fit-space-inset-top: var(--modern-size-0);
149
- --sky-comp-page-content-list-space-inset-bottom: var(--modern-size-0);
150
- --sky-comp-page-content-list-space-inset-left: var(--modern-space-xl);
151
- --sky-comp-page-content-list-space-inset-right: var(--modern-space-xl);
152
- --sky-comp-page-content-list-space-inset-top: var(--modern-size-0);
153
- --sky-comp-page-content-tabs-space-inset-bottom: var(--modern-size-0);
154
- --sky-comp-page-content-tabs-space-inset-left: var(--modern-size-0);
155
- --sky-comp-page-content-tabs-space-inset-right: var(--modern-size-0);
156
- --sky-comp-page-content-tabs-space-inset-top: var(--modern-size-0);
157
- --sky-comp-page-header-blocks-space-inset-bottom: var(--modern-space-xl);
158
- --sky-comp-page-header-blocks-space-inset-left: var(--modern-space-xl);
159
- --sky-comp-page-header-blocks-space-inset-right: var(--modern-space-xl);
160
- --sky-comp-page-header-blocks-space-inset-top: var(--modern-space-xl);
161
- --sky-comp-page-header-fit-space-inset-bottom: var(--modern-space-lg);
162
- --sky-comp-page-header-fit-space-inset-left: var(--modern-space-xl);
163
- --sky-comp-page-header-fit-space-inset-right: var(--modern-space-xl);
164
- --sky-comp-page-header-fit-space-inset-top: var(--modern-space-xl);
165
- --sky-comp-page-header-list-space-inset-bottom: var(--modern-space-lg);
166
- --sky-comp-page-header-list-space-inset-left: var(--modern-space-xl);
167
- --sky-comp-page-header-list-space-inset-right: var(--modern-space-xl);
168
- --sky-comp-page-header-list-space-inset-top: var(--modern-space-xl);
169
- --sky-comp-page-header-tabs-space-inset-bottom: var(--modern-space-lg);
170
- --sky-comp-page-header-tabs-space-inset-left: var(--modern-space-xl);
171
- --sky-comp-page-header-tabs-space-inset-right: var(--modern-space-xl);
172
- --sky-comp-page-header-tabs-space-inset-top: var(--modern-space-xl);
173
- --sky-comp-page-links-blocks-space-inset-bottom: var(--modern-space-xl);
174
- --sky-comp-page-links-blocks-space-inset-left: var(--modern-space-xl);
175
- --sky-comp-page-links-blocks-space-inset-right: var(--modern-space-xl);
176
- --sky-comp-page-links-blocks-space-inset-top: var(--modern-space-xl);
177
- --sky-comp-page-links-list-space-inset-bottom: var(--modern-space-xl);
178
- --sky-comp-page-links-list-space-inset-left: var(--modern-space-xl);
179
- --sky-comp-page-links-list-space-inset-right: var(--modern-space-xl);
180
- --sky-comp-page-links-list-space-inset-top: var(--modern-space-xl);
181
- --sky-comp-page-links-tabs-space-inset-bottom: var(--modern-space-xl);
182
- --sky-comp-page-links-tabs-space-inset-left: var(--modern-space-xl);
183
- --sky-comp-page-links-tabs-space-inset-right: var(--modern-space-xl);
184
- --sky-comp-page-links-tabs-space-inset-top: var(--modern-space-xl);
185
- --sky-comp-page-tabset-tabs-space-inset-bottom: var(--modern-size-0);
186
- --sky-comp-page-tabset-tabs-space-inset-left: var(--modern-space-xl);
187
- --sky-comp-page-tabset-tabs-space-inset-right: var(--modern-size-0);
188
- --sky-comp-page-tabset-tabs-space-inset-top: var(--modern-size-0);
189
- --sky-comp-search-space-inset-bottom: var(--modern-space-s);
190
- --sky-comp-search-space-inset-left: var(--modern-space-s);
191
- --sky-comp-search-space-inset-right: var(--modern-space-s);
192
- --sky-comp-search-space-inset-top: var(--modern-space-s);
193
- --sky-comp-tile-dashboard-column-space-inset-bottom: var(--modern-size-0);
194
- --sky-comp-tile-dashboard-column-space-inset-left: var(--modern-space-md);
195
- --sky-comp-tile-dashboard-column-space-inset-right: var(--modern-space-md);
196
- --sky-comp-tile-dashboard-column-space-inset-top: var(--modern-size-0);
197
- --sky-comp-tile-dashboard-space-inset-bottom: var(--modern-size-0);
198
- --sky-comp-tile-dashboard-space-inset-left: var(--modern-space-s);
199
- --sky-comp-tile-dashboard-space-inset-right: var(--modern-space-s);
200
- --sky-comp-tile-dashboard-space-inset-top: var(--modern-size-0);
201
- }
202
-
203
- }.sky-theme-modern {
204
132
  --sky-color-background-action-danger-active: var(--modern-color-red-70);
205
133
  --sky-color-background-action-danger-base: var(--modern-color-red-70);
206
134
  --sky-color-background-action-danger-disabled: var(--modern-color-gray-07);
@@ -605,9 +533,13 @@
605
533
  --sky-comp-sab-summary-inline-space-inset-right: var(--modern-size-30);
606
534
  --sky-comp-sab-summary-inline-space-inset-top: var(--modern-size-10);
607
535
  --sky-comp-search-space-inset-bottom: var(--modern-size-10);
608
- --sky-comp-search-space-inset-left: var(--modern-size-20);
609
- --sky-comp-search-space-inset-right: var(--modern-size-20);
536
+ --sky-comp-search-space-inset-left: var(--modern-size-10);
537
+ --sky-comp-search-space-inset-right: var(--modern-size-10);
610
538
  --sky-comp-search-space-inset-top: var(--modern-size-10);
539
+ --sky-comp-search-space-offset-bottom: var(--modern-size-5);
540
+ --sky-comp-search-space-offset-left: var(--modern-size-5);
541
+ --sky-comp-search-space-offset-right: var(--modern-size-5);
542
+ --sky-comp-search-space-offset-top: var(--modern-size-5);
611
543
  --sky-comp-selection_box-collapsed-space-inset-bottom: var(--modern-space-md);
612
544
  --sky-comp-selection_box-collapsed-space-inset-left: var(--modern-space-md);
613
545
  --sky-comp-selection_box-collapsed-space-inset-right: var(--modern-space-md);
@@ -984,3 +916,75 @@
984
916
  --sky-font-family-primary: var(--modern-font-blkb_sans-family);
985
917
  --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
986
918
  }
919
+ @media (min-width: 768px) {
920
+ .sky-theme-modern {
921
+ --sky-comp-modal-fullscreen-space-offset-bottom: var(--modern-size-15);
922
+ --sky-comp-modal-fullscreen-space-offset-left: var(--modern-size-15);
923
+ --sky-comp-modal-fullscreen-space-offset-right: var(--modern-size-15);
924
+ --sky-comp-modal-fullscreen-space-offset-top: var(--modern-size-15);
925
+ --sky-comp-modal-space-offset-bottom: var(--modern-size-20);
926
+ --sky-comp-modal-space-offset-left: var(--modern-size-20);
927
+ --sky-comp-modal-space-offset-right: var(--modern-size-20);
928
+ --sky-comp-modal-space-offset-top: var(--modern-size-20);
929
+ --sky-comp-page-content-blocks-space-inset-bottom: var(--modern-space-xl);
930
+ --sky-comp-page-content-blocks-space-inset-left: var(--modern-space-xl);
931
+ --sky-comp-page-content-blocks-space-inset-right: var(--modern-space-xl);
932
+ --sky-comp-page-content-blocks-space-inset-top: var(--modern-space-xl);
933
+ --sky-comp-page-content-fit-space-inset-bottom: var(--modern-size-0);
934
+ --sky-comp-page-content-fit-space-inset-left: var(--modern-space-xl);
935
+ --sky-comp-page-content-fit-space-inset-right: var(--modern-space-xl);
936
+ --sky-comp-page-content-fit-space-inset-top: var(--modern-size-0);
937
+ --sky-comp-page-content-list-space-inset-bottom: var(--modern-size-0);
938
+ --sky-comp-page-content-list-space-inset-left: var(--modern-space-xl);
939
+ --sky-comp-page-content-list-space-inset-right: var(--modern-space-xl);
940
+ --sky-comp-page-content-list-space-inset-top: var(--modern-size-0);
941
+ --sky-comp-page-content-tabs-space-inset-bottom: var(--modern-size-0);
942
+ --sky-comp-page-content-tabs-space-inset-left: var(--modern-size-0);
943
+ --sky-comp-page-content-tabs-space-inset-right: var(--modern-size-0);
944
+ --sky-comp-page-content-tabs-space-inset-top: var(--modern-size-0);
945
+ --sky-comp-page-header-blocks-space-inset-bottom: var(--modern-space-xl);
946
+ --sky-comp-page-header-blocks-space-inset-left: var(--modern-space-xl);
947
+ --sky-comp-page-header-blocks-space-inset-right: var(--modern-space-xl);
948
+ --sky-comp-page-header-blocks-space-inset-top: var(--modern-space-xl);
949
+ --sky-comp-page-header-fit-space-inset-bottom: var(--modern-space-lg);
950
+ --sky-comp-page-header-fit-space-inset-left: var(--modern-space-xl);
951
+ --sky-comp-page-header-fit-space-inset-right: var(--modern-space-xl);
952
+ --sky-comp-page-header-fit-space-inset-top: var(--modern-space-xl);
953
+ --sky-comp-page-header-list-space-inset-bottom: var(--modern-space-lg);
954
+ --sky-comp-page-header-list-space-inset-left: var(--modern-space-xl);
955
+ --sky-comp-page-header-list-space-inset-right: var(--modern-space-xl);
956
+ --sky-comp-page-header-list-space-inset-top: var(--modern-space-xl);
957
+ --sky-comp-page-header-tabs-space-inset-bottom: var(--modern-space-lg);
958
+ --sky-comp-page-header-tabs-space-inset-left: var(--modern-space-xl);
959
+ --sky-comp-page-header-tabs-space-inset-right: var(--modern-space-xl);
960
+ --sky-comp-page-header-tabs-space-inset-top: var(--modern-space-xl);
961
+ --sky-comp-page-links-blocks-space-inset-bottom: var(--modern-space-xl);
962
+ --sky-comp-page-links-blocks-space-inset-left: var(--modern-space-xl);
963
+ --sky-comp-page-links-blocks-space-inset-right: var(--modern-space-xl);
964
+ --sky-comp-page-links-blocks-space-inset-top: var(--modern-space-xl);
965
+ --sky-comp-page-links-list-space-inset-bottom: var(--modern-space-xl);
966
+ --sky-comp-page-links-list-space-inset-left: var(--modern-space-xl);
967
+ --sky-comp-page-links-list-space-inset-right: var(--modern-space-xl);
968
+ --sky-comp-page-links-list-space-inset-top: var(--modern-space-xl);
969
+ --sky-comp-page-links-tabs-space-inset-bottom: var(--modern-space-xl);
970
+ --sky-comp-page-links-tabs-space-inset-left: var(--modern-space-xl);
971
+ --sky-comp-page-links-tabs-space-inset-right: var(--modern-space-xl);
972
+ --sky-comp-page-links-tabs-space-inset-top: var(--modern-space-xl);
973
+ --sky-comp-page-tabset-tabs-space-inset-bottom: var(--modern-size-0);
974
+ --sky-comp-page-tabset-tabs-space-inset-left: var(--modern-space-xl);
975
+ --sky-comp-page-tabset-tabs-space-inset-right: var(--modern-size-0);
976
+ --sky-comp-page-tabset-tabs-space-inset-top: var(--modern-size-0);
977
+ --sky-comp-search-space-inset-bottom: var(--modern-space-s);
978
+ --sky-comp-search-space-inset-left: var(--modern-space-s);
979
+ --sky-comp-search-space-inset-right: var(--modern-space-s);
980
+ --sky-comp-search-space-inset-top: var(--modern-space-s);
981
+ --sky-comp-tile-dashboard-column-space-inset-bottom: var(--modern-size-0);
982
+ --sky-comp-tile-dashboard-column-space-inset-left: var(--modern-space-md);
983
+ --sky-comp-tile-dashboard-column-space-inset-right: var(--modern-space-md);
984
+ --sky-comp-tile-dashboard-column-space-inset-top: var(--modern-size-0);
985
+ --sky-comp-tile-dashboard-space-inset-bottom: var(--modern-size-0);
986
+ --sky-comp-tile-dashboard-space-inset-left: var(--modern-space-s);
987
+ --sky-comp-tile-dashboard-space-inset-right: var(--modern-space-s);
988
+ --sky-comp-tile-dashboard-space-inset-top: var(--modern-size-0);
989
+ }
990
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.60",
3
+ "version": "0.0.62",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",