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";