chore: naming + reduced motion

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,

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;
+  }
 }

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,

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;
 }
 

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);
 }
 

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 > * {