nextora-design-system

Sistema de design Nextora

Autoridade única para aparência neste conjunto. O código do tema filho, código de bloco, templates e padrões todos se reportam aqui para paleta, tipografia, tokens, variações de estilo e o seletor. Carregue este skill junto com nextora-child-themes para qualquer novo filho, e com nextora-gutenberg-blocks para qualquer bloco reestilizado ou novo.

Carregue estas referências primeiro

Arquivo	Leia para
references/presets-and-switching.md	Identidade de preset canônica, variáveis de função, armazenamento de cor escopo e resolução PHP, os dois mecanismos de estilo, o portão de funcionalidade, o que um filho contribui, regras de descoberta/mesclagem, semântica de scheme-switcher.json, precedência em tempo de execução, os padrões de função :root do novo filho e a lista de anti-afirmações.
../nextora-ecosystem/references/source-map.md	Proveniência e vocabulário de resolução raiz.
../nextora-ecosystem/references/quality-gates.md	Portões mais as receitas de aceitação downstream compartilhadas (§8).

Os valores citados na referência são âncoras, não dados atuais. Releia o theme.json do destino, entrada CSS, arquivos styles/ e do seletor antes de editar.

Fluxo de trabalho ordenado

1. Resolva o destino e identifique as fontes de aparência ativas

Identifique a raiz do tema pai e a raiz do tema ativo. Em seguida, leia, em ordem: theme.json (paleta, gradientes, famílias de fonte, tamanhos, espaçamento, styles, customTemplates), a entrada CSS que acompanha (resources/css/app.css para o pai, a própria entrada do filho), a árvore styles/ e scheme-switcher.json. Nunca pegue um valor de paleta de um skill, uma captura de tela ou um filho de exemplo.

2. Decida qual mecanismo é correto

Necessidade	Use
Autor escolhe uma cor/tipografia/espaçamento para um wrapper de bloco	Suporte supports de bloco nativo + get_block_wrapper_attributes()
Uma cor dentro da superfície própria do bloco	Um atributo escopo, armazenado como slug de preset, resolvido para uma variável de preset na saída (§5)
Uma aparência alternativa em todo o site que o proprietário seleciona e mantém	Uma variação de estilo do theme.json (styles/*.json, styles/typography/*.json)
Uma escolha de pré-visualização voltada ao visitante	O seletor, e apenas atrás de seu portão (§6)
Um padrão de marca para todo um tema filho	Uma contribuição de paleta/fonte filha mais os padrões de função :root (§7)

Prefira primeiros os suportes nativos. Adicione uma sobrescrita escopo apenas quando estilos globais não conseguirem expressá-la, e nunca invente um segundo sistema de aparência além destes.

3. Altere presets de forma aditiva e por identificador

Adicione slugs; não renomeie ou redirecione um slug pai que o conteúdo herdado já usa. Toda superfície lê var(--wp--preset--color--<slug>), var(--wp--preset--gradient--<slug>) ou var(--wp--preset--font-family--<slug>), portanto um hex literal no CSS do tema exclui essa superfície de mudanças de paleta e do seletor. Espelhe aliases @theme do Tailwind apenas onde a construção CSS os consome, e verifique para o que cada alias realmente aponta em vez de copiar um bloco de alias de um guia mais antigo — o --color-secondary do pai atualmente resolve para o preset paragraph.

4. Roteie a tipografia através das funções Nextora

Tipografia de corpo, título e botão resolvem através de --nextora-font-body, --nextora-font-heading e --nextora-font-button. theme.json usa var(--nextora-font-body); o seletor escreve essas três propriedades inline em <html> com uma pilha de famílias concreta. Uma superfície que lê uma variável de preset diretamente não seguirá uma mudança de fonte do visitante. Adicione ou altere uma família de fonte em theme.json (com ativos fontFace quando não for uma pilha de sistema) e carregue-a antes de oferecê-la como uma escolha de preset.

5. Armazene cores escopo como presets, resolva-as na saída

Siga o padrão de auxiliar existente em blocks/advanced-icon/color-utils.ts (normalizeColorForStorage, colorValueForPicker) e seus equivalentes PHP (nextora_icon_resolve_color, nextora_icon_hex_to_preset_slug, nextora_ac_resolve_color): um preset escolhido armazena seu slug; um hex de opacidade total correspondente a uma entrada de paleta normaliza para o slug dessa entrada; cores personalizadas e hex de 8 dígitos com alfa parcial permanecem literais; gradientes mantêm identidade de preset da mesma forma. Na saída, um slug armazenado torna-se var(--wp--preset--color--<slug>) para que uma mudança de paleta alcance a superfície, e hex de 8 dígitos é tratado antes de sanitize_hex_color(). Um valor vazio significa "padrão do tema" e não emite nada. Reutilize as assinaturas reais; não escreva um resolvedor paralelo. Lembre-se de que um controle de cor não é um sanitizador: HTML armazenado ainda passa por wp_kses_post().

6. Respeite o portão do seletor e contribua com dados, não código

O seletor de visitante existe apenas quando NEXTORA_COLOR_SCHEME_SWITCHER é estritamente true. Fora disso, não há carga, script, CSS de tema de página ou popover — e nenhum substituto do lado filho deve ser escrito para preencher a lacuna. Um filho contribui com dados: styles/color-scheme/*.json, styles/font-preset/*.json, opcionalmente styles/*.json para uma variação agrupada, e uma lista de permissões scheme-switcher.json opcional. Ao criar um novo filho, defina as funções padrão do próprio filho em :root em seu CSS carregado posteriormente (§7 da referência) em vez de fixar uma fonte de preset. Nunca adicione uma implementação de seletor a um filho.

7. Verifique nas superfícies reais

Construa com o script próprio do destino (npm run build:css ou npm run build) — nunca edite a saída de assets/css/*, e nunca afirme que uma construção regenera assets/js/scheme-switcher.js, que é mantido manualmente e está fora do pipeline. Em seguida, aplique ../nextora-ecosystem/references/quality-gates.md e sua §8 receita de sistema de design mais as etapas específicas de preset em references/presets-and-switching.md §10.

Limites rígidos

• Não codifique uma paleta de marca. Os valores vêm dos presets ativos do destino.
• Não propague hexadecimais de fallback obsoletos de documentos mais antigos para novo CSS de tema.
• Não reimplemente o seletor e não afirme que funciona porque um filho de exemplo parece correto: o exemplo fixa suas próprias fontes e adiciona entradas de paleta apenas do filho.
• Não prometa que um parâmetro de URL de cor sobrescreve um tema agrupado já resolvido, ou que Redefinir apaga estilos do Editor do Site.
• Não reestilize o chrome do wp-admin a partir de uma folha de estilo de tema; redefinições do editor permanecem dentro da tela do editor.
• Não aumente silenciosamente o mínimo declarado do WordPress/PHP — torne o requisito explícito.
• Não modifique o pai ou o tema filho de exemplo ao entregar este trabalho.

Verificações de conclusão

• Tema destino resolvido; cada preset, fonte, gradiente e token referenciado existe no próprio theme.json/variações do tema.
• A tabela de mecanismos na etapa 2 foi seguida; suportes nativos usados onde são suficientes.
• A tipografia resolve através das funções --nextora-font-* e segue uma mudança de preset.
• Cores escopo armazenam um slug de preset onde a cor corresponde a um preset, mantêm valores personalizados e alfa parcial literais, e renderizam através de variáveis de preset.
• O portão do seletor é respeitado; uma contribuição filha é apenas dados; qualquer par padrão de novo filho é declarado em :root através das funções.
• Variações de estilo (persistentes) e o seletor (pré-visualização em tempo de execução) são descritos e testados como coisas diferentes.
• As etapas de aceitação da §8 foram executadas contra estilos computados, ou a superfície não verificada é relatada claramente.

Limites

Instruções em Markdown e referências com suporte de origem apenas: sem scripts de tempo de execução, geradores, árvores de tema copiadas, gerenciamento de pacotes ou automação de instalação, e sem edições nas fontes do tema pai ou filho. Comandos de construção downstream e verificação no navegador pertencem ao tema destino e estão listados em ../nextora-ecosystem/references/quality-gates.md.