color changes & c

Author: mkbabb

demo/@/components/custom/animation-controls/CubicBezierControls.vue

@@ -12,12 +12,12 @@
         <CardContent
             @mouseenter="
                 () => {
-                    cubicBezierAnim.pause();
+                    // cubicBezierAnim.pause();
                 }
             "
             @mouseleave="
                 (e) => {
-                    cubicBezierAnim.pause();
+                    // cubicBezierAnim.pause();
                 }
             "
         >
@@ -62,7 +62,7 @@
                     class="hover:scale-105 cursor-pointer w-6 h-6"
                     @click="
                         () => {
-                            cubicBezierAnim.pause();
+                            // cubicBezierAnim.pause();
                         }
                     "
                 >
@@ -260,7 +260,7 @@ const cubicBezierAnim = new CSSKeyframesAnimation({
 onMounted(() => {
     updateTimingFunction();
 
-    cubicBezierAnim.play();
+    // cubicBezierAnim.play();
 });
 </script>
 
@@ -271,7 +271,7 @@ onMounted(() => {
     --stroke-width: 0.1;
 
     --circle-color: hsl(var(--foreground));
-    --path-color: rgb(153, 50, 243);
+    --path-color: hsl(var(--ppmycota-primary));
 
     circle {
         r: calc(var(--stroke-width) / 2);
@@ -286,7 +286,7 @@ onMounted(() => {
         cursor: not-allowed;
     }
     g path {
-        stroke: rgb(137, 20, 239);
+        stroke: var(--path-color);
         stroke-width: var(--stroke-width);
         fill: none;
     }

demo/@/styles/utils.scss

@@ -1,6 +1,10 @@
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap");
 
+:root {
+    --ppmycota-primary: 248, 88%, 71%;
+}
+
 * {
     font-family: "Fira Code", monospace;
     box-sizing: border-box;
@@ -141,13 +145,15 @@
     // filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(122deg) brightness(102%)
     //     contrast(107%);
     // filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(3deg) brightness(106%) contrast(101%)
-    filter: invert(55%) sepia(80%) saturate(1496%) hue-rotate(220deg) brightness(95%) contrast(103%);
+    filter: invert(55%) sepia(80%) saturate(1496%) hue-rotate(220deg) brightness(95%)
+        contrast(103%);
 }
 
 .ppmycota-logo-sm {
     background-image: url("@assets/ppmycota-logo-3.svg") !important;
     background-size: contain;
 
     // filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
-    filter: invert(55%) sepia(80%) saturate(1496%) hue-rotate(220deg) brightness(95%) contrast(103%);
+    filter: invert(55%) sepia(80%) saturate(1496%) hue-rotate(220deg) brightness(95%)
+        contrast(103%);
 }