--lex-backgroundfundo da aplicaçãoClaro
…Escuro
…Paleta de cores
Tokens de cor por família, com o valor resolvido nos temas claro e escuro lado a lado.
Variação por tema
Cada token abaixo é exibido nos dois temas ao mesmo tempo, dentro de escopos data-theme. Os valores são lidos do CSS em tempo real.
Superfícies e fundo
Do fundo da página às camadas de conteúdo empilhadas.
--lex-surface-1cards e painéisClaro
…Escuro
…--lex-surface-2campos, itens e chipsClaro
…Escuro
…--lex-surface-3realce sobre superfície 2Claro
…Escuro
…Texto e ênfase
Contraste de leitura; nunca dependa apenas da cor para comunicar estado.
--lex-foregroundtexto principalClaro
…Escuro
…--lex-mutedtexto auxiliar e metadadosClaro
…Escuro
…Ação e identidade
Azul é ação e navegação ativa; laranja é identidade e destaque.
--lex-primaryação principalClaro
…Escuro
…--lex-primary-hoverestado hoverClaro
…Escuro
…--lex-primary-foregroundtexto sobre primaryClaro
…Escuro
…--lex-accentdestaque e marcaClaro
…Escuro
…--lex-accent-fillpreenchimento de destaqueClaro
…Escuro
…--lex-accent-foregroundtexto sobre accentClaro
…Escuro
…Bordas e foco
Separação de camadas e anel de foco visível por teclado.
--lex-borderborda padrãoClaro
…Escuro
…--lex-border-strongborda de ênfaseClaro
…Escuro
…--lex-focusanel de focoClaro
…Escuro
…Estados
Sempre acompanhados de ícone e texto, nunca só da cor.
--lex-successsucessoClaro
…Escuro
…--lex-warningatençãoClaro
…Escuro
…--lex-dangererro e destruiçãoClaro
…Escuro
…Gráficos
Paleta categórica de dez séries, com variantes semânticas.
--lex-chart-1série 1Claro
…Escuro
…--lex-chart-2série 2Claro
…Escuro
…--lex-chart-3série 3Claro
…Escuro
…--lex-chart-4série 4Claro
…Escuro
…--lex-chart-5série 5Claro
…Escuro
…--lex-chart-6série 6Claro
…Escuro
…--lex-chart-7série 7Claro
…Escuro
…--lex-chart-8série 8Claro
…Escuro
…--lex-chart-9série 9Claro
…Escuro
…--lex-chart-10série 10Claro
…Escuro
…--lex-chart-positivetendência positivaClaro
…Escuro
…--lex-chart-negativetendência negativaClaro
…Escuro
…--lex-chart-warningatenção em gráficoClaro
…Escuro
…--lex-chart-neutralsérie neutraClaro
…Escuro
…Rampas de marca
Nível 1: as rampas alimentam os tokens semânticos e não mudam entre os temas. Componentes não consomem estas cores diretamente.
Escalas base
Alterar a marca aqui propaga para primary, hover, foco, accent e séries de gráfico.
--lex-blue-*--lex-orange-*--lex-neutral-*Importação
Use somente a API pública do LexUI.
color: var(--lex-foreground); background: var(--lex-surface-1)