From c6c1f7b4abe6e579345df94b6b836d44c5da2e6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Thu, 8 Dec 2022 18:14:39 +0100
Subject: [PATCH] Theming: add `barHoverColor`

---
 code/lib/theming/src/convert.ts                  | 2 ++
 code/lib/theming/src/themes/dark.ts              | 1 +
 code/lib/theming/src/themes/light.ts             | 1 +
 code/lib/theming/src/types.ts                    | 2 ++
 code/ui/components/src/components/bar/button.tsx | 4 ++--
 5 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/code/lib/theming/src/convert.ts b/code/lib/theming/src/convert.ts
index b4054f03c5a0..05ecaaf1f322 100644
--- a/code/lib/theming/src/convert.ts
+++ b/code/lib/theming/src/convert.ts
@@ -88,6 +88,7 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]):
     textColor,
     textInverseColor,
     barTextColor,
+    barHoverColor,
     barSelectedColor,
     barBg,
     buttonBg,
@@ -157,6 +158,7 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]):
 
     // Toolbar default/active colors
     barTextColor,
+    barHoverColor: barHoverColor || colorSecondary,
     barSelectedColor: barSelectedColor || colorSecondary,
     barBg,
 
diff --git a/code/lib/theming/src/themes/dark.ts b/code/lib/theming/src/themes/dark.ts
index ec9fa9f94f34..49fea0807c25 100644
--- a/code/lib/theming/src/themes/dark.ts
+++ b/code/lib/theming/src/themes/dark.ts
@@ -25,6 +25,7 @@ const theme: ThemeVars = {
 
   // Toolbar default and active colors
   barTextColor: '#798186',
+  barHoverColor: color.secondary,
   barSelectedColor: color.secondary,
   barBg: '#292C2E',
 
diff --git a/code/lib/theming/src/themes/light.ts b/code/lib/theming/src/themes/light.ts
index 9ca253bca7ce..88508b62b8c4 100644
--- a/code/lib/theming/src/themes/light.ts
+++ b/code/lib/theming/src/themes/light.ts
@@ -25,6 +25,7 @@ const theme: ThemeVars = {
 
   // Toolbar default and active colors
   barTextColor: color.mediumdark,
+  barHoverColor: color.secondary,
   barSelectedColor: color.secondary,
   barBg: color.lightest,
 
diff --git a/code/lib/theming/src/types.ts b/code/lib/theming/src/types.ts
index c8f2f9a9fa54..b6f28f8c955f 100644
--- a/code/lib/theming/src/types.ts
+++ b/code/lib/theming/src/types.ts
@@ -31,6 +31,7 @@ export interface ThemeVarsColors {
 
   // Toolbar default and active colors
   barTextColor: string;
+  barHoverColor: string;
   barSelectedColor: string;
   barBg: string;
 
@@ -87,6 +88,7 @@ export interface StorybookTheme {
 
   // Toolbar default/active colors
   barTextColor: string;
+  barHoverColor: string;
   barSelectedColor: string;
   barBg: string;
 
diff --git a/code/ui/components/src/components/bar/button.tsx b/code/ui/components/src/components/bar/button.tsx
index a65e6fa7bc4e..7cee1e72fad7 100644
--- a/code/ui/components/src/components/bar/button.tsx
+++ b/code/ui/components/src/components/bar/button.tsx
@@ -116,7 +116,7 @@ export const IconButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid
     active
       ? {
           backgroundColor: theme.background.hoverable,
-          color: theme.color.secondary,
+          color: theme.barSelectedColor,
         }
       : {},
   ({ disabled, theme }) =>
@@ -128,7 +128,7 @@ export const IconButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid
       : {
           '&:hover, &:focus-visible': {
             background: transparentize(0.88, theme.color.secondary),
-            color: theme.color.secondary,
+            color: theme.barHoverColor,
           },
           '&:focus-visible': {
             outline: auto, // Ensures links have the same focus style