@svadmin/create 0.16.10 → 0.17.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.
- package/guidance/DESIGN.md +37 -0
- package/package.json +1 -1
- package/scaffold-manifest.json +5 -5
package/guidance/DESIGN.md
CHANGED
|
@@ -143,6 +143,13 @@ not a page background. Success, warning, and danger are reserved for semantic
|
|
|
143
143
|
status and feedback. Consumer themes may replace the primary hue while keeping
|
|
144
144
|
the neutral hierarchy and contrast relationships intact.
|
|
145
145
|
|
|
146
|
+
- **WCAG 2.2 AA Contrast**: Normal text maintains at least 4.5:1 against its
|
|
147
|
+
canvas; large text, icons, and focus rings maintain at least 3:1. Enhanced AAA
|
|
148
|
+
screens target 7:1 for normal text.
|
|
149
|
+
- **Palette Discipline**: Avoid one-note palettes dominated by a single hue
|
|
150
|
+
family. Functional states (success, warning, destructive) must use distinct
|
|
151
|
+
chroma and hue angles, never tints of the primary accent.
|
|
152
|
+
|
|
146
153
|
## Typography
|
|
147
154
|
|
|
148
155
|
Use Inter or the consumer's compatible system sans. Product pages use compact
|
|
@@ -156,6 +163,19 @@ unframed layouts with a stable content width. Cards represent individual
|
|
|
156
163
|
objects or bounded tools; page sections are not decorative floating cards and
|
|
157
164
|
cards are not nested for visual effect.
|
|
158
165
|
|
|
166
|
+
### Visual Density Dials
|
|
167
|
+
|
|
168
|
+
svadmin components support systematic density levels to balance scanning speed
|
|
169
|
+
and operational throughput:
|
|
170
|
+
|
|
171
|
+
- **Density 8–10 (Dense / Dashboard)**: 2px/4px/8px rhythm with 28px–32px row
|
|
172
|
+
heights. Used for `AutoTable`, `FilterToolbar`, `RecordDetailDrawer`, and
|
|
173
|
+
operations work areas.
|
|
174
|
+
- **Density 4–6 (Comfortable / Standard)**: 4px/8px/16px rhythm with 40px–44px
|
|
175
|
+
control heights. Used for settings forms, account profiles, and overview cards.
|
|
176
|
+
- **Density 1–3 (Spacious / Onboarding)**: 16px/24px/32px rhythm for public
|
|
177
|
+
portals and introductory workflows.
|
|
178
|
+
|
|
159
179
|
## Elevation & Depth
|
|
160
180
|
|
|
161
181
|
Surfaces use a one-pixel border plus a subtle two-layer shadow. Hover elevation
|
|
@@ -163,6 +183,11 @@ may increase slightly for genuinely clickable items, without translation or
|
|
|
163
183
|
glow. Dialogs and menus receive stronger depth because they are floating
|
|
164
184
|
layers. Dark mode keeps the same hierarchy with low-chroma surfaces.
|
|
165
185
|
|
|
186
|
+
- **Control Shadow**: `0 1px 2px rgb(15 23 42 / 0.05), 0 0 0 1px rgb(15 23 42 / 0.025)`
|
|
187
|
+
- **Surface Shadow**: `0 1px 2px rgb(15 23 42 / 0.035), 0 1px 3px rgb(15 23 42 / 0.025)`
|
|
188
|
+
- **Surface Hover Shadow**: `0 2px 5px rgb(15 23 42 / 0.055), 0 1px 2px rgb(15 23 42 / 0.035)`
|
|
189
|
+
- **Overlay Shadow**: `0 18px 48px rgb(15 23 42 / 0.14), 0 4px 12px rgb(15 23 42 / 0.08)`
|
|
190
|
+
|
|
166
191
|
## Shapes
|
|
167
192
|
|
|
168
193
|
Controls use 6px radii and bounded surfaces use 8px radii. Pills are limited to
|
|
@@ -175,6 +200,18 @@ feedback use shared components and semantic tokens. Layout presets may adjust
|
|
|
175
200
|
density and composition, but they must not replace component color, typography,
|
|
176
201
|
focus, or elevation with hard-coded values.
|
|
177
202
|
|
|
203
|
+
|
|
204
|
+
## Micro-interactions & Motion
|
|
205
|
+
|
|
206
|
+
Transitions provide clear state confirmation without delaying user action:
|
|
207
|
+
|
|
208
|
+
- **Timing**: Micro-transitions use 140ms–250ms with `cubic-bezier(0.16, 1, 0.3, 1)`
|
|
209
|
+
or standard ease-out curves.
|
|
210
|
+
- **Focus Rings**: Operable controls declare `:focus-visible` with a 2px solid
|
|
211
|
+
ring and a 2px offset.
|
|
212
|
+
- **Accessibility**: All transitions and keyframe animations collapse to 0.01ms
|
|
213
|
+
when `prefers-reduced-motion: reduce` is active.
|
|
214
|
+
|
|
178
215
|
### Reference responsibilities
|
|
179
216
|
|
|
180
217
|
The reference stack is layered. It is not a visual mixture:
|
package/package.json
CHANGED
package/scaffold-manifest.json
CHANGED
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"check": "svelte-check --tsconfig ./tsconfig.json"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@svadmin/core": "^0.
|
|
14
|
-
"@svadmin/ui": "^0.
|
|
13
|
+
"@svadmin/core": "^0.42.0",
|
|
14
|
+
"@svadmin/ui": "^0.59.0",
|
|
15
15
|
"@tanstack/svelte-query": "^6.1.38",
|
|
16
16
|
"highlight.js": "^11.11.1",
|
|
17
17
|
"@lucide/svelte": "^1.31.0"
|
|
@@ -32,16 +32,16 @@
|
|
|
32
32
|
"@refinedev/core": "^5.0.12"
|
|
33
33
|
},
|
|
34
34
|
"simple-rest": {
|
|
35
|
-
"@svadmin/simple-rest": "^0.9.
|
|
35
|
+
"@svadmin/simple-rest": "^0.9.14",
|
|
36
36
|
"@refinedev/simple-rest": "^6.0.1"
|
|
37
37
|
},
|
|
38
38
|
"supabase": {
|
|
39
|
-
"@svadmin/supabase": "^0.12.
|
|
39
|
+
"@svadmin/supabase": "^0.12.2",
|
|
40
40
|
"@supabase/supabase-js": "^2.112.3",
|
|
41
41
|
"@refinedev/supabase": "^6.0.2"
|
|
42
42
|
},
|
|
43
43
|
"graphql": {
|
|
44
|
-
"@svadmin/graphql": "^0.9.
|
|
44
|
+
"@svadmin/graphql": "^0.9.14",
|
|
45
45
|
"@refinedev/graphql": "^8.0.1",
|
|
46
46
|
"graphql-request": "^7.4.0",
|
|
47
47
|
"graphql": "^16.8.0"
|