@blackbaud/skyux-design-tokens 0.0.32 → 0.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +153 -67
  4. package/scss/modern.css +144 -26
package/CHANGELOG.md CHANGED
@@ -2,6 +2,29 @@
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.34](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.33...0.0.34) (2024-10-02)
6
+
7
+
8
+ ### Features
9
+
10
+ * color fixes ([#90](https://github.com/blackbaud/skyux-design-tokens/issues/90)) ([baba566](https://github.com/blackbaud/skyux-design-tokens/commit/baba566a829fdcf589a0033aed3515bd9c78690f))
11
+ * divider token, modern one-off sizes, icon color fix ([#89](https://github.com/blackbaud/skyux-design-tokens/issues/89)) ([0ef1e1c](https://github.com/blackbaud/skyux-design-tokens/commit/0ef1e1ca5ee234d6e42727efd973e6ab866c4634))
12
+ * new font_face tokens and type tokens ([#92](https://github.com/blackbaud/skyux-design-tokens/issues/92)) ([389c12f](https://github.com/blackbaud/skyux-design-tokens/commit/389c12f6e963ee0a4302eea185c0426c94069a64))
13
+ * new inset padding ([#93](https://github.com/blackbaud/skyux-design-tokens/issues/93)) ([f7705fb](https://github.com/blackbaud/skyux-design-tokens/commit/f7705fb515a280a70551af7fd9465f945ce0b26a))
14
+
15
+ ## [0.0.33](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.32...0.0.33) (2024-09-27)
16
+
17
+
18
+ ### Features
19
+
20
+ * add background colors ([#85](https://github.com/blackbaud/skyux-design-tokens/issues/85)) ([0113a8b](https://github.com/blackbaud/skyux-design-tokens/commit/0113a8b332e1f63814d0bde1a49426a9939c7c2b))
21
+ * border colors ([#87](https://github.com/blackbaud/skyux-design-tokens/issues/87)) ([277f903](https://github.com/blackbaud/skyux-design-tokens/commit/277f903189e05de85f26f81669dee393c8bdca1b))
22
+
23
+
24
+ ### Bug Fixes
25
+
26
+ * gap naming schema in space tokens ([#88](https://github.com/blackbaud/skyux-design-tokens/issues/88)) ([fb1deff](https://github.com/blackbaud/skyux-design-tokens/commit/fb1deffe094fbe93d9ba057bd34b98428940c940))
27
+
5
28
  ## [0.0.32](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.31...0.0.32) (2024-09-27)
6
29
 
7
30
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.32",
3
+ "version": "0.0.34",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",
package/scss/blackbaud.css CHANGED
@@ -92,6 +92,7 @@
92
92
  --bb-color-gray-100: #d3d5d6;
93
93
  --bb-color-gray-50: #e9eaeb;
94
94
  --bb-color-gray-25: #f9f9f9;
95
+ --bb-color-scrim: rgba(37, 43, 51, 0.5);
95
96
  --bb-color-transparent: rgba(0, 0, 0, 0);
96
97
  --bb-color-black: #000000;
97
98
  --bb-color-white: #ffffff;
@@ -126,8 +127,10 @@
126
127
  --bb-line_height-100: 1.3333;
127
128
  --bb-letter_spacing-normal: normal;
128
129
  --bb-letter_spacing-wider: 0.32px;
129
- --bb-font-src-sans-italic: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff") format("woff");
130
- --bb-font-src-sans-regular: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff") format("woff");
130
+ --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
131
+ --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
132
+ --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
133
+ --bb-font-blkb_sans-name: BLKB Sans;
131
134
  --bb-font-style-semibold-italic-style: italic;
132
135
  --bb-font-style-semibold-italic-weight: 600;
133
136
  --bb-font-style-semibold: 600;
@@ -143,9 +146,6 @@
143
146
  --bb-font-weight-semibold: 600;
144
147
  --bb-font-weight-regular: 400;
145
148
  --bb-font-weight-light: 300;
146
- --bb-font-family-sans: var(--bb-font-name), Helvetica Neue, Arial, sans-serif;
147
- --bb-font-family-monospaced: Menlo, Monaco, Consolas, 'Courier New', monospace;
148
- --bb-font-name: 'BLKB Sans';
149
149
  --bb-font-size-1000: 3.25rem;
150
150
  --bb-font-size-900: 2.625rem;
151
151
  --bb-font-size-800: 2.25rem;
@@ -215,19 +215,26 @@
215
215
  --sky-color-border-input-hover: var(--bb-color-blue-600);
216
216
  --sky-color-border-input-base: var(--bb-color-gray-100);
217
217
  --sky-color-border-container-base: var(--bb-color-gray-100);
218
+ --sky-color-border-action-danger-disabled: var(--bb-color-gray-100);
219
+ --sky-color-border-action-danger-focus: var(--bb-color-red-200);
220
+ --sky-color-border-action-danger-active: var(--bb-color-red-200);
221
+ --sky-color-border-action-danger-hover: var(--bb-color-red-200);
222
+ --sky-color-border-action-danger-base: var(--bb-color-red-600);
223
+ --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-100);
218
224
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
219
225
  --sky-color-border-action-tertiary-active: var(--bb-color-blue-600);
220
226
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
221
227
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
228
+ --sky-color-border-action-secondary-disabled: var(--bb-color-gray-100);
222
229
  --sky-color-border-action-secondary-focus: var(--bb-color-blue-600);
223
230
  --sky-color-border-action-secondary-active: var(--bb-color-blue-600);
224
231
  --sky-color-border-action-secondary-hover: var(--bb-color-blue-600);
225
- --sky-color-border-action-secondary-base: var(--bb-color-transparent);
226
- --sky-color-border-action-primary-focus: var(--bb-color-blue-600);
227
- --sky-color-border-action-primary-active: var(--bb-color-blue-600);
228
- --sky-color-border-action-primary-hover: var(--bb-color-blue-600);
232
+ --sky-color-border-action-secondary-base: var(--bb-color-gray-100);
233
+ --sky-color-border-action-primary-disabled: var(--bb-color-gray-100);
234
+ --sky-color-border-action-primary-focus: var(--bb-color-blue-200);
235
+ --sky-color-border-action-primary-active: var(--bb-color-blue-200);
236
+ --sky-color-border-action-primary-hover: var(--bb-color-blue-200);
229
237
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
230
- --sky-color-border-action-disabled: var(--bb-color-gray-100);
231
238
  --sky-color-border-elevation: var(--bb-color-gray-100);
232
239
  --sky-color-border-divider: var(--bb-color-gray-100);
233
240
  --sky-color-border-info: var(--bb-color-blue-600);
@@ -235,20 +242,47 @@
235
242
  --sky-color-border-warning: var(--bb-color-yellow-600);
236
243
  --sky-color-border-danger: var(--bb-color-red-600);
237
244
  --sky-color-border-selected: var(--bb-color-blue-600);
238
- --sky-color-background-input-selected: var(--bb-color-blue-600);
245
+ --sky-color-background-list-disabled: var(--bb-color-gray-50);
246
+ --sky-color-background-list-focus: var(--bb-color-transparent);
247
+ --sky-color-background-list-active: var(--bb-color-transparent);
248
+ --sky-color-background-list-hover: var(--bb-color-transparent);
249
+ --sky-color-background-list-base: var(--bb-color-transparent);
250
+ --sky-color-background-nav-disabled: var(--bb-color-gray-50);
251
+ --sky-color-background-nav-focus: var(--bb-color-transparent);
252
+ --sky-color-background-nav-active: var(--bb-color-transparent);
253
+ --sky-color-background-nav-hover: var(--bb-color-transparent);
254
+ --sky-color-background-nav-base: var(--bb-color-transparent);
255
+ --sky-color-background-selected-soft: var(--bb-color-blue-100);
256
+ --sky-color-background-selected-heavy: var(--bb-color-blue-600);
239
257
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
240
258
  --sky-color-background-input-base: var(--bb-color-transparent);
259
+ --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
260
+ --sky-color-background-action-danger-focus: var(--bb-color-red-600);
261
+ --sky-color-background-action-danger-active: var(--bb-color-red-600);
262
+ --sky-color-background-action-danger-hover: var(--bb-color-red-600);
241
263
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
264
+ --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-50);
265
+ --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
266
+ --sky-color-background-action-tertiary-active: var(--bb-color-transparent);
267
+ --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
242
268
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
269
+ --sky-color-background-action-secondary-disabled: var(--bb-color-gray-50);
270
+ --sky-color-background-action-secondary-focus: var(--bb-color-white);
271
+ --sky-color-background-action-secondary-active: var(--bb-color-white);
272
+ --sky-color-background-action-secondary-hover: var(--bb-color-white);
243
273
  --sky-color-background-action-secondary-base: var(--bb-color-white);
274
+ --sky-color-background-action-primary-disabled: var(--bb-color-gray-50);
275
+ --sky-color-background-action-primary-focus: var(--bb-color-blue-600);
276
+ --sky-color-background-action-primary-active: var(--bb-color-blue-600);
277
+ --sky-color-background-action-primary-hover: var(--bb-color-blue-600);
244
278
  --sky-color-background-action-primary-base: var(--bb-color-blue-600);
245
- --sky-color-background-action-disabled: var(--bb-color-gray-50);
246
279
  --sky-color-background-container-info: var(--bb-color-blue-100);
247
280
  --sky-color-background-container-success: var(--bb-color-green-300);
248
281
  --sky-color-background-container-warning: var(--bb-color-yellow-300);
249
282
  --sky-color-background-container-danger: var(--bb-color-red-300);
250
283
  --sky-color-background-container-menu: var(--bb-color-white);
251
284
  --sky-color-background-container-base: var(--bb-color-white);
285
+ --sky-color-background-scrim: var(--bb-color-scrim);
252
286
  --sky-color-background-page: var(--bb-color-gray-25);
253
287
  --sky-color-icon-action: var(--bb-color-blue-600);
254
288
  --sky-color-icon-inverse: var(--bb-color-white);
@@ -256,7 +290,7 @@
256
290
  --sky-color-icon-success: var(--bb-color-green-600);
257
291
  --sky-color-icon-warning: var(--bb-color-yellow-600);
258
292
  --sky-color-icon-danger: var(--bb-color-red-600);
259
- --sky-color-icon-deemphasized: var(--sky-color-text-deemphasized);
293
+ --sky-color-icon-deemphasized: var(--bb-color-gray-600);
260
294
  --sky-color-icon-default: var(--bb-color-gray-900);
261
295
  --sky-color-text-heading: var(--bb-color-blue-800);
262
296
  --sky-color-text-inverse: var(--bb-color-white);
@@ -266,9 +300,29 @@
266
300
  --sky-color-text-default: var(--bb-color-gray-900);
267
301
  }
268
302
  .sky-theme-modern.sky-theme-brand-blackbaud {
303
+ --sky-font_face-blkb_sans-bold-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Bold.woff) format("woff");
304
+ --sky-font_face-blkb_sans-bold-weight: 700;
305
+ --sky-font_face-blkb_sans-bold-style: normal;
306
+ --sky-font_face-blkb_sans-semibold-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Semibold.woff) format("woff");
307
+ --sky-font_face-blkb_sans-semibold-weight: 600;
308
+ --sky-font_face-blkb_sans-semibold-style: normal;
309
+ --sky-font_face-blkb_sans-light-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Light.woff) format("woff");
310
+ --sky-font_face-blkb_sans-light-weight: 300;
311
+ --sky-font_face-blkb_sans-light-style: normal;
312
+ --sky-font_face-blkb_sans-thin-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Thin.woff) format("woff");
313
+ --sky-font_face-blkb_sans-thin-weight: 100;
314
+ --sky-font_face-blkb_sans-thin-style: normal;
315
+ --sky-font_face-blkb_sans-italic-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff) format("woff");
316
+ --sky-font_face-blkb_sans-italic-weight: 400;
317
+ --sky-font_face-blkb_sans-italic-style: italic;
318
+ --sky-font_face-blkb_sans-regular-src: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff") format("woff");
319
+ --sky-font_face-blkb_sans-regular-weight: 400;
320
+ --sky-font_face-blkb_sans-regular-style: normal;
321
+ --sky-font_face-blkb_sans-name: var(--bb-font-blkb_sans-name);
269
322
  --sky-border-style-separator-row: var(--bb-border-style-dotted);
270
323
  --sky-border-style-separator-dark: var(--bb-border-style-solid);
271
324
  --sky-border-style-elevation: var(--bb-border-style-solid);
325
+ --sky-border-style-divider: var(--bb-border-style-solid);
272
326
  --sky-border-style-accent: var(--bb-border-style-solid);
273
327
  --sky-border-width-separator-row: var(--bb-size-fixed-6);
274
328
  --sky-border-width-separator-dark: var(--bb-size-fixed-6);
@@ -381,31 +435,30 @@
381
435
  --sky-font-size-body-m: var(--bb-font-size-200);
382
436
  --sky-font-size-body-s: var(--bb-font-size-100);
383
437
  --sky-font-size-data_label: var(--bb-font-size-200);
384
- --sky-font-family-monospaced: var(--bb-font-family-monospaced);
385
- --sky-font-family-sans: var(--bb-font-family-sans);
386
- --sky-type-metric-l: var(--sky-font-style-metric-l) var(--sky-font-size-metric-l)/var(--sky-font-line_height-metric-l) var(--sky-font-family-sans);
387
- --sky-type-metric-m: var(--sky-font-style-metric-m) var(--sky-font-size-metric-m)/var(--sky-font-line_height-metric-m) var(--sky-font-family-sans);
388
- --sky-type-metric-s: var(--sky-font-style-metric-s) var(--sky-font-size-metric-s)/var(--sky-font-line_height-metric-s) var(--sky-font-family-sans);
389
- --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/var(--sky-font-line_height-input-val) var(--sky-font-family-sans);
390
- --sky-type-input-label: var(--sky-font-style-input-label) var(--sky-font-size-input-label)/var(--sky-font-line_height-input-label) var(--bb-font-family-sans);
391
- --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/var(--sky-font-line_height-hint-m) var(--sky-font-family-sans);
392
- --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/var(--sky-font-line_height-hint-s) var(--sky-font-family-sans);
393
- --sky-type-display-4: var(--sky-font-style-display-4) var(--sky-font-size-display-4)/var(--sky-font-line_height-display-4) var(--sky-font-family-sans);
394
- --sky-type-display-3: var(--sky-font-style-display-3) var(--sky-font-size-display-3)/var(--sky-font-line_height-display-3) var(--sky-font-family-sans);
395
- --sky-type-display-2: var(--sky-font-style-display-2) var(--sky-font-size-display-2)/var(--sky-font-line_height-display-2) var(--sky-font-family-sans);
396
- --sky-type-display-1: var(--sky-font-style-display-1) var(--sky-font-size-display-1)/var(--sky-font-line_height-display-1) var(--sky-font-family-sans);
397
- --sky-type-body-l: var(--sky-font-style-body-l) var(--sky-font-size-body-l)/var(--sky-font-line_height-body-l) var(--sky-font-family-sans);
398
- --sky-type-body-m: var(--sky-font-style-body-m) var(--sky-font-size-body-m)/var(--sky-font-line_height-body-m) var(--sky-font-family-sans);
399
- --sky-type-body-s: var(--sky-font-style-body-s) var(--sky-font-size-body-s)/var(--sky-font-line_height-body-s) var(--sky-font-family-sans);
400
- --sky-type-heading-5: var(--sky-font-style-heading-5) var(--sky-font-size-heading-5)/var(--sky-font-line_height-heading-5) var(--sky-font-family-sans);
401
- --sky-type-heading-4: var(--sky-font-style-heading-4) var(--sky-font-size-heading-4)/var(--sky-font-line_height-heading-4) var(--sky-font-family-sans);
402
- --sky-type-heading-3: var(--sky-font-style-heading-3) var(--sky-font-size-heading-3)/var(--sky-font-line_height-heading-3) var(--sky-font-family-sans);
403
- --sky-type-heading-2: var(--sky-font-style-heading-2) var(--sky-font-size-heading-2)/var(--sky-font-line_height-heading-2) var(--sky-font-family-sans);
404
- --sky-type-heading-1: var(--sky-font-style-heading-1) var(--sky-font-size-heading-1)/var(--sky-font-line_height-heading-1) var(--sky-font-family-sans);
405
- --sky-type-data_label: var(--sky-font-style-data_label) var(--sky-font-size-data_label)/var(--sky-font-line_height-data_label) var(--sky-font-family-sans);
438
+ --sky-font-family-monospaced: var(--bb-font-monospaced-family);
439
+ --sky-font-family-primary: var(--bb-font-blkb_sans-family);
440
+ --sky-type-metric-l: var(--sky-font-style-metric-l) var(--sky-font-size-metric-l)/var(--sky-font-line_height-metric-l) var(--sky-font-family-primary);
441
+ --sky-type-metric-m: var(--sky-font-style-metric-m) var(--sky-font-size-metric-m)/var(--sky-font-line_height-metric-m) var(--sky-font-family-primary);
442
+ --sky-type-metric-s: var(--sky-font-style-metric-s) var(--sky-font-size-metric-s)/var(--sky-font-line_height-metric-s) var(--sky-font-family-primary);
443
+ --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/var(--sky-font-line_height-input-val) var(--sky-font-family-primary);
444
+ --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);
445
+ --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/var(--sky-font-line_height-hint-m) var(--sky-font-family-primary);
446
+ --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/var(--sky-font-line_height-hint-s) var(--sky-font-family-primary);
447
+ --sky-type-display-4: var(--sky-font-style-display-4) var(--sky-font-size-display-4)/var(--sky-font-line_height-display-4) var(--sky-font-family-primary);
448
+ --sky-type-display-3: var(--sky-font-style-display-3) var(--sky-font-size-display-3)/var(--sky-font-line_height-display-3) var(--sky-font-family-primary);
449
+ --sky-type-display-2: var(--sky-font-style-display-2) var(--sky-font-size-display-2)/var(--sky-font-line_height-display-2) var(--sky-font-family-primary);
450
+ --sky-type-display-1: var(--sky-font-style-display-1) var(--sky-font-size-display-1)/var(--sky-font-line_height-display-1) var(--sky-font-family-primary);
451
+ --sky-type-body-l: var(--sky-font-style-body-l) var(--sky-font-size-body-l)/var(--sky-font-line_height-body-l) var(--sky-font-family-primary);
452
+ --sky-type-body-m: var(--sky-font-style-body-m) var(--sky-font-size-body-m)/var(--sky-font-line_height-body-m) var(--sky-font-family-primary);
453
+ --sky-type-body-s: var(--sky-font-style-body-s) var(--sky-font-size-body-s)/var(--sky-font-line_height-body-s) var(--sky-font-family-primary);
454
+ --sky-type-heading-5: var(--sky-font-style-heading-5) var(--sky-font-size-heading-5)/var(--sky-font-line_height-heading-5) var(--sky-font-family-primary);
455
+ --sky-type-heading-4: var(--sky-font-style-heading-4) var(--sky-font-size-heading-4)/var(--sky-font-line_height-heading-4) var(--sky-font-family-primary);
456
+ --sky-type-heading-3: var(--sky-font-style-heading-3) var(--sky-font-size-heading-3)/var(--sky-font-line_height-heading-3) var(--sky-font-family-primary);
457
+ --sky-type-heading-2: var(--sky-font-style-heading-2) var(--sky-font-size-heading-2)/var(--sky-font-line_height-heading-2) var(--sky-font-family-primary);
458
+ --sky-type-heading-1: var(--sky-font-style-heading-1) var(--sky-font-size-heading-1)/var(--sky-font-line_height-heading-1) var(--sky-font-family-primary);
459
+ --sky-type-data_label: var(--sky-font-style-data_label) var(--sky-font-size-data_label)/var(--sky-font-line_height-data_label) var(--sky-font-family-primary);
406
460
  --sky-size-max_width-overlay_message: var(--bb-size-reading_container-max_width);
407
461
  --sky-size-width-viewport-smallest: var(--bb-size-fixed-2000);
408
- --sky-size-switch: var(--bb-size-fluid-125);
409
462
  --sky-size-illustration-xl: var(--bb-size-fluid-600);
410
463
  --sky-size-illustration-l: var(--bb-size-fluid-500);
411
464
  --sky-size-illustration-m: var(--bb-size-fluid-400);
@@ -414,6 +467,7 @@
414
467
  --sky-size-icon-l: var(--bb-size-fluid-150);
415
468
  --sky-size-icon-m: var(--bb-size-fluid-125);
416
469
  --sky-size-icon-s: var(--bb-size-fluid-100);
470
+ --sky-size-switch: var(--bb-size-fluid-125);
417
471
  --sky-space-stacked-xxl: var(--bb-size-fluid-300);
418
472
  --sky-space-stacked-xl: var(--bb-size-fluid-150);
419
473
  --sky-space-stacked-l: var(--bb-size-fluid-100);
@@ -426,37 +480,69 @@
426
480
  --sky-space-inline-m: var(--bb-size-fluid-75);
427
481
  --sky-space-inline-s: var(--bb-size-fluid-50);
428
482
  --sky-space-inline-xs: var(--bb-size-fluid-25);
429
- --sky-space-switch_inset: calc(var(--sky-size-switch)+var(--sky-space-label_gap-s));
430
- --sky-space-text_action_gap-l: var(--bb-size-fluid-100);
431
- --sky-space-text_action_gap-m: var(--bb-size-fluid-75);
432
- --sky-space-text_action_gap-s: var(--bb-size-fluid-50);
433
- --sky-space-text_action_gap-xs: var(--bb-size-fluid-25);
434
- --sky-space-text_action_gap-0: 0rem;
435
- --sky-space-stacked_supplemental-m: var(--bb-size-fluid-50);
436
- --sky-space-stacked_supplemental-s: var(--bb-size-fluid-25);
437
- --sky-space-stacked_supplemental-0: 0rem;
438
- --sky-space-label_gap-xl: var(--bb-size-fluid-100);
439
- --sky-space-label_gap-l: var(--bb-size-fluid-75);
440
- --sky-space-label_gap-m: var(--bb-size-fluid-50);
441
- --sky-space-label_gap-s: var(--bb-size-fluid-25);
442
- --sky-space-label_gap-xs: var(--bb-size-fluid-12);
443
- --sky-space-label_gap-xxs: var(--bb-size-fluid-6);
444
- --sky-space-label_gap-0: 0rem;
445
- --sky-space-icon_gap-xl: var(--bb-size-fluid-100);
446
- --sky-space-icon_gap-l: var(--bb-size-fluid-75);
447
- --sky-space-icon_gap-m: var(--bb-size-fluid-50);
448
- --sky-space-icon_gap-s: var(--bb-size-fluid-25);
449
- --sky-space-icon_gap-0: 0rem;
450
- --sky-space-form_gap-xl: var(--bb-size-fluid-150);
451
- --sky-space-form_gap-l: var(--bb-size-fluid-100);
452
- --sky-space-form_gap-m: var(--bb-size-fluid-75);
453
- --sky-space-form_gap-s: var(--bb-size-fluid-50);
454
- --sky-space-form_gap-0: 0rem;
455
- --sky-space-action_group_gap-xl: var(--bb-size-fluid-100);
456
- --sky-space-action_group_gap-l: var(--bb-size-fluid-75);
457
- --sky-space-action_group_gap-m: var(--bb-size-fluid-50);
458
- --sky-space-action_group_gap-s: var(--bb-size-fluid-25);
459
- --sky-space-action_group_gap-0: 0rem;
483
+ --sky-space-gap-text_action-l: var(--bb-size-fluid-100);
484
+ --sky-space-gap-text_action-m: var(--bb-size-fluid-75);
485
+ --sky-space-gap-text_action-s: var(--bb-size-fluid-50);
486
+ --sky-space-gap-text_action-xs: var(--bb-size-fluid-25);
487
+ --sky-space-gap-text_action-0: 0rem;
488
+ --sky-space-gap-stacked_supplemental-m: var(--bb-size-fluid-50);
489
+ --sky-space-gap-stacked_supplemental-s: var(--bb-size-fluid-25);
490
+ --sky-space-gap-stacked_supplemental-0: 0rem;
491
+ --sky-space-gap-label-xl: var(--bb-size-fluid-100);
492
+ --sky-space-gap-label-l: var(--bb-size-fluid-75);
493
+ --sky-space-gap-label-m: var(--bb-size-fluid-50);
494
+ --sky-space-gap-label-s: var(--bb-size-fluid-25);
495
+ --sky-space-gap-label-xs: var(--bb-size-fluid-12);
496
+ --sky-space-gap-label-xxs: var(--bb-size-fluid-6);
497
+ --sky-space-gap-label-0: 0rem;
498
+ --sky-space-gap-icon-xl: var(--bb-size-fluid-100);
499
+ --sky-space-gap-icon-l: var(--bb-size-fluid-75);
500
+ --sky-space-gap-icon-m: var(--bb-size-fluid-50);
501
+ --sky-space-gap-icon-s: var(--bb-size-fluid-25);
502
+ --sky-space-gap-icon-0: 0rem;
503
+ --sky-space-gap-form-xl: var(--bb-size-fluid-150);
504
+ --sky-space-gap-form-l: var(--bb-size-fluid-100);
505
+ --sky-space-gap-form-m: var(--bb-size-fluid-75);
506
+ --sky-space-gap-form-s: var(--bb-size-fluid-50);
507
+ --sky-space-gap-form-0: 0rem;
508
+ --sky-space-gap-action_group-xl: var(--bb-size-fluid-100);
509
+ --sky-space-gap-action_group-l: var(--bb-size-fluid-75);
510
+ --sky-space-gap-action_group-m: var(--bb-size-fluid-50);
511
+ --sky-space-gap-action_group-s: var(--bb-size-fluid-25);
512
+ --sky-space-gap-action_group-0: 0rem;
513
+ --sky-space-inset-horizontal-left-xl: var(--bb-size-fluid-150);
514
+ --sky-space-inset-horizontal-left-l: var(--bb-size-fluid-100);
515
+ --sky-space-inset-horizontal-left-m: var(--bb-size-fluid-75);
516
+ --sky-space-inset-horizontal-left-s: var(--bb-size-fluid-50);
517
+ --sky-space-inset-horizontal-bottom-xl: var(--bb-size-fluid-0);
518
+ --sky-space-inset-horizontal-bottom-l: var(--bb-size-fluid-0);
519
+ --sky-space-inset-horizontal-bottom-m: var(--bb-size-fluid-0);
520
+ --sky-space-inset-horizontal-bottom-s: var(--bb-size-fluid-0);
521
+ --sky-space-inset-horizontal-right-xl: var(--bb-size-fluid-150);
522
+ --sky-space-inset-horizontal-right-l: var(--bb-size-fluid-100);
523
+ --sky-space-inset-horizontal-right-m: var(--bb-size-fluid-75);
524
+ --sky-space-inset-horizontal-right-s: var(--bb-size-fluid-50);
525
+ --sky-space-inset-horizontal-top-xl: var(--bb-size-fluid-0);
526
+ --sky-space-inset-horizontal-top-l: var(--bb-size-fluid-0);
527
+ --sky-space-inset-horizontal-top-m: var(--bb-size-fluid-0);
528
+ --sky-space-inset-horizontal-top-s: var(--bb-size-fluid-0);
529
+ --sky-space-inset-vertical-left-xl: var(--bb-size-fluid-0);
530
+ --sky-space-inset-vertical-left-l: var(--bb-size-fluid-0);
531
+ --sky-space-inset-vertical-left-m: var(--bb-size-fluid-0);
532
+ --sky-space-inset-vertical-left-s: var(--bb-size-fluid-0);
533
+ --sky-space-inset-vertical-bottom-xl: var(--bb-size-fluid-150);
534
+ --sky-space-inset-vertical-bottom-l: var(--bb-size-fluid-100);
535
+ --sky-space-inset-vertical-bottom-m: var(--bb-size-fluid-75);
536
+ --sky-space-inset-vertical-bottom-s: var(--bb-size-fluid-50);
537
+ --sky-space-inset-vertical-right-xl: var(--bb-size-fluid-0);
538
+ --sky-space-inset-vertical-right-l: var(--bb-size-fluid-0);
539
+ --sky-space-inset-vertical-right-m: var(--bb-size-fluid-0);
540
+ --sky-space-inset-vertical-right-s: var(--bb-size-fluid-0);
541
+ --sky-space-inset-vertical-top-xl: var(--bb-size-fluid-150);
542
+ --sky-space-inset-vertical-top-l: var(--bb-size-fluid-100);
543
+ --sky-space-inset-vertical-top-m: var(--bb-size-fluid-75);
544
+ --sky-space-inset-vertical-top-s: var(--bb-size-fluid-50);
545
+ --sky-space-inset-switch: calc(var(--sky-size-switch)+var(--sky-space-gap-label-s));
460
546
  --sky-space-inset-tabs-xl: var(--bb-size-fluid-150);
461
547
  --sky-space-inset-tabs-l: var(--bb-size-fluid-100);
462
548
  --sky-space-inset-tabs-m: var(--bb-size-fluid-75);
package/scss/modern.css CHANGED
@@ -12,11 +12,14 @@
12
12
  --modern-shadow-size-0: 0 0 0 0 #000000;
13
13
  --modern-letter_spacing-normal: normal;
14
14
  --modern-line-height-normal: normal;
15
+ --modern-line-height-150: 1.5;
15
16
  --modern-line-height-115: 1.15;
16
17
  --modern-line-height-110: 1.1;
17
18
  --modern-line-height-20: 20px;
18
- --modern-font-family-sans: var(--modern-font-name), Helvetica Neue, Arial, sans-serif;
19
- --modern-font-name: 'BLKB Sans';
19
+ --modern-font-blkb_sans-family: var(--modern-font-blkb_sans-name), var(--modern-font-blkb_sans-fallback);
20
+ --modern-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
21
+ --modern-font-blkb_sans-name: BLKB Sans;
22
+ --modern-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
20
23
  --modern-font-style-bold: 700;
21
24
  --modern-font-style-semibold: 600;
22
25
  --modern-font-style-italic-style: italic;
@@ -39,6 +42,7 @@
39
42
  --modern-font-size-150: 14px;
40
43
  --modern-font-size-125: 13px;
41
44
  --modern-font-size-100: 12px;
45
+ --modern-size-400: 400px;
42
46
  --modern-size-320: 320px;
43
47
  --modern-size-296: 296px;
44
48
  --modern-size-276: 276px;
@@ -47,6 +51,7 @@
47
51
  --modern-size-80: 80px;
48
52
  --modern-size-64: 64px;
49
53
  --modern-size-48: 48px;
54
+ --modern-size-44: 44px;
50
55
  --modern-size-32: 32px;
51
56
  --modern-size-30: 30px;
52
57
  --modern-size-26: 26px;
@@ -55,6 +60,7 @@
55
60
  --modern-size-16: 16px;
56
61
  --modern-size-15: 15px;
57
62
  --modern-size-13: 13px;
63
+ --modern-size-12: 12px;
58
64
  --modern-size-10: 10px;
59
65
  --modern-size-9: 9px;
60
66
  --modern-size-8: 8px;
@@ -73,20 +79,22 @@
73
79
  --modern-space-s: 10px;
74
80
  --modern-space-xs: 5px;
75
81
  --modern-space-none: 0rem;
76
- --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
77
82
  --modern-color-sky_blue-40: #40c7f4;
78
83
  --modern-color-sky_blue-20: #bfecfb;
79
84
  --modern-color-yellow-50: #fbb034;
80
85
  --modern-color-yellow-30: #ffd597;
81
86
  --modern-color-green-50: #72bf44;
82
87
  --modern-color-green-30: #b7da9b;
83
- --modern-color-white: #ffffff;
84
88
  --modern-color-blue-05: #ebfbff;
85
89
  --modern-color-blue-74: #1870b8;
86
90
  --modern-color-blue-50: #00b4f1;
87
91
  --modern-color-blue-30: #81d4f7;
88
92
  --modern-color-blue-10: #c1e8fb;
93
+ --modern-color-scrim: rgba(0, 0, 0, 0.5);
94
+ --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
89
95
  --modern-color-transparent: rgba(0, 0, 0, 0);
96
+ --modern-color-black: #000000;
97
+ --modern-color-white: #ffffff;
90
98
  --modern-color-red-70: #d93a3d;
91
99
  --modern-color-red-50: #ef4044;
92
100
  --modern-color-red-30: #f7a08f;
@@ -114,13 +122,26 @@
114
122
  --sky-color-border-input-active: var(--modern-color-blue-74);
115
123
  --sky-color-border-input-hover: var(--modern-color-blue-74);
116
124
  --sky-color-border-input-base: var(--modern-color-gray-15);
125
+ --sky-color-border-action-danger-disabled: var(--modern-color-gray-15);
126
+ --sky-color-border-action-danger-focus: var(--modern-color-red-30);
127
+ --sky-color-border-action-danger-active: var(--modern-color-red-30);
128
+ --sky-color-border-action-danger-hover: var(--modern-color-red-30);
129
+ --sky-color-border-action-danger-base: var(--modern-color-red-70);
130
+ --sky-color-border-action-tertiary-disabled: var(--modern-color-gray-15);
117
131
  --sky-color-border-action-tertiary-active: var(--modern-color-blue-74);
118
132
  --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
119
133
  --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
120
134
  --sky-color-border-action-tertiary-base: var(--modern-color-transparent);
135
+ --sky-color-border-action-secondary-disabled: var(--modern-color-gray-15);
136
+ --sky-color-border-action-secondary-focus: var(--modern-color-blue-74);
137
+ --sky-color-border-action-secondary-active: var(--modern-color-blue-74);
138
+ --sky-color-border-action-secondary-hover: var(--modern-color-blue-74);
121
139
  --sky-color-border-action-secondary-base: var(--modern-color-gray-15);
140
+ --sky-color-border-action-primary-disabled: var(--modern-color-gray-15);
141
+ --sky-color-border-action-primary-focus: var(--modern-color-blue-10);
142
+ --sky-color-border-action-primary-active: var(--modern-color-blue-10);
143
+ --sky-color-border-action-primary-hover: var(--modern-color-blue-10);
122
144
  --sky-color-border-action-primary-base: var(--modern-color-blue-74);
123
- --sky-color-border-action-disabled: var(--modern-color-gray-15);
124
145
  --sky-color-border-container-base: var(--modern-color-gray-15);
125
146
  --sky-color-border-elevation: var(--modern-color-gray-15);
126
147
  --sky-color-border-divider: var(--modern-color-gray-15);
@@ -129,17 +150,47 @@
129
150
  --sky-color-border-warning: var(--modern-color-yellow-50);
130
151
  --sky-color-border-danger: var(--modern-color-red-50);
131
152
  --sky-color-border-selected: var(--modern-color-blue-74);
153
+ --sky-color-background-list-disabled: var(--modern-color-gray-07);
154
+ --sky-color-background-list-focus: var(--modern-color-transparent);
155
+ --sky-color-background-list-active: var(--modern-color-transparent);
156
+ --sky-color-background-list-hover: var(--modern-color-transparent);
157
+ --sky-color-background-list-base: var(--modern-color-transparent);
158
+ --sky-color-background-nav-disabled: var(--modern-color-gray-07);
159
+ --sky-color-background-nav-focus: var(--modern-color-transparent);
160
+ --sky-color-background-nav-active: var(--modern-color-transparent);
161
+ --sky-color-background-nav-hover: var(--modern-color-transparent);
162
+ --sky-color-background-nav-base: var(--modern-color-transparent);
163
+ --sky-color-background-input-disabled: var(--modern-color-gray-07);
164
+ --sky-color-background-input-base: var(--modern-color-transparent);
165
+ --sky-color-background-selected-soft: var(--modern-color-blue-05);
166
+ --sky-color-background-selected-heavy: var(--modern-color-blue-05);
167
+ --sky-color-background-action-danger-disabled: var(--modern-color-gray-07);
168
+ --sky-color-background-action-danger-focus: var(--modern-color-red-70);
169
+ --sky-color-background-action-danger-active: var(--modern-color-red-70);
170
+ --sky-color-background-action-danger-hover: var(--modern-color-red-70);
132
171
  --sky-color-background-action-danger-base: var(--modern-color-red-70);
172
+ --sky-color-background-action-tertiary-disabled: var(--modern-color-gray-07);
173
+ --sky-color-background-action-tertiary-focus: var(--modern-color-transparent);
174
+ --sky-color-background-action-tertiary-active: var(--modern-color-transparent);
175
+ --sky-color-background-action-tertiary-hover: var(--modern-color-transparent);
133
176
  --sky-color-background-action-tertiary-base: var(--modern-color-transparent);
177
+ --sky-color-background-action-secondary-disabled: var(--modern-color-gray-07);
178
+ --sky-color-background-action-secondary-focus: var(--modern-color-white);
179
+ --sky-color-background-action-secondary-active: var(--modern-color-white);
180
+ --sky-color-background-action-secondary-hover: var(--modern-color-white);
134
181
  --sky-color-background-action-secondary-base: var(--modern-color-white);
182
+ --sky-color-background-action-primary-disabled: var(--modern-color-gray-07);
183
+ --sky-color-background-action-primary-focus: var(--modern-color-blue-74);
184
+ --sky-color-background-action-primary-active: var(--modern-color-blue-74);
185
+ --sky-color-background-action-primary-hover: var(--modern-color-blue-74);
135
186
  --sky-color-background-action-primary-base: var(--modern-color-blue-74);
136
- --sky-color-background-action-disabled: var(--modern-color-gray-07);
137
187
  --sky-color-background-container-info: var(--modern-color-blue-10);
138
188
  --sky-color-background-container-success: var(--modern-color-green-30);
139
189
  --sky-color-background-container-warning: var(--modern-color-yellow-30);
140
190
  --sky-color-background-container-danger: var(--modern-color-red-30);
141
191
  --sky-color-background-container-menu: var(--modern-color-white);
142
192
  --sky-color-background-container-base: var(--modern-color-white);
193
+ --sky-color-background-scrim: var(--modern-color-scrim);
143
194
  --sky-color-background-page: var(--modern-color-gray-005);
144
195
  --sky-color-icon-action: var(--modern-color-blue-74);
145
196
  --sky-color-icon-inverse: var(--modern-color-white);
@@ -157,9 +208,29 @@
157
208
  --sky-color-text-default: var(--modern-color-gray-105);
158
209
  }
159
210
  .sky-theme-modern {
211
+ --sky-font_face-blkb_sans-bold-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Bold.woff) format("woff");
212
+ --sky-font_face-blkb_sans-bold-weight: 700;
213
+ --sky-font_face-blkb_sans-bold-style: normal;
214
+ --sky-font_face-blkb_sans-semibold-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Semibold.woff) format("woff");
215
+ --sky-font_face-blkb_sans-semibold-weight: 600;
216
+ --sky-font_face-blkb_sans-semibold-style: normal;
217
+ --sky-font_face-blkb_sans-light-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Light.woff) format("woff");
218
+ --sky-font_face-blkb_sans-light-weight: 300;
219
+ --sky-font_face-blkb_sans-light-style: normal;
220
+ --sky-font_face-blkb_sans-thin-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Thin.woff) format("woff");
221
+ --sky-font_face-blkb_sans-thin-weight: 100;
222
+ --sky-font_face-blkb_sans-thin-style: normal;
223
+ --sky-font_face-blkb_sans-italic-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff) format("woff");
224
+ --sky-font_face-blkb_sans-italic-weight: 400;
225
+ --sky-font_face-blkb_sans-italic-style: italic;
226
+ --sky-font_face-blkb_sans-regular-src: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff") format("woff");
227
+ --sky-font_face-blkb_sans-regular-weight: 400;
228
+ --sky-font_face-blkb_sans-regular-style: normal;
229
+ --sky-font_face-blkb_sans-name: var(--modern-font-blkb_sans-name);
160
230
  --sky-border-style-separator-row: var(--modern-border-style-dotted);
161
231
  --sky-border-style-separator-dark: var(--modern-border-style-solid);
162
232
  --sky-border-style-elevation: var(--modern-border-style-solid);
233
+ --sky-border-style-divider: var(--modern-border-style-solid);
163
234
  --sky-border-style-accent: var(--modern-border-style-solid);
164
235
  --sky-border-radius-pill: var(--modern-border-radius-pill);
165
236
  --sky-border-radius-m: var(--modern-size-6);
@@ -186,10 +257,8 @@
186
257
  --sky-border-width-elevation: var(--modern-size-1);
187
258
  --sky-border-width-divider: var(--modern-size-1);
188
259
  --sky-border-width-accent: var(--modern-size-7);
189
- --sky-text-font_family: var(--modern-font-name);
190
260
  --sky-size-max_width-overlay_message: var(--modern-size-236);
191
261
  --sky-size-width-viewport-smallest: var(--modern-size-296);
192
- --sky-size-switch: var(--modern-size-26);
193
262
  --sky-size-illustration-xl: var(--modern-size-96);
194
263
  --sky-size-illustration-l: var(--modern-size-80);
195
264
  --sky-size-illustration-m: var(--modern-size-64);
@@ -198,6 +267,7 @@
198
267
  --sky-size-icon-l: var(--modern-size-24);
199
268
  --sky-size-icon-m: var(--modern-size-20);
200
269
  --sky-size-icon-s: var(--modern-size-16);
270
+ --sky-size-switch: var(--modern-size-26);
201
271
  --sky-space-stacked-xxl: var(--modern-space-xxl);
202
272
  --sky-space-stacked-xl: var(--modern-space-xl);
203
273
  --sky-space-stacked-l: var(--modern-space-lg);
@@ -210,22 +280,69 @@
210
280
  --sky-space-inline-m: var(--modern-space-md);
211
281
  --sky-space-inline-s: var(--modern-space-s);
212
282
  --sky-space-inline-xs: var(--modern-space-xs);
213
- --sky-space-text_action_gap-l: var(--modern-space-lg);
214
- --sky-space-text_action_gap-m: var(--modern-space-md);
215
- --sky-space-text_action_gap-xs: var(--modern-space-xs);
216
- --sky-space-stacked_supplemental-s: var(--modern-space-xs);
217
- --sky-space-stacked_supplemental-0: 0rem;
218
- --sky-space-label_gap-s: var(--modern-space-xs);
219
- --sky-space-label_gap-xs: var(--modern-size-2);
220
- --sky-space-label_gap-xxs: var(--modern-size-1);
221
- --sky-space-label_gap-0: 0rem;
222
- --sky-space-icon_gap-l: var(--modern-space-md);
223
- --sky-space-icon_gap-m: var(--modern-space-s);
224
- --sky-space-icon_gap-s: var(--modern-space-xs);
225
- --sky-space-form_gap-xl: var(--modern-space-xl);
226
- --sky-space-form_gap-l: var(--modern-space-lg);
227
- --sky-space-form_gap-m: var(--modern-space-md);
228
- --sky-space-form_gap-s: var(--modern-space-s);
283
+ --sky-space-gap-text_action-l: var(--modern-space-lg);
284
+ --sky-space-gap-text_action-m: var(--modern-space-md);
285
+ --sky-space-gap-text_action-s: var(--modern-space-s);
286
+ --sky-space-gap-text_action-xs: var(--modern-space-xs);
287
+ --sky-space-gap-text_action-0: 0rem;
288
+ --sky-space-gap-stacked_supplemental-m: var(--modern-size-10);
289
+ --sky-space-gap-stacked_supplemental-s: var(--modern-size-5);
290
+ --sky-space-gap-stacked_supplemental-0: 0rem;
291
+ --sky-space-gap-label-xl: var(--modern-size-20);
292
+ --sky-space-gap-label-l: var(--modern-size-15);
293
+ --sky-space-gap-label-m: var(--modern-size-10);
294
+ --sky-space-gap-label-s: var(--modern-size-5);
295
+ --sky-space-gap-label-xs: var(--modern-size-2);
296
+ --sky-space-gap-label-xxs: var(--modern-size-1);
297
+ --sky-space-gap-label-0: 0rem;
298
+ --sky-space-gap-icon-xl: var(--modern-size-20);
299
+ --sky-space-gap-icon-l: var(--modern-size-15);
300
+ --sky-space-gap-icon-m: var(--modern-size-10);
301
+ --sky-space-gap-icon-s: var(--modern-size-5);
302
+ --sky-space-gap-icon-0: 0rem;
303
+ --sky-space-gap-form-xl: var(--modern-space-xl);
304
+ --sky-space-gap-form-l: var(--modern-space-lg);
305
+ --sky-space-gap-form-m: var(--modern-space-md);
306
+ --sky-space-gap-form-s: var(--modern-space-s);
307
+ --sky-space-gap-form-0: 0rem;
308
+ --sky-space-gap-action_group-xl: var(--modern-size-20);
309
+ --sky-space-gap-action_group-l: var(--modern-size-15);
310
+ --sky-space-gap-action_group-m: var(--modern-size-10);
311
+ --sky-space-gap-action_group-s: var(--modern-size-5);
312
+ --sky-space-gap-action_group-0: 0rem;
313
+ --sky-space-inset-horizontal-left-xl: var(--modern-space-xl);
314
+ --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
315
+ --sky-space-inset-horizontal-left-m: var(--modern-space-md);
316
+ --sky-space-inset-horizontal-left-s: var(--modern-space-s);
317
+ --sky-space-inset-horizontal-bottom-xl: var(--modern-size-0);
318
+ --sky-space-inset-horizontal-bottom-l: var(--modern-size-0);
319
+ --sky-space-inset-horizontal-bottom-m: var(--modern-size-0);
320
+ --sky-space-inset-horizontal-bottom-s: var(--modern-size-0);
321
+ --sky-space-inset-horizontal-right-xl: var(--modern-space-xl);
322
+ --sky-space-inset-horizontal-right-l: var(--modern-space-lg);
323
+ --sky-space-inset-horizontal-right-m: var(--modern-space-md);
324
+ --sky-space-inset-horizontal-right-s: var(--modern-space-s);
325
+ --sky-space-inset-horizontal-top-xl: var(--modern-size-0);
326
+ --sky-space-inset-horizontal-top-l: var(--modern-size-0);
327
+ --sky-space-inset-horizontal-top-m: var(--modern-size-0);
328
+ --sky-space-inset-horizontal-top-s: var(--modern-size-0);
329
+ --sky-space-inset-vertical-left-xl: var(--modern-size-0);
330
+ --sky-space-inset-vertical-left-l: var(--modern-size-0);
331
+ --sky-space-inset-vertical-left-m: var(--modern-size-0);
332
+ --sky-space-inset-vertical-left-s: var(--modern-size-0);
333
+ --sky-space-inset-vertical-bottom-xl: var(--modern-space-xl);
334
+ --sky-space-inset-vertical-bottom-l: var(--modern-space-lg);
335
+ --sky-space-inset-vertical-bottom-m: var(--modern-space-md);
336
+ --sky-space-inset-vertical-bottom-s: var(--modern-space-s);
337
+ --sky-space-inset-vertical-right-xl: var(--modern-size-0);
338
+ --sky-space-inset-vertical-right-l: var(--modern-size-0);
339
+ --sky-space-inset-vertical-right-m: var(--modern-size-0);
340
+ --sky-space-inset-vertical-right-s: var(--modern-size-0);
341
+ --sky-space-inset-vertical-top-xl: var(--modern-space-xl);
342
+ --sky-space-inset-vertical-top-l: var(--modern-space-lg);
343
+ --sky-space-inset-vertical-top-m: var(--modern-space-md);
344
+ --sky-space-inset-vertical-top-s: var(--modern-space-s);
345
+ --sky-space-inset-switch: calc(var(--sky-size-switch)+var(--sky-space-gap-label-s));
229
346
  --sky-space-inset-tabs-xl: var(--modern-space-xl);
230
347
  --sky-space-inset-tabs-l: var(--modern-space-lg);
231
348
  --sky-space-inset-tabs-m: var(--modern-space-md);
@@ -302,7 +419,8 @@
302
419
  --sky-font-weight-emphasized: var(--modern-font-weight-bold);
303
420
  --sky-font-letter_spacing-hint-s: var(--modern-letter_spacing-normal);
304
421
  --sky-font-letter_spacing-input-label: var(--modern-letter_spacing-normal);
305
- --sky-font-family-sans: var(--modern-font-family-sans);
422
+ --sky-font-family-monospaced: var(--modern-font-monospaced-family);
423
+ --sky-font-family-primary: var(--modern-font-blkb_sans-family);
306
424
  --sky-font-style-metric-l: var(--modern-font-weight-regular);
307
425
  --sky-font-style-metric-m: var(--modern-font-weight-regular);
308
426
  --sky-font-style-metric-s: var(--modern-font-weight-bold);
@@ -344,7 +462,7 @@
344
462
  --sky-font-line_height-display-2: var(--modern-line-height-110);
345
463
  --sky-font-line_height-display-1: var(--modern-line-height-110);
346
464
  --sky-font-line_height-body-l: var(--modern-line-height-normal);
347
- --sky-font-line_height-body-m: var(--modern-line-height-normal);
465
+ --sky-font-line_height-body-m: var(--modern-line-height-150);
348
466
  --sky-font-line_height-body-s: var(--modern-line-height-normal);
349
467
  --sky-font-line_height-data_label: var(--modern-line-height-normal);
350
468
  --sky-font-size-metric-l: var(--sky-font-size-display-1);