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)
Large	...
	--z-rd-l
Medium	...
	--z-rd-m
Small	...
	--z-rd-s

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	...
	--z-fc-outline
Outline color	...
	--z-fc-outline-color
Outline offset	...
	--z-fc-outline-offset

Color tokens

Surface tokens

The prefix used is sf.

Name	Token	Values (light)	Values (dark)
Base	...
	--z-sf-base
Brand	...
	--z-sf-brand
Placeholder	...
	--z-sf-placeholder
Subtle	...
	--z-sf-subtle
Subtle negative	...
	--z-sf-subtle--negative

Background tokens

The prefix used is bg.

Name	Token	Values (light)	Values (dark)
Accent azure	...
	--z-bg-azure
Accent candy	...
	--z-bg-candy
Accent lemon	...
	--z-bg-lemon
Accent lilac	...
	--z-bg-lilac
Accent lime	...
	--z-bg-lime
Accent mint	...
	--z-bg-mint
Accent moss	...
	--z-bg-moss
Accent peach	...
	--z-bg-peach
Accent powder pink	...
	--z-bg-powder-pink
Accent teal	...
	--z-bg-teal
Active	...
	--z-bg-active
Base non-invertible	...
	--z-bg-eq
Brand	...
	--z-bg-brand
Brand bold	...
	--z-bg-brand--bold
Brand non-invertible	...
	--z-bg-brand--eq
Disabled	...
	--z-bg-disabled
Highlighted	...
	--z-bg-highlighted
Hover	...
	--z-bg-hover
Hover inverse	...
	--z-bg-hover--inv
Light base	...
	--z-bg-light-base
Light base inverse	...
	--z-bg-light-base--active
Muted	...
	--z-bg-muted
Muted disabled	...
	--z-bg-muted-disabled
Placeholder	...
	--z-bg-placeholder
Pressed	...
	--z-bg-pressed
Primary	...
	--z-bg-primary
Status alert	...
	--z-bg-alert
Status info	...
	--z-bg-info
Status negative	...
	--z-bg-negative
Status negative hover	...
	--z-bg-negative--hover
Status positive	...
	--z-bg-positive
Status positive hover	...
	--z-bg-positive--hover
Transparent	...
	--z-bg-transparent

Content tokens

The prefix used is ct.

Name	Token	Values (light)	Values (dark)
Active	...
	--z-ct-active
Clickable	...
	--z-ct-clickable
Clickable inverse	...
	--z-ct-clickable--inv
Clickable inverse non-invertible	...
	--z-ct-clickable--inv--eq
Clickable non-invertible	...
	--z-ct-clickable--eq
Clickable secondary	...
	--z-ct-clickable--secondary
Disabled	...
	--z-ct-disabled
Disabled non-invertible	...
	--z-ct-disabled--eq
Hover	...
	--z-ct-hover
Inactive	...
	--z-ct-inactive
Negative	...
	--z-ct-negative
Negative inverse	...
	--z-ct-negative--inv
Negative non-invertible	...
	--z-ct-negative--eq
On hover	...
	--z-ct-on-hover
On pressed	...
	--z-ct-on-pressed
On status	...
	--z-ct-on-status
On status info	...
	--z-ct-on-status--info
On status non-invertible	...
	--z-ct-on-status--eq
Pressed	...
	--z-ct-pressed
Primary	...
	--z-ct-primary
Primary inverse	...
	--z-ct-primary--inv
Primary non-invertible	...
	--z-ct-primary--eq
Secondary	...
	--z-ct-secondary
Secondary non-invertible	...
	--z-ct-secondary--eq

Border tokens

The prefix used is br.

Name	Token	Values (light)	Values (dark)
Active	...
	--z-br-active
Disabled	...
	--z-br-disabled
Focus	...
	--z-br-focus
Hover	...
	--z-br-hover
Inactive	...
	--z-br-inactive
Negative	...
	--z-br-negative
Placeholder	...
	--z-br-placeholder
Pressed	...
	--z-br-pressed
Primary	...
	--z-br-primary
Separator	...
	--z-br-separator
Subtle	...
	--z-br-subtle

Component tokens

Input tokens

...

Name	Token	Values (light)	Values (dark)