ConvertSite
Style

Style variables

Style variables (theme variables in the code) are reusable design values — colors, typography, spacing, borders, and shadows — that you define once and connect to component style properties. Change a variable and every component connected to it updates, so you can re-theme a site without restyling each element.

Open the Style panel

Open the editor's Style panel to create and manage variables. Use the Filter variables search field to find one by name. Variables are grouped into categories in this order: Color, Typography, Spacing, Border, Border Radius, and Shadow. In the Document editor only Color and Typography appear.

Create a variable

Each category has its own add action for the variable types it supports.

  • Color — Add color, or add a color spectrum that expands into shades 50 through 900 with a base color. Single colors support a color picker, HEX, RGB, HSL, and opacity.

  • Typography — Add font family, font size, or line height. Font family values can be entered as a formatted value or a CSS value.

  • Spacing — Add padding, margin, or gap. Gap can apply to both rows and columns, rows only, or columns only.

  • Border — Add a border with sides (all, top, right, bottom, left), color, width, and style.

  • Border Radius — Add a radius with top-left, top-right, bottom-right, and bottom-left corners.

  • Shadow — Add a shadow with a type (outside or inside), color, style, X, Y, blur, and spread, and add additional shadow elements.

Enter a name for each variable; a blank name fails with "Theme variable name is required." Built-in variable names cannot be edited, but custom variable names are. Duplicate a variable to copy its value; the new variable is named with the existing name plus "copy."

Connect a variable to a component style

Connect a variable to a compatible component style property from the property's label menu, using Connect variable and then Select variable. The picker filters variables to the exact compatible type, so a color property lists only color variables and a font-size property lists only font-size variables.

Compatible properties include border, border sides, border radius, box shadow, padding, margin, gap, font family, font size, and line height. Connected fields display the variable's human-readable name. When a connected variable is unavailable the field shows "Select a variable"; when no compatible variables exist, the picker shows "No themevars found."

From a connected field you can edit the brand variable or remove the style. Color fields use a broken-link icon to detach from a recognized variable while keeping the current concrete color.

Scope a variable to a site or the workspace

New variables are site-local by default. Turn on Available across workspace to use a variable across the workspace; a workspace-wide variable shows "Themevar is available across workspace."

Delete a variable

Delete a variable from its type-specific edit menu. Deleting detaches any component properties connected to it. Built-in and workspace-wide variables cannot be deleted.

Was this helpful?
Was this helpful?