add inverted-colors variant

Co-authored-by: Luke Warlow <luke@warlow.dev>
tailwindlabs · Apr 17, 2024 · dd221bc · dd221bc
1 parent cc8c069
commit dd221bc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -2424,5 +2424,12 @@ exports[`getVariants 1`] = `
     "selectors": [Function],
     "values": [],
   },
+  {
+    "hasDash": true,
+    "isArbitrary": false,
+    "name": "inverted-colors",
+    "selectors": [Function],
+    "values": [],
+  },
 ]
 `;
diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
@@ -1546,6 +1546,16 @@ test('forced-colors', () => {
   `)
 })
 
+test('inverted-colors', () => {
+  expect(run(['inverted-colors:flex'])).toMatchInlineSnapshot(`
+    "@media (inverted-colors: inverted) {
+      .inverted-colors\\:flex {
+        display: flex;
+      }
+    }"
+  `)
+})
+
 test('container queries', () => {
   expect(
     compileCss(

diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts
@@ -701,5 +701,7 @@ export function createVariants(theme: Theme): Variants {
 
   staticVariant('forced-colors', ['@media (forced-colors: active)'], { compounds: false })
 
+  staticVariant('inverted-colors', ['@media (inverted-colors: inverted)'], { compounds: false })
+
   return variants
 }