feat: linear token

daangn · Dec 5, 2024 · 8b4e4c1 · 8b4e4c1
1 parent 7e4b4d0
commit 8b4e4c1
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+export const linear = "var(--seed-v3-timing-function-linear)";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const linear = "var(--seed-v3-timing-function-linear)";