@seed-design/css 0.1.14 → 0.1.15

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 (14) hide show
  1. package/all.css +55 -27
  2. package/all.min.css +1 -1
  3. package/base.css +52 -23
  4. package/base.min.css +1 -1
  5. package/package.json +2 -2
  6. package/recipes/inline-banner.css +1 -2
  7. package/recipes/page-banner.css +1 -2
  8. package/recipes/snackbar.css +1 -0
  9. package/vars/component/snackbar.d.ts +1 -0
  10. package/vars/component/snackbar.mjs +1 -0
  11. package/vars/font-size.d.ts +8 -1
  12. package/vars/font-size.mjs +8 -1
  13. package/vars/line-height.d.ts +11 -1
  14. package/vars/line-height.mjs +11 -1
package/all.css CHANGED
@@ -19,6 +19,15 @@
19
19
 
20
20
  :root {
21
21
  --seed-font-size-multiplier: 1;
22
+ --seed-font-size-limit-min: .8;
23
+ --seed-font-size-limit-max: 1.5;
24
+ --seed-line-height-limit-min: .8;
25
+ --seed-line-height-limit-max: 1.5;
26
+ }
27
+
28
+ [data-seed-platform="ios"] {
29
+ --seed-font-size-limit-max: 1.35;
30
+ --seed-line-height-limit-max: 1.35;
22
31
  }
23
32
 
24
33
  @supports (font: -apple-system-body) {
@@ -49,20 +58,23 @@
49
58
  .seed-prefix-icon {
50
59
  width: var(--seed-prefix-icon-size);
51
60
  height: var(--seed-prefix-icon-size);
61
+ color: var(--seed-prefix-icon-color, currentColor);
52
62
  margin-left: var(--seed-prefix-icon-margin-left);
53
63
  margin-right: var(--seed-prefix-icon-margin-right);
54
64
  margin-top: var(--seed-prefix-icon-margin-top);
55
- color: var(--seed-prefix-icon-color, currentColor);
65
+ align-self: var(--seed-prefix-icon-align-self);
66
+ justify-self: var(--seed-prefix-icon-justify-self);
56
67
  }
57
68
 
58
69
  .seed-suffix-icon {
59
70
  width: var(--seed-suffix-icon-size);
60
71
  height: var(--seed-suffix-icon-size);
72
+ color: var(--seed-suffix-icon-color, currentColor);
61
73
  margin-left: var(--seed-suffix-icon-margin-left);
62
74
  margin-right: var(--seed-suffix-icon-margin-right);
63
75
  margin-top: var(--seed-suffix-icon-margin-top);
64
- margin-bottom: var(--seed-suffix-icon-margin-bottom);
65
- color: var(--seed-suffix-icon-color, currentColor);
76
+ align-self: var(--seed-suffix-icon-align-self);
77
+ justify-self: var(--seed-suffix-icon-justify-self);
66
78
  }
67
79
 
68
80
  .seed-count {
@@ -235,32 +247,49 @@
235
247
  --seed-duration-d4: .2s;
236
248
  --seed-duration-d5: .25s;
237
249
  --seed-duration-d6: .3s;
238
- --seed-font-size-t1: clamp(8.8px, calc(.6875rem * var(--seed-font-size-multiplier)), 13.98px);
239
- --seed-font-size-t2: clamp(9.6px, calc(.75rem * var(--seed-font-size-multiplier)), 15.25px);
240
- --seed-font-size-t3: clamp(10.4px, calc(.8125rem * var(--seed-font-size-multiplier)), 16.52px);
241
- --seed-font-size-t4: clamp(11.2px, calc(.875rem * var(--seed-font-size-multiplier)), 17.79px);
242
- --seed-font-size-t5: clamp(12.8px, calc(1rem * var(--seed-font-size-multiplier)), 20.33px);
243
- --seed-font-size-t6: clamp(14.4px, calc(1.125rem * var(--seed-font-size-multiplier)), 22.87px);
244
- --seed-font-size-t7: clamp(16px, calc(1.25rem * var(--seed-font-size-multiplier)), 25.41px);
245
- --seed-font-size-t8: clamp(17.6px, calc(1.375rem * var(--seed-font-size-multiplier)), 27.95px);
246
- --seed-font-size-t9: clamp(19.2px, calc(1.5rem * var(--seed-font-size-multiplier)), 30.49px);
247
- --seed-font-size-t10: clamp(20.8px, calc(1.625rem * var(--seed-font-size-multiplier)), 33.04px);
250
+ --seed-font-size-t1: clamp(calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-min, .8)), calc(.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-max, 1.5)));
251
+ --seed-font-size-t2: clamp(calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-min, .8)), calc(.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-max, 1.5)));
252
+ --seed-font-size-t3: clamp(calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-min, .8)), calc(.8125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-max, 1.5)));
253
+ --seed-font-size-t4: clamp(calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-min, .8)), calc(.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-max, 1.5)));
254
+ --seed-font-size-t5: clamp(calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-min, .8)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-max, 1.5)));
255
+ --seed-font-size-t6: clamp(calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-min, .8)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-max, 1.5)));
256
+ --seed-font-size-t7: clamp(calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-min, .8)), calc(1.25rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-max, 1.5)));
257
+ --seed-font-size-t8: clamp(calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-min, .8)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-max, 1.5)));
258
+ --seed-font-size-t9: clamp(calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-min, .8)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-max, 1.5)));
259
+ --seed-font-size-t10: clamp(calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-min, .8)), calc(1.625rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-max, 1.5)));
260
+ --seed-font-size-t1-static: 11px;
248
261
  --seed-font-size-t2-static: 12px;
262
+ --seed-font-size-t3-static: 13px;
263
+ --seed-font-size-t4-static: 14px;
249
264
  --seed-font-size-t5-static: 16px;
250
265
  --seed-font-size-t6-static: 18px;
266
+ --seed-font-size-t7-static: 20px;
267
+ --seed-font-size-t8-static: 22px;
268
+ --seed-font-size-t9-static: 24px;
269
+ --seed-font-size-t10-static: 26px;
251
270
  --seed-font-weight-regular: 400;
252
271
  --seed-font-weight-medium: 500;
253
272
  --seed-font-weight-bold: 700;
254
- --seed-line-height-t1: clamp(12px, calc(.9375rem * var(--seed-font-size-multiplier)), 19.06px);
255
- --seed-line-height-t2: clamp(12.8px, calc(1rem * var(--seed-font-size-multiplier)), 20.33px);
256
- --seed-line-height-t3: clamp(14.4px, calc(1.125rem * var(--seed-font-size-multiplier)), 22.87px);
257
- --seed-line-height-t4: clamp(15.2px, calc(1.1875rem * var(--seed-font-size-multiplier)), 24.14px);
258
- --seed-line-height-t5: clamp(17.6px, calc(1.375rem * var(--seed-font-size-multiplier)), 27.95px);
259
- --seed-line-height-t6: clamp(19.2px, calc(1.5rem * var(--seed-font-size-multiplier)), 30.49px);
260
- --seed-line-height-t7: clamp(21.6px, calc(1.6875rem * var(--seed-font-size-multiplier)), 34.31px);
261
- --seed-line-height-t8: clamp(24px, calc(1.875rem * var(--seed-font-size-multiplier)), 38.12px);
262
- --seed-line-height-t9: clamp(25.6px, calc(2rem * var(--seed-font-size-multiplier)), 40.66px);
263
- --seed-line-height-t10: clamp(28px, calc(2.1875rem * var(--seed-font-size-multiplier)), 44.47px);
273
+ --seed-line-height-t1: clamp(calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-min, .8)), calc(.9375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-max, 1.5)));
274
+ --seed-line-height-t2: clamp(calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-min, .8)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-max, 1.5)));
275
+ --seed-line-height-t3: clamp(calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-min, .8)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-max, 1.5)));
276
+ --seed-line-height-t4: clamp(calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-min, .8)), calc(1.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-max, 1.5)));
277
+ --seed-line-height-t5: clamp(calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-min, .8)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-max, 1.5)));
278
+ --seed-line-height-t6: clamp(calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-min, .8)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-max, 1.5)));
279
+ --seed-line-height-t7: clamp(calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-min, .8)), calc(1.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-max, 1.5)));
280
+ --seed-line-height-t8: clamp(calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-min, .8)), calc(1.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-max, 1.5)));
281
+ --seed-line-height-t9: clamp(calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-min, .8)), calc(2rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-max, 1.5)));
282
+ --seed-line-height-t10: clamp(calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-min, .8)), calc(2.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-max, 1.5)));
283
+ --seed-line-height-t1-static: 15px;
284
+ --seed-line-height-t2-static: 16px;
285
+ --seed-line-height-t3-static: 18px;
286
+ --seed-line-height-t4-static: 19px;
287
+ --seed-line-height-t5-static: 22px;
288
+ --seed-line-height-t6-static: 24px;
289
+ --seed-line-height-t7-static: 27px;
290
+ --seed-line-height-t8-static: 30px;
291
+ --seed-line-height-t9-static: 32px;
292
+ --seed-line-height-t10-static: 35px;
264
293
  --seed-radius-r0_5: 2px;
265
294
  --seed-radius-r1: 4px;
266
295
  --seed-radius-r1_5: 6px;
@@ -3943,8 +3972,7 @@
3943
3972
  --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
3944
3973
  --seed-suffix-icon-size: var(--seed-dimension-x4);
3945
3974
  --seed-suffix-icon-margin-left: var(--seed-dimension-x4);
3946
- --seed-suffix-icon-margin-top: auto;
3947
- --seed-suffix-icon-margin-bottom: auto;
3975
+ --seed-suffix-icon-align-self: center;
3948
3976
  border: none;
3949
3977
  align-items: flex-start;
3950
3978
  font-family: inherit;
@@ -4475,8 +4503,7 @@
4475
4503
  --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
4476
4504
  --seed-suffix-icon-size: var(--seed-dimension-x4);
4477
4505
  --seed-suffix-icon-margin-left: var(--seed-dimension-x2);
4478
- --seed-suffix-icon-margin-top: auto;
4479
- --seed-suffix-icon-margin-bottom: auto;
4506
+ --seed-suffix-icon-align-self: center;
4480
4507
  border: none;
4481
4508
  align-items: flex-start;
4482
4509
  font-family: inherit;
@@ -5187,6 +5214,7 @@
5187
5214
  background: var(--seed-color-bg-neutral-solid);
5188
5215
  border-radius: var(--seed-radius-r2);
5189
5216
  width: 100%;
5217
+ max-width: 560px;
5190
5218
  padding-inline: var(--seed-dimension-x4);
5191
5219
  padding-block: var(--seed-dimension-x2_5);
5192
5220
  justify-content: space-between;