@mond-design-system/react 1.1.0 → 2.0.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 (9) hide show
  1. package/dist/index.cjs +8 -8
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +78 -12
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.cts +5 -3
  6. package/dist/index.d.ts +5 -3
  7. package/dist/index.js +8 -8
  8. package/dist/index.js.map +1 -1
  9. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -135,7 +135,7 @@
135
135
  align-items: center;
136
136
  justify-content: center;
137
137
  gap: var(--mds-gap-tight);
138
- border: var(--mds-border-width) solid transparent;
138
+ border: var(--mds-border-emphasis) solid transparent;
139
139
  border-radius: var(--mds-radius-control);
140
140
  font-family: var(--mds-font-body);
141
141
  font-weight: var(--mds-weight-semibold);
@@ -149,16 +149,32 @@
149
149
  height: var(--mds-control-h-sm);
150
150
  padding: 0 var(--mds-pad-button-sm);
151
151
  font-size: var(--mds-text-button-sm);
152
+ --mds-icon-slot: var(--mds-icon-sm);
152
153
  }
153
154
  .mds-Button__size-md {
154
155
  height: var(--mds-control-h-md);
155
156
  padding: 0 var(--mds-pad-button-md);
156
157
  font-size: var(--mds-text-button-md);
158
+ --mds-icon-slot: var(--mds-icon-md);
157
159
  }
158
160
  .mds-Button__size-lg {
159
161
  height: var(--mds-control-h-lg);
160
162
  padding: 0 var(--mds-pad-button-lg);
161
163
  font-size: var(--mds-text-button-lg);
164
+ --mds-icon-slot: var(--mds-icon-lg);
165
+ }
166
+ .mds-Button__slot {
167
+ display: inline-flex;
168
+ align-items: center;
169
+ justify-content: center;
170
+ flex: none;
171
+ width: var(--mds-icon-slot);
172
+ height: var(--mds-icon-slot);
173
+ font-size: var(--mds-icon-slot);
174
+ }
175
+ .mds-Button__slot > svg {
176
+ width: 100%;
177
+ height: 100%;
162
178
  }
163
179
  .mds-Button__variant-primary {
164
180
  background: var(--mds-action-bg);
@@ -172,7 +188,7 @@
172
188
  }
173
189
  .mds-Button__variant-secondary {
174
190
  background: transparent;
175
- color: var(--mds-text-primary);
191
+ color: var(--mds-button-secondary-fg);
176
192
  border-color: var(--mds-button-border);
177
193
  }
178
194
  .mds-Button__variant-ghost {
@@ -287,8 +303,8 @@ button.mds-Link__link {
287
303
  border-radius: var(--mds-radius-avatar);
288
304
  background: var(--mds-surface-sunken);
289
305
  color: var(--mds-text-secondary);
290
- font-family: var(--mds-font-body);
291
- font-weight: var(--mds-weight-semibold);
306
+ font-family: var(--mds-font-display);
307
+ font-weight: var(--mds-weight-medium);
292
308
  user-select: none;
293
309
  }
294
310
  .mds-Avatar__size-xs {
@@ -371,27 +387,27 @@ button.mds-Link__link {
371
387
  .mds-AvatarGroup__size-xs {
372
388
  width: var(--mds-avatar-xs);
373
389
  height: var(--mds-avatar-xs);
374
- font-size: var(--mds-avatar-text-xs);
390
+ font-size: calc(var(--mds-avatar-xs) * var(--mds-avatar-count-ratio));
375
391
  }
376
392
  .mds-AvatarGroup__size-sm {
377
393
  width: var(--mds-avatar-sm);
378
394
  height: var(--mds-avatar-sm);
379
- font-size: var(--mds-avatar-text-sm);
395
+ font-size: calc(var(--mds-avatar-sm) * var(--mds-avatar-count-ratio));
380
396
  }
381
397
  .mds-AvatarGroup__size-md {
382
398
  width: var(--mds-avatar-md);
383
399
  height: var(--mds-avatar-md);
384
- font-size: var(--mds-avatar-text-md);
400
+ font-size: calc(var(--mds-avatar-md) * var(--mds-avatar-count-ratio));
385
401
  }
386
402
  .mds-AvatarGroup__size-lg {
387
403
  width: var(--mds-avatar-lg);
388
404
  height: var(--mds-avatar-lg);
389
- font-size: var(--mds-avatar-text-lg);
405
+ font-size: calc(var(--mds-avatar-lg) * var(--mds-avatar-count-ratio));
390
406
  }
391
407
  .mds-AvatarGroup__size-xl {
392
408
  width: var(--mds-avatar-xl);
393
409
  height: var(--mds-avatar-xl);
394
- font-size: var(--mds-avatar-text-xl);
410
+ font-size: calc(var(--mds-avatar-xl) * var(--mds-avatar-count-ratio));
395
411
  }
396
412
 
397
413
  /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Badge/Badge.module.css?mds-scoped */
@@ -444,6 +460,20 @@ button.mds-Link__link {
444
460
  cursor: default;
445
461
  transition: var(--mds-transition-control);
446
462
  }
463
+ .mds-Chip__icon {
464
+ --mds-icon-slot: 1em;
465
+ display: inline-flex;
466
+ align-items: center;
467
+ justify-content: center;
468
+ flex: none;
469
+ width: var(--mds-icon-slot);
470
+ height: var(--mds-icon-slot);
471
+ font-size: var(--mds-icon-slot);
472
+ }
473
+ .mds-Chip__icon > svg {
474
+ width: 100%;
475
+ height: 100%;
476
+ }
447
477
  .mds-Chip__variant-soft {
448
478
  background: var(--mds-accent-soft);
449
479
  border: var(--mds-border-width) solid transparent;
@@ -982,13 +1012,23 @@ button.mds-Link__link {
982
1012
  width: 100%;
983
1013
  }
984
1014
  .mds-Input__icon {
1015
+ --mds-icon-slot: var(--mds-icon-md);
985
1016
  position: absolute;
986
1017
  top: 50%;
987
1018
  transform: translateY(-50%);
988
1019
  display: inline-flex;
1020
+ align-items: center;
1021
+ justify-content: center;
1022
+ width: var(--mds-icon-slot);
1023
+ height: var(--mds-icon-slot);
1024
+ font-size: var(--mds-icon-slot);
989
1025
  color: var(--mds-text-muted);
990
1026
  pointer-events: none;
991
1027
  }
1028
+ .mds-Input__icon > svg {
1029
+ width: 100%;
1030
+ height: 100%;
1031
+ }
992
1032
  .mds-Input__iconLeft {
993
1033
  left: var(--mds-pad-control-md);
994
1034
  }
@@ -1076,7 +1116,6 @@ button.mds-Link__link {
1076
1116
  align-items: center;
1077
1117
  gap: var(--mds-gap-tight);
1078
1118
  cursor: pointer;
1079
- min-height: var(--mds-tap-min);
1080
1119
  }
1081
1120
  .mds-Checkbox__root:has(.mds-Checkbox__box:disabled) {
1082
1121
  cursor: not-allowed;
@@ -1095,6 +1134,7 @@ button.mds-Link__link {
1095
1134
  place-content: center;
1096
1135
  cursor: inherit;
1097
1136
  transition: var(--mds-transition-control);
1137
+ position: relative;
1098
1138
  }
1099
1139
  .mds-Checkbox__box:checked {
1100
1140
  background: var(--mds-action-bg);
@@ -1123,6 +1163,15 @@ button.mds-Link__link {
1123
1163
  .mds-Checkbox__box:disabled ~ .mds-Checkbox__label {
1124
1164
  color: var(--mds-action-disabled-fg);
1125
1165
  }
1166
+ .mds-Checkbox__box::before {
1167
+ content: "";
1168
+ position: absolute;
1169
+ top: 50%;
1170
+ left: 50%;
1171
+ translate: -50% -50%;
1172
+ width: max(100%, var(--mds-tap-min));
1173
+ height: max(100%, var(--mds-tap-min));
1174
+ }
1126
1175
 
1127
1176
  /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Radio/Radio.module.css?mds-scoped */
1128
1177
  .mds-Radio__root {
@@ -1130,7 +1179,6 @@ button.mds-Link__link {
1130
1179
  align-items: center;
1131
1180
  gap: var(--mds-gap-tight);
1132
1181
  cursor: pointer;
1133
- min-height: var(--mds-tap-min);
1134
1182
  }
1135
1183
  .mds-Radio__root:has(.mds-Radio__dot:disabled) {
1136
1184
  cursor: not-allowed;
@@ -1148,6 +1196,7 @@ button.mds-Link__link {
1148
1196
  place-content: center;
1149
1197
  cursor: inherit;
1150
1198
  transition: var(--mds-transition-control);
1199
+ position: relative;
1151
1200
  }
1152
1201
  .mds-Radio__dot:checked {
1153
1202
  border-color: var(--mds-action-bg);
@@ -1173,6 +1222,15 @@ button.mds-Link__link {
1173
1222
  .mds-Radio__dot:disabled ~ .mds-Radio__label {
1174
1223
  color: var(--mds-action-disabled-fg);
1175
1224
  }
1225
+ .mds-Radio__dot::before {
1226
+ content: "";
1227
+ position: absolute;
1228
+ top: 50%;
1229
+ left: 50%;
1230
+ translate: -50% -50%;
1231
+ width: max(100%, var(--mds-tap-min));
1232
+ height: max(100%, var(--mds-tap-min));
1233
+ }
1176
1234
 
1177
1235
  /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Switch/Switch.module.css?mds-scoped */
1178
1236
  .mds-Switch__root {
@@ -1180,7 +1238,6 @@ button.mds-Link__link {
1180
1238
  align-items: center;
1181
1239
  gap: var(--mds-gap-tight);
1182
1240
  cursor: pointer;
1183
- min-height: var(--mds-tap-min);
1184
1241
  }
1185
1242
  .mds-Switch__root:has(.mds-Switch__track:disabled) {
1186
1243
  cursor: not-allowed;
@@ -1241,6 +1298,15 @@ button.mds-Link__link {
1241
1298
  .mds-Switch__root:has(.mds-Switch__track:disabled) .mds-Switch__label {
1242
1299
  color: var(--mds-action-disabled-fg);
1243
1300
  }
1301
+ .mds-Switch__track::before {
1302
+ content: "";
1303
+ position: absolute;
1304
+ top: 50%;
1305
+ left: 50%;
1306
+ translate: -50% -50%;
1307
+ width: max(100%, var(--mds-tap-min));
1308
+ height: max(100%, var(--mds-tap-min));
1309
+ }
1244
1310
 
1245
1311
  /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SegmentedControl/SegmentedControl.module.css?mds-scoped */
1246
1312
  .mds-SegmentedControl__group {