White-label
Coloque data-brand em um elemento e defina até quatro propriedades customizadas. O Lyra
recalcula o grupo de acento a partir dessa cor-base, então os componentes dentro dessa subárvore
usam sua marca sem sobrescritas por componente.
Veja em funcionamento
Três marcas no tema atual
Cada card limita sua própria data-brand. Use o alternador de tema no cabeçalho para ver as três
marcas se recalcularem no mesmo lugar, sem rebuild. Navegue com Tab até um input ou botão primário
para ver o anel de foco derivado da marca.
Harbor
Violet
Sunrise
Defina uma marca
--brand é a cor-base obrigatória. Os outros três tokens têm defaults. O Lyra deriva
automaticamente uma tinta legível para o acento primário; defina --brand-contrast apenas quando
quiser escolher essa tinta.
| Token | Default | Finalidade |
|---|---|---|
--brand | Obrigatório | A cor-base da marca. |
--brand-contrast | Preto ou branco automático | Sobrescrita opcional para texto e ícones sobre o acento primário. |
--brand-radius | 10px | O valor de --radius-md. |
--brand-font | "Plus Jakarta Sans", system-ui, sans-serif | Tanto --font-sans quanto --font-display. |
Esta é uma definição completa de marca:
html[data-brand='harbor'] {
--brand: #0d9488;
--brand-contrast: #ffffff;
--brand-radius: 12px;
--brand-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}Nunca defina data-brand sem uma definição correspondente de --brand. O atributo sozinho ativa
a camada de derivação e, sem a cor-base, todo o grupo de acento resolve para nada — botões
primários perdem o preenchimento. Para mostrar o visual padrão do Lyra (por exemplo, uma opção
"default" em um seletor de marcas), remova o atributo em vez de definir uma marca vazia.
Escolha o escopo
Coloque data-brand em <html> quando o aplicativo inteiro pertencer a uma marca. Todos os
descendentes usam os valores derivados.
Coloque-o em um contêiner quando apenas parte da página precisar de outra identidade, como uma prévia de workspace incorporada ou uma área específica do tenant. Apenas esse contêiner e seus descendentes recebem os valores da marca, como acontece com os três cards acima.
O que o Lyra recalcula
No modo claro, o Lyra mantém --accent como o --brand cru, clareia hover e active com branco
em 3% e 4% no espaço srgb e deriva --accent-soft, --accent-soft-text e --focus-ring com color-mix() em
oklab. Ele também define --on-accent, --text-link, --border-accent, --radius-md,
--font-sans e --font-display.
Dentro de data-theme="dark", as misturas da marca para accent, hover e active usam branco em 14%, 26% e
30% no espaço oklab; soft-text e link mantêm suas próprias misturas com branco.
A regra escura funciona quando data-theme="dark" e data-brand estão no mesmo elemento ou quando
o elemento com marca fica dentro do elemento tematizado.
Ilhas de tema
Um contêiner data-theme="dark" dentro de uma página clara funciona, inclusive com um descendente
com marca. Isso é útil para um painel permanentemente escuro. O inverso não funciona hoje: os
tokens claros são os defaults em :root, não um bloco [data-theme="light"], então
data-theme="light" não restaura tokens claros dentro de um ancestral escuro. Use o alternador de
tema do site para pré-visualizar cada marca nos dois temas.
Mantenha o texto primário legível
O Lyra deriva --on-accent a partir do acento resolvido e escolhe automaticamente preto ou branco
neutro. Use --brand-contrast apenas para fixar uma tinta específica. Em navegadores com suporte
a sintaxe de cor relativa, a regra automática atende AA-large (3,0:1) para todas as combinações de
cor-base e tema compatíveis. A transição conhecida no
tema claro é #E11D48, que chega a 4,47:1 em vez dos 4,5:1 de AA para texto normal; confira uma
sobrescrita customizada antes de publicá-la.
O que este contrato não altera
O contrato não recalcula tokens --surface-*, cores de texto, espaçamento ou raios além de
--radius-md. Ele não sobrescreve bordas além de --border-accent. Se o produto precisar mudar
isso por tenant, defina essa camada separadamente em vez de esperar que data-brand faça isso.