@svadmin/create 0.4.1 → 0.5.13

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 (3) hide show
  1. package/package.json +1 -1
  2. package/template/index.html +2 -3
  3. package/template/src/app.css +81 -158
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@svadmin/create",
3
- "version": "0.4.1",
3
+ "version": "0.5.13",
4
4
  "description": "Scaffolding tool for svadmin projects",
5
5
  "type": "module",
6
6
  "bin": {
package/template/index.html CHANGED
@@ -4,9 +4,8 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Admin Demo — svadmin</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
7
+ <link rel="preconnect" href="https://fonts.bunny.net">
8
+ <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap" rel="stylesheet">
10
9
  </head>
11
10
  <body>
12
11
  <div id="app"></div>
package/template/src/app.css CHANGED
@@ -1,46 +1,16 @@
1
1
  @import "tailwindcss";
2
2
  @import "tw-animate-css";
3
3
 
4
+ /* Base New York styles & mappings from UI package */
5
+ @import "@svadmin/ui/app.css";
6
+
4
7
  /* Scan workspace-linked packages — Tailwind v4 skips node_modules by default */
5
8
  @source "../node_modules/@svadmin/ui";
6
9
  @source "../node_modules/@svadmin/core";
7
10
 
8
11
  @custom-variant dark (&:is(.dark *));
9
12
 
10
- /* ── Tailwind theme bridge (semantic tokens → CSS variables) ── */
11
- @theme inline {
12
- --color-background: hsl(var(--background));
13
- --color-foreground: hsl(var(--foreground));
14
- --color-card: hsl(var(--card));
15
- --color-card-foreground: hsl(var(--card-foreground));
16
- --color-popover: hsl(var(--popover));
17
- --color-popover-foreground: hsl(var(--popover-foreground));
18
- --color-primary: hsl(var(--primary));
19
- --color-primary-foreground: hsl(var(--primary-foreground));
20
- --color-secondary: hsl(var(--secondary));
21
- --color-secondary-foreground: hsl(var(--secondary-foreground));
22
- --color-muted: hsl(var(--muted));
23
- --color-muted-foreground: hsl(var(--muted-foreground));
24
- --color-accent: hsl(var(--accent));
25
- --color-accent-foreground: hsl(var(--accent-foreground));
26
- --color-destructive: hsl(var(--destructive));
27
- --color-destructive-foreground: hsl(var(--destructive-foreground));
28
- --color-border: hsl(var(--border));
29
- --color-input: hsl(var(--input));
30
- --color-ring: hsl(var(--ring));
31
- --color-sidebar: hsl(var(--sidebar));
32
- --color-sidebar-foreground: hsl(var(--sidebar-foreground));
33
- --color-sidebar-primary: hsl(var(--sidebar-primary));
34
- --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
35
- --color-sidebar-accent: hsl(var(--sidebar-accent));
36
- --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
37
- --color-sidebar-border: hsl(var(--sidebar-border));
38
- --color-sidebar-ring: hsl(var(--sidebar-ring));
39
- --radius-sm: calc(var(--radius) - 4px);
40
- --radius-md: calc(var(--radius) - 2px);
41
- --radius-lg: var(--radius);
42
- --radius-xl: calc(var(--radius) + 4px);
43
- }
13
+
44
14
 
45
15
  /* ╔═══════════════════════════════════════════════════════════╗
46
16
  ║ COLOR THEME PRESETS ║
@@ -49,170 +19,123 @@
49
19
  ║ Neutral colors (bg, card, muted, border) are shared. ║
50
20
  ╚═══════════════════════════════════════════════════════════╝ */
51
21
 
52
- /* ── Shared light base ────────────────────────────────────── */
53
- :root {
54
- --radius: 0.75rem;
55
- --background: 0 0% 100%;
56
- --foreground: 222.2 84% 4.9%;
57
- --card: 0 0% 100%;
58
- --card-foreground: 222.2 84% 4.9%;
59
- --popover: 0 0% 100%;
60
- --popover-foreground: 222.2 84% 4.9%;
61
- --secondary: 210 40% 96.1%;
62
- --secondary-foreground: 222.2 47.4% 11.2%;
63
- --muted: 210 40% 96.1%;
64
- --muted-foreground: 215.4 16.3% 46.9%;
65
- --accent: 210 40% 96.1%;
66
- --accent-foreground: 222.2 47.4% 11.2%;
67
- --destructive: 0 84.2% 60.2%;
68
- --destructive-foreground: 210 40% 98%;
69
- --border: 214.3 31.8% 91.4%;
70
- --input: 214.3 31.8% 91.4%;
71
- --sidebar: 0 0% 98%;
72
- --sidebar-foreground: 222.2 84% 4.9%;
73
- --sidebar-accent: 210 40% 96.1%;
74
- --sidebar-accent-foreground: 222.2 47.4% 11.2%;
75
- --sidebar-border: 214.3 31.8% 91.4%;
76
- }
77
22
 
78
- /* ── Shared dark base ─────────────────────────────────────── */
79
- .dark {
80
- --background: 222.2 84% 4.9%;
81
- --foreground: 210 40% 98%;
82
- --card: 222.2 84% 4.9%;
83
- --card-foreground: 210 40% 98%;
84
- --popover: 222.2 84% 4.9%;
85
- --popover-foreground: 210 40% 98%;
86
- --secondary: 217.2 32.6% 17.5%;
87
- --secondary-foreground: 210 40% 98%;
88
- --muted: 217.2 32.6% 17.5%;
89
- --muted-foreground: 215 20.2% 65.1%;
90
- --accent: 217.2 32.6% 17.5%;
91
- --accent-foreground: 210 40% 98%;
92
- --destructive: 0 62.8% 30.6%;
93
- --destructive-foreground: 210 40% 98%;
94
- --border: 217.2 32.6% 17.5%;
95
- --input: 217.2 32.6% 17.5%;
96
- --sidebar: 222.2 84% 4.9%;
97
- --sidebar-foreground: 210 40% 98%;
98
- --sidebar-accent: 217.2 32.6% 17.5%;
99
- --sidebar-accent-foreground: 210 40% 98%;
100
- --sidebar-border: 217.2 32.6% 17.5%;
101
- }
23
+
24
+
102
25
 
103
26
  /* ── 🔵 Blue (default) ────────────────────────────────────── */
104
27
  :root,
105
28
  [data-theme="blue"] {
106
- --primary: 221.2 83.2% 53.3%;
107
- --primary-foreground: 210 40% 98%;
108
- --ring: 221.2 83.2% 53.3%;
109
- --sidebar-primary: 221.2 83.2% 53.3%;
110
- --sidebar-primary-foreground: 210 40% 98%;
111
- --sidebar-ring: 221.2 83.2% 53.3%;
29
+ --primary: hsl(221.2 83.2% 53.3%);
30
+ --primary-foreground: hsl(210 40% 98%);
31
+ --ring: hsl(221.2 83.2% 53.3%);
32
+ --sidebar-primary: hsl(221.2 83.2% 53.3%);
33
+ --sidebar-primary-foreground: hsl(210 40% 98%);
34
+ --sidebar-ring: hsl(221.2 83.2% 53.3%);
112
35
  }
113
36
  .dark[data-theme="blue"],
114
37
  [data-theme="blue"] .dark {
115
- --primary: 217.2 91.2% 59.8%;
116
- --primary-foreground: 222.2 47.4% 11.2%;
117
- --ring: 224.3 76.3% 48%;
118
- --sidebar-primary: 217.2 91.2% 59.8%;
119
- --sidebar-primary-foreground: 222.2 47.4% 11.2%;
120
- --sidebar-ring: 224.3 76.3% 48%;
38
+ --primary: hsl(217.2 91.2% 59.8%);
39
+ --primary-foreground: hsl(222.2 47.4% 11.2%);
40
+ --ring: hsl(224.3 76.3% 48%);
41
+ --sidebar-primary: hsl(217.2 91.2% 59.8%);
42
+ --sidebar-primary-foreground: hsl(222.2 47.4% 11.2%);
43
+ --sidebar-ring: hsl(224.3 76.3% 48%);
121
44
  }
122
45
 
123
46
  /* ── 🟢 Green ─────────────────────────────────────────────── */
124
47
  [data-theme="green"] {
125
- --primary: 142.1 76.2% 36.3%;
126
- --primary-foreground: 355.7 100% 97.3%;
127
- --ring: 142.1 76.2% 36.3%;
128
- --sidebar-primary: 142.1 76.2% 36.3%;
129
- --sidebar-primary-foreground: 355.7 100% 97.3%;
130
- --sidebar-ring: 142.1 76.2% 36.3%;
48
+ --primary: hsl(142.1 76.2% 36.3%);
49
+ --primary-foreground: hsl(355.7 100% 97.3%);
50
+ --ring: hsl(142.1 76.2% 36.3%);
51
+ --sidebar-primary: hsl(142.1 76.2% 36.3%);
52
+ --sidebar-primary-foreground: hsl(355.7 100% 97.3%);
53
+ --sidebar-ring: hsl(142.1 76.2% 36.3%);
131
54
  }
132
55
  [data-theme="green"] .dark,
133
56
  .dark[data-theme="green"] {
134
- --primary: 142.1 70.6% 45.3%;
135
- --primary-foreground: 144.9 80.4% 10%;
136
- --ring: 142.4 71.8% 29.2%;
137
- --sidebar-primary: 142.1 70.6% 45.3%;
138
- --sidebar-primary-foreground: 144.9 80.4% 10%;
139
- --sidebar-ring: 142.4 71.8% 29.2%;
57
+ --primary: hsl(142.1 70.6% 45.3%);
58
+ --primary-foreground: hsl(144.9 80.4% 10%);
59
+ --ring: hsl(142.4 71.8% 29.2%);
60
+ --sidebar-primary: hsl(142.1 70.6% 45.3%);
61
+ --sidebar-primary-foreground: hsl(144.9 80.4% 10%);
62
+ --sidebar-ring: hsl(142.4 71.8% 29.2%);
140
63
  }
141
64
 
142
65
  /* ── 🌹 Rose ──────────────────────────────────────────────── */
143
66
  [data-theme="rose"] {
144
- --primary: 346.8 77.2% 49.8%;
145
- --primary-foreground: 355.7 100% 97.3%;
146
- --ring: 346.8 77.2% 49.8%;
147
- --sidebar-primary: 346.8 77.2% 49.8%;
148
- --sidebar-primary-foreground: 355.7 100% 97.3%;
149
- --sidebar-ring: 346.8 77.2% 49.8%;
67
+ --primary: hsl(346.8 77.2% 49.8%);
68
+ --primary-foreground: hsl(355.7 100% 97.3%);
69
+ --ring: hsl(346.8 77.2% 49.8%);
70
+ --sidebar-primary: hsl(346.8 77.2% 49.8%);
71
+ --sidebar-primary-foreground: hsl(355.7 100% 97.3%);
72
+ --sidebar-ring: hsl(346.8 77.2% 49.8%);
150
73
  }
151
74
  [data-theme="rose"] .dark,
152
75
  .dark[data-theme="rose"] {
153
- --primary: 346.8 77.2% 49.8%;
154
- --primary-foreground: 355.7 100% 97.3%;
155
- --ring: 346.8 77.2% 49.8%;
156
- --sidebar-primary: 346.8 77.2% 49.8%;
157
- --sidebar-primary-foreground: 355.7 100% 97.3%;
158
- --sidebar-ring: 346.8 77.2% 49.8%;
76
+ --primary: hsl(346.8 77.2% 49.8%);
77
+ --primary-foreground: hsl(355.7 100% 97.3%);
78
+ --ring: hsl(346.8 77.2% 49.8%);
79
+ --sidebar-primary: hsl(346.8 77.2% 49.8%);
80
+ --sidebar-primary-foreground: hsl(355.7 100% 97.3%);
81
+ --sidebar-ring: hsl(346.8 77.2% 49.8%);
159
82
  }
160
83
 
161
84
  /* ── 🟠 Orange ─────────────────────────────────────────────── */
162
85
  [data-theme="orange"] {
163
- --primary: 24.6 95% 53.1%;
164
- --primary-foreground: 60 9.1% 97.8%;
165
- --ring: 24.6 95% 53.1%;
166
- --sidebar-primary: 24.6 95% 53.1%;
167
- --sidebar-primary-foreground: 60 9.1% 97.8%;
168
- --sidebar-ring: 24.6 95% 53.1%;
86
+ --primary: hsl(24.6 95% 53.1%);
87
+ --primary-foreground: hsl(60 9.1% 97.8%);
88
+ --ring: hsl(24.6 95% 53.1%);
89
+ --sidebar-primary: hsl(24.6 95% 53.1%);
90
+ --sidebar-primary-foreground: hsl(60 9.1% 97.8%);
91
+ --sidebar-ring: hsl(24.6 95% 53.1%);
169
92
  }
170
93
  [data-theme="orange"] .dark,
171
94
  .dark[data-theme="orange"] {
172
- --primary: 20.5 90.2% 48.2%;
173
- --primary-foreground: 60 9.1% 97.8%;
174
- --ring: 20.5 90.2% 48.2%;
175
- --sidebar-primary: 20.5 90.2% 48.2%;
176
- --sidebar-primary-foreground: 60 9.1% 97.8%;
177
- --sidebar-ring: 20.5 90.2% 48.2%;
95
+ --primary: hsl(20.5 90.2% 48.2%);
96
+ --primary-foreground: hsl(60 9.1% 97.8%);
97
+ --ring: hsl(20.5 90.2% 48.2%);
98
+ --sidebar-primary: hsl(20.5 90.2% 48.2%);
99
+ --sidebar-primary-foreground: hsl(60 9.1% 97.8%);
100
+ --sidebar-ring: hsl(20.5 90.2% 48.2%);
178
101
  }
179
102
 
180
103
  /* ── 💜 Violet ─────────────────────────────────────────────── */
181
104
  [data-theme="violet"] {
182
- --primary: 262.1 83.3% 57.8%;
183
- --primary-foreground: 210 40% 98%;
184
- --ring: 262.1 83.3% 57.8%;
185
- --sidebar-primary: 262.1 83.3% 57.8%;
186
- --sidebar-primary-foreground: 210 40% 98%;
187
- --sidebar-ring: 262.1 83.3% 57.8%;
105
+ --primary: hsl(262.1 83.3% 57.8%);
106
+ --primary-foreground: hsl(210 40% 98%);
107
+ --ring: hsl(262.1 83.3% 57.8%);
108
+ --sidebar-primary: hsl(262.1 83.3% 57.8%);
109
+ --sidebar-primary-foreground: hsl(210 40% 98%);
110
+ --sidebar-ring: hsl(262.1 83.3% 57.8%);
188
111
  }
189
112
  [data-theme="violet"] .dark,
190
113
  .dark[data-theme="violet"] {
191
- --primary: 263.4 70% 50.4%;
192
- --primary-foreground: 210 40% 98%;
193
- --ring: 263.4 70% 50.4%;
194
- --sidebar-primary: 263.4 70% 50.4%;
195
- --sidebar-primary-foreground: 210 40% 98%;
196
- --sidebar-ring: 263.4 70% 50.4%;
114
+ --primary: hsl(263.4 70% 50.4%);
115
+ --primary-foreground: hsl(210 40% 98%);
116
+ --ring: hsl(263.4 70% 50.4%);
117
+ --sidebar-primary: hsl(263.4 70% 50.4%);
118
+ --sidebar-primary-foreground: hsl(210 40% 98%);
119
+ --sidebar-ring: hsl(263.4 70% 50.4%);
197
120
  }
198
121
 
199
122
  /* ── ⚫ Zinc (neutral) ─────────────────────────────────────── */
200
123
  [data-theme="zinc"] {
201
- --primary: 240 5.9% 10%;
202
- --primary-foreground: 0 0% 98%;
203
- --ring: 240 5.9% 10%;
204
- --sidebar-primary: 240 5.9% 10%;
205
- --sidebar-primary-foreground: 0 0% 98%;
206
- --sidebar-ring: 240 5.9% 10%;
124
+ --primary: hsl(240 5.9% 10%);
125
+ --primary-foreground: hsl(0 0% 98%);
126
+ --ring: hsl(240 5.9% 10%);
127
+ --sidebar-primary: hsl(240 5.9% 10%);
128
+ --sidebar-primary-foreground: hsl(0 0% 98%);
129
+ --sidebar-ring: hsl(240 5.9% 10%);
207
130
  }
208
131
  [data-theme="zinc"] .dark,
209
132
  .dark[data-theme="zinc"] {
210
- --primary: 0 0% 98%;
211
- --primary-foreground: 240 5.9% 10%;
212
- --ring: 240 4.9% 83.9%;
213
- --sidebar-primary: 0 0% 98%;
214
- --sidebar-primary-foreground: 240 5.9% 10%;
215
- --sidebar-ring: 240 4.9% 83.9%;
133
+ --primary: hsl(0 0% 98%);
134
+ --primary-foreground: hsl(240 5.9% 10%);
135
+ --ring: hsl(240 4.9% 83.9%);
136
+ --sidebar-primary: hsl(0 0% 98%);
137
+ --sidebar-primary-foreground: hsl(240 5.9% 10%);
138
+ --sidebar-ring: hsl(240 4.9% 83.9%);
216
139
  }
217
140
 
218
141
  /* ╔═══════════════════════════════════════════════════════════╗
@@ -221,11 +144,11 @@
221
144
 
222
145
  @layer base {
223
146
  * {
224
- border-color: hsl(var(--border));
147
+ border-color: var(--border);
225
148
  }
226
149
  body {
227
- background-color: hsl(var(--background));
228
- color: hsl(var(--foreground));
150
+ background-color: var(--background);
151
+ color: var(--foreground);
229
152
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
230
153
  @apply antialiased min-h-screen;
231
154
  }