@seed-design/css 0.0.19 → 0.0.21

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/all.css +32 -13
  2. package/all.min.css +1 -1
  3. package/package.json +3 -3
  4. package/recipes/action-button.css +8 -0
  5. package/recipes/action-chip.css +3 -1
  6. package/recipes/app-bar.css +8 -8
  7. package/recipes/bottom-sheet.css +1 -1
  8. package/recipes/control-chip.css +3 -1
  9. package/recipes/dialog.css +1 -1
  10. package/recipes/extended-fab.css +2 -0
  11. package/recipes/reaction-button.css +2 -1
  12. package/recipes/toggle-button.css +4 -0
  13. package/vars/component/bottom-sheet.d.ts +1 -1
  14. package/vars/component/bottom-sheet.mjs +1 -1
  15. package/vars/component/control-chip.d.ts +4 -2
  16. package/vars/component/control-chip.mjs +4 -2
  17. package/vars/component/dialog.d.ts +1 -1
  18. package/vars/component/dialog.mjs +1 -1
  19. package/vars/component/top-navigation.d.ts +2 -2
  20. package/vars/component/top-navigation.mjs +2 -2
package/all.css CHANGED
@@ -805,11 +805,15 @@
805
805
  box-sizing: border-box;
806
806
  cursor: pointer;
807
807
  text-transform: none;
808
+ white-space: nowrap;
809
+ vertical-align: middle;
808
810
  -webkit-font-smoothing: antialiased;
809
811
  -moz-osx-font-smoothing: grayscale;
810
812
  --seed-box-flex-grow: initial;
811
813
  flex-shrink: 0;
812
814
  flex-grow: var(--seed-box-flex-grow);
815
+ --seed-box-min-width: var(--seed-box-min-width);
816
+ min-width: var(--seed-box-min-width);
813
817
  border: none;
814
818
  justify-content: center;
815
819
  align-items: center;
@@ -1041,6 +1045,7 @@
1041
1045
  padding-inline: var(--seed-dimension-x3_5);
1042
1046
  padding-block: var(--seed-dimension-x1_5);
1043
1047
  font-size: var(--seed-font-size-t4);
1048
+ line-height: var(--seed-line-height-t4);
1044
1049
  }
1045
1050
 
1046
1051
  .seed-action-button--size_xsmall-layout_iconOnly {
@@ -1054,6 +1059,7 @@
1054
1059
  padding-inline: var(--seed-dimension-x3_5);
1055
1060
  padding-block: var(--seed-dimension-x2);
1056
1061
  font-size: var(--seed-font-size-t4);
1062
+ line-height: var(--seed-line-height-t4);
1057
1063
  }
1058
1064
 
1059
1065
  .seed-action-button--size_small-layout_iconOnly {
@@ -1067,6 +1073,7 @@
1067
1073
  padding-inline: var(--seed-dimension-x4);
1068
1074
  padding-block: var(--seed-dimension-x2_5);
1069
1075
  font-size: var(--seed-font-size-t4);
1076
+ line-height: var(--seed-line-height-t4);
1070
1077
  }
1071
1078
 
1072
1079
  .seed-action-button--size_medium-layout_iconOnly {
@@ -1080,6 +1087,7 @@
1080
1087
  padding-inline: var(--seed-dimension-x5);
1081
1088
  padding-block: var(--seed-dimension-x3_5);
1082
1089
  font-size: var(--seed-font-size-t6);
1090
+ line-height: var(--seed-line-height-t6);
1083
1091
  }
1084
1092
 
1085
1093
  .seed-action-button--size_large-layout_iconOnly {
@@ -1092,6 +1100,8 @@
1092
1100
  box-sizing: border-box;
1093
1101
  cursor: pointer;
1094
1102
  text-transform: none;
1103
+ white-space: nowrap;
1104
+ vertical-align: middle;
1095
1105
  -webkit-font-smoothing: antialiased;
1096
1106
  -moz-osx-font-smoothing: grayscale;
1097
1107
  border: none;
@@ -1208,6 +1218,7 @@
1208
1218
  padding-inline: var(--seed-dimension-x3_5);
1209
1219
  padding-block: var(--seed-dimension-x1_5);
1210
1220
  font-size: var(--seed-font-size-t4);
1221
+ line-height: var(--seed-line-height-t4);
1211
1222
  --size: 14px;
1212
1223
  --thickness: 2px;
1213
1224
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
@@ -1221,6 +1232,7 @@
1221
1232
  padding-inline: var(--seed-dimension-x4);
1222
1233
  padding-block: var(--seed-dimension-x2);
1223
1234
  font-size: var(--seed-font-size-t4);
1235
+ line-height: var(--seed-line-height-t4);
1224
1236
  --size: 14px;
1225
1237
  --thickness: 2px;
1226
1238
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
@@ -1231,6 +1243,8 @@
1231
1243
  box-sizing: border-box;
1232
1244
  cursor: pointer;
1233
1245
  text-transform: none;
1246
+ white-space: nowrap;
1247
+ vertical-align: middle;
1234
1248
  -webkit-font-smoothing: antialiased;
1235
1249
  -moz-osx-font-smoothing: grayscale;
1236
1250
  border: none;
@@ -1254,7 +1268,6 @@
1254
1268
  color: var(--seed-color-fg-neutral);
1255
1269
  --track-color: var(--seed-color-palette-gray-500);
1256
1270
  --range-color: var(--seed-color-fg-neutral);
1257
- --seed-count-line-height: 1px;
1258
1271
  --seed-count-font-weight: var(--seed-font-weight-bold);
1259
1272
  --seed-count-color: var(--seed-color-fg-neutral);
1260
1273
  }
@@ -1368,7 +1381,7 @@
1368
1381
  box-sizing: border-box;
1369
1382
  word-break: break-all;
1370
1383
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1371
- background: var(--seed-color-bg-layer-default);
1384
+ background: var(--seed-color-bg-layer-floating);
1372
1385
  border-top-left-radius: var(--seed-radius-r6);
1373
1386
  border-top-right-radius: var(--seed-radius-r6);
1374
1387
  flex-direction: column;
@@ -1858,6 +1871,8 @@
1858
1871
  box-sizing: border-box;
1859
1872
  cursor: pointer;
1860
1873
  text-transform: none;
1874
+ white-space: nowrap;
1875
+ vertical-align: middle;
1861
1876
  -webkit-font-smoothing: antialiased;
1862
1877
  -moz-osx-font-smoothing: grayscale;
1863
1878
  border: none;
@@ -2165,7 +2180,7 @@
2165
2180
  box-sizing: border-box;
2166
2181
  word-break: break-all;
2167
2182
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
2168
- background: var(--seed-color-bg-layer-default);
2183
+ background: var(--seed-color-bg-layer-floating);
2169
2184
  max-width: 272px;
2170
2185
  margin: auto var(--seed-dimension-x8);
2171
2186
  border-radius: var(--seed-radius-r5);
@@ -2403,6 +2418,7 @@
2403
2418
  cursor: pointer;
2404
2419
  text-transform: none;
2405
2420
  text-align: start;
2421
+ white-space: nowrap;
2406
2422
  -webkit-font-smoothing: antialiased;
2407
2423
  -moz-osx-font-smoothing: grayscale;
2408
2424
  font-family: inherit;
@@ -2414,7 +2430,6 @@
2414
2430
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
2415
2431
  --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
2416
2432
  --seed-icon-color: var(--seed-color-fg-neutral);
2417
- --seed-count-line-height: 1px;
2418
2433
  --seed-count-font-weight: var(--seed-font-weight-medium);
2419
2434
  --seed-count-color: var(--seed-color-fg-neutral-muted);
2420
2435
  border: none;
@@ -2446,6 +2461,7 @@
2446
2461
  padding-block: var(--seed-dimension-x2);
2447
2462
  gap: var(--seed-dimension-x1);
2448
2463
  font-size: var(--seed-font-size-t4);
2464
+ line-height: var(--seed-line-height-t4);
2449
2465
  --seed-count-font-size: var(--seed-font-size-t4);
2450
2466
  --seed-prefix-icon-size: var(--seed-dimension-x4);
2451
2467
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
@@ -2457,6 +2473,7 @@
2457
2473
  padding-block: var(--seed-dimension-x1_5);
2458
2474
  gap: var(--seed-dimension-x1);
2459
2475
  font-size: var(--seed-font-size-t4);
2476
+ line-height: var(--seed-line-height-t4);
2460
2477
  --seed-count-font-size: var(--seed-font-size-t4);
2461
2478
  --seed-prefix-icon-size: var(--seed-dimension-x4);
2462
2479
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
@@ -2484,6 +2501,7 @@
2484
2501
  cursor: pointer;
2485
2502
  text-transform: none;
2486
2503
  text-align: start;
2504
+ white-space: nowrap;
2487
2505
  -webkit-font-smoothing: antialiased;
2488
2506
  -moz-osx-font-smoothing: grayscale;
2489
2507
  border-radius: var(--seed-radius-full);
@@ -2494,7 +2512,6 @@
2494
2512
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
2495
2513
  --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
2496
2514
  --seed-icon-color: var(--seed-color-fg-neutral);
2497
- --seed-count-line-height: 1px;
2498
2515
  --seed-count-font-weight: var(--seed-font-weight-medium);
2499
2516
  --seed-count-color: var(--seed-color-fg-neutral-muted);
2500
2517
  border: none;
@@ -2541,6 +2558,7 @@
2541
2558
  padding-block: var(--seed-dimension-x2);
2542
2559
  gap: var(--seed-dimension-x1);
2543
2560
  font-size: var(--seed-font-size-t4);
2561
+ line-height: var(--seed-line-height-t4);
2544
2562
  --seed-prefix-icon-size: var(--seed-dimension-x4);
2545
2563
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
2546
2564
  --seed-icon-size: var(--seed-dimension-x4);
@@ -2552,6 +2570,7 @@
2552
2570
  padding-block: var(--seed-dimension-x1_5);
2553
2571
  gap: var(--seed-dimension-x1);
2554
2572
  font-size: var(--seed-font-size-t4);
2573
+ line-height: var(--seed-line-height-t4);
2555
2574
  --seed-prefix-icon-size: var(--seed-dimension-x4);
2556
2575
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
2557
2576
  --seed-icon-size: var(--seed-dimension-x4);
@@ -4809,16 +4828,16 @@
4809
4828
  }
4810
4829
 
4811
4830
  .seed-app-bar__iconButton--theme_cupertino {
4812
- width: 40px;
4813
- height: 40px;
4831
+ width: 44px;
4832
+ height: 44px;
4814
4833
  }
4815
4834
 
4816
4835
  .seed-app-bar__iconButton--theme_cupertino:first-child {
4817
- margin-left: -8px;
4836
+ margin-left: -10px;
4818
4837
  }
4819
4838
 
4820
4839
  .seed-app-bar__iconButton--theme_cupertino:last-child {
4821
- margin-right: -8px;
4840
+ margin-right: -10px;
4822
4841
  }
4823
4842
 
4824
4843
  .seed-app-bar__icon--theme_cupertino {
@@ -4832,16 +4851,16 @@
4832
4851
  }
4833
4852
 
4834
4853
  .seed-app-bar__iconButton--theme_android {
4835
- width: 40px;
4836
- height: 40px;
4854
+ width: 44px;
4855
+ height: 44px;
4837
4856
  }
4838
4857
 
4839
4858
  .seed-app-bar__iconButton--theme_android:first-child {
4840
- margin-left: -8px;
4859
+ margin-left: -10px;
4841
4860
  }
4842
4861
 
4843
4862
  .seed-app-bar__iconButton--theme_android:last-child {
4844
- margin-right: -8px;
4863
+ margin-right: -10px;
4845
4864
  }
4846
4865
 
4847
4866
  .seed-app-bar__icon--theme_android {