@scattered-light/loomiere-mojave 0.6.0 → 0.7.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 (40) hide show
  1. package/dist/exports/AGENTS.md +24 -8
  2. package/dist/exports/catalog.json +21 -0
  3. package/dist/exports/chakra.js +333 -0
  4. package/dist/exports/design-system/README.md +23 -7
  5. package/dist/exports/design-system/components/Badge/README.md +35 -0
  6. package/dist/exports/design-system/components/Badge/preview.html +19 -0
  7. package/dist/exports/design-system/components/Collection/README.md +14 -0
  8. package/dist/exports/design-system/components/CollectionPagination/README.md +15 -0
  9. package/dist/exports/design-system/components/CollectionToolbar/README.md +29 -0
  10. package/dist/exports/design-system/components/DataList/README.md +39 -0
  11. package/dist/exports/design-system/components/DataList/preview.html +475 -0
  12. package/dist/exports/design-system/components/DataTable/README.md +41 -0
  13. package/dist/exports/design-system/components/DataTable/preview.html +475 -0
  14. package/dist/exports/design-system/components/DatePicker/README.md +55 -0
  15. package/dist/exports/design-system/components/DatePicker/preview.html +475 -0
  16. package/dist/exports/design-system/components/EditableList/README.md +33 -0
  17. package/dist/exports/design-system/components/EditableList/preview.html +475 -0
  18. package/dist/exports/design-system/components/EmptyState/README.md +60 -0
  19. package/dist/exports/design-system/components/EmptyState/preview.html +475 -0
  20. package/dist/exports/design-system/components/ListDetail/README.md +43 -0
  21. package/dist/exports/design-system/components/ListDetail/preview.html +475 -0
  22. package/dist/exports/design-system/components/MoneyField/README.md +52 -0
  23. package/dist/exports/design-system/components/MoneyField/preview.html +475 -0
  24. package/dist/exports/design-system/components/Splitter/README.md +42 -0
  25. package/dist/exports/design-system/components/Splitter/preview.html +475 -0
  26. package/dist/exports/design-system/components/Table/README.md +2 -1
  27. package/dist/exports/design-system/components/Table/preview.html +1 -1
  28. package/dist/exports/design-system/components/bundle.css +2461 -190
  29. package/dist/exports/design-system/components/bundle.js +7 -5
  30. package/dist/exports/design-system/components/index.d.ts +3 -21
  31. package/dist/exports/design-system/tokens.json +15 -0
  32. package/dist/exports/figma.json +1 -1
  33. package/dist/exports/mui.js +727 -0
  34. package/dist/exports/tailwind.css +36 -0
  35. package/dist/exports/tokens.dtcg.json +320 -2
  36. package/dist/tokens.css +112 -4
  37. package/dist/tokens.d.ts +94 -0
  38. package/dist/tokens.js +95 -1
  39. package/dist/tokens.json +580 -2
  40. package/package.json +2 -2
package/dist/exports/mui.js CHANGED
@@ -970,6 +970,733 @@ const options = {
970
970
  }
971
971
  }
972
972
  },
973
+ MuiChip: {
974
+ styleOverrides: {
975
+ root: {
976
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
977
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
978
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
979
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
980
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
981
+ display: "inline-flex",
982
+ alignItems: "center",
983
+ justifyContent: "center",
984
+ gap: "var(--sl-badge-gap-condense)",
985
+ height: "var(--sl-badge-height-condense)",
986
+ minWidth: "var(--sl-badge-height-condense)",
987
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
988
+ borderRadius: "var(--sl-radius-pill)",
989
+ borderWidth: "var(--sl-stroke-default)",
990
+ borderStyle: "solid",
991
+ background: "var(--sl-scope-chrome-soft)",
992
+ color: "var(--sl-scope-chrome-on-soft)",
993
+ borderColor: "var(--sl-scope-chrome-soft)",
994
+ whiteSpace: "nowrap",
995
+ "& .MuiChip-icon": {
996
+ color: "inherit",
997
+ margin: 0
998
+ },
999
+ "& .MuiChip-label": {
1000
+ padding: 0
1001
+ },
1002
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1003
+ "&:hover": {
1004
+ background: "var(--sl-e-bg-hover)"
1005
+ },
1006
+ "&:active": {
1007
+ background: "var(--sl-e-bg-active)"
1008
+ },
1009
+ "&.Mui-focusVisible": {
1010
+ outline: "var(--sl-focus-outline)",
1011
+ outlineOffset: "var(--sl-focus-outline-offset)",
1012
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1013
+ }
1014
+ },
1015
+ variants: [
1016
+ {
1017
+ props: {
1018
+ variant: "filled",
1019
+ color: "default"
1020
+ },
1021
+ style: {
1022
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1023
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1024
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1025
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1026
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1027
+ display: "inline-flex",
1028
+ alignItems: "center",
1029
+ justifyContent: "center",
1030
+ gap: "var(--sl-badge-gap-condense)",
1031
+ height: "var(--sl-badge-height-condense)",
1032
+ minWidth: "var(--sl-badge-height-condense)",
1033
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1034
+ borderRadius: "var(--sl-radius-pill)",
1035
+ borderWidth: "var(--sl-stroke-default)",
1036
+ borderStyle: "solid",
1037
+ background: "var(--sl-scope-chrome-soft)",
1038
+ color: "var(--sl-scope-chrome-on-soft)",
1039
+ borderColor: "var(--sl-scope-chrome-soft)",
1040
+ whiteSpace: "nowrap",
1041
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1042
+ "&:hover": {
1043
+ background: "var(--sl-scope-chrome-soft-hover)"
1044
+ },
1045
+ "&:active": {
1046
+ background: "var(--sl-scope-chrome-soft-active)"
1047
+ },
1048
+ "&.Mui-focusVisible": {
1049
+ outline: "var(--sl-focus-outline)",
1050
+ outlineOffset: "var(--sl-focus-outline-offset)",
1051
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1052
+ }
1053
+ }
1054
+ }
1055
+ },
1056
+ {
1057
+ props: {
1058
+ variant: "filled",
1059
+ color: "primary"
1060
+ },
1061
+ style: {
1062
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1063
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1064
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1065
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1066
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1067
+ display: "inline-flex",
1068
+ alignItems: "center",
1069
+ justifyContent: "center",
1070
+ gap: "var(--sl-badge-gap-condense)",
1071
+ height: "var(--sl-badge-height-condense)",
1072
+ minWidth: "var(--sl-badge-height-condense)",
1073
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1074
+ borderRadius: "var(--sl-radius-pill)",
1075
+ borderWidth: "var(--sl-stroke-default)",
1076
+ borderStyle: "solid",
1077
+ background: "var(--sl-scope-chrome-soft)",
1078
+ color: "var(--sl-scope-chrome-on-soft)",
1079
+ borderColor: "var(--sl-scope-chrome-soft)",
1080
+ whiteSpace: "nowrap",
1081
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1082
+ "&:hover": {
1083
+ background: "var(--sl-scope-chrome-soft-hover)"
1084
+ },
1085
+ "&:active": {
1086
+ background: "var(--sl-scope-chrome-soft-active)"
1087
+ },
1088
+ "&.Mui-focusVisible": {
1089
+ outline: "var(--sl-focus-outline)",
1090
+ outlineOffset: "var(--sl-focus-outline-offset)",
1091
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1092
+ }
1093
+ }
1094
+ }
1095
+ },
1096
+ {
1097
+ props: {
1098
+ variant: "filled",
1099
+ color: "secondary"
1100
+ },
1101
+ style: {
1102
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1103
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1104
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1105
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1106
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1107
+ display: "inline-flex",
1108
+ alignItems: "center",
1109
+ justifyContent: "center",
1110
+ gap: "var(--sl-badge-gap-condense)",
1111
+ height: "var(--sl-badge-height-condense)",
1112
+ minWidth: "var(--sl-badge-height-condense)",
1113
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1114
+ borderRadius: "var(--sl-radius-pill)",
1115
+ borderWidth: "var(--sl-stroke-default)",
1116
+ borderStyle: "solid",
1117
+ background: "var(--sl-scope-secondary-soft)",
1118
+ color: "var(--sl-scope-secondary-on-soft)",
1119
+ borderColor: "var(--sl-scope-secondary-soft)",
1120
+ whiteSpace: "nowrap",
1121
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1122
+ "&:hover": {
1123
+ background: "var(--sl-scope-secondary-soft-hover)"
1124
+ },
1125
+ "&:active": {
1126
+ background: "var(--sl-scope-secondary-soft-active)"
1127
+ },
1128
+ "&.Mui-focusVisible": {
1129
+ outline: "var(--sl-focus-outline)",
1130
+ outlineOffset: "var(--sl-focus-outline-offset)",
1131
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1132
+ }
1133
+ }
1134
+ }
1135
+ },
1136
+ {
1137
+ props: {
1138
+ variant: "filled",
1139
+ color: "inherit"
1140
+ },
1141
+ style: {
1142
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1143
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1144
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1145
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1146
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1147
+ display: "inline-flex",
1148
+ alignItems: "center",
1149
+ justifyContent: "center",
1150
+ gap: "var(--sl-badge-gap-condense)",
1151
+ height: "var(--sl-badge-height-condense)",
1152
+ minWidth: "var(--sl-badge-height-condense)",
1153
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1154
+ borderRadius: "var(--sl-radius-pill)",
1155
+ borderWidth: "var(--sl-stroke-default)",
1156
+ borderStyle: "solid",
1157
+ background: "var(--sl-scope-chrome-soft)",
1158
+ color: "var(--sl-scope-chrome-on-soft)",
1159
+ borderColor: "var(--sl-scope-chrome-soft)",
1160
+ whiteSpace: "nowrap",
1161
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1162
+ "&:hover": {
1163
+ background: "var(--sl-scope-chrome-soft-hover)"
1164
+ },
1165
+ "&:active": {
1166
+ background: "var(--sl-scope-chrome-soft-active)"
1167
+ },
1168
+ "&.Mui-focusVisible": {
1169
+ outline: "var(--sl-focus-outline)",
1170
+ outlineOffset: "var(--sl-focus-outline-offset)",
1171
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1172
+ }
1173
+ }
1174
+ }
1175
+ },
1176
+ {
1177
+ props: {
1178
+ variant: "filled",
1179
+ color: "error"
1180
+ },
1181
+ style: {
1182
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1183
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1184
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1185
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1186
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1187
+ display: "inline-flex",
1188
+ alignItems: "center",
1189
+ justifyContent: "center",
1190
+ gap: "var(--sl-badge-gap-condense)",
1191
+ height: "var(--sl-badge-height-condense)",
1192
+ minWidth: "var(--sl-badge-height-condense)",
1193
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1194
+ borderRadius: "var(--sl-radius-pill)",
1195
+ borderWidth: "var(--sl-stroke-default)",
1196
+ borderStyle: "solid",
1197
+ background: "var(--sl-scope-error-soft)",
1198
+ color: "var(--sl-scope-error-on-soft)",
1199
+ borderColor: "var(--sl-scope-error-soft)",
1200
+ whiteSpace: "nowrap",
1201
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1202
+ "&:hover": {
1203
+ background: "var(--sl-scope-error-soft-hover)"
1204
+ },
1205
+ "&:active": {
1206
+ background: "var(--sl-scope-error-soft-active)"
1207
+ },
1208
+ "&.Mui-focusVisible": {
1209
+ outline: "var(--sl-focus-outline)",
1210
+ outlineOffset: "var(--sl-focus-outline-offset)",
1211
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1212
+ }
1213
+ }
1214
+ }
1215
+ },
1216
+ {
1217
+ props: {
1218
+ variant: "filled",
1219
+ color: "warning"
1220
+ },
1221
+ style: {
1222
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1223
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1224
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1225
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1226
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1227
+ display: "inline-flex",
1228
+ alignItems: "center",
1229
+ justifyContent: "center",
1230
+ gap: "var(--sl-badge-gap-condense)",
1231
+ height: "var(--sl-badge-height-condense)",
1232
+ minWidth: "var(--sl-badge-height-condense)",
1233
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1234
+ borderRadius: "var(--sl-radius-pill)",
1235
+ borderWidth: "var(--sl-stroke-default)",
1236
+ borderStyle: "solid",
1237
+ background: "var(--sl-scope-warning-soft)",
1238
+ color: "var(--sl-scope-warning-on-soft)",
1239
+ borderColor: "var(--sl-scope-warning-soft)",
1240
+ whiteSpace: "nowrap",
1241
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1242
+ "&:hover": {
1243
+ background: "var(--sl-scope-warning-soft-hover)"
1244
+ },
1245
+ "&:active": {
1246
+ background: "var(--sl-scope-warning-soft-active)"
1247
+ },
1248
+ "&.Mui-focusVisible": {
1249
+ outline: "var(--sl-focus-outline)",
1250
+ outlineOffset: "var(--sl-focus-outline-offset)",
1251
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1252
+ }
1253
+ }
1254
+ }
1255
+ },
1256
+ {
1257
+ props: {
1258
+ variant: "filled",
1259
+ color: "info"
1260
+ },
1261
+ style: {
1262
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1263
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1264
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1265
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1266
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1267
+ display: "inline-flex",
1268
+ alignItems: "center",
1269
+ justifyContent: "center",
1270
+ gap: "var(--sl-badge-gap-condense)",
1271
+ height: "var(--sl-badge-height-condense)",
1272
+ minWidth: "var(--sl-badge-height-condense)",
1273
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1274
+ borderRadius: "var(--sl-radius-pill)",
1275
+ borderWidth: "var(--sl-stroke-default)",
1276
+ borderStyle: "solid",
1277
+ background: "var(--sl-scope-info-soft)",
1278
+ color: "var(--sl-scope-info-on-soft)",
1279
+ borderColor: "var(--sl-scope-info-soft)",
1280
+ whiteSpace: "nowrap",
1281
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1282
+ "&:hover": {
1283
+ background: "var(--sl-scope-info-soft-hover)"
1284
+ },
1285
+ "&:active": {
1286
+ background: "var(--sl-scope-info-soft-active)"
1287
+ },
1288
+ "&.Mui-focusVisible": {
1289
+ outline: "var(--sl-focus-outline)",
1290
+ outlineOffset: "var(--sl-focus-outline-offset)",
1291
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1292
+ }
1293
+ }
1294
+ }
1295
+ },
1296
+ {
1297
+ props: {
1298
+ variant: "filled",
1299
+ color: "success"
1300
+ },
1301
+ style: {
1302
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1303
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1304
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1305
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1306
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1307
+ display: "inline-flex",
1308
+ alignItems: "center",
1309
+ justifyContent: "center",
1310
+ gap: "var(--sl-badge-gap-condense)",
1311
+ height: "var(--sl-badge-height-condense)",
1312
+ minWidth: "var(--sl-badge-height-condense)",
1313
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1314
+ borderRadius: "var(--sl-radius-pill)",
1315
+ borderWidth: "var(--sl-stroke-default)",
1316
+ borderStyle: "solid",
1317
+ background: "var(--sl-scope-success-soft)",
1318
+ color: "var(--sl-scope-success-on-soft)",
1319
+ borderColor: "var(--sl-scope-success-soft)",
1320
+ whiteSpace: "nowrap",
1321
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1322
+ "&:hover": {
1323
+ background: "var(--sl-scope-success-soft-hover)"
1324
+ },
1325
+ "&:active": {
1326
+ background: "var(--sl-scope-success-soft-active)"
1327
+ },
1328
+ "&.Mui-focusVisible": {
1329
+ outline: "var(--sl-focus-outline)",
1330
+ outlineOffset: "var(--sl-focus-outline-offset)",
1331
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1332
+ }
1333
+ }
1334
+ }
1335
+ },
1336
+ {
1337
+ props: {
1338
+ variant: "outlined",
1339
+ color: "default"
1340
+ },
1341
+ style: {
1342
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1343
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1344
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1345
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1346
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1347
+ display: "inline-flex",
1348
+ alignItems: "center",
1349
+ justifyContent: "center",
1350
+ gap: "var(--sl-badge-gap-condense)",
1351
+ height: "var(--sl-badge-height-condense)",
1352
+ minWidth: "var(--sl-badge-height-condense)",
1353
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1354
+ borderRadius: "var(--sl-radius-pill)",
1355
+ borderWidth: "var(--sl-stroke-default)",
1356
+ borderStyle: "solid",
1357
+ background: "transparent",
1358
+ color: "var(--sl-scope-accent-fg)",
1359
+ borderColor: "var(--sl-scope-accent-border)",
1360
+ whiteSpace: "nowrap",
1361
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1362
+ "&:hover": {
1363
+ background: "var(--sl-scope-accent-soft)"
1364
+ },
1365
+ "&:active": {
1366
+ background: "var(--sl-scope-accent-soft-hover)"
1367
+ },
1368
+ "&.Mui-focusVisible": {
1369
+ outline: "var(--sl-focus-outline)",
1370
+ outlineOffset: "var(--sl-focus-outline-offset)",
1371
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1372
+ }
1373
+ }
1374
+ }
1375
+ },
1376
+ {
1377
+ props: {
1378
+ variant: "outlined",
1379
+ color: "primary"
1380
+ },
1381
+ style: {
1382
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1383
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1384
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1385
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1386
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1387
+ display: "inline-flex",
1388
+ alignItems: "center",
1389
+ justifyContent: "center",
1390
+ gap: "var(--sl-badge-gap-condense)",
1391
+ height: "var(--sl-badge-height-condense)",
1392
+ minWidth: "var(--sl-badge-height-condense)",
1393
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1394
+ borderRadius: "var(--sl-radius-pill)",
1395
+ borderWidth: "var(--sl-stroke-default)",
1396
+ borderStyle: "solid",
1397
+ background: "transparent",
1398
+ color: "var(--sl-scope-accent-fg)",
1399
+ borderColor: "var(--sl-scope-accent-border)",
1400
+ whiteSpace: "nowrap",
1401
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1402
+ "&:hover": {
1403
+ background: "var(--sl-scope-accent-soft)"
1404
+ },
1405
+ "&:active": {
1406
+ background: "var(--sl-scope-accent-soft-hover)"
1407
+ },
1408
+ "&.Mui-focusVisible": {
1409
+ outline: "var(--sl-focus-outline)",
1410
+ outlineOffset: "var(--sl-focus-outline-offset)",
1411
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1412
+ }
1413
+ }
1414
+ }
1415
+ },
1416
+ {
1417
+ props: {
1418
+ variant: "outlined",
1419
+ color: "secondary"
1420
+ },
1421
+ style: {
1422
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1423
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1424
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1425
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1426
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1427
+ display: "inline-flex",
1428
+ alignItems: "center",
1429
+ justifyContent: "center",
1430
+ gap: "var(--sl-badge-gap-condense)",
1431
+ height: "var(--sl-badge-height-condense)",
1432
+ minWidth: "var(--sl-badge-height-condense)",
1433
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1434
+ borderRadius: "var(--sl-radius-pill)",
1435
+ borderWidth: "var(--sl-stroke-default)",
1436
+ borderStyle: "solid",
1437
+ background: "transparent",
1438
+ color: "var(--sl-scope-secondary-fg)",
1439
+ borderColor: "var(--sl-scope-secondary-border)",
1440
+ whiteSpace: "nowrap",
1441
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1442
+ "&:hover": {
1443
+ background: "var(--sl-scope-secondary-soft)"
1444
+ },
1445
+ "&:active": {
1446
+ background: "var(--sl-scope-secondary-soft-hover)"
1447
+ },
1448
+ "&.Mui-focusVisible": {
1449
+ outline: "var(--sl-focus-outline)",
1450
+ outlineOffset: "var(--sl-focus-outline-offset)",
1451
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1452
+ }
1453
+ }
1454
+ }
1455
+ },
1456
+ {
1457
+ props: {
1458
+ variant: "outlined",
1459
+ color: "inherit"
1460
+ },
1461
+ style: {
1462
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1463
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1464
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1465
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1466
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1467
+ display: "inline-flex",
1468
+ alignItems: "center",
1469
+ justifyContent: "center",
1470
+ gap: "var(--sl-badge-gap-condense)",
1471
+ height: "var(--sl-badge-height-condense)",
1472
+ minWidth: "var(--sl-badge-height-condense)",
1473
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1474
+ borderRadius: "var(--sl-radius-pill)",
1475
+ borderWidth: "var(--sl-stroke-default)",
1476
+ borderStyle: "solid",
1477
+ background: "transparent",
1478
+ color: "var(--sl-scope-chrome-fg)",
1479
+ borderColor: "var(--sl-scope-chrome-border)",
1480
+ whiteSpace: "nowrap",
1481
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1482
+ "&:hover": {
1483
+ background: "var(--sl-scope-chrome-soft)"
1484
+ },
1485
+ "&:active": {
1486
+ background: "var(--sl-scope-chrome-soft-hover)"
1487
+ },
1488
+ "&.Mui-focusVisible": {
1489
+ outline: "var(--sl-focus-outline)",
1490
+ outlineOffset: "var(--sl-focus-outline-offset)",
1491
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1492
+ }
1493
+ }
1494
+ }
1495
+ },
1496
+ {
1497
+ props: {
1498
+ variant: "outlined",
1499
+ color: "error"
1500
+ },
1501
+ style: {
1502
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1503
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1504
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1505
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1506
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1507
+ display: "inline-flex",
1508
+ alignItems: "center",
1509
+ justifyContent: "center",
1510
+ gap: "var(--sl-badge-gap-condense)",
1511
+ height: "var(--sl-badge-height-condense)",
1512
+ minWidth: "var(--sl-badge-height-condense)",
1513
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1514
+ borderRadius: "var(--sl-radius-pill)",
1515
+ borderWidth: "var(--sl-stroke-default)",
1516
+ borderStyle: "solid",
1517
+ background: "transparent",
1518
+ color: "var(--sl-scope-error-fg)",
1519
+ borderColor: "var(--sl-scope-error-border)",
1520
+ whiteSpace: "nowrap",
1521
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1522
+ "&:hover": {
1523
+ background: "var(--sl-scope-error-soft)"
1524
+ },
1525
+ "&:active": {
1526
+ background: "var(--sl-scope-error-soft-hover)"
1527
+ },
1528
+ "&.Mui-focusVisible": {
1529
+ outline: "var(--sl-focus-outline)",
1530
+ outlineOffset: "var(--sl-focus-outline-offset)",
1531
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1532
+ }
1533
+ }
1534
+ }
1535
+ },
1536
+ {
1537
+ props: {
1538
+ variant: "outlined",
1539
+ color: "warning"
1540
+ },
1541
+ style: {
1542
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1543
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1544
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1545
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1546
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1547
+ display: "inline-flex",
1548
+ alignItems: "center",
1549
+ justifyContent: "center",
1550
+ gap: "var(--sl-badge-gap-condense)",
1551
+ height: "var(--sl-badge-height-condense)",
1552
+ minWidth: "var(--sl-badge-height-condense)",
1553
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1554
+ borderRadius: "var(--sl-radius-pill)",
1555
+ borderWidth: "var(--sl-stroke-default)",
1556
+ borderStyle: "solid",
1557
+ background: "transparent",
1558
+ color: "var(--sl-scope-warning-fg)",
1559
+ borderColor: "var(--sl-scope-warning-border)",
1560
+ whiteSpace: "nowrap",
1561
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1562
+ "&:hover": {
1563
+ background: "var(--sl-scope-warning-soft)"
1564
+ },
1565
+ "&:active": {
1566
+ background: "var(--sl-scope-warning-soft-hover)"
1567
+ },
1568
+ "&.Mui-focusVisible": {
1569
+ outline: "var(--sl-focus-outline)",
1570
+ outlineOffset: "var(--sl-focus-outline-offset)",
1571
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1572
+ }
1573
+ }
1574
+ }
1575
+ },
1576
+ {
1577
+ props: {
1578
+ variant: "outlined",
1579
+ color: "info"
1580
+ },
1581
+ style: {
1582
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1583
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1584
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1585
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1586
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1587
+ display: "inline-flex",
1588
+ alignItems: "center",
1589
+ justifyContent: "center",
1590
+ gap: "var(--sl-badge-gap-condense)",
1591
+ height: "var(--sl-badge-height-condense)",
1592
+ minWidth: "var(--sl-badge-height-condense)",
1593
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1594
+ borderRadius: "var(--sl-radius-pill)",
1595
+ borderWidth: "var(--sl-stroke-default)",
1596
+ borderStyle: "solid",
1597
+ background: "transparent",
1598
+ color: "var(--sl-scope-info-fg)",
1599
+ borderColor: "var(--sl-scope-info-border)",
1600
+ whiteSpace: "nowrap",
1601
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1602
+ "&:hover": {
1603
+ background: "var(--sl-scope-info-soft)"
1604
+ },
1605
+ "&:active": {
1606
+ background: "var(--sl-scope-info-soft-hover)"
1607
+ },
1608
+ "&.Mui-focusVisible": {
1609
+ outline: "var(--sl-focus-outline)",
1610
+ outlineOffset: "var(--sl-focus-outline-offset)",
1611
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1612
+ }
1613
+ }
1614
+ }
1615
+ },
1616
+ {
1617
+ props: {
1618
+ variant: "outlined",
1619
+ color: "success"
1620
+ },
1621
+ style: {
1622
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1623
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1624
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1625
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1626
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1627
+ display: "inline-flex",
1628
+ alignItems: "center",
1629
+ justifyContent: "center",
1630
+ gap: "var(--sl-badge-gap-condense)",
1631
+ height: "var(--sl-badge-height-condense)",
1632
+ minWidth: "var(--sl-badge-height-condense)",
1633
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1634
+ borderRadius: "var(--sl-radius-pill)",
1635
+ borderWidth: "var(--sl-stroke-default)",
1636
+ borderStyle: "solid",
1637
+ background: "transparent",
1638
+ color: "var(--sl-scope-success-fg)",
1639
+ borderColor: "var(--sl-scope-success-border)",
1640
+ whiteSpace: "nowrap",
1641
+ "&.MuiChip-clickable, &.MuiChip-deletable": {
1642
+ "&:hover": {
1643
+ background: "var(--sl-scope-success-soft)"
1644
+ },
1645
+ "&:active": {
1646
+ background: "var(--sl-scope-success-soft-hover)"
1647
+ },
1648
+ "&.Mui-focusVisible": {
1649
+ outline: "var(--sl-focus-outline)",
1650
+ outlineOffset: "var(--sl-focus-outline-offset)",
1651
+ boxShadow: "0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)"
1652
+ }
1653
+ }
1654
+ }
1655
+ },
1656
+ {
1657
+ props: {
1658
+ size: "small"
1659
+ },
1660
+ style: {
1661
+ height: "var(--sl-badge-height-condense)",
1662
+ minWidth: "var(--sl-badge-height-condense)",
1663
+ paddingInline: "var(--sl-badge-padding-inline-condense)",
1664
+ gap: "var(--sl-badge-gap-condense)",
1665
+ fontFamily: "var(--sl-font-trigger-condense-font-family)",
1666
+ fontSize: "var(--sl-font-trigger-condense-font-size)",
1667
+ fontWeight: "var(--sl-font-trigger-condense-font-weight)",
1668
+ lineHeight: "var(--sl-font-trigger-condense-line-height)",
1669
+ letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)",
1670
+ "& .MuiChip-icon": {
1671
+ width: "var(--sl-icon-size-condense)",
1672
+ height: "var(--sl-icon-size-condense)"
1673
+ }
1674
+ }
1675
+ },
1676
+ {
1677
+ props: {
1678
+ size: "medium"
1679
+ },
1680
+ style: {
1681
+ height: "var(--sl-badge-height-base)",
1682
+ minWidth: "var(--sl-badge-height-base)",
1683
+ paddingInline: "var(--sl-badge-padding-inline-base)",
1684
+ gap: "var(--sl-badge-gap-base)",
1685
+ fontFamily: "var(--sl-font-trigger-base-font-family)",
1686
+ fontSize: "var(--sl-font-trigger-base-font-size)",
1687
+ fontWeight: "var(--sl-font-trigger-base-font-weight)",
1688
+ lineHeight: "var(--sl-font-trigger-base-line-height)",
1689
+ letterSpacing: "var(--sl-font-trigger-base-letter-spacing)",
1690
+ "& .MuiChip-icon": {
1691
+ width: "var(--sl-icon-size-base)",
1692
+ height: "var(--sl-icon-size-base)"
1693
+ }
1694
+ }
1695
+ }
1696
+ ]
1697
+ }
1698
+ }
1699
+ },
973
1700
  MuiIconButton: {
974
1701
  styleOverrides: {
975
1702
  root: {