From 4332466ca6b9c7eb31034073d77076b3ebc805ab Mon Sep 17 00:00:00 2001
From: not-nullptr <needhelpwithrift@gmail.com>
Date: Thu, 9 May 2024 18:27:54 +0100
Subject: [PATCH 1/2] add scaling to switch

---
 src/lib/forms/Switch.svelte | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/lib/forms/Switch.svelte b/src/lib/forms/Switch.svelte
index ecb850d..bdc5fe4 100644
--- a/src/lib/forms/Switch.svelte
+++ b/src/lib/forms/Switch.svelte
@@ -50,6 +50,27 @@
 </div>
 
 <style>
+  @keyframes switch {
+    0% {
+      left: 0.5rem;
+      width: 1.5rem;
+    }
+    20% {
+      left: 0.75rem;
+      width: 2.5rem;
+      height: 1.25rem;
+    }
+    80% {
+      width: 1.5rem;
+      height: 1.52rem;
+      left: 1.5rem;
+    }
+    100% {
+      left: 1.5rem;
+      width: 1.5rem;
+    }
+  }
+
   :root {
     --m3-switch-track-shape: var(--m3-util-rounding-full);
     --m3-switch-handle-shape: var(--m3-util-rounding-full);
@@ -81,14 +102,14 @@
     background-color: rgb(var(--m3-scheme-outline));
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: all 300ms cubic-bezier(0.271, -0.011, 0, 1.449);
-
     left: 0.5rem;
     top: 50%;
     transform: translate(0, -50%);
     display: flex;
     align-items: center;
     justify-content: center;
+    transition-property: transform;
+    transition: 300ms cubic-bezier(0.271, -0.011, 0, 1.449);
   }
   .layer > :global(svg) {
     width: 1rem;
@@ -110,6 +131,10 @@
     transition: all 200ms;
   }
 
+  .m3-container > input:checked + .layer {
+    animation: switch 300ms cubic-bezier(0.271, -0.011, 0, 1.449);
+  }
+
   .m3-container:hover > input:enabled + .layer,
   .m3-container > input:enabled:is(:active, :focus-visible) + .layer {
     background-color: rgb(var(--m3-scheme-on-surface-variant));

From 97d6d6d518434ee8de2b96678c56f4bb1e03b855 Mon Sep 17 00:00:00 2001
From: Kendell R <KTibow@users.noreply.github.com>
Date: Thu, 9 May 2024 17:39:09 -0700
Subject: [PATCH 2/2] simpler, smoother easing

---
 src/lib/forms/Switch.svelte | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/lib/forms/Switch.svelte b/src/lib/forms/Switch.svelte
index bdc5fe4..9ba7c84 100644
--- a/src/lib/forms/Switch.svelte
+++ b/src/lib/forms/Switch.svelte
@@ -53,17 +53,13 @@
   @keyframes switch {
     0% {
       left: 0.5rem;
-      width: 1.5rem;
-    }
-    20% {
-      left: 0.75rem;
-      width: 2.5rem;
-      height: 1.25rem;
+      width: 1.75rem;
+      height: 1.5rem;
+      animation-timing-function: ease-out;
     }
-    80% {
-      width: 1.5rem;
-      height: 1.52rem;
-      left: 1.5rem;
+    15% {
+      left: 0.65rem;
+      width: 2rem;
     }
     100% {
       left: 1.5rem;
@@ -108,7 +104,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    transition-property: transform;
     transition: 300ms cubic-bezier(0.271, -0.011, 0, 1.449);
   }
   .layer > :global(svg) {
@@ -131,10 +126,6 @@
     transition: all 200ms;
   }
 
-  .m3-container > input:checked + .layer {
-    animation: switch 300ms cubic-bezier(0.271, -0.011, 0, 1.449);
-  }
-
   .m3-container:hover > input:enabled + .layer,
   .m3-container > input:enabled:is(:active, :focus-visible) + .layer {
     background-color: rgb(var(--m3-scheme-on-surface-variant));
@@ -165,6 +156,7 @@
     width: 1.5rem;
     height: 1.5rem;
     left: 1.5rem; /* 1.5 + 1.5 + 0.25 = 3.25 */
+    animation: switch 300ms cubic-bezier(0.271, -0.011, 0, 1.449);
   }
   input:checked + .layer > :global(svg) {
     opacity: 1;