Skip to main content

Token Editor

Click any group in the side nav under the Tokens tab and the center panel opens a table showing every token in that group. This is where you spend most of your time in Bezel.

The token table

Each row is one token. Here's what the columns mean:

ColumnWhat it is
Token NameThe full dot-separated name, like base.border.radius.md
Export NameThe name used when tokens are exported or published. You can customize it separately from the token name.
ScaleA short step label like sm, md, lg, or 2xl
ValueThe raw value
Unitpx or rem, if applicable
TypeColor, Dimension, Font Family, etc.
DescriptionAn optional note about what the token is for

Editing

Click any cell to edit it. Value fields let you type directly. Type and unit fields open a dropdown. Changes save as you go.

Adding tokens

Hit the + button at the top right of the table to add a new row. Fill it in from left to right.

Themes and overrides

When you switch to a non-root theme using the Theme selector in the Context section, the table gets two extra columns: Default Value (read-only, for reference) and Value (your override for the active theme). A row without an override inherits from $root.

See Component Themes for how the whole theme system works.