@blackbaud/skyux-design-tokens 0.0.31 → 0.0.33

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 +20 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +116 -61
  4. package/scss/modern.css +110 -21
package/CHANGELOG.md CHANGED
@@ -2,6 +2,26 @@
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.33](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.32...0.0.33) (2024-09-27)
6
+
7
+
8
+ ### Features
9
+
10
+ * add background colors ([#85](https://github.com/blackbaud/skyux-design-tokens/issues/85)) ([0113a8b](https://github.com/blackbaud/skyux-design-tokens/commit/0113a8b332e1f63814d0bde1a49426a9939c7c2b))
11
+ * border colors ([#87](https://github.com/blackbaud/skyux-design-tokens/issues/87)) ([277f903](https://github.com/blackbaud/skyux-design-tokens/commit/277f903189e05de85f26f81669dee393c8bdca1b))
12
+
13
+
14
+ ### Bug Fixes
15
+
16
+ * 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))
17
+
18
+ ## [0.0.32](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.31...0.0.32) (2024-09-27)
19
+
20
+
21
+ ### Features
22
+
23
+ * border, elevation tokens for public classes + size tokens for overlays ([#83](https://github.com/blackbaud/skyux-design-tokens/issues/83)) ([1f4f70b](https://github.com/blackbaud/skyux-design-tokens/commit/1f4f70bd530990d0e9b5684e2bb6035143a4e6d0))
24
+
5
25
  ## [0.0.31](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.30...0.0.31) (2024-09-26)
6
26
 
7
27
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.31",
3
+ "version": "0.0.33",
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
@@ -1,5 +1,5 @@
1
1
  .sky-theme-modern.sky-theme-brand-blackbaud {
2
- --bb-size-reading_container-max_width: 65ch, 33vw;
2
+ --bb-size-reading_container-max_width: 50ch, 40vw;
3
3
  --bb-size-fixed-6000: 960px;
4
4
  --bb-size-fixed-4000: 640px;
5
5
  --bb-size-fixed-2000: 320px;
@@ -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;
@@ -114,18 +115,16 @@
114
115
  --bb-border-radius-050: 0.5rem;
115
116
  --bb-border-radius-025: 0.25rem;
116
117
  --bb-border-radius-none: 0rem;
117
- --bb-line_height-1200: 4.75rem;
118
- --bb-line_height-1100: 4.25rem;
119
- --bb-line_height-1000: 3.375rem;
120
- --bb-line_height-900: 3rem;
121
- --bb-line_height-800: 3rem;
122
- --bb-line_height-700: 2.625rem;
123
- --bb-line_height-600: 2.25rem;
124
- --bb-line_height-500: 2rem;
125
- --bb-line_height-400: 1.75rem;
126
- --bb-line_height-300: 1.5rem;
127
- --bb-line_height-200: 1.25rem;
128
- --bb-line_height-100: 1rem;
118
+ --bb-line_height-1000: 1.2308;
119
+ --bb-line_height-900: 1.1429;
120
+ --bb-line_height-800: 1.1111;
121
+ --bb-line_height-700: 1.25;
122
+ --bb-line_height-600: 1.2857;
123
+ --bb-line_height-500: 1.3333;
124
+ --bb-line_height-400: 1.4;
125
+ --bb-line_height-300: 1.5;
126
+ --bb-line_height-200: 1.4286;
127
+ --bb-line_height-100: 1.3333;
129
128
  --bb-letter_spacing-normal: normal;
130
129
  --bb-letter_spacing-wider: 0.32px;
131
130
  --bb-font-src-sans-italic: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff") format("woff");
@@ -148,9 +147,7 @@
148
147
  --bb-font-family-sans: var(--bb-font-name), Helvetica Neue, Arial, sans-serif;
149
148
  --bb-font-family-monospaced: Menlo, Monaco, Consolas, 'Courier New', monospace;
150
149
  --bb-font-name: 'BLKB Sans';
151
- --bb-font-size-1200: 3.75rem;
152
- --bb-font-size-1100: 3.375rem;
153
- --bb-font-size-1000: 3rem;
150
+ --bb-font-size-1000: 3.25rem;
154
151
  --bb-font-size-900: 2.625rem;
155
152
  --bb-font-size-800: 2.25rem;
156
153
  --bb-font-size-700: 2rem;
@@ -210,45 +207,83 @@
210
207
  --sky-elevation-overflow: var(--bb-shadow-gray-2);
211
208
  --sky-elevation-focus: var(--bb-shadow-gray-2);
212
209
  --sky-elevation-none: var(--bb-shadow-gray-0);
210
+ --sky-color-border-separator-row: var(--bb-color-gray-50);
211
+ --sky-color-border-separator-dark: var(--bb-color-gray-100);
213
212
  --sky-color-border-input-error: var(--bb-color-red-600);
214
213
  --sky-color-border-input-disabled: var(--bb-color-gray-100);
215
214
  --sky-color-border-input-focus: var(--bb-color-blue-600);
216
215
  --sky-color-border-input-active: var(--bb-color-blue-600);
217
216
  --sky-color-border-input-hover: var(--bb-color-blue-600);
218
217
  --sky-color-border-input-base: var(--bb-color-gray-100);
218
+ --sky-color-border-container-base: var(--bb-color-gray-100);
219
+ --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);
223
+ --sky-color-border-action-danger-base: var(--bb-color-red-600);
224
+ --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-100);
219
225
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
220
226
  --sky-color-border-action-tertiary-active: var(--bb-color-blue-600);
221
227
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
222
228
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
229
+ --sky-color-border-action-secondary-disabled: var(--bb-color-gray-100);
223
230
  --sky-color-border-action-secondary-focus: var(--bb-color-blue-600);
224
231
  --sky-color-border-action-secondary-active: var(--bb-color-blue-600);
225
232
  --sky-color-border-action-secondary-hover: var(--bb-color-blue-600);
226
- --sky-color-border-action-secondary-base: var(--bb-color-transparent);
233
+ --sky-color-border-action-secondary-base: var(--bb-color-gray-100);
234
+ --sky-color-border-action-primary-disabled: var(--bb-color-gray-100);
227
235
  --sky-color-border-action-primary-focus: var(--bb-color-blue-600);
228
236
  --sky-color-border-action-primary-active: var(--bb-color-blue-600);
229
237
  --sky-color-border-action-primary-hover: var(--bb-color-blue-600);
230
238
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
231
- --sky-color-border-action-disabled: var(--bb-color-gray-100);
232
- --sky-color-border-container-base: var(--bb-color-gray-100);
239
+ --sky-color-border-elevation: var(--bb-color-gray-100);
240
+ --sky-color-border-divider: var(--bb-color-gray-100);
233
241
  --sky-color-border-info: var(--bb-color-blue-600);
234
242
  --sky-color-border-success: var(--bb-color-green-600);
235
243
  --sky-color-border-warning: var(--bb-color-yellow-600);
236
244
  --sky-color-border-danger: var(--bb-color-red-600);
237
245
  --sky-color-border-selected: var(--bb-color-blue-600);
238
- --sky-color-background-input-selected: var(--bb-color-blue-600);
246
+ --sky-color-background-list-disabled: var(--bb-color-gray-50);
247
+ --sky-color-background-list-focus: var(--bb-color-transparent);
248
+ --sky-color-background-list-active: var(--bb-color-transparent);
249
+ --sky-color-background-list-hover: var(--bb-color-transparent);
250
+ --sky-color-background-list-base: var(--bb-color-transparent);
251
+ --sky-color-background-nav-disabled: var(--bb-color-gray-50);
252
+ --sky-color-background-nav-focus: var(--bb-color-transparent);
253
+ --sky-color-background-nav-active: var(--bb-color-transparent);
254
+ --sky-color-background-nav-hover: var(--bb-color-transparent);
255
+ --sky-color-background-nav-base: var(--bb-color-transparent);
256
+ --sky-color-background-selected-soft: var(--bb-color-blue-100);
257
+ --sky-color-background-selected-heavy: var(--bb-color-blue-600);
239
258
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
240
259
  --sky-color-background-input-base: var(--bb-color-transparent);
260
+ --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
261
+ --sky-color-background-action-danger-focus: var(--bb-color-red-600);
262
+ --sky-color-background-action-danger-active: var(--bb-color-red-600);
263
+ --sky-color-background-action-danger-hover: var(--bb-color-red-600);
241
264
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
265
+ --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-50);
266
+ --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
267
+ --sky-color-background-action-tertiary-active: var(--bb-color-transparent);
268
+ --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
242
269
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
270
+ --sky-color-background-action-secondary-disabled: var(--bb-color-gray-50);
271
+ --sky-color-background-action-secondary-focus: var(--bb-color-white);
272
+ --sky-color-background-action-secondary-active: var(--bb-color-white);
273
+ --sky-color-background-action-secondary-hover: var(--bb-color-white);
243
274
  --sky-color-background-action-secondary-base: var(--bb-color-white);
275
+ --sky-color-background-action-primary-disabled: var(--bb-color-gray-50);
276
+ --sky-color-background-action-primary-focus: var(--bb-color-blue-600);
277
+ --sky-color-background-action-primary-active: var(--bb-color-blue-600);
278
+ --sky-color-background-action-primary-hover: var(--bb-color-blue-600);
244
279
  --sky-color-background-action-primary-base: var(--bb-color-blue-600);
245
- --sky-color-background-action-disabled: var(--bb-color-gray-50);
246
280
  --sky-color-background-container-info: var(--bb-color-blue-100);
247
281
  --sky-color-background-container-success: var(--bb-color-green-300);
248
282
  --sky-color-background-container-warning: var(--bb-color-yellow-300);
249
283
  --sky-color-background-container-danger: var(--bb-color-red-300);
250
284
  --sky-color-background-container-menu: var(--bb-color-white);
251
285
  --sky-color-background-container-base: var(--bb-color-white);
286
+ --sky-color-background-scrim: var(--bb-color-scrim);
252
287
  --sky-color-background-page: var(--bb-color-gray-25);
253
288
  --sky-color-icon-action: var(--bb-color-blue-600);
254
289
  --sky-color-icon-inverse: var(--bb-color-white);
@@ -266,6 +301,9 @@
266
301
  --sky-color-text-default: var(--bb-color-gray-900);
267
302
  }
268
303
  .sky-theme-modern.sky-theme-brand-blackbaud {
304
+ --sky-border-style-separator-row: var(--bb-border-style-dotted);
305
+ --sky-border-style-separator-dark: var(--bb-border-style-solid);
306
+ --sky-border-style-elevation: var(--bb-border-style-solid);
269
307
  --sky-border-style-accent: var(--bb-border-style-solid);
270
308
  --sky-border-width-separator-row: var(--bb-size-fixed-6);
271
309
  --sky-border-width-separator-dark: var(--bb-size-fixed-6);
@@ -286,8 +324,9 @@
286
324
  --sky-border-width-action-active: var(--bb-size-fixed-12);
287
325
  --sky-border-width-action-hover: var(--bb-size-fixed-6);
288
326
  --sky-border-width-action-base: var(--bb-size-fixed-6);
289
- --sky-border-width-accent: var(--bb-size-fixed-37);
327
+ --sky-border-width-elevation: var(--bb-size-fixed-6);
290
328
  --sky-border-width-divider: var(--bb-size-fixed-6);
329
+ --sky-border-width-accent: var(--bb-size-fixed-37);
291
330
  --sky-border-radius-pill: var(--bb-border-radius-pill);
292
331
  --sky-border-radius-m: var(--bb-size-fluid-50);
293
332
  --sky-border-radius-s: var(--bb-size-fluid-25);
@@ -325,10 +364,10 @@
325
364
  --sky-font-line_height-heading-3: var(--bb-line_height-300);
326
365
  --sky-font-line_height-heading-2: var(--bb-line_height-400);
327
366
  --sky-font-line_height-heading-1: var(--bb-line_height-500);
328
- --sky-font-line_height-display-4: var(--bb-line_height-800);
329
- --sky-font-line_height-display-3: var(--bb-line_height-900);
330
- --sky-font-line_height-display-2: var(--bb-line_height-1000);
331
- --sky-font-line_height-display-1: var(--bb-line_height-1100);
367
+ --sky-font-line_height-display-4: var(--bb-line_height-200);
368
+ --sky-font-line_height-display-3: var(--bb-line_height-300);
369
+ --sky-font-line_height-display-2: var(--bb-line_height-500);
370
+ --sky-font-line_height-display-1: var(--bb-line_height-800);
332
371
  --sky-font-line_height-body-l: var(--bb-line_height-300);
333
372
  --sky-font-line_height-body-m: var(--bb-line_height-200);
334
373
  --sky-font-line_height-body-s: var(--bb-line_height-100);
@@ -369,10 +408,10 @@
369
408
  --sky-font-size-heading-3: var(--bb-font-size-300);
370
409
  --sky-font-size-heading-2: var(--bb-font-size-400);
371
410
  --sky-font-size-heading-1: var(--bb-font-size-500);
372
- --sky-font-size-display-4: var(--bb-font-size-800);
373
- --sky-font-size-display-3: var(--bb-font-size-900);
374
- --sky-font-size-display-2: var(--bb-font-size-1000);
375
- --sky-font-size-display-1: var(--bb-font-size-1100);
411
+ --sky-font-size-display-4: var(--bb-font-size-200);
412
+ --sky-font-size-display-3: var(--bb-font-size-300);
413
+ --sky-font-size-display-2: var(--bb-font-size-500);
414
+ --sky-font-size-display-1: var(--bb-font-size-800);
376
415
  --sky-font-size-body-l: var(--bb-font-size-300);
377
416
  --sky-font-size-body-m: var(--bb-font-size-200);
378
417
  --sky-font-size-body-s: var(--bb-font-size-100);
@@ -410,37 +449,53 @@
410
449
  --sky-size-icon-l: var(--bb-size-fluid-150);
411
450
  --sky-size-icon-m: var(--bb-size-fluid-125);
412
451
  --sky-size-icon-s: var(--bb-size-fluid-100);
413
- --sky-space-switch_inset: calc(var(--sky-size-switch)+var(--sky-space-label_gap-s));
414
- --sky-space-text_action_gap-l: var(--bb-size-fluid-100);
415
- --sky-space-text_action_gap-m: var(--bb-size-fluid-75);
416
- --sky-space-text_action_gap-s: var(--bb-size-fluid-50);
417
- --sky-space-text_action_gap-xs: var(--bb-size-fluid-25);
418
- --sky-space-text_action_gap-0: 0rem;
419
- --sky-space-stacked_supplemental-m: var(--bb-size-fluid-50);
420
- --sky-space-stacked_supplemental-s: var(--bb-size-fluid-25);
421
- --sky-space-stacked_supplemental-0: 0rem;
422
- --sky-space-label_gap-xl: var(--bb-size-fluid-100);
423
- --sky-space-label_gap-l: var(--bb-size-fluid-75);
424
- --sky-space-label_gap-m: var(--bb-size-fluid-50);
425
- --sky-space-label_gap-s: var(--bb-size-fluid-25);
426
- --sky-space-label_gap-xs: var(--bb-size-fluid-12);
427
- --sky-space-label_gap-xxs: var(--bb-size-fluid-6);
428
- --sky-space-label_gap-0: 0rem;
429
- --sky-space-icon_gap-xl: var(--bb-size-fluid-100);
430
- --sky-space-icon_gap-l: var(--bb-size-fluid-75);
431
- --sky-space-icon_gap-m: var(--bb-size-fluid-50);
432
- --sky-space-icon_gap-s: var(--bb-size-fluid-25);
433
- --sky-space-icon_gap-0: 0rem;
434
- --sky-space-form_gap-xl: var(--bb-size-fluid-150);
435
- --sky-space-form_gap-l: var(--bb-size-fluid-100);
436
- --sky-space-form_gap-m: var(--bb-size-fluid-75);
437
- --sky-space-form_gap-s: var(--bb-size-fluid-50);
438
- --sky-space-form_gap-0: 0rem;
439
- --sky-space-action_group_gap-xl: var(--bb-size-fluid-100);
440
- --sky-space-action_group_gap-l: var(--bb-size-fluid-75);
441
- --sky-space-action_group_gap-m: var(--bb-size-fluid-50);
442
- --sky-space-action_group_gap-s: var(--bb-size-fluid-25);
443
- --sky-space-action_group_gap-0: 0rem;
452
+ --sky-space-stacked-xxl: var(--bb-size-fluid-300);
453
+ --sky-space-stacked-xl: var(--bb-size-fluid-150);
454
+ --sky-space-stacked-l: var(--bb-size-fluid-100);
455
+ --sky-space-stacked-m: var(--bb-size-fluid-75);
456
+ --sky-space-stacked-s: var(--bb-size-fluid-50);
457
+ --sky-space-stacked-xs: var(--bb-size-fluid-25);
458
+ --sky-space-inline-xxl: var(--bb-size-fluid-300);
459
+ --sky-space-inline-xl: var(--bb-size-fluid-150);
460
+ --sky-space-inline-l: var(--bb-size-fluid-100);
461
+ --sky-space-inline-m: var(--bb-size-fluid-75);
462
+ --sky-space-inline-s: var(--bb-size-fluid-50);
463
+ --sky-space-inline-xs: var(--bb-size-fluid-25);
464
+ --sky-space-gap-text_action-l: var(--bb-size-fluid-100);
465
+ --sky-space-gap-text_action-m: var(--bb-size-fluid-75);
466
+ --sky-space-gap-text_action-s: var(--bb-size-fluid-50);
467
+ --sky-space-gap-text_action-xs: var(--bb-size-fluid-25);
468
+ --sky-space-gap-text_action-0: 0rem;
469
+ --sky-space-gap-stacked_supplemental-m: var(--bb-size-fluid-50);
470
+ --sky-space-gap-stacked_supplemental-s: var(--bb-size-fluid-25);
471
+ --sky-space-gap-stacked_supplemental-0: 0rem;
472
+ --sky-space-gap-label-xl: var(--bb-size-fluid-100);
473
+ --sky-space-gap-label-l: var(--bb-size-fluid-75);
474
+ --sky-space-gap-label-m: var(--bb-size-fluid-50);
475
+ --sky-space-gap-label-s: var(--bb-size-fluid-25);
476
+ --sky-space-gap-label-xs: var(--bb-size-fluid-12);
477
+ --sky-space-gap-label-xxs: var(--bb-size-fluid-6);
478
+ --sky-space-gap-label-0: 0rem;
479
+ --sky-space-gap-icon-xl: var(--bb-size-fluid-100);
480
+ --sky-space-gap-icon-l: var(--bb-size-fluid-75);
481
+ --sky-space-gap-icon-m: var(--bb-size-fluid-50);
482
+ --sky-space-gap-icon-s: var(--bb-size-fluid-25);
483
+ --sky-space-gap-icon-0: 0rem;
484
+ --sky-space-gap-form-xl: var(--bb-size-fluid-150);
485
+ --sky-space-gap-form-l: var(--bb-size-fluid-100);
486
+ --sky-space-gap-form-m: var(--bb-size-fluid-75);
487
+ --sky-space-gap-form-s: var(--bb-size-fluid-50);
488
+ --sky-space-gap-form-0: 0rem;
489
+ --sky-space-gap-action_group-xl: var(--bb-size-fluid-100);
490
+ --sky-space-gap-action_group-l: var(--bb-size-fluid-75);
491
+ --sky-space-gap-action_group-m: var(--bb-size-fluid-50);
492
+ --sky-space-gap-action_group-s: var(--bb-size-fluid-25);
493
+ --sky-space-gap-action_group-0: 0rem;
494
+ --sky-space-inset-switch: calc(var(--sky-size-switch)+var(--sky-space-gap-label-s));
495
+ --sky-space-inset-tabs-xl: var(--bb-size-fluid-150);
496
+ --sky-space-inset-tabs-l: var(--bb-size-fluid-100);
497
+ --sky-space-inset-tabs-m: var(--bb-size-fluid-75);
498
+ --sky-space-inset-tabs-s: var(--bb-size-fluid-50);
444
499
  --sky-space-inset-pillarbox-2_3-left-l: var(--bb-size-fluid-150);
445
500
  --sky-space-inset-pillarbox-2_3-left-m: var(--bb-size-fluid-75);
446
501
  --sky-space-inset-pillarbox-2_3-bottom-l: var(--bb-size-fluid-100);
package/scss/modern.css CHANGED
@@ -39,8 +39,11 @@
39
39
  --modern-font-size-150: 14px;
40
40
  --modern-font-size-125: 13px;
41
41
  --modern-font-size-100: 12px;
42
+ --modern-size-400: 400px;
43
+ --modern-size-320: 320px;
42
44
  --modern-size-296: 296px;
43
45
  --modern-size-276: 276px;
46
+ --modern-size-236: 236px;
44
47
  --modern-size-96: 96px;
45
48
  --modern-size-80: 80px;
46
49
  --modern-size-64: 64px;
@@ -71,20 +74,22 @@
71
74
  --modern-space-s: 10px;
72
75
  --modern-space-xs: 5px;
73
76
  --modern-space-none: 0rem;
74
- --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
75
77
  --modern-color-sky_blue-40: #40c7f4;
76
78
  --modern-color-sky_blue-20: #bfecfb;
77
79
  --modern-color-yellow-50: #fbb034;
78
80
  --modern-color-yellow-30: #ffd597;
79
81
  --modern-color-green-50: #72bf44;
80
82
  --modern-color-green-30: #b7da9b;
81
- --modern-color-white: #ffffff;
82
83
  --modern-color-blue-05: #ebfbff;
83
84
  --modern-color-blue-74: #1870b8;
84
85
  --modern-color-blue-50: #00b4f1;
85
86
  --modern-color-blue-30: #81d4f7;
86
87
  --modern-color-blue-10: #c1e8fb;
88
+ --modern-color-scrim: rgba(0, 0, 0, 0.5);
89
+ --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
87
90
  --modern-color-transparent: rgba(0, 0, 0, 0);
91
+ --modern-color-black: #000000;
92
+ --modern-color-white: #ffffff;
88
93
  --modern-color-red-70: #d93a3d;
89
94
  --modern-color-red-50: #ef4044;
90
95
  --modern-color-red-30: #f7a08f;
@@ -92,6 +97,7 @@
92
97
  --modern-color-gray-07: #ededee;
93
98
  --modern-color-gray-105: #212327;
94
99
  --modern-color-gray-70: #686c73;
100
+ --modern-color-gray-20: #cdcfd2;
95
101
  --modern-color-gray-15: #d2d2d2;
96
102
  }
97
103
  .sky-theme-modern {
@@ -103,36 +109,84 @@
103
109
  --sky-elevation-overflow: var(--modern-shadow-size-3);
104
110
  --sky-elevation-focus: var(--modern-shadow-size-3);
105
111
  --sky-elevation-none: var(--modern-shadow-size-0);
112
+ --sky-color-border-separator-row: var(--modern-color-gray-20);
113
+ --sky-color-border-separator-dark: var(--modern-color-gray-20);
106
114
  --sky-color-border-input-error: var(--modern-color-red-50);
107
115
  --sky-color-border-input-disabled: var(--modern-color-gray-15);
108
116
  --sky-color-border-input-focus: var(--modern-color-blue-74);
109
117
  --sky-color-border-input-active: var(--modern-color-blue-74);
110
118
  --sky-color-border-input-hover: var(--modern-color-blue-74);
111
119
  --sky-color-border-input-base: var(--modern-color-gray-15);
120
+ --sky-color-border-action-danger-disabled: var(--modern-color-gray-15);
121
+ --sky-color-border-action-danger-focus: var(--modern-color-red-30);
122
+ --sky-color-border-action-danger-active: var(--modern-color-red-30);
123
+ --sky-color-border-action-danger-hover: var(--modern-color-red-30);
124
+ --sky-color-border-action-danger-base: var(--modern-color-red-70);
125
+ --sky-color-border-action-tertiary-disabled: var(--modern-color-gray-15);
112
126
  --sky-color-border-action-tertiary-active: var(--modern-color-blue-74);
113
127
  --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
114
128
  --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
115
129
  --sky-color-border-action-tertiary-base: var(--modern-color-transparent);
130
+ --sky-color-border-action-secondary-disabled: var(--modern-color-gray-15);
131
+ --sky-color-border-action-secondary-focus: var(--modern-color-blue-74);
132
+ --sky-color-border-action-secondary-active: var(--modern-color-blue-74);
133
+ --sky-color-border-action-secondary-hover: var(--modern-color-blue-74);
116
134
  --sky-color-border-action-secondary-base: var(--modern-color-gray-15);
135
+ --sky-color-border-action-primary-disabled: var(--modern-color-gray-15);
136
+ --sky-color-border-action-primary-focus: var(--modern-color-blue-10);
137
+ --sky-color-border-action-primary-active: var(--modern-color-blue-10);
138
+ --sky-color-border-action-primary-hover: var(--modern-color-blue-10);
117
139
  --sky-color-border-action-primary-base: var(--modern-color-blue-74);
118
140
  --sky-color-border-action-disabled: var(--modern-color-gray-15);
119
141
  --sky-color-border-container-base: var(--modern-color-gray-15);
142
+ --sky-color-border-elevation: var(--modern-color-gray-15);
143
+ --sky-color-border-divider: var(--modern-color-gray-15);
120
144
  --sky-color-border-info: var(--modern-color-blue-50);
121
145
  --sky-color-border-success: var(--modern-color-green-50);
122
146
  --sky-color-border-warning: var(--modern-color-yellow-50);
123
147
  --sky-color-border-danger: var(--modern-color-red-50);
124
148
  --sky-color-border-selected: var(--modern-color-blue-74);
149
+ --sky-color-background-list-disabled: var(--modern-color-gray-07);
150
+ --sky-color-background-list-focus: var(--modern-color-transparent);
151
+ --sky-color-background-list-active: var(--modern-color-transparent);
152
+ --sky-color-background-list-hover: var(--modern-color-transparent);
153
+ --sky-color-background-list-base: var(--modern-color-transparent);
154
+ --sky-color-background-nav-disabled: var(--modern-color-gray-07);
155
+ --sky-color-background-nav-focus: var(--modern-color-transparent);
156
+ --sky-color-background-nav-active: var(--modern-color-transparent);
157
+ --sky-color-background-nav-hover: var(--modern-color-transparent);
158
+ --sky-color-background-nav-base: var(--modern-color-transparent);
159
+ --sky-color-background-input-disabled: var(--modern-color-gray-07);
160
+ --sky-color-background-input-base: var(--modern-color-transparent);
161
+ --sky-color-background-selected-soft: var(--modern-color-blue-05);
162
+ --sky-color-background-selected-heavy: var(--modern-color-blue-05);
163
+ --sky-color-background-action-danger-disabled: var(--modern-color-gray-07);
164
+ --sky-color-background-action-danger-focus: var(--modern-color-red-70);
165
+ --sky-color-background-action-danger-active: var(--modern-color-red-70);
166
+ --sky-color-background-action-danger-hover: var(--modern-color-red-70);
125
167
  --sky-color-background-action-danger-base: var(--modern-color-red-70);
168
+ --sky-color-background-action-tertiary-disabled: var(--modern-color-gray-07);
169
+ --sky-color-background-action-tertiary-focus: var(--modern-color-transparent);
170
+ --sky-color-background-action-tertiary-active: var(--modern-color-transparent);
171
+ --sky-color-background-action-tertiary-hover: var(--modern-color-transparent);
126
172
  --sky-color-background-action-tertiary-base: var(--modern-color-transparent);
173
+ --sky-color-background-action-secondary-disabled: var(--modern-color-gray-07);
174
+ --sky-color-background-action-secondary-focus: var(--modern-color-white);
175
+ --sky-color-background-action-secondary-active: var(--modern-color-white);
176
+ --sky-color-background-action-secondary-hover: var(--modern-color-white);
127
177
  --sky-color-background-action-secondary-base: var(--modern-color-white);
178
+ --sky-color-background-action-primary-disabled: var(--modern-color-gray-07);
179
+ --sky-color-background-action-primary-focus: var(--modern-color-blue-74);
180
+ --sky-color-background-action-primary-active: var(--modern-color-blue-74);
181
+ --sky-color-background-action-primary-hover: var(--modern-color-blue-74);
128
182
  --sky-color-background-action-primary-base: var(--modern-color-blue-74);
129
- --sky-color-background-action-disabled: var(--modern-color-gray-07);
130
183
  --sky-color-background-container-info: var(--modern-color-blue-10);
131
184
  --sky-color-background-container-success: var(--modern-color-green-30);
132
185
  --sky-color-background-container-warning: var(--modern-color-yellow-30);
133
186
  --sky-color-background-container-danger: var(--modern-color-red-30);
134
187
  --sky-color-background-container-menu: var(--modern-color-white);
135
188
  --sky-color-background-container-base: var(--modern-color-white);
189
+ --sky-color-background-scrim: var(--modern-color-scrim);
136
190
  --sky-color-background-page: var(--modern-color-gray-005);
137
191
  --sky-color-icon-action: var(--modern-color-blue-74);
138
192
  --sky-color-icon-inverse: var(--modern-color-white);
@@ -150,6 +204,9 @@
150
204
  --sky-color-text-default: var(--modern-color-gray-105);
151
205
  }
152
206
  .sky-theme-modern {
207
+ --sky-border-style-separator-row: var(--modern-border-style-dotted);
208
+ --sky-border-style-separator-dark: var(--modern-border-style-solid);
209
+ --sky-border-style-elevation: var(--modern-border-style-solid);
153
210
  --sky-border-style-accent: var(--modern-border-style-solid);
154
211
  --sky-border-radius-pill: var(--modern-border-radius-pill);
155
212
  --sky-border-radius-m: var(--modern-size-6);
@@ -173,10 +230,11 @@
173
230
  --sky-border-width-action-active: var(--modern-size-2);
174
231
  --sky-border-width-action-hover: var(--modern-size-1);
175
232
  --sky-border-width-action-base: var(--modern-size-1);
176
- --sky-border-width-accent: var(--modern-size-7);
233
+ --sky-border-width-elevation: var(--modern-size-1);
177
234
  --sky-border-width-divider: var(--modern-size-1);
235
+ --sky-border-width-accent: var(--modern-size-7);
178
236
  --sky-text-font_family: var(--modern-font-name);
179
- --sky-size-max_width-overlay_message: var(--modern-size-276);
237
+ --sky-size-max_width-overlay_message: var(--modern-size-236);
180
238
  --sky-size-width-viewport-smallest: var(--modern-size-296);
181
239
  --sky-size-switch: var(--modern-size-26);
182
240
  --sky-size-illustration-xl: var(--modern-size-96);
@@ -187,22 +245,53 @@
187
245
  --sky-size-icon-l: var(--modern-size-24);
188
246
  --sky-size-icon-m: var(--modern-size-20);
189
247
  --sky-size-icon-s: var(--modern-size-16);
190
- --sky-space-text_action_gap-l: var(--modern-space-lg);
191
- --sky-space-text_action_gap-m: var(--modern-space-md);
192
- --sky-space-text_action_gap-xs: var(--modern-space-xs);
193
- --sky-space-stacked_supplemental-s: var(--modern-space-xs);
194
- --sky-space-stacked_supplemental-0: 0rem;
195
- --sky-space-label_gap-s: var(--modern-space-xs);
196
- --sky-space-label_gap-xs: var(--modern-size-2);
197
- --sky-space-label_gap-xxs: var(--modern-size-1);
198
- --sky-space-label_gap-0: 0rem;
199
- --sky-space-icon_gap-l: var(--modern-space-md);
200
- --sky-space-icon_gap-m: var(--modern-space-s);
201
- --sky-space-icon_gap-s: var(--modern-space-xs);
202
- --sky-space-form_gap-xl: var(--modern-space-xl);
203
- --sky-space-form_gap-l: var(--modern-space-lg);
204
- --sky-space-form_gap-m: var(--modern-space-md);
205
- --sky-space-form_gap-s: var(--modern-space-s);
248
+ --sky-space-stacked-xxl: var(--modern-space-xxl);
249
+ --sky-space-stacked-xl: var(--modern-space-xl);
250
+ --sky-space-stacked-l: var(--modern-space-lg);
251
+ --sky-space-stacked-m: var(--modern-space-md);
252
+ --sky-space-stacked-s: var(--modern-space-s);
253
+ --sky-space-stacked-xs: var(--modern-space-xs);
254
+ --sky-space-inline-xxl: var(--modern-space-xxl);
255
+ --sky-space-inline-xl: var(--modern-space-xl);
256
+ --sky-space-inline-l: var(--modern-space-lg);
257
+ --sky-space-inline-m: var(--modern-space-md);
258
+ --sky-space-inline-s: var(--modern-space-s);
259
+ --sky-space-inline-xs: var(--modern-space-xs);
260
+ --sky-space-gap-text_action-l: var(--modern-space-lg);
261
+ --sky-space-gap-text_action-m: var(--modern-space-md);
262
+ --sky-space-gap-text_action-s: var(--modern-space-s);
263
+ --sky-space-gap-text_action-xs: var(--modern-space-xs);
264
+ --sky-space-gap-text_action-0: 0rem;
265
+ --sky-space-gap-stacked_supplemental-m: var(--modern-size-10);
266
+ --sky-space-gap-stacked_supplemental-s: var(--modern-size-5);
267
+ --sky-space-gap-stacked_supplemental-0: 0rem;
268
+ --sky-space-gap-label-xl: var(--modern-size-20);
269
+ --sky-space-gap-label-l: var(--modern-size-15);
270
+ --sky-space-gap-label-m: var(--modern-size-10);
271
+ --sky-space-gap-label-s: var(--modern-size-5);
272
+ --sky-space-gap-label-xs: var(--modern-size-2);
273
+ --sky-space-gap-label-xxs: var(--modern-size-1);
274
+ --sky-space-gap-label-0: 0rem;
275
+ --sky-space-gap-icon-xl: var(--modern-size-20);
276
+ --sky-space-gap-icon-l: var(--modern-size-15);
277
+ --sky-space-gap-icon-m: var(--modern-size-10);
278
+ --sky-space-gap-icon-s: var(--modern-size-5);
279
+ --sky-space-gap-icon-0: 0rem;
280
+ --sky-space-gap-form-xl: var(--modern-space-xl);
281
+ --sky-space-gap-form-l: var(--modern-space-lg);
282
+ --sky-space-gap-form-m: var(--modern-space-md);
283
+ --sky-space-gap-form-s: var(--modern-space-s);
284
+ --sky-space-gap-form-0: 0rem;
285
+ --sky-space-gap-action_group-xl: var(--modern-size-20);
286
+ --sky-space-gap-action_group-l: var(--modern-size-15);
287
+ --sky-space-gap-action_group-m: var(--modern-size-10);
288
+ --sky-space-gap-action_group-s: var(--modern-size-5);
289
+ --sky-space-gap-action_group-0: 0rem;
290
+ --sky-space-inset-switch: calc(var(--sky-size-switch)+var(--sky-space-gap-label-s));
291
+ --sky-space-inset-tabs-xl: var(--modern-space-xl);
292
+ --sky-space-inset-tabs-l: var(--modern-space-lg);
293
+ --sky-space-inset-tabs-m: var(--modern-space-md);
294
+ --sky-space-inset-tabs-s: var(--modern-space-s);
206
295
  --sky-space-inset-pillarbox-2_3-left-l: var(--modern-size-30);
207
296
  --sky-space-inset-pillarbox-2_3-left-m: var(--modern-size-15);
208
297
  --sky-space-inset-pillarbox-2_3-bottom-l: var(--modern-size-20);