Storybook: Knobs text shares the same colour as the sidebar text colour

Created on 6 Mar 2019  路  11Comments  路  Source: storybookjs/storybook

Describe the bug
When theming the site in v5.0.0, the knobs description text shares the same text colour as the sidebar so when attempting to have a dark coloured sidebar with white text but a white value for appContentBg the text is impossible to read.

To Reproduce
Use the following theme:

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

export default create({
  // Is this a 'light' or 'dark' theme?
  base: 'light',

  // Color palette
  colorPrimary: '#2e5685', // primary color
  colorSecondary: '#3b78bd', // secondary color

  // UI
  appBg: '#2e5685',
  appContentBg: 'white',
  appBorderColor: 'rgba(0,0,0,.1)',
  appBorderRadius: 0,

  // Fonts
  fontBase: 'Roboto, Arial, sans-serif',
  fontCode: 'Courier, monospace',

  // Text colors
  textColor: '#FFFFFF',
  textInverseColor: '#333333',

  // Toolbar default and active colors
  barTextColor: 'white',
  barSelectedColor: 'white',
  barBg: '#2e5685',

  // Form colors
  inputBg: 'white',
  inputBorder: 'rgba(0,0,0,.1)',
  inputTextColor: '#333333',
  inputBorderRadius: 4,
});

Changing between base of light or dark doesn't make any difference either.

Expected behavior
I would expect to be able to theme the text of the knobs separately to the rest of the theme.

Screenshots
image

Code snippets
See "To reproduce".

System:

  • OS: Ubuntu 16.04
  • Device: Laptop
  • Browser: Chrome
  • Framework: Angular
  • Addons: Knobs
  • Version: 5.0.0

Additional context
Add any other context about the problem here.

knobs notes bug inactive theming

Most helpful comment

The official theming api doesn't cover _every_ possible variation intentionally. Our first priority is to have a tight, maintainable API so we can ship fast and lower the risk area for unintentionally breaking themes in future releases.

That said, we're working on an escape hatch PR that attaches static classnames to DOM elements so that you can override the styling. This should offer the best of both worlds, easy customization for users, and low maintenance for UI maintainers. YMMV 馃槉

All 11 comments

Same issue with the "Note" addon.
Screenshot 2019-03-13 at 16 38 59

Edit:
Not sure if I should create a separate bug but felt like this is more of a core issue not specific to the addon: knobs ?

Also running into this issue... The theming options are very limited and don't seem to cover everything.

The official theming api doesn't cover _every_ possible variation intentionally. Our first priority is to have a tight, maintainable API so we can ship fast and lower the risk area for unintentionally breaking themes in future releases.

That said, we're working on an escape hatch PR that attaches static classnames to DOM elements so that you can override the styling. This should offer the best of both worlds, easy customization for users, and low maintenance for UI maintainers. YMMV 馃槉

Would anyone be able to help us fix this one?

I was forced to use a gray-ish color in the dark theme to make everything visible... we have to wait until they extend the api for theming.

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!

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

Still seems to be not configurable? This also applies to the new docs tab.

We definitely would like to see more granular control over the major elements in the storybook UI. Per the original post we want to make the left nav dark and style independently of knobs.

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!

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

Was this page helpful?
0 / 5 - 0 ratings