fix: checkbox line height, vertical adjustment

daangn · Dec 23, 2024 · 02ad037 · 02ad037
1 parent 25cab38
commit 02ad037
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/packages/recipe-generator/preset/src/checkbox.recipe.ts b/packages/recipe-generator/preset/src/checkbox.recipe.ts
@@ -41,7 +41,6 @@ const checkbox = defineRecipe({
     },
     label: {
       color: vars.base.enabled.label.color,
-      lineHeight: vars.base.enabled.label.lineHeight,
     },
   },
   variants: {
@@ -152,7 +151,8 @@ const checkbox = defineRecipe({
         },
         label: {
           fontSize: vars.sizeLarge.enabled.label.fontSize,
-          marginBlockStart: "7px", // 수직 위치 보정
+          lineHeight: vars.sizeLarge.enabled.label.lineHeight,
+          marginBlockStart: "calc(18px - 0.65625rem)", // 수직 위치 보정, 18 - label.lineHeight / 2
         },
       },
       medium: {
@@ -167,7 +167,8 @@ const checkbox = defineRecipe({
         },
         label: {
           fontSize: vars.sizeMedium.enabled.label.fontSize,
-          marginBlockStart: "6px", // 수직 위치 보정
+          lineHeight: vars.sizeMedium.enabled.label.lineHeight,
+          marginBlockStart: "calc(16px - 0.59375rem)", // 수직 위치 보정, 16 - label.lineHeight / 2
         },
       },
       small: {
@@ -182,7 +183,8 @@ const checkbox = defineRecipe({
         },
         label: {
           fontSize: vars.sizeSmall.enabled.label.fontSize,
-          marginBlockStart: "5px", // 수직 위치 보정
+          lineHeight: vars.sizeSmall.enabled.label.lineHeight,
+          marginBlockStart: "calc(14px - 0.5625rem)", // 수직 위치 보정, 14 - label.lineHeight / 2
         },
       },
     },

diff --git a/packages/rootage/artifacts/components/checkbox.yaml b/packages/rootage/artifacts/components/checkbox.yaml
@@ -9,7 +9,6 @@ data:
     enabled:
       label:
         color: $color.fg.neutral
-        lineHeight: $line-height.s5
       root:
         gap: $unit.s2
     bold:

diff --git a/packages/stylesheet/checkbox.css b/packages/stylesheet/checkbox.css
@@ -31,7 +31,6 @@
 }
 .checkbox__label {
     color: var(--seed-v3-color-fg-neutral);
-    line-height: var(--seed-v3-line-height-s5);
 }
 .checkbox__label--bold_true {
     font-weight: var(--seed-v3-font-weight-bold);
@@ -114,7 +113,8 @@
 }
 .checkbox__label--size_large {
     font-size: var(--seed-v3-font-size-s5);
-    margin-block-start: 7px;
+    line-height: var(--seed-v3-line-height-s5);
+    margin-block-start: calc(18px - 0.65625rem);
 }
 .checkbox__root--size_medium {
     min-height: var(--seed-v3-unit-s8);
@@ -127,7 +127,8 @@
 }
 .checkbox__label--size_medium {
     font-size: var(--seed-v3-font-size-s4);
-    margin-block-start: 6px;
+    line-height: var(--seed-v3-line-height-s4);
+    margin-block-start: calc(16px - 0.59375rem);
 }
 .checkbox__root--size_small {
     min-height: var(--seed-v3-unit-s8);
@@ -140,7 +141,8 @@
 }
 .checkbox__label--size_small {
     font-size: var(--seed-v3-font-size-s3);
-    margin-block-start: 5px;
+    line-height: var(--seed-v3-line-height-s3);
+    margin-block-start: calc(14px - 0.5625rem);
 }
 .checkbox__icon--size_small-variant_ghost {
     width: 13.5px;