From dd5b0371bcac8e752bf53ce8511b6c59e60fdc3c Mon Sep 17 00:00:00 2001
From: Luke Warlow <luke@warlow.dev>
Date: Fri, 8 Sep 2023 17:27:04 +0100
Subject: [PATCH] Add documentation for `forced-colors-adjust`

---
 src/navs/documentation.js               |  2 +-
 src/pages/docs/forced-colors-adjust.mdx | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/docs/forced-colors-adjust.mdx

diff --git a/src/navs/documentation.js b/src/navs/documentation.js
index 36b55b77e..04b8585f7 100644
--- a/src/navs/documentation.js
+++ b/src/navs/documentation.js
@@ -226,7 +226,7 @@ export const documentationNav = {
     pages['will-change'],
   ],
   SVG: [pages['fill'], pages['stroke'], pages['stroke-width']],
-  Accessibility: [pages['screen-readers']],
+  Accessibility: [pages['screen-readers'], pages['forced-colors-adjust']],
   'Official Plugins': [
     pages['typography-plugin'],
     {
diff --git a/src/pages/docs/forced-colors-adjust.mdx b/src/pages/docs/forced-colors-adjust.mdx
new file mode 100644
index 000000000..755532f6b
--- /dev/null
+++ b/src/pages/docs/forced-colors-adjust.mdx
@@ -0,0 +1,20 @@
+---
+title: "Forced Colors Adjust"
+description: "Utilities for controlling whether forced-colors mode applies to an element."
+---
+
+import utilities from 'utilities?plugin=forcedColorsAdjust'
+
+export const classes = { utilities }
+
+## Basic usage
+
+### Opt-out of forced colors
+
+Use `forced-colors-none` to opt an element out of `forced-colors` adjustment:
+
+```html
+<div class="forced-colors-none">
+  <!-- Content that needs to opt out of forced-colors mode -->
+</div>
+```