arekui 1.0.0 → 2.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 (99) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/LICENSE +21 -21
  3. package/README.md +26 -198
  4. package/arekui.css +5930 -3279
  5. package/arekui.d.ts +328 -328
  6. package/arekui.js +817 -450
  7. package/assets/img/grunge-wall-texture-freepick-kues1.webp +0 -0
  8. package/assets/img/logo.png +0 -0
  9. package/dist/css/arekui.base.min.css +1 -0
  10. package/dist/css/arekui.broadsheet.min.css +1 -0
  11. package/dist/css/arekui.brutalist.min.css +1 -0
  12. package/dist/css/arekui.default.min.css +1 -0
  13. package/dist/css/arekui.full.min.css +1 -0
  14. package/dist/css/arekui.min.css +1 -0
  15. package/dist/css/arekui.neo.min.css +1 -0
  16. package/dist/css/arekui.pixel.min.css +1 -0
  17. package/dist/js/arekui.min.js +2 -0
  18. package/package.json +64 -57
  19. package/scripts/build-css.js +95 -0
  20. package/scripts/build-custom.js +287 -318
  21. package/scripts/build-js.js +68 -0
  22. package/scripts/clean.js +13 -0
  23. package/scripts/dev.js +97 -0
  24. package/scripts/imports.js +18 -0
  25. package/scripts/split.js +256 -0
  26. package/src/arekui.base.css +63 -0
  27. package/src/arekui.broadsheet.css +6 -0
  28. package/src/arekui.brutalist.css +8 -0
  29. package/src/arekui.core.css +64 -0
  30. package/src/arekui.css +22 -5
  31. package/src/arekui.default.css +6 -0
  32. package/src/arekui.neo.css +8 -0
  33. package/src/arekui.pixel.css +8 -0
  34. package/src/base/brutalist-overrides.css +254 -0
  35. package/src/base/neo-overrides.css +330 -315
  36. package/src/base/pixel-overrides.css +336 -0
  37. package/src/base/reset.css +179 -65
  38. package/src/base/theme-brutalist.css +111 -0
  39. package/src/base/theme-default.css +184 -0
  40. package/src/base/theme-neo.css +108 -0
  41. package/src/base/theme-pixel.css +111 -0
  42. package/src/base/tokens.css +59 -302
  43. package/src/components/accordion.css +32 -33
  44. package/src/components/alert.css +24 -25
  45. package/src/components/badge.css +31 -32
  46. package/src/components/breadcrumb.css +31 -32
  47. package/src/components/broadsheet.css +264 -0
  48. package/src/components/button.css +102 -101
  49. package/src/components/card.css +22 -23
  50. package/src/components/carousel.css +49 -13
  51. package/src/components/chat.css +77 -76
  52. package/src/components/description-list.css +34 -0
  53. package/src/components/docs.css +252 -0
  54. package/src/components/empty.css +36 -0
  55. package/src/components/file-upload.css +49 -50
  56. package/src/components/footer.css +40 -25
  57. package/src/components/forms.css +67 -68
  58. package/src/components/heading.css +27 -0
  59. package/src/components/hero.css +20 -21
  60. package/src/components/join.css +12 -13
  61. package/src/components/kbd.css +15 -0
  62. package/src/components/link.css +22 -23
  63. package/src/components/loading.css +109 -0
  64. package/src/components/menu.css +104 -54
  65. package/src/components/misc.css +94 -55
  66. package/src/components/modal.css +30 -31
  67. package/src/components/navbar.css +166 -36
  68. package/src/components/pagination.css +50 -45
  69. package/src/components/popover.css +68 -69
  70. package/src/components/progress.css +17 -18
  71. package/src/components/prose.css +78 -78
  72. package/src/components/rating.css +35 -36
  73. package/src/components/scroll-top.css +34 -34
  74. package/src/components/segmented.css +44 -0
  75. package/src/components/sidebar.css +377 -0
  76. package/src/components/skeleton.css +52 -52
  77. package/src/components/spinner.css +36 -0
  78. package/src/components/swap.css +43 -43
  79. package/src/components/table.css +20 -21
  80. package/src/components/tabs.css +22 -23
  81. package/src/components/tag.css +99 -99
  82. package/src/components/textured.css +52 -32
  83. package/src/components/timeline.css +32 -33
  84. package/src/components/toast.css +132 -132
  85. package/src/components/tooltip.css +22 -23
  86. package/src/utilities/borders.css +150 -150
  87. package/src/utilities/brutalist-utilities.css +49 -0
  88. package/src/utilities/colors.css +79 -71
  89. package/src/utilities/hover.css +31 -31
  90. package/src/utilities/layout.css +98 -98
  91. package/src/utilities/neo-utilities.css +86 -93
  92. package/src/utilities/pixel-utilities.css +88 -0
  93. package/src/utilities/responsive.css +131 -126
  94. package/src/utilities/sizing.css +98 -89
  95. package/src/utilities/spacing.css +132 -129
  96. package/src/utilities/typography.css +95 -92
  97. package/dist/arekui.min.css +0 -1
  98. package/dist/arekui.min.js +0 -2
  99. package/src/components/drawer.css +0 -53
package/src/arekui.pixel.css ADDED
@@ -0,0 +1,8 @@
1
+ /* ArekUI v2.0.0 - CSS Framework */
2
+ /* https://github.com/andikarekatias/arekui */
3
+
4
+ @layer base, components, themes, utilities;
5
+
6
+ @import "./base/theme-pixel.css" layer(base);
7
+ @import "./base/pixel-overrides.css" layer(themes);
8
+ @import "./utilities/pixel-utilities.css" layer(utilities);
package/src/base/brutalist-overrides.css ADDED
@@ -0,0 +1,254 @@
1
+ html[data-theme="brutalist"] body {
2
+ font-family: var(--ar-font-mono);
3
+ }
4
+
5
+ html[data-theme="brutalist"] .ar-btn {
6
+ font-family: var(--ar-font-mono);
7
+ font-weight: 700;
8
+ text-transform: uppercase;
9
+ letter-spacing: 0.05em;
10
+ border-color: var(--ar-brutalist-border-color);
11
+ transition: all 0.1s linear;
12
+ }
13
+
14
+ html[data-theme="brutalist"] .ar-btn:hover {
15
+ background: var(--ar-base-content);
16
+ color: var(--ar-base-100);
17
+ }
18
+ html[data-theme="brutalist"] .ar-btn:active {
19
+ transform: none;
20
+ }
21
+ html[data-theme="brutalist"] .ar-btn-primary:hover,
22
+ html[data-theme="brutalist"] .ar-btn-neutral:hover {
23
+ background: var(--ar-base-100);
24
+ color: var(--ar-base-content);
25
+ }
26
+ html[data-theme="brutalist"] .ar-btn-ghost {
27
+ border-color: transparent;
28
+ }
29
+ html[data-theme="brutalist"] .ar-btn-ghost:hover {
30
+ border-color: transparent;
31
+ background: var(--ar-base-200);
32
+ color: var(--ar-base-content);
33
+ }
34
+
35
+ html[data-theme="brutalist"] .ar-card,
36
+ html[data-theme="brutalist"] .ar-modal-box,
37
+ html[data-theme="brutalist"] .ar-dropdown-content,
38
+ html[data-theme="brutalist"] .ar-popover-content,
39
+ html[data-theme="brutalist"] .ar-toast,
40
+ html[data-theme="brutalist"] .ar-carousel-btn,
41
+ html[data-theme="brutalist"] .ar-scroll-top {
42
+ border: var(--ar-border-width) solid var(--ar-brutalist-border-color);
43
+ border-radius: 0;
44
+ }
45
+
46
+ html[data-theme="brutalist"] .ar-scroll-top:hover {
47
+ background: var(--ar-base-100);
48
+ color: var(--ar-base-content);
49
+ transform: none;
50
+ }
51
+
52
+ html[data-theme="brutalist"] .ar-alert {
53
+ border: var(--ar-border-width) solid var(--ar-brutalist-border-color);
54
+ border-radius: 0;
55
+ }
56
+
57
+ html[data-theme="brutalist"] .ar-badge,
58
+ html[data-theme="brutalist"] .ar-tag {
59
+ border: var(--ar-border-width) solid var(--ar-brutalist-border-color);
60
+ font-weight: 700;
61
+ text-transform: uppercase;
62
+ letter-spacing: 0.05em;
63
+ }
64
+
65
+ html[data-theme="brutalist"] .ar-table th,
66
+ html[data-theme="brutalist"] .ar-table td {
67
+ border-bottom: var(--ar-border-width) solid var(--ar-brutalist-border-color);
68
+ }
69
+ html[data-theme="brutalist"] .ar-table th {
70
+ text-transform: uppercase;
71
+ letter-spacing: 0.05em;
72
+ }
73
+
74
+ html[data-theme="brutalist"] .ar-tabs {
75
+ border-bottom: var(--ar-border-width) solid var(--ar-brutalist-border-color);
76
+ }
77
+ html[data-theme="brutalist"] .ar-tab {
78
+ font-family: var(--ar-font-mono);
79
+ font-weight: 700;
80
+ text-transform: uppercase;
81
+ letter-spacing: 0.05em;
82
+ }
83
+
84
+ html[data-theme="brutalist"] .ar-accordion {
85
+ border-color: var(--ar-brutalist-border-color);
86
+ }
87
+ html[data-theme="brutalist"] .ar-accordion details {
88
+ border-top-color: var(--ar-brutalist-border-color);
89
+ }
90
+
91
+ html[data-theme="brutalist"] .ar-progress {
92
+ border: var(--ar-border-width) solid var(--ar-brutalist-border-color);
93
+ }
94
+
95
+ html[data-theme="brutalist"] .ar-input,
96
+ html[data-theme="brutalist"] .ar-select,
97
+ html[data-theme="brutalist"] .ar-textarea {
98
+ border-color: var(--ar-brutalist-border-color);
99
+ font-family: var(--ar-font-mono);
100
+ transition: border-color 0.1s linear;
101
+ }
102
+ html[data-theme="brutalist"] .ar-input:focus,
103
+ html[data-theme="brutalist"] .ar-select:focus,
104
+ html[data-theme="brutalist"] .ar-textarea:focus {
105
+ border-color: var(--ar-brutalist-border-color);
106
+ }
107
+ html[data-theme="brutalist"] .ar-toggle {
108
+ border: var(--ar-border-width) solid var(--ar-brutalist-border-color);
109
+ background: var(--ar-base-200);
110
+ }
111
+ html[data-theme="brutalist"] .ar-toggle::after {
112
+ background: var(--ar-base-content);
113
+ }
114
+ html[data-theme="brutalist"] .ar-toggle:checked::after {
115
+ background: var(--ar-base-100);
116
+ }
117
+
118
+ html[data-theme="brutalist"] .ar-file-upload {
119
+ border: var(--ar-border-width) dashed var(--ar-brutalist-border-color);
120
+ }
121
+ html[data-theme="brutalist"] .ar-file-upload:hover,
122
+ html[data-theme="brutalist"] .ar-file-upload.ar-file-upload-dragover {
123
+ border-style: solid;
124
+ background: var(--ar-base-300);
125
+ color: var(--ar-base-content);
126
+ }
127
+
128
+ html[data-theme="brutalist"] .ar-page-item {
129
+ border-color: var(--ar-brutalist-border-color);
130
+ font-family: var(--ar-font-mono);
131
+ font-weight: 700;
132
+ text-transform: uppercase;
133
+ letter-spacing: 0.05em;
134
+ transition: all 0.1s linear;
135
+ }
136
+
137
+ html[data-theme="brutalist"] .ar-step::before {
138
+ border: var(--ar-border-width) solid var(--ar-brutalist-border-color);
139
+ background: var(--ar-base-100);
140
+ }
141
+ html[data-theme="brutalist"] .ar-step-active::before {
142
+ background: var(--ar-primary);
143
+ color: var(--ar-primary-content);
144
+ }
145
+
146
+ html[data-theme="brutalist"] .ar-navbar {
147
+ border-bottom: var(--ar-border-width) solid var(--ar-brutalist-border-color);
148
+ background: var(--ar-base-100);
149
+ }
150
+
151
+ html[data-theme="brutalist"] .ar-sidebar-panel > .ar-menu {
152
+ border-right: var(--ar-border-width) solid var(--ar-brutalist-border-color);
153
+ background: var(--ar-base-100);
154
+ }
155
+ html[data-theme="brutalist"] .ar-sidebar-panel-end > .ar-menu {
156
+ border-right: 0;
157
+ border-left: var(--ar-border-width) solid var(--ar-brutalist-border-color);
158
+ }
159
+ html[data-theme="brutalist"] .ar-sidebar-nav {
160
+ border-bottom: var(--ar-border-width) solid var(--ar-brutalist-border-color);
161
+ background: var(--ar-base-100);
162
+ }
163
+
164
+ html[data-theme="brutalist"] .ar-footer {
165
+ border-top: var(--ar-border-width) solid var(--ar-brutalist-border-color);
166
+ background: var(--ar-base-200);
167
+ }
168
+
169
+ html[data-theme="brutalist"] .ar-hero {
170
+ background: var(--ar-base-200);
171
+ border-bottom: var(--ar-border-width) solid var(--ar-brutalist-border-color);
172
+ }
173
+
174
+ html[data-theme="brutalist"] .ar-skeleton {
175
+ border: var(--ar-border-width) solid var(--ar-brutalist-border-color);
176
+ }
177
+
178
+ html[data-theme="brutalist"] .ar-breadcrumb-item:not(:last-child)::after {
179
+ color: var(--ar-gray-600);
180
+ }
181
+
182
+ html[data-theme="brutalist"] .ar-chat-bubble {
183
+ border: var(--ar-border-width) solid var(--ar-brutalist-border-color);
184
+ }
185
+
186
+ html[data-theme="brutalist"] .ar-tooltip[data-tip]::after {
187
+ border: var(--ar-border-width) solid var(--ar-brutalist-border-color);
188
+ }
189
+
190
+ html[data-theme="brutalist"] .ar-prose pre,
191
+ html[data-theme="brutalist"] .ar-prose code {
192
+ border: var(--ar-border-width) solid var(--ar-brutalist-border-color);
193
+ }
194
+ html[data-theme="brutalist"] .ar-prose th,
195
+ html[data-theme="brutalist"] .ar-prose td,
196
+ html[data-theme="brutalist"] .ar-prose hr {
197
+ border-color: var(--ar-brutalist-border-color);
198
+ }
199
+ html[data-theme="brutalist"] .ar-prose blockquote {
200
+ border-left-color: var(--ar-brutalist-border-color);
201
+ }
202
+
203
+ html[data-theme="brutalist"] .ar-heading-title {
204
+ text-transform: uppercase;
205
+ letter-spacing: 0;
206
+ }
207
+
208
+ html[data-theme="brutalist"] .ar-divider::before,
209
+ html[data-theme="brutalist"] .ar-divider::after {
210
+ background: var(--ar-brutalist-border-color);
211
+ }
212
+
213
+ html[data-theme="brutalist"] .ar-timeline-item::after {
214
+ background: var(--ar-brutalist-border-color);
215
+ }
216
+
217
+ html[data-theme="brutalist"] .ar-empty-title {
218
+ text-transform: uppercase;
219
+ letter-spacing: 0;
220
+ }
221
+ html[data-theme="brutalist"] .ar-empty-icon {
222
+ border: var(--ar-border-width) solid var(--ar-brutalist-border-color);
223
+ }
224
+ html[data-theme="brutalist"] .ar-segmented {
225
+ border: var(--ar-border-width) solid var(--ar-brutalist-border-color);
226
+ }
227
+ html[data-theme="brutalist"] .ar-segmented-item {
228
+ font-family: var(--ar-font-mono);
229
+ font-weight: 700;
230
+ text-transform: uppercase;
231
+ letter-spacing: 0.05em;
232
+ }
233
+ html[data-theme="brutalist"] .ar-kbd {
234
+ border-color: var(--ar-brutalist-border-color);
235
+ font-weight: 700;
236
+ text-transform: uppercase;
237
+ letter-spacing: 0.05em;
238
+ }
239
+ html[data-theme="brutalist"] .ar-dt {
240
+ font-weight: 700;
241
+ text-transform: uppercase;
242
+ letter-spacing: 0.05em;
243
+ }
244
+ @media (min-width: 480px) {
245
+ html[data-theme="brutalist"] .ar-dt {
246
+ border-bottom-color: var(--ar-brutalist-border-color);
247
+ }
248
+ }
249
+ html[data-theme="brutalist"] .ar-dd {
250
+ border-bottom-color: var(--ar-brutalist-border-color);
251
+ }
252
+ html[data-theme="brutalist"] .ar-dl > :nth-last-child(-n + 2) {
253
+ border-bottom: 0;
254
+ }