From 4020a81ba775f51e57333da9b70e571b1b50cd0c Mon Sep 17 00:00:00 2001
From: Andrew Smithwick <andy.smithwick@gmail.com>
Date: Sat, 30 Mar 2024 14:34:42 -0700
Subject: [PATCH] Synced theme transition time across elements (#194)

* Synced theme transition time across elements

* Made global transition 0.3s instead of snappy

* Deleted old comments

* Fixed body not animating properly

* Delete style.module.scss
---
 src/pages/_app.tsx      | 1 +
 src/styles/globals.scss | 8 ++++++--
 src/styles/themes.scss  | 3 ---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index b14ef1bc..eb3e06c0 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -18,6 +18,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
     <>
       <style jsx global>{`
         * {
+          transition: all ease;
           font-family: ${dmSans.style.fontFamily}, sans-serif;
         }
       `}</style>
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 41bacc3a..d00436b4 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -7,6 +7,7 @@ body {
   margin: 0;
   padding: 0;
   scroll-padding-top: 4.25rem;
+  transition: background-color 0.3s ease;
 }
 
 /* This prevents the background from scrolling while a modal is open. */
@@ -67,12 +68,14 @@ label {
   font-size: 100%;
   margin: 0;
   padding: 0;
-  transition: background 0.3s ease;
+  transition: background-color 0.3s ease;
   vertical-align: baseline;
 }
 
 div,
+input,
 span,
+form,
 object,
 iframe,
 img,
@@ -96,12 +99,13 @@ header,
 section,
 summary,
 mark,
+main,
 audio,
 video {
   border: 0;
   margin: 0;
   padding: 0;
-  transition: background 0.3s ease;
+  transition: background-color 0.3s ease;
 }
 
 a,
diff --git a/src/styles/themes.scss b/src/styles/themes.scss
index 12debf78..3411db4a 100644
--- a/src/styles/themes.scss
+++ b/src/styles/themes.scss
@@ -108,7 +108,4 @@
 html,
 body {
   background-color: var(--theme-background);
-  transition-duration: 0.3s;
-  transition-property: background-color, color, border-color, border, filter;
-  transition-timing-function: ease;
 }