Theming Systempor Owl-Listener

Theming System Skill.

Permita que uma única biblioteca de componentes mude de aparência sem duplicar a estrutura.

Design Systems
Temas

Revisão da fonte · Theming SystemSKILL.md

Tarefa Design Systems Produz • Uma arquitetura de tokens em três camadas com regras de sobrescrita. • Uma matriz de temas que cobre os modos de cor, marca ou densidade necessários. • Orientações sobre cobertura de componentes e sobre tokens fixos versus tematizáveis. Antes de começar A implementação usa o sistema de tokens do projeto ou equivalentes da plataforma; a troca em tempo de execução precisa ser construída e testada.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Suporte a vários temas com tokens

Uma arquitetura de temas em camadas para componentes compartilhados entre marcas, modos de cor e variantes de densidade.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Theming System coloca as diferenças de tema em uma arquitetura de tokens em camadas. Valores brutos da paleta alimentam papéis semânticos, que por sua vez alimentam tokens com escopo de componente. As sobrescritas de tema alteram principalmente a camada semântica, permitindo que os mesmos componentes atendam a marcas ou modos de cor diferentes.

A fonte distingue temas da simples inversão de cores. Superfícies escuras, elevação, saturação e variantes de imagem exigem tratamento deliberado. Ela também lista a densidade como uma dimensão de tema, o que torna a especificação relevante além da cor.

Entregas esperadas

Uma arquitetura de tokens em três camadas com regras de sobrescrita.
Uma matriz de temas que cobre os modos de cor, marca ou densidade necessários.
Orientações sobre cobertura de componentes e sobre tokens fixos versus tematizáveis.

Ver o briefing de exemplo

Do briefing à revisão

01
Separe as camadas de tokens
Identifique primitivos brutos, aliases baseados em finalidade e referências no nível de componente.
02
Mapeie as sobrescritas de tema
Altere os papéis semânticos de cada tema solicitado, preservando o contrato do componente.
03
Verifique a biblioteca inteira
Revise todos os componentes em todos os temas suportados, incluindo imagens e o comportamento conforme a preferência do sistema operacional.

02 Quando usar

Quando usar

A implementação usa o sistema de tokens do projeto ou equivalentes da plataforma; a troca em tempo de execução precisa ser construída e testada.

Boa opção para

Produtos multimarcaÚtil quando interfaces white-label ou de submarcas precisam compartilhar uma biblioteca de componentes.
Além do claro e escuroTambém oferece uma estrutura para variantes de alto contraste ou de densidade.

Limites a verificar

Não é um exercício de paleta únicaEscolher um conjunto de cores não estabelece uma arquitetura de temas sustentável.
Sem certificação automática de contrasteCada combinação real de texto, superfície e estado ainda precisa ser testada.

Traga estas informações

Temas suportadosListe marcas, modos de cor, modos de contraste e requisitos de densidade.
Tokens existentesForneça a paleta, os aliases semânticos e as referências de componentes.
Elementos de marca fixosIdentifique ativos ou valores que não devem mudar entre temas.

03 Decisões importantes

Decisões que importam

Sobrescreva na camada certa
Aliases semânticos evitam espalhar cores específicas de marca pelas implementações dos componentes.
Ativos fazem parte de um tema
Imagens e ilustrações podem precisar de variantes; alterar apenas as variáveis de CSS pode não tornar o modo escuro coerente.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Use o método de instalação documentado no repositório e mantenha quaisquer arquivos complementares referenciados. Esta entrada descreve um método de design focado, não um aplicativo executável.

Arquivo-fonte original

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/theming-system/SKILL.md

A implementação usa o sistema de tokens do projeto ou equivalentes da plataforma; a troca em tempo de execução precisa ser construída e testada.

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use theming-system para uma biblioteca de componentes compartilhada por duas marcas nos modos claro e escuro. Defina as camadas primitiva, semântica e de componente, identifique os tokens fixos e mostre como funcionam as sobrescritas de tema. Inclua variantes de imagem e uma matriz de QA de componente por tema, sem presumir que inverter as cores seja suficiente.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

Os tokens de componente são resolvidos por meio dos papéis semânticos documentados.
Valores tematizáveis e fixos são distinguidos.
A matriz de testes inclui todos os temas suportados.

OpenDesign oferece um espaço de trabalho de design local para agentes de codificação. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos do projeto original podem mudar.

Proprietário da fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: design-systems/skills/theming-system/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Uma arquitetura de temas em camadas para componentes compartilhados entre marcas, modos de cor e variantes de densidade.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uma medida de uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Onde os temas devem sobrescrever os tokens?

A fonte coloca as principais sobrescritas na camada semântica, entre os valores brutos e os tokens específicos de componente.

A densidade pode ser um tema?

Sim. A fonte inclui densidade confortável, compacta e espaçosa junto com os modos de cor e de marca.

Ela prescreve uma ferramenta de implementação específica?

Ela cita propriedades personalizadas de CSS, arquivos de tokens, modos de variáveis do Figma e troca em tempo de execução, em vez de exigir uma única stack.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design