feat: add motion tokens

daangn · Dec 10, 2024 · e3f9987 · e3f9987
1 parent e7d7d84
commit e3f9987
Show file tree

Hide file tree

Showing 13 changed files with 212 additions and 22 deletions.
diff --git a/docs/content/docs/design/foundation/motion.mdx b/docs/content/docs/design/foundation/motion.mdx
@@ -29,25 +29,12 @@ description: 모션은 유저 인터페이스의 표현력을 높이고 쉽게
 
 enter, exit 모션에서 특히 강조되어야 하는 움직임에 사용합니다.
 
-### Easing Tokens
+### Timing Function Tokens
 
-| 이름 | 값 |
-| --- | --- |
-| `$timing-function.easing` | cubic-bezier(0.35, 0, 0.35, 1) |
-| `$timing-function.enter` | cubic-bezier(0, 0, 0.15, 1) |
-| `$timing-function.exit` | cubic-bezier(0.35, 0, 1, 1) |
-| `$timing-function.enter-expressive` | cubic-bezier(0.03, 0.4, 0.1, 1) |
-| `$timing-function.exit-expressive` | cubic-bezier(0.35, 0, 0.95, 0.55) |
+<TokenTable groups={["timing-function"]} />
 
 ## Duration
 
 ### Duration Tokens
 
-| 이름 | 값 |
-| --- | --- |
-| `$duration.50` | 50ms |
-| `$duration.100` | 100ms |
-| `$duration.150` | 150ms |
-| `$duration.200` | 200ms |
-| `$duration.250` | 250ms |
-| `$duration.300` | 300ms |
+<TokenTable groups={["duration"]} />
diff --git a/docs/public/rootage/duration.json b/docs/public/rootage/duration.json
@@ -0,0 +1,42 @@
+{
+  "kind": "Tokens",
+  "metadata": {
+    "id": "duration",
+    "name": "Duration"
+  },
+  "data": {
+    "collection": "global",
+    "tokens": {
+      "$duration.s1": {
+        "values": {
+          "default": "50ms"
+        }
+      },
+      "$duration.s2": {
+        "values": {
+          "default": "100ms"
+        }
+      },
+      "$duration.s3": {
+        "values": {
+          "default": "150ms"
+        }
+      },
+      "$duration.s4": {
+        "values": {
+          "default": "200ms"
+        }
+      },
+      "$duration.s5": {
+        "values": {
+          "default": "250ms"
+        }
+      },
+      "$duration.s6": {
+        "values": {
+          "default": "300ms"
+        }
+      }
+    }
+  }
+}
diff --git a/docs/public/rootage/timing-function.json b/docs/public/rootage/timing-function.json
@@ -1,8 +1,8 @@
 {
   "kind": "Tokens",
   "metadata": {
-    "id": "unit",
-    "name": "Unit"
+    "id": "timing-function",
+    "name": "Timing Function"
   },
   "data": {
     "collection": "global",
@@ -19,6 +19,71 @@
             ]
           }
         }
+      },
+      "$timing-function.easing": {
+        "values": {
+          "default": {
+            "type": "cubicBezier",
+            "value": [
+              0.35,
+              0,
+              0.35,
+              1
+            ]
+          }
+        }
+      },
+      "$timing-function.enter": {
+        "values": {
+          "default": {
+            "type": "cubicBezier",
+            "value": [
+              0,
+              0,
+              0.15,
+              1
+            ]
+          }
+        }
+      },
+      "$timing-function.exit": {
+        "values": {
+          "default": {
+            "type": "cubicBezier",
+            "value": [
+              0.35,
+              0,
+              1,
+              1
+            ]
+          }
+        }
+      },
+      "$timing-function.enter-expressive": {
+        "values": {
+          "default": {
+            "type": "cubicBezier",
+            "value": [
+              0.03,
+              0.4,
+              0.1,
+              1
+            ]
+          }
+        }
+      },
+      "$timing-function.exit-expressive": {
+        "values": {
+          "default": {
+            "type": "cubicBezier",
+            "value": [
+              0.35,
+              0,
+              0.95,
+              0.55
+            ]
+          }
+        }
       }
     }
   }

diff --git a/packages/rootage/artifacts/components/schema.json b/packages/rootage/artifacts/components/schema.json
@@ -301,6 +301,12 @@
         { "const": "$color.stroke.neutral-muted", "title": "$color.stroke.neutral-muted", "description": "theme-light: $color.palette.gray-200\ntheme-dark: $color.palette.gray-200", "markdownDescription": "- theme-light: `$color.palette.gray-200`\n\n- theme-dark: `$color.palette.gray-200`" },
         { "const": "$color.stroke.danger", "title": "$color.stroke.danger", "description": "theme-light: $color.palette.red-700\ntheme-dark: $color.palette.red-600", "markdownDescription": "- theme-light: `$color.palette.red-700`\n\n- theme-dark: `$color.palette.red-600`" },
         { "const": "$color.stroke.positive", "title": "$color.stroke.positive", "description": "theme-light: $color.palette.green-600\ntheme-dark: $color.palette.green-600", "markdownDescription": "- theme-light: `$color.palette.green-600`\n\n- theme-dark: `$color.palette.green-600`" },
+        { "const": "$duration.s1", "title": "$duration.s1", "description": "default: 50ms", "markdownDescription": "- default: `50ms`" },
+        { "const": "$duration.s2", "title": "$duration.s2", "description": "default: 100ms", "markdownDescription": "- default: `100ms`" },
+        { "const": "$duration.s3", "title": "$duration.s3", "description": "default: 150ms", "markdownDescription": "- default: `150ms`" },
+        { "const": "$duration.s4", "title": "$duration.s4", "description": "default: 200ms", "markdownDescription": "- default: `200ms`" },
+        { "const": "$duration.s5", "title": "$duration.s5", "description": "default: 250ms", "markdownDescription": "- default: `250ms`" },
+        { "const": "$duration.s6", "title": "$duration.s6", "description": "default: 300ms", "markdownDescription": "- default: `300ms`" },
         { "const": "$font-size.s1", "title": "$font-size.s1", "description": "default: 0.6875rem", "markdownDescription": "- default: `0.6875rem`" },
         { "const": "$font-size.s2", "title": "$font-size.s2", "description": "default: 0.75rem", "markdownDescription": "- default: `0.75rem`" },
         { "const": "$font-size.s3", "title": "$font-size.s3", "description": "default: 0.8125rem", "markdownDescription": "- default: `0.8125rem`" },
@@ -336,6 +342,11 @@
         { "const": "$radius.s6", "title": "$radius.s6", "description": "default: 24px", "markdownDescription": "- default: `24px`" },
         { "const": "$radius.full", "title": "$radius.full", "description": "default: 9999px", "markdownDescription": "- default: `9999px`" },
         { "const": "$timing-function.linear", "title": "$timing-function.linear", "description": "default: 0, 0, 1, 1", "markdownDescription": "- default: `0, 0, 1, 1`" },
+        { "const": "$timing-function.easing", "title": "$timing-function.easing", "description": "default: 0.35, 0, 0.35, 1", "markdownDescription": "- default: `0.35, 0, 0.35, 1`" },
+        { "const": "$timing-function.enter", "title": "$timing-function.enter", "description": "default: 0, 0, 0.15, 1", "markdownDescription": "- default: `0, 0, 0.15, 1`" },
+        { "const": "$timing-function.exit", "title": "$timing-function.exit", "description": "default: 0.35, 0, 1, 1", "markdownDescription": "- default: `0.35, 0, 1, 1`" },
+        { "const": "$timing-function.enter-expressive", "title": "$timing-function.enter-expressive", "description": "default: 0.03, 0.4, 0.1, 1", "markdownDescription": "- default: `0.03, 0.4, 0.1, 1`" },
+        { "const": "$timing-function.exit-expressive", "title": "$timing-function.exit-expressive", "description": "default: 0.35, 0, 0.95, 0.55", "markdownDescription": "- default: `0.35, 0, 0.95, 0.55`" },
         { "const": "$unit.x0_5", "title": "$unit.x0_5", "description": "default: 2px", "markdownDescription": "- default: `2px`" },
         { "const": "$unit.s1", "title": "$unit.s1", "description": "default: 4px", "markdownDescription": "- default: `4px`" },
         { "const": "$unit.s1_5", "title": "$unit.s1_5", "description": "default: 6px", "markdownDescription": "- default: `6px`" },

diff --git a/packages/rootage/artifacts/duration.yaml b/packages/rootage/artifacts/duration.yaml
@@ -0,0 +1,25 @@
+kind: Tokens
+metadata:
+  id: duration
+  name: Duration
+data:
+  collection: global
+  tokens:
+    $duration.s1:
+      values:
+        default: 50ms
+    $duration.s2:
+      values:
+        default: 100ms
+    $duration.s3:
+      values:
+        default: 150ms
+    $duration.s4:
+      values:
+        default: 200ms
+    $duration.s5:
+      values:
+        default: 250ms
+    $duration.s6:
+      values:
+        default: 300ms
diff --git a/packages/rootage/artifacts/timing-function.yaml b/packages/rootage/artifacts/timing-function.yaml
@@ -1,7 +1,7 @@
 kind: Tokens
 metadata:
-  id: unit
-  name: Unit
+  id: timing-function
+  name: Timing Function
 data:
   collection: global
   tokens:
@@ -10,3 +10,28 @@ data:
         default:
           type: cubicBezier
           value: [0, 0, 1, 1]
+    $timing-function.easing:
+      values:
+        default:
+          type: cubicBezier
+          value: [0.35, 0, 0.35, 1]
+    $timing-function.enter:
+      values:
+        default:
+          type: cubicBezier
+          value: [0, 0, 0.15, 1]
+    $timing-function.exit:
+      values:
+        default:
+          type: cubicBezier
+          value: [0.35, 0, 1, 1]
+    $timing-function.enter-expressive:
+      values:
+        default:
+          type: cubicBezier
+          value: [0.03, 0.4, 0.1, 1]
+    $timing-function.exit-expressive:
+      values:
+        default:
+          type: cubicBezier
+          value: [0.35, 0, 0.95, 0.55]
diff --git a/packages/stylesheet/token.css b/packages/stylesheet/token.css
@@ -11,6 +11,12 @@
 }
 
 :root[data-seed] {
+  --seed-v3-duration-s1: 50ms;
+  --seed-v3-duration-s2: 100ms;
+  --seed-v3-duration-s3: 150ms;
+  --seed-v3-duration-s4: 200ms;
+  --seed-v3-duration-s5: 250ms;
+  --seed-v3-duration-s6: 300ms;
   --seed-v3-font-size-s1: 0.6875rem;
   --seed-v3-font-size-s2: 0.75rem;
   --seed-v3-font-size-s3: 0.8125rem;
@@ -46,6 +52,11 @@
   --seed-v3-radius-s6: 24px;
   --seed-v3-radius-full: 9999px;
   --seed-v3-timing-function-linear: cubic-bezier(0, 0, 1, 1);
+  --seed-v3-timing-function-easing: cubic-bezier(0.35, 0, 0.35, 1);
+  --seed-v3-timing-function-enter: cubic-bezier(0, 0, 0.15, 1);
+  --seed-v3-timing-function-exit: cubic-bezier(0.35, 0, 1, 1);
+  --seed-v3-timing-function-enter-expressive: cubic-bezier(0.03, 0.4, 0.1, 1);
+  --seed-v3-timing-function-exit-expressive: cubic-bezier(0.35, 0, 0.95, 0.55);
   --seed-v3-unit-x0_5: 2px;
   --seed-v3-unit-s1: 4px;
   --seed-v3-unit-s1_5: 6px;

diff --git a/packages/vars/lib/duration.d.ts b/packages/vars/lib/duration.d.ts
@@ -0,0 +1,6 @@
+export declare const s1 = "var(--seed-v3-duration-s1)";
+export declare const s2 = "var(--seed-v3-duration-s2)";
+export declare const s3 = "var(--seed-v3-duration-s3)";
+export declare const s4 = "var(--seed-v3-duration-s4)";
+export declare const s5 = "var(--seed-v3-duration-s5)";
+export declare const s6 = "var(--seed-v3-duration-s6)";
diff --git a/packages/vars/lib/duration.mjs b/packages/vars/lib/duration.mjs
@@ -0,0 +1,6 @@
+export const s1 = "var(--seed-v3-duration-s1)";
+export const s2 = "var(--seed-v3-duration-s2)";
+export const s3 = "var(--seed-v3-duration-s3)";
+export const s4 = "var(--seed-v3-duration-s4)";
+export const s5 = "var(--seed-v3-duration-s5)";
+export const s6 = "var(--seed-v3-duration-s6)";
diff --git a/packages/vars/lib/timing-function.d.ts b/packages/vars/lib/timing-function.d.ts
@@ -1 +1,6 @@
-export declare const linear = "var(--seed-v3-timing-function-linear)";
+export declare const linear = "var(--seed-v3-timing-function-linear)";
+export declare const easing = "var(--seed-v3-timing-function-easing)";
+export declare const enter = "var(--seed-v3-timing-function-enter)";
+export declare const exit = "var(--seed-v3-timing-function-exit)";
+export declare const enterExpressive = "var(--seed-v3-timing-function-enter-expressive)";
+export declare const exitExpressive = "var(--seed-v3-timing-function-exit-expressive)";
diff --git a/packages/vars/lib/timing-function.mjs b/packages/vars/lib/timing-function.mjs
@@ -1 +1,6 @@
-export const linear = "var(--seed-v3-timing-function-linear)";
+export const linear = "var(--seed-v3-timing-function-linear)";
+export const easing = "var(--seed-v3-timing-function-easing)";
+export const enter = "var(--seed-v3-timing-function-enter)";
+export const exit = "var(--seed-v3-timing-function-exit)";
+export const enterExpressive = "var(--seed-v3-timing-function-enter-expressive)";
+export const exitExpressive = "var(--seed-v3-timing-function-exit-expressive)";
diff --git a/packages/vars/lib/vars.d.ts b/packages/vars/lib/vars.d.ts
@@ -1,4 +1,5 @@
 export * as $color from "./color";
+export * as $duration from "./duration";
 export * as $fontSize from "./font-size";
 export * as $fontWeight from "./font-weight";
 export * as $unit from "./unit";

diff --git a/packages/vars/lib/vars.mjs b/packages/vars/lib/vars.mjs
@@ -1,4 +1,5 @@
 export * as $color from "./color";
+export * as $duration from "./duration";
 export * as $fontSize from "./font-size.mjs";
 export * as $fontWeight from "./font-weight.mjs";
 export * as $unit from "./unit.mjs";