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

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.

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.

Use caixa de frase nos rótulos

Rótulos em estilo overline usam caixa alta e seu espaçamento original por padrão. Para uma marca ou localidade que usa caixa de frase, adicione os tokens tipográficos opcionais no mesmo escopo. Eles afetam cabeçalhos de tabela, grupos da barra lateral e de menus, rótulos de calendário e outros rótulos overline:

html[data-brand='harbor'] {
  --brand: #0d9488;
  --overline-transform: none;
  --overline-tracking: normal;
}

--overline-transform: none preserva a caixa escrita no HTML; escreva os rótulos em caixa de frase (por exemplo, Status da entrega). Esses tokens não fazem parte dos quatro tokens base da marca nem são derivados automaticamente de --brand.

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.

Se você também personalizar --danger para uma cor clara, defina --on-danger com uma tinta mais escura: preenchimentos danger sólidos, como .lyra-btn--danger, o usam e o padrão é #FFFFFF.

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.