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