Nomenclatura de Tokens

Estrutura hierárquica

Os tokens seguem uma estrutura hierárquica que reflete seu nível e propósito:

Base → tokens fundamentais ou atômicos.
Modifiers → tokens utilitários de propósito isolado.
Objects → tokens específicos de componentes.

Cada categoria possui regras próprias de nomenclatura.

property

Subdivisão da categoria, obrigatória em alguns casos.

Para color: text, background, border, fill
Para typography: size, weight, line-height, letter-spacing

concept

Define o contexto de uso do token.
Um concept pode conter sub-concepts.

Exemplos:

feedback.color.success
action.color.primary
vizualization.color.dataviz1

variant

Especifica o caso de uso do token.

primary (default, base)
secondary (subtle)
tertiary (nonessential)

Exemplo:

color.feedback.success.primary

state

Representa estados de interação.

default
hover
press ou active
focus
disabled
visited
error

Exemplo:

color.button.primary.hover

scale

Define variações de tamanho ou intensidade.

Enumerados: heading.1, heading.2, heading.3
Ordenados: slate.50, slate.100, …, slate.900
Limitados: opacity.42, opacity.90
Proporcionais: space.2x, space.4x
T-shirt sizes: size.s, size.m, size.l, size.xl

dica

Prefira proporção em vez de t-shirt sizes para tokens de espaçamento.

mode (opcional)

Indica variação de contexto, como:

light
dark
mobile
desktop

group (opcional)

Agrupa tokens de um mesmo propósito.

Exemplo:

form.input.color.border.focus

component

Nome do componente ao qual o token pertence.

Exemplo:

button.color.primary

element

Nome de um elemento interno do componente.
Exemplo para input com ícone e texto:

input.icon.color.fill
input.text.color.placeholder