Selected sidebar item doesn't respect theme colors

[vpicone]

Describe the bug
Setting theme.color.lightest and theme.color.inverseText doesn't impact the color of selected items in the sidebar (they remain #FFFFFF regardless)

From the sidebar component, it looks like theme.color.lightest should effectively color the component but it it looks like it is overridden by div#accordion--skeleton for some reason.

https://github.com/storybooks/storybook/blob/a28c59592ee5d43152b684958ee83b8fc55adbcd/lib/ui/src/components/sidebar/SidebarItem.js#L73

To Reproduce
Steps to reproduce the behavior:

1. Update all of the values for colors in a theme to black.
2. The selected text remains #FFFFFF no matter what

Expected behavior
The selected item should have text according to the theme value that is used in the sidebar item component when selected (theme.color.lightest)

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets

addParameters({
  options: {
    theme: {
      ...theme,
      color: { ...theme.color, lightest: 'red', inverseText: 'red' },
    },
  },
});

System:

• Browser: Firefox
• Framework: react
• Version: [e.g. 5.0.5]

Additional context
Trying to use a lighter secondary color for the selected items but finding it impossible to change the color of the selected items.

[TimoGlastra]

I looked into this issue a bit. As you see in the ThemeVars interface below, theme.color.lightest is not a property you can set.

https://github.com/storybooks/storybook/blob/ed9bcff0d88da47c4f014ea78eb8fcb6458e5821/lib/theming/src/base.ts#L97-L131

The color.lightest is always #FFFFFF because the base theme definition is used for this attribute. I think there are two possible solutions here:

1. Infer the color.lightest attribute from an already existing ThemeVars attribute.
2. Create a new attribute in ThemeVars to set the the color.lightest (and maybe other) attributes.

I don't think option 1 is the best solution as it will change the look of the site quite a bit by inferring color.lightest from an already existing ThemeVars attribute.

Is there a particular reason why the underlying theme properties aren't customisable? Or am i totally wrong here by saying that it is not customisable? I get that it is convenient for creating themes that have a consistent style, but the option would be nice.

Since this is my first time fixing an issue for storybook i would like some input before moving forward.

[vpicone]

It seems like it should use the inverseText theme property or a new property all together.

[ndelangen]

When #6806 drops we'll support full custom theme options, including this property.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!