@blackbaud/skyux-design-tokens 0.0.44 → 0.0.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,24 @@
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.46](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.45...0.0.46) (2025-03-14)
6
+
7
+
8
+ ### Features
9
+
10
+ * darkening success colors for increased contrast 3.07:1 with white ([#142](https://github.com/blackbaud/skyux-design-tokens/issues/142)) ([07dd200](https://github.com/blackbaud/skyux-design-tokens/commit/07dd2006a86a1ed609ea1dcaaf8ed72a2ebb7c6c))
11
+ * new icons sizes for full range ([#137](https://github.com/blackbaud/skyux-design-tokens/issues/137)) ([0af15b0](https://github.com/blackbaud/skyux-design-tokens/commit/0af15b0cb735a5511f65cdd496a740ca0c6e4d9d))
12
+ * new tokens for icon decoration ([#138](https://github.com/blackbaud/skyux-design-tokens/issues/138)) ([1b98ed1](https://github.com/blackbaud/skyux-design-tokens/commit/1b98ed1259f4114ff4e20451a86da61a975aa7aa))
13
+
14
+ ## [0.0.45](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.44...0.0.45) (2025-02-18)
15
+
16
+
17
+ ### Features
18
+
19
+ * don't resolve math in token generation ([#134](https://github.com/blackbaud/skyux-design-tokens/issues/134)) ([0c9a31d](https://github.com/blackbaud/skyux-design-tokens/commit/0c9a31d1ee8b49e19b252611dafb95abf5ae3ff8))
20
+ * new tokens for avatar ([#130](https://github.com/blackbaud/skyux-design-tokens/issues/130)) ([7b82b08](https://github.com/blackbaud/skyux-design-tokens/commit/7b82b08bbe5cb0e12f328b78d2ec54afe137073d))
21
+ * new tokens for tree view including xs border radius ([#136](https://github.com/blackbaud/skyux-design-tokens/issues/136)) ([2e186b8](https://github.com/blackbaud/skyux-design-tokens/commit/2e186b87de931d6bff418199fb673033478bd026))
22
+
5
23
  ## [0.0.44](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.43...0.0.44) (2025-02-03)
6
24
 
7
25
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.44",
3
+ "version": "0.0.46",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",
@@ -15,8 +15,10 @@
15
15
  --bb-size-fixed-12: 2px;
16
16
  --bb-size-fixed-6: 1px;
17
17
  --bb-size-fluid-600: 6rem;
18
+ --bb-size-fluid-550: 5.5rem;
18
19
  --bb-size-fluid-500: 5rem;
19
20
  --bb-size-fluid-400: 4rem;
21
+ --bb-size-fluid-350: 3.5rem;
20
22
  --bb-size-fluid-300: 3rem;
21
23
  --bb-size-fluid-250: 2.5rem;
22
24
  --bb-size-fluid-225: 2.25rem;
@@ -29,6 +31,7 @@
29
31
  --bb-size-fluid-50: 0.5rem;
30
32
  --bb-size-fluid-37: 0.375rem;
31
33
  --bb-size-fluid-25: 0.25rem;
34
+ --bb-size-fluid-18: 0.1875rem;
32
35
  --bb-size-fluid-12: 0.125rem;
33
36
  --bb-size-fluid-6: 0.0625rem;
34
37
  --bb-size-fluid-0: 0rem;
@@ -62,7 +65,7 @@
62
65
  --bb-color-green-1000: #022b17;
63
66
  --bb-color-green-900: #05572e;
64
67
  --bb-color-green-800: #078245;
65
- --bb-color-green-700: #0aae5c;
68
+ --bb-color-green-700: #0aa959;
66
69
  --bb-color-green-600: #0cd973;
67
70
  --bb-color-green-500: #3de18f;
68
71
  --bb-color-green-400: #6de8ab;
@@ -113,19 +116,20 @@
113
116
  --bb-border-style-solid: solid;
114
117
  --bb-border-radius-round: 50%;
115
118
  --bb-border-radius-pill: 999rem;
116
- --bb-border-radius-050: 0.5rem;
117
- --bb-border-radius-025: 0.25rem;
119
+ --bb-border-radius-050: .5rem;
120
+ --bb-border-radius-012: .125rem;
121
+ --bb-border-radius-025: .25rem;
118
122
  --bb-border-radius-0: 0rem;
119
- --bb-line_height-1000: 1.2308;
120
- --bb-line_height-900: 1.1429;
121
- --bb-line_height-800: 1.1111;
122
- --bb-line_height-700: 1.25;
123
- --bb-line_height-600: 1.2857;
124
- --bb-line_height-500: 1.3333;
125
- --bb-line_height-400: 1.4;
126
- --bb-line_height-300: 1.5;
127
- --bb-line_height-200: 1.4286;
128
- --bb-line_height-100: 1.3333;
123
+ --bb-line_height-1000: calc(64/52);
124
+ --bb-line_height-900: calc(48/42);
125
+ --bb-line_height-800: calc(40/36);
126
+ --bb-line_height-700: calc(40/32);
127
+ --bb-line_height-600: calc(36/28);
128
+ --bb-line_height-500: calc(32/24);
129
+ --bb-line_height-400: calc(28/20);
130
+ --bb-line_height-300: calc(24/16);
131
+ --bb-line_height-200: calc(20/14);
132
+ --bb-line_height-100: calc(16/12);
129
133
  --bb-letter_spacing-normal: normal;
130
134
  --bb-letter_spacing-wider: 0.32px;
131
135
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
@@ -246,11 +250,13 @@
246
250
  --sky-color-border-elevation: var(--bb-color-gray-100);
247
251
  --sky-color-border-divider: var(--bb-color-gray-100);
248
252
  --sky-color-border-info: var(--bb-color-blue-600);
249
- --sky-color-border-success: var(--bb-color-green-600);
253
+ --sky-color-border-success: var(--bb-color-green-700);
250
254
  --sky-color-border-warning: var(--bb-color-yellow-600);
251
255
  --sky-color-border-danger: var(--bb-color-red-600);
252
256
  --sky-color-border-selected_soft: var(--bb-color-blue-300);
253
257
  --sky-color-border-selected: var(--bb-color-blue-600);
258
+ --sky-color-background-icon_matte: var(--bb-color-blue-100);
259
+ --sky-color-background-thumbnail_matte: var(--bb-color-white);
254
260
  --sky-color-background-file_drop: var(--bb-color-gray-25);
255
261
  --sky-color-background-list-disabled: var(--bb-color-gray-50);
256
262
  --sky-color-background-list-focus: var(--bb-color-transparent);
@@ -308,7 +314,7 @@
308
314
  --sky-color-icon-action: var(--bb-color-blue-600);
309
315
  --sky-color-icon-inverse: var(--bb-color-white);
310
316
  --sky-color-icon-info: var(--bb-color-blue-600);
311
- --sky-color-icon-success: var(--bb-color-green-600);
317
+ --sky-color-icon-success: var(--bb-color-green-700);
312
318
  --sky-color-icon-warning: var(--bb-color-yellow-600);
313
319
  --sky-color-icon-danger: var(--bb-color-red-600);
314
320
  --sky-color-icon-deemphasized: var(--bb-color-gray-600);
@@ -357,6 +363,7 @@
357
363
  --sky-border-radius-pill: var(--bb-border-radius-pill);
358
364
  --sky-border-radius-m: var(--bb-border-radius-050);
359
365
  --sky-border-radius-s: var(--bb-border-radius-025);
366
+ --sky-border-radius-xs: var(--bb-border-radius-012);
360
367
  --sky-border-radius-0: var(--bb-border-radius-0);
361
368
  --sky-font-text_decoration-inline_link-disabled: none;
362
369
  --sky-font-text_decoration-inline_link-focus: none;
@@ -364,9 +371,6 @@
364
371
  --sky-font-text_decoration-inline_link-hover: underline;
365
372
  --sky-font-text_decoration-inline_link-base: none;
366
373
  --sky-font-text_decoration-visible_link: underline;
367
- --sky-font-weight-metric-l: var(--bb-font-weight-light);
368
- --sky-font-weight-metric-m: var(--bb-font-weight-regular);
369
- --sky-font-weight-metric-s: var(--bb-font-weight-semibold);
370
374
  --sky-font-weight-input-label: var(--bb-font-weight-regular);
371
375
  --sky-font-weight-hint-m: var(--bb-font-weight-regular);
372
376
  --sky-font-weight-hint-s: var(--bb-font-weight-regular);
@@ -386,9 +390,6 @@
386
390
  --sky-font-weight-emphasized: var(--bb-font-weight-semibold);
387
391
  --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-normal);
388
392
  --sky-font-letter_spacing-input-label: var(--bb-letter_spacing-wider);
389
- --sky-font-line_height-metric-l: var(--bb-line_height-700);
390
- --sky-font-line_height-metric-m: var(--bb-line_height-400);
391
- --sky-font-line_height-metric-s: var(--bb-line_height-200);
392
393
  --sky-font-line_height-input-val: var(--bb-line_height-200);
393
394
  --sky-font-line_height-input-label: var(--bb-line_height-100);
394
395
  --sky-font-line_height-hint-m: var(--bb-line_height-200);
@@ -406,9 +407,6 @@
406
407
  --sky-font-line_height-body-m: var(--bb-line_height-200);
407
408
  --sky-font-line_height-body-s: var(--bb-line_height-100);
408
409
  --sky-font-line_height-data_label: var(--bb-line_height-200);
409
- --sky-font-style-metric-l: var(--bb-font-style-light);
410
- --sky-font-style-metric-m: var(--bb-font-style-regular);
411
- --sky-font-style-metric-s: var(--bb-font-style-semibold);
412
410
  --sky-font-style-input-label: var(--bb-font-style-regular);
413
411
  --sky-font-style-hint-m-style: italic;
414
412
  --sky-font-style-hint-m-weight: 400;
@@ -430,9 +428,6 @@
430
428
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
431
429
  --sky-font-style-deemphasized-style: italic;
432
430
  --sky-font-style-deemphasized-weight: 400;
433
- --sky-font-size-metric-l: var(--bb-font-size-700);
434
- --sky-font-size-metric-m: var(--bb-font-size-400);
435
- --sky-font-size-metric-s: var(--bb-font-size-200);
436
431
  --sky-font-size-input-val: var(--bb-font-size-200);
437
432
  --sky-font-size-input-label: var(--bb-font-size-100);
438
433
  --sky-font-size-hint-m: var(--bb-font-size-200);
@@ -452,9 +447,6 @@
452
447
  --sky-font-size-data_label: var(--bb-font-size-200);
453
448
  --sky-font-family-monospaced: var(--bb-font-monospaced-family);
454
449
  --sky-font-family-primary: var(--bb-font-blkb_sans-family);
455
- --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);
456
- --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);
457
- --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);
458
450
  --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);
459
451
  --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);
460
452
  --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/var(--sky-font-line_height-hint-m) var(--sky-font-family-primary);
@@ -472,6 +464,9 @@
472
464
  --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);
473
465
  --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);
474
466
  --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);
467
+ --sky-size-avatar-l: var(--bb-size-fluid-550);
468
+ --sky-size-avatar-m: var(--bb-size-fluid-350);
469
+ --sky-size-avatar-s: var(--bb-size-fluid-200);
475
470
  --sky-size-thumbnail-l: var(--bb-size-fixed-600);
476
471
  --sky-size-max_width-overlay_message: var(--bb-size-reading_container-max_width);
477
472
  --sky-size-width-resize_handle: var(--bb-size-fixed-150);
@@ -480,12 +475,15 @@
480
475
  --sky-size-illustration-l: var(--bb-size-fluid-500);
481
476
  --sky-size-illustration-m: var(--bb-size-fluid-400);
482
477
  --sky-size-illustration-s: var(--bb-size-fluid-300);
478
+ --sky-size-icon-xxxl: var(--bb-size-fluid-300);
479
+ --sky-size-icon-xxl: var(--bb-size-fluid-250);
483
480
  --sky-size-icon-xl: var(--bb-size-fluid-200);
484
481
  --sky-size-icon-l: var(--bb-size-fluid-150);
485
482
  --sky-size-icon-m: var(--bb-size-fluid-125);
486
483
  --sky-size-icon-s: var(--bb-size-fluid-100);
487
- --sky-size-icon-xs: var(--bb-size-fluid-50);
488
- --sky-size-icon-xxs: var(--bb-size-fluid-25);
484
+ --sky-size-icon-xs: var(--bb-size-fluid-75);
485
+ --sky-size-icon-xxs: var(--bb-size-fluid-50);
486
+ --sky-size-icon-xxxs: var(--bb-size-fluid-25);
489
487
  --sky-size-picker_btn: var(--bb-size-fluid-200);
490
488
  --sky-size-switch: var(--bb-size-fluid-125);
491
489
  --sky-space-stacked-xxl: var(--bb-size-fluid-300);
@@ -533,6 +531,8 @@
533
531
  --sky-space-gap-action_group-m: var(--bb-size-fluid-50);
534
532
  --sky-space-gap-action_group-s: var(--bb-size-fluid-25);
535
533
  --sky-space-gap-action_group-0: 0rem;
534
+ --sky-space-inset-thumb: var(--bb-size-fixed-6);
535
+ --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
536
536
  --sky-space-inset-horizontal-left-xl: var(--bb-size-fluid-150);
537
537
  --sky-space-inset-horizontal-left-l: var(--bb-size-fluid-100);
538
538
  --sky-space-inset-horizontal-left-m: var(--bb-size-fluid-75);
@@ -565,8 +565,10 @@
565
565
  --sky-space-inset-vertical-top-l: var(--bb-size-fluid-100);
566
566
  --sky-space-inset-vertical-top-m: var(--bb-size-fluid-75);
567
567
  --sky-space-inset-vertical-top-s: var(--bb-size-fluid-50);
568
- --sky-space-inset-thumb: var(--bb-size-fixed-6);
569
- --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
568
+ --sky-space-inset-thumbnail_matte-xl: var(--bb-size-fluid-50);
569
+ --sky-space-inset-thumbnail_matte-l: var(--bb-size-fluid-25);
570
+ --sky-space-inset-thumbnail_matte-m: var(--bb-size-fluid-18);
571
+ --sky-space-inset-thumbnail_matte-s: var(--bb-size-fluid-12);
570
572
  --sky-space-inset-tabs-xl: var(--bb-size-fluid-150);
571
573
  --sky-space-inset-tabs-l: var(--bb-size-fluid-100);
572
574
  --sky-space-inset-tabs-m: var(--bb-size-fluid-75);
package/scss/modern.css CHANGED
@@ -53,6 +53,7 @@
53
53
  --modern-size-100: 100px;
54
54
  --modern-size-96: 96px;
55
55
  --modern-size-80: 80px;
56
+ --modern-size-65: 65px;
56
57
  --modern-size-64: 64px;
57
58
  --modern-size-48: 48px;
58
59
  --modern-size-44: 44px;
@@ -62,6 +63,7 @@
62
63
  --modern-size-26: 26px;
63
64
  --modern-size-24: 24px;
64
65
  --modern-size-20: 20px;
66
+ --modern-size-19: 19px;
65
67
  --modern-size-16: 16px;
66
68
  --modern-size-15: 15px;
67
69
  --modern-size-14: 14px;
@@ -170,6 +172,8 @@
170
172
  --sky-color-border-danger: var(--modern-color-red-50);
171
173
  --sky-color-border-selected_soft: var(--modern-color-blue-30);
172
174
  --sky-color-border-selected: var(--modern-color-blue-74);
175
+ --sky-color-background-icon_matte: var(--modern-color-blue-05);
176
+ --sky-color-background-thumbnail_matte: var(--modern-color-white);
173
177
  --sky-color-background-file_drop: var(--modern-color-gray-05);
174
178
  --sky-color-background-list-disabled: var(--modern-color-gray-07);
175
179
  --sky-color-background-list-focus: var(--modern-color-transparent);
@@ -252,6 +256,7 @@
252
256
  --sky-border-radius-pill: var(--modern-border-radius-pill);
253
257
  --sky-border-radius-m: var(--modern-border-radius-md);
254
258
  --sky-border-radius-s: var(--modern-border-radius-md);
259
+ --sky-border-radius-xs: var(--modern-border-radius-0);
255
260
  --sky-border-radius-0: var(--modern-border-radius-0);
256
261
  --sky-border-width-separator-row: var(--modern-size-1);
257
262
  --sky-border-width-separator-light: var(--modern-size-1);
@@ -277,6 +282,9 @@
277
282
  --sky-border-width-text_highlight: var(--modern-size-1);
278
283
  --sky-border-width-divider: var(--modern-size-1);
279
284
  --sky-border-width-accent: var(--modern-size-7);
285
+ --sky-size-avatar-l: var(--modern-size-100);
286
+ --sky-size-avatar-m: var(--modern-size-65);
287
+ --sky-size-avatar-s: var(--modern-size-32);
280
288
  --sky-size-thumbnail-l: var(--modern-size-100);
281
289
  --sky-size-max_width-overlay_message: var(--modern-size-236);
282
290
  --sky-size-width-resize_handle: var(--modern-size-14);
@@ -285,12 +293,15 @@
285
293
  --sky-size-illustration-l: var(--modern-size-80);
286
294
  --sky-size-illustration-m: var(--modern-size-64);
287
295
  --sky-size-illustration-s: var(--modern-size-48);
296
+ --sky-size-icon-xxxl: var(--modern-size-48);
297
+ --sky-size-icon-xxl: var(--modern-size-40);
288
298
  --sky-size-icon-xl: var(--modern-size-32);
289
299
  --sky-size-icon-l: var(--modern-size-24);
290
300
  --sky-size-icon-m: var(--modern-size-20);
291
301
  --sky-size-icon-s: var(--modern-size-16);
292
- --sky-size-icon-xs: var(--modern-size-10);
293
- --sky-size-icon-xxs: var(--modern-size-5);
302
+ --sky-size-icon-xs: var(--modern-size-12);
303
+ --sky-size-icon-xxs: var(--modern-size-10);
304
+ --sky-size-icon-xxxs: var(--modern-size-5);
294
305
  --sky-size-picker_btn: var(--modern-size-30);
295
306
  --sky-size-switch: var(--modern-size-26);
296
307
  --sky-space-stacked-xxl: var(--modern-space-xxl);
@@ -338,6 +349,8 @@
338
349
  --sky-space-gap-action_group-m: var(--modern-size-10);
339
350
  --sky-space-gap-action_group-s: var(--modern-size-5);
340
351
  --sky-space-gap-action_group-0: 0rem;
352
+ --sky-space-inset-thumb: var(--modern-size-1);
353
+ --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
341
354
  --sky-space-inset-horizontal-left-xl: var(--modern-space-xl);
342
355
  --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
343
356
  --sky-space-inset-horizontal-left-m: var(--modern-space-md);
@@ -370,8 +383,10 @@
370
383
  --sky-space-inset-vertical-top-l: var(--modern-space-lg);
371
384
  --sky-space-inset-vertical-top-m: var(--modern-space-md);
372
385
  --sky-space-inset-vertical-top-s: var(--modern-space-s);
373
- --sky-space-inset-thumb: var(--modern-size-1);
374
- --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
386
+ --sky-space-inset-thumbnail_matte-xl: var(--modern-size-9);
387
+ --sky-space-inset-thumbnail_matte-l: var(--modern-size-5);
388
+ --sky-space-inset-thumbnail_matte-m: var(--modern-size-3);
389
+ --sky-space-inset-thumbnail_matte-s: var(--modern-size-2);
375
390
  --sky-space-inset-tabs-xl: var(--modern-space-xl);
376
391
  --sky-space-inset-tabs-l: var(--modern-space-lg);
377
392
  --sky-space-inset-tabs-m: var(--modern-space-md);
@@ -464,9 +479,6 @@
464
479
  --sky-font-text_decoration-inline_link-hover: underline;
465
480
  --sky-font-text_decoration-inline_link-base: none;
466
481
  --sky-font-text_decoration-visible_link: underline;
467
- --sky-font-weight-metric-l: var(--modern-font-weight-regular);
468
- --sky-font-weight-metric-m: var(--modern-font-weight-regular);
469
- --sky-font-weight-metric-s: var(--modern-font-weight-bold);
470
482
  --sky-font-weight-input-label: var(--modern-font-weight-regular);
471
483
  --sky-font-weight-hint-m: var(--modern-font-weight-regular);
472
484
  --sky-font-weight-hint-s: var(--modern-font-weight-regular);
@@ -488,9 +500,6 @@
488
500
  --sky-font-letter_spacing-input-label: var(--modern-letter_spacing-normal);
489
501
  --sky-font-family-monospaced: var(--modern-font-monospaced-family);
490
502
  --sky-font-family-primary: var(--modern-font-blkb_sans-family);
491
- --sky-font-style-metric-l: var(--modern-font-weight-regular);
492
- --sky-font-style-metric-m: var(--modern-font-weight-regular);
493
- --sky-font-style-metric-s: var(--modern-font-weight-bold);
494
503
  --sky-font-style-input-label: var(--modern-font-style-regular);
495
504
  --sky-font-style-hint-m-style: italic;
496
505
  --sky-font-style-hint-m-weight: 400;
@@ -512,9 +521,6 @@
512
521
  --sky-font-style-emphasized: var(--modern-font-style-semibold);
513
522
  --sky-font-style-deemphasized-style: italic;
514
523
  --sky-font-style-deemphasized-weight: 400;
515
- --sky-font-line_height-metric-l: var(--modern-line_height-normal);
516
- --sky-font-line_height-metric-m: var(--modern-line_height-normal);
517
- --sky-font-line_height-metric-s: var(--modern-line_height-normal);
518
524
  --sky-font-line_height-input-val: var(--modern-line_height-20);
519
525
  --sky-font-line_height-input-label: var(--modern-line_height-normal);
520
526
  --sky-font-line_height-hint-m: var(--modern-line_height-normal);
@@ -532,9 +538,6 @@
532
538
  --sky-font-line_height-body-m: var(--modern-line_height-150);
533
539
  --sky-font-line_height-body-s: var(--modern-line_height-normal);
534
540
  --sky-font-line_height-data_label: var(--modern-line_height-normal);
535
- --sky-font-size-metric-l: var(--sky-font-size-display-1);
536
- --sky-font-size-metric-m: var(--sky-font-size-display-3);
537
- --sky-font-size-metric-s: var(--sky-font-size-display-4);
538
541
  --sky-font-size-input-val: var(--modern-font-size-200);
539
542
  --sky-font-size-input-label: var(--modern-font-size-125);
540
543
  --sky-font-size-hint-m: var(--modern-font-size-200);