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