@tmf/design-tokens (0.3.5)
Installation
@tmf:registry=npm install @tmf/design-tokens@0.3.5"@tmf/design-tokens": "0.3.5"About this package
@tmf/design-tokens
Fonte única de design tokens TMF (W3C DTCG) compilada pelo Style Dictionary para
web · Android · iOS. Padrão-alvo canônico: ~/.claude/standards/DESIGN_SYSTEM.md.
Spec + inventário: docs/SPEC.md · docs/audit-2026-06.md · docs/inventory-2026-06.json. Issue: TH-56486.
⚠️ Status: esqueleto/prova de pipeline. As escalas não-cor (spacing, radius, typography, shadow, motion, z-index, breakpoints, opacity, ícones) e os primitivos neutros/feedback já são canônicos (convergência 7/7). O brand pack
tmfé PROVISÓRIO — os valores finais dependem das 14 decisões (§8 da spec) + aprovação. Os outros 6 brand packs (tmf9, hub, dani, helpcor, fina, tennis, priceshow) entram quando as decisões forem batidas.
Estrutura
tokens/
├── global/ # base compartilhada (NÃO de marca)
│ ├── color/ primitive.json · feedback.json · semantic.json · component.json
│ ├── scale.json # space · radius · opacity · icon · breakpoint · z
│ ├── typography.json · effect.json
└── brands/<produto>/ # overlay de marca (só core-brand-*) — futuramente + modules/
└── tmf/brand.json
build.js # Style Dictionary: brand × plataforma
3 tiers (DTCG): primitivo (core-*) → semântico (color-*) → componente
(color-bg-button-primary, com estados hover/pressed/disabled/focus). Regra de ouro:
componente referencia só semântico (preservado via outputReferences no CSS).
Build
npm install
npm run build # gera build/{web,android,ios,pdf}/<brand>/
Saídas: build/web/<brand>/tokens.css (CSS vars), build/android/<brand>/Tokens.kt
(Compose), build/ios/<brand>/Tokens.swift (SwiftUI), build/pdf/<brand>/report.css
(stylesheet de relatório). Todos os produtos geram as 4 plataformas, mesmo onde o
app ainda não existe (Hub/Priceshow sem iOS = app a construir).
PDF (relatórios backend)
Os backends TMF exportam relatórios em PDF pela canônica weasyprint
(libraries.json § pdf-generate): o relatório é um template HTML+CSS — e esse CSS
agora é token, não hardcode. tokens/global/pdf.json define a anatomia do
relatório tabular (margens de página em cm, escala tipográfica em pt, paddings,
zebra, grid) no tier componente, referenciando só semânticos — em particular o
header de tabela usa {color.brand-primary}, então o PDF de cada produto sai
automaticamente na cor da própria marca (Fina, DANI, HelpCor etc.), sem nenhum
ajuste no código Python. O build gera build/pdf/<brand>/report.css autocontido
(valores resolvidos, sem var()), porque o weasyprint renderiza um HTML string único
sem cascade externa; o helper backend (ex.: Fina backend/app/utils/pdf.py) embute
esse CSS no template jinja2. Mudou a identidade da marca? Rebuild dos tokens e todos
os relatórios da empresa acompanham — mesma sinergia dos componentes web/mobile,
estendida ao papel.
Adicionar um produto (brand pack)
tokens/brands/<produto>/brand.jsoncom os slotscore-brand-*(ver §3 da spec).npm run build— obuild.jsdetecta a pasta e gera as 3 plataformas.
Consumo (planejado)
web → npm (@tmf/design-tokens) · Android → Gradle/Maven · iOS → SPM. Registry: Forgejo
packages (a confirmar) ou tarball release asset.
Dependencies
Development dependencies
| ID | Version |
|---|---|
| style-dictionary | ^4.3.0 |