@svadmin/create 0.45.9 → 0.46.0
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.
|
@@ -18,7 +18,7 @@ export const designPresets = {
|
|
|
18
18
|
enterprise: {
|
|
19
19
|
label: '标准企业', width: 'wide',
|
|
20
20
|
formColumns: 2, detailLayout: 'grid',
|
|
21
|
-
theme: { colorPreset: '
|
|
21
|
+
theme: { colorPreset: 'arco', layoutPreset: 'clean-flat' },
|
|
22
22
|
},
|
|
23
23
|
collaboration: {
|
|
24
24
|
label: '轻量协作', width: 'default',
|
|
@@ -3,5 +3,5 @@ import type { ThemeConfig } from '@svadmin/core';
|
|
|
3
3
|
export const brand = $state({ name: 'Product workspace' });
|
|
4
4
|
|
|
5
5
|
export function getDesign(): { theme: ThemeConfig } {
|
|
6
|
-
return { theme: { colorPreset: '
|
|
6
|
+
return { theme: { colorPreset: 'arco', layoutPreset: 'clean-flat' } };
|
|
7
7
|
}
|
package/guidance/DESIGN.md
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
1
|
---
|
|
2
2
|
version: "alpha"
|
|
3
3
|
name: "svadmin Admin UI"
|
|
4
|
-
description: "A
|
|
4
|
+
description: "A neutral admin interface for repeated operational work, implemented with svadmin tokens and shadcn-svelte."
|
|
5
5
|
colors:
|
|
6
|
-
background: "#
|
|
7
|
-
foreground: "#
|
|
8
|
-
surface: "#
|
|
9
|
-
surface-subtle: "#
|
|
10
|
-
muted-foreground: "#
|
|
11
|
-
border: "#
|
|
12
|
-
secondary: "#
|
|
13
|
-
accent: "#
|
|
14
|
-
accent-foreground: "#
|
|
15
|
-
input: "#
|
|
16
|
-
sidebar: "#
|
|
17
|
-
sidebar-foreground: "#
|
|
18
|
-
primary: "
|
|
19
|
-
on-primary: "
|
|
20
|
-
success: "
|
|
21
|
-
warning: "
|
|
22
|
-
danger: "
|
|
6
|
+
background: "#F7F8FA"
|
|
7
|
+
foreground: "#1D2129"
|
|
8
|
+
surface: "#FFFFFF"
|
|
9
|
+
surface-subtle: "#F2F3F5"
|
|
10
|
+
muted-foreground: "#4E5969"
|
|
11
|
+
border: "#E5E6EB"
|
|
12
|
+
secondary: "#F2F3F5"
|
|
13
|
+
accent: "#E8F3FF"
|
|
14
|
+
accent-foreground: "#0E42D2"
|
|
15
|
+
input: "#E5E6EB"
|
|
16
|
+
sidebar: "#FFFFFF"
|
|
17
|
+
sidebar-foreground: "#4E5969"
|
|
18
|
+
primary: "#165DFF"
|
|
19
|
+
on-primary: "#FFFFFF"
|
|
20
|
+
success: "#00B42A"
|
|
21
|
+
warning: "#FF7D00"
|
|
22
|
+
danger: "#F53F3F"
|
|
23
23
|
typography:
|
|
24
24
|
body:
|
|
25
|
-
fontFamily: "
|
|
25
|
+
fontFamily: "\"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
|
|
26
26
|
fontSize: "0.875rem"
|
|
27
27
|
fontWeight: 400
|
|
28
|
-
lineHeight: 1.
|
|
28
|
+
lineHeight: 1.4
|
|
29
29
|
letterSpacing: "0px"
|
|
30
30
|
label:
|
|
31
|
-
fontFamily: "
|
|
31
|
+
fontFamily: "\"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
|
|
32
32
|
fontSize: "0.8125rem"
|
|
33
33
|
fontWeight: 500
|
|
34
34
|
lineHeight: 1.35
|
|
35
35
|
letterSpacing: "0px"
|
|
36
36
|
heading:
|
|
37
|
-
fontFamily: "
|
|
37
|
+
fontFamily: "\"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
|
|
38
38
|
fontSize: "1.25rem"
|
|
39
39
|
fontWeight: 600
|
|
40
40
|
lineHeight: 1.3
|
|
41
41
|
letterSpacing: "0px"
|
|
42
42
|
rounded:
|
|
43
|
-
sm: "
|
|
44
|
-
md: "
|
|
45
|
-
lg: "
|
|
43
|
+
sm: "2px"
|
|
44
|
+
md: "4px"
|
|
45
|
+
lg: "4px"
|
|
46
46
|
spacing:
|
|
47
47
|
xs: "4px"
|
|
48
48
|
sm: "8px"
|
|
@@ -97,14 +97,16 @@ components:
|
|
|
97
97
|
|
|
98
98
|
## Overview
|
|
99
99
|
|
|
100
|
-
### Visual update:
|
|
100
|
+
### Visual update: October 29, 2026
|
|
101
101
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
102
|
+
svadmin is the primary design system. The default canvas, type, radius,
|
|
103
|
+
elevation, and action color follow The published light and dark ramps:
|
|
104
|
+
page background `#F7F8FA`, ink `#1D2129`, hairline `#E5E6EB`, and a single
|
|
105
|
+
primary action color `#165DFF`. The same page patterns cover list,
|
|
106
|
+
grouped form, detail, and result pages. shadcn-svelte remains the component
|
|
107
|
+
implementation. This supersedes the Stripe-inspired default below.
|
|
107
108
|
Keep SVAdmin's own branding, semantic tokens, OpenUI contracts and Bits UI behavior.
|
|
109
|
+
Do not install a second component runtime or a second component runtime.
|
|
108
110
|
App chrome must use explicit anatomy hooks; never style every business `header`.
|
|
109
111
|
Package utilities live in sublayers of `utilities`, so host-authored responsive
|
|
110
112
|
utilities win regardless of lazy package stylesheet load order.
|
|
@@ -135,26 +137,65 @@ not become a mixed visual theme:
|
|
|
135
137
|
|
|
136
138
|
| Reference | Adopted responsibility | Explicitly excluded |
|
|
137
139
|
| --- | --- | --- |
|
|
138
|
-
|
|
|
139
|
-
|
|
|
140
|
-
|
|
|
141
|
-
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
140
|
+
| svadmin | default palette, 14px type, 2px/4px radius, neutral surfaces, component behavior for table, form, descriptions, upload, and feedback | a second component runtime, theme packages, or stock illustrations |
|
|
141
|
+
| page patterns | list, grouped form, detail, and result page anatomy | another shell, a dashboard card wall, or route-meta permissions |
|
|
142
|
+
| shadcn/ui | source-owned components, semantic tokens, variants, and accessible composition | a second runtime or an unconstrained page skin |
|
|
143
|
+
| Stripe style prompt | optional `stripe` accent preset only: chip `#635bff`, painted `oklch(0.54 0.24 293)` | default canvas, default primary, technical grid, Stripe brand assets |
|
|
144
|
+
| Fuse / Midone / Skote | scenario coverage only | vendor palette, logos, fonts, CSS, copied markup or component chrome |
|
|
145
|
+
| svadmin | semantic token names, component API, state ownership, accessibility, responsive contracts | a second visual authority |
|
|
146
|
+
|
|
147
|
+
When references conflict, svadmin accessibility and state contracts win first,
|
|
148
|
+
then the default ramp and page patterns. Stripe is no longer the default visual.
|
|
149
|
+
The result is one product language rather than a collage of template styles.
|
|
150
|
+
|
|
151
|
+
## Component contract
|
|
152
|
+
|
|
153
|
+
svadmin is the component specification. shadcn-svelte
|
|
154
|
+
is the only implementation. Do not add a second component runtime. A specified component
|
|
155
|
+
is either mapped below or implemented with the same tokens. A component the specification does
|
|
156
|
+
not define still follows this contract: 32px controls, 2px control radius, 4px
|
|
157
|
+
surfaces, one primary action color, semantic status colors, labels above fields,
|
|
158
|
+
and one feedback surface per event.
|
|
159
|
+
|
|
160
|
+
| Specified component | svadmin implementation |
|
|
161
|
+
| --- | --- |
|
|
162
|
+
| Button, Input, Select, Textarea, Checkbox, Switch, Radio, Slider | shadcn primitives, 32px size and 2px focus ring |
|
|
163
|
+
| Tag, Badge | `Badge` light tag |
|
|
164
|
+
| Table, Form, Descriptions, Upload, Steps | `AutoTable`, `AutoForm`, `DescriptionList`, `FileUpload`, `StepsForm` |
|
|
165
|
+
| Link, Typography | `Link`, `Title`, `Text` |
|
|
166
|
+
| Divider | `Divider` (`Separator`) |
|
|
167
|
+
| Empty, Result, Spin, Skeleton | `EmptyState`, `Result`, `Spin`, `Skeleton` |
|
|
168
|
+
| Message, Notification, Alert, Modal, Drawer, Popconfirm | `Toast`, `FeedbackNotice`, `Dialog`, `Sheet`, `Popconfirm` |
|
|
169
|
+
| List, Tree, BackTop | `ItemList`, `Tree`, `BackTop` |
|
|
170
|
+
| Date/Time, Cascader, TreeSelect, Transfer, Mentions, Upload | existing field components |
|
|
171
|
+
|
|
172
|
+
Components outside that table, including workspace, approval, kanban,
|
|
173
|
+
gantt, audit, and resource pages, are not a second design system. They use the
|
|
174
|
+
same semantic tokens, control height, radius, status colors, and field error
|
|
175
|
+
placement. They do not introduce a new palette, a technical grid, a solid
|
|
176
|
+
default badge, or a success banner plus a success toast.
|
|
177
|
+
|
|
178
|
+
Detail rules for every component:
|
|
179
|
+
|
|
180
|
+
- Default control height is 32px. Small is 28px. Large is 36px.
|
|
181
|
+
- Controls use a 2px radius. Bounded surfaces use 4px.
|
|
182
|
+
- Focus is a 2px primary-tinted ring on the control, not on the surrounding card.
|
|
183
|
+
- Table head and row are 40px. The head uses the canvas color and secondary text.
|
|
184
|
+
- A required mark is `danger`. The error sits directly under its field.
|
|
185
|
+
- Status is never color alone. Extra components use `success`, `warning`, and
|
|
186
|
+
`danger` tokens only for status.
|
|
147
187
|
|
|
148
188
|
### Runtime integration map
|
|
149
189
|
|
|
150
190
|
The same contract is used at every delivery surface:
|
|
151
191
|
|
|
152
192
|
- `packages/ui/src/app.css` owns published semantic tokens and the
|
|
153
|
-
`clean-flat +
|
|
154
|
-
- `packages/core/src/theme.svelte.ts` owns the `
|
|
155
|
-
attributes; it must stay aligned with the CSS fallback values.
|
|
193
|
+
`clean-flat + arco` refinement; host applications consume this stylesheet.
|
|
194
|
+
- `packages/core/src/theme.svelte.ts` owns the `arco` color preset and mode
|
|
195
|
+
attributes; it must stay aligned with the CSS fallback values. `stripe`
|
|
196
|
+
remains an optional preset.
|
|
156
197
|
- `AdminApp` supplies `clean-flat` as a fallback layout without taking over an
|
|
157
|
-
explicit theme owner. Core supplies the default
|
|
198
|
+
explicit theme owner. Core supplies the default color and preserves
|
|
158
199
|
saved user selections; `layoutPreset: 'default'` remains an explicit opt-out.
|
|
159
200
|
- `example/src/App.svelte` consumes these defaults without repeating theme
|
|
160
201
|
configuration. A bare `AdminApp` renders `ResourceOverview` on its home route.
|
|
@@ -164,17 +205,16 @@ The same contract is used at every delivery surface:
|
|
|
164
205
|
- `packages/create-svadmin/template` starts new projects with the same theme
|
|
165
206
|
and guidance document, so generated apps do not drift from the example.
|
|
166
207
|
- `design/admin-ui/preview` renders the published package CSS and uses the same
|
|
167
|
-
|
|
208
|
+
default preset for component and state review.
|
|
168
209
|
- `packages/flow` resolves explicit flow overrides first, then host semantic
|
|
169
|
-
tokens, then standalone
|
|
210
|
+
tokens, then standalone fallback colors.
|
|
170
211
|
- `packages/editor`, `packages/surface`, and `packages/ai-elements` consume
|
|
171
212
|
complete CSS color tokens, not HSL channel tuples. Independent stylesheets
|
|
172
213
|
use motion-token fallbacks so they also work without the full UI package.
|
|
173
|
-
- `packages/lite` mirrors the palette with literal colors. Its legacy-browser
|
|
214
|
+
- `packages/lite` mirrors the default palette with literal colors. Its legacy-browser
|
|
174
215
|
contract deliberately excludes custom properties and modern selectors;
|
|
175
216
|
visual alignment must not remove that compatibility. Its literal accent
|
|
176
|
-
|
|
177
|
-
`@svadmin/ui`.
|
|
217
|
+
is the same `#165DFF` primary used by `@svadmin/ui`.
|
|
178
218
|
|
|
179
219
|
Theme refinements must preserve component geometry, invalid and selected states.
|
|
180
220
|
Focus belongs to the active control, not every enclosing card. Search icons and
|
|
@@ -239,38 +279,37 @@ status and feedback. Consumer themes may replace the primary hue while keeping
|
|
|
239
279
|
the neutral hierarchy and contrast relationships intact.
|
|
240
280
|
|
|
241
281
|
**The Token Source Rule.** Frontmatter neutrals are the light values of
|
|
242
|
-
`.layout-clean-flat[data-theme="
|
|
243
|
-
painted action color is `--primary:
|
|
244
|
-
`[data-theme="
|
|
282
|
+
`.layout-clean-flat[data-theme="arco"]` in `packages/ui/src/app.css`. The
|
|
283
|
+
painted action color is `--primary: #165DFF` from `:root` and
|
|
284
|
+
`[data-theme="arco"]`, matching `builtinPresets.arco.light` in
|
|
245
285
|
`packages/core/src/theme.svelte.ts`. The preset menu chip
|
|
246
|
-
`builtinPresets.
|
|
247
|
-
not a second primary, and it must not be copied onto buttons, rings, or links.
|
|
286
|
+
`builtinPresets.arco.color` is the same `#165DFF`. It is not a second primary.
|
|
248
287
|
|
|
249
|
-
Canvas neutrals in that
|
|
250
|
-
`#
|
|
251
|
-
|
|
252
|
-
`--
|
|
253
|
-
|
|
254
|
-
before the stripe layout block applies. Do not mix those fallback neutrals
|
|
255
|
-
with the stripe hex canvas.
|
|
288
|
+
Canvas neutrals in that block are `#F7F8FA`, `#1D2129`, `#FFFFFF`,
|
|
289
|
+
`#F2F3F5`, `#4E5969`, and `#E5E6EB`. Success, warning, and danger stay on the
|
|
290
|
+
semantic tokens: `--success: #00B42A`, `--warning: #FF7D00`,
|
|
291
|
+
`--destructive: #F53F3F`. Do not mix the optional Stripe canvas into the
|
|
292
|
+
default theme.
|
|
256
293
|
|
|
257
|
-
Dark mode for the
|
|
294
|
+
Dark mode for the default preset replaces the canvas and lifts the accent to
|
|
295
|
+
The dark primary:
|
|
258
296
|
|
|
259
297
|
| Token | Dark value |
|
|
260
298
|
| --- | --- |
|
|
261
|
-
| background | `#
|
|
262
|
-
| foreground | `#
|
|
263
|
-
| card / popover | `#
|
|
264
|
-
| muted | `#
|
|
265
|
-
| muted-foreground | `#
|
|
266
|
-
| border | `#
|
|
267
|
-
| sidebar | `#
|
|
268
|
-
| primary | `
|
|
269
|
-
| on-primary | `
|
|
299
|
+
| background | `#17171A` |
|
|
300
|
+
| foreground | `#E6E6E6` |
|
|
301
|
+
| card / popover | `#232324` |
|
|
302
|
+
| muted | `#2A2A2B` |
|
|
303
|
+
| muted-foreground | `#B3B3B3` |
|
|
304
|
+
| border | `#484849` |
|
|
305
|
+
| sidebar | `#17171A` |
|
|
306
|
+
| primary | `#3C7EFF` |
|
|
307
|
+
| on-primary | `#FFFFFF` |
|
|
270
308
|
|
|
271
309
|
Named color themes (`neutral`, `indigo`, `blue`, `green`, `rose`, `orange`,
|
|
272
310
|
`violet`, `stripe`) replace primary, ring, sidebar-primary, and chart-1 only.
|
|
273
|
-
They do not rebuild the neutral ramp.
|
|
311
|
+
They do not rebuild the neutral ramp. `arco` is the default preset id and paints
|
|
312
|
+
the full ramp above.
|
|
274
313
|
|
|
275
314
|
The grid is a low-contrast canvas texture only; buttons and data
|
|
276
315
|
surfaces remain solid, and gradients are not used to communicate status. The
|
|
@@ -438,13 +477,17 @@ These are the published shells. Compose them. Do not redraw them as generic card
|
|
|
438
477
|
|
|
439
478
|
| Shell | Contract | Chrome |
|
|
440
479
|
| --- | --- | --- |
|
|
441
|
-
| `Layout` | `data-svadmin-layout`, `data-svadmin-main`, `data-svadmin-sidebar`, `data-svadmin-topbar` | Sidebar and topbar are flat hairline regions.
|
|
480
|
+
| `Layout` | `data-svadmin-layout`, `data-svadmin-main`, `data-svadmin-sidebar`, `data-svadmin-topbar` | Sidebar and topbar are flat hairline regions. The default canvas removes their shadows. Active sidebar items use a 9% primary wash and a 4px bar. |
|
|
442
481
|
| `Sidebar` | `data-svadmin-sidebar`, `.sidebar-menu-item` | System sans at 13px / 500. Section labels are not uppercase. |
|
|
443
482
|
| `AutoTable` | `data-svadmin-table-head`, `data-svadmin-table-row`, `data-svadmin-datatable` | The table is not wrapped in a card. Header labels are 12px / 600, sentence case, `letter-spacing: 0`. Numbers use `tabular-nums`. |
|
|
444
483
|
| `PageToolbar` | `data-svadmin-table-toolbar` | A hairline row (`border-bottom`), transparent, no radius and no surface shadow. |
|
|
445
|
-
| `AutoForm` | `data-svadmin-form-row`, `data-svadmin-form-actions`, `data-svadmin-field-label` | Rows are separated by a hairline. Under the
|
|
484
|
+
| `AutoForm` | `data-svadmin-form-row`, `data-svadmin-form-actions`, `data-svadmin-field-label` | Rows are separated by a hairline. Under the default preset, save actions are a footer rule, not a floating card. |
|
|
446
485
|
| `ConfigurationPage`, `SettingsGroup`, `SettingsFieldRow` | `data-svadmin-settings-group` | Unframed. The group header is a bottom border, title at 16px / 600, description in muted text. One page `h1`; nested groups use `h3`. |
|
|
447
486
|
| `MetricBlock` | `data-svadmin-metric-card` | This is the bounded card: 8px radius, hairline border, surface shadow. Do not put it inside another card. |
|
|
487
|
+
| `ApprovalCenter`, `ApprovalActionCard` | `data-svadmin-approval-center`, `.svadmin-approval-card` | Flat 4px surface, no shadow. The selected row uses an 8% primary wash. Approve uses the primary action color; reject stays danger. |
|
|
488
|
+
| `KanbanBoard`, `GanttChart` | `.svadmin-kanban`, `.svadmin-gantt` | The same 4px bordered surface. Columns use the muted fill; cards and bars have no shadow. Status text is 12px and sentence case. |
|
|
489
|
+
| `WorkspaceLayout` | `data-svadmin-workspace-layout` | 16px rhythm between the primary work and the secondary rail. It does not introduce another palette. |
|
|
490
|
+
| `ResourceOperationsPage`, `ResourceOverviewCard` | `data-svadmin-resource-operations`, `.svadmin-resource-overview-card` | The page title is 20px. The hero is an unframed hairline, and nested cards stay flat 4px surfaces. |
|
|
448
491
|
| `AuthPageShell`, `LoginPage` | `data-svadmin-auth-page`, `data-svadmin-demo-credentials` | One auth surface. The title stays at 20px / 600. Demo credentials are a divided note inside that surface, not nested tiles. |
|
|
449
492
|
|
|
450
493
|
`FilterToolbar` (`data-svadmin-filter-toolbar`) owns search and advanced filters.
|
|
@@ -476,21 +519,20 @@ Transitions provide clear state confirmation without delaying user action:
|
|
|
476
519
|
|
|
477
520
|
The reference stack is layered. It is not a visual mixture:
|
|
478
521
|
|
|
479
|
-
- **svadmin
|
|
480
|
-
|
|
522
|
+
- **svadmin is the primary reference:** palette, type, radius, component
|
|
523
|
+
behavior, and page anatomy for list, form, detail, and result.
|
|
524
|
+
- **svadmin owns implementation:** semantic token names, component API, state
|
|
525
|
+
ownership, accessibility, and responsive contracts.
|
|
526
|
+
- **shadcn/ui is the composition layer:** accessible primitives, source-owned
|
|
527
|
+
components, semantic variants, and AI-readable assembly. It does not supply
|
|
528
|
+
a second palette.
|
|
481
529
|
- **Refine is an application-model reference:** resource routing, CRUD flows,
|
|
482
530
|
provider state, access control, and mutation ownership.
|
|
483
|
-
- **
|
|
484
|
-
notifications, results, empty states, loading, and data-heavy tasks.
|
|
485
|
-
- **shadcn/ui is a composition reference:** accessible primitives, source-owned
|
|
486
|
-
components, semantic tokens, variants, and AI-readable assembly patterns.
|
|
487
|
-
- **Carbon and PatternFly are enterprise-pattern references:** notification
|
|
488
|
-
lifecycle, inline versus global feedback, empty/error states, and operational
|
|
489
|
-
page composition.
|
|
531
|
+
- **Stripe is an optional accent preset:** not the default canvas or primary.
|
|
490
532
|
- **Metronic is a coverage reference:** page families and missing scenarios only.
|
|
491
533
|
|
|
492
|
-
Never copy a reference library's
|
|
493
|
-
|
|
534
|
+
Never copy a reference library's runtime, marketing layout, or component chrome.
|
|
535
|
+
The published ramp is the explicit palette decision.
|
|
494
536
|
|
|
495
537
|
### Page hierarchy and information budget
|
|
496
538
|
|
|
@@ -557,7 +599,7 @@ Breakpoints already in the shell, not a new layout system:
|
|
|
557
599
|
- Sidebar content offset switches at `768px`. Below that, the sidebar does not
|
|
558
600
|
reserve the 252px or 70px desktop margin.
|
|
559
601
|
- Filter toolbars become a horizontal row at `640px`.
|
|
560
|
-
-
|
|
602
|
+
- Content padding tightens at `48rem`.
|
|
561
603
|
- Auth credential columns stack at `40rem`.
|
|
562
604
|
- Coarse-pointer targets stay at least 44px. Fine-pointer tables may be denser.
|
|
563
605
|
|
|
@@ -567,26 +609,23 @@ Breakpoints already in the shell, not a new layout system:
|
|
|
567
609
|
- Do show loading, empty, error, permission, progress, and mutation feedback.
|
|
568
610
|
- Do preserve visible keyboard focus and at least 44px coarse-pointer targets.
|
|
569
611
|
- Do remove, downgrade, or relocate feedback as soon as its state is resolved.
|
|
570
|
-
- Do use the system
|
|
571
|
-
`
|
|
612
|
+
- Do use the system stack already set on the default layout:
|
|
613
|
+
`"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif`.
|
|
572
614
|
- Don't copy Metronic colors, decorative treatment, or template branding.
|
|
573
615
|
- Don't repeat a success fact across Toast, title, description, banner, badge,
|
|
574
616
|
and table data.
|
|
575
617
|
- Don't use persistent success banners for routine mutations.
|
|
576
618
|
- Don't set `font-family` to Inter, or to any single downloaded face, as the
|
|
577
619
|
product font. A system stack is the contract.
|
|
578
|
-
- Don't paint marketing gradients, mesh backgrounds, glass, or a purple hero.
|
|
579
|
-
The
|
|
580
|
-
`[data-svadmin-main]` and 4% on the auth page.
|
|
620
|
+
- Don't paint marketing gradients, mesh backgrounds, glass, a technical grid, or a purple hero.
|
|
621
|
+
The canvas is flat.
|
|
581
622
|
- Don't put muted gray type on a saturated fill. Solid status fills use their
|
|
582
623
|
foreground token. The tinted `.svadmin-product-status` badge mixes the status
|
|
583
624
|
color into `--foreground` and keeps a neutral card base.
|
|
584
625
|
- Don't use cards inside cards, uppercase tracked labels, bounce easing, or
|
|
585
626
|
make every section a floating card.
|
|
586
627
|
- Don't use decorative gradients, glow, glassmorphism, negative letter spacing,
|
|
587
|
-
or blanket `!important` overrides as the default product language.
|
|
588
|
-
two-line grid is allowed on the work canvas because it is part of the current
|
|
589
|
-
Stripe-inspired reference direction.
|
|
628
|
+
or blanket `!important` overrides as the default product language.
|
|
590
629
|
|
|
591
630
|
## Agent prompt guide
|
|
592
631
|
|
|
@@ -598,12 +637,12 @@ matrix. Use semantic tokens (`--background`, `--foreground`, `--card`,
|
|
|
598
637
|
`--primary`, `--border`, `--muted-foreground`, `--success`, `--warning`,
|
|
599
638
|
`--destructive`). Do not introduce a parallel palette.
|
|
600
639
|
|
|
601
|
-
Quick light reference for the default
|
|
640
|
+
Quick light reference for the default clean-flat preset:
|
|
602
641
|
|
|
603
|
-
- Canvas `#
|
|
604
|
-
- Action `
|
|
605
|
-
- Body 14px / 400 / 1.
|
|
606
|
-
- Radius
|
|
642
|
+
- Canvas `#F7F8FA`, ink `#1D2129`, surface `#FFFFFF`, hairline `#E5E6EB`.
|
|
643
|
+
- Action `#165DFF` on `#FFFFFF`. Dark action `#3C7EFF`.
|
|
644
|
+
- Body 14px / 400 / 1.4. Page title 20px / 600 / 1.3. Labels 13px / 500.
|
|
645
|
+
- Radius 2px on small controls and 4px on fields and surfaces. Spacing 4 / 8 / 16 / 24 / 32.
|
|
607
646
|
- Focus: 2px solid `--ring`, offset `--svadmin-focus-offset` (2px).
|
|
608
647
|
|
|
609
648
|
Reject the result when the first viewport has nested cards, a gradient hero,
|
|
@@ -612,6 +651,8 @@ in a banner and the data below it.
|
|
|
612
651
|
|
|
613
652
|
Do not add `npx impeccable detect` to CI. The UI workflow already builds
|
|
614
653
|
packages and checks browser contracts. A default detector run flags intentional
|
|
615
|
-
admin choices (the Stripe accent
|
|
654
|
+
admin choices (the optional Stripe accent and compact tables) and would
|
|
616
655
|
need a large ignore list. Use that detector locally only as a hint, and keep
|
|
617
656
|
this file as the authority when a finding conflicts with the tokens above.
|
|
657
|
+
The default visual system remains the primary reference; do not treat a mismatch with page patterns
|
|
658
|
+
shell, illustrations, or card wall as a defect.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@svadmin/create",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.46.0",
|
|
4
4
|
"description": "Scaffolding tool for svadmin projects",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"@types/node": "^26.4.0",
|
|
31
31
|
"@types/prompts": "^2.4.9",
|
|
32
32
|
"typescript": "^7.0.2",
|
|
33
|
-
"@svadmin/core": "^0.
|
|
33
|
+
"@svadmin/core": "^0.67.0"
|
|
34
34
|
},
|
|
35
35
|
"keywords": [
|
|
36
36
|
"svadmin",
|
package/scaffold-manifest.json
CHANGED
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
"check": "svelte-check --tsconfig ./tsconfig.json"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@svadmin/core": "^0.
|
|
14
|
-
"@svadmin/app": "^0.2.
|
|
15
|
-
"@svadmin/ai-elements": "^0.
|
|
16
|
-
"@svadmin/ui": "^0.
|
|
13
|
+
"@svadmin/core": "^0.67.0",
|
|
14
|
+
"@svadmin/app": "^0.2.14",
|
|
15
|
+
"@svadmin/ai-elements": "^0.13.0",
|
|
16
|
+
"@svadmin/ui": "^0.99.0",
|
|
17
17
|
"typebox": "^1.3.34",
|
|
18
18
|
"@tanstack/svelte-query": "^6.1.48",
|
|
19
19
|
"@lucide/svelte": "^1.35.0"
|
|
@@ -43,76 +43,76 @@
|
|
|
43
43
|
"graphql": "^16.8.0"
|
|
44
44
|
},
|
|
45
45
|
"simple-rest": {
|
|
46
|
-
"@svadmin/simple-rest": "^0.12.
|
|
46
|
+
"@svadmin/simple-rest": "^0.12.15",
|
|
47
47
|
"@refinedev/simple-rest": "^6.0.1"
|
|
48
48
|
},
|
|
49
49
|
"supabase": {
|
|
50
|
-
"@svadmin/supabase": "^0.21.
|
|
50
|
+
"@svadmin/supabase": "^0.21.4",
|
|
51
51
|
"@supabase/supabase-js": "^2.112.4",
|
|
52
52
|
"@refinedev/supabase": "^6.0.2"
|
|
53
53
|
},
|
|
54
54
|
"graphql": {
|
|
55
|
-
"@svadmin/graphql": "^0.12.
|
|
55
|
+
"@svadmin/graphql": "^0.12.15",
|
|
56
56
|
"@refinedev/graphql": "^8.0.1",
|
|
57
57
|
"graphql-request": "^7.4.0",
|
|
58
58
|
"graphql": "^16.8.0"
|
|
59
59
|
},
|
|
60
60
|
"rest": {
|
|
61
|
-
"@svadmin/rest": "^0.2.
|
|
61
|
+
"@svadmin/rest": "^0.2.14",
|
|
62
62
|
"@refinedev/rest": "^2.1.1",
|
|
63
63
|
"@nestjsx/crud-request": "^5.0.0-alpha.3"
|
|
64
64
|
},
|
|
65
65
|
"airtable": {
|
|
66
|
-
"@svadmin/airtable": "^0.12.
|
|
66
|
+
"@svadmin/airtable": "^0.12.15",
|
|
67
67
|
"@refinedev/airtable": "^5.0.1"
|
|
68
68
|
},
|
|
69
69
|
"appwrite": {
|
|
70
|
-
"@svadmin/appwrite": "^0.11.
|
|
70
|
+
"@svadmin/appwrite": "^0.11.15",
|
|
71
71
|
"appwrite": ">=26.2.0",
|
|
72
72
|
"@refinedev/appwrite": "^8.0.1"
|
|
73
73
|
},
|
|
74
74
|
"directus": {
|
|
75
|
-
"@svadmin/directus": "^0.11.
|
|
75
|
+
"@svadmin/directus": "^0.11.15"
|
|
76
76
|
},
|
|
77
77
|
"drizzle": {
|
|
78
|
-
"@svadmin/drizzle": "^0.14.
|
|
78
|
+
"@svadmin/drizzle": "^0.14.12",
|
|
79
79
|
"drizzle-orm": "^1.0.0-rc.1",
|
|
80
80
|
"refine-sqlx": "^0.10.3"
|
|
81
81
|
},
|
|
82
82
|
"elysia": {
|
|
83
|
-
"@svadmin/elysia": "^0.14.
|
|
83
|
+
"@svadmin/elysia": "^0.14.15",
|
|
84
84
|
"elysia": ">=1.4.30",
|
|
85
85
|
"@elysiajs/eden": ">=1.4.9"
|
|
86
86
|
},
|
|
87
87
|
"firebase": {
|
|
88
|
-
"@svadmin/firebase": "^0.12.
|
|
88
|
+
"@svadmin/firebase": "^0.12.15"
|
|
89
89
|
},
|
|
90
90
|
"hasura": {
|
|
91
|
-
"@svadmin/hasura": "^0.12.
|
|
91
|
+
"@svadmin/hasura": "^0.12.15",
|
|
92
92
|
"@refinedev/hasura": "^7.0.1",
|
|
93
93
|
"graphql-request": "^7.4.0"
|
|
94
94
|
},
|
|
95
95
|
"medusa": {
|
|
96
|
-
"@svadmin/medusa": "^0.12.
|
|
96
|
+
"@svadmin/medusa": "^0.12.15",
|
|
97
97
|
"@refinedev/medusa": "^5.0.0"
|
|
98
98
|
},
|
|
99
99
|
"nestjs-query": {
|
|
100
|
-
"@svadmin/nestjs-query": "^0.12.
|
|
100
|
+
"@svadmin/nestjs-query": "^0.12.15",
|
|
101
101
|
"@refinedev/nestjs-query": "^5.0.0"
|
|
102
102
|
},
|
|
103
103
|
"nestjsx-crud": {
|
|
104
|
-
"@svadmin/nestjsx-crud": "^0.12.
|
|
104
|
+
"@svadmin/nestjsx-crud": "^0.12.15",
|
|
105
105
|
"@refinedev/nestjsx-crud": "^6.0.1"
|
|
106
106
|
},
|
|
107
107
|
"pocketbase": {
|
|
108
|
-
"@svadmin/pocketbase": "^0.13.
|
|
108
|
+
"@svadmin/pocketbase": "^0.13.12",
|
|
109
109
|
"pocketbase": ">=0.28.0"
|
|
110
110
|
},
|
|
111
111
|
"sanity": {
|
|
112
|
-
"@svadmin/sanity": "^0.11.
|
|
112
|
+
"@svadmin/sanity": "^0.11.15"
|
|
113
113
|
},
|
|
114
114
|
"strapi": {
|
|
115
|
-
"@svadmin/strapi": "^0.12.
|
|
115
|
+
"@svadmin/strapi": "^0.12.15",
|
|
116
116
|
"@refinedev/strapi-v4": "^7.0.1"
|
|
117
117
|
}
|
|
118
118
|
},
|
|
@@ -91,10 +91,6 @@
|
|
|
91
91
|
place-items: center;
|
|
92
92
|
padding: 2rem 1rem;
|
|
93
93
|
background: var(--background);
|
|
94
|
-
background-image:
|
|
95
|
-
linear-gradient(to right, color-mix(in oklch, var(--primary) 4%, transparent) 1px, transparent 1px),
|
|
96
|
-
linear-gradient(to bottom, color-mix(in oklch, var(--primary) 4%, transparent) 1px, transparent 1px);
|
|
97
|
-
background-size: var(--svadmin-grid-size) var(--svadmin-grid-size);
|
|
98
94
|
color: var(--foreground);
|
|
99
95
|
}
|
|
100
96
|
|