Semantic tokens
They are level of abstraction over the tokenized values for the attributes or properties that try to provide meaning and context to the use of these raw values by using a more meaningful naming that targets a narrowed scoped or concept.
Every token can be themed with the default z-theme values or custom ones as it was explained previously.
The format of these tokens is: --z-<prefix>--<name>.
Also, there's a token named --z-theme that will provide the name of the theme applied in each context.
Base tokens
They are the ones defining the basics of the design system.
...
Radius
The prefix used is rd.
| Name | Token | Values (light) | Values (dark) |
|---|---|---|---|
| Small | ... | ||
--z-rd-s | |||
| Medium | ... | ||
--z-rd-m | |||
| Large | ... | ||
--z-rd-l | |||
Opacity
The prefix used is op.
| Name | Token | Values (light) | Values (dark) |
|---|---|---|---|
| Disabled | ... | ||
--z-op-disabled | |||
Interaction
The prefix used is fc.
| Name | Token | Values (light) | Values (dark) |
|---|---|---|---|
| Outline color | ... | ||
--z-fc-outline-color | |||
| Outline | ... | ||
--z-fc-outline | |||
| Outline offset | ... | ||
--z-fc-outline-offset | |||
Color tokens
Surface tokens
The prefix used is sf.
| Name | Token | Values (light) | Values (dark) |
|---|---|---|---|
| Brand | ... | ||
--z-sf-brand | |||
| Base | ... | ||
--z-sf-base | |||
| Subtle | ... | ||
--z-sf-subtle | |||
| Subtle negative | ... | ||
--z-sf-subtle--negative | |||
| Placeholder | ... | ||
--z-sf-placeholder | |||
Background tokens
The prefix used is bg.
| Name | Token | Values (light) | Values (dark) |
|---|---|---|---|
| Muted | ... | ||
--z-bg-muted | |||
| Muted disabled | ... | ||
--z-bg-muted-disabled | |||
| Primary | ... | ||
--z-bg-primary | |||
| Light base | ... | ||
--z-bg-light-base | |||
| Light base active | ... | ||
--z-bg-light-base--active | |||
| Negative | ... | ||
--z-bg-negative | |||
| Negative hover | ... | ||
--z-bg-negative--hover | |||
| Positive | ... | ||
--z-bg-positive | |||
| Positive hover | ... | ||
--z-bg-positive--hover | |||
| Alert | ... | ||
--z-bg-alert | |||
| Info | ... | ||
--z-bg-info | |||
| Disabled | ... | ||
--z-bg-disabled | |||
| Active | ... | ||
--z-bg-active | |||
| Pressed | ... | ||
--z-bg-pressed | |||
| Hover | ... | ||
--z-bg-hover | |||
| Hover inverse | ... | ||
--z-bg-hover--inv | |||
| Brand | ... | ||
--z-bg-brand | |||
| Brand bold | ... | ||
--z-bg-brand--bold | |||
| Brand non-invertible | ... | ||
--z-bg-brand--eq | |||
| Non-invertible | ... | ||
--z-bg-non-inv | |||
| Placeholder | ... | ||
--z-bg-placeholder | |||
| Transparent | ... | ||
--z-bg-transparent | |||
| Accent moss | ... | ||
--z-bg-moss | |||
| Accent azure | ... | ||
--z-bg-azure | |||
| Accent teal | ... | ||
--z-bg-teal | |||
| Accent lilac | ... | ||
--z-bg-lilac | |||
| Accent candy | ... | ||
--z-bg-candy | |||
| Accent peach | ... | ||
--z-bg-peach | |||
| Accent mint | ... | ||
--z-bg-mint | |||
| Accent lime | ... | ||
--z-bg-lime | |||
| Accent lemon | ... | ||
--z-bg-lemon | |||
| Accent powder pink | ... | ||
--z-bg-powder-pink | |||
Content tokens
The prefix used is ct.
| Name | Token | Values (light) | Values (dark) |
|---|---|---|---|
| Primary | ... | ||
--z-ct-primary | |||
| Primary non-invertible | ... | ||
--z-ct-primary--eq | |||
| Primary inverse | ... | ||
--z-ct-primary--inv | |||
| Clickable | ... | ||
--z-ct-clickable | |||
| Clickable secondary | ... | ||
--z-ct-clickable--secondary | |||
| Clickable non-invertible | ... | ||
--z-ct-clickable--eq | |||
| Clickable inverse | ... | ||
--z-ct-clickable--inv | |||
| Clickable inverse non-invertible | ... | ||
--z-ct-clickable--inv--eq | |||
| Negative | ... | ||
--z-ct-negative | |||
| Negative non-invertible | ... | ||
--z-ct-negative--eq | |||
| Negative inverse | ... | ||
--z-ct-negative--inv | |||
| Secondary | ... | ||
--z-ct-secondary | |||
| Secondary non-invertible | ... | ||
--z-ct-secondary--eq | |||
| On status | ... | ||
--z-ct-on-status | |||
| On status non-invertible | ... | ||
--z-ct-on-status--eq | |||
| On status info | ... | ||
--z-ct-on-status--info | |||
| Active | ... | ||
--z-ct-active | |||
| Pressed | ... | ||
--z-ct-pressed | |||
| On hover | ... | ||
--z-ct-on-hover | |||
| On pressed | ... | ||
--z-ct-on-pressed | |||
| Disabled | ... | ||
--z-ct-disabled | |||
| Disabled non-invertible | ... | ||
--z-ct-disabled--eq | |||
| Inactive | ... | ||
--z-ct-inactive | |||
| Hover | ... | ||
--z-ct-hover | |||
Border tokens
The prefix used is br.
| Name | Token | Values (light) | Values (dark) |
|---|---|---|---|
| Primary | ... | ||
--z-br-primary | |||
| Active | ... | ||
--z-br-active | |||
| Inactive | ... | ||
--z-br-inactive | |||
| Negative | ... | ||
--z-br-negative | |||
| Separator | ... | ||
--z-br-separator | |||
| Subtle | ... | ||
--z-br-subtle | |||
| Focus | ... | ||
--z-br-focus | |||
| Disabled | ... | ||
--z-br-disabled | |||
| Hover | ... | ||
--z-br-hover | |||
| Pressed | ... | ||
--z-br-pressed | |||
| Placeholder | ... | ||
--z-br-placeholder | |||
Component tokens
Input tokens
...
| Name | Token | Values (light) | Values (dark) |
|---|