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.