@seed-design/css 0.1.2 → 0.1.4

package/README.md

@@ -1,3 +1,4 @@
 # @seed-design/css
 
 CSS implementation of Seed Design, providing design tokens and component styles and theming codes.
+

package/all.css

@@ -17,6 +17,17 @@
   }
 }
 
+:root {
+  --seed-font-size-multiplier: 1;
+}
+
+@supports (font: -apple-system-body) {
+  html[data-seed-platform="ios"][data-seed-font-scaling="enabled"] {
+    --seed-font-size-multiplier: .9412;
+    font: -apple-system-body;
+  }
+}
+
 .seed-loading-indicator {
   display: inline-flex;
   position: absolute;
@@ -223,32 +234,32 @@
   --seed-duration-d4: .2s;
   --seed-duration-d5: .25s;
   --seed-duration-d6: .3s;
-  --seed-font-size-t1: .6875rem;
-  --seed-font-size-t2: .75rem;
-  --seed-font-size-t3: .8125rem;
-  --seed-font-size-t4: .875rem;
-  --seed-font-size-t5: 1rem;
-  --seed-font-size-t6: 1.125rem;
-  --seed-font-size-t7: 1.25rem;
-  --seed-font-size-t8: 1.375rem;
-  --seed-font-size-t9: 1.5rem;
-  --seed-font-size-t10: 1.625rem;
+  --seed-font-size-t1: calc(.6875rem * var(--seed-font-size-multiplier));
+  --seed-font-size-t2: calc(.75rem * var(--seed-font-size-multiplier));
+  --seed-font-size-t3: calc(.8125rem * var(--seed-font-size-multiplier));
+  --seed-font-size-t4: calc(.875rem * var(--seed-font-size-multiplier));
+  --seed-font-size-t5: calc(1rem * var(--seed-font-size-multiplier));
+  --seed-font-size-t6: calc(1.125rem * var(--seed-font-size-multiplier));
+  --seed-font-size-t7: calc(1.25rem * var(--seed-font-size-multiplier));
+  --seed-font-size-t8: calc(1.375rem * var(--seed-font-size-multiplier));
+  --seed-font-size-t9: calc(1.5rem * var(--seed-font-size-multiplier));
+  --seed-font-size-t10: calc(1.625rem * var(--seed-font-size-multiplier));
   --seed-font-size-t2-static: 12px;
   --seed-font-size-t5-static: 16px;
   --seed-font-size-t6-static: 18px;
   --seed-font-weight-regular: 400;
   --seed-font-weight-medium: 500;
   --seed-font-weight-bold: 700;
-  --seed-line-height-t1: .9375rem;
-  --seed-line-height-t2: 1rem;
-  --seed-line-height-t3: 1.125rem;
-  --seed-line-height-t4: 1.1875rem;
-  --seed-line-height-t5: 1.375rem;
-  --seed-line-height-t6: 1.5rem;
-  --seed-line-height-t7: 1.6875rem;
-  --seed-line-height-t8: 1.875rem;
-  --seed-line-height-t9: 2rem;
-  --seed-line-height-t10: 2.1875rem;
+  --seed-line-height-t1: calc(.9375rem * var(--seed-font-size-multiplier));
+  --seed-line-height-t2: calc(1rem * var(--seed-font-size-multiplier));
+  --seed-line-height-t3: calc(1.125rem * var(--seed-font-size-multiplier));
+  --seed-line-height-t4: calc(1.1875rem * var(--seed-font-size-multiplier));
+  --seed-line-height-t5: calc(1.375rem * var(--seed-font-size-multiplier));
+  --seed-line-height-t6: calc(1.5rem * var(--seed-font-size-multiplier));
+  --seed-line-height-t7: calc(1.6875rem * var(--seed-font-size-multiplier));
+  --seed-line-height-t8: calc(1.875rem * var(--seed-font-size-multiplier));
+  --seed-line-height-t9: calc(2rem * var(--seed-font-size-multiplier));
+  --seed-line-height-t10: calc(2.1875rem * var(--seed-font-size-multiplier));
   --seed-radius-r0_5: 2px;
   --seed-radius-r1: 4px;
   --seed-radius-r1_5: 6px;
@@ -433,12 +444,13 @@
   --seed-color-manner-temp-l5-text: #d28500;
   --seed-color-manner-temp-l6-bg: #fff0e5;
   --seed-color-manner-temp-l6-text: #f06000;
-  --seed-gradient-shimmer-neutral: #fff0 0%, #fff6 46%, #fff6 54%, #fff0 100%;
-  --seed-gradient-shimmer-magic: #fef0e700 0%, #fef0e78a 46%, #fef0e78a 54%, #fef0e700 100%;
-  --seed-gradient-fade-neutral: #fff 0%, #fff0 100%;
+  --seed-gradient-fade-layer-floating: #fff0 0%, #000 100%;
+  --seed-gradient-fade-layer-default: #fff0 0%, #000 100%;
   --seed-gradient-glow-magic: #fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;
+  --seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f58a 46%, #fff9f58a 54%, #fff9f500 100%;
   --seed-gradient-glow-magic-pressed: #fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;
-  --seed-gradient-highlight-magic: #f60 20%, #d25aca 80%;
+  --seed-gradient-shimmer-neutral: #fff0 0%, #fff6 46%, #fff6 54%, #fff0 100%;
+  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
 }
 
 :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"] {
@@ -606,12 +618,13 @@
   --seed-color-manner-temp-l5-text: #ffa100;
   --seed-color-manner-temp-l6-bg: #2e1d12;
   --seed-color-manner-temp-l6-text: #ff9147;
-  --seed-gradient-shimmer-neutral: #fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;
-  --seed-gradient-shimmer-magic: #fef0e700 0%, #fef0e71a 46%, #fef0e71a 54%, #fef0e700 100%;
-  --seed-gradient-fade-neutral: #1d2025 0%, #1d202500 100%;
+  --seed-gradient-fade-layer-floating: #1d202500 0%, #000 100%;
+  --seed-gradient-fade-layer-default: #16171b00 0%, #000 100%;
   --seed-gradient-glow-magic: #2d252d 0%, #3a312b 80%, #333232 100%;
+  --seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;
   --seed-gradient-glow-magic-pressed: #3e333e 0%, #51453e 80%, #434242 100%;
-  --seed-gradient-highlight-magic: #ff6000 20%, #d25aca 80%;
+  --seed-gradient-shimmer-neutral: #fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;
+  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
 }
 
 .seed-avatar__root {
@@ -2855,6 +2868,229 @@
   min-width: var(--seed-dimension-x8);
 }
 
+.seed-chip__root {
+  box-sizing: border-box;
+  cursor: pointer;
+  text-transform: none;
+  text-align: start;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  border-radius: var(--seed-radius-full);
+  transition-duration: var(--seed-duration-d4);
+  transition-timing-function: var(--seed-timing-function-easing);
+  border: none;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  transition-property: background-color, color, border-color, box-shadow;
+  display: inline-flex;
+}
+
+.seed-chip__root:is(:focus, [data-focus]) {
+  outline: none;
+}
+
+.seed-chip__root:is(:disabled, [disabled], [data-disabled]) {
+  cursor: not-allowed;
+}
+
+.seed-chip__root {
+  --seed-icon-color: inherit;
+}
+
+.seed-chip__label {
+  font-weight: var(--seed-font-weight-medium);
+  padding-inline: var(--seed-dimension-x1_5);
+  color: inherit;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.seed-chip__prefixIcon {
+  padding-left: var(--seed-dimension-x1_5);
+  --seed-icon-color: inherit;
+  flex-shrink: 0;
+  align-items: center;
+  display: inline-flex;
+}
+
+.seed-chip__prefixAvatar {
+  flex-shrink: 0;
+  align-items: center;
+  display: inline-flex;
+}
+
+.seed-chip__suffixIcon {
+  padding-right: var(--seed-dimension-x1_5);
+  --seed-icon-color: inherit;
+  flex-shrink: 0;
+  align-items: center;
+  display: inline-flex;
+}
+
+.seed-chip__root--variant_solid {
+  background: var(--seed-color-bg-neutral-weak);
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_solid:is(:checked, [data-checked]) {
+  box-shadow: none;
+  background: var(--seed-color-bg-neutral-inverted);
+  color: var(--seed-color-fg-neutral-inverted);
+  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+  background: var(--seed-color-bg-neutral-weak-pressed);
+  color: var(--seed-color-fg-neutral);
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+  background: var(--seed-color-bg-neutral-inverted-pressed);
+  color: var(--seed-color-fg-neutral-inverted);
+  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-chip__root--variant_solid:is(:disabled, [disabled], [data-disabled]) {
+  opacity: .5;
+}
+
+.seed-chip__root--variant_solid {
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineStrong {
+  background: var(--seed-color-bg-layer-default);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+  background: var(--seed-color-bg-layer-default-pressed);
+  color: var(--seed-color-fg-neutral);
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
+  background: var(--seed-color-bg-neutral-inverted);
+  color: var(--seed-color-fg-neutral-inverted);
+  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+  background: var(--seed-color-bg-neutral-inverted-pressed);
+  color: var(--seed-color-fg-neutral-inverted);
+  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-chip__root--variant_outlineStrong:is(:disabled, [disabled], [data-disabled]) {
+  opacity: .5;
+}
+
+.seed-chip__root--variant_outlineStrong {
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineWeak {
+  background: var(--seed-color-bg-layer-default);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+  background: var(--seed-color-bg-layer-default-pressed);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
+  color: var(--seed-color-fg-neutral);
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
+  background: var(--seed-color-bg-neutral-weak);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-field-focused);
+  color: var(--seed-color-fg-neutral);
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+  background: var(--seed-color-bg-neutral-weak-pressed);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-field-focused);
+  color: var(--seed-color-fg-neutral);
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineWeak:is(:disabled, [disabled], [data-disabled]) {
+  opacity: .5;
+}
+
+.seed-chip__root--variant_outlineWeak {
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--size_large {
+  height: 40px;
+  padding-inline: var(--seed-dimension-x2_5);
+  --seed-icon-size: var(--seed-dimension-x4);
+}
+
+.seed-chip__label--size_large {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-chip__prefixIcon--size_large, .seed-chip__suffixIcon--size_large {
+  --seed-icon-size: var(--seed-dimension-x4);
+}
+
+.seed-chip__root--size_medium {
+  height: 36px;
+  padding-inline: var(--seed-dimension-x2);
+  --seed-icon-size: var(--seed-dimension-x4);
+}
+
+.seed-chip__label--size_medium {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-chip__prefixIcon--size_medium {
+  --seed-icon-size: var(--seed-dimension-x4);
+}
+
+.seed-chip__suffixIcon--size_medium {
+  --seed-icon-size: var(--seed-dimension-x3_5);
+}
+
+.seed-chip__root--size_small {
+  height: 32px;
+  padding-inline: var(--seed-dimension-x1_5);
+  --seed-icon-size: var(--seed-dimension-x3_5);
+}
+
+.seed-chip__label--size_small {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-chip__prefixIcon--size_small, .seed-chip__suffixIcon--size_small {
+  --seed-icon-size: var(--seed-dimension-x3_5);
+}
+
+.seed-chip__root--size_small-layout_iconOnly {
+  min-width: var(--seed-dimension-x8);
+}
+
+.seed-chip__root--size_medium-layout_iconOnly {
+  min-width: var(--seed-dimension-x9);
+}
+
+.seed-chip__root--size_large-layout_iconOnly {
+  min-width: var(--seed-dimension-x10);
+}
+
 .seed-control-chip {
   box-sizing: border-box;
   cursor: pointer;
@@ -5015,8 +5251,8 @@
   --seed-enter-translate-y: 0;
   --seed-enter-opacity: 1;
   --seed-enter-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
-  transform: translate3d(0, 0, 0);
+  transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
 }
 
 [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
@@ -5025,7 +5261,7 @@
   --seed-exit-translate-y: 0;
   --seed-exit-opacity: 1;
   --seed-exit-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
 }
 
 [data-global-transition-state="enter-done"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
@@ -5033,8 +5269,8 @@
   --seed-enter-translate-y: 0;
   --seed-enter-opacity: 1;
   --seed-enter-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
-  transform: translate3d(0, 0, 0);
+  transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
 }
 
 [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
@@ -5047,7 +5283,7 @@
   --seed-exit-translate-y: 0;
   --seed-exit-opacity: 1;
   --seed-exit-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
   transform: translate3d(0, 0, 0);
 }
 
@@ -5056,7 +5292,7 @@
   --seed-enter-translate-y: 0;
   --seed-enter-opacity: 1;
   --seed-enter-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
   transform: translate3d(0, 0, 0);
 }
 
@@ -5066,7 +5302,7 @@
   --seed-exit-translate-y: 0;
   --seed-exit-opacity: 1;
   --seed-exit-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
 }
 
 [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
@@ -5080,7 +5316,7 @@
   --seed-enter-opacity: 0;
   --seed-enter-scale: 1;
   opacity: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
 }
 
 [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
@@ -5089,7 +5325,7 @@
   --seed-exit-translate-y: 0;
   --seed-exit-opacity: 0;
   --seed-exit-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
 }
 
 [data-global-transition-state="enter-done"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
@@ -5098,7 +5334,7 @@
   --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
   --seed-enter-scale: 1;
   opacity: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
 }
 
 [data-swipe-back-state="swiping"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
@@ -5273,7 +5509,7 @@
   --seed-enter-translate-y: 0;
   --seed-enter-opacity: 1;
   --seed-enter-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
   transform: translate3d(0, 0, 0);
 }
 
@@ -5283,7 +5519,7 @@
   --seed-exit-translate-y: 0;
   --seed-exit-opacity: 1;
   --seed-exit-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
 }
 
 [data-global-transition-state="enter-done"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
@@ -5291,7 +5527,7 @@
   --seed-enter-translate-y: 0;
   --seed-enter-opacity: 1;
   --seed-enter-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
   transform: translate3d(0, 0, 0);
 }
 
@@ -5301,7 +5537,7 @@
   --seed-enter-opacity: 0;
   --seed-enter-scale: 1;
   opacity: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
 }
 
 [data-global-transition-state="exit-active"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
@@ -5310,7 +5546,7 @@
   --seed-exit-translate-y: 0;
   --seed-exit-opacity: 0;
   --seed-exit-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
 }
 
 [data-global-transition-state="enter-done"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
@@ -5319,7 +5555,7 @@
   --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
   --seed-enter-scale: 1;
   opacity: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
 }
 
 [data-swipe-back-state="swiping"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
@@ -5333,7 +5569,7 @@
   --seed-exit-translate-y: 0;
   --seed-exit-opacity: 0;
   --seed-exit-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
 }
 
 [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
@@ -5342,7 +5578,7 @@
   --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
   --seed-enter-scale: 1;
   opacity: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
 }
 
 [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
@@ -5351,7 +5587,7 @@
   --seed-exit-translate-y: 0;
   --seed-exit-opacity: 0;
   --seed-exit-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
 }
 
 [data-swipe-back-state="swiping"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
@@ -5452,7 +5688,7 @@
   --seed-enter-opacity: 0;
   --seed-enter-scale: 1;
   opacity: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
   transform: translate3d(0, 0, 0);
 }
 
@@ -5463,7 +5699,7 @@
   --seed-exit-translate-y: 0;
   --seed-exit-opacity: 0;
   --seed-exit-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
 }
 
 [data-global-transition-state="enter-done"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
@@ -5472,7 +5708,7 @@
   --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
   --seed-enter-scale: 1;
   opacity: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
   transform: translate3d(0, 0, 0);
 }
 
@@ -5488,7 +5724,7 @@
   --seed-exit-translate-y: 0;
   --seed-exit-opacity: 0;
   --seed-exit-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
   transform: translate3d(0, 0, 0);
 }
 
@@ -5498,7 +5734,7 @@
   --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
   --seed-enter-scale: 1;
   opacity: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
   transform: translate3d(0, 0, 0);
 }
 
@@ -5509,7 +5745,7 @@
   --seed-exit-translate-y: 0;
   --seed-exit-opacity: 0;
   --seed-exit-scale: 1;
-  animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
 }
 
 [data-swipe-back-state="swiping"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {