Merge pull request #26527 from storybookjs/valentin/fix-theming-for-b…

…ar-areas

UI: Fix theming of elements inside bars
(cherry picked from commit 3e0de54)

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',

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',
 }));
 

code/ui/components/src/components/Button/Button.tsx

@@ -170,6 +170,36 @@ const StyledButton = styled('button', {
     if (variant === 'ghost' && active) return theme.background.hoverable;
     return 'transparent';
   })(),
+  ...(variant === 'ghost'
+    ? {
+        // This is a hack to apply bar styles to the button as soon as it is part of a bar
+        // It is a temporary solution until we have implemented Theming 2.0.
+        '.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;

code/ui/components/src/components/bar/bar.tsx

@@ -93,10 +93,10 @@ export interface FlexBarProps extends ComponentProps<typeof Bar> {
   backgroundColor?: string;
 }
 
-export const FlexBar = ({ children, backgroundColor, ...rest }: FlexBarProps) => {
+export const FlexBar = ({ children, backgroundColor, className, ...rest }: FlexBarProps) => {
   const [left, right] = Children.toArray(children);
   return (
-    <Bar {...rest}>
+    <Bar className={`sb-bar ${className}`} {...rest}>
       <BarInner bgColor={backgroundColor}>
         <Side scrollable={rest.scrollable} left>
           {left}

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';

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};
       }
     }
   `;

code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx

@@ -45,7 +45,7 @@ export const MobileNavigation: FC<MobileNavigationProps> = ({ menu, panel, showP
       {isMobilePanelOpen ? (
         <MobileAddonsDrawer>{panel}</MobileAddonsDrawer>
       ) : (
-        <Nav>
+        <Nav className="sb-bar">
           <Button onClick={() => setMobileMenuOpen(!isMobileMenuOpen)} title="Open navigation menu">
             <MenuIcon />
             <Text>{fullStoryName}</Text>
@@ -84,7 +84,7 @@ const Button = styled.button(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: 10,
-  color: theme.color.mediumdark,
+  color: theme.barTextColor,
   fontSize: `${theme.typography.size.s2 - 1}px`,
   padding: '0 7px',
   fontWeight: theme.typography.weight.bold,

code/ui/manager/src/components/preview/Toolbar.tsx

@@ -135,7 +135,7 @@ export const ToolbarComp = React.memo<ToolData>(function ToolbarComp({
   api,
 }) {
   return tabs || tools || toolsExtra ? (
-    <Toolbar key="toolbar" shown={isShown} data-test-id="sb-preview-toolbar">
+    <Toolbar className="sb-bar" key="toolbar" shown={isShown} data-test-id="sb-preview-toolbar">
       <ToolbarInner>
         <ToolbarLeft>
           {tabs.length > 1 ? (

code/ui/manager/src/components/sidebar/Sidebar.tsx

@@ -183,7 +183,7 @@ export const Sidebar = React.memo(function Sidebar({
         </Top>
       </ScrollArea>
       {isLoading ? null : (
-        <Bottom>
+        <Bottom className="sb-bar">
           {bottom.map(({ id, render: Render }) => (
             <Render key={id} />
           ))}

code/ui/manager/src/settings/index.tsx

@@ -80,7 +80,7 @@ const Pages: FC<{
 
   return (
     <Fragment>
-      <Header>
+      <Header className="sb-bar">
         <TabBar role="tablist">
           <TabBarButton id="about" title="About" changeTab={changeTab} />
           {enableWhatsNew && (