@allshift/ui 0.1.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/README.md +45 -0
- package/package.json +25 -0
- package/styles/shift-ui.css +117 -0
- package/styles.css +4 -0
package/README.md
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
# @shift/ui — shared feel, sacred face
|
|
2
|
+
|
|
3
|
+
The Shift-grade *smoothness, depth, flow, and breathing room* — shared by every product.
|
|
4
|
+
It is **brand-neutral**. Your product keeps its exact look, colors, and signature visuals; it
|
|
5
|
+
only gains the consistent Shift feel underneath.
|
|
6
|
+
|
|
7
|
+
## Adopt (per product)
|
|
8
|
+
|
|
9
|
+
1. Import the layer once (in your root CSS / globals):
|
|
10
|
+
```css
|
|
11
|
+
@import "@shift/ui/styles.css";
|
|
12
|
+
```
|
|
13
|
+
2. **Map your signature tokens into the `--shift-*` contract** so the shared primitives render in
|
|
14
|
+
*your* identity. Put this in your own globals (NOT in @shift/ui):
|
|
15
|
+
```css
|
|
16
|
+
:root {
|
|
17
|
+
--shift-accent: var(--arc); /* WeldShift's amber welding-arc */
|
|
18
|
+
--shift-accent-2: var(--arc-dim);
|
|
19
|
+
--shift-surface: var(--bg-card); /* WeldShift steel #0d1520 */
|
|
20
|
+
--shift-surface-2: var(--bg-card);
|
|
21
|
+
--shift-border: var(--bg-border); /* WeldShift steel border #1e2d3d */
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
Now `.shift-card` has WeldShift's steel surface + border, lifting with the shared motion.
|
|
25
|
+
3. Use the primitives where you want the shared feel: `shift-card`, `shift-lift`,
|
|
26
|
+
`shift-accent-card` (per-card `--accent`), `shift-btn-lift`, `shift-body`/`shift-body-loose`,
|
|
27
|
+
`shift-float`, `shift-stagger`.
|
|
28
|
+
|
|
29
|
+
## The two laws
|
|
30
|
+
|
|
31
|
+
1. **Shared feel, sacred face.** This package never carries brand color and never replaces a
|
|
32
|
+
product's signature visuals (sparks canvas, custom borders, ambient backgrounds). Those stay
|
|
33
|
+
100% the product's own.
|
|
34
|
+
2. **Additive, never a reskin.** A correct adoption leaves the product looking the same (or better)
|
|
35
|
+
and only *feeling* smoother/more consistent. If anything looks flattened to a generic look,
|
|
36
|
+
it's wrong — revert.
|
|
37
|
+
|
|
38
|
+
## What's shared vs yours
|
|
39
|
+
|
|
40
|
+
| Shared (here) | Yours (per-product theme + signature components) |
|
|
41
|
+
|---|---|
|
|
42
|
+
| easing curves, hover-lift/press timing, float, stagger | color scheme & accents |
|
|
43
|
+
| elevation/cushion shadow structure, radius scale | typeface, logo/emblem, iconography |
|
|
44
|
+
| spacing rhythm + breathing-room line-heights | ambient bg, glow, particles, signature borders |
|
|
45
|
+
| reduced-motion handling, box-sizing reset | density tuning, domain motifs |
|
package/package.json
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@allshift/ui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Shift family shared FEEL layer — themed face, shared smoothness. Motion, elevation, spacing/breathing-room primitives driven by per-product --shift-* theme tokens. Brand-neutral by design.",
|
|
5
|
+
"license": "UNLICENSED",
|
|
6
|
+
"private": false,
|
|
7
|
+
"type": "module",
|
|
8
|
+
"files": [
|
|
9
|
+
"styles",
|
|
10
|
+
"styles.css",
|
|
11
|
+
"README.md"
|
|
12
|
+
],
|
|
13
|
+
"exports": {
|
|
14
|
+
"./styles.css": "./styles/shift-ui.css",
|
|
15
|
+
"./package.json": "./package.json"
|
|
16
|
+
},
|
|
17
|
+
"publishConfig": {
|
|
18
|
+
"access": "public"
|
|
19
|
+
},
|
|
20
|
+
"keywords": [
|
|
21
|
+
"shift",
|
|
22
|
+
"design-system",
|
|
23
|
+
"feel-layer"
|
|
24
|
+
]
|
|
25
|
+
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
/* ============================================================================
|
|
2
|
+
@shift/ui — the shared FEEL layer. "Shared feel, sacred face."
|
|
3
|
+
----------------------------------------------------------------------------
|
|
4
|
+
This file carries the Shift-grade *smoothness, flow, depth, and breathing room*
|
|
5
|
+
that every product shares — NOT appearance. It is BRAND-NEUTRAL on purpose.
|
|
6
|
+
|
|
7
|
+
Each product maps its OWN signature tokens into the --shift-* contract below
|
|
8
|
+
(e.g. WeldShift: --shift-accent: var(--arc); --shift-surface: var(--bg-card)),
|
|
9
|
+
so its colors, borders, and identity render unchanged — only the motion and
|
|
10
|
+
spacing become consistent. NEVER hardcode a brand color here. NEVER use this to
|
|
11
|
+
reskin a product's signature visuals (sparks canvases, custom borders, etc.).
|
|
12
|
+
========================================================================== */
|
|
13
|
+
|
|
14
|
+
/* ---- Theme token contract — products DEFINE/MAP these (fallbacks are neutral) ---- */
|
|
15
|
+
:where(:root) {
|
|
16
|
+
/* Surfaces & color — a product overrides by mapping its own signature tokens. */
|
|
17
|
+
--shift-accent: #5b8cff; /* product maps e.g. var(--arc) / var(--em) */
|
|
18
|
+
--shift-accent-2: #22d3ee;
|
|
19
|
+
--shift-surface: rgba(22, 28, 38, 0.92); /* card top (lighter than page = lifts) */
|
|
20
|
+
--shift-surface-2: rgba(12, 16, 24, 0.94); /* card bottom */
|
|
21
|
+
--shift-border: rgba(255, 255, 255, 0.10);
|
|
22
|
+
--shift-shadow: rgba(0, 0, 0, 0.66);
|
|
23
|
+
--shift-highlight: rgba(255, 255, 255, 0.16);
|
|
24
|
+
|
|
25
|
+
/* Radius scale. */
|
|
26
|
+
--shift-radius-sm: 0.75rem;
|
|
27
|
+
--shift-radius: 1.25rem;
|
|
28
|
+
--shift-radius-lg: 1.9rem;
|
|
29
|
+
|
|
30
|
+
/* MOTION — the smoothness. The single most shared thing across the family. */
|
|
31
|
+
--shift-ease: cubic-bezier(0.22, 1, 0.36, 1);
|
|
32
|
+
--shift-dur: 0.35s;
|
|
33
|
+
--shift-dur-fast: 0.2s;
|
|
34
|
+
|
|
35
|
+
/* Breathing room — the readability standard (line-heights). */
|
|
36
|
+
--shift-leading-body: 1.7;
|
|
37
|
+
--shift-leading-loose: 1.9;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* ---- Reset: box-sizing ONLY. ----------------------------------------------
|
|
41
|
+
⚠️ NEVER add `* { margin:0; padding:0 }` here. Unlayered, it overrides every
|
|
42
|
+
Tailwind v4 spacing utility (they live in @layer utilities) and silently zeros
|
|
43
|
+
all spacing site-wide. Frameworks' preflight already resets in the BASE layer,
|
|
44
|
+
where utilities can override it. (Hard-learned: LendShift 2026-06-19.) */
|
|
45
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
46
|
+
|
|
47
|
+
/* ---- Elevation: the cushioned depth. Shape shared, color themed. ---- */
|
|
48
|
+
.shift-card {
|
|
49
|
+
background: linear-gradient(158deg, var(--shift-surface) 0%, var(--shift-surface-2) 100%);
|
|
50
|
+
border: 1px solid var(--shift-border);
|
|
51
|
+
border-radius: var(--shift-radius-lg);
|
|
52
|
+
box-shadow:
|
|
53
|
+
0 30px 80px var(--shift-shadow),
|
|
54
|
+
0 8px 24px rgba(0, 0, 0, 0.50),
|
|
55
|
+
inset 0 1px 0 var(--shift-highlight),
|
|
56
|
+
inset 0 -24px 48px rgba(0, 0, 0, 0.32);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* ---- Lift: the physical "pick up" hover. Timing shared = the flow. ---- */
|
|
60
|
+
.shift-lift {
|
|
61
|
+
transition:
|
|
62
|
+
transform var(--shift-dur) var(--shift-ease),
|
|
63
|
+
box-shadow var(--shift-dur) var(--shift-ease),
|
|
64
|
+
border-color var(--shift-dur) ease;
|
|
65
|
+
}
|
|
66
|
+
.shift-lift:hover { transform: translateY(-6px); }
|
|
67
|
+
|
|
68
|
+
/* ---- Accent bloom: lifts and glows in the product's OWN accent. ----
|
|
69
|
+
Reads a per-element `--accent` if set, else falls back to the product theme. */
|
|
70
|
+
.shift-accent-card {
|
|
71
|
+
transition:
|
|
72
|
+
transform var(--shift-dur) var(--shift-ease),
|
|
73
|
+
box-shadow var(--shift-dur) var(--shift-ease),
|
|
74
|
+
border-color var(--shift-dur) ease;
|
|
75
|
+
}
|
|
76
|
+
.shift-accent-card:hover {
|
|
77
|
+
transform: translateY(-6px);
|
|
78
|
+
border-color: color-mix(in srgb, var(--accent, var(--shift-accent)) 48%, transparent);
|
|
79
|
+
box-shadow:
|
|
80
|
+
0 40px 100px var(--shift-shadow),
|
|
81
|
+
0 0 70px color-mix(in srgb, var(--accent, var(--shift-accent)) 22%, transparent),
|
|
82
|
+
inset 0 1px 0 var(--shift-highlight),
|
|
83
|
+
inset 0 -24px 48px rgba(0, 0, 0, 0.32);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* ---- Button lift: gradient CTA that rises and presses. ---- */
|
|
87
|
+
.shift-btn-lift {
|
|
88
|
+
transition:
|
|
89
|
+
transform var(--shift-dur-fast) var(--shift-ease),
|
|
90
|
+
box-shadow var(--shift-dur-fast) var(--shift-ease);
|
|
91
|
+
}
|
|
92
|
+
.shift-btn-lift:hover { transform: translateY(-2px); }
|
|
93
|
+
.shift-btn-lift:active { transform: translateY(0); }
|
|
94
|
+
|
|
95
|
+
/* ---- Breathing room: the readability standard. ---- */
|
|
96
|
+
.shift-body { line-height: var(--shift-leading-body); }
|
|
97
|
+
.shift-body-loose { line-height: var(--shift-leading-loose); }
|
|
98
|
+
|
|
99
|
+
/* ---- Motion utilities — float + staggered entrance. ---- */
|
|
100
|
+
@keyframes shift-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
|
|
101
|
+
.shift-float { animation: shift-float-y 7s ease-in-out infinite; }
|
|
102
|
+
.shift-float-slow { animation: shift-float-y 10s ease-in-out infinite 1s; }
|
|
103
|
+
|
|
104
|
+
@keyframes shift-slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
|
|
105
|
+
.shift-stagger > * { animation: shift-slide-up 0.4s var(--shift-ease) both; }
|
|
106
|
+
.shift-stagger > *:nth-child(1) { animation-delay: 0ms; }
|
|
107
|
+
.shift-stagger > *:nth-child(2) { animation-delay: 70ms; }
|
|
108
|
+
.shift-stagger > *:nth-child(3) { animation-delay: 140ms; }
|
|
109
|
+
.shift-stagger > *:nth-child(4) { animation-delay: 210ms; }
|
|
110
|
+
.shift-stagger > *:nth-child(5) { animation-delay: 280ms; }
|
|
111
|
+
.shift-stagger > *:nth-child(6) { animation-delay: 350ms; }
|
|
112
|
+
|
|
113
|
+
/* ---- Accessibility: honor reduced-motion (quality floor includes this). ---- */
|
|
114
|
+
@media (prefers-reduced-motion: reduce) {
|
|
115
|
+
.shift-lift, .shift-accent-card, .shift-btn-lift { transition: none; }
|
|
116
|
+
.shift-float, .shift-float-slow, .shift-stagger > * { animation: none; }
|
|
117
|
+
}
|
package/styles.css
ADDED