From 96a4d06fdf920d6b10d4885465bbeeb295f44d0b Mon Sep 17 00:00:00 2001
From: Alden Quimby <aldenquimby@gmail.com>
Date: Thu, 30 Jan 2025 12:02:12 -0500
Subject: [PATCH] fix: improve button hover and focus colors

---
 packages/roomkit-react/src/Button/Button.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/roomkit-react/src/Button/Button.tsx b/packages/roomkit-react/src/Button/Button.tsx
index 3d83345c35..4810d34a4f 100644
--- a/packages/roomkit-react/src/Button/Button.tsx
+++ b/packages/roomkit-react/src/Button/Button.tsx
@@ -18,6 +18,7 @@ const getOutlinedVariants = (
   disabled: string,
   text: string,
   textDisabled: string,
+  textHover?: string,
 ) => {
   return {
     bg: 'transparent',
@@ -30,6 +31,7 @@ const getOutlinedVariants = (
       cursor: 'not-allowed',
     },
     '&:not([disabled]):hover': {
+      c: textHover,
       border: `solid $space$px $colors${hover}`,
       bg: 'transparent',
     },
@@ -50,6 +52,7 @@ const getButtonVariants = (
   disabled: string,
   text: string,
   textDisabled: string,
+  textHover?: string,
 ) => {
   return {
     bg: base,
@@ -62,6 +65,7 @@ const getButtonVariants = (
       border: `1px solid ${disabled}`,
     },
     '&:not([disabled]):hover': {
+      c: textHover,
       bg: hover,
       border: `1px solid ${hover}`,
     },
@@ -70,7 +74,7 @@ const getButtonVariants = (
       border: `1px solid ${active}`,
     },
     '&:not([disabled]):focus-visible': {
-      boxShadow: `0 0 0 3px ${base}`,
+      boxShadow: `0 0 0 3px $colors${hover}`,
     },
   };
 };
@@ -121,6 +125,7 @@ const StyledButton = styled('button', {
         '$alert_error_brighter',
         '$on_surface_high',
         '$on_surface_low',
+        '$on_surface_high',
       ),
     },
     {
@@ -153,6 +158,7 @@ const StyledButton = styled('button', {
         '$alert_error_dim',
         '$alert_error_brighter',
         '$on_primary_low',
+        '$on_primary_high',
       ),
       primary: getButtonVariants(
         '$primary_default',