refactor: Segmented Control 트랜지션에 토큰 연결

daangn · Jan 9, 2025 · 7255ea2 · 7255ea2
1 parent 084f3ca
commit 7255ea2
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 13 deletions.
diff --git a/docs/public/rootage/components/segmented-control.json b/docs/public/rootage/components/segmented-control.json
@@ -36,7 +36,9 @@
                 "color": "#0000000d"
               }
             ]
-          }
+          },
+          "transformDuration": "$duration.s4",
+          "transformTimingFunction": "$timing-function.easing"
         }
       },
       "enabled,pressed": {

diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json
@@ -18939,6 +18939,26 @@
                           }
                         ]
                       }
+                    },
+                    {
+                      "key": "transformDuration",
+                      "value": {
+                        "type": "token",
+                        "group": [
+                          "duration"
+                        ],
+                        "key": "s4"
+                      }
+                    },
+                    {
+                      "key": "transformTimingFunction",
+                      "value": {
+                        "type": "token",
+                        "group": [
+                          "timing-function"
+                        ],
+                        "key": "easing"
+                      }
                     }
                   ]
                 }

diff --git a/packages/qvism-preset/src/recipes/segmented-control.ts b/packages/qvism-preset/src/recipes/segmented-control.ts
@@ -110,12 +110,8 @@ const segmentedControl = defineRecipe({
 
       boxShadow: vars.base.enabled.indicator.shadow,
 
-      willChange: "left",
-      // XXX: 임의
-      transition: "left 0.2s",
-
-      left: "var(--seed-design-segmented-control-indicator-left, 0px)",
-      width: "var(--seed-design-segmented-control-indicator-width, 0px)",
+      willChange: "transform",
+      transition: `transform ${vars.base.enabled.indicator.transformDuration} ${vars.base.enabled.indicator.transformTimingFunction}`,
     },
   },
   variants: {},

diff --git a/packages/rootage/components/segmented-control.yaml b/packages/rootage/components/segmented-control.yaml
@@ -31,6 +31,8 @@ data:
               blur: 6px
               spread: 0px
               color: "#0000000d"
+        transformDuration: $duration.s4
+        transformTimingFunction: $timing-function.easing
     enabled,pressed:
       segment:
         color: $color.bg.neutral-weak-pressed

diff --git a/packages/stylesheet/segmentedControl.css b/packages/stylesheet/segmentedControl.css
@@ -71,8 +71,6 @@
     border-radius: var(--seed-v3-radius-full);
     background-color: var(--seed-v3-color-bg-layer-default);
     box-shadow: 0px 1px 6px 0px #0000000d;
-    will-change: left;
-    transition: left 0.2s;
-    left: var(--seed-design-segmented-control-indicator-left, 0px);
-    width: var(--seed-design-segmented-control-indicator-width, 0px);
+    will-change: transform;
+    transition: transform var(--seed-v3-duration-s4) var(--seed-v3-timing-function-easing);
 }
diff --git a/packages/vars/lib/component/segmented-control.d.ts b/packages/vars/lib/component/segmented-control.d.ts
@@ -19,7 +19,9 @@ export declare const vars: {
       "indicator": {
         "cornerRadius": "var(--seed-v3-radius-full)",
         "color": "var(--seed-v3-color-bg-layer-default)",
-        "shadow": "0px 1px 6px 0px #0000000d"
+        "shadow": "0px 1px 6px 0px #0000000d",
+        "transformDuration": "var(--seed-v3-duration-s4)",
+        "transformTimingFunction": "var(--seed-v3-timing-function-easing)"
       }
     },
     "enabledPressed": {

diff --git a/packages/vars/lib/component/segmented-control.mjs b/packages/vars/lib/component/segmented-control.mjs
@@ -19,7 +19,9 @@ export const vars = {
       "indicator": {
         "cornerRadius": "var(--seed-v3-radius-full)",
         "color": "var(--seed-v3-color-bg-layer-default)",
-        "shadow": "0px 1px 6px 0px #0000000d"
+        "shadow": "0px 1px 6px 0px #0000000d",
+        "transformDuration": "var(--seed-v3-duration-s4)",
+        "transformTimingFunction": "var(--seed-v3-timing-function-easing)"
       }
     },
     "enabledPressed": {