@seed-design/css 1.1.12 → 1.1.13

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 (24) hide show
  1. package/all.css +14 -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/contextual-floating-button.css +1 -1
  8. package/recipes/floating-action-button.css +1 -1
  9. package/recipes/toggle-button.css +2 -2
  10. package/vars/component/action-button.d.ts +2 -2
  11. package/vars/component/action-button.mjs +2 -2
  12. package/vars/component/contextual-floating-button.d.ts +1 -1
  13. package/vars/component/contextual-floating-button.mjs +1 -1
  14. package/vars/component/floating-action-button.d.ts +1 -1
  15. package/vars/component/floating-action-button.mjs +1 -1
  16. package/vars/component/radiomark.d.ts +30 -14
  17. package/vars/component/radiomark.mjs +30 -14
  18. package/vars/component/toggle-button.d.ts +2 -2
  19. package/vars/component/toggle-button.mjs +2 -2
  20. package/vars/index.d.ts +2 -0
  21. package/vars/shadow.d.ts +3 -0
  22. package/vars/shadow.mjs +3 -0
  23. package/vars/vars.d.ts +2 -1
  24. 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 {
@@ -3527,6 +3535,7 @@
3527
3535
 
3528
3536
  .seed-contextual-floating-button {
3529
3537
  border-radius: var(--seed-radius-full);
3538
+ box-shadow: var(--seed-shadow-s3);
3530
3539
  font-size: var(--seed-font-size-t4);
3531
3540
  line-height: var(--seed-line-height-t4);
3532
3541
  font-weight: var(--seed-font-weight-medium);
@@ -3546,7 +3555,6 @@
3546
3555
  --size: 16px;
3547
3556
  --thickness: 2px;
3548
3557
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
3549
- box-shadow: 0 2px 6px #00000026;
3550
3558
  }
3551
3559
 
3552
3560
  .seed-contextual-floating-button--variant_solid {
@@ -4242,6 +4250,7 @@
4242
4250
  .seed-floating-action-button__root {
4243
4251
  background: var(--seed-color-bg-brand-solid);
4244
4252
  border-radius: var(--seed-radius-full);
4253
+ box-shadow: var(--seed-shadow-s3);
4245
4254
  color: var(--seed-color-palette-static-white);
4246
4255
  font-size: var(--seed-font-size-t5);
4247
4256
  line-height: var(--seed-line-height-t5);
@@ -4249,7 +4258,6 @@
4249
4258
  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
4259
  position: relative;
4251
4260
  overflow: hidden;
4252
- box-shadow: 0 2px 6px #00000026;
4253
4261
  }
4254
4262
 
4255
4263
  .seed-floating-action-button__root:is(:active, [data-active]) {
@@ -7448,8 +7456,8 @@
7448
7456
  padding-right: var(--seed-dimension-x3_5);
7449
7457
  padding-top: var(--seed-dimension-x1_5);
7450
7458
  padding-bottom: var(--seed-dimension-x1_5);
7451
- font-size: var(--seed-font-size-t4);
7452
- line-height: var(--seed-line-height-t4);
7459
+ font-size: var(--seed-font-size-t3);
7460
+ line-height: var(--seed-line-height-t3);
7453
7461
  --size: 14px;
7454
7462
  --thickness: 2px;
7455
7463
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);