padding

Author: junghyeonsu

docs/public/rootage/components/bottom-sheet.json

@@ -306,10 +306,6 @@
                 "fontWeight": {
                   "type": "number",
                   "value": "$font-weight.regular"
-                },
-                "paddingX": {
-                  "type": "dimension",
-                  "value": "$dimension.spacing-x.global-gutter"
                 }
               },
               "closeButton": {
@@ -389,6 +385,12 @@
                   "type": "dimension",
                   "value": "$dimension.x4"
                 }
+              },
+              "description": {
+                "paddingX": {
+                  "type": "dimension",
+                  "value": "$dimension.spacing-x.global-gutter"
+                }
               }
             }
           }

examples/stackflow-spa/src/activities/ActivityBottomSheetModalTest.tsx

@@ -27,7 +27,7 @@ const ActivityBottomSheetModalTest: StaticActivityComponentType<
     <BottomSheetRoot open={open} onOpenChange={onOpenChange} modal={modal} headerAlign="center">
       <BottomSheetContent
         showHandle
-        showCloseButton={true}
+        showCloseButton={false}
         title="BottomSheet Modal Prop 테스트"
         layerIndex={useActivityZIndexBase()}
         description="이 화면은 BottomSheet의 modal prop을 동적으로 변경할 때 애니메이션이 재실행되지 않는지 테스트하기 위한 화면입니다."

packages/css/all.css

@@ -2733,8 +2733,6 @@
   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;
 }
@@ -2814,6 +2812,11 @@
   padding-right: 60px;
 }
 
+.seed-bottom-sheet__description--headerAlign_center {
+  padding-left: var(--seed-dimension-spacing-x-global-gutter);
+  padding-right: var(--seed-dimension-spacing-x-global-gutter);
+}
+
 .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);

packages/css/all.min.css

@@ -81,8 +81,6 @@
     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;
 }
@@ -155,6 +153,10 @@
     padding-left: 60px;
     padding-right: 60px;
 }
+.seed-bottom-sheet__description--headerAlign_center {
+    padding-left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-right: var(--seed-dimension-spacing-x-global-gutter);
+}
 .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);

packages/css/recipes/bottom-sheet.css

@@ -42,8 +42,7 @@ 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)",
-        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
+        "fontWeight": "var(--seed-font-weight-regular)"
       },
       "closeButton": {
         "fromTop": "var(--seed-dimension-x6)",
@@ -70,6 +69,9 @@ export declare const vars: {
       "title": {
         "paddingLeft": "var(--seed-dimension-x4)",
         "paddingRight": "var(--seed-dimension-x4)"
+      },
+      "description": {
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   },

packages/css/vars/component/bottom-sheet.d.ts

@@ -42,8 +42,7 @@ 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)",
-        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
+        "fontWeight": "var(--seed-font-weight-regular)"
       },
       "closeButton": {
         "fromTop": "var(--seed-dimension-x6)",
@@ -70,6 +69,9 @@ export const vars = {
       "title": {
         "paddingLeft": "var(--seed-dimension-x4)",
         "paddingRight": "var(--seed-dimension-x4)"
+      },
+      "description": {
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   },

packages/css/vars/component/bottom-sheet.mjs

@@ -118,8 +118,6 @@ const bottomSheet = defineSlotRecipe({
       fontSize: vars.base.enabled.description.fontSize,
       lineHeight: vars.base.enabled.description.lineHeight,
       fontWeight: vars.base.enabled.description.fontWeight,
-      paddingLeft: vars.base.enabled.description.paddingX,
-      paddingRight: vars.base.enabled.description.paddingX,
 
       margin: 0,
       whiteSpace: "pre-wrap",
@@ -209,6 +207,10 @@ const bottomSheet = defineSlotRecipe({
             paddingRight: vars.headerAlignmentCenterCloseButtonTrue.enabled.title.paddingRight,
           },
         },
+        description: {
+          paddingLeft: vars.headerAlignmentCenter.enabled.description.paddingX,
+          paddingRight: vars.headerAlignmentCenter.enabled.description.paddingX,
+        },
       },
     },
     skipAnimation: {

packages/qvism-preset/src/recipes/bottom-sheet.ts

@@ -42,8 +42,7 @@ 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)",
-        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
+        "fontWeight": "var(--seed-font-weight-regular)"
       },
       "closeButton": {
         "fromTop": "var(--seed-dimension-x6)",
@@ -70,6 +69,9 @@ export declare const vars: {
       "title": {
         "paddingLeft": "var(--seed-dimension-x4)",
         "paddingRight": "var(--seed-dimension-x4)"
+      },
+      "description": {
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   },

packages/qvism-preset/src/vars/component/bottom-sheet.d.ts

@@ -42,8 +42,7 @@ 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)",
-        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
+        "fontWeight": "var(--seed-font-weight-regular)"
       },
       "closeButton": {
         "fromTop": "var(--seed-dimension-x6)",
@@ -70,6 +69,9 @@ export const vars = {
       "title": {
         "paddingLeft": "var(--seed-dimension-x4)",
         "paddingRight": "var(--seed-dimension-x4)"
+      },
+      "description": {
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   },