TMF
Repositories
2
 Projects
2
 Packages
109

@tmf/design-tokens (0.2.0)

Published 2026-06-15 20:00:19 -03:00 by tarcisio

Installation

@tmf:registry=
npm install @tmf/design-tokens@0.2.0
"@tmf/design-tokens": "0.2.0"

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: /Volumes/DcokerSSD/DEVELOP/docs/design-tokens-*. 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}/<brand>/

Saídas: build/web/<brand>/tokens.css (CSS vars), build/android/<brand>/Tokens.kt (Compose), build/ios/<brand>/Tokens.swift (SwiftUI). Todos os produtos geram as 3 plataformas, mesmo onde o app ainda não existe (Hub/Priceshow sem iOS = app a construir).

Adicionar um produto (brand pack)

  1. tokens/brands/<produto>/brand.json com os slots core-brand-* (ver §3 da spec).
  2. npm run build — o build.js detecta 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
Details
npm
2026-06-15 20:00:19 -03:00
150
9.4 KiB
Assets (1)
design-tokens-0.2.0.tgz 9.4 KiB
Versions (11) View all
0.5.3 2026-06-29
0.5.2 2026-06-29
0.5.1 2026-06-29
0.5.0 2026-06-28
0.4.0 2026-06-28