@seed-design/css 2.1.0 → 2.1.2

package/all.css

@@ -4852,6 +4852,7 @@
 }
 
 .seed-attachment-input-item__root {
+  isolation: isolate;
   justify-content: center;
   align-items: center;
   gap: var(--seed-dimension-x2_5);
@@ -5093,6 +5094,7 @@
 }
 
 .seed-attachment-input-item__root--type_image:before {
+  z-index: 1;
   box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
 }
 
@@ -5296,8 +5298,8 @@
 }
 
 .seed-floating-action-button__icon--extended_true {
-  width: var(--seed-dimension-x5);
-  height: var(--seed-dimension-x5);
+  width: var(--seed-dimension-x4);
+  height: var(--seed-dimension-x4);
   margin-right: var(--seed-dimension-x1);
   transition: none;
 }
@@ -5620,15 +5622,12 @@
   height: var(--seed-dimension-x6);
   color: var(--seed-color-palette-static-white);
   pointer-events: none;
+  filter: drop-shadow(0 2px 2px #00000026);
   margin: auto;
   position: absolute;
   inset: 0;
 }
 
-.seed-image-frame-reaction-button__lineIcon:is([aria-pressed="true"], [data-pressed]) {
-  color: var(--seed-color-bg-transparent);
-}
-
 .seed-inline-banner__root {
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
@@ -8778,7 +8777,7 @@
 }
 
 .seed-side-panel__header[data-show-close-button] {
-  padding-right: calc(var(--seed-dimension-x6) + 52px);
+  padding-right: calc(24px + 22px + var(--seed-dimension-x1_5));
 }
 
 .seed-side-panel__title {
@@ -8800,6 +8799,7 @@
 }
 
 .seed-side-panel__body {
+  box-sizing: border-box;
   --seed-box-padding-x-base: var(--seed-dimension-x6);
   --seed-box-padding-x-sm: var(--seed-box-padding-x-base);
   --seed-box-padding-x-md: var(--seed-box-padding-x-sm);
@@ -8860,57 +8860,42 @@
 }
 
 .seed-side-panel__closeButton {
+  background: var(--seed-color-bg-transparent);
   top: calc(28px + var(--seed-safe-area-top));
   border-radius: var(--seed-radius-r3);
-  background: var(--seed-color-bg-transparent);
   cursor: pointer;
+  transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
   --seed-icon-size: 22px;
   --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+  outline: var(--seed-dimension-x0_5) solid transparent;
+  outline-offset: var(--seed-dimension-x0_5);
   border: none;
   justify-content: center;
   align-items: center;
-  width: 22px;
-  height: 22px;
+  margin: -15px;
+  padding: 15px;
   display: flex;
   position: absolute;
   right: 24px;
 }
 
-.seed-side-panel__closeButton :where(.seed-icon) {
-  transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+.seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
+  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+  outline-offset: var(--seed-dimension-x0_5);
 }
 
 @media (hover: hover) and (pointer: fine) {
   .seed-side-panel__closeButton:is(:hover, [data-hover]) {
-    --seed-icon-color: var(--seed-color-fg-neutral);
+    background: var(--seed-color-bg-transparent-pressed);
   }
 }
 
 @media not all and (hover: hover) and (pointer: fine) {
   .seed-side-panel__closeButton:is(:active, [data-active]) {
-    --seed-icon-color: var(--seed-color-fg-neutral);
+    background: var(--seed-color-bg-transparent-pressed);
   }
 }
 
-.seed-side-panel__closeButton:after {
-  content: "";
-  border-radius: var(--seed-radius-r3);
-  outline: var(--seed-dimension-x0_5) solid transparent;
-  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
-  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
-  position: absolute;
-  inset: -15px;
-}
-
-.seed-side-panel__closeButton:is(:focus, [data-focus]) {
-  outline: none;
-}
-
-.seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]):after {
-  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
-  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
-}
-
 .seed-side-panel__content--size_small {
   --side-panel-size-width: 480px;
 }

package/all.layered.css

@@ -5101,6 +5101,7 @@
   }
 
   .seed-attachment-input-item__root {
+    isolation: isolate;
     justify-content: center;
     align-items: center;
     gap: var(--seed-dimension-x2_5);
@@ -5342,6 +5343,7 @@
   }
 
   .seed-attachment-input-item__root--type_image:before {
+    z-index: 1;
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
   }
 
@@ -5545,8 +5547,8 @@
   }
 
   .seed-floating-action-button__icon--extended_true {
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4);
     margin-right: var(--seed-dimension-x1);
     transition: none;
   }
@@ -5869,15 +5871,12 @@
     height: var(--seed-dimension-x6);
     color: var(--seed-color-palette-static-white);
     pointer-events: none;
+    filter: drop-shadow(0 2px 2px #00000026);
     margin: auto;
     position: absolute;
     inset: 0;
   }
 
-  .seed-image-frame-reaction-button__lineIcon:is([aria-pressed="true"], [data-pressed]) {
-    color: var(--seed-color-bg-transparent);
-  }
-
   .seed-inline-banner__root {
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
@@ -9027,7 +9026,7 @@
   }
 
   .seed-side-panel__header[data-show-close-button] {
-    padding-right: calc(var(--seed-dimension-x6) + 52px);
+    padding-right: calc(24px + 22px + var(--seed-dimension-x1_5));
   }
 
   .seed-side-panel__title {
@@ -9049,6 +9048,7 @@
   }
 
   .seed-side-panel__body {
+    box-sizing: border-box;
     --seed-box-padding-x-base: var(--seed-dimension-x6);
     --seed-box-padding-x-sm: var(--seed-box-padding-x-base);
     --seed-box-padding-x-md: var(--seed-box-padding-x-sm);
@@ -9109,57 +9109,42 @@
   }
 
   .seed-side-panel__closeButton {
+    background: var(--seed-color-bg-transparent);
     top: calc(28px + var(--seed-safe-area-top));
     border-radius: var(--seed-radius-r3);
-    background: var(--seed-color-bg-transparent);
     cursor: pointer;
+    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     --seed-icon-size: 22px;
     --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
     border: none;
     justify-content: center;
     align-items: center;
-    width: 22px;
-    height: 22px;
+    margin: -15px;
+    padding: 15px;
     display: flex;
     position: absolute;
     right: 24px;
   }
 
-  .seed-side-panel__closeButton :where(.seed-icon) {
-    transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+  .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: var(--seed-dimension-x0_5);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .seed-side-panel__closeButton:is(:hover, [data-hover]) {
-      --seed-icon-color: var(--seed-color-fg-neutral);
+      background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
   @media not all and (hover: hover) and (pointer: fine) {
     .seed-side-panel__closeButton:is(:active, [data-active]) {
-      --seed-icon-color: var(--seed-color-fg-neutral);
+      background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  .seed-side-panel__closeButton:after {
-    content: "";
-    border-radius: var(--seed-radius-r3);
-    outline: var(--seed-dimension-x0_5) solid transparent;
-    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
-    position: absolute;
-    inset: -15px;
-  }
-
-  .seed-side-panel__closeButton:is(:focus, [data-focus]) {
-    outline: none;
-  }
-
-  .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]):after {
-    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
-    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
-  }
-
   .seed-side-panel__content--size_small {
     --side-panel-size-width: 480px;
   }