@seed-design/css 1.1.12 → 1.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 (27) hide show
  1. package/all.css +17 -6
  2. package/all.min.css +1 -1
  3. package/base.css +8 -0
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/action-button.css +2 -2
  7. package/recipes/app-bar-main.css +1 -0
  8. package/recipes/contextual-floating-button.css +1 -1
  9. package/recipes/floating-action-button.css +1 -1
  10. package/recipes/menu-sheet-item.css +1 -0
  11. package/recipes/segmented-control.css +1 -0
  12. package/recipes/toggle-button.css +2 -2
  13. package/vars/component/action-button.d.ts +2 -2
  14. package/vars/component/action-button.mjs +2 -2
  15. package/vars/component/contextual-floating-button.d.ts +1 -1
  16. package/vars/component/contextual-floating-button.mjs +1 -1
  17. package/vars/component/floating-action-button.d.ts +1 -1
  18. package/vars/component/floating-action-button.mjs +1 -1
  19. package/vars/component/radiomark.d.ts +30 -14
  20. package/vars/component/radiomark.mjs +30 -14
  21. package/vars/component/toggle-button.d.ts +2 -2
  22. package/vars/component/toggle-button.mjs +2 -2
  23. package/vars/index.d.ts +2 -0
  24. package/vars/shadow.d.ts +3 -0
  25. package/vars/shadow.mjs +3 -0
  26. package/vars/vars.d.ts +2 -1
  27. package/vars/vars.mjs +2 -1
package/all.css CHANGED
@@ -152,6 +152,8 @@
152
152
  border-bottom-right-radius: var(--seed-box-border-bottom-right-radius);
153
153
  border-top-left-radius: var(--seed-box-border-top-left-radius);
154
154
  border-top-right-radius: var(--seed-box-border-top-right-radius);
155
+ --seed-box-box-shadow: initial;
156
+ box-shadow: var(--seed-box-box-shadow);
155
157
  --seed-box-display: block;
156
158
  --seed-box-position: initial;
157
159
  display: var(--seed-box-display);
@@ -505,6 +507,9 @@
505
507
  --seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f58a 46%, #fff9f58a 54%, #fff9f500 100%;
506
508
  --seed-gradient-highlight-magic-pressed: #e14f00 20%, #ae58bf 100%;
507
509
  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
510
+ --seed-shadow-s1: 0px 1px 4px 0px #00000014;
511
+ --seed-shadow-s2: 0px 2px 10px 0px #0000001a;
512
+ --seed-shadow-s3: 0px 4px 16px 0px #0000001f;
508
513
  }
509
514
 
510
515
  :root[data-seed-color-mode="system"][data-seed-user-color-scheme="dark"], :root[data-seed-color-mode="dark-only"], :root [data-seed-color-mode="dark-only"] {
@@ -700,6 +705,9 @@
700
705
  --seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;
701
706
  --seed-gradient-highlight-magic-pressed: #ff9e65 20%, #e89bee 100%;
702
707
  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
708
+ --seed-shadow-s1: 0px 1px 4px 0px #00000080;
709
+ --seed-shadow-s2: 0px 2px 10px 0px #000000ad;
710
+ --seed-shadow-s3: 0px 4px 16px 0px #000c;
703
711
  }
704
712
 
705
713
  .seed-action-button {
@@ -997,8 +1005,8 @@
997
1005
  --seed-box-padding-right: var(--seed-dimension-x3_5);
998
1006
  --seed-box-padding-top: var(--seed-dimension-x1_5);
999
1007
  --seed-box-padding-bottom: var(--seed-dimension-x1_5);
1000
- font-size: var(--seed-font-size-t4);
1001
- line-height: var(--seed-line-height-t4);
1008
+ font-size: var(--seed-font-size-t3);
1009
+ line-height: var(--seed-line-height-t3);
1002
1010
  }
1003
1011
 
1004
1012
  .seed-action-button--size_xsmall-layout_iconOnly {
@@ -1637,6 +1645,7 @@
1637
1645
  justify-content: flex-start;
1638
1646
  align-items: center;
1639
1647
  width: 100%;
1648
+ min-width: 0;
1640
1649
  height: 100%;
1641
1650
  display: flex;
1642
1651
  }
@@ -3527,6 +3536,7 @@
3527
3536
 
3528
3537
  .seed-contextual-floating-button {
3529
3538
  border-radius: var(--seed-radius-full);
3539
+ box-shadow: var(--seed-shadow-s3);
3530
3540
  font-size: var(--seed-font-size-t4);
3531
3541
  line-height: var(--seed-line-height-t4);
3532
3542
  font-weight: var(--seed-font-weight-medium);
@@ -3546,7 +3556,6 @@
3546
3556
  --size: 16px;
3547
3557
  --thickness: 2px;
3548
3558
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
3549
- box-shadow: 0 2px 6px #00000026;
3550
3559
  }
3551
3560
 
3552
3561
  .seed-contextual-floating-button--variant_solid {
@@ -4242,6 +4251,7 @@
4242
4251
  .seed-floating-action-button__root {
4243
4252
  background: var(--seed-color-bg-brand-solid);
4244
4253
  border-radius: var(--seed-radius-full);
4254
+ box-shadow: var(--seed-shadow-s3);
4245
4255
  color: var(--seed-color-palette-static-white);
4246
4256
  font-size: var(--seed-font-size-t5);
4247
4257
  line-height: var(--seed-line-height-t5);
@@ -4249,7 +4259,6 @@
4249
4259
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing);
4250
4260
  position: relative;
4251
4261
  overflow: hidden;
4252
- box-shadow: 0 2px 6px #00000026;
4253
4262
  }
4254
4263
 
4255
4264
  .seed-floating-action-button__root:is(:active, [data-active]) {
@@ -5182,6 +5191,7 @@
5182
5191
  font-weight: var(--seed-font-weight-regular);
5183
5192
  border: none;
5184
5193
  outline: none;
5194
+ margin: 0;
5185
5195
  font-family: inherit;
5186
5196
  display: flex;
5187
5197
  }
@@ -5887,6 +5897,7 @@
5887
5897
  border-radius: var(--seed-radius-full);
5888
5898
  background-color: var(--seed-color-bg-neutral-weak);
5889
5899
  isolation: isolate;
5900
+ grid-auto-rows: 1fr;
5890
5901
  grid-auto-columns: 1fr;
5891
5902
  grid-auto-flow: column;
5892
5903
  align-items: center;
@@ -7448,8 +7459,8 @@
7448
7459
  padding-right: var(--seed-dimension-x3_5);
7449
7460
  padding-top: var(--seed-dimension-x1_5);
7450
7461
  padding-bottom: var(--seed-dimension-x1_5);
7451
- font-size: var(--seed-font-size-t4);
7452
- line-height: var(--seed-line-height-t4);
7462
+ font-size: var(--seed-font-size-t3);
7463
+ line-height: var(--seed-line-height-t3);
7453
7464
  --size: 14px;
7454
7465
  --thickness: 2px;
7455
7466
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);