@skyux/theme 12.19.1 → 12.21.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.
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/8.0.0/assets/css/skyux-icons.min.css");
2
+ @import url("https://sky.blackbaudcdn.net/static/skyux-icons/8.2.0/assets/css/skyux-icons.min.css");
3
3
  /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
4
4
  /* Document
5
5
  ========================================================================== */
@@ -1082,13 +1082,6 @@ body:not(.sky-theme-modern) {
1082
1082
 
1083
1083
  .sky-layout-host-blocks, .sky-layout-host-list, .sky-layout-host-tabs {
1084
1084
  display: block;
1085
- --sky-layout-host-links-spacing: var(
1086
- --sky-override-page-content-with-links-spacing-xs,
1087
- var(--sky-space-inset-letterbox-1_3-top-m)
1088
- var(--sky-space-inset-letterbox-1_3-right-m)
1089
- var(--sky-space-inset-letterbox-1_3-bottom-m)
1090
- var(--sky-space-inset-letterbox-1_3-left-m)
1091
- );
1092
1085
  }
1093
1086
  .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 {
1094
1087
  margin-bottom: 0;
@@ -1124,35 +1117,87 @@ body:not(.sky-theme-modern) {
1124
1117
  --sky-layout-host-content-position: relative;
1125
1118
  --sky-layout-host-links-display: none;
1126
1119
  }
1127
- .sky-layout-host-blocks, .sky-layout-host-list, .sky-layout-host-fit, .sky-layout-host-tabs {
1120
+ .sky-layout-host-blocks {
1121
+ --sky-layout-host-content-spacing: var(
1122
+ --sky-override-page-content-blocks-spacing-xs,
1123
+ var(--sky-comp-page-content-blocks-space-inset-top)
1124
+ var(--sky-comp-page-content-blocks-space-inset-right)
1125
+ var(--sky-comp-page-content-blocks-space-inset-bottom)
1126
+ var(--sky-comp-page-content-blocks-space-inset-left)
1127
+ );
1128
1128
  --sky-layout-host-header-spacing: var(
1129
1129
  --sky-override-page-header-spacing-xs,
1130
- var(--sky-space-inset-letterbox-1_2-top-m)
1131
- var(--sky-space-inset-letterbox-1_2-right-m)
1132
- var(--sky-space-inset-letterbox-1_2-bottom-m)
1133
- var(--sky-space-inset-letterbox-1_2-left-m)
1130
+ var(--sky-comp-page-header-blocks-space-inset-top)
1131
+ var(--sky-comp-page-header-blocks-space-inset-right)
1132
+ var(--sky-comp-page-header-blocks-space-inset-bottom)
1133
+ var(--sky-comp-page-header-blocks-space-inset-left)
1134
+ );
1135
+ --sky-layout-host-links-spacing: var(
1136
+ --sky-override-page-content-with-links-spacing-xs,
1137
+ var(--sky-comp-page-links-blocks-space-inset-top)
1138
+ var(--sky-comp-page-links-blocks-space-inset-right)
1139
+ var(--sky-comp-page-links-blocks-space-inset-bottom)
1140
+ var(--sky-comp-page-links-blocks-space-inset-left)
1134
1141
  );
1135
1142
  }
1136
- .sky-layout-host-blocks {
1143
+ .sky-layout-host-fit {
1137
1144
  --sky-layout-host-content-spacing: var(
1138
- --sky-override-page-content-blocks-spacing-xs,
1139
- var(--sky-space-inset-balanced-s)
1145
+ --sky-override-page-content-fit-list-spacing-xs,
1146
+ var(--sky-comp-page-content-fit-space-inset-top)
1147
+ var(--sky-comp-page-content-fit-space-inset-right)
1148
+ var(--sky-comp-page-content-fit-space-inset-bottom)
1149
+ var(--sky-comp-page-content-fit-space-inset-left)
1150
+ );
1151
+ --sky-layout-host-header-spacing: var(
1152
+ --sky-override-page-header-spacing-xs,
1153
+ var(--sky-comp-page-header-fit-space-inset-top)
1154
+ var(--sky-comp-page-header-fit-space-inset-right)
1155
+ var(--sky-comp-page-header-fit-space-inset-bottom)
1156
+ var(--sky-comp-page-header-fit-space-inset-left)
1140
1157
  );
1141
1158
  }
1142
- .sky-layout-host-fit, .sky-layout-host-list {
1159
+ .sky-layout-host-list {
1143
1160
  --sky-layout-host-content-spacing: var(
1144
1161
  --sky-override-page-content-fit-list-spacing-xs,
1145
- var(--sky-space-inset-horizontal-top-s)
1146
- var(--sky-space-inset-horizontal-right-s)
1147
- var(--sky-space-inset-horizontal-bottom-s)
1148
- var(--sky-space-inset-horizontal-left-s)
1162
+ var(--sky-comp-page-content-list-space-inset-top)
1163
+ var(--sky-comp-page-content-list-space-inset-right)
1164
+ var(--sky-comp-page-content-list-space-inset-bottom)
1165
+ var(--sky-comp-page-content-list-space-inset-left)
1166
+ );
1167
+ --sky-layout-host-links-spacing: var(
1168
+ --sky-override-page-content-with-links-spacing-xs,
1169
+ var(--sky-comp-page-links-list-space-inset-top)
1170
+ var(--sky-comp-page-links-list-space-inset-right)
1171
+ var(--sky-comp-page-links-list-space-inset-bottom)
1172
+ var(--sky-comp-page-links-list-space-inset-left)
1173
+ );
1174
+ --sky-layout-host-header-spacing: var(
1175
+ --sky-override-page-header-spacing-xs,
1176
+ var(--sky-comp-page-header-list-space-inset-top)
1177
+ var(--sky-comp-page-header-list-space-inset-right)
1178
+ var(--sky-comp-page-header-list-space-inset-bottom)
1179
+ var(--sky-comp-page-header-list-space-inset-left)
1149
1180
  );
1150
1181
  }
1151
1182
  .sky-layout-host-tabs {
1152
1183
  --sky-layout-host-content-spacing: 0;
1153
1184
  --sky-layout-host-tab-content-spacing: var(
1154
1185
  --sky-override-tabset-padding-xs-breakpoint,
1155
- var(--sky-space-inset-letterbox-1_2-left-m)
1186
+ var(--sky-comp-page-tabset-tabs-space-inset-left)
1187
+ );
1188
+ --sky-layout-host-links-spacing: var(
1189
+ --sky-override-page-content-with-links-spacing-xs,
1190
+ var(--sky-comp-page-links-tabs-space-inset-top)
1191
+ var(--sky-comp-page-links-tabs-space-inset-right)
1192
+ var(--sky-comp-page-links-tabs-space-inset-bottom)
1193
+ var(--sky-comp-page-links-tabs-space-inset-left)
1194
+ );
1195
+ --sky-layout-host-header-spacing: var(
1196
+ --sky-override-page-header-spacing-xs,
1197
+ var(--sky-comp-page-header-tabs-space-inset-top)
1198
+ var(--sky-comp-page-header-tabs-space-inset-right)
1199
+ var(--sky-comp-page-header-tabs-space-inset-bottom)
1200
+ var(--sky-comp-page-header-tabs-space-inset-left)
1156
1201
  );
1157
1202
  }
1158
1203
  .sky-layout-host-none {
@@ -1222,41 +1267,62 @@ body:not(.sky-theme-modern) {
1222
1267
  .sky-layout-host-blocks {
1223
1268
  --sky-layout-host-header-spacing: var(
1224
1269
  --sky-override-page-header-blocks-spacing-sm,
1225
- var(--sky-space-inset-bottomless-top-xl)
1226
- var(--sky-space-inset-bottomless-right-xl)
1227
- var(--sky-space-inset-bottomless-bottom-xl)
1228
- var(--sky-space-inset-bottomless-left-xl)
1270
+ var(--sky-comp-page-header-blocks-space-inset-top)
1271
+ var(--sky-comp-page-header-blocks-space-inset-right)
1272
+ var(--sky-comp-page-header-blocks-space-inset-bottom)
1273
+ var(--sky-comp-page-header-blocks-space-inset-left)
1229
1274
  );
1230
1275
  --sky-layout-host-content-spacing: var(
1231
1276
  --sky-override-page-content-blocks-spacing-sm,
1232
- var(--sky-space-inset-balanced-xl)
1277
+ var(--sky-comp-page-content-blocks-space-inset-top)
1278
+ var(--sky-comp-page-content-blocks-space-inset-right)
1279
+ var(--sky-comp-page-content-blocks-space-inset-bottom)
1280
+ var(--sky-comp-page-content-blocks-space-inset-left)
1233
1281
  );
1234
1282
  }
1235
- .sky-layout-host-fit, .sky-layout-host-list {
1283
+ .sky-layout-host-fit {
1236
1284
  --sky-layout-host-header-spacing: var(
1237
1285
  --sky-override-page-header-fit-list-spacing-sm,
1238
- var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
1239
- var(--sky-space-inset-sunk-bottom-l)
1240
- var(--sky-space-inset-sunk-left-l)
1286
+ var(--sky-comp-page-header-fit-space-inset-top)
1287
+ var(--sky-comp-page-header-fit-space-inset-right)
1288
+ var(--sky-comp-page-header-fit-space-inset-bottom)
1289
+ var(--sky-comp-page-header-fit-space-inset-left)
1241
1290
  );
1242
1291
  --sky-layout-host-content-spacing: var(
1243
1292
  --sky-override-page-content-fit-list-spacing-sm,
1244
- var(--sky-space-inset-horizontal-top-xl)
1245
- var(--sky-space-inset-horizontal-right-xl)
1246
- var(--sky-space-inset-horizontal-bottom-xl)
1247
- var(--sky-space-inset-horizontal-left-xl)
1293
+ var(--sky-comp-page-content-fit-space-inset-top)
1294
+ var(--sky-comp-page-content-fit-space-inset-right)
1295
+ var(--sky-comp-page-content-fit-space-inset-bottom)
1296
+ var(--sky-comp-page-content-fit-space-inset-left)
1297
+ );
1298
+ }
1299
+ .sky-layout-host-list {
1300
+ --sky-layout-host-header-spacing: var(
1301
+ --sky-override-page-header-fit-list-spacing-sm,
1302
+ var(--sky-comp-page-header-list-space-inset-top)
1303
+ var(--sky-comp-page-header-list-space-inset-right)
1304
+ var(--sky-comp-page-header-list-space-inset-bottom)
1305
+ var(--sky-comp-page-header-list-space-inset-left)
1306
+ );
1307
+ --sky-layout-host-content-spacing: var(
1308
+ --sky-override-page-content-fit-list-spacing-sm,
1309
+ var(--sky-comp-page-content-list-space-inset-top)
1310
+ var(--sky-comp-page-content-list-space-inset-right)
1311
+ var(--sky-comp-page-content-list-space-inset-bottom)
1312
+ var(--sky-comp-page-content-list-space-inset-left)
1248
1313
  );
1249
1314
  }
1250
1315
  .sky-layout-host-tabs {
1251
1316
  --sky-layout-host-header-spacing: var(
1252
1317
  --sky-override-page-header-tabs-spacing-sm,
1253
- var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
1254
- var(--sky-space-inset-sunk-bottom-l)
1255
- var(--sky-space-inset-sunk-left-l)
1318
+ var(--sky-comp-page-header-tabs-space-inset-top)
1319
+ var(--sky-comp-page-header-tabs-space-inset-right)
1320
+ var(--sky-comp-page-header-tabs-space-inset-bottom)
1321
+ var(--sky-comp-page-header-tabs-space-inset-left)
1256
1322
  );
1257
1323
  --sky-layout-host-tab-content-spacing: var(
1258
1324
  --sky-override-page-content-tabs-spacing-sm,
1259
- var(--sky-space-inset-sunk-left-l)
1325
+ var(--sky-comp-page-tabset-tabs-space-inset-left)
1260
1326
  );
1261
1327
  }
1262
1328
  }
@@ -1396,33 +1462,53 @@ body:not(.sky-theme-modern) {
1396
1462
  .sky-responsive-container-lg .sky-layout-host-blocks {
1397
1463
  --sky-layout-host-header-spacing: var(
1398
1464
  --sky-override-page-header-blocks-spacing-sm,
1399
- var(--sky-space-inset-bottomless-top-xl)
1400
- var(--sky-space-inset-bottomless-right-xl)
1401
- var(--sky-space-inset-bottomless-bottom-xl)
1402
- var(--sky-space-inset-bottomless-left-xl)
1465
+ var(--sky-comp-page-header-blocks-space-inset-top)
1466
+ var(--sky-comp-page-header-blocks-space-inset-right)
1467
+ var(--sky-comp-page-header-blocks-space-inset-bottom)
1468
+ var(--sky-comp-page-header-blocks-space-inset-left)
1403
1469
  );
1404
1470
  --sky-layout-host-content-spacing: var(
1405
1471
  --sky-override-page-content-blocks-spacing-sm,
1406
- var(--sky-space-inset-balanced-xl)
1472
+ var(--sky-comp-page-content-blocks-space-inset-top)
1473
+ var(--sky-comp-page-content-blocks-space-inset-right)
1474
+ var(--sky-comp-page-content-blocks-space-inset-bottom)
1475
+ var(--sky-comp-page-content-blocks-space-inset-left)
1407
1476
  );
1408
1477
  }
1409
- .sky-responsive-container-sm .sky-layout-host-fit, .sky-responsive-container-sm .sky-layout-host-list,
1478
+ .sky-responsive-container-sm .sky-layout-host-fit,
1410
1479
  .sky-responsive-container-md .sky-layout-host-fit,
1480
+ .sky-responsive-container-lg .sky-layout-host-fit {
1481
+ --sky-layout-host-header-spacing: var(
1482
+ --sky-override-page-header-fit-list-spacing-sm,
1483
+ var(--sky-comp-page-header-fit-space-inset-top)
1484
+ var(--sky-comp-page-header-fit-space-inset-right)
1485
+ var(--sky-comp-page-header-fit-space-inset-bottom)
1486
+ var(--sky-comp-page-header-fit-space-inset-left)
1487
+ );
1488
+ --sky-layout-host-content-spacing: var(
1489
+ --sky-override-page-content-fit-list-spacing-sm,
1490
+ var(--sky-comp-page-content-fit-space-inset-top)
1491
+ var(--sky-comp-page-content-fit-space-inset-right)
1492
+ var(--sky-comp-page-content-fit-space-inset-bottom)
1493
+ var(--sky-comp-page-content-fit-space-inset-left)
1494
+ );
1495
+ }
1496
+ .sky-responsive-container-sm .sky-layout-host-list,
1411
1497
  .sky-responsive-container-md .sky-layout-host-list,
1412
- .sky-responsive-container-lg .sky-layout-host-fit,
1413
1498
  .sky-responsive-container-lg .sky-layout-host-list {
1414
1499
  --sky-layout-host-header-spacing: var(
1415
1500
  --sky-override-page-header-fit-list-spacing-sm,
1416
- var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
1417
- var(--sky-space-inset-sunk-bottom-l)
1418
- var(--sky-space-inset-sunk-left-l)
1501
+ var(--sky-comp-page-header-list-space-inset-top)
1502
+ var(--sky-comp-page-header-list-space-inset-right)
1503
+ var(--sky-comp-page-header-list-space-inset-bottom)
1504
+ var(--sky-comp-page-header-list-space-inset-left)
1419
1505
  );
1420
1506
  --sky-layout-host-content-spacing: var(
1421
1507
  --sky-override-page-content-fit-list-spacing-sm,
1422
- var(--sky-space-inset-horizontal-top-xl)
1423
- var(--sky-space-inset-horizontal-right-xl)
1424
- var(--sky-space-inset-horizontal-bottom-xl)
1425
- var(--sky-space-inset-horizontal-left-xl)
1508
+ var(--sky-comp-page-content-list-space-inset-top)
1509
+ var(--sky-comp-page-content-list-space-inset-right)
1510
+ var(--sky-comp-page-content-list-space-inset-bottom)
1511
+ var(--sky-comp-page-content-list-space-inset-left)
1426
1512
  );
1427
1513
  }
1428
1514
  .sky-responsive-container-sm .sky-layout-host-tabs,
@@ -1430,13 +1516,14 @@ body:not(.sky-theme-modern) {
1430
1516
  .sky-responsive-container-lg .sky-layout-host-tabs {
1431
1517
  --sky-layout-host-header-spacing: var(
1432
1518
  --sky-override-page-header-tabs-spacing-sm,
1433
- var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
1434
- var(--sky-space-inset-sunk-bottom-l)
1435
- var(--sky-space-inset-sunk-left-l)
1519
+ var(--sky-comp-page-header-tabs-space-inset-top)
1520
+ var(--sky-comp-page-header-tabs-space-inset-right)
1521
+ var(--sky-comp-page-header-tabs-space-inset-bottom)
1522
+ var(--sky-comp-page-header-tabs-space-inset-left)
1436
1523
  );
1437
1524
  --sky-layout-host-tab-content-spacing: var(
1438
1525
  --sky-override-page-content-tabs-spacing-sm,
1439
- var(--sky-space-inset-sunk-left-l)
1526
+ var(--sky-comp-page-tabset-tabs-space-inset-left)
1440
1527
  );
1441
1528
  }
1442
1529
 
@@ -217,27 +217,6 @@
217
217
  --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
218
218
  }
219
219
 
220
- .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
221
- --sky-color-background-action: var(--bb-color-blue-800);
222
- --sky-color-background-container: var(--bb-color-gray-900);
223
- --sky-color-background-page: var(--bb-color-gray-1100);
224
- --sky-color-border-input-active: var(--bb-color-blue-300);
225
- --sky-color-border-input-base: var(--bb-color-gray-600);
226
- --sky-color-border-input-disabled: var(--bb-color-gray-600);
227
- --sky-color-border-input-error: var(--bb-color-red-600);
228
- --sky-color-border-input-focus: var(--bb-color-blue-300);
229
- --sky-color-border-input-hover: var(--bb-color-blue-300);
230
- --sky-color-border-neutral_soft: var(--bb-color-gray-600);
231
- --sky-color-icon-action: var(--bb-color-blue-300);
232
- --sky-color-icon-inverse: var(--bb-color-black);
233
- --sky-color-text-action: var(--bb-color-blue-300);
234
- --sky-color-text-danger: var(--bb-color-red-600);
235
- --sky-color-text-deemphasized: var(--bb-color-gray-200);
236
- --sky-color-text-default: var(--bb-color-gray-25);
237
- --sky-color-text-heading: var(--bb-color-green-600);
238
- --sky-color-text-inverse: var(--bb-color-black);
239
- }
240
-
241
220
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-compact {
242
221
  --sky-size-icon-xl: var(--bb-size-fluid-125);
243
222
  --sky-space-inset-balanced-l: var(--bb-size-fluid-50);
@@ -259,6 +238,153 @@
259
238
  --sky-type-body-m: var(--bb-font-size-100) sans-serif;
260
239
  }
261
240
 
241
+ .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
242
+ --sky-color-background-action-danger-active: var(--bb-color-red-600);
243
+ --sky-color-background-action-danger-base: var(--bb-color-red-600);
244
+ --sky-color-background-action-danger-disabled: var(--bb-color-gray-700);
245
+ --sky-color-background-action-danger-focus: var(--bb-color-red-600);
246
+ --sky-color-background-action-danger-hover: var(--bb-color-red-600);
247
+ --sky-color-background-action-input-active: var(--bb-color-transparent);
248
+ --sky-color-background-action-input-base: var(--bb-color-blue-900);
249
+ --sky-color-background-action-input-disabled: var(--bb-color-gray-700);
250
+ --sky-color-background-action-input-focus: var(--bb-color-transparent);
251
+ --sky-color-background-action-input-hover: var(--bb-color-transparent);
252
+ --sky-color-background-action-primary-active: var(--bb-color-sky-500);
253
+ --sky-color-background-action-primary-base: var(--bb-color-sky-600);
254
+ --sky-color-background-action-primary-disabled: var(--bb-color-gray-700);
255
+ --sky-color-background-action-primary-focus: var(--bb-color-sky-600);
256
+ --sky-color-background-action-primary-hover: var(--bb-color-sky-600);
257
+ --sky-color-background-action-secondary-active: var(--bb-color-gray-600);
258
+ --sky-color-background-action-secondary-base: var(--bb-color-gray-800);
259
+ --sky-color-background-action-secondary-disabled: var(--bb-color-gray-700);
260
+ --sky-color-background-action-secondary-focus: var(--bb-color-gray-700);
261
+ --sky-color-background-action-secondary-hover: var(--bb-color-gray-700);
262
+ --sky-color-background-action-tertiary-active: var(--bb-color-transparent);
263
+ --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
264
+ --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
265
+ --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
266
+ --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
267
+ --sky-color-background-blocking: var(--bb-color-blocking);
268
+ --sky-color-background-container-base: var(--bb-color-gray-1000);
269
+ --sky-color-background-container-danger: var(--bb-color-red-800);
270
+ --sky-color-background-container-info: var(--bb-color-blue-800);
271
+ --sky-color-background-container-menu: var(--bb-color-gray-900);
272
+ --sky-color-background-container-success: var(--bb-color-green-900);
273
+ --sky-color-background-container-warning: var(--bb-color-yellow-800);
274
+ --sky-color-background-file_drop: var(--bb-color-gray-1000);
275
+ --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
276
+ --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
277
+ --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
278
+ --sky-color-background-icon_matte-success: var(--bb-color-green-700);
279
+ --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
280
+ --sky-color-background-input-base: var(--bb-color-gray-900);
281
+ --sky-color-background-input-disabled: var(--bb-color-gray-700);
282
+ --sky-color-background-list-active: var(--bb-color-transparent);
283
+ --sky-color-background-list-base: var(--bb-color-transparent);
284
+ --sky-color-background-list-disabled: var(--bb-color-gray-50);
285
+ --sky-color-background-list-focus: var(--bb-color-transparent);
286
+ --sky-color-background-list-hover: var(--bb-color-transparent);
287
+ --sky-color-background-nav-active: var(--bb-color-transparent);
288
+ --sky-color-background-nav-base: var(--bb-color-transparent);
289
+ --sky-color-background-nav-disabled: var(--bb-color-gray-50);
290
+ --sky-color-background-nav-focus: var(--bb-color-transparent);
291
+ --sky-color-background-nav-hover: var(--bb-color-transparent);
292
+ --sky-color-background-page: var(--bb-color-gray-1100);
293
+ --sky-color-background-scrim: var(--bb-color-scrim);
294
+ --sky-color-background-selected-danger: var(--bb-color-red-900);
295
+ --sky-color-background-selected-heavy: var(--bb-color-blue-600);
296
+ --sky-color-background-selected-soft: var(--bb-color-blue-900);
297
+ --sky-color-background-selected-success: var(--bb-color-green-900);
298
+ --sky-color-background-selected-warning: var(--bb-color-yellow-900);
299
+ --sky-color-background-text_highlight: var(--bb-color-yellow-800);
300
+ --sky-color-background-thumb-base: var(--bb-color-white);
301
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
302
+ --sky-color-background-thumbnail_matte: var(--bb-color-white);
303
+ --sky-color-border-action-danger-active: var(--bb-color-red-200);
304
+ --sky-color-border-action-danger-base: var(--bb-color-red-600);
305
+ --sky-color-border-action-danger-disabled: var(--bb-color-gray-800);
306
+ --sky-color-border-action-danger-focus: var(--bb-color-red-200);
307
+ --sky-color-border-action-danger-hover: var(--bb-color-red-200);
308
+ --sky-color-border-action-input-active: var(--bb-color-blue-600);
309
+ --sky-color-border-action-input-base: var(--bb-color-blue-400);
310
+ --sky-color-border-action-input-disabled: var(--bb-color-gray-800);
311
+ --sky-color-border-action-input-focus: var(--bb-color-blue-600);
312
+ --sky-color-border-action-input-hover: var(--bb-color-blue-600);
313
+ --sky-color-border-action-primary-active: var(--bb-color-sky-500);
314
+ --sky-color-border-action-primary-base: var(--bb-color-sky-600);
315
+ --sky-color-border-action-primary-disabled: var(--bb-color-gray-800);
316
+ --sky-color-border-action-primary-focus: var(--bb-color-sky-600);
317
+ --sky-color-border-action-primary-hover: var(--bb-color-sky-600);
318
+ --sky-color-border-action-secondary-active: var(--bb-color-sky-500);
319
+ --sky-color-border-action-secondary-base: var(--bb-color-gray-700);
320
+ --sky-color-border-action-secondary-disabled: var(--bb-color-gray-800);
321
+ --sky-color-border-action-secondary-focus: var(--bb-color-sky-600);
322
+ --sky-color-border-action-secondary-hover: var(--bb-color-sky-600);
323
+ --sky-color-border-action-tertiary-active: var(--bb-color-sky-500);
324
+ --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
325
+ --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
326
+ --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
327
+ --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
328
+ --sky-color-border-column_divider: var(--bb-color-blue-400);
329
+ --sky-color-border-container-base: var(--bb-color-blue-900);
330
+ --sky-color-border-danger: var(--bb-color-red-400);
331
+ --sky-color-border-divider: var(--bb-color-gray-800);
332
+ --sky-color-border-elevation: var(--bb-color-gray-800);
333
+ --sky-color-border-info: var(--bb-color-blue-400);
334
+ --sky-color-border-input-active: var(--bb-color-blue-600);
335
+ --sky-color-border-input-base: var(--bb-color-blue-200);
336
+ --sky-color-border-input-disabled: var(--bb-color-gray-400);
337
+ --sky-color-border-input-error: var(--bb-color-red-600);
338
+ --sky-color-border-input-focus: var(--bb-color-blue-600);
339
+ --sky-color-border-input-hover: var(--bb-color-blue-600);
340
+ --sky-color-border-progress_step: var(--bb-color-gray-600);
341
+ --sky-color-border-selected: var(--bb-color-blue-400);
342
+ --sky-color-border-selected_soft: var(--bb-color-blue-500);
343
+ --sky-color-border-separator-dark: var(--bb-color-gray-800);
344
+ --sky-color-border-separator-light: var(--bb-color-gray-700);
345
+ --sky-color-border-separator-row: var(--bb-color-gray-800);
346
+ --sky-color-border-success: var(--bb-color-green-400);
347
+ --sky-color-border-switch-active: var(--bb-color-blue-600);
348
+ --sky-color-border-switch-base: var(--bb-color-blue-500);
349
+ --sky-color-border-switch-disabled: var(--bb-color-gray-400);
350
+ --sky-color-border-switch-error: var(--bb-color-red-600);
351
+ --sky-color-border-switch-focus: var(--bb-color-blue-600);
352
+ --sky-color-border-switch-hover: var(--bb-color-blue-600);
353
+ --sky-color-border-switch-selected-active: var(--bb-color-blue-900);
354
+ --sky-color-border-switch-selected-base: var(--bb-color-transparent);
355
+ --sky-color-border-switch-selected-disabled: var(--bb-color-gray-400);
356
+ --sky-color-border-switch-selected-focus: var(--bb-color-blue-900);
357
+ --sky-color-border-switch-selected-hover: var(--bb-color-blue-900);
358
+ --sky-color-border-text_highlight: var(--bb-color-yellow-600);
359
+ --sky-color-border-warning: var(--bb-color-yellow-400);
360
+ --sky-color-icon-action: var(--bb-color-sky-600);
361
+ --sky-color-icon-danger: var(--bb-color-red-400);
362
+ --sky-color-icon-deemphasized: var(--bb-color-gray-300);
363
+ --sky-color-icon-default: var(--bb-color-gray-25);
364
+ --sky-color-icon-info: var(--bb-color-blue-600);
365
+ --sky-color-icon-inverse: var(--bb-color-gray-1100);
366
+ --sky-color-icon-selected: var(--bb-color-blue-600);
367
+ --sky-color-icon-success: var(--bb-color-green-700);
368
+ --sky-color-icon-warning: var(--bb-color-yellow-600);
369
+ --sky-color-text-action: var(--bb-color-sky-600);
370
+ --sky-color-text-danger: var(--bb-color-red-400);
371
+ --sky-color-text-deemphasized: var(--bb-color-gray-300);
372
+ --sky-color-text-default: var(--bb-color-gray-25);
373
+ --sky-color-text-heading: var(--bb-color-gray-50);
374
+ --sky-color-text-inverse: var(--bb-color-gray-1100);
375
+ --sky-color-text-link_highlighted: var(--bb-color-blue-300);
376
+ --sky-color-text-selected: var(--bb-color-blue-400);
377
+ --sky-elevation-focus: var(--bb-shadow-gray-2);
378
+ --sky-elevation-none: var(--bb-shadow-gray-0);
379
+ --sky-elevation-overflow: var(--bb-shadow-gray-2);
380
+ --sky-elevation-overlay-100: var(--bb-shadow-gray-4);
381
+ --sky-elevation-overlay-200: var(--bb-shadow-gray-8);
382
+ --sky-elevation-overlay-300: var(--bb-shadow-gray-16);
383
+ --sky-elevation-overlay-400: var(--bb-shadow-gray-24);
384
+ --sky-elevation-raised-100: var(--bb-shadow-gray-1);
385
+ --sky-opacity-wait: var(--bb-opacity-600);
386
+ }
387
+
262
388
  .sky-theme-modern.sky-theme-brand-base {
263
389
  --sky-color-background-action-danger-active: var(--bb-color-red-600);
264
390
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
@@ -361,7 +487,6 @@
361
487
  --sky-color-border-progress_step: var(--bb-color-gray-400);
362
488
  --sky-color-border-selected: var(--bb-color-blue-600);
363
489
  --sky-color-border-selected_soft: var(--bb-color-blue-300);
364
- --sky-color-border-separator-dark: var(--bb-color-gray-100);
365
490
  --sky-color-border-separator-light: var(--bb-color-gray-50);
366
491
  --sky-color-border-separator-row: var(--bb-color-gray-50);
367
492
  --sky-color-border-success: var(--bb-color-green-700);
@@ -413,7 +538,7 @@
413
538
  --sky-opacity-wait: var(--bb-opacity-600);
414
539
  }
415
540
 
416
- .sky-theme-modern.sky-theme-brand-base {
541
+ .sky-theme-modern.sky-theme-brand-base, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-xs, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-sm, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-md, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-lg {
417
542
  --sky-font-style-deemphasized-style: italic;
418
543
  --sky-font-style-deemphasized-weight: 400;
419
544
  --sky-font-style-hint-m-style: italic;
@@ -667,9 +792,13 @@
667
792
  --sky-comp-sab-summary-inline-space-inset-right: var(--bb-size-fluid-150);
668
793
  --sky-comp-sab-summary-inline-space-inset-top: var(--bb-size-fluid-50);
669
794
  --sky-comp-search-space-inset-bottom: var(--bb-size-fluid-50);
670
- --sky-comp-search-space-inset-left: var(--bb-size-fluid-100);
671
- --sky-comp-search-space-inset-right: var(--bb-size-fluid-100);
795
+ --sky-comp-search-space-inset-left: var(--bb-size-fluid-50);
796
+ --sky-comp-search-space-inset-right: var(--bb-size-fluid-50);
672
797
  --sky-comp-search-space-inset-top: var(--bb-size-fluid-50);
798
+ --sky-comp-search-space-offset-bottom: var(--bb-size-fluid-25);
799
+ --sky-comp-search-space-offset-left: var(--bb-size-fluid-25);
800
+ --sky-comp-search-space-offset-right: var(--bb-size-fluid-25);
801
+ --sky-comp-search-space-offset-top: var(--bb-size-fluid-25);
673
802
  --sky-comp-selection_box-collapsed-space-inset-bottom: var(--bb-size-fluid-75);
674
803
  --sky-comp-selection_box-collapsed-space-inset-left: var(--bb-size-fluid-75);
675
804
  --sky-comp-selection_box-collapsed-space-inset-right: var(--bb-size-fluid-75);
@@ -686,6 +815,10 @@
686
815
  --sky-comp-tab-horizontal-space-inset-left: var(--bb-size-fluid-75);
687
816
  --sky-comp-tab-horizontal-space-inset-right: var(--bb-size-fluid-75);
688
817
  --sky-comp-tab-horizontal-space-inset-top: var(--bb-size-fluid-50);
818
+ --sky-comp-tab-vertical-content-space-inset-bottom: var(--bb-size-fluid-75);
819
+ --sky-comp-tab-vertical-content-space-inset-left: var(--bb-size-fluid-75);
820
+ --sky-comp-tab-vertical-content-space-inset-right: var(--bb-size-fluid-75);
821
+ --sky-comp-tab-vertical-content-space-inset-top: var(--bb-size-fluid-75);
689
822
  --sky-comp-tab-vertical-group-button-space-inset-bottom: var(--bb-size-fluid-50);
690
823
  --sky-comp-tab-vertical-group-button-space-inset-left: var(--bb-size-fluid-50);
691
824
  --sky-comp-tab-vertical-group-button-space-inset-right: var(--bb-size-fluid-50);
@@ -738,7 +871,7 @@
738
871
  --sky-comp-toast-space-inset-left: var(--bb-size-fluid-75);
739
872
  --sky-comp-toast-space-inset-right: var(--bb-size-fluid-75);
740
873
  --sky-comp-toast-space-inset-top: var(--bb-size-fluid-75);
741
- --sky-comp-toaster-space-inset-bottom: var(--bb-size-0);
874
+ --sky-comp-toaster-space-inset-bottom: var(--bb-size-fluid-150);
742
875
  --sky-comp-toaster-space-inset-left: var(--bb-size-fluid-150);
743
876
  --sky-comp-toaster-space-inset-right: var(--bb-size-fluid-150);
744
877
  --sky-comp-toaster-space-inset-top: var(--bb-size-fluid-150);
@@ -1062,6 +1195,157 @@
1062
1195
  --sky-type-input-label: var(--sky-font-style-input-label) var(--sky-font-size-input-label)/var(--sky-font-line_height-input-label) var(--sky-font-family-primary);
1063
1196
  }
1064
1197
 
1198
+ @media (min-width: 768px) {
1199
+ .sky-theme-modern.sky-theme-brand-base {
1200
+ --sky-comp-modal-fullscreen-space-offset-bottom: var(--bb-size-fixed-75);
1201
+ --sky-comp-modal-fullscreen-space-offset-left: var(--bb-size-fixed-75);
1202
+ --sky-comp-modal-fullscreen-space-offset-right: var(--bb-size-fixed-75);
1203
+ --sky-comp-modal-fullscreen-space-offset-top: var(--bb-size-fixed-75);
1204
+ --sky-comp-modal-space-offset-bottom: var(--bb-size-fixed-100);
1205
+ --sky-comp-modal-space-offset-left: var(--bb-size-fixed-100);
1206
+ --sky-comp-modal-space-offset-right: var(--bb-size-fixed-100);
1207
+ --sky-comp-modal-space-offset-top: var(--bb-size-fixed-100);
1208
+ --sky-comp-page-content-blocks-space-inset-bottom: var(--bb-size-fluid-150);
1209
+ --sky-comp-page-content-blocks-space-inset-left: var(--bb-size-fluid-150);
1210
+ --sky-comp-page-content-blocks-space-inset-right: var(--bb-size-fluid-150);
1211
+ --sky-comp-page-content-blocks-space-inset-top: var(--bb-size-fluid-150);
1212
+ --sky-comp-page-content-fit-space-inset-bottom: var(--bb-size-0);
1213
+ --sky-comp-page-content-fit-space-inset-left: var(--bb-size-fluid-150);
1214
+ --sky-comp-page-content-fit-space-inset-right: var(--bb-size-fluid-150);
1215
+ --sky-comp-page-content-fit-space-inset-top: var(--bb-size-0);
1216
+ --sky-comp-page-content-list-space-inset-bottom: var(--bb-size-0);
1217
+ --sky-comp-page-content-list-space-inset-left: var(--bb-size-fluid-150);
1218
+ --sky-comp-page-content-list-space-inset-right: var(--bb-size-fluid-150);
1219
+ --sky-comp-page-content-list-space-inset-top: var(--bb-size-0);
1220
+ --sky-comp-page-content-tabs-space-inset-bottom: var(--bb-size-0);
1221
+ --sky-comp-page-content-tabs-space-inset-left: var(--bb-size-0);
1222
+ --sky-comp-page-content-tabs-space-inset-right: var(--bb-size-0);
1223
+ --sky-comp-page-content-tabs-space-inset-top: var(--bb-size-0);
1224
+ --sky-comp-page-header-blocks-space-inset-bottom: var(--bb-size-0);
1225
+ --sky-comp-page-header-blocks-space-inset-left: var(--bb-size-fluid-150);
1226
+ --sky-comp-page-header-blocks-space-inset-right: var(--bb-size-fluid-150);
1227
+ --sky-comp-page-header-blocks-space-inset-top: var(--bb-size-fluid-150);
1228
+ --sky-comp-page-header-fit-space-inset-bottom: var(--bb-size-fluid-100);
1229
+ --sky-comp-page-header-fit-space-inset-left: var(--bb-size-fluid-150);
1230
+ --sky-comp-page-header-fit-space-inset-right: var(--bb-size-fluid-150);
1231
+ --sky-comp-page-header-fit-space-inset-top: var(--bb-size-fluid-150);
1232
+ --sky-comp-page-header-list-space-inset-bottom: var(--bb-size-fluid-100);
1233
+ --sky-comp-page-header-list-space-inset-left: var(--bb-size-fluid-150);
1234
+ --sky-comp-page-header-list-space-inset-right: var(--bb-size-fluid-150);
1235
+ --sky-comp-page-header-list-space-inset-top: var(--bb-size-fluid-150);
1236
+ --sky-comp-page-header-tabs-space-inset-bottom: var(--bb-size-fluid-100);
1237
+ --sky-comp-page-header-tabs-space-inset-left: var(--bb-size-fluid-150);
1238
+ --sky-comp-page-header-tabs-space-inset-right: var(--bb-size-fluid-150);
1239
+ --sky-comp-page-header-tabs-space-inset-top: var(--bb-size-fluid-150);
1240
+ --sky-comp-page-links-blocks-space-inset-bottom: var(--bb-size-fluid-150);
1241
+ --sky-comp-page-links-blocks-space-inset-left: var(--bb-size-fluid-150);
1242
+ --sky-comp-page-links-blocks-space-inset-right: var(--bb-size-fluid-150);
1243
+ --sky-comp-page-links-blocks-space-inset-top: var(--bb-size-fluid-150);
1244
+ --sky-comp-page-links-list-space-inset-bottom: var(--bb-size-fluid-150);
1245
+ --sky-comp-page-links-list-space-inset-left: var(--bb-size-fluid-150);
1246
+ --sky-comp-page-links-list-space-inset-right: var(--bb-size-fluid-150);
1247
+ --sky-comp-page-links-list-space-inset-top: var(--bb-size-fluid-150);
1248
+ --sky-comp-page-links-tabs-space-inset-bottom: var(--bb-size-fluid-150);
1249
+ --sky-comp-page-links-tabs-space-inset-left: var(--bb-size-fluid-150);
1250
+ --sky-comp-page-links-tabs-space-inset-right: var(--bb-size-fluid-150);
1251
+ --sky-comp-page-links-tabs-space-inset-top: var(--bb-size-fluid-150);
1252
+ --sky-comp-page-tabset-tabs-space-inset-bottom: var(--bb-size-0);
1253
+ --sky-comp-page-tabset-tabs-space-inset-left: var(--bb-size-fluid-150);
1254
+ --sky-comp-page-tabset-tabs-space-inset-right: var(--bb-size-0);
1255
+ --sky-comp-page-tabset-tabs-space-inset-top: var(--bb-size-0);
1256
+ --sky-comp-search-space-inset-bottom: var(--bb-size-fluid-50);
1257
+ --sky-comp-search-space-inset-left: var(--bb-size-fluid-50);
1258
+ --sky-comp-search-space-inset-right: var(--bb-size-fluid-50);
1259
+ --sky-comp-search-space-inset-top: var(--bb-size-fluid-50);
1260
+ --sky-comp-tab-vertical-content-space-inset-bottom: var(--bb-size-fluid-50);
1261
+ --sky-comp-tab-vertical-content-space-inset-left: var(--bb-size-fluid-75);
1262
+ --sky-comp-tab-vertical-content-space-inset-right: var(--bb-size-fluid-75);
1263
+ --sky-comp-tab-vertical-content-space-inset-top: var(--bb-size-fluid-50);
1264
+ --sky-comp-tile-dashboard-column-space-inset-bottom: var(--bb-size-0);
1265
+ --sky-comp-tile-dashboard-column-space-inset-left: var(--bb-size-fluid-75);
1266
+ --sky-comp-tile-dashboard-column-space-inset-right: var(--bb-size-fluid-75);
1267
+ --sky-comp-tile-dashboard-column-space-inset-top: var(--bb-size-0);
1268
+ --sky-comp-tile-dashboard-space-inset-bottom: var(--bb-size-0);
1269
+ --sky-comp-tile-dashboard-space-inset-left: var(--bb-size-fluid-50);
1270
+ --sky-comp-tile-dashboard-space-inset-right: var(--bb-size-fluid-50);
1271
+ --sky-comp-tile-dashboard-space-inset-top: var(--bb-size-0);
1272
+ }
1273
+ }
1274
+ .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-sm, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-md, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-lg {
1275
+ --sky-comp-modal-fullscreen-space-offset-bottom: var(--bb-size-fixed-75);
1276
+ --sky-comp-modal-fullscreen-space-offset-left: var(--bb-size-fixed-75);
1277
+ --sky-comp-modal-fullscreen-space-offset-right: var(--bb-size-fixed-75);
1278
+ --sky-comp-modal-fullscreen-space-offset-top: var(--bb-size-fixed-75);
1279
+ --sky-comp-modal-space-offset-bottom: var(--bb-size-fixed-100);
1280
+ --sky-comp-modal-space-offset-left: var(--bb-size-fixed-100);
1281
+ --sky-comp-modal-space-offset-right: var(--bb-size-fixed-100);
1282
+ --sky-comp-modal-space-offset-top: var(--bb-size-fixed-100);
1283
+ --sky-comp-page-content-blocks-space-inset-bottom: var(--bb-size-fluid-150);
1284
+ --sky-comp-page-content-blocks-space-inset-left: var(--bb-size-fluid-150);
1285
+ --sky-comp-page-content-blocks-space-inset-right: var(--bb-size-fluid-150);
1286
+ --sky-comp-page-content-blocks-space-inset-top: var(--bb-size-fluid-150);
1287
+ --sky-comp-page-content-fit-space-inset-bottom: var(--bb-size-0);
1288
+ --sky-comp-page-content-fit-space-inset-left: var(--bb-size-fluid-150);
1289
+ --sky-comp-page-content-fit-space-inset-right: var(--bb-size-fluid-150);
1290
+ --sky-comp-page-content-fit-space-inset-top: var(--bb-size-0);
1291
+ --sky-comp-page-content-list-space-inset-bottom: var(--bb-size-0);
1292
+ --sky-comp-page-content-list-space-inset-left: var(--bb-size-fluid-150);
1293
+ --sky-comp-page-content-list-space-inset-right: var(--bb-size-fluid-150);
1294
+ --sky-comp-page-content-list-space-inset-top: var(--bb-size-0);
1295
+ --sky-comp-page-content-tabs-space-inset-bottom: var(--bb-size-0);
1296
+ --sky-comp-page-content-tabs-space-inset-left: var(--bb-size-0);
1297
+ --sky-comp-page-content-tabs-space-inset-right: var(--bb-size-0);
1298
+ --sky-comp-page-content-tabs-space-inset-top: var(--bb-size-0);
1299
+ --sky-comp-page-header-blocks-space-inset-bottom: var(--bb-size-0);
1300
+ --sky-comp-page-header-blocks-space-inset-left: var(--bb-size-fluid-150);
1301
+ --sky-comp-page-header-blocks-space-inset-right: var(--bb-size-fluid-150);
1302
+ --sky-comp-page-header-blocks-space-inset-top: var(--bb-size-fluid-150);
1303
+ --sky-comp-page-header-fit-space-inset-bottom: var(--bb-size-fluid-100);
1304
+ --sky-comp-page-header-fit-space-inset-left: var(--bb-size-fluid-150);
1305
+ --sky-comp-page-header-fit-space-inset-right: var(--bb-size-fluid-150);
1306
+ --sky-comp-page-header-fit-space-inset-top: var(--bb-size-fluid-150);
1307
+ --sky-comp-page-header-list-space-inset-bottom: var(--bb-size-fluid-100);
1308
+ --sky-comp-page-header-list-space-inset-left: var(--bb-size-fluid-150);
1309
+ --sky-comp-page-header-list-space-inset-right: var(--bb-size-fluid-150);
1310
+ --sky-comp-page-header-list-space-inset-top: var(--bb-size-fluid-150);
1311
+ --sky-comp-page-header-tabs-space-inset-bottom: var(--bb-size-fluid-100);
1312
+ --sky-comp-page-header-tabs-space-inset-left: var(--bb-size-fluid-150);
1313
+ --sky-comp-page-header-tabs-space-inset-right: var(--bb-size-fluid-150);
1314
+ --sky-comp-page-header-tabs-space-inset-top: var(--bb-size-fluid-150);
1315
+ --sky-comp-page-links-blocks-space-inset-bottom: var(--bb-size-fluid-150);
1316
+ --sky-comp-page-links-blocks-space-inset-left: var(--bb-size-fluid-150);
1317
+ --sky-comp-page-links-blocks-space-inset-right: var(--bb-size-fluid-150);
1318
+ --sky-comp-page-links-blocks-space-inset-top: var(--bb-size-fluid-150);
1319
+ --sky-comp-page-links-list-space-inset-bottom: var(--bb-size-fluid-150);
1320
+ --sky-comp-page-links-list-space-inset-left: var(--bb-size-fluid-150);
1321
+ --sky-comp-page-links-list-space-inset-right: var(--bb-size-fluid-150);
1322
+ --sky-comp-page-links-list-space-inset-top: var(--bb-size-fluid-150);
1323
+ --sky-comp-page-links-tabs-space-inset-bottom: var(--bb-size-fluid-150);
1324
+ --sky-comp-page-links-tabs-space-inset-left: var(--bb-size-fluid-150);
1325
+ --sky-comp-page-links-tabs-space-inset-right: var(--bb-size-fluid-150);
1326
+ --sky-comp-page-links-tabs-space-inset-top: var(--bb-size-fluid-150);
1327
+ --sky-comp-page-tabset-tabs-space-inset-bottom: var(--bb-size-0);
1328
+ --sky-comp-page-tabset-tabs-space-inset-left: var(--bb-size-fluid-150);
1329
+ --sky-comp-page-tabset-tabs-space-inset-right: var(--bb-size-0);
1330
+ --sky-comp-page-tabset-tabs-space-inset-top: var(--bb-size-0);
1331
+ --sky-comp-search-space-inset-bottom: var(--bb-size-fluid-50);
1332
+ --sky-comp-search-space-inset-left: var(--bb-size-fluid-50);
1333
+ --sky-comp-search-space-inset-right: var(--bb-size-fluid-50);
1334
+ --sky-comp-search-space-inset-top: var(--bb-size-fluid-50);
1335
+ --sky-comp-tab-vertical-content-space-inset-bottom: var(--bb-size-fluid-50);
1336
+ --sky-comp-tab-vertical-content-space-inset-left: var(--bb-size-fluid-75);
1337
+ --sky-comp-tab-vertical-content-space-inset-right: var(--bb-size-fluid-75);
1338
+ --sky-comp-tab-vertical-content-space-inset-top: var(--bb-size-fluid-50);
1339
+ --sky-comp-tile-dashboard-column-space-inset-bottom: var(--bb-size-0);
1340
+ --sky-comp-tile-dashboard-column-space-inset-left: var(--bb-size-fluid-75);
1341
+ --sky-comp-tile-dashboard-column-space-inset-right: var(--bb-size-fluid-75);
1342
+ --sky-comp-tile-dashboard-column-space-inset-top: var(--bb-size-0);
1343
+ --sky-comp-tile-dashboard-space-inset-bottom: var(--bb-size-0);
1344
+ --sky-comp-tile-dashboard-space-inset-left: var(--bb-size-fluid-50);
1345
+ --sky-comp-tile-dashboard-space-inset-right: var(--bb-size-fluid-50);
1346
+ --sky-comp-tile-dashboard-space-inset-top: var(--bb-size-0);
1347
+ }
1348
+
1065
1349
  .sky-theme-modern {
1066
1350
  --modern-border-radius-0: 0rem;
1067
1351
  --modern-border-radius-md: 6px;
@@ -1295,7 +1579,6 @@
1295
1579
  --sky-color-border-progress_step: var(--modern-color-gray-50);
1296
1580
  --sky-color-border-selected: var(--modern-color-blue-74);
1297
1581
  --sky-color-border-selected_soft: var(--modern-color-blue-30);
1298
- --sky-color-border-separator-dark: var(--modern-color-gray-20);
1299
1582
  --sky-color-border-separator-light: var(--modern-color-gray-10);
1300
1583
  --sky-color-border-separator-row: var(--modern-color-gray-20);
1301
1584
  --sky-color-border-success: var(--modern-color-green-50);
@@ -1347,7 +1630,7 @@
1347
1630
  --sky-elevation-raised-100: var(--modern-shadow-size-1);
1348
1631
  }
1349
1632
 
1350
- .sky-theme-modern {
1633
+ .sky-theme-modern, .sky-theme-modern .sky-responsive-container-xs, .sky-theme-modern .sky-responsive-container-sm, .sky-theme-modern .sky-responsive-container-md, .sky-theme-modern .sky-responsive-container-lg {
1351
1634
  --sky-font-style-deemphasized-style: italic;
1352
1635
  --sky-font-style-deemphasized-weight: 400;
1353
1636
  --sky-font-style-hint-m-style: italic;
@@ -1600,9 +1883,13 @@
1600
1883
  --sky-comp-sab-summary-inline-space-inset-right: var(--modern-size-30);
1601
1884
  --sky-comp-sab-summary-inline-space-inset-top: var(--modern-size-10);
1602
1885
  --sky-comp-search-space-inset-bottom: var(--modern-size-10);
1603
- --sky-comp-search-space-inset-left: var(--modern-size-20);
1604
- --sky-comp-search-space-inset-right: var(--modern-size-20);
1886
+ --sky-comp-search-space-inset-left: var(--modern-size-10);
1887
+ --sky-comp-search-space-inset-right: var(--modern-size-10);
1605
1888
  --sky-comp-search-space-inset-top: var(--modern-size-10);
1889
+ --sky-comp-search-space-offset-bottom: var(--modern-size-5);
1890
+ --sky-comp-search-space-offset-left: var(--modern-size-5);
1891
+ --sky-comp-search-space-offset-right: var(--modern-size-5);
1892
+ --sky-comp-search-space-offset-top: var(--modern-size-5);
1606
1893
  --sky-comp-selection_box-collapsed-space-inset-bottom: var(--modern-space-md);
1607
1894
  --sky-comp-selection_box-collapsed-space-inset-left: var(--modern-space-md);
1608
1895
  --sky-comp-selection_box-collapsed-space-inset-right: var(--modern-space-md);
@@ -1619,6 +1906,10 @@
1619
1906
  --sky-comp-tab-horizontal-space-inset-left: var(--modern-size-15);
1620
1907
  --sky-comp-tab-horizontal-space-inset-right: var(--modern-size-15);
1621
1908
  --sky-comp-tab-horizontal-space-inset-top: var(--modern-size-10);
1909
+ --sky-comp-tab-vertical-content-space-inset-bottom: var(--modern-size-15);
1910
+ --sky-comp-tab-vertical-content-space-inset-left: var(--modern-size-15);
1911
+ --sky-comp-tab-vertical-content-space-inset-right: var(--modern-size-15);
1912
+ --sky-comp-tab-vertical-content-space-inset-top: var(--modern-size-15);
1622
1913
  --sky-comp-tab-vertical-group-button-space-inset-bottom: var(--modern-space-s);
1623
1914
  --sky-comp-tab-vertical-group-button-space-inset-left: var(--modern-space-s);
1624
1915
  --sky-comp-tab-vertical-group-button-space-inset-right: var(--modern-space-s);
@@ -1671,7 +1962,7 @@
1671
1962
  --sky-comp-toast-space-inset-left: var(--modern-size-15);
1672
1963
  --sky-comp-toast-space-inset-right: var(--modern-size-15);
1673
1964
  --sky-comp-toast-space-inset-top: var(--modern-size-15);
1674
- --sky-comp-toaster-space-inset-bottom: var(--modern-size-0);
1965
+ --sky-comp-toaster-space-inset-bottom: var(--modern-size-30);
1675
1966
  --sky-comp-toaster-space-inset-left: var(--modern-size-30);
1676
1967
  --sky-comp-toaster-space-inset-right: var(--modern-size-30);
1677
1968
  --sky-comp-toaster-space-inset-top: var(--modern-size-30);
@@ -1980,6 +2271,157 @@
1980
2271
  --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
1981
2272
  }
1982
2273
 
2274
+ @media (min-width: 768px) {
2275
+ .sky-theme-modern {
2276
+ --sky-comp-modal-fullscreen-space-offset-bottom: var(--modern-size-15);
2277
+ --sky-comp-modal-fullscreen-space-offset-left: var(--modern-size-15);
2278
+ --sky-comp-modal-fullscreen-space-offset-right: var(--modern-size-15);
2279
+ --sky-comp-modal-fullscreen-space-offset-top: var(--modern-size-15);
2280
+ --sky-comp-modal-space-offset-bottom: var(--modern-size-20);
2281
+ --sky-comp-modal-space-offset-left: var(--modern-size-20);
2282
+ --sky-comp-modal-space-offset-right: var(--modern-size-20);
2283
+ --sky-comp-modal-space-offset-top: var(--modern-size-20);
2284
+ --sky-comp-page-content-blocks-space-inset-bottom: var(--modern-space-xl);
2285
+ --sky-comp-page-content-blocks-space-inset-left: var(--modern-space-xl);
2286
+ --sky-comp-page-content-blocks-space-inset-right: var(--modern-space-xl);
2287
+ --sky-comp-page-content-blocks-space-inset-top: var(--modern-space-xl);
2288
+ --sky-comp-page-content-fit-space-inset-bottom: var(--modern-size-0);
2289
+ --sky-comp-page-content-fit-space-inset-left: var(--modern-space-xl);
2290
+ --sky-comp-page-content-fit-space-inset-right: var(--modern-space-xl);
2291
+ --sky-comp-page-content-fit-space-inset-top: var(--modern-size-0);
2292
+ --sky-comp-page-content-list-space-inset-bottom: var(--modern-size-0);
2293
+ --sky-comp-page-content-list-space-inset-left: var(--modern-space-xl);
2294
+ --sky-comp-page-content-list-space-inset-right: var(--modern-space-xl);
2295
+ --sky-comp-page-content-list-space-inset-top: var(--modern-size-0);
2296
+ --sky-comp-page-content-tabs-space-inset-bottom: var(--modern-size-0);
2297
+ --sky-comp-page-content-tabs-space-inset-left: var(--modern-size-0);
2298
+ --sky-comp-page-content-tabs-space-inset-right: var(--modern-size-0);
2299
+ --sky-comp-page-content-tabs-space-inset-top: var(--modern-size-0);
2300
+ --sky-comp-page-header-blocks-space-inset-bottom: var(--modern-size-0);
2301
+ --sky-comp-page-header-blocks-space-inset-left: var(--modern-space-xl);
2302
+ --sky-comp-page-header-blocks-space-inset-right: var(--modern-space-xl);
2303
+ --sky-comp-page-header-blocks-space-inset-top: var(--modern-space-xl);
2304
+ --sky-comp-page-header-fit-space-inset-bottom: var(--modern-space-lg);
2305
+ --sky-comp-page-header-fit-space-inset-left: var(--modern-space-xl);
2306
+ --sky-comp-page-header-fit-space-inset-right: var(--modern-space-xl);
2307
+ --sky-comp-page-header-fit-space-inset-top: var(--modern-space-xl);
2308
+ --sky-comp-page-header-list-space-inset-bottom: var(--modern-space-lg);
2309
+ --sky-comp-page-header-list-space-inset-left: var(--modern-space-xl);
2310
+ --sky-comp-page-header-list-space-inset-right: var(--modern-space-xl);
2311
+ --sky-comp-page-header-list-space-inset-top: var(--modern-space-xl);
2312
+ --sky-comp-page-header-tabs-space-inset-bottom: var(--modern-space-lg);
2313
+ --sky-comp-page-header-tabs-space-inset-left: var(--modern-space-xl);
2314
+ --sky-comp-page-header-tabs-space-inset-right: var(--modern-space-xl);
2315
+ --sky-comp-page-header-tabs-space-inset-top: var(--modern-space-xl);
2316
+ --sky-comp-page-links-blocks-space-inset-bottom: var(--modern-space-xl);
2317
+ --sky-comp-page-links-blocks-space-inset-left: var(--modern-space-xl);
2318
+ --sky-comp-page-links-blocks-space-inset-right: var(--modern-space-xl);
2319
+ --sky-comp-page-links-blocks-space-inset-top: var(--modern-space-xl);
2320
+ --sky-comp-page-links-list-space-inset-bottom: var(--modern-space-xl);
2321
+ --sky-comp-page-links-list-space-inset-left: var(--modern-space-xl);
2322
+ --sky-comp-page-links-list-space-inset-right: var(--modern-space-xl);
2323
+ --sky-comp-page-links-list-space-inset-top: var(--modern-space-xl);
2324
+ --sky-comp-page-links-tabs-space-inset-bottom: var(--modern-space-xl);
2325
+ --sky-comp-page-links-tabs-space-inset-left: var(--modern-space-xl);
2326
+ --sky-comp-page-links-tabs-space-inset-right: var(--modern-space-xl);
2327
+ --sky-comp-page-links-tabs-space-inset-top: var(--modern-space-xl);
2328
+ --sky-comp-page-tabset-tabs-space-inset-bottom: var(--modern-size-0);
2329
+ --sky-comp-page-tabset-tabs-space-inset-left: var(--modern-space-xl);
2330
+ --sky-comp-page-tabset-tabs-space-inset-right: var(--modern-size-0);
2331
+ --sky-comp-page-tabset-tabs-space-inset-top: var(--modern-size-0);
2332
+ --sky-comp-search-space-inset-bottom: var(--modern-space-s);
2333
+ --sky-comp-search-space-inset-left: var(--modern-space-s);
2334
+ --sky-comp-search-space-inset-right: var(--modern-space-s);
2335
+ --sky-comp-search-space-inset-top: var(--modern-space-s);
2336
+ --sky-comp-tab-vertical-content-space-inset-bottom: var(--modern-size-10);
2337
+ --sky-comp-tab-vertical-content-space-inset-left: var(--modern-size-15);
2338
+ --sky-comp-tab-vertical-content-space-inset-right: var(--modern-size-15);
2339
+ --sky-comp-tab-vertical-content-space-inset-top: var(--modern-size-10);
2340
+ --sky-comp-tile-dashboard-column-space-inset-bottom: var(--modern-size-0);
2341
+ --sky-comp-tile-dashboard-column-space-inset-left: var(--modern-space-md);
2342
+ --sky-comp-tile-dashboard-column-space-inset-right: var(--modern-space-md);
2343
+ --sky-comp-tile-dashboard-column-space-inset-top: var(--modern-size-0);
2344
+ --sky-comp-tile-dashboard-space-inset-bottom: var(--modern-size-0);
2345
+ --sky-comp-tile-dashboard-space-inset-left: var(--modern-space-s);
2346
+ --sky-comp-tile-dashboard-space-inset-right: var(--modern-space-s);
2347
+ --sky-comp-tile-dashboard-space-inset-top: var(--modern-size-0);
2348
+ }
2349
+ }
2350
+ .sky-theme-modern .sky-responsive-container-sm, .sky-theme-modern .sky-responsive-container-md, .sky-theme-modern .sky-responsive-container-lg {
2351
+ --sky-comp-modal-fullscreen-space-offset-bottom: var(--modern-size-15);
2352
+ --sky-comp-modal-fullscreen-space-offset-left: var(--modern-size-15);
2353
+ --sky-comp-modal-fullscreen-space-offset-right: var(--modern-size-15);
2354
+ --sky-comp-modal-fullscreen-space-offset-top: var(--modern-size-15);
2355
+ --sky-comp-modal-space-offset-bottom: var(--modern-size-20);
2356
+ --sky-comp-modal-space-offset-left: var(--modern-size-20);
2357
+ --sky-comp-modal-space-offset-right: var(--modern-size-20);
2358
+ --sky-comp-modal-space-offset-top: var(--modern-size-20);
2359
+ --sky-comp-page-content-blocks-space-inset-bottom: var(--modern-space-xl);
2360
+ --sky-comp-page-content-blocks-space-inset-left: var(--modern-space-xl);
2361
+ --sky-comp-page-content-blocks-space-inset-right: var(--modern-space-xl);
2362
+ --sky-comp-page-content-blocks-space-inset-top: var(--modern-space-xl);
2363
+ --sky-comp-page-content-fit-space-inset-bottom: var(--modern-size-0);
2364
+ --sky-comp-page-content-fit-space-inset-left: var(--modern-space-xl);
2365
+ --sky-comp-page-content-fit-space-inset-right: var(--modern-space-xl);
2366
+ --sky-comp-page-content-fit-space-inset-top: var(--modern-size-0);
2367
+ --sky-comp-page-content-list-space-inset-bottom: var(--modern-size-0);
2368
+ --sky-comp-page-content-list-space-inset-left: var(--modern-space-xl);
2369
+ --sky-comp-page-content-list-space-inset-right: var(--modern-space-xl);
2370
+ --sky-comp-page-content-list-space-inset-top: var(--modern-size-0);
2371
+ --sky-comp-page-content-tabs-space-inset-bottom: var(--modern-size-0);
2372
+ --sky-comp-page-content-tabs-space-inset-left: var(--modern-size-0);
2373
+ --sky-comp-page-content-tabs-space-inset-right: var(--modern-size-0);
2374
+ --sky-comp-page-content-tabs-space-inset-top: var(--modern-size-0);
2375
+ --sky-comp-page-header-blocks-space-inset-bottom: var(--modern-size-0);
2376
+ --sky-comp-page-header-blocks-space-inset-left: var(--modern-space-xl);
2377
+ --sky-comp-page-header-blocks-space-inset-right: var(--modern-space-xl);
2378
+ --sky-comp-page-header-blocks-space-inset-top: var(--modern-space-xl);
2379
+ --sky-comp-page-header-fit-space-inset-bottom: var(--modern-space-lg);
2380
+ --sky-comp-page-header-fit-space-inset-left: var(--modern-space-xl);
2381
+ --sky-comp-page-header-fit-space-inset-right: var(--modern-space-xl);
2382
+ --sky-comp-page-header-fit-space-inset-top: var(--modern-space-xl);
2383
+ --sky-comp-page-header-list-space-inset-bottom: var(--modern-space-lg);
2384
+ --sky-comp-page-header-list-space-inset-left: var(--modern-space-xl);
2385
+ --sky-comp-page-header-list-space-inset-right: var(--modern-space-xl);
2386
+ --sky-comp-page-header-list-space-inset-top: var(--modern-space-xl);
2387
+ --sky-comp-page-header-tabs-space-inset-bottom: var(--modern-space-lg);
2388
+ --sky-comp-page-header-tabs-space-inset-left: var(--modern-space-xl);
2389
+ --sky-comp-page-header-tabs-space-inset-right: var(--modern-space-xl);
2390
+ --sky-comp-page-header-tabs-space-inset-top: var(--modern-space-xl);
2391
+ --sky-comp-page-links-blocks-space-inset-bottom: var(--modern-space-xl);
2392
+ --sky-comp-page-links-blocks-space-inset-left: var(--modern-space-xl);
2393
+ --sky-comp-page-links-blocks-space-inset-right: var(--modern-space-xl);
2394
+ --sky-comp-page-links-blocks-space-inset-top: var(--modern-space-xl);
2395
+ --sky-comp-page-links-list-space-inset-bottom: var(--modern-space-xl);
2396
+ --sky-comp-page-links-list-space-inset-left: var(--modern-space-xl);
2397
+ --sky-comp-page-links-list-space-inset-right: var(--modern-space-xl);
2398
+ --sky-comp-page-links-list-space-inset-top: var(--modern-space-xl);
2399
+ --sky-comp-page-links-tabs-space-inset-bottom: var(--modern-space-xl);
2400
+ --sky-comp-page-links-tabs-space-inset-left: var(--modern-space-xl);
2401
+ --sky-comp-page-links-tabs-space-inset-right: var(--modern-space-xl);
2402
+ --sky-comp-page-links-tabs-space-inset-top: var(--modern-space-xl);
2403
+ --sky-comp-page-tabset-tabs-space-inset-bottom: var(--modern-size-0);
2404
+ --sky-comp-page-tabset-tabs-space-inset-left: var(--modern-space-xl);
2405
+ --sky-comp-page-tabset-tabs-space-inset-right: var(--modern-size-0);
2406
+ --sky-comp-page-tabset-tabs-space-inset-top: var(--modern-size-0);
2407
+ --sky-comp-search-space-inset-bottom: var(--modern-space-s);
2408
+ --sky-comp-search-space-inset-left: var(--modern-space-s);
2409
+ --sky-comp-search-space-inset-right: var(--modern-space-s);
2410
+ --sky-comp-search-space-inset-top: var(--modern-space-s);
2411
+ --sky-comp-tab-vertical-content-space-inset-bottom: var(--modern-size-10);
2412
+ --sky-comp-tab-vertical-content-space-inset-left: var(--modern-size-15);
2413
+ --sky-comp-tab-vertical-content-space-inset-right: var(--modern-size-15);
2414
+ --sky-comp-tab-vertical-content-space-inset-top: var(--modern-size-10);
2415
+ --sky-comp-tile-dashboard-column-space-inset-bottom: var(--modern-size-0);
2416
+ --sky-comp-tile-dashboard-column-space-inset-left: var(--modern-space-md);
2417
+ --sky-comp-tile-dashboard-column-space-inset-right: var(--modern-space-md);
2418
+ --sky-comp-tile-dashboard-column-space-inset-top: var(--modern-size-0);
2419
+ --sky-comp-tile-dashboard-space-inset-bottom: var(--modern-size-0);
2420
+ --sky-comp-tile-dashboard-space-inset-left: var(--modern-space-s);
2421
+ --sky-comp-tile-dashboard-space-inset-right: var(--modern-space-s);
2422
+ --sky-comp-tile-dashboard-space-inset-top: var(--modern-size-0);
2423
+ }
2424
+
1983
2425
  .sky-theme-modern {
1984
2426
  /* color */
1985
2427
  --sky-background-color-page-default: var(--sky-color-background-page);
@@ -2134,7 +2576,7 @@
2134
2576
  .sky-theme-modern .sky-btn-danger,
2135
2577
  .sky-theme-modern .sky-btn-link,
2136
2578
  .sky-theme-modern .sky-btn-borderless {
2137
- padding: var(--sky-override-button-padding, var(--sky-space-inset-pillarbox-1_2-top-m) var(--sky-space-inset-pillarbox-1_2-right-m) var(--sky-space-inset-pillarbox-1_2-bottom-m) var(--sky-space-inset-pillarbox-1_2-left-m));
2579
+ padding: var(--sky-override-button-padding, var(--sky-comp-button-space-inset-top) var(--sky-comp-button-space-inset-right) var(--sky-comp-button-space-inset-bottom) var(--sky-comp-button-space-inset-left));
2138
2580
  }
2139
2581
  .sky-theme-modern .sky-btn-default,
2140
2582
  .sky-theme-modern .sky-btn-primary,
@@ -2360,7 +2802,7 @@
2360
2802
  color: var(--sky-override-button-link-inline-color-disabled, var(--sky-color-text-default));
2361
2803
  }
2362
2804
  .sky-theme-modern .sky-btn-icon {
2363
- padding: var(--sky-override-button-icon-padding, var(--sky-space-inset-balanced-s));
2805
+ padding: var(--sky-override-button-icon-padding, var(--sky-comp-button-icon-space-inset-top) var(--sky-comp-button-icon-space-inset-right) var(--sky-comp-button-icon-space-inset-bottom) var(--sky-comp-button-icon-space-inset-left));
2364
2806
  }
2365
2807
  .sky-theme-modern .sky-btn-default,
2366
2808
  .sky-theme-modern .sky-btn-icon {
@@ -2471,7 +2913,7 @@
2471
2913
  color: var(--sky-color-icon-deemphasized);
2472
2914
  }
2473
2915
  .sky-theme-modern .sky-btn-icon-borderless {
2474
- padding: var(--sky-override-button-icon-borderless-padding, var(--sky-space-inset-balanced-xs));
2916
+ padding: var(--sky-override-button-icon-borderless-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));
2475
2917
  height: var(--sky-override-borderless-icon-size, "");
2476
2918
  width: var(--sky-override-borderless-icon-size, "");
2477
2919
  line-height: 1;
@@ -2606,17 +3048,21 @@
2606
3048
  .sky-theme-modern .sky-btn-block {
2607
3049
  font-size: var(--sky-font-size-body-l);
2608
3050
  line-height: var(--sky-override-button-block-line-height, var(--sky-font-line_height-body-l));
3051
+ padding: var(--sky-override-button-padding, var(--sky-comp-button-block-space-inset-top) var(--sky-comp-button-block-space-inset-right) var(--sky-comp-button-block-space-inset-bottom) var(--sky-comp-button-block-space-inset-left));
2609
3052
  }
2610
3053
  .sky-theme-modern .sky-btn-block:has(.sky-btn-block-logo) {
2611
3054
  --sky-btn-block-logo-padding-sides: calc(
2612
3055
  var(--sky-size-icon-m) +
2613
- calc(var(--sky-space-inset-pillarbox-1_2-left-m) * 2)
3056
+ calc(
3057
+ var(--sky-comp-button-block-space-inset-left) +
3058
+ var(--sky-comp-button-block-space-inset-right)
3059
+ )
2614
3060
  );
2615
3061
  padding-left: var(--sky-btn-block-logo-padding-sides);
2616
3062
  padding-right: var(--sky-btn-block-logo-padding-sides);
2617
3063
  }
2618
3064
  .sky-theme-modern .sky-btn-block .sky-btn-block-logo {
2619
- left: var(--sky-space-inset-pillarbox-1_2-left-m);
3065
+ left: var(--sky-comp-button-block-space-inset-left);
2620
3066
  }
2621
3067
  .sky-theme-modern .sky-btn-tab {
2622
3068
  background-color: var(--sky-color-background-nav-base);
@@ -2628,14 +3074,14 @@
2628
3074
  font-size: var(--sky-font-size-body-m);
2629
3075
  font-weight: var(--sky-font-weight-body-m);
2630
3076
  line-height: var(--sky-override-tab-line-height, var(--sky-font-line_height-body-m));
2631
- padding: var(--sky-space-inset-pillarbox-2_3-top-m) var(--sky-space-inset-pillarbox-2_3-right-m) var(--sky-space-inset-pillarbox-2_3-bottom-m) var(--sky-space-inset-pillarbox-2_3-left-m);
3077
+ 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);
2632
3078
  transition: box-shadow 150ms;
2633
3079
  }
2634
3080
  .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) {
2635
3081
  background-color: var(--sky-color-background-nav-hover);
2636
3082
  border-bottom: var(--sky-border-width-selected-s) var(--sky-border-style-accent) var(--sky-override-tab-hover-border-bottom-color, var(--sky-color-border-selected));
2637
3083
  color: var(--sky-color-text-default);
2638
- padding-bottom: calc(var(--sky-space-inset-pillarbox-2_3-bottom-m) - var(--sky-border-width-selected-s));
3084
+ padding-bottom: calc(var(--sky-comp-tab-horizontal-space-inset-bottom) - var(--sky-border-width-selected-s));
2639
3085
  }
2640
3086
  .sky-theme-modern .sky-btn-tab:focus-visible {
2641
3087
  background-color: var(--sky-color-background-nav-focus);
@@ -2652,7 +3098,7 @@
2652
3098
  color: var(--sky-color-text-default);
2653
3099
  background-color: var(--sky-color-background-nav-active);
2654
3100
  border-bottom: var(--sky-border-width-selected-s) var(--sky-border-style-accent) var(--sky-override-tab-hover-border-bottom-color, var(--sky-color-border-selected));
2655
- padding-bottom: calc(var(--sky-space-inset-pillarbox-2_3-bottom-m) - var(--sky-override-tab-selected-border-bottom-size, var(--sky-border-width-selected-s)));
3101
+ padding-bottom: calc(var(--sky-comp-tab-horizontal-space-inset-bottom) - var(--sky-override-tab-selected-border-bottom-size, var(--sky-border-width-selected-s)));
2656
3102
  }
2657
3103
  .sky-theme-modern .sky-btn-tab .sky-btn-tab-close {
2658
3104
  margin-left: var(--sky-space-gap-text_action-xs);
@@ -2674,7 +3120,7 @@
2674
3120
  }
2675
3121
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled):not(:active) {
2676
3122
  border-bottom: var(--sky-override-tab-selected-border-bottom-size, var(--sky-border-width-selected-l)) var(--sky-border-style-accent) var(--sky-color-border-selected);
2677
- padding-bottom: calc(var(--sky-space-inset-pillarbox-2_3-bottom-m) - var(--sky-override-tab-selected-border-bottom-size, var(--sky-border-width-selected-l)));
3123
+ padding-bottom: calc(var(--sky-comp-tab-horizontal-space-inset-bottom) - var(--sky-override-tab-selected-border-bottom-size, var(--sky-border-width-selected-l)));
2678
3124
  }
2679
3125
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled):hover:not(.sky-btn-tab-disabled) {
2680
3126
  background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-selected-soft));
@@ -2695,6 +3141,7 @@
2695
3141
  }
2696
3142
  .sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab {
2697
3143
  border-radius: var(--sky-border-radius-s);
3144
+ 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);
2698
3145
  }
2699
3146
  .sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab:hover:not(.sky-btn-tab-disabled) {
2700
3147
  border-bottom: none;
@@ -2716,8 +3163,7 @@
2716
3163
  border-bottom: none;
2717
3164
  border-radius: 0 var(--sky-border-radius-s) var(--sky-border-radius-s) 0;
2718
3165
  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);
2719
- padding-bottom: var(--sky-space-inset-pillarbox-2_3-bottom-m);
2720
- padding-left: calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-override-selected-dropdown-item-border-width, var(--sky-border-width-selected-l)));
3166
+ 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)));
2721
3167
  }
2722
3168
 
2723
3169
  .sky-theme-modern .sky-elevation-0-bordered {
@@ -2758,7 +3204,7 @@
2758
3204
  font-size: var(--sky-font-size-body-m);
2759
3205
  }
2760
3206
  .sky-theme-modern .sky-error-label {
2761
- margin-top: var(--sky-override-error-label-margin-top, var(--sky-space-inset-input_label-top-m));
3207
+ margin-top: var(--sky-override-error-label-margin-top, var(--sky-comp-input-label-space-inset-top));
2762
3208
  color: var(--sky-text-color-default);
2763
3209
  }
2764
3210
  .sky-theme-modern .sky-error-label::before {
@@ -2791,7 +3237,7 @@
2791
3237
  --sky-override-switch-border-color: var(--modern-color-blue-74);
2792
3238
  --sky-override-switch-border-color-checked: var(--sky-color-border-selected);
2793
3239
  --sky-override-switch-box-shadow-focus-elevation: var(--sky-elevation-focus);
2794
- --sky-override-switch-checked-color: var(--sky-color-icon-action);
3240
+ --sky-override-switch-checked-color: var(--sky-color-icon-selected);
2795
3241
  --sky-override-switch-icon-checked-color-no-group: var(
2796
3242
  --sky-color-text-default
2797
3243
  );
@@ -2917,9 +3363,9 @@
2917
3363
  }
2918
3364
  .sky-theme-modern .sky-switch .sky-switch-control.sky-switch-control-icon {
2919
3365
  max-width: none;
2920
- width: 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));
2921
- height: 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));
2922
- 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));
3366
+ width: var(--sky-override-icon-switch-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-comp-button-icon-space-inset-left) + var(--sky-comp-button-icon-space-inset-right)));
3367
+ height: var(--sky-override-icon-switch-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-comp-button-icon-space-inset-top) + var(--sky-comp-button-icon-space-inset-bottom)));
3368
+ 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-comp-button-icon-space-inset-left) + var(--sky-comp-button-icon-space-inset-right)));
2923
3369
  font-size: var(--sky-override-icon-switch-font-size, var(--sky-size-icon-m));
2924
3370
  }
2925
3371
  .sky-theme-modern .sky-switch .sky-switch-control.sky-switch-control-icon i {
@@ -2970,8 +3416,8 @@
2970
3416
  border-color: var(--sky-color-border-action-tertiary-focus);
2971
3417
  }
2972
3418
  .sky-theme-modern .sky-switch-icon-group .sky-switch-control.sky-switch-control-icon {
2973
- width: var(--sky-override-icon-switch-size-group, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
2974
- height: var(--sky-override-icon-switch-size-group, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
3419
+ width: var(--sky-override-icon-switch-size-group, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-comp-button-icon-space-inset-left) + var(--sky-comp-button-icon-space-inset-right)));
3420
+ height: var(--sky-override-icon-switch-size-group, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-comp-button-icon-space-inset-top) + var(--sky-comp-button-icon-space-inset-bottom)));
2975
3421
  font-size: var(--sky-override-icon-switch-font-size-group, var(--sky-size-icon-m));
2976
3422
  }
2977
3423
  .sky-theme-modern .sky-switch-icon-group sky-checkbox .sky-switch-control-icon {
@@ -2995,11 +3441,11 @@
2995
3441
  );
2996
3442
  --sky-override-form-font-weight: var(--sky-font-weight-body-m);
2997
3443
  --sky-override-p-line-height: var(--sky-font-line_height-body-m);
3444
+ --sky-override-body-line-height: normal;
2998
3445
  }
2999
3446
 
3000
3447
  html:has(.sky-theme-brand-base) {
3001
3448
  font-size: initial;
3002
- line-height: 1.4285714286;
3003
3449
  }
3004
3450
 
3005
3451
  .sky-theme-modern {
@@ -3014,9 +3460,14 @@ html:has(.sky-theme-brand-base) {
3014
3460
  .sky-theme-modern form {
3015
3461
  font-size: var(--sky-font-size-body-m);
3016
3462
  font-weight: var(--sky-override-form-font-weight, initial);
3463
+ font-family: var(--sky-font-family-primary);
3017
3464
  transition: background-color 150ms, color 150ms;
3018
3465
  }
3019
3466
 
3467
+ body.sky-theme-modern {
3468
+ line-height: var(--sky-override-body-line-height, var(--sky-font-line_height-body-m));
3469
+ }
3470
+
3020
3471
  .sky-theme-modern a {
3021
3472
  color: var(--sky-color-text-action);
3022
3473
  border-radius: var(--sky-override-a-border-radius, var(--sky-border-radius-s));
@@ -3060,7 +3511,7 @@ html:has(.sky-theme-brand-base) {
3060
3511
  text-transform: none;
3061
3512
  }
3062
3513
  .sky-theme-modern p {
3063
- line-height: var(--sky-override-p-line-height);
3514
+ line-height: var(--sky-override-p-line-height, var(--sky-font-line_height-body-m));
3064
3515
  }
3065
3516
  .sky-theme-modern mark.sky-highlight-mark {
3066
3517
  background-color: var(--sky-color-background-text_highlight);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/theme",
3
- "version": "12.19.1",
3
+ "version": "12.21.0",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -20,8 +20,8 @@
20
20
  "@angular/core": "^19.2.7"
21
21
  },
22
22
  "dependencies": {
23
- "@blackbaud/skyux-design-tokens": "0.0.59",
24
- "@skyux/icons": "8.0.0",
23
+ "@blackbaud/skyux-design-tokens": "0.0.64",
24
+ "@skyux/icons": "8.2.0",
25
25
  "fontfaceobserver": "2.3.0",
26
26
  "tslib": "^2.8.1"
27
27
  },