@webdevarif/dashui 1.2.6 → 1.2.7

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 (18) hide show
  1. package/dist/index.js +95 -3
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +84 -0
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/setup.js +130 -0
  6. package/dist/setup.js.map +1 -0
  7. package/dist/setup.mjs +86 -0
  8. package/dist/setup.mjs.map +1 -0
  9. package/dist/styles/animations.css +13 -0
  10. package/dist/styles/globals.css +437 -0
  11. package/dist/tokens/index.css +11 -0
  12. package/dist/tokens/primitives.css +92 -0
  13. package/dist/tokens/semantic-dark.css +87 -0
  14. package/dist/tokens/semantic-light.css +116 -0
  15. package/dist/tokens/storefront-schemes.css +96 -0
  16. package/package.json +8 -3
  17. package/dist/index.d.mts +0 -836
  18. package/dist/index.d.ts +0 -836
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
+ }
package/dist/tokens/storefront-schemes.css ADDED
@@ -0,0 +1,96 @@
1
+ /**
2
+ * @webdevarif/dashui — Storefront Color Schemes (Layer 3)
3
+ * For customer website sections/blocks.
4
+ * Each section gets class="color-scheme-N"
5
+ * Store brand color overrides --wd-scheme-brand via JS/API.
6
+ */
7
+
8
+ /* Scheme 1 — Light (default) */
9
+ :root,
10
+ .color-scheme-1 {
11
+ --wd-scheme-bg: #FFFFFF;
12
+ --wd-scheme-bg-rgb: 255 255 255;
13
+ --wd-scheme-surface: #F9FAFB;
14
+ --wd-scheme-text: #111827;
15
+ --wd-scheme-text-rgb: 17 24 39;
16
+ --wd-scheme-muted: #6B7280;
17
+ --wd-scheme-heading: #030712;
18
+ --wd-scheme-border: #E5E7EB;
19
+ --wd-scheme-shadow: rgba(0,0,0,0.1);
20
+
21
+ /* Brand — injected by store theme API */
22
+ --wd-scheme-brand: #6366F1;
23
+ --wd-scheme-brand-hover: #4F46E5;
24
+ --wd-scheme-brand-text: #FFFFFF;
25
+
26
+ /* Buttons */
27
+ --wd-scheme-btn-primary-bg: var(--wd-scheme-brand);
28
+ --wd-scheme-btn-primary-bg-hover: var(--wd-scheme-brand-hover);
29
+ --wd-scheme-btn-primary-text: var(--wd-scheme-brand-text);
30
+ --wd-scheme-btn-primary-border: var(--wd-scheme-brand);
31
+
32
+ --wd-scheme-btn-secondary-bg: transparent;
33
+ --wd-scheme-btn-secondary-bg-hover: #F9FAFB;
34
+ --wd-scheme-btn-secondary-text: #111827;
35
+ --wd-scheme-btn-secondary-border: #111827;
36
+
37
+ /* Input */
38
+ --wd-scheme-input-bg: #FFFFFF;
39
+ --wd-scheme-input-text: #111827;
40
+ --wd-scheme-input-border: #D1D5DB;
41
+ }
42
+
43
+ /* Scheme 2 — Dark */
44
+ .color-scheme-2 {
45
+ --wd-scheme-bg: #0A0A0A;
46
+ --wd-scheme-bg-rgb: 10 10 10;
47
+ --wd-scheme-surface: #141414;
48
+ --wd-scheme-text: #F9FAFB;
49
+ --wd-scheme-text-rgb: 249 250 251;
50
+ --wd-scheme-muted: #9CA3AF;
51
+ --wd-scheme-heading: #FFFFFF;
52
+ --wd-scheme-border: #262626;
53
+ --wd-scheme-shadow: rgba(0,0,0,0.5);
54
+
55
+ --wd-scheme-btn-secondary-bg: transparent;
56
+ --wd-scheme-btn-secondary-bg-hover: rgba(255,255,255,0.08);
57
+ --wd-scheme-btn-secondary-text: #F9FAFB;
58
+ --wd-scheme-btn-secondary-border: rgba(255,255,255,0.3);
59
+
60
+ --wd-scheme-input-bg: #1A1A1A;
61
+ --wd-scheme-input-text: #F9FAFB;
62
+ --wd-scheme-input-border: #333333;
63
+ }
64
+
65
+ /* Scheme 3 — Brand/Accent Fill */
66
+ .color-scheme-3 {
67
+ --wd-scheme-bg: var(--wd-scheme-brand);
68
+ --wd-scheme-surface: var(--wd-scheme-brand-hover);
69
+ --wd-scheme-text: rgba(255,255,255,0.95);
70
+ --wd-scheme-muted: rgba(255,255,255,0.70);
71
+ --wd-scheme-heading: #FFFFFF;
72
+ --wd-scheme-border: rgba(255,255,255,0.20);
73
+
74
+ --wd-scheme-btn-primary-bg: #FFFFFF;
75
+ --wd-scheme-btn-primary-bg-hover: #F0F0F0;
76
+ --wd-scheme-btn-primary-text: var(--wd-scheme-brand);
77
+ --wd-scheme-btn-primary-border: #FFFFFF;
78
+
79
+ --wd-scheme-btn-secondary-bg: transparent;
80
+ --wd-scheme-btn-secondary-bg-hover: rgba(255,255,255,0.15);
81
+ --wd-scheme-btn-secondary-text: #FFFFFF;
82
+ --wd-scheme-btn-secondary-border: rgba(255,255,255,0.5);
83
+ }
84
+
85
+ /* Scheme 4 — Soft/Tinted */
86
+ .color-scheme-4 {
87
+ --wd-scheme-bg: #F5F3FF;
88
+ --wd-scheme-surface: #EDE9FE;
89
+ --wd-scheme-text: #1E1B4B;
90
+ --wd-scheme-muted: #6D28D9;
91
+ --wd-scheme-heading: #0F0D2E;
92
+ --wd-scheme-border: #DDD6FE;
93
+ }
94
+
95
+ /* Scheme 5–16: Reserved for user-defined schemes */
96
+ /* Generated dynamically via API: GET /api/theme/{storeId}/styles.css */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
- {
1
+ {
2
2
  "name": "@webdevarif/dashui",
3
- "version": "1.2.6",
4
- "description": "Universal dashboard UI component library — forms, inputs, media, tables, layouts. Modular categories: primitives, forms, dashboard, media, data, editors, ecommerce, cms.",
3
+ "version": "1.2.7",
4
+ "description": "Universal dashboard UI component library — forms, inputs, media, tables, layouts. Modular categories: primitives, forms, dashboard, media, data, editors, ecommerce, cms.",
5
5
  "keywords": [
6
6
  "dashboard",
7
7
  "ui",
@@ -27,6 +27,10 @@
27
27
  "require": "./dist/index.js"
28
28
  },
29
29
  "./styles": "./dist/styles/globals.css",
30
+ "./setup": {
31
+ "import": "./dist/setup.mjs",
32
+ "require": "./dist/setup.js"
33
+ },
30
34
  "./tokens/primitives": "./dist/tokens/primitives.css",
31
35
  "./tokens/light": "./dist/tokens/semantic-light.css",
32
36
  "./tokens/dark": "./dist/tokens/semantic-dark.css",
@@ -87,3 +91,4 @@
87
91
  "access": "public"
88
92
  }
89
93
  }
94
+