Tokens de Design

Os tokens de design são a única fonte de verdade para todas as decisões visuais no CUCL. São definidos em src/tokens/ como constantes TypeScript e expostos como propriedades CSS personalizadas em tempo de execução através de @cookest/ui/styles.css.

Importar tokens

import { colors, spacing, typography, effects } from "@cookest/ui/tokens";

Cada ficheiro de tokens exporta também tipos TypeScript para total segurança de tipos:

import type { ColorToken, SpacingToken, FontFamilyToken } from "@cookest/ui/tokens";

Cores

Paleta de marca ancorada no verde-salva (#7A9A65). Todos os tokens têm variantes para modo claro e escuro.

Primário

A escala completa do primário vai de primary.50 (#F0F5EC) a primary.950 (#1A2B14).

Cores semânticas

Cores de estado

Utilizar variáveis CSS nos componentes

Os componentes referenciam propriedades CSS personalizadas — nunca valores hexadecimais codificados. O modo escuro funciona automaticamente quando a classe .dark é aplicada a um elemento pai:

// ✅ Correto — usa token
className="text-[var(--ck-heading)]"

// ❌ Errado — cor codificada
className="text-[#1C3A2A]"

Tipografia

Dois tipos de letra são utilizados em todo o sistema:

Regra: Playfair Display está reservado apenas para títulos de Modal e cabeçalhos de grande destaque. Todos os elementos de interface utilizam Inter.

Escala de tipos

Pesos de letra

Espaçamento

Baseado numa grelha de 4px com aliases semânticos para margens e preenchimentos de componentes.

Escala base

Aliases semânticos

Efeitos

Raio de borda

Sombras

Transições

Escala de z-index

Referência de propriedades CSS personalizadas

Todos os tokens semânticos mapeiam para variáveis CSS aplicadas em :root (claro) e .dark:

:root {
  --ck-primary: #7a9a65;
  --ck-primary-light: #b4cc9e;
  --ck-primary-dark: #4e7a3a;
  --ck-bg: #f5f5f0;
  --ck-bg-card: #fafaf6;
  --ck-heading: #1c3a2a;
  --ck-text: #3d5040;
  --ck-text-muted: #7a8e74;
  --ck-border: #e4ebe0;
  --ck-surface: #ffffff;
  --ck-success: #4caf50;
  --ck-warning: #ff9800;
  --ck-error: #f44336;
  --ck-info: #2196f3;
}