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

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 (4) hide show
  1. package/css/sky.css +134 -69
  2. package/css/themes/modern/styles.css +16 -4
  3. package/documentation.json +126 -178
  4. package/package.json +3 -3
package/css/sky.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
2
- @import url("https://sky.blackbaudcdn.net/static/skyux-icons/7.8.0/assets/css/skyux-icons.min.css");
2
+ @import url("https://sky.blackbaudcdn.net/static/skyux-icons/7.10.0/assets/css/skyux-icons.min.css");
3
3
  /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
4
4
  /* Document
5
5
  ========================================================================== */
@@ -1039,13 +1039,36 @@ select::-ms-expand {
1039
1039
  }
1040
1040
 
1041
1041
  body:not(.sky-theme-modern) {
1042
+ --sky-override-page-content-blocks-spacing-xs: 10px;
1043
+ --sky-override-page-header-blocks-spacing-sm: 20px 20px 0 20px;
1044
+ --sky-override-page-content-blocks-spacing-sm: 20px;
1045
+ --sky-override-page-content-fit-list-spacing-xs: 0 10px;
1046
+ --sky-override-page-header-fit-list-spacing-sm: 20px;
1047
+ --sky-override-page-content-fit-list-spacing-sm: 0 20px;
1042
1048
  --sky-override-tabset-padding-xs-breakpoint: 10px;
1049
+ --sky-override-page-header-tabs-spacing-sm: 20px;
1050
+ --sky-override-page-content-tabs-spacing-sm: 20px;
1051
+ --sky-override-page-content-with-links-spacing-sm: var(
1052
+ --sky-margin-inline-xl
1053
+ );
1054
+ --sky-override-page-content-with-links-spacing-xs: var(
1055
+ --sky-margin-stacked-xl
1056
+ )
1057
+ var(--sky-margin-inline-sm);
1058
+ --sky-override-page-header-avatar-size-space: var(--sky-margin-inline-xl);
1059
+ --sky-override-page-header-link-rows-space: var(--sky-margin-stacked-xl);
1060
+ --sky-override-page-header-spacing-xs: 20px 10px;
1043
1061
  }
1044
1062
 
1045
1063
  .sky-layout-host-blocks, .sky-layout-host-list, .sky-layout-host-tabs {
1046
1064
  display: block;
1047
- --sky-layout-host-links-spacing: var(--sky-margin-stacked-xl)
1048
- var(--sky-margin-inline-sm);
1065
+ --sky-layout-host-links-spacing: var(
1066
+ --sky-override-page-content-with-links-spacing-xs,
1067
+ var(--sky-space-inset-letterbox-1_3-top-m)
1068
+ var(--sky-space-inset-letterbox-1_3-right-m)
1069
+ var(--sky-space-inset-letterbox-1_3-bottom-m)
1070
+ var(--sky-space-inset-letterbox-1_3-left-m)
1071
+ );
1049
1072
  }
1050
1073
  .sky-layout-host-blocks .sky-margin-stacked-xl:empty, .sky-layout-host-list .sky-margin-stacked-xl:empty, .sky-layout-host-tabs .sky-margin-stacked-xl:empty {
1051
1074
  margin-bottom: 0;
@@ -1065,7 +1088,7 @@ body:not(.sky-theme-modern) {
1065
1088
  grid-area: links;
1066
1089
  }
1067
1090
  .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links) > sky-page-content, .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) > sky-page-content {
1068
- margin-right: var(--sky-margin-inline-xl);
1091
+ margin-right: var(--sky-override-page-content-with-links-spacing-sm, var(--sky-space-inline-xl));
1069
1092
  }
1070
1093
  .sky-layout-host-fit, .sky-layout-host-for-child-fit {
1071
1094
  position: absolute;
@@ -1082,19 +1105,34 @@ body:not(.sky-theme-modern) {
1082
1105
  --sky-layout-host-links-display: none;
1083
1106
  }
1084
1107
  .sky-layout-host-blocks, .sky-layout-host-list, .sky-layout-host-fit, .sky-layout-host-tabs {
1085
- --sky-layout-host-header-spacing: 20px 10px;
1108
+ --sky-layout-host-header-spacing: var(
1109
+ --sky-override-page-header-spacing-xs,
1110
+ var(--sky-space-inset-letterbox-1_2-top-m)
1111
+ var(--sky-space-inset-letterbox-1_2-right-m)
1112
+ var(--sky-space-inset-letterbox-1_2-bottom-m)
1113
+ var(--sky-space-inset-letterbox-1_2-left-m)
1114
+ );
1086
1115
  }
1087
1116
  .sky-layout-host-blocks {
1088
- --sky-layout-host-content-spacing: 10px;
1117
+ --sky-layout-host-content-spacing: var(
1118
+ --sky-override-page-content-blocks-spacing-xs,
1119
+ var(--sky-space-inset-balanced-s)
1120
+ );
1089
1121
  }
1090
1122
  .sky-layout-host-fit, .sky-layout-host-list {
1091
- --sky-layout-host-content-spacing: 0 10px;
1123
+ --sky-layout-host-content-spacing: var(
1124
+ --sky-override-page-content-fit-list-spacing-xs,
1125
+ var(--sky-space-inset-horizontal-top-s)
1126
+ var(--sky-space-inset-horizontal-right-s)
1127
+ var(--sky-space-inset-horizontal-bottom-s)
1128
+ var(--sky-space-inset-horizontal-left-s)
1129
+ );
1092
1130
  }
1093
1131
  .sky-layout-host-tabs {
1094
1132
  --sky-layout-host-content-spacing: 0;
1095
1133
  --sky-layout-host-tab-content-spacing: var(
1096
1134
  --sky-override-tabset-padding-xs-breakpoint,
1097
- var(--sky-space-inset-tabs-s)
1135
+ var(--sky-space-inset-letterbox-1_2-left-m)
1098
1136
  );
1099
1137
  }
1100
1138
  .sky-layout-host-none {
@@ -1103,9 +1141,12 @@ body:not(.sky-theme-modern) {
1103
1141
 
1104
1142
  @media (min-width: 768px) {
1105
1143
  .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1106
- --sky-layout-host-links-spacing: var(--sky-margin-inline-xl);
1144
+ --sky-layout-host-links-spacing: var(
1145
+ --sky-override-page-content-with-links-spacing-sm,
1146
+ var(--sky-space-inline-xl)
1147
+ );
1107
1148
  grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1108
- grid-template-rows: minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) auto;
1149
+ grid-template-rows: minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) auto;
1109
1150
  grid-template-columns: 0 75% 25%;
1110
1151
  }
1111
1152
  .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-header,
@@ -1144,7 +1185,11 @@ body:not(.sky-theme-modern) {
1144
1185
  }
1145
1186
  .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)), .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)), .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) {
1146
1187
  --sky-layout-host-header-avatar-size: calc(
1147
- 120px + var(--sky-margin-inline-xl)
1188
+ 120px +
1189
+ var(
1190
+ --sky-override-page-header-avatar-size-space,
1191
+ var(--sky-space-inline-xl)
1192
+ )
1148
1193
  );
1149
1194
  grid-template-columns: var(--sky-layout-host-header-avatar-size) calc(75% - var(--sky-layout-host-header-avatar-size)) 25%;
1150
1195
  }
@@ -1155,16 +1200,44 @@ body:not(.sky-theme-modern) {
1155
1200
  margin-left: 0;
1156
1201
  }
1157
1202
  .sky-layout-host-blocks {
1158
- --sky-layout-host-header-spacing: 20px 20px 0 20px;
1159
- --sky-layout-host-content-spacing: 20px;
1203
+ --sky-layout-host-header-spacing: var(
1204
+ --sky-override-page-header-blocks-spacing-sm,
1205
+ var(--sky-space-inset-bottomless-top-xl)
1206
+ var(--sky-space-inset-bottomless-right-xl)
1207
+ var(--sky-space-inset-bottomless-bottom-xl)
1208
+ var(--sky-space-inset-bottomless-left-xl)
1209
+ );
1210
+ --sky-layout-host-content-spacing: var(
1211
+ --sky-override-page-content-blocks-spacing-sm,
1212
+ var(--sky-space-inset-balanced-xl)
1213
+ );
1160
1214
  }
1161
1215
  .sky-layout-host-fit, .sky-layout-host-list {
1162
- --sky-layout-host-header-spacing: 20px;
1163
- --sky-layout-host-content-spacing: 0 20px;
1216
+ --sky-layout-host-header-spacing: var(
1217
+ --sky-override-page-header-fit-list-spacing-sm,
1218
+ var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
1219
+ var(--sky-space-inset-sunk-bottom-l)
1220
+ var(--sky-space-inset-sunk-left-l)
1221
+ );
1222
+ --sky-layout-host-content-spacing: var(
1223
+ --sky-override-page-content-fit-list-spacing-sm,
1224
+ var(--sky-space-inset-horizontal-top-xl)
1225
+ var(--sky-space-inset-horizontal-right-xl)
1226
+ var(--sky-space-inset-horizontal-bottom-xl)
1227
+ var(--sky-space-inset-horizontal-left-xl)
1228
+ );
1164
1229
  }
1165
1230
  .sky-layout-host-tabs {
1166
- --sky-layout-host-header-spacing: 20px;
1167
- --sky-layout-host-tab-content-spacing: 20px;
1231
+ --sky-layout-host-header-spacing: var(
1232
+ --sky-override-page-header-tabs-spacing-sm,
1233
+ var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
1234
+ var(--sky-space-inset-sunk-bottom-l)
1235
+ var(--sky-space-inset-sunk-left-l)
1236
+ );
1237
+ --sky-layout-host-tab-content-spacing: var(
1238
+ --sky-override-page-content-tabs-spacing-sm,
1239
+ var(--sky-space-inset-sunk-left-l)
1240
+ );
1168
1241
  }
1169
1242
  }
1170
1243
  .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-responsive-container-sm .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-responsive-container-sm .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links),
@@ -1174,9 +1247,12 @@ body:not(.sky-theme-modern) {
1174
1247
  .sky-responsive-container-lg .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1175
1248
  .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1176
1249
  .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1177
- --sky-layout-host-links-spacing: var(--sky-margin-inline-xl);
1250
+ --sky-layout-host-links-spacing: var(
1251
+ --sky-override-page-content-with-links-spacing-sm,
1252
+ var(--sky-space-inline-xl)
1253
+ );
1178
1254
  grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1179
- grid-template-rows: minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) auto;
1255
+ grid-template-rows: minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) auto;
1180
1256
  grid-template-columns: 0 75% 25%;
1181
1257
  }
1182
1258
  .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-header,
@@ -1269,7 +1345,11 @@ body:not(.sky-theme-modern) {
1269
1345
  .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)),
1270
1346
  .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) {
1271
1347
  --sky-layout-host-header-avatar-size: calc(
1272
- 120px + var(--sky-margin-inline-xl)
1348
+ 120px +
1349
+ var(
1350
+ --sky-override-page-header-avatar-size-space,
1351
+ var(--sky-space-inline-xl)
1352
+ )
1273
1353
  );
1274
1354
  grid-template-columns: var(--sky-layout-host-header-avatar-size) calc(75% - var(--sky-layout-host-header-avatar-size)) 25%;
1275
1355
  }
@@ -1294,65 +1374,50 @@ body:not(.sky-theme-modern) {
1294
1374
  .sky-responsive-container-sm .sky-layout-host-blocks,
1295
1375
  .sky-responsive-container-md .sky-layout-host-blocks,
1296
1376
  .sky-responsive-container-lg .sky-layout-host-blocks {
1297
- --sky-layout-host-header-spacing: 20px 20px 0 20px;
1298
- --sky-layout-host-content-spacing: 20px;
1377
+ --sky-layout-host-header-spacing: var(
1378
+ --sky-override-page-header-blocks-spacing-sm,
1379
+ var(--sky-space-inset-bottomless-top-xl)
1380
+ var(--sky-space-inset-bottomless-right-xl)
1381
+ var(--sky-space-inset-bottomless-bottom-xl)
1382
+ var(--sky-space-inset-bottomless-left-xl)
1383
+ );
1384
+ --sky-layout-host-content-spacing: var(
1385
+ --sky-override-page-content-blocks-spacing-sm,
1386
+ var(--sky-space-inset-balanced-xl)
1387
+ );
1299
1388
  }
1300
1389
  .sky-responsive-container-sm .sky-layout-host-fit, .sky-responsive-container-sm .sky-layout-host-list,
1301
1390
  .sky-responsive-container-md .sky-layout-host-fit,
1302
1391
  .sky-responsive-container-md .sky-layout-host-list,
1303
1392
  .sky-responsive-container-lg .sky-layout-host-fit,
1304
1393
  .sky-responsive-container-lg .sky-layout-host-list {
1305
- --sky-layout-host-header-spacing: 20px;
1306
- --sky-layout-host-content-spacing: 0 20px;
1394
+ --sky-layout-host-header-spacing: var(
1395
+ --sky-override-page-header-fit-list-spacing-sm,
1396
+ var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
1397
+ var(--sky-space-inset-sunk-bottom-l)
1398
+ var(--sky-space-inset-sunk-left-l)
1399
+ );
1400
+ --sky-layout-host-content-spacing: var(
1401
+ --sky-override-page-content-fit-list-spacing-sm,
1402
+ var(--sky-space-inset-horizontal-top-xl)
1403
+ var(--sky-space-inset-horizontal-right-xl)
1404
+ var(--sky-space-inset-horizontal-bottom-xl)
1405
+ var(--sky-space-inset-horizontal-left-xl)
1406
+ );
1307
1407
  }
1308
1408
  .sky-responsive-container-sm .sky-layout-host-tabs,
1309
1409
  .sky-responsive-container-md .sky-layout-host-tabs,
1310
1410
  .sky-responsive-container-lg .sky-layout-host-tabs {
1311
- --sky-layout-host-header-spacing: 20px;
1312
- --sky-layout-host-tab-content-spacing: 20px;
1313
- }
1314
-
1315
- @media (min-width: 768px) {
1316
- .sky-theme-modern .sky-layout-host-blocks {
1317
- --sky-layout-host-header-spacing: 30px 30px 0 30px;
1318
- --sky-layout-host-content-spacing: 30px;
1319
- }
1320
- .sky-theme-modern .sky-layout-host-fit, .sky-theme-modern .sky-layout-host-list, .sky-theme-modern .sky-layout-host-tabs {
1321
- --sky-layout-host-header-spacing: 30px 30px 20px 30px;
1322
- }
1323
- .sky-theme-modern .sky-layout-host-fit, .sky-theme-modern .sky-layout-host-list {
1324
- --sky-layout-host-content-spacing: 0 30px;
1325
- }
1326
- .sky-theme-modern .sky-layout-host-tabs {
1327
- --sky-layout-host-tab-content-spacing: var(--sky-space-inset-tabs-xl);
1328
- }
1329
- }
1330
- .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-blocks,
1331
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-blocks,
1332
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-blocks {
1333
- --sky-layout-host-header-spacing: 30px 30px 0 30px;
1334
- --sky-layout-host-content-spacing: 30px;
1335
- }
1336
- .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-fit, .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-list, .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-tabs,
1337
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-fit,
1338
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-list,
1339
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-tabs,
1340
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-fit,
1341
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-list,
1342
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-tabs {
1343
- --sky-layout-host-header-spacing: 30px 30px 20px 30px;
1344
- }
1345
- .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-fit, .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-list,
1346
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-fit,
1347
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-list,
1348
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-fit,
1349
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-list {
1350
- --sky-layout-host-content-spacing: 0 30px;
1351
- }
1352
- .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-tabs,
1353
- .sky-theme-modern .sky-responsive-container-md .sky-layout-host-tabs,
1354
- .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-tabs {
1355
- --sky-layout-host-tab-content-spacing: var(--sky-space-inset-tabs-xl);
1411
+ --sky-layout-host-header-spacing: var(
1412
+ --sky-override-page-header-tabs-spacing-sm,
1413
+ var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
1414
+ var(--sky-space-inset-sunk-bottom-l)
1415
+ var(--sky-space-inset-sunk-left-l)
1416
+ );
1417
+ --sky-layout-host-tab-content-spacing: var(
1418
+ --sky-override-page-content-tabs-spacing-sm,
1419
+ var(--sky-space-inset-sunk-left-l)
1420
+ );
1356
1421
  }
1357
1422
 
1358
1423
  .sky-modal-body-open {
package/css/themes/modern/styles.css CHANGED
@@ -376,6 +376,10 @@
376
376
  --sky-space-inset-tabs-l: var(--modern-space-lg);
377
377
  --sky-space-inset-tabs-m: var(--modern-space-md);
378
378
  --sky-space-inset-tabs-s: var(--modern-space-s);
379
+ --sky-space-inset-sunk-left-l: var(--modern-space-xl);
380
+ --sky-space-inset-sunk-bottom-l: var(--modern-space-lg);
381
+ --sky-space-inset-sunk-right-l: var(--modern-space-xl);
382
+ --sky-space-inset-sunk-top-l: var(--modern-space-xl);
379
383
  --sky-space-inset-pillarbox-2_3-left-l: var(--modern-size-30);
380
384
  --sky-space-inset-pillarbox-2_3-left-m: var(--modern-size-15);
381
385
  --sky-space-inset-pillarbox-2_3-bottom-l: var(--modern-size-20);
@@ -408,10 +412,18 @@
408
412
  --sky-space-inset-pillarbox-1_4-right-xs: var(--modern-size-5);
409
413
  --sky-space-inset-pillarbox-1_4-top-s: var(--modern-size-4);
410
414
  --sky-space-inset-pillarbox-1_4-top-xs: var(--modern-size-1);
411
- --sky-space-inset-letterbox-left-m: var(--modern-space-s);
412
- --sky-space-inset-letterbox-bottom-m: var(--modern-space-lg);
413
- --sky-space-inset-letterbox-right-m: var(--modern-space-s);
414
- --sky-space-inset-letterbox-top-m: var(--modern-space-lg);
415
+ --sky-space-inset-letterbox-2_3-left-m: var(--modern-space-s);
416
+ --sky-space-inset-letterbox-2_3-bottom-m: var(--modern-space-md);
417
+ --sky-space-inset-letterbox-2_3-right-m: var(--modern-space-s);
418
+ --sky-space-inset-letterbox-2_3-top-m: var(--modern-space-md);
419
+ --sky-space-inset-letterbox-1_2-left-m: var(--modern-space-s);
420
+ --sky-space-inset-letterbox-1_2-bottom-m: var(--modern-space-lg);
421
+ --sky-space-inset-letterbox-1_2-right-m: var(--modern-space-s);
422
+ --sky-space-inset-letterbox-1_2-top-m: var(--modern-space-lg);
423
+ --sky-space-inset-letterbox-1_3-left-m: var(--modern-space-s);
424
+ --sky-space-inset-letterbox-1_3-bottom-m: var(--modern-space-xl);
425
+ --sky-space-inset-letterbox-1_3-right-m: var(--modern-space-s);
426
+ --sky-space-inset-letterbox-1_3-top-m: var(--modern-space-xl);
415
427
  --sky-space-inset-input_label-bottom-m: var(--modern-size-2);
416
428
  --sky-space-inset-input_label-top-m: var(--modern-size-6);
417
429
  --sky-space-inset-input-left-m: var(--modern-size-15);