Document inverted-colors variant (#2142)

Co-authored-by: Jonathan Reinink <[email protected]>

Author: danhollick

src/docs/hover-focus-and-other-states.mdx

@@ -1857,6 +1857,17 @@ Use the `not-forced-colors` variant to apply styles based when the user is _not_
 
 Tailwind also includes a [forced color adjust](/docs/forced-color-adjust) utilities to opt in and out of forced colors.
 
+### inverted-colors
+
+Use the `inverted-colors` variant to conditionally add styles when the user has enabled an inverted color scheme:
+
+```html
+<!-- [!code classes:inverted-colors:shadow-none] -->
+<div class="shadow-xl inverted-colors:shadow-none ...">
+  <!-- ... -->
+</div>
+```
+
 ### pointer and any-pointer
 
 The `pointer` media query tells you whether the user has a primary pointing device, like a mouse, and the accuracy of that pointing device.
@@ -4106,133 +4117,157 @@ A quick reference table of every single variant included in Tailwind by default.
       </tr>
       <tr>
         <td>
-          <a href="#orientation" className="whitespace-nowrap">
-            portrait
+          <a href="#prefers-reduced-motion" className="whitespace-nowrap">
+            motion-safe
           </a>
         </td>
         <td>
           <code className="whitespace-nowrap before:content-none after:content-none">
-            @media (orientation: portrait)
+            @media (prefers-reduced-motion: no-preference)
           </code>
         </td>
       </tr>
       <tr>
         <td>
-          <a href="#orientation" className="whitespace-nowrap">
-            landscape
+          <a href="#prefers-reduced-motion" className="whitespace-nowrap">
+            motion-reduce
           </a>
         </td>
         <td>
           <code className="whitespace-nowrap before:content-none after:content-none">
-            @media (orientation: landscape)
+            @media (prefers-reduced-motion: reduce)
           </code>
         </td>
       </tr>
       <tr>
         <td>
-          <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
-            pointer-fine
+          <a href="#prefers-contrast" className="whitespace-nowrap">
+            contrast-more
           </a>
         </td>
         <td>
-          <code className="whitespace-nowrap before:content-none after:content-none">@media (pointer: fine)</code>
+          <code className="whitespace-nowrap before:content-none after:content-none">
+            @media (prefers-contrast: more)
+          </code>
         </td>
       </tr>
       <tr>
         <td>
-          <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
-            pointer-coarse
+          <a href="#prefers-contrast" className="whitespace-nowrap">
+            contrast-less
           </a>
         </td>
         <td>
-          <code className="whitespace-nowrap before:content-none after:content-none">@media (pointer: coarse)</code>
+          <code className="whitespace-nowrap before:content-none after:content-none">
+            @media (prefers-contrast: less)
+          </code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#forced-colors" className="whitespace-nowrap">
+            forced-colors
+          </a>
+        </td>
+        <td>
+          <code className="whitespace-nowrap before:content-none after:content-none">
+            @media (forced-colors: active)
+          </code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <a href="#inverted-colors" className="whitespace-nowrap">
+            inverted-colors
+          </a>
+        </td>
+        <td>
+          <code className="whitespace-nowrap before:content-none after:content-none">
+            @media (inverted-colors: inverted)
+          </code>
         </td>
       </tr>
       <tr>
         <td>
           <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
-            pointer-none
+            pointer-fine
           </a>
         </td>
         <td>
-          <code className="whitespace-nowrap before:content-none after:content-none">@media (pointer: none)</code>
+          <code className="whitespace-nowrap before:content-none after:content-none">@media (pointer: fine)</code>
         </td>
       </tr>
       <tr>
         <td>
           <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
-            any-pointer-fine
+            pointer-coarse
           </a>
         </td>
         <td>
-          <code className="whitespace-nowrap before:content-none after:content-none">@media (any-pointer: fine)</code>
+          <code className="whitespace-nowrap before:content-none after:content-none">@media (pointer: coarse)</code>
         </td>
       </tr>
       <tr>
         <td>
           <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
-            any-pointer-coarse
+            pointer-none
           </a>
         </td>
         <td>
-          <code className="whitespace-nowrap before:content-none after:content-none">@media (any-pointer: coarse)</code>
+          <code className="whitespace-nowrap before:content-none after:content-none">@media (pointer: none)</code>
         </td>
       </tr>
       <tr>
         <td>
           <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
-            any-pointer-none
+            any-pointer-fine
           </a>
         </td>
         <td>
-          <code className="whitespace-nowrap before:content-none after:content-none">@media (any-pointer: none)</code>
+          <code className="whitespace-nowrap before:content-none after:content-none">@media (any-pointer: fine)</code>
         </td>
       </tr>
       <tr>
         <td>
-          <a href="#prefers-reduced-motion" className="whitespace-nowrap">
-            motion-safe
+          <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
+            any-pointer-coarse
           </a>
         </td>
         <td>
-          <code className="whitespace-nowrap before:content-none after:content-none">
-            @media (prefers-reduced-motion: no-preference)
-          </code>
+          <code className="whitespace-nowrap before:content-none after:content-none">@media (any-pointer: coarse)</code>
         </td>
       </tr>
       <tr>
         <td>
-          <a href="#prefers-reduced-motion" className="whitespace-nowrap">
-            motion-reduce
+          <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
+            any-pointer-none
           </a>
         </td>
         <td>
-          <code className="whitespace-nowrap before:content-none after:content-none">
-            @media (prefers-reduced-motion: reduce)
-          </code>
+          <code className="whitespace-nowrap before:content-none after:content-none">@media (any-pointer: none)</code>
         </td>
       </tr>
       <tr>
         <td>
-          <a href="#prefers-contrast" className="whitespace-nowrap">
-            contrast-more
+          <a href="#orientation" className="whitespace-nowrap">
+            portrait
           </a>
         </td>
         <td>
           <code className="whitespace-nowrap before:content-none after:content-none">
-            @media (prefers-contrast: more)
+            @media (orientation: portrait)
           </code>
         </td>
       </tr>
       <tr>
         <td>
-          <a href="#prefers-contrast" className="whitespace-nowrap">
-            contrast-less
+          <a href="#orientation" className="whitespace-nowrap">
+            landscape
           </a>
         </td>
         <td>
           <code className="whitespace-nowrap before:content-none after:content-none">
-            @media (prefers-contrast: less)
+            @media (orientation: landscape)
           </code>
         </td>
       </tr>
@@ -4436,18 +4471,6 @@ A quick reference table of every single variant included in Tailwind by default.
           </code>
         </td>
       </tr>
-      <tr>
-        <td>
-          <a href="#forced-colors" className="whitespace-nowrap">
-            forced-colors
-          </a>
-        </td>
-        <td>
-          <code className="whitespace-nowrap before:content-none after:content-none">
-            @media (forced-colors: active)
-          </code>
-        </td>
-      </tr>
       <tr>
         <td>
           <a href="#starting-style" className="whitespace-nowrap">