brwind 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +173 -0
  2. package/bin/cli.js +165 -0
  3. package/dist/saida.css +1 -0
  4. package/package.json +17 -0
  5. package/src/base.css +15 -0
  6. package/src/bordas.css +55 -0
  7. package/src/cores.css +66 -0
  8. package/src/entrada.css +8 -0
  9. package/src/espacamento.css +93 -0
  10. package/src/interacao.css +59 -0
  11. package/src/layout.css +186 -0
  12. package/src/tipografia.css +109 -0
  13. package/src/variaveis.css +24 -0
package/README.md ADDED
@@ -0,0 +1,173 @@
1
+ # Brwind
2
+
3
+ Framework de utilitários CSS 100% em português. Tudo do zero, sem dependências externas. Funciona como biblioteca npm com CLI (estilo Tailwind).
4
+
5
+ ## Instalação no seu projeto
6
+
7
+ ```bash
8
+ npm install brwind
9
+ ```
10
+
11
+ Ou com npx (sem instalar):
12
+
13
+ ```bash
14
+ npx brwind -o dist/estilos.css
15
+ ```
16
+
17
+ ## Uso como biblioteca (CLI)
18
+
19
+ O comando `brwind` gera o CSS a partir do pacote instalado. Use no seu projeto (React, Vite, etc.):
20
+
21
+ **Saída completa (todas as classes):**
22
+
23
+ ```bash
24
+ npx brwind -o src/estilos/brwind.css
25
+ ```
26
+
27
+ **Com seu CSS customizado (concatenado depois do Brwind):**
28
+
29
+ ```bash
30
+ npx brwind -i src/estilos/meu.css -o dist/estilos.css
31
+ ```
32
+
33
+ **Purge: só incluir classes usadas nos arquivos (reduz o tamanho):**
34
+
35
+ ```bash
36
+ npx brwind -o dist/estilos.css --conteudo src
37
+ ```
38
+
39
+ `--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.
40
+
41
+ **Minificar e watch (recompilar ao salvar):**
42
+
43
+ ```bash
44
+ npx brwind -i src/estilos/entrada.css -o dist/estilos.css --conteudo src --minify --watch
45
+ ```
46
+
47
+ ### Opções do CLI
48
+
49
+ | Opção | Descrição |
50
+ |-------|-----------|
51
+ | `-i arquivo` | CSS de entrada (seu). Será concatenado após o Brwind. |
52
+ | `-o arquivo` | Arquivo de saída. Se omitir, imprime no stdout. |
53
+ | `--conteudo dir1,dir2` | Diretórios para escanear e purgar classes não usadas. |
54
+ | `--minify` ou `-m` | Minifica o CSS gerado. |
55
+ | `--watch` ou `-w` | Observa arquivos e recompila ao salvar. |
56
+
57
+ ### Scripts no package.json (como o Tailwind)
58
+
59
+ No seu projeto, adicione:
60
+
61
+ ```json
62
+ {
63
+ "scripts": {
64
+ "estilos:build": "brwind -o dist/estilos.css --conteudo src --minify",
65
+ "estilos:dev": "brwind -o dist/estilos.css --conteudo src --watch"
66
+ }
67
+ }
68
+ ```
69
+
70
+ Depois: `npm run estilos:build` ou `npm run estilos:dev`. No HTML ou no ponto de entrada do React, importe `dist/estilos.css`.
71
+
72
+ ---
73
+
74
+ ## Desenvolvimento do Brwind (quem mexe no pacote)
75
+
76
+ Na pasta do repositório Brwind:
77
+
78
+ ```bash
79
+ npm install
80
+ npm run build
81
+ ```
82
+
83
+ Gera `dist/saida.css`. Modo watch:
84
+
85
+ ```bash
86
+ npm run dev
87
+ ```
88
+
89
+ Antes de publicar no npm, `prepublishOnly` roda o build automaticamente.
90
+
91
+ ## Uso no React
92
+
93
+ **Opção 1 – Copiar o CSS**
94
+
95
+ 1. No Brwind: `npm run build`
96
+ 2. Copie `dist/saida.css` para o seu projeto React (por exemplo `src/estilos/brwind.css`)
97
+ 3. Importe uma vez no ponto de entrada (ex.: `src/main.jsx` ou `src/App.jsx`):
98
+
99
+ ```jsx
100
+ import './estilos/brwind.css';
101
+ ```
102
+
103
+ **Opção 2 – Brwind como dependência local**
104
+
105
+ 1. No projeto React:
106
+
107
+ ```bash
108
+ npm install file:../brwind
109
+ ```
110
+
111
+ (ajuste `../brwind` para o caminho da pasta do Brwind)
112
+
113
+ 2. No Brwind, rode `npm run build` antes de usar.
114
+ 3. No React, importe no ponto de entrada:
115
+
116
+ ```jsx
117
+ import 'brwind/dist/saida.css';
118
+ ```
119
+
120
+ **Exemplo de componente**
121
+
122
+ Use as classes no `className` dos elementos:
123
+
124
+ ```jsx
125
+ function Cartao({ titulo, filhos }) {
126
+ return (
127
+ <article className="flexivel flex-coluna espacamento-4 preenchimento-6 raio-medio sombra-media fundo-branco">
128
+ <h2 className="texto-grande peso-negrito texto-cinza-800">{titulo}</h2>
129
+ <div className="flexivel itens-centro justificar-entre margem-t-4">
130
+ {filhos}
131
+ </div>
132
+ </article>
133
+ );
134
+ }
135
+ ```
136
+
137
+ ## Exemplos de classes (nomes em português)
138
+
139
+ | Conceito | Brwind |
140
+ |-----------------|---------------------------|
141
+ | Flex centralizado | `flexivel itens-centro justificar-centro` |
142
+ | Display | `bloque`, `flexivel`, `oculto`, `inline-bloque` |
143
+ | Alinhamento | `itens-centro`, `itens-inicio`, `itens-fim` |
144
+ | Justificar | `justificar-centro`, `justificar-entre` |
145
+ | Flex | `flex-preencher`, `flex-zero`, `flex-sem-envolver` |
146
+ | Posição | `relativo`, `absoluto`, `fixo`, `preencir-tela` |
147
+ | Cantos | `topo-0`, `direita-0`, `baixo-0`, `esquerda-0` |
148
+ | Grade | `grade`, `grade-colunas-2`, `grade-linhas-3` |
149
+ | Transbordar | `transbordar-oculto`, `transbordar-auto` |
150
+ | Profundidade | `profundidade-10`, `profundidade-maxima` |
151
+ | Tipografia | `texto-grande`, `peso-negrito`, `linha-normal` |
152
+ | Tamanhos texto | `texto-extra-pequeno`, `texto-medio`, `texto-heroi` |
153
+ | Decoração | `sublinhado`, `sem-sublinhado`, `limite-linhas-2` |
154
+ | Cursor | `cursor-mao`, `cursor-bloqueado`, `cursor-normal` |
155
+ | Transição | `transicao-rapida`, `transicao-normal` |
156
+ | Bordas | `borda`, `raio-medio`, `contorno-nenhum`, `divisor-b` |
157
+ | Acessibilidade | `apenas-leitor-tela` |
158
+
159
+ ## Estrutura
160
+
161
+ - `src/variaveis.css` – variáveis (espaços, raios, sombras, transição)
162
+ - `src/base.css` – reset mínimo
163
+ - `src/layout.css` – display, flex, grade, posição, dimensões, overflow, aspecto, acessibilidade
164
+ - `src/espacamento.css` – preenchimento, margem, margem negativa, scroll-margin
165
+ - `src/bordas.css` – borda por lado, raio, sombra, contorno, divisor
166
+ - `src/tipografia.css` – alinhamento, tamanhos, peso, linha, limite-linhas, listagem, hifenação
167
+ - `src/cores.css` – texto, fundo, borda (cinza, vermelho, verde, azul, amarelo, laranja, roxo, rosa)
168
+ - `src/interacao.css` – cursor, transição, objeto, tabela, rolagem, touch, will-change
169
+ - `src/entrada.css` – junta todos os arquivos
170
+
171
+ ## Licença
172
+
173
+ MIT
package/bin/cli.js ADDED
@@ -0,0 +1,165 @@
1
+ #!/usr/bin/env node
2
+
3
+ const fs = require("fs");
4
+ const path = require("path");
5
+
6
+ const raizBrwind = path.resolve(__dirname, "..");
7
+ const caminhoCssBrwind = path.join(raizBrwind, "dist", "saida.css");
8
+
9
+ function parseArgs() {
10
+ const args = process.argv.slice(2);
11
+ const opcoes = { entrada: null, saida: null, conteudo: [], minify: false, watch: false };
12
+ for (let i = 0; i < args.length; i++) {
13
+ if (args[i] === "-i" && args[i + 1]) {
14
+ opcoes.entrada = path.resolve(process.cwd(), args[++i]);
15
+ } else if (args[i] === "-o" && args[i + 1]) {
16
+ opcoes.saida = path.resolve(process.cwd(), args[++i]);
17
+ } else if (args[i] === "--conteudo" && args[i + 1]) {
18
+ opcoes.conteudo = args[++i].split(",").map((p) => path.resolve(process.cwd(), p.trim()));
19
+ } else if (args[i] === "--minify" || args[i] === "-m") {
20
+ opcoes.minify = true;
21
+ } else if (args[i] === "--watch" || args[i] === "-w") {
22
+ opcoes.watch = true;
23
+ }
24
+ }
25
+ return opcoes;
26
+ }
27
+
28
+ function listarArquivos(dir, extensoes, lista = []) {
29
+ if (!fs.existsSync(dir)) return lista;
30
+ const stat = fs.statSync(dir);
31
+ if (stat.isFile()) {
32
+ const ext = path.extname(dir).toLowerCase();
33
+ if (extensoes.includes(ext)) lista.push(dir);
34
+ return lista;
35
+ }
36
+ const itens = fs.readdirSync(dir, { withFileTypes: true });
37
+ for (const item of itens) {
38
+ const full = path.join(dir, item.name);
39
+ if (item.isDirectory() && item.name !== "node_modules" && !item.name.startsWith(".")) {
40
+ listarArquivos(full, extensoes, lista);
41
+ } else if (item.isFile()) {
42
+ const ext = path.extname(item.name).toLowerCase();
43
+ if (extensoes.includes(ext)) lista.push(full);
44
+ }
45
+ }
46
+ return lista;
47
+ }
48
+
49
+ function extrairClasses(conteudo) {
50
+ const classes = new Set();
51
+ const re = /(?:class|className)=["']([^"']*)["']/g;
52
+ let m;
53
+ while ((m = re.exec(conteudo)) !== null) {
54
+ m[1].split(/\s+/).forEach((c) => c && classes.add(c));
55
+ }
56
+ const reTemplate = /(?:class|className)=\{`([^`]*)`\}/g;
57
+ while ((m = reTemplate.exec(conteudo)) !== null) {
58
+ m[1].split(/\s+/).forEach((c) => c && classes.add(c));
59
+ }
60
+ return classes;
61
+ }
62
+
63
+ function coletarClassesUsadas(diretorios) {
64
+ const extensoes = [".html", ".jsx", ".tsx", ".vue", ".js", ".ts"];
65
+ const arquivos = [];
66
+ for (const dir of diretorios) {
67
+ listarArquivos(dir, extensoes, arquivos);
68
+ }
69
+ const todas = new Set();
70
+ for (const arq of arquivos) {
71
+ try {
72
+ const texto = fs.readFileSync(arq, "utf8");
73
+ extrairClasses(texto).forEach((c) => todas.add(c));
74
+ } catch (_) {}
75
+ }
76
+ return todas;
77
+ }
78
+
79
+ function purgarCss(css, classesUsadas) {
80
+ const regras = [];
81
+ let pos = 0;
82
+ while (pos < css.length) {
83
+ const abre = css.indexOf("{", pos);
84
+ if (abre === -1) break;
85
+ const fecha = css.indexOf("}", abre);
86
+ if (fecha === -1) break;
87
+ const seletor = css.slice(pos, abre).trim();
88
+ const corpo = css.slice(abre + 1, fecha);
89
+ const classesNoSeletor = (seletor.match(/\.[a-zA-Z0-9_-]+/g) || []).map((s) => s.slice(1));
90
+ const ehBase = !seletor.startsWith(".") || seletor.startsWith(":root");
91
+ const usada = classesNoSeletor.length === 0 || classesNoSeletor.some((c) => classesUsadas.has(c));
92
+ if (ehBase || usada) {
93
+ regras.push(seletor + "{" + corpo + "}");
94
+ }
95
+ pos = fecha + 1;
96
+ }
97
+ return regras.join("");
98
+ }
99
+
100
+ function minificar(css) {
101
+ return css
102
+ .replace(/\/\*[\s\S]*?\*\//g, "")
103
+ .replace(/\s*{\s*/g, "{")
104
+ .replace(/\s*}\s*/g, "}")
105
+ .replace(/\s*:\s*/g, ":")
106
+ .replace(/\s*;\s*/g, ";")
107
+ .replace(/\s+/g, " ")
108
+ .trim();
109
+ }
110
+
111
+ function build(opcoes) {
112
+ if (!fs.existsSync(caminhoCssBrwind)) {
113
+ process.stderr.write("Brwind: rode 'npm run build' na pasta do brwind primeiro.\n");
114
+ process.exit(1);
115
+ }
116
+ let css = fs.readFileSync(caminhoCssBrwind, "utf8");
117
+ if (opcoes.conteudo.length > 0) {
118
+ const usadas = coletarClassesUsadas(opcoes.conteudo);
119
+ css = purgarCss(css, usadas);
120
+ }
121
+ if (opcoes.entrada && fs.existsSync(opcoes.entrada)) {
122
+ const customizado = fs.readFileSync(opcoes.entrada, "utf8");
123
+ css = css + "\n" + customizado;
124
+ }
125
+ if (opcoes.minify) {
126
+ css = minificar(css);
127
+ }
128
+ if (opcoes.saida) {
129
+ const dir = path.dirname(opcoes.saida);
130
+ if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
131
+ fs.writeFileSync(opcoes.saida, css, "utf8");
132
+ } else {
133
+ process.stdout.write(css);
134
+ }
135
+ }
136
+
137
+ function watch(opcoes) {
138
+ const arquivos = [];
139
+ if (opcoes.entrada) arquivos.push(opcoes.entrada);
140
+ for (const dir of opcoes.conteudo) {
141
+ listarArquivos(dir, [".html", ".jsx", ".tsx", ".vue", ".js", ".ts"], arquivos);
142
+ }
143
+ arquivos.forEach((f) => {
144
+ if (fs.existsSync(f)) {
145
+ fs.watch(f, { recursive: false }, () => {
146
+ build(opcoes);
147
+ });
148
+ }
149
+ });
150
+ if (opcoes.conteudo.length > 0) {
151
+ opcoes.conteudo.forEach((dir) => {
152
+ if (fs.existsSync(dir) && fs.statSync(dir).isDirectory()) {
153
+ fs.watch(dir, { recursive: true }, () => build(opcoes));
154
+ }
155
+ });
156
+ }
157
+ build(opcoes);
158
+ }
159
+
160
+ const opcoes = parseArgs();
161
+ if (opcoes.watch) {
162
+ watch(opcoes);
163
+ } else {
164
+ build(opcoes);
165
+ }
package/dist/saida.css ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "name": "brwind",
3
+ "version": "1.0.0",
4
+ "description": "Framework de utilitários CSS 100% em português",
5
+ "style": "dist/saida.css",
6
+ "bin": {
7
+ "brwind": "bin/cli.js"
8
+ },
9
+ "scripts": {
10
+ "build": "node build.js --minify",
11
+ "dev": "node build.js --watch",
12
+ "prepublishOnly": "node build.js --minify"
13
+ },
14
+ "keywords": ["css", "português", "brwind", "utilitários"],
15
+ "license": "MIT",
16
+ "files": ["dist", "src", "bin"]
17
+ }
package/src/base.css ADDED
@@ -0,0 +1,15 @@
1
+ *,
2
+ *::before,
3
+ *::after {
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ margin: 0;
9
+ line-height: 1.5;
10
+ }
11
+
12
+ img, svg, video {
13
+ display: block;
14
+ max-width: 100%;
15
+ }
package/src/bordas.css ADDED
@@ -0,0 +1,55 @@
1
+ .borda-0 { border-width: 0; }
2
+ .borda { border-width: 1px; }
3
+ .borda-2 { border-width: 2px; }
4
+ .borda-4 { border-width: 4px; }
5
+ .borda-8 { border-width: 8px; }
6
+
7
+ .borda-t { border-top-width: 1px; }
8
+ .borda-r { border-right-width: 1px; }
9
+ .borda-b { border-bottom-width: 1px; }
10
+ .borda-l { border-left-width: 1px; }
11
+ .borda-t-0 { border-top-width: 0; }
12
+ .borda-r-0 { border-right-width: 0; }
13
+ .borda-b-0 { border-bottom-width: 0; }
14
+ .borda-l-0 { border-left-width: 0; }
15
+
16
+ .borda-solida { border-style: solid; }
17
+ .borda-pontilhada { border-style: dashed; }
18
+ .borda-tracejada { border-style: dotted; }
19
+ .borda-dupla { border-style: double; }
20
+ .borda-nenhuma { border-style: none; }
21
+
22
+ .borda-transparente { border-color: transparent; }
23
+ .borda-herdar { border-color: inherit; }
24
+
25
+ .raio-0 { border-radius: 0; }
26
+ .raio-pequeno { border-radius: var(--raio-pequeno); }
27
+ .raio-medio { border-radius: var(--raio-medio); }
28
+ .raio-grande { border-radius: var(--raio-grande); }
29
+ .raio-cheio { border-radius: var(--raio-cheio); }
30
+
31
+ .raio-t-pequeno { border-top-left-radius: var(--raio-pequeno); border-top-right-radius: var(--raio-pequeno); }
32
+ .raio-t-medio { border-top-left-radius: var(--raio-medio); border-top-right-radius: var(--raio-medio); }
33
+ .raio-t-grande { border-top-left-radius: var(--raio-grande); border-top-right-radius: var(--raio-grande); }
34
+ .raio-b-pequeno { border-bottom-left-radius: var(--raio-pequeno); border-bottom-right-radius: var(--raio-pequeno); }
35
+ .raio-b-medio { border-bottom-left-radius: var(--raio-medio); border-bottom-right-radius: var(--raio-medio); }
36
+ .raio-b-grande { border-bottom-left-radius: var(--raio-grande); border-bottom-right-radius: var(--raio-grande); }
37
+ .raio-l-medio { border-top-left-radius: var(--raio-medio); border-bottom-left-radius: var(--raio-medio); }
38
+ .raio-r-medio { border-top-right-radius: var(--raio-medio); border-bottom-right-radius: var(--raio-medio); }
39
+
40
+ .sombra-nenhuma { box-shadow: none; }
41
+ .sombra-pequena { box-shadow: var(--sombra-pequena); }
42
+ .sombra-media { box-shadow: var(--sombra-media); }
43
+ .sombra-grande { box-shadow: var(--sombra-grande); }
44
+
45
+ .contorno-nenhum { outline: none; }
46
+ .contorno-0 { outline-width: 0; }
47
+ .contorno-1 { outline-width: 1px; }
48
+ .contorno-2 { outline-width: 2px; }
49
+ .contorno-solido { outline-style: solid; }
50
+ .contorno-pontilhado { outline-style: dashed; }
51
+
52
+ .divisor-t { border-top: 1px solid currentColor; }
53
+ .divisor-r { border-right: 1px solid currentColor; }
54
+ .divisor-b { border-bottom: 1px solid currentColor; }
55
+ .divisor-l { border-left: 1px solid currentColor; }
package/src/cores.css ADDED
@@ -0,0 +1,66 @@
1
+ .texto-branco { color: #fff; }
2
+ .texto-preto { color: #000; }
3
+ .texto-transparente { color: transparent; }
4
+ .texto-herdar { color: inherit; }
5
+ .texto-cinza-50 { color: #f9fafb; }
6
+ .texto-cinza-100 { color: #f3f4f6; }
7
+ .texto-cinza-200 { color: #e5e7eb; }
8
+ .texto-cinza-300 { color: #d1d5db; }
9
+ .texto-cinza-400 { color: #9ca3af; }
10
+ .texto-cinza-500 { color: #6b7280; }
11
+ .texto-cinza-600 { color: #4b5563; }
12
+ .texto-cinza-700 { color: #374151; }
13
+ .texto-cinza-800 { color: #1f2937; }
14
+ .texto-cinza-900 { color: #111827; }
15
+ .texto-vermelho-500 { color: #ef4444; }
16
+ .texto-vermelho-600 { color: #dc2626; }
17
+ .texto-verde-500 { color: #22c55e; }
18
+ .texto-verde-600 { color: #16a34a; }
19
+ .texto-azul-500 { color: #3b82f6; }
20
+ .texto-azul-600 { color: #2563eb; }
21
+ .texto-amarelo-500 { color: #eab308; }
22
+ .texto-amarelo-600 { color: #ca8a04; }
23
+ .texto-laranja-500 { color: #f97316; }
24
+ .texto-laranja-600 { color: #ea580c; }
25
+ .texto-roxo-500 { color: #a855f7; }
26
+ .texto-roxo-600 { color: #9333ea; }
27
+ .texto-rosa-500 { color: #ec4899; }
28
+ .texto-rosa-600 { color: #db2777; }
29
+
30
+ .fundo-transparente { background-color: transparent; }
31
+ .fundo-branco { background-color: #fff; }
32
+ .fundo-preto { background-color: #000; }
33
+ .fundo-herdar { background-color: inherit; }
34
+ .fundo-cinza-50 { background-color: #f9fafb; }
35
+ .fundo-cinza-100 { background-color: #f3f4f6; }
36
+ .fundo-cinza-200 { background-color: #e5e7eb; }
37
+ .fundo-cinza-300 { background-color: #d1d5db; }
38
+ .fundo-cinza-400 { background-color: #9ca3af; }
39
+ .fundo-cinza-500 { background-color: #6b7280; }
40
+ .fundo-cinza-600 { background-color: #4b5563; }
41
+ .fundo-cinza-700 { background-color: #374151; }
42
+ .fundo-cinza-800 { background-color: #1f2937; }
43
+ .fundo-cinza-900 { background-color: #111827; }
44
+ .fundo-vermelho-500 { background-color: #ef4444; }
45
+ .fundo-vermelho-600 { background-color: #dc2626; }
46
+ .fundo-verde-500 { background-color: #22c55e; }
47
+ .fundo-verde-600 { background-color: #16a34a; }
48
+ .fundo-azul-500 { background-color: #3b82f6; }
49
+ .fundo-azul-600 { background-color: #2563eb; }
50
+ .fundo-amarelo-500 { background-color: #eab308; }
51
+ .fundo-amarelo-600 { background-color: #ca8a04; }
52
+ .fundo-laranja-500 { background-color: #f97316; }
53
+ .fundo-laranja-600 { background-color: #ea580c; }
54
+ .fundo-roxo-500 { background-color: #a855f7; }
55
+ .fundo-roxo-600 { background-color: #9333ea; }
56
+ .fundo-rosa-500 { background-color: #ec4899; }
57
+ .fundo-rosa-600 { background-color: #db2777; }
58
+
59
+ .borda-cinza-100 { border-color: #f3f4f6; }
60
+ .borda-cinza-200 { border-color: #e5e7eb; }
61
+ .borda-cinza-300 { border-color: #d1d5db; }
62
+ .borda-cinza-400 { border-color: #9ca3af; }
63
+
64
+ .acento-atual { color: currentColor; }
65
+ .fundo-acento-atual { background-color: currentColor; }
66
+ .borda-acento-atual { border-color: currentColor; }
package/src/entrada.css ADDED
@@ -0,0 +1,8 @@
1
+ @import "variaveis.css";
2
+ @import "base.css";
3
+ @import "layout.css";
4
+ @import "espacamento.css";
5
+ @import "bordas.css";
6
+ @import "tipografia.css";
7
+ @import "cores.css";
8
+ @import "interacao.css";
package/src/espacamento.css ADDED
@@ -0,0 +1,93 @@
1
+ .preenchimento-0 { padding: var(--espaco-0); }
2
+ .preenchimento-1 { padding: var(--espaco-1); }
3
+ .preenchimento-2 { padding: var(--espaco-2); }
4
+ .preenchimento-3 { padding: var(--espaco-3); }
5
+ .preenchimento-4 { padding: var(--espaco-4); }
6
+ .preenchimento-5 { padding: var(--espaco-5); }
7
+ .preenchimento-6 { padding: var(--espaco-6); }
8
+ .preenchimento-8 { padding: var(--espaco-8); }
9
+ .preenchimento-10 { padding: var(--espaco-10); }
10
+ .preenchimento-12 { padding: var(--espaco-12); }
11
+ .preenchimento-16 { padding: var(--espaco-16); }
12
+ .preenchimento-20 { padding: var(--espaco-20); }
13
+ .preenchimento-24 { padding: var(--espaco-24); }
14
+
15
+ .preenchimento-x-0 { padding-left: var(--espaco-0); padding-right: var(--espaco-0); }
16
+ .preenchimento-x-2 { padding-left: var(--espaco-2); padding-right: var(--espaco-2); }
17
+ .preenchimento-x-4 { padding-left: var(--espaco-4); padding-right: var(--espaco-4); }
18
+ .preenchimento-x-6 { padding-left: var(--espaco-6); padding-right: var(--espaco-6); }
19
+ .preenchimento-x-8 { padding-left: var(--espaco-8); padding-right: var(--espaco-8); }
20
+ .preenchimento-y-0 { padding-top: var(--espaco-0); padding-bottom: var(--espaco-0); }
21
+ .preenchimento-y-2 { padding-top: var(--espaco-2); padding-bottom: var(--espaco-2); }
22
+ .preenchimento-y-4 { padding-top: var(--espaco-4); padding-bottom: var(--espaco-4); }
23
+ .preenchimento-y-6 { padding-top: var(--espaco-6); padding-bottom: var(--espaco-6); }
24
+ .preenchimento-y-8 { padding-top: var(--espaco-8); padding-bottom: var(--espaco-8); }
25
+ .preenchimento-y-12 { padding-top: var(--espaco-12); padding-bottom: var(--espaco-12); }
26
+
27
+ .preenchimento-t-0 { padding-top: var(--espaco-0); }
28
+ .preenchimento-t-2 { padding-top: var(--espaco-2); }
29
+ .preenchimento-t-4 { padding-top: var(--espaco-4); }
30
+ .preenchimento-t-8 { padding-top: var(--espaco-8); }
31
+ .preenchimento-t-12 { padding-top: var(--espaco-12); }
32
+ .preenchimento-r-0 { padding-right: var(--espaco-0); }
33
+ .preenchimento-r-2 { padding-right: var(--espaco-2); }
34
+ .preenchimento-r-4 { padding-right: var(--espaco-4); }
35
+ .preenchimento-r-8 { padding-right: var(--espaco-8); }
36
+ .preenchimento-b-0 { padding-bottom: var(--espaco-0); }
37
+ .preenchimento-b-2 { padding-bottom: var(--espaco-2); }
38
+ .preenchimento-b-4 { padding-bottom: var(--espaco-4); }
39
+ .preenchimento-b-8 { padding-bottom: var(--espaco-8); }
40
+ .preenchimento-b-12 { padding-bottom: var(--espaco-12); }
41
+ .preenchimento-l-0 { padding-left: var(--espaco-0); }
42
+ .preenchimento-l-2 { padding-left: var(--espaco-2); }
43
+ .preenchimento-l-4 { padding-left: var(--espaco-4); }
44
+ .preenchimento-l-8 { padding-left: var(--espaco-8); }
45
+
46
+ .margem-0 { margin: var(--espaco-0); }
47
+ .margem-1 { margin: var(--espaco-1); }
48
+ .margem-2 { margin: var(--espaco-2); }
49
+ .margem-3 { margin: var(--espaco-3); }
50
+ .margem-4 { margin: var(--espaco-4); }
51
+ .margem-5 { margin: var(--espaco-5); }
52
+ .margem-6 { margin: var(--espaco-6); }
53
+ .margem-8 { margin: var(--espaco-8); }
54
+ .margem-10 { margin: var(--espaco-10); }
55
+ .margem-12 { margin: var(--espaco-12); }
56
+ .margem-auto { margin: auto; }
57
+
58
+ .margem-x-auto { margin-left: auto; margin-right: auto; }
59
+ .margem-y-auto { margin-top: auto; margin-bottom: auto; }
60
+ .margem-t-0 { margin-top: var(--espaco-0); }
61
+ .margem-t-2 { margin-top: var(--espaco-2); }
62
+ .margem-t-4 { margin-top: var(--espaco-4); }
63
+ .margem-t-8 { margin-top: var(--espaco-8); }
64
+ .margem-t-12 { margin-top: var(--espaco-12); }
65
+ .margem-b-0 { margin-bottom: var(--espaco-0); }
66
+ .margem-b-2 { margin-bottom: var(--espaco-2); }
67
+ .margem-b-4 { margin-bottom: var(--espaco-4); }
68
+ .margem-b-8 { margin-bottom: var(--espaco-8); }
69
+ .margem-b-12 { margin-bottom: var(--espaco-12); }
70
+ .margem-l-0 { margin-left: var(--espaco-0); }
71
+ .margem-l-2 { margin-left: var(--espaco-2); }
72
+ .margem-l-4 { margin-left: var(--espaco-4); }
73
+ .margem-l-auto { margin-left: auto; }
74
+ .margem-r-0 { margin-right: var(--espaco-0); }
75
+ .margem-r-2 { margin-right: var(--espaco-2); }
76
+ .margem-r-4 { margin-right: var(--espaco-4); }
77
+ .margem-r-auto { margin-right: auto; }
78
+
79
+ .margem-negativa-1 { margin: calc(var(--espaco-1) * -1); }
80
+ .margem-negativa-2 { margin: calc(var(--espaco-2) * -1); }
81
+ .margem-negativa-4 { margin: calc(var(--espaco-4) * -1); }
82
+ .margem-negativa-8 { margin: calc(var(--espaco-8) * -1); }
83
+ .margem-negativa-x-2 { margin-left: calc(var(--espaco-2) * -1); margin-right: calc(var(--espaco-2) * -1); }
84
+ .margem-negativa-x-4 { margin-left: calc(var(--espaco-4) * -1); margin-right: calc(var(--espaco-4) * -1); }
85
+ .margem-negativa-x-8 { margin-left: calc(var(--espaco-8) * -1); margin-right: calc(var(--espaco-8) * -1); }
86
+ .margem-negativa-y-2 { margin-top: calc(var(--espaco-2) * -1); margin-bottom: calc(var(--espaco-2) * -1); }
87
+ .margem-negativa-y-4 { margin-top: calc(var(--espaco-4) * -1); margin-bottom: calc(var(--espaco-4) * -1); }
88
+ .margem-negativa-y-8 { margin-top: calc(var(--espaco-8) * -1); margin-bottom: calc(var(--espaco-8) * -1); }
89
+
90
+ .espacamento-rolagem-t-4 { scroll-margin-top: var(--espaco-4); }
91
+ .espacamento-rolagem-t-8 { scroll-margin-top: var(--espaco-8); }
92
+ .espacamento-rolagem-b-4 { scroll-margin-bottom: var(--espaco-4); }
93
+ .espacamento-rolagem-b-8 { scroll-margin-bottom: var(--espaco-8); }
package/src/interacao.css ADDED
@@ -0,0 +1,59 @@
1
+ .cursor-mao { cursor: pointer; }
2
+ .cursor-bloqueado { cursor: not-allowed; }
3
+ .cursor-normal { cursor: default; }
4
+ .cursor-aguardar { cursor: wait; }
5
+ .cursor-texto { cursor: text; }
6
+ .cursor-mover { cursor: move; }
7
+ .cursor-proibido { cursor: no-drop; }
8
+ .cursor-ajuda { cursor: help; }
9
+ .cursor-zoom-in { cursor: zoom-in; }
10
+ .cursor-zoom-out { cursor: zoom-out; }
11
+
12
+ .selecionar-nenhum { user-select: none; }
13
+ .selecionar-texto { user-select: text; }
14
+ .selecionar-tudo { user-select: all; }
15
+
16
+ .pointer-eventos-nenhum { pointer-events: none; }
17
+ .pointer-eventos-auto { pointer-events: auto; }
18
+
19
+ .transicao-nenhuma { transition: none; }
20
+ .transicao-rapida { transition-duration: var(--transicao-rapida); }
21
+ .transicao-normal { transition-duration: var(--transicao-normal); }
22
+ .transicao-tudo { transition-property: all; }
23
+
24
+ .escala-95:hover { transform: scale(0.95); }
25
+ .escala-105:hover { transform: scale(1.05); }
26
+ .opacidade-hover:hover { opacity: 0.8; }
27
+
28
+ .redimensionar-nenhum { resize: none; }
29
+ .redimensionar-y { resize: vertical; }
30
+ .redimensionar-x { resize: horizontal; }
31
+ .redimensionar { resize: both; }
32
+
33
+ .aparencia-nenhum { appearance: none; }
34
+
35
+ .objeto-conter { object-fit: contain; }
36
+ .objeto-cobrir { object-fit: cover; }
37
+ .objeto-preencher { object-fit: fill; }
38
+ .objeto-nenhum { object-fit: none; }
39
+ .objeto-escala-baixo { object-fit: scale-down; }
40
+
41
+ .tabela-auto { table-layout: auto; }
42
+ .tabela-fixa { table-layout: fixed; }
43
+ .borda-colapsar { border-collapse: collapse; }
44
+ .borda-separar { border-collapse: separate; }
45
+
46
+ .rolagem-suave { scroll-behavior: smooth; }
47
+ .rolagem-instantanea { scroll-behavior: auto; }
48
+ .tocar-rolagem-y { touch-action: pan-y; }
49
+ .tocar-rolagem-x { touch-action: pan-x; }
50
+ .tocar-manipular { touch-action: manipulation; }
51
+ .tocar-nenhum { touch-action: none; }
52
+
53
+ .vontade-mudar-auto { will-change: auto; }
54
+ .vontade-mudar-transform { will-change: transform; }
55
+ .vontade-mudar-opacidade { will-change: opacity; }
56
+ .vontade-mudar-rolagem { will-change: scroll-position; }
57
+
58
+ .isolamento-isolar { isolation: isolate; }
59
+ .isolacao-auto { isolation: auto; }
package/src/layout.css ADDED
@@ -0,0 +1,186 @@
1
+ .bloque { display: block; }
2
+ .flexivel { display: flex; }
3
+ .flexivel-inline { display: inline-flex; }
4
+ .inline { display: inline; }
5
+ .inline-bloque { display: inline-block; }
6
+ .oculto { display: none; }
7
+ .invisivel { visibility: hidden; }
8
+ .tabela { display: table; }
9
+ .tabela-celula { display: table-cell; }
10
+ .tabela-linha { display: table-row; }
11
+
12
+ .flex-linha { flex-direction: row; }
13
+ .flex-coluna { flex-direction: column; }
14
+ .flex-linha-reverso { flex-direction: row-reverse; }
15
+ .flex-coluna-reverso { flex-direction: column-reverse; }
16
+
17
+ .flex-envolver { flex-wrap: wrap; }
18
+ .flex-sem-envolver { flex-wrap: nowrap; }
19
+ .flex-envolver-reverso { flex-wrap: wrap-reverse; }
20
+
21
+ .itens-inicio { align-items: flex-start; }
22
+ .itens-centro { align-items: center; }
23
+ .itens-fim { align-items: flex-end; }
24
+ .itens-esticado { align-items: stretch; }
25
+ .itens-baseline { align-items: baseline; }
26
+
27
+ .justificar-inicio { justify-content: flex-start; }
28
+ .justificar-centro { justify-content: center; }
29
+ .justificar-fim { justify-content: flex-end; }
30
+ .justificar-entre { justify-content: space-between; }
31
+ .justificar-ao-redor { justify-content: space-around; }
32
+ .justificar-uniforme { justify-content: space-evenly; }
33
+
34
+ .auto-inicio { align-self: flex-start; }
35
+ .auto-centro { align-self: center; }
36
+ .auto-fim { align-self: flex-end; }
37
+ .auto-esticado { align-self: stretch; }
38
+
39
+ .flex-preencher { flex: 1 1 0%; }
40
+ .flex-automatico { flex: 1 1 auto; }
41
+ .flex-inicio { flex: 0 1 auto; }
42
+ .flex-zero { flex: none; }
43
+ .flex-crescer { flex-grow: 1; }
44
+ .flex-crescer-0 { flex-grow: 0; }
45
+ .flex-diminuir { flex-shrink: 1; }
46
+ .flex-diminuir-0 { flex-shrink: 0; }
47
+
48
+ .ordem-1 { order: 1; }
49
+ .ordem-2 { order: 2; }
50
+ .ordem-3 { order: 3; }
51
+ .ordem-4 { order: 4; }
52
+ .ordem-5 { order: 5; }
53
+ .ordem-ultimo { order: 9999; }
54
+ .ordem-primeiro { order: -9999; }
55
+
56
+ .espacamento-0 { gap: var(--espaco-0); }
57
+ .espacamento-1 { gap: var(--espaco-1); }
58
+ .espacamento-2 { gap: var(--espaco-2); }
59
+ .espacamento-3 { gap: var(--espaco-3); }
60
+ .espacamento-4 { gap: var(--espaco-4); }
61
+ .espacamento-5 { gap: var(--espaco-5); }
62
+ .espacamento-6 { gap: var(--espaco-6); }
63
+ .espacamento-8 { gap: var(--espaco-8); }
64
+ .espacamento-10 { gap: var(--espaco-10); }
65
+ .espacamento-12 { gap: var(--espaco-12); }
66
+ .espacamento-16 { gap: var(--espaco-16); }
67
+ .espacamento-20 { gap: var(--espaco-20); }
68
+ .espacamento-24 { gap: var(--espaco-24); }
69
+
70
+ .espacamento-x-0 { column-gap: var(--espaco-0); }
71
+ .espacamento-x-2 { column-gap: var(--espaco-2); }
72
+ .espacamento-x-4 { column-gap: var(--espaco-4); }
73
+ .espacamento-x-6 { column-gap: var(--espaco-6); }
74
+ .espacamento-x-8 { column-gap: var(--espaco-8); }
75
+ .espacamento-y-0 { row-gap: var(--espaco-0); }
76
+ .espacamento-y-2 { row-gap: var(--espaco-2); }
77
+ .espacamento-y-4 { row-gap: var(--espaco-4); }
78
+ .espacamento-y-6 { row-gap: var(--espaco-6); }
79
+ .espacamento-y-8 { row-gap: var(--espaco-8); }
80
+
81
+ .relativo { position: relative; }
82
+ .absoluto { position: absolute; }
83
+ .fixo { position: fixed; }
84
+ .estatico { position: static; }
85
+
86
+ .preenchir-tela { inset: 0; }
87
+ .topo-0 { top: 0; }
88
+ .direita-0 { right: 0; }
89
+ .baixo-0 { bottom: 0; }
90
+ .esquerda-0 { left: 0; }
91
+ .topo-auto { top: auto; }
92
+ .direita-auto { right: auto; }
93
+ .baixo-auto { bottom: auto; }
94
+ .esquerda-auto { left: auto; }
95
+
96
+ .centralizar-absolute {
97
+ position: absolute;
98
+ top: 50%;
99
+ left: 50%;
100
+ transform: translate(-50%, -50%);
101
+ }
102
+ .centralizar-fixo {
103
+ position: fixed;
104
+ top: 50%;
105
+ left: 50%;
106
+ transform: translate(-50%, -50%);
107
+ }
108
+
109
+ .grade { display: grid; }
110
+ .grade-colunas-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
111
+ .grade-colunas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
112
+ .grade-colunas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
113
+ .grade-colunas-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
114
+ .grade-colunas-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
115
+ .grade-colunas-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
116
+ .grade-linhas-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
117
+ .grade-linhas-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
118
+ .grade-linhas-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
119
+ .grade-linhas-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
120
+ .grade-linhas-auto { grid-auto-rows: auto; }
121
+ .grade-fluxo-coluna { grid-auto-flow: column; }
122
+ .grade-fluxo-linha { grid-auto-flow: row; }
123
+
124
+ .largura-tela { width: 100vw; }
125
+ .altura-tela { height: 100vh; }
126
+ .largura-cheia { width: 100%; }
127
+ .altura-cheia { height: 100%; }
128
+ .largura-auto { width: auto; }
129
+ .altura-auto { height: auto; }
130
+ .largura-metade { width: 50%; }
131
+ .largura-terco { width: 33.333333%; }
132
+ .largura-dois-tercos { width: 66.666667%; }
133
+ .largura-minima { min-width: 0; }
134
+ .largura-maxima-cheia { max-width: 100%; }
135
+ .largura-maxima-tela { max-width: 100vw; }
136
+ .altura-minima-tela { min-height: 100vh; }
137
+ .altura-minima-cheia { min-height: 100%; }
138
+ .altura-maxima-cheia { max-height: 100%; }
139
+ .altura-maxima-tela { max-height: 100vh; }
140
+
141
+ .transbordar-oculto { overflow: hidden; }
142
+ .transbordar-auto { overflow: auto; }
143
+ .transbordar-rolagem-x { overflow-x: auto; }
144
+ .transbordar-rolagem-y { overflow-y: auto; }
145
+ .transbordar-visivel { overflow: visible; }
146
+
147
+ .profundidade-0 { z-index: 0; }
148
+ .profundidade-10 { z-index: 10; }
149
+ .profundidade-20 { z-index: 20; }
150
+ .profundidade-30 { z-index: 30; }
151
+ .profundidade-40 { z-index: 40; }
152
+ .profundidade-50 { z-index: 50; }
153
+ .profundidade-maxima { z-index: 9999; }
154
+
155
+ .aspecto-quadrado { aspect-ratio: 1 / 1; }
156
+ .aspecto-video { aspect-ratio: 16 / 9; }
157
+ .aspecto-video-vertical { aspect-ratio: 9 / 16; }
158
+ .aspecto-auto { aspect-ratio: auto; }
159
+
160
+ .encaixe-topo { object-position: top; }
161
+ .encaixe-baixo { object-position: bottom; }
162
+ .encaixe-centro { object-position: center; }
163
+ .encaixe-esquerda { object-position: left; }
164
+ .encaixe-direita { object-position: right; }
165
+
166
+ .apenas-leitor-tela {
167
+ position: absolute;
168
+ width: 1px;
169
+ height: 1px;
170
+ padding: 0;
171
+ margin: -1px;
172
+ overflow: hidden;
173
+ clip-path: inset(50%);
174
+ white-space: nowrap;
175
+ border-width: 0;
176
+ }
177
+ .not-apenas-leitor-tela {
178
+ position: static;
179
+ width: auto;
180
+ height: auto;
181
+ padding: 0;
182
+ margin: 0;
183
+ overflow: visible;
184
+ clip-path: none;
185
+ white-space: normal;
186
+ }
package/src/tipografia.css ADDED
@@ -0,0 +1,109 @@
1
+ .texto-esquerda { text-align: left; }
2
+ .texto-centro { text-align: center; }
3
+ .texto-direita { text-align: right; }
4
+ .texto-justificado { text-align: justify; }
5
+
6
+ .texto-extra-pequeno { font-size: 0.75rem; line-height: 1rem; }
7
+ .texto-pequeno { font-size: 0.875rem; line-height: 1.25rem; }
8
+ .texto-medio { font-size: 1rem; line-height: 1.5rem; }
9
+ .texto-grande { font-size: 1.125rem; line-height: 1.75rem; }
10
+ .texto-extra-grande { font-size: 1.25rem; line-height: 1.75rem; }
11
+ .texto-enorme { font-size: 1.5rem; line-height: 2rem; }
12
+ .texto-muito-enorme { font-size: 1.875rem; line-height: 2.25rem; }
13
+ .texto-gigante { font-size: 2.25rem; line-height: 2.5rem; }
14
+ .texto-heroi { font-size: 3rem; line-height: 1; }
15
+
16
+ .peso-normal { font-weight: 400; }
17
+ .peso-medio { font-weight: 500; }
18
+ .peso-semi-negrito { font-weight: 600; }
19
+ .peso-negrito { font-weight: 700; }
20
+ .peso-extra-negrito { font-weight: 800; }
21
+
22
+ .linha-nenhuma { line-height: 1; }
23
+ .linha-apertada { line-height: 1.25; }
24
+ .linha-justa { line-height: 1.375; }
25
+ .linha-normal { line-height: 1.5; }
26
+ .linha-relaxada { line-height: 1.625; }
27
+ .linha-solta { line-height: 2; }
28
+
29
+ .espacamento-letras-apertado { letter-spacing: -0.025em; }
30
+ .espacamento-letras-normal { letter-spacing: 0; }
31
+ .espacamento-letras-amplo { letter-spacing: 0.025em; }
32
+ .espacamento-letras-largo { letter-spacing: 0.05em; }
33
+
34
+ .subtil { opacity: 0.6; }
35
+ .opacidade-0 { opacity: 0; }
36
+ .opacidade-50 { opacity: 0.5; }
37
+ .opacidade-100 { opacity: 1; }
38
+
39
+ .truncar {
40
+ overflow: hidden;
41
+ text-overflow: ellipsis;
42
+ white-space: nowrap;
43
+ }
44
+ .quebrar-palavras { overflow-wrap: break-word; }
45
+ .quebrar-tudo { word-break: break-all; }
46
+ .quebrar-normal { overflow-wrap: normal; }
47
+
48
+ .sublinhado { text-decoration: underline; }
49
+ .sem-sublinhado { text-decoration: none; }
50
+ .riscado { text-decoration: line-through; }
51
+ .decoracao-nenhuma { text-decoration: none; }
52
+
53
+ .maiusculas { text-transform: uppercase; }
54
+ .minusculas { text-transform: lowercase; }
55
+ .capitalizar { text-transform: capitalize; }
56
+ .transformacao-nenhuma { text-transform: none; }
57
+
58
+ .recuo-0 { text-indent: 0; }
59
+ .recuo-4 { text-indent: var(--espaco-4); }
60
+ .recuo-8 { text-indent: var(--espaco-8); }
61
+
62
+ .limite-linhas-1 {
63
+ display: -webkit-box;
64
+ -webkit-line-clamp: 1;
65
+ -webkit-box-orient: vertical;
66
+ overflow: hidden;
67
+ }
68
+ .limite-linhas-2 {
69
+ display: -webkit-box;
70
+ -webkit-line-clamp: 2;
71
+ -webkit-box-orient: vertical;
72
+ overflow: hidden;
73
+ }
74
+ .limite-linhas-3 {
75
+ display: -webkit-box;
76
+ -webkit-line-clamp: 3;
77
+ -webkit-box-orient: vertical;
78
+ overflow: hidden;
79
+ }
80
+ .limite-linhas-4 {
81
+ display: -webkit-box;
82
+ -webkit-line-clamp: 4;
83
+ -webkit-box-orient: vertical;
84
+ overflow: hidden;
85
+ }
86
+ .limite-linhas-5 {
87
+ display: -webkit-box;
88
+ -webkit-line-clamp: 5;
89
+ -webkit-box-orient: vertical;
90
+ overflow: hidden;
91
+ }
92
+
93
+ .listagem-nenhuma { list-style: none; }
94
+ .listagem-disco { list-style: disc; }
95
+ .listagem-decimal { list-style: decimal; }
96
+ .listagem-circulo { list-style: circle; }
97
+ .listagem-quadrado { list-style: square; }
98
+ .listagem-dentro { list-style-position: inside; }
99
+ .listagem-fora { list-style-position: outside; }
100
+
101
+ .espaco-branco-normal { white-space: normal; }
102
+ .espaco-branco-agora { white-space: nowrap; }
103
+ .espaco-branco-pre { white-space: pre; }
104
+ .espaco-branco-pre-linha { white-space: pre-line; }
105
+ .espaco-branco-pre-envolver { white-space: pre-wrap; }
106
+
107
+ .hifenacao-auto { hyphens: auto; }
108
+ .hifenacao-manual { hyphens: manual; }
109
+ .hifenacao-nenhuma { hyphens: none; }
package/src/variaveis.css ADDED
@@ -0,0 +1,24 @@
1
+ :root {
2
+ --espaco-0: 0;
3
+ --espaco-1: 0.25rem;
4
+ --espaco-2: 0.5rem;
5
+ --espaco-3: 0.75rem;
6
+ --espaco-4: 1rem;
7
+ --espaco-5: 1.25rem;
8
+ --espaco-6: 1.5rem;
9
+ --espaco-8: 2rem;
10
+ --espaco-10: 2.5rem;
11
+ --espaco-12: 3rem;
12
+ --espaco-16: 4rem;
13
+ --espaco-20: 5rem;
14
+ --espaco-24: 6rem;
15
+ --raio-pequeno: 0.25rem;
16
+ --raio-medio: 0.5rem;
17
+ --raio-grande: 0.75rem;
18
+ --raio-cheio: 9999px;
19
+ --sombra-pequena: 0 1px 2px rgba(0,0,0,0.05);
20
+ --sombra-media: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
21
+ --sombra-grande: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
22
+ --transicao-rapida: 150ms;
23
+ --transicao-normal: 300ms;
24
+ }