feat: add prefers-contrast media query variants

.changeset/hungry-rings-switch.md

@@ -0,0 +1,5 @@
+---
+'@twind/preset-tailwind': patch
+---
+
+add `prefers-contrast` media query variants

package.json

@@ -63,7 +63,7 @@
       "name": "@twind/cdn",
       "path": "packages/cdn/dist/cdn.esnext.js",
       "brotli": true,
-      "limit": "15kb"
+      "limit": "15.1kb"
     },
     {
       "name": "@twind/preset-tailwind",

packages/cdn/package.json

@@ -32,7 +32,7 @@
       "name": "@twind/cdn",
       "path": "dist/cdn.esnext.js",
       "brotli": true,
-      "limit": "15kb"
+      "limit": "15.1kb"
     }
   ],
   "dependencies": {

packages/preset-tailwind/src/rules.test.json

@@ -2017,5 +2017,14 @@
   "text-translucent-rose": ".text-translucent-rose{color:rgba(244,63,94,50%)}",
   "text-translucent-blue": ".text-translucent-blue{color:rgba(59,130,246,var(--my-alpha))}",
   "text-translucent-emerald": ".text-translucent-emerald{color:rgba(16,185,129,0.5)}",
-  "text-[theme(colors.amber.500/theme(opacity.75))]": ".text-\\[theme\\(colors\\.amber\\.500\\/theme\\(opacity\\.75\\)\\)\\]{color:rgba(245,158,11,0.75)}"
+  "text-[theme(colors.amber.500/theme(opacity.75))]": ".text-\\[theme\\(colors\\.amber\\.500\\/theme\\(opacity\\.75\\)\\)\\]{color:rgba(245,158,11,0.75)}",
+  "bg-white contrast-less:bg-black contrast-more:bg-pink-500": [
+    ".bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}",
+    "@media (prefers-contrast:less){.contrast-less\\:bg-black{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}}",
+    "@media (prefers-contrast:more){.contrast-more\\:bg-pink-500{--tw-bg-opacity:1;background-color:rgba(236,72,153,var(--tw-bg-opacity))}}"
+  ],
+  "contrast-more:bg-black dark:bg-white": [
+    "@media (prefers-contrast:more){.contrast-more\\:bg-black{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}}",
+    "@media (prefers-color-scheme:dark){.dark\\:bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}}"
+  ]
 }

packages/preset-tailwind/src/variants.ts

@@ -8,6 +8,8 @@ const variants: Variant<TailwindTheme>[] = [
   ['print', '@media print'],
   ['portrait', '@media (orientation:portrait)'],
   ['landscape', '@media (orientation:landscape)'],
+  ['contrast-more', '@media (prefers-contrast:more)'],
+  ['contrast-less', '@media (prefers-contrast:less)'],
 
   ['first-letter', '&::first-letter'],
   ['first-line', '&::first-line'],

packages/twind/package.json

@@ -29,14 +29,14 @@
       "name": "twind",
       "path": "dist/twind.esnext.js",
       "brotli": true,
-      "limit": "7.6kb"
+      "limit": "7.65kb"
     },
     {
       "name": "twind (setup)",
       "path": "dist/twind.esnext.js",
       "import": "{ setup }",
       "brotli": true,
-      "limit": "5.2kb"
+      "limit": "5.25kb"
     },
     {
       "name": "twind (twind + cssom)",