From 4f78c6fb2fc8ed0739561b0d0a1e64bafaa0fd79 Mon Sep 17 00:00:00 2001
From: Celso Bonutti <i.am@cel.so>
Date: Tue, 21 Jun 2022 16:34:41 -0300
Subject: [PATCH 1/3] adds `prefers-reduced-motion` media query

---
 src/Css/Media.elm | 32 ++++++++++++++++++++++++++++++++
 tests/Media.elm   |  4 ++++
 2 files changed, 36 insertions(+)

diff --git a/src/Css/Media.elm b/src/Css/Media.elm
index 6a805e7a..a60ca477 100644
--- a/src/Css/Media.elm
+++ b/src/Css/Media.elm
@@ -16,6 +16,7 @@ module Css.Media exposing
     , Fine, Coarse, fine, coarse, pointer, anyPointer, CanHover, canHover
     , hover, anyHover
     , InitialOnly, Enabled, initialOnly, enabled, scripting
+    , noPreference, prefersReducedMotion, reduce
     )
 
 {-| Functions for building [`@media` queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries).
@@ -942,6 +943,37 @@ scripting value =
     feature "scripting" value
 
 
+{-| -}
+type alias ReducedMotionPreference =
+    { value : String, reducedMotionPreference : Compatible }
+
+
+{-| The value [`reduce`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion).
+-}
+reduce : ReducedMotionPreference
+reduce =
+    { value = "reduce", reducedMotionPreference = Compatible }
+
+
+{-| The value [`no-preference`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion).
+-}
+noPreference : ReducedMotionPreference
+noPreference =
+    { value = "no-preference", reducedMotionPreference = Compatible }
+
+
+{-| Media feature [`prefers-reduced-motion`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion).
+Queries the if the user agent's has a preference for less motion on the page.
+Accepts `reduce` or `noPreference`.
+
+    media (Media.hover canHover) [ a [ Css.hover [ textDecoration underline ] ] ]
+
+-}
+prefersReducedMotion : ReducedMotionPreference -> Expression
+prefersReducedMotion value =
+    feature "prefers-reduced-motion" value
+
+
 
 -- PRIVATE HELPERS --
 
diff --git a/tests/Media.elm b/tests/Media.elm
index 6fd6adf6..6840b076 100644
--- a/tests/Media.elm
+++ b/tests/Media.elm
@@ -142,6 +142,10 @@ mediaFeatures =
             , ( scripting initialOnly, "initial-only" )
             , ( scripting Media.enabled, "enabled" )
             ]
+        , testFeature "prefers-reduced-motion"
+            [ ( prefersReducedMotion reduce, "reduce" )
+            , ( prefersReducedMotion noPreference, "no-preference" )
+            ]
         ]
 
 

From e2e721820177a89210d1fbcaf5dfaa4aee7b713e Mon Sep 17 00:00:00 2001
From: Celso Bonutti <i.am@cel.so>
Date: Tue, 21 Jun 2022 16:41:45 -0300
Subject: [PATCH 2/3] use phantom types for `prefers-reduced-motion`

---
 src/Css/Media.elm | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/Css/Media.elm b/src/Css/Media.elm
index a60ca477..0ae8d2ed 100644
--- a/src/Css/Media.elm
+++ b/src/Css/Media.elm
@@ -944,20 +944,30 @@ scripting value =
 
 
 {-| -}
-type alias ReducedMotionPreference =
+type alias ReducedMotionPreference a =
+    { a | value : String, reducedMotionPreference : Compatible }
+
+
+{-| -}
+type alias Reduce =
+    { value : String, reducedMotionPreference : Compatible }
+
+
+{-| -}
+type alias NoPreference =
     { value : String, reducedMotionPreference : Compatible }
 
 
 {-| The value [`reduce`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion).
 -}
-reduce : ReducedMotionPreference
+reduce : Reduce
 reduce =
     { value = "reduce", reducedMotionPreference = Compatible }
 
 
 {-| The value [`no-preference`](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion).
 -}
-noPreference : ReducedMotionPreference
+noPreference : NoPreference
 noPreference =
     { value = "no-preference", reducedMotionPreference = Compatible }
 
@@ -969,7 +979,7 @@ Accepts `reduce` or `noPreference`.
     media (Media.hover canHover) [ a [ Css.hover [ textDecoration underline ] ] ]
 
 -}
-prefersReducedMotion : ReducedMotionPreference -> Expression
+prefersReducedMotion : ReducedMotionPreference a -> Expression
 prefersReducedMotion value =
     feature "prefers-reduced-motion" value
 

From 7515fc302680bccacd67f4abf6ed709cc11c880e Mon Sep 17 00:00:00 2001
From: Celso Bonutti <i.am@cel.so>
Date: Tue, 21 Jun 2022 16:55:08 -0300
Subject: [PATCH 3/3] adjusts `preferReducedMotion` docs

---
 src/Css/Media.elm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Css/Media.elm b/src/Css/Media.elm
index 0ae8d2ed..260db0d9 100644
--- a/src/Css/Media.elm
+++ b/src/Css/Media.elm
@@ -976,7 +976,7 @@ noPreference =
 Queries the if the user agent's has a preference for less motion on the page.
 Accepts `reduce` or `noPreference`.
 
-    media (Media.hover canHover) [ a [ Css.hover [ textDecoration underline ] ] ]
+    media (prefersReducedMotion reduce) [ a [ hover [ transform none ] ] ]
 
 -}
 prefersReducedMotion : ReducedMotionPreference a -> Expression