multiui — Contrato CSS Multi UI

Linguagem de Interface CSS-first. Framework-agnostic. OKLCH nativo.

3 camadas · 18 componentes · 255 tokens · 136 classes

Início rápido

CDN

<!-- Sistema completo -->
<link rel="stylesheet" href="https://multi-ui-cdn.web.app/latest/system.min.css" />

<!-- Apenas tokens -->
<link rel="stylesheet" href="https://multi-ui-cdn.web.app/latest/tokens.min.css" />

Com versão: https://multi-ui-cdn.web.app/v2.1.2/system.min.css

npm

npm install @grupomultilaser/multi-ui

@import '@grupomultilaser/multi-ui';           /* system.css */
@import '@grupomultilaser/multi-ui/tokens';    /* tokens.css */

Uso

Aplique classes diretamente no HTML:

<button class="btn btn-primary">Salvar</button>
<div class="card">
  <h2 class="card-title">Card</h2>
</div>

Use tokens no seu próprio CSS:

.painel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

Desenvolvimento local

pnpm install
pnpm run lint:css      # stylelint
pnpm run build          # gera tokens.css + dist/
pnpm run validate       # valida consistência
pnpm run generate-token-matrix  # atualiza docs/

Comandos

| Script | Descrição | |---|---| | lint:css | Lint de todos os CSS em src/ | | build | Build e minificação para dist/ | | validate | Verifica consistência entre CSS, extract e schema | | extract | Extrai metadados do CSS | | generate-token-matrix | Regenera docs/tokens-matrix.md |

Estrutura do projeto

multiui/
├── src/            # Código fonte do contrato CSS
│   ├── system.css  #   Entry point (importa tudo)
│   ├── tokens.css  #   Bundle de primitivas (gerado)
│   ├── tokens/     #   Módulos de tokens primitivos
│   │   ├── colors.css
│   │   ├── spacing.css
│   │   ├── typography.css
│   │   ├── radii.css
│   │   ├── shadows.css
│   │   ├── motion.css
│   │   └── themes/dark.css
│   ├── semantic.css     # Tokens semânticos + de componente
│   └── components/      # 18 arquivos CSS de componentes
├── scripts/        # Build, validação, release
├── dist/           # Artefatos de build (origem do CDN)
├── docs/           # Matriz de tokens gerada
├── DESIGN.md       # Documentação de decisões de design
├── firebase.json   # Config de hosting Firebase (CDN)
└── package.json

Repositórios

• Contrato: multiui (este repositório)
• Portal de documentação: multiui-site — docs Astro em https://multi-ui.web.app

Design

Veja DESIGN.md para princípios de design, arquitetura de tokens, linguagem visual e governança.

Licença

Propriedade exclusiva. Team Multitech.