Flui Design System

Design system multiplataforma. Os tokens (em JSON) são a fonte única da verdade; o Style Dictionary gera a saída para cada plataforma. Hoje: React + Vite. Amanhã: Flutter (sem duplicar tokens).

Arquitetura

tokens/*.json            ← FONTE DA VERDADE (platform-agnostic)
   │  style-dictionary.config.mjs
   ▼
src/styles/tokens.css    ← CSS vars (--flui-*)   [web, gerado]
src/lib/tokens/tokens.ts ← manifesto p/ o editor [web, gerado]
build/flutter/*.dart     ← constantes Dart        [futuro, gerado]

src/lib/                 ← biblioteca de componentes (React + CVA)
src/showcase/            ← plataforma de showcase + editor de tokens ao vivo

Camadas de token:

1. Primitivos (color.brand.500) — paleta crua, não usar em componentes.
2. Semânticos (semantic.primary.default) — intenção; é o que os componentes consomem. Referenciam primitivos via var(), então editar um primitivo cascateia para os semânticos automaticamente.

Os componentes nunca usam valores hard-coded — só utilitários do Tailwind mapeados para as CSS vars em src/styles/global.css (bg-primary, text-fg, rounded-md, etc.).

Scripts

| Comando | O que faz | | -------------------- | ---------------------------------------------------- | | npm run dev | Gera tokens + sobe o showcase (Vite) | | npm run build | Gera tokens + typecheck + build de produção | | npm run tokens | Regenera CSS/TS a partir de tokens/*.json | | npm run tokens:watch | Regenera os tokens em watch enquanto edita o JSON |

Showcase + editor ao vivo

npm run dev → o painel esquerdo lista todos os tokens. Editar um valor sobrescreve a CSS var correspondente em runtime (setProperty), os componentes reagem na hora, e a alteração é salva no localStorage.

• Exportar JSON baixa só os tokens alterados (keyed por path, ex. "color.brand.500"), pronto para revisar e aplicar nos tokens/*.json.
• Resetar (por token ou tudo) remove o override e volta ao valor original.

O editor é uma camada de experimentação. Para tornar uma mudança permanente, aplique o valor no JSON de origem e rode npm run tokens.

Como estender

Novo token: edite/crie um arquivo em tokens/ e rode npm run tokens. Para expô-lo como utilitário do Tailwind, adicione o mapeamento no bloco @theme de src/styles/global.css.

Novo componente: crie src/lib/components/<Nome>/<Nome>.tsx usando cva para variantes e apenas utilitários baseados em token; exporte em src/lib/components/index.ts; adicione uma seção em src/showcase/Gallery.tsx.

Suporte a Flutter: descomente o bloco flutter em style-dictionary.config.mjs. Os mesmos tokens/*.json passam a gerar build/flutter/flui_tokens.dart.