From fa0b36f696ad37e43a59a5d45175e04edca12716 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Fri, 5 Jan 2024 15:12:10 -0800
Subject: [PATCH] chore: naming + reduced motion

---
 src/assets/styles/index.css               | 4 ++--
 src/assets/styles/partials/vars.css       | 9 ++++++++-
 src/assets/styles/widgets/forms.css       | 4 ++--
 src/assets/styles/widgets/media-grid.css  | 2 +-
 src/assets/styles/widgets/paginator.css   | 3 +--
 src/assets/styles/widgets/webmentions.css | 4 ++--
 6 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index b4f02985..28482aa7 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -375,8 +375,8 @@ code,
 
 a,
 .pill--button {
-  transition-timing-function: var(--ease-in-out);
-  transition-duration: 300ms;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
 }
 
 .pill--button,
diff --git a/src/assets/styles/partials/vars.css b/src/assets/styles/partials/vars.css
index c8911b50..ceed3126 100644
--- a/src/assets/styles/partials/vars.css
+++ b/src/assets/styles/partials/vars.css
@@ -73,9 +73,16 @@
   --rounded-full: 9999px;
 
   /* transitions */
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-duration-default: 300ms;
 
   /* svgs */
   --stroke-width-default: 1.4;
   --stroke-width-bold: 2;
+}
+
+@media (prefers-reduced-motion) {
+  :root {
+    --transition-duration-default: 0.01ms;
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/widgets/forms.css b/src/assets/styles/widgets/forms.css
index 7b075547..903af626 100644
--- a/src/assets/styles/widgets/forms.css
+++ b/src/assets/styles/widgets/forms.css
@@ -12,8 +12,8 @@ textarea {
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
   transition-property: border-color;
-  transition-timing-function: var(--ease-in-out);
-  transition-duration: 300ms;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
 }
 
 input[type="text"]:focus,
diff --git a/src/assets/styles/widgets/media-grid.css b/src/assets/styles/widgets/media-grid.css
index fb8ea94e..ffc86ef3 100644
--- a/src/assets/styles/widgets/media-grid.css
+++ b/src/assets/styles/widgets/media-grid.css
@@ -28,7 +28,7 @@
   border-radius: var(--rounded-lg);
   overflow: hidden;
   transition-property: border-color;
-  transition-timing-function: var(--ease-in-out);
+  transition-timing-function: var(--transition-ease-in-out);
   transition-duration: 300ms;
 }
 
diff --git a/src/assets/styles/widgets/paginator.css b/src/assets/styles/widgets/paginator.css
index 141d2649..0158a437 100644
--- a/src/assets/styles/widgets/paginator.css
+++ b/src/assets/styles/widgets/paginator.css
@@ -14,9 +14,8 @@
 }
 
 .pagination button.disabled > svg {
-  opacity: .5;
   cursor: not-allowed;
-  stroke: var(--black);
+  stroke: color-mix(in srgb, var(--black), transparent 50%);
   stroke-width: var(--stroke-width-default);
 }
 
diff --git a/src/assets/styles/widgets/webmentions.css b/src/assets/styles/widgets/webmentions.css
index e34251be..0f8b2598 100644
--- a/src/assets/styles/widgets/webmentions.css
+++ b/src/assets/styles/widgets/webmentions.css
@@ -79,8 +79,8 @@
   border-radius: var(--rounded-full);
   border: 4px solid var(--white);
   transition-property: border-color;
-  transition-timing-function: var(--ease-in-out);
-  transition-duration: 300ms;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
 }
 
 .webmentions .interaction .avatar__wrapper .avatar__wrapper-image > * {