@webdevarif/dashui 0.1.0 → 0.1.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 (13) hide show
  1. package/dist/index.d.mts +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +9 -2
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +6 -1
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles/globals.css +402 -0
  8. package/dist/tokens/index.css +11 -0
  9. package/dist/tokens/primitives.css +92 -0
  10. package/dist/tokens/semantic-dark.css +87 -0
  11. package/dist/tokens/semantic-light.css +116 -0
  12. package/dist/tokens/storefront-schemes.css +96 -0
  13. package/package.json +24 -6
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,8 +1,15 @@
1
1
  {
2
2
  "name": "@webdevarif/dashui",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "Universal dashboard UI component library with design token system — by webdevarif",
5
- "keywords": ["dashboard", "ui", "components", "design-system", "react", "tailwind"],
5
+ "keywords": [
6
+ "dashboard",
7
+ "ui",
8
+ "components",
9
+ "design-system",
10
+ "react",
11
+ "tailwind"
12
+ ],
6
13
  "author": "webdevarif",
7
14
  "license": "MIT",
8
15
  "homepage": "https://dashui.webdevarif.com",
@@ -20,20 +27,29 @@
20
27
  "require": "./dist/index.js"
21
28
  },
22
29
  "./styles": "./dist/styles/globals.css",
23
- "./tokens": "./dist/styles/tokens.css"
30
+ "./tokens/primitives": "./dist/tokens/primitives.css",
31
+ "./tokens/light": "./dist/tokens/semantic-light.css",
32
+ "./tokens/dark": "./dist/tokens/semantic-dark.css",
33
+ "./tokens/schemes": "./dist/tokens/storefront-schemes.css"
24
34
  },
25
- "files": ["dist", "README.md"],
35
+ "files": [
36
+ "dist",
37
+ "README.md"
38
+ ],
26
39
  "scripts": {
27
- "build": "tsup",
40
+ "build": "tsup && cpx \"src/styles/**/*.css\" dist/styles && cpx \"src/tokens/**/*.css\" dist/tokens",
28
41
  "dev": "tsup --watch",
29
42
  "lint": "eslint src --ext .ts,.tsx",
30
43
  "typecheck": "tsc --noEmit"
31
44
  },
45
+
32
46
  "peerDependencies": {
33
47
  "react": ">=18",
34
- "react-dom": ">=18"
48
+ "react-dom": ">=18",
49
+ "next": ">=14"
35
50
  },
36
51
  "dependencies": {
52
+ "next-themes": "^0.4.6",
37
53
  "@radix-ui/react-checkbox": "^1.1.3",
38
54
  "@radix-ui/react-dialog": "^1.1.4",
39
55
  "@radix-ui/react-dropdown-menu": "^2.1.4",
@@ -48,12 +64,14 @@
48
64
  "class-variance-authority": "^0.7.1",
49
65
  "clsx": "^2.1.1",
50
66
  "lucide-react": "^0.469.0",
67
+ "next-themes": "^0.4.6",
51
68
  "sonner": "^1.7.1",
52
69
  "tailwind-merge": "^2.6.0"
53
70
  },
54
71
  "devDependencies": {
55
72
  "@types/react": "^18",
56
73
  "@types/react-dom": "^18",
74
+ "cpx2": "^8.0.0",
57
75
  "tailwindcss": "^3.4.17",
58
76
  "tsup": "^8.3.5",
59
77
  "typescript": "^5"