Integrar sem perder o instrumento.
CSS, fontes, símbolos e módulos locais formam uma composição explícita. Preservar a árvore de arquivos mantém os caminhos relativos; o JavaScript acrescenta comportamento a uma base de conteúdo utilizável.
Dependências visíveis, escopo controlado.
A entrada CSS reúne tokens e folhas do sistema. Módulos clássicos independentes cuidam de comportamento local, com inicialização e desmontagem explícitas; o tema sincroniza os seletores.
-
Tokens na origem
--cl-* preserva a marca; --xq-* descreve geometria, tipografia, cor e movimento do sistema. Alterar o CSS fonte exige regenerar o espelho de tokens.
-
Uma entrada CSS
css/xeque.css importa tokens, base, core, negócio e peças especializadas. Copiar apenas a folha de entrada deixa dependências e fontes sem destino.
-
HTML e símbolos
A marca e os ornamentos usam o sprite inline. IDs do sprite precisam ser únicos no documento; decoração fica fora do nome acessível com aria-hidden.
-
Fontes locais
@font-face resolve caminhos a partir da própria folha CSS. Manter assets/fonts junto da árvore preserva Schibsted Grotesk e Xeque Mono sem CDN.
-
Comportamento opcional
Carregar apenas os módulos necessários à composição. Core, peças, dados, agente, Shopify, squads e telemetria não conectam serviços externos.
-
Ciclo de vida
init(container) e destroy(container) montam e desmontam os módulos de componentes nesse escopo. XequeTheme coordena o documento; XequeEspecime tem uma única composição por página e usa init()/destroy() sem contêiner.
Contratos de tokens CSS
Valor ou alias no tema claro, propriedade consumidora e limite de uso. Cores são apresentadas em RGB equivalente; a fonte continua no CSS de tokens. O inspetor mostra a resolução no tema escolhido.
| Token / expressão | Aplicação CSS | Regra |
|---|---|---|
--xq-fundo
rgb(244 243 237)
|
[data-tema]
background-color
|
Cada escopo temático resolve seu próprio plano; não congelar o alias no tema raiz. |
--xq-texto
rgb(25 39 32)
|
[data-tema]
color
|
Texto resolve junto ao plano local. Cor fixa no componente pode romper temas aninhados. |
--xq-realce
rgb(36 71 53)
|
[data-tema]
accent-color
|
Acento de controles nativos acompanha o tema; não requer JavaScript para resolver a cor. |
--xq-font
'Schibsted Grotesk', Arial, sans-serif
|
body
font-family
|
Alias para Schibsted Grotesk; a fonte depende do caminho relativo de assets/fonts/. |
--xq-mono
'Xeque Mono', monospace
|
.xq-codigo
font-family
|
Código e notação técnica usam Xeque Mono, com arquivo local incluído na distribuição. |
--xq-ritmo-5
24px
|
.xq-codigo
padding
|
24px no bloco de código, que aceita rolagem própria e quebra de conteúdo. |
--xq-linha
rgb(198 205 194)
|
.xq-codigo
border-color
|
A folha core aplica --xq-linha ao contorno do código e --xq-linha-forte na aresta inicial. O alias de grid da base é sobrescrito por esse contrato. |
--xq-raio
2px
|
.xq-codigo
border-radius
|
2px mantém a geometria do sistema; não herdar o raio de outro design system. |
--xq-container
1440px
|
.xq-container
inline-size
|
Limite de 1440px combinado ao gutter; o contêiner nunca exige largura fixa de viewport. |
--xq-gutter
clamp(20px, 4vw, 64px)
|
.xq-container
inline-size
|
clamp(20px, 4vw, 64px), aplicado nas duas margens do contêiner. |
--xq-col-gap
clamp(16px, 2.4vw, 36px)
|
.xq-grid
gap
|
clamp(16px, 2.4vw, 36px); preservar o CSS responsivo em vez de duplicar regras no host. |
--xq-secao
clamp(64px, 9vw, 144px)
|
.xq-section
padding-block
|
clamp(64px, 9vw, 144px) para respiro de seção. A variante compacta tem contrato próprio. |
Uso correto × uso incorreto
Compare a mesma intenção em duas composições. Os exemplos são amostras de leitura; os controles operáveis ficam no playground.
tokens → css/xeque.css → HTML
xeque/
assets/fonts/
tokens/xeque.tokens.css
css/xeque.css
js/modulos/core.jsA árvore preserva os destinos relativos e permite carregar o comportamento necessário.
- Dependências têm nomes e destinos conferíveis.
- O tema resolve em CSS, inclusive quando aninhado.
- Cada módulo tem escopo e ciclo de vida explícitos.
Instalação mágica
style-final-v8.css fontes-depois/ script-tudo.js
Copie tudo e torça.
Tema especial- Arquivos soltos quebram URLs relativas das fontes.
- Script monolítico esconde o custo de cada composição.
- Override visual sem tokens perde a relação entre temas.
Inspecionar o contrato de uma composição.
Este manifesto é um ensaio local de apresentação. Alternar tema não carrega dependências; alternar estado demonstra como relatar inicialização, falha e ausência de módulos sem sugerir conexão externa.
MANIFESTO / HTML LOCAL04
- Entrada
- css/xeque.css
- Dependências estruturais
- tokens / fontes / sprite / folhas CSS
- Comportamento demonstrado
- init(container) → destroy(container)
Composição disponível. A árvore mantém quatro dependências estruturais.
Consultar sequência de desmontagem
Desmontar os módulos do contêiner antes de remover o seu DOM. Reintroduzir o HTML antes de chamar init novamente.
Pronto. Altere um controle para inspecionar o contrato.
Ensaio local e determinístico. A ação percorre carregamento → sucesso; movimento reduzido entrega o estado final imediatamente. Repetir preserva os controles.
Inspecionar tokens resolvidos
--xq-fundo- rgb(244 243 237)
--xq-texto- rgb(25 39 32)
--xq-realce- rgb(36 71 53)
--xq-font- 'Schibsted Grotesk', Arial, sans-serif
--xq-mono- 'Xeque Mono', monospace
--xq-ritmo-5- 24px
--xq-linha- rgb(198 205 194)
--xq-raio- 2px
--xq-container- 1440px
--xq-gutter- clamp(20px, 4vw, 64px)
--xq-col-gap- clamp(16px, 2.4vw, 36px)
--xq-secao- clamp(64px, 9vw, 144px)
Aplicar o contrato
Adicionar comportamento ao contêiner
Os módulos clássicos expõem APIs globais. O contêiner precisa conter a marcação esperada; carregar uma API não transforma qualquer div em componente.
XequeCore.init(container);
XequePecas.init(container);
XequeDados.init(container);
// Antes de remover o HTML:
XequeCore.destroy(container);
XequePecas.destroy(container);
XequeDados.destroy(container);Usar tema sem alterar a marca
Aplicar data-tema ao escopo resolve os aliases locais. Para sincronizar seletores globais e persistência opcional, usar a API de tema após carregar js/xeque.js.
<section class="xq-section" data-tema="nevoa">
<div class="xq-container">Conteúdo da composição</div>
</section>
// Tema global sem gravar preferência:
XequeTheme.set("escuro", { persist: false });Montar a telemetria dentro do escopo
A peça temporal precisa do seu HTML completo e de js/modulos/telemetria.js. O escopo pode reunir várias peças; snapshot e refresh recebem a raiz específica do instrumento. Destruir antes de retirar o DOM.
const raiz = container.querySelector("[data-xq-telemetria]");
XequeTelemetria.init(container);
const fotografia = XequeTelemetria.snapshot(raiz);
// Só se a tabela de origem foi editada:
XequeTelemetria.refresh(raiz);
// Antes de remover a composição:
XequeTelemetria.destroy(container);Critérios de aceite
- Copiar a pasta completa para outro diretório e confirmar fontes, importações CSS, imagens e símbolos locais.
- Inicializar duas vezes a mesma composição; confirmar apenas uma resposta para cada ação e nenhuma instância duplicada.
- Desmontar, remover e reinserir um contêiner; verificar que seus listeners e observadores não continuam ativos após destroy.
- Gerar novamente o guia depois de editar CSS/JS e conferir os hashes nos recursos; testar o arquivo offline por file://.
- Manter apenas um sprite por documento e verificar cada href de use; script e folha carregados não corrigem símbolos ausentes automaticamente.