DS Grupo RKB

Design System multi-marca do Grupo RKB Engenharia (RKB Engenharia, Camargo Gallo e Fibramfer).

• Componentes: Vue 3 puro (SFC + Vite + TypeScript), sem API de framework.
• Estilização: Tailwind v4 + tokens em CSS variables (primitivos + semânticos).
• Docs/galeria/testes: Storybook (1 hub, seletor de 3 marcas).
• Ver contexto completo em docs/adr/001-ds-code-first-multi-marca.md.

Scripts

| Comando | Descrição | | ------------------- | ----------------------------------------------------------- | | npm run dev | Dev playground (Vite) | | npm run storybook | Storybook em localhost:6006 (seletor de marca na toolbar) | | npm run build:lib | Build da lib em dist/ (index.js + style.css + *.d.ts) | | npm run test | Testes unitários (Vitest + Vue Test Utils) | | npm run lint | ESLint | | npm run typecheck | vue-tsc |

Consumo como lib

# no app consumidor
npm install ds-grupo-rkb

Para desenvolver o DS e o consumidor juntos, o caminho file:../ds-grupo-rkb pode ser usado apenas como snapshot local. O fluxo oficial de produção é o registry npm.

// no app
import { Button, Tag, Container } from 'ds-grupo-rkb'
import 'ds-grupo-rkb/style.css'

Fontes: O DS usa Playfair Display + Source Sans 3 via Google Fonts. Adicione no <head> do consumidor:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Source+Sans+3:wght@400;500;600;700&display=swap" rel="stylesheet" />

Aplicando a marca (theming)

As 3 marcas são modos por escopo no <body>: data-theme="rkb" (padrão), data-theme="camargo-gallo", data-theme="fibramfer".

<body data-theme="camargo-gallo"></body>

Os componentes leem apenas tokens semânticos (--color-primary-500, --color-surface, ...); cada marca remapeia esses tokens para a paleta própria em src/tokens/themes.css.

Tokens são CSS-only (sem tipagem TS)

Os tokens (cores, tipografia, motion, spacing, radius, shadows) existem apenas como CSS custom properties no @theme do Tailwind. Não há tipagem TypeScript para eles — o dts plugin gera .d.ts para componentes Vue mas não para tokens CSS. Ao consumir, use as utilitárias Tailwind (bg-primary-500, text-ink, duration-250) ou referencie var(--color-*) diretamente em CSS.

Dev: ao alterar componentes/tokens, rode npm run build:lib e, no consumidor, npm run dev -- --force (ou reinstale) para refletir as mudanças. Veja docs/COMMANDS.md para o fluxo completo DS → consumidor e as frases de comando canônicas.