multiui — Contrato CSS Multi UI

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

3 camadas · 18 componentes · 273 tokens · 135 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.2.2/system.min.css

npm

npm install @grupomultilaser/multi-ui

@import '@grupomultilaser/multi-ui';             /* system.css */
@import '@grupomultilaser/multi-ui/tokens';                /* tokens.css */
@import '@grupomultilaser/multi-ui/components/buttons.css'; /* componente individual */

Outros exports disponíveis:

• @grupomultilaser/multi-ui/types — definições TypeScript (dist/tokens.d.ts)
• @grupomultilaser/multi-ui/vscode-data — dados para autocomplete no VS Code

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 build           # Gera src/tokens.css e minifica para dist/
pnpm run test:visual     # Roda testes de integração e regressão visual (Playwright)
pnpm run release:check   # Roda a validação completa de pré-lançamento para produção

Nota: src/tokens.css e dist/ são gerados pelo build e não são versionados no Git. Após clonar o repositório, execute pnpm run build antes de importar src/system.css ou rodar os testes.

Comandos

| Script | Descrição | |---|---| | build | Compila, concatena e minifica os tokens e CSS para a pasta dist/ | | validate | Valida consistência do contrato de classes CSS e tokens | | lint:css | Executa o stylelint em todos os arquivos CSS de src/ | | test:smoke | Verifica entrypoints npm + renderização no browser | | test:visual | Executa os testes de regressão visual com Playwright | | release:check | Executa a sequência completa: lint → build → validate → smoke → visual |

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
│   │   ├── index.css        #   Entry point dos tokens primitivos
│   │   ├── colors.css
│   │   ├── spacing.css
│   │   ├── typography.css
│   │   ├── radii.css
│   │   ├── shadows.css
│   │   ├── states.css       # Tokens de estado (hover, active dinâmicos)
│   │   ├── motion.css
│   │   ├── semantic.css     # Tokens semânticos + de componente
│   │   └── themes/dark.css
│   └── components/      # 18 arquivos CSS de componentes
├── tests/          # Suíte de testes visuais (Playwright)
├── scripts/        # 6 scripts: build, validate, test, types
├── dist/           # Artefatos de build (gitignored)
├── .context/       # Documentação técnica para AI agents
├── AGENTS.md       # Convenções do projeto e comandos para IA
├── DESIGN.md       # Princípios de design, arquitetura e governança
├── CHANGELOG.md    # Histórico de versões (Keep a Changelog)
├── .gitlab-ci.yml  # Configuração de CI/CD para validação, CDN e publicação npm
├── firebase.json   # Configurações do Firebase Hosting (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.