respect prefers-reduce-motion flag

styleguide/assets/style/base.css

@@ -158,6 +158,11 @@
     drop-shadow(0 0 0.0625em var(--color-secondary))
     drop-shadow(0 0 0.125em var(--color-secondary));
 }
+@media (prefers-reduced-motion) {
+  .dark {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
 .dark .light-only {
   display: none;
 }
@@ -193,6 +198,11 @@
   --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
   --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
 }
+@media (prefers-reduced-motion) {
+  .light {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
 .light .light-only {
   display: initial;
 }
@@ -237,6 +247,13 @@
       drop-shadow(0 0 0.0625em var(--color-secondary))
       drop-shadow(0 0 0.125em var(--color-secondary));
   }
+}
+@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
+  html {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
+@media (prefers-color-scheme: dark) {
   html .light-only {
     display: none;
   }
@@ -271,6 +288,13 @@
     --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
   }
+}
+@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
+  html:has(#themeLight:checked) {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
+@media (prefers-color-scheme: dark) {
   html:has(#themeLight:checked) .light-only {
     display: initial;
   }
@@ -310,6 +334,13 @@
     --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
   }
+}
+@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
+  html {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
+@media (prefers-color-scheme: light) {
   html .light-only {
     display: initial;
   }
@@ -352,6 +383,13 @@
       drop-shadow(0 0 0.0625em var(--color-secondary))
       drop-shadow(0 0 0.125em var(--color-secondary));
   }
+}
+@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
+  html:has(#themeDark:checked) {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
+@media (prefers-color-scheme: light) {
   html:has(#themeDark:checked) .light-only {
     display: none;
   }

styleguide/assets/style/base.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAyFF;EArFE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;AAAA;AAAA;EAGA;AAAA;AAAA;EAGA;EACA;EACA;AAAA;AAAA;EAIA;AAAA;AAAA;EAGA;AAAA;AAAA;;AAIA;EACE;;AAGF;EACE;;;AA+CJ;EA1CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAIA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAYJ;EACE;IA9FA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAIA;AAAA;AAAA;IAGA;AAAA;AAAA;;EAIA;IACE;;EAGF;IACE;;EAuDA;IAlDF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAIA;IACA;;EAEA;IACE;;EAGF;IACE;;EAoBF;IACE;;;AAIJ;EACE;IA5DA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAIA;IACA;;EAEA;IACE;;EAGF;IACE;;EA6BA;IA9GF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAIA;AAAA;AAAA;IAGA;AAAA;AAAA;;EAIA;IACE;;EAGF;IACE;;EAwEF;IACE;;;AAMJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAMA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KA9euB;EA+evB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA","file":"base.css"}
+{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAiGF;EA7FE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;AAAA;AAAA;EAGA;AAAA;AAAA;EAGA;EACA;EACA;AAAA;AAAA;EAQA;AAAA;AAAA;EAGA;AAAA;AAAA;;AAPA;EA+DF;IA9DI;;;AAUF;EACE;;AAGF;EACE;;;AAmDJ;EA9CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAQA;EACA;;AALA;EAoBF;IAnBI;;;AAMF;EACE;;AAGF;EACE;;;AAYJ;EACE;IAtGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAQA;AAAA;AAAA;IAGA;AAAA;AAAA;;;AAPA;EAwEA;IAvEE;;;AAsEJ;EA5DE;IACE;;EAGF;IACE;;EA2DA;IAtDF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAQA;IACA;;;AALA;EA4BE;IA3BA;;;AAuBJ;EAjBE;IACE;;EAGF;IACE;;EAoBF;IACE;;;AAIJ;EACE;IAhEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAQA;IACA;;;AALA;EAsCA;IArCE;;;AAoCJ;EA9BE;IACE;;EAGF;IACE;;EA6BA;IAtHF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAQA;AAAA;AAAA;IAGA;AAAA;AAAA;;;AAPA;EAwFE;IAvFA;;;AAmFJ;EAzEE;IACE;;EAGF;IACE;;EA4EF;IACE;;;AAMJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAMA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KAtfuB;EAufvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA","file":"base.css"}

styleguide/assets/style/base.scss

@@ -169,6 +169,10 @@ $mobile-navigation-height: 4rem;
     filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
     border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
 
+  @media (prefers-reduced-motion) {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+
   --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
     drop-shadow(0 0 0.0625em var(--color-primary))
     drop-shadow(0 0 0.125em var(--color-primary));
@@ -212,6 +216,10 @@ $mobile-navigation-height: 4rem;
     filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
     border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
 
+  @media (prefers-reduced-motion) {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+
   --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
   --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
 

styleguide/assets/style/merch.css

@@ -158,6 +158,11 @@
     drop-shadow(0 0 0.0625em var(--color-secondary))
     drop-shadow(0 0 0.125em var(--color-secondary));
 }
+@media (prefers-reduced-motion) {
+  .dark {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
 .dark .light-only {
   display: none;
 }
@@ -193,6 +198,11 @@
   --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
   --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
 }
+@media (prefers-reduced-motion) {
+  .light {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
 .light .light-only {
   display: initial;
 }
@@ -237,6 +247,13 @@
       drop-shadow(0 0 0.0625em var(--color-secondary))
       drop-shadow(0 0 0.125em var(--color-secondary));
   }
+}
+@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
+  html {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
+@media (prefers-color-scheme: dark) {
   html .light-only {
     display: none;
   }
@@ -271,6 +288,13 @@
     --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
   }
+}
+@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
+  html:has(#themeLight:checked) {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
+@media (prefers-color-scheme: dark) {
   html:has(#themeLight:checked) .light-only {
     display: initial;
   }
@@ -310,6 +334,13 @@
     --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
   }
+}
+@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
+  html {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
+@media (prefers-color-scheme: light) {
   html .light-only {
     display: initial;
   }
@@ -352,6 +383,13 @@
       drop-shadow(0 0 0.0625em var(--color-secondary))
       drop-shadow(0 0 0.125em var(--color-secondary));
   }
+}
+@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
+  html:has(#themeDark:checked) {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
+@media (prefers-color-scheme: light) {
   html:has(#themeDark:checked) .light-only {
     display: none;
   }

styleguide/assets/style/styleguide.css

@@ -158,6 +158,11 @@
     drop-shadow(0 0 0.0625em var(--color-secondary))
     drop-shadow(0 0 0.125em var(--color-secondary));
 }
+@media (prefers-reduced-motion) {
+  .dark {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
 .dark .light-only {
   display: none;
 }
@@ -193,6 +198,11 @@
   --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
   --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
 }
+@media (prefers-reduced-motion) {
+  .light {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
 .light .light-only {
   display: initial;
 }
@@ -237,6 +247,13 @@
       drop-shadow(0 0 0.0625em var(--color-secondary))
       drop-shadow(0 0 0.125em var(--color-secondary));
   }
+}
+@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
+  html {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
+@media (prefers-color-scheme: dark) {
   html .light-only {
     display: none;
   }
@@ -271,6 +288,13 @@
     --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
   }
+}
+@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
+  html:has(#themeLight:checked) {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
+@media (prefers-color-scheme: dark) {
   html:has(#themeLight:checked) .light-only {
     display: initial;
   }
@@ -310,6 +334,13 @@
     --text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
     --text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
   }
+}
+@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
+  html {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
+@media (prefers-color-scheme: light) {
   html .light-only {
     display: initial;
   }
@@ -352,6 +383,13 @@
       drop-shadow(0 0 0.0625em var(--color-secondary))
       drop-shadow(0 0 0.125em var(--color-secondary));
   }
+}
+@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
+  html:has(#themeDark:checked) {
+    --transition-glow: filter 150ms, border-color 150ms;
+  }
+}
+@media (prefers-color-scheme: light) {
   html:has(#themeDark:checked) .light-only {
     display: none;
   }