feat: Select Box 디자인 변경사항 반영

daangn · Jan 8, 2025 · 1746e92 · 1746e92
1 parent 814bd4e
commit 1746e92
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 42 deletions.
diff --git a/docs/public/rootage/components/select-box.json b/docs/public/rootage/components/select-box.json
@@ -9,7 +9,7 @@
       "enabled": {
         "root": {
           "paddingX": "$unit.s4",
-          "paddingY": "19px",
+          "paddingY": "$unit.s5",
           "gap": "$unit.s2_5",
           "strokeWidth": "1px",
           "strokeColor": "$color.stroke.neutral",
@@ -31,8 +31,7 @@
           "lineHeight": "$line-height.s4"
         },
         "checkboxControl": {
-          "size": "22px",
-          "margin": "1px",
+          "size": "$unit.s6",
           "color": "$color.bg.layer-default",
           "strokeWidth": "1.25px",
           "strokeColor": "$color.stroke.control",

diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json
@@ -19127,9 +19127,11 @@
                     {
                       "key": "paddingY",
                       "value": {
-                        "type": "dimension",
-                        "value": 19,
-                        "unit": "px"
+                        "type": "token",
+                        "group": [
+                          "unit"
+                        ],
+                        "key": "s5"
                       }
                     },
                     {
@@ -19286,17 +19288,11 @@
                     {
                       "key": "size",
                       "value": {
-                        "type": "dimension",
-                        "value": 22,
-                        "unit": "px"
-                      }
-                    },
-                    {
-                      "key": "margin",
-                      "value": {
-                        "type": "dimension",
-                        "value": 1,
-                        "unit": "px"
+                        "type": "token",
+                        "group": [
+                          "unit"
+                        ],
+                        "key": "s6"
                       }
                     },
                     {

diff --git a/packages/qvism-preset/src/select-box.recipe.ts b/packages/qvism-preset/src/select-box.recipe.ts
@@ -32,8 +32,6 @@ export const selectBox = defineRecipe({
   base: {
     root: {
       cursor: "pointer",
-      borderStyle: "solid",
-      boxSizing: "border-box",
 
       display: "flex",
       alignItems: "center",
@@ -43,17 +41,18 @@ export const selectBox = defineRecipe({
       paddingInline: vars.base.enabled.root.paddingX,
       paddingBlock: vars.base.enabled.root.paddingY,
 
-      borderWidth: vars.base.enabled.root.strokeWidth,
-      borderColor: vars.base.enabled.root.strokeColor,
-
       borderRadius: vars.base.enabled.root.cornerRadius,
 
+      boxShadow: `inset 0 0 0 ${vars.base.enabled.root.strokeWidth} ${vars.base.enabled.root.strokeColor}`,
+
       [pseudo(active)]: {
         backgroundColor: vars.base.enabledPressed.root.color,
       },
 
       [pseudo(checked)]: {
         backgroundColor: vars.base.enabledSelected.root.color,
+
+        boxShadow: `inset 0 0 0 ${vars.base.enabled.root.strokeWidth} ${vars.base.enabledSelected.root.strokeColor}`,
       },
 
       [pseudo(checked, active)]: {
@@ -76,8 +75,6 @@ export const selectBox = defineRecipe({
       width: vars.base.enabled.checkboxControl.size,
       height: vars.base.enabled.checkboxControl.size,
 
-      margin: vars.base.enabled.checkboxControl.margin,
-
       backgroundColor: vars.base.enabled.checkboxControl.color,
 
       borderStyle: "solid",

diff --git a/packages/rootage/components/callout.yaml b/packages/rootage/components/callout.yaml
@@ -14,7 +14,6 @@ data:
         lineHeight: $line-height.s5
         minHeight: 50px
       icon:
-        # XXX: scalable 결정 x
         size: $unit.s4
       title:
         fontWeight: $font-weight.bold

diff --git a/packages/rootage/components/select-box.yaml b/packages/rootage/components/select-box.yaml
@@ -8,7 +8,7 @@ data:
     enabled:
       root:
         paddingX: $unit.s4
-        paddingY: 19px
+        paddingY: $unit.s5
         gap: $unit.s2_5
         strokeWidth: 1px
         strokeColor: $color.stroke.neutral
@@ -26,8 +26,7 @@ data:
         fontSize: $font-size.s4
         lineHeight: $line-height.s4
       checkboxControl:
-        size: 22px
-        margin: 1px
+        size: $unit.s6
         color: $color.bg.layer-default
         strokeWidth: 1.25px
         strokeColor: $color.stroke.control

diff --git a/packages/stylesheet/selectBox.css b/packages/stylesheet/selectBox.css
@@ -1,22 +1,20 @@
 .selectBox__root {
     cursor: pointer;
-    border-style: solid;
-    box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--seed-v3-unit-s2_5);
     padding-inline: var(--seed-v3-unit-s4);
-    padding-block: 19px;
-    border-width: 1px;
-    border-color: var(--seed-v3-color-stroke-neutral);
+    padding-block: var(--seed-v3-unit-s5);
     border-radius: var(--seed-v3-radius-s3);
+    box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-neutral);
 }
 .selectBox__root:is(:active, [data-active]) {
     background-color: var(--seed-v3-color-bg-layer-default-pressed);
 }
 .selectBox__root:is(:checked, [data-checked]) {
     background-color: var(--seed-v3-color-bg-neutral-weak);
+    box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-control);
 }
 .selectBox__root:is(:checked, [data-checked]):is(:active, [data-active]) {
     background-color: var(--seed-v3-color-bg-neutral-weak-pressed);
@@ -32,9 +30,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 22px;
-    height: 22px;
-    margin: 1px;
+    width: var(--seed-v3-unit-s6);
+    height: var(--seed-v3-unit-s6);
     background-color: var(--seed-v3-color-bg-layer-default);
     border-style: solid;
     border-width: 1.25px;

diff --git a/packages/vars/lib/component/select-box.d.ts b/packages/vars/lib/component/select-box.d.ts
@@ -3,7 +3,7 @@ export declare const vars: {
     "enabled": {
       "root": {
         "paddingX": "var(--seed-v3-unit-s4)",
-        "paddingY": "19px",
+        "paddingY": "var(--seed-v3-unit-s5)",
         "gap": "var(--seed-v3-unit-s2_5)",
         "strokeWidth": "1px",
         "strokeColor": "var(--seed-v3-color-stroke-neutral)",
@@ -25,8 +25,7 @@ export declare const vars: {
         "lineHeight": "var(--seed-v3-line-height-s4)"
       },
       "checkboxControl": {
-        "size": "22px",
-        "margin": "1px",
+        "size": "var(--seed-v3-unit-s6)",
         "color": "var(--seed-v3-color-bg-layer-default)",
         "strokeWidth": "1.25px",
         "strokeColor": "var(--seed-v3-color-stroke-control)",

diff --git a/packages/vars/lib/component/select-box.mjs b/packages/vars/lib/component/select-box.mjs
@@ -3,7 +3,7 @@ export const vars = {
     "enabled": {
       "root": {
         "paddingX": "var(--seed-v3-unit-s4)",
-        "paddingY": "19px",
+        "paddingY": "var(--seed-v3-unit-s5)",
         "gap": "var(--seed-v3-unit-s2_5)",
         "strokeWidth": "1px",
         "strokeColor": "var(--seed-v3-color-stroke-neutral)",
@@ -25,8 +25,7 @@ export const vars = {
         "lineHeight": "var(--seed-v3-line-height-s4)"
       },
       "checkboxControl": {
-        "size": "22px",
-        "margin": "1px",
+        "size": "var(--seed-v3-unit-s6)",
         "color": "var(--seed-v3-color-bg-layer-default)",
         "strokeWidth": "1.25px",
         "strokeColor": "var(--seed-v3-color-stroke-control)",