fix: use box-shadow for stroke to prevent unexpected layout change

daangn · Jan 21, 2025 · 052c33f · 052c33f
1 parent 0eaad7a
commit 052c33f
Show file tree

Hide file tree

Showing 15 changed files with 34 additions and 81 deletions.
diff --git a/docs/public/rootage/components/badge.json b/docs/public/rootage/components/badge.json
@@ -69,7 +69,7 @@
     "variant=outline": {
       "enabled": {
         "root": {
-          "borderWidth": "1px"
+          "strokeWidth": "1px"
         },
         "label": {
           "fontWeight": "$font-weight.bold"

diff --git a/docs/public/rootage/components/text-button.json b/docs/public/rootage/components/text-button.json
@@ -8,8 +8,7 @@
     "base": {
       "enabled": {
         "root": {
-          "paddingY": "$dimension.s0_5",
-          "borderWidth": "0.125rem"
+          "paddingY": "$dimension.s0_5"
         },
         "label": {
           "fontWeight": "$font-weight.regular"
@@ -23,8 +22,7 @@
       },
       "pressed": {
         "root": {
-          "color": "$color.palette.gray-200",
-          "borderColor": "$color.palette.gray-200"
+          "color": "$color.palette.gray-200"
         }
       },
       "disabled": {

diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json
@@ -10550,7 +10550,7 @@
                   "key": "root",
                   "property": [
                     {
-                      "key": "borderWidth",
+                      "key": "strokeWidth",
                       "value": {
                         "type": "dimension",
                         "value": 1,
@@ -21526,14 +21526,6 @@
                         ],
                         "key": "s0_5"
                       }
-                    },
-                    {
-                      "key": "borderWidth",
-                      "value": {
-                        "type": "dimension",
-                        "value": 0.125,
-                        "unit": "rem"
-                      }
                     }
                   ]
                 },
@@ -21602,17 +21594,6 @@
                         ],
                         "key": "gray-200"
                       }
-                    },
-                    {
-                      "key": "borderColor",
-                      "value": {
-                        "type": "token",
-                        "group": [
-                          "color",
-                          "palette"
-                        ],
-                        "key": "gray-200"
-                      }
                     }
                   ]
                 }

diff --git a/packages/qvism-preset/src/recipes/badge.ts b/packages/qvism-preset/src/recipes/badge.ts
@@ -63,10 +63,6 @@ const badge = defineRecipe({
         },
       },
       outline: {
-        root: {
-          borderStyle: "solid",
-          borderWidth: vars.variantOutline.enabled.root.borderWidth,
-        },
         label: {
           fontWeight: vars.variantOutline.enabled.label.fontWeight,
         },
@@ -128,7 +124,7 @@ const badge = defineRecipe({
       variant: "outline",
       css: {
         root: {
-          borderColor: vars.toneNeutralVariantOutline.enabled.root.strokeColor,
+          boxShadow: `inset 0 0 0 ${vars.variantOutline.enabled.root.strokeWidth} ${vars.toneNeutralVariantOutline.enabled.root.strokeColor}`,
         },
         label: {
           color: vars.toneNeutralVariantOutline.enabled.label.color,
@@ -164,7 +160,7 @@ const badge = defineRecipe({
       variant: "outline",
       css: {
         root: {
-          borderColor: vars.toneBrandVariantOutline.enabled.root.strokeColor,
+          boxShadow: `inset 0 0 0 ${vars.variantOutline.enabled.root.strokeWidth} ${vars.toneBrandVariantOutline.enabled.root.strokeColor}`,
         },
         label: {
           color: vars.toneBrandVariantOutline.enabled.label.color,
@@ -200,7 +196,7 @@ const badge = defineRecipe({
       variant: "outline",
       css: {
         root: {
-          borderColor: vars.toneInformativeVariantOutline.enabled.root.strokeColor,
+          boxShadow: `inset 0 0 0 ${vars.variantOutline.enabled.root.strokeWidth} ${vars.toneInformativeVariantOutline.enabled.root.strokeColor}`,
         },
         label: {
           color: vars.toneInformativeVariantOutline.enabled.label.color,
@@ -236,7 +232,7 @@ const badge = defineRecipe({
       variant: "outline",
       css: {
         root: {
-          borderColor: vars.tonePositiveVariantOutline.enabled.root.strokeColor,
+          boxShadow: `inset 0 0 0 ${vars.variantOutline.enabled.root.strokeWidth} ${vars.tonePositiveVariantOutline.enabled.root.strokeColor}`,
         },
         label: {
           color: vars.tonePositiveVariantOutline.enabled.label.color,
@@ -272,7 +268,7 @@ const badge = defineRecipe({
       variant: "outline",
       css: {
         root: {
-          borderColor: vars.toneDangerVariantOutline.enabled.root.strokeColor,
+          boxShadow: `inset 0 0 0 ${vars.variantOutline.enabled.root.strokeWidth} ${vars.toneDangerVariantOutline.enabled.root.strokeColor}`,
         },
         label: {
           color: vars.toneDangerVariantOutline.enabled.label.color,

diff --git a/packages/qvism-preset/src/recipes/text-button.ts b/packages/qvism-preset/src/recipes/text-button.ts
@@ -15,9 +15,6 @@ const textButton = defineRecipe({
 
       backgroundColor: "transparent",
       boxSizing: "border-box",
-
-      borderWidth: vars.base.enabled.root.borderWidth,
-      borderColor: "transparent",
       borderStyle: "solid",
 
       WebkitFontSmoothing: "antialiased",
@@ -33,7 +30,8 @@ const textButton = defineRecipe({
 
       [pseudo(active)]: {
         backgroundColor: vars.base.pressed.root.color,
-        borderColor: vars.base.pressed.root.borderColor,
+        // we use boxShadow instead of border to avoid layout shift
+        boxShadow: `0 0 0 2px ${vars.base.pressed.root.color}`, // TODO: move 2px to rootage
       },
 
       [pseudo(disabled, active)]: {

diff --git a/packages/rootage/components/badge.yaml b/packages/rootage/components/badge.yaml
@@ -45,7 +45,7 @@ data:
   variant=outline:
     enabled:
       root:
-        borderWidth: 1px
+        strokeWidth: 1px
       label:
         fontWeight: $font-weight.bold
   tone=neutral, variant=weak:

diff --git a/packages/rootage/components/text-button.yaml b/packages/rootage/components/text-button.yaml
@@ -8,7 +8,6 @@ data:
     enabled:
       root:
         paddingY: $dimension.s0_5
-        borderWidth: 0.125rem
       label:
         fontWeight: $font-weight.regular
       prefixIcon:
@@ -18,7 +17,7 @@ data:
     pressed:
       root:
         color: $color.palette.gray-200
-        borderColor: $color.palette.gray-200
+        # TODO: 터치 효과 좌우 2px 늘어나는 것 표현
     disabled:
       root:
         color: $color.fg.disabled

diff --git a/packages/stylesheet/badge.css b/packages/stylesheet/badge.css
@@ -36,10 +36,6 @@
 .badge__label--variant_solid {
     font-weight: var(--seed-v3-font-weight-bold)
 }
-.badge__root--variant_outline {
-    border-style: solid;
-    border-width: 1px
-}
 .badge__label--variant_outline {
     font-weight: var(--seed-v3-font-weight-bold)
 }
@@ -62,7 +58,7 @@
     color: var(--seed-v3-color-fg-neutral-inverted)
 }
 .badge__root--tone_neutral-variant_outline {
-    border-color: var(--seed-v3-color-stroke-neutral)
+    box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-neutral)
 }
 .badge__label--tone_neutral-variant_outline {
     color: var(--seed-v3-color-fg-neutral)
@@ -80,7 +76,7 @@
     color: var(--seed-v3-color-palette-static-white)
 }
 .badge__root--tone_brand-variant_outline {
-    border-color: var(--seed-v3-color-stroke-brand)
+    box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-brand)
 }
 .badge__label--tone_brand-variant_outline {
     color: var(--seed-v3-color-fg-brand)
@@ -98,7 +94,7 @@
     color: var(--seed-v3-color-palette-static-white)
 }
 .badge__root--tone_informative-variant_outline {
-    border-color: var(--seed-v3-color-stroke-informative)
+    box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-informative)
 }
 .badge__label--tone_informative-variant_outline {
     color: var(--seed-v3-color-fg-informative)
@@ -116,7 +112,7 @@
     color: var(--seed-v3-color-palette-static-white)
 }
 .badge__root--tone_positive-variant_outline {
-    border-color: var(--seed-v3-color-stroke-positive)
+    box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-positive)
 }
 .badge__label--tone_positive-variant_outline {
     color: var(--seed-v3-color-fg-positive)
@@ -134,7 +130,7 @@
     color: var(--seed-v3-color-palette-static-white)
 }
 .badge__root--tone_danger-variant_outline {
-    border-color: var(--seed-v3-color-stroke-danger)
+    box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-danger)
 }
 .badge__label--tone_danger-variant_outline {
     color: var(--seed-v3-color-fg-danger)

diff --git a/packages/stylesheet/component.css b/packages/stylesheet/component.css
@@ -1807,16 +1807,7 @@
   font-weight: var(--seed-v3-font-weight-medium);
 }
 
-.badge__label--variant_solid {
-  font-weight: var(--seed-v3-font-weight-bold);
-}
-
-.badge__root--variant_outline {
-  border-style: solid;
-  border-width: 1px;
-}
-
-.badge__label--variant_outline {
+.badge__label--variant_solid, .badge__label--variant_outline {
   font-weight: var(--seed-v3-font-weight-bold);
 }
 
@@ -1845,7 +1836,7 @@
 }
 
 .badge__root--tone_neutral-variant_outline {
-  border-color: var(--seed-v3-color-stroke-neutral);
+  box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-neutral);
 }
 
 .badge__label--tone_neutral-variant_outline {
@@ -1869,7 +1860,7 @@
 }
 
 .badge__root--tone_brand-variant_outline {
-  border-color: var(--seed-v3-color-stroke-brand);
+  box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-brand);
 }
 
 .badge__label--tone_brand-variant_outline {
@@ -1893,7 +1884,7 @@
 }
 
 .badge__root--tone_informative-variant_outline {
-  border-color: var(--seed-v3-color-stroke-informative);
+  box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-informative);
 }
 
 .badge__label--tone_informative-variant_outline {
@@ -1917,7 +1908,7 @@
 }
 
 .badge__root--tone_positive-variant_outline {
-  border-color: var(--seed-v3-color-stroke-positive);
+  box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-positive);
 }
 
 .badge__label--tone_positive-variant_outline {
@@ -1941,7 +1932,7 @@
 }
 
 .badge__root--tone_danger-variant_outline {
-  border-color: var(--seed-v3-color-stroke-danger);
+  box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-danger);
 }
 
 .badge__label--tone_danger-variant_outline {
@@ -4145,7 +4136,7 @@
   -moz-osx-font-smoothing: grayscale;
   cursor: pointer;
   background-color: #0000;
-  border: .125rem solid #0000;
+  border-style: solid;
   align-items: center;
   padding-inline: 0;
   font-family: inherit;
@@ -4159,7 +4150,7 @@
 
 .textButton__root:is(:active, [data-active]) {
   background-color: var(--seed-v3-color-palette-gray-200);
-  border-color: var(--seed-v3-color-palette-gray-200);
+  box-shadow: 0 0 0 2px var(--seed-v3-color-palette-gray-200);
 }
 
 .textButton__root:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {

diff --git a/packages/stylesheet/component.min.css b/packages/stylesheet/component.min.css
diff --git a/packages/stylesheet/textButton.css b/packages/stylesheet/textButton.css
@@ -5,8 +5,6 @@
     padding-inline: 0;
     background-color: transparent;
     box-sizing: border-box;
-    border-width: 0.125rem;
-    border-color: transparent;
     border-style: solid;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -19,7 +17,7 @@
 }
 .textButton__root:is(:active, [data-active]) {
     background-color: var(--seed-v3-color-palette-gray-200);
-    border-color: var(--seed-v3-color-palette-gray-200);
+    box-shadow: 0 0 0 2px var(--seed-v3-color-palette-gray-200);
 }
 .textButton__root:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
     background-color: transparent;

diff --git a/packages/vars/lib/component/badge.d.ts b/packages/vars/lib/component/badge.d.ts
@@ -63,7 +63,7 @@ export declare const vars: {
   "variantOutline": {
     "enabled": {
       "root": {
-        "borderWidth": "1px"
+        "strokeWidth": "1px"
       },
       "label": {
         "fontWeight": "var(--seed-v3-font-weight-bold)"

diff --git a/packages/vars/lib/component/badge.mjs b/packages/vars/lib/component/badge.mjs
@@ -63,7 +63,7 @@ export const vars = {
   "variantOutline": {
     "enabled": {
       "root": {
-        "borderWidth": "1px"
+        "strokeWidth": "1px"
       },
       "label": {
         "fontWeight": "var(--seed-v3-font-weight-bold)"

diff --git a/packages/vars/lib/component/text-button.d.ts b/packages/vars/lib/component/text-button.d.ts
@@ -2,8 +2,7 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
-        "paddingY": "var(--seed-v3-dimension-s0_5)",
-        "borderWidth": "0.125rem"
+        "paddingY": "var(--seed-v3-dimension-s0_5)"
       },
       "label": {
         "fontWeight": "var(--seed-v3-font-weight-regular)"
@@ -17,8 +16,7 @@ export declare const vars: {
     },
     "pressed": {
       "root": {
-        "color": "var(--seed-v3-color-palette-gray-200)",
-        "borderColor": "var(--seed-v3-color-palette-gray-200)"
+        "color": "var(--seed-v3-color-palette-gray-200)"
       }
     },
     "disabled": {

diff --git a/packages/vars/lib/component/text-button.mjs b/packages/vars/lib/component/text-button.mjs
@@ -2,8 +2,7 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
-        "paddingY": "var(--seed-v3-dimension-s0_5)",
-        "borderWidth": "0.125rem"
+        "paddingY": "var(--seed-v3-dimension-s0_5)"
       },
       "label": {
         "fontWeight": "var(--seed-v3-font-weight-regular)"
@@ -17,8 +16,7 @@ export const vars = {
     },
     "pressed": {
       "root": {
-        "color": "var(--seed-v3-color-palette-gray-200)",
-        "borderColor": "var(--seed-v3-color-palette-gray-200)"
+        "color": "var(--seed-v3-color-palette-gray-200)"
       }
     },
     "disabled": {