feat(bottom-sheet): add paddingX property for improved layout consistency

Author: junghyeonsu

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

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

packages/css/all.css

@@ -2733,6 +2733,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);
   white-space: pre-wrap;
   margin: 0;
 }
@@ -2815,11 +2817,6 @@
   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,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;
 }
@@ -155,10 +157,6 @@
     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,7 +42,8 @@ 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-x6)",
@@ -70,9 +71,6 @@ export declare const vars: {
       "title": {
         "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
         "paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
-      },
-      "description": {
-        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   },

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

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

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

@@ -119,6 +119,9 @@ const bottomSheet = defineSlotRecipe({
       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",
     },
@@ -207,10 +210,6 @@ 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,7 +42,8 @@ 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-x6)",
@@ -70,9 +71,6 @@ export declare const vars: {
       "title": {
         "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
         "paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
-      },
-      "description": {
-        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   },

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

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

packages/qvism-preset/src/vars/component/bottom-sheet.mjs

@@ -130,6 +130,7 @@ data:
           fontSize: $font-size.t5
           lineHeight: $line-height.t5
           fontWeight: $font-weight.regular
+          paddingX: $dimension.spacing-x.global-gutter
         closeButton:
           fromTop: $dimension.x6
           fromRight: $dimension.x4
@@ -147,8 +148,6 @@ data:
         title:
           paddingLeft: $dimension.spacing-x.global-gutter
           paddingRight: $dimension.spacing-x.global-gutter
-        description:
-          paddingX: $dimension.spacing-x.global-gutter
     headerAlignment=center,closeButton=true:
       enabled:
         title: