From 66154b30c1b1409f1658bbda7945880e5c81e69a Mon Sep 17 00:00:00 2001
From: Mysterious_Dev <40738104+Mysterious-Dev@users.noreply.github.com>
Date: Sat, 11 Nov 2023 23:22:01 +0100
Subject: [PATCH] Add Prefers Reduced Motion support for most components (#133)

---
 lib/components/base/Checkbox.vue      |  4 ++++
 lib/components/base/CopyCode.vue      |  4 ++++
 lib/components/base/DropArea.vue      |  4 ++++
 lib/components/base/Notifications.vue |  4 ++++
 lib/components/base/Pagination.vue    |  4 ++++
 lib/components/base/PopoutMenu.vue    |  4 ++++
 lib/components/base/Slider.vue        | 14 ++++++++++----
 lib/components/modal/Modal.vue        |  8 ++++++++
 lib/components/modal/ShareModal.vue   |  4 ++++
 9 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/lib/components/base/Checkbox.vue b/lib/components/base/Checkbox.vue
index d35de3f38..896a9603a 100644
--- a/lib/components/base/Checkbox.vue
+++ b/lib/components/base/Checkbox.vue
@@ -120,6 +120,10 @@ export default defineComponent({
       height: 1rem;
       width: 1rem;
       transition: transform 0.25s ease-in-out;
+
+      @media (prefers-reduced-motion) {
+        transition: none !important;
+      }
     }
 
     &.checked {
diff --git a/lib/components/base/CopyCode.vue b/lib/components/base/CopyCode.vue
index d34753fa2..0d5df8bf2 100644
--- a/lib/components/base/CopyCode.vue
+++ b/lib/components/base/CopyCode.vue
@@ -53,6 +53,10 @@ export default {
   transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
     outline 0.2s ease-in-out;
 
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+  }
+
   span {
     max-width: 10rem;
     overflow: hidden;
diff --git a/lib/components/base/DropArea.vue b/lib/components/base/DropArea.vue
index 9f1e61fea..e23479b42 100644
--- a/lib/components/base/DropArea.vue
+++ b/lib/components/base/DropArea.vue
@@ -90,5 +90,9 @@ onMounted(() => {
     border-radius: 1rem;
     border: 0.25rem dashed var(--color-button-bg);
   }
+
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+  }
 }
 </style>
diff --git a/lib/components/base/Notifications.vue b/lib/components/base/Notifications.vue
index cdd4ad435..e377a52a2 100644
--- a/lib/components/base/Notifications.vue
+++ b/lib/components/base/Notifications.vue
@@ -129,6 +129,10 @@ function stopTimer(notif) {
 .notifs-leave-active,
 .notifs-move {
   transition: all 0.5s;
+
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+  }
 }
 .notifs-enter-from,
 .notifs-leave-to {
diff --git a/lib/components/base/Pagination.vue b/lib/components/base/Pagination.vue
index 94944fdcd..282b28786 100644
--- a/lib/components/base/Pagination.vue
+++ b/lib/components/base/Pagination.vue
@@ -129,6 +129,10 @@ a {
   transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
     outline 0.2s ease-in-out;
 
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+  }
+
   &:hover {
     color: inherit;
     text-decoration: none;
diff --git a/lib/components/base/PopoutMenu.vue b/lib/components/base/PopoutMenu.vue
index 04875af0a..17d2f0af2 100644
--- a/lib/components/base/PopoutMenu.vue
+++ b/lib/components/base/PopoutMenu.vue
@@ -106,6 +106,10 @@ onBeforeUnmount(() => {
     transition: bottom 0.125s ease-in-out, top 0.125s ease-in-out, left 0.125s ease-in-out,
       right 0.125s ease-in-out, opacity 0.125s ease-in-out, scale 0.125s ease-in-out;
 
+    @media (prefers-reduced-motion) {
+      transition: none !important;
+    }
+
     &.position-bottom-left {
       top: calc(100% + var(--gap-sm) - 1rem);
       right: -1rem;
diff --git a/lib/components/base/Slider.vue b/lib/components/base/Slider.vue
index 92af785b2..babc01ce4 100644
--- a/lib/components/base/Slider.vue
+++ b/lib/components/base/Slider.vue
@@ -115,6 +115,12 @@ const onInput = (value: string) => {
 
 <style lang="scss" scoped>
 .root-container {
+  --transition-speed: 0.2s;
+
+  @media (prefers-reduced-motion) {
+    --transition-speed: 0s;
+  }
+
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -159,7 +165,7 @@ const onInput = (value: string) => {
   background: var(--color-brand);
   cursor: pointer;
   border-radius: 50%;
-  transition: 0.2s;
+  transition: var(--transition-speed);
 }
 
 .slider-component .slide-container .slider::-moz-range-thumb {
@@ -169,19 +175,19 @@ const onInput = (value: string) => {
   background: var(--color-brand);
   cursor: pointer;
   border-radius: 50%;
-  transition: 0.2s;
+  transition: var(--transition-speed);
 }
 
 .slider-component .slide-container .slider:hover::-webkit-slider-thumb:not(.disabled) {
   width: 1rem;
   height: 1rem;
-  transition: 0.2s;
+  transition: var(--transition-speed);
 }
 
 .slider-component .slide-container .slider:hover::-moz-range-thumb:not(.disabled) {
   width: 1rem;
   height: 1rem;
-  transition: 0.2s;
+  transition: var(--transition-speed);
 }
 
 .slider-component .slide-container .snap-points-wrapper {
diff --git a/lib/components/modal/Modal.vue b/lib/components/modal/Modal.vue
index dbfc2f369..fb076c896 100644
--- a/lib/components/modal/Modal.vue
+++ b/lib/components/modal/Modal.vue
@@ -99,6 +99,10 @@ defineExpose({
   z-index: 19;
   transition: all 0.3s ease-in-out;
 
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+  }
+
   &.shown {
     opacity: 1;
     visibility: visible;
@@ -164,6 +168,10 @@ defineExpose({
     opacity: 0;
     transition: all 0.25s ease-in-out;
 
+    @media (prefers-reduced-motion) {
+      transition: none !important;
+    }
+
     @media screen and (max-width: 650px) {
       width: calc(100% - 2 * var(--gap-lg));
     }
diff --git a/lib/components/modal/ShareModal.vue b/lib/components/modal/ShareModal.vue
index 160f3736a..af35f0b48 100644
--- a/lib/components/modal/ShareModal.vue
+++ b/lib/components/modal/ShareModal.vue
@@ -251,6 +251,10 @@ defineExpose({
   margin: var(--gap-sm);
   transition: all 0.2s ease-in-out;
   opacity: 0;
+
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+  }
 }
 
 .resizable-textarea-wrapper {