Skip to main content

Style sheet

A Style Sheet is a document that store styles values. Inside this file, you can store css styles, use design tokens as style variable or import an existing style sheet as a reusable block.

In the example above, to style our primary button, we're using the default button reusable block and we're adding a blue background-color and a white color (both stored as Design Tokens).

How to create a Style Sheet?

To create a Style Sheet, click on the top right Add button and select Style Sheet.



How to edit Style Sheet?

Editing a style sheet is pretty similar than how to edit styles using the Chrome devtool. The difference here is that you can use your Design tokens and add Reusable blocks (i.e. previously saved Style Sheets).




How to add a selector?

You can add selector to a Style Sheet. To do so, you need to click on the + selector button and add your selector.

For more information about selector, take a look at this https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors.




How to edit a selector?


How to remove a selector?


How to use a Design Token?


How to use a Reusable block?


How to remove a Reusable block?


How to reorder elements?


How to get info about the style element?