Increase font size by themeing

[ben-hamel]

Is your feature request related to a problem? Please describe.

No response

Describe the solution you'd like

Would like to be able to increase font size of Storybook using something like fontSize: "18px". the font is really small in storybook ui (sidebar, docs, args tables) and would be nice to increase readability in a easy manner.

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

no

Additional context

No response

[noranda]

⬆️ I have been fighting with Storybook docs forever trying to increase the base font size! The default base font size is 16px for all modern browsers, but Storybook uses 14px. It's too small for docs. Storybook theming doesn't seem to provide a way to overwrite this.

The only workaround I've come up with is to add this to my preview-head.html. It's ugly, but it works! Would love to get proper support for this.

<style>
  :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)),
  :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
    font-size: max(1em, 16px) !important;
  }
</style>

[spikebrehm]

We tried this, but the !important was overriding our component styles, which we can't have.

Storybook folks, it seems like the easiest solution would be to add a fontSize theme property alongside fontBase.

[greypants]

I'm doing this:

.sbdocs-content:not(.sb-unstyled) > p {
  font-size: 16px;
}

I'm sure I'll need more once docs get beyond just p tags and headers.

Also, instead of preview-head.html, import css in the In my preview.tsx file:

// preview.tsx
import "./preview.css";