@skyux/theme 12.28.1 → 12.30.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 (2) hide show
  1. package/css/themes/modern/styles.css +57 -72
  2. package/package.json +2 -2
package/css/themes/modern/styles.css CHANGED
@@ -12,7 +12,7 @@
12
12
  --bb-border-radius-round: 50%;
13
13
  --bb-border-style-dotted: dotted;
14
14
  --bb-border-style-solid: solid;
15
- --bb-brand-name: Blackbaud;
15
+ --bb-brand-name: "Blackbaud";
16
16
  --bb-color-black: #000000;
17
17
  --bb-color-blocking: rgba(255, 255, 255, 0.7);
18
18
  --bb-color-blue-100: #eef3fc;
@@ -151,7 +151,7 @@
151
151
  --bb-font-weight-light: 300;
152
152
  --bb-font-weight-regular: 400;
153
153
  --bb-font-weight-semibold: 600;
154
- --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.5/assets/images/bb-logo.png");
154
+ --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.10/assets/images/bb-logo.png");
155
155
  --bb-letter_spacing-normal: normal;
156
156
  --bb-letter_spacing-wider: 0.16px;
157
157
  --bb-line_height-300: calc(18/13);
@@ -273,6 +273,7 @@
273
273
  --sky-color-background-blocking: var(--bb-color-blocking);
274
274
  --sky-color-background-container-base: var(--bb-color-gray-1000);
275
275
  --sky-color-background-container-danger: var(--bb-color-red-800);
276
+ --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
276
277
  --sky-color-background-container-info: var(--bb-color-blue-800);
277
278
  --sky-color-background-container-menu: var(--bb-color-gray-900);
278
279
  --sky-color-background-container-success: var(--bb-color-green-900);
@@ -308,6 +309,7 @@
308
309
  --sky-color-background-tab-focus: var(--bb-color-transparent);
309
310
  --sky-color-background-tab-hover: var(--bb-color-transparent);
310
311
  --sky-color-background-tab-selected: var(--bb-color-transparent);
312
+ --sky-color-background-tab-wizard-disabled: var(--bb-color-transparent);
311
313
  --sky-color-background-text_highlight: var(--bb-color-yellow-800);
312
314
  --sky-color-background-thumb-base: var(--bb-color-white);
313
315
  --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
@@ -377,6 +379,7 @@
377
379
  --sky-color-border-tab-disabled: var(--bb-color-gray-800);
378
380
  --sky-color-border-tab-focus: var(--bb-color-sky-600);
379
381
  --sky-color-border-tab-hover: var(--bb-color-sky-600);
382
+ --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
380
383
  --sky-color-border-text_highlight: var(--bb-color-yellow-600);
381
384
  --sky-color-border-warning: var(--bb-color-yellow-400);
382
385
  --sky-color-icon-action: var(--bb-color-sky-600);
@@ -438,6 +441,7 @@
438
441
  --sky-color-background-blocking: var(--bb-color-blocking);
439
442
  --sky-color-background-container-base: var(--bb-color-white);
440
443
  --sky-color-background-container-danger: var(--bb-color-red-300);
444
+ --sky-color-background-container-dimmed: var(--bb-color-blue-25);
441
445
  --sky-color-background-container-info: var(--bb-color-blue-200);
442
446
  --sky-color-background-container-menu: var(--bb-color-white);
443
447
  --sky-color-background-container-success: var(--bb-color-green-300);
@@ -473,6 +477,7 @@
473
477
  --sky-color-background-tab-focus: var(--bb-color-transparent);
474
478
  --sky-color-background-tab-hover: var(--bb-color-transparent);
475
479
  --sky-color-background-tab-selected: var(--bb-color-transparent);
480
+ --sky-color-background-tab-wizard-disabled: var(--bb-color-transparent);
476
481
  --sky-color-background-text_highlight: var(--bb-color-yellow-400);
477
482
  --sky-color-background-thumb-base: var(--bb-color-white);
478
483
  --sky-color-background-thumb-disabled: var(--bb-color-gray-25);
@@ -541,6 +546,7 @@
541
546
  --sky-color-border-tab-disabled: var(--bb-color-gray-200);
542
547
  --sky-color-border-tab-focus: var(--bb-color-blue-600);
543
548
  --sky-color-border-tab-hover: var(--bb-color-blue-600);
549
+ --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
544
550
  --sky-color-border-text_highlight: var(--bb-color-yellow-800);
545
551
  --sky-color-border-warning: var(--bb-color-yellow-600);
546
552
  --sky-color-category-blue: var(--bb-color-sky-300);
@@ -736,6 +742,10 @@
736
742
  --sky-comp-card-small-header-space-inset-left: var(--bb-size-fluid-100);
737
743
  --sky-comp-card-small-header-space-inset-right: var(--bb-size-fluid-100);
738
744
  --sky-comp-card-small-header-space-inset-top: var(--bb-size-fluid-100);
745
+ --sky-comp-card-space-offset-bottom: var(--bb-size-fluid-50);
746
+ --sky-comp-card-space-offset-left: var(--bb-size-0);
747
+ --sky-comp-card-space-offset-right: var(--bb-size-fluid-50);
748
+ --sky-comp-card-space-offset-top: var(--bb-size-0);
739
749
  --sky-comp-colorpicker-content-space-inset-bottom: var(--bb-size-fluid-50);
740
750
  --sky-comp-colorpicker-content-space-inset-left: var(--bb-size-fluid-75);
741
751
  --sky-comp-colorpicker-content-space-inset-right: var(--bb-size-fluid-75);
@@ -772,6 +782,10 @@
772
782
  --sky-comp-flyout-header-space-inset-left: var(--bb-size-fluid-50);
773
783
  --sky-comp-flyout-header-space-inset-right: var(--bb-size-fluid-50);
774
784
  --sky-comp-flyout-header-space-inset-top: var(--bb-size-fluid-75);
785
+ --sky-comp-grid-cell-space-inset-bottom: var(--bb-size-fluid-75);
786
+ --sky-comp-grid-cell-space-inset-left: var(--bb-size-fluid-50);
787
+ --sky-comp-grid-cell-space-inset-right: var(--bb-size-fluid-50);
788
+ --sky-comp-grid-cell-space-inset-top: var(--bb-size-fluid-75);
775
789
  --sky-comp-help_inline-space-inset-bottom: var(--bb-size-fluid-6);
776
790
  --sky-comp-help_inline-space-inset-left: var(--bb-size-fluid-25);
777
791
  --sky-comp-help_inline-space-inset-right: var(--bb-size-fluid-25);
@@ -1133,22 +1147,6 @@
1133
1147
  --sky-font-style-heading-4: var(--bb-font-style-semibold);
1134
1148
  --sky-font-style-heading-5: var(--bb-font-style-semibold);
1135
1149
  --sky-font-style-input-label: var(--bb-font-style-regular);
1136
- --sky-font-weight-body-l: var(--bb-font-weight-regular);
1137
- --sky-font-weight-body-m: var(--bb-font-weight-regular);
1138
- --sky-font-weight-body-s: var(--bb-font-weight-semibold);
1139
- --sky-font-weight-display-1: var(--bb-font-weight-semibold);
1140
- --sky-font-weight-display-2: var(--bb-font-weight-semibold);
1141
- --sky-font-weight-display-3: var(--bb-font-weight-semibold);
1142
- --sky-font-weight-display-4: var(--bb-font-weight-semibold);
1143
- --sky-font-weight-emphasized: var(--bb-font-weight-semibold);
1144
- --sky-font-weight-heading-1: var(--bb-font-weight-regular);
1145
- --sky-font-weight-heading-2: var(--bb-font-weight-semibold);
1146
- --sky-font-weight-heading-3: var(--bb-font-weight-semibold);
1147
- --sky-font-weight-heading-4: var(--bb-font-weight-semibold);
1148
- --sky-font-weight-heading-5: var(--bb-font-weight-semibold);
1149
- --sky-font-weight-hint-m: var(--bb-font-weight-regular);
1150
- --sky-font-weight-hint-s: var(--bb-font-weight-regular);
1151
- --sky-font-weight-input-label: var(--bb-font-weight-regular);
1152
1150
  --sky-size-avatar-l: var(--bb-size-fluid-550);
1153
1151
  --sky-size-avatar-m: var(--bb-size-fluid-350);
1154
1152
  --sky-size-avatar-s: var(--bb-size-fluid-200);
@@ -1237,10 +1235,6 @@
1237
1235
  --sky-space-inset-horizontal-top-m: var(--bb-size-0);
1238
1236
  --sky-space-inset-horizontal-top-s: var(--bb-size-0);
1239
1237
  --sky-space-inset-horizontal-top-xl: var(--bb-size-0);
1240
- --sky-space-inset-letterbox-2_3-bottom-m: var(--bb-size-fluid-75);
1241
- --sky-space-inset-letterbox-2_3-left-m: var(--bb-size-fluid-50);
1242
- --sky-space-inset-letterbox-2_3-right-m: var(--bb-size-fluid-50);
1243
- --sky-space-inset-letterbox-2_3-top-m: var(--bb-size-fluid-75);
1244
1238
  --sky-space-inset-thumb: var(--bb-size-fixed-6);
1245
1239
  --sky-space-inset-thumbnail_matte-l: var(--bb-size-fluid-25);
1246
1240
  --sky-space-inset-thumbnail_matte-m: var(--bb-size-fluid-18);
@@ -1305,7 +1299,7 @@
1305
1299
  --modern-border-radius-round: 50%;
1306
1300
  --modern-border-style-dotted: dotted;
1307
1301
  --modern-border-style-solid: solid;
1308
- --modern-brand-name: Blackbaud;
1302
+ --modern-brand-name: "Blackbaud";
1309
1303
  --modern-color-black: #000000;
1310
1304
  --modern-color-blocking: rgba(255, 255, 255, 0.7);
1311
1305
  --modern-color-blue-05: #ebfbff;
@@ -1368,7 +1362,7 @@
1368
1362
  --modern-font-weight-light: 300;
1369
1363
  --modern-font-weight-regular: 400;
1370
1364
  --modern-font-weight-semibold: 600;
1371
- --modern-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.5/assets/images/bb-logo.png");
1365
+ --modern-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.10/assets/images/bb-logo.png");
1372
1366
  --modern-letter_spacing-normal: normal;
1373
1367
  --modern-line_height-110: 1.1;
1374
1368
  --modern-line_height-115: 1.15;
@@ -1461,6 +1455,7 @@
1461
1455
  --sky-color-background-blocking: var(--modern-color-blocking);
1462
1456
  --sky-color-background-container-base: var(--modern-color-white);
1463
1457
  --sky-color-background-container-danger: var(--modern-color-red-30);
1458
+ --sky-color-background-container-dimmed: var(--modern-color-transparent);
1464
1459
  --sky-color-background-container-info: var(--modern-color-blue-10);
1465
1460
  --sky-color-background-container-menu: var(--modern-color-white);
1466
1461
  --sky-color-background-container-success: var(--modern-color-green-30);
@@ -1496,6 +1491,7 @@
1496
1491
  --sky-color-background-tab-focus: var(--modern-color-transparent);
1497
1492
  --sky-color-background-tab-hover: var(--modern-color-transparent);
1498
1493
  --sky-color-background-tab-selected: var(--modern-color-transparent);
1494
+ --sky-color-background-tab-wizard-disabled: var(--modern-color-transparent);
1499
1495
  --sky-color-background-text_highlight: var(--modern-color-yellow-40);
1500
1496
  --sky-color-background-thumb-base: var(--modern-color-white);
1501
1497
  --sky-color-background-thumb-disabled: var(--modern-color-gray-07);
@@ -1564,6 +1560,7 @@
1564
1560
  --sky-color-border-tab-disabled: var(--modern-color-transparent);
1565
1561
  --sky-color-border-tab-focus: var(--modern-color-blue-74);
1566
1562
  --sky-color-border-tab-hover: var(--modern-color-blue-50);
1563
+ --sky-color-border-tab-wizard-disabled: var(--modern-color-transparent);
1567
1564
  --sky-color-border-text_highlight: var(--modern-color-yellow-80);
1568
1565
  --sky-color-border-warning: var(--modern-color-yellow-50);
1569
1566
  --sky-color-category-blue: var(--modern-color-category-sky_blue-40);
@@ -1759,6 +1756,10 @@
1759
1756
  --sky-comp-card-small-header-space-inset-left: var(--modern-size-15);
1760
1757
  --sky-comp-card-small-header-space-inset-right: var(--modern-size-15);
1761
1758
  --sky-comp-card-small-header-space-inset-top: var(--modern-size-15);
1759
+ --sky-comp-card-space-offset-bottom: var(--modern-size-10);
1760
+ --sky-comp-card-space-offset-left: var(--modern-size-0);
1761
+ --sky-comp-card-space-offset-right: var(--modern-size-10);
1762
+ --sky-comp-card-space-offset-top: var(--modern-size-0);
1762
1763
  --sky-comp-colorpicker-content-space-inset-bottom: var(--modern-size-15);
1763
1764
  --sky-comp-colorpicker-content-space-inset-left: var(--modern-size-30);
1764
1765
  --sky-comp-colorpicker-content-space-inset-right: var(--modern-size-30);
@@ -1795,6 +1796,10 @@
1795
1796
  --sky-comp-flyout-header-space-inset-left: var(--modern-space-s);
1796
1797
  --sky-comp-flyout-header-space-inset-right: var(--modern-space-s);
1797
1798
  --sky-comp-flyout-header-space-inset-top: var(--modern-space-md);
1799
+ --sky-comp-grid-cell-space-inset-bottom: var(--modern-space-md);
1800
+ --sky-comp-grid-cell-space-inset-left: var(--modern-space-s);
1801
+ --sky-comp-grid-cell-space-inset-right: var(--modern-space-s);
1802
+ --sky-comp-grid-cell-space-inset-top: var(--modern-space-md);
1798
1803
  --sky-comp-help_inline-space-inset-bottom: var(--modern-size-1);
1799
1804
  --sky-comp-help_inline-space-inset-left: var(--modern-size-5);
1800
1805
  --sky-comp-help_inline-space-inset-right: var(--modern-size-5);
@@ -2149,29 +2154,13 @@
2149
2154
  --sky-font-style-display-2: var(--modern-font-style-regular);
2150
2155
  --sky-font-style-display-3: var(--modern-font-style-regular);
2151
2156
  --sky-font-style-display-4: var(--modern-font-style-bold);
2152
- --sky-font-style-emphasized: var(--modern-font-style-semibold);
2157
+ --sky-font-style-emphasized: var(--modern-font-style-bold);
2153
2158
  --sky-font-style-heading-1: var(--modern-font-style-light);
2154
2159
  --sky-font-style-heading-2: var(--modern-font-style-regular);
2155
2160
  --sky-font-style-heading-3: var(--modern-font-style-regular);
2156
2161
  --sky-font-style-heading-4: var(--modern-font-style-semibold);
2157
2162
  --sky-font-style-heading-5: var(--modern-font-style-semibold);
2158
2163
  --sky-font-style-input-label: var(--modern-font-style-regular);
2159
- --sky-font-weight-body-l: var(--modern-font-weight-light);
2160
- --sky-font-weight-body-m: var(--modern-font-weight-regular);
2161
- --sky-font-weight-body-s: var(--modern-font-weight-regular);
2162
- --sky-font-weight-display-1: var(--modern-font-weight-regular);
2163
- --sky-font-weight-display-2: var(--modern-font-weight-regular);
2164
- --sky-font-weight-display-3: var(--modern-font-weight-regular);
2165
- --sky-font-weight-display-4: var(--modern-font-weight-bold);
2166
- --sky-font-weight-emphasized: var(--modern-font-weight-bold);
2167
- --sky-font-weight-heading-1: var(--modern-font-weight-light);
2168
- --sky-font-weight-heading-2: var(--modern-font-weight-regular);
2169
- --sky-font-weight-heading-3: var(--modern-font-weight-regular);
2170
- --sky-font-weight-heading-4: var(--modern-font-weight-semibold);
2171
- --sky-font-weight-heading-5: var(--modern-font-weight-semibold);
2172
- --sky-font-weight-hint-m: var(--modern-font-weight-regular);
2173
- --sky-font-weight-hint-s: var(--modern-font-weight-regular);
2174
- --sky-font-weight-input-label: var(--modern-font-weight-regular);
2175
2164
  --sky-size-avatar-l: var(--modern-size-100);
2176
2165
  --sky-size-avatar-m: var(--modern-size-65);
2177
2166
  --sky-size-avatar-s: var(--modern-size-32);
@@ -2260,10 +2249,6 @@
2260
2249
  --sky-space-inset-horizontal-top-m: var(--modern-size-0);
2261
2250
  --sky-space-inset-horizontal-top-s: var(--modern-size-0);
2262
2251
  --sky-space-inset-horizontal-top-xl: var(--modern-size-0);
2263
- --sky-space-inset-letterbox-2_3-bottom-m: var(--modern-space-md);
2264
- --sky-space-inset-letterbox-2_3-left-m: var(--modern-space-s);
2265
- --sky-space-inset-letterbox-2_3-right-m: var(--modern-space-s);
2266
- --sky-space-inset-letterbox-2_3-top-m: var(--modern-space-md);
2267
2252
  --sky-space-inset-thumb: var(--modern-size-1);
2268
2253
  --sky-space-inset-thumbnail_matte-l: var(--modern-size-5);
2269
2254
  --sky-space-inset-thumbnail_matte-m: var(--modern-size-3);
@@ -2920,21 +2905,21 @@
2920
2905
  box-shadow: var(--sky-override-button-tertiary-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled), var(--sky-comp-override-toolbar-button-elevation-disabled, var(--sky-elevation-action-tertiary-disabled)));
2921
2906
  }
2922
2907
  .sky-theme-modern .sky-btn-link-inline {
2923
- background-color: var(--sky-color-background-action-tertiary-base);
2908
+ background-color: transparent;
2924
2909
  border-radius: var(--sky-override-button-link-inline-border-radius, var(--sky-border-radius-s));
2925
2910
  padding: var(--sky-space-inset-balanced-none);
2926
2911
  color: var(--sky-color-text-action);
2927
2912
  font-size: var(--sky-override-button-link-inline-font-size, inherit);
2928
2913
  }
2929
2914
  .sky-theme-modern .sky-btn-link-inline:focus-visible:not(:active) {
2930
- background-color: var(--sky-color-background-action-tertiary-focus);
2915
+ background-color: transparent;
2931
2916
  box-shadow: var(--sky-override-button-link-inline-box-shadow-focus, 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus));
2932
2917
  }
2933
2918
  .sky-theme-modern .sky-btn-link-inline:active {
2934
- background-color: var(--sky-color-background-action-tertiary-active);
2919
+ background-color: transparent;
2935
2920
  }
2936
2921
  .sky-theme-modern .sky-btn-link-inline:hover {
2937
- background-color: var(--sky-color-background-action-tertiary-hover);
2922
+ background-color: transparent;
2938
2923
  }
2939
2924
  .sky-theme-modern .sky-btn-link-inline:hover, .sky-theme-modern .sky-btn-link-inline:active {
2940
2925
  color: var(--sky-override-button-link-inline-color-hover-active, var(--sky-color-text-action));
@@ -2992,7 +2977,7 @@
2992
2977
  border-top-right-radius: var(--sky-override-tab-button-radius, var(--sky-border-radius-s));
2993
2978
  color: var(--sky-color-text-deemphasized);
2994
2979
  font-size: var(--sky-font-size-body-m);
2995
- font-weight: var(--sky-font-weight-body-m);
2980
+ font-weight: var(--sky-font-style-body-m);
2996
2981
  line-height: var(--sky-override-tab-line-height, var(--sky-font-line_height-body-m));
2997
2982
  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);
2998
2983
  transition: box-shadow 150ms;
@@ -3094,8 +3079,8 @@
3094
3079
  color: var(--sky-color-text-default);
3095
3080
  border-bottom: none;
3096
3081
  border-radius: 0 var(--sky-border-radius-s) var(--sky-border-radius-s) 0;
3097
- border-left: var(--sky-override-selected-dropdown-item-border-width, var(--sky-border-width-selected-l)) var(--sky-border-style-accent) var(--sky-color-border-selected);
3098
- 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) calc(var(--sky-comp-tab-horizontal-space-inset-left) - var(--sky-override-selected-dropdown-item-border-width, var(--sky-border-width-selected-l)));
3082
+ border-left: var(--sky-override-selected-dropdown-item-border-width, var(--sky-border-width-selected-m)) var(--sky-border-style-accent) var(--sky-color-border-selected);
3083
+ 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) calc(var(--sky-comp-tab-horizontal-space-inset-left) - var(--sky-override-selected-dropdown-item-border-width, var(--sky-border-width-selected-m)));
3099
3084
  }
3100
3085
 
3101
3086
  .sky-theme-modern .sky-elevation-0-bordered {
@@ -3294,7 +3279,7 @@
3294
3279
  max-width: var(--sky-size-switch);
3295
3280
  height: var(--sky-size-switch);
3296
3281
  flex: 1 0 var(--sky-size-switch);
3297
- margin: 0 var(--sky-space-gap-label-s) auto auto;
3282
+ margin: 0 var(--sky-comp-override-switch-label-margin-right, var(--sky-space-gap-label-s)) auto auto;
3298
3283
  display: inline-flex;
3299
3284
  position: relative;
3300
3285
  border: var(--sky-border-width-input-base) solid var(--sky-color-border-switch-base);
@@ -3387,7 +3372,7 @@
3387
3372
  --sky-override-a-color-hover-active: var(
3388
3373
  --sky-text-color-action-primary-hover
3389
3374
  );
3390
- --sky-override-form-font-weight: var(--sky-font-weight-body-m);
3375
+ --sky-override-form-font-weight: var(--sky-font-style-body-m);
3391
3376
  --sky-override-p-line-height: var(--sky-font-line_height-body-m);
3392
3377
  --sky-override-body-line-height: normal;
3393
3378
  }
@@ -3398,7 +3383,7 @@ html:has(.sky-theme-brand-base) {
3398
3383
 
3399
3384
  .sky-theme-modern {
3400
3385
  font-size: var(--sky-font-size-body-m);
3401
- font-weight: var(--sky-font-weight-body-m);
3386
+ font-weight: var(--sky-font-style-body-m);
3402
3387
  font-family: var(--sky-font-family-primary);
3403
3388
  color: var(--sky-color-text-default);
3404
3389
  background-color: var(--sky-color-background-page);
@@ -3429,33 +3414,33 @@ body.sky-theme-modern {
3429
3414
  color: var(--sky-color-text-heading);
3430
3415
  font-family: var(--sky-font-family-primary);
3431
3416
  font-size: var(--sky-font-size-heading-1);
3432
- font-weight: var(--sky-font-weight-heading-1);
3417
+ font-weight: var(--sky-font-style-heading-1);
3433
3418
  }
3434
3419
  .sky-theme-modern h2,
3435
3420
  .sky-theme-modern .sky-font-heading-2 {
3436
3421
  color: var(--sky-color-text-heading);
3437
3422
  font-family: var(--sky-font-family-primary);
3438
3423
  font-size: var(--sky-font-size-heading-2);
3439
- font-weight: var(--sky-font-weight-heading-2);
3424
+ font-weight: var(--sky-font-style-heading-2);
3440
3425
  }
3441
3426
  .sky-theme-modern h3,
3442
3427
  .sky-theme-modern .sky-font-heading-3 {
3443
3428
  color: var(--sky-color-text-heading);
3444
3429
  font-size: var(--sky-font-size-heading-3);
3445
- font-weight: var(--sky-font-weight-heading-3);
3430
+ font-weight: var(--sky-font-style-heading-3);
3446
3431
  }
3447
3432
  .sky-theme-modern h4,
3448
3433
  .sky-theme-modern .sky-font-heading-4 {
3449
3434
  color: var(--sky-color-text-heading);
3450
3435
  font-size: var(--sky-font-size-heading-4);
3451
- font-weight: var(--sky-font-weight-heading-4);
3436
+ font-weight: var(--sky-font-style-heading-4);
3452
3437
  text-transform: none;
3453
3438
  }
3454
3439
  .sky-theme-modern h5,
3455
3440
  .sky-theme-modern .sky-font-heading-5 {
3456
3441
  color: var(--sky-color-text-heading);
3457
3442
  font-size: var(--sky-font-size-heading-5);
3458
- font-weight: var(--sky-font-weight-heading-5);
3443
+ font-weight: var(--sky-font-style-heading-5);
3459
3444
  text-transform: none;
3460
3445
  }
3461
3446
  .sky-theme-modern p {
@@ -3498,31 +3483,31 @@ body.sky-theme-modern {
3498
3483
  color: var(--sky-color-text-default);
3499
3484
  font-family: var(--sky-font-family-primary);
3500
3485
  font-size: var(--sky-font-size-body-m);
3501
- font-weight: var(--sky-font-weight-body-m);
3486
+ font-weight: var(--sky-font-style-body-m);
3502
3487
  }
3503
3488
  .sky-theme-modern .sky-font-body-sm {
3504
3489
  color: var(--sky-color-text-default);
3505
3490
  font-family: var(--sky-font-family-primary);
3506
3491
  font-size: var(--sky-font-size-body-s);
3507
- font-weight: var(--sky-font-weight-body-s);
3492
+ font-weight: var(--sky-font-style-body-s);
3508
3493
  }
3509
3494
  .sky-theme-modern .sky-font-body-lg {
3510
3495
  color: var(--sky-color-text-default);
3511
3496
  font-family: var(--sky-font-family-primary);
3512
3497
  font-size: var(--sky-font-size-body-l);
3513
- font-weight: var(--sky-font-weight-body-l);
3498
+ font-weight: var(--sky-font-style-body-l);
3514
3499
  }
3515
3500
  .sky-theme-modern .sky-font-data-label {
3516
3501
  color: var(--sky-color-text-deemphasized);
3517
3502
  font-family: var(--sky-font-family-primary);
3518
3503
  font-size: var(--sky-font-size-body-m);
3519
- font-weight: var(--sky-font-weight-body-m);
3504
+ font-weight: var(--sky-font-style-body-m);
3520
3505
  }
3521
3506
  .sky-theme-modern .sky-font-field-label {
3522
3507
  color: var(--sky-color-text-deemphasized);
3523
3508
  font-family: var(--sky-font-family-primary);
3524
3509
  font-size: var(--sky-font-size-body-m);
3525
- font-weight: var(--sky-font-weight-body-m);
3510
+ font-weight: var(--sky-font-style-body-m);
3526
3511
  }
3527
3512
  .sky-theme-modern .sky-font-deemphasized {
3528
3513
  color: var(--sky-color-text-deemphasized);
@@ -3534,14 +3519,14 @@ body.sky-theme-modern {
3534
3519
  .sky-theme-modern .sky-font-emphasized {
3535
3520
  font-family: var(--sky-font-family-primary);
3536
3521
  font-size: inherit;
3537
- font-weight: var(--sky-font-weight-emphasized);
3522
+ font-weight: var(--sky-font-style-emphasized);
3538
3523
  }
3539
3524
  .sky-theme-modern .sky-font-hint-text-s {
3540
3525
  color: var(--sky-color-text-deemphasized);
3541
3526
  font-family: var(--sky-font-family-primary);
3542
3527
  font-size: var(--sky-font-size-hint-s);
3543
3528
  font-style: var(--sky-font-style-hint-s-style);
3544
- font-weight: var(--sky-font-weight-hint-s);
3529
+ font-weight: var(--sky-font-style-hint-s);
3545
3530
  letter-spacing: var(--sky-font-letter_spacing-hint-s);
3546
3531
  line-height: var(--sky-font-line_height-hint-s);
3547
3532
  }
@@ -3550,33 +3535,33 @@ body.sky-theme-modern {
3550
3535
  font-family: var(--sky-font-family-primary);
3551
3536
  font-size: var(--sky-font-size-hint-m);
3552
3537
  font-style: var(--sky-font-style-hint-m-style);
3553
- font-weight: var(--sky-font-weight-hint-m);
3538
+ font-weight: var(--sky-font-style-hint-m);
3554
3539
  line-height: var(--sky-font-line_height-hint-m);
3555
3540
  }
3556
3541
  .sky-theme-modern .sky-font-display-1 {
3557
3542
  color: var(--sky-color-text-default);
3558
3543
  font-family: var(--sky-font-family-primary);
3559
3544
  font-size: var(--sky-font-size-display-1);
3560
- font-weight: var(--sky-font-weight-display-1);
3545
+ font-weight: var(--sky-font-style-display-1);
3561
3546
  }
3562
3547
  .sky-theme-modern .sky-font-display-2 {
3563
3548
  color: var(--sky-color-text-default);
3564
3549
  font-family: var(--sky-font-family-primary);
3565
3550
  font-size: var(--sky-font-size-display-2);
3566
- font-weight: var(--sky-font-weight-display-2);
3551
+ font-weight: var(--sky-font-style-display-2);
3567
3552
  }
3568
3553
  .sky-theme-modern .sky-font-display-3,
3569
3554
  .sky-theme-modern .sky-headline {
3570
3555
  color: var(--sky-color-text-default);
3571
3556
  font-family: var(--sky-font-family-primary);
3572
3557
  font-size: var(--sky-font-size-display-3);
3573
- font-weight: var(--sky-font-weight-display-3);
3558
+ font-weight: var(--sky-font-style-display-3);
3574
3559
  }
3575
3560
  .sky-theme-modern .sky-font-display-4 {
3576
3561
  color: var(--sky-color-text-default);
3577
3562
  font-family: var(--sky-font-family-primary);
3578
3563
  font-size: var(--sky-font-size-display-4);
3579
- font-weight: var(--sky-font-weight-display-4);
3564
+ font-weight: var(--sky-font-style-display-4);
3580
3565
  }
3581
3566
 
3582
3567
  .sky-theme-modern.sky-theme-brand-base .sky-font-body-default {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/theme",
3
- "version": "12.28.1",
3
+ "version": "12.30.0",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -20,7 +20,7 @@
20
20
  "@angular/core": "^19.2.14"
21
21
  },
22
22
  "dependencies": {
23
- "@blackbaud/skyux-design-tokens": "2.0.0-alpha.5",
23
+ "@blackbaud/skyux-design-tokens": "2.0.0-alpha.10",
24
24
  "@skyux/icons": "9.0.0",
25
25
  "fontfaceobserver": "2.3.0",
26
26
  "tslib": "^2.8.1"