Move vars

Author: istarkov

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.tsx

@@ -7,6 +7,7 @@ type AnimationRangesProps = ViewRangeOptionsSchema;
 
 const insetSize = "60px";
 const borderColor = "#ccc";
+const progressVariable = "--ws-progress";
 
 const Wrapper = styled(Box, {
   position: "relative",
@@ -32,8 +33,8 @@ const Scrollable = styled(Box, {
 });
 
 const bgKeyframes = keyframes({
-  "0%": { "--progress": "0" },
-  "100%": { "--progress": "360" },
+  "0%": { [progressVariable]: "0" },
+  "100%": { [progressVariable]: "360" },
 });
 
 const rafInterval = (callback: () => void): (() => void) => {
@@ -58,7 +59,7 @@ export const AnimationRanges = (props: AnimationRangesProps) => {
   useEffect(() => {
     try {
       CSS.registerProperty({
-        name: "--progress",
+        name: progressVariable,
         syntax: "<number>",
         inherits: true,
         initialValue: "0",
@@ -120,6 +121,9 @@ export const AnimationRanges = (props: AnimationRangesProps) => {
   ];
 
   const progressRadius = "6px";
+  const progressWidth = "4px";
+  const progressInactiveColor = "oklch(92.9% 0.013 255.508)";
+  const progressActiveColor = "oklch(54.6% 0.245 262.881)";
 
   return (
     <Wrapper>
@@ -153,11 +157,10 @@ export const AnimationRanges = (props: AnimationRangesProps) => {
               inset: 0,
               borderRadius: progressRadius,
 
-              background: `conic-gradient(oklch(54.6% 0.245 262.881) calc(var(--progress, 0) * 1deg), oklch(92.9% 0.013 255.508) 0)`,
+              background: `conic-gradient(${progressActiveColor} calc(var(${progressVariable}, 0) * 1deg), ${progressInactiveColor} 0)`,
               mask: `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
-
               maskComposite: `exclude`,
-              padding: `4px`,
+              padding: progressWidth,
             }}
           />