diff --git a/packages/preset-wind/src/variants/default.ts b/packages/preset-wind/src/variants/default.ts index de66e24f49..2fe246cb1a 100644 --- a/packages/preset-wind/src/variants/default.ts +++ b/packages/preset-wind/src/variants/default.ts @@ -3,7 +3,7 @@ import { variants as miniVariants } from '@unocss/preset-mini/variants' import type { PresetWindOptions, Theme } from '..' import { variantCombinators } from './combinators' import { variantColorsScheme } from './dark' -import { variantMotions, variantOrientations } from './media' +import { variantContrasts, variantMotions, variantOrientations } from './media' import { variantSpaceAndDivide } from './misc' import { placeholderModifier } from './placeholder' @@ -11,6 +11,7 @@ export const variants = (options: PresetWindOptions): Variant[] => [ placeholderModifier, variantSpaceAndDivide, ...miniVariants(options), + ...variantContrasts, ...variantOrientations, ...variantMotions, ...variantCombinators, diff --git a/packages/preset-wind/src/variants/media.ts b/packages/preset-wind/src/variants/media.ts index bcd1ab70db..7d314c86a6 100644 --- a/packages/preset-wind/src/variants/media.ts +++ b/packages/preset-wind/src/variants/media.ts @@ -1,6 +1,11 @@ import type { Variant } from '@unocss/core' import { variantParentMatcher } from '@unocss/preset-mini/utils' +export const variantContrasts: Variant[] = [ + variantParentMatcher('contrast-more', '@media (prefers-contrast: more)'), + variantParentMatcher('contrast-less', '@media (prefers-contrast: less)'), +] + export const variantMotions: Variant[] = [ variantParentMatcher('motion-reduce', '@media (prefers-reduced-motion: reduce)'), variantParentMatcher('motion-safe', '@media (prefers-reduced-motion: no-preference)'), diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap index 6fb606b537..e621a81660 100644 --- a/test/__snapshots__/preset-wind.test.ts.snap +++ b/test/__snapshots__/preset-wind.test.ts.snap @@ -28,7 +28,11 @@ exports[`preset-wind > containers 1`] = ` `; exports[`preset-wind > targets 1`] = ` -"/* layer: default */ +"/* layer: _pre */ +@media (prefers-contrast: less){ +.layer-_pre\\\\:contrast-less\\\\:bg-gray-3{--un-bg-opacity:1;background-color:rgba(209,213,219,var(--un-bg-opacity));} +} +/* layer: default */ .bg-blend-\\\\$data{background-blend-mode:var(--data);} .bg-image-\\\\$variable{background-image:var(--variable);} .object-\\\\$fit{object-fit:var(--fit);} @@ -419,6 +423,9 @@ exports[`preset-wind > targets 1`] = ` @media (prefers-color-scheme: dark){ .\\\\@dark\\\\:text-xl{font-size:1.25rem;line-height:1.75rem;} } +@media (prefers-contrast: more){ +.contrast-more\\\\:bg-black{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));} +} @media (prefers-reduced-motion: no-preference){ .motion-safe\\\\:transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;} } diff --git a/test/assets/preset-wind-targets.ts b/test/assets/preset-wind-targets.ts index c54d0f5b59..b70a624213 100644 --- a/test/assets/preset-wind-targets.ts +++ b/test/assets/preset-wind-targets.ts @@ -335,11 +335,11 @@ export const presetWindTargets: string[] = [ // variants combinators 'svg:fill-red', - // variants motion + // variants media: contrasts, motions, orientations + 'contrast-more:bg-black', + 'layer-_pre:contrast-less:bg-gray-3', 'motion-reduce:hover:translate-0', 'motion-safe:transition', - - // variants orientations 'portrait:hidden', 'landscape:hidden',