Mixins reduced-motion / allows-motion

src/scss/02-tools/_m-reduced-motion.scss

@@ -1,30 +1,49 @@
 /**
- * Reduced-motion for animations
+ * Motion preference helpers for animations
  *
- * @author Paolo Tesei
+ * Driven by `html.js-animation` / `html.no-js-animation` (toggled from
+ * prefers-reduced-motion in header.php, and by the a11y access config plugin).
  *
- * @param $reduce
+ * @author Paolo Tesei
  *
  * Examples :
  *
  *      @include reduced-motion { ... }
- *          return @media screen and (prefers-reduced-motion : reduce) { ... }
- *
- *      you can add heavy animation using :
+ *          → html.no-js-animation & { ... }
+ *          → html.no-js-animation { ... } when used at root / inside :root or html
  *
- *      @include reduced-motion (false) { ... }
- *          return @media screen and (prefers-reduced-motion : no-preference) { ... }
+ *      @include allows-motion { ... }
+ *          → html.js-animation & { ... }
+ *          → html.js-animation { ... } when used at root / inside :root or html
  *
  */
 
-@mixin reduced-motion($reduce: true) {
-	@if ($reduce == true) {
-		@media screen and (prefers-reduced-motion: reduce) {
+@mixin _html-animation-class($class) {
+	// `:root` and `html` are the same element as the animation class host, so they
+	// cannot appear as descendants of `html.#{$class}`.
+	$parent: "#{&}";
+
+	@if not & or $parent == ":root" or $parent == "html" {
+		@at-root html.#{$class} {
 			@content;
 		}
 	} @else {
-		@media screen and (prefers-reduced-motion: no-preference) {
+		html.#{$class} & {
 			@content;
 		}
 	}
 }
+
+// Styles when motion is reduced (`html.no-js-animation`).
+@mixin reduced-motion {
+	@include _html-animation-class("no-js-animation") {
+		@content;
+	}
+}
+
+// Styles when animations are allowed (`html.js-animation`).
+@mixin allows-motion {
+	@include _html-animation-class("js-animation") {
+		@content;
+	}
+}

src/scss/03-base/_variables-css.scss

@@ -43,23 +43,11 @@
 	--paragraph--line-height-small: 1.4;
 	--paragraph--line-height-default: 1.4;
 
-	/*
-     * Animation speeds
-     */
-	--speed: 1s;
-
 	/*
      * Admin bar
      */
 	--wp-admin-bar-height: var(--wp-admin--admin-bar--height, 0rem);
 
-	/*
-     * A11y reduced motion
-     */
-	@include reduced-motion {
-		--speed: 0s;
-	}
-
 	/*
      * Global breakpoints
      */