@seed-design/css 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/css",
-  "version": "1.2.1",
+  "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,21 +137,26 @@
 }
 .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__header--headerAlign_left[data-show-close-button] {
+.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;
+    text-align: center;
+}
+.seed-bottom-sheet__title--headerAlign_center {
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
     padding-right: var(--seed-dimension-spacing-x-global-gutter);
-    text-align: center;
 }
-.seed-bottom-sheet__header--headerAlign_center[data-show-close-button] {
-    padding-left: 50px;
-    padding-right: 50px;
+.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;

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.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"
       }
     }
   }