@seed-design/css 0.0.19 → 0.0.23

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 (21) hide show
  1. package/all.css +40 -18
  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-main.css +5 -4
  7. package/recipes/app-bar.css +13 -11
  8. package/recipes/bottom-sheet.css +1 -1
  9. package/recipes/control-chip.css +3 -1
  10. package/recipes/dialog.css +1 -1
  11. package/recipes/extended-fab.css +2 -0
  12. package/recipes/reaction-button.css +2 -1
  13. package/recipes/toggle-button.css +4 -0
  14. package/vars/component/bottom-sheet.d.ts +1 -1
  15. package/vars/component/bottom-sheet.mjs +1 -1
  16. package/vars/component/control-chip.d.ts +4 -2
  17. package/vars/component/control-chip.mjs +4 -2
  18. package/vars/component/dialog.d.ts +1 -1
  19. package/vars/component/dialog.mjs +1 -1
  20. package/vars/component/top-navigation.d.ts +2 -2
  21. 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);
@@ -4763,12 +4782,12 @@
4763
4782
 
4764
4783
  .seed-app-bar__root {
4765
4784
  z-index: var(--z-index-app-bar);
4766
- top: var(--seed-safe-area-top);
4767
4785
  box-sizing: border-box;
4768
4786
  align-items: flex-end;
4769
4787
  width: 100%;
4770
4788
  display: flex;
4771
4789
  position: absolute;
4790
+ top: 0;
4772
4791
  }
4773
4792
 
4774
4793
  .seed-app-bar__root:before {
@@ -4804,21 +4823,22 @@
4804
4823
  }
4805
4824
 
4806
4825
  .seed-app-bar__root--theme_cupertino {
4807
- height: 44px;
4826
+ height: calc(44px + var(--seed-safe-area-top));
4808
4827
  padding-inline: var(--seed-dimension-x4);
4828
+ padding-top: var(--seed-safe-area-top);
4809
4829
  }
4810
4830
 
4811
4831
  .seed-app-bar__iconButton--theme_cupertino {
4812
- width: 40px;
4813
- height: 40px;
4832
+ width: 44px;
4833
+ height: 44px;
4814
4834
  }
4815
4835
 
4816
4836
  .seed-app-bar__iconButton--theme_cupertino:first-child {
4817
- margin-left: -8px;
4837
+ margin-left: -10px;
4818
4838
  }
4819
4839
 
4820
4840
  .seed-app-bar__iconButton--theme_cupertino:last-child {
4821
- margin-right: -8px;
4841
+ margin-right: -10px;
4822
4842
  }
4823
4843
 
4824
4844
  .seed-app-bar__icon--theme_cupertino {
@@ -4827,21 +4847,22 @@
4827
4847
  }
4828
4848
 
4829
4849
  .seed-app-bar__root--theme_android {
4830
- height: 56px;
4850
+ height: calc(56px + var(--seed-safe-area-top));
4831
4851
  padding-inline: var(--seed-dimension-x4);
4852
+ padding-top: var(--seed-safe-area-top);
4832
4853
  }
4833
4854
 
4834
4855
  .seed-app-bar__iconButton--theme_android {
4835
- width: 40px;
4836
- height: 40px;
4856
+ width: 44px;
4857
+ height: 44px;
4837
4858
  }
4838
4859
 
4839
4860
  .seed-app-bar__iconButton--theme_android:first-child {
4840
- margin-left: -8px;
4861
+ margin-left: -10px;
4841
4862
  }
4842
4863
 
4843
4864
  .seed-app-bar__iconButton--theme_android:last-child {
4844
- margin-right: -8px;
4865
+ margin-right: -10px;
4845
4866
  }
4846
4867
 
4847
4868
  .seed-app-bar__icon--theme_android {
@@ -4986,7 +5007,6 @@
4986
5007
 
4987
5008
  .seed-app-bar-main__root {
4988
5009
  flex: 1;
4989
- height: 100%;
4990
5010
  }
4991
5011
 
4992
5012
  .seed-app-bar-main__title, .seed-app-bar-main__subtitle {
@@ -5012,13 +5032,14 @@
5012
5032
 
5013
5033
  .seed-app-bar-main__root--theme_cupertino {
5014
5034
  text-align: center;
5015
- height: 100%;
5035
+ top: var(--seed-safe-area-top);
5016
5036
  padding-inline: var(--centered-title-padding-x, 0);
5017
5037
  pointer-events: none;
5018
5038
  justify-content: center;
5019
5039
  align-items: center;
5020
5040
  display: flex;
5021
5041
  position: absolute;
5042
+ bottom: 0;
5022
5043
  left: 0;
5023
5044
  right: 0;
5024
5045
  }
@@ -5027,6 +5048,7 @@
5027
5048
  justify-content: flex-start;
5028
5049
  align-items: center;
5029
5050
  width: 100%;
5051
+ height: 100%;
5030
5052
  display: flex;
5031
5053
  }
5032
5054