@skyux/theme 12.30.0 → 12.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/css/sky.css +169 -107
  2. package/css/themes/modern/styles.css +235 -225
  3. package/fesm2022/skyux-theme.mjs +2 -2
  4. package/fesm2022/skyux-theme.mjs.map +1 -1
  5. package/lib/theming/theme.service.d.ts +2 -2
  6. package/package.json +2 -2
package/css/sky.css CHANGED
@@ -342,6 +342,7 @@ textarea {
342
342
  :root {
343
343
  /* color */
344
344
  --sky-background-color-page-default: #ffffff;
345
+ --sky-background-color-container-default: #ffffff;
345
346
  --sky-background-color-neutral-light: #eeeeef;
346
347
  --sky-background-color-primary-dark: #0974a1;
347
348
  --sky-background-color-disabled: #cdcfd2;
@@ -1120,84 +1121,87 @@ body:not(.sky-theme-modern) {
1120
1121
  .sky-layout-host-blocks {
1121
1122
  --sky-layout-host-content-spacing: var(
1122
1123
  --sky-override-page-content-blocks-spacing-xs,
1123
- var(--sky-comp-page-content-blocks-space-inset-xs-top)
1124
- var(--sky-comp-page-content-blocks-space-inset-xs-right)
1125
- var(--sky-comp-page-content-blocks-space-inset-xs-bottom)
1126
- var(--sky-comp-page-content-blocks-space-inset-xs-left)
1124
+ var(--sky-comp-layout-content-blocks-space-inset-xs-top)
1125
+ var(--sky-comp-layout-content-blocks-space-inset-xs-right)
1126
+ var(--sky-comp-layout-content-blocks-space-inset-xs-bottom)
1127
+ var(--sky-comp-layout-content-blocks-space-inset-xs-left)
1127
1128
  );
1128
1129
  --sky-layout-host-header-spacing: var(
1129
1130
  --sky-override-page-header-spacing-xs,
1130
- var(--sky-comp-page-header-blocks-space-inset-xs-top)
1131
- var(--sky-comp-page-header-blocks-space-inset-xs-right)
1132
- var(--sky-comp-page-header-blocks-space-inset-xs-bottom)
1133
- var(--sky-comp-page-header-blocks-space-inset-xs-left)
1131
+ var(--sky-comp-layout-header-blocks-space-inset-xs-top)
1132
+ var(--sky-comp-layout-header-blocks-space-inset-xs-right)
1133
+ var(--sky-comp-layout-header-blocks-space-inset-xs-bottom)
1134
+ var(--sky-comp-layout-header-blocks-space-inset-xs-left)
1134
1135
  );
1135
1136
  --sky-layout-host-links-spacing: var(
1136
1137
  --sky-override-page-content-with-links-spacing-xs,
1137
- var(--sky-comp-page-links-blocks-space-inset-xs-top)
1138
- var(--sky-comp-page-links-blocks-space-inset-xs-right)
1139
- var(--sky-comp-page-links-blocks-space-inset-xs-bottom)
1140
- var(--sky-comp-page-links-blocks-space-inset-xs-left)
1138
+ var(--sky-comp-layout-links-blocks-space-inset-xs-top)
1139
+ var(--sky-comp-layout-links-blocks-space-inset-xs-right)
1140
+ var(--sky-comp-layout-links-blocks-space-inset-xs-bottom)
1141
+ var(--sky-comp-layout-links-blocks-space-inset-xs-left)
1141
1142
  );
1142
1143
  }
1143
1144
  .sky-layout-host-fit {
1144
1145
  --sky-layout-host-content-spacing: var(
1145
1146
  --sky-override-page-content-fit-list-spacing-xs,
1146
- var(--sky-comp-page-content-fit-space-inset-xs-top)
1147
- var(--sky-comp-page-content-fit-space-inset-xs-right)
1148
- var(--sky-comp-page-content-fit-space-inset-xs-bottom)
1149
- var(--sky-comp-page-content-fit-space-inset-xs-left)
1147
+ var(--sky-comp-layout-content-fit-space-inset-xs-top)
1148
+ var(--sky-comp-layout-content-fit-space-inset-xs-right)
1149
+ var(--sky-comp-layout-content-fit-space-inset-xs-bottom)
1150
+ var(--sky-comp-layout-content-fit-space-inset-xs-left)
1150
1151
  );
1151
1152
  --sky-layout-host-header-spacing: var(
1152
1153
  --sky-override-page-header-spacing-xs,
1153
- var(--sky-comp-page-header-fit-space-inset-xs-top)
1154
- var(--sky-comp-page-header-fit-space-inset-xs-right)
1155
- var(--sky-comp-page-header-fit-space-inset-xs-bottom)
1156
- var(--sky-comp-page-header-fit-space-inset-xs-left)
1154
+ var(--sky-comp-layout-header-fit-space-inset-xs-top)
1155
+ var(--sky-comp-layout-header-fit-space-inset-xs-right)
1156
+ var(--sky-comp-layout-header-fit-space-inset-xs-bottom)
1157
+ var(--sky-comp-layout-header-fit-space-inset-xs-left)
1157
1158
  );
1158
1159
  }
1159
1160
  .sky-layout-host-list {
1160
1161
  --sky-layout-host-content-spacing: var(
1161
1162
  --sky-override-page-content-fit-list-spacing-xs,
1162
- var(--sky-comp-page-content-list-space-inset-xs-top)
1163
- var(--sky-comp-page-content-list-space-inset-xs-right)
1164
- var(--sky-comp-page-content-list-space-inset-xs-bottom)
1165
- var(--sky-comp-page-content-list-space-inset-xs-left)
1163
+ var(--sky-comp-layout-content-list-space-inset-xs-top)
1164
+ var(--sky-comp-layout-content-list-space-inset-xs-right)
1165
+ var(--sky-comp-layout-content-list-space-inset-xs-bottom)
1166
+ var(--sky-comp-layout-content-list-space-inset-xs-left)
1166
1167
  );
1167
1168
  --sky-layout-host-links-spacing: var(
1168
1169
  --sky-override-page-content-with-links-spacing-xs,
1169
- var(--sky-comp-page-links-list-space-inset-xs-top)
1170
- var(--sky-comp-page-links-list-space-inset-xs-right)
1171
- var(--sky-comp-page-links-list-space-inset-xs-bottom)
1172
- var(--sky-comp-page-links-list-space-inset-xs-left)
1170
+ var(--sky-comp-layout-links-list-space-inset-xs-top)
1171
+ var(--sky-comp-layout-links-list-space-inset-xs-right)
1172
+ var(--sky-comp-layout-links-list-space-inset-xs-bottom)
1173
+ var(--sky-comp-layout-links-list-space-inset-xs-left)
1173
1174
  );
1174
1175
  --sky-layout-host-header-spacing: var(
1175
1176
  --sky-override-page-header-spacing-xs,
1176
- var(--sky-comp-page-header-list-space-inset-xs-top)
1177
- var(--sky-comp-page-header-list-space-inset-xs-right)
1178
- var(--sky-comp-page-header-list-space-inset-xs-bottom)
1179
- var(--sky-comp-page-header-list-space-inset-xs-left)
1177
+ var(--sky-comp-layout-header-list-space-inset-xs-top)
1178
+ var(--sky-comp-layout-header-list-space-inset-xs-right)
1179
+ var(--sky-comp-layout-header-list-space-inset-xs-bottom)
1180
+ var(--sky-comp-layout-header-list-space-inset-xs-left)
1180
1181
  );
1181
1182
  }
1182
1183
  .sky-layout-host-tabs {
1183
1184
  --sky-layout-host-content-spacing: 0;
1184
1185
  --sky-layout-host-tab-content-spacing: var(
1185
1186
  --sky-override-tabset-padding-xs-breakpoint,
1186
- var(--sky-comp-page-tabset-tabs-space-inset-xs-left)
1187
+ var(--sky-comp-layout-tabset-tabs-space-inset-xs-top)
1188
+ var(--sky-comp-layout-tabset-tabs-space-inset-xs-right)
1189
+ var(--sky-comp-layout-tabset-tabs-space-inset-xs-bottom)
1190
+ var(--sky-comp-layout-tabset-tabs-space-inset-xs-left)
1187
1191
  );
1188
1192
  --sky-layout-host-links-spacing: var(
1189
1193
  --sky-override-page-content-with-links-spacing-xs,
1190
- var(--sky-comp-page-links-tabs-space-inset-xs-top)
1191
- var(--sky-comp-page-links-tabs-space-inset-xs-right)
1192
- var(--sky-comp-page-links-tabs-space-inset-xs-bottom)
1193
- var(--sky-comp-page-links-tabs-space-inset-xs-left)
1194
+ var(--sky-comp-layout-links-tabs-space-inset-xs-top)
1195
+ var(--sky-comp-layout-links-tabs-space-inset-xs-right)
1196
+ var(--sky-comp-layout-links-tabs-space-inset-xs-bottom)
1197
+ var(--sky-comp-layout-links-tabs-space-inset-xs-left)
1194
1198
  );
1195
1199
  --sky-layout-host-header-spacing: var(
1196
1200
  --sky-override-page-header-spacing-xs,
1197
- var(--sky-comp-page-header-tabs-space-inset-xs-top)
1198
- var(--sky-comp-page-header-tabs-space-inset-xs-right)
1199
- var(--sky-comp-page-header-tabs-space-inset-xs-bottom)
1200
- var(--sky-comp-page-header-tabs-space-inset-xs-left)
1201
+ var(--sky-comp-layout-header-tabs-space-inset-xs-top)
1202
+ var(--sky-comp-layout-header-tabs-space-inset-xs-right)
1203
+ var(--sky-comp-layout-header-tabs-space-inset-xs-bottom)
1204
+ var(--sky-comp-layout-header-tabs-space-inset-xs-left)
1201
1205
  );
1202
1206
  }
1203
1207
  .sky-layout-host-none {
@@ -1206,10 +1210,6 @@ body:not(.sky-theme-modern) {
1206
1210
 
1207
1211
  @media (min-width: 768px) {
1208
1212
  .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) {
1209
- --sky-layout-host-links-spacing: var(
1210
- --sky-override-page-content-with-links-spacing-sm,
1211
- var(--sky-space-inline-xl)
1212
- );
1213
1213
  grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1214
1214
  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;
1215
1215
  grid-template-columns: 0 75% 25%;
@@ -1267,62 +1267,92 @@ body:not(.sky-theme-modern) {
1267
1267
  .sky-layout-host-blocks {
1268
1268
  --sky-layout-host-header-spacing: var(
1269
1269
  --sky-override-page-header-blocks-spacing-sm,
1270
- var(--sky-comp-page-header-blocks-space-inset-sm-top)
1271
- var(--sky-comp-page-header-blocks-space-inset-sm-right)
1272
- var(--sky-comp-page-header-blocks-space-inset-sm-bottom)
1273
- var(--sky-comp-page-header-blocks-space-inset-sm-left)
1270
+ var(--sky-comp-layout-header-blocks-space-inset-sm-top)
1271
+ var(--sky-comp-layout-header-blocks-space-inset-sm-right)
1272
+ var(--sky-comp-layout-header-blocks-space-inset-sm-bottom)
1273
+ var(--sky-comp-layout-header-blocks-space-inset-sm-left)
1274
1274
  );
1275
1275
  --sky-layout-host-content-spacing: var(
1276
1276
  --sky-override-page-content-blocks-spacing-sm,
1277
- var(--sky-comp-page-content-blocks-space-inset-sm-top)
1278
- var(--sky-comp-page-content-blocks-space-inset-sm-right)
1279
- var(--sky-comp-page-content-blocks-space-inset-sm-bottom)
1280
- var(--sky-comp-page-content-blocks-space-inset-sm-left)
1277
+ var(--sky-comp-layout-content-blocks-space-inset-sm-top)
1278
+ var(--sky-comp-layout-content-blocks-space-inset-sm-right)
1279
+ var(--sky-comp-layout-content-blocks-space-inset-sm-bottom)
1280
+ var(--sky-comp-layout-content-blocks-space-inset-sm-left)
1281
+ );
1282
+ }
1283
+ .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) {
1284
+ --sky-layout-host-links-spacing: var(
1285
+ --sky-override-page-content-with-links-spacing-sm,
1286
+ var(--sky-comp-layout-links-blocks-space-inset-sm-top)
1287
+ var(--sky-comp-layout-links-blocks-space-inset-sm-right)
1288
+ var(--sky-comp-layout-links-blocks-space-inset-sm-bottom)
1289
+ var(--sky-comp-layout-links-blocks-space-inset-sm-left)
1281
1290
  );
1282
1291
  }
1283
1292
  .sky-layout-host-fit {
1284
1293
  --sky-layout-host-header-spacing: var(
1285
1294
  --sky-override-page-header-fit-list-spacing-sm,
1286
- var(--sky-comp-page-header-fit-space-inset-sm-top)
1287
- var(--sky-comp-page-header-fit-space-inset-sm-right)
1288
- var(--sky-comp-page-header-fit-space-inset-sm-bottom)
1289
- var(--sky-comp-page-header-fit-space-inset-sm-left)
1295
+ var(--sky-comp-layout-header-fit-space-inset-sm-top)
1296
+ var(--sky-comp-layout-header-fit-space-inset-sm-right)
1297
+ var(--sky-comp-layout-header-fit-space-inset-sm-bottom)
1298
+ var(--sky-comp-layout-header-fit-space-inset-sm-left)
1290
1299
  );
1291
1300
  --sky-layout-host-content-spacing: var(
1292
1301
  --sky-override-page-content-fit-list-spacing-sm,
1293
- var(--sky-comp-page-content-fit-space-inset-sm-top)
1294
- var(--sky-comp-page-content-fit-space-inset-sm-right)
1295
- var(--sky-comp-page-content-fit-space-inset-sm-bottom)
1296
- var(--sky-comp-page-content-fit-space-inset-sm-left)
1302
+ var(--sky-comp-layout-content-fit-space-inset-sm-top)
1303
+ var(--sky-comp-layout-content-fit-space-inset-sm-right)
1304
+ var(--sky-comp-layout-content-fit-space-inset-sm-bottom)
1305
+ var(--sky-comp-layout-content-fit-space-inset-sm-left)
1297
1306
  );
1298
1307
  }
1299
1308
  .sky-layout-host-list {
1300
1309
  --sky-layout-host-header-spacing: var(
1301
1310
  --sky-override-page-header-fit-list-spacing-sm,
1302
- var(--sky-comp-page-header-list-space-inset-sm-top)
1303
- var(--sky-comp-page-header-list-space-inset-sm-right)
1304
- var(--sky-comp-page-header-list-space-inset-sm-bottom)
1305
- var(--sky-comp-page-header-list-space-inset-sm-left)
1311
+ var(--sky-comp-layout-header-list-space-inset-sm-top)
1312
+ var(--sky-comp-layout-header-list-space-inset-sm-right)
1313
+ var(--sky-comp-layout-header-list-space-inset-sm-bottom)
1314
+ var(--sky-comp-layout-header-list-space-inset-sm-left)
1306
1315
  );
1307
1316
  --sky-layout-host-content-spacing: var(
1308
1317
  --sky-override-page-content-fit-list-spacing-sm,
1309
- var(--sky-comp-page-content-list-space-inset-sm-top)
1310
- var(--sky-comp-page-content-list-space-inset-sm-right)
1311
- var(--sky-comp-page-content-list-space-inset-sm-bottom)
1312
- var(--sky-comp-page-content-list-space-inset-sm-left)
1318
+ var(--sky-comp-layout-content-list-space-inset-sm-top)
1319
+ var(--sky-comp-layout-content-list-space-inset-sm-right)
1320
+ var(--sky-comp-layout-content-list-space-inset-sm-bottom)
1321
+ var(--sky-comp-layout-content-list-space-inset-sm-left)
1322
+ );
1323
+ }
1324
+ .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links) {
1325
+ --sky-layout-host-links-spacing: var(
1326
+ --sky-override-page-content-with-links-spacing-sm,
1327
+ var(--sky-comp-layout-links-list-space-inset-sm-top)
1328
+ var(--sky-comp-layout-links-list-space-inset-sm-right)
1329
+ var(--sky-comp-layout-links-list-space-inset-sm-bottom)
1330
+ var(--sky-comp-layout-links-list-space-inset-sm-left)
1313
1331
  );
1314
1332
  }
1315
1333
  .sky-layout-host-tabs {
1316
1334
  --sky-layout-host-header-spacing: var(
1317
1335
  --sky-override-page-header-tabs-spacing-sm,
1318
- var(--sky-comp-page-header-tabs-space-inset-sm-top)
1319
- var(--sky-comp-page-header-tabs-space-inset-sm-right)
1320
- var(--sky-comp-page-header-tabs-space-inset-sm-bottom)
1321
- var(--sky-comp-page-header-tabs-space-inset-sm-left)
1336
+ var(--sky-comp-layout-header-tabs-space-inset-sm-top)
1337
+ var(--sky-comp-layout-header-tabs-space-inset-sm-right)
1338
+ var(--sky-comp-layout-header-tabs-space-inset-sm-bottom)
1339
+ var(--sky-comp-layout-header-tabs-space-inset-sm-left)
1322
1340
  );
1323
1341
  --sky-layout-host-tab-content-spacing: var(
1324
1342
  --sky-override-page-content-tabs-spacing-sm,
1325
- var(--sky-comp-page-tabset-tabs-space-inset-sm-left)
1343
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-top)
1344
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-right)
1345
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-bottom)
1346
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-left)
1347
+ );
1348
+ }
1349
+ .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1350
+ --sky-layout-host-links-spacing: var(
1351
+ --sky-override-page-content-with-links-spacing-sm,
1352
+ var(--sky-comp-layout-links-tabs-space-inset-sm-top)
1353
+ var(--sky-comp-layout-links-tabs-space-inset-sm-right)
1354
+ var(--sky-comp-layout-links-tabs-space-inset-sm-bottom)
1355
+ var(--sky-comp-layout-links-tabs-space-inset-sm-left)
1326
1356
  );
1327
1357
  }
1328
1358
  }
@@ -1333,10 +1363,6 @@ body:not(.sky-theme-modern) {
1333
1363
  .sky-responsive-container-lg .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1334
1364
  .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1335
1365
  .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1336
- --sky-layout-host-links-spacing: var(
1337
- --sky-override-page-content-with-links-spacing-sm,
1338
- var(--sky-space-inline-xl)
1339
- );
1340
1366
  grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1341
1367
  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;
1342
1368
  grid-template-columns: 0 75% 25%;
@@ -1462,17 +1488,28 @@ body:not(.sky-theme-modern) {
1462
1488
  .sky-responsive-container-lg .sky-layout-host-blocks {
1463
1489
  --sky-layout-host-header-spacing: var(
1464
1490
  --sky-override-page-header-blocks-spacing-sm,
1465
- var(--sky-comp-page-header-blocks-space-inset-sm-top)
1466
- var(--sky-comp-page-header-blocks-space-inset-sm-right)
1467
- var(--sky-comp-page-header-blocks-space-inset-sm-bottom)
1468
- var(--sky-comp-page-header-blocks-space-inset-sm-left)
1491
+ var(--sky-comp-layout-header-blocks-space-inset-sm-top)
1492
+ var(--sky-comp-layout-header-blocks-space-inset-sm-right)
1493
+ var(--sky-comp-layout-header-blocks-space-inset-sm-bottom)
1494
+ var(--sky-comp-layout-header-blocks-space-inset-sm-left)
1469
1495
  );
1470
1496
  --sky-layout-host-content-spacing: var(
1471
1497
  --sky-override-page-content-blocks-spacing-sm,
1472
- var(--sky-comp-page-content-blocks-space-inset-sm-top)
1473
- var(--sky-comp-page-content-blocks-space-inset-sm-right)
1474
- var(--sky-comp-page-content-blocks-space-inset-sm-bottom)
1475
- var(--sky-comp-page-content-blocks-space-inset-sm-left)
1498
+ var(--sky-comp-layout-content-blocks-space-inset-sm-top)
1499
+ var(--sky-comp-layout-content-blocks-space-inset-sm-right)
1500
+ var(--sky-comp-layout-content-blocks-space-inset-sm-bottom)
1501
+ var(--sky-comp-layout-content-blocks-space-inset-sm-left)
1502
+ );
1503
+ }
1504
+ .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1505
+ .sky-responsive-container-md .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1506
+ .sky-responsive-container-lg .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) {
1507
+ --sky-layout-host-links-spacing: var(
1508
+ --sky-override-page-content-with-links-spacing-sm,
1509
+ var(--sky-comp-layout-links-blocks-space-inset-sm-top)
1510
+ var(--sky-comp-layout-links-blocks-space-inset-sm-right)
1511
+ var(--sky-comp-layout-links-blocks-space-inset-sm-bottom)
1512
+ var(--sky-comp-layout-links-blocks-space-inset-sm-left)
1476
1513
  );
1477
1514
  }
1478
1515
  .sky-responsive-container-sm .sky-layout-host-fit,
@@ -1480,17 +1517,17 @@ body:not(.sky-theme-modern) {
1480
1517
  .sky-responsive-container-lg .sky-layout-host-fit {
1481
1518
  --sky-layout-host-header-spacing: var(
1482
1519
  --sky-override-page-header-fit-list-spacing-sm,
1483
- var(--sky-comp-page-header-fit-space-inset-sm-top)
1484
- var(--sky-comp-page-header-fit-space-inset-sm-right)
1485
- var(--sky-comp-page-header-fit-space-inset-sm-bottom)
1486
- var(--sky-comp-page-header-fit-space-inset-sm-left)
1520
+ var(--sky-comp-layout-header-fit-space-inset-sm-top)
1521
+ var(--sky-comp-layout-header-fit-space-inset-sm-right)
1522
+ var(--sky-comp-layout-header-fit-space-inset-sm-bottom)
1523
+ var(--sky-comp-layout-header-fit-space-inset-sm-left)
1487
1524
  );
1488
1525
  --sky-layout-host-content-spacing: var(
1489
1526
  --sky-override-page-content-fit-list-spacing-sm,
1490
- var(--sky-comp-page-content-fit-space-inset-sm-top)
1491
- var(--sky-comp-page-content-fit-space-inset-sm-right)
1492
- var(--sky-comp-page-content-fit-space-inset-sm-bottom)
1493
- var(--sky-comp-page-content-fit-space-inset-sm-left)
1527
+ var(--sky-comp-layout-content-fit-space-inset-sm-top)
1528
+ var(--sky-comp-layout-content-fit-space-inset-sm-right)
1529
+ var(--sky-comp-layout-content-fit-space-inset-sm-bottom)
1530
+ var(--sky-comp-layout-content-fit-space-inset-sm-left)
1494
1531
  );
1495
1532
  }
1496
1533
  .sky-responsive-container-sm .sky-layout-host-list,
@@ -1498,17 +1535,28 @@ body:not(.sky-theme-modern) {
1498
1535
  .sky-responsive-container-lg .sky-layout-host-list {
1499
1536
  --sky-layout-host-header-spacing: var(
1500
1537
  --sky-override-page-header-fit-list-spacing-sm,
1501
- var(--sky-comp-page-header-list-space-inset-sm-top)
1502
- var(--sky-comp-page-header-list-space-inset-sm-right)
1503
- var(--sky-comp-page-header-list-space-inset-sm-bottom)
1504
- var(--sky-comp-page-header-list-space-inset-sm-left)
1538
+ var(--sky-comp-layout-header-list-space-inset-sm-top)
1539
+ var(--sky-comp-layout-header-list-space-inset-sm-right)
1540
+ var(--sky-comp-layout-header-list-space-inset-sm-bottom)
1541
+ var(--sky-comp-layout-header-list-space-inset-sm-left)
1505
1542
  );
1506
1543
  --sky-layout-host-content-spacing: var(
1507
1544
  --sky-override-page-content-fit-list-spacing-sm,
1508
- var(--sky-comp-page-content-list-space-inset-sm-top)
1509
- var(--sky-comp-page-content-list-space-inset-sm-right)
1510
- var(--sky-comp-page-content-list-space-inset-sm-bottom)
1511
- var(--sky-comp-page-content-list-space-inset-sm-left)
1545
+ var(--sky-comp-layout-content-list-space-inset-sm-top)
1546
+ var(--sky-comp-layout-content-list-space-inset-sm-right)
1547
+ var(--sky-comp-layout-content-list-space-inset-sm-bottom)
1548
+ var(--sky-comp-layout-content-list-space-inset-sm-left)
1549
+ );
1550
+ }
1551
+ .sky-responsive-container-sm .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1552
+ .sky-responsive-container-md .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1553
+ .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links) {
1554
+ --sky-layout-host-links-spacing: var(
1555
+ --sky-override-page-content-with-links-spacing-sm,
1556
+ var(--sky-comp-layout-links-list-space-inset-sm-top)
1557
+ var(--sky-comp-layout-links-list-space-inset-sm-right)
1558
+ var(--sky-comp-layout-links-list-space-inset-sm-bottom)
1559
+ var(--sky-comp-layout-links-list-space-inset-sm-left)
1512
1560
  );
1513
1561
  }
1514
1562
  .sky-responsive-container-sm .sky-layout-host-tabs,
@@ -1516,14 +1564,28 @@ body:not(.sky-theme-modern) {
1516
1564
  .sky-responsive-container-lg .sky-layout-host-tabs {
1517
1565
  --sky-layout-host-header-spacing: var(
1518
1566
  --sky-override-page-header-tabs-spacing-sm,
1519
- var(--sky-comp-page-header-tabs-space-inset-sm-top)
1520
- var(--sky-comp-page-header-tabs-space-inset-sm-right)
1521
- var(--sky-comp-page-header-tabs-space-inset-sm-bottom)
1522
- var(--sky-comp-page-header-tabs-space-inset-sm-left)
1567
+ var(--sky-comp-layout-header-tabs-space-inset-sm-top)
1568
+ var(--sky-comp-layout-header-tabs-space-inset-sm-right)
1569
+ var(--sky-comp-layout-header-tabs-space-inset-sm-bottom)
1570
+ var(--sky-comp-layout-header-tabs-space-inset-sm-left)
1523
1571
  );
1524
1572
  --sky-layout-host-tab-content-spacing: var(
1525
1573
  --sky-override-page-content-tabs-spacing-sm,
1526
- var(--sky-comp-page-tabset-tabs-space-inset-sm-left)
1574
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-top)
1575
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-right)
1576
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-bottom)
1577
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-left)
1578
+ );
1579
+ }
1580
+ .sky-responsive-container-sm .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links),
1581
+ .sky-responsive-container-md .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links),
1582
+ .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1583
+ --sky-layout-host-links-spacing: var(
1584
+ --sky-override-page-content-with-links-spacing-sm,
1585
+ var(--sky-comp-layout-links-tabs-space-inset-sm-top)
1586
+ var(--sky-comp-layout-links-tabs-space-inset-sm-right)
1587
+ var(--sky-comp-layout-links-tabs-space-inset-sm-bottom)
1588
+ var(--sky-comp-layout-links-tabs-space-inset-sm-left)
1527
1589
  );
1528
1590
  }
1529
1591