diff --git a/docs/content/docs/design/foundation/motion.mdx b/docs/content/docs/design/foundation/motion.mdx
index ffbf028de..17bdd8d8a 100644
--- 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) |
+
## Duration
### Duration Tokens
-| 이름 | 값 |
-| --- | --- |
-| `$duration.50` | 50ms |
-| `$duration.100` | 100ms |
-| `$duration.150` | 150ms |
-| `$duration.200` | 200ms |
-| `$duration.250` | 250ms |
-| `$duration.300` | 300ms |
\ No newline at end of file
+
diff --git a/docs/public/rootage/duration.json b/docs/public/rootage/duration.json
new file mode 100644
index 000000000..01e82472c
--- /dev/null
+++ 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"
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/public/rootage/timing-function.json b/docs/public/rootage/timing-function.json
index 14060d8ae..17ca72bf5 100644
--- 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
index 386728040..78030afb9 100644
--- 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
new file mode 100644
index 000000000..16e1c11b7
--- /dev/null
+++ 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
index 6280d0dc5..bbf3baf47 100644
--- 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
index 43e46c580..02ef72e7d 100644
--- 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
new file mode 100644
index 000000000..11dabf81c
--- /dev/null
+++ 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)";
\ No newline at end of file
diff --git a/packages/vars/lib/duration.mjs b/packages/vars/lib/duration.mjs
new file mode 100644
index 000000000..77d23e736
--- /dev/null
+++ 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)";
\ No newline at end of file
diff --git a/packages/vars/lib/timing-function.d.ts b/packages/vars/lib/timing-function.d.ts
index 9f9494b1c..e53fb8872 100644
--- 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)";
\ No newline at end of file
+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)";
\ No newline at end of file
diff --git a/packages/vars/lib/timing-function.mjs b/packages/vars/lib/timing-function.mjs
index 7396dbf6e..64c648673 100644
--- 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)";
\ No newline at end of file
+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)";
\ No newline at end of file
diff --git a/packages/vars/lib/vars.d.ts b/packages/vars/lib/vars.d.ts
index 3e6886760..77fb6fe4b 100644
--- 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
index 19d2f2d6d..1ca446c7a 100644
--- 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";