Add forced-colors variant

Also add a contrast-custom variant to match custom contrast preferences
lukewarlow · Nov 2, 2023 · 6763eda · 6763eda
1 parent 2d6856c
commit 6763eda
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 0 deletions.
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -459,6 +459,11 @@ export let variantPlugins = {
   prefersContrastVariants: ({ addVariant }) => {
     addVariant('contrast-more', '@media (prefers-contrast: more)')
     addVariant('contrast-less', '@media (prefers-contrast: less)')
+    addVariant('contrast-custom', '@media (prefers-contrast: custom)')
+  },
+
+  forcedColorsVariants: ({ addVariant }) => {
+    addVariant('forced-colors', '@media (forced-colors: active)')
   },
 }
 

diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
@@ -761,6 +761,7 @@ function resolvePlugins(context, root) {
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
+    variantPlugins['forcedColorsVariants'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]

diff --git a/tests/plugins/variants/__snapshots__/prefersContrastVariants.test.js.snap b/tests/plugins/variants/__snapshots__/prefersContrastVariants.test.js.snap
@@ -13,5 +13,11 @@ exports[`should test the 'prefersContrastVariants' plugin 1`] = `
     display: flex;
   }
 }
+
+@media (prefers-contrast: custom) {
+  .contrast-custom\\:flex {
+    display: flex;
+  }
+}
 "
 `;
diff --git a/tests/plugins/variants/forcedColorsVariants.test.js b/tests/plugins/variants/forcedColorsVariants.test.js
@@ -0,0 +1,9 @@
+import { css, quickVariantPluginTest } from '../../util/run'
+
+quickVariantPluginTest('forcedColorsVariants').toMatchFormattedCss(css`
+  @media (forced-colors: active) {
+    .forced-colors\:flex {
+      display: flex;
+    }
+  }
+`)