Upgrading from storybook 6.0.x to 6.1.10 breaks custom theming colors

[slavoroi]

Describe the bug
Setting barBg: #7e52a2 custom theme changes Shortcuts/Search bar background-color and we can't customize it.

To Reproduce

1. Update to storybook 6.1.10
2. Create a custom theme

import {create} from '@storybook/theming/create';

const colorPrimary = '#7e52a2';
const colorSecondary = '#f5a623';


export const Light = create({
  barBg: colorPrimary,
...

3. The UI is ugly and unintended components changes their background colors as well.

Expected behavior
Setting top bar won't have any effect on the search bar/ shortcuts buttons OR we can customize search search bar/ shortcuts colors as well.

Screenshots

[nerisina]

I am having the same issue.

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.26 containing PR #13895 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.18 containing PR #13895 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

[slavoroi]

thanks! amazing, ill check it.

[nerisina]

The search input on the left nav is working correctly but I think still some bugs in the custom theme configuration.

The switch buttons under control it's taking the toolbar background.

The arrows in the left nav on hover, focus, and the active effect are taking the parameters from barSelectedColor