@seed-design/css 1.2.0 → 1.2.2

package/package.json

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

package/recipes/bottom-sheet.css

@@ -73,6 +73,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;
 }
 .seed-bottom-sheet__description {
@@ -80,6 +81,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);
     margin: 0;
     white-space: pre-wrap;
 }
@@ -114,8 +117,8 @@
     justify-content: center;
     align-items: center;
     border: none;
-    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);
     width: 28px;
@@ -134,16 +137,28 @@
 }
 .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);
+}
+.seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
     padding-right: 50px;
 }
 .seed-bottom-sheet__header--headerAlign_center {
     justify-content: center;
-    padding-left: 50px;
-    padding-right: 50px;
     text-align: center;
 }
-.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='false'] {
+.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: 60px;
+    padding-right: 60px;
+}
+.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='false']:not([data-animation-done='true']) {
     animation-name: fade-in;
     animation-duration: var(--seed-duration-d6);
     animation-timing-function: var(--seed-timing-function-enter);
@@ -153,7 +168,7 @@
     animation-duration: var(--seed-duration-d4);
     animation-timing-function: var(--seed-timing-function-exit);
 }
-.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='true'][data-should-overlay-animate='true'] {
+.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='true'][data-should-overlay-animate='true']:not([data-animation-done='true']) {
     animation-name: fade-in;
     animation-duration: var(--seed-duration-d6);
     animation-timing-function: var(--seed-timing-function-enter);
@@ -162,7 +177,7 @@
     animation-duration: var(--seed-duration-d6);
     animation-timing-function: var(--seed-timing-function-enter-expressive);
 }
-.seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='false'] {
+.seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='false']:not([data-animation-done='true']) {
     animation-name: drawer-slide-from-bottom;
     animation-duration: var(--seed-duration-d6);
     animation-timing-function: var(--seed-timing-function-enter-expressive);
@@ -172,7 +187,7 @@
     animation-duration: var(--seed-duration-d4);
     animation-timing-function: var(--seed-timing-function-exit);
 }
-.seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-delayed-snap-points='true'] {
+.seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-delayed-snap-points='true']:not([data-animation-done='true']) {
     animation-name: drawer-slide-from-bottom;
     animation-duration: var(--seed-duration-d6);
     animation-timing-function: var(--seed-timing-function-enter-expressive);

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

@@ -11,7 +11,7 @@
     height: var(--seed-dimension-x6);
     background: transparent;
     --seed-icon-size: var(--seed-dimension-x6);
-    --seed-icon-color: var(--seed-color-fg-neutral-inverted);
+    --seed-icon-color: var(--seed-color-palette-static-white);
 }
 .seed-image-frame-reaction-button::before {
     content: '';
@@ -25,5 +25,5 @@
     outline: none;
 }
 .seed-image-frame-reaction-button:is([aria-pressed=true], [data-pressed]) {
-    --seed-icon-color: var(--seed-color-fg-brand);
+    --seed-icon-color: var(--seed-color-bg-transparent);
 }

package/recipes/image-frame.css

@@ -1,17 +1,15 @@
 .seed-image-frame {
     position: relative;
+    overflow: hidden;
+    border-radius: inherit;
 }
 .seed-image-frame > img, .seed-image-frame > video {
+    display: block;
+    width: 100%;
+    height: 100%;
     object-fit: cover;
+    border-radius: inherit;
 }
-.seed-image-frame--rounded_true {
-    overflow: hidden;
-    border-radius: var(--seed-radius-r2);
-}
-.seed-image-frame--rounded_true > img, .seed-image-frame--rounded_true > video {
-    border-radius: var(--seed-radius-r2);
-}
-.seed-image-frame--rounded_false {}
 .seed-image-frame--stroke_true::after {
     content: '';
     position: absolute;
@@ -23,4 +21,8 @@
     border-radius: inherit;
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
 }
-.seed-image-frame--stroke_false {}
+.seed-image-frame--stroke_false {}
+.seed-image-frame--rounded_true {
+    border-radius: var(--seed-radius-r2);
+}
+.seed-image-frame--rounded_false {}

package/recipes/image-frame.d.ts

@@ -2,11 +2,11 @@ declare interface ImageFrameVariant {
   /**
   * @default false
   */
-  rounded: boolean;
+  stroke: boolean;
 /**
   * @default false
   */
-  stroke: boolean;
+  rounded: boolean;
 }
 
 declare type ImageFrameVariantMap = {

package/recipes/image-frame.mjs

@@ -2,18 +2,18 @@ import './image-frame.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const defaultVariant = {
-  "rounded": false,
-  "stroke": false
+  "stroke": false,
+  "rounded": false
 };
 
 const compoundVariants = [];
 
 export const imageFrameVariantMap = {
-  "rounded": [
+  "stroke": [
     true,
     false
   ],
-  "stroke": [
+  "rounded": [
     true,
     false
   ]

package/vars/component/bottom-sheet.d.ts

@@ -42,27 +42,44 @@ export declare const vars: {
         "color": "var(--seed-color-fg-neutral-muted)",
         "fontSize": "var(--seed-font-size-t5)",
         "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-regular)"
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
       },
       "closeButton": {
-        "fromTop": "var(--seed-dimension-x5)",
-        "fromRight": "var(--seed-dimension-x5)"
+        "fromTop": "var(--seed-dimension-x6)",
+        "fromRight": "var(--seed-dimension-x4)"
       }
     }
   },
-  "headerAlignmentLeft": {
+  "headerAlignmentLeftCloseButtonTrue": {
     "enabled": {
-      "header": {
+      "title": {
+        "paddingRight": "50px",
+        "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)"
+      }
+    }
+  },
+  "headerAlignmentLeftCloseButtonFalse": {
+    "enabled": {
+      "title": {
         "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
-        "paddingRight": "50px"
+        "paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   },
-  "headerAlignmentCenter": {
+  "headerAlignmentCenterCloseButtonTrue": {
     "enabled": {
-      "header": {
-        "paddingLeft": "50px",
-        "paddingRight": "50px"
+      "title": {
+        "paddingLeft": "60px",
+        "paddingRight": "60px"
+      }
+    }
+  },
+  "headerAlignmentCenterCloseButtonFalse": {
+    "enabled": {
+      "title": {
+        "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   }

package/vars/component/bottom-sheet.mjs

@@ -42,27 +42,44 @@ export const vars = {
         "color": "var(--seed-color-fg-neutral-muted)",
         "fontSize": "var(--seed-font-size-t5)",
         "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-regular)"
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
       },
       "closeButton": {
-        "fromTop": "var(--seed-dimension-x5)",
-        "fromRight": "var(--seed-dimension-x5)"
+        "fromTop": "var(--seed-dimension-x6)",
+        "fromRight": "var(--seed-dimension-x4)"
       }
     }
   },
-  "headerAlignmentLeft": {
+  "headerAlignmentLeftCloseButtonTrue": {
     "enabled": {
-      "header": {
+      "title": {
+        "paddingRight": "50px",
+        "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)"
+      }
+    }
+  },
+  "headerAlignmentLeftCloseButtonFalse": {
+    "enabled": {
+      "title": {
         "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
-        "paddingRight": "50px"
+        "paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   },
-  "headerAlignmentCenter": {
+  "headerAlignmentCenterCloseButtonTrue": {
     "enabled": {
-      "header": {
-        "paddingLeft": "50px",
-        "paddingRight": "50px"
+      "title": {
+        "paddingLeft": "60px",
+        "paddingRight": "60px"
+      }
+    }
+  },
+  "headerAlignmentCenterCloseButtonFalse": {
+    "enabled": {
+      "title": {
+        "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   }

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

@@ -3,27 +3,32 @@ export declare const vars: {
     "enabled": {
       /** 하트 아이콘 토글 버튼입니다. 이미지 위에서 좋아요 기능에 사용됩니다. */
       "root": {
-        /** 버튼 배경색입니다. */
-        "color": "var(--seed-color-palette-static-black-alpha-200)",
-        "cornerRadius": "var(--seed-radius-full)",
         /** 보이는 버튼 크기입니다. */
         "size": "var(--seed-dimension-x6)",
         /** 터치 영역 크기입니다. */
         "targetSize": "var(--seed-dimension-x10)"
       },
-      /** 하트 아이콘입니다. 기본 상태에서는 IconHeartLine, 선택 상태에서는 IconHeartFill을 사용합니다. */
-      "icon": {
-        /** 버튼 배경색입니다. */
-        "color": "var(--seed-color-fg-neutral-inverted)",
+      /** lineIcon 아래에 내려가는 하트 아이콘입니다. */
+      "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)"
+      },
+      /** fillIcon 위로 올라가는 하트 아이콘입니다. */
+      "lineIcon": {
+        "color": "var(--seed-color-palette-static-white)",
         /** 보이는 버튼 크기입니다. */
         "size": "var(--seed-dimension-x6)"
       }
     },
     "selected": {
-      /** 하트 아이콘입니다. 기본 상태에서는 IconHeartLine, 선택 상태에서는 IconHeartFill을 사용합니다. */
-      "icon": {
-        /** 버튼 배경색입니다. */
-        "color": "var(--seed-color-fg-brand)"
+      /** lineIcon 아래에 내려가는 하트 아이콘입니다. */
+      "fillIcon": {
+        "gradient": "#FF9A56 0%, #FF6600 100%"
+      },
+      /** fillIcon 위로 올라가는 하트 아이콘입니다. */
+      "lineIcon": {
+        "color": "var(--seed-color-bg-transparent)"
       }
     }
   }

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

@@ -2,19 +2,24 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-palette-static-black-alpha-200)",
-        "cornerRadius": "var(--seed-radius-full)",
         "size": "var(--seed-dimension-x6)",
         "targetSize": "var(--seed-dimension-x10)"
       },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral-inverted)",
+      "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)"
+      },
+      "lineIcon": {
+        "color": "var(--seed-color-palette-static-white)",
         "size": "var(--seed-dimension-x6)"
       }
     },
     "selected": {
-      "icon": {
-        "color": "var(--seed-color-fg-brand)"
+      "fillIcon": {
+        "gradient": "#FF9A56 0%, #FF6600 100%"
+      },
+      "lineIcon": {
+        "color": "var(--seed-color-bg-transparent)"
       }
     }
   }

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

@@ -1,47 +1,53 @@
 export declare const vars: {
   /**
-   * 모서리에 라운드 스타일을 적용합니다.
+   * 이미지 테두리에 스트로크를 표시합니다.
    */
-  "roundedTrue": {
+  "strokeTrue": {
     "enabled": {
       "root": {
-        /** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
-        "cornerRadius": "var(--seed-radius-r2)"
+        /** stroke 옵션 사용 시 적용되는 테두리 색상입니다. */
+        "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
+        /** stroke 옵션 사용 시 적용되는 테두리 두께입니다. */
+        "strokeWidth": "1px"
       }
     }
   },
   /**
-   * 모서리를 직각으로 유지합니다.
+   * 테두리를 표시하지 않습니다.
    */
-  "roundedFalse": {
+  "strokeFalse": {
     "enabled": {
       "root": {
-        /** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
-        "cornerRadius": "0px"
+        /** stroke 옵션 사용 시 적용되는 테두리 두께입니다. */
+        "strokeWidth": "0px"
       }
     }
   },
   /**
-   * 이미지 테두리에 스트로크를 표시합니다.
+   * 모서리를 둥글게 처리합니다.
+@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
+Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
+
    */
-  "strokeTrue": {
+  "roundedTrue": {
     "enabled": {
       "root": {
-        /** stroke 옵션 사용 시 적용되는 테두리 색상입니다. */
-        "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
-        /** stroke 옵션 사용 시 적용되는 테두리 두께입니다. */
-        "strokeWidth": "1px"
+        /** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
+        "cornerRadius": "var(--seed-radius-r2)"
       }
     }
   },
   /**
-   * 테두리를 표시하지 않습니다.
+   * 모서리를 둥글게 처리하지 않습니다.
+@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
+Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
+
    */
-  "strokeFalse": {
+  "roundedFalse": {
     "enabled": {
       "root": {
-        /** stroke 옵션 사용 시 적용되는 테두리 두께입니다. */
-        "strokeWidth": "0px"
+        /** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
+        "cornerRadius": "0px"
       }
     }
   }

package/vars/component/image-frame.mjs

@@ -1,30 +1,30 @@
 export const vars = {
-  "roundedTrue": {
+  "strokeTrue": {
     "enabled": {
       "root": {
-        "cornerRadius": "var(--seed-radius-r2)"
+        "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
+        "strokeWidth": "1px"
       }
     }
   },
-  "roundedFalse": {
+  "strokeFalse": {
     "enabled": {
       "root": {
-        "cornerRadius": "0px"
+        "strokeWidth": "0px"
       }
     }
   },
-  "strokeTrue": {
+  "roundedTrue": {
     "enabled": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
-        "strokeWidth": "1px"
+        "cornerRadius": "var(--seed-radius-r2)"
       }
     }
   },
-  "strokeFalse": {
+  "roundedFalse": {
     "enabled": {
       "root": {
-        "strokeWidth": "0px"
+        "cornerRadius": "0px"
       }
     }
   }