@seed-design/css 1.1.10 → 1.1.13

package/all.css

@@ -115,10 +115,10 @@
   padding-bottom: var(--seed-box-padding-bottom);
   padding-left: var(--seed-box-padding-left);
   padding-right: var(--seed-box-padding-right);
-  --seed-box-bleed-bottom: initial;
-  --seed-box-bleed-top: initial;
-  --seed-box-bleed-left: initial;
-  --seed-box-bleed-right: initial;
+  --seed-box-bleed-bottom: 0px;
+  --seed-box-bleed-top: 0px;
+  --seed-box-bleed-left: 0px;
+  --seed-box-bleed-right: 0px;
   margin-top: calc(var(--seed-box-bleed-top) * -1);
   margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
   margin-left: calc(var(--seed-box-bleed-left) * -1);
@@ -152,6 +152,8 @@
   border-bottom-right-radius: var(--seed-box-border-bottom-right-radius);
   border-top-left-radius: var(--seed-box-border-top-left-radius);
   border-top-right-radius: var(--seed-box-border-top-right-radius);
+  --seed-box-box-shadow: initial;
+  box-shadow: var(--seed-box-box-shadow);
   --seed-box-display: block;
   --seed-box-position: initial;
   display: var(--seed-box-display);
@@ -505,6 +507,9 @@
   --seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f58a 46%, #fff9f58a 54%, #fff9f500 100%;
   --seed-gradient-highlight-magic-pressed: #e14f00 20%, #ae58bf 100%;
   --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
+  --seed-shadow-s1: 0px 1px 4px 0px #00000014;
+  --seed-shadow-s2: 0px 2px 10px 0px #0000001a;
+  --seed-shadow-s3: 0px 4px 16px 0px #0000001f;
 }
 
 :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 @@
   --seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;
   --seed-gradient-highlight-magic-pressed: #ff9e65 20%, #e89bee 100%;
   --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
+  --seed-shadow-s1: 0px 1px 4px 0px #00000080;
+  --seed-shadow-s2: 0px 2px 10px 0px #000000ad;
+  --seed-shadow-s3: 0px 4px 16px 0px #000c;
 }
 
 .seed-action-button {
@@ -723,10 +731,10 @@
   padding-bottom: var(--seed-box-padding-bottom);
   padding-left: var(--seed-box-padding-left);
   padding-right: var(--seed-box-padding-right);
-  --seed-box-bleed-bottom: initial;
-  --seed-box-bleed-top: initial;
-  --seed-box-bleed-left: initial;
-  --seed-box-bleed-right: initial;
+  --seed-box-bleed-bottom: 0px;
+  --seed-box-bleed-top: 0px;
+  --seed-box-bleed-left: 0px;
+  --seed-box-bleed-right: 0px;
   margin-top: calc(var(--seed-box-bleed-top) * -1);
   margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
   margin-left: calc(var(--seed-box-bleed-left) * -1);
@@ -997,8 +1005,8 @@
   --seed-box-padding-right: var(--seed-dimension-x3_5);
   --seed-box-padding-top: var(--seed-dimension-x1_5);
   --seed-box-padding-bottom: var(--seed-dimension-x1_5);
-  font-size: var(--seed-font-size-t4);
-  line-height: var(--seed-line-height-t4);
+  font-size: var(--seed-font-size-t3);
+  line-height: var(--seed-line-height-t3);
 }
 
 .seed-action-button--size_xsmall-layout_iconOnly {
@@ -2398,7 +2406,7 @@
 }
 
 .seed-badge__root--size_medium {
-  max-width: 7.5rem;
+  max-width: clamp(calc(108px * var(--seed-font-size-limit-min)), 7.5rem, calc(108px * var(--seed-font-size-limit-max)));
   min-height: var(--seed-dimension-x5);
   padding-left: var(--seed-dimension-x1_5);
   padding-right: var(--seed-dimension-x1_5);
@@ -2410,7 +2418,7 @@
 }
 
 .seed-badge__root--size_large {
-  max-width: 6.75rem;
+  max-width: clamp(calc(120px * var(--seed-font-size-limit-min)), 6.75rem, calc(120px * var(--seed-font-size-limit-max)));
   min-height: var(--seed-dimension-x6);
   padding-left: var(--seed-dimension-x2);
   padding-right: var(--seed-dimension-x2);
@@ -2537,18 +2545,6 @@
   inset: 0;
 }
 
-.seed-bottom-sheet__backdrop:is([data-state="open"], [data-open])[data-snap-points="false"] {
-  animation-name: fade-in;
-  animation-duration: var(--seed-duration-d6);
-  animation-timing-function: var(--seed-timing-function-enter);
-}
-
-.seed-bottom-sheet__backdrop:not(:is([data-state="open"], [data-open]))[data-snap-points="false"] {
-  animation-name: fade-out;
-  animation-duration: var(--seed-duration-d4);
-  animation-timing-function: var(--seed-timing-function-exit);
-}
-
 .seed-bottom-sheet__backdrop[data-snap-points="true"], .seed-bottom-sheet__backdrop:not(:is([data-state="open"], [data-open]))[data-snap-points="true"]:not([data-snap-points-overlay="true"]) {
   opacity: 0;
 }
@@ -2557,12 +2553,6 @@
   opacity: 1;
 }
 
-.seed-bottom-sheet__backdrop:is([data-state="open"], [data-open])[data-snap-points="true"][data-should-overlay-animate="true"] {
-  animation-name: fade-in;
-  animation-duration: var(--seed-duration-d6);
-  animation-timing-function: var(--seed-timing-function-enter);
-}
-
 .seed-bottom-sheet__content {
   box-sizing: border-box;
   word-break: break-all;
@@ -2573,36 +2563,16 @@
   touch-action: none;
   will-change: transform;
   transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
-  animation-duration: var(--seed-duration-d6);
-  animation-timing-function: var(--seed-timing-function-enter-expressive);
   flex-direction: column;
   flex: 1;
   display: flex;
   position: relative;
 }
 
-.seed-bottom-sheet__content:is([data-state="open"], [data-open])[data-snap-points="false"] {
-  animation-name: drawer-slide-from-bottom;
-  animation-duration: var(--seed-duration-d6);
-  animation-timing-function: var(--seed-timing-function-enter-expressive);
-}
-
-.seed-bottom-sheet__content:not(:is([data-state="open"], [data-open]))[data-snap-points="false"] {
-  animation-name: drawer-slide-to-bottom;
-  animation-duration: var(--seed-duration-d4);
-  animation-timing-function: var(--seed-timing-function-exit);
-}
-
 .seed-bottom-sheet__content[data-snap-points="true"] {
   transform: translate3d(0, var(--initial-transform, 100%), 0);
 }
 
-.seed-bottom-sheet__content:is([data-state="open"], [data-open])[data-delayed-snap-points="true"] {
-  animation-name: drawer-slide-from-bottom;
-  animation-duration: var(--seed-duration-d6);
-  animation-timing-function: var(--seed-timing-function-enter-expressive);
-}
-
 .seed-bottom-sheet__content[data-delayed-snap-points="true"] {
   transform: translate3d(0, var(--snap-point-height, 0), 0);
 }
@@ -2705,6 +2675,47 @@
   padding-right: 50px;
 }
 
+.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"] {
+  animation-name: fade-in;
+  animation-duration: var(--seed-duration-d6);
+  animation-timing-function: var(--seed-timing-function-enter);
+}
+
+.seed-bottom-sheet__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open]))[data-snap-points="false"] {
+  animation-name: fade-out;
+  animation-duration: var(--seed-duration-d4);
+  animation-timing-function: var(--seed-timing-function-exit);
+}
+
+.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="true"][data-should-overlay-animate="true"] {
+  animation-name: fade-in;
+  animation-duration: var(--seed-duration-d6);
+  animation-timing-function: var(--seed-timing-function-enter);
+}
+
+.seed-bottom-sheet__content--skipAnimation_false {
+  animation-duration: var(--seed-duration-d6);
+  animation-timing-function: var(--seed-timing-function-enter-expressive);
+}
+
+.seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"] {
+  animation-name: drawer-slide-from-bottom;
+  animation-duration: var(--seed-duration-d6);
+  animation-timing-function: var(--seed-timing-function-enter-expressive);
+}
+
+.seed-bottom-sheet__content--skipAnimation_false:not(:is([data-state="open"], [data-open]))[data-snap-points="false"] {
+  animation-name: drawer-slide-to-bottom;
+  animation-duration: var(--seed-duration-d4);
+  animation-timing-function: var(--seed-timing-function-exit);
+}
+
+.seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-delayed-snap-points="true"] {
+  animation-name: drawer-slide-from-bottom;
+  animation-duration: var(--seed-duration-d6);
+  animation-timing-function: var(--seed-timing-function-enter-expressive);
+}
+
 .seed-bottom-sheet-handle__root {
   background-color: var(--seed-color-palette-gray-400);
   width: 36px;
@@ -3524,6 +3535,7 @@
 
 .seed-contextual-floating-button {
   border-radius: var(--seed-radius-full);
+  box-shadow: var(--seed-shadow-s3);
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
   font-weight: var(--seed-font-weight-medium);
@@ -3543,7 +3555,6 @@
   --size: 16px;
   --thickness: 2px;
   transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-  box-shadow: 0 2px 6px #00000026;
 }
 
 .seed-contextual-floating-button--variant_solid {
@@ -3726,27 +3737,6 @@
   inset: 0;
 }
 
-.seed-dialog__backdrop:is([data-state="open"], [data-open]) {
-  animation: seed-enter;
-  animation-timing-function: var(--seed-timing-function-enter);
-  animation-duration: var(--seed-duration-d2);
-  --seed-enter-translate-x: 0;
-  --seed-enter-translate-y: 0;
-  --seed-enter-opacity: 0;
-  --seed-enter-scale: 1;
-}
-
-.seed-dialog__backdrop:not(:is([data-state="open"], [data-open])) {
-  animation: seed-exit;
-  animation-timing-function: var(--seed-timing-function-exit);
-  animation-duration: var(--seed-duration-d2);
-  --seed-exit-translate-x: 0;
-  --seed-exit-translate-y: 0;
-  --seed-exit-opacity: 0;
-  --seed-exit-scale: 1;
-  animation-fill-mode: forwards;
-}
-
 .seed-dialog__content {
   box-sizing: border-box;
   word-break: break-all;
@@ -3761,27 +3751,6 @@
   position: relative;
 }
 
-.seed-dialog__content:is([data-state="open"], [data-open]) {
-  animation: seed-enter;
-  animation-timing-function: var(--seed-timing-function-enter-expressive);
-  animation-duration: var(--seed-duration-d4);
-  --seed-enter-translate-x: 0;
-  --seed-enter-translate-y: 0;
-  --seed-enter-opacity: 0;
-  --seed-enter-scale: 1.3;
-}
-
-.seed-dialog__content:not(:is([data-state="open"], [data-open])) {
-  animation: seed-exit;
-  animation-timing-function: var(--seed-timing-function-exit);
-  animation-duration: var(--seed-duration-d2);
-  --seed-exit-translate-x: 0;
-  --seed-exit-translate-y: 0;
-  --seed-exit-opacity: 0;
-  --seed-exit-scale: 1;
-  animation-fill-mode: forwards;
-}
-
 .seed-dialog__header {
   padding-left: var(--seed-dimension-x5);
   padding-right: var(--seed-dimension-x5);
@@ -3818,6 +3787,48 @@
   display: flex;
 }
 
+.seed-dialog__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
+  animation: seed-enter;
+  animation-timing-function: var(--seed-timing-function-enter);
+  animation-duration: var(--seed-duration-d2);
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: 1;
+}
+
+.seed-dialog__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
+  animation: seed-exit;
+  animation-timing-function: var(--seed-timing-function-exit);
+  animation-duration: var(--seed-duration-d2);
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation-fill-mode: forwards;
+}
+
+.seed-dialog__content--skipAnimation_false:is([data-state="open"], [data-open]) {
+  animation: seed-enter;
+  animation-timing-function: var(--seed-timing-function-enter-expressive);
+  animation-duration: var(--seed-duration-d4);
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: 1.3;
+}
+
+.seed-dialog__content--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
+  animation: seed-exit;
+  animation-timing-function: var(--seed-timing-function-exit);
+  animation-duration: var(--seed-duration-d2);
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation-fill-mode: forwards;
+}
+
 .seed-extended-action-sheet__positioner {
   overscroll-behavior-y: none;
   --sheet-z-index: 2;
@@ -4188,21 +4199,21 @@
 
 .seed-field-label__indicatorText {
   vertical-align: bottom;
+  padding-left: clamp(calc(4px * var(--seed-font-size-limit-min)), .25rem, calc(4px * var(--seed-font-size-limit-max)));
   color: var(--seed-color-fg-neutral-subtle);
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-regular);
-  padding-left: .25rem;
   display: inline;
 }
 
 .seed-field-label__indicatorIcon {
   vertical-align: top;
-  width: .375rem;
-  height: .375rem;
+  width: clamp(calc(6px * var(--seed-font-size-limit-min)), .375rem, calc(6px * var(--seed-font-size-limit-max)));
+  height: clamp(calc(6px * var(--seed-font-size-limit-min)), .375rem, calc(6px * var(--seed-font-size-limit-max)));
+  margin-top: clamp(calc(4px * var(--seed-font-size-limit-min)), .25rem, calc(4px * var(--seed-font-size-limit-max)));
+  margin-left: clamp(calc(2px * var(--seed-font-size-limit-min)), .125rem, calc(2px * var(--seed-font-size-limit-max)));
   color: var(--seed-color-fg-critical);
-  margin-top: .25rem;
-  margin-left: .125rem;
   display: inline;
 }
 
@@ -4239,6 +4250,7 @@
 .seed-floating-action-button__root {
   background: var(--seed-color-bg-brand-solid);
   border-radius: var(--seed-radius-full);
+  box-shadow: var(--seed-shadow-s3);
   color: var(--seed-color-palette-static-white);
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
@@ -4246,7 +4258,6 @@
   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);
   position: relative;
   overflow: hidden;
-  box-shadow: 0 2px 6px #00000026;
 }
 
 .seed-floating-action-button__root:is(:active, [data-active]) {
@@ -5043,27 +5054,6 @@
   inset: 0;
 }
 
-.seed-menu-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
-  animation: seed-exit;
-  animation-timing-function: var(--seed-timing-function-exit);
-  animation-duration: var(--seed-duration-d2);
-  --seed-exit-translate-x: 0;
-  --seed-exit-translate-y: 0;
-  --seed-exit-opacity: 0;
-  --seed-exit-scale: 1;
-  animation-fill-mode: forwards;
-}
-
-.seed-menu-sheet__backdrop:is([data-state="open"], [data-open]) {
-  animation: seed-enter;
-  animation-timing-function: var(--seed-timing-function-enter);
-  animation-duration: var(--seed-duration-d2);
-  --seed-enter-translate-x: 0;
-  --seed-enter-translate-y: 0;
-  --seed-enter-opacity: 0;
-  --seed-enter-scale: 1;
-}
-
 .seed-menu-sheet__content {
   box-sizing: border-box;
   word-break: break-all;
@@ -5081,27 +5071,6 @@
   position: relative;
 }
 
-.seed-menu-sheet__content:not(:is([data-state="open"], [data-open])) {
-  animation: seed-exit;
-  animation-timing-function: var(--seed-timing-function-exit);
-  animation-duration: var(--seed-duration-d4);
-  --seed-exit-translate-x: 0;
-  --seed-exit-translate-y: 100%;
-  --seed-exit-opacity: 1;
-  --seed-exit-scale: 1;
-  animation-fill-mode: forwards;
-}
-
-.seed-menu-sheet__content:is([data-state="open"], [data-open]) {
-  animation: seed-enter;
-  animation-timing-function: var(--seed-timing-function-enter-expressive);
-  animation-duration: var(--seed-duration-d6);
-  --seed-enter-translate-x: 0;
-  --seed-enter-translate-y: 100%;
-  --seed-enter-opacity: 1;
-  --seed-enter-scale: 1;
-}
-
 .seed-menu-sheet__header {
   align-items: center;
   gap: var(--seed-dimension-x1);
@@ -5164,6 +5133,48 @@
   background-color: var(--seed-color-bg-neutral-weak-pressed);
 }
 
+.seed-menu-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
+  animation: seed-enter;
+  animation-timing-function: var(--seed-timing-function-enter);
+  animation-duration: var(--seed-duration-d2);
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: 1;
+}
+
+.seed-menu-sheet__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
+  animation: seed-exit;
+  animation-timing-function: var(--seed-timing-function-exit);
+  animation-duration: var(--seed-duration-d2);
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation-fill-mode: forwards;
+}
+
+.seed-menu-sheet__content--skipAnimation_false:is([data-state="open"], [data-open]) {
+  animation: seed-enter;
+  animation-timing-function: var(--seed-timing-function-enter-expressive);
+  animation-duration: var(--seed-duration-d6);
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 100%;
+  --seed-enter-opacity: 1;
+  --seed-enter-scale: 1;
+}
+
+.seed-menu-sheet__content--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
+  animation: seed-exit;
+  animation-timing-function: var(--seed-timing-function-exit);
+  animation-duration: var(--seed-duration-d4);
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 100%;
+  --seed-exit-opacity: 1;
+  --seed-exit-scale: 1;
+  animation-fill-mode: forwards;
+}
+
 .seed-menu-sheet-item {
   background-color: var(--seed-color-bg-neutral-weak);
   min-height: 52px;
@@ -7445,8 +7456,8 @@
   padding-right: var(--seed-dimension-x3_5);
   padding-top: var(--seed-dimension-x1_5);
   padding-bottom: var(--seed-dimension-x1_5);
-  font-size: var(--seed-font-size-t4);
-  line-height: var(--seed-line-height-t4);
+  font-size: var(--seed-font-size-t3);
+  line-height: var(--seed-line-height-t3);
   --size: 14px;
   --thickness: 2px;
   --seed-prefix-icon-size: var(--seed-dimension-x3_5);