@seed-design/css 1.2.2 → 1.2.3

package/all.css

@@ -1373,8 +1373,6 @@
 
 .seed-aspect-ratio {
   --seed-aspect-ratio-padding: 75%;
-  position: relative;
-  overflow: hidden;
 }
 
 .seed-aspect-ratio:before {
@@ -1671,7 +1669,7 @@
 }
 
 .seed-app-bar__root--tone_layer:before {
-  background-color: var(--seed-color-bg-layer-default);
+  background: var(--seed-box-background, var(--seed-color-bg-layer-default));
 }
 
 .seed-app-bar__icon--tone_layer {
@@ -2800,7 +2798,7 @@
 
 .seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
   padding-left: var(--seed-dimension-spacing-x-global-gutter);
-  padding-right: 50px;
+  padding-right: 56px;
 }
 
 .seed-bottom-sheet__header--headerAlign_center {
@@ -2814,8 +2812,8 @@
 }
 
 .seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {
-  padding-left: 60px;
-  padding-right: 60px;
+  padding-left: 56px;
+  padding-right: 56px;
 }
 
 .seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"]:not([data-animation-done="true"]) {
@@ -6230,7 +6228,7 @@
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   color: var(--seed-color-fg-neutral-subtle);
-  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
   display: flex;
 }
 
@@ -6250,10 +6248,12 @@
 
 .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
   background-color: var(--seed-color-palette-gray-100);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
 }
 
 .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
   background-color: var(--seed-color-bg-neutral-weak-pressed);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
 }
 
 .seed-select-box__root {
@@ -6592,20 +6592,21 @@
 .seed-slider__valueIndicatorRoot {
   box-sizing: border-box;
   background: var(--seed-color-bg-neutral-inverted);
-  padding-left: var(--seed-dimension-x1_5);
-  padding-right: var(--seed-dimension-x1_5);
-  padding-top: var(--seed-dimension-x0_5);
-  padding-bottom: var(--seed-dimension-x0_5);
-  border-radius: var(--seed-radius-r1);
+  padding-left: var(--seed-dimension-x2);
+  padding-right: var(--seed-dimension-x2);
+  padding-top: var(--seed-dimension-x1);
+  padding-bottom: var(--seed-dimension-x1);
+  border-radius: var(--seed-radius-r1_5);
   color: var(--seed-color-fg-neutral-inverted);
-  font-size: var(--seed-font-size-t1);
-  line-height: var(--seed-line-height-t1);
+  font-size: var(--seed-font-size-t3);
+  line-height: var(--seed-line-height-t3);
   font-weight: var(--seed-font-weight-medium);
   white-space: pre-wrap;
   text-align: center;
+  width: max-content;
+  min-width: calc(var(--seed-dimension-x2) * 2 + var(--seed-dimension-x2));
   flex-direction: column;
   align-items: center;
-  width: max-content;
   display: flex;
   position: absolute;
   top: 50%;
@@ -6626,7 +6627,7 @@
   animation-timing-function: var(--seed-timing-function-enter);
   animation-duration: var(--seed-duration-d4);
   --seed-enter-translate-x: -50%;
-  --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
+  --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
   --seed-enter-opacity: 0;
   --seed-enter-scale: .9;
 }
@@ -6636,7 +6637,7 @@
   animation-timing-function: var(--seed-timing-function-enter);
   animation-duration: var(--seed-duration-d4);
   --seed-enter-translate-x: 50%;
-  --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
+  --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
   --seed-enter-opacity: 0;
   --seed-enter-scale: .9;
 }
@@ -6646,7 +6647,7 @@
   animation-timing-function: var(--seed-timing-function-easing);
   animation-duration: var(--seed-duration-d4);
   --seed-exit-translate-x: -50%;
-  --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
+  --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
   --seed-exit-opacity: 0;
   --seed-exit-scale: 1;
   animation-fill-mode: forwards;
@@ -6657,7 +6658,7 @@
   animation-timing-function: var(--seed-timing-function-easing);
   animation-duration: var(--seed-duration-d4);
   --seed-exit-translate-x: 50%;
-  --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
+  --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
   --seed-exit-opacity: 0;
   --seed-exit-scale: 1;
   animation-fill-mode: forwards;
@@ -6668,8 +6669,8 @@
 }
 
 .seed-slider__valueIndicatorArrow {
-  width: var(--seed-dimension-x2_5);
-  height: var(--seed-dimension-x2_5);
+  width: var(--seed-dimension-x2);
+  height: var(--seed-dimension-x2);
   position: absolute;
   top: 100%;
 }
@@ -6686,8 +6687,8 @@
 
 .seed-slider__valueIndicatorArrowTip {
   fill: var(--seed-color-bg-neutral-inverted);
-  width: var(--seed-dimension-x2_5);
-  height: 7px;
+  width: var(--seed-dimension-x2);
+  height: var(--seed-dimension-x1_5);
   display: block;
 }