Tokens de Design

Todos os tokens são definidos em packages/brand/tokens/ e distribuídos via @retents/brand.

Como importar

Em TypeScript/JavaScript

import { colors, typography, effects, spacing } from "@retents/brand/tokens";

// Exemplo de uso
const accentColor = colors.brand["500"]; // "#6366f1"
const navBlur = effects.blur.nav;        // "16px"

Via Tailwind (automático em todos os apps)

// apps/*/tailwind.config.mjs
import brandPreset from "@retents/brand/tailwind";

export default {
  presets: [brandPreset],
  content: ["./src/**/*.{astro,mdx,ts}"],
};

Após configurar o preset, todos os tokens ficam disponíveis como classes Tailwind:

Classes Tailwind disponíveis

Cores de fundo

• bg-background — #000000
• bg-background-surface — #0A0A0A
• bg-background-elevated — #111111

Texto

• text-text-primary — #FFFFFF
• text-text-secondary — rgba(255,255,255,0.70)
• text-text-muted — rgba(255,255,255,0.45)
• text-text-disabled — rgba(255,255,255,0.25)

Cor de marca

• text-brand-400, bg-brand-500, border-brand-500, etc.

Blur (backdrop-filter)

• backdrop-blur-card — 12px
• backdrop-blur-nav — 16px
• backdrop-blur-modal — 20px

Tipografia

• text-display-2xl a text-display-sm
• text-xl, text-lg, text-md, text-sm, text-xs
• font-regular, font-medium, font-semibold, font-bold, font-extrabold

Border radius

• rounded-sm — 6px
• rounded-md — 10px
• rounded-lg — 14px
• rounded-xl — 20px
• rounded-full — 9999px

Sombras

• shadow-card
• shadow-glow

Onde os tokens são definidos

Arquivo	Tokens
packages/brand/tokens/colors.ts	Cores de fundo, borda, texto e marca
packages/brand/tokens/typography.ts	Fontes, tamanhos e pesos
packages/brand/tokens/effects.ts	Blur, sombras e border radius
packages/brand/tokens/spacing.ts	Escala de espaçamento
packages/brand/tailwind/preset.ts	Composição do preset Tailwind