@blackbaud/skyux-design-tokens 0.0.33 → 0.0.35

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 +17 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +92 -35
  4. package/scss/modern.css +69 -7
package/CHANGELOG.md CHANGED
@@ -2,6 +2,23 @@
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.35](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.34...0.0.35) (2024-10-02)
6
+
7
+
8
+ ### Features
9
+
10
+ * new tokens for underlining links ([#94](https://github.com/blackbaud/skyux-design-tokens/issues/94)) ([edfbf1d](https://github.com/blackbaud/skyux-design-tokens/commit/edfbf1ddd40dbd36af249c35706070d94c476d2b))
11
+
12
+ ## [0.0.34](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.33...0.0.34) (2024-10-02)
13
+
14
+
15
+ ### Features
16
+
17
+ * color fixes ([#90](https://github.com/blackbaud/skyux-design-tokens/issues/90)) ([baba566](https://github.com/blackbaud/skyux-design-tokens/commit/baba566a829fdcf589a0033aed3515bd9c78690f))
18
+ * 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))
19
+ * 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))
20
+ * new inset padding ([#93](https://github.com/blackbaud/skyux-design-tokens/issues/93)) ([f7705fb](https://github.com/blackbaud/skyux-design-tokens/commit/f7705fb515a280a70551af7fd9465f945ce0b26a))
21
+
5
22
  ## [0.0.33](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.32...0.0.33) (2024-09-27)
6
23
 
7
24
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.33",
3
+ "version": "0.0.35",
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
@@ -127,8 +127,10 @@
127
127
  --bb-line_height-100: 1.3333;
128
128
  --bb-letter_spacing-normal: normal;
129
129
  --bb-letter_spacing-wider: 0.32px;
130
- --bb-font-src-sans-italic: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff") format("woff");
131
- --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;
132
134
  --bb-font-style-semibold-italic-style: italic;
133
135
  --bb-font-style-semibold-italic-weight: 600;
134
136
  --bb-font-style-semibold: 600;
@@ -144,9 +146,6 @@
144
146
  --bb-font-weight-semibold: 600;
145
147
  --bb-font-weight-regular: 400;
146
148
  --bb-font-weight-light: 300;
147
- --bb-font-family-sans: var(--bb-font-name), Helvetica Neue, Arial, sans-serif;
148
- --bb-font-family-monospaced: Menlo, Monaco, Consolas, 'Courier New', monospace;
149
- --bb-font-name: 'BLKB Sans';
150
149
  --bb-font-size-1000: 3.25rem;
151
150
  --bb-font-size-900: 2.625rem;
152
151
  --bb-font-size-800: 2.25rem;
@@ -217,9 +216,9 @@
217
216
  --sky-color-border-input-base: var(--bb-color-gray-100);
218
217
  --sky-color-border-container-base: var(--bb-color-gray-100);
219
218
  --sky-color-border-action-danger-disabled: var(--bb-color-gray-100);
220
- --sky-color-border-action-danger-active: var(--bb-color-red-600);
221
- --sky-color-border-action-danger-focus: var(--bb-color-red-600);
222
- --sky-color-border-action-danger-hover: var(--bb-color-red-600);
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);
223
222
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
224
223
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-100);
225
224
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
@@ -232,9 +231,9 @@
232
231
  --sky-color-border-action-secondary-hover: var(--bb-color-blue-600);
233
232
  --sky-color-border-action-secondary-base: var(--bb-color-gray-100);
234
233
  --sky-color-border-action-primary-disabled: var(--bb-color-gray-100);
235
- --sky-color-border-action-primary-focus: var(--bb-color-blue-600);
236
- --sky-color-border-action-primary-active: var(--bb-color-blue-600);
237
- --sky-color-border-action-primary-hover: var(--bb-color-blue-600);
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);
238
237
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
239
238
  --sky-color-border-elevation: var(--bb-color-gray-100);
240
239
  --sky-color-border-divider: var(--bb-color-gray-100);
@@ -291,7 +290,7 @@
291
290
  --sky-color-icon-success: var(--bb-color-green-600);
292
291
  --sky-color-icon-warning: var(--bb-color-yellow-600);
293
292
  --sky-color-icon-danger: var(--bb-color-red-600);
294
- --sky-color-icon-deemphasized: var(--sky-color-text-deemphasized);
293
+ --sky-color-icon-deemphasized: var(--bb-color-gray-600);
295
294
  --sky-color-icon-default: var(--bb-color-gray-900);
296
295
  --sky-color-text-heading: var(--bb-color-blue-800);
297
296
  --sky-color-text-inverse: var(--bb-color-white);
@@ -301,9 +300,29 @@
301
300
  --sky-color-text-default: var(--bb-color-gray-900);
302
301
  }
303
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);
304
322
  --sky-border-style-separator-row: var(--bb-border-style-dotted);
305
323
  --sky-border-style-separator-dark: var(--bb-border-style-solid);
306
324
  --sky-border-style-elevation: var(--bb-border-style-solid);
325
+ --sky-border-style-divider: var(--bb-border-style-solid);
307
326
  --sky-border-style-accent: var(--bb-border-style-solid);
308
327
  --sky-border-width-separator-row: var(--bb-size-fixed-6);
309
328
  --sky-border-width-separator-dark: var(--bb-size-fixed-6);
@@ -330,6 +349,12 @@
330
349
  --sky-border-radius-pill: var(--bb-border-radius-pill);
331
350
  --sky-border-radius-m: var(--bb-size-fluid-50);
332
351
  --sky-border-radius-s: var(--bb-size-fluid-25);
352
+ --sky-font-text_decoration-inline_link-disabled: none;
353
+ --sky-font-text_decoration-inline_link-focus: none;
354
+ --sky-font-text_decoration-inline_link-active: underline;
355
+ --sky-font-text_decoration-inline_link-hover: underline;
356
+ --sky-font-text_decoration-inline_link-base: none;
357
+ --sky-font-text_decoration-visible_link: underline;
333
358
  --sky-font-weight-metric-l: var(--bb-font-weight-light);
334
359
  --sky-font-weight-metric-m: var(--bb-font-weight-regular);
335
360
  --sky-font-weight-metric-s: var(--bb-font-weight-semibold);
@@ -416,31 +441,30 @@
416
441
  --sky-font-size-body-m: var(--bb-font-size-200);
417
442
  --sky-font-size-body-s: var(--bb-font-size-100);
418
443
  --sky-font-size-data_label: var(--bb-font-size-200);
419
- --sky-font-family-monospaced: var(--bb-font-family-monospaced);
420
- --sky-font-family-sans: var(--bb-font-family-sans);
421
- --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);
422
- --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);
423
- --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);
424
- --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);
425
- --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);
426
- --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/var(--sky-font-line_height-hint-m) var(--sky-font-family-sans);
427
- --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/var(--sky-font-line_height-hint-s) var(--sky-font-family-sans);
428
- --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);
429
- --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);
430
- --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);
431
- --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);
432
- --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);
433
- --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);
434
- --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);
435
- --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);
436
- --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);
437
- --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);
438
- --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);
439
- --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);
440
- --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);
444
+ --sky-font-family-monospaced: var(--bb-font-monospaced-family);
445
+ --sky-font-family-primary: var(--bb-font-blkb_sans-family);
446
+ --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);
447
+ --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);
448
+ --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);
449
+ --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);
450
+ --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);
451
+ --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/var(--sky-font-line_height-hint-m) var(--sky-font-family-primary);
452
+ --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/var(--sky-font-line_height-hint-s) var(--sky-font-family-primary);
453
+ --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);
454
+ --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);
455
+ --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);
456
+ --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);
457
+ --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);
458
+ --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);
459
+ --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);
460
+ --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);
461
+ --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);
462
+ --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);
463
+ --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);
464
+ --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);
465
+ --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);
441
466
  --sky-size-max_width-overlay_message: var(--bb-size-reading_container-max_width);
442
467
  --sky-size-width-viewport-smallest: var(--bb-size-fixed-2000);
443
- --sky-size-switch: var(--bb-size-fluid-125);
444
468
  --sky-size-illustration-xl: var(--bb-size-fluid-600);
445
469
  --sky-size-illustration-l: var(--bb-size-fluid-500);
446
470
  --sky-size-illustration-m: var(--bb-size-fluid-400);
@@ -449,6 +473,7 @@
449
473
  --sky-size-icon-l: var(--bb-size-fluid-150);
450
474
  --sky-size-icon-m: var(--bb-size-fluid-125);
451
475
  --sky-size-icon-s: var(--bb-size-fluid-100);
476
+ --sky-size-switch: var(--bb-size-fluid-125);
452
477
  --sky-space-stacked-xxl: var(--bb-size-fluid-300);
453
478
  --sky-space-stacked-xl: var(--bb-size-fluid-150);
454
479
  --sky-space-stacked-l: var(--bb-size-fluid-100);
@@ -491,6 +516,38 @@
491
516
  --sky-space-gap-action_group-m: var(--bb-size-fluid-50);
492
517
  --sky-space-gap-action_group-s: var(--bb-size-fluid-25);
493
518
  --sky-space-gap-action_group-0: 0rem;
519
+ --sky-space-inset-horizontal-left-xl: var(--bb-size-fluid-150);
520
+ --sky-space-inset-horizontal-left-l: var(--bb-size-fluid-100);
521
+ --sky-space-inset-horizontal-left-m: var(--bb-size-fluid-75);
522
+ --sky-space-inset-horizontal-left-s: var(--bb-size-fluid-50);
523
+ --sky-space-inset-horizontal-bottom-xl: var(--bb-size-fluid-0);
524
+ --sky-space-inset-horizontal-bottom-l: var(--bb-size-fluid-0);
525
+ --sky-space-inset-horizontal-bottom-m: var(--bb-size-fluid-0);
526
+ --sky-space-inset-horizontal-bottom-s: var(--bb-size-fluid-0);
527
+ --sky-space-inset-horizontal-right-xl: var(--bb-size-fluid-150);
528
+ --sky-space-inset-horizontal-right-l: var(--bb-size-fluid-100);
529
+ --sky-space-inset-horizontal-right-m: var(--bb-size-fluid-75);
530
+ --sky-space-inset-horizontal-right-s: var(--bb-size-fluid-50);
531
+ --sky-space-inset-horizontal-top-xl: var(--bb-size-fluid-0);
532
+ --sky-space-inset-horizontal-top-l: var(--bb-size-fluid-0);
533
+ --sky-space-inset-horizontal-top-m: var(--bb-size-fluid-0);
534
+ --sky-space-inset-horizontal-top-s: var(--bb-size-fluid-0);
535
+ --sky-space-inset-vertical-left-xl: var(--bb-size-fluid-0);
536
+ --sky-space-inset-vertical-left-l: var(--bb-size-fluid-0);
537
+ --sky-space-inset-vertical-left-m: var(--bb-size-fluid-0);
538
+ --sky-space-inset-vertical-left-s: var(--bb-size-fluid-0);
539
+ --sky-space-inset-vertical-bottom-xl: var(--bb-size-fluid-150);
540
+ --sky-space-inset-vertical-bottom-l: var(--bb-size-fluid-100);
541
+ --sky-space-inset-vertical-bottom-m: var(--bb-size-fluid-75);
542
+ --sky-space-inset-vertical-bottom-s: var(--bb-size-fluid-50);
543
+ --sky-space-inset-vertical-right-xl: var(--bb-size-fluid-0);
544
+ --sky-space-inset-vertical-right-l: var(--bb-size-fluid-0);
545
+ --sky-space-inset-vertical-right-m: var(--bb-size-fluid-0);
546
+ --sky-space-inset-vertical-right-s: var(--bb-size-fluid-0);
547
+ --sky-space-inset-vertical-top-xl: var(--bb-size-fluid-150);
548
+ --sky-space-inset-vertical-top-l: var(--bb-size-fluid-100);
549
+ --sky-space-inset-vertical-top-m: var(--bb-size-fluid-75);
550
+ --sky-space-inset-vertical-top-s: var(--bb-size-fluid-50);
494
551
  --sky-space-inset-switch: calc(var(--sky-size-switch)+var(--sky-space-gap-label-s));
495
552
  --sky-space-inset-tabs-xl: var(--bb-size-fluid-150);
496
553
  --sky-space-inset-tabs-l: var(--bb-size-fluid-100);
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;
@@ -48,6 +51,7 @@
48
51
  --modern-size-80: 80px;
49
52
  --modern-size-64: 64px;
50
53
  --modern-size-48: 48px;
54
+ --modern-size-44: 44px;
51
55
  --modern-size-32: 32px;
52
56
  --modern-size-30: 30px;
53
57
  --modern-size-26: 26px;
@@ -56,6 +60,7 @@
56
60
  --modern-size-16: 16px;
57
61
  --modern-size-15: 15px;
58
62
  --modern-size-13: 13px;
63
+ --modern-size-12: 12px;
59
64
  --modern-size-10: 10px;
60
65
  --modern-size-9: 9px;
61
66
  --modern-size-8: 8px;
@@ -137,7 +142,6 @@
137
142
  --sky-color-border-action-primary-active: var(--modern-color-blue-10);
138
143
  --sky-color-border-action-primary-hover: var(--modern-color-blue-10);
139
144
  --sky-color-border-action-primary-base: var(--modern-color-blue-74);
140
- --sky-color-border-action-disabled: var(--modern-color-gray-15);
141
145
  --sky-color-border-container-base: var(--modern-color-gray-15);
142
146
  --sky-color-border-elevation: var(--modern-color-gray-15);
143
147
  --sky-color-border-divider: var(--modern-color-gray-15);
@@ -204,9 +208,29 @@
204
208
  --sky-color-text-default: var(--modern-color-gray-105);
205
209
  }
206
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);
207
230
  --sky-border-style-separator-row: var(--modern-border-style-dotted);
208
231
  --sky-border-style-separator-dark: var(--modern-border-style-solid);
209
232
  --sky-border-style-elevation: var(--modern-border-style-solid);
233
+ --sky-border-style-divider: var(--modern-border-style-solid);
210
234
  --sky-border-style-accent: var(--modern-border-style-solid);
211
235
  --sky-border-radius-pill: var(--modern-border-radius-pill);
212
236
  --sky-border-radius-m: var(--modern-size-6);
@@ -233,10 +257,8 @@
233
257
  --sky-border-width-elevation: var(--modern-size-1);
234
258
  --sky-border-width-divider: var(--modern-size-1);
235
259
  --sky-border-width-accent: var(--modern-size-7);
236
- --sky-text-font_family: var(--modern-font-name);
237
260
  --sky-size-max_width-overlay_message: var(--modern-size-236);
238
261
  --sky-size-width-viewport-smallest: var(--modern-size-296);
239
- --sky-size-switch: var(--modern-size-26);
240
262
  --sky-size-illustration-xl: var(--modern-size-96);
241
263
  --sky-size-illustration-l: var(--modern-size-80);
242
264
  --sky-size-illustration-m: var(--modern-size-64);
@@ -245,6 +267,7 @@
245
267
  --sky-size-icon-l: var(--modern-size-24);
246
268
  --sky-size-icon-m: var(--modern-size-20);
247
269
  --sky-size-icon-s: var(--modern-size-16);
270
+ --sky-size-switch: var(--modern-size-26);
248
271
  --sky-space-stacked-xxl: var(--modern-space-xxl);
249
272
  --sky-space-stacked-xl: var(--modern-space-xl);
250
273
  --sky-space-stacked-l: var(--modern-space-lg);
@@ -287,6 +310,38 @@
287
310
  --sky-space-gap-action_group-m: var(--modern-size-10);
288
311
  --sky-space-gap-action_group-s: var(--modern-size-5);
289
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);
290
345
  --sky-space-inset-switch: calc(var(--sky-size-switch)+var(--sky-space-gap-label-s));
291
346
  --sky-space-inset-tabs-xl: var(--modern-space-xl);
292
347
  --sky-space-inset-tabs-l: var(--modern-space-lg);
@@ -342,6 +397,12 @@
342
397
  --sky-space-inset-balanced-m: var(--modern-space-md);
343
398
  --sky-space-inset-balanced-s: var(--modern-space-s);
344
399
  --sky-space-inset-balanced-xs: var(--modern-space-xs);
400
+ --sky-font-text_decoration-inline_link-disabled: none;
401
+ --sky-font-text_decoration-inline_link-focus: none;
402
+ --sky-font-text_decoration-inline_link-active: underline;
403
+ --sky-font-text_decoration-inline_link-hover: underline;
404
+ --sky-font-text_decoration-inline_link-base: none;
405
+ --sky-font-text_decoration-visible_link: underline;
345
406
  --sky-font-weight-metric-l: var(--modern-font-weight-regular);
346
407
  --sky-font-weight-metric-m: var(--modern-font-weight-regular);
347
408
  --sky-font-weight-metric-s: var(--modern-font-weight-bold);
@@ -364,7 +425,8 @@
364
425
  --sky-font-weight-emphasized: var(--modern-font-weight-bold);
365
426
  --sky-font-letter_spacing-hint-s: var(--modern-letter_spacing-normal);
366
427
  --sky-font-letter_spacing-input-label: var(--modern-letter_spacing-normal);
367
- --sky-font-family-sans: var(--modern-font-family-sans);
428
+ --sky-font-family-monospaced: var(--modern-font-monospaced-family);
429
+ --sky-font-family-primary: var(--modern-font-blkb_sans-family);
368
430
  --sky-font-style-metric-l: var(--modern-font-weight-regular);
369
431
  --sky-font-style-metric-m: var(--modern-font-weight-regular);
370
432
  --sky-font-style-metric-s: var(--modern-font-weight-bold);
@@ -406,7 +468,7 @@
406
468
  --sky-font-line_height-display-2: var(--modern-line-height-110);
407
469
  --sky-font-line_height-display-1: var(--modern-line-height-110);
408
470
  --sky-font-line_height-body-l: var(--modern-line-height-normal);
409
- --sky-font-line_height-body-m: var(--modern-line-height-normal);
471
+ --sky-font-line_height-body-m: var(--modern-line-height-150);
410
472
  --sky-font-line_height-body-s: var(--modern-line-height-normal);
411
473
  --sky-font-line_height-data_label: var(--modern-line-height-normal);
412
474
  --sky-font-size-metric-l: var(--sky-font-size-display-1);