Add prefers- media queries

features/prefers-color-scheme.yml

@@ -1,3 +1,9 @@
 name: prefers-color-scheme
 description: The `prefers-color-scheme` CSS media query detects the requested color scheme, light or dark.
 spec: https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
+status:
+  compute_from: css.at-rules.media.prefers-color-scheme
+compat_features:
+  - css.at-rules.media.prefers-color-scheme
+  - css.at-rules.media.prefers-color-scheme.respects-inherited-scheme
+  - http.headers.Sec-CH-Prefers-Color-Scheme

features/prefers-color-scheme.yml.dist

@@ -14,4 +14,29 @@ status:
     safari: "12.1"
     safari_ios: "13"
 compat_features:
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2020-01-15
+  # baseline_high_date: 2022-07-15
+  # support:
+  #   chrome: "76"
+  #   chrome_android: "76"
+  #   edge: "79"
+  #   firefox: "67"
+  #   firefox_android: "67"
+  #   safari: "12.1"
+  #   safari_ios: "13"
   - css.at-rules.media.prefers-color-scheme
+
+  # baseline: false
+  # support:
+  #   chrome: "93"
+  #   chrome_android: "93"
+  #   edge: "93"
+  - http.headers.Sec-CH-Prefers-Color-Scheme
+
+  # baseline: false
+  # support:
+  #   firefox: "105"
+  #   firefox_android: "105"
+  - css.at-rules.media.prefers-color-scheme.respects-inherited-scheme

features/prefers-contrast.yml

@@ -0,0 +1,5 @@
+name: prefers-contrast
+description: The `prefers-contrast` CSS media query detects the requested contrast, more or less.
+spec: https://drafts.csswg.org/mediaqueries-5/#prefers-contrast
+compat_features:
+  - css.at-rules.media.prefers-contrast

features/prefers-contrast.yml.dist

@@ -0,0 +1,16 @@
+# Generated from: prefers-contrast.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: low
+  baseline_low_date: 2022-05-31
+  support:
+    chrome: "96"
+    chrome_android: "96"
+    edge: "96"
+    firefox: "101"
+    firefox_android: "101"
+    safari: "14.1"
+    safari_ios: "14.5"
+compat_features:
+  - css.at-rules.media.prefers-contrast

features/prefers-reduced-data.yml

@@ -0,0 +1,5 @@
+name: prefers-reduced-data
+description: The `prefers-reduced-data` CSS media query detects whether the user has a preference for using less internet traffic.
+spec: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-data
+compat_features:
+  - css.at-rules.media.prefers-reduced-data

features/prefers-reduced-data.yml.dist

@@ -0,0 +1,8 @@
+# Generated from: prefers-reduced-data.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: false
+  support: {}
+compat_features:
+  - css.at-rules.media.prefers-reduced-data

features/prefers-reduced-motion.yml

@@ -0,0 +1,11 @@
+name: prefers-reduced-motion
+description: The `prefers-reduced-motion` CSS media query detects whether the user requested less non-essential animation.
+spec:
+  - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion
+  - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-motion
+caniuse: prefers-reduced-motion
+status:
+  compute_from: css.at-rules.media.prefers-reduced-motion
+compat_features:
+  - css.at-rules.media.prefers-reduced-motion
+  - http.headers.Sec-CH-Prefers-Reduced-Motion

features/prefers-reduced-motion.yml.dist

@@ -0,0 +1,36 @@
+# Generated from: prefers-reduced-motion.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2020-01-15
+  baseline_high_date: 2022-07-15
+  support:
+    chrome: "74"
+    chrome_android: "74"
+    edge: "79"
+    firefox: "63"
+    firefox_android: "64"
+    safari: "10.1"
+    safari_ios: "10.3"
+compat_features:
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2020-01-15
+  # baseline_high_date: 2022-07-15
+  # support:
+  #   chrome: "74"
+  #   chrome_android: "74"
+  #   edge: "79"
+  #   firefox: "63"
+  #   firefox_android: "64"
+  #   safari: "10.1"
+  #   safari_ios: "10.3"
+  - css.at-rules.media.prefers-reduced-motion
+
+  # baseline: false
+  # support:
+  #   chrome: "108"
+  #   chrome_android: "108"
+  #   edge: "108"
+  - http.headers.Sec-CH-Prefers-Reduced-Motion

features/prefers-reduced-transparency.yml

@@ -0,0 +1,8 @@
+name: prefers-reduced-transparency
+description: The `prefers-reduced-transparency` CSS media query detects whether the user requested less transparent effects, which can improve contrast and readability.
+spec:
+  - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency
+  - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-transparency
+compat_features:
+  - css.at-rules.media.prefers-reduced-transparency
+  - http.headers.Sec-CH-Prefers-Reduced-Transparency

features/prefers-reduced-transparency.yml.dist

@@ -0,0 +1,24 @@
+# Generated from: prefers-reduced-transparency.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: false
+  support:
+    chrome: "119"
+    chrome_android: "119"
+    edge: "119"
+compat_features:
+  # baseline: false
+  # support:
+  #   chrome: "118"
+  #   chrome_android: "118"
+  #   edge: "118"
+  - css.at-rules.media.prefers-reduced-transparency
+
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: false
+  # support:
+  #   chrome: "119"
+  #   chrome_android: "119"
+  #   edge: "119"
+  - http.headers.Sec-CH-Prefers-Reduced-Transparency