@skyux/theme 14.0.0-alpha.10 → 14.0.0-alpha.12

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 (5) hide show
  1. package/css/sky.css +29 -22
  2. package/css/themes/modern/styles.css +60 -25
  3. package/package.json +2 -2
  4. package/scss/_compat/_mixins.scss +2 -2
  5. package/scss/themes/modern/_compat/_mixins.scss +1 -1
package/css/sky.css CHANGED
@@ -407,21 +407,28 @@ textarea {
407
407
  --sky-viewkeeper-box-shadow: none;
408
408
  }
409
409
 
410
- @property --sky-transition-time-short {
411
- syntax: "<time>";
412
- inherits: true;
413
- initial-value: 150ms;
410
+ body:not(.sky-theme-modern) {
411
+ --sky-override-duration-medium: 250ms;
412
+ --sky-override-duration-short: 150ms;
414
413
  }
415
- @property --sky-transition-time-medium {
416
- syntax: "<time>";
417
- inherits: true;
418
- initial-value: 250ms;
414
+
415
+ body {
416
+ --sky-global-duration-medium: var(
417
+ --sky-override-duration-medium,
418
+ var(--sky-duration-medium)
419
+ );
420
+ --sky-global-duration-short: var(
421
+ --sky-override-duration-short,
422
+ var(--sky-duration-short)
423
+ );
419
424
  }
420
- .sky-animations-disabled *,
421
- .sky-animations-disabled *::before,
422
- .sky-animations-disabled *::after {
423
- --sky-transition-time-short: 0s !important;
424
- --sky-transition-time-medium: 0s !important;
425
+
426
+ /* disable motion globally */
427
+ body.sky-animations-disabled *,
428
+ body.sky-animations-disabled *::before,
429
+ body.sky-animations-disabled *::after {
430
+ --sky-global-duration-medium: 0s !important;
431
+ --sky-global-duration-short: 0s !important;
425
432
  }
426
433
 
427
434
  /* suppress motion globally based on user preferences */
@@ -429,8 +436,8 @@ textarea {
429
436
  *,
430
437
  *::before,
431
438
  *::after {
432
- --sky-transition-time-short: 1ms !important;
433
- --sky-transition-time-medium: 1ms !important;
439
+ --sky-global-duration-medium: 1ms !important;
440
+ --sky-global-duration-short: 1ms !important;
434
441
  }
435
442
  }
436
443
  @keyframes sky-animation-emerge-enter {
@@ -454,11 +461,11 @@ textarea {
454
461
  }
455
462
  }
456
463
  .sky-animation-emerge-enter {
457
- animation: sky-animation-emerge-enter var(--sky-transition-time-medium) ease-in-out;
464
+ animation: sky-animation-emerge-enter var(--sky-global-duration-medium) ease-in-out;
458
465
  }
459
466
 
460
467
  .sky-animation-emerge-leave {
461
- animation: sky-animation-emerge-leave var(--sky-transition-time-medium) ease-in-out;
468
+ animation: sky-animation-emerge-leave var(--sky-global-duration-medium) ease-in-out;
462
469
  }
463
470
 
464
471
  /*
@@ -466,7 +473,7 @@ Slides an element from a horizontal offset to its natural position as it
466
473
  enters the DOM via @starting-style.
467
474
  */
468
475
  .sky-animation-slide-enter-left {
469
- transition-duration: var(--sky-transition-time-short);
476
+ transition-duration: var(--sky-global-duration-short);
470
477
  transition-property: transform;
471
478
  transition-timing-function: ease-in;
472
479
  }
@@ -477,7 +484,7 @@ enters the DOM via @starting-style.
477
484
  }
478
485
 
479
486
  .sky-animation-slide-enter-right {
480
- transition-duration: var(--sky-transition-time-short);
487
+ transition-duration: var(--sky-global-duration-short);
481
488
  transition-property: transform;
482
489
  transition-timing-function: ease-in;
483
490
  }
@@ -692,7 +699,7 @@ a.sky-btn:hover {
692
699
  }
693
700
  .sky-btn-tab-close:not(.sky-btn-icon-borderless):hover {
694
701
  color: var(--sky-text-color-default);
695
- transition: color 150ms;
702
+ transition: color var(--sky-global-duration-short);
696
703
  }
697
704
 
698
705
  .sky-tab-header-count {
@@ -759,7 +766,7 @@ a.sky-btn:hover {
759
766
  }
760
767
  .sky-btn-borderless:hover, .sky-btn-borderless-inline:hover {
761
768
  color: rgb(55.5616438356, 57.698630137, 61.4383561644);
762
- transition: color 150ms;
769
+ transition: color var(--sky-global-duration-short);
763
770
  }
764
771
  .sky-btn-borderless, .sky-btn-borderless-inline {
765
772
  border: none;
@@ -786,7 +793,7 @@ a.sky-btn:hover {
786
793
  }
787
794
  .sky-btn-icon-borderless:hover {
788
795
  color: rgb(55.5616438356, 57.698630137, 61.4383561644);
789
- transition: color 150ms;
796
+ transition: color var(--sky-global-duration-short);
790
797
  }
791
798
  .sky-btn-icon-borderless {
792
799
  height: 26px;
package/css/themes/modern/styles.css CHANGED
@@ -68,6 +68,7 @@
68
68
  --bb-color-blue-600: #2b6bd5;
69
69
  --bb-color-blue-700: #2256aa;
70
70
  --bb-color-blue-800: #1a4080;
71
+ --bb-color-blue-850: #16366b;
71
72
  --bb-color-blue-900: #112b55;
72
73
  --bb-color-brand-impact_green: #0cd973;
73
74
  --bb-color-brand-trusted_blue: #004054;
@@ -77,6 +78,7 @@
77
78
  --bb-color-gray-1200: #0f1114;
78
79
  --bb-color-gray-200: #e0e1e2;
79
80
  --bb-color-gray-25: #fbfbfb;
81
+ --bb-color-gray-250: #d5d6d8;
80
82
  --bb-color-gray-300: #c2c4c6;
81
83
  --bb-color-gray-400: #a3a6a9;
82
84
  --bb-color-gray-50: #f4f4f5;
@@ -84,6 +86,7 @@
84
86
  --bb-color-gray-600: #666b70;
85
87
  --bb-color-gray-700: #51555c;
86
88
  --bb-color-gray-800: #3b4047;
89
+ --bb-color-gray-850: #30363d;
87
90
  --bb-color-gray-900: #252b33;
88
91
  --bb-color-green-100: #d8f9e9;
89
92
  --bb-color-green-1000: #033019;
@@ -188,6 +191,7 @@
188
191
  --bb-color-slate-600: #536f9d;
189
192
  --bb-color-slate-700: #42597e;
190
193
  --bb-color-slate-800: #32435e;
194
+ --bb-color-slate-850: #2a384f;
191
195
  --bb-color-slate-900: #212c3f;
192
196
  --bb-color-teal-100: #dcf6f5;
193
197
  --bb-color-teal-1000: #022a28;
@@ -219,6 +223,8 @@
219
223
  --bb-color-yellow-700: #92661e;
220
224
  --bb-color-yellow-800: #6e4d17;
221
225
  --bb-color-yellow-900: #503811;
226
+ --bb-duration-150: 150ms;
227
+ --bb-duration-250: 250ms;
222
228
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
223
229
  --bb-font-blkb_sans-name: BLKB Sans;
224
230
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
@@ -246,15 +252,15 @@
246
252
  --bb-font-weight-light: 300;
247
253
  --bb-font-weight-regular: 400;
248
254
  --bb-font-weight-semibold: 600;
249
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/bb-logo.png');
250
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
251
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-base-light.svg');
252
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
253
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
254
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
255
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
256
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
257
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
255
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/bb-logo.png');
256
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
257
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-base-light.svg');
258
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
259
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
260
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
261
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
262
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
263
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
258
264
  --bb-letter_spacing-normal: normal;
259
265
  --bb-letter_spacing-wider: 0.01rem;
260
266
  --bb-letter_spacing-widest: 0.046875rem;
@@ -328,6 +334,7 @@
328
334
  --bb-shadow-gray-400: 0 2px 4px -1px rgba(22, 26, 31, 0.2), 0 1px 10px 0 rgba(22, 26, 31, 0.12), 0 4px 5px 0 rgba(22, 26, 31, 0.14);
329
335
  --bb-shadow-gray-50: 0 1px 1px 0 rgba(22, 26, 31, 0.12), 0 1.5px 1px -1px rgba(22, 26, 31, 0.12);
330
336
  --bb-shadow-gray-800: 0 5px 5px -3px rgba(22, 26, 31, 0.2), 0 3px 14px 2px rgba(22, 26, 31, 0.12), 0 8px 10px 1px rgba(22, 26, 31, 0.14);
337
+ --bb-shadow-gray-simple-400: 1px 2px 4px 0 rgba(22, 26, 31, 0.5);
331
338
  --bb-shadow-slate-100: 0 1px 3px 0 rgba(33, 44, 63, 0.2), 0 2px 1px -1px rgba(33, 44, 63, 0.12), 0 1px 1px 0 rgba(33, 44, 63, 0.14);
332
339
  --bb-shadow-slate-1600: 0 8px 10px -5px rgba(33, 44, 63, 0.2), 0 6px 30px 5px rgba(33, 44, 63, 0.12), 0 16px 24px 2px rgba(33, 44, 63, 0.14);
333
340
  --bb-shadow-slate-200: 0 1px 8px 0 rgba(33, 44, 63, 0.2), 0 3px 3px -2px rgba(33, 44, 63, 0.12), 0 3px 4px 0 rgba(33, 44, 63, 0.14);
@@ -336,6 +343,7 @@
336
343
  --bb-shadow-slate-400: 0 2px 4px -1px rgba(33, 44, 63, 0.2), 0 1px 10px 0 rgba(33, 44, 63, 0.12), 0 4px 5px 0 rgba(33, 44, 63, 0.14);
337
344
  --bb-shadow-slate-50: 0 1px 1px 0 rgba(33, 44, 63, 0.12), 0 1.5px 1px -1px rgba(33, 44, 63, 0.12);
338
345
  --bb-shadow-slate-800: 0 5px 5px -3px rgba(33, 44, 63, 0.2), 0 3px 14px 2px rgba(33, 44, 63, 0.12), 0 8px 10px 1px rgba(33, 44, 63, 0.14);
346
+ --bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
339
347
  }
340
348
 
341
349
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
@@ -364,6 +372,7 @@
364
372
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
365
373
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
366
374
  --sky-color-background-blocking: var(--bb-color-rgba-black-70);
375
+ --sky-color-background-container-backdrop: var(--bb-color-gray-900);
367
376
  --sky-color-background-container-base: var(--bb-color-gray-1000);
368
377
  --sky-color-background-container-danger: var(--bb-color-red-800);
369
378
  --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
@@ -543,7 +552,7 @@
543
552
  --sky-color-viz-diverge-pos-7: var(--bb-color-blue-400);
544
553
  --sky-color-viz-diverge-pos-8: var(--bb-color-blue-300);
545
554
  --sky-color-viz-diverge-pos-9: var(--bb-color-blue-200);
546
- --sky-color-viz-gridline: var(--bb-color-gray-900);
555
+ --sky-color-viz-gridline: var(--bb-color-gray-850);
547
556
  --sky-color-viz-marker: var(--bb-color-gray-200);
548
557
  --sky-color-viz-sequence-1: var(--bb-color-teal-1000);
549
558
  --sky-color-viz-sequence-10: var(--bb-color-teal-100);
@@ -587,6 +596,7 @@
587
596
  --sky-elevation-overlay-200: var(--bb-shadow-gray-800);
588
597
  --sky-elevation-overlay-300: var(--bb-shadow-gray-1600);
589
598
  --sky-elevation-overlay-400: var(--bb-shadow-gray-2400);
599
+ --sky-elevation-overlay-simple-100: var(--bb-shadow-gray-simple-400);
590
600
  --sky-elevation-raised-100: var(--bb-shadow-gray-100);
591
601
  }
592
602
 
@@ -617,6 +627,7 @@
617
627
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
618
628
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
619
629
  --sky-color-background-blocking: var(--bb-color-rgba-white-70);
630
+ --sky-color-background-container-backdrop: var(--bb-color-gray-200);
620
631
  --sky-color-background-container-base: var(--bb-color-white);
621
632
  --sky-color-background-container-danger: var(--bb-color-red-200);
622
633
  --sky-color-background-container-dimmed: var(--bb-color-gray-25);
@@ -795,7 +806,7 @@
795
806
  --sky-color-viz-diverge-pos-7: var(--bb-color-blue-700);
796
807
  --sky-color-viz-diverge-pos-8: var(--bb-color-blue-800);
797
808
  --sky-color-viz-diverge-pos-9: var(--bb-color-blue-900);
798
- --sky-color-viz-gridline: var(--bb-color-gray-200);
809
+ --sky-color-viz-gridline: var(--bb-color-gray-250);
799
810
  --sky-color-viz-marker: var(--bb-color-gray-1000);
800
811
  --sky-color-viz-sequence-1: var(--bb-color-teal-100);
801
812
  --sky-color-viz-sequence-10: var(--bb-color-teal-1000);
@@ -872,6 +883,7 @@
872
883
  --sky-elevation-overlay-200: var(--bb-shadow-gray-800);
873
884
  --sky-elevation-overlay-300: var(--bb-shadow-gray-1600);
874
885
  --sky-elevation-overlay-400: var(--bb-shadow-gray-2400);
886
+ --sky-elevation-overlay-simple-100: var(--bb-shadow-gray-simple-400);
875
887
  --sky-elevation-raised-100: var(--bb-shadow-gray-100);
876
888
  }
877
889
 
@@ -1003,6 +1015,14 @@
1003
1015
  --sky-comp-card-space-offset-left: var(--bb-size-0);
1004
1016
  --sky-comp-card-space-offset-right: var(--bb-size-fluid-50);
1005
1017
  --sky-comp-card-space-offset-top: var(--bb-size-0);
1018
+ --sky-comp-chart-legend_item-space-inset-bottom: var(--bb-size-fluid-25);
1019
+ --sky-comp-chart-legend_item-space-inset-left: var(--bb-size-fluid-50);
1020
+ --sky-comp-chart-legend_item-space-inset-right: var(--bb-size-fluid-50);
1021
+ --sky-comp-chart-legend_item-space-inset-top: var(--bb-size-fluid-25);
1022
+ --sky-comp-chart-tooltip-space-inset-bottom: var(--bb-size-fluid-50);
1023
+ --sky-comp-chart-tooltip-space-inset-left: var(--bb-size-fluid-50);
1024
+ --sky-comp-chart-tooltip-space-inset-right: var(--bb-size-fluid-50);
1025
+ --sky-comp-chart-tooltip-space-inset-top: var(--bb-size-fluid-50);
1006
1026
  --sky-comp-colorpicker-content-space-inset-bottom: var(--bb-size-fluid-50);
1007
1027
  --sky-comp-colorpicker-content-space-inset-left: var(--bb-size-fluid-75);
1008
1028
  --sky-comp-colorpicker-content-space-inset-right: var(--bb-size-fluid-75);
@@ -1391,6 +1411,8 @@
1391
1411
  --sky-comp-wizard-tabset-tabs-space-inset-left: var(--bb-size-fluid-150);
1392
1412
  --sky-comp-wizard-tabset-tabs-space-inset-right: var(--bb-size-fluid-150);
1393
1413
  --sky-comp-wizard-tabset-tabs-space-inset-top: var(--bb-size-0);
1414
+ --sky-duration-medium: var(--bb-duration-250);
1415
+ --sky-duration-short: var(--bb-duration-150);
1394
1416
  --sky-font-family-monospaced: var(--bb-font-monospaced-family);
1395
1417
  --sky-font-letter_spacing-eyebrow: var(--bb-letter_spacing-widest);
1396
1418
  --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-wider);
@@ -1451,6 +1473,8 @@
1451
1473
  --sky-size-avatar-l: var(--bb-size-fluid-550);
1452
1474
  --sky-size-avatar-m: var(--bb-size-fluid-350);
1453
1475
  --sky-size-avatar-s: var(--bb-size-fluid-200);
1476
+ --sky-size-chart-tick_length-category: var(--bb-size-0);
1477
+ --sky-size-chart-tick_length-measure: var(--bb-size-fluid-75);
1454
1478
  --sky-size-icon-l: var(--bb-size-fluid-150);
1455
1479
  --sky-size-icon-m: var(--bb-size-fluid-125);
1456
1480
  --sky-size-icon-s: var(--bb-size-fluid-100);
@@ -1661,6 +1685,7 @@
1661
1685
  --bb-color-blue-600: #2b6bd5;
1662
1686
  --bb-color-blue-700: #2256aa;
1663
1687
  --bb-color-blue-800: #1a4080;
1688
+ --bb-color-blue-850: #16366b;
1664
1689
  --bb-color-blue-900: #112b55;
1665
1690
  --bb-color-brand-impact_green: #0cd973;
1666
1691
  --bb-color-brand-trusted_blue: #004054;
@@ -1670,6 +1695,7 @@
1670
1695
  --bb-color-gray-1200: #0f1114;
1671
1696
  --bb-color-gray-200: #e0e1e2;
1672
1697
  --bb-color-gray-25: #fbfbfb;
1698
+ --bb-color-gray-250: #d5d6d8;
1673
1699
  --bb-color-gray-300: #c2c4c6;
1674
1700
  --bb-color-gray-400: #a3a6a9;
1675
1701
  --bb-color-gray-50: #f4f4f5;
@@ -1677,6 +1703,7 @@
1677
1703
  --bb-color-gray-600: #666b70;
1678
1704
  --bb-color-gray-700: #51555c;
1679
1705
  --bb-color-gray-800: #3b4047;
1706
+ --bb-color-gray-850: #30363d;
1680
1707
  --bb-color-gray-900: #252b33;
1681
1708
  --bb-color-green-100: #d8f9e9;
1682
1709
  --bb-color-green-1000: #033019;
@@ -1781,6 +1808,7 @@
1781
1808
  --bb-color-slate-600: #536f9d;
1782
1809
  --bb-color-slate-700: #42597e;
1783
1810
  --bb-color-slate-800: #32435e;
1811
+ --bb-color-slate-850: #2a384f;
1784
1812
  --bb-color-slate-900: #212c3f;
1785
1813
  --bb-color-teal-100: #dcf6f5;
1786
1814
  --bb-color-teal-1000: #022a28;
@@ -1812,6 +1840,8 @@
1812
1840
  --bb-color-yellow-700: #92661e;
1813
1841
  --bb-color-yellow-800: #6e4d17;
1814
1842
  --bb-color-yellow-900: #503811;
1843
+ --bb-duration-150: 150ms;
1844
+ --bb-duration-250: 250ms;
1815
1845
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
1816
1846
  --bb-font-blkb_sans-name: BLKB Sans;
1817
1847
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
@@ -1839,15 +1869,15 @@
1839
1869
  --bb-font-weight-light: 300;
1840
1870
  --bb-font-weight-regular: 400;
1841
1871
  --bb-font-weight-semibold: 600;
1842
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/bb-logo.png');
1843
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
1844
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-base-light.svg');
1845
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
1846
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
1847
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
1848
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
1849
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
1850
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.0.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
1872
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/bb-logo.png');
1873
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
1874
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-base-light.svg');
1875
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
1876
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
1877
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
1878
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
1879
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
1880
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/5.2.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
1851
1881
  --bb-letter_spacing-normal: normal;
1852
1882
  --bb-letter_spacing-wider: 0.01rem;
1853
1883
  --bb-letter_spacing-widest: 0.046875rem;
@@ -1921,6 +1951,7 @@
1921
1951
  --bb-shadow-gray-400: 0 2px 4px -1px rgba(22, 26, 31, 0.2), 0 1px 10px 0 rgba(22, 26, 31, 0.12), 0 4px 5px 0 rgba(22, 26, 31, 0.14);
1922
1952
  --bb-shadow-gray-50: 0 1px 1px 0 rgba(22, 26, 31, 0.12), 0 1.5px 1px -1px rgba(22, 26, 31, 0.12);
1923
1953
  --bb-shadow-gray-800: 0 5px 5px -3px rgba(22, 26, 31, 0.2), 0 3px 14px 2px rgba(22, 26, 31, 0.12), 0 8px 10px 1px rgba(22, 26, 31, 0.14);
1954
+ --bb-shadow-gray-simple-400: 1px 2px 4px 0 rgba(22, 26, 31, 0.5);
1924
1955
  --bb-shadow-slate-100: 0 1px 3px 0 rgba(33, 44, 63, 0.2), 0 2px 1px -1px rgba(33, 44, 63, 0.12), 0 1px 1px 0 rgba(33, 44, 63, 0.14);
1925
1956
  --bb-shadow-slate-1600: 0 8px 10px -5px rgba(33, 44, 63, 0.2), 0 6px 30px 5px rgba(33, 44, 63, 0.12), 0 16px 24px 2px rgba(33, 44, 63, 0.14);
1926
1957
  --bb-shadow-slate-200: 0 1px 8px 0 rgba(33, 44, 63, 0.2), 0 3px 3px -2px rgba(33, 44, 63, 0.12), 0 3px 4px 0 rgba(33, 44, 63, 0.14);
@@ -1929,11 +1960,13 @@
1929
1960
  --bb-shadow-slate-400: 0 2px 4px -1px rgba(33, 44, 63, 0.2), 0 1px 10px 0 rgba(33, 44, 63, 0.12), 0 4px 5px 0 rgba(33, 44, 63, 0.14);
1930
1961
  --bb-shadow-slate-50: 0 1px 1px 0 rgba(33, 44, 63, 0.12), 0 1.5px 1px -1px rgba(33, 44, 63, 0.12);
1931
1962
  --bb-shadow-slate-800: 0 5px 5px -3px rgba(33, 44, 63, 0.2), 0 3px 14px 2px rgba(33, 44, 63, 0.12), 0 8px 10px 1px rgba(33, 44, 63, 0.14);
1963
+ --bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(33, 44, 63, 0.5);
1932
1964
  }
1933
1965
 
1934
1966
  .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud {
1935
1967
  --sky-brand-name: var(--bb-brand-name);
1936
1968
  --sky-color-background-action-accent-base: var(--bb-color-blue-25);
1969
+ --sky-color-background-container-backdrop: var(--bb-color-slate-200);
1937
1970
  --sky-color-background-container-dimmed: var(--bb-color-slate-25);
1938
1971
  --sky-color-background-file_drop: var(--bb-color-slate-25);
1939
1972
  --sky-color-background-input-base: var(--bb-color-slate-25);
@@ -1999,6 +2032,7 @@
1999
2032
  --sky-elevation-overlay-200: var(--bb-shadow-slate-800);
2000
2033
  --sky-elevation-overlay-300: var(--bb-shadow-slate-1600);
2001
2034
  --sky-elevation-overlay-400: var(--bb-shadow-slate-2400);
2035
+ --sky-elevation-overlay-simple-100: var(--bb-shadow-slate-simple-400);
2002
2036
  --sky-elevation-raised-100: var(--bb-shadow-slate-100);
2003
2037
  }
2004
2038
 
@@ -2183,6 +2217,7 @@
2183
2217
  --sky-elevation-overlay-200: var(--bb-shadow-slate-800);
2184
2218
  --sky-elevation-overlay-300: var(--bb-shadow-slate-1600);
2185
2219
  --sky-elevation-overlay-400: var(--bb-shadow-slate-2400);
2220
+ --sky-elevation-overlay-simple-100: var(--bb-shadow-slate-simple-400);
2186
2221
  --sky-elevation-raised-100: var(--bb-shadow-slate-100);
2187
2222
  }
2188
2223
 
@@ -2271,7 +2306,7 @@
2271
2306
  border: none;
2272
2307
  border-radius: var(--sky-border-radius-s);
2273
2308
  font-size: var(--sky-font-size-body-m);
2274
- transition: box-shadow 150ms;
2309
+ transition: box-shadow var(--sky-global-duration-short);
2275
2310
  line-height: var(--sky-font-line_height-body-m);
2276
2311
  }
2277
2312
  .sky-theme-modern .sky-btn-default,
@@ -2780,7 +2815,7 @@
2780
2815
  font-weight: var(--sky-font-style-body-m);
2781
2816
  line-height: var(--sky-font-line_height-body-m);
2782
2817
  padding: var(--sky-comp-tab-horizontal-space-inset-top) var(--sky-comp-tab-horizontal-space-inset-right) var(--sky-comp-tab-horizontal-space-inset-bottom) var(--sky-comp-tab-horizontal-space-inset-left);
2783
- transition: box-shadow 150ms;
2818
+ transition: box-shadow var(--sky-global-duration-short);
2784
2819
  }
2785
2820
  .sky-theme-modern .sky-btn-tab:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible) {
2786
2821
  background-color: var(--sky-color-background-tab-hover);
@@ -3111,7 +3146,7 @@
3111
3146
  line-height: 1;
3112
3147
  align-items: center;
3113
3148
  justify-content: center;
3114
- transition: border-color 150ms, box-shadow 150ms, color 150ms;
3149
+ transition: border-color var(--sky-global-duration-short), box-shadow var(--sky-global-duration-short), color var(--sky-global-duration-short);
3115
3150
  }
3116
3151
  .sky-theme-modern .sky-switch .sky-switch-control.sky-switch-control-icon {
3117
3152
  border-radius: var(--sky-border-radius-s);
@@ -3192,13 +3227,13 @@ html:has(.sky-theme-modern) {
3192
3227
  font-family: var(--sky-font-family-primary);
3193
3228
  color: var(--sky-color-text-default);
3194
3229
  background-color: var(--sky-color-background-page);
3195
- transition: background-color 150ms, color 150ms;
3230
+ transition: background-color var(--sky-global-duration-short), color var(--sky-global-duration-short);
3196
3231
  }
3197
3232
 
3198
3233
  .sky-theme-modern form {
3199
3234
  font-size: var(--sky-font-size-body-m);
3200
3235
  font-family: var(--sky-font-family-primary);
3201
- transition: background-color 150ms, color 150ms;
3236
+ transition: background-color var(--sky-global-duration-short), color var(--sky-global-duration-short);
3202
3237
  }
3203
3238
 
3204
3239
  body.sky-theme-modern {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/theme",
3
- "version": "14.0.0-alpha.10",
3
+ "version": "14.0.0-alpha.12",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -20,7 +20,7 @@
20
20
  "@angular/core": "^21.2.0"
21
21
  },
22
22
  "dependencies": {
23
- "@blackbaud/skyux-design-tokens": "5.0.0",
23
+ "@blackbaud/skyux-design-tokens": "5.2.0",
24
24
  "fontfaceobserver": "2.3.0",
25
25
  "tslib": "^2.8.1"
26
26
  },
package/scss/_compat/_mixins.scss CHANGED
@@ -89,7 +89,7 @@
89
89
  margin: 4px;
90
90
  min-width: 160px;
91
91
  text-align: left;
92
- transition: background-color compatVars.$sky-transition-time-short;
92
+ transition: background-color var(--sky-global-duration-short);
93
93
 
94
94
  &.sky-dropdown-item-active,
95
95
  &:hover {
@@ -142,7 +142,7 @@
142
142
 
143
143
  &:hover {
144
144
  color: color.adjust(vars.$sky-text-color-deemphasized, $lightness: -20%);
145
- transition: color compatVars.$sky-transition-time-short;
145
+ transition: color var(--sky-global-duration-short);
146
146
  }
147
147
  }
148
148
 
package/scss/themes/modern/_compat/_mixins.scss CHANGED
@@ -78,7 +78,7 @@
78
78
  font-weight: vars.$sky-theme-modern-font-body-default-weight;
79
79
  padding: modernCompatVars.$sky-theme-modern-tab-btn-padding-top-bottom
80
80
  modernCompatVars.$sky-theme-modern-tab-btn-padding-left-right;
81
- transition: box-shadow compatVars.$sky-transition-time-short;
81
+ transition: box-shadow var(--sky-global-duration-short);
82
82
 
83
83
  &:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(
84
84
  .sky-dropdown-button-type-tab