Pular para o conteúdo principal

Theming — Deep Dive

TODO

Este guia será expandido conforme mais forks forem criados e padrões forem consolidados.

Tokens por seção​

O sistema de tema é organizado em seções. Cada seção tem seus próprios tokens de cor, permitindo customização granular.

DEFAULT — Cores globais​

default-primary          → Cor principal da marca (CTA, links, destaques)
default-secondary        → Cor secundária
default-text-primary     → Texto principal
default-text-secondary   → Texto secundário
default-success          → Sucesso (verde)
default-error            → Erro (vermelho)
default-warning          → Aviso (amarelo)
default-info             → Informação (azul)
header-bg                → Fundo do header
header-links             → Cor dos links
header-texts             → Textos auxiliares
header-register-bg       → Fundo do botão "Registrar"
header-register-text     → Texto do botão "Registrar"
header-login-bg          → Fundo do botão "Entrar"
header-login-text        → Texto do botão "Entrar"
sidebar-bg               → Fundo do sidebar
sidebar-links            → Cor dos links/items
sidebar-titles           → Títulos de seção
sidebar-button-bg        → Fundo de botões
sidebar-button-text      → Texto de botões
sidebar-cta-bg           → Fundo do CTA
sidebar-cta-text         → Texto do CTA
footer-bg-primary        → Fundo principal
footer-bg-secondary      → Fundo secundário
footer-links             → Cor dos links
footer-titles            → Títulos
footer-texts             → Textos
footer-button-bg         → Fundo de botões
footer-button-text       → Texto de botões

AUTH — Modais de login/registro​

auth-bg-primary          → Fundo do modal
auth-bg-inputs           → Fundo dos inputs
auth-text-inputs         → Texto dos inputs
auth-bg-close            → Fundo do botão fechar
auth-icon-close          → Cor do ícone fechar
auth-links               → Cor dos links
auth-titles              → Títulos
auth-texts               → Textos
auth-button-bg           → Fundo do botão principal
auth-button-text         → Texto do botão principal
auth-backdrop            → Cor do backdrop (overlay)

GAME — Cards de jogos​

game-title               → Título do jogo
game-subtitle            → Subtítulo/provider
game-button-bg           → Fundo do botão "Jogar"
game-button-text         → Texto do botão "Jogar"
game-overlay             → Overlay no hover
game-icon                → Cor de ícones

Como usar no CSS​

// Classes Tailwind geradas automaticamente
<div className="bg-header-bg text-header-links">
<button className="bg-auth-button-bg text-auth-button-text">
<span className="text-sidebar-titles">