@seed-design/css 0.0.17 → 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 +35 -13
  2. package/all.min.css +1 -1
  3. package/package.json +7 -3
  4. package/recipes/action-button.css +9 -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 +3 -1
  12. package/recipes/toggle-button.css +5 -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,17 +805,22 @@
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;
816
820
  font-family: inherit;
817
821
  text-decoration: none;
818
822
  display: inline-flex;
823
+ position: relative;
819
824
  }
820
825
 
821
826
  .seed-action-button:is(:focus, [data-focus]) {
@@ -1040,6 +1045,7 @@
1040
1045
  padding-inline: var(--seed-dimension-x3_5);
1041
1046
  padding-block: var(--seed-dimension-x1_5);
1042
1047
  font-size: var(--seed-font-size-t4);
1048
+ line-height: var(--seed-line-height-t4);
1043
1049
  }
1044
1050
 
1045
1051
  .seed-action-button--size_xsmall-layout_iconOnly {
@@ -1053,6 +1059,7 @@
1053
1059
  padding-inline: var(--seed-dimension-x3_5);
1054
1060
  padding-block: var(--seed-dimension-x2);
1055
1061
  font-size: var(--seed-font-size-t4);
1062
+ line-height: var(--seed-line-height-t4);
1056
1063
  }
1057
1064
 
1058
1065
  .seed-action-button--size_small-layout_iconOnly {
@@ -1066,6 +1073,7 @@
1066
1073
  padding-inline: var(--seed-dimension-x4);
1067
1074
  padding-block: var(--seed-dimension-x2_5);
1068
1075
  font-size: var(--seed-font-size-t4);
1076
+ line-height: var(--seed-line-height-t4);
1069
1077
  }
1070
1078
 
1071
1079
  .seed-action-button--size_medium-layout_iconOnly {
@@ -1079,6 +1087,7 @@
1079
1087
  padding-inline: var(--seed-dimension-x5);
1080
1088
  padding-block: var(--seed-dimension-x3_5);
1081
1089
  font-size: var(--seed-font-size-t6);
1090
+ line-height: var(--seed-line-height-t6);
1082
1091
  }
1083
1092
 
1084
1093
  .seed-action-button--size_large-layout_iconOnly {
@@ -1091,6 +1100,8 @@
1091
1100
  box-sizing: border-box;
1092
1101
  cursor: pointer;
1093
1102
  text-transform: none;
1103
+ white-space: nowrap;
1104
+ vertical-align: middle;
1094
1105
  -webkit-font-smoothing: antialiased;
1095
1106
  -moz-osx-font-smoothing: grayscale;
1096
1107
  border: none;
@@ -1100,6 +1111,7 @@
1100
1111
  font-family: inherit;
1101
1112
  text-decoration: none;
1102
1113
  display: inline-flex;
1114
+ position: relative;
1103
1115
  }
1104
1116
 
1105
1117
  .seed-toggle-button:is(:focus, [data-focus]) {
@@ -1206,6 +1218,7 @@
1206
1218
  padding-inline: var(--seed-dimension-x3_5);
1207
1219
  padding-block: var(--seed-dimension-x1_5);
1208
1220
  font-size: var(--seed-font-size-t4);
1221
+ line-height: var(--seed-line-height-t4);
1209
1222
  --size: 14px;
1210
1223
  --thickness: 2px;
1211
1224
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
@@ -1219,6 +1232,7 @@
1219
1232
  padding-inline: var(--seed-dimension-x4);
1220
1233
  padding-block: var(--seed-dimension-x2);
1221
1234
  font-size: var(--seed-font-size-t4);
1235
+ line-height: var(--seed-line-height-t4);
1222
1236
  --size: 14px;
1223
1237
  --thickness: 2px;
1224
1238
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
@@ -1229,6 +1243,8 @@
1229
1243
  box-sizing: border-box;
1230
1244
  cursor: pointer;
1231
1245
  text-transform: none;
1246
+ white-space: nowrap;
1247
+ vertical-align: middle;
1232
1248
  -webkit-font-smoothing: antialiased;
1233
1249
  -moz-osx-font-smoothing: grayscale;
1234
1250
  border: none;
@@ -1238,6 +1254,7 @@
1238
1254
  font-family: inherit;
1239
1255
  text-decoration: none;
1240
1256
  display: inline-flex;
1257
+ position: relative;
1241
1258
  }
1242
1259
 
1243
1260
  .seed-reaction-button:is(:focus, [data-focus]) {
@@ -1251,7 +1268,6 @@
1251
1268
  color: var(--seed-color-fg-neutral);
1252
1269
  --track-color: var(--seed-color-palette-gray-500);
1253
1270
  --range-color: var(--seed-color-fg-neutral);
1254
- --seed-count-line-height: 1px;
1255
1271
  --seed-count-font-weight: var(--seed-font-weight-bold);
1256
1272
  --seed-count-color: var(--seed-color-fg-neutral);
1257
1273
  }
@@ -1365,7 +1381,7 @@
1365
1381
  box-sizing: border-box;
1366
1382
  word-break: break-all;
1367
1383
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1368
- background: var(--seed-color-bg-layer-default);
1384
+ background: var(--seed-color-bg-layer-floating);
1369
1385
  border-top-left-radius: var(--seed-radius-r6);
1370
1386
  border-top-right-radius: var(--seed-radius-r6);
1371
1387
  flex-direction: column;
@@ -1855,6 +1871,8 @@
1855
1871
  box-sizing: border-box;
1856
1872
  cursor: pointer;
1857
1873
  text-transform: none;
1874
+ white-space: nowrap;
1875
+ vertical-align: middle;
1858
1876
  -webkit-font-smoothing: antialiased;
1859
1877
  -moz-osx-font-smoothing: grayscale;
1860
1878
  border: none;
@@ -2162,7 +2180,7 @@
2162
2180
  box-sizing: border-box;
2163
2181
  word-break: break-all;
2164
2182
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
2165
- background: var(--seed-color-bg-layer-default);
2183
+ background: var(--seed-color-bg-layer-floating);
2166
2184
  max-width: 272px;
2167
2185
  margin: auto var(--seed-dimension-x8);
2168
2186
  border-radius: var(--seed-radius-r5);
@@ -2400,6 +2418,7 @@
2400
2418
  cursor: pointer;
2401
2419
  text-transform: none;
2402
2420
  text-align: start;
2421
+ white-space: nowrap;
2403
2422
  -webkit-font-smoothing: antialiased;
2404
2423
  -moz-osx-font-smoothing: grayscale;
2405
2424
  font-family: inherit;
@@ -2411,7 +2430,6 @@
2411
2430
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
2412
2431
  --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
2413
2432
  --seed-icon-color: var(--seed-color-fg-neutral);
2414
- --seed-count-line-height: 1px;
2415
2433
  --seed-count-font-weight: var(--seed-font-weight-medium);
2416
2434
  --seed-count-color: var(--seed-color-fg-neutral-muted);
2417
2435
  border: none;
@@ -2443,6 +2461,7 @@
2443
2461
  padding-block: var(--seed-dimension-x2);
2444
2462
  gap: var(--seed-dimension-x1);
2445
2463
  font-size: var(--seed-font-size-t4);
2464
+ line-height: var(--seed-line-height-t4);
2446
2465
  --seed-count-font-size: var(--seed-font-size-t4);
2447
2466
  --seed-prefix-icon-size: var(--seed-dimension-x4);
2448
2467
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
@@ -2454,6 +2473,7 @@
2454
2473
  padding-block: var(--seed-dimension-x1_5);
2455
2474
  gap: var(--seed-dimension-x1);
2456
2475
  font-size: var(--seed-font-size-t4);
2476
+ line-height: var(--seed-line-height-t4);
2457
2477
  --seed-count-font-size: var(--seed-font-size-t4);
2458
2478
  --seed-prefix-icon-size: var(--seed-dimension-x4);
2459
2479
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
@@ -2481,6 +2501,7 @@
2481
2501
  cursor: pointer;
2482
2502
  text-transform: none;
2483
2503
  text-align: start;
2504
+ white-space: nowrap;
2484
2505
  -webkit-font-smoothing: antialiased;
2485
2506
  -moz-osx-font-smoothing: grayscale;
2486
2507
  border-radius: var(--seed-radius-full);
@@ -2491,7 +2512,6 @@
2491
2512
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
2492
2513
  --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
2493
2514
  --seed-icon-color: var(--seed-color-fg-neutral);
2494
- --seed-count-line-height: 1px;
2495
2515
  --seed-count-font-weight: var(--seed-font-weight-medium);
2496
2516
  --seed-count-color: var(--seed-color-fg-neutral-muted);
2497
2517
  border: none;
@@ -2538,6 +2558,7 @@
2538
2558
  padding-block: var(--seed-dimension-x2);
2539
2559
  gap: var(--seed-dimension-x1);
2540
2560
  font-size: var(--seed-font-size-t4);
2561
+ line-height: var(--seed-line-height-t4);
2541
2562
  --seed-prefix-icon-size: var(--seed-dimension-x4);
2542
2563
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
2543
2564
  --seed-icon-size: var(--seed-dimension-x4);
@@ -2549,6 +2570,7 @@
2549
2570
  padding-block: var(--seed-dimension-x1_5);
2550
2571
  gap: var(--seed-dimension-x1);
2551
2572
  font-size: var(--seed-font-size-t4);
2573
+ line-height: var(--seed-line-height-t4);
2552
2574
  --seed-prefix-icon-size: var(--seed-dimension-x4);
2553
2575
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
2554
2576
  --seed-icon-size: var(--seed-dimension-x4);
@@ -4806,16 +4828,16 @@
4806
4828
  }
4807
4829
 
4808
4830
  .seed-app-bar__iconButton--theme_cupertino {
4809
- width: 40px;
4810
- height: 40px;
4831
+ width: 44px;
4832
+ height: 44px;
4811
4833
  }
4812
4834
 
4813
4835
  .seed-app-bar__iconButton--theme_cupertino:first-child {
4814
- margin-left: -8px;
4836
+ margin-left: -10px;
4815
4837
  }
4816
4838
 
4817
4839
  .seed-app-bar__iconButton--theme_cupertino:last-child {
4818
- margin-right: -8px;
4840
+ margin-right: -10px;
4819
4841
  }
4820
4842
 
4821
4843
  .seed-app-bar__icon--theme_cupertino {
@@ -4829,16 +4851,16 @@
4829
4851
  }
4830
4852
 
4831
4853
  .seed-app-bar__iconButton--theme_android {
4832
- width: 40px;
4833
- height: 40px;
4854
+ width: 44px;
4855
+ height: 44px;
4834
4856
  }
4835
4857
 
4836
4858
  .seed-app-bar__iconButton--theme_android:first-child {
4837
- margin-left: -8px;
4859
+ margin-left: -10px;
4838
4860
  }
4839
4861
 
4840
4862
  .seed-app-bar__iconButton--theme_android:last-child {
4841
- margin-right: -8px;
4863
+ margin-right: -10px;
4842
4864
  }
4843
4865
 
4844
4866
  .seed-app-bar__icon--theme_android {