change closeButton offset

Author: junghyeonsu

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

@@ -302,11 +302,11 @@
               "closeButton": {
                 "fromTop": {
                   "type": "dimension",
-                  "value": "$dimension.x5"
+                  "value": "$dimension.x6"
                 },
                 "fromRight": {
                   "type": "dimension",
-                  "value": "$dimension.x5"
+                  "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}>
       <BottomSheetContent
         showHandle
-        showCloseButton={false}
+        showCloseButton={true}
         title="BottomSheet Modal Prop 테스트"
         layerIndex={useActivityZIndexBase()}
       >

packages/css/all.css

@@ -2766,8 +2766,8 @@
 }
 
 .seed-bottom-sheet__closeButton {
-  top: var(--seed-dimension-x5);
-  right: var(--seed-dimension-x5);
+  top: var(--seed-dimension-x6);
+  right: var(--seed-dimension-spacing-x-global-gutter);
   border-radius: var(--seed-radius-full);
   background: var(--seed-color-bg-neutral-weak);
   cursor: pointer;

packages/css/all.min.css

@@ -116,8 +116,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-spacing-x-global-gutter);
     border-radius: var(--seed-radius-full);
     background: var(--seed-color-bg-neutral-weak);
     width: 28px;

packages/css/recipes/bottom-sheet.css

@@ -45,8 +45,8 @@ export declare const vars: {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "closeButton": {
-        "fromTop": "var(--seed-dimension-x5)",
-        "fromRight": "var(--seed-dimension-x5)"
+        "fromTop": "var(--seed-dimension-x6)",
+        "fromRight": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   },

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

@@ -45,8 +45,8 @@ export const vars = {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "closeButton": {
-        "fromTop": "var(--seed-dimension-x5)",
-        "fromRight": "var(--seed-dimension-x5)"
+        "fromTop": "var(--seed-dimension-x6)",
+        "fromRight": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   },

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

@@ -45,8 +45,8 @@ export declare const vars: {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "closeButton": {
-        "fromTop": "var(--seed-dimension-x5)",
-        "fromRight": "var(--seed-dimension-x5)"
+        "fromTop": "var(--seed-dimension-x6)",
+        "fromRight": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   },

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

@@ -45,8 +45,8 @@ export const vars = {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "closeButton": {
-        "fromTop": "var(--seed-dimension-x5)",
-        "fromRight": "var(--seed-dimension-x5)"
+        "fromTop": "var(--seed-dimension-x6)",
+        "fromRight": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
   },

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

@@ -133,8 +133,8 @@ data:
           lineHeight: $line-height.t5
           fontWeight: $font-weight.regular
         closeButton:
-          fromTop: $dimension.x5
-          fromRight: $dimension.x5
+          fromTop: $dimension.x6
+          fromRight: $dimension.spacing-x.global-gutter
     headerAlignment=left:
       enabled:
         header: