fix(customMQ): extend --HDcolor media query with color-gamut check (#444

)
argyleink · Dec 7, 2023 · 559c91b · 559c91b
1 parent 8d71439
commit 559c91b
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/docsite/index.html b/docsite/index.html
@@ -3352,7 +3352,7 @@ <h5>Capability Vars</h5>
               @custom-media --pointer  (hover) and (pointer: coarse);
               @custom-media --mouse    (hover) and (pointer: fine);
 
-              @custom-media --HDcolor  (dynamic-range: high);
+              @custom-media --HDcolor  (dynamic-range: high) or (color-gamut: p3);
             </code></pre>
           </div>
         </div>

diff --git a/src/props.media.css b/src/props.media.css
@@ -14,7 +14,7 @@
 @custom-media --portrait      (orientation: portrait);
 @custom-media --landscape     (orientation: landscape);
 
-@custom-media --HDcolor       (dynamic-range: high);
+@custom-media --HDcolor       (dynamic-range: high) or (color-gamut: p3);
 
 @custom-media --touch         (hover: none) and (pointer: coarse);
 @custom-media --stylus        (hover: none) and (pointer: fine);

diff --git a/src/props.media.js b/src/props.media.js
@@ -15,7 +15,7 @@ export const CustomMedia = {
   "--portrait": "(orientation: portrait)",
   "--landscape": "(orientation: landscape)",
 
-  "--HDcolor": "(dynamic-range: high)",
+  "--HDcolor": "(dynamic-range: high) or (color-gamut: p3)",
 
   "--touch": "(hover: none) and (pointer: coarse)",
   "--stylus": "(hover: none) and (pointer: fine)",