Merge pull request #20169 from julien-deramond/next-jd-theming-add-ba…

…r-hover-color Theming: Add `barHoverColor`
storybookjs · Sep 11, 2023 · b67f9f4 · b67f9f4
2 parents 7a33f70 + b244926
commit b67f9f4
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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