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: https://github.com/tailwindlabs/tailwindcss/pull/12170

* remove `contrast-custom` variant

* move `forcedColorsVariants` next to `prefersContrastVariants`

* update changelog

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This commit is contained in:
Luke Warlow 2023-11-02 19:28:50 +00:00 • committed by GitHub
parent 903eb5629c
commit b411d04c8c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 0 deletions

View file

@ -460,6 +460,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 = [

View file

@ -757,6 +757,7 @@ function resolvePlugins(context, root) {
variantPlugins['directionVariants'],
variantPlugins['reducedMotionVariants'],
variantPlugins['prefersContrastVariants'],
variantPlugins['forcedColorsVariants'],
variantPlugins['darkVariants'],
variantPlugins['printVariant'],
variantPlugins['screenVariants'],