From 5cea9097e73df6eff76533a7390b56990ec8d0e6 Mon Sep 17 00:00:00 2001
From: David Longworth <djl@sent.com>
Date: Tue, 1 Oct 2024 14:03:29 +0100
Subject: [PATCH] feat: Invert button group icons for better contrast (#352)

* npm audit fix

* add more prominant active state for button groups

* try the focus on the outside

* 0.0.10

* 0.0.11

* Revert "0.0.11"

This reverts commit 8c26b03e56893607bebcb5bb687797ab50d3d144.

# Conflicts:
#	package-lock.json
#	package.json

* revert version change

* revert version change

* lint

* revert

* scope css
---
 src/styles/custom-components.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/styles/custom-components.css b/src/styles/custom-components.css
index 33ad7a98..37147f02 100644
--- a/src/styles/custom-components.css
+++ b/src/styles/custom-components.css
@@ -59,6 +59,17 @@
     color: var(--black-600) !important;
 }
 
+.s-btn-group .s-btn--radio:checked + .s-editor-btn {
+    background: var(--black-500) !important;
+    color: var(--white) !important;
+}
+
+.s-btn-group .s-btn--radio:focus-visible + .s-editor-btn {
+    box-shadow:
+        0 0 0 var(--su-static2) var(--focus-neutral),
+        0 0 0 var(--su-static4) var(--focus-theme);
+}
+
 /*
     NOTE: These focus-visible styles exist to override the Stacks styles for editor buttons.
     Since the editor buttons require the focus rings to be applied outside of the button,