@blackbaud/skyux-design-tokens 0.0.62 → 0.0.64
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 +16 -0
- package/assets/scss/blackbaud.css +231 -21
- package/assets/scss/modern.css +86 -2
- package/bundles/design-tokens.global.min.js +7 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,22 @@
|
|
|
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.64](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.63...0.0.64) (2025-06-17)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add vertical tab content spacing ([#190](https://github.com/blackbaud/skyux-design-tokens/issues/190)) ([5a385c5](https://github.com/blackbaud/skyux-design-tokens/commit/5a385c54f7245cafa376db444a9750bb06c65dfb))
|
|
11
|
+
* initial dark mode tokens ([#191](https://github.com/blackbaud/skyux-design-tokens/issues/191)) ([bc5706e](https://github.com/blackbaud/skyux-design-tokens/commit/bc5706e11e3bc49b82a02f15c38ed524451d42a3))
|
|
12
|
+
* support container breakpoints ([#193](https://github.com/blackbaud/skyux-design-tokens/issues/193)) ([0daf995](https://github.com/blackbaud/skyux-design-tokens/commit/0daf995aead6b9cb7d392f2b100d774a92986e3d))
|
|
13
|
+
|
|
14
|
+
## [0.0.63](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.62...0.0.63) (2025-06-10)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* modern blocks page header has no bottom padding ([#187](https://github.com/blackbaud/skyux-design-tokens/issues/187)) ([ce8961f](https://github.com/blackbaud/skyux-design-tokens/commit/ce8961f61267cc2d75306480ac5e9ef9fedeb0a1))
|
|
20
|
+
|
|
5
21
|
## [0.0.62](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.61...0.0.62) (2025-06-06)
|
|
6
22
|
|
|
7
23
|
|
|
@@ -216,26 +216,6 @@
|
|
|
216
216
|
--bb-color-gradient-blue: linear-gradient( var(--bb-color-blue-500), var(--bb-color-blue-700));
|
|
217
217
|
--bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
|
|
218
218
|
}
|
|
219
|
-
.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
|
|
220
|
-
--sky-color-background-action: var(--bb-color-blue-800);
|
|
221
|
-
--sky-color-background-container: var(--bb-color-gray-900);
|
|
222
|
-
--sky-color-background-page: var(--bb-color-gray-1100);
|
|
223
|
-
--sky-color-border-input-active: var(--bb-color-blue-300);
|
|
224
|
-
--sky-color-border-input-base: var(--bb-color-gray-600);
|
|
225
|
-
--sky-color-border-input-disabled: var(--bb-color-gray-600);
|
|
226
|
-
--sky-color-border-input-error: var(--bb-color-red-600);
|
|
227
|
-
--sky-color-border-input-focus: var(--bb-color-blue-300);
|
|
228
|
-
--sky-color-border-input-hover: var(--bb-color-blue-300);
|
|
229
|
-
--sky-color-border-neutral_soft: var(--bb-color-gray-600);
|
|
230
|
-
--sky-color-icon-action: var(--bb-color-blue-300);
|
|
231
|
-
--sky-color-icon-inverse: var(--bb-color-black);
|
|
232
|
-
--sky-color-text-action: var(--bb-color-blue-300);
|
|
233
|
-
--sky-color-text-danger: var(--bb-color-red-600);
|
|
234
|
-
--sky-color-text-deemphasized: var(--bb-color-gray-200);
|
|
235
|
-
--sky-color-text-default: var(--bb-color-gray-25);
|
|
236
|
-
--sky-color-text-heading: var(--bb-color-green-600);
|
|
237
|
-
--sky-color-text-inverse: var(--bb-color-black);
|
|
238
|
-
}
|
|
239
219
|
.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-compact {
|
|
240
220
|
--sky-size-icon-xl: var(--bb-size-fluid-125);
|
|
241
221
|
--sky-space-inset-balanced-l: var(--bb-size-fluid-50);
|
|
@@ -256,6 +236,152 @@
|
|
|
256
236
|
--sky-space-inset-letterbox-top-s: var(--bb-size-fluid-25);
|
|
257
237
|
--sky-type-body-m: var(--bb-font-size-100) sans-serif;
|
|
258
238
|
}
|
|
239
|
+
.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
|
|
240
|
+
--sky-color-background-action-danger-active: var(--bb-color-red-600);
|
|
241
|
+
--sky-color-background-action-danger-base: var(--bb-color-red-600);
|
|
242
|
+
--sky-color-background-action-danger-disabled: var(--bb-color-gray-700);
|
|
243
|
+
--sky-color-background-action-danger-focus: var(--bb-color-red-600);
|
|
244
|
+
--sky-color-background-action-danger-hover: var(--bb-color-red-600);
|
|
245
|
+
--sky-color-background-action-input-active: var(--bb-color-transparent);
|
|
246
|
+
--sky-color-background-action-input-base: var(--bb-color-blue-900);
|
|
247
|
+
--sky-color-background-action-input-disabled: var(--bb-color-gray-700);
|
|
248
|
+
--sky-color-background-action-input-focus: var(--bb-color-transparent);
|
|
249
|
+
--sky-color-background-action-input-hover: var(--bb-color-transparent);
|
|
250
|
+
--sky-color-background-action-primary-active: var(--bb-color-sky-500);
|
|
251
|
+
--sky-color-background-action-primary-base: var(--bb-color-sky-600);
|
|
252
|
+
--sky-color-background-action-primary-disabled: var(--bb-color-gray-700);
|
|
253
|
+
--sky-color-background-action-primary-focus: var(--bb-color-sky-600);
|
|
254
|
+
--sky-color-background-action-primary-hover: var(--bb-color-sky-600);
|
|
255
|
+
--sky-color-background-action-secondary-active: var(--bb-color-gray-600);
|
|
256
|
+
--sky-color-background-action-secondary-base: var(--bb-color-gray-800);
|
|
257
|
+
--sky-color-background-action-secondary-disabled: var(--bb-color-gray-700);
|
|
258
|
+
--sky-color-background-action-secondary-focus: var(--bb-color-gray-700);
|
|
259
|
+
--sky-color-background-action-secondary-hover: var(--bb-color-gray-700);
|
|
260
|
+
--sky-color-background-action-tertiary-active: var(--bb-color-transparent);
|
|
261
|
+
--sky-color-background-action-tertiary-base: var(--bb-color-transparent);
|
|
262
|
+
--sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
|
|
263
|
+
--sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
|
|
264
|
+
--sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
|
|
265
|
+
--sky-color-background-blocking: var(--bb-color-blocking);
|
|
266
|
+
--sky-color-background-container-base: var(--bb-color-gray-1000);
|
|
267
|
+
--sky-color-background-container-danger: var(--bb-color-red-800);
|
|
268
|
+
--sky-color-background-container-info: var(--bb-color-blue-800);
|
|
269
|
+
--sky-color-background-container-menu: var(--bb-color-gray-900);
|
|
270
|
+
--sky-color-background-container-success: var(--bb-color-green-900);
|
|
271
|
+
--sky-color-background-container-warning: var(--bb-color-yellow-800);
|
|
272
|
+
--sky-color-background-file_drop: var(--bb-color-gray-1000);
|
|
273
|
+
--sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
|
|
274
|
+
--sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
|
|
275
|
+
--sky-color-background-icon_matte-danger: var(--bb-color-red-600);
|
|
276
|
+
--sky-color-background-icon_matte-success: var(--bb-color-green-700);
|
|
277
|
+
--sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
|
|
278
|
+
--sky-color-background-input-base: var(--bb-color-gray-900);
|
|
279
|
+
--sky-color-background-input-disabled: var(--bb-color-gray-700);
|
|
280
|
+
--sky-color-background-list-active: var(--bb-color-transparent);
|
|
281
|
+
--sky-color-background-list-base: var(--bb-color-transparent);
|
|
282
|
+
--sky-color-background-list-disabled: var(--bb-color-gray-50);
|
|
283
|
+
--sky-color-background-list-focus: var(--bb-color-transparent);
|
|
284
|
+
--sky-color-background-list-hover: var(--bb-color-transparent);
|
|
285
|
+
--sky-color-background-nav-active: var(--bb-color-transparent);
|
|
286
|
+
--sky-color-background-nav-base: var(--bb-color-transparent);
|
|
287
|
+
--sky-color-background-nav-disabled: var(--bb-color-gray-50);
|
|
288
|
+
--sky-color-background-nav-focus: var(--bb-color-transparent);
|
|
289
|
+
--sky-color-background-nav-hover: var(--bb-color-transparent);
|
|
290
|
+
--sky-color-background-page: var(--bb-color-gray-1100);
|
|
291
|
+
--sky-color-background-scrim: var(--bb-color-scrim);
|
|
292
|
+
--sky-color-background-selected-danger: var(--bb-color-red-900);
|
|
293
|
+
--sky-color-background-selected-heavy: var(--bb-color-blue-600);
|
|
294
|
+
--sky-color-background-selected-soft: var(--bb-color-blue-900);
|
|
295
|
+
--sky-color-background-selected-success: var(--bb-color-green-900);
|
|
296
|
+
--sky-color-background-selected-warning: var(--bb-color-yellow-900);
|
|
297
|
+
--sky-color-background-text_highlight: var(--bb-color-yellow-800);
|
|
298
|
+
--sky-color-background-thumb-base: var(--bb-color-white);
|
|
299
|
+
--sky-color-background-thumb-disabled: var(--bb-color-gray-50);
|
|
300
|
+
--sky-color-background-thumbnail_matte: var(--bb-color-white);
|
|
301
|
+
--sky-color-border-action-danger-active: var(--bb-color-red-200);
|
|
302
|
+
--sky-color-border-action-danger-base: var(--bb-color-red-600);
|
|
303
|
+
--sky-color-border-action-danger-disabled: var(--bb-color-gray-800);
|
|
304
|
+
--sky-color-border-action-danger-focus: var(--bb-color-red-200);
|
|
305
|
+
--sky-color-border-action-danger-hover: var(--bb-color-red-200);
|
|
306
|
+
--sky-color-border-action-input-active: var(--bb-color-blue-600);
|
|
307
|
+
--sky-color-border-action-input-base: var(--bb-color-blue-400);
|
|
308
|
+
--sky-color-border-action-input-disabled: var(--bb-color-gray-800);
|
|
309
|
+
--sky-color-border-action-input-focus: var(--bb-color-blue-600);
|
|
310
|
+
--sky-color-border-action-input-hover: var(--bb-color-blue-600);
|
|
311
|
+
--sky-color-border-action-primary-active: var(--bb-color-sky-500);
|
|
312
|
+
--sky-color-border-action-primary-base: var(--bb-color-sky-600);
|
|
313
|
+
--sky-color-border-action-primary-disabled: var(--bb-color-gray-800);
|
|
314
|
+
--sky-color-border-action-primary-focus: var(--bb-color-sky-600);
|
|
315
|
+
--sky-color-border-action-primary-hover: var(--bb-color-sky-600);
|
|
316
|
+
--sky-color-border-action-secondary-active: var(--bb-color-sky-500);
|
|
317
|
+
--sky-color-border-action-secondary-base: var(--bb-color-gray-700);
|
|
318
|
+
--sky-color-border-action-secondary-disabled: var(--bb-color-gray-800);
|
|
319
|
+
--sky-color-border-action-secondary-focus: var(--bb-color-sky-600);
|
|
320
|
+
--sky-color-border-action-secondary-hover: var(--bb-color-sky-600);
|
|
321
|
+
--sky-color-border-action-tertiary-active: var(--bb-color-sky-500);
|
|
322
|
+
--sky-color-border-action-tertiary-base: var(--bb-color-transparent);
|
|
323
|
+
--sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
|
|
324
|
+
--sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
|
|
325
|
+
--sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
|
|
326
|
+
--sky-color-border-column_divider: var(--bb-color-blue-400);
|
|
327
|
+
--sky-color-border-container-base: var(--bb-color-blue-900);
|
|
328
|
+
--sky-color-border-danger: var(--bb-color-red-400);
|
|
329
|
+
--sky-color-border-divider: var(--bb-color-gray-800);
|
|
330
|
+
--sky-color-border-elevation: var(--bb-color-gray-800);
|
|
331
|
+
--sky-color-border-info: var(--bb-color-blue-400);
|
|
332
|
+
--sky-color-border-input-active: var(--bb-color-blue-600);
|
|
333
|
+
--sky-color-border-input-base: var(--bb-color-blue-200);
|
|
334
|
+
--sky-color-border-input-disabled: var(--bb-color-gray-400);
|
|
335
|
+
--sky-color-border-input-error: var(--bb-color-red-600);
|
|
336
|
+
--sky-color-border-input-focus: var(--bb-color-blue-600);
|
|
337
|
+
--sky-color-border-input-hover: var(--bb-color-blue-600);
|
|
338
|
+
--sky-color-border-progress_step: var(--bb-color-gray-600);
|
|
339
|
+
--sky-color-border-selected: var(--bb-color-blue-400);
|
|
340
|
+
--sky-color-border-selected_soft: var(--bb-color-blue-500);
|
|
341
|
+
--sky-color-border-separator-dark: var(--bb-color-gray-800);
|
|
342
|
+
--sky-color-border-separator-light: var(--bb-color-gray-700);
|
|
343
|
+
--sky-color-border-separator-row: var(--bb-color-gray-800);
|
|
344
|
+
--sky-color-border-success: var(--bb-color-green-400);
|
|
345
|
+
--sky-color-border-switch-active: var(--bb-color-blue-600);
|
|
346
|
+
--sky-color-border-switch-base: var(--bb-color-blue-500);
|
|
347
|
+
--sky-color-border-switch-disabled: var(--bb-color-gray-400);
|
|
348
|
+
--sky-color-border-switch-error: var(--bb-color-red-600);
|
|
349
|
+
--sky-color-border-switch-focus: var(--bb-color-blue-600);
|
|
350
|
+
--sky-color-border-switch-hover: var(--bb-color-blue-600);
|
|
351
|
+
--sky-color-border-switch-selected-active: var(--bb-color-blue-900);
|
|
352
|
+
--sky-color-border-switch-selected-base: var(--bb-color-transparent);
|
|
353
|
+
--sky-color-border-switch-selected-disabled: var(--bb-color-gray-400);
|
|
354
|
+
--sky-color-border-switch-selected-focus: var(--bb-color-blue-900);
|
|
355
|
+
--sky-color-border-switch-selected-hover: var(--bb-color-blue-900);
|
|
356
|
+
--sky-color-border-text_highlight: var(--bb-color-yellow-600);
|
|
357
|
+
--sky-color-border-warning: var(--bb-color-yellow-400);
|
|
358
|
+
--sky-color-icon-action: var(--bb-color-sky-600);
|
|
359
|
+
--sky-color-icon-danger: var(--bb-color-red-400);
|
|
360
|
+
--sky-color-icon-deemphasized: var(--bb-color-gray-300);
|
|
361
|
+
--sky-color-icon-default: var(--bb-color-gray-25);
|
|
362
|
+
--sky-color-icon-info: var(--bb-color-blue-600);
|
|
363
|
+
--sky-color-icon-inverse: var(--bb-color-gray-1100);
|
|
364
|
+
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
365
|
+
--sky-color-icon-success: var(--bb-color-green-700);
|
|
366
|
+
--sky-color-icon-warning: var(--bb-color-yellow-600);
|
|
367
|
+
--sky-color-text-action: var(--bb-color-sky-600);
|
|
368
|
+
--sky-color-text-danger: var(--bb-color-red-400);
|
|
369
|
+
--sky-color-text-deemphasized: var(--bb-color-gray-300);
|
|
370
|
+
--sky-color-text-default: var(--bb-color-gray-25);
|
|
371
|
+
--sky-color-text-heading: var(--bb-color-gray-50);
|
|
372
|
+
--sky-color-text-inverse: var(--bb-color-gray-1100);
|
|
373
|
+
--sky-color-text-link_highlighted: var(--bb-color-blue-300);
|
|
374
|
+
--sky-color-text-selected: var(--bb-color-blue-400);
|
|
375
|
+
--sky-elevation-focus: var(--bb-shadow-gray-2);
|
|
376
|
+
--sky-elevation-none: var(--bb-shadow-gray-0);
|
|
377
|
+
--sky-elevation-overflow: var(--bb-shadow-gray-2);
|
|
378
|
+
--sky-elevation-overlay-100: var(--bb-shadow-gray-4);
|
|
379
|
+
--sky-elevation-overlay-200: var(--bb-shadow-gray-8);
|
|
380
|
+
--sky-elevation-overlay-300: var(--bb-shadow-gray-16);
|
|
381
|
+
--sky-elevation-overlay-400: var(--bb-shadow-gray-24);
|
|
382
|
+
--sky-elevation-raised-100: var(--bb-shadow-gray-1);
|
|
383
|
+
--sky-opacity-wait: var(--bb-opacity-600);
|
|
384
|
+
}
|
|
259
385
|
.sky-theme-modern.sky-theme-brand-base {
|
|
260
386
|
--sky-color-background-action-danger-active: var(--bb-color-red-600);
|
|
261
387
|
--sky-color-background-action-danger-base: var(--bb-color-red-600);
|
|
@@ -408,7 +534,7 @@
|
|
|
408
534
|
--sky-elevation-raised-100: var(--bb-shadow-gray-1);
|
|
409
535
|
--sky-opacity-wait: var(--bb-opacity-600);
|
|
410
536
|
}
|
|
411
|
-
.sky-theme-modern.sky-theme-brand-base {
|
|
537
|
+
.sky-theme-modern.sky-theme-brand-base, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-xs, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-sm, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-md, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-lg {
|
|
412
538
|
--sky-font-style-deemphasized-style: italic;
|
|
413
539
|
--sky-font-style-deemphasized-weight: 400;
|
|
414
540
|
--sky-font-style-hint-m-style: italic;
|
|
@@ -685,6 +811,10 @@
|
|
|
685
811
|
--sky-comp-tab-horizontal-space-inset-left: var(--bb-size-fluid-75);
|
|
686
812
|
--sky-comp-tab-horizontal-space-inset-right: var(--bb-size-fluid-75);
|
|
687
813
|
--sky-comp-tab-horizontal-space-inset-top: var(--bb-size-fluid-50);
|
|
814
|
+
--sky-comp-tab-vertical-content-space-inset-bottom: var(--bb-size-fluid-75);
|
|
815
|
+
--sky-comp-tab-vertical-content-space-inset-left: var(--bb-size-fluid-75);
|
|
816
|
+
--sky-comp-tab-vertical-content-space-inset-right: var(--bb-size-fluid-75);
|
|
817
|
+
--sky-comp-tab-vertical-content-space-inset-top: var(--bb-size-fluid-75);
|
|
688
818
|
--sky-comp-tab-vertical-group-button-space-inset-bottom: var(--bb-size-fluid-50);
|
|
689
819
|
--sky-comp-tab-vertical-group-button-space-inset-left: var(--bb-size-fluid-50);
|
|
690
820
|
--sky-comp-tab-vertical-group-button-space-inset-right: var(--bb-size-fluid-50);
|
|
@@ -1060,6 +1190,7 @@
|
|
|
1060
1190
|
--sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/var(--sky-font-line_height-hint-s) var(--sky-font-family-primary);
|
|
1061
1191
|
--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);
|
|
1062
1192
|
}
|
|
1193
|
+
|
|
1063
1194
|
@media (min-width: 768px) {
|
|
1064
1195
|
.sky-theme-modern.sky-theme-brand-base {
|
|
1065
1196
|
--sky-comp-modal-fullscreen-space-offset-bottom: var(--bb-size-fixed-75);
|
|
@@ -1122,6 +1253,10 @@
|
|
|
1122
1253
|
--sky-comp-search-space-inset-left: var(--bb-size-fluid-50);
|
|
1123
1254
|
--sky-comp-search-space-inset-right: var(--bb-size-fluid-50);
|
|
1124
1255
|
--sky-comp-search-space-inset-top: var(--bb-size-fluid-50);
|
|
1256
|
+
--sky-comp-tab-vertical-content-space-inset-bottom: var(--bb-size-fluid-50);
|
|
1257
|
+
--sky-comp-tab-vertical-content-space-inset-left: var(--bb-size-fluid-75);
|
|
1258
|
+
--sky-comp-tab-vertical-content-space-inset-right: var(--bb-size-fluid-75);
|
|
1259
|
+
--sky-comp-tab-vertical-content-space-inset-top: var(--bb-size-fluid-50);
|
|
1125
1260
|
--sky-comp-tile-dashboard-column-space-inset-bottom: var(--bb-size-0);
|
|
1126
1261
|
--sky-comp-tile-dashboard-column-space-inset-left: var(--bb-size-fluid-75);
|
|
1127
1262
|
--sky-comp-tile-dashboard-column-space-inset-right: var(--bb-size-fluid-75);
|
|
@@ -1132,3 +1267,78 @@
|
|
|
1132
1267
|
--sky-comp-tile-dashboard-space-inset-top: var(--bb-size-0);
|
|
1133
1268
|
}
|
|
1134
1269
|
}
|
|
1270
|
+
.sky-theme-modern.sky-theme-brand-base .sky-responsive-container-sm, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-md, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-lg {
|
|
1271
|
+
--sky-comp-modal-fullscreen-space-offset-bottom: var(--bb-size-fixed-75);
|
|
1272
|
+
--sky-comp-modal-fullscreen-space-offset-left: var(--bb-size-fixed-75);
|
|
1273
|
+
--sky-comp-modal-fullscreen-space-offset-right: var(--bb-size-fixed-75);
|
|
1274
|
+
--sky-comp-modal-fullscreen-space-offset-top: var(--bb-size-fixed-75);
|
|
1275
|
+
--sky-comp-modal-space-offset-bottom: var(--bb-size-fixed-100);
|
|
1276
|
+
--sky-comp-modal-space-offset-left: var(--bb-size-fixed-100);
|
|
1277
|
+
--sky-comp-modal-space-offset-right: var(--bb-size-fixed-100);
|
|
1278
|
+
--sky-comp-modal-space-offset-top: var(--bb-size-fixed-100);
|
|
1279
|
+
--sky-comp-page-content-blocks-space-inset-bottom: var(--bb-size-fluid-150);
|
|
1280
|
+
--sky-comp-page-content-blocks-space-inset-left: var(--bb-size-fluid-150);
|
|
1281
|
+
--sky-comp-page-content-blocks-space-inset-right: var(--bb-size-fluid-150);
|
|
1282
|
+
--sky-comp-page-content-blocks-space-inset-top: var(--bb-size-fluid-150);
|
|
1283
|
+
--sky-comp-page-content-fit-space-inset-bottom: var(--bb-size-0);
|
|
1284
|
+
--sky-comp-page-content-fit-space-inset-left: var(--bb-size-fluid-150);
|
|
1285
|
+
--sky-comp-page-content-fit-space-inset-right: var(--bb-size-fluid-150);
|
|
1286
|
+
--sky-comp-page-content-fit-space-inset-top: var(--bb-size-0);
|
|
1287
|
+
--sky-comp-page-content-list-space-inset-bottom: var(--bb-size-0);
|
|
1288
|
+
--sky-comp-page-content-list-space-inset-left: var(--bb-size-fluid-150);
|
|
1289
|
+
--sky-comp-page-content-list-space-inset-right: var(--bb-size-fluid-150);
|
|
1290
|
+
--sky-comp-page-content-list-space-inset-top: var(--bb-size-0);
|
|
1291
|
+
--sky-comp-page-content-tabs-space-inset-bottom: var(--bb-size-0);
|
|
1292
|
+
--sky-comp-page-content-tabs-space-inset-left: var(--bb-size-0);
|
|
1293
|
+
--sky-comp-page-content-tabs-space-inset-right: var(--bb-size-0);
|
|
1294
|
+
--sky-comp-page-content-tabs-space-inset-top: var(--bb-size-0);
|
|
1295
|
+
--sky-comp-page-header-blocks-space-inset-bottom: var(--bb-size-0);
|
|
1296
|
+
--sky-comp-page-header-blocks-space-inset-left: var(--bb-size-fluid-150);
|
|
1297
|
+
--sky-comp-page-header-blocks-space-inset-right: var(--bb-size-fluid-150);
|
|
1298
|
+
--sky-comp-page-header-blocks-space-inset-top: var(--bb-size-fluid-150);
|
|
1299
|
+
--sky-comp-page-header-fit-space-inset-bottom: var(--bb-size-fluid-100);
|
|
1300
|
+
--sky-comp-page-header-fit-space-inset-left: var(--bb-size-fluid-150);
|
|
1301
|
+
--sky-comp-page-header-fit-space-inset-right: var(--bb-size-fluid-150);
|
|
1302
|
+
--sky-comp-page-header-fit-space-inset-top: var(--bb-size-fluid-150);
|
|
1303
|
+
--sky-comp-page-header-list-space-inset-bottom: var(--bb-size-fluid-100);
|
|
1304
|
+
--sky-comp-page-header-list-space-inset-left: var(--bb-size-fluid-150);
|
|
1305
|
+
--sky-comp-page-header-list-space-inset-right: var(--bb-size-fluid-150);
|
|
1306
|
+
--sky-comp-page-header-list-space-inset-top: var(--bb-size-fluid-150);
|
|
1307
|
+
--sky-comp-page-header-tabs-space-inset-bottom: var(--bb-size-fluid-100);
|
|
1308
|
+
--sky-comp-page-header-tabs-space-inset-left: var(--bb-size-fluid-150);
|
|
1309
|
+
--sky-comp-page-header-tabs-space-inset-right: var(--bb-size-fluid-150);
|
|
1310
|
+
--sky-comp-page-header-tabs-space-inset-top: var(--bb-size-fluid-150);
|
|
1311
|
+
--sky-comp-page-links-blocks-space-inset-bottom: var(--bb-size-fluid-150);
|
|
1312
|
+
--sky-comp-page-links-blocks-space-inset-left: var(--bb-size-fluid-150);
|
|
1313
|
+
--sky-comp-page-links-blocks-space-inset-right: var(--bb-size-fluid-150);
|
|
1314
|
+
--sky-comp-page-links-blocks-space-inset-top: var(--bb-size-fluid-150);
|
|
1315
|
+
--sky-comp-page-links-list-space-inset-bottom: var(--bb-size-fluid-150);
|
|
1316
|
+
--sky-comp-page-links-list-space-inset-left: var(--bb-size-fluid-150);
|
|
1317
|
+
--sky-comp-page-links-list-space-inset-right: var(--bb-size-fluid-150);
|
|
1318
|
+
--sky-comp-page-links-list-space-inset-top: var(--bb-size-fluid-150);
|
|
1319
|
+
--sky-comp-page-links-tabs-space-inset-bottom: var(--bb-size-fluid-150);
|
|
1320
|
+
--sky-comp-page-links-tabs-space-inset-left: var(--bb-size-fluid-150);
|
|
1321
|
+
--sky-comp-page-links-tabs-space-inset-right: var(--bb-size-fluid-150);
|
|
1322
|
+
--sky-comp-page-links-tabs-space-inset-top: var(--bb-size-fluid-150);
|
|
1323
|
+
--sky-comp-page-tabset-tabs-space-inset-bottom: var(--bb-size-0);
|
|
1324
|
+
--sky-comp-page-tabset-tabs-space-inset-left: var(--bb-size-fluid-150);
|
|
1325
|
+
--sky-comp-page-tabset-tabs-space-inset-right: var(--bb-size-0);
|
|
1326
|
+
--sky-comp-page-tabset-tabs-space-inset-top: var(--bb-size-0);
|
|
1327
|
+
--sky-comp-search-space-inset-bottom: var(--bb-size-fluid-50);
|
|
1328
|
+
--sky-comp-search-space-inset-left: var(--bb-size-fluid-50);
|
|
1329
|
+
--sky-comp-search-space-inset-right: var(--bb-size-fluid-50);
|
|
1330
|
+
--sky-comp-search-space-inset-top: var(--bb-size-fluid-50);
|
|
1331
|
+
--sky-comp-tab-vertical-content-space-inset-bottom: var(--bb-size-fluid-50);
|
|
1332
|
+
--sky-comp-tab-vertical-content-space-inset-left: var(--bb-size-fluid-75);
|
|
1333
|
+
--sky-comp-tab-vertical-content-space-inset-right: var(--bb-size-fluid-75);
|
|
1334
|
+
--sky-comp-tab-vertical-content-space-inset-top: var(--bb-size-fluid-50);
|
|
1335
|
+
--sky-comp-tile-dashboard-column-space-inset-bottom: var(--bb-size-0);
|
|
1336
|
+
--sky-comp-tile-dashboard-column-space-inset-left: var(--bb-size-fluid-75);
|
|
1337
|
+
--sky-comp-tile-dashboard-column-space-inset-right: var(--bb-size-fluid-75);
|
|
1338
|
+
--sky-comp-tile-dashboard-column-space-inset-top: var(--bb-size-0);
|
|
1339
|
+
--sky-comp-tile-dashboard-space-inset-bottom: var(--bb-size-0);
|
|
1340
|
+
--sky-comp-tile-dashboard-space-inset-left: var(--bb-size-fluid-50);
|
|
1341
|
+
--sky-comp-tile-dashboard-space-inset-right: var(--bb-size-fluid-50);
|
|
1342
|
+
--sky-comp-tile-dashboard-space-inset-top: var(--bb-size-0);
|
|
1343
|
+
}
|
|
1344
|
+
|
package/assets/scss/modern.css
CHANGED
|
@@ -280,7 +280,7 @@
|
|
|
280
280
|
--sky-elevation-overlay-400: var(--modern-shadow-size-24);
|
|
281
281
|
--sky-elevation-raised-100: var(--modern-shadow-size-1);
|
|
282
282
|
}
|
|
283
|
-
.sky-theme-modern {
|
|
283
|
+
.sky-theme-modern, .sky-theme-modern .sky-responsive-container-xs, .sky-theme-modern .sky-responsive-container-sm, .sky-theme-modern .sky-responsive-container-md, .sky-theme-modern .sky-responsive-container-lg {
|
|
284
284
|
--sky-font-style-deemphasized-style: italic;
|
|
285
285
|
--sky-font-style-deemphasized-weight: 400;
|
|
286
286
|
--sky-font-style-hint-m-style: italic;
|
|
@@ -556,6 +556,10 @@
|
|
|
556
556
|
--sky-comp-tab-horizontal-space-inset-left: var(--modern-size-15);
|
|
557
557
|
--sky-comp-tab-horizontal-space-inset-right: var(--modern-size-15);
|
|
558
558
|
--sky-comp-tab-horizontal-space-inset-top: var(--modern-size-10);
|
|
559
|
+
--sky-comp-tab-vertical-content-space-inset-bottom: var(--modern-size-15);
|
|
560
|
+
--sky-comp-tab-vertical-content-space-inset-left: var(--modern-size-15);
|
|
561
|
+
--sky-comp-tab-vertical-content-space-inset-right: var(--modern-size-15);
|
|
562
|
+
--sky-comp-tab-vertical-content-space-inset-top: var(--modern-size-15);
|
|
559
563
|
--sky-comp-tab-vertical-group-button-space-inset-bottom: var(--modern-space-s);
|
|
560
564
|
--sky-comp-tab-vertical-group-button-space-inset-left: var(--modern-space-s);
|
|
561
565
|
--sky-comp-tab-vertical-group-button-space-inset-right: var(--modern-space-s);
|
|
@@ -916,6 +920,7 @@
|
|
|
916
920
|
--sky-font-family-primary: var(--modern-font-blkb_sans-family);
|
|
917
921
|
--sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
|
|
918
922
|
}
|
|
923
|
+
|
|
919
924
|
@media (min-width: 768px) {
|
|
920
925
|
.sky-theme-modern {
|
|
921
926
|
--sky-comp-modal-fullscreen-space-offset-bottom: var(--modern-size-15);
|
|
@@ -942,7 +947,7 @@
|
|
|
942
947
|
--sky-comp-page-content-tabs-space-inset-left: var(--modern-size-0);
|
|
943
948
|
--sky-comp-page-content-tabs-space-inset-right: var(--modern-size-0);
|
|
944
949
|
--sky-comp-page-content-tabs-space-inset-top: var(--modern-size-0);
|
|
945
|
-
--sky-comp-page-header-blocks-space-inset-bottom: var(--modern-
|
|
950
|
+
--sky-comp-page-header-blocks-space-inset-bottom: var(--modern-size-0);
|
|
946
951
|
--sky-comp-page-header-blocks-space-inset-left: var(--modern-space-xl);
|
|
947
952
|
--sky-comp-page-header-blocks-space-inset-right: var(--modern-space-xl);
|
|
948
953
|
--sky-comp-page-header-blocks-space-inset-top: var(--modern-space-xl);
|
|
@@ -978,6 +983,10 @@
|
|
|
978
983
|
--sky-comp-search-space-inset-left: var(--modern-space-s);
|
|
979
984
|
--sky-comp-search-space-inset-right: var(--modern-space-s);
|
|
980
985
|
--sky-comp-search-space-inset-top: var(--modern-space-s);
|
|
986
|
+
--sky-comp-tab-vertical-content-space-inset-bottom: var(--modern-size-10);
|
|
987
|
+
--sky-comp-tab-vertical-content-space-inset-left: var(--modern-size-15);
|
|
988
|
+
--sky-comp-tab-vertical-content-space-inset-right: var(--modern-size-15);
|
|
989
|
+
--sky-comp-tab-vertical-content-space-inset-top: var(--modern-size-10);
|
|
981
990
|
--sky-comp-tile-dashboard-column-space-inset-bottom: var(--modern-size-0);
|
|
982
991
|
--sky-comp-tile-dashboard-column-space-inset-left: var(--modern-space-md);
|
|
983
992
|
--sky-comp-tile-dashboard-column-space-inset-right: var(--modern-space-md);
|
|
@@ -988,3 +997,78 @@
|
|
|
988
997
|
--sky-comp-tile-dashboard-space-inset-top: var(--modern-size-0);
|
|
989
998
|
}
|
|
990
999
|
}
|
|
1000
|
+
.sky-theme-modern .sky-responsive-container-sm, .sky-theme-modern .sky-responsive-container-md, .sky-theme-modern .sky-responsive-container-lg {
|
|
1001
|
+
--sky-comp-modal-fullscreen-space-offset-bottom: var(--modern-size-15);
|
|
1002
|
+
--sky-comp-modal-fullscreen-space-offset-left: var(--modern-size-15);
|
|
1003
|
+
--sky-comp-modal-fullscreen-space-offset-right: var(--modern-size-15);
|
|
1004
|
+
--sky-comp-modal-fullscreen-space-offset-top: var(--modern-size-15);
|
|
1005
|
+
--sky-comp-modal-space-offset-bottom: var(--modern-size-20);
|
|
1006
|
+
--sky-comp-modal-space-offset-left: var(--modern-size-20);
|
|
1007
|
+
--sky-comp-modal-space-offset-right: var(--modern-size-20);
|
|
1008
|
+
--sky-comp-modal-space-offset-top: var(--modern-size-20);
|
|
1009
|
+
--sky-comp-page-content-blocks-space-inset-bottom: var(--modern-space-xl);
|
|
1010
|
+
--sky-comp-page-content-blocks-space-inset-left: var(--modern-space-xl);
|
|
1011
|
+
--sky-comp-page-content-blocks-space-inset-right: var(--modern-space-xl);
|
|
1012
|
+
--sky-comp-page-content-blocks-space-inset-top: var(--modern-space-xl);
|
|
1013
|
+
--sky-comp-page-content-fit-space-inset-bottom: var(--modern-size-0);
|
|
1014
|
+
--sky-comp-page-content-fit-space-inset-left: var(--modern-space-xl);
|
|
1015
|
+
--sky-comp-page-content-fit-space-inset-right: var(--modern-space-xl);
|
|
1016
|
+
--sky-comp-page-content-fit-space-inset-top: var(--modern-size-0);
|
|
1017
|
+
--sky-comp-page-content-list-space-inset-bottom: var(--modern-size-0);
|
|
1018
|
+
--sky-comp-page-content-list-space-inset-left: var(--modern-space-xl);
|
|
1019
|
+
--sky-comp-page-content-list-space-inset-right: var(--modern-space-xl);
|
|
1020
|
+
--sky-comp-page-content-list-space-inset-top: var(--modern-size-0);
|
|
1021
|
+
--sky-comp-page-content-tabs-space-inset-bottom: var(--modern-size-0);
|
|
1022
|
+
--sky-comp-page-content-tabs-space-inset-left: var(--modern-size-0);
|
|
1023
|
+
--sky-comp-page-content-tabs-space-inset-right: var(--modern-size-0);
|
|
1024
|
+
--sky-comp-page-content-tabs-space-inset-top: var(--modern-size-0);
|
|
1025
|
+
--sky-comp-page-header-blocks-space-inset-bottom: var(--modern-size-0);
|
|
1026
|
+
--sky-comp-page-header-blocks-space-inset-left: var(--modern-space-xl);
|
|
1027
|
+
--sky-comp-page-header-blocks-space-inset-right: var(--modern-space-xl);
|
|
1028
|
+
--sky-comp-page-header-blocks-space-inset-top: var(--modern-space-xl);
|
|
1029
|
+
--sky-comp-page-header-fit-space-inset-bottom: var(--modern-space-lg);
|
|
1030
|
+
--sky-comp-page-header-fit-space-inset-left: var(--modern-space-xl);
|
|
1031
|
+
--sky-comp-page-header-fit-space-inset-right: var(--modern-space-xl);
|
|
1032
|
+
--sky-comp-page-header-fit-space-inset-top: var(--modern-space-xl);
|
|
1033
|
+
--sky-comp-page-header-list-space-inset-bottom: var(--modern-space-lg);
|
|
1034
|
+
--sky-comp-page-header-list-space-inset-left: var(--modern-space-xl);
|
|
1035
|
+
--sky-comp-page-header-list-space-inset-right: var(--modern-space-xl);
|
|
1036
|
+
--sky-comp-page-header-list-space-inset-top: var(--modern-space-xl);
|
|
1037
|
+
--sky-comp-page-header-tabs-space-inset-bottom: var(--modern-space-lg);
|
|
1038
|
+
--sky-comp-page-header-tabs-space-inset-left: var(--modern-space-xl);
|
|
1039
|
+
--sky-comp-page-header-tabs-space-inset-right: var(--modern-space-xl);
|
|
1040
|
+
--sky-comp-page-header-tabs-space-inset-top: var(--modern-space-xl);
|
|
1041
|
+
--sky-comp-page-links-blocks-space-inset-bottom: var(--modern-space-xl);
|
|
1042
|
+
--sky-comp-page-links-blocks-space-inset-left: var(--modern-space-xl);
|
|
1043
|
+
--sky-comp-page-links-blocks-space-inset-right: var(--modern-space-xl);
|
|
1044
|
+
--sky-comp-page-links-blocks-space-inset-top: var(--modern-space-xl);
|
|
1045
|
+
--sky-comp-page-links-list-space-inset-bottom: var(--modern-space-xl);
|
|
1046
|
+
--sky-comp-page-links-list-space-inset-left: var(--modern-space-xl);
|
|
1047
|
+
--sky-comp-page-links-list-space-inset-right: var(--modern-space-xl);
|
|
1048
|
+
--sky-comp-page-links-list-space-inset-top: var(--modern-space-xl);
|
|
1049
|
+
--sky-comp-page-links-tabs-space-inset-bottom: var(--modern-space-xl);
|
|
1050
|
+
--sky-comp-page-links-tabs-space-inset-left: var(--modern-space-xl);
|
|
1051
|
+
--sky-comp-page-links-tabs-space-inset-right: var(--modern-space-xl);
|
|
1052
|
+
--sky-comp-page-links-tabs-space-inset-top: var(--modern-space-xl);
|
|
1053
|
+
--sky-comp-page-tabset-tabs-space-inset-bottom: var(--modern-size-0);
|
|
1054
|
+
--sky-comp-page-tabset-tabs-space-inset-left: var(--modern-space-xl);
|
|
1055
|
+
--sky-comp-page-tabset-tabs-space-inset-right: var(--modern-size-0);
|
|
1056
|
+
--sky-comp-page-tabset-tabs-space-inset-top: var(--modern-size-0);
|
|
1057
|
+
--sky-comp-search-space-inset-bottom: var(--modern-space-s);
|
|
1058
|
+
--sky-comp-search-space-inset-left: var(--modern-space-s);
|
|
1059
|
+
--sky-comp-search-space-inset-right: var(--modern-space-s);
|
|
1060
|
+
--sky-comp-search-space-inset-top: var(--modern-space-s);
|
|
1061
|
+
--sky-comp-tab-vertical-content-space-inset-bottom: var(--modern-size-10);
|
|
1062
|
+
--sky-comp-tab-vertical-content-space-inset-left: var(--modern-size-15);
|
|
1063
|
+
--sky-comp-tab-vertical-content-space-inset-right: var(--modern-size-15);
|
|
1064
|
+
--sky-comp-tab-vertical-content-space-inset-top: var(--modern-size-10);
|
|
1065
|
+
--sky-comp-tile-dashboard-column-space-inset-bottom: var(--modern-size-0);
|
|
1066
|
+
--sky-comp-tile-dashboard-column-space-inset-left: var(--modern-space-md);
|
|
1067
|
+
--sky-comp-tile-dashboard-column-space-inset-right: var(--modern-space-md);
|
|
1068
|
+
--sky-comp-tile-dashboard-column-space-inset-top: var(--modern-size-0);
|
|
1069
|
+
--sky-comp-tile-dashboard-space-inset-bottom: var(--modern-size-0);
|
|
1070
|
+
--sky-comp-tile-dashboard-space-inset-left: var(--modern-space-s);
|
|
1071
|
+
--sky-comp-tile-dashboard-space-inset-right: var(--modern-space-s);
|
|
1072
|
+
--sky-comp-tile-dashboard-space-inset-top: var(--modern-size-0);
|
|
1073
|
+
}
|
|
1074
|
+
|