Working with Styles
Styles let you manage text and color appearances from one place in a project. In the UI, you can find them in the Assets panel. Plugins can use these styles to do things like sync design systems or check accessibility.
Color Styles
To get or list Color Styles in a project, use the following code.
When creating a new Color Style, the light
attribute is the default color and used in light theme. The dark
attribute is an optional color used in the dark theme. Colors are stored in RGBA format, e.g rgba(242, 59, 57, 1)
.
See our lesson on Light & Dark Mode to set up a theme toggle within your project.
Existing Color Styles can be updated similarly like Nodes by using setAttributes
.
To remove a Color Style from a project, you'll need to have a reference to the style and call remove
on it.
You can set data on individual Color Styles. See our guide on the Plugin Data API on how to store data on nodes.
Text Styles
To get or list Text Styles in a project, use the following code.
A new Text Style can be added to the project using createTextStyle
.
Existing Text Styles can be updated similarly like Nodes by using setAttributes
.
To remove a Text Style from a project, you'll need to have a reference to the style and call remove
on it.
You can set data on individual Text Styles. See our Plugin Data API guide on how to store data on nodes.
Breakpoints
Text Styles can have variations that apply at different window widths. To add these variations, define overrides using breakpoints.
When defining breakpoints, the main Text Style's attributes will be considered as the largest breakpoint.
The following example defines text that is 16px between 320 and 1024, 18px between 1024 and 1280, and 24px at 1280 and beyond.
A maximum of four breakpoints can be added. An error will be thrown if this limit is exceeded.
Breakpoints will also be automatically ordered from largest to smallest, so the order in which they are defined does not matter. However, each breakpoint must have a unique minWidth
. If not, an error will be thrown.
When setting attributes, all attributes except breakpoints will be combined with the existing attributes of the text style. When setting the breakpoints
attribute, it will override any existing breakpoints the Text Style had.
To update a breakpoints without overriding them all, you can iterate over the existing breakpoints and merge them.
For example, you may want to scale the font size for all Text Styles and their breakpoints.
Fonts
By default, text styles will use a built-in font. Use Fonts to customize a Text Style's typeface. Set the font
attribute when either creating or updating a style.
Suitable fonts for bold, italic and bold italic variants will automatically be assigned. But these can be overridden for further typographic control.
All fonts must be part of the same family. For example, Noto Sans Bold can't be used with Inter Regular. An error will be thrown if the families are different.
Fonts can be retrieved from a Text Style like any other attribute.