feat: controll progress circle transition css variable

daangn · Sep 10, 2024 · c763fb2 · c763fb2
1 parent 0620b13
commit c763fb2
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 7 deletions.
diff --git a/packages/recipe-generator/preset/src/progress-circle.recipe.ts b/packages/recipe-generator/preset/src/progress-circle.recipe.ts
@@ -82,11 +82,8 @@ const progressCircle = defineRecipe({
       },
       determinate: {
         "indicator-path": {
-          "--seed-spinner-determinate-duration": "0.3s",
-          "--seed-spinner-determinate-timing-function": "cubic-bezier(0.35, 0.25, 0.65, 0.75)",
-
           transition:
-            "stroke-dasharray var(--seed-spinner-determinate-duration) var(--seed-spinner-determinate-timing-function) 0s",
+            "stroke-dasharray var(--seed-spinner-determinate-duration, 0.3s) var(--seed-spinner-determinate-timing-function, cubic-bezier(0.35, 0.25, 0.65, 0.75)) 0s",
         },
       },
     },

diff --git a/packages/stylesheet/progressCircle.css b/packages/stylesheet/progressCircle.css
@@ -51,9 +51,7 @@
 
 }
 .progressCircle__indicator-path--variant_determinate {
-    --seed-spinner-determinate-duration: 0.3s;
-    --seed-spinner-determinate-timing-function: cubic-bezier(0.35, 0.25, 0.65, 0.75);
-    transition: stroke-dasharray var(--seed-spinner-determinate-duration) var(--seed-spinner-determinate-timing-function) 0s
+    transition: stroke-dasharray var(--seed-spinner-determinate-duration, 0.3s) var(--seed-spinner-determinate-timing-function, cubic-bezier(0.35, 0.25, 0.65, 0.75)) 0s
 }
 @keyframes rotate {
     from {