@webdevarif/dashui 1.2.6 → 1.2.8

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 (26) hide show
  1. package/dist/hooks.js +70 -0
  2. package/dist/hooks.js.map +1 -0
  3. package/dist/hooks.mjs +33 -0
  4. package/dist/hooks.mjs.map +1 -0
  5. package/dist/i18n.js +52 -0
  6. package/dist/i18n.js.map +1 -0
  7. package/dist/i18n.mjs +25 -0
  8. package/dist/i18n.mjs.map +1 -0
  9. package/dist/index.js +69 -20
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.mjs +61 -15
  12. package/dist/index.mjs.map +1 -1
  13. package/dist/setup.js +161 -0
  14. package/dist/setup.js.map +1 -0
  15. package/dist/setup.mjs +119 -0
  16. package/dist/setup.mjs.map +1 -0
  17. package/dist/styles/animations.css +13 -0
  18. package/dist/styles/globals.css +389 -0
  19. package/dist/tokens/index.css +11 -0
  20. package/dist/tokens/primitives.css +92 -0
  21. package/dist/tokens/semantic-dark.css +87 -0
  22. package/dist/tokens/semantic-light.css +116 -0
  23. package/dist/tokens/storefront-schemes.css +96 -0
  24. package/package.json +18 -2
  25. package/dist/index.d.mts +0 -836
  26. package/dist/index.d.ts +0 -836
package/dist/styles/globals.css ADDED
@@ -0,0 +1,389 @@
1
+ @keyframes dashui-shimmer {
2
+ 0% { transform: translateX(-100%); }
3
+ 100% { transform: translateX(200%); }
4
+ }
5
+
6
+ @keyframes dashui-spin {
7
+ to { transform: rotate(360deg); }
8
+ }
9
+
10
+ @keyframes dashui-pulse {
11
+ 0%, 100% { opacity: 1; }
12
+ 50% { opacity: 0.5; }
13
+ }
14
+
15
+ /* @webdevarif/dashui � All Tokens Combined
16
+ * Import: import '@webdevarif/dashui/styles'
17
+ */
18
+
19
+ /**
20
+ * @webdevarif/dashui — Primitive Tokens (Layer 1)
21
+ * Raw values. Never use these directly in components.
22
+ * Use semantic tokens instead.
23
+ */
24
+ :root {
25
+ /* ─── Gray Scale ─── */
26
+ --wd-gray-0: #FFFFFF;
27
+ --wd-gray-50: #F9FAFB;
28
+ --wd-gray-100: #F3F4F6;
29
+ --wd-gray-200: #E5E7EB;
30
+ --wd-gray-300: #D1D5DB;
31
+ --wd-gray-400: #9CA3AF;
32
+ --wd-gray-500: #6B7280;
33
+ --wd-gray-600: #4B5563;
34
+ --wd-gray-700: #374151;
35
+ --wd-gray-800: #1F2937;
36
+ --wd-gray-900: #111827;
37
+ --wd-gray-950: #030712;
38
+
39
+ /* ─── Brand (Indigo) ─── */
40
+ --wd-brand-50: #EEF2FF;
41
+ --wd-brand-100: #E0E7FF;
42
+ --wd-brand-200: #C7D2FE;
43
+ --wd-brand-300: #A5B4FC;
44
+ --wd-brand-400: #818CF8;
45
+ --wd-brand-500: #6366F1;
46
+ --wd-brand-600: #4F46E5;
47
+ --wd-brand-700: #4338CA;
48
+ --wd-brand-800: #3730A3;
49
+ --wd-brand-900: #312E81;
50
+
51
+ /* ─── Status ─── */
52
+ --wd-green-500: #16A34A;
53
+ --wd-green-50: #F0FDF4;
54
+ --wd-yellow-500: #D97706;
55
+ --wd-yellow-50: #FFFBEB;
56
+ --wd-red-500: #DC2626;
57
+ --wd-red-50: #FEF2F2;
58
+ --wd-blue-500: #2563EB;
59
+ --wd-blue-50: #EFF6FF;
60
+
61
+ /* ─── Spacing ─── */
62
+ --wd-space-1: 0.25rem; /* 4px */
63
+ --wd-space-2: 0.5rem; /* 8px */
64
+ --wd-space-3: 0.75rem; /* 12px */
65
+ --wd-space-4: 1rem; /* 16px */
66
+ --wd-space-5: 1.25rem; /* 20px */
67
+ --wd-space-6: 1.5rem; /* 24px */
68
+ --wd-space-8: 2rem; /* 32px */
69
+ --wd-space-10: 2.5rem; /* 40px */
70
+ --wd-space-12: 3rem; /* 48px */
71
+ --wd-space-16: 4rem; /* 64px */
72
+
73
+ /* ─── Border Radius ─── */
74
+ --wd-radius-sm: 4px;
75
+ --wd-radius-md: 8px;
76
+ --wd-radius-lg: 12px;
77
+ --wd-radius-xl: 16px;
78
+ --wd-radius-2xl: 20px;
79
+ --wd-radius-full: 9999px;
80
+
81
+ /* ─── Typography ─── */
82
+ --wd-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
83
+ --wd-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
84
+
85
+ --wd-text-xs: 0.75rem; /* 12px */
86
+ --wd-text-sm: 0.875rem; /* 14px */
87
+ --wd-text-base: 1rem; /* 16px */
88
+ --wd-text-lg: 1.125rem; /* 18px */
89
+ --wd-text-xl: 1.25rem; /* 20px */
90
+ --wd-text-2xl: 1.5rem; /* 24px */
91
+ --wd-text-3xl: 1.875rem; /* 30px */
92
+ --wd-text-4xl: 2.25rem; /* 36px */
93
+
94
+ --wd-leading-tight: 1.25;
95
+ --wd-leading-normal: 1.5;
96
+ --wd-leading-relaxed: 1.75;
97
+
98
+ /* ─── Shadows ─── */
99
+ --wd-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
100
+ --wd-shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
101
+ --wd-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
102
+ --wd-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
103
+ --wd-shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
104
+
105
+ /* ─── Animation ─── */
106
+ --wd-duration-fast: 100ms;
107
+ --wd-duration-normal: 200ms;
108
+ --wd-duration-slow: 300ms;
109
+ --wd-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
110
+ }
111
+
112
+
113
+ /**
114
+ * @webdevarif/dashui — Semantic Tokens, Light Mode (Layer 2)
115
+ * Apply via: <html data-dashui-theme="light"> (default)
116
+ * Components use these variables, never primitives directly.
117
+ */
118
+ :root,
119
+ [data-dashui-theme="light"] {
120
+
121
+ /* ─── Surfaces ─── */
122
+ --wd-surface-page: var(--wd-gray-50);
123
+ --wd-surface-card: var(--wd-gray-0);
124
+ --wd-surface-overlay: var(--wd-gray-0);
125
+ --wd-surface-sunken: var(--wd-gray-100);
126
+ --wd-surface-raised: var(--wd-gray-0);
127
+ --wd-surface-sidebar: var(--wd-gray-0);
128
+
129
+ /* ─── Text ─── */
130
+ --wd-text-primary: var(--wd-gray-900);
131
+ --wd-text-secondary: var(--wd-gray-600);
132
+ --wd-text-tertiary: var(--wd-gray-400);
133
+ --wd-text-disabled: var(--wd-gray-300);
134
+ --wd-text-inverse: var(--wd-gray-0);
135
+ --wd-text-on-brand: #FFFFFF;
136
+
137
+ /* ─── Brand ─── */
138
+ --wd-brand: var(--wd-brand-500);
139
+ --wd-brand-hover: var(--wd-brand-600);
140
+ --wd-brand-active: var(--wd-brand-700);
141
+ --wd-brand-subtle: var(--wd-brand-50);
142
+ --wd-brand-muted: var(--wd-brand-100);
143
+ --wd-brand-border: var(--wd-brand-200);
144
+
145
+ /* ─── Border ─── */
146
+ --wd-border: var(--wd-gray-200);
147
+ --wd-border-strong: var(--wd-gray-300);
148
+ --wd-border-focus: var(--wd-brand-500);
149
+
150
+ /* ─── Interactive ─── */
151
+ --wd-interactive-bg: var(--wd-gray-0);
152
+ --wd-interactive-hover: var(--wd-gray-50);
153
+ --wd-interactive-active: var(--wd-gray-100);
154
+ --wd-interactive-selected: var(--wd-brand-50);
155
+ --wd-interactive-selected-border: var(--wd-brand-200);
156
+
157
+ /* ─── Button — Primary ─── */
158
+ --wd-btn-primary-bg: var(--wd-brand-500);
159
+ --wd-btn-primary-bg-hover: var(--wd-brand-600);
160
+ --wd-btn-primary-bg-active: var(--wd-brand-700);
161
+ --wd-btn-primary-text: #FFFFFF;
162
+ --wd-btn-primary-border: var(--wd-brand-500);
163
+
164
+ /* ─── Button — Secondary ─── */
165
+ --wd-btn-secondary-bg: var(--wd-gray-0);
166
+ --wd-btn-secondary-bg-hover: var(--wd-gray-50);
167
+ --wd-btn-secondary-bg-active: var(--wd-gray-100);
168
+ --wd-btn-secondary-text: var(--wd-gray-700);
169
+ --wd-btn-secondary-border: var(--wd-gray-300);
170
+
171
+ /* ─── Button — Destructive ─── */
172
+ --wd-btn-danger-bg: var(--wd-red-500);
173
+ --wd-btn-danger-bg-hover: #B91C1C;
174
+ --wd-btn-danger-text: #FFFFFF;
175
+ --wd-btn-danger-border: var(--wd-red-500);
176
+
177
+ /* ─── Button — Ghost ─── */
178
+ --wd-btn-ghost-bg: transparent;
179
+ --wd-btn-ghost-bg-hover: var(--wd-gray-100);
180
+ --wd-btn-ghost-text: var(--wd-gray-700);
181
+
182
+ /* ─── Input ─── */
183
+ --wd-input-bg: var(--wd-gray-0);
184
+ --wd-input-bg-hover: var(--wd-gray-50);
185
+ --wd-input-bg-focus: var(--wd-gray-0);
186
+ --wd-input-bg-disabled: var(--wd-gray-100);
187
+ --wd-input-text: var(--wd-gray-900);
188
+ --wd-input-placeholder: var(--wd-gray-400);
189
+ --wd-input-border: var(--wd-gray-300);
190
+ --wd-input-border-focus: var(--wd-brand-500);
191
+ --wd-input-border-error: var(--wd-red-500);
192
+
193
+ /* ─── Status ─── */
194
+ --wd-status-success: var(--wd-green-500);
195
+ --wd-status-success-bg: var(--wd-green-50);
196
+ --wd-status-warning: var(--wd-yellow-500);
197
+ --wd-status-warning-bg: var(--wd-yellow-50);
198
+ --wd-status-error: var(--wd-red-500);
199
+ --wd-status-error-bg: var(--wd-red-50);
200
+ --wd-status-info: var(--wd-blue-500);
201
+ --wd-status-info-bg: var(--wd-blue-50);
202
+
203
+ /* ─── Shadows ─── */
204
+ --wd-shadow-card: var(--wd-shadow-sm);
205
+ --wd-shadow-dropdown: var(--wd-shadow-lg);
206
+ --wd-shadow-modal: var(--wd-shadow-xl);
207
+
208
+ /* ─── Radius (semantic) ─── */
209
+ --wd-radius-btn: var(--wd-radius-md);
210
+ --wd-radius-input: var(--wd-radius-md);
211
+ --wd-radius-card: var(--wd-radius-lg);
212
+ --wd-radius-badge: var(--wd-radius-full);
213
+ --wd-radius-dialog: var(--wd-radius-xl);
214
+
215
+ /* ─── Spacing (semantic) ─── */
216
+ --wd-spacing-component-xs: var(--wd-space-2);
217
+ --wd-spacing-component-sm: var(--wd-space-3);
218
+ --wd-spacing-component-md: var(--wd-space-4);
219
+ --wd-spacing-component-lg: var(--wd-space-6);
220
+ --wd-spacing-layout-sm: var(--wd-space-6);
221
+ --wd-spacing-layout-md: var(--wd-space-8);
222
+ --wd-spacing-layout-lg: var(--wd-space-12);
223
+
224
+ /* ─── Sidebar ─── */
225
+ --wd-sidebar-width: 240px;
226
+ --wd-sidebar-collapsed-width: 64px;
227
+ --wd-topbar-height: 60px;
228
+ }
229
+
230
+
231
+ /**
232
+ * @webdevarif/dashui — Semantic Tokens, Dark Mode (Layer 2)
233
+ * Apply via: <html data-dashui-theme="dark">
234
+ */
235
+ [data-dashui-theme="dark"] {
236
+
237
+ /* ─── Surfaces ─── */
238
+ --wd-surface-page: #0A0A0A;
239
+ --wd-surface-card: var(--wd-gray-900);
240
+ --wd-surface-overlay: var(--wd-gray-800);
241
+ --wd-surface-sunken: #050505;
242
+ --wd-surface-raised: var(--wd-gray-800);
243
+ --wd-surface-sidebar: var(--wd-gray-950);
244
+
245
+ /* ─── Text ─── */
246
+ --wd-text-primary: var(--wd-gray-50);
247
+ --wd-text-secondary: var(--wd-gray-400);
248
+ --wd-text-tertiary: var(--wd-gray-500);
249
+ --wd-text-disabled: var(--wd-gray-700);
250
+ --wd-text-inverse: var(--wd-gray-900);
251
+ --wd-text-on-brand: #FFFFFF;
252
+
253
+ /* ─── Brand ─── */
254
+ --wd-brand: var(--wd-brand-400);
255
+ --wd-brand-hover: var(--wd-brand-300);
256
+ --wd-brand-active: var(--wd-brand-200);
257
+ --wd-brand-subtle: rgba(99, 102, 241, 0.12);
258
+ --wd-brand-muted: rgba(99, 102, 241, 0.20);
259
+ --wd-brand-border: rgba(99, 102, 241, 0.30);
260
+
261
+ /* ─── Border ─── */
262
+ --wd-border: var(--wd-gray-800);
263
+ --wd-border-strong: var(--wd-gray-700);
264
+ --wd-border-focus: var(--wd-brand-400);
265
+
266
+ /* ─── Interactive ─── */
267
+ --wd-interactive-bg: var(--wd-gray-900);
268
+ --wd-interactive-hover: var(--wd-gray-800);
269
+ --wd-interactive-active: var(--wd-gray-700);
270
+ --wd-interactive-selected: rgba(99, 102, 241, 0.15);
271
+ --wd-interactive-selected-border: rgba(99, 102, 241, 0.40);
272
+
273
+ /* ─── Button — Primary ─── */
274
+ --wd-btn-primary-bg: var(--wd-brand-500);
275
+ --wd-btn-primary-bg-hover: var(--wd-brand-400);
276
+ --wd-btn-primary-bg-active: var(--wd-brand-300);
277
+ --wd-btn-primary-text: #FFFFFF;
278
+ --wd-btn-primary-border: var(--wd-brand-500);
279
+
280
+ /* ─── Button — Secondary ─── */
281
+ --wd-btn-secondary-bg: var(--wd-gray-800);
282
+ --wd-btn-secondary-bg-hover: var(--wd-gray-700);
283
+ --wd-btn-secondary-bg-active: var(--wd-gray-600);
284
+ --wd-btn-secondary-text: var(--wd-gray-200);
285
+ --wd-btn-secondary-border: var(--wd-gray-700);
286
+
287
+ /* ─── Button — Ghost ─── */
288
+ --wd-btn-ghost-bg: transparent;
289
+ --wd-btn-ghost-bg-hover: var(--wd-gray-800);
290
+ --wd-btn-ghost-text: var(--wd-gray-300);
291
+
292
+ /* ─── Input ─── */
293
+ --wd-input-bg: var(--wd-gray-900);
294
+ --wd-input-bg-hover: var(--wd-gray-800);
295
+ --wd-input-bg-focus: var(--wd-gray-900);
296
+ --wd-input-bg-disabled: var(--wd-gray-950);
297
+ --wd-input-text: var(--wd-gray-100);
298
+ --wd-input-placeholder: var(--wd-gray-600);
299
+ --wd-input-border: var(--wd-gray-700);
300
+ --wd-input-border-focus: var(--wd-brand-400);
301
+ --wd-input-border-error: #F87171;
302
+
303
+ /* ─── Status ─── */
304
+ --wd-status-success: #4ADE80;
305
+ --wd-status-success-bg: rgba(22, 163, 74, 0.15);
306
+ --wd-status-warning: #FCD34D;
307
+ --wd-status-warning-bg: rgba(217, 119, 6, 0.15);
308
+ --wd-status-error: #F87171;
309
+ --wd-status-error-bg: rgba(220, 38, 38, 0.15);
310
+ --wd-status-info: #60A5FA;
311
+ --wd-status-info-bg: rgba(37, 99, 235, 0.15);
312
+
313
+ /* ─── Shadows ─── */
314
+ --wd-shadow-card: 0 1px 3px rgba(0,0,0,0.5);
315
+ --wd-shadow-dropdown: 0 10px 15px rgba(0,0,0,0.6);
316
+ --wd-shadow-modal: 0 20px 40px rgba(0,0,0,0.7);
317
+ }
318
+
319
+
320
+ /**
321
+ * @webdevarif/dashui — Storefront Color Schemes (Layer 3)
322
+ * For customer website sections/blocks.
323
+ * Each section gets class="color-scheme-N"
324
+ * Store brand color overrides --wd-scheme-brand via JS/API.
325
+ */
326
+
327
+ /* Scheme 1 — Light (default) */
328
+ :root,
329
+ .color-scheme-1 {
330
+ --wd-scheme-bg: #FFFFFF;
331
+ --wd-scheme-bg-rgb: 255 255 255;
332
+ --wd-scheme-surface: #F9FAFB;
333
+ --wd-scheme-text: #111827;
334
+ --wd-scheme-text-rgb: 17 24 39;
335
+ --wd-scheme-muted: #6B7280;
336
+ --wd-scheme-heading: #030712;
337
+ --wd-scheme-border: #E5E7EB;
338
+ --wd-scheme-shadow: rgba(0,0,0,0.1);
339
+
340
+ /* Brand — injected by store theme API */
341
+ --wd-scheme-brand: #6366F1;
342
+ --wd-scheme-brand-hover: #4F46E5;
343
+ --wd-scheme-brand-text: #FFFFFF;
344
+
345
+ /* Buttons */
346
+ --wd-scheme-btn-primary-bg: var(--wd-scheme-brand);
347
+ --wd-scheme-btn-primary-bg-hover: var(--wd-scheme-brand-hover);
348
+ --wd-scheme-btn-primary-text: var(--wd-scheme-brand-text);
349
+ --wd-scheme-btn-primary-border: var(--wd-scheme-brand);
350
+
351
+ --wd-scheme-btn-secondary-bg: transparent;
352
+ --wd-scheme-btn-secondary-bg-hover: #F9FAFB;
353
+ --wd-scheme-btn-secondary-text: #111827;
354
+ --wd-scheme-btn-secondary-border: #111827;
355
+
356
+ /* Input */
357
+ --wd-scheme-input-bg: #FFFFFF;
358
+ --wd-scheme-input-text: #111827;
359
+ --wd-scheme-input-border: #D1D5DB;
360
+ }
361
+
362
+ /* Color schemes 2-4 are generated dynamically by consumer apps
363
+ Based on ColorSchema model data. Not defined here.
364
+ See: /docs/dynamic-color-schemes.md */
365
+
366
+ /* Schemes 1–16: Defined dynamically via API */
367
+ /* Generated dynamically via API: GET /api/theme/{storeId}/styles.css */
368
+
369
+ /* ─── react-colorful overrides for dark theme ───────────────── */
370
+ .react-colorful {
371
+ width: 200px !important;
372
+ height: 160px !important;
373
+ border-radius: 8px !important;
374
+ }
375
+ .react-colorful__saturation {
376
+ border-radius: 6px 6px 0 0 !important;
377
+ }
378
+ .react-colorful__hue {
379
+ height: 16px !important;
380
+ border-radius: 4px !important;
381
+ }
382
+ .react-colorful__pointer {
383
+ width: 18px !important;
384
+ height: 18px !important;
385
+ border-width: 2px !important;
386
+ }
387
+
388
+
389
+
package/dist/tokens/index.css ADDED
@@ -0,0 +1,11 @@
1
+ /**
2
+ * @webdevarif/dashui — Token Entry Point
3
+ * Import order matters: primitives → semantic → schemes
4
+ *
5
+ * Usage:
6
+ * import '@webdevarif/dashui/tokens'
7
+ */
8
+ @import './primitives.css';
9
+ @import './semantic-light.css';
10
+ @import './semantic-dark.css';
11
+ @import './storefront-schemes.css';
package/dist/tokens/primitives.css ADDED
@@ -0,0 +1,92 @@
1
+ /**
2
+ * @webdevarif/dashui — Primitive Tokens (Layer 1)
3
+ * Raw values. Never use these directly in components.
4
+ * Use semantic tokens instead.
5
+ */
6
+ :root {
7
+ /* ─── Gray Scale ─── */
8
+ --wd-gray-0: #FFFFFF;
9
+ --wd-gray-50: #F9FAFB;
10
+ --wd-gray-100: #F3F4F6;
11
+ --wd-gray-200: #E5E7EB;
12
+ --wd-gray-300: #D1D5DB;
13
+ --wd-gray-400: #9CA3AF;
14
+ --wd-gray-500: #6B7280;
15
+ --wd-gray-600: #4B5563;
16
+ --wd-gray-700: #374151;
17
+ --wd-gray-800: #1F2937;
18
+ --wd-gray-900: #111827;
19
+ --wd-gray-950: #030712;
20
+
21
+ /* ─── Brand (Indigo) ─── */
22
+ --wd-brand-50: #EEF2FF;
23
+ --wd-brand-100: #E0E7FF;
24
+ --wd-brand-200: #C7D2FE;
25
+ --wd-brand-300: #A5B4FC;
26
+ --wd-brand-400: #818CF8;
27
+ --wd-brand-500: #6366F1;
28
+ --wd-brand-600: #4F46E5;
29
+ --wd-brand-700: #4338CA;
30
+ --wd-brand-800: #3730A3;
31
+ --wd-brand-900: #312E81;
32
+
33
+ /* ─── Status ─── */
34
+ --wd-green-500: #16A34A;
35
+ --wd-green-50: #F0FDF4;
36
+ --wd-yellow-500: #D97706;
37
+ --wd-yellow-50: #FFFBEB;
38
+ --wd-red-500: #DC2626;
39
+ --wd-red-50: #FEF2F2;
40
+ --wd-blue-500: #2563EB;
41
+ --wd-blue-50: #EFF6FF;
42
+
43
+ /* ─── Spacing ─── */
44
+ --wd-space-1: 0.25rem; /* 4px */
45
+ --wd-space-2: 0.5rem; /* 8px */
46
+ --wd-space-3: 0.75rem; /* 12px */
47
+ --wd-space-4: 1rem; /* 16px */
48
+ --wd-space-5: 1.25rem; /* 20px */
49
+ --wd-space-6: 1.5rem; /* 24px */
50
+ --wd-space-8: 2rem; /* 32px */
51
+ --wd-space-10: 2.5rem; /* 40px */
52
+ --wd-space-12: 3rem; /* 48px */
53
+ --wd-space-16: 4rem; /* 64px */
54
+
55
+ /* ─── Border Radius ─── */
56
+ --wd-radius-sm: 4px;
57
+ --wd-radius-md: 8px;
58
+ --wd-radius-lg: 12px;
59
+ --wd-radius-xl: 16px;
60
+ --wd-radius-2xl: 20px;
61
+ --wd-radius-full: 9999px;
62
+
63
+ /* ─── Typography ─── */
64
+ --wd-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
65
+ --wd-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
66
+
67
+ --wd-text-xs: 0.75rem; /* 12px */
68
+ --wd-text-sm: 0.875rem; /* 14px */
69
+ --wd-text-base: 1rem; /* 16px */
70
+ --wd-text-lg: 1.125rem; /* 18px */
71
+ --wd-text-xl: 1.25rem; /* 20px */
72
+ --wd-text-2xl: 1.5rem; /* 24px */
73
+ --wd-text-3xl: 1.875rem; /* 30px */
74
+ --wd-text-4xl: 2.25rem; /* 36px */
75
+
76
+ --wd-leading-tight: 1.25;
77
+ --wd-leading-normal: 1.5;
78
+ --wd-leading-relaxed: 1.75;
79
+
80
+ /* ─── Shadows ─── */
81
+ --wd-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
82
+ --wd-shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
83
+ --wd-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
84
+ --wd-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
85
+ --wd-shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
86
+
87
+ /* ─── Animation ─── */
88
+ --wd-duration-fast: 100ms;
89
+ --wd-duration-normal: 200ms;
90
+ --wd-duration-slow: 300ms;
91
+ --wd-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
92
+ }
package/dist/tokens/semantic-dark.css ADDED
@@ -0,0 +1,87 @@
1
+ /**
2
+ * @webdevarif/dashui — Semantic Tokens, Dark Mode (Layer 2)
3
+ * Apply via: <html data-dashui-theme="dark">
4
+ */
5
+ [data-dashui-theme="dark"] {
6
+
7
+ /* ─── Surfaces ─── */
8
+ --wd-surface-page: #0A0A0A;
9
+ --wd-surface-card: var(--wd-gray-900);
10
+ --wd-surface-overlay: var(--wd-gray-800);
11
+ --wd-surface-sunken: #050505;
12
+ --wd-surface-raised: var(--wd-gray-800);
13
+ --wd-surface-sidebar: var(--wd-gray-950);
14
+
15
+ /* ─── Text ─── */
16
+ --wd-text-primary: var(--wd-gray-50);
17
+ --wd-text-secondary: var(--wd-gray-400);
18
+ --wd-text-tertiary: var(--wd-gray-500);
19
+ --wd-text-disabled: var(--wd-gray-700);
20
+ --wd-text-inverse: var(--wd-gray-900);
21
+ --wd-text-on-brand: #FFFFFF;
22
+
23
+ /* ─── Brand ─── */
24
+ --wd-brand: var(--wd-brand-400);
25
+ --wd-brand-hover: var(--wd-brand-300);
26
+ --wd-brand-active: var(--wd-brand-200);
27
+ --wd-brand-subtle: rgba(99, 102, 241, 0.12);
28
+ --wd-brand-muted: rgba(99, 102, 241, 0.20);
29
+ --wd-brand-border: rgba(99, 102, 241, 0.30);
30
+
31
+ /* ─── Border ─── */
32
+ --wd-border: var(--wd-gray-800);
33
+ --wd-border-strong: var(--wd-gray-700);
34
+ --wd-border-focus: var(--wd-brand-400);
35
+
36
+ /* ─── Interactive ─── */
37
+ --wd-interactive-bg: var(--wd-gray-900);
38
+ --wd-interactive-hover: var(--wd-gray-800);
39
+ --wd-interactive-active: var(--wd-gray-700);
40
+ --wd-interactive-selected: rgba(99, 102, 241, 0.15);
41
+ --wd-interactive-selected-border: rgba(99, 102, 241, 0.40);
42
+
43
+ /* ─── Button — Primary ─── */
44
+ --wd-btn-primary-bg: var(--wd-brand-500);
45
+ --wd-btn-primary-bg-hover: var(--wd-brand-400);
46
+ --wd-btn-primary-bg-active: var(--wd-brand-300);
47
+ --wd-btn-primary-text: #FFFFFF;
48
+ --wd-btn-primary-border: var(--wd-brand-500);
49
+
50
+ /* ─── Button — Secondary ─── */
51
+ --wd-btn-secondary-bg: var(--wd-gray-800);
52
+ --wd-btn-secondary-bg-hover: var(--wd-gray-700);
53
+ --wd-btn-secondary-bg-active: var(--wd-gray-600);
54
+ --wd-btn-secondary-text: var(--wd-gray-200);
55
+ --wd-btn-secondary-border: var(--wd-gray-700);
56
+
57
+ /* ─── Button — Ghost ─── */
58
+ --wd-btn-ghost-bg: transparent;
59
+ --wd-btn-ghost-bg-hover: var(--wd-gray-800);
60
+ --wd-btn-ghost-text: var(--wd-gray-300);
61
+
62
+ /* ─── Input ─── */
63
+ --wd-input-bg: var(--wd-gray-900);
64
+ --wd-input-bg-hover: var(--wd-gray-800);
65
+ --wd-input-bg-focus: var(--wd-gray-900);
66
+ --wd-input-bg-disabled: var(--wd-gray-950);
67
+ --wd-input-text: var(--wd-gray-100);
68
+ --wd-input-placeholder: var(--wd-gray-600);
69
+ --wd-input-border: var(--wd-gray-700);
70
+ --wd-input-border-focus: var(--wd-brand-400);
71
+ --wd-input-border-error: #F87171;
72
+
73
+ /* ─── Status ─── */
74
+ --wd-status-success: #4ADE80;
75
+ --wd-status-success-bg: rgba(22, 163, 74, 0.15);
76
+ --wd-status-warning: #FCD34D;
77
+ --wd-status-warning-bg: rgba(217, 119, 6, 0.15);
78
+ --wd-status-error: #F87171;
79
+ --wd-status-error-bg: rgba(220, 38, 38, 0.15);
80
+ --wd-status-info: #60A5FA;
81
+ --wd-status-info-bg: rgba(37, 99, 235, 0.15);
82
+
83
+ /* ─── Shadows ─── */
84
+ --wd-shadow-card: 0 1px 3px rgba(0,0,0,0.5);
85
+ --wd-shadow-dropdown: 0 10px 15px rgba(0,0,0,0.6);
86
+ --wd-shadow-modal: 0 20px 40px rgba(0,0,0,0.7);
87
+ }
package/dist/tokens/semantic-light.css ADDED
@@ -0,0 +1,116 @@
1
+ /**
2
+ * @webdevarif/dashui — Semantic Tokens, Light Mode (Layer 2)
3
+ * Apply via: <html data-dashui-theme="light"> (default)
4
+ * Components use these variables, never primitives directly.
5
+ */
6
+ :root,
7
+ [data-dashui-theme="light"] {
8
+
9
+ /* ─── Surfaces ─── */
10
+ --wd-surface-page: var(--wd-gray-50);
11
+ --wd-surface-card: var(--wd-gray-0);
12
+ --wd-surface-overlay: var(--wd-gray-0);
13
+ --wd-surface-sunken: var(--wd-gray-100);
14
+ --wd-surface-raised: var(--wd-gray-0);
15
+ --wd-surface-sidebar: var(--wd-gray-0);
16
+
17
+ /* ─── Text ─── */
18
+ --wd-text-primary: var(--wd-gray-900);
19
+ --wd-text-secondary: var(--wd-gray-600);
20
+ --wd-text-tertiary: var(--wd-gray-400);
21
+ --wd-text-disabled: var(--wd-gray-300);
22
+ --wd-text-inverse: var(--wd-gray-0);
23
+ --wd-text-on-brand: #FFFFFF;
24
+
25
+ /* ─── Brand ─── */
26
+ --wd-brand: var(--wd-brand-500);
27
+ --wd-brand-hover: var(--wd-brand-600);
28
+ --wd-brand-active: var(--wd-brand-700);
29
+ --wd-brand-subtle: var(--wd-brand-50);
30
+ --wd-brand-muted: var(--wd-brand-100);
31
+ --wd-brand-border: var(--wd-brand-200);
32
+
33
+ /* ─── Border ─── */
34
+ --wd-border: var(--wd-gray-200);
35
+ --wd-border-strong: var(--wd-gray-300);
36
+ --wd-border-focus: var(--wd-brand-500);
37
+
38
+ /* ─── Interactive ─── */
39
+ --wd-interactive-bg: var(--wd-gray-0);
40
+ --wd-interactive-hover: var(--wd-gray-50);
41
+ --wd-interactive-active: var(--wd-gray-100);
42
+ --wd-interactive-selected: var(--wd-brand-50);
43
+ --wd-interactive-selected-border: var(--wd-brand-200);
44
+
45
+ /* ─── Button — Primary ─── */
46
+ --wd-btn-primary-bg: var(--wd-brand-500);
47
+ --wd-btn-primary-bg-hover: var(--wd-brand-600);
48
+ --wd-btn-primary-bg-active: var(--wd-brand-700);
49
+ --wd-btn-primary-text: #FFFFFF;
50
+ --wd-btn-primary-border: var(--wd-brand-500);
51
+
52
+ /* ─── Button — Secondary ─── */
53
+ --wd-btn-secondary-bg: var(--wd-gray-0);
54
+ --wd-btn-secondary-bg-hover: var(--wd-gray-50);
55
+ --wd-btn-secondary-bg-active: var(--wd-gray-100);
56
+ --wd-btn-secondary-text: var(--wd-gray-700);
57
+ --wd-btn-secondary-border: var(--wd-gray-300);
58
+
59
+ /* ─── Button — Destructive ─── */
60
+ --wd-btn-danger-bg: var(--wd-red-500);
61
+ --wd-btn-danger-bg-hover: #B91C1C;
62
+ --wd-btn-danger-text: #FFFFFF;
63
+ --wd-btn-danger-border: var(--wd-red-500);
64
+
65
+ /* ─── Button — Ghost ─── */
66
+ --wd-btn-ghost-bg: transparent;
67
+ --wd-btn-ghost-bg-hover: var(--wd-gray-100);
68
+ --wd-btn-ghost-text: var(--wd-gray-700);
69
+
70
+ /* ─── Input ─── */
71
+ --wd-input-bg: var(--wd-gray-0);
72
+ --wd-input-bg-hover: var(--wd-gray-50);
73
+ --wd-input-bg-focus: var(--wd-gray-0);
74
+ --wd-input-bg-disabled: var(--wd-gray-100);
75
+ --wd-input-text: var(--wd-gray-900);
76
+ --wd-input-placeholder: var(--wd-gray-400);
77
+ --wd-input-border: var(--wd-gray-300);
78
+ --wd-input-border-focus: var(--wd-brand-500);
79
+ --wd-input-border-error: var(--wd-red-500);
80
+
81
+ /* ─── Status ─── */
82
+ --wd-status-success: var(--wd-green-500);
83
+ --wd-status-success-bg: var(--wd-green-50);
84
+ --wd-status-warning: var(--wd-yellow-500);
85
+ --wd-status-warning-bg: var(--wd-yellow-50);
86
+ --wd-status-error: var(--wd-red-500);
87
+ --wd-status-error-bg: var(--wd-red-50);
88
+ --wd-status-info: var(--wd-blue-500);
89
+ --wd-status-info-bg: var(--wd-blue-50);
90
+
91
+ /* ─── Shadows ─── */
92
+ --wd-shadow-card: var(--wd-shadow-sm);
93
+ --wd-shadow-dropdown: var(--wd-shadow-lg);
94
+ --wd-shadow-modal: var(--wd-shadow-xl);
95
+
96
+ /* ─── Radius (semantic) ─── */
97
+ --wd-radius-btn: var(--wd-radius-md);
98
+ --wd-radius-input: var(--wd-radius-md);
99
+ --wd-radius-card: var(--wd-radius-lg);
100
+ --wd-radius-badge: var(--wd-radius-full);
101
+ --wd-radius-dialog: var(--wd-radius-xl);
102
+
103
+ /* ─── Spacing (semantic) ─── */
104
+ --wd-spacing-component-xs: var(--wd-space-2);
105
+ --wd-spacing-component-sm: var(--wd-space-3);
106
+ --wd-spacing-component-md: var(--wd-space-4);
107
+ --wd-spacing-component-lg: var(--wd-space-6);
108
+ --wd-spacing-layout-sm: var(--wd-space-6);
109
+ --wd-spacing-layout-md: var(--wd-space-8);
110
+ --wd-spacing-layout-lg: var(--wd-space-12);
111
+
112
+ /* ─── Sidebar ─── */
113
+ --wd-sidebar-width: 240px;
114
+ --wd-sidebar-collapsed-width: 64px;
115
+ --wd-topbar-height: 60px;
116
+ }