@indico-data/design-system 2.60.3 → 2.60.5

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 (20) hide show
  1. package/lib/index.css +99 -75
  2. package/lib/index.esm.css +99 -75
  3. package/lib/index.esm.js +1 -1
  4. package/lib/index.esm.js.map +1 -1
  5. package/lib/index.js +1 -1
  6. package/lib/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/forms/checkbox/styles/Checkbox.scss +74 -76
  9. package/src/components/forms/date/datePicker/styles/DatePicker.scss +0 -4
  10. package/src/components/forms/form/Form.tsx +1 -0
  11. package/src/components/forms/form/styles/Form.scss +10 -0
  12. package/src/components/forms/input/styles/Input.scss +19 -25
  13. package/src/components/forms/numberInput/styles/NumberInput.scss +22 -24
  14. package/src/components/forms/passwordInput/styles/PasswordInput.scss +27 -32
  15. package/src/components/forms/radio/styles/Radio.scss +75 -76
  16. package/src/components/forms/textarea/styles/Textarea.scss +13 -18
  17. package/src/components/forms/toggle/styles/Toggle.scss +1 -0
  18. package/src/components/pagination/styles/Pagination.scss +0 -6
  19. package/src/styles/globals.scss +4 -4
  20. package/src/styles/variables/_typography.scss +1 -0
package/lib/index.css CHANGED
@@ -14,6 +14,7 @@
14
14
  --pf-font-size-subtitle2: calc(0.875 * var(--pf-font-size-base));
15
15
  --pf-font-size-button: var(--pf-font-size-base);
16
16
  --pf-font-size-overline: calc(0.75 * var(--pf-font-size-base));
17
+ --pf-font-size-form-label: var(--pf-font-size-body);
17
18
  --pf-font-weight-thin: 100;
18
19
  --pf-font-weight-light: 300;
19
20
  --pf-font-weight-regular: 400;
@@ -482,10 +483,10 @@
482
483
  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
483
484
  --pf-font-color: var(--pf-gray-color);
484
485
  --pf-font-color-emphasis: var(--pf-gray-color-800);
485
- --pf-font-color-light: var(--pf-gray-color-400);
486
- --pf-font-color-light-header: var(--pf-primary-color-100);
487
- --pf-link-color: var(--pf-primary-color);
488
- --pf-active-link-color: var(--pf-primary-color-600);
486
+ --pf-font-color-light: var(--pf-gray-color-700);
487
+ --pf-font-color-light-header: var(--pf-gray-color-600);
488
+ --pf-link-color: var(--pf-secondary-color);
489
+ --pf-active-link-color: var(--pf-secondary-color-300);
489
490
  }
490
491
 
491
492
  :root [data-theme=dark],
@@ -1052,34 +1053,29 @@ a:hover,
1052
1053
  padding-left: var(--pf-padding-7);
1053
1054
  }
1054
1055
 
1055
- .form-control {
1056
- margin-bottom: var(--pf-margin-3);
1057
- }
1058
- .form-control .help-text {
1056
+ .help-text {
1059
1057
  margin-top: var(--pf-margin-2);
1060
1058
  margin-bottom: var(--pf-margin-2);
1061
1059
  color: var(--pf-form-input-help-color);
1062
1060
  font-size: var(--pf-font-size-subtitle2);
1063
1061
  }
1064
- .form-control .input-wrapper {
1062
+
1063
+ .input-wrapper {
1065
1064
  position: relative;
1066
1065
  }
1067
- .form-control .input-wrapper .embedded-icon {
1066
+ .input-wrapper .embedded-icon {
1068
1067
  position: absolute;
1069
1068
  top: 10px;
1070
1069
  left: var(--pf-margin-2);
1071
1070
  color: var(--pf-form-input-color);
1072
1071
  }
1073
- .form-control .input-wrapper .clearable-icon {
1072
+ .input-wrapper .clearable-icon {
1074
1073
  position: absolute;
1075
1074
  top: var(--pf-margin-3);
1076
1075
  right: var(--pf-margin-2);
1077
1076
  color: var(--pf-form-input-color);
1078
1077
  cursor: pointer;
1079
1078
  }
1080
- .form-control .form-label {
1081
- margin-bottom: var(--pf-margin-2);
1082
- }
1083
1079
 
1084
1080
  :root {
1085
1081
  --pf-number-input-padding: 10px;
@@ -1096,29 +1092,31 @@ a:hover,
1096
1092
  padding-left: var(--pf-padding-7);
1097
1093
  }
1098
1094
 
1099
- .form-control .help-text {
1095
+ .help-text {
1100
1096
  margin-top: var(--pf-margin-2);
1101
1097
  margin-bottom: var(--pf-margin-2);
1102
1098
  color: var(--pf-form-input-help-color);
1103
1099
  font-size: var(--pf-font-size-subtitle2);
1104
1100
  }
1105
- .form-control .number-input-wrapper {
1101
+
1102
+ .number-input-wrapper {
1106
1103
  position: relative;
1107
1104
  }
1108
- .form-control .number-input-wrapper .embedded-icon {
1105
+ .number-input-wrapper .embedded-icon {
1109
1106
  position: absolute;
1110
1107
  top: 10px;
1111
1108
  left: var(--pf-margin-2);
1112
1109
  color: var(--pf-form-input-color);
1113
1110
  }
1114
- .form-control .number-input-wrapper .clearable-icon {
1111
+ .number-input-wrapper .clearable-icon {
1115
1112
  position: absolute;
1116
1113
  top: var(--pf-margin-3);
1117
1114
  right: var(--pf-margin-2);
1118
1115
  color: var(--pf-form-input-color);
1119
1116
  cursor: pointer;
1120
1117
  }
1121
- .form-control .form-label {
1118
+
1119
+ .form-label {
1122
1120
  margin-bottom: var(--pf-margin-2);
1123
1121
  }
1124
1122
 
@@ -1133,34 +1131,40 @@ a:hover,
1133
1131
  --pf-radio-disabled-color: var(--pf-gray-color-300);
1134
1132
  }
1135
1133
 
1136
- .form-control .radio-wrapper {
1134
+ .radio-wrapper {
1137
1135
  display: flex;
1138
1136
  margin-bottom: var(--pf-margin-2);
1139
1137
  align-items: center;
1140
1138
  }
1141
- .form-control .radio-input {
1139
+
1140
+ .radio-input {
1142
1141
  margin: 0;
1143
1142
  margin-right: var(--pf-margin-2);
1144
1143
  cursor: pointer;
1145
1144
  }
1146
- .form-control .radio-input-label {
1145
+
1146
+ .radio-input-label {
1147
1147
  cursor: pointer;
1148
+ font-size: var(--pf-font-size-form-label);
1148
1149
  }
1149
- .form-control [type=radio]:checked,
1150
- .form-control [type=radio]:not(:checked) {
1150
+
1151
+ [type=radio]:checked,
1152
+ [type=radio]:not(:checked) {
1151
1153
  position: absolute;
1152
1154
  left: -9999px;
1153
1155
  }
1154
- .form-control [type=radio]:checked + label,
1155
- .form-control [type=radio]:not(:checked) + label {
1156
+
1157
+ [type=radio]:checked + label,
1158
+ [type=radio]:not(:checked) + label {
1156
1159
  position: relative;
1157
1160
  padding-left: var(--pf-padding-7);
1158
1161
  cursor: pointer;
1159
1162
  line-height: 20px;
1160
1163
  display: inline-block;
1161
1164
  }
1162
- .form-control [type=radio]:checked + label:before,
1163
- .form-control [type=radio]:not(:checked) + label:before {
1165
+
1166
+ [type=radio]:checked + label:before,
1167
+ [type=radio]:not(:checked) + label:before {
1164
1168
  content: "";
1165
1169
  position: absolute;
1166
1170
  left: 0;
@@ -1171,8 +1175,9 @@ a:hover,
1171
1175
  border-radius: 100%;
1172
1176
  background: var(--pf-form-input-background-color);
1173
1177
  }
1174
- .form-control [type=radio]:checked + label:after,
1175
- .form-control [type=radio]:not(:checked) + label:after {
1178
+
1179
+ [type=radio]:checked + label:after,
1180
+ [type=radio]:not(:checked) + label:after {
1176
1181
  content: "";
1177
1182
  width: 12px;
1178
1183
  height: 12px;
@@ -1183,26 +1188,32 @@ a:hover,
1183
1188
  border-radius: 100%;
1184
1189
  transition: all 0.2s ease;
1185
1190
  }
1186
- .form-control [type=radio]:not(:checked) + label:after {
1191
+
1192
+ [type=radio]:not(:checked) + label:after {
1187
1193
  opacity: 0;
1188
1194
  transform: scale(0);
1189
1195
  }
1190
- .form-control [type=radio]:checked + label:after {
1196
+
1197
+ [type=radio]:checked + label:after {
1191
1198
  opacity: 1;
1192
1199
  transform: scale(1);
1193
1200
  }
1194
- .form-control [type=radio]:disabled,
1195
- .form-control [type=radio]:disabled + label {
1201
+
1202
+ [type=radio]:disabled,
1203
+ [type=radio]:disabled + label {
1196
1204
  cursor: not-allowed;
1197
1205
  }
1198
- .form-control [type=radio]:disabled + label {
1206
+
1207
+ [type=radio]:disabled + label {
1199
1208
  color: var(--pf-radio-disabled-color);
1200
1209
  opacity: 0.5;
1201
1210
  }
1202
- .form-control [type=radio]:disabled + label:before {
1211
+
1212
+ [type=radio]:disabled + label:before {
1203
1213
  border-color: var(--pf-radio-disabled-color);
1204
1214
  }
1205
- .form-control [type=radio]:disabled + label:after {
1215
+
1216
+ [type=radio]:disabled + label:after {
1206
1217
  background: var(--pf-radio-disabled-color);
1207
1218
  }
1208
1219
 
@@ -1217,34 +1228,39 @@ a:hover,
1217
1228
  --pf-checkbox-disabled-color: var(--pf-gray-color-300);
1218
1229
  }
1219
1230
 
1220
- .form-control .checkbox-wrapper {
1231
+ .checkbox-wrapper {
1221
1232
  display: flex;
1222
1233
  margin-bottom: var(--pf-margin-2);
1223
1234
  align-items: center;
1224
1235
  }
1225
- .form-control .checkbox-input {
1236
+
1237
+ .checkbox-input {
1226
1238
  margin: 0;
1227
1239
  margin-right: var(--pf-margin-2);
1228
1240
  cursor: pointer;
1229
1241
  }
1230
- .form-control .checkbox-input-label {
1242
+
1243
+ .checkbox-input-label {
1231
1244
  cursor: pointer;
1232
1245
  }
1233
- .form-control .checkbox-input:checked,
1234
- .form-control .checkbox-input:not(:checked) {
1246
+
1247
+ .checkbox-input:checked,
1248
+ .checkbox-input:not(:checked) {
1235
1249
  position: absolute;
1236
1250
  left: -9999px;
1237
1251
  }
1238
- .form-control .checkbox-input:checked + label,
1239
- .form-control .checkbox-input:not(:checked) + label {
1252
+
1253
+ .checkbox-input:checked + label,
1254
+ .checkbox-input:not(:checked) + label {
1240
1255
  position: relative;
1241
1256
  padding-left: var(--pf-padding-7);
1242
1257
  cursor: pointer;
1243
1258
  line-height: 20px;
1244
1259
  display: inline-block;
1245
1260
  }
1246
- .form-control .checkbox-input:checked + label:before,
1247
- .form-control .checkbox-input:not(:checked) + label:before {
1261
+
1262
+ .checkbox-input:checked + label:before,
1263
+ .checkbox-input:not(:checked) + label:before {
1248
1264
  content: "";
1249
1265
  position: absolute;
1250
1266
  left: 0;
@@ -1255,8 +1271,9 @@ a:hover,
1255
1271
  border-radius: var(--pf-rounded);
1256
1272
  background: var(--pf-form-input-background-color);
1257
1273
  }
1258
- .form-control .checkbox-input:checked + label:after,
1259
- .form-control .checkbox-input:not(:checked) + label:after {
1274
+
1275
+ .checkbox-input:checked + label:after,
1276
+ .checkbox-input:not(:checked) + label:after {
1260
1277
  content: "";
1261
1278
  width: 12px;
1262
1279
  height: 12px;
@@ -1267,26 +1284,32 @@ a:hover,
1267
1284
  border-radius: var(--pf-rounded);
1268
1285
  transition: all 0.2s ease;
1269
1286
  }
1270
- .form-control .checkbox-input:not(:checked) + label:after {
1287
+
1288
+ .checkbox-input:not(:checked) + label:after {
1271
1289
  opacity: 0;
1272
1290
  transform: scale(0);
1273
1291
  }
1274
- .form-control .checkbox-input:checked + label:after {
1292
+
1293
+ .checkbox-input:checked + label:after {
1275
1294
  opacity: 1;
1276
1295
  transform: scale(1);
1277
1296
  }
1278
- .form-control .checkbox-input:disabled,
1279
- .form-control .checkbox-input:disabled + label {
1297
+
1298
+ .checkbox-input:disabled,
1299
+ .checkbox-input:disabled + label {
1280
1300
  cursor: not-allowed;
1281
1301
  }
1282
- .form-control .checkbox-input:disabled + label {
1302
+
1303
+ .checkbox-input:disabled + label {
1283
1304
  color: var(--pf-checkbox-disabled-color);
1284
1305
  opacity: 0.5;
1285
1306
  }
1286
- .form-control .checkbox-input:disabled + label:before {
1307
+
1308
+ .checkbox-input:disabled + label:before {
1287
1309
  border-color: var(--pf-checkbox-disabled-color);
1288
1310
  }
1289
- .form-control .checkbox-input:disabled + label:after {
1311
+
1312
+ .checkbox-input:disabled + label:after {
1290
1313
  background: var(--pf-form-input-disabled-background-color);
1291
1314
  }
1292
1315
 
@@ -1309,7 +1332,7 @@ a:hover,
1309
1332
  padding-left: var(--pf-padding-7);
1310
1333
  }
1311
1334
 
1312
- .form-control .form-errors {
1335
+ .form-errors {
1313
1336
  list-style: none;
1314
1337
  padding: 0;
1315
1338
  margin: 0;
@@ -1317,15 +1340,13 @@ a:hover,
1317
1340
  margin-bottom: var(--pf-margin-2);
1318
1341
  color: var(--pf-error-color);
1319
1342
  }
1320
- .form-control .help-text {
1343
+
1344
+ .help-text {
1321
1345
  margin-top: var(--pf-margin-2);
1322
1346
  margin-bottom: var(--pf-margin-2);
1323
1347
  color: var(--pf-form-input-help-color);
1324
1348
  font-size: var(--pf-font-size-subtitle2);
1325
1349
  }
1326
- .form-control .form-label {
1327
- margin-bottom: var(--pf-margin-2);
1328
- }
1329
1350
 
1330
1351
  .password-input {
1331
1352
  padding: 10px;
@@ -1334,7 +1355,7 @@ a:hover,
1334
1355
  padding-left: var(--pf-padding-7);
1335
1356
  }
1336
1357
 
1337
- .form-control .error-list {
1358
+ .error-list {
1338
1359
  list-style: none;
1339
1360
  padding: 0;
1340
1361
  margin: 0;
@@ -1342,31 +1363,30 @@ a:hover,
1342
1363
  margin-bottom: var(--pf-margin-2);
1343
1364
  color: var(--pf-error-color);
1344
1365
  }
1345
- .form-control .help-text {
1366
+
1367
+ .help-text {
1346
1368
  margin-top: var(--pf-margin-2);
1347
1369
  margin-bottom: var(--pf-margin-2);
1348
1370
  color: var(--pf-form-input-help-color);
1349
1371
  font-size: var(--pf-font-size-subtitle2);
1350
1372
  }
1351
- .form-control .password-input-wrapper {
1373
+
1374
+ .password-input-wrapper {
1352
1375
  position: relative;
1353
1376
  }
1354
- .form-control .password-input-wrapper .embedded-icon {
1377
+ .password-input-wrapper .embedded-icon {
1355
1378
  position: absolute;
1356
1379
  top: 10px;
1357
1380
  left: var(--pf-margin-2);
1358
1381
  color: var(--pf-form-input-color);
1359
1382
  }
1360
- .form-control .password-input-wrapper .toggle-show-password-icon {
1383
+ .password-input-wrapper .toggle-show-password-icon {
1361
1384
  position: absolute;
1362
1385
  top: var(--pf-margin-3);
1363
1386
  right: var(--pf-margin-2);
1364
1387
  color: var(--pf-form-input-color);
1365
1388
  cursor: pointer;
1366
1389
  }
1367
- .form-control .form-label {
1368
- margin-bottom: var(--pf-margin-2);
1369
- }
1370
1390
 
1371
1391
  form {
1372
1392
  width: 100%;
@@ -1546,6 +1566,15 @@ form {
1546
1566
  border-color: var(--pf-info-color);
1547
1567
  }
1548
1568
 
1569
+ .form .form-control {
1570
+ margin-bottom: var(--pf-margin-3);
1571
+ }
1572
+
1573
+ .form-label {
1574
+ margin-bottom: var(--pf-margin-2);
1575
+ font-size: var(--pf-font-size-form-label);
1576
+ }
1577
+
1549
1578
  :root [data-theme=light] {
1550
1579
  --pf-select-indicator-color: var(--pf-gray-color);
1551
1580
  --pf-select-option-selected-color: var(--pf-gray-color-950);
@@ -1718,6 +1747,7 @@ form {
1718
1747
  .toggle-label {
1719
1748
  cursor: pointer;
1720
1749
  margin-left: var(--pf-margin-2);
1750
+ font-size: var(--pf-font-size-form-label);
1721
1751
  }
1722
1752
 
1723
1753
  :root [data-theme=light] {
@@ -1941,9 +1971,6 @@ form {
1941
1971
  margin-bottom: var(--pf-margin-3);
1942
1972
  width: 348px;
1943
1973
  }
1944
- .time-picker-wrapper .form-control {
1945
- margin-bottom: 0;
1946
- }
1947
1974
 
1948
1975
  :root [data-theme=light] {
1949
1976
  --pf-badge-background-color: var(--pf-primary-color-950);
@@ -2096,10 +2123,6 @@ form {
2096
2123
  border: var(--pf-border-sm) solid var(--pf-border-color);
2097
2124
  }
2098
2125
 
2099
- .pagination .form-control {
2100
- margin-bottom: 0;
2101
- }
2102
-
2103
2126
  .pagination__current-page {
2104
2127
  max-width: 50px;
2105
2128
  }
@@ -2831,6 +2854,7 @@ form {
2831
2854
  --pf-font-size-subtitle2: calc(0.875 * var(--pf-font-size-base));
2832
2855
  --pf-font-size-button: var(--pf-font-size-base);
2833
2856
  --pf-font-size-overline: calc(0.75 * var(--pf-font-size-base));
2857
+ --pf-font-size-form-label: var(--pf-font-size-body);
2834
2858
  --pf-font-weight-thin: 100;
2835
2859
  --pf-font-weight-light: 300;
2836
2860
  --pf-font-weight-regular: 400;