Cores

Todas as cores são CSS custom properties de @handsondigital/idplugger-ui/tokens.css. As amostras abaixo leem as variáveis do tema ativo, e o nome do token aparece junto de cada uma.

Marca (contrato da marca)

São as variáveis que uma marca sobrescreve. Cada fundo de marca tem o seu par de texto (-foreground, -fg). Veja quais são obrigatórias em Marcas e presets.

const Marca = () => (
  <Page
    groups={[
      ['Primária', ['--color-brand-primary', '--color-brand-primary-foreground', '--color-brand-primary-disabled']],
      ['Secundária', ['--color-brand-secondary', '--color-brand-secondary-fg', '--color-brand-secondary-hover']],
      ['Apoio', ['--color-brand-accent', '--color-brand-navy']],
      ['Texto, fundo e bordas', ['--color-brand-text', '--color-brand-bg', '--color-brand-surface-muted', '--color-brand-border', '--color-brand-border-hover']],
      ['Status', status.map((s) => `--color-brand-${s}`)],
    ]}
  />
);

Semânticas

Derivam da marca e mudam com o modo de cor (data-theme). Use-as para superfície, texto e borda no CSS do hotsite.

const Semanticas = () => (
  <Page
    groups={[
      ['Superfície', ['--color-surface', '--color-surface-muted', '--color-surface-strong']],
      [
        'Texto',
        ['--color-foreground', '--color-foreground-strong', '--color-foreground-soft', '--color-foreground-muted', '--color-foreground-subtle', '--color-foreground-faint', '--color-foreground-disabled'],
      ],
      ['Borda', ['--color-border', '--color-border-strong', '--color-border-subtle', '--color-border-faint']],
      [
        'Ação primária',
        ['--color-action-primary', '--color-action-primary-hover', '--color-action-primary-active', '--color-action-primary-disabled', '--color-action-primary-foreground'],
      ],
      ['Feedback (texto)', status.map((s) => `--color-feedback-${s}-fg`)],
    ]}
  />
);

Grupo	Tokens
Superfície	`--color-surface`, `-muted`, `-strong`
Texto	`--color-foreground`, `-strong`, `-soft`, `-muted`, `-subtle`, `-faint`, `-disabled`
Borda	`--color-border`, `-strong`, `-subtle`, `-faint`
Ação primária	`--color-action-primary`, `-hover`, `-active`, `-disabled`, `-foreground`
Feedback	`--color-feedback-<status>`, `-bg`, `-fg`, `-border` (`success`, `info`, `warning`, `danger`)

.cartao {
  background: var(--color-surface);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
}

Quando usar: em CSS próprio, prefira semânticos e tokens de componente a hex e escalas. Quando não usar: as escalas abaixo não mudam com a marca nem com o modo; evite-as em cores de ação ou de texto.

Escalas de cores

Onze escalas (red, orange, yellow, green, mint, teal, cyan, blue, indigo, purple, gray) com os passos 50 a 900, mais neutral de 0 a 900. São a base das camadas superiores.