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/tokens.css CHANGED
@@ -1,304 +1,304 @@
1
- /* DESIGN TOKENS */
2
- :root {
3
- --ar-font-sans:
4
- system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
5
- sans-serif;
6
- --ar-font-serif: "IM Fell English", Georgia, "Times New Roman", serif;
7
- --ar-font-mono:
8
- ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, "Courier New",
9
- monospace;
10
- --ar-base-font: var(--ar-font-serif);
11
-
12
- --ar-s-0: 0;
13
- --ar-s-1: 0.25rem;
14
- --ar-s-2: 0.5rem;
15
- --ar-s-3: 0.75rem;
16
- --ar-s-4: 1rem;
17
- --ar-s-5: 1.25rem;
18
- --ar-s-6: 1.5rem;
19
- --ar-s-8: 2rem;
20
- --ar-s-10: 2.5rem;
21
- --ar-s-12: 3rem;
22
- --ar-s-16: 4rem;
23
- --ar-s-20: 5rem;
24
-
25
- --ar-radius-field: 0.25rem;
26
- --ar-radius-box: 0.5rem;
27
- --ar-radius-selector: 2rem;
28
- --ar-radius-pill: 9999px;
29
-
30
- --ar-border-width: 1px;
31
-
32
- --ar-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
33
- --ar-shadow-md:
34
- 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
35
- --ar-shadow-lg:
36
- 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
37
- --ar-shadow-xl:
38
- 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
39
- --ar-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
40
-
41
- /* Relative to this stylesheet — override the token if you serve
42
- arekui.css from another path or want a different texture. */
43
- --ar-texture: url("assets/img/grunge-wall-texture-freepick-kues1.webp");
44
-
45
- --ar-gray-50: #fafafa;
46
- --ar-gray-100: #f5f5f5;
47
- --ar-gray-200: #e5e5e5;
48
- --ar-gray-300: #d4d4d4;
49
- --ar-gray-400: #a3a3a3;
50
- --ar-gray-500: #737373;
51
- --ar-gray-600: #525252;
52
- --ar-gray-700: #404040;
53
- --ar-gray-800: #262626;
54
- --ar-gray-900: #171717;
55
-
56
- /* Dark palette — single source of truth shared by
57
- html[data-theme="dark"] and the prefers-color-scheme fallback. */
58
- --ar-dark-base-100: oklch(25.33% 0.016 252.42);
59
- --ar-dark-base-200: oklch(23.26% 0.014 253.1);
60
- --ar-dark-base-300: oklch(21.15% 0.012 254.09);
61
- --ar-dark-base-content: oklch(97.807% 0.029 256.847);
62
- --ar-dark-primary: oklch(58% 0.233 277.117);
63
- --ar-dark-primary-content: oklch(96% 0.018 272.314);
64
- --ar-dark-secondary: oklch(65% 0.241 354.308);
65
- --ar-dark-secondary-content: oklch(94% 0.028 342.258);
66
- --ar-dark-accent: oklch(77% 0.152 181.912);
67
- --ar-dark-accent-content: oklch(38% 0.063 188.416);
68
- --ar-dark-neutral: oklch(14% 0.005 285.823);
69
- --ar-dark-neutral-content: oklch(92% 0.004 286.32);
70
- --ar-dark-info: oklch(74% 0.16 232.661);
71
- --ar-dark-info-content: oklch(29% 0.066 243.157);
72
- --ar-dark-success: oklch(76% 0.177 163.223);
73
- --ar-dark-success-content: oklch(37% 0.077 168.94);
74
- --ar-dark-warning: oklch(82% 0.189 84.429);
75
- --ar-dark-warning-content: oklch(41% 0.112 45.904);
76
- --ar-dark-error: oklch(71% 0.194 13.428);
77
- --ar-dark-error-content: oklch(27% 0.105 12.094);
78
- --ar-dark-bg-img-fill: rgb(152 159 171 / 0.3);
79
- --ar-dark-desc-grad: linear-gradient(
80
- to left,
81
- var(--ar-dark-base-200) 50%,
82
- #fafafa 50%
83
- )
84
- right;
85
- --ar-dark-arc: #333333;
86
- --ar-dark-gray-50: #1a1a1a;
87
- --ar-dark-gray-100: #262626;
88
- --ar-dark-gray-200: #333333;
89
- --ar-dark-gray-300: #444444;
90
- --ar-dark-gray-400: #999999;
91
- --ar-dark-gray-500: #aaaaaa;
92
- --ar-dark-gray-600: #bbbbbb;
93
- --ar-dark-gray-700: #cccccc;
94
- --ar-dark-gray-800: #dddddd;
95
- --ar-dark-gray-900: #eeeeee;
96
- --ar-dark-base-content-80: oklch(97.807% 0.029 256.847 / 0.8);
97
-
98
- /* --------------------------------------------------------
99
- NEOBRUTALISM palette — single source of truth.
100
- Referenced by html[data-theme="neo"] below.
101
- -------------------------------------------------------- */
102
- --ar-neo-base-100: #ffffff;
103
- --ar-neo-base-200: #f8f8f8;
104
- --ar-neo-base-300: #e8e8e8;
105
- --ar-neo-base-content: #1e293b;
106
- --ar-neo-base-content-80: rgb(30 41 59 / 0.8);
107
- --ar-neo-primary: #00aeef;
108
- --ar-neo-primary-content: #ffffff;
109
- --ar-neo-secondary: #8bc53f;
110
- --ar-neo-secondary-content: #ffffff;
111
- --ar-neo-accent: #ffd100;
112
- --ar-neo-accent-content: #1e293b;
113
- --ar-neo-neutral: #1e293b;
114
- --ar-neo-neutral-content: #ffffff;
115
- --ar-neo-info: #00aeef;
116
- --ar-neo-info-content: #ffffff;
117
- --ar-neo-success: #8bc53f;
118
- --ar-neo-success-content: #ffffff;
119
- --ar-neo-warning: #ffd100;
120
- --ar-neo-warning-content: #1e293b;
121
- --ar-neo-error: #e4002b;
122
- --ar-neo-error-content: #ffffff;
123
- --ar-neo-bg-img-fill: #1e293b;
124
- --ar-neo-desc-grad: linear-gradient(to left, #f8f8f8 50%, #1e293b 50%) right;
125
- --ar-neo-arc: #ffffff;
126
- --ar-neo-gray-50: #f8f8f8;
127
- --ar-neo-gray-100: #f0f0f0;
128
- --ar-neo-gray-200: #e0e0e0;
129
- --ar-neo-gray-300: #cccccc;
130
- --ar-neo-gray-400: #999999;
131
- --ar-neo-gray-500: #777777;
132
- --ar-neo-gray-600: #555555;
133
- --ar-neo-gray-700: #333333;
134
- --ar-neo-gray-800: #222222;
135
- --ar-neo-gray-900: #111111;
136
-
137
- /* Neobrutalism-specific tokens */
138
- --ar-neo-border-width: 3px;
139
- --ar-neo-border-color: #1e293b;
140
- --ar-neo-shadow-sm: 2px 2px 0px 0px #1e293b;
141
- --ar-neo-shadow-md: 4px 4px 0px 0px #1e293b;
142
- --ar-neo-shadow-lg: 6px 6px 0px 0px #1e293b;
143
- --ar-neo-shadow-xl: 8px 8px 0px 0px #1e293b;
144
- --ar-neo-shadow-2xl: 12px 12px 0px 0px #1e293b;
145
- }
146
-
147
- html[data-theme="light"] {
148
- color-scheme: light;
149
- --ar-base-100: oklch(100% 0 0);
150
- --ar-base-200: oklch(97% 0 0);
151
- --ar-base-300: oklch(94% 0 0);
152
- --ar-base-content: oklch(0% 0 0);
153
- --ar-base-content-80: oklch(0% 0 0 / 0.8);
154
- --ar-primary: oklch(15.906% 0 0);
155
- --ar-primary-content: oklch(100% 0 0);
156
- --ar-secondary: oklch(21.455% 0.001 17.278);
157
- --ar-secondary-content: oklch(100% 0 0);
158
- --ar-accent: oklch(26.861% 0 0);
159
- --ar-accent-content: oklch(100% 0 0);
160
- --ar-neutral: oklch(0% 0 0);
161
- --ar-neutral-content: oklch(100% 0 0);
162
- --ar-info: oklch(79.54% 0.103 205.9);
163
- --ar-info-content: oklch(15.908% 0.02 205.9);
164
- --ar-success: oklch(90.13% 0.153 164.14);
165
- --ar-success-content: oklch(18.026% 0.03 164.14);
166
- --ar-warning: oklch(88.37% 0.135 79.94);
167
- --ar-warning-content: oklch(17.674% 0.027 79.94);
168
- --ar-error: oklch(78.66% 0.15 28.47);
169
- --ar-error-content: oklch(15.732% 0.03 28.47);
170
- --ar-bg-img-fill: transparent;
171
- --ar-desc-grad: linear-gradient(
172
- to left,
173
- var(--ar-base-200) 50%,
174
- var(--ar-neutral) 50%
175
- )
176
- right;
177
- --ar-arc: #fafafa;
178
- }
179
-
180
- html[data-theme="dark"] {
181
- color-scheme: dark;
182
- --ar-base-100: var(--ar-dark-base-100);
183
- --ar-base-200: var(--ar-dark-base-200);
184
- --ar-base-300: var(--ar-dark-base-300);
185
- --ar-base-content: var(--ar-dark-base-content);
186
- --ar-base-content-80: var(--ar-dark-base-content-80);
187
- --ar-primary: var(--ar-dark-primary);
188
- --ar-primary-content: var(--ar-dark-primary-content);
189
- --ar-secondary: var(--ar-dark-secondary);
190
- --ar-secondary-content: var(--ar-dark-secondary-content);
191
- --ar-accent: var(--ar-dark-accent);
192
- --ar-accent-content: var(--ar-dark-accent-content);
193
- --ar-neutral: var(--ar-dark-neutral);
194
- --ar-neutral-content: var(--ar-dark-neutral-content);
195
- --ar-info: var(--ar-dark-info);
196
- --ar-info-content: var(--ar-dark-info-content);
197
- --ar-success: var(--ar-dark-success);
198
- --ar-success-content: var(--ar-dark-success-content);
199
- --ar-warning: var(--ar-dark-warning);
200
- --ar-warning-content: var(--ar-dark-warning-content);
201
- --ar-error: var(--ar-dark-error);
202
- --ar-error-content: var(--ar-dark-error-content);
203
- --ar-bg-img-fill: var(--ar-dark-bg-img-fill);
204
- --ar-desc-grad: var(--ar-dark-desc-grad);
205
- --ar-arc: var(--ar-dark-arc);
206
- --ar-gray-50: var(--ar-dark-gray-50);
207
- --ar-gray-100: var(--ar-dark-gray-100);
208
- --ar-gray-200: var(--ar-dark-gray-200);
209
- --ar-gray-300: var(--ar-dark-gray-300);
210
- --ar-gray-400: var(--ar-dark-gray-400);
211
- --ar-gray-500: var(--ar-dark-gray-500);
212
- --ar-gray-600: var(--ar-dark-gray-600);
213
- --ar-gray-700: var(--ar-dark-gray-700);
214
- --ar-gray-800: var(--ar-dark-gray-800);
215
- --ar-gray-900: var(--ar-dark-gray-900);
216
- }
217
-
218
- @media (prefers-color-scheme: dark) {
219
- html:not([data-theme]) {
220
- color-scheme: dark;
221
- --ar-base-100: var(--ar-dark-base-100);
222
- --ar-base-200: var(--ar-dark-base-200);
223
- --ar-base-300: var(--ar-dark-base-300);
224
- --ar-base-content: var(--ar-dark-base-content);
225
- --ar-base-content-80: var(--ar-dark-base-content-80);
226
- --ar-primary: var(--ar-dark-primary);
227
- --ar-primary-content: var(--ar-dark-primary-content);
228
- --ar-secondary: var(--ar-dark-secondary);
229
- --ar-secondary-content: var(--ar-dark-secondary-content);
230
- --ar-accent: var(--ar-dark-accent);
231
- --ar-accent-content: var(--ar-dark-accent-content);
232
- --ar-neutral: var(--ar-dark-neutral);
233
- --ar-neutral-content: var(--ar-dark-neutral-content);
234
- --ar-info: var(--ar-dark-info);
235
- --ar-info-content: var(--ar-dark-info-content);
236
- --ar-success: var(--ar-dark-success);
237
- --ar-success-content: var(--ar-dark-success-content);
238
- --ar-warning: var(--ar-dark-warning);
239
- --ar-warning-content: var(--ar-dark-warning-content);
240
- --ar-error: var(--ar-dark-error);
241
- --ar-error-content: var(--ar-dark-error-content);
242
- --ar-bg-img-fill: var(--ar-dark-bg-img-fill);
243
- --ar-desc-grad: var(--ar-dark-desc-grad);
244
- --ar-arc: var(--ar-dark-arc);
245
- --ar-gray-50: var(--ar-dark-gray-50);
246
- --ar-gray-100: var(--ar-dark-gray-100);
247
- --ar-gray-200: var(--ar-dark-gray-200);
248
- --ar-gray-300: var(--ar-dark-gray-300);
249
- --ar-gray-400: var(--ar-dark-gray-400);
250
- --ar-gray-500: var(--ar-dark-gray-500);
251
- --ar-gray-600: var(--ar-dark-gray-600);
252
- --ar-gray-700: var(--ar-dark-gray-700);
253
- --ar-gray-800: var(--ar-dark-gray-800);
254
- --ar-gray-900: var(--ar-dark-gray-900);
255
- }
256
- }
257
-
258
- html[data-theme="neo"] {
259
- color-scheme: light;
260
- --ar-base-100: var(--ar-neo-base-100);
261
- --ar-base-200: var(--ar-neo-base-200);
262
- --ar-base-300: var(--ar-neo-base-300);
263
- --ar-base-content: var(--ar-neo-base-content);
264
- --ar-base-content-80: var(--ar-neo-base-content-80);
265
- --ar-primary: var(--ar-neo-primary);
266
- --ar-primary-content: var(--ar-neo-primary-content);
267
- --ar-secondary: var(--ar-neo-secondary);
268
- --ar-secondary-content: var(--ar-neo-secondary-content);
269
- --ar-accent: var(--ar-neo-accent);
270
- --ar-accent-content: var(--ar-neo-accent-content);
271
- --ar-neutral: var(--ar-neo-neutral);
272
- --ar-neutral-content: var(--ar-neo-neutral-content);
273
- --ar-info: var(--ar-neo-info);
274
- --ar-info-content: var(--ar-neo-info-content);
275
- --ar-success: var(--ar-neo-success);
276
- --ar-success-content: var(--ar-neo-success-content);
277
- --ar-warning: var(--ar-neo-warning);
278
- --ar-warning-content: var(--ar-neo-warning-content);
279
- --ar-error: var(--ar-neo-error);
280
- --ar-error-content: var(--ar-neo-error-content);
281
- --ar-bg-img-fill: var(--ar-neo-bg-img-fill);
282
- --ar-desc-grad: var(--ar-neo-desc-grad);
283
- --ar-arc: var(--ar-neo-arc);
284
- --ar-gray-50: var(--ar-neo-gray-50);
285
- --ar-gray-100: var(--ar-neo-gray-100);
286
- --ar-gray-200: var(--ar-neo-gray-200);
287
- --ar-gray-300: var(--ar-neo-gray-300);
288
- --ar-gray-400: var(--ar-neo-gray-400);
289
- --ar-gray-500: var(--ar-neo-gray-500);
290
- --ar-gray-600: var(--ar-neo-gray-600);
291
- --ar-gray-700: var(--ar-neo-gray-700);
292
- --ar-gray-800: var(--ar-neo-gray-800);
293
- --ar-gray-900: var(--ar-neo-gray-900);
294
- /* Override design tokens for neobrutalism */
295
- --ar-border-width: var(--ar-neo-border-width);
296
- --ar-radius-field: 0.5rem;
297
- --ar-radius-box: 0.75rem;
298
- --ar-shadow-sm: var(--ar-neo-shadow-sm);
299
- --ar-shadow-md: var(--ar-neo-shadow-md);
300
- --ar-shadow-lg: var(--ar-neo-shadow-lg);
301
- --ar-shadow-xl: var(--ar-neo-shadow-xl);
302
- --ar-shadow-2xl: var(--ar-neo-shadow-2xl);
303
- --ar-base-font: var(--ar-font-sans);
304
- }
1
+ /* DESIGN TOKENS */
2
+ :root {
3
+ --ar-font-sans:
4
+ system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
5
+ sans-serif;
6
+ --ar-font-serif: "IM Fell English", Georgia, "Times New Roman", serif;
7
+ --ar-font-mono:
8
+ ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, "Courier New",
9
+ monospace;
10
+ --ar-base-font: var(--ar-font-serif);
11
+
12
+ --ar-s-0: 0;
13
+ --ar-s-1: 0.25rem;
14
+ --ar-s-2: 0.5rem;
15
+ --ar-s-3: 0.75rem;
16
+ --ar-s-4: 1rem;
17
+ --ar-s-5: 1.25rem;
18
+ --ar-s-6: 1.5rem;
19
+ --ar-s-8: 2rem;
20
+ --ar-s-10: 2.5rem;
21
+ --ar-s-12: 3rem;
22
+ --ar-s-16: 4rem;
23
+ --ar-s-20: 5rem;
24
+
25
+ --ar-radius-field: 0.25rem;
26
+ --ar-radius-box: 0.5rem;
27
+ --ar-radius-selector: 2rem;
28
+ --ar-radius-pill: 9999px;
29
+
30
+ --ar-border-width: 1px;
31
+
32
+ --ar-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
33
+ --ar-shadow-md:
34
+ 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
35
+ --ar-shadow-lg:
36
+ 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
37
+ --ar-shadow-xl:
38
+ 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
39
+ --ar-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
40
+
41
+ /* Relative to this stylesheet — override the token if you serve
42
+ arekui.css from another path or want a different texture. */
43
+ --ar-texture: url("assets/img/grunge-wall-texture-freepick-kues1.webp");
44
+
45
+ --ar-gray-50: #fafafa;
46
+ --ar-gray-100: #f5f5f5;
47
+ --ar-gray-200: #e5e5e5;
48
+ --ar-gray-300: #d4d4d4;
49
+ --ar-gray-400: #a3a3a3;
50
+ --ar-gray-500: #737373;
51
+ --ar-gray-600: #525252;
52
+ --ar-gray-700: #404040;
53
+ --ar-gray-800: #262626;
54
+ --ar-gray-900: #171717;
55
+
56
+ /* Dark palette — single source of truth shared by
57
+ html[data-theme="dark"] and the prefers-color-scheme fallback. */
58
+ --ar-dark-base-100: oklch(25.33% 0.016 252.42);
59
+ --ar-dark-base-200: oklch(23.26% 0.014 253.1);
60
+ --ar-dark-base-300: oklch(21.15% 0.012 254.09);
61
+ --ar-dark-base-content: oklch(97.807% 0.029 256.847);
62
+ --ar-dark-primary: oklch(58% 0.233 277.117);
63
+ --ar-dark-primary-content: oklch(96% 0.018 272.314);
64
+ --ar-dark-secondary: oklch(65% 0.241 354.308);
65
+ --ar-dark-secondary-content: oklch(94% 0.028 342.258);
66
+ --ar-dark-accent: oklch(77% 0.152 181.912);
67
+ --ar-dark-accent-content: oklch(38% 0.063 188.416);
68
+ --ar-dark-neutral: oklch(14% 0.005 285.823);
69
+ --ar-dark-neutral-content: oklch(92% 0.004 286.32);
70
+ --ar-dark-info: oklch(74% 0.16 232.661);
71
+ --ar-dark-info-content: oklch(29% 0.066 243.157);
72
+ --ar-dark-success: oklch(76% 0.177 163.223);
73
+ --ar-dark-success-content: oklch(37% 0.077 168.94);
74
+ --ar-dark-warning: oklch(82% 0.189 84.429);
75
+ --ar-dark-warning-content: oklch(41% 0.112 45.904);
76
+ --ar-dark-error: oklch(71% 0.194 13.428);
77
+ --ar-dark-error-content: oklch(27% 0.105 12.094);
78
+ --ar-dark-bg-img-fill: rgb(152 159 171 / 0.3);
79
+ --ar-dark-desc-grad: linear-gradient(
80
+ to left,
81
+ var(--ar-dark-base-200) 50%,
82
+ #fafafa 50%
83
+ )
84
+ right;
85
+ --ar-dark-arc: #333333;
86
+ --ar-dark-gray-50: #1a1a1a;
87
+ --ar-dark-gray-100: #262626;
88
+ --ar-dark-gray-200: #333333;
89
+ --ar-dark-gray-300: #444444;
90
+ --ar-dark-gray-400: #999999;
91
+ --ar-dark-gray-500: #aaaaaa;
92
+ --ar-dark-gray-600: #bbbbbb;
93
+ --ar-dark-gray-700: #cccccc;
94
+ --ar-dark-gray-800: #dddddd;
95
+ --ar-dark-gray-900: #eeeeee;
96
+ --ar-dark-base-content-80: oklch(97.807% 0.029 256.847 / 0.8);
97
+
98
+ /* --------------------------------------------------------
99
+ NEOBRUTALISM palette — single source of truth.
100
+ Referenced by html[data-theme="neo"] below.
101
+ -------------------------------------------------------- */
102
+ --ar-neo-base-100: #ffffff;
103
+ --ar-neo-base-200: #f8f8f8;
104
+ --ar-neo-base-300: #e8e8e8;
105
+ --ar-neo-base-content: #1e293b;
106
+ --ar-neo-base-content-80: rgb(30 41 59 / 0.8);
107
+ --ar-neo-primary: #00aeef;
108
+ --ar-neo-primary-content: #ffffff;
109
+ --ar-neo-secondary: #8bc53f;
110
+ --ar-neo-secondary-content: #ffffff;
111
+ --ar-neo-accent: #ffd100;
112
+ --ar-neo-accent-content: #1e293b;
113
+ --ar-neo-neutral: #1e293b;
114
+ --ar-neo-neutral-content: #ffffff;
115
+ --ar-neo-info: #00aeef;
116
+ --ar-neo-info-content: #ffffff;
117
+ --ar-neo-success: #8bc53f;
118
+ --ar-neo-success-content: #ffffff;
119
+ --ar-neo-warning: #ffd100;
120
+ --ar-neo-warning-content: #1e293b;
121
+ --ar-neo-error: #e4002b;
122
+ --ar-neo-error-content: #ffffff;
123
+ --ar-neo-bg-img-fill: #1e293b;
124
+ --ar-neo-desc-grad: linear-gradient(to left, #f8f8f8 50%, #1e293b 50%) right;
125
+ --ar-neo-arc: #ffffff;
126
+ --ar-neo-gray-50: #f8f8f8;
127
+ --ar-neo-gray-100: #f0f0f0;
128
+ --ar-neo-gray-200: #e0e0e0;
129
+ --ar-neo-gray-300: #cccccc;
130
+ --ar-neo-gray-400: #999999;
131
+ --ar-neo-gray-500: #777777;
132
+ --ar-neo-gray-600: #555555;
133
+ --ar-neo-gray-700: #333333;
134
+ --ar-neo-gray-800: #222222;
135
+ --ar-neo-gray-900: #111111;
136
+
137
+ /* Neobrutalism-specific tokens */
138
+ --ar-neo-border-width: 3px;
139
+ --ar-neo-border-color: #1e293b;
140
+ --ar-neo-shadow-sm: 2px 2px 0px 0px #1e293b;
141
+ --ar-neo-shadow-md: 4px 4px 0px 0px #1e293b;
142
+ --ar-neo-shadow-lg: 6px 6px 0px 0px #1e293b;
143
+ --ar-neo-shadow-xl: 8px 8px 0px 0px #1e293b;
144
+ --ar-neo-shadow-2xl: 12px 12px 0px 0px #1e293b;
145
+ }
146
+
147
+ html[data-theme="light"] {
148
+ color-scheme: light;
149
+ --ar-base-100: oklch(100% 0 0);
150
+ --ar-base-200: oklch(97% 0 0);
151
+ --ar-base-300: oklch(94% 0 0);
152
+ --ar-base-content: oklch(0% 0 0);
153
+ --ar-base-content-80: oklch(0% 0 0 / 0.8);
154
+ --ar-primary: oklch(15.906% 0 0);
155
+ --ar-primary-content: oklch(100% 0 0);
156
+ --ar-secondary: oklch(21.455% 0.001 17.278);
157
+ --ar-secondary-content: oklch(100% 0 0);
158
+ --ar-accent: oklch(26.861% 0 0);
159
+ --ar-accent-content: oklch(100% 0 0);
160
+ --ar-neutral: oklch(0% 0 0);
161
+ --ar-neutral-content: oklch(100% 0 0);
162
+ --ar-info: oklch(79.54% 0.103 205.9);
163
+ --ar-info-content: oklch(15.908% 0.02 205.9);
164
+ --ar-success: oklch(90.13% 0.153 164.14);
165
+ --ar-success-content: oklch(18.026% 0.03 164.14);
166
+ --ar-warning: oklch(88.37% 0.135 79.94);
167
+ --ar-warning-content: oklch(17.674% 0.027 79.94);
168
+ --ar-error: oklch(78.66% 0.15 28.47);
169
+ --ar-error-content: oklch(15.732% 0.03 28.47);
170
+ --ar-bg-img-fill: transparent;
171
+ --ar-desc-grad: linear-gradient(
172
+ to left,
173
+ var(--ar-base-200) 50%,
174
+ var(--ar-neutral) 50%
175
+ )
176
+ right;
177
+ --ar-arc: #fafafa;
178
+ }
179
+
180
+ html[data-theme="dark"] {
181
+ color-scheme: dark;
182
+ --ar-base-100: var(--ar-dark-base-100);
183
+ --ar-base-200: var(--ar-dark-base-200);
184
+ --ar-base-300: var(--ar-dark-base-300);
185
+ --ar-base-content: var(--ar-dark-base-content);
186
+ --ar-base-content-80: var(--ar-dark-base-content-80);
187
+ --ar-primary: var(--ar-dark-primary);
188
+ --ar-primary-content: var(--ar-dark-primary-content);
189
+ --ar-secondary: var(--ar-dark-secondary);
190
+ --ar-secondary-content: var(--ar-dark-secondary-content);
191
+ --ar-accent: var(--ar-dark-accent);
192
+ --ar-accent-content: var(--ar-dark-accent-content);
193
+ --ar-neutral: var(--ar-dark-neutral);
194
+ --ar-neutral-content: var(--ar-dark-neutral-content);
195
+ --ar-info: var(--ar-dark-info);
196
+ --ar-info-content: var(--ar-dark-info-content);
197
+ --ar-success: var(--ar-dark-success);
198
+ --ar-success-content: var(--ar-dark-success-content);
199
+ --ar-warning: var(--ar-dark-warning);
200
+ --ar-warning-content: var(--ar-dark-warning-content);
201
+ --ar-error: var(--ar-dark-error);
202
+ --ar-error-content: var(--ar-dark-error-content);
203
+ --ar-bg-img-fill: var(--ar-dark-bg-img-fill);
204
+ --ar-desc-grad: var(--ar-dark-desc-grad);
205
+ --ar-arc: var(--ar-dark-arc);
206
+ --ar-gray-50: var(--ar-dark-gray-50);
207
+ --ar-gray-100: var(--ar-dark-gray-100);
208
+ --ar-gray-200: var(--ar-dark-gray-200);
209
+ --ar-gray-300: var(--ar-dark-gray-300);
210
+ --ar-gray-400: var(--ar-dark-gray-400);
211
+ --ar-gray-500: var(--ar-dark-gray-500);
212
+ --ar-gray-600: var(--ar-dark-gray-600);
213
+ --ar-gray-700: var(--ar-dark-gray-700);
214
+ --ar-gray-800: var(--ar-dark-gray-800);
215
+ --ar-gray-900: var(--ar-dark-gray-900);
216
+ }
217
+
218
+ @media (prefers-color-scheme: dark) {
219
+ html:not([data-theme]) {
220
+ color-scheme: dark;
221
+ --ar-base-100: var(--ar-dark-base-100);
222
+ --ar-base-200: var(--ar-dark-base-200);
223
+ --ar-base-300: var(--ar-dark-base-300);
224
+ --ar-base-content: var(--ar-dark-base-content);
225
+ --ar-base-content-80: var(--ar-dark-base-content-80);
226
+ --ar-primary: var(--ar-dark-primary);
227
+ --ar-primary-content: var(--ar-dark-primary-content);
228
+ --ar-secondary: var(--ar-dark-secondary);
229
+ --ar-secondary-content: var(--ar-dark-secondary-content);
230
+ --ar-accent: var(--ar-dark-accent);
231
+ --ar-accent-content: var(--ar-dark-accent-content);
232
+ --ar-neutral: var(--ar-dark-neutral);
233
+ --ar-neutral-content: var(--ar-dark-neutral-content);
234
+ --ar-info: var(--ar-dark-info);
235
+ --ar-info-content: var(--ar-dark-info-content);
236
+ --ar-success: var(--ar-dark-success);
237
+ --ar-success-content: var(--ar-dark-success-content);
238
+ --ar-warning: var(--ar-dark-warning);
239
+ --ar-warning-content: var(--ar-dark-warning-content);
240
+ --ar-error: var(--ar-dark-error);
241
+ --ar-error-content: var(--ar-dark-error-content);
242
+ --ar-bg-img-fill: var(--ar-dark-bg-img-fill);
243
+ --ar-desc-grad: var(--ar-dark-desc-grad);
244
+ --ar-arc: var(--ar-dark-arc);
245
+ --ar-gray-50: var(--ar-dark-gray-50);
246
+ --ar-gray-100: var(--ar-dark-gray-100);
247
+ --ar-gray-200: var(--ar-dark-gray-200);
248
+ --ar-gray-300: var(--ar-dark-gray-300);
249
+ --ar-gray-400: var(--ar-dark-gray-400);
250
+ --ar-gray-500: var(--ar-dark-gray-500);
251
+ --ar-gray-600: var(--ar-dark-gray-600);
252
+ --ar-gray-700: var(--ar-dark-gray-700);
253
+ --ar-gray-800: var(--ar-dark-gray-800);
254
+ --ar-gray-900: var(--ar-dark-gray-900);
255
+ }
256
+ }
257
+
258
+ html[data-theme="neo"] {
259
+ color-scheme: light;
260
+ --ar-base-100: var(--ar-neo-base-100);
261
+ --ar-base-200: var(--ar-neo-base-200);
262
+ --ar-base-300: var(--ar-neo-base-300);
263
+ --ar-base-content: var(--ar-neo-base-content);
264
+ --ar-base-content-80: var(--ar-neo-base-content-80);
265
+ --ar-primary: var(--ar-neo-primary);
266
+ --ar-primary-content: var(--ar-neo-primary-content);
267
+ --ar-secondary: var(--ar-neo-secondary);
268
+ --ar-secondary-content: var(--ar-neo-secondary-content);
269
+ --ar-accent: var(--ar-neo-accent);
270
+ --ar-accent-content: var(--ar-neo-accent-content);
271
+ --ar-neutral: var(--ar-neo-neutral);
272
+ --ar-neutral-content: var(--ar-neo-neutral-content);
273
+ --ar-info: var(--ar-neo-info);
274
+ --ar-info-content: var(--ar-neo-info-content);
275
+ --ar-success: var(--ar-neo-success);
276
+ --ar-success-content: var(--ar-neo-success-content);
277
+ --ar-warning: var(--ar-neo-warning);
278
+ --ar-warning-content: var(--ar-neo-warning-content);
279
+ --ar-error: var(--ar-neo-error);
280
+ --ar-error-content: var(--ar-neo-error-content);
281
+ --ar-bg-img-fill: var(--ar-neo-bg-img-fill);
282
+ --ar-desc-grad: var(--ar-neo-desc-grad);
283
+ --ar-arc: var(--ar-neo-arc);
284
+ --ar-gray-50: var(--ar-neo-gray-50);
285
+ --ar-gray-100: var(--ar-neo-gray-100);
286
+ --ar-gray-200: var(--ar-neo-gray-200);
287
+ --ar-gray-300: var(--ar-neo-gray-300);
288
+ --ar-gray-400: var(--ar-neo-gray-400);
289
+ --ar-gray-500: var(--ar-neo-gray-500);
290
+ --ar-gray-600: var(--ar-neo-gray-600);
291
+ --ar-gray-700: var(--ar-neo-gray-700);
292
+ --ar-gray-800: var(--ar-neo-gray-800);
293
+ --ar-gray-900: var(--ar-neo-gray-900);
294
+ /* Override design tokens for neobrutalism */
295
+ --ar-border-width: var(--ar-neo-border-width);
296
+ --ar-radius-field: 0.5rem;
297
+ --ar-radius-box: 0.75rem;
298
+ --ar-shadow-sm: var(--ar-neo-shadow-sm);
299
+ --ar-shadow-md: var(--ar-neo-shadow-md);
300
+ --ar-shadow-lg: var(--ar-neo-shadow-lg);
301
+ --ar-shadow-xl: var(--ar-neo-shadow-xl);
302
+ --ar-shadow-2xl: var(--ar-neo-shadow-2xl);
303
+ --ar-base-font: var(--ar-font-sans);
304
+ }
package/src/components/accordion.css CHANGED
@@ -1,34 +1,34 @@
1
- /* ACCORDION */
2
- .ar-accordion {
3
- border: var(--ar-border-width) solid var(--ar-base-300);
4
- border-radius: var(--ar-radius-box);
5
- overflow: hidden;
6
- }
7
- .ar-accordion details {
8
- border-top: var(--ar-border-width) solid var(--ar-base-300);
9
- }
10
- .ar-accordion details:first-child {
11
- border-top: 0;
12
- }
13
- .ar-accordion summary {
14
- list-style: none;
15
- cursor: pointer;
16
- padding: 1rem;
17
- font-weight: 600;
18
- display: flex;
19
- justify-content: space-between;
20
- align-items: center;
21
- }
22
- .ar-accordion summary::-webkit-details-marker {
23
- display: none;
24
- }
25
- .ar-accordion summary::after {
26
- content: "+";
27
- font-size: 1.25rem;
28
- }
29
- .ar-accordion details[open] summary::after {
30
- content: "\2212";
31
- }
32
- .ar-accordion .ar-accordion-body {
33
- padding: 0 1rem 1rem;
34
- }
1
+ /* ACCORDION */
2
+ .ar-accordion {
3
+ border: var(--ar-border-width) solid var(--ar-base-300);
4
+ border-radius: var(--ar-radius-box);
5
+ overflow: hidden;
6
+ }
7
+ .ar-accordion details {
8
+ border-top: var(--ar-border-width) solid var(--ar-base-300);
9
+ }
10
+ .ar-accordion details:first-child {
11
+ border-top: 0;
12
+ }
13
+ .ar-accordion summary {
14
+ list-style: none;
15
+ cursor: pointer;
16
+ padding: 1rem;
17
+ font-weight: 600;
18
+ display: flex;
19
+ justify-content: space-between;
20
+ align-items: center;
21
+ }
22
+ .ar-accordion summary::-webkit-details-marker {
23
+ display: none;
24
+ }
25
+ .ar-accordion summary::after {
26
+ content: "+";
27
+ font-size: 1.25rem;
28
+ }
29
+ .ar-accordion details[open] summary::after {
30
+ content: "\2212";
31
+ }
32
+ .ar-accordion .ar-accordion-body {
33
+ padding: 0 1rem 1rem;
34
+ }