-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add forced-colors
variant
#11694
Add forced-colors
variant
#11694
Conversation
src/corePlugins.js
Outdated
@@ -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)') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be useful to also have a variant for @media (prefers-contrast)
in a boolean context. But I couldn't think of a good name for it? contrast-specified
?
To quote the spec:
it is also common to reduce visual clutter and color complexity in response to both high and low contrast preferences. In that case, it is appropriate to use @media (prefers-contrast) { … } without specifying more or less, to do things like replacing background images with plain colors, turning off decorative gradients, or replacing border images or box shadows with simple solid borders. As prefers-contrast: custom—like prefers-contrast: more or prefers-contrast: less—evaluates to true in a boolean context, such simplifications would also benefit users of forced colors mode, even when their colors of choice do not result in a particularly high or low contrast. This is desirable, as the reduced palette enforced by forced colors mode calls for some visual simplification of the page.
a8a07f5
to
193b30c
Compare
193b30c
to
c76b71c
Compare
Also add a contrast-custom variant to match custom contrast preferences
c76b71c
to
85448d4
Compare
Hey! Thanks for the PR. I did drop the This will be available in the next release but you can already try it using the insiders version. |
* 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>
* 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>
hey @RobinMalfait @lukewarlow! Thanks for adding this. I was trying it out, and wondered if the order of the media queries in the generated CSS should be changed. For example, currently if you have .bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}
@media (forced-colors: active) {
.forced-colors\:bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
}
@media (prefers-color-scheme: dark) {
.dark\:bg-red-800 {
--tw-bg-opacity: 1;
background-color: rgb(153 27 27 / var(--tw-bg-opacity));
}
} Example: https://play.tailwindcss.com/W5uvtnMyhH I think forced colors should basically always win. Is there a way to have this automatically pushed to the end so we don't need to also add a redundant |
@devongovett Forced-colors mode could result in a light theme or a dark theme (and a high or low or custom contrast). So you could end up needing to set a separate class for forced-colors with dark mode than without. Having said that provided the dark:forced comes after normal forced, your change probably makes sense. But could the same not be said for the contrast variants? @RobinMalfait I think d620471 is what changed that ordering, was this deliberate or was it just for neatness? |
I've made a PR to do this so it's ready to go if the team want to make the change. #12582 Depends on whether we want to be consistent with contrast etc or not I guess. |
Yep you are totally correct. @lukewarlow we moved it because it made more sense to group the related variants together, but this does indeed break the dark mode case. Good catch! Will take a look at your PR tomorrow, thanks 🙏 |
* 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>
Add a variant for the
forced-colors
media query.Also add a contrast-custom variant to match custom contrast preferences
Like with #11693 i've only added a variant for
forced-colors: active
because theforced-colors: none
case isn't overly useful.This has widespread browser support across multiple platforms