AnalogStudiosRI / www.tuesdaystunes.tv

Frontend for the Tuesday's Tunes website.
http://tuesdaystunes.tv
3 stars 5 forks source link

cast and crew component fonts not matching in Storybook #91

Open thescientist13 opened 1 year ago

thescientist13 commented 1 year ago

Not sure if it's just me, but it seems the fonts for the Cast and Crew section in Storybook Image

Doesn't seem to match what I see in the application Image


Not sure if there are other cases like this? Maybe we're not importing something correctly? 🤔

aholtzman commented 1 year ago

@thescientist13 This does not seem to be an issue with the storybook configuration or set up. My guess is whatever part of the cascade that sets the font style on the full sight is not part of the stew cooking the singular element.

Story Decorators do not seem to work here.

Solutions available:

  1. Explicitly setting the style with style="font-family:var(--font-primary);" on each element in cast-and-crew.js
  2. creating and importing a css file into cast-and-crew.stories.js with the following
    h3, h4 {
    font-family: var(--font-primary);
    }
thescientist13 commented 1 year ago

Interesting, and thanks for taking a look!

I guess what is interesting is that each story file does an @import for the theme.css which includes all the Tailwind styles and since the styles work in other isolated components, it was curious as to why it wouldn't apply here? But as you say, nothing is specifically setting those styles either so I guess it makes sense... 🤔

I guess we can go with option number 1 for now just to keep these particular heading styles "scoped" to the component, unless it makes sense to put it somewhere in an actual CSS file for the entire site?