@seed-design/css 1.2.1 → 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 {
@@ -2724,6 +2722,7 @@
   font-size: var(--seed-font-size-t8);
   line-height: var(--seed-line-height-t8);
   font-weight: var(--seed-font-weight-bold);
+  word-break: keep-all;
   margin: 0;
 }
 
@@ -2732,6 +2731,8 @@
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-regular);
+  padding-left: var(--seed-dimension-spacing-x-global-gutter);
+  padding-right: var(--seed-dimension-spacing-x-global-gutter);
   white-space: pre-wrap;
   margin: 0;
 }
@@ -2764,8 +2765,8 @@
 }
 
 .seed-bottom-sheet__closeButton {
-  top: var(--seed-dimension-x5);
-  right: var(--seed-dimension-x5);
+  top: var(--seed-dimension-x6);
+  right: var(--seed-dimension-x4);
   border-radius: var(--seed-radius-full);
   background: var(--seed-color-bg-neutral-weak);
   cursor: pointer;
@@ -2787,25 +2788,32 @@
 }
 
 .seed-bottom-sheet__header--headerAlign_left {
+  justify-content: flex-start;
+}
+
+.seed-bottom-sheet__title--headerAlign_left {
   padding-left: var(--seed-dimension-spacing-x-global-gutter);
   padding-right: var(--seed-dimension-spacing-x-global-gutter);
-  justify-content: flex-start;
 }
 
-.seed-bottom-sheet__header--headerAlign_left[data-show-close-button] {
-  padding-right: 50px;
+.seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
+  padding-left: var(--seed-dimension-spacing-x-global-gutter);
+  padding-right: 56px;
 }
 
 .seed-bottom-sheet__header--headerAlign_center {
-  padding-left: var(--seed-dimension-spacing-x-global-gutter);
-  padding-right: var(--seed-dimension-spacing-x-global-gutter);
   text-align: center;
   justify-content: center;
 }
 
-.seed-bottom-sheet__header--headerAlign_center[data-show-close-button] {
-  padding-left: 50px;
-  padding-right: 50px;
+.seed-bottom-sheet__title--headerAlign_center {
+  padding-left: var(--seed-dimension-spacing-x-global-gutter);
+  padding-right: var(--seed-dimension-spacing-x-global-gutter);
+}
+
+.seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {
+  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"]) {
@@ -4570,20 +4578,17 @@
 }
 
 .seed-image-frame {
+  border-radius: inherit;
   position: relative;
+  overflow: hidden;
 }
 
 .seed-image-frame > img, .seed-image-frame > video {
   object-fit: cover;
-}
-
-.seed-image-frame--rounded_true {
-  border-radius: var(--seed-radius-r2);
-  overflow: hidden;
-}
-
-.seed-image-frame--rounded_true > img, .seed-image-frame--rounded_true > video {
-  border-radius: var(--seed-radius-r2);
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
 .seed-image-frame--stroke_true:after {
@@ -4595,6 +4600,10 @@
   inset: 0;
 }
 
+.seed-image-frame--rounded_true {
+  border-radius: var(--seed-radius-r2);
+}
+
 .seed-image-frame-indicator {
   box-sizing: border-box;
   background-color: var(--seed-color-palette-static-black-alpha-800);
@@ -6219,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;
 }
 
@@ -6239,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 {
@@ -6581,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%;
@@ -6615,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;
 }
@@ -6625,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;
 }
@@ -6635,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;
@@ -6646,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;
@@ -6657,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%;
 }
@@ -6675,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;
 }