Introdução
As cores de Pattern são adaptações das cores base para representar diferentes estados de interação:
enabled, hover, selected, focus, disabled.
Essas cores também variam de acordo com o tema ativo (ex.: light ou dark) e devem ser as únicas utilizadas em componentes.
São divididas em duas categorias principais:
- Contents
- Backgrounds
Use apenas as cores da camada Pattern diretamente nos componentes.
Background Patterns
Os Background Patterns são organizados em três camadas:
- Surface
- Semantics
- Dataviz
Cada conjunto possui duas variações:
- Regular
- Light
E cada variação inclui os estados: enabled, hover, selected, focus, disabled.
As cores de superfície criam hierarquia visual entre fundos de páginas, cards, modais e outros elementos.
Estados comuns
- Enabled: elemento ativo e interativo.
- Hover: elemento com cursor do mouse sobre ele.
- Selected: elemento marcado ou selecionado.
- Focus: elemento em foco pelo teclado (ex.: tecla Tab).
- Disabled: elemento desativado ou indisponível para interação.
Contents Patterns
Os Contents Patterns são usados principalmente em textos e estão divididos em:
- Neutral
- Semantics
- Dataviz
Cada conjunto contém cores para os diferentes estados de interação, em duas versões:
- Default: cor padrão do estado.
- Inverse: cor adaptada para fundos claros ou escuros alternativos.
Estados comuns
- Enabled: elemento ativo e interativo.
- Hover: elemento com cursor do mouse sobre ele.
- Selected: elemento marcado ou selecionado.
- Focus: elemento em foco pelo teclado (ex.: tecla Tab).
- Disabled: elemento desativado ou indisponível para interação.