clarus-css 0.1.0 → 0.1.1

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 (79) hide show
  1. package/README.md +126 -1
  2. package/dist/css/clarus.css +3583 -0
  3. package/dist/css/clarus.css.map +1 -0
  4. package/dist/css/clarus.min.css +2 -0
  5. package/dist/css/clarus.min.css.map +1 -0
  6. package/dist/css/components.css +162 -0
  7. package/dist/css/components.css.map +1 -0
  8. package/dist/css/components.min.css +2 -0
  9. package/dist/css/components.min.css.map +1 -0
  10. package/dist/css/forms.css +172 -0
  11. package/dist/css/forms.css.map +1 -0
  12. package/dist/css/forms.min.css +2 -0
  13. package/dist/css/forms.min.css.map +1 -0
  14. package/dist/css/helpers.css +2965 -0
  15. package/dist/css/helpers.css.map +1 -0
  16. package/dist/css/helpers.min.css +2 -0
  17. package/dist/css/helpers.min.css.map +1 -0
  18. package/dist/css/layout.css +485 -0
  19. package/dist/css/layout.css.map +1 -0
  20. package/dist/css/layout.min.css +2 -0
  21. package/dist/css/layout.min.css.map +1 -0
  22. package/dist/js/clarus.js +20 -0
  23. package/dist/js/clarus.js.map +7 -0
  24. package/dist/js/clarus.min.js +2 -0
  25. package/dist/js/clarus.min.js.map +7 -0
  26. package/docs/definitions.md +110 -13
  27. package/docs/guia-comandos.md +124 -0
  28. package/docs/scss-architecture.md +184 -0
  29. package/js/clarus.js +1 -0
  30. package/mockup/layout.html +18 -7
  31. package/package.json +37 -11
  32. package/scss/base/_index.scss +2 -0
  33. package/scss/base/_reset.scss +16 -0
  34. package/scss/base/_typography.scss +17 -0
  35. package/scss/clarus.scss +8 -0
  36. package/scss/components/_accordion.scss +4 -0
  37. package/scss/components/_alerts.scss +5 -0
  38. package/scss/components/_badges.scss +8 -0
  39. package/scss/components/_breadcrumbs.scss +5 -0
  40. package/scss/components/_buttons.scss +12 -0
  41. package/scss/components/_cards.scss +7 -0
  42. package/scss/components/_dropdown.scss +4 -0
  43. package/scss/components/_index.scss +14 -0
  44. package/scss/components/_modal.scss +9 -0
  45. package/scss/components/_navbar.scss +5 -0
  46. package/scss/components/_pagination.scss +5 -0
  47. package/scss/components/_tables.scss +4 -0
  48. package/scss/components/_tabs.scss +4 -0
  49. package/scss/components/_toasts.scss +5 -0
  50. package/scss/components/_tooltips.scss +4 -0
  51. package/scss/entries/components-entry.scss +5 -0
  52. package/scss/entries/forms-entry.scss +5 -0
  53. package/scss/entries/layout-entry.scss +5 -0
  54. package/scss/entries/utilities-entry.scss +5 -0
  55. package/scss/forms/_forms.scss +99 -0
  56. package/scss/forms/_index.scss +1 -0
  57. package/scss/layout/_containers.scss +24 -0
  58. package/scss/layout/_grid.scss +49 -0
  59. package/scss/layout/_index.scss +2 -0
  60. package/scss/settings/_breakpoints.scss +24 -0
  61. package/scss/settings/_colors.scss +23 -0
  62. package/scss/settings/_index.scss +4 -0
  63. package/scss/settings/_spacing.scss +12 -0
  64. package/scss/settings/_typography.scss +11 -0
  65. package/scss/themes/_dark.scss +7 -0
  66. package/scss/themes/_index.scss +1 -0
  67. package/scss/tokens/_index.scss +1 -0
  68. package/scss/tokens/_root.scss +25 -0
  69. package/scss/tools/_index.scss +1 -0
  70. package/scss/tools/_mixins.scss +38 -0
  71. package/scss/utilities/_display.scss +19 -0
  72. package/scss/utilities/_flex.scss +52 -0
  73. package/scss/utilities/_index.scss +4 -0
  74. package/scss/utilities/_spacing.scss +127 -0
  75. package/scss/utilities/_visibility.scss +7 -0
  76. package/assets/css/components.css +0 -0
  77. package/assets/css/forms.css +0 -153
  78. package/assets/css/helpers.css +0 -1
  79. package/assets/css/layout.css +0 -526
package/README.md CHANGED
@@ -1 +1,126 @@
1
- # clarus-css
1
+ # Clarus CSS
2
+
3
+ Framework CSS open source, minimalista e moderno, para construir interfaces com
4
+ HTML, CSS e JavaScript nativo — sem dependências externas em tempo de execução.
5
+
6
+ Combina componentes prontos (no estilo Bootstrap) com classes utilitárias,
7
+ grid baseado em Flexbox e customização via CSS Custom Properties.
8
+
9
+ > **Status:** versão inicial (`0.1.0`) em desenvolvimento ativo. O grid, os
10
+ > utilitários e os formulários já têm estilos funcionais; a maioria dos
11
+ > componentes (`buttons`, `cards`, `modal`, etc.) ainda está em estágio de
12
+ > esqueleto básico e será expandida nas próximas versões. Veja
13
+ > [`docs/definitions.md`](docs/definitions.md) para o roadmap completo.
14
+
15
+ ## Instalação
16
+
17
+ Via npm:
18
+
19
+ ```bash
20
+ npm install clarus-css
21
+ ```
22
+
23
+ Depois de publicado, também estará disponível via CDN (jsDelivr/unpkg), usando
24
+ o próprio nome do pacote:
25
+
26
+ ```html
27
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/clarus-css/dist/css/clarus.css">
28
+ ```
29
+
30
+ ## Uso
31
+
32
+ ### Via bundle completo
33
+
34
+ ```html
35
+ <link rel="stylesheet" href="node_modules/clarus-css/dist/css/clarus.min.css">
36
+ <script src="node_modules/clarus-css/dist/js/clarus.min.js"></script>
37
+ ```
38
+
39
+ Ou, com um bundler (Webpack, Vite, Parcel, etc.):
40
+
41
+ ```js
42
+ import "clarus-css";
43
+ ```
44
+
45
+ ### Via arquivos separados
46
+
47
+ Para incluir só o que for necessário:
48
+
49
+ ```html
50
+ <link rel="stylesheet" href="node_modules/clarus-css/dist/css/layout.css">
51
+ <link rel="stylesheet" href="node_modules/clarus-css/dist/css/forms.css">
52
+ <link rel="stylesheet" href="node_modules/clarus-css/dist/css/components.css">
53
+ <link rel="stylesheet" href="node_modules/clarus-css/dist/css/helpers.css">
54
+ ```
55
+
56
+ Cada arquivo é independente (inclui variáveis, reset e dark mode), então dá
57
+ pra combinar apenas os que fizerem sentido para o seu projeto.
58
+
59
+ ### Via SCSS
60
+
61
+ ```scss
62
+ @use "clarus-css/scss" as clarus;
63
+ ```
64
+
65
+ ## Estrutura de classes
66
+
67
+ A convenção de nomes segue de perto o Bootstrap, para reduzir a curva de
68
+ aprendizado:
69
+
70
+ - Layout: `.container`, `.container-fluid`, `.row`, `.col`, `.col-{breakpoint}`.
71
+ - Formulários: `.form-row`, `.form-col`, `.form-label`, `.form-control`, `.form-text`.
72
+ - Componentes: `.btn`, `.card`, `.alert`, `.badge`, `.navbar`, `.modal`, etc.
73
+ - Utilitários: `.d-*` (display), `.m-*`/`.p-*` (espaçamento), `.g-*` (gap),
74
+ `.justify-content-*`/`.align-items-*` (flex), `.visible`/`.invisible`.
75
+
76
+ ## Sistema de grid
77
+
78
+ Grid baseado em Flexbox, com breakpoints equivalentes ao Bootstrap:
79
+
80
+ - `sm` — 576px
81
+ - `md` — 768px
82
+ - `lg` — 992px
83
+ - `xl` — 1200px
84
+ - `xxl` — 1400px
85
+
86
+ ## Componentes disponíveis
87
+
88
+ Layout e containers, grid, formulários, botões, cards, alertas, badges,
89
+ tabelas, navbar, dropdown, modal, accordion, tabs, tooltips, toasts,
90
+ paginação e breadcrumbs. O escopo completo está descrito em
91
+ [`docs/definitions.md`](docs/definitions.md#9-escopo-inicial-de-componentes).
92
+
93
+ ## Customização por variáveis
94
+
95
+ Todos os tokens visuais são expostos como CSS Custom Properties (prefixo
96
+ `--clarus-`) em `:root`, definidas em `scss/tokens/_root.scss`. Para
97
+ sobrescrever, basta redefinir a variável no seu próprio CSS:
98
+
99
+ ```css
100
+ :root {
101
+ --clarus-color-primary: #6d28d9;
102
+ --clarus-radius-md: 10px;
103
+ }
104
+ ```
105
+
106
+ ## Modo escuro
107
+
108
+ Dark mode nativo, ativado por atributo no elemento raiz:
109
+
110
+ ```html
111
+ <html data-theme="dark">
112
+ ```
113
+
114
+ ## Documentação
115
+
116
+ - [`docs/definitions.md`](docs/definitions.md) — visão geral, decisões de
117
+ produto e roadmap.
118
+ - [`docs/scss-architecture.md`](docs/scss-architecture.md) — arquitetura dos
119
+ módulos SCSS e do pipeline de build.
120
+ - [`CONTRIBUTING.md`](CONTRIBUTING.md) — como rodar o projeto localmente e
121
+ convenções de contribuição.
122
+ - [`CHANGELOG.md`](CHANGELOG.md) — histórico de mudanças.
123
+
124
+ ## Licença
125
+
126
+ [MIT](LICENSE)