Theming

O sistema de temas usa Tailwind CSS v3 com tokens organizados em objetos aninhados por secao. Forks sobrescrevem theme.config.ts para personalizar cores.

theme.config.ts

A estrutura usa objetos aninhados (nested), nao chaves flat com prefixo. Cada secao do layout tem seu proprio objeto de cores:

// app/config/theme/colors.ts
export const themeColors = {
  // Cores globais (top-level)
  primary: '#a3d712',
  'bg-primary': '#1a1d1e',
  secondary: '#a0a0a0',
  'bg-secondary': '#212425',
  texts: '#ffffff',
  links: '#a3d712',
  titles: '#ffffff',
  'button-bg': '#a3d712',
  'button-text': '#1a1d1e',
  success: '#22c55e',
  error: '#ef4444',
  warning: '#f59e0b',
  info: '#3b82f6',

  // Game cards
  game: {
    title: '#ffffff',
    subtitle: '#a0a0a0',
    'button-bg': '#a3d712',
    'button-text': '#1a1d1e',
    overlay: 'rgba(0,0,0,0.6)',
    icon: '#ffffff',
  },

  // Header
  header: {
    bg: '#1a1d1e',
    links: '#ffffff',
    texts: '#a0a0a0',
    'register-bg': '#a3d712',
    'register-text': '#1a1d1e',
    'login-bg': 'transparent',
    'login-text': '#ffffff',
  },

  // Sidebar
  sidebar: {
    bg: '#212425',
    links: '#ffffff',
    titles: '#a0a0a0',
    'button-bg': '#a3d712',
    'button-text': '#1a1d1e',
    'cta-bg': '#a3d712',
    'cta-text': '#1a1d1e',
  },

  // Footer
  footer: {
    'bg-primary': '#1a1d1e',
    'bg-secondary': '#212425',
    links: '#a0a0a0',
    titles: '#ffffff',
    texts: '#a0a0a0',
    'button-bg': '#a3d712',
    'button-text': '#1a1d1e',
  },

  // Auth modals
  auth: {
    'bg-primary': '#212425',
    'bg-inputs': '#323637',
    'text-inputs': '#ffffff',
    'bg-close': '#323637',
    'icon-close': '#ffffff',
    links: '#a3d712',
    titles: '#ffffff',
    texts: '#a0a0a0',
    'button-bg': '#a3d712',
    'button-text': '#1a1d1e',
    backdrop: 'rgba(0,0,0,0.5)',
  },

  // Payments modals
  payments: {
    'bg-primary': '#212425',
    titles: '#ffffff',
    texts: '#a0a0a0',
    'button-bg': '#a3d712',
    'button-text': '#1a1d1e',
  },
};

Tokens por secao

Cores globais (top-level)

Token	Classe Tailwind	Uso
primary	bg-primary, text-primary	Cor primaria da marca
bg-primary	bg-bg-primary	Fundo principal do app
secondary	text-secondary	Textos secundarios
bg-secondary	bg-bg-secondary	Fundo secundario
texts	text-texts	Cor de texto padrao
links	text-links	Cor de links
titles	text-titles	Cor de titulos
button-bg	bg-button-bg	Fundo de botoes globais
button-text	text-button-text	Texto de botoes globais
success	bg-success, text-success	Sucesso
error	bg-error, text-error	Erro
warning	bg-warning, text-warning	Aviso
info	bg-info, text-info	Informativo

Game (cards de jogos)

Token	Classe Tailwind	Uso
game.title	text-game-title	Titulo do card
game.subtitle	text-game-subtitle	Subtitulo/provider
game.button-bg	bg-game-button-bg	Botao "Jogar"
game.button-text	text-game-button-text	Texto do botao
game.overlay	bg-game-overlay	Overlay no hover
game.icon	text-game-icon	Icones do card

Header

Token	Classe Tailwind	Uso
header.bg	bg-header-bg	Fundo do header
header.links	text-header-links	Links de navegacao
header.texts	text-header-texts	Textos auxiliares
header.register-bg	bg-header-register-bg	Botao registrar (fundo)
header.register-text	text-header-register-text	Botao registrar (texto)
header.login-bg	bg-header-login-bg	Botao login (fundo)
header.login-text	text-header-login-text	Botao login (texto)

Sidebar

Token	Classe Tailwind	Uso
sidebar.bg	bg-sidebar-bg	Fundo da sidebar
sidebar.links	text-sidebar-links	Links de menu
sidebar.titles	text-sidebar-titles	Titulos de secao
sidebar.button-bg	bg-sidebar-button-bg	Botao na sidebar
sidebar.button-text	text-sidebar-button-text	Texto do botao
sidebar.cta-bg	bg-sidebar-cta-bg	CTA especial (fundo)
sidebar.cta-text	text-sidebar-cta-text	CTA especial (texto)

Footer

Token	Classe Tailwind	Uso
footer.bg-primary	bg-footer-bg-primary	Fundo principal
footer.bg-secondary	bg-footer-bg-secondary	Fundo secundario
footer.links	text-footer-links	Links
footer.titles	text-footer-titles	Titulos
footer.texts	text-footer-texts	Textos
footer.button-bg	bg-footer-button-bg	Botao (fundo)
footer.button-text	text-footer-button-text	Botao (texto)

Auth (modais de autenticacao e validacao)

Token	Classe Tailwind	Uso
auth.bg-primary	bg-auth-bg-primary	Fundo do modal
auth.bg-inputs	bg-auth-bg-inputs	Fundo dos inputs e selects
auth.text-inputs	text-auth-text-inputs	Texto dos inputs
auth.bg-close	bg-auth-bg-close	Fundo do botao fechar
auth.icon-close	text-auth-icon-close	Icone do botao fechar
auth.links	text-auth-links	Destaques, labels, badges, carousel ativo
auth.titles	text-auth-titles	Titulos dos modais
auth.texts	text-auth-texts	Textos secundarios, subtitulos
auth.button-bg	bg-auth-button-bg	Botao primario (fundo)
auth.button-text	text-auth-button-text	Botao primario (texto)
auth.backdrop	bg-auth-backdrop	Overlay backdrop

Todos os modais de validacao (ValidationBlockerOverlay, ValidationStepsModal, PasswordValidationModal) e o Modal base usam exclusivamente tokens auth.*. Ao trocar essas cores no fork, todos os modais se adaptam automaticamente.

Payments (modais de pagamento)

Token	Classe Tailwind	Uso
payments.bg-primary	bg-payments-bg-primary	Fundo do modal
payments.titles	text-payments-titles	Titulos
payments.texts	text-payments-texts	Textos
payments.button-bg	bg-payments-button-bg	Botao (fundo)
payments.button-text	text-payments-button-text	Botao (texto)

---

tailwind.config.ts

O Tailwind config usa ESM import (nao require):

// tailwind.config.ts
import { themeColors } from './app/config/theme.config';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import aspectRatio from '@tailwindcss/aspect-ratio';

export default {
  content: ['./app/**/*.{ts,tsx}'],
  important: true,
  darkMode: 'class',
  theme: {
    // SUBSTITUI theme.colors completamente — sem paleta default do Tailwind
    colors: themeColors,
    extend: {
      screens: {
        xxs: '390px',
        xs: '368px',
      },
    },
  },
  plugins: [forms, typography, aspectRatio, textFill],
};

aviso

O theme.colors substitui completamente a paleta default do Tailwind (sem extend). Isso significa que classes como bg-white, text-gray-500, bg-blue-600 etc. nao existem. Todas as cores devem usar os tokens definidos em themeColors.

Plugins

Plugin	Uso
@tailwindcss/forms	Reset de estilos de formulario
@tailwindcss/typography	Classe prose para conteudo rich-text
@tailwindcss/aspect-ratio	aspect-w-* / aspect-h-* para iframes

Custom screens

Breakpoint	Tamanho	Uso
xxs	390px	iPhone 12/13/14 Pro
xs	368px	Devices menores

Font

A fonte principal e Montserrat, self-hosted via @fontsource/montserrat (nao Google Fonts CDN).

// Importada no entry point
import '@fontsource/montserrat/400.css';
import '@fontsource/montserrat/500.css';
import '@fontsource/montserrat/600.css';
import '@fontsource/montserrat/700.css';

Definida no Tailwind config como fontFamily.sans e no CSS global.

Como personalizar em um fork

1. Copie app/config/theme/colors.ts para o fork
2. Altere as cores desejadas (mantendo a estrutura aninhada)
3. Pronto — Tailwind compila automaticamente com os novos tokens
4. Para adicionar novas secoes, adicione um novo objeto aninhado e use as classes geradas (bg-{secao}-{token}, text-{secao}-{token})