Marcas e presets

Um componente é implementado uma vez e assume a identidade de cada marca por CSS custom properties. Uma marca é o conjunto das variáveis --color-brand-*, --font-brand-* e --radius-brand. Os valores padrão são os da idPlugger; o que a marca não redefine continua com o valor da idPlugger.

Deve definir (identidade)

Sem estas variáveis, a marca herda o rosa da idPlugger. Todo fundo de marca tem o seu par de texto, escolhido pela marca para ter contraste de pelo menos 4,5:1 (veja Contraste).

Variável	Papel	idPlugger
`--color-brand-primary`	Ação principal (botão primário, foco, borda do campo focado)	`#EC2474`
`--color-brand-primary-foreground`	Texto e ícone sobre a primária	`#FFFFFF`
`--color-brand-primary-disabled`	Fundo do botão primário desabilitado	`#EB9EBD`
`--color-brand-secondary`	Fundo da ação secundária e da aparência `soft`	`#F6DAE5`
`--color-brand-secondary-fg`	Texto sobre a secundária; texto de `ghost`, `link` e `outline` secundários	`#AE1C57`
`--color-brand-secondary-hover`	Fundo da secundária no hover	`#EFBCD1`

Contraste da cor da marca

A cor da marca é do cliente e não precisa mudar. Meça o texto sobre ela: com menos de 4,5:1 com o branco, prefira um texto escuro em --color-brand-primary-foreground. Laranjas e amarelos costumam pedir texto escuro:

Primária	Com `#FFFFFF`	Com texto escuro
`#F49B3E`	2,19 ✗	7,17 com `#062442` ✓
`#FF8400`	2,46 ✗	7,09 com `#1A1A1A` ✓
`#EC2474` (idPlugger)	4,14 ⚠	—

A story Contraste mostra esses pares como aviso, sem bloquear.

Pode definir (neutros, status e apoio)

Os padrões servem para qualquer marca; redefina só se o design da marca pedir.

Variável	Papel	idPlugger
`--color-brand-bg` / `--color-brand-text`	Fundo e texto principais	`#FFFFFF` / `#101828`
`--color-brand-surface-muted`	Superfície sutil (hover neutro, campo desabilitado)	`#F9FAFB`
`--color-brand-border` / `--color-brand-border-hover`	Bordas de campos, tags e botões neutros	`#D0D5DD` / `#667085`
`--color-brand-success` / `-info` / `-warning` / `-danger`	Status (botões, toast, erro de campo)	`#34C759` / `#007AFF` / `#FFCC00` / `#D92D20`
`--color-brand-<status>-foreground`	Texto sobre o fundo do status	branco; `#101828` no warning
`--color-brand-accent` / `--color-brand-navy`	Apoio e fundos escuros	`#AE1C57` / `#0A223C`
`--font-brand-heading` / `--font-brand-body`	Famílias de títulos e de texto	VAG Rundschrift D / Poppins
`--radius-brand`	Raio de botões, campos e toast	`0.5rem`

Sobrescrever no `:root`

Para o hotsite da sua marca, redefina o contrato depois dos imports:

:root {
  --color-brand-primary: #0057b8;
  --color-brand-primary-foreground: #ffffff;
  --color-brand-primary-disabled: #9cbde3;
  --color-brand-secondary: #e6f0fb;
  --color-brand-secondary-fg: #003a7a;
  --color-brand-secondary-hover: #cfe1f6;
  --font-brand-heading: 'Minha Fonte', sans-serif;
  --font-brand-body: 'Minha Fonte', sans-serif;
  --radius-brand: 0.25rem;
}

Presets

Cada preset é um CSS com [data-brand="<nome>"] { --color-brand-*: … }, sem JavaScript e sem recompilar a biblioteca.

Preset	Uso
`themes/idplugger.css`	A marca padrão; serve para voltar à idPlugger dentro de outra marca
`themes/campaign-orange.css`	Demonstração de campanha (laranja, raio menor); ponto de partida para uma marca nova

Para uma marca nova, o contrato completo de cada marca (com os padrões que ela herda) está em brand.<marca> no arquivo @handsondigital/idplugger-ui/tokens.dtcg.json; copie a marca campaign-orange ou idplugger de lá como ponto de partida e traduza os valores para o seu [data-brand]. Veja Design system.

Ordem de import

Importe o preset depois do tokens.css (mesma especificidade do :root: vence quem vem por último) e marque o elemento com data-brand:

@import '@handsondigital/idplugger-ui/tokens.css';
@import '@handsondigital/idplugger-ui/themes/campaign-orange.css';
@import '@handsondigital/idplugger-ui/style.css';

<html data-brand="campaign-orange">…</html>

Uma marca/campanha nova pode declarar o próprio [data-brand="minha-campanha"] { … } no CSS do hotsite, com as variáveis de Deve definir.

Escopo com `data-brand`

A marca vale para a subárvore do elemento que tem data-brand. Os tokens semânticos e de componente são recalculados nesse elemento, então uma seção pode ter outra marca:

<section data-brand="minha-campanha" style="--color-brand-primary: #c2410c">…</section>

Sem data-brand (nem data-theme), sobrescrever --color-brand-* num elemento não recalcula hover, pressionado nem foco.

A demonstração mostra a página na marca padrão, uma seção campaign-orange e uma terceira campaign-orange com data-theme="dark". Botões, foco do campo e raio mudam só dentro de cada seção:

const LadoALado = () => (
  <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 16 }}>
    <Panel label="Página" theme="light" />
    <Panel label="Seção laranja" brand="campaign-orange" />
    <Panel label="Seção laranja escura" brand="campaign-orange" theme="dark" />
  </div>
);