@skyux/theme 12.21.0 → 12.22.0

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 (12) hide show
  1. package/css/themes/modern/styles.css +187 -130
  2. package/fesm2022/skyux-theme.mjs +236 -56
  3. package/fesm2022/skyux-theme.mjs.map +1 -1
  4. package/lib/theming/theme-brand.d.ts +11 -0
  5. package/lib/theming/theme-mode.d.ts +11 -0
  6. package/lib/theming/theme-serialization-types.d.ts +47 -0
  7. package/lib/theming/theme-settings.d.ts +8 -0
  8. package/lib/theming/theme-spacing.d.ts +11 -0
  9. package/lib/theming/theme.d.ts +11 -0
  10. package/package.json +2 -2
  11. package/scss/mixins.scss +1 -1
  12. package/scss/variables.scss +2 -2
package/css/themes/modern/styles.css CHANGED
@@ -12,9 +12,10 @@
12
12
  --bb-color-blue-100: #eef3fc;
13
13
  --bb-color-blue-1000: #09152b;
14
14
  --bb-color-blue-200: #d0e1f7;
15
- --bb-color-blue-25: #fbfcfe;
15
+ --bb-color-blue-25: #f1f5fa;
16
16
  --bb-color-blue-300: #aac4ee;
17
17
  --bb-color-blue-400: #80a6e6;
18
+ --bb-color-blue-50: #f4f8fd;
18
19
  --bb-color-blue-500: #5589dd;
19
20
  --bb-color-blue-600: #2b6bd5;
20
21
  --bb-color-blue-700: #2256aa;
@@ -120,16 +121,12 @@
120
121
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
121
122
  --bb-font-blkb_sans-name: BLKB Sans;
122
123
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
123
- --bb-font-size-100: 0.75rem;
124
- --bb-font-size-1000: 3.25rem;
125
- --bb-font-size-200: 0.875rem;
126
- --bb-font-size-300: 1rem;
127
- --bb-font-size-400: 1.25rem;
128
- --bb-font-size-500: 1.5rem;
129
- --bb-font-size-600: 1.75rem;
130
- --bb-font-size-700: 2rem;
131
- --bb-font-size-800: 2.25rem;
132
- --bb-font-size-900: 2.625rem;
124
+ --bb-font-size-300: 0.8125rem;
125
+ --bb-font-size-400: 0.9375rem;
126
+ --bb-font-size-500: 1.0625rem;
127
+ --bb-font-size-600: 1.1875rem;
128
+ --bb-font-size-700: 1.5rem;
129
+ --bb-font-size-800: 1.6875rem;
133
130
  --bb-font-style-italic-style: italic;
134
131
  --bb-font-style-italic-weight: 400;
135
132
  --bb-font-style-light: 300;
@@ -146,25 +143,23 @@
146
143
  --bb-font-weight-regular: 400;
147
144
  --bb-font-weight-semibold: 600;
148
145
  --bb-letter_spacing-normal: normal;
149
- --bb-letter_spacing-wider: 0.32px;
150
- --bb-line_height-100: calc(16/12);
151
- --bb-line_height-1000: calc(64/52);
152
- --bb-line_height-200: calc(20/14);
153
- --bb-line_height-300: calc(24/16);
154
- --bb-line_height-400: calc(28/20);
155
- --bb-line_height-500: calc(32/24);
156
- --bb-line_height-600: calc(36/28);
157
- --bb-line_height-700: calc(40/32);
158
- --bb-line_height-800: calc(40/36);
159
- --bb-line_height-900: calc(48/42);
146
+ --bb-letter_spacing-wider: 0.16px;
147
+ --bb-line_height-300: calc(18/13);
148
+ --bb-line_height-400: calc(20/15);
149
+ --bb-line_height-500: calc(24/17);
150
+ --bb-line_height-600: calc(28/19);
151
+ --bb-line_height-700: calc(32/24);
152
+ --bb-line_height-800: calc(36/26);
160
153
  --bb-opacity-600: .6;
161
154
  --bb-shadow-gray-0: 0 0 0 0 #000000;
162
- --bb-shadow-gray-1: 0 1px 3px 0 rgba(0,0,0,0.2), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.14);
163
- --bb-shadow-gray-16: 0 8px 10px -5px rgba(0,0,0,0.2), 0 6px 30px 5px rgba(0,0,0,0.12), 0 16px 24px 2px rgba(0,0,0,0.14);
164
- --bb-shadow-gray-2: 0 1px 8px 0 rgba(0,0,0,0.2), 0 3px 3px -2px rgba(0,0,0,0.12), 0 3px 4px 0 rgba(0,0,0,0.14);
165
- --bb-shadow-gray-24: 0 11px 15px -7px rgba(0,0,0,0.2), 0 9px 46px 8px rgba(0,0,0,0.12), 0 24px 38px 3px rgba(0,0,0,0.14);
166
- --bb-shadow-gray-4: 0 2px 4px -1px rgba(0,0,0,0.2), 0 1px 10px 0 rgba(0,0,0,0.12), 0 4px 5px 0 rgba(0,0,0,0.14);
167
- --bb-shadow-gray-8: 0 5px 5px -3px rgba(0,0,0,0.2), 0 3px 14px 2px rgba(0,0,0,0.12), 0 8px 10px 1px rgba(0,0,0,0.14);
155
+ --bb-shadow-gray-100: 0 1px 3px 0 rgba(13,62,130,0.2), 0 2px 1px -1px rgba(13,62,130,0.12), 0 1px 1px 0 rgba(13,62,130,0.14);
156
+ --bb-shadow-gray-1600: 0 8px 10px -5px rgba(13,62,130,0.2), 0 6px 30px 5px rgba(13,62,130,0.12), 0 16px 24px 2px rgba(13,62,130,0.14);
157
+ --bb-shadow-gray-200: 0 1px 8px 0 rgba(13,62,130,0.2), 0 3px 3px -2px rgba(13,62,130,0.12), 0 3px 4px 0 rgba(13,62,130,0.14);
158
+ --bb-shadow-gray-2400: 0 11px 15px -7px rgba(13,62,130,0.2), 0 9px 46px 8px rgba(13,62,130,0.12), 0 24px 38px 3px rgba(13,62,130,0.14);
159
+ --bb-shadow-gray-25: 0 1px 1px 0 rgba(13,62,130,0.05);
160
+ --bb-shadow-gray-400: 0 2px 4px -1px rgba(13,62,130,0.2), 0 1px 10px 0 rgba(13,62,130,0.12), 0 4px 5px 0 rgba(13,62,130,0.14);
161
+ --bb-shadow-gray-50: 0 1px 1px 0 rgba(13,62,130,0.12), 0 1.5px 1px -1px rgba(13,62,130,0.12);
162
+ --bb-shadow-gray-800: 0 5px 5px -3px rgba(13,62,130,0.2), 0 3px 14px 2px rgba(13,62,130,0.12), 0 8px 10px 1px rgba(13,62,130,0.14);
168
163
  --bb-size-0: 0rem;
169
164
  --bb-size-fixed-100: 16px;
170
165
  --bb-size-fixed-12: 2px;
@@ -235,7 +230,7 @@
235
230
  --sky-space-inset-letterbox-top-l: var(--bb-size-fluid-125);
236
231
  --sky-space-inset-letterbox-top-m: var(--bb-size-fluid-75);
237
232
  --sky-space-inset-letterbox-top-s: var(--bb-size-fluid-25);
238
- --sky-type-body-m: var(--bb-font-size-100) sans-serif;
233
+ --sky-type-body-m: var(--bb-font-size-300) sans-serif;
239
234
  }
240
235
 
241
236
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
@@ -374,51 +369,51 @@
374
369
  --sky-color-text-inverse: var(--bb-color-gray-1100);
375
370
  --sky-color-text-link_highlighted: var(--bb-color-blue-300);
376
371
  --sky-color-text-selected: var(--bb-color-blue-400);
377
- --sky-elevation-focus: var(--bb-shadow-gray-2);
372
+ --sky-elevation-focus: var(--bb-shadow-gray-200);
378
373
  --sky-elevation-none: var(--bb-shadow-gray-0);
379
- --sky-elevation-overflow: var(--bb-shadow-gray-2);
380
- --sky-elevation-overlay-100: var(--bb-shadow-gray-4);
381
- --sky-elevation-overlay-200: var(--bb-shadow-gray-8);
382
- --sky-elevation-overlay-300: var(--bb-shadow-gray-16);
383
- --sky-elevation-overlay-400: var(--bb-shadow-gray-24);
384
- --sky-elevation-raised-100: var(--bb-shadow-gray-1);
374
+ --sky-elevation-overflow: var(--bb-shadow-gray-200);
375
+ --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
376
+ --sky-elevation-overlay-200: var(--bb-shadow-gray-800);
377
+ --sky-elevation-overlay-300: var(--bb-shadow-gray-1600);
378
+ --sky-elevation-overlay-400: var(--bb-shadow-gray-2400);
379
+ --sky-elevation-raised-100: var(--bb-shadow-gray-100);
385
380
  --sky-opacity-wait: var(--bb-opacity-600);
386
381
  }
387
382
 
388
383
  .sky-theme-modern.sky-theme-brand-base {
389
- --sky-color-background-action-danger-active: var(--bb-color-red-600);
384
+ --sky-color-background-action-danger-active: var(--bb-color-red-800);
390
385
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
391
386
  --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
392
387
  --sky-color-background-action-danger-focus: var(--bb-color-red-600);
393
- --sky-color-background-action-danger-hover: var(--bb-color-red-600);
394
- --sky-color-background-action-input-active: var(--bb-color-transparent);
388
+ --sky-color-background-action-danger-hover: var(--bb-color-red-700);
389
+ --sky-color-background-action-input-active: var(--bb-color-blue-100);
395
390
  --sky-color-background-action-input-base: var(--bb-color-transparent);
396
391
  --sky-color-background-action-input-disabled: var(--bb-color-gray-50);
397
392
  --sky-color-background-action-input-focus: var(--bb-color-transparent);
398
- --sky-color-background-action-input-hover: var(--bb-color-transparent);
399
- --sky-color-background-action-primary-active: var(--bb-color-blue-600);
393
+ --sky-color-background-action-input-hover: var(--bb-color-blue-50);
394
+ --sky-color-background-action-primary-active: var(--bb-color-blue-800);
400
395
  --sky-color-background-action-primary-base: var(--bb-color-blue-600);
401
396
  --sky-color-background-action-primary-disabled: var(--bb-color-gray-50);
402
397
  --sky-color-background-action-primary-focus: var(--bb-color-blue-600);
403
- --sky-color-background-action-primary-hover: var(--bb-color-blue-600);
404
- --sky-color-background-action-secondary-active: var(--bb-color-white);
398
+ --sky-color-background-action-primary-hover: var(--bb-color-blue-700);
399
+ --sky-color-background-action-secondary-active: var(--bb-color-blue-100);
405
400
  --sky-color-background-action-secondary-base: var(--bb-color-white);
406
401
  --sky-color-background-action-secondary-disabled: var(--bb-color-gray-50);
407
402
  --sky-color-background-action-secondary-focus: var(--bb-color-white);
408
- --sky-color-background-action-secondary-hover: var(--bb-color-white);
409
- --sky-color-background-action-tertiary-active: var(--bb-color-transparent);
403
+ --sky-color-background-action-secondary-hover: var(--bb-color-blue-50);
404
+ --sky-color-background-action-tertiary-active: var(--bb-color-blue-100);
410
405
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
411
406
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-50);
412
407
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
413
- --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
408
+ --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
414
409
  --sky-color-background-blocking: var(--bb-color-blocking);
415
410
  --sky-color-background-container-base: var(--bb-color-white);
416
411
  --sky-color-background-container-danger: var(--bb-color-red-300);
417
- --sky-color-background-container-info: var(--bb-color-blue-100);
412
+ --sky-color-background-container-info: var(--bb-color-blue-200);
418
413
  --sky-color-background-container-menu: var(--bb-color-white);
419
414
  --sky-color-background-container-success: var(--bb-color-green-300);
420
415
  --sky-color-background-container-warning: var(--bb-color-yellow-300);
421
- --sky-color-background-file_drop: var(--bb-color-gray-25);
416
+ --sky-color-background-file_drop: var(--bb-color-blue-25);
422
417
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
423
418
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
424
419
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
@@ -426,17 +421,17 @@
426
421
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
427
422
  --sky-color-background-input-base: var(--bb-color-blue-25);
428
423
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
429
- --sky-color-background-list-active: var(--bb-color-transparent);
424
+ --sky-color-background-list-active: var(--bb-color-blue-100);
430
425
  --sky-color-background-list-base: var(--bb-color-transparent);
431
426
  --sky-color-background-list-disabled: var(--bb-color-gray-50);
432
427
  --sky-color-background-list-focus: var(--bb-color-transparent);
433
- --sky-color-background-list-hover: var(--bb-color-transparent);
434
- --sky-color-background-nav-active: var(--bb-color-transparent);
428
+ --sky-color-background-list-hover: var(--bb-color-blue-50);
429
+ --sky-color-background-nav-active: var(--bb-color-blue-100);
435
430
  --sky-color-background-nav-base: var(--bb-color-transparent);
436
431
  --sky-color-background-nav-disabled: var(--bb-color-gray-50);
437
432
  --sky-color-background-nav-focus: var(--bb-color-transparent);
438
- --sky-color-background-nav-hover: var(--bb-color-transparent);
439
- --sky-color-background-page: var(--bb-color-gray-25);
433
+ --sky-color-background-nav-hover: var(--bb-color-blue-50);
434
+ --sky-color-background-page: var(--bb-color-blue-25);
440
435
  --sky-color-background-scrim: var(--bb-color-scrim);
441
436
  --sky-color-background-selected-danger: var(--bb-color-red-300);
442
437
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
@@ -447,58 +442,58 @@
447
442
  --sky-color-background-thumb-base: var(--bb-color-white);
448
443
  --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
449
444
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
450
- --sky-color-border-action-danger-active: var(--bb-color-red-200);
445
+ --sky-color-border-action-danger-active: var(--bb-color-red-1000);
451
446
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
452
- --sky-color-border-action-danger-disabled: var(--bb-color-gray-100);
453
- --sky-color-border-action-danger-focus: var(--bb-color-red-200);
454
- --sky-color-border-action-danger-hover: var(--bb-color-red-200);
447
+ --sky-color-border-action-danger-disabled: var(--bb-color-gray-200);
448
+ --sky-color-border-action-danger-focus: var(--bb-color-red-1000);
449
+ --sky-color-border-action-danger-hover: var(--bb-color-red-1000);
455
450
  --sky-color-border-action-input-active: var(--bb-color-blue-600);
456
451
  --sky-color-border-action-input-base: var(--bb-color-blue-200);
457
- --sky-color-border-action-input-disabled: var(--bb-color-gray-400);
452
+ --sky-color-border-action-input-disabled: var(--bb-color-gray-200);
458
453
  --sky-color-border-action-input-focus: var(--bb-color-blue-600);
459
454
  --sky-color-border-action-input-hover: var(--bb-color-blue-600);
460
- --sky-color-border-action-primary-active: var(--bb-color-blue-200);
455
+ --sky-color-border-action-primary-active: var(--bb-color-blue-1000);
461
456
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
462
- --sky-color-border-action-primary-disabled: var(--bb-color-gray-100);
463
- --sky-color-border-action-primary-focus: var(--bb-color-blue-200);
464
- --sky-color-border-action-primary-hover: var(--bb-color-blue-200);
457
+ --sky-color-border-action-primary-disabled: var(--bb-color-gray-200);
458
+ --sky-color-border-action-primary-focus: var(--bb-color-blue-1000);
459
+ --sky-color-border-action-primary-hover: var(--bb-color-blue-1000);
465
460
  --sky-color-border-action-secondary-active: var(--bb-color-blue-600);
466
- --sky-color-border-action-secondary-base: var(--bb-color-gray-100);
467
- --sky-color-border-action-secondary-disabled: var(--bb-color-gray-100);
461
+ --sky-color-border-action-secondary-base: var(--bb-color-blue-300);
462
+ --sky-color-border-action-secondary-disabled: var(--bb-color-gray-200);
468
463
  --sky-color-border-action-secondary-focus: var(--bb-color-blue-600);
469
464
  --sky-color-border-action-secondary-hover: var(--bb-color-blue-600);
470
465
  --sky-color-border-action-tertiary-active: var(--bb-color-blue-600);
471
466
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
472
- --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-100);
467
+ --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-200);
473
468
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
474
469
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
475
470
  --sky-color-border-column_divider: var(--bb-color-blue-600);
476
- --sky-color-border-container-base: var(--bb-color-gray-100);
471
+ --sky-color-border-container-base: var(--bb-color-blue-200);
477
472
  --sky-color-border-danger: var(--bb-color-red-600);
478
- --sky-color-border-divider: var(--bb-color-gray-100);
479
- --sky-color-border-elevation: var(--bb-color-gray-100);
473
+ --sky-color-border-divider: var(--bb-color-blue-300);
474
+ --sky-color-border-elevation: var(--bb-color-blue-200);
480
475
  --sky-color-border-info: var(--bb-color-blue-600);
481
476
  --sky-color-border-input-active: var(--bb-color-blue-600);
482
477
  --sky-color-border-input-base: var(--bb-color-blue-200);
483
- --sky-color-border-input-disabled: var(--bb-color-gray-400);
478
+ --sky-color-border-input-disabled: var(--bb-color-gray-200);
484
479
  --sky-color-border-input-error: var(--bb-color-red-600);
485
480
  --sky-color-border-input-focus: var(--bb-color-blue-600);
486
481
  --sky-color-border-input-hover: var(--bb-color-blue-600);
487
482
  --sky-color-border-progress_step: var(--bb-color-gray-400);
488
483
  --sky-color-border-selected: var(--bb-color-blue-600);
489
484
  --sky-color-border-selected_soft: var(--bb-color-blue-300);
490
- --sky-color-border-separator-light: var(--bb-color-gray-50);
491
- --sky-color-border-separator-row: var(--bb-color-gray-50);
485
+ --sky-color-border-separator-light: var(--bb-color-blue-200);
486
+ --sky-color-border-separator-row: var(--bb-color-blue-200);
492
487
  --sky-color-border-success: var(--bb-color-green-700);
493
488
  --sky-color-border-switch-active: var(--bb-color-blue-600);
494
489
  --sky-color-border-switch-base: var(--bb-color-blue-500);
495
- --sky-color-border-switch-disabled: var(--bb-color-gray-400);
490
+ --sky-color-border-switch-disabled: var(--bb-color-gray-200);
496
491
  --sky-color-border-switch-error: var(--bb-color-red-600);
497
492
  --sky-color-border-switch-focus: var(--bb-color-blue-600);
498
493
  --sky-color-border-switch-hover: var(--bb-color-blue-600);
499
494
  --sky-color-border-switch-selected-active: var(--bb-color-blue-1000);
500
495
  --sky-color-border-switch-selected-base: var(--bb-color-transparent);
501
- --sky-color-border-switch-selected-disabled: var(--bb-color-gray-400);
496
+ --sky-color-border-switch-selected-disabled: var(--bb-color-gray-200);
502
497
  --sky-color-border-switch-selected-focus: var(--bb-color-blue-1000);
503
498
  --sky-color-border-switch-selected-hover: var(--bb-color-blue-1000);
504
499
  --sky-color-border-text_highlight: var(--bb-color-yellow-800);
@@ -523,18 +518,45 @@
523
518
  --sky-color-text-danger: var(--bb-color-red-600);
524
519
  --sky-color-text-deemphasized: var(--bb-color-gray-600);
525
520
  --sky-color-text-default: var(--bb-color-gray-900);
526
- --sky-color-text-heading: var(--bb-color-blue-800);
521
+ --sky-color-text-heading: var(--bb-color-blue-900);
527
522
  --sky-color-text-inverse: var(--bb-color-white);
528
- --sky-color-text-link_highlighted: var(--bb-color-blue-800);
523
+ --sky-color-text-link_highlighted: var(--bb-color-blue-700);
529
524
  --sky-color-text-selected: var(--bb-color-blue-600);
530
- --sky-elevation-focus: var(--bb-shadow-gray-2);
525
+ --sky-elevation-action-danger-active: var(--bb-shadow-gray-0);
526
+ --sky-elevation-action-danger-base: var(--bb-shadow-gray-50);
527
+ --sky-elevation-action-danger-disabled: var(--bb-shadow-gray-0);
528
+ --sky-elevation-action-danger-focus: var(--bb-shadow-gray-50);
529
+ --sky-elevation-action-danger-hover: var(--bb-shadow-gray-50);
530
+ --sky-elevation-action-input-active: var(--bb-shadow-gray-25);
531
+ --sky-elevation-action-input-base: var(--bb-shadow-gray-25);
532
+ --sky-elevation-action-input-disabled: var(--bb-shadow-gray-0);
533
+ --sky-elevation-action-input-focus: var(--bb-shadow-gray-25);
534
+ --sky-elevation-action-input-hover: var(--bb-shadow-gray-25);
535
+ --sky-elevation-action-primary-active: var(--bb-shadow-gray-0);
536
+ --sky-elevation-action-primary-base: var(--bb-shadow-gray-50);
537
+ --sky-elevation-action-primary-disabled: var(--bb-shadow-gray-0);
538
+ --sky-elevation-action-primary-focus: var(--bb-shadow-gray-50);
539
+ --sky-elevation-action-primary-hover: var(--bb-shadow-gray-50);
540
+ --sky-elevation-action-secondary-active: var(--bb-shadow-gray-0);
541
+ --sky-elevation-action-secondary-base: var(--bb-shadow-gray-50);
542
+ --sky-elevation-action-secondary-disabled: var(--bb-shadow-gray-0);
543
+ --sky-elevation-action-secondary-focus: var(--bb-shadow-gray-50);
544
+ --sky-elevation-action-secondary-hover: var(--bb-shadow-gray-50);
545
+ --sky-elevation-action-tertiary-active: var(--bb-shadow-gray-0);
546
+ --sky-elevation-action-tertiary-base: var(--bb-shadow-gray-0);
547
+ --sky-elevation-action-tertiary-disabled: var(--bb-shadow-gray-0);
548
+ --sky-elevation-action-tertiary-focus: var(--bb-shadow-gray-0);
549
+ --sky-elevation-action-tertiary-hover: var(--bb-shadow-gray-50);
550
+ --sky-elevation-focus: var(--bb-shadow-gray-200);
551
+ --sky-elevation-input-base: var(--bb-shadow-gray-25);
552
+ --sky-elevation-input-disabled: var(--bb-shadow-gray-0);
531
553
  --sky-elevation-none: var(--bb-shadow-gray-0);
532
- --sky-elevation-overflow: var(--bb-shadow-gray-2);
533
- --sky-elevation-overlay-100: var(--bb-shadow-gray-4);
534
- --sky-elevation-overlay-200: var(--bb-shadow-gray-8);
535
- --sky-elevation-overlay-300: var(--bb-shadow-gray-16);
536
- --sky-elevation-overlay-400: var(--bb-shadow-gray-24);
537
- --sky-elevation-raised-100: var(--bb-shadow-gray-1);
554
+ --sky-elevation-overflow: var(--bb-shadow-gray-200);
555
+ --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
556
+ --sky-elevation-overlay-200: var(--bb-shadow-gray-800);
557
+ --sky-elevation-overlay-300: var(--bb-shadow-gray-1600);
558
+ --sky-elevation-overlay-400: var(--bb-shadow-gray-2400);
559
+ --sky-elevation-raised-100: var(--bb-shadow-gray-100);
538
560
  --sky-opacity-wait: var(--bb-opacity-600);
539
561
  }
540
562
 
@@ -571,7 +593,7 @@
571
593
  --sky-border-style-elevation: var(--bb-border-style-solid);
572
594
  --sky-border-style-separator-dark: var(--bb-border-style-solid);
573
595
  --sky-border-style-separator-light: var(--bb-border-style-solid);
574
- --sky-border-style-separator-row: var(--bb-border-style-dotted);
596
+ --sky-border-style-separator-row: var(--bb-border-style-solid);
575
597
  --sky-border-width-accent: var(--bb-size-fixed-37);
576
598
  --sky-border-width-action-active: var(--bb-size-fixed-12);
577
599
  --sky-border-width-action-base: var(--bb-size-fixed-6);
@@ -651,6 +673,10 @@
651
673
  --sky-comp-datepicker-header-space-inset-left: var(--bb-size-fluid-75);
652
674
  --sky-comp-datepicker-header-space-inset-right: var(--bb-size-fluid-75);
653
675
  --sky-comp-datepicker-header-space-inset-top: var(--bb-size-fluid-75);
676
+ --sky-comp-datepicker-m_y_button-space-inset-bottom: var(--bb-size-fluid-50);
677
+ --sky-comp-datepicker-m_y_button-space-inset-left: var(--bb-size-fluid-50);
678
+ --sky-comp-datepicker-m_y_button-space-inset-right: var(--bb-size-fluid-50);
679
+ --sky-comp-datepicker-m_y_button-space-inset-top: var(--bb-size-fluid-50);
654
680
  --sky-comp-dropdown-menu-space-inset-bottom: var(--bb-size-fluid-50);
655
681
  --sky-comp-dropdown-menu-space-inset-left: var(--bb-size-fluid-50);
656
682
  --sky-comp-dropdown-menu-space-inset-right: var(--bb-size-fluid-50);
@@ -904,65 +930,65 @@
904
930
  --sky-comp-wizard-tabset-tabs-space-inset-right: var(--bb-size-fluid-150);
905
931
  --sky-comp-wizard-tabset-tabs-space-inset-top: var(--bb-size-0);
906
932
  --sky-font-family-monospaced: var(--bb-font-monospaced-family);
907
- --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-normal);
933
+ --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-wider);
908
934
  --sky-font-letter_spacing-input-label: var(--bb-letter_spacing-wider);
909
- --sky-font-line_height-body-l: var(--bb-line_height-300);
910
- --sky-font-line_height-body-m: var(--bb-line_height-200);
911
- --sky-font-line_height-body-s: var(--bb-line_height-100);
912
- --sky-font-line_height-display-1: var(--bb-line_height-800);
913
- --sky-font-line_height-display-2: var(--bb-line_height-500);
914
- --sky-font-line_height-display-3: var(--bb-line_height-300);
915
- --sky-font-line_height-display-4: var(--bb-line_height-200);
916
- --sky-font-line_height-heading-1: var(--bb-line_height-500);
917
- --sky-font-line_height-heading-2: var(--bb-line_height-400);
918
- --sky-font-line_height-heading-3: var(--bb-line_height-300);
919
- --sky-font-line_height-heading-4: var(--bb-line_height-200);
920
- --sky-font-line_height-heading-5: var(--bb-line_height-200);
921
- --sky-font-line_height-hint-m: var(--bb-line_height-200);
922
- --sky-font-line_height-hint-s: var(--bb-line_height-100);
923
- --sky-font-line_height-input-label: var(--bb-line_height-100);
924
- --sky-font-line_height-input-val: var(--bb-line_height-200);
925
- --sky-font-size-body-l: var(--bb-font-size-300);
926
- --sky-font-size-body-m: var(--bb-font-size-200);
927
- --sky-font-size-body-s: var(--bb-font-size-100);
928
- --sky-font-size-display-1: var(--bb-font-size-800);
929
- --sky-font-size-display-2: var(--bb-font-size-500);
930
- --sky-font-size-display-3: var(--bb-font-size-300);
931
- --sky-font-size-display-4: var(--bb-font-size-200);
932
- --sky-font-size-heading-1: var(--bb-font-size-500);
933
- --sky-font-size-heading-2: var(--bb-font-size-400);
934
- --sky-font-size-heading-3: var(--bb-font-size-300);
935
- --sky-font-size-heading-4: var(--bb-font-size-200);
936
- --sky-font-size-heading-5: var(--bb-font-size-200);
937
- --sky-font-size-hint-m: var(--bb-font-size-200);
938
- --sky-font-size-hint-s: var(--bb-font-size-100);
939
- --sky-font-size-input-label: var(--bb-font-size-100);
940
- --sky-font-size-input-val: var(--bb-font-size-200);
935
+ --sky-font-line_height-body-l: var(--bb-line_height-500);
936
+ --sky-font-line_height-body-m: var(--bb-line_height-400);
937
+ --sky-font-line_height-body-s: var(--bb-line_height-300);
938
+ --sky-font-line_height-display-1: var(--bb-line_height-700);
939
+ --sky-font-line_height-display-2: var(--bb-line_height-600);
940
+ --sky-font-line_height-display-3: var(--bb-line_height-500);
941
+ --sky-font-line_height-display-4: var(--bb-line_height-400);
942
+ --sky-font-line_height-heading-1: var(--bb-line_height-800);
943
+ --sky-font-line_height-heading-2: var(--bb-line_height-600);
944
+ --sky-font-line_height-heading-3: var(--bb-line_height-500);
945
+ --sky-font-line_height-heading-4: var(--bb-line_height-400);
946
+ --sky-font-line_height-heading-5: var(--bb-line_height-400);
947
+ --sky-font-line_height-hint-m: var(--bb-line_height-400);
948
+ --sky-font-line_height-hint-s: var(--bb-line_height-300);
949
+ --sky-font-line_height-input-label: var(--bb-line_height-300);
950
+ --sky-font-line_height-input-val: var(--bb-line_height-400);
951
+ --sky-font-size-body-l: var(--bb-font-size-500);
952
+ --sky-font-size-body-m: var(--bb-font-size-400);
953
+ --sky-font-size-body-s: var(--bb-font-size-300);
954
+ --sky-font-size-display-1: var(--bb-font-size-700);
955
+ --sky-font-size-display-2: var(--bb-font-size-600);
956
+ --sky-font-size-display-3: var(--bb-font-size-500);
957
+ --sky-font-size-display-4: var(--bb-font-size-400);
958
+ --sky-font-size-heading-1: var(--bb-font-size-800);
959
+ --sky-font-size-heading-2: var(--bb-font-size-600);
960
+ --sky-font-size-heading-3: var(--bb-font-size-500);
961
+ --sky-font-size-heading-4: var(--bb-font-size-400);
962
+ --sky-font-size-heading-5: var(--bb-font-size-400);
963
+ --sky-font-size-hint-m: var(--bb-font-size-400);
964
+ --sky-font-size-hint-s: var(--bb-font-size-300);
965
+ --sky-font-size-input-label: var(--bb-font-size-300);
966
+ --sky-font-size-input-val: var(--bb-font-size-400);
941
967
  --sky-font-style-body-l: var(--bb-font-style-regular);
942
968
  --sky-font-style-body-m: var(--bb-font-style-regular);
943
969
  --sky-font-style-body-s: var(--bb-font-style-regular);
944
- --sky-font-style-display-1: var(--bb-font-style-light);
945
- --sky-font-style-display-2: var(--bb-font-style-light);
946
- --sky-font-style-display-3: var(--bb-font-style-light);
947
- --sky-font-style-display-4: var(--bb-font-style-light);
970
+ --sky-font-style-display-1: var(--bb-font-style-regular);
971
+ --sky-font-style-display-2: var(--bb-font-style-regular);
972
+ --sky-font-style-display-3: var(--bb-font-style-regular);
973
+ --sky-font-style-display-4: var(--bb-font-style-regular);
948
974
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
949
- --sky-font-style-heading-1: var(--bb-font-style-regular);
950
- --sky-font-style-heading-2: var(--bb-font-style-regular);
951
- --sky-font-style-heading-3: var(--bb-font-style-regular);
975
+ --sky-font-style-heading-1: var(--bb-font-style-semibold);
976
+ --sky-font-style-heading-2: var(--bb-font-style-semibold);
977
+ --sky-font-style-heading-3: var(--bb-font-style-semibold);
952
978
  --sky-font-style-heading-4: var(--bb-font-style-semibold);
953
979
  --sky-font-style-heading-5: var(--bb-font-style-semibold);
954
980
  --sky-font-style-input-label: var(--bb-font-style-regular);
955
981
  --sky-font-weight-body-l: var(--bb-font-weight-regular);
956
982
  --sky-font-weight-body-m: var(--bb-font-weight-regular);
957
- --sky-font-weight-body-s: var(--bb-font-weight-regular);
958
- --sky-font-weight-display-1: var(--bb-font-weight-light);
959
- --sky-font-weight-display-2: var(--bb-font-weight-light);
960
- --sky-font-weight-display-3: var(--bb-font-weight-light);
961
- --sky-font-weight-display-4: var(--bb-font-weight-light);
983
+ --sky-font-weight-body-s: var(--bb-font-weight-semibold);
984
+ --sky-font-weight-display-1: var(--bb-font-weight-regular);
985
+ --sky-font-weight-display-2: var(--bb-font-weight-regular);
986
+ --sky-font-weight-display-3: var(--bb-font-weight-semibold);
987
+ --sky-font-weight-display-4: var(--bb-font-weight-semibold);
962
988
  --sky-font-weight-emphasized: var(--bb-font-weight-semibold);
963
989
  --sky-font-weight-heading-1: var(--bb-font-weight-regular);
964
- --sky-font-weight-heading-2: var(--bb-font-weight-regular);
965
- --sky-font-weight-heading-3: var(--bb-font-weight-regular);
990
+ --sky-font-weight-heading-2: var(--bb-font-weight-semibold);
991
+ --sky-font-weight-heading-3: var(--bb-font-weight-semibold);
966
992
  --sky-font-weight-heading-4: var(--bb-font-weight-semibold);
967
993
  --sky-font-weight-heading-5: var(--bb-font-weight-semibold);
968
994
  --sky-font-weight-hint-m: var(--bb-font-weight-regular);
@@ -1619,8 +1645,35 @@
1619
1645
  --sky-color-text-inverse: var(--modern-color-white);
1620
1646
  --sky-color-text-link_highlight: var(--modern-color-blue-80);
1621
1647
  --sky-color-text-selected: var(--modern-color-blue-74);
1648
+ --sky-elevation-action-danger-active: var(--modern-shadow-size-0);
1649
+ --sky-elevation-action-danger-base: var(--modern-shadow-size-0);
1650
+ --sky-elevation-action-danger-disabled: var(--modern-shadow-size-0);
1651
+ --sky-elevation-action-danger-hover: var(--modern-shadow-size-0);
1652
+ --sky-elevation-action-input-active: var(--modern-shadow-size-0);
1653
+ --sky-elevation-action-input-base: var(--modern-shadow-size-0);
1654
+ --sky-elevation-action-input-disabled: var(--modern-shadow-size-0);
1655
+ --sky-elevation-action-input-hover: var(--modern-shadow-size-0);
1656
+ --sky-elevation-action-primary-active: var(--modern-shadow-size-0);
1657
+ --sky-elevation-action-primary-base: var(--modern-shadow-size-0);
1658
+ --sky-elevation-action-primary-disabled: var(--modern-shadow-size-0);
1659
+ --sky-elevation-action-primary-hover: var(--modern-shadow-size-0);
1660
+ --sky-elevation-action-secondary-active: var(--modern-shadow-size-0);
1661
+ --sky-elevation-action-secondary-base: var(--modern-shadow-size-0);
1662
+ --sky-elevation-action-secondary-disabled: var(--modern-shadow-size-0);
1663
+ --sky-elevation-action-secondary-hover: var(--modern-shadow-size-0);
1664
+ --sky-elevation-action-tertiary-active: var(--modern-shadow-size-0);
1665
+ --sky-elevation-action-tertiary-base: var(--modern-shadow-size-0);
1666
+ --sky-elevation-action-tertiary-disabled: var(--modern-shadow-size-0);
1667
+ --sky-elevation-action-tertiary-hover: var(--modern-shadow-size-0);
1668
+ --sky-elevation-input-base: var(--modern-shadow-size-0);
1669
+ --sky-elevation-input-disabled: var(--modern-shadow-size-0);
1622
1670
  --sky-elevation-none: var(--modern-shadow-size-0);
1623
1671
  --sky-opacity-wait: var(--modern-opacity-600);
1672
+ --sky-elevation-action-danger-focus: var(--modern-shadow-size-3);
1673
+ --sky-elevation-action-input-focus: var(--modern-shadow-size-3);
1674
+ --sky-elevation-action-primary-focus: var(--modern-shadow-size-3);
1675
+ --sky-elevation-action-secondary-focus: var(--modern-shadow-size-3);
1676
+ --sky-elevation-action-tertiary-focus: var(--modern-shadow-size-3);
1624
1677
  --sky-elevation-focus: var(--modern-shadow-size-3);
1625
1678
  --sky-elevation-overflow: var(--modern-shadow-size-3);
1626
1679
  --sky-elevation-overlay-100: var(--modern-shadow-size-4);
@@ -1742,6 +1795,10 @@
1742
1795
  --sky-comp-datepicker-header-space-inset-left: var(--modern-size-15);
1743
1796
  --sky-comp-datepicker-header-space-inset-right: var(--modern-size-15);
1744
1797
  --sky-comp-datepicker-header-space-inset-top: var(--modern-size-15);
1798
+ --sky-comp-datepicker-m_y_button-space-inset-bottom: var(--modern-size-5);
1799
+ --sky-comp-datepicker-m_y_button-space-inset-left: var(--modern-size-10);
1800
+ --sky-comp-datepicker-m_y_button-space-inset-right: var(--modern-size-10);
1801
+ --sky-comp-datepicker-m_y_button-space-inset-top: var(--modern-size-5);
1745
1802
  --sky-comp-dropdown-menu-space-inset-bottom: var(--modern-size-10);
1746
1803
  --sky-comp-dropdown-menu-space-inset-left: var(--modern-size-0);
1747
1804
  --sky-comp-dropdown-menu-space-inset-right: var(--modern-size-0);