brwind-teste 1.0.0

package/README.md

@@ -0,0 +1,191 @@
+# Brwind
+
+Framework de utilitários CSS 100% em português. Tudo do zero, sem dependências externas. Funciona como biblioteca npm com CLI (estilo Tailwind).
+
+## Instalação no seu projeto
+
+```bash
+npm install brwind
+```
+
+## Uso rápido (igual Tailwind – só importar)
+
+Depois de instalar, **não precisa rodar nenhum comando**. No ponto de entrada do app (ex.: `App.tsx` ou `main.tsx`):
+
+```tsx
+import 'brwind/dist/saida.css';
+```
+
+Pronto. Use as classes em português em todo o projeto:
+
+```tsx
+export function App() {
+  return (
+    <div className="flexivel itens-centro justificar-centro min-altura-tela fundo-cinza-100">
+      <h1 className="texto-gigante peso-negrito texto-cinza-800">Olá, Brwind</h1>
+    </div>
+  );
+}
+```
+
+O bundler (Vite, Webpack, etc.) inclui o CSS do pacote. Nada de CLI nem build extra.
+
+---
+
+## Uso com CLI (opcional)
+
+O comando `brwind` gera o CSS a partir do pacote instalado. Use no seu projeto (React, Vite, etc.):
+
+**Saída completa (todas as classes):**
+
+```bash
+npx brwind -o src/estilos/brwind.css
+```
+
+**Com seu CSS customizado (concatenado depois do Brwind):**
+
+```bash
+npx brwind -i src/estilos/meu.css -o dist/estilos.css
+```
+
+**Purge: só incluir classes usadas nos arquivos (reduz o tamanho):**
+
+```bash
+npx brwind -o dist/estilos.css --conteudo src
+```
+
+`--conteudo` aceita um ou mais diretórios separados por vírgula. O CLI varre `.html`, `.jsx`, `.tsx`, `.vue`, `.js`, `.ts` e extrai `class` / `className` para manter só as utilitárias usadas.
+
+**Minificar e watch (recompilar ao salvar):**
+
+```bash
+npx brwind -i src/estilos/entrada.css -o dist/estilos.css --conteudo src --minify --watch
+```
+
+### Opções do CLI
+
+| Opção | Descrição |
+|-------|-----------|
+| `-i arquivo` | CSS de entrada (seu). Será concatenado após o Brwind. |
+| `-o arquivo` | Arquivo de saída. Se omitir, imprime no stdout. |
+| `--conteudo dir1,dir2` | Diretórios para escanear e purgar classes não usadas. |
+| `--minify` ou `-m` | Minifica o CSS gerado. |
+| `--watch` ou `-w` | Observa arquivos e recompila ao salvar. |
+
+### Scripts no package.json (como o Tailwind)
+
+No seu projeto, adicione:
+
+```json
+{
+  "scripts": {
+    "estilos:build": "brwind -o dist/estilos.css --conteudo src --minify",
+    "estilos:dev": "brwind -o dist/estilos.css --conteudo src --watch"
+  }
+}
+```
+
+Depois: `npm run estilos:build` ou `npm run estilos:dev`. No HTML ou no ponto de entrada do React, importe `dist/estilos.css`.
+
+---
+
+## Desenvolvimento do Brwind (quem mexe no pacote)
+
+Na pasta do repositório Brwind:
+
+```bash
+npm install
+npm run build
+```
+
+Gera `dist/saida.css`. Modo watch:
+
+```bash
+npm run dev
+```
+
+Antes de publicar no npm, `prepublishOnly` roda o build automaticamente.
+
+## Uso no React
+
+**Opção 1 – Copiar o CSS**
+
+1. No Brwind: `npm run build`
+2. Copie `dist/saida.css` para o seu projeto React (por exemplo `src/estilos/brwind.css`)
+3. Importe uma vez no ponto de entrada (ex.: `src/main.jsx` ou `src/App.jsx`):
+
+```jsx
+import './estilos/brwind.css';
+```
+
+**Opção 2 – Brwind como dependência local**
+
+1. No projeto React:
+
+```bash
+npm install file:../brwind
+```
+
+(ajuste `../brwind` para o caminho da pasta do Brwind)
+
+2. No Brwind, rode `npm run build` antes de usar.
+3. No React, importe no ponto de entrada:
+
+```jsx
+import 'brwind/dist/saida.css';
+```
+
+**Exemplo de componente**
+
+Use as classes no `className` dos elementos:
+
+```jsx
+function Cartao({ titulo, filhos }) {
+  return (
+    <article className="flexivel flex-coluna espacamento-4 preenchimento-6 raio-medio sombra-media fundo-branco">
+      <h2 className="texto-grande peso-negrito texto-cinza-800">{titulo}</h2>
+      <div className="flexivel itens-centro justificar-entre margem-t-4">
+        {filhos}
+      </div>
+    </article>
+  );
+}
+```
+
+## Exemplos de classes (nomes em português)
+
+| Conceito        | Brwind                    |
+|-----------------|---------------------------|
+| Flex centralizado | `flexivel itens-centro justificar-centro` |
+| Display         | `bloque`, `flexivel`, `oculto`, `inline-bloque` |
+| Alinhamento    | `itens-centro`, `itens-inicio`, `itens-fim` |
+| Justificar     | `justificar-centro`, `justificar-entre` |
+| Flex           | `flex-preencher`, `flex-zero`, `flex-sem-envolver` |
+| Posição        | `relativo`, `absoluto`, `fixo`, `preencir-tela` |
+| Cantos         | `topo-0`, `direita-0`, `baixo-0`, `esquerda-0` |
+| Grade          | `grade`, `grade-colunas-2`, `grade-linhas-3` |
+| Transbordar    | `transbordar-oculto`, `transbordar-auto` |
+| Profundidade   | `profundidade-10`, `profundidade-maxima` |
+| Tipografia     | `texto-grande`, `peso-negrito`, `linha-normal` |
+| Tamanhos texto | `texto-extra-pequeno`, `texto-medio`, `texto-heroi` |
+| Decoração      | `sublinhado`, `sem-sublinhado`, `limite-linhas-2` |
+| Cursor         | `cursor-mao`, `cursor-bloqueado`, `cursor-normal` |
+| Transição      | `transicao-rapida`, `transicao-normal` |
+| Bordas         | `borda`, `raio-medio`, `contorno-nenhum`, `divisor-b` |
+| Acessibilidade | `apenas-leitor-tela` |
+
+## Estrutura
+
+- `src/variaveis.css` – variáveis (espaços, raios, sombras, transição)
+- `src/base.css` – reset mínimo
+- `src/layout.css` – display, flex, grade, posição, dimensões, overflow, aspecto, acessibilidade
+- `src/espacamento.css` – preenchimento, margem, margem negativa, scroll-margin
+- `src/bordas.css` – borda por lado, raio, sombra, contorno, divisor
+- `src/tipografia.css` – alinhamento, tamanhos, peso, linha, limite-linhas, listagem, hifenação
+- `src/cores.css` – texto, fundo, borda (cinza, vermelho, verde, azul, amarelo, laranja, roxo, rosa)
+- `src/interacao.css` – cursor, transição, objeto, tabela, rolagem, touch, will-change
+- `src/entrada.css` – junta todos os arquivos
+
+## Licença
+
+MIT

package/bin/cli.js

@@ -0,0 +1,165 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+
+const raizBrwind = path.resolve(__dirname, "..");
+const caminhoCssBrwind = path.join(raizBrwind, "dist", "saida.css");
+
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const opcoes = { entrada: null, saida: null, conteudo: [], minify: false, watch: false };
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "-i" && args[i + 1]) {
+      opcoes.entrada = path.resolve(process.cwd(), args[++i]);
+    } else if (args[i] === "-o" && args[i + 1]) {
+      opcoes.saida = path.resolve(process.cwd(), args[++i]);
+    } else if (args[i] === "--conteudo" && args[i + 1]) {
+      opcoes.conteudo = args[++i].split(",").map((p) => path.resolve(process.cwd(), p.trim()));
+    } else if (args[i] === "--minify" || args[i] === "-m") {
+      opcoes.minify = true;
+    } else if (args[i] === "--watch" || args[i] === "-w") {
+      opcoes.watch = true;
+    }
+  }
+  return opcoes;
+}
+
+function listarArquivos(dir, extensoes, lista = []) {
+  if (!fs.existsSync(dir)) return lista;
+  const stat = fs.statSync(dir);
+  if (stat.isFile()) {
+    const ext = path.extname(dir).toLowerCase();
+    if (extensoes.includes(ext)) lista.push(dir);
+    return lista;
+  }
+  const itens = fs.readdirSync(dir, { withFileTypes: true });
+  for (const item of itens) {
+    const full = path.join(dir, item.name);
+    if (item.isDirectory() && item.name !== "node_modules" && !item.name.startsWith(".")) {
+      listarArquivos(full, extensoes, lista);
+    } else if (item.isFile()) {
+      const ext = path.extname(item.name).toLowerCase();
+      if (extensoes.includes(ext)) lista.push(full);
+    }
+  }
+  return lista;
+}
+
+function extrairClasses(conteudo) {
+  const classes = new Set();
+  const re = /(?:class|className)=["']([^"']*)["']/g;
+  let m;
+  while ((m = re.exec(conteudo)) !== null) {
+    m[1].split(/\s+/).forEach((c) => c && classes.add(c));
+  }
+  const reTemplate = /(?:class|className)=\{`([^`]*)`\}/g;
+  while ((m = reTemplate.exec(conteudo)) !== null) {
+    m[1].split(/\s+/).forEach((c) => c && classes.add(c));
+  }
+  return classes;
+}
+
+function coletarClassesUsadas(diretorios) {
+  const extensoes = [".html", ".jsx", ".tsx", ".vue", ".js", ".ts"];
+  const arquivos = [];
+  for (const dir of diretorios) {
+    listarArquivos(dir, extensoes, arquivos);
+  }
+  const todas = new Set();
+  for (const arq of arquivos) {
+    try {
+      const texto = fs.readFileSync(arq, "utf8");
+      extrairClasses(texto).forEach((c) => todas.add(c));
+    } catch (_) {}
+  }
+  return todas;
+}
+
+function purgarCss(css, classesUsadas) {
+  const regras = [];
+  let pos = 0;
+  while (pos < css.length) {
+    const abre = css.indexOf("{", pos);
+    if (abre === -1) break;
+    const fecha = css.indexOf("}", abre);
+    if (fecha === -1) break;
+    const seletor = css.slice(pos, abre).trim();
+    const corpo = css.slice(abre + 1, fecha);
+    const classesNoSeletor = (seletor.match(/\.[a-zA-Z0-9_-]+/g) || []).map((s) => s.slice(1));
+    const ehBase = !seletor.startsWith(".") || seletor.startsWith(":root");
+    const usada = classesNoSeletor.length === 0 || classesNoSeletor.some((c) => classesUsadas.has(c));
+    if (ehBase || usada) {
+      regras.push(seletor + "{" + corpo + "}");
+    }
+    pos = fecha + 1;
+  }
+  return regras.join("");
+}
+
+function minificar(css) {
+  return css
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/\s*{\s*/g, "{")
+    .replace(/\s*}\s*/g, "}")
+    .replace(/\s*:\s*/g, ":")
+    .replace(/\s*;\s*/g, ";")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function build(opcoes) {
+  if (!fs.existsSync(caminhoCssBrwind)) {
+    process.stderr.write("Brwind: rode 'npm run build' na pasta do brwind primeiro.\n");
+    process.exit(1);
+  }
+  let css = fs.readFileSync(caminhoCssBrwind, "utf8");
+  if (opcoes.conteudo.length > 0) {
+    const usadas = coletarClassesUsadas(opcoes.conteudo);
+    css = purgarCss(css, usadas);
+  }
+  if (opcoes.entrada && fs.existsSync(opcoes.entrada)) {
+    const customizado = fs.readFileSync(opcoes.entrada, "utf8");
+    css = css + "\n" + customizado;
+  }
+  if (opcoes.minify) {
+    css = minificar(css);
+  }
+  if (opcoes.saida) {
+    const dir = path.dirname(opcoes.saida);
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+    fs.writeFileSync(opcoes.saida, css, "utf8");
+  } else {
+    process.stdout.write(css);
+  }
+}
+
+function watch(opcoes) {
+  const arquivos = [];
+  if (opcoes.entrada) arquivos.push(opcoes.entrada);
+  for (const dir of opcoes.conteudo) {
+    listarArquivos(dir, [".html", ".jsx", ".tsx", ".vue", ".js", ".ts"], arquivos);
+  }
+  arquivos.forEach((f) => {
+    if (fs.existsSync(f)) {
+      fs.watch(f, { recursive: false }, () => {
+        build(opcoes);
+      });
+    }
+  });
+  if (opcoes.conteudo.length > 0) {
+    opcoes.conteudo.forEach((dir) => {
+      if (fs.existsSync(dir) && fs.statSync(dir).isDirectory()) {
+        fs.watch(dir, { recursive: true }, () => build(opcoes));
+      }
+    });
+  }
+  build(opcoes);
+}
+
+const opcoes = parseArgs();
+if (opcoes.watch) {
+  watch(opcoes);
+} else {
+  build(opcoes);
+}

package/dist/saida.css

@@ -0,0 +1 @@
+:root{--espaco-0:0;--espaco-1:0.25rem;--espaco-2:0.5rem;--espaco-3:0.75rem;--espaco-4:1rem;--espaco-5:1.25rem;--espaco-6:1.5rem;--espaco-8:2rem;--espaco-10:2.5rem;--espaco-12:3rem;--espaco-16:4rem;--espaco-20:5rem;--espaco-24:6rem;--raio-pequeno:0.25rem;--raio-medio:0.5rem;--raio-grande:0.75rem;--raio-cheio:9999px;--sombra-pequena:0 1px 2px rgba(0,0,0,0.05);--sombra-media:0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);--sombra-grande:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);--transicao-rapida:150ms;--transicao-normal:300ms;}*, *::before, *::after{box-sizing:border-box;}body{margin:0;line-height:1.5;}img, svg, video{display:block;max-width:100%;}.bloque{display:block;}.flexivel{display:flex;}.flexivel-inline{display:inline-flex;}.inline{display:inline;}.inline-bloque{display:inline-block;}.oculto{display:none;}.invisivel{visibility:hidden;}.tabela{display:table;}.tabela-celula{display:table-cell;}.tabela-linha{display:table-row;}.flex-linha{flex-direction:row;}.flex-coluna{flex-direction:column;}.flex-linha-reverso{flex-direction:row-reverse;}.flex-coluna-reverso{flex-direction:column-reverse;}.flex-envolver{flex-wrap:wrap;}.flex-sem-envolver{flex-wrap:nowrap;}.flex-envolver-reverso{flex-wrap:wrap-reverse;}.itens-inicio{align-items:flex-start;}.itens-centro{align-items:center;}.itens-fim{align-items:flex-end;}.itens-esticado{align-items:stretch;}.itens-baseline{align-items:baseline;}.justificar-inicio{justify-content:flex-start;}.justificar-centro{justify-content:center;}.justificar-fim{justify-content:flex-end;}.justificar-entre{justify-content:space-between;}.justificar-ao-redor{justify-content:space-around;}.justificar-uniforme{justify-content:space-evenly;}.auto-inicio{align-self:flex-start;}.auto-centro{align-self:center;}.auto-fim{align-self:flex-end;}.auto-esticado{align-self:stretch;}.flex-preencher{flex:1 1 0%;}.flex-automatico{flex:1 1 auto;}.flex-inicio{flex:0 1 auto;}.flex-zero{flex:none;}.flex-crescer{flex-grow:1;}.flex-crescer-0{flex-grow:0;}.flex-diminuir{flex-shrink:1;}.flex-diminuir-0{flex-shrink:0;}.ordem-1{order:1;}.ordem-2{order:2;}.ordem-3{order:3;}.ordem-4{order:4;}.ordem-5{order:5;}.ordem-ultimo{order:9999;}.ordem-primeiro{order:-9999;}.espacamento-0{gap:var(--espaco-0);}.espacamento-1{gap:var(--espaco-1);}.espacamento-2{gap:var(--espaco-2);}.espacamento-3{gap:var(--espaco-3);}.espacamento-4{gap:var(--espaco-4);}.espacamento-5{gap:var(--espaco-5);}.espacamento-6{gap:var(--espaco-6);}.espacamento-8{gap:var(--espaco-8);}.espacamento-10{gap:var(--espaco-10);}.espacamento-12{gap:var(--espaco-12);}.espacamento-16{gap:var(--espaco-16);}.espacamento-20{gap:var(--espaco-20);}.espacamento-24{gap:var(--espaco-24);}.espacamento-x-0{column-gap:var(--espaco-0);}.espacamento-x-2{column-gap:var(--espaco-2);}.espacamento-x-4{column-gap:var(--espaco-4);}.espacamento-x-6{column-gap:var(--espaco-6);}.espacamento-x-8{column-gap:var(--espaco-8);}.espacamento-y-0{row-gap:var(--espaco-0);}.espacamento-y-2{row-gap:var(--espaco-2);}.espacamento-y-4{row-gap:var(--espaco-4);}.espacamento-y-6{row-gap:var(--espaco-6);}.espacamento-y-8{row-gap:var(--espaco-8);}.relativo{position:relative;}.absoluto{position:absolute;}.fixo{position:fixed;}.estatico{position:static;}.preenchir-tela{inset:0;}.topo-0{top:0;}.direita-0{right:0;}.baixo-0{bottom:0;}.esquerda-0{left:0;}.topo-auto{top:auto;}.direita-auto{right:auto;}.baixo-auto{bottom:auto;}.esquerda-auto{left:auto;}.centralizar-absolute{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}.centralizar-fixo{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);}.grade{display:grid;}.grade-colunas-1{grid-template-columns:repeat(1, minmax(0, 1fr));}.grade-colunas-2{grid-template-columns:repeat(2, minmax(0, 1fr));}.grade-colunas-3{grid-template-columns:repeat(3, minmax(0, 1fr));}.grade-colunas-4{grid-template-columns:repeat(4, minmax(0, 1fr));}.grade-colunas-6{grid-template-columns:repeat(6, minmax(0, 1fr));}.grade-colunas-12{grid-template-columns:repeat(12, minmax(0, 1fr));}.grade-linhas-1{grid-template-rows:repeat(1, minmax(0, 1fr));}.grade-linhas-2{grid-template-rows:repeat(2, minmax(0, 1fr));}.grade-linhas-3{grid-template-rows:repeat(3, minmax(0, 1fr));}.grade-linhas-4{grid-template-rows:repeat(4, minmax(0, 1fr));}.grade-linhas-auto{grid-auto-rows:auto;}.grade-fluxo-coluna{grid-auto-flow:column;}.grade-fluxo-linha{grid-auto-flow:row;}.largura-tela{width:100vw;}.altura-tela{height:100vh;}.largura-cheia{width:100%;}.altura-cheia{height:100%;}.largura-auto{width:auto;}.altura-auto{height:auto;}.largura-metade{width:50%;}.largura-terco{width:33.333333%;}.largura-dois-tercos{width:66.666667%;}.largura-minima{min-width:0;}.largura-maxima-cheia{max-width:100%;}.largura-maxima-tela{max-width:100vw;}.altura-minima-tela{min-height:100vh;}.altura-minima-cheia{min-height:100%;}.altura-maxima-cheia{max-height:100%;}.altura-maxima-tela{max-height:100vh;}.transbordar-oculto{overflow:hidden;}.transbordar-auto{overflow:auto;}.transbordar-rolagem-x{overflow-x:auto;}.transbordar-rolagem-y{overflow-y:auto;}.transbordar-visivel{overflow:visible;}.profundidade-0{z-index:0;}.profundidade-10{z-index:10;}.profundidade-20{z-index:20;}.profundidade-30{z-index:30;}.profundidade-40{z-index:40;}.profundidade-50{z-index:50;}.profundidade-maxima{z-index:9999;}.aspecto-quadrado{aspect-ratio:1 / 1;}.aspecto-video{aspect-ratio:16 / 9;}.aspecto-video-vertical{aspect-ratio:9 / 16;}.aspecto-auto{aspect-ratio:auto;}.encaixe-topo{object-position:top;}.encaixe-baixo{object-position:bottom;}.encaixe-centro{object-position:center;}.encaixe-esquerda{object-position:left;}.encaixe-direita{object-position:right;}.apenas-leitor-tela{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0;}.not-apenas-leitor-tela{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip-path:none;white-space:normal;}.preenchimento-0{padding:var(--espaco-0);}.preenchimento-1{padding:var(--espaco-1);}.preenchimento-2{padding:var(--espaco-2);}.preenchimento-3{padding:var(--espaco-3);}.preenchimento-4{padding:var(--espaco-4);}.preenchimento-5{padding:var(--espaco-5);}.preenchimento-6{padding:var(--espaco-6);}.preenchimento-8{padding:var(--espaco-8);}.preenchimento-10{padding:var(--espaco-10);}.preenchimento-12{padding:var(--espaco-12);}.preenchimento-16{padding:var(--espaco-16);}.preenchimento-20{padding:var(--espaco-20);}.preenchimento-24{padding:var(--espaco-24);}.preenchimento-x-0{padding-left:var(--espaco-0);padding-right:var(--espaco-0);}.preenchimento-x-2{padding-left:var(--espaco-2);padding-right:var(--espaco-2);}.preenchimento-x-4{padding-left:var(--espaco-4);padding-right:var(--espaco-4);}.preenchimento-x-6{padding-left:var(--espaco-6);padding-right:var(--espaco-6);}.preenchimento-x-8{padding-left:var(--espaco-8);padding-right:var(--espaco-8);}.preenchimento-y-0{padding-top:var(--espaco-0);padding-bottom:var(--espaco-0);}.preenchimento-y-2{padding-top:var(--espaco-2);padding-bottom:var(--espaco-2);}.preenchimento-y-4{padding-top:var(--espaco-4);padding-bottom:var(--espaco-4);}.preenchimento-y-6{padding-top:var(--espaco-6);padding-bottom:var(--espaco-6);}.preenchimento-y-8{padding-top:var(--espaco-8);padding-bottom:var(--espaco-8);}.preenchimento-y-12{padding-top:var(--espaco-12);padding-bottom:var(--espaco-12);}.preenchimento-t-0{padding-top:var(--espaco-0);}.preenchimento-t-2{padding-top:var(--espaco-2);}.preenchimento-t-4{padding-top:var(--espaco-4);}.preenchimento-t-8{padding-top:var(--espaco-8);}.preenchimento-t-12{padding-top:var(--espaco-12);}.preenchimento-r-0{padding-right:var(--espaco-0);}.preenchimento-r-2{padding-right:var(--espaco-2);}.preenchimento-r-4{padding-right:var(--espaco-4);}.preenchimento-r-8{padding-right:var(--espaco-8);}.preenchimento-b-0{padding-bottom:var(--espaco-0);}.preenchimento-b-2{padding-bottom:var(--espaco-2);}.preenchimento-b-4{padding-bottom:var(--espaco-4);}.preenchimento-b-8{padding-bottom:var(--espaco-8);}.preenchimento-b-12{padding-bottom:var(--espaco-12);}.preenchimento-l-0{padding-left:var(--espaco-0);}.preenchimento-l-2{padding-left:var(--espaco-2);}.preenchimento-l-4{padding-left:var(--espaco-4);}.preenchimento-l-8{padding-left:var(--espaco-8);}.margem-0{margin:var(--espaco-0);}.margem-1{margin:var(--espaco-1);}.margem-2{margin:var(--espaco-2);}.margem-3{margin:var(--espaco-3);}.margem-4{margin:var(--espaco-4);}.margem-5{margin:var(--espaco-5);}.margem-6{margin:var(--espaco-6);}.margem-8{margin:var(--espaco-8);}.margem-10{margin:var(--espaco-10);}.margem-12{margin:var(--espaco-12);}.margem-auto{margin:auto;}.margem-x-auto{margin-left:auto;margin-right:auto;}.margem-y-auto{margin-top:auto;margin-bottom:auto;}.margem-t-0{margin-top:var(--espaco-0);}.margem-t-2{margin-top:var(--espaco-2);}.margem-t-4{margin-top:var(--espaco-4);}.margem-t-8{margin-top:var(--espaco-8);}.margem-t-12{margin-top:var(--espaco-12);}.margem-b-0{margin-bottom:var(--espaco-0);}.margem-b-2{margin-bottom:var(--espaco-2);}.margem-b-4{margin-bottom:var(--espaco-4);}.margem-b-8{margin-bottom:var(--espaco-8);}.margem-b-12{margin-bottom:var(--espaco-12);}.margem-l-0{margin-left:var(--espaco-0);}.margem-l-2{margin-left:var(--espaco-2);}.margem-l-4{margin-left:var(--espaco-4);}.margem-l-auto{margin-left:auto;}.margem-r-0{margin-right:var(--espaco-0);}.margem-r-2{margin-right:var(--espaco-2);}.margem-r-4{margin-right:var(--espaco-4);}.margem-r-auto{margin-right:auto;}.margem-negativa-1{margin:calc(var(--espaco-1) * -1);}.margem-negativa-2{margin:calc(var(--espaco-2) * -1);}.margem-negativa-4{margin:calc(var(--espaco-4) * -1);}.margem-negativa-8{margin:calc(var(--espaco-8) * -1);}.margem-negativa-x-2{margin-left:calc(var(--espaco-2) * -1);margin-right:calc(var(--espaco-2) * -1);}.margem-negativa-x-4{margin-left:calc(var(--espaco-4) * -1);margin-right:calc(var(--espaco-4) * -1);}.margem-negativa-x-8{margin-left:calc(var(--espaco-8) * -1);margin-right:calc(var(--espaco-8) * -1);}.margem-negativa-y-2{margin-top:calc(var(--espaco-2) * -1);margin-bottom:calc(var(--espaco-2) * -1);}.margem-negativa-y-4{margin-top:calc(var(--espaco-4) * -1);margin-bottom:calc(var(--espaco-4) * -1);}.margem-negativa-y-8{margin-top:calc(var(--espaco-8) * -1);margin-bottom:calc(var(--espaco-8) * -1);}.espacamento-rolagem-t-4{scroll-margin-top:var(--espaco-4);}.espacamento-rolagem-t-8{scroll-margin-top:var(--espaco-8);}.espacamento-rolagem-b-4{scroll-margin-bottom:var(--espaco-4);}.espacamento-rolagem-b-8{scroll-margin-bottom:var(--espaco-8);}.borda-0{border-width:0;}.borda{border-width:1px;}.borda-2{border-width:2px;}.borda-4{border-width:4px;}.borda-8{border-width:8px;}.borda-t{border-top-width:1px;}.borda-r{border-right-width:1px;}.borda-b{border-bottom-width:1px;}.borda-l{border-left-width:1px;}.borda-t-0{border-top-width:0;}.borda-r-0{border-right-width:0;}.borda-b-0{border-bottom-width:0;}.borda-l-0{border-left-width:0;}.borda-solida{border-style:solid;}.borda-pontilhada{border-style:dashed;}.borda-tracejada{border-style:dotted;}.borda-dupla{border-style:double;}.borda-nenhuma{border-style:none;}.borda-transparente{border-color:transparent;}.borda-herdar{border-color:inherit;}.raio-0{border-radius:0;}.raio-pequeno{border-radius:var(--raio-pequeno);}.raio-medio{border-radius:var(--raio-medio);}.raio-grande{border-radius:var(--raio-grande);}.raio-cheio{border-radius:var(--raio-cheio);}.raio-t-pequeno{border-top-left-radius:var(--raio-pequeno);border-top-right-radius:var(--raio-pequeno);}.raio-t-medio{border-top-left-radius:var(--raio-medio);border-top-right-radius:var(--raio-medio);}.raio-t-grande{border-top-left-radius:var(--raio-grande);border-top-right-radius:var(--raio-grande);}.raio-b-pequeno{border-bottom-left-radius:var(--raio-pequeno);border-bottom-right-radius:var(--raio-pequeno);}.raio-b-medio{border-bottom-left-radius:var(--raio-medio);border-bottom-right-radius:var(--raio-medio);}.raio-b-grande{border-bottom-left-radius:var(--raio-grande);border-bottom-right-radius:var(--raio-grande);}.raio-l-medio{border-top-left-radius:var(--raio-medio);border-bottom-left-radius:var(--raio-medio);}.raio-r-medio{border-top-right-radius:var(--raio-medio);border-bottom-right-radius:var(--raio-medio);}.sombra-nenhuma{box-shadow:none;}.sombra-pequena{box-shadow:var(--sombra-pequena);}.sombra-media{box-shadow:var(--sombra-media);}.sombra-grande{box-shadow:var(--sombra-grande);}.contorno-nenhum{outline:none;}.contorno-0{outline-width:0;}.contorno-1{outline-width:1px;}.contorno-2{outline-width:2px;}.contorno-solido{outline-style:solid;}.contorno-pontilhado{outline-style:dashed;}.divisor-t{border-top:1px solid currentColor;}.divisor-r{border-right:1px solid currentColor;}.divisor-b{border-bottom:1px solid currentColor;}.divisor-l{border-left:1px solid currentColor;}.texto-esquerda{text-align:left;}.texto-centro{text-align:center;}.texto-direita{text-align:right;}.texto-justificado{text-align:justify;}.texto-extra-pequeno{font-size:0.75rem;line-height:1rem;}.texto-pequeno{font-size:0.875rem;line-height:1.25rem;}.texto-medio{font-size:1rem;line-height:1.5rem;}.texto-grande{font-size:1.125rem;line-height:1.75rem;}.texto-extra-grande{font-size:1.25rem;line-height:1.75rem;}.texto-enorme{font-size:1.5rem;line-height:2rem;}.texto-muito-enorme{font-size:1.875rem;line-height:2.25rem;}.texto-gigante{font-size:2.25rem;line-height:2.5rem;}.texto-heroi{font-size:3rem;line-height:1;}.peso-normal{font-weight:400;}.peso-medio{font-weight:500;}.peso-semi-negrito{font-weight:600;}.peso-negrito{font-weight:700;}.peso-extra-negrito{font-weight:800;}.linha-nenhuma{line-height:1;}.linha-apertada{line-height:1.25;}.linha-justa{line-height:1.375;}.linha-normal{line-height:1.5;}.linha-relaxada{line-height:1.625;}.linha-solta{line-height:2;}.espacamento-letras-apertado{letter-spacing:-0.025em;}.espacamento-letras-normal{letter-spacing:0;}.espacamento-letras-amplo{letter-spacing:0.025em;}.espacamento-letras-largo{letter-spacing:0.05em;}.subtil{opacity:0.6;}.opacidade-0{opacity:0;}.opacidade-50{opacity:0.5;}.opacidade-100{opacity:1;}.truncar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.quebrar-palavras{overflow-wrap:break-word;}.quebrar-tudo{word-break:break-all;}.quebrar-normal{overflow-wrap:normal;}.sublinhado{text-decoration:underline;}.sem-sublinhado{text-decoration:none;}.riscado{text-decoration:line-through;}.decoracao-nenhuma{text-decoration:none;}.maiusculas{text-transform:uppercase;}.minusculas{text-transform:lowercase;}.capitalizar{text-transform:capitalize;}.transformacao-nenhuma{text-transform:none;}.recuo-0{text-indent:0;}.recuo-4{text-indent:var(--espaco-4);}.recuo-8{text-indent:var(--espaco-8);}.limite-linhas-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}.limite-linhas-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.limite-linhas-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}.limite-linhas-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}.limite-linhas-5{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;}.listagem-nenhuma{list-style:none;}.listagem-disco{list-style:disc;}.listagem-decimal{list-style:decimal;}.listagem-circulo{list-style:circle;}.listagem-quadrado{list-style:square;}.listagem-dentro{list-style-position:inside;}.listagem-fora{list-style-position:outside;}.espaco-branco-normal{white-space:normal;}.espaco-branco-agora{white-space:nowrap;}.espaco-branco-pre{white-space:pre;}.espaco-branco-pre-linha{white-space:pre-line;}.espaco-branco-pre-envolver{white-space:pre-wrap;}.hifenacao-auto{hyphens:auto;}.hifenacao-manual{hyphens:manual;}.hifenacao-nenhuma{hyphens:none;}.texto-branco{color:#fff;}.texto-preto{color:#000;}.texto-transparente{color:transparent;}.texto-herdar{color:inherit;}.texto-cinza-50{color:#f9fafb;}.texto-cinza-100{color:#f3f4f6;}.texto-cinza-200{color:#e5e7eb;}.texto-cinza-300{color:#d1d5db;}.texto-cinza-400{color:#9ca3af;}.texto-cinza-500{color:#6b7280;}.texto-cinza-600{color:#4b5563;}.texto-cinza-700{color:#374151;}.texto-cinza-800{color:#1f2937;}.texto-cinza-900{color:#111827;}.texto-vermelho-500{color:#ef4444;}.texto-vermelho-600{color:#dc2626;}.texto-verde-500{color:#22c55e;}.texto-verde-600{color:#16a34a;}.texto-azul-500{color:#3b82f6;}.texto-azul-600{color:#2563eb;}.texto-amarelo-500{color:#eab308;}.texto-amarelo-600{color:#ca8a04;}.texto-laranja-500{color:#f97316;}.texto-laranja-600{color:#ea580c;}.texto-roxo-500{color:#a855f7;}.texto-roxo-600{color:#9333ea;}.texto-rosa-500{color:#ec4899;}.texto-rosa-600{color:#db2777;}.fundo-transparente{background-color:transparent;}.fundo-branco{background-color:#fff;}.fundo-preto{background-color:#000;}.fundo-herdar{background-color:inherit;}.fundo-cinza-50{background-color:#f9fafb;}.fundo-cinza-100{background-color:#f3f4f6;}.fundo-cinza-200{background-color:#e5e7eb;}.fundo-cinza-300{background-color:#d1d5db;}.fundo-cinza-400{background-color:#9ca3af;}.fundo-cinza-500{background-color:#6b7280;}.fundo-cinza-600{background-color:#4b5563;}.fundo-cinza-700{background-color:#374151;}.fundo-cinza-800{background-color:#1f2937;}.fundo-cinza-900{background-color:#111827;}.fundo-vermelho-500{background-color:#ef4444;}.fundo-vermelho-600{background-color:#dc2626;}.fundo-verde-500{background-color:#22c55e;}.fundo-verde-600{background-color:#16a34a;}.fundo-azul-500{background-color:#3b82f6;}.fundo-azul-600{background-color:#2563eb;}.fundo-amarelo-500{background-color:#eab308;}.fundo-amarelo-600{background-color:#ca8a04;}.fundo-laranja-500{background-color:#f97316;}.fundo-laranja-600{background-color:#ea580c;}.fundo-roxo-500{background-color:#a855f7;}.fundo-roxo-600{background-color:#9333ea;}.fundo-rosa-500{background-color:#ec4899;}.fundo-rosa-600{background-color:#db2777;}.borda-cinza-100{border-color:#f3f4f6;}.borda-cinza-200{border-color:#e5e7eb;}.borda-cinza-300{border-color:#d1d5db;}.borda-cinza-400{border-color:#9ca3af;}.acento-atual{color:currentColor;}.fundo-acento-atual{background-color:currentColor;}.borda-acento-atual{border-color:currentColor;}.cursor-mao{cursor:pointer;}.cursor-bloqueado{cursor:not-allowed;}.cursor-normal{cursor:default;}.cursor-aguardar{cursor:wait;}.cursor-texto{cursor:text;}.cursor-mover{cursor:move;}.cursor-proibido{cursor:no-drop;}.cursor-ajuda{cursor:help;}.cursor-zoom-in{cursor:zoom-in;}.cursor-zoom-out{cursor:zoom-out;}.selecionar-nenhum{user-select:none;}.selecionar-texto{user-select:text;}.selecionar-tudo{user-select:all;}.pointer-eventos-nenhum{pointer-events:none;}.pointer-eventos-auto{pointer-events:auto;}.transicao-nenhuma{transition:none;}.transicao-rapida{transition-duration:var(--transicao-rapida);}.transicao-normal{transition-duration:var(--transicao-normal);}.transicao-tudo{transition-property:all;}.escala-95:hover{transform:scale(0.95);}.escala-105:hover{transform:scale(1.05);}.opacidade-hover:hover{opacity:0.8;}.redimensionar-nenhum{resize:none;}.redimensionar-y{resize:vertical;}.redimensionar-x{resize:horizontal;}.redimensionar{resize:both;}.aparencia-nenhum{appearance:none;}.objeto-conter{object-fit:contain;}.objeto-cobrir{object-fit:cover;}.objeto-preencher{object-fit:fill;}.objeto-nenhum{object-fit:none;}.objeto-escala-baixo{object-fit:scale-down;}.tabela-auto{table-layout:auto;}.tabela-fixa{table-layout:fixed;}.borda-colapsar{border-collapse:collapse;}.borda-separar{border-collapse:separate;}.rolagem-suave{scroll-behavior:smooth;}.rolagem-instantanea{scroll-behavior:auto;}.tocar-rolagem-y{touch-action:pan-y;}.tocar-rolagem-x{touch-action:pan-x;}.tocar-manipular{touch-action:manipulation;}.tocar-nenhum{touch-action:none;}.vontade-mudar-auto{will-change:auto;}.vontade-mudar-transform{will-change:transform;}.vontade-mudar-opacidade{will-change:opacity;}.vontade-mudar-rolagem{will-change:scroll-position;}.isolamento-isolar{isolation:isolate;}.isolacao-auto{isolation:auto;}

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "brwind-teste",
+  "version": "1.0.0",
+  "description": "Framework de utilitários CSS 100% em português",
+  "style": "dist/saida.css",
+  "exports": {
+    "./dist/saida.css": "./dist/saida.css",
+    "./css": "./dist/saida.css"
+  },
+  "bin": {
+    "brwind": "bin/cli.js"
+  },
+  "scripts": {
+    "build": "node build.js --minify",
+    "dev": "node build.js --watch",
+    "prepublishOnly": "node build.js --minify"
+  },
+  "keywords": ["css", "português", "brwind", "utilitários"],
+  "license": "MIT",
+  "files": ["dist", "src", "bin"]
+}

package/src/base.css

@@ -0,0 +1,15 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  line-height: 1.5;
+}
+
+img, svg, video {
+  display: block;
+  max-width: 100%;
+}

package/src/bordas.css

@@ -0,0 +1,55 @@
+.borda-0 { border-width: 0; }
+.borda { border-width: 1px; }
+.borda-2 { border-width: 2px; }
+.borda-4 { border-width: 4px; }
+.borda-8 { border-width: 8px; }
+
+.borda-t { border-top-width: 1px; }
+.borda-r { border-right-width: 1px; }
+.borda-b { border-bottom-width: 1px; }
+.borda-l { border-left-width: 1px; }
+.borda-t-0 { border-top-width: 0; }
+.borda-r-0 { border-right-width: 0; }
+.borda-b-0 { border-bottom-width: 0; }
+.borda-l-0 { border-left-width: 0; }
+
+.borda-solida { border-style: solid; }
+.borda-pontilhada { border-style: dashed; }
+.borda-tracejada { border-style: dotted; }
+.borda-dupla { border-style: double; }
+.borda-nenhuma { border-style: none; }
+
+.borda-transparente { border-color: transparent; }
+.borda-herdar { border-color: inherit; }
+
+.raio-0 { border-radius: 0; }
+.raio-pequeno { border-radius: var(--raio-pequeno); }
+.raio-medio { border-radius: var(--raio-medio); }
+.raio-grande { border-radius: var(--raio-grande); }
+.raio-cheio { border-radius: var(--raio-cheio); }
+
+.raio-t-pequeno { border-top-left-radius: var(--raio-pequeno); border-top-right-radius: var(--raio-pequeno); }
+.raio-t-medio { border-top-left-radius: var(--raio-medio); border-top-right-radius: var(--raio-medio); }
+.raio-t-grande { border-top-left-radius: var(--raio-grande); border-top-right-radius: var(--raio-grande); }
+.raio-b-pequeno { border-bottom-left-radius: var(--raio-pequeno); border-bottom-right-radius: var(--raio-pequeno); }
+.raio-b-medio { border-bottom-left-radius: var(--raio-medio); border-bottom-right-radius: var(--raio-medio); }
+.raio-b-grande { border-bottom-left-radius: var(--raio-grande); border-bottom-right-radius: var(--raio-grande); }
+.raio-l-medio { border-top-left-radius: var(--raio-medio); border-bottom-left-radius: var(--raio-medio); }
+.raio-r-medio { border-top-right-radius: var(--raio-medio); border-bottom-right-radius: var(--raio-medio); }
+
+.sombra-nenhuma { box-shadow: none; }
+.sombra-pequena { box-shadow: var(--sombra-pequena); }
+.sombra-media { box-shadow: var(--sombra-media); }
+.sombra-grande { box-shadow: var(--sombra-grande); }
+
+.contorno-nenhum { outline: none; }
+.contorno-0 { outline-width: 0; }
+.contorno-1 { outline-width: 1px; }
+.contorno-2 { outline-width: 2px; }
+.contorno-solido { outline-style: solid; }
+.contorno-pontilhado { outline-style: dashed; }
+
+.divisor-t { border-top: 1px solid currentColor; }
+.divisor-r { border-right: 1px solid currentColor; }
+.divisor-b { border-bottom: 1px solid currentColor; }
+.divisor-l { border-left: 1px solid currentColor; }

package/src/cores.css

@@ -0,0 +1,66 @@
+.texto-branco { color: #fff; }
+.texto-preto { color: #000; }
+.texto-transparente { color: transparent; }
+.texto-herdar { color: inherit; }
+.texto-cinza-50 { color: #f9fafb; }
+.texto-cinza-100 { color: #f3f4f6; }
+.texto-cinza-200 { color: #e5e7eb; }
+.texto-cinza-300 { color: #d1d5db; }
+.texto-cinza-400 { color: #9ca3af; }
+.texto-cinza-500 { color: #6b7280; }
+.texto-cinza-600 { color: #4b5563; }
+.texto-cinza-700 { color: #374151; }
+.texto-cinza-800 { color: #1f2937; }
+.texto-cinza-900 { color: #111827; }
+.texto-vermelho-500 { color: #ef4444; }
+.texto-vermelho-600 { color: #dc2626; }
+.texto-verde-500 { color: #22c55e; }
+.texto-verde-600 { color: #16a34a; }
+.texto-azul-500 { color: #3b82f6; }
+.texto-azul-600 { color: #2563eb; }
+.texto-amarelo-500 { color: #eab308; }
+.texto-amarelo-600 { color: #ca8a04; }
+.texto-laranja-500 { color: #f97316; }
+.texto-laranja-600 { color: #ea580c; }
+.texto-roxo-500 { color: #a855f7; }
+.texto-roxo-600 { color: #9333ea; }
+.texto-rosa-500 { color: #ec4899; }
+.texto-rosa-600 { color: #db2777; }
+
+.fundo-transparente { background-color: transparent; }
+.fundo-branco { background-color: #fff; }
+.fundo-preto { background-color: #000; }
+.fundo-herdar { background-color: inherit; }
+.fundo-cinza-50 { background-color: #f9fafb; }
+.fundo-cinza-100 { background-color: #f3f4f6; }
+.fundo-cinza-200 { background-color: #e5e7eb; }
+.fundo-cinza-300 { background-color: #d1d5db; }
+.fundo-cinza-400 { background-color: #9ca3af; }
+.fundo-cinza-500 { background-color: #6b7280; }
+.fundo-cinza-600 { background-color: #4b5563; }
+.fundo-cinza-700 { background-color: #374151; }
+.fundo-cinza-800 { background-color: #1f2937; }
+.fundo-cinza-900 { background-color: #111827; }
+.fundo-vermelho-500 { background-color: #ef4444; }
+.fundo-vermelho-600 { background-color: #dc2626; }
+.fundo-verde-500 { background-color: #22c55e; }
+.fundo-verde-600 { background-color: #16a34a; }
+.fundo-azul-500 { background-color: #3b82f6; }
+.fundo-azul-600 { background-color: #2563eb; }
+.fundo-amarelo-500 { background-color: #eab308; }
+.fundo-amarelo-600 { background-color: #ca8a04; }
+.fundo-laranja-500 { background-color: #f97316; }
+.fundo-laranja-600 { background-color: #ea580c; }
+.fundo-roxo-500 { background-color: #a855f7; }
+.fundo-roxo-600 { background-color: #9333ea; }
+.fundo-rosa-500 { background-color: #ec4899; }
+.fundo-rosa-600 { background-color: #db2777; }
+
+.borda-cinza-100 { border-color: #f3f4f6; }
+.borda-cinza-200 { border-color: #e5e7eb; }
+.borda-cinza-300 { border-color: #d1d5db; }
+.borda-cinza-400 { border-color: #9ca3af; }
+
+.acento-atual { color: currentColor; }
+.fundo-acento-atual { background-color: currentColor; }
+.borda-acento-atual { border-color: currentColor; }

package/src/entrada.css

@@ -0,0 +1,8 @@
+@import "variaveis.css";
+@import "base.css";
+@import "layout.css";
+@import "espacamento.css";
+@import "bordas.css";
+@import "tipografia.css";
+@import "cores.css";
+@import "interacao.css";

package/src/espacamento.css

@@ -0,0 +1,93 @@
+.preenchimento-0 { padding: var(--espaco-0); }
+.preenchimento-1 { padding: var(--espaco-1); }
+.preenchimento-2 { padding: var(--espaco-2); }
+.preenchimento-3 { padding: var(--espaco-3); }
+.preenchimento-4 { padding: var(--espaco-4); }
+.preenchimento-5 { padding: var(--espaco-5); }
+.preenchimento-6 { padding: var(--espaco-6); }
+.preenchimento-8 { padding: var(--espaco-8); }
+.preenchimento-10 { padding: var(--espaco-10); }
+.preenchimento-12 { padding: var(--espaco-12); }
+.preenchimento-16 { padding: var(--espaco-16); }
+.preenchimento-20 { padding: var(--espaco-20); }
+.preenchimento-24 { padding: var(--espaco-24); }
+
+.preenchimento-x-0 { padding-left: var(--espaco-0); padding-right: var(--espaco-0); }
+.preenchimento-x-2 { padding-left: var(--espaco-2); padding-right: var(--espaco-2); }
+.preenchimento-x-4 { padding-left: var(--espaco-4); padding-right: var(--espaco-4); }
+.preenchimento-x-6 { padding-left: var(--espaco-6); padding-right: var(--espaco-6); }
+.preenchimento-x-8 { padding-left: var(--espaco-8); padding-right: var(--espaco-8); }
+.preenchimento-y-0 { padding-top: var(--espaco-0); padding-bottom: var(--espaco-0); }
+.preenchimento-y-2 { padding-top: var(--espaco-2); padding-bottom: var(--espaco-2); }
+.preenchimento-y-4 { padding-top: var(--espaco-4); padding-bottom: var(--espaco-4); }
+.preenchimento-y-6 { padding-top: var(--espaco-6); padding-bottom: var(--espaco-6); }
+.preenchimento-y-8 { padding-top: var(--espaco-8); padding-bottom: var(--espaco-8); }
+.preenchimento-y-12 { padding-top: var(--espaco-12); padding-bottom: var(--espaco-12); }
+
+.preenchimento-t-0 { padding-top: var(--espaco-0); }
+.preenchimento-t-2 { padding-top: var(--espaco-2); }
+.preenchimento-t-4 { padding-top: var(--espaco-4); }
+.preenchimento-t-8 { padding-top: var(--espaco-8); }
+.preenchimento-t-12 { padding-top: var(--espaco-12); }
+.preenchimento-r-0 { padding-right: var(--espaco-0); }
+.preenchimento-r-2 { padding-right: var(--espaco-2); }
+.preenchimento-r-4 { padding-right: var(--espaco-4); }
+.preenchimento-r-8 { padding-right: var(--espaco-8); }
+.preenchimento-b-0 { padding-bottom: var(--espaco-0); }
+.preenchimento-b-2 { padding-bottom: var(--espaco-2); }
+.preenchimento-b-4 { padding-bottom: var(--espaco-4); }
+.preenchimento-b-8 { padding-bottom: var(--espaco-8); }
+.preenchimento-b-12 { padding-bottom: var(--espaco-12); }
+.preenchimento-l-0 { padding-left: var(--espaco-0); }
+.preenchimento-l-2 { padding-left: var(--espaco-2); }
+.preenchimento-l-4 { padding-left: var(--espaco-4); }
+.preenchimento-l-8 { padding-left: var(--espaco-8); }
+
+.margem-0 { margin: var(--espaco-0); }
+.margem-1 { margin: var(--espaco-1); }
+.margem-2 { margin: var(--espaco-2); }
+.margem-3 { margin: var(--espaco-3); }
+.margem-4 { margin: var(--espaco-4); }
+.margem-5 { margin: var(--espaco-5); }
+.margem-6 { margin: var(--espaco-6); }
+.margem-8 { margin: var(--espaco-8); }
+.margem-10 { margin: var(--espaco-10); }
+.margem-12 { margin: var(--espaco-12); }
+.margem-auto { margin: auto; }
+
+.margem-x-auto { margin-left: auto; margin-right: auto; }
+.margem-y-auto { margin-top: auto; margin-bottom: auto; }
+.margem-t-0 { margin-top: var(--espaco-0); }
+.margem-t-2 { margin-top: var(--espaco-2); }
+.margem-t-4 { margin-top: var(--espaco-4); }
+.margem-t-8 { margin-top: var(--espaco-8); }
+.margem-t-12 { margin-top: var(--espaco-12); }
+.margem-b-0 { margin-bottom: var(--espaco-0); }
+.margem-b-2 { margin-bottom: var(--espaco-2); }
+.margem-b-4 { margin-bottom: var(--espaco-4); }
+.margem-b-8 { margin-bottom: var(--espaco-8); }
+.margem-b-12 { margin-bottom: var(--espaco-12); }
+.margem-l-0 { margin-left: var(--espaco-0); }
+.margem-l-2 { margin-left: var(--espaco-2); }
+.margem-l-4 { margin-left: var(--espaco-4); }
+.margem-l-auto { margin-left: auto; }
+.margem-r-0 { margin-right: var(--espaco-0); }
+.margem-r-2 { margin-right: var(--espaco-2); }
+.margem-r-4 { margin-right: var(--espaco-4); }
+.margem-r-auto { margin-right: auto; }
+
+.margem-negativa-1 { margin: calc(var(--espaco-1) * -1); }
+.margem-negativa-2 { margin: calc(var(--espaco-2) * -1); }
+.margem-negativa-4 { margin: calc(var(--espaco-4) * -1); }
+.margem-negativa-8 { margin: calc(var(--espaco-8) * -1); }
+.margem-negativa-x-2 { margin-left: calc(var(--espaco-2) * -1); margin-right: calc(var(--espaco-2) * -1); }
+.margem-negativa-x-4 { margin-left: calc(var(--espaco-4) * -1); margin-right: calc(var(--espaco-4) * -1); }
+.margem-negativa-x-8 { margin-left: calc(var(--espaco-8) * -1); margin-right: calc(var(--espaco-8) * -1); }
+.margem-negativa-y-2 { margin-top: calc(var(--espaco-2) * -1); margin-bottom: calc(var(--espaco-2) * -1); }
+.margem-negativa-y-4 { margin-top: calc(var(--espaco-4) * -1); margin-bottom: calc(var(--espaco-4) * -1); }
+.margem-negativa-y-8 { margin-top: calc(var(--espaco-8) * -1); margin-bottom: calc(var(--espaco-8) * -1); }
+
+.espacamento-rolagem-t-4 { scroll-margin-top: var(--espaco-4); }
+.espacamento-rolagem-t-8 { scroll-margin-top: var(--espaco-8); }
+.espacamento-rolagem-b-4 { scroll-margin-bottom: var(--espaco-4); }
+.espacamento-rolagem-b-8 { scroll-margin-bottom: var(--espaco-8); }

package/src/interacao.css

@@ -0,0 +1,59 @@
+.cursor-mao { cursor: pointer; }
+.cursor-bloqueado { cursor: not-allowed; }
+.cursor-normal { cursor: default; }
+.cursor-aguardar { cursor: wait; }
+.cursor-texto { cursor: text; }
+.cursor-mover { cursor: move; }
+.cursor-proibido { cursor: no-drop; }
+.cursor-ajuda { cursor: help; }
+.cursor-zoom-in { cursor: zoom-in; }
+.cursor-zoom-out { cursor: zoom-out; }
+
+.selecionar-nenhum { user-select: none; }
+.selecionar-texto { user-select: text; }
+.selecionar-tudo { user-select: all; }
+
+.pointer-eventos-nenhum { pointer-events: none; }
+.pointer-eventos-auto { pointer-events: auto; }
+
+.transicao-nenhuma { transition: none; }
+.transicao-rapida { transition-duration: var(--transicao-rapida); }
+.transicao-normal { transition-duration: var(--transicao-normal); }
+.transicao-tudo { transition-property: all; }
+
+.escala-95:hover { transform: scale(0.95); }
+.escala-105:hover { transform: scale(1.05); }
+.opacidade-hover:hover { opacity: 0.8; }
+
+.redimensionar-nenhum { resize: none; }
+.redimensionar-y { resize: vertical; }
+.redimensionar-x { resize: horizontal; }
+.redimensionar { resize: both; }
+
+.aparencia-nenhum { appearance: none; }
+
+.objeto-conter { object-fit: contain; }
+.objeto-cobrir { object-fit: cover; }
+.objeto-preencher { object-fit: fill; }
+.objeto-nenhum { object-fit: none; }
+.objeto-escala-baixo { object-fit: scale-down; }
+
+.tabela-auto { table-layout: auto; }
+.tabela-fixa { table-layout: fixed; }
+.borda-colapsar { border-collapse: collapse; }
+.borda-separar { border-collapse: separate; }
+
+.rolagem-suave { scroll-behavior: smooth; }
+.rolagem-instantanea { scroll-behavior: auto; }
+.tocar-rolagem-y { touch-action: pan-y; }
+.tocar-rolagem-x { touch-action: pan-x; }
+.tocar-manipular { touch-action: manipulation; }
+.tocar-nenhum { touch-action: none; }
+
+.vontade-mudar-auto { will-change: auto; }
+.vontade-mudar-transform { will-change: transform; }
+.vontade-mudar-opacidade { will-change: opacity; }
+.vontade-mudar-rolagem { will-change: scroll-position; }
+
+.isolamento-isolar { isolation: isolate; }
+.isolacao-auto { isolation: auto; }

package/src/layout.css

@@ -0,0 +1,186 @@
+.bloque { display: block; }
+.flexivel { display: flex; }
+.flexivel-inline { display: inline-flex; }
+.inline { display: inline; }
+.inline-bloque { display: inline-block; }
+.oculto { display: none; }
+.invisivel { visibility: hidden; }
+.tabela { display: table; }
+.tabela-celula { display: table-cell; }
+.tabela-linha { display: table-row; }
+
+.flex-linha { flex-direction: row; }
+.flex-coluna { flex-direction: column; }
+.flex-linha-reverso { flex-direction: row-reverse; }
+.flex-coluna-reverso { flex-direction: column-reverse; }
+
+.flex-envolver { flex-wrap: wrap; }
+.flex-sem-envolver { flex-wrap: nowrap; }
+.flex-envolver-reverso { flex-wrap: wrap-reverse; }
+
+.itens-inicio { align-items: flex-start; }
+.itens-centro { align-items: center; }
+.itens-fim { align-items: flex-end; }
+.itens-esticado { align-items: stretch; }
+.itens-baseline { align-items: baseline; }
+
+.justificar-inicio { justify-content: flex-start; }
+.justificar-centro { justify-content: center; }
+.justificar-fim { justify-content: flex-end; }
+.justificar-entre { justify-content: space-between; }
+.justificar-ao-redor { justify-content: space-around; }
+.justificar-uniforme { justify-content: space-evenly; }
+
+.auto-inicio { align-self: flex-start; }
+.auto-centro { align-self: center; }
+.auto-fim { align-self: flex-end; }
+.auto-esticado { align-self: stretch; }
+
+.flex-preencher { flex: 1 1 0%; }
+.flex-automatico { flex: 1 1 auto; }
+.flex-inicio { flex: 0 1 auto; }
+.flex-zero { flex: none; }
+.flex-crescer { flex-grow: 1; }
+.flex-crescer-0 { flex-grow: 0; }
+.flex-diminuir { flex-shrink: 1; }
+.flex-diminuir-0 { flex-shrink: 0; }
+
+.ordem-1 { order: 1; }
+.ordem-2 { order: 2; }
+.ordem-3 { order: 3; }
+.ordem-4 { order: 4; }
+.ordem-5 { order: 5; }
+.ordem-ultimo { order: 9999; }
+.ordem-primeiro { order: -9999; }
+
+.espacamento-0 { gap: var(--espaco-0); }
+.espacamento-1 { gap: var(--espaco-1); }
+.espacamento-2 { gap: var(--espaco-2); }
+.espacamento-3 { gap: var(--espaco-3); }
+.espacamento-4 { gap: var(--espaco-4); }
+.espacamento-5 { gap: var(--espaco-5); }
+.espacamento-6 { gap: var(--espaco-6); }
+.espacamento-8 { gap: var(--espaco-8); }
+.espacamento-10 { gap: var(--espaco-10); }
+.espacamento-12 { gap: var(--espaco-12); }
+.espacamento-16 { gap: var(--espaco-16); }
+.espacamento-20 { gap: var(--espaco-20); }
+.espacamento-24 { gap: var(--espaco-24); }
+
+.espacamento-x-0 { column-gap: var(--espaco-0); }
+.espacamento-x-2 { column-gap: var(--espaco-2); }
+.espacamento-x-4 { column-gap: var(--espaco-4); }
+.espacamento-x-6 { column-gap: var(--espaco-6); }
+.espacamento-x-8 { column-gap: var(--espaco-8); }
+.espacamento-y-0 { row-gap: var(--espaco-0); }
+.espacamento-y-2 { row-gap: var(--espaco-2); }
+.espacamento-y-4 { row-gap: var(--espaco-4); }
+.espacamento-y-6 { row-gap: var(--espaco-6); }
+.espacamento-y-8 { row-gap: var(--espaco-8); }
+
+.relativo { position: relative; }
+.absoluto { position: absolute; }
+.fixo { position: fixed; }
+.estatico { position: static; }
+
+.preenchir-tela { inset: 0; }
+.topo-0 { top: 0; }
+.direita-0 { right: 0; }
+.baixo-0 { bottom: 0; }
+.esquerda-0 { left: 0; }
+.topo-auto { top: auto; }
+.direita-auto { right: auto; }
+.baixo-auto { bottom: auto; }
+.esquerda-auto { left: auto; }
+
+.centralizar-absolute {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.centralizar-fixo {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.grade { display: grid; }
+.grade-colunas-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grade-colunas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grade-colunas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grade-colunas-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.grade-colunas-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.grade-colunas-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+.grade-linhas-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
+.grade-linhas-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
+.grade-linhas-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
+.grade-linhas-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
+.grade-linhas-auto { grid-auto-rows: auto; }
+.grade-fluxo-coluna { grid-auto-flow: column; }
+.grade-fluxo-linha { grid-auto-flow: row; }
+
+.largura-tela { width: 100vw; }
+.altura-tela { height: 100vh; }
+.largura-cheia { width: 100%; }
+.altura-cheia { height: 100%; }
+.largura-auto { width: auto; }
+.altura-auto { height: auto; }
+.largura-metade { width: 50%; }
+.largura-terco { width: 33.333333%; }
+.largura-dois-tercos { width: 66.666667%; }
+.largura-minima { min-width: 0; }
+.largura-maxima-cheia { max-width: 100%; }
+.largura-maxima-tela { max-width: 100vw; }
+.altura-minima-tela { min-height: 100vh; }
+.altura-minima-cheia { min-height: 100%; }
+.altura-maxima-cheia { max-height: 100%; }
+.altura-maxima-tela { max-height: 100vh; }
+
+.transbordar-oculto { overflow: hidden; }
+.transbordar-auto { overflow: auto; }
+.transbordar-rolagem-x { overflow-x: auto; }
+.transbordar-rolagem-y { overflow-y: auto; }
+.transbordar-visivel { overflow: visible; }
+
+.profundidade-0 { z-index: 0; }
+.profundidade-10 { z-index: 10; }
+.profundidade-20 { z-index: 20; }
+.profundidade-30 { z-index: 30; }
+.profundidade-40 { z-index: 40; }
+.profundidade-50 { z-index: 50; }
+.profundidade-maxima { z-index: 9999; }
+
+.aspecto-quadrado { aspect-ratio: 1 / 1; }
+.aspecto-video { aspect-ratio: 16 / 9; }
+.aspecto-video-vertical { aspect-ratio: 9 / 16; }
+.aspecto-auto { aspect-ratio: auto; }
+
+.encaixe-topo { object-position: top; }
+.encaixe-baixo { object-position: bottom; }
+.encaixe-centro { object-position: center; }
+.encaixe-esquerda { object-position: left; }
+.encaixe-direita { object-position: right; }
+
+.apenas-leitor-tela {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+.not-apenas-leitor-tela {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip-path: none;
+  white-space: normal;
+}

package/src/tipografia.css

@@ -0,0 +1,109 @@
+.texto-esquerda { text-align: left; }
+.texto-centro { text-align: center; }
+.texto-direita { text-align: right; }
+.texto-justificado { text-align: justify; }
+
+.texto-extra-pequeno { font-size: 0.75rem; line-height: 1rem; }
+.texto-pequeno { font-size: 0.875rem; line-height: 1.25rem; }
+.texto-medio { font-size: 1rem; line-height: 1.5rem; }
+.texto-grande { font-size: 1.125rem; line-height: 1.75rem; }
+.texto-extra-grande { font-size: 1.25rem; line-height: 1.75rem; }
+.texto-enorme { font-size: 1.5rem; line-height: 2rem; }
+.texto-muito-enorme { font-size: 1.875rem; line-height: 2.25rem; }
+.texto-gigante { font-size: 2.25rem; line-height: 2.5rem; }
+.texto-heroi { font-size: 3rem; line-height: 1; }
+
+.peso-normal { font-weight: 400; }
+.peso-medio { font-weight: 500; }
+.peso-semi-negrito { font-weight: 600; }
+.peso-negrito { font-weight: 700; }
+.peso-extra-negrito { font-weight: 800; }
+
+.linha-nenhuma { line-height: 1; }
+.linha-apertada { line-height: 1.25; }
+.linha-justa { line-height: 1.375; }
+.linha-normal { line-height: 1.5; }
+.linha-relaxada { line-height: 1.625; }
+.linha-solta { line-height: 2; }
+
+.espacamento-letras-apertado { letter-spacing: -0.025em; }
+.espacamento-letras-normal { letter-spacing: 0; }
+.espacamento-letras-amplo { letter-spacing: 0.025em; }
+.espacamento-letras-largo { letter-spacing: 0.05em; }
+
+.subtil { opacity: 0.6; }
+.opacidade-0 { opacity: 0; }
+.opacidade-50 { opacity: 0.5; }
+.opacidade-100 { opacity: 1; }
+
+.truncar {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.quebrar-palavras { overflow-wrap: break-word; }
+.quebrar-tudo { word-break: break-all; }
+.quebrar-normal { overflow-wrap: normal; }
+
+.sublinhado { text-decoration: underline; }
+.sem-sublinhado { text-decoration: none; }
+.riscado { text-decoration: line-through; }
+.decoracao-nenhuma { text-decoration: none; }
+
+.maiusculas { text-transform: uppercase; }
+.minusculas { text-transform: lowercase; }
+.capitalizar { text-transform: capitalize; }
+.transformacao-nenhuma { text-transform: none; }
+
+.recuo-0 { text-indent: 0; }
+.recuo-4 { text-indent: var(--espaco-4); }
+.recuo-8 { text-indent: var(--espaco-8); }
+
+.limite-linhas-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.limite-linhas-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.limite-linhas-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.limite-linhas-4 {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.limite-linhas-5 {
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.listagem-nenhuma { list-style: none; }
+.listagem-disco { list-style: disc; }
+.listagem-decimal { list-style: decimal; }
+.listagem-circulo { list-style: circle; }
+.listagem-quadrado { list-style: square; }
+.listagem-dentro { list-style-position: inside; }
+.listagem-fora { list-style-position: outside; }
+
+.espaco-branco-normal { white-space: normal; }
+.espaco-branco-agora { white-space: nowrap; }
+.espaco-branco-pre { white-space: pre; }
+.espaco-branco-pre-linha { white-space: pre-line; }
+.espaco-branco-pre-envolver { white-space: pre-wrap; }
+
+.hifenacao-auto { hyphens: auto; }
+.hifenacao-manual { hyphens: manual; }
+.hifenacao-nenhuma { hyphens: none; }

package/src/variaveis.css

@@ -0,0 +1,24 @@
+:root {
+  --espaco-0: 0;
+  --espaco-1: 0.25rem;
+  --espaco-2: 0.5rem;
+  --espaco-3: 0.75rem;
+  --espaco-4: 1rem;
+  --espaco-5: 1.25rem;
+  --espaco-6: 1.5rem;
+  --espaco-8: 2rem;
+  --espaco-10: 2.5rem;
+  --espaco-12: 3rem;
+  --espaco-16: 4rem;
+  --espaco-20: 5rem;
+  --espaco-24: 6rem;
+  --raio-pequeno: 0.25rem;
+  --raio-medio: 0.5rem;
+  --raio-grande: 0.75rem;
+  --raio-cheio: 9999px;
+  --sombra-pequena: 0 1px 2px rgba(0,0,0,0.05);
+  --sombra-media: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
+  --sombra-grande: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+  --transicao-rapida: 150ms;
+  --transicao-normal: 300ms;
+}