Colors

O sistema de cores do Makuco é organizado em duas camadas: primitivas (--color-basics-*) e semânticas (--db1-color-*). Sempre use os tokens semânticos nos componentes para garantir consistência visual e suporte a temas de marca. Passe o mouse sobre qualquer swatch para ver o valor HEX.

Cores primitivas

A paleta primitiva é composta por 11 famílias de cor com 10 tons cada (50–900), além de preto e branco puros e paletas de marca para cada produto DB1.

Cores semânticas

Os tokens semânticos atribuem intenção às cores. Sempre use estes tokens nos componentes para garantir consistência visual e suporte a temas.

Neutral

Escala de cinza usada para textos, fundos, bordas e superfícies. neutral-white é o branco puro.

Semânticas de feedback

Quatro grupos que comunicam estados do sistema: error, info, success e warning.

Extend

Cores adicionais disponíveis para uso em visualizações de dados, tags e outros contextos que precisam de mais variedade cromática além da paleta semântica principal.

Brand

A cor brand representa a identidade visual do produto ativo. Por padrão usa a paleta Makuco (tons de cinza). Cada produto DB1 sobrescreve estes tokens via data-brand="*" no elemento raiz.

Tokens de componente

Camada intermediária entre os tokens semânticos (--db1-color-*) e os tokens específicos de cada componente (--btn-*, --icon-button-*, etc.). Atribuem intenção de uso — cor de borda, texto, ícone, fundo ou desfoque — e trocam de valor automaticamente entre os temas claro e escuro via [data-theme="dark"]. Prefira sempre estes tokens a --db1-color-* diretamente ao estilizar um componente.

Stroke

Cor de borda por intenção.

Text

Cor de texto por intenção.

Icon

Cor de ícone por intenção. Segue o mesmo conjunto de papéis do token text.

Background

Cor de fundo por intenção. overlay é semitransparente — o quadriculado abaixo evidencia a transparência.

Blur

Único token de desfoque, usado em overlays de modais e gavetas (backdrop-filter: blur(var(--blur-overlay))).

Tokens de referência

Token CSS	Categoria	Descrição
--color-basics-{cor}-{50–900}	Primitiva	Paleta bruta. Não usar diretamente em componentes.
--db1-color-neutral-{white|50–900}	Semântica — Neutral	Escala de cinza para textos, bordas e superfícies.
--db1-color-semantics-error-{50–900}	Semântica — Feedback	Cor de erro. Base: --color-basics-red-*.
--db1-color-semantics-info-{50–900}	Semântica — Feedback	Cor informativa. Base: --color-basics-blue-*.
--db1-color-semantics-success-{50–900}	Semântica — Feedback	Cor de sucesso. Base: --color-basics-green-*.
--db1-color-semantics-warning-{50–900}	Semântica — Feedback	Cor de alerta. Base: --color-basics-yellow-*.
--db1-color-extend-{cor}-{50–900}	Semântica — Extend	Cores adicionais: pink, orange, teal, cyan, purple, violet.
--db1-color-brand-{50–900}	Semântica — Brand	Cor de marca do produto ativo. Controlada via data-brand.
--stroke-{default|strong|subtle|disabled|brand|error|success|info|warning}	Componente — Stroke	Cor de borda por intenção. Theme-aware via [data-theme="dark"].
--text-{on-filled|on-filled-disabled|high-emphasis|low-emphasis|disabled|brand|error|success|info|warning}	Componente — Text	Cor de texto por intenção. Theme-aware via [data-theme="dark"].
--icon-{on-filled|on-filled-disabled|high-emphasis|low-emphasis|disabled|brand|error|success|info|warning}	Componente — Icon	Cor de ícone por intenção. Theme-aware via [data-theme="dark"].
--background-{default|surface|overlay}	Componente — Background	Cor de fundo por intenção. overlay usa color-mix com transparência.
--blur-overlay	Componente — Blur	Raio de desfoque para overlays de modais e gavetas.