From b6fd78e229a99f895dbef4fd3fb54ffa2c217f0e Mon Sep 17 00:00:00 2001
From: Luke Warlow <luke@warlow.dev>
Date: Wed, 26 Jul 2023 15:08:49 +0100
Subject: [PATCH] Add inverted-colors variant

---
 src/corePlugins.js                                    | 4 ++++
 src/lib/setupContextUtils.js                          | 1 +
 tests/plugins/variants/invertedColorsVariants.test.js | 9 +++++++++
 3 files changed, 14 insertions(+)
 create mode 100644 tests/plugins/variants/invertedColorsVariants.test.js

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 683b6ef32526..aff266275a17 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -460,6 +460,10 @@ export let variantPlugins = {
     addVariant('contrast-more', '@media (prefers-contrast: more)')
     addVariant('contrast-less', '@media (prefers-contrast: less)')
   },
+
+  invertedColorsVariants: ({ addVariant }) => {
+    addVariant('inverted-colors', '@media (inverted-colors: inverted)')
+  },
 }
 
 let cssTransformValue = [
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 00b05652af0d..df1df8d935fc 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -759,6 +759,7 @@ function resolvePlugins(context, root) {
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
+    variantPlugins['invertedColorsVariants'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]
diff --git a/tests/plugins/variants/invertedColorsVariants.test.js b/tests/plugins/variants/invertedColorsVariants.test.js
new file mode 100644
index 000000000000..273bc264d2c5
--- /dev/null
+++ b/tests/plugins/variants/invertedColorsVariants.test.js
@@ -0,0 +1,9 @@
+import { css, quickVariantPluginTest } from '../../util/run'
+
+quickVariantPluginTest('invertedColorsVariants').toMatchFormattedCss(css`
+  @media (inverted-colors: inverted) {
+    .inverted-colors\:flex {
+      display: flex;
+    }
+  }
+`)