Add forced-colors variant (#11694)

* Add forced-colors variant Also add a contrast-custom variant to match custom contrast preferences * use `toMatchSnapshot` instead of `toMatchFormattedCss` More info: #12170 * remove `contrast-custom` variant * move `forcedColorsVariants` next to `prefersContrastVariants` * update changelog --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
tailwindlabs · Dec 18, 2023 · add51c6 · add51c6
1 parent a35e7fc
commit add51c6
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add utilities for CSS subgrid ([#12298](https://github.com/tailwindlabs/tailwindcss/pull/12298))
 - Add spacing scale to `min-w-*`, `min-h-*`, and `max-w-*` utilities ([#12300](https://github.com/tailwindlabs/tailwindcss/pull/12300))
 - Add `forced-color-adjust` utilities ([#11931](https://github.com/tailwindlabs/tailwindcss/pull/11931))
+- Add `forced-colors` variant ([#11694](https://github.com/tailwindlabs/tailwindcss/pull/11694))
 
 ## [3.3.7] - 2023-12-18
 

diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -461,6 +461,10 @@ export let variantPlugins = {
     addVariant('contrast-more', '@media (prefers-contrast: more)')
     addVariant('contrast-less', '@media (prefers-contrast: less)')
   },
+
+  forcedColorsVariants: ({ addVariant }) => {
+    addVariant('forced-colors', '@media (forced-colors: active)')
+  },
 }
 
 let cssTransformValue = [

diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
@@ -767,6 +767,7 @@ function resolvePlugins(context, root) {
     variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['prefersContrastVariants'],
+    variantPlugins['forcedColorsVariants'],
     variantPlugins['darkVariants'],
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],