@seed-design/css 2.1.1 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/css",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/recipes/floating-action-button.css

@@ -63,8 +63,8 @@
     max-width: 999px;
 }
 .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;
 }

package/recipes/floating-action-button.layered.css

@@ -73,8 +73,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;
   }

package/recipes/image-frame-reaction-button.css

@@ -46,7 +46,5 @@
     height: var(--seed-dimension-x6);
     color: var(--seed-color-palette-static-white);
     pointer-events: none;
-}
-.seed-image-frame-reaction-button__lineIcon:is([aria-pressed=true], [data-pressed]) {
-    color: var(--seed-color-bg-transparent);
+    filter: drop-shadow(0px 2px 2px #00000026);
 }

package/recipes/image-frame-reaction-button.layered.css

@@ -49,12 +49,9 @@
     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);
-  }
 }

package/recipes/side-panel.css

@@ -146,7 +146,7 @@
     padding-bottom: var(--seed-dimension-x4);
 }
 .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 {
     color: var(--seed-color-fg-neutral);
@@ -167,6 +167,7 @@
 .seed-side-panel__body {
     display: flex;
     flex-direction: column;
+    box-sizing: border-box;
     flex: 1;
     overflow-y: auto;
     --seed-box-padding-x-base: var(--seed-dimension-x6);
@@ -226,48 +227,33 @@
     justify-content: center;
     align-items: center;
     border: none;
+    background: var(--seed-color-bg-transparent);
     top: calc(28px + var(--seed-safe-area-top));
     right: 24px;
     border-radius: var(--seed-radius-r3);
-    background: var(--seed-color-bg-transparent);
-    width: 22px;
-    height: 22px;
+    padding: calc((52px - 22px) / 2);
+    margin: calc((22px - 52px) / 2);
     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);
 }
-.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: "";
-    position: absolute;
-    top: calc((22px - 52px) / 2);
-    right: calc((22px - 52px) / 2);
-    bottom: calc((22px - 52px) / 2);
-    left: calc((22px - 52px) / 2);
-    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);
-}
-.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/recipes/side-panel.layered.css

@@ -158,7 +158,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 {
@@ -180,6 +180,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);
@@ -240,57 +241,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/vars/component/floating-action-button.d.ts

@@ -34,7 +34,7 @@ export declare const vars: {
         "minHeight": "48px"
       },
       "icon": {
-        "size": "var(--seed-dimension-x5)"
+        "size": "var(--seed-dimension-x4)"
       },
       "label": {
         "color": "var(--seed-color-palette-static-white)",

package/vars/component/floating-action-button.mjs

@@ -31,7 +31,7 @@ export const vars = {
         "minHeight": "48px"
       },
       "icon": {
-        "size": "var(--seed-dimension-x5)"
+        "size": "var(--seed-dimension-x4)"
       },
       "label": {
         "color": "var(--seed-color-palette-static-white)",

package/vars/component/image-frame-reaction-button.d.ts

@@ -10,9 +10,10 @@ export declare const vars: {
       },
       /** lineIcon 아래에 내려가는 하트 아이콘입니다. */
       "fillIcon": {
-        "gradient": "var(--seed-color-palette-static-black-alpha-300) 0%, var(--seed-color-palette-static-black-alpha-300) 100%",
+        "gradient": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
         /** 보이는 버튼 크기입니다. */
-        "size": "var(--seed-dimension-x6)"
+        "size": "var(--seed-dimension-x6)",
+        "shadow": "0px 2px 4px 0px #00000026"
       },
       /** fillIcon 위로 올라가는 하트 아이콘입니다. */
       "lineIcon": {

package/vars/component/image-frame-reaction-button.mjs

@@ -6,8 +6,9 @@ export const vars = {
         "targetSize": "var(--seed-dimension-x10)"
       },
       "fillIcon": {
-        "gradient": "var(--seed-color-palette-static-black-alpha-300) 0%, var(--seed-color-palette-static-black-alpha-300) 100%",
-        "size": "var(--seed-dimension-x6)"
+        "gradient": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
+        "size": "var(--seed-dimension-x6)",
+        "shadow": "0px 2px 4px 0px #00000026"
       },
       "lineIcon": {
         "color": "var(--seed-color-palette-static-white)",

package/vars/component/side-panel-close-button.d.ts

@@ -4,8 +4,9 @@ export declare const vars: {
       "root": {
         "color": "var(--seed-color-bg-transparent)",
         "cornerRadius": "var(--seed-radius-r3)",
-        "targetSize": "52px",
-        "size": "22px"
+        "size": "52px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
       },
       "icon": {
         "color": "var(--seed-color-fg-neutral-subtle)",
@@ -15,6 +16,9 @@ export declare const vars: {
       }
     },
     "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      },
       "icon": {
         "color": "var(--seed-color-fg-neutral)"
       }

package/vars/component/side-panel-close-button.mjs

@@ -4,8 +4,9 @@ export const vars = {
       "root": {
         "color": "var(--seed-color-bg-transparent)",
         "cornerRadius": "var(--seed-radius-r3)",
-        "targetSize": "52px",
-        "size": "22px"
+        "size": "52px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
       },
       "icon": {
         "color": "var(--seed-color-fg-neutral-subtle)",
@@ -15,6 +16,9 @@ export const vars = {
       }
     },
     "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      },
       "icon": {
         "color": "var(--seed-color-fg-neutral)"
       }

package/vars/component/side-panel.d.ts

@@ -27,14 +27,16 @@ export declare const vars: {
         /** 이 값은 상단 safe-area inset과 합산하여 적용합니다. */
         "paddingTop": "var(--seed-dimension-x6)",
         /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
-        "paddingBottom": "var(--seed-dimension-x4)"
+        "paddingBottom": "var(--seed-dimension-x4)",
+        /** closeButton이 표시되는 경우 paddingRight에 추가되는 여백입니다. */
+        "closeButtonGap": "var(--seed-dimension-x1_5)"
       },
       "body": {
         "paddingX": "var(--seed-dimension-x6)",
         /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
         "paddingBottom": "var(--seed-dimension-x12)",
-        "transitionDuration": "var(--seed-duration-color-transition)",
-        "transitionTimingFunction": "var(--seed-timing-function-easing)"
+        "strokeDuration": "var(--seed-duration-color-transition)",
+        "strokeTimingFunction": "var(--seed-timing-function-easing)"
       },
       "footer": {
         "paddingX": "var(--seed-dimension-x6)",
@@ -62,8 +64,9 @@ export declare const vars: {
     },
     "scrolled": {
       "body": {
+        "strokeWidth": "1px",
         /** 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다. */
-        "stroke": "var(--seed-color-stroke-neutral-muted)"
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
       }
     }
   },

package/vars/component/side-panel.mjs

@@ -23,13 +23,14 @@ export const vars = {
         "minHeight": "70px",
         "paddingX": "var(--seed-dimension-x6)",
         "paddingTop": "var(--seed-dimension-x6)",
-        "paddingBottom": "var(--seed-dimension-x4)"
+        "paddingBottom": "var(--seed-dimension-x4)",
+        "closeButtonGap": "var(--seed-dimension-x1_5)"
       },
       "body": {
         "paddingX": "var(--seed-dimension-x6)",
         "paddingBottom": "var(--seed-dimension-x12)",
-        "transitionDuration": "var(--seed-duration-color-transition)",
-        "transitionTimingFunction": "var(--seed-timing-function-easing)"
+        "strokeDuration": "var(--seed-duration-color-transition)",
+        "strokeTimingFunction": "var(--seed-timing-function-easing)"
       },
       "footer": {
         "paddingX": "var(--seed-dimension-x6)",
@@ -55,7 +56,8 @@ export const vars = {
     },
     "scrolled": {
       "body": {
-        "stroke": "var(--seed-color-stroke-neutral-muted)"
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
       }
     }
   },