@skyux/theme 12.20.0 → 12.22.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 (13) hide show
  1. package/css/sky.css +144 -57
  2. package/css/themes/modern/styles.css +679 -172
  3. package/fesm2022/skyux-theme.mjs +236 -56
  4. package/fesm2022/skyux-theme.mjs.map +1 -1
  5. package/lib/theming/theme-brand.d.ts +11 -0
  6. package/lib/theming/theme-mode.d.ts +11 -0
  7. package/lib/theming/theme-serialization-types.d.ts +47 -0
  8. package/lib/theming/theme-settings.d.ts +8 -0
  9. package/lib/theming/theme-spacing.d.ts +11 -0
  10. package/lib/theming/theme.d.ts +11 -0
  11. package/package.json +3 -3
  12. package/scss/mixins.scss +1 -1
  13. package/scss/variables.scss +2 -2
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