@apllos-ds/clmfundo

Design system de CLM Fundo de Investimento — tokens reais, empacotados como dependência npm instalável. Gerado por design-system-generator.

Instalação (sem registry)

Este pacote não está publicado em nenhum registry. Instale por arquivo:

# a partir do .tgz baixado
npm install ./apllos-ds-clmfundo-<versao>.tgz

# ou por caminho de pasta
npm install file:/caminho/para/clmfundo

Uso

Tokens como CSS (custom properties)

import '@apllos-ds/clmfundo/tokens.css'; // expõe :root { --color-palette-brand-red: ...; --font-family-base: ... }

.botao { background: var(--color-palette-brand-red); font-family: var(--font-family-base); }

Tokens em JS/TS

import tokens from '@apllos-ds/clmfundo/tokens.json' assert { type: 'json' }; // objeto aninhado
import { ColorPaletteBrandRed } from '@apllos-ds/clmfundo';                            // constantes tipadas (tokens.js)

Componentes React

Requer react (>=17) no seu projeto. Os componentes já vêm pré-compilados (sem JSX na sintaxe) — funcionam em qualquer bundler sem configuração especial, mesmo com babel-loader excluindo node_modules (padrão do webpack/CRA).

Importe as duas folhas de estilo — os componentes usam classes (.ap-button etc.) que só existem em components.css, e essas classes só têm cor/fonte/raio corretos por causa das variáveis definidas em tokens.css. Sem os dois, o componente renderiza sem nenhum estilo (um <button> puro do navegador).

import '@apllos-ds/clmfundo/tokens.css';               // 1x na raiz do app (variáveis :root)
import '@apllos-ds/clmfundo/components/components.css'; // 1x na raiz do app (classes dos componentes)
import { Button, Card, NavBar } from '@apllos-ds/clmfundo/components';

<Button variant="primary">Enviar</Button>

Todos os valores foram extraídos do design system real de CLM Fundo de Investimento; nada é sintético.