Join the Webstudio community

Updated 2 months ago

Global root for defining global css variables

At a glance

The post discusses the "Global Root" feature, which is a place to define global CSS variables for a Design System. Community members provide feedback on the wording of the tooltip for this feature. The key points are:

1. "Global Root" is a better name than the previous "Root".

2. The "Global Root" is responsible for CSS variables across the entire website, not for injecting scripts.

3. When clicking on "Global Root", a style panel will appear to style the :root element for all pages.

4. Global data variables will be added to "Global Root" later this year, but for now, it only supports CSS variables.

5. There is no "settings" tab yet, and the functionality is limited to the style panel.

6. The community members agree that the "Global Root" name is comprehensive and covers both CSS variables and future data variables.

Chat need feedback on wording for the tooltip, what would you understand if you read this in a tooltip on a Global Root instance in the navigator?


Plain Text
Global Root is a great place to define all global CSS variables for your Design System because:

1. Global Root wraps everything on the page and is exactly the same for every page.
2. CSS variables are inheritable, so they are available throughout the entire tree.
Attachment
image.png
M
B
O
9 comments
"Global Root" instead of the previous "Root"?

I will only responsible for CSS for all the website?
If it just for CSS, I suspect some people will try to inject scripts there.

When we click on "Global Root", there will be a textarea on a popup or a textarea on the right side?
When you click on Global Root you see style panel to style html tag aka ":root" for all pages
Global data variables will go there too but later this year
So no "settings" tab yet
Won't be possible. When you click on it you see only the functionality that's available - style panel.
The question is really what would everyone understand from the tooltip
All right ! So Global Root is for :
  • css variables
  • data variables (later)
?

If so, the naming is fine for me and comprehensive!
Global data variables would be there as well later on ... for now only css variables
Add a reply
Sign up and join the conversation on Discord