From db4e08ae8b2aaeb840a8a9f06e68878357e40ee9 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 15 Mar 2024 21:16:25 +0100 Subject: [PATCH 1/2] Fix theming of elements inside bars In Storybook 8.0, we have broken theming for elements inside bars. The theming variables "barTextColor", "barHoverColor" and "barSelectedColor" were mostly ignored and mainly other variable colors were applied. This commit mainly ensures, that the default dark and light theming doesn't change. If "barTextColor", "barHoverColor" or "barSelectedColor" are set by the user, they get normally applied to the icon and text elements inside the bar areas, like the topbar, bottom-bar or the tab area in the addons panel. --- code/lib/theming/src/themes/dark.ts | 2 +- .../src/components/ArgsTable/ArgsTable.tsx | 1 - .../src/components/Button/Button.tsx | 28 +++++++++++++++++++ code/ui/components/src/components/bar/bar.tsx | 4 +-- .../components/src/components/bar/button.tsx | 5 +++- .../src/components/tabs/tabs.hooks.tsx | 9 ++++-- .../mobile/navigation/MobileNavigation.tsx | 4 +-- .../src/components/preview/Toolbar.tsx | 2 +- .../src/components/sidebar/Sidebar.tsx | 2 +- code/ui/manager/src/settings/index.tsx | 2 +- 10 files changed, 46 insertions(+), 13 deletions(-) diff --git a/code/lib/theming/src/themes/dark.ts b/code/lib/theming/src/themes/dark.ts index 4cb8f19f29bd..173e735ef366 100644 --- a/code/lib/theming/src/themes/dark.ts +++ b/code/lib/theming/src/themes/dark.ts @@ -25,7 +25,7 @@ const theme: ThemeVars = { textMutedColor: '#798186', // Toolbar default and active colors - barTextColor: '#798186', + barTextColor: color.mediumdark, barHoverColor: color.secondary, barSelectedColor: color.secondary, barBg: '#292C2E', diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx index 70e4e1f0edd7..8ad18ff4257c 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -166,7 +166,6 @@ export const TableWrapper = styled.table<{ })); const StyledIconButton = styled(IconButton as any)(({ theme }) => ({ - color: theme.barTextColor, margin: '-4px -12px -4px 0', })); diff --git a/code/ui/components/src/components/Button/Button.tsx b/code/ui/components/src/components/Button/Button.tsx index 37b64a786493..2745a3e4da6d 100644 --- a/code/ui/components/src/components/Button/Button.tsx +++ b/code/ui/components/src/components/Button/Button.tsx @@ -170,6 +170,34 @@ const StyledButton = styled('button', { if (variant === 'ghost' && active) return theme.background.hoverable; return 'transparent'; })(), + ...(variant === 'ghost' + ? { + '.sb-bar &': { + background: (() => { + if (active) return transparentize(0.9, theme.barTextColor); + return 'transparent'; + })(), + color: (() => { + if (active) return theme.barSelectedColor; + return theme.barTextColor; + })(), + '&:hover': { + color: theme.barHoverColor, + background: transparentize(0.86, theme.barHoverColor), + }, + + '&:active': { + color: theme.barSelectedColor, + background: transparentize(0.9, theme.barSelectedColor), + }, + + '&:focus': { + boxShadow: `${rgba(theme.barHoverColor, 1)} 0 0 0 1px inset`, + outline: 'none', + }, + }, + } + : {}), color: (() => { if (variant === 'solid') return theme.color.lightest; if (variant === 'outline') return theme.input.color; diff --git a/code/ui/components/src/components/bar/bar.tsx b/code/ui/components/src/components/bar/bar.tsx index 27c595c65a8a..9320e2a97045 100644 --- a/code/ui/components/src/components/bar/bar.tsx +++ b/code/ui/components/src/components/bar/bar.tsx @@ -93,10 +93,10 @@ export interface FlexBarProps extends ComponentProps { backgroundColor?: string; } -export const FlexBar = ({ children, backgroundColor, ...rest }: FlexBarProps) => { +export const FlexBar = ({ children, backgroundColor, className, ...rest }: FlexBarProps) => { const [left, right] = Children.toArray(children); return ( - + {left} diff --git a/code/ui/components/src/components/bar/button.tsx b/code/ui/components/src/components/bar/button.tsx index 68ce83036b59..db838d581336 100644 --- a/code/ui/components/src/components/bar/button.tsx +++ b/code/ui/components/src/components/bar/button.tsx @@ -108,7 +108,7 @@ export const TabButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid } '&:focus': { outline: '0 none', - borderBottomColor: theme.color.secondary, + borderBottomColor: theme.barSelectedColor, }, }), ({ active, textColor, theme }) => @@ -120,6 +120,9 @@ export const TabButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid } : { color: textColor || theme.barTextColor, borderBottomColor: 'transparent', + '&:hover': { + color: theme.barHoverColor, + }, } ); TabButton.displayName = 'TabButton'; diff --git a/code/ui/components/src/components/tabs/tabs.hooks.tsx b/code/ui/components/src/components/tabs/tabs.hooks.tsx index f5fbd7272fe6..d932b974b81e 100644 --- a/code/ui/components/src/components/tabs/tabs.hooks.tsx +++ b/code/ui/components/src/components/tabs/tabs.hooks.tsx @@ -22,11 +22,14 @@ const CollapseIcon = styled.span<{ isActive: boolean }>(({ theme, isActive }) => const AddonButton = styled(TabButton)<{ preActive: boolean }>(({ active, theme, preActive }) => { return ` - color: ${preActive || active ? theme.color.secondary : theme.color.mediumdark}; + color: ${preActive || active ? theme.barSelectedColor : theme.barTextColor}; + .addon-collapsible-icon { + color: ${preActive || active ? theme.barSelectedColor : theme.barTextColor}; + } &:hover { - color: ${theme.color.secondary}; + color: ${theme.barHoverColor}; .addon-collapsible-icon { - color: ${theme.color.secondary}; + color: ${theme.barHoverColor}; } } `; diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx index 47b7587019f8..9ecee759fb06 100644 --- a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx +++ b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx @@ -45,7 +45,7 @@ export const MobileNavigation: FC = ({ menu, panel, showP {isMobilePanelOpen ? ( {panel} ) : ( -