feat(preset-wind): add contrast-more/less variants (#1018)

unocss · May 29, 2022 · 3e21824 · 3e21824
1 parent a96c5c7
commit 3e21824
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/packages/preset-wind/src/variants/default.ts b/packages/preset-wind/src/variants/default.ts
@@ -3,14 +3,15 @@ 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'
 
 export const variants = (options: PresetWindOptions): Variant<Theme>[] => [
   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
@@ -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
@@ -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
@@ -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',