Cores
O Lyra separa escalas primitivas fixas de tokens semânticos. Use tokens semânticos em componentes e na folha de estilos do aplicativo; os primitivos formam a paleta que define esses significados, não uma segunda API para o código de produto.
Primária — Indigo
Indigo é a escala de acento do Lyra. --accent resolve para indigo 600 no tema claro padrão, e os
passos próximos ficam reservados para estados de hover, active, soft e texto legível em soft. Use
esses nomes semânticos em vez de escolher diretamente um passo da escala.
Indigo 50–950
A escala completa é fixa entre temas. Seus nomes de token ajudam a definir a camada semântica, mas
componentes devem usar --accent, --accent-hover e os tokens semânticos relacionados.
--indigo-50#F1F1FC--indigo-100#E0E1FB--indigo-200#C6C8F5--indigo-300#A5A7EE--indigo-400#8285E4--indigo-500#6E6ADE--indigo-600#5B5BD6--indigo-700#4A48B8--indigo-800#3D3C94--indigo-900#343475--indigo-950#121430Neutros
Slate fornece a rampa de neutros frios para superfícies, bordas e texto. O tema claro mapeia sua
camada semântica para essa escala, então --surface-card, --border-default e --text-primary
continuam expressando finalidade mesmo se o primitivo de origem mudar.
Slate 50–900
Use tokens semânticos de superfície, borda e texto na interface do produto. Recorra a um primitivo slate apenas ao criar ou manter a própria camada de tokens.
--slate-50#F8FAFC--slate-100#F1F5F9--slate-200#E2E8F0--slate-300#CBD5E1--slate-400#94A3B8--slate-500#64748B--slate-600#475569--slate-700#334155--slate-800#1E293B--slate-900#0F172ACores semânticas
Success, warning, danger e info oferecem um token forte para ênfase, um token soft para fundo sutil e um token de texto para tinta legível sobre esse fundo. Esse conjunto mantém estados de status consistentes entre componentes.
Tokens de intenção
Combine --*-soft com o --*-text correspondente; use --success, --warning, --danger ou
--info para o sinal forte. Não substitua esses tokens por primitivos green, amber, red ou blue
em um componente.
--success--warning--danger--infoModo escuro
[data-theme="dark"] troca superfícies, texto, bordas e valores de intenção semânticos, enquanto os
primitivos indigo, slate e de status permanecem fixos. Um componente que consome apenas tokens
semânticos se adapta automaticamente, inclusive dentro de uma ilha de tema escuro.
Camada semântica escura
A amostra aninhada aplica data-theme="dark" localmente. Seus tokens de superfície resolvem para
a escala night. A rampa de acento padrão usa indigo 600, hover 700 e active 800 para preservar
contraste; acentos de marca no escuro continuam derivando seus estados de interação do branco.
#0B0D1D#0E1023#121430#1C1F42