From 8b4e4c1418e81e313f801df15da10aab985e4fd4 Mon Sep 17 00:00:00 2001 From: junghyeonsu Date: Thu, 5 Dec 2024 16:29:13 +0900 Subject: [PATCH] feat: linear token --- .../preset/src/progress-circle.recipe.ts | 46 +++++++++++++++---- packages/recipe/lib/progressCircle.d.ts | 5 +- packages/recipe/lib/progressCircle.mjs | 5 ++ .../rootage/artifacts/components/schema.json | 1 + .../rootage/artifacts/timing-function.yaml | 7 ++- packages/stylesheet/token.css | 1 + packages/vars/src/timing-function.vars.ts | 1 + 7 files changed, 55 insertions(+), 11 deletions(-) create mode 100644 packages/vars/src/timing-function.vars.ts diff --git a/packages/recipe-generator/preset/src/progress-circle.recipe.ts b/packages/recipe-generator/preset/src/progress-circle.recipe.ts index 14738caeb..5f4890cef 100644 --- a/packages/recipe-generator/preset/src/progress-circle.recipe.ts +++ b/packages/recipe-generator/preset/src/progress-circle.recipe.ts @@ -16,8 +16,6 @@ const progressCircle = defineRecipe({ width: "100%", height: "100%", - - fill: vars.base.enabled.track.fill, }, indicator: { display: "inline-flex", @@ -30,7 +28,8 @@ const progressCircle = defineRecipe({ width: "100%", height: "100%", - color: vars.base.enabled.indicator.color, + transitionTimingFunction: vars.base.enabled.indicator.transitionTimingFunction, + transitionDuration: vars.base.enabled.indicator.transitionDuration, }, "indicator-path": { stroke: "currentColor", @@ -45,6 +44,32 @@ const progressCircle = defineRecipe({ }, }, variants: { + variant: { + neutral: { + track: { + fill: vars.variantNeutral.enabled.track.fill, + }, + indicator: { + color: vars.variantNeutral.enabled.indicator.color, + }, + }, + brand: { + track: { + fill: vars.variantBrand.enabled.track.fill, + }, + indicator: { + color: vars.variantBrand.enabled.indicator.color, + }, + }, + white: { + track: { + fill: vars.variantWhite.enabled.track.fill, + }, + indicator: { + color: vars.variantWhite.enabled.indicator.color, + }, + }, + }, size: { small: { root: { @@ -62,19 +87,19 @@ const progressCircle = defineRecipe({ indeterminate: { true: { root: { - animation: `rotate ${vars.variantIndeterminate.enabled["indicator-path"].rotateDuration} ${vars.variantIndeterminate.enabled["indicator-path"].rotateTimingFunction} infinite`, + animation: `rotate ${vars.indeterminateTrue.enabled.indicator.rotateDuration} ${vars.indeterminateTrue.enabled.indicator.rotateTimingFunction} infinite`, }, "indicator-path": { animation: ` - headDash ${vars.variantIndeterminate.enabled["indicator-path"].headDashDuration} ${vars.variantIndeterminate.enabled["indicator-path"].headDashTimingFunction} infinite normal none running, - tailDash ${vars.variantIndeterminate.enabled["indicator-path"].tailDashDuration} ${vars.variantIndeterminate.enabled["indicator-path"].tailDashTimingFunction} infinite normal none running + headDash ${vars.indeterminateTrue.enabled.indicator.headDuration} ${vars.indeterminateTrue.enabled.indicator.headTimingFunction} infinite normal none running, + tailDash ${vars.indeterminateTrue.enabled.indicator.tailDuration} ${vars.indeterminateTrue.enabled.indicator.tailTimingFunction} infinite normal none running `, }, }, false: { "indicator-path": { - transitionDuration: `var(--seed-spinner-determinate-duration, ${vars.variantDeterminate.enabled["indicator-path"].transitionDuration})`, - transitionTimingFunction: `var(--seed-spinner-determinate-timing-function, ${vars.variantDeterminate.enabled["indicator-path"].transitionTimingFunction})`, + transitionDuration: `var(--seed-spinner-determinate-duration, ${vars.base.enabled.indicator.transitionDuration})`, + transitionTimingFunction: `var(--seed-spinner-determinate-timing-function, ${vars.base.enabled.indicator.transitionTimingFunction})`, transitionProperty: "stroke-dasharray", }, }, @@ -114,6 +139,11 @@ const progressCircle = defineRecipe({ }, }, }, + defaultVariants: { + variant: "neutral", + size: "medium", + indeterminate: false, + }, }); export default progressCircle; diff --git a/packages/recipe/lib/progressCircle.d.ts b/packages/recipe/lib/progressCircle.d.ts index 629084cd4..094eeaceb 100644 --- a/packages/recipe/lib/progressCircle.d.ts +++ b/packages/recipe/lib/progressCircle.d.ts @@ -1,6 +1,7 @@ interface ProgressCircleVariant { - size: "small" | "medium"; - indeterminate: true | false + variant: "neutral" | "brand" | "white"; +size: "small" | "medium"; +indeterminate: boolean; } type ProgressCircleVariantMap = { diff --git a/packages/recipe/lib/progressCircle.mjs b/packages/recipe/lib/progressCircle.mjs index 0bdd986f7..4b441e1b4 100644 --- a/packages/recipe/lib/progressCircle.mjs +++ b/packages/recipe/lib/progressCircle.mjs @@ -24,6 +24,11 @@ const defaultVariant = {}; const compoundVariants = []; export const progressCircleVariantMap = { + "variant": [ + "neutral", + "brand", + "white" + ], "size": [ "small", "medium" diff --git a/packages/rootage/artifacts/components/schema.json b/packages/rootage/artifacts/components/schema.json index c6a37f613..6e7e1bfcb 100644 --- a/packages/rootage/artifacts/components/schema.json +++ b/packages/rootage/artifacts/components/schema.json @@ -333,6 +333,7 @@ { "const": "$radius.x5", "title": "$radius.x5", "description": "default: 20px", "markdownDescription": "- default: `20px`" }, { "const": "$radius.x6", "title": "$radius.x6", "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": "$unit.x0_5", "title": "$unit.x0_5", "description": "default: 2px", "markdownDescription": "- default: `2px`" }, { "const": "$unit.x1", "title": "$unit.x1", "description": "default: 4px", "markdownDescription": "- default: `4px`" }, { "const": "$unit.x1_5", "title": "$unit.x1_5", "description": "default: 6px", "markdownDescription": "- default: `6px`" }, diff --git a/packages/rootage/artifacts/timing-function.yaml b/packages/rootage/artifacts/timing-function.yaml index 773f8d4e7..6280d0dc5 100644 --- a/packages/rootage/artifacts/timing-function.yaml +++ b/packages/rootage/artifacts/timing-function.yaml @@ -4,4 +4,9 @@ metadata: name: Unit data: collection: global - tokens: [] + tokens: + $timing-function.linear: + values: + default: + type: cubicBezier + value: [0, 0, 1, 1] diff --git a/packages/stylesheet/token.css b/packages/stylesheet/token.css index 8da01c227..bac9a5263 100644 --- a/packages/stylesheet/token.css +++ b/packages/stylesheet/token.css @@ -45,6 +45,7 @@ --seed-v3-radius-x5: 20px; --seed-v3-radius-x6: 24px; --seed-v3-radius-full: 9999px; + --seed-v3-timing-function-linear: cubic-bezier(0, 0, 1, 1); --seed-v3-unit-x0_5: 2px; --seed-v3-unit-x1: 4px; --seed-v3-unit-x1_5: 6px; diff --git a/packages/vars/src/timing-function.vars.ts b/packages/vars/src/timing-function.vars.ts new file mode 100644 index 000000000..7396dbf6e --- /dev/null +++ b/packages/vars/src/timing-function.vars.ts @@ -0,0 +1 @@ +export const linear = "var(--seed-v3-timing-function-linear)"; \ No newline at end of file