@allshift/ui 0.2.0 → 0.3.1
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/dist/index.cjs +599 -2
- package/dist/index.d.cts +195 -11
- package/dist/index.d.ts +195 -11
- package/dist/index.js +596 -1
- package/package.json +12 -3
- package/styles/shift-canvas.css +67 -0
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/* ============================================================================
|
|
2
|
+
@allshift/ui — living-canvas engine styles.
|
|
3
|
+
----------------------------------------------------------------------------
|
|
4
|
+
The surface + motion layer for the "one living canvas" model (LiveCard,
|
|
5
|
+
LiveStat, CanvasTransition, CanvasLauncher, GenerativeView). BRAND-NEUTRAL:
|
|
6
|
+
the surface is driven by the --shift-* token contract, accents are decorative
|
|
7
|
+
rgb constants set inline by the components, and the assembling indicator uses
|
|
8
|
+
the product's --shift-accent.
|
|
9
|
+
|
|
10
|
+
Import once in the app's global CSS, AFTER @allshift/ui/styles.css:
|
|
11
|
+
@import "@allshift/ui/canvas.css";
|
|
12
|
+
|
|
13
|
+
`.ash-surface` is intentionally namespaced so it NEVER collides with a
|
|
14
|
+
product's own `.glass`.
|
|
15
|
+
========================================================================== */
|
|
16
|
+
|
|
17
|
+
:where(:root) {
|
|
18
|
+
/* Optional: products may set this so accent="brand" surfaces glow on-brand.
|
|
19
|
+
"R,G,B" triplet matching --shift-accent. Falls back to a neutral blue. */
|
|
20
|
+
--shift-accent-rgb: 91, 140, 255;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* ---- The canvas surface: cushioned glass, themed by --shift-* tokens. ---- */
|
|
24
|
+
.ash-surface {
|
|
25
|
+
background: linear-gradient(158deg, var(--shift-surface, rgba(22, 28, 38, 0.92)) 0%, var(--shift-surface-2, rgba(12, 16, 24, 0.94)) 100%);
|
|
26
|
+
-webkit-backdrop-filter: blur(24px) saturate(1.4);
|
|
27
|
+
backdrop-filter: blur(24px) saturate(1.4);
|
|
28
|
+
border: 1px solid var(--shift-border, rgba(255, 255, 255, 0.10));
|
|
29
|
+
box-shadow:
|
|
30
|
+
0 8px 48px var(--shift-shadow, rgba(0, 0, 0, 0.66)),
|
|
31
|
+
inset 0 1px 0 var(--shift-highlight, rgba(255, 255, 255, 0.14)),
|
|
32
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.45);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* ---- Generate-in: blur→lift used by GenerativeView fallbacks + utilities. ---- */
|
|
36
|
+
@keyframes ash-gen-in {
|
|
37
|
+
from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
|
|
38
|
+
to { opacity: 1; transform: translateY(0); filter: blur(0); }
|
|
39
|
+
}
|
|
40
|
+
.ash-gen-in { animation: ash-gen-in 0.4s ease both; }
|
|
41
|
+
.ash-gen-in-1 { animation: ash-gen-in 0.4s ease both 0.05s; }
|
|
42
|
+
.ash-gen-in-2 { animation: ash-gen-in 0.4s ease both 0.10s; }
|
|
43
|
+
.ash-gen-in-3 { animation: ash-gen-in 0.4s ease both 0.15s; }
|
|
44
|
+
.ash-gen-in-4 { animation: ash-gen-in 0.4s ease both 0.20s; }
|
|
45
|
+
.ash-gen-in-5 { animation: ash-gen-in 0.4s ease both 0.25s; }
|
|
46
|
+
|
|
47
|
+
/* ---- Shimmer sweep (loading) — for non-framer skeleton surfaces. ---- */
|
|
48
|
+
@keyframes ash-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
|
|
49
|
+
.ash-shimmer {
|
|
50
|
+
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
|
|
51
|
+
background-size: 200% 100%;
|
|
52
|
+
animation: ash-shimmer 1.6s ease-in-out infinite;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* ---- Data pulse — a card briefly rings when its data updates. ---- */
|
|
56
|
+
@keyframes ash-data-pulse {
|
|
57
|
+
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--shift-accent, #5b8cff) 35%, transparent); }
|
|
58
|
+
70% { box-shadow: 0 0 0 8px transparent; }
|
|
59
|
+
100% { box-shadow: 0 0 0 0 transparent; }
|
|
60
|
+
}
|
|
61
|
+
.ash-data-pulse { animation: ash-data-pulse 1.6s ease-out; }
|
|
62
|
+
|
|
63
|
+
/* ---- Accessibility: honor reduced-motion. ---- */
|
|
64
|
+
@media (prefers-reduced-motion: reduce) {
|
|
65
|
+
.ash-gen-in, .ash-gen-in-1, .ash-gen-in-2, .ash-gen-in-3, .ash-gen-in-4, .ash-gen-in-5,
|
|
66
|
+
.ash-shimmer, .ash-data-pulse { animation: none; }
|
|
67
|
+
}
|