Cor

Papéis de cor na taxonomia do Material 3, mapeados para o tema escuro do MAX.

Papéis (color roles)

Cada papel vira uma utility do Tailwind: fundo (bg-*), texto (text-*) e borda (border-*). Pares cor / on-cor garantem contraste.

primary

#9b6afa

/ on-primary

primary-container

#4c0fc4

/ on-primary-container

secondary

#b9a3fe

/ on-secondary

secondary-container

#26045d

/ on-secondary-container

tertiary

#2eb376

/ on-tertiary

error

#ef4444

/ on-error

error-container

#5c1a17

/ on-error-container

success

#2eb376

warning

#f59e0b

background

#000000

/ on-background

surface

#000000

/ on-surface

surface-container-lowest

#000000

surface-container-low

rgba(255,255,255,.04)

surface-container

rgba(255,255,255,.06)

surface-container-high

rgba(255,255,255,.08)

surface-container-highest

rgba(255,255,255,.12)

outline

rgba(255,255,255,.20)

outline-variant

rgba(255,255,255,.10)

inverse-surface

#ffffff

/ inverse-on-surface

Superfícies

O tema escuro empilha superfícies por opacidade de branco: de surface-container-lowest (#000) a surface-container-highest (.12). Use níveis maiores para elementos mais "elevados".

Uso

<div class="bg-surface-container-high text-on-surface rounded-large p-4">
  Conteúdo sobre superfície
</div>
<button class="bg-primary text-on-primary">Ação</button>