From 93ca09749255b5192a9f4739a78c62538f6b3089 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Sun, 30 Jul 2023 20:42:34 -0400
Subject: [PATCH 1/2] remove `--focus-color` variable

---
 package/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package/index.css b/package/index.css
index 82add91..902c116 100644
--- a/package/index.css
+++ b/package/index.css
@@ -95,7 +95,7 @@
 }
 
 :where(:focus-visible) {
-	outline: 2px solid var(--focus-color, Highlight);
+	outline: 3px solid Highlight;
 	outline-offset: 2px;
 }
 

From 416b9e430bae416f3b7d9f37879a2a3a00e8f7f8 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Sun, 30 Jul 2023 20:49:12 -0400
Subject: [PATCH 2/2] docs

---
 package/README.md | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/package/README.md b/package/README.md
index 92577e0..1653b3c 100644
--- a/package/README.md
+++ b/package/README.md
@@ -62,7 +62,16 @@ When a visually-hidden element is focused or an element inside it is focused, th
 
 ### Focus outlines
 
-By default, focus styles can be very inconsistent (and even inaccessible) across browsers. This reset normalizes them to a 2px solid outline that has the [`Highlight`](https://www.w3.org/TR/css-color-4/#system-color-values) color. You can modify this using the `--focus-color` custom property (you might want it to match your accent color).
+By default, focus styles can be very inconsistent (and even inaccessible) across browsers. This reset normalizes them to a 3px solid outline that has the [`Highlight`](https://www.w3.org/TR/css-color-4/#system-color-values) color. The is a system color that adopts with the `color-scheme`. Depending on the background within a particular section, you might want to set the `color-scheme` property to maintain enough color contrast.
+
+To override the focus styles, you can specify your own `outline` (or just `outline-color`).
+```
+@layer globals {
+  :focus-visible {
+    outline-color: var(--my-brand);
+  }
+}
+```
 
 ## Acknowledgements