Cores

Tokens de papel, que trocam com o tema, e a paleta que fica por baixo.

Texto

Claro · escuro · nome da variável e da classe

--fg-brand

bg-fg-brand · text-fg-brand

--fg

bg-fg · text-fg

--fg-muted

bg-fg-muted · text-fg-muted

--fg-subtle

bg-fg-subtle · text-fg-subtle

--fg-on-emphasis

bg-fg-on-emphasis · text-fg-on-emphasis

--fg-on-warning

bg-fg-on-warning · text-fg-on-warning

--fg-error

bg-fg-error · text-fg-error

--fg-success

bg-fg-success · text-fg-success

--fg-disabled

bg-fg-disabled · text-fg-disabled

--fg-inverse

bg-fg-inverse · text-fg-inverse

--fg-on-inverse

bg-fg-on-inverse · text-fg-on-inverse

Fundo

Claro · escuro · nome da variável e da classe

--surface

bg-surface · text-surface

--canvas

bg-canvas · text-canvas

--surface-brand

bg-surface-brand · text-surface-brand

--surface-brand-muted

bg-surface-brand-muted · text-surface-brand-muted

--surface-inverse

bg-surface-inverse · text-surface-inverse

--surface-inverse-muted

bg-surface-inverse-muted · text-surface-inverse-muted

--surface-muted

bg-surface-muted · text-surface-muted

--surface-translucent

bg-surface-translucent · text-surface-translucent

--surface-disabled

bg-surface-disabled · text-surface-disabled

--surface-hover

bg-surface-hover · text-surface-hover

--surface-selected

bg-surface-selected · text-surface-selected

Linha e foco

Claro · escuro · nome da variável e da classe

--line

bg-line · text-line

--line-brand

bg-line-brand · text-line-brand

--line-strong

bg-line-strong · text-line-strong

--line-on-emphasis

bg-line-on-emphasis · text-line-on-emphasis

--focus

bg-focus · text-focus

--focus-error

bg-focus-error · text-focus-error

--line-hover

bg-line-hover · text-line-hover

--focus-halo

bg-focus-halo · text-focus-halo

Ícone

Claro · escuro · nome da variável e da classe

--icon

bg-icon · text-icon

--icon-subtle

bg-icon-subtle · text-icon-subtle

--icon-brand

bg-icon-brand · text-icon-brand

--icon-strong

bg-icon-strong · text-icon-strong

--icon-success

bg-icon-success · text-icon-success

--icon-on-emphasis

bg-icon-on-emphasis · text-icon-on-emphasis

--icon-inverse

bg-icon-inverse · text-icon-inverse

Status

Claro · escuro · nome da variável e da classe

--status-neutral

bg-status-neutral · text-status-neutral

--status-neutral-muted

bg-status-neutral-muted · text-status-neutral-muted

--status-info

bg-status-info · text-status-info

--status-info-muted

bg-status-info-muted · text-status-info-muted

--status-success

bg-status-success · text-status-success

--status-success-muted

bg-status-success-muted · text-status-success-muted

--status-warning

bg-status-warning · text-status-warning

--status-warning-muted

bg-status-warning-muted · text-status-warning-muted

--status-error

bg-status-error · text-status-error

--status-error-muted

bg-status-error-muted · text-status-error-muted

--status-highlight

bg-status-highlight · text-status-highlight

--status-highlight-muted

bg-status-highlight-muted · text-status-highlight-muted

--status-success-fg

bg-status-success-fg · text-status-success-fg

--status-error-fg

bg-status-error-fg · text-status-error-fg

--status-warning-fg

bg-status-warning-fg · text-status-warning-fg

--status-info-fg

bg-status-info-fg · text-status-info-fg

--status-highlight-fg

bg-status-highlight-fg · text-status-highlight-fg

Botão, sobreposição e sombra

Claro · escuro · nome da variável e da classe

--overlay-hover

bg-overlay-hover · text-overlay-hover

--overlay-pressed

bg-overlay-pressed · text-overlay-pressed

--button-primary

bg-button-primary · text-button-primary

--button-primary-muted

bg-button-primary-muted · text-button-primary-muted

--button-neutral

bg-button-neutral · text-button-neutral

--button-neutral-hover

bg-button-neutral-hover · text-button-neutral-hover

--button-neutral-muted

bg-button-neutral-muted · text-button-neutral-muted

--shadow-color

bg-shadow-color · text-shadow-color

--button-primary-hover

bg-button-primary-hover · text-button-primary-hover

--button-primary-muted-hover

bg-button-primary-muted-hover · text-button-primary-muted-hover

--button-neutral-muted-hover

bg-button-neutral-muted-hover · text-button-neutral-muted-hover

--button-danger-hover

bg-button-danger-hover · text-button-danger-hover

--button-danger-muted-hover

bg-button-danger-muted-hover · text-button-danger-muted-hover

Gráfico

Claro · escuro · nome da variável e da classe

--chart-7

bg-chart-7 · text-chart-7

--chart-1

bg-chart-1 · text-chart-1

--chart-2

bg-chart-2 · text-chart-2

--chart-3

bg-chart-3 · text-chart-3

--chart-4

bg-chart-4 · text-chart-4

--chart-5

bg-chart-5 · text-chart-5

--chart-6

bg-chart-6 · text-chart-6

--chart-8

bg-chart-8 · text-chart-8

--chart-axis

bg-chart-axis · text-chart-axis

--chart-grid

bg-chart-grid · text-chart-grid

--chart-track

bg-chart-track · text-chart-track

Paleta

Fica por baixo dos tokens de papel e não vira classe: tela usa papel, nunca cor da paleta.

brand

neutral

blue

green

red

yellow

orange

purple