Core: Fix addon scrollbars and align scrollbar colors with toolbars

code/addons/a11y/src/components/Tabs.tsx

@@ -58,6 +58,8 @@ const Subnav = styled.div(({ theme }) => ({
   overflow: 'auto',
   paddingRight: 10,
   gap: 6,
+  scrollbarColor: `${theme.barTextColor} ${theme.background.app}`,
+  scrollbarWidth: 'thin',
 }));
 
 const TabsWrapper = styled.div({});

code/core/src/component-testing/components/Subnav.tsx

@@ -19,7 +19,7 @@ import {
   SyncIcon,
 } from '@storybook/icons';
 
-import { styled } from 'storybook/theming';
+import { styled, useTheme } from 'storybook/theming';
 
 import { type Call, CallStates, type ControlStates } from '../../instrumenter/types';
 import type { Controls } from './InteractionsPanel';
@@ -33,13 +33,13 @@ const SubnavWrapper = styled.div(({ theme }) => ({
   zIndex: 1,
 }));
 
-const StyledSubnav = styled.nav(({ theme }) => ({
+const StyledSubnav = styled.nav({
   height: 40,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
   paddingLeft: 15,
-}));
+});
 
 interface SubnavProps {
   controls: Controls;
@@ -121,10 +121,11 @@ export const Subnav: React.FC<SubnavProps> = ({
   onScrollToEnd,
 }) => {
   const buttonText = status === CallStates.ERROR ? 'Scroll to error' : 'Scroll to end';
+  const theme = useTheme();
 
   return (
     <SubnavWrapper>
-      <Bar>
+      <Bar backgroundColor={theme.background.app}>
         <StyledSubnav aria-label="Component tests toolbar">
           <Group>
             <StatusBadge status={status} />

code/core/src/components/components/bar/bar.tsx

@@ -52,14 +52,17 @@ const UnstyledBar = ({ children, className, scrollable }: UnstyledBarProps) =>
   );
 
 export interface BarProps extends UnstyledBarProps {
+  backgroundColor?: string;
   border?: boolean;
 }
 export const Bar = styled(UnstyledBar)<BarProps>(
-  ({ theme, scrollable = true }) => ({
+  ({ backgroundColor, theme, scrollable = true }) => ({
     color: theme.barTextColor,
     width: '100%',
-    height: 40,
+    minHeight: 40,
     flexShrink: 0,
+    scrollbarColor: `${theme.barTextColor} ${backgroundColor || theme.barBg}`,
+    scrollbarWidth: 'thin',
     overflow: scrollable ? 'auto' : 'hidden',
     overflowY: 'hidden',
   }),
@@ -94,7 +97,7 @@ export interface FlexBarProps extends ComponentProps<typeof Bar> {
 export const FlexBar = ({ children, backgroundColor, className, ...rest }: FlexBarProps) => {
   const [left, right] = Children.toArray(children);
   return (
-    <Bar className={`sb-bar ${className}`} {...rest}>
+    <Bar backgroundColor={backgroundColor} className={`sb-bar ${className}`} {...rest}>
       <BarInner bgColor={backgroundColor}>
         <Side scrollable={rest.scrollable} left>
           {left}

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

@@ -232,6 +232,8 @@ const Toolbar = styled.div<{ shown: boolean }>(({ theme, shown }) => ({
   marginTop: shown ? 0 : -40,
   boxShadow: `${theme.appBorderColor}  0 -1px 0 0 inset`,
   background: theme.barBg,
+  scrollbarColor: `${theme.barTextColor} ${theme.barBg}`,
+  scrollbarWidth: 'thin',
   zIndex: 4,
 }));