@skyux/theme 12.1.0 → 12.3.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 (4) hide show
  1. package/css/sky.css +25 -7
  2. package/css/themes/modern/styles.css +130 -68
  3. package/package.json +2 -2
  4. package/scss/_compat/_mixins.scss +3 -2
package/css/sky.css CHANGED
@@ -398,6 +398,9 @@ textarea {
398
398
  /* switch */
399
399
  --sky-switch-size: 22px;
400
400
  --sky-switch-margin: 5px;
401
+ /* viewkeeper */
402
+ --sky-viewkeeper-opacity: 0.95;
403
+ --sky-viewkeeper-box-shadow: none;
401
404
  }
402
405
 
403
406
  body:not(.sky-theme-modern) {
@@ -663,12 +666,12 @@ a.sky-btn:hover {
663
666
  }
664
667
 
665
668
  .sky-btn-borderless, .sky-btn-borderless-inline {
666
- color: #cdcfd2;
669
+ color: #686c73;
667
670
  cursor: pointer;
668
671
  border: none;
669
672
  }
670
673
  .sky-btn-borderless:hover, .sky-btn-borderless-inline:hover {
671
- color: rgb(151.3157894737, 155.4631578947, 161.6842105263);
674
+ color: rgb(55.5616438356, 57.698630137, 61.4383561644);
672
675
  transition: color 150ms;
673
676
  }
674
677
 
@@ -688,7 +691,7 @@ a.sky-btn:hover {
688
691
  }
689
692
 
690
693
  .sky-btn-icon-borderless {
691
- color: #cdcfd2;
694
+ color: #686c73;
692
695
  cursor: pointer;
693
696
  height: 26px;
694
697
  width: 26px;
@@ -696,7 +699,7 @@ a.sky-btn:hover {
696
699
  padding: 0;
697
700
  }
698
701
  .sky-btn-icon-borderless:hover {
699
- color: rgb(151.3157894737, 155.4631578947, 161.6842105263);
702
+ color: rgb(55.5616438356, 57.698630137, 61.4383561644);
700
703
  transition: color 150ms;
701
704
  }
702
705
 
@@ -1875,16 +1878,31 @@ mark.sky-highlight-mark {
1875
1878
  outline: none;
1876
1879
  }
1877
1880
 
1878
- symbol[id^=sky-i-] path {
1881
+ symbol[id^=sky-i-] * {
1879
1882
  fill: currentColor;
1880
1883
  }
1881
- symbol[id^=sky-i-] path.sky-i-path-1 {
1884
+ symbol[id^=sky-i-] *.sky-i-path-1 {
1882
1885
  fill: var(--sky-icon-svg-color-input, currentColor);
1883
1886
  }
1884
- symbol[id^=sky-i-] path.sky-i-path-2 {
1887
+ symbol[id^=sky-i-] *.sky-i-path-2 {
1885
1888
  fill: var(--sky-icon-svg-path-2-color-input, #fff);
1886
1889
  }
1887
1890
 
1891
+ .sky-viewkeeper-boundary {
1892
+ isolation: isolate;
1893
+ }
1894
+
1895
+ .sky-viewkeeper-fixed {
1896
+ position: fixed !important;
1897
+ z-index: 1000;
1898
+ opacity: var(--sky-viewkeeper-opacity);
1899
+ overflow: hidden;
1900
+ }
1901
+ .sky-viewkeeper-fixed:not(.sky-viewkeeper-fixed-not-last) {
1902
+ box-shadow: var(--sky-viewkeeper-box-shadow);
1903
+ z-index: 999;
1904
+ }
1905
+
1888
1906
  .sky-page-heading {
1889
1907
  font-family: "BLKB Sans Condensed", "Helvetica Neue Condensed", "Arial Narrow";
1890
1908
  color: var(--sky-text-color-default);
package/css/themes/modern/styles.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .sky-theme-modern.sky-theme-brand-base {
2
+ --bb-opacity-600: .6;
2
3
  --bb-size-reading_container-max_width: 50ch, 40vw;
3
4
  --bb-size-fixed-6000: 960px;
4
5
  --bb-size-fixed-4000: 640px;
@@ -34,7 +35,7 @@
34
35
  --bb-size-fluid-18: 0.1875rem;
35
36
  --bb-size-fluid-12: 0.125rem;
36
37
  --bb-size-fluid-6: 0.0625rem;
37
- --bb-size-fluid-0: 0rem;
38
+ --bb-size-0: 0rem;
38
39
  --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);
39
40
  --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);
40
41
  --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);
@@ -96,6 +97,7 @@
96
97
  --bb-color-gray-100: #d3d5d6;
97
98
  --bb-color-gray-50: #e9eaeb;
98
99
  --bb-color-gray-25: #f9f9f9;
100
+ --bb-color-blocking: rgba(255, 255, 255, 0.7);
99
101
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
100
102
  --bb-color-transparent: rgba(0, 0, 0, 0);
101
103
  --bb-color-black: #000000;
@@ -206,6 +208,7 @@
206
208
  }
207
209
 
208
210
  .sky-theme-modern.sky-theme-brand-base {
211
+ --sky-opacity-wait: var(--bb-opacity-600);
209
212
  --sky-elevation-overlay-400: var(--bb-shadow-gray-24);
210
213
  --sky-elevation-overlay-300: var(--bb-shadow-gray-16);
211
214
  --sky-elevation-overlay-200: var(--bb-shadow-gray-8);
@@ -258,28 +261,36 @@
258
261
  --sky-color-border-danger: var(--bb-color-red-600);
259
262
  --sky-color-border-selected_soft: var(--bb-color-blue-300);
260
263
  --sky-color-border-selected: var(--bb-color-blue-600);
261
- --sky-color-background-icon_matte: var(--bb-color-blue-100);
262
- --sky-color-background-thumbnail_matte: var(--bb-color-white);
263
- --sky-color-background-file_drop: var(--bb-color-gray-25);
264
- --sky-color-background-list-disabled: var(--bb-color-gray-50);
265
- --sky-color-background-list-focus: var(--bb-color-transparent);
266
- --sky-color-background-list-active: var(--bb-color-transparent);
267
- --sky-color-background-list-hover: var(--bb-color-transparent);
268
- --sky-color-background-list-base: var(--bb-color-transparent);
269
- --sky-color-background-nav-disabled: var(--bb-color-gray-50);
270
- --sky-color-background-nav-focus: var(--bb-color-transparent);
271
- --sky-color-background-nav-active: var(--bb-color-transparent);
272
- --sky-color-background-nav-hover: var(--bb-color-transparent);
273
- --sky-color-background-nav-base: var(--bb-color-transparent);
264
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
265
+ --sky-color-background-thumb-base: var(--bb-color-white);
274
266
  --sky-color-background-selected-success: var(--bb-color-green-300);
275
267
  --sky-color-background-selected-warning: var(--bb-color-yellow-300);
276
268
  --sky-color-background-selected-danger: var(--bb-color-red-300);
277
269
  --sky-color-background-selected-soft: var(--bb-color-blue-100);
278
270
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
279
- --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
280
- --sky-color-background-thumb-base: var(--bb-color-white);
271
+ --sky-color-background-nav-disabled: var(--bb-color-gray-50);
272
+ --sky-color-background-nav-focus: var(--bb-color-transparent);
273
+ --sky-color-background-nav-active: var(--bb-color-transparent);
274
+ --sky-color-background-nav-hover: var(--bb-color-transparent);
275
+ --sky-color-background-nav-base: var(--bb-color-transparent);
276
+ --sky-color-background-list-disabled: var(--bb-color-gray-50);
277
+ --sky-color-background-list-focus: var(--bb-color-transparent);
278
+ --sky-color-background-list-active: var(--bb-color-transparent);
279
+ --sky-color-background-list-hover: var(--bb-color-transparent);
280
+ --sky-color-background-list-base: var(--bb-color-transparent);
281
281
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
282
282
  --sky-color-background-input-base: var(--bb-color-transparent);
283
+ --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
284
+ --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
285
+ --sky-color-background-icon_matte-success: var(--bb-color-green-700);
286
+ --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
287
+ --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
288
+ --sky-color-background-container-info: var(--bb-color-blue-100);
289
+ --sky-color-background-container-success: var(--bb-color-green-300);
290
+ --sky-color-background-container-warning: var(--bb-color-yellow-300);
291
+ --sky-color-background-container-danger: var(--bb-color-red-300);
292
+ --sky-color-background-container-menu: var(--bb-color-white);
293
+ --sky-color-background-container-base: var(--bb-color-white);
283
294
  --sky-color-background-action-input-disabled: var(--bb-color-gray-50);
284
295
  --sky-color-background-action-input-focus: var(--bb-color-transparent);
285
296
  --sky-color-background-action-input-active: var(--bb-color-transparent);
@@ -305,13 +316,10 @@
305
316
  --sky-color-background-action-primary-active: var(--bb-color-blue-600);
306
317
  --sky-color-background-action-primary-hover: var(--bb-color-blue-600);
307
318
  --sky-color-background-action-primary-base: var(--bb-color-blue-600);
308
- --sky-color-background-container-info: var(--bb-color-blue-100);
309
- --sky-color-background-container-success: var(--bb-color-green-300);
310
- --sky-color-background-container-warning: var(--bb-color-yellow-300);
311
- --sky-color-background-container-danger: var(--bb-color-red-300);
312
- --sky-color-background-container-menu: var(--bb-color-white);
313
- --sky-color-background-container-base: var(--bb-color-white);
319
+ --sky-color-background-thumbnail_matte: var(--bb-color-white);
320
+ --sky-color-background-file_drop: var(--bb-color-gray-25);
314
321
  --sky-color-background-text_highlight: var(--bb-color-yellow-400);
322
+ --sky-color-background-blocking: var(--bb-color-blocking);
315
323
  --sky-color-background-scrim: var(--bb-color-scrim);
316
324
  --sky-color-background-page: var(--bb-color-gray-25);
317
325
  --sky-color-icon-action: var(--bb-color-blue-600);
@@ -473,8 +481,11 @@
473
481
  --sky-size-avatar-s: var(--bb-size-fluid-200);
474
482
  --sky-size-thumbnail-l: var(--bb-size-fixed-600);
475
483
  --sky-size-max_width-overlay_message: var(--bb-size-reading_container-max_width);
476
- --sky-size-width-resize_handle: var(--bb-size-fixed-150);
484
+ --sky-size-width-modal-l: var(--bb-size-fixed-6000);
485
+ --sky-size-width-modal-m: var(--bb-size-fixed-4000);
486
+ --sky-size-width-modal-s: var(--bb-size-fixed-2000);
477
487
  --sky-size-width-viewport-smallest: var(--bb-size-fixed-2000);
488
+ --sky-size-width-resize_handle: var(--bb-size-fixed-150);
478
489
  --sky-size-illustration-xl: var(--bb-size-fluid-600);
479
490
  --sky-size-illustration-l: var(--bb-size-fluid-500);
480
491
  --sky-size-illustration-m: var(--bb-size-fluid-400);
@@ -496,6 +507,7 @@
496
507
  --sky-space-stacked-m: var(--bb-size-fluid-75);
497
508
  --sky-space-stacked-s: var(--bb-size-fluid-50);
498
509
  --sky-space-stacked-xs: var(--bb-size-fluid-25);
510
+ --sky-space-stacked-0: var(--bb-size-0);
499
511
  --sky-space-inline-xxl: var(--bb-size-fluid-300);
500
512
  --sky-space-inline-xl: var(--bb-size-fluid-150);
501
513
  --sky-space-inline-l: var(--bb-size-fluid-100);
@@ -503,12 +515,14 @@
503
515
  --sky-space-inline-s: var(--bb-size-fluid-50);
504
516
  --sky-space-inline-xs: var(--bb-size-fluid-25);
505
517
  --sky-space-inline-xxs: var(--bb-size-fluid-12);
518
+ --sky-space-inline-0: var(--bb-size-0);
506
519
  --sky-space-gap-text_action-l: var(--bb-size-fluid-100);
507
520
  --sky-space-gap-text_action-m: var(--bb-size-fluid-75);
508
521
  --sky-space-gap-text_action-s: var(--bb-size-fluid-50);
509
522
  --sky-space-gap-text_action-xs: var(--bb-size-fluid-25);
510
523
  --sky-space-gap-text_action-0: 0rem;
511
- --sky-space-gap-stacked_supplemental-l: var(--bb-size-fluid-100);
524
+ --sky-space-gap-stacked_supplemental-xl: var(--bb-size-fluid-100);
525
+ --sky-space-gap-stacked_supplemental-l: var(--bb-size-fluid-75);
512
526
  --sky-space-gap-stacked_supplemental-m: var(--bb-size-fluid-50);
513
527
  --sky-space-gap-stacked_supplemental-s: var(--bb-size-fluid-25);
514
528
  --sky-space-gap-stacked_supplemental-0: 0rem;
@@ -541,34 +555,44 @@
541
555
  --sky-space-inset-horizontal-left-l: var(--bb-size-fluid-100);
542
556
  --sky-space-inset-horizontal-left-m: var(--bb-size-fluid-75);
543
557
  --sky-space-inset-horizontal-left-s: var(--bb-size-fluid-50);
544
- --sky-space-inset-horizontal-bottom-xl: var(--bb-size-fluid-0);
545
- --sky-space-inset-horizontal-bottom-l: var(--bb-size-fluid-0);
546
- --sky-space-inset-horizontal-bottom-m: var(--bb-size-fluid-0);
547
- --sky-space-inset-horizontal-bottom-s: var(--bb-size-fluid-0);
558
+ --sky-space-inset-horizontal-left-0: var(--bb-size-0);
559
+ --sky-space-inset-horizontal-bottom-xl: var(--bb-size-0);
560
+ --sky-space-inset-horizontal-bottom-l: var(--bb-size-0);
561
+ --sky-space-inset-horizontal-bottom-m: var(--bb-size-0);
562
+ --sky-space-inset-horizontal-bottom-s: var(--bb-size-0);
563
+ --sky-space-inset-horizontal-bottom-0: var(--bb-size-0);
548
564
  --sky-space-inset-horizontal-right-xl: var(--bb-size-fluid-150);
549
565
  --sky-space-inset-horizontal-right-l: var(--bb-size-fluid-100);
550
566
  --sky-space-inset-horizontal-right-m: var(--bb-size-fluid-75);
551
567
  --sky-space-inset-horizontal-right-s: var(--bb-size-fluid-50);
552
- --sky-space-inset-horizontal-top-xl: var(--bb-size-fluid-0);
553
- --sky-space-inset-horizontal-top-l: var(--bb-size-fluid-0);
554
- --sky-space-inset-horizontal-top-m: var(--bb-size-fluid-0);
555
- --sky-space-inset-horizontal-top-s: var(--bb-size-fluid-0);
556
- --sky-space-inset-vertical-left-xl: var(--bb-size-fluid-0);
557
- --sky-space-inset-vertical-left-l: var(--bb-size-fluid-0);
558
- --sky-space-inset-vertical-left-m: var(--bb-size-fluid-0);
559
- --sky-space-inset-vertical-left-s: var(--bb-size-fluid-0);
568
+ --sky-space-inset-horizontal-right-0: var(--bb-size-0);
569
+ --sky-space-inset-horizontal-top-xl: var(--bb-size-0);
570
+ --sky-space-inset-horizontal-top-l: var(--bb-size-0);
571
+ --sky-space-inset-horizontal-top-m: var(--bb-size-0);
572
+ --sky-space-inset-horizontal-top-s: var(--bb-size-0);
573
+ --sky-space-inset-horizontal-top-0: var(--bb-size-0);
574
+ --sky-space-inset-vertical-fixed-bottom-l: var(--bb-size-fixed-100);
575
+ --sky-space-inset-vertical-fixed-top-l: var(--bb-size-fixed-100);
576
+ --sky-space-inset-vertical-left-xl: var(--bb-size-0);
577
+ --sky-space-inset-vertical-left-l: var(--bb-size-0);
578
+ --sky-space-inset-vertical-left-m: var(--bb-size-0);
579
+ --sky-space-inset-vertical-left-s: var(--bb-size-0);
580
+ --sky-space-inset-vertical-left-0: var(--bb-size-0);
560
581
  --sky-space-inset-vertical-bottom-xl: var(--bb-size-fluid-150);
561
582
  --sky-space-inset-vertical-bottom-l: var(--bb-size-fluid-100);
562
583
  --sky-space-inset-vertical-bottom-m: var(--bb-size-fluid-75);
563
584
  --sky-space-inset-vertical-bottom-s: var(--bb-size-fluid-50);
564
- --sky-space-inset-vertical-right-xl: var(--bb-size-fluid-0);
565
- --sky-space-inset-vertical-right-l: var(--bb-size-fluid-0);
566
- --sky-space-inset-vertical-right-m: var(--bb-size-fluid-0);
567
- --sky-space-inset-vertical-right-s: var(--bb-size-fluid-0);
585
+ --sky-space-inset-vertical-bottom-0: var(--bb-size-0);
586
+ --sky-space-inset-vertical-right-xl: var(--bb-size-0);
587
+ --sky-space-inset-vertical-right-l: var(--bb-size-0);
588
+ --sky-space-inset-vertical-right-m: var(--bb-size-0);
589
+ --sky-space-inset-vertical-right-s: var(--bb-size-0);
590
+ --sky-space-inset-vertical-right-0: var(--bb-size-0);
568
591
  --sky-space-inset-vertical-top-xl: var(--bb-size-fluid-150);
569
592
  --sky-space-inset-vertical-top-l: var(--bb-size-fluid-100);
570
593
  --sky-space-inset-vertical-top-m: var(--bb-size-fluid-75);
571
594
  --sky-space-inset-vertical-top-s: var(--bb-size-fluid-50);
595
+ --sky-space-inset-vertical-top-0: var(--bb-size-0);
572
596
  --sky-space-inset-thumbnail_matte-xl: var(--bb-size-fluid-50);
573
597
  --sky-space-inset-thumbnail_matte-l: var(--bb-size-fluid-25);
574
598
  --sky-space-inset-thumbnail_matte-m: var(--bb-size-fluid-18);
@@ -643,15 +667,19 @@
643
667
  --sky-space-inset-bottomless-left-xl: var(--bb-size-fluid-150);
644
668
  --sky-space-inset-bottomless-left-l: var(--bb-size-fluid-100);
645
669
  --sky-space-inset-bottomless-left-m: var(--bb-size-fluid-75);
646
- --sky-space-inset-bottomless-bottom-xl: var(--bb-size-fluid-0);
647
- --sky-space-inset-bottomless-bottom-l: var(--bb-size-fluid-0);
648
- --sky-space-inset-bottomless-bottom-m: var(--bb-size-fluid-0);
670
+ --sky-space-inset-bottomless-bottom-xl: var(--bb-size-0);
671
+ --sky-space-inset-bottomless-bottom-l: var(--bb-size-0);
672
+ --sky-space-inset-bottomless-bottom-m: var(--bb-size-0);
649
673
  --sky-space-inset-bottomless-right-xl: var(--bb-size-fluid-150);
650
674
  --sky-space-inset-bottomless-right-l: var(--bb-size-fluid-100);
651
675
  --sky-space-inset-bottomless-right-m: var(--bb-size-fluid-75);
652
676
  --sky-space-inset-bottomless-top-xl: var(--bb-size-fluid-150);
653
677
  --sky-space-inset-bottomless-top-l: var(--bb-size-fluid-100);
654
678
  --sky-space-inset-bottomless-top-m: var(--bb-size-fluid-75);
679
+ --sky-space-inset-balanced-fixed-xl: var(--bb-size-fixed-150);
680
+ --sky-space-inset-balanced-fixed-l: var(--bb-size-fixed-100);
681
+ --sky-space-inset-balanced-fixed-m: var(--bb-size-fixed-75);
682
+ --sky-space-inset-balanced-fixed-s: var(--bb-size-fixed-50);
655
683
  --sky-space-inset-balanced-xl: var(--bb-size-fluid-150);
656
684
  --sky-space-inset-balanced-l: var(--bb-size-fluid-100);
657
685
  --sky-space-inset-balanced-m: var(--bb-size-fluid-75);
@@ -662,6 +690,7 @@
662
690
  }
663
691
 
664
692
  .sky-theme-modern {
693
+ --modern-opacity-600: .6;
665
694
  --modern-border-style-dotted: dotted;
666
695
  --modern-border-style-solid: solid;
667
696
  --modern-border-radius-round: 50%;
@@ -708,6 +737,8 @@
708
737
  --modern-font-size-150: 14px;
709
738
  --modern-font-size-125: 13px;
710
739
  --modern-font-size-100: 12px;
740
+ --modern-size-960: 960px;
741
+ --modern-size-640: 640px;
711
742
  --modern-size-400: 400px;
712
743
  --modern-size-320: 320px;
713
744
  --modern-size-296: 296px;
@@ -764,11 +795,6 @@
764
795
  --modern-color-blue-50: #00b4f1;
765
796
  --modern-color-blue-30: #81d4f7;
766
797
  --modern-color-blue-10: #c1e8fb;
767
- --modern-color-scrim: rgba(0, 0, 0, 0.5);
768
- --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
769
- --modern-color-transparent: rgba(0, 0, 0, 0);
770
- --modern-color-black: #000000;
771
- --modern-color-white: #ffffff;
772
798
  --modern-color-red-70: #d93a3d;
773
799
  --modern-color-red-50: #ef4044;
774
800
  --modern-color-red-30: #f7a08f;
@@ -781,9 +807,16 @@
781
807
  --modern-color-gray-20: #cdcfd2;
782
808
  --modern-color-gray-15: #d2d2d2;
783
809
  --modern-color-gray-10: #e2e3e4;
810
+ --modern-color-blocking: rgba(255, 255, 255, 0.7);
811
+ --modern-color-scrim: rgba(0, 0, 0, 0.5);
812
+ --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
813
+ --modern-color-transparent: rgba(0, 0, 0, 0);
814
+ --modern-color-black: #000000;
815
+ --modern-color-white: #ffffff;
784
816
  }
785
817
 
786
818
  .sky-theme-modern {
819
+ --sky-opacity-wait: var(--modern-opacity-600);
787
820
  --sky-elevation-overlay-400: var(--modern-shadow-size-24);
788
821
  --sky-elevation-overlay-300: var(--modern-shadow-size-16);
789
822
  --sky-elevation-overlay-200: var(--modern-shadow-size-8);
@@ -836,19 +869,6 @@
836
869
  --sky-color-border-danger: var(--modern-color-red-50);
837
870
  --sky-color-border-selected_soft: var(--modern-color-blue-30);
838
871
  --sky-color-border-selected: var(--modern-color-blue-74);
839
- --sky-color-background-icon_matte: var(--modern-color-blue-05);
840
- --sky-color-background-thumbnail_matte: var(--modern-color-white);
841
- --sky-color-background-file_drop: var(--modern-color-gray-05);
842
- --sky-color-background-list-disabled: var(--modern-color-gray-07);
843
- --sky-color-background-list-focus: var(--modern-color-transparent);
844
- --sky-color-background-list-active: var(--modern-color-transparent);
845
- --sky-color-background-list-hover: var(--modern-color-transparent);
846
- --sky-color-background-list-base: var(--modern-color-transparent);
847
- --sky-color-background-nav-disabled: var(--modern-color-gray-07);
848
- --sky-color-background-nav-focus: var(--modern-color-transparent);
849
- --sky-color-background-nav-active: var(--modern-color-transparent);
850
- --sky-color-background-nav-hover: var(--modern-color-transparent);
851
- --sky-color-background-nav-base: var(--modern-color-transparent);
852
872
  --sky-color-background-thumb-disabled: var(--modern-color-gray-07);
853
873
  --sky-color-background-thumb-base: var(--modern-color-white);
854
874
  --sky-color-background-input-disabled: var(--modern-color-gray-07);
@@ -858,6 +878,27 @@
858
878
  --sky-color-background-selected-danger: var(--modern-color-red-30);
859
879
  --sky-color-background-selected-soft: var(--modern-color-blue-05);
860
880
  --sky-color-background-selected-heavy: var(--modern-color-blue-05);
881
+ --sky-color-background-nav-disabled: var(--modern-color-gray-07);
882
+ --sky-color-background-nav-focus: var(--modern-color-transparent);
883
+ --sky-color-background-nav-active: var(--modern-color-transparent);
884
+ --sky-color-background-nav-hover: var(--modern-color-transparent);
885
+ --sky-color-background-nav-base: var(--modern-color-transparent);
886
+ --sky-color-background-list-disabled: var(--modern-color-gray-07);
887
+ --sky-color-background-list-focus: var(--modern-color-transparent);
888
+ --sky-color-background-list-active: var(--modern-color-transparent);
889
+ --sky-color-background-list-hover: var(--modern-color-transparent);
890
+ --sky-color-background-list-base: var(--modern-color-transparent);
891
+ --sky-color-background-icon_matte-action-light: var(--modern-color-blue-05);
892
+ --sky-color-background-icon_matte-action-heavy: var(--modern-color-blue-74);
893
+ --sky-color-background-icon_matte-success: var(--modern-color-green-50);
894
+ --sky-color-background-icon_matte-warning: var(--modern-color-yellow-50);
895
+ --sky-color-background-icon_matte-danger: var(--modern-color-red-50);
896
+ --sky-color-background-container-info: var(--modern-color-blue-10);
897
+ --sky-color-background-container-success: var(--modern-color-green-30);
898
+ --sky-color-background-container-warning: var(--modern-color-yellow-30);
899
+ --sky-color-background-container-danger: var(--modern-color-red-30);
900
+ --sky-color-background-container-menu: var(--modern-color-white);
901
+ --sky-color-background-container-base: var(--modern-color-white);
861
902
  --sky-color-background-action-input-disabled: var(--modern-color-gray-07);
862
903
  --sky-color-background-action-input-focus: var(--modern-color-transparent);
863
904
  --sky-color-background-action-input-active: var(--modern-color-transparent);
@@ -883,13 +924,10 @@
883
924
  --sky-color-background-action-primary-active: var(--modern-color-blue-74);
884
925
  --sky-color-background-action-primary-hover: var(--modern-color-blue-74);
885
926
  --sky-color-background-action-primary-base: var(--modern-color-blue-74);
886
- --sky-color-background-container-info: var(--modern-color-blue-10);
887
- --sky-color-background-container-success: var(--modern-color-green-30);
888
- --sky-color-background-container-warning: var(--modern-color-yellow-30);
889
- --sky-color-background-container-danger: var(--modern-color-red-30);
890
- --sky-color-background-container-menu: var(--modern-color-white);
891
- --sky-color-background-container-base: var(--modern-color-white);
927
+ --sky-color-background-thumbnail_matte: var(--modern-color-white);
928
+ --sky-color-background-file_drop: var(--modern-color-gray-05);
892
929
  --sky-color-background-text_highlight: var(--modern-color-yellow-40);
930
+ --sky-color-background-blocking: var(--modern-color-blocking);
893
931
  --sky-color-background-scrim: var(--modern-color-scrim);
894
932
  --sky-color-background-page: var(--modern-color-gray-005);
895
933
  --sky-color-icon-action: var(--modern-color-blue-74);
@@ -952,8 +990,11 @@
952
990
  --sky-size-avatar-s: var(--modern-size-32);
953
991
  --sky-size-thumbnail-l: var(--modern-size-100);
954
992
  --sky-size-max_width-overlay_message: var(--modern-size-236);
955
- --sky-size-width-resize_handle: var(--modern-size-14);
993
+ --sky-size-width-modal-l: var(--modern-size-960);
994
+ --sky-size-width-modal-m: var(--modern-size-640);
995
+ --sky-size-width-modal-s: var(--modern-size-320);
956
996
  --sky-size-width-viewport-smallest: var(--modern-size-296);
997
+ --sky-size-width-resize_handle: var(--modern-size-14);
957
998
  --sky-size-illustration-xl: var(--modern-size-96);
958
999
  --sky-size-illustration-l: var(--modern-size-80);
959
1000
  --sky-size-illustration-m: var(--modern-size-64);
@@ -975,6 +1016,7 @@
975
1016
  --sky-space-stacked-m: var(--modern-space-md);
976
1017
  --sky-space-stacked-s: var(--modern-space-s);
977
1018
  --sky-space-stacked-xs: var(--modern-space-xs);
1019
+ --sky-space-stacked-0: var(--modern-space-none);
978
1020
  --sky-space-inline-xxl: var(--modern-space-xxl);
979
1021
  --sky-space-inline-xl: var(--modern-space-xl);
980
1022
  --sky-space-inline-l: var(--modern-space-lg);
@@ -982,11 +1024,13 @@
982
1024
  --sky-space-inline-s: var(--modern-space-s);
983
1025
  --sky-space-inline-xs: var(--modern-space-xs);
984
1026
  --sky-space-inline-xxs: var(--modern-size-2);
1027
+ --sky-space-inline-0: var(--modern-space-none);
985
1028
  --sky-space-gap-text_action-l: var(--modern-space-lg);
986
1029
  --sky-space-gap-text_action-m: var(--modern-space-md);
987
1030
  --sky-space-gap-text_action-s: var(--modern-space-s);
988
1031
  --sky-space-gap-text_action-xs: var(--modern-space-xs);
989
1032
  --sky-space-gap-text_action-0: 0rem;
1033
+ --sky-space-gap-stacked_supplemental-xl: var(--modern-size-20);
990
1034
  --sky-space-gap-stacked_supplemental-l: var(--modern-size-15);
991
1035
  --sky-space-gap-stacked_supplemental-m: var(--modern-size-10);
992
1036
  --sky-space-gap-stacked_supplemental-s: var(--modern-size-5);
@@ -1020,34 +1064,44 @@
1020
1064
  --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
1021
1065
  --sky-space-inset-horizontal-left-m: var(--modern-space-md);
1022
1066
  --sky-space-inset-horizontal-left-s: var(--modern-space-s);
1067
+ --sky-space-inset-horizontal-left-0: var(--modern-space-none);
1023
1068
  --sky-space-inset-horizontal-bottom-xl: var(--modern-size-0);
1024
1069
  --sky-space-inset-horizontal-bottom-l: var(--modern-size-0);
1025
1070
  --sky-space-inset-horizontal-bottom-m: var(--modern-size-0);
1026
1071
  --sky-space-inset-horizontal-bottom-s: var(--modern-size-0);
1072
+ --sky-space-inset-horizontal-bottom-0: var(--modern-space-none);
1027
1073
  --sky-space-inset-horizontal-right-xl: var(--modern-space-xl);
1028
1074
  --sky-space-inset-horizontal-right-l: var(--modern-space-lg);
1029
1075
  --sky-space-inset-horizontal-right-m: var(--modern-space-md);
1030
1076
  --sky-space-inset-horizontal-right-s: var(--modern-space-s);
1077
+ --sky-space-inset-horizontal-right-0: var(--modern-space-none);
1031
1078
  --sky-space-inset-horizontal-top-xl: var(--modern-size-0);
1032
1079
  --sky-space-inset-horizontal-top-l: var(--modern-size-0);
1033
1080
  --sky-space-inset-horizontal-top-m: var(--modern-size-0);
1034
1081
  --sky-space-inset-horizontal-top-s: var(--modern-size-0);
1082
+ --sky-space-inset-horizontal-top-0: var(--modern-space-none);
1083
+ --sky-space-inset-vertical-fixed-bottom-l: var(--modern-size-20);
1084
+ --sky-space-inset-vertical-fixed-top-l: var(--modern-size-20);
1035
1085
  --sky-space-inset-vertical-left-xl: var(--modern-size-0);
1036
1086
  --sky-space-inset-vertical-left-l: var(--modern-size-0);
1037
1087
  --sky-space-inset-vertical-left-m: var(--modern-size-0);
1038
1088
  --sky-space-inset-vertical-left-s: var(--modern-size-0);
1089
+ --sky-space-inset-vertical-left-0: var(--modern-space-none);
1039
1090
  --sky-space-inset-vertical-bottom-xl: var(--modern-space-xl);
1040
1091
  --sky-space-inset-vertical-bottom-l: var(--modern-space-lg);
1041
1092
  --sky-space-inset-vertical-bottom-m: var(--modern-space-md);
1042
1093
  --sky-space-inset-vertical-bottom-s: var(--modern-space-s);
1094
+ --sky-space-inset-vertical-bottom-0: var(--modern-space-none);
1043
1095
  --sky-space-inset-vertical-right-xl: var(--modern-size-0);
1044
1096
  --sky-space-inset-vertical-right-l: var(--modern-size-0);
1045
1097
  --sky-space-inset-vertical-right-m: var(--modern-size-0);
1046
1098
  --sky-space-inset-vertical-right-s: var(--modern-size-0);
1099
+ --sky-space-inset-vertical-right-0: var(--modern-space-none);
1047
1100
  --sky-space-inset-vertical-top-xl: var(--modern-space-xl);
1048
1101
  --sky-space-inset-vertical-top-l: var(--modern-space-lg);
1049
1102
  --sky-space-inset-vertical-top-m: var(--modern-space-md);
1050
1103
  --sky-space-inset-vertical-top-s: var(--modern-space-s);
1104
+ --sky-space-inset-vertical-top-0: var(--modern-space-none);
1051
1105
  --sky-space-inset-thumbnail_matte-xl: var(--modern-size-9);
1052
1106
  --sky-space-inset-thumbnail_matte-l: var(--modern-size-5);
1053
1107
  --sky-space-inset-thumbnail_matte-m: var(--modern-size-3);
@@ -1131,6 +1185,10 @@
1131
1185
  --sky-space-inset-bottomless-top-xl: var(--modern-space-xl);
1132
1186
  --sky-space-inset-bottomless-top-l: var(--modern-space-lg);
1133
1187
  --sky-space-inset-bottomless-top-m: var(--modern-size-15);
1188
+ --sky-space-inset-balanced-fixed-xl: var(--modern-size-30);
1189
+ --sky-space-inset-balanced-fixed-l: var(--modern-size-20);
1190
+ --sky-space-inset-balanced-fixed-m: var(--modern-size-15);
1191
+ --sky-space-inset-balanced-fixed-s: var(--modern-size-10);
1134
1192
  --sky-space-inset-balanced-xl: var(--modern-space-xl);
1135
1193
  --sky-space-inset-balanced-l: var(--modern-space-lg);
1136
1194
  --sky-space-inset-balanced-m: var(--modern-space-md);
@@ -1257,6 +1315,9 @@
1257
1315
  --sky-background-color-item-selected: #ebfbff;
1258
1316
  /* switch */
1259
1317
  --sky-switch-size: 26px;
1318
+ /* viewkeeper */
1319
+ --sky-viewkeeper-opacity: 1;
1320
+ --sky-viewkeeper-box-shadow: var(--modern-shadow-size-3);
1260
1321
  }
1261
1322
  .sky-theme-modern.sky-theme-mode-dark {
1262
1323
  /* color */
@@ -1689,6 +1750,7 @@
1689
1750
  padding: var(--sky-override-button-icon-borderless-padding, var(--sky-space-inset-balanced-xs));
1690
1751
  height: var(--sky-override-borderless-icon-size, "");
1691
1752
  width: var(--sky-override-borderless-icon-size, "");
1753
+ line-height: 1;
1692
1754
  }
1693
1755
  .sky-theme-modern .sky-btn-link,
1694
1756
  .sky-theme-modern .sky-btn-borderless,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/theme",
3
- "version": "12.1.0",
3
+ "version": "12.3.0",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -20,7 +20,7 @@
20
20
  "@angular/core": "^19.2.1"
21
21
  },
22
22
  "dependencies": {
23
- "@blackbaud/skyux-design-tokens": "0.0.49",
23
+ "@blackbaud/skyux-design-tokens": "0.0.50",
24
24
  "@skyux/icons": "7.21.2",
25
25
  "fontfaceobserver": "2.3.0",
26
26
  "tslib": "^2.8.1"
package/scss/_compat/_mixins.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use '../variables' as vars;
2
2
  @use 'variables' as compatVars;
3
+ @use 'sass:color';
3
4
 
4
5
  @mixin sky-deemphasized {
5
6
  font-family: compatVars.$sky-font-family;
@@ -133,11 +134,11 @@
133
134
  }
134
135
 
135
136
  @mixin sky-icon-button-borderless {
136
- color: vars.$sky-text-color-icon-borderless;
137
+ color: vars.$sky-text-color-deemphasized;
137
138
  cursor: pointer;
138
139
 
139
140
  &:hover {
140
- color: darken(vars.$sky-text-color-icon-borderless, 20%);
141
+ color: color.adjust(vars.$sky-text-color-deemphasized, $lightness: -20%);
141
142
  transition: color compatVars.$sky-transition-time-short;
142
143
  }
143
144
  }