Instalar e usar

Os tokens estão publicados no npm como @request-labs/tokens. Funcionam em qualquer stack com Node: Laravel+Blade, Next.js, Nuxt/Vue, Astro, React, Svelte, etc.

1. Instalar

pnpm add @request-labs/tokens
# ou npm install @request-labs/tokens
# ou yarn add @request-labs/tokens

2. Usar com Tailwind (recomendado)

Substitui a secção theme.extend (ou adiciona se estiver vazia).

// tailwind.config.js (ou .cjs)
const tokens = require('@request-labs/tokens/tailwind');

module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx,vue,blade.php}'],
  theme: {
    extend: {
      colors: tokens.colors,
      spacing: tokens.spacing,
      fontFamily: tokens.fontFamily,
      fontSize: tokens.fontSize,
      fontWeight: tokens.fontWeight,
      lineHeight: tokens.lineHeight,
      borderRadius: tokens.borderRadius,
      boxShadow: tokens.boxShadow,
    },
  },
};

A partir daqui usas as classes Tailwind normais: bg-rose-500, text-slate-700, p-4, rounded-md.

Usar com CSS puro (sem Tailwind)

/* Qualquer CSS global (ex.: app.css, main.css) */
@import "@request-labs/tokens/css";

.button {
  background: var(--color-rose-500);
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
}

Acesso programático (JS/TS)

import tokens from '@request-labs/tokens';

// Acesso programático à árvore inteira
console.log(tokens.color.rose['500']);   // "#ff3457"
console.log(tokens.spacing['4']);        // "16px"
console.log(tokens.radius.md);           // "8px"

Exports disponíveis

Path	Para que serve
`@request-labs/tokens`	Default (ESM) — árvore aninhada de todos os tokens. Tipos TypeScript incluídos.
`@request-labs/tokens/css`	Ficheiro CSS com custom properties (--color-rose-500, etc.). Importa em CSS ou `<link>`.
`@request-labs/tokens/tailwind`	Objecto pronto para `theme.extend` no `tailwind.config.js`. Formato CommonJS.
`@request-labs/tokens/json`	Árvore em JSON puro. Útil para gerar documentação, scripts, introspection.

Versionamento

Semver. Breaking changes só em major.

Patch (0.0.X): correcções, ajustes de valores que não partem nada
Minor (0.X.0): tokens novos, sem remover nem renomear existentes
Major (X.0.0): remoções, renomeações, restruturação

Vê o package atual em npmjs.com/package/@request-labs/tokens.

Componentes

Os componentes (Button, Input, etc.) são copy/paste, não uma lib. Copia o código da página Componentes e mete no teu projecto. Cada equipa é dona do próprio código e adapta à sua stack. Os tokens garantem que ficam visualmente iguais em todos os produtos.