Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)
[Please describe this bug in as much detail as possible so we can replicate & debug this bug]
I’m using a variable version of the font Inter. In the Theme Styles under Typography > Headings on both H1 and H2 Ih set font-variation-settings: “wght” 900
Sometimes on certain headings I want to change the font weight. I then realized that the control for “font-variation-settings” will only appear if I specificaly choose the font family on that element. It doesn’t not appear when the font family is inherited.
So to avoid re-choosing the font family on every individual element, I went back to the Theme Styles, deleted the font-variation-settings: “wght” 900 and switched to just font-weight: 900. However, the font-variation-settings persisted in the CSS file even after turning off caching and regenerating the CSS stylesheets in the Bricks settings. So now even if I set an H1 heading to font-weight: 100 on the ID, it still shows up as with a weight of 900 with both font-variation-settings: “wght” 900; and font-weight: 100 showing up in the stylesheet.
I did figure out why this happened, I just feel like it shouldn’t happen this way and is likely the souce of my and my other people’s frustration with CSS in Bricks. When I went back to delete the font-variation-settings, I did not specifically delete the text out of the box, I hit the X next to the typography setting for both H1 and H2 in the Theme Style settings, thinking this reset the styles completely.
This time I set the Inter font-family on the All Headings setting, and then set the font weights individually on H1, H2, H3, etc., but because I didn’t specify a font-family on each of those settings, I could not see or access the font-variation-settings. Only when I reselected a font-family in the Typography settings for each individual heading did the font-variation-settings box re-appear still containing the “wght” 900 that I thought had been deleted.
I feel that if you’re using display conditions to hide several controls from the builder when we delete a certain setting, that the styles contained in those hidden controls should be deleted as well. It’s quite challenging to track down these phantom styles after the fact. It can be incredibly frustrating when settings we add in the builder UI are being overridden by CSS that we can’t even see and have no idea where it’s coming from.