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