Theming

As cores da sua marca vivem em app/config/theme/colors.ts. O Tailwind lê esse arquivo em build-time e gera as classes de utilitário automaticamente.

Como funciona

O arquivo exporta themeColors — um objeto aninhado (nested), não um mapa flat com prefixos:

Tokens globais ficam no nível superior, sem prefixo (primary, bg-primary, texts, titles, button-bg, …).
Tokens por superfície ficam dentro de objetos aninhados (header, sidebar, footer, auth, …).

O Tailwind converte cada token em classe:

Token no arquivo	Classes geradas
`primary`	`bg-primary`, `text-primary`, `border-primary`
`header.bg`	`bg-header-bg`
`auth.links`	`text-auth-links`
`bottomNotification.cta-bg`	`bg-bottom-notification-cta-bg`

aviso

Escrever chaves flat como 'header-bg' ou 'default-primary' não funciona — o tipo ThemeColors não aceita e o Tailwind não emite nenhuma classe pra elas.

Editando as cores

// app/config/theme/colors.ts
export const themeColors = {
  // ── Globais (nível superior, sem prefixo) ────────────────
  primary: "#a3d712",
  "bg-primary": "#212425",
  secondary: "#f18825",
  "bg-secondary": "#323637",
  texts: "#fdffff",
  links: "#fdffff",
  titles: "#fdffff",
  "button-bg": "#a3d712",
  "button-text": "#212425",
  accent: "#a3d712",
  success: "#22bb33",
  money: "#beeb0a",
  error: "#f1416c",
  warning: "#ff9f43",
  info: "#0096ff",

  // ── Header ───────────────────────────────────────────────
  header: {
    bg: "#323637",
    links: "#fdffff",
    texts: "#fdffff",
    "register-bg": "#a3d712",
    "register-text": "#212425",
    "login-bg": "#323637",
    "login-text": "#fdffff",
    // ... demais tokens do header
  },

  // ── Sidebar ──────────────────────────────────────────────
  sidebar: {
    bg: "#212425",
    links: "#fdffff",
    titles: "#fdffff",
    icon: "#fdffff",
    "button-bg": "#3f4142",
    "button-text": "#fdffff",
    "cta-bg": "#36a979",
    "cta-text": "#fdffff",
  },

  // ── Auth (modais de login/registro/validação) ────────────
  auth: {
    "bg-primary": "#323637",
    "bg-inputs": "#424344",
    "text-inputs": "#fdffff",
    links: "#a3d712",
    titles: "#fdffff",
    texts: "#fdffff",
    "button-bg": "#a3d712",
    "button-text": "#212425",
    backdrop: "#000000",
    // ...
  },

  // ... demais grupos (ver tabela abaixo)
} as const;

export type ThemeColors = typeof themeColors;

Depois de salvar, reinicie o dev server (pnpm dev). O tailwind.config.js lê esse arquivo uma única vez, quando o processo sobe — HMR não recarrega o tema.

:::caution Restrições de formato O tailwind.config.js faz o parse desse arquivo em build-time (fora do pipeline TS), então ele exige a forma literal export const themeColors = { … } as const; com apenas valores primitivos. Não use import, spread (...), variáveis nem valores computados dentro do objeto. :::

Grupos de tokens

São 13 grupos: os globais no nível superior + 12 objetos aninhados. A lista completa de tokens de cada grupo está no próprio app/config/theme/colors.ts.

Grupo	Prefixo das classes	O que afeta
(nível superior)	nenhum — `bg-primary`, `text-texts`, …	Cores globais: `primary`, `secondary`, `bg-primary`, `bg-secondary`, `texts`, `links`, `titles`, `button-bg`, `button-text`, `accent`, `success`, `money`, `error`, `warning`, `info`
`game`	`game-*`	Cards de jogo, overlays, balloon de estatística
`header`	`header-*`	Barra superior: nav, botões de login/registro/depósito, saldo, avatar
`sidebar`	`sidebar-*`	Menu lateral: fundo, links, títulos, botões, CTA
`footer`	`footer-*`	Rodapé
`auth`	`auth-*`	Modais de autenticação e de validação (ver Validations)
`payments`	`payments-*`	Modais de depósito e saque
`topbar`	`topbar-*`	Barra de notificação no topo da página
`bottomNotification`	`bottom-notification-*`	CTA flutuante no rodapé (mobile)
`loader`	`loader-*`	Barra de loading e spinners
`ftd-cashback`	`ftd-cashback-*`	Modais de retenção pós-primeiro-depósito
`ftd-offer`	`ftd-offer-*`	Modal de oferta + widget de countdown
`manifest`	(nenhuma)	`theme_color` / `background_color` do `manifest.json` (PWA) — consumido direto, não vira classe Tailwind

:::info A paleta default do Tailwind não existe O theme.colors do Tailwind é substituído por themeColors (sem extend). Classes como bg-red-500, text-zinc-400 ou bg-gray-100 não são geradas. As únicas cores fora do tema são transparent, current, white e black. :::

Fontes

Fontes não ficam em colors.ts. Elas têm arquivos próprios:

Arquivo	Export	Conteúdo
`app/config/theme/fonts.ts`	`themeFonts`	`family` (família principal) e `fallback` (família com métricas ajustadas, evita CLS no swap)
`app/config/theme/font-preloads.ts`	`fontPreloads`	Arquivos de fonte que entram como `<link rel="preload">`

// app/config/theme/fonts.ts
export const themeFonts = {
  family: "Montserrat",
  fallback: "Montserrat Fallback",
} as const;

themeFonts alimenta fontFamily.sans do Tailwind e a custom property --font-sans no :root — trocar esse arquivo troca a fonte de toda a UI. As famílias declaradas aqui precisam ter um @font-face (ou @import do @fontsource) correspondente em app/tailwind.css.

Outros arquivos do tema

Além de cores e fontes, app/config/theme/ traz tokens não-cromáticos, todos overridáveis por marca:

Arquivo	Export	Conteúdo
`sizes.ts`	`layoutConfig`	`contentMaxWidth` (vira `max-w-content`) e dimensões do logo por área (desktop, mobile, sidebar, footer)
`header.ts`	`headerStyle`	Ajustes visuais do header
`mobile-bottom-nav.ts`	`mobileBottomNavStyle`	Ajustes visuais da barra inferior mobile
`search-input.ts`	`searchInputStyle`	Ajustes visuais do campo de busca

Customizando por marca

Crie o arquivo espelhado dentro do diretório da sua marca:

overrides/<brand-key>/app/config/theme/colors.ts

O <brand-key> é derivado do ORIGIN_DOMAIN (minúsculo, pontos viram hífens): minhamarca.com → minhamarca-com.

:::danger Override é substituição do arquivo inteiro O sistema de override não faz deep-merge: se o arquivo existe no diretório da marca, ele substitui o do base por completo. O seu colors.ts precisa declarar todos os tokens — qualquer token ausente chega como undefined no Tailwind.

O caminho mais seguro é copiar app/config/theme/colors.ts inteiro pro seu diretório de override e alterar só os valores. :::

Dicas

Use a cor primária da marca em primary, button-bg, header.register-bg e auth.button-bg — são os pontos que mais aparecem.
Mantenha contraste suficiente entre fundos (bg-primary, bg-secondary) e textos (texts, titles).
money é o verde de valores monetários de ganho — normalmente derivado do seu verde de marca, um pouco mais amarelado que success.
Teste desktop e mobile depois de mexer nas cores: header, sidebar e a barra inferior mobile usam grupos diferentes.

Como funciona​

Editando as cores​

Grupos de tokens​

Fontes​

Outros arquivos do tema​

Customizando por marca​

Dicas​