arekui 1.0.0 → 1.0.2

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 (54) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +198 -198
  3. package/arekui.css +3279 -3279
  4. package/arekui.d.ts +328 -328
  5. package/arekui.js +450 -450
  6. package/package.json +59 -57
  7. package/scripts/build-custom.js +318 -318
  8. package/src/arekui.css +55 -55
  9. package/src/base/neo-overrides.css +317 -317
  10. package/src/base/reset.css +67 -67
  11. package/src/base/tokens.css +304 -304
  12. package/src/components/accordion.css +34 -34
  13. package/src/components/alert.css +26 -26
  14. package/src/components/badge.css +33 -33
  15. package/src/components/breadcrumb.css +33 -33
  16. package/src/components/button.css +103 -103
  17. package/src/components/card.css +24 -24
  18. package/src/components/carousel.css +14 -14
  19. package/src/components/chat.css +78 -78
  20. package/src/components/drawer.css +53 -53
  21. package/src/components/file-upload.css +51 -51
  22. package/src/components/footer.css +26 -26
  23. package/src/components/forms.css +69 -69
  24. package/src/components/hero.css +22 -22
  25. package/src/components/join.css +14 -14
  26. package/src/components/link.css +24 -24
  27. package/src/components/menu.css +56 -56
  28. package/src/components/misc.css +57 -57
  29. package/src/components/modal.css +32 -32
  30. package/src/components/navbar.css +37 -37
  31. package/src/components/pagination.css +46 -46
  32. package/src/components/popover.css +70 -70
  33. package/src/components/progress.css +19 -19
  34. package/src/components/prose.css +80 -80
  35. package/src/components/rating.css +37 -37
  36. package/src/components/scroll-top.css +36 -36
  37. package/src/components/skeleton.css +54 -54
  38. package/src/components/swap.css +45 -45
  39. package/src/components/table.css +22 -22
  40. package/src/components/tabs.css +24 -24
  41. package/src/components/tag.css +101 -101
  42. package/src/components/textured.css +34 -34
  43. package/src/components/timeline.css +34 -34
  44. package/src/components/toast.css +134 -134
  45. package/src/components/tooltip.css +24 -24
  46. package/src/utilities/borders.css +152 -152
  47. package/src/utilities/colors.css +73 -73
  48. package/src/utilities/hover.css +33 -33
  49. package/src/utilities/layout.css +100 -100
  50. package/src/utilities/neo-utilities.css +95 -95
  51. package/src/utilities/responsive.css +128 -128
  52. package/src/utilities/sizing.css +91 -91
  53. package/src/utilities/spacing.css +130 -130
  54. package/src/utilities/typography.css +94 -94
package/src/base/neo-overrides.css CHANGED
@@ -1,317 +1,317 @@
1
- /* NEOBRUTALISM OVERRIDES */
2
- html[data-theme="neo"] body {
3
- font-family: var(--ar-font-sans);
4
- }
5
-
6
- /* --- Buttons (neo) --- */
7
- html[data-theme="neo"] .ar-btn {
8
- border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
9
- border-radius: 0.75rem;
10
- box-shadow: var(--ar-neo-shadow-md);
11
- font-family: var(--ar-font-sans);
12
- font-weight: 700;
13
- transition:
14
- box-shadow 0.15s ease-out,
15
- transform 0.15s ease-out;
16
- }
17
- html[data-theme="neo"] .ar-btn:hover {
18
- box-shadow: var(--ar-neo-shadow-sm);
19
- transform: translate(2px, 2px);
20
- }
21
- html[data-theme="neo"] .ar-btn:active {
22
- box-shadow: none;
23
- transform: translate(4px, 4px);
24
- }
25
- html[data-theme="neo"] .ar-btn-primary {
26
- background: var(--ar-neo-primary);
27
- color: var(--ar-neo-primary-content);
28
- }
29
- html[data-theme="neo"] .ar-btn-primary:hover {
30
- background: var(--ar-neo-primary);
31
- }
32
- html[data-theme="neo"] .ar-btn-outline {
33
- background: var(--ar-neo-base-100);
34
- border-color: var(--ar-neo-border-color);
35
- color: var(--ar-neo-base-content);
36
- }
37
- html[data-theme="neo"] .ar-btn-outline:hover {
38
- background: var(--ar-neo-base-content);
39
- color: var(--ar-neo-base-100);
40
- }
41
- html[data-theme="neo"] .ar-btn-ghost {
42
- background: transparent;
43
- border-color: transparent;
44
- box-shadow: none;
45
- }
46
- html[data-theme="neo"] .ar-btn-ghost:hover {
47
- background: var(--ar-neo-base-200);
48
- box-shadow: var(--ar-neo-shadow-sm);
49
- }
50
- html[data-theme="neo"] .ar-btn-neutral {
51
- background: var(--ar-neo-neutral);
52
- color: var(--ar-neo-neutral-content);
53
- }
54
- html[data-theme="neo"] .ar-btn-circle {
55
- border-radius: var(--ar-radius-pill);
56
- }
57
-
58
- /* --- Card (neo) --- */
59
- html[data-theme="neo"] .ar-card {
60
- border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
61
- border-radius: 1rem;
62
- box-shadow: var(--ar-neo-shadow-lg);
63
- overflow: hidden;
64
- }
65
-
66
- /* --- Badge (neo) --- */
67
- html[data-theme="neo"] .ar-badge {
68
- border: 2px solid var(--ar-neo-border-color);
69
- border-radius: var(--ar-radius-pill);
70
- box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
71
- font-weight: 700;
72
- }
73
-
74
- /* --- Modal (neo) --- */
75
- html[data-theme="neo"] .ar-modal-box {
76
- border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
77
- border-radius: 1rem;
78
- box-shadow: var(--ar-neo-shadow-xl);
79
- }
80
-
81
- /* --- Alert (neo) --- */
82
- html[data-theme="neo"] .ar-alert {
83
- border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
84
- border-radius: 0.75rem;
85
- box-shadow: var(--ar-neo-shadow-md);
86
- font-weight: 600;
87
- }
88
-
89
- /* --- Table (neo) --- */
90
- html[data-theme="neo"] .ar-table th,
91
- html[data-theme="neo"] .ar-table td {
92
- border: 2px solid var(--ar-neo-border-color);
93
- }
94
- html[data-theme="neo"] .ar-table th {
95
- background: var(--ar-neo-base-200);
96
- font-weight: 700;
97
- }
98
-
99
- /* --- Tabs (neo) --- */
100
- html[data-theme="neo"] .ar-tabs {
101
- border-bottom: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
102
- }
103
- html[data-theme="neo"] .ar-tab {
104
- border: 2px solid transparent;
105
- border-bottom: 0;
106
- border-radius: 0.5rem 0.5rem 0 0;
107
- font-weight: 700;
108
- font-family: var(--ar-font-sans);
109
- }
110
- html[data-theme="neo"] .ar-tab-active {
111
- border-color: var(--ar-neo-border-color);
112
- background: var(--ar-neo-base-100);
113
- color: var(--ar-neo-primary);
114
- }
115
-
116
- /* --- Accordion (neo) --- */
117
- html[data-theme="neo"] .ar-accordion {
118
- border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
119
- border-radius: 0.75rem;
120
- box-shadow: var(--ar-neo-shadow-md);
121
- }
122
- html[data-theme="neo"] .ar-accordion details {
123
- border-top: 2px solid var(--ar-neo-border-color);
124
- }
125
- html[data-theme="neo"] .ar-accordion details:first-child {
126
- border-top: 0;
127
- }
128
-
129
- /* --- Progress (neo) --- */
130
- html[data-theme="neo"] .ar-progress {
131
- border: 2px solid var(--ar-neo-border-color);
132
- border-radius: var(--ar-radius-pill);
133
- overflow: hidden;
134
- }
135
- html[data-theme="neo"] .ar-progress::-webkit-progress-value {
136
- background: var(--ar-neo-primary);
137
- }
138
-
139
- /* --- Toast (neo) --- */
140
- html[data-theme="neo"] .ar-toast {
141
- border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
142
- border-radius: 0.75rem;
143
- box-shadow: var(--ar-neo-shadow-lg);
144
- font-weight: 600;
145
- }
146
-
147
- /* --- Tag (neo) --- */
148
- html[data-theme="neo"] .ar-tag {
149
- border: 2px solid var(--ar-neo-border-color);
150
- border-radius: var(--ar-radius-pill);
151
- box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
152
- font-weight: 600;
153
- }
154
-
155
- /* --- Chat bubble (neo) --- */
156
- html[data-theme="neo"] .ar-chat-bubble {
157
- border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
158
- border-radius: 1rem;
159
- box-shadow: var(--ar-neo-shadow-sm);
160
- }
161
- html[data-theme="neo"] .ar-chat-end .ar-chat-bubble {
162
- background: var(--ar-neo-primary);
163
- color: var(--ar-neo-primary-content);
164
- border-color: var(--ar-neo-border-color);
165
- }
166
-
167
- /* --- Dropdown (neo) --- */
168
- html[data-theme="neo"] .ar-dropdown-content {
169
- border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
170
- border-radius: 0.75rem;
171
- box-shadow: var(--ar-neo-shadow-lg);
172
- }
173
-
174
- /* --- Popover (neo) --- */
175
- html[data-theme="neo"] .ar-popover-content {
176
- border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
177
- border-radius: 0.75rem;
178
- box-shadow: var(--ar-neo-shadow-lg);
179
- }
180
-
181
- /* --- Tooltip (neo) --- */
182
- html[data-theme="neo"] .ar-tooltip[data-tip]::after {
183
- border: 2px solid var(--ar-neo-border-color);
184
- border-radius: 0.5rem;
185
- box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
186
- font-weight: 600;
187
- }
188
-
189
- /* --- Forms (neo) --- */
190
- html[data-theme="neo"] .ar-input,
191
- html[data-theme="neo"] .ar-select,
192
- html[data-theme="neo"] .ar-textarea {
193
- border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
194
- border-radius: 0.5rem;
195
- box-shadow: var(--ar-neo-shadow-sm);
196
- font-family: var(--ar-font-sans);
197
- transition:
198
- box-shadow 0.15s ease-out,
199
- border-color 0.15s ease-out;
200
- }
201
- html[data-theme="neo"] .ar-input:focus,
202
- html[data-theme="neo"] .ar-select:focus,
203
- html[data-theme="neo"] .ar-textarea:focus {
204
- border-color: var(--ar-neo-primary);
205
- box-shadow: var(--ar-neo-shadow-md);
206
- outline: 0;
207
- }
208
-
209
- /* --- Toggle (neo) --- */
210
- html[data-theme="neo"] .ar-toggle {
211
- border: 2px solid var(--ar-neo-border-color);
212
- border-radius: var(--ar-radius-pill);
213
- }
214
-
215
- /* --- Pagination (neo) --- */
216
- html[data-theme="neo"] .ar-page-item {
217
- border: 2px solid var(--ar-neo-border-color);
218
- border-radius: 0.5rem;
219
- font-weight: 700;
220
- box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
221
- transition:
222
- box-shadow 0.15s ease-out,
223
- transform 0.15s ease-out;
224
- }
225
- html[data-theme="neo"] .ar-page-item:hover {
226
- box-shadow: 1px 1px 0px 0px var(--ar-neo-border-color);
227
- transform: translate(1px, 1px);
228
- }
229
- html[data-theme="neo"] .ar-page-active {
230
- background: var(--ar-neo-primary);
231
- color: var(--ar-neo-primary-content);
232
- border-color: var(--ar-neo-border-color);
233
- }
234
-
235
- /* --- Stepper (neo) --- */
236
- html[data-theme="neo"] .ar-step::before {
237
- border: 2px solid var(--ar-neo-border-color);
238
- box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
239
- }
240
-
241
- /* --- Navbar (neo) --- */
242
- html[data-theme="neo"] .ar-navbar {
243
- border-bottom: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
244
- background: var(--ar-neo-base-100);
245
- }
246
-
247
- /* --- Footer (neo) --- */
248
- html[data-theme="neo"] .ar-footer {
249
- border-top: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
250
- }
251
-
252
- /* --- Hero (neo) --- */
253
- html[data-theme="neo"] .ar-hero {
254
- background: var(--ar-neo-base-200);
255
- }
256
-
257
- /* --- Scroll to top (neo) --- */
258
- html[data-theme="neo"] .ar-scroll-top {
259
- border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
260
- border-radius: var(--ar-radius-pill);
261
- box-shadow: var(--ar-neo-shadow-md);
262
- }
263
- html[data-theme="neo"] .ar-scroll-top:hover {
264
- box-shadow: var(--ar-neo-shadow-sm);
265
- transform: translate(2px, 2px);
266
- }
267
-
268
- /* --- Drawer (neo) --- */
269
- html[data-theme="neo"] .ar-drawer-side .ar-menu {
270
- border-right: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
271
- }
272
-
273
- /* --- Skeleton (neo) --- */
274
- html[data-theme="neo"] .ar-skeleton {
275
- border: 2px solid var(--ar-neo-border-color);
276
- }
277
-
278
- /* --- Breadcrumb (neo) --- */
279
- html[data-theme="neo"] .ar-breadcrumb-item:not(:last-child)::after {
280
- color: var(--ar-neo-gray-400);
281
- }
282
-
283
- /* --- File upload (neo) --- */
284
- html[data-theme="neo"] .ar-file-upload {
285
- border: 3px dashed var(--ar-neo-border-color);
286
- border-radius: 0.75rem;
287
- transition: all 0.2s ease;
288
- }
289
- html[data-theme="neo"] .ar-file-upload:hover {
290
- border-color: var(--ar-neo-primary);
291
- background: rgba(0, 174, 239, 0.05);
292
- transform: scale(1.02) rotate(-1deg);
293
- }
294
- html[data-theme="neo"] .ar-file-upload.ar-file-upload-dragover {
295
- border-color: var(--ar-neo-primary);
296
- background: rgba(0, 174, 239, 0.05);
297
- transform: scale(1.02);
298
- }
299
-
300
- /* --- Prose (neo) --- */
301
- html[data-theme="neo"] .ar-prose pre {
302
- border: 2px solid var(--ar-neo-border-color);
303
- border-radius: 0.75rem;
304
- box-shadow: var(--ar-neo-shadow-sm);
305
- }
306
- html[data-theme="neo"] .ar-prose code {
307
- border: 1px solid var(--ar-neo-border-color);
308
- }
309
- html[data-theme="neo"] .ar-prose th {
310
- border: 2px solid var(--ar-neo-border-color);
311
- }
312
- html[data-theme="neo"] .ar-prose td {
313
- border: 2px solid var(--ar-neo-border-color);
314
- }
315
- html[data-theme="neo"] .ar-prose blockquote {
316
- border-left: 4px solid var(--ar-neo-primary);
317
- }
1
+ /* NEOBRUTALISM OVERRIDES */
2
+ html[data-theme="neo"] body {
3
+ font-family: var(--ar-font-sans);
4
+ }
5
+
6
+ /* --- Buttons (neo) --- */
7
+ html[data-theme="neo"] .ar-btn {
8
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
9
+ border-radius: 0.75rem;
10
+ box-shadow: var(--ar-neo-shadow-md);
11
+ font-family: var(--ar-font-sans);
12
+ font-weight: 700;
13
+ transition:
14
+ box-shadow 0.15s ease-out,
15
+ transform 0.15s ease-out;
16
+ }
17
+ html[data-theme="neo"] .ar-btn:hover {
18
+ box-shadow: var(--ar-neo-shadow-sm);
19
+ transform: translate(2px, 2px);
20
+ }
21
+ html[data-theme="neo"] .ar-btn:active {
22
+ box-shadow: none;
23
+ transform: translate(4px, 4px);
24
+ }
25
+ html[data-theme="neo"] .ar-btn-primary {
26
+ background: var(--ar-neo-primary);
27
+ color: var(--ar-neo-primary-content);
28
+ }
29
+ html[data-theme="neo"] .ar-btn-primary:hover {
30
+ background: var(--ar-neo-primary);
31
+ }
32
+ html[data-theme="neo"] .ar-btn-outline {
33
+ background: var(--ar-neo-base-100);
34
+ border-color: var(--ar-neo-border-color);
35
+ color: var(--ar-neo-base-content);
36
+ }
37
+ html[data-theme="neo"] .ar-btn-outline:hover {
38
+ background: var(--ar-neo-base-content);
39
+ color: var(--ar-neo-base-100);
40
+ }
41
+ html[data-theme="neo"] .ar-btn-ghost {
42
+ background: transparent;
43
+ border-color: transparent;
44
+ box-shadow: none;
45
+ }
46
+ html[data-theme="neo"] .ar-btn-ghost:hover {
47
+ background: var(--ar-neo-base-200);
48
+ box-shadow: var(--ar-neo-shadow-sm);
49
+ }
50
+ html[data-theme="neo"] .ar-btn-neutral {
51
+ background: var(--ar-neo-neutral);
52
+ color: var(--ar-neo-neutral-content);
53
+ }
54
+ html[data-theme="neo"] .ar-btn-circle {
55
+ border-radius: var(--ar-radius-pill);
56
+ }
57
+
58
+ /* --- Card (neo) --- */
59
+ html[data-theme="neo"] .ar-card {
60
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
61
+ border-radius: 1rem;
62
+ box-shadow: var(--ar-neo-shadow-lg);
63
+ overflow: hidden;
64
+ }
65
+
66
+ /* --- Badge (neo) --- */
67
+ html[data-theme="neo"] .ar-badge {
68
+ border: 2px solid var(--ar-neo-border-color);
69
+ border-radius: var(--ar-radius-pill);
70
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
71
+ font-weight: 700;
72
+ }
73
+
74
+ /* --- Modal (neo) --- */
75
+ html[data-theme="neo"] .ar-modal-box {
76
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
77
+ border-radius: 1rem;
78
+ box-shadow: var(--ar-neo-shadow-xl);
79
+ }
80
+
81
+ /* --- Alert (neo) --- */
82
+ html[data-theme="neo"] .ar-alert {
83
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
84
+ border-radius: 0.75rem;
85
+ box-shadow: var(--ar-neo-shadow-md);
86
+ font-weight: 600;
87
+ }
88
+
89
+ /* --- Table (neo) --- */
90
+ html[data-theme="neo"] .ar-table th,
91
+ html[data-theme="neo"] .ar-table td {
92
+ border: 2px solid var(--ar-neo-border-color);
93
+ }
94
+ html[data-theme="neo"] .ar-table th {
95
+ background: var(--ar-neo-base-200);
96
+ font-weight: 700;
97
+ }
98
+
99
+ /* --- Tabs (neo) --- */
100
+ html[data-theme="neo"] .ar-tabs {
101
+ border-bottom: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
102
+ }
103
+ html[data-theme="neo"] .ar-tab {
104
+ border: 2px solid transparent;
105
+ border-bottom: 0;
106
+ border-radius: 0.5rem 0.5rem 0 0;
107
+ font-weight: 700;
108
+ font-family: var(--ar-font-sans);
109
+ }
110
+ html[data-theme="neo"] .ar-tab-active {
111
+ border-color: var(--ar-neo-border-color);
112
+ background: var(--ar-neo-base-100);
113
+ color: var(--ar-neo-primary);
114
+ }
115
+
116
+ /* --- Accordion (neo) --- */
117
+ html[data-theme="neo"] .ar-accordion {
118
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
119
+ border-radius: 0.75rem;
120
+ box-shadow: var(--ar-neo-shadow-md);
121
+ }
122
+ html[data-theme="neo"] .ar-accordion details {
123
+ border-top: 2px solid var(--ar-neo-border-color);
124
+ }
125
+ html[data-theme="neo"] .ar-accordion details:first-child {
126
+ border-top: 0;
127
+ }
128
+
129
+ /* --- Progress (neo) --- */
130
+ html[data-theme="neo"] .ar-progress {
131
+ border: 2px solid var(--ar-neo-border-color);
132
+ border-radius: var(--ar-radius-pill);
133
+ overflow: hidden;
134
+ }
135
+ html[data-theme="neo"] .ar-progress::-webkit-progress-value {
136
+ background: var(--ar-neo-primary);
137
+ }
138
+
139
+ /* --- Toast (neo) --- */
140
+ html[data-theme="neo"] .ar-toast {
141
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
142
+ border-radius: 0.75rem;
143
+ box-shadow: var(--ar-neo-shadow-lg);
144
+ font-weight: 600;
145
+ }
146
+
147
+ /* --- Tag (neo) --- */
148
+ html[data-theme="neo"] .ar-tag {
149
+ border: 2px solid var(--ar-neo-border-color);
150
+ border-radius: var(--ar-radius-pill);
151
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
152
+ font-weight: 600;
153
+ }
154
+
155
+ /* --- Chat bubble (neo) --- */
156
+ html[data-theme="neo"] .ar-chat-bubble {
157
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
158
+ border-radius: 1rem;
159
+ box-shadow: var(--ar-neo-shadow-sm);
160
+ }
161
+ html[data-theme="neo"] .ar-chat-end .ar-chat-bubble {
162
+ background: var(--ar-neo-primary);
163
+ color: var(--ar-neo-primary-content);
164
+ border-color: var(--ar-neo-border-color);
165
+ }
166
+
167
+ /* --- Dropdown (neo) --- */
168
+ html[data-theme="neo"] .ar-dropdown-content {
169
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
170
+ border-radius: 0.75rem;
171
+ box-shadow: var(--ar-neo-shadow-lg);
172
+ }
173
+
174
+ /* --- Popover (neo) --- */
175
+ html[data-theme="neo"] .ar-popover-content {
176
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
177
+ border-radius: 0.75rem;
178
+ box-shadow: var(--ar-neo-shadow-lg);
179
+ }
180
+
181
+ /* --- Tooltip (neo) --- */
182
+ html[data-theme="neo"] .ar-tooltip[data-tip]::after {
183
+ border: 2px solid var(--ar-neo-border-color);
184
+ border-radius: 0.5rem;
185
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
186
+ font-weight: 600;
187
+ }
188
+
189
+ /* --- Forms (neo) --- */
190
+ html[data-theme="neo"] .ar-input,
191
+ html[data-theme="neo"] .ar-select,
192
+ html[data-theme="neo"] .ar-textarea {
193
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
194
+ border-radius: 0.5rem;
195
+ box-shadow: var(--ar-neo-shadow-sm);
196
+ font-family: var(--ar-font-sans);
197
+ transition:
198
+ box-shadow 0.15s ease-out,
199
+ border-color 0.15s ease-out;
200
+ }
201
+ html[data-theme="neo"] .ar-input:focus,
202
+ html[data-theme="neo"] .ar-select:focus,
203
+ html[data-theme="neo"] .ar-textarea:focus {
204
+ border-color: var(--ar-neo-primary);
205
+ box-shadow: var(--ar-neo-shadow-md);
206
+ outline: 0;
207
+ }
208
+
209
+ /* --- Toggle (neo) --- */
210
+ html[data-theme="neo"] .ar-toggle {
211
+ border: 2px solid var(--ar-neo-border-color);
212
+ border-radius: var(--ar-radius-pill);
213
+ }
214
+
215
+ /* --- Pagination (neo) --- */
216
+ html[data-theme="neo"] .ar-page-item {
217
+ border: 2px solid var(--ar-neo-border-color);
218
+ border-radius: 0.5rem;
219
+ font-weight: 700;
220
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
221
+ transition:
222
+ box-shadow 0.15s ease-out,
223
+ transform 0.15s ease-out;
224
+ }
225
+ html[data-theme="neo"] .ar-page-item:hover {
226
+ box-shadow: 1px 1px 0px 0px var(--ar-neo-border-color);
227
+ transform: translate(1px, 1px);
228
+ }
229
+ html[data-theme="neo"] .ar-page-active {
230
+ background: var(--ar-neo-primary);
231
+ color: var(--ar-neo-primary-content);
232
+ border-color: var(--ar-neo-border-color);
233
+ }
234
+
235
+ /* --- Stepper (neo) --- */
236
+ html[data-theme="neo"] .ar-step::before {
237
+ border: 2px solid var(--ar-neo-border-color);
238
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
239
+ }
240
+
241
+ /* --- Navbar (neo) --- */
242
+ html[data-theme="neo"] .ar-navbar {
243
+ border-bottom: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
244
+ background: var(--ar-neo-base-100);
245
+ }
246
+
247
+ /* --- Footer (neo) --- */
248
+ html[data-theme="neo"] .ar-footer {
249
+ border-top: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
250
+ }
251
+
252
+ /* --- Hero (neo) --- */
253
+ html[data-theme="neo"] .ar-hero {
254
+ background: var(--ar-neo-base-200);
255
+ }
256
+
257
+ /* --- Scroll to top (neo) --- */
258
+ html[data-theme="neo"] .ar-scroll-top {
259
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
260
+ border-radius: var(--ar-radius-pill);
261
+ box-shadow: var(--ar-neo-shadow-md);
262
+ }
263
+ html[data-theme="neo"] .ar-scroll-top:hover {
264
+ box-shadow: var(--ar-neo-shadow-sm);
265
+ transform: translate(2px, 2px);
266
+ }
267
+
268
+ /* --- Drawer (neo) --- */
269
+ html[data-theme="neo"] .ar-drawer-side .ar-menu {
270
+ border-right: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
271
+ }
272
+
273
+ /* --- Skeleton (neo) --- */
274
+ html[data-theme="neo"] .ar-skeleton {
275
+ border: 2px solid var(--ar-neo-border-color);
276
+ }
277
+
278
+ /* --- Breadcrumb (neo) --- */
279
+ html[data-theme="neo"] .ar-breadcrumb-item:not(:last-child)::after {
280
+ color: var(--ar-neo-gray-400);
281
+ }
282
+
283
+ /* --- File upload (neo) --- */
284
+ html[data-theme="neo"] .ar-file-upload {
285
+ border: 3px dashed var(--ar-neo-border-color);
286
+ border-radius: 0.75rem;
287
+ transition: all 0.2s ease;
288
+ }
289
+ html[data-theme="neo"] .ar-file-upload:hover {
290
+ border-color: var(--ar-neo-primary);
291
+ background: rgba(0, 174, 239, 0.05);
292
+ transform: scale(1.02) rotate(-1deg);
293
+ }
294
+ html[data-theme="neo"] .ar-file-upload.ar-file-upload-dragover {
295
+ border-color: var(--ar-neo-primary);
296
+ background: rgba(0, 174, 239, 0.05);
297
+ transform: scale(1.02);
298
+ }
299
+
300
+ /* --- Prose (neo) --- */
301
+ html[data-theme="neo"] .ar-prose pre {
302
+ border: 2px solid var(--ar-neo-border-color);
303
+ border-radius: 0.75rem;
304
+ box-shadow: var(--ar-neo-shadow-sm);
305
+ }
306
+ html[data-theme="neo"] .ar-prose code {
307
+ border: 1px solid var(--ar-neo-border-color);
308
+ }
309
+ html[data-theme="neo"] .ar-prose th {
310
+ border: 2px solid var(--ar-neo-border-color);
311
+ }
312
+ html[data-theme="neo"] .ar-prose td {
313
+ border: 2px solid var(--ar-neo-border-color);
314
+ }
315
+ html[data-theme="neo"] .ar-prose blockquote {
316
+ border-left: 4px solid var(--ar-neo-primary);
317
+ }