Temas de Marca
Como aplicar a identidade visual de cada produto DB1 usando o atributo data-brand.
O Makuco UI é um Design System white label: os componentes não possuem cor de marca hard-coded.
As cores de marca são tokens CSS (--db1-*-color-brand-*) sem valor padrão em :root — eles só ganham
valor quando um ancestral declara o atributo data-brand.
Isso significa que qualquer componente renderizado abaixo de um elemento com data-brand herda automaticamente
a paleta daquele produto, sem nenhuma configuração adicional.
Marcas disponíveis
| Valor | Produto |
|---|---|
makuco | Makuco (Design System DB1) |
iam | IAM |
koncili | Koncili |
predize | Predize |
winnerbox | Winnerbox |
anymarket | Anymarket |
anymarket-secondary | Anymarket (paleta secundária) |
Tokens sobrescritos
Cada valor de data-brand redefine os seguintes grupos de tokens no escopo do elemento:
| Grupo de tokens | Uso |
|---|---|
--db1-surface-color-brand-{50–900} | Fundos, badges e superfícies com cor de marca |
--db1-text-color-brand-{50–900} | Textos e labels com cor de marca |
--db1-stroke-color-brand-{50–900} | Bordas e outlines com cor de marca |
--db1-icon-color-brand-{50–900} | Ícones com cor de marca |
Tokens não afetados
Tokens de cor neutros, semânticos (erro, sucesso, alerta, info) e tipografia não são
alterados pelo data-brand — eles permanecem iguais em todas as marcas.
Como usar
HTML puro
Adicione data-brand em qualquer ancestral — normalmente o <body> ou o elemento raiz da aplicação:
<body data-brand="koncili">
<mk-button variant="filled">Salvar</mk-button>
</body>React
export function App() {
return (
<div data-brand="anymarket">
<MkButton variant="filled">Salvar</MkButton>
</div>
);
}Angular
<!-- app.component.html -->
<div data-brand="predize">
<mk-button variant="filled">Salvar</mk-button>
</div>Múltiplas marcas na mesma página
O atributo pode ser colocado em qualquer nível do DOM. É possível ter múltiplas marcas na mesma
página isolando seções com data-brand diferentes — o mais próximo ao componente sempre prevalece
por cascata CSS.
No Storybook
O Storybook do Makuco UI possui um seletor de marca na toolbar (ícone de pincel).
Ao trocar a marca, o atributo data-brand é aplicado em document.body, atualizando todos os
componentes visíveis instantaneamente — sem recarregar a página.