From 18a0ceb0df405ff554ce72416cbb73498ee1a092 Mon Sep 17 00:00:00 2001
From: Fractal-Tess <vgfractal@gmail.com>
Date: Mon, 12 Sep 2022 11:40:54 +0300
Subject: [PATCH] moved css variables to themeToggle

---
 src/lib/components/ThemeToggleIcon.svelte | 24 +++++++++++++++++------
 src/styles/app.scss                       | 23 ----------------------
 2 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/lib/components/ThemeToggleIcon.svelte b/src/lib/components/ThemeToggleIcon.svelte
index 95c3de8..ec7b339 100644
--- a/src/lib/components/ThemeToggleIcon.svelte
+++ b/src/lib/components/ThemeToggleIcon.svelte
@@ -28,6 +28,18 @@
 </svg>
 
 <style>
+  svg {
+    --transition-duration-short: 0.15s;
+    --transition-duration-long: 0.4s;
+
+    --ease-1: cubic-bezier(0.25, 0, 0.3, 1);
+
+    --ease-out-1: cubic-bezier(0, 0, 0, 1);
+
+    --ease-elastic-1: cubic-bezier(0.5, 1.25, 0.75, 1.25);
+    --ease-elastic-2: cubic-bezier(0.5, 1.5, 0.75, 1.25);
+  }
+
   svg .moon,
   svg .sun,
   svg .sun-beams {
@@ -56,30 +68,30 @@
   @media (prefers-reduced-motion: no-preference) {
     svg .sun {
       transition: transform var(--transition-duration-long)
-        var(--ease-elastic-3);
+        var(--ease-elastic-1);
     }
 
     svg .sun-beams {
       transition: transform var(--transition-duration-long)
-          var(--ease-elastic-4),
-        opacity var(--transition-duration-long) var(--ease-3);
+          var(--ease-elastic-2),
+        opacity var(--transition-duration-long) var(--ease-1);
     }
 
     svg .moon > circle {
       transition: transform calc(var(--transition-duration-long) / 2)
-        var(--ease-out-5);
+        var(--ease-out-1);
     }
 
     @supports (cx: 1) {
       svg .moon > circle {
         transition: cx calc(var(--transition-duration-long) / 2)
-          var(--ease-out-5);
+          var(--ease-out-1);
       }
     }
 
     :global(.light) svg .sun {
       transform: scale(1.75);
-      transition-timing-function: var(--ease-3);
+      transition-timing-function: var(--ease-1);
       transition-duration: calc(var(--transition-duration-long) / 2);
     }
 
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 21d870e..b3eaded 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -14,31 +14,8 @@ html {
   @apply rounded-3xl overflow-hidden;
 }
 
-/* css vars */
 * {
   @apply transition-all;
-
-  // TODO: Remove all transitions here and rework the theme changing button
-  --transition-duration-short: 0.15s;
-  --transition-duration-long: 0.4s;
-
-  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
-  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
-  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
-  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
-  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
-
-  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
-  --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
-  --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
-  --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
-  --ease-out-5: cubic-bezier(0, 0, 0, 1);
-
-  --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
-  --ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
-  --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
-  --ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
-  --ease-elastic-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
 }
 
 // Class is used for development purposes only.