@skyux/theme 12.0.0-alpha.0 → 12.0.0-alpha.10

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 (9) hide show
  1. package/css/sky.css +145 -69
  2. package/css/themes/modern/styles.css +35 -7
  3. package/documentation.json +273 -347
  4. package/fesm2022/skyux-theme.mjs +111 -48
  5. package/fesm2022/skyux-theme.mjs.map +1 -1
  6. package/lib/viewport/viewport-reserve-args.d.ts +4 -0
  7. package/lib/viewport/viewport.service.d.ts +1 -1
  8. package/package.json +5 -5
  9. package/scss/_compat/_variables.scss +3 -6
package/css/sky.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
2
- @import url("https://sky.blackbaudcdn.net/static/skyux-icons/7.8.0/assets/css/skyux-icons.min.css");
2
+ @import url("https://sky.blackbaudcdn.net/static/skyux-icons/7.14.1/assets/css/skyux-icons.min.css");
3
3
  /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
4
4
  /* Document
5
5
  ========================================================================== */
@@ -1039,13 +1039,36 @@ select::-ms-expand {
1039
1039
  }
1040
1040
 
1041
1041
  body:not(.sky-theme-modern) {
1042
+ --sky-override-page-content-blocks-spacing-xs: 10px;
1043
+ --sky-override-page-header-blocks-spacing-sm: 20px 20px 0 20px;
1044
+ --sky-override-page-content-blocks-spacing-sm: 20px;
1045
+ --sky-override-page-content-fit-list-spacing-xs: 0 10px;
1046
+ --sky-override-page-header-fit-list-spacing-sm: 20px;
1047
+ --sky-override-page-content-fit-list-spacing-sm: 0 20px;
1042
1048
  --sky-override-tabset-padding-xs-breakpoint: 10px;
1049
+ --sky-override-page-header-tabs-spacing-sm: 20px;
1050
+ --sky-override-page-content-tabs-spacing-sm: 20px;
1051
+ --sky-override-page-content-with-links-spacing-sm: var(
1052
+ --sky-margin-inline-xl
1053
+ );
1054
+ --sky-override-page-content-with-links-spacing-xs: var(
1055
+ --sky-margin-stacked-xl
1056
+ )
1057
+ var(--sky-margin-inline-sm);
1058
+ --sky-override-page-header-avatar-size-space: var(--sky-margin-inline-xl);
1059
+ --sky-override-page-header-link-rows-space: var(--sky-margin-stacked-xl);
1060
+ --sky-override-page-header-spacing-xs: 20px 10px;
1043
1061
  }
1044
1062
 
1045
1063
  .sky-layout-host-blocks, .sky-layout-host-list, .sky-layout-host-tabs {
1046
1064
  display: block;
1047
- --sky-layout-host-links-spacing: var(--sky-margin-stacked-xl)
1048
- var(--sky-margin-inline-sm);
1065
+ --sky-layout-host-links-spacing: var(
1066
+ --sky-override-page-content-with-links-spacing-xs,
1067
+ var(--sky-space-inset-letterbox-1_3-top-m)
1068
+ var(--sky-space-inset-letterbox-1_3-right-m)
1069
+ var(--sky-space-inset-letterbox-1_3-bottom-m)
1070
+ var(--sky-space-inset-letterbox-1_3-left-m)
1071
+ );
1049
1072
  }
1050
1073
  .sky-layout-host-blocks .sky-margin-stacked-xl:empty, .sky-layout-host-list .sky-margin-stacked-xl:empty, .sky-layout-host-tabs .sky-margin-stacked-xl:empty {
1051
1074
  margin-bottom: 0;
@@ -1065,7 +1088,7 @@ body:not(.sky-theme-modern) {
1065
1088
  grid-area: links;
1066
1089
  }
1067
1090
  .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links) > sky-page-content, .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) > sky-page-content {
1068
- margin-right: var(--sky-margin-inline-xl);
1091
+ margin-right: var(--sky-override-page-content-with-links-spacing-sm, var(--sky-space-inline-xl));
1069
1092
  }
1070
1093
  .sky-layout-host-fit, .sky-layout-host-for-child-fit {
1071
1094
  position: absolute;
@@ -1082,19 +1105,34 @@ body:not(.sky-theme-modern) {
1082
1105
  --sky-layout-host-links-display: none;
1083
1106
  }
1084
1107
  .sky-layout-host-blocks, .sky-layout-host-list, .sky-layout-host-fit, .sky-layout-host-tabs {
1085
- --sky-layout-host-header-spacing: 20px 10px;
1108
+ --sky-layout-host-header-spacing: var(
1109
+ --sky-override-page-header-spacing-xs,
1110
+ var(--sky-space-inset-letterbox-1_2-top-m)
1111
+ var(--sky-space-inset-letterbox-1_2-right-m)
1112
+ var(--sky-space-inset-letterbox-1_2-bottom-m)
1113
+ var(--sky-space-inset-letterbox-1_2-left-m)
1114
+ );
1086
1115
  }
1087
1116
  .sky-layout-host-blocks {
1088
- --sky-layout-host-content-spacing: 10px;
1117
+ --sky-layout-host-content-spacing: var(
1118
+ --sky-override-page-content-blocks-spacing-xs,
1119
+ var(--sky-space-inset-balanced-s)
1120
+ );
1089
1121
  }
1090
1122
  .sky-layout-host-fit, .sky-layout-host-list {
1091
- --sky-layout-host-content-spacing: 0 10px;
1123
+ --sky-layout-host-content-spacing: var(
1124
+ --sky-override-page-content-fit-list-spacing-xs,
1125
+ var(--sky-space-inset-horizontal-top-s)
1126
+ var(--sky-space-inset-horizontal-right-s)
1127
+ var(--sky-space-inset-horizontal-bottom-s)
1128
+ var(--sky-space-inset-horizontal-left-s)
1129
+ );
1092
1130
  }
1093
1131
  .sky-layout-host-tabs {
1094
1132
  --sky-layout-host-content-spacing: 0;
1095
1133
  --sky-layout-host-tab-content-spacing: var(
1096
1134
  --sky-override-tabset-padding-xs-breakpoint,
1097
- var(--sky-space-inset-tabs-s)
1135
+ var(--sky-space-inset-letterbox-1_2-left-m)
1098
1136
  );
1099
1137
  }
1100
1138
  .sky-layout-host-none {
@@ -1103,9 +1141,12 @@ body:not(.sky-theme-modern) {
1103
1141
 
1104
1142
  @media (min-width: 768px) {
1105
1143
  .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1106
- --sky-layout-host-links-spacing: var(--sky-margin-inline-xl);
1144
+ --sky-layout-host-links-spacing: var(
1145
+ --sky-override-page-content-with-links-spacing-sm,
1146
+ var(--sky-space-inline-xl)
1147
+ );
1107
1148
  grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1108
- grid-template-rows: minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) auto;
1149
+ grid-template-rows: minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) auto;
1109
1150
  grid-template-columns: 0 75% 25%;
1110
1151
  }
1111
1152
  .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-header,
@@ -1144,7 +1185,11 @@ body:not(.sky-theme-modern) {
1144
1185
  }
1145
1186
  .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)), .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)), .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) {
1146
1187
  --sky-layout-host-header-avatar-size: calc(
1147
- 120px + var(--sky-margin-inline-xl)
1188
+ 120px +
1189
+ var(
1190
+ --sky-override-page-header-avatar-size-space,
1191
+ var(--sky-space-inline-xl)
1192
+ )
1148
1193
  );
1149
1194
  grid-template-columns: var(--sky-layout-host-header-avatar-size) calc(75% - var(--sky-layout-host-header-avatar-size)) 25%;
1150
1195
  }
@@ -1155,16 +1200,44 @@ body:not(.sky-theme-modern) {
1155
1200
  margin-left: 0;
1156
1201
  }
1157
1202
  .sky-layout-host-blocks {
1158
- --sky-layout-host-header-spacing: 20px 20px 0 20px;
1159
- --sky-layout-host-content-spacing: 20px;
1203
+ --sky-layout-host-header-spacing: var(
1204
+ --sky-override-page-header-blocks-spacing-sm,
1205
+ var(--sky-space-inset-bottomless-top-xl)
1206
+ var(--sky-space-inset-bottomless-right-xl)
1207
+ var(--sky-space-inset-bottomless-bottom-xl)
1208
+ var(--sky-space-inset-bottomless-left-xl)
1209
+ );
1210
+ --sky-layout-host-content-spacing: var(
1211
+ --sky-override-page-content-blocks-spacing-sm,
1212
+ var(--sky-space-inset-balanced-xl)
1213
+ );
1160
1214
  }
1161
1215
  .sky-layout-host-fit, .sky-layout-host-list {
1162
- --sky-layout-host-header-spacing: 20px;
1163
- --sky-layout-host-content-spacing: 0 20px;
1216
+ --sky-layout-host-header-spacing: var(
1217
+ --sky-override-page-header-fit-list-spacing-sm,
1218
+ var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
1219
+ var(--sky-space-inset-sunk-bottom-l)
1220
+ var(--sky-space-inset-sunk-left-l)
1221
+ );
1222
+ --sky-layout-host-content-spacing: var(
1223
+ --sky-override-page-content-fit-list-spacing-sm,
1224
+ var(--sky-space-inset-horizontal-top-xl)
1225
+ var(--sky-space-inset-horizontal-right-xl)
1226
+ var(--sky-space-inset-horizontal-bottom-xl)
1227
+ var(--sky-space-inset-horizontal-left-xl)
1228
+ );
1164
1229
  }
1165
1230
  .sky-layout-host-tabs {
1166
- --sky-layout-host-header-spacing: 20px;
1167
- --sky-layout-host-tab-content-spacing: 20px;
1231
+ --sky-layout-host-header-spacing: var(
1232
+ --sky-override-page-header-tabs-spacing-sm,
1233
+ var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
1234
+ var(--sky-space-inset-sunk-bottom-l)
1235
+ var(--sky-space-inset-sunk-left-l)
1236
+ );
1237
+ --sky-layout-host-tab-content-spacing: var(
1238
+ --sky-override-page-content-tabs-spacing-sm,
1239
+ var(--sky-space-inset-sunk-left-l)
1240
+ );
1168
1241
  }
1169
1242
  }
1170
1243
  .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-responsive-container-sm .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-responsive-container-sm .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links),
@@ -1174,9 +1247,12 @@ body:not(.sky-theme-modern) {
1174
1247
  .sky-responsive-container-lg .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1175
1248
  .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1176
1249
  .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1177
- --sky-layout-host-links-spacing: var(--sky-margin-inline-xl);
1250
+ --sky-layout-host-links-spacing: var(
1251
+ --sky-override-page-content-with-links-spacing-sm,
1252
+ var(--sky-space-inline-xl)
1253
+ );
1178
1254
  grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1179
- grid-template-rows: minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) auto;
1255
+ grid-template-rows: minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) auto;
1180
1256
  grid-template-columns: 0 75% 25%;
1181
1257
  }
1182
1258
  .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-header,
@@ -1269,7 +1345,11 @@ body:not(.sky-theme-modern) {
1269
1345
  .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)),
1270
1346
  .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) {
1271
1347
  --sky-layout-host-header-avatar-size: calc(
1272
- 120px + var(--sky-margin-inline-xl)
1348
+ 120px +
1349
+ var(
1350
+ --sky-override-page-header-avatar-size-space,
1351
+ var(--sky-space-inline-xl)
1352
+ )
1273
1353
  );
1274
1354
  grid-template-columns: var(--sky-layout-host-header-avatar-size) calc(75% - var(--sky-layout-host-header-avatar-size)) 25%;
1275
1355
  }
@@ -1294,65 +1374,50 @@ body:not(.sky-theme-modern) {
1294
1374
  .sky-responsive-container-sm .sky-layout-host-blocks,
1295
1375
  .sky-responsive-container-md .sky-layout-host-blocks,
1296
1376
  .sky-responsive-container-lg .sky-layout-host-blocks {
1297
- --sky-layout-host-header-spacing: 20px 20px 0 20px;
1298
- --sky-layout-host-content-spacing: 20px;
1377
+ --sky-layout-host-header-spacing: var(
1378
+ --sky-override-page-header-blocks-spacing-sm,
1379
+ var(--sky-space-inset-bottomless-top-xl)
1380
+ var(--sky-space-inset-bottomless-right-xl)
1381
+ var(--sky-space-inset-bottomless-bottom-xl)
1382
+ var(--sky-space-inset-bottomless-left-xl)
1383
+ );
1384
+ --sky-layout-host-content-spacing: var(
1385
+ --sky-override-page-content-blocks-spacing-sm,
1386
+ var(--sky-space-inset-balanced-xl)
1387
+ );
1299
1388
  }
1300
1389
  .sky-responsive-container-sm .sky-layout-host-fit, .sky-responsive-container-sm .sky-layout-host-list,
1301
1390
  .sky-responsive-container-md .sky-layout-host-fit,
1302
1391
  .sky-responsive-container-md .sky-layout-host-list,
1303
1392
  .sky-responsive-container-lg .sky-layout-host-fit,
1304
1393
  .sky-responsive-container-lg .sky-layout-host-list {
1305
- --sky-layout-host-header-spacing: 20px;
1306
- --sky-layout-host-content-spacing: 0 20px;
1394
+ --sky-layout-host-header-spacing: var(
1395
+ --sky-override-page-header-fit-list-spacing-sm,
1396
+ var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
1397
+ var(--sky-space-inset-sunk-bottom-l)
1398
+ var(--sky-space-inset-sunk-left-l)
1399
+ );
1400
+ --sky-layout-host-content-spacing: var(
1401
+ --sky-override-page-content-fit-list-spacing-sm,
1402
+ var(--sky-space-inset-horizontal-top-xl)
1403
+ var(--sky-space-inset-horizontal-right-xl)
1404
+ var(--sky-space-inset-horizontal-bottom-xl)
1405
+ var(--sky-space-inset-horizontal-left-xl)
1406
+ );
1307
1407
  }
1308
1408
  .sky-responsive-container-sm .sky-layout-host-tabs,
1309
1409
  .sky-responsive-container-md .sky-layout-host-tabs,
1310
1410
  .sky-responsive-container-lg .sky-layout-host-tabs {
1311
- --sky-layout-host-header-spacing: 20px;
1312
- --sky-layout-host-tab-content-spacing: 20px;
1313
- }
1314
-
1315
- @media (min-width: 768px) {
1316
- .sky-theme-modern .sky-layout-host-blocks {
1317
- --sky-layout-host-header-spacing: 30px 30px 0 30px;
1318
- --sky-layout-host-content-spacing: 30px;
1319
- }
1320
- .sky-theme-modern .sky-layout-host-fit, .sky-theme-modern .sky-layout-host-list, .sky-theme-modern .sky-layout-host-tabs {
1321
- --sky-layout-host-header-spacing: 30px 30px 20px 30px;
1322
- }
1323
- .sky-theme-modern .sky-layout-host-fit, .sky-theme-modern .sky-layout-host-list {
1324
- --sky-layout-host-content-spacing: 0 30px;
1325
- }
1326
- .sky-theme-modern .sky-layout-host-tabs {
1327
- --sky-layout-host-tab-content-spacing: var(--sky-space-inset-tabs-xl);
1328
- }
1329
- }
1330
- .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-blocks,
1331
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-blocks,
1332
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-blocks {
1333
- --sky-layout-host-header-spacing: 30px 30px 0 30px;
1334
- --sky-layout-host-content-spacing: 30px;
1335
- }
1336
- .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-fit, .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-list, .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-tabs,
1337
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-fit,
1338
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-list,
1339
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-tabs,
1340
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-fit,
1341
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-list,
1342
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-tabs {
1343
- --sky-layout-host-header-spacing: 30px 30px 20px 30px;
1344
- }
1345
- .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-fit, .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-list,
1346
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-fit,
1347
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-list,
1348
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-fit,
1349
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-list {
1350
- --sky-layout-host-content-spacing: 0 30px;
1351
- }
1352
- .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-tabs,
1353
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-tabs,
1354
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-tabs {
1355
- --sky-layout-host-tab-content-spacing: var(--sky-space-inset-tabs-xl);
1411
+ --sky-layout-host-header-spacing: var(
1412
+ --sky-override-page-header-tabs-spacing-sm,
1413
+ var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
1414
+ var(--sky-space-inset-sunk-bottom-l)
1415
+ var(--sky-space-inset-sunk-left-l)
1416
+ );
1417
+ --sky-layout-host-tab-content-spacing: var(
1418
+ --sky-override-page-content-tabs-spacing-sm,
1419
+ var(--sky-space-inset-sunk-left-l)
1420
+ );
1356
1421
  }
1357
1422
 
1358
1423
  .sky-modal-body-open {
@@ -1657,6 +1722,9 @@ body:not(.sky-theme-modern) {
1657
1722
  flex: 1 0 35px;
1658
1723
  font-size: 18px;
1659
1724
  }
1725
+ .sky-switch:not(.sky-theme-modern *) .sky-switch-control.sky-switch-control-icon i {
1726
+ justify-content: center;
1727
+ }
1660
1728
  .sky-switch:not(.sky-theme-modern *) .sky-switch-control::before {
1661
1729
  content: "";
1662
1730
  }
@@ -1809,6 +1877,14 @@ mark.sky-highlight-mark {
1809
1877
  outline: none;
1810
1878
  }
1811
1879
 
1880
+ .sky-i-path-1 {
1881
+ fill: var(--sky-icon-svg-color-input, currentColor);
1882
+ }
1883
+
1884
+ .sky-i-path-2 {
1885
+ fill: var(--sky-icon-svg-path-2-color-input, #fff);
1886
+ }
1887
+
1812
1888
  .sky-page-heading {
1813
1889
  font-family: "BLKB Sans Condensed", "Helvetica Neue Condensed", "Arial Narrow";
1814
1890
  color: var(--sky-text-color-default);
package/css/themes/modern/styles.css CHANGED
@@ -53,6 +53,7 @@
53
53
  --modern-size-100: 100px;
54
54
  --modern-size-96: 96px;
55
55
  --modern-size-80: 80px;
56
+ --modern-size-65: 65px;
56
57
  --modern-size-64: 64px;
57
58
  --modern-size-48: 48px;
58
59
  --modern-size-44: 44px;
@@ -62,8 +63,10 @@
62
63
  --modern-size-26: 26px;
63
64
  --modern-size-24: 24px;
64
65
  --modern-size-20: 20px;
66
+ --modern-size-19: 19px;
65
67
  --modern-size-16: 16px;
66
68
  --modern-size-15: 15px;
69
+ --modern-size-14: 14px;
67
70
  --modern-size-13: 13px;
68
71
  --modern-size-12: 12px;
69
72
  --modern-size-10: 10px;
@@ -170,6 +173,7 @@
170
173
  --sky-color-border-danger: var(--modern-color-red-50);
171
174
  --sky-color-border-selected_soft: var(--modern-color-blue-30);
172
175
  --sky-color-border-selected: var(--modern-color-blue-74);
176
+ --sky-color-background-thumbnail_matte: var(--modern-color-white);
173
177
  --sky-color-background-file_drop: var(--modern-color-gray-05);
174
178
  --sky-color-background-list-disabled: var(--modern-color-gray-07);
175
179
  --sky-color-background-list-focus: var(--modern-color-transparent);
@@ -253,6 +257,7 @@
253
257
  --sky-border-radius-pill: var(--modern-border-radius-pill);
254
258
  --sky-border-radius-m: var(--modern-border-radius-md);
255
259
  --sky-border-radius-s: var(--modern-border-radius-md);
260
+ --sky-border-radius-xs: var(--modern-border-radius-0);
256
261
  --sky-border-radius-0: var(--modern-border-radius-0);
257
262
  --sky-border-width-separator-row: var(--modern-size-1);
258
263
  --sky-border-width-separator-light: var(--modern-size-1);
@@ -278,8 +283,12 @@
278
283
  --sky-border-width-text_highlight: var(--modern-size-1);
279
284
  --sky-border-width-divider: var(--modern-size-1);
280
285
  --sky-border-width-accent: var(--modern-size-7);
286
+ --sky-size-avatar-l: var(--modern-size-100);
287
+ --sky-size-avatar-m: var(--modern-size-65);
288
+ --sky-size-avatar-s: var(--modern-size-32);
281
289
  --sky-size-thumbnail-l: var(--modern-size-100);
282
290
  --sky-size-max_width-overlay_message: var(--modern-size-236);
291
+ --sky-size-width-resize_handle: var(--modern-size-14);
283
292
  --sky-size-width-viewport-smallest: var(--modern-size-296);
284
293
  --sky-size-illustration-xl: var(--modern-size-96);
285
294
  --sky-size-illustration-l: var(--modern-size-80);
@@ -338,6 +347,8 @@
338
347
  --sky-space-gap-action_group-m: var(--modern-size-10);
339
348
  --sky-space-gap-action_group-s: var(--modern-size-5);
340
349
  --sky-space-gap-action_group-0: 0rem;
350
+ --sky-space-inset-thumb: var(--modern-size-1);
351
+ --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
341
352
  --sky-space-inset-horizontal-left-xl: var(--modern-space-xl);
342
353
  --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
343
354
  --sky-space-inset-horizontal-left-m: var(--modern-space-md);
@@ -370,12 +381,17 @@
370
381
  --sky-space-inset-vertical-top-l: var(--modern-space-lg);
371
382
  --sky-space-inset-vertical-top-m: var(--modern-space-md);
372
383
  --sky-space-inset-vertical-top-s: var(--modern-space-s);
373
- --sky-space-inset-thumb: var(--modern-size-1);
374
- --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
384
+ --sky-space-inset-thumbnail_matte-l: var(--modern-size-5);
385
+ --sky-space-inset-thumbnail_matte-m: var(--modern-size-3);
386
+ --sky-space-inset-thumbnail_matte-s: var(--modern-size-2);
375
387
  --sky-space-inset-tabs-xl: var(--modern-space-xl);
376
388
  --sky-space-inset-tabs-l: var(--modern-space-lg);
377
389
  --sky-space-inset-tabs-m: var(--modern-space-md);
378
390
  --sky-space-inset-tabs-s: var(--modern-space-s);
391
+ --sky-space-inset-sunk-left-l: var(--modern-space-xl);
392
+ --sky-space-inset-sunk-bottom-l: var(--modern-space-lg);
393
+ --sky-space-inset-sunk-right-l: var(--modern-space-xl);
394
+ --sky-space-inset-sunk-top-l: var(--modern-space-xl);
379
395
  --sky-space-inset-pillarbox-2_3-left-l: var(--modern-size-30);
380
396
  --sky-space-inset-pillarbox-2_3-left-m: var(--modern-size-15);
381
397
  --sky-space-inset-pillarbox-2_3-bottom-l: var(--modern-size-20);
@@ -408,10 +424,18 @@
408
424
  --sky-space-inset-pillarbox-1_4-right-xs: var(--modern-size-5);
409
425
  --sky-space-inset-pillarbox-1_4-top-s: var(--modern-size-4);
410
426
  --sky-space-inset-pillarbox-1_4-top-xs: var(--modern-size-1);
411
- --sky-space-inset-letterbox-left-m: var(--modern-space-s);
412
- --sky-space-inset-letterbox-bottom-m: var(--modern-space-lg);
413
- --sky-space-inset-letterbox-right-m: var(--modern-space-s);
414
- --sky-space-inset-letterbox-top-m: var(--modern-space-lg);
427
+ --sky-space-inset-letterbox-2_3-left-m: var(--modern-space-s);
428
+ --sky-space-inset-letterbox-2_3-bottom-m: var(--modern-space-md);
429
+ --sky-space-inset-letterbox-2_3-right-m: var(--modern-space-s);
430
+ --sky-space-inset-letterbox-2_3-top-m: var(--modern-space-md);
431
+ --sky-space-inset-letterbox-1_2-left-m: var(--modern-space-s);
432
+ --sky-space-inset-letterbox-1_2-bottom-m: var(--modern-space-lg);
433
+ --sky-space-inset-letterbox-1_2-right-m: var(--modern-space-s);
434
+ --sky-space-inset-letterbox-1_2-top-m: var(--modern-space-lg);
435
+ --sky-space-inset-letterbox-1_3-left-m: var(--modern-space-s);
436
+ --sky-space-inset-letterbox-1_3-bottom-m: var(--modern-space-xl);
437
+ --sky-space-inset-letterbox-1_3-right-m: var(--modern-space-s);
438
+ --sky-space-inset-letterbox-1_3-top-m: var(--modern-space-xl);
415
439
  --sky-space-inset-input_label-bottom-m: var(--modern-size-2);
416
440
  --sky-space-inset-input_label-top-m: var(--modern-size-6);
417
441
  --sky-space-inset-input-left-m: var(--modern-size-15);
@@ -1425,6 +1449,9 @@
1425
1449
  flex: 1 0 var(--sky-override-icon-switch-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
1426
1450
  font-size: var(--sky-override-icon-switch-font-size, var(--sky-size-icon-m));
1427
1451
  }
1452
+ .sky-theme-modern .sky-switch .sky-switch-control.sky-switch-control-icon i {
1453
+ justify-content: center;
1454
+ }
1428
1455
  .sky-theme-modern .sky-switch .sky-switch-control::before {
1429
1456
  content: "";
1430
1457
  }
@@ -1495,6 +1522,7 @@
1495
1522
 
1496
1523
  html:has(.sky-theme-brand-blackbaud) {
1497
1524
  font-size: initial;
1525
+ line-height: 1.4285714286;
1498
1526
  }
1499
1527
 
1500
1528
  .sky-theme-modern {
@@ -1507,7 +1535,7 @@ html:has(.sky-theme-brand-blackbaud) {
1507
1535
  }
1508
1536
 
1509
1537
  .sky-theme-modern form {
1510
- font-size: var(--sky-override-font-size, initial);
1538
+ font-size: var(--sky-font-size-body-m);
1511
1539
  font-weight: var(--sky-override-form-font-weight, initial);
1512
1540
  transition: background-color 150ms, color 150ms;
1513
1541
  }