Foundations
Surfaces .
A espinha dorsal de theming do sistema. Qualquer elemento com o atributo
data-surface redefine todos os role tokens para a sua subárvore —
sem nenhum override em componente individual. É assim que um Card
escurece automaticamente quando entra numa seção carbon ou ink.
Como funciona
Em tokens.css, cada bloco [data-surface="X"] reescreve os
role tokens — --surface, --text-strong, --text-body,
--card-bg, --btn-primary-bg e outros — para os valores corretos
daquela superfície. Não há condicionais em componente: o componente
consome sempre o mesmo token, e o token muda de valor conforme o contexto de superfície.
O resultado: qualquer novo componente que respeite os role tokens funciona corretamente em todas as quatro superfícies sem código adicional.
Demonstração
As quatro superfícies a seguir são demonstradas em sequência.
Cada uma contém um Card para mostrar o cascade em ação —
o card adapta seu fundo automaticamente.
Card em Paper
O card usa --card-bg e --card-border,
que resolvem automaticamente para esta superfície.
Texto em --text-strong e --text-body.
Acento → --text-accent
Card em Cream
O card usa --card-bg e --card-border,
que resolvem automaticamente para esta superfície.
Texto em --text-strong e --text-body.
Acento → --text-accent
Card em Carbon
O card usa --card-bg e --card-border,
que resolvem automaticamente para esta superfície.
Texto em --text-strong e --text-body.
Acento → --text-accent
Card em Ink
O card usa --card-bg e --card-border,
que resolvem automaticamente para esta superfície.
Texto em --text-strong e --text-body.
Acento → --text-accent