Changing the size of an existing heading style

Hi Steve, you can use tokens on whatever you like. It's better to use them than styling all h6 elements.

The headings are for semantics which will affect accessibility and SEO. You can make them look like whatever you want with no ill-effect.

Side note: In over 20 years, I haven't personally needed an h6.

Thanks @Jeremy - I'm not sure why I used H6 as an example, it was just a random element I clicked on. lol! 🙂

@steve do the tokens make sense to you?

That's precisely what I'm trying to understand / learn now.

I've watched videos on the WebStudio channel and thought I'd experiment by pasting in some of the free samples from Flowbase.co (https://www.flowbase.co/components?platform=webflow&collection=flowui)

When I select a heading in one of the pasted-in components, WebStudio shows [H6] -> [H6 Heading] inside Style Sources. These are classes , not yet tokens ?

So I then thought I would use "Convert to token" in Style Sources which got me this: [H6] -> [H6 Heading] ->[O My Token]. The O being a circle (to indicate a token?) and the name of my choice.

ok so working from left to right we now have [H6] -> [H6 Heading] and my newly created token which I assumed inherited & now contains all the values of H6 Heading at the time I created the token.

That being the case I can safely remove the H6 Heading class as all its values must be in the new My Token token. But no, removing H6 Heading removes the styling that it had previously supplied and My Token doesn't seem to stand in for it.

So clearly I haven't understood at all. lol! 🙂

Is there a place I can go to in WebStudio, to view the classes and tokens?

Things like Base Is Base the same as Global Root?

What is the significance of the red items in the CSS shown when I toggle Style -> Advanced. I thought it might mean they inherited their value from Base, but Base is shown in a pinky-purlple, not red. (please see screenshot attached)

I'm getting a bit confused and struggling to visualise how things relate to each other.

I think I get what you're struggling with from that video:

1. The "local token" (blue one on the right side) has no properties attached to it (there would be a dot in the middle of the circle if it did). So, converting it to a token converts nothing.
2. You might want to rename the "H6 Heading" token to something like "Card Title". You could then re-use it across multiple components that you create and it would still have meaning. (see naming help here https://docs.webstudio.is/university/craft#tokens)
3. The "red" attribute means that another token has that value and is overriding. See this link - https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder#label-colors

Notes:

• You can move tokens in relation to each other (not the blue "local token" though. Test this out to understand how it works by setting 2 tokens with different values on the same property (eg, color: red, color: blue). Change their order.
• You probably don't want to name things like "h6" or "red", use generic names so they can be reused logically. (eg: "Small heading" and "primary color")

I don't believe there is currently a way to see all the tokens you've created, but I think it's in their roadmap?

Found it. https://github.com/webstudio-is/webstudio/issues/3901

Hi @Jeremy

The "local token" (blue one on the right side) has no properties attached to it (there would be a dot in the middle of the circle if it did). So, converting it to a token converts nothing.

Ah right. I had assumed that, working from left to right in Style Sources; H6 Heading would have its styles in place, then if I created my token [to the right of H6 Heading] it would by virtue of inheritance adopt the styles from H6 Heading. Then I could remove H6 Heading and use my token instead as it would have effectively copied over the styles from H6 Heading upon creation.

But from what you say, creating a token starts with a blank sheet of style information that I need to build up?

On the subject of Tokens Manager (issue #3901 ^^) it would be fantastic to see something along the lines of Core Framework inside WebStudio (https://coreframework.com/) It's great at surfacing and managing style information. There is in fact a video on youtube showing Core Framework used with WebStudio, but tbh it's mostly "this is how cool Core Framework is - and look, you can paste its styles into WebStudio"

For people like me coming to design tokens, and to a certain extent CSS styling, the fact that once created tokens and classes "disappear from view" after creation can be a little daunting. Having an area of WebStudio that acted as a design system or style book for the styles & tokens would be really useful for anyone who works visually.

Really appreciate all your help, thanks. I'm getting there. 😉

I'm just a guy who likes Webstudio, I'm not part of their team. I have zero control over what they build. 🙂 That Core Framework sure looks cool though - I'll try it out for my next project.

Also happened to notice a video of Webflow last night, they seem to have a really nice Style Guide feature: https://webflow.com/made-in-webflow/website/Webflow-Style-Guide-Starter