Repository navigation
themes patterns
Luiz Kim edited this page Aug 3, 2026
·
1 revision
Objetivo:
- definir padroes globais de map para papeis visuais recorrentes
- evitar que o mesmo componente use tokens diferentes em telas diferentes
- servir como referencia rapida para qualquer modulo, nao apenas
general-settings
Regra geral:
- usar sempre nomes canonicos de
themes-map.md - nao inventar alias locais
- nao misturar tokens diferentes para o mesmo papel visual
- quando o mesmo papel visual reaparecer em outra tela, reutilizar o mesmo token
- fundo do contador:
badgeBackground - texto do contador:
badgeText
- fundo do card:
cardBackground - borda do card:
cardBorder - titulo principal:
cardText - texto de apoio:
textSecondary
- icone/acento do tooltip:
iconInfo
- fundo do wrapper do icone:
cardIconBackground - borda do wrapper do icone:
cardIconBorder - cor do icone:
cardIconColor
- estado marcado:
iconActive - estado desmarcado:
iconDisabled
Aplicar este padrao em:
- checkbox
- radio
- estrela de opcao ativa
- lista selecionavel
- item configurado com
check-circle
- remover com
-:iconDanger - lixo / lixeira / delete / trash:
iconDanger
- spinner de carregamento:
loadingSpinner
- placeholder de campo:
inputPlaceholderText
- trilha ligada:
switchOnTrack - trilha desligada:
switchOffTrack - thumb ligado:
switchOnThumb - thumb desligado:
switchOffThumb - trilha desabilitada:
switchDisabledTrack - thumb desabilitado:
switchDisabledThumb
- texto e icone do estado ativo:
badgeSelectedText - texto e icone do estado inativo:
badgeDisabledText - fundo do estado ativo:
badgeSelectedBackground - borda do estado ativo:
badgeSelectedBorder - fundo do estado inativo:
badgeDisabledBackground - borda base:
badgeBorder
- contador do rodape:
badgeBackground+badgeText
- card da secao:
cardBackground+cardBorder+cardText+textSecondary - tooltip
?:iconInfo - icone do cabecalho da secao:
cardIconBackground+cardIconBorder+cardIconColor - loaders das tabs:
loadingSpinner - placeholders dos campos:
inputPlaceholderText - switches das tabs:
switchOnTrack+switchOffTrack+switchOnThumb+switchOffThumb+switchDisabledTrack+switchDisabledThumb
- grupos de preferencias:
cardIconBackground+cardIconBorder+cardIconColor - icones internos padrao de cards e listas:
cardIconColor - seletores de
Catalogo do shop:iconActive+iconDisabled - seletores de
Enderecos exibidos no localizador:iconActive+iconDisabled - opcoes de
Entrada principal:iconActive+iconDisabled - remocao com
remove-circle-outline:iconDanger
- icone da secao:
cardIconBackground+cardIconBorder+cardIconColor - chip de ativacao:
badgeSelectedText+badgeDisabledText - selecao de devices:
iconActive+iconDisabled
- icone da secao:
cardIconBackground+cardIconBorder+cardIconColor - chips de ativacao:
badgeSelectedText+badgeDisabledText - selecao de devices:
iconActive+iconDisabled
- icone da secao:
cardIconBackground+cardIconBorder+cardIconColor - categorias e grupos ocultos:
iconActive+iconDisabled
- icone da secao:
cardIconBackground+cardIconBorder+cardIconColor -
delete:iconDanger
- icone da secao:
cardIconBackground+cardIconBorder+cardIconColor - placeholder dos campos:
inputPlaceholderText
- icones das secoes:
cardIconBackground+cardIconBorder+cardIconColor - loading das credenciais:
loadingSpinner
- icone da secao:
cardIconBackground+cardIconBorder+cardIconColor - item configurado com
check-circle:iconActive
- icone da secao:
cardIconBackground+cardIconBorder+cardIconColor - loading da secao:
loadingSpinner
- icone da secao:
cardIconBackground+cardIconBorder+cardIconColor - switches:
switchOnTrack+switchOffTrack+switchOnThumb+switchOffThumb+switchDisabledTrack+switchDisabledThumb
- icone da secao:
cardIconBackground+cardIconBorder+cardIconColor
- icone da secao:
cardIconBackground+cardIconBorder+cardIconColor - switches:
switchOnTrack+switchOffTrack+switchOnThumb+switchOffThumb+switchDisabledTrack+switchDisabledThumb