@hale-bopp/valentino-engine 2.5.0 → 2.5.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/css/tokens.css +142 -0
- package/package.json +2 -1
package/css/tokens.css
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
/* === VALENTINO TOKENS ===
|
|
2
|
+
* Il DNA di Valentino. Questi sono i valori che l'engine ritiene corretti.
|
|
3
|
+
* Sovrascrivili nel tuo theme.css per adattare i colori al tuo brand,
|
|
4
|
+
* ma la struttura (7 superfici, rhythm contract, scale) è non negoziabile.
|
|
5
|
+
*
|
|
6
|
+
* Chi usa Valentino accetta questo contratto:
|
|
7
|
+
* 7 superfici → default, muted, accent, dark, shell-dark, reading-light, ops-light
|
|
8
|
+
* Rhythm → block spacing (xl/l/m), stack spacing, leading, measure
|
|
9
|
+
* Typography → 6 step fluid scale
|
|
10
|
+
* 3 accent slot → gold, cyan, violet (rinomina come vuoi, ma servono 3)
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
:root {
|
|
14
|
+
/* --- Palette --- */
|
|
15
|
+
--bg-deep-void: #050812;
|
|
16
|
+
--rgb-deep-void: 5, 8, 18;
|
|
17
|
+
--bg-surface: #0a1125;
|
|
18
|
+
--rgb-surface: 10, 17, 37;
|
|
19
|
+
|
|
20
|
+
/* Text hierarchy */
|
|
21
|
+
--text-primary: #f8fafc;
|
|
22
|
+
--text-secondary: #cbd5e1;
|
|
23
|
+
--text-muted: #64748b;
|
|
24
|
+
|
|
25
|
+
/* 3 accent slot (sovrascrivili per il tuo brand) */
|
|
26
|
+
--text-sovereign-gold: #f5d586;
|
|
27
|
+
--rgb-sovereign-gold: 245, 213, 134;
|
|
28
|
+
--accent-neural-cyan: #0cd6c7;
|
|
29
|
+
--rgb-neural-cyan: 12, 214, 199;
|
|
30
|
+
--accent-violet: #8c52ff;
|
|
31
|
+
--rgb-violet: 140, 82, 255;
|
|
32
|
+
|
|
33
|
+
/* Semantic status */
|
|
34
|
+
--status-success: #16a34a;
|
|
35
|
+
--status-danger: #dc2626;
|
|
36
|
+
--status-warning: #d97706;
|
|
37
|
+
|
|
38
|
+
/* Borders & glass */
|
|
39
|
+
--border-color: rgba(var(--rgb-neural-cyan), 0.15);
|
|
40
|
+
--glass-border: rgba(var(--rgb-neural-cyan), 0.25);
|
|
41
|
+
--glass-border-glow: rgba(var(--rgb-neural-cyan), 0.6);
|
|
42
|
+
--glass-bg: linear-gradient(135deg, rgba(var(--rgb-neural-cyan), 0.08) 0%, rgba(var(--rgb-violet), 0.08) 100%);
|
|
43
|
+
|
|
44
|
+
/* Code */
|
|
45
|
+
--code-gold: #c8aa6e;
|
|
46
|
+
--code-cyan: #0ac8b9;
|
|
47
|
+
|
|
48
|
+
/* --- Valentino Surfaces (7 × 5 — il contratto) --- */
|
|
49
|
+
|
|
50
|
+
/* default: bianco pulito */
|
|
51
|
+
--valentino-surface-default-background: #ffffff;
|
|
52
|
+
--valentino-surface-default-text: #0f172a;
|
|
53
|
+
--valentino-surface-default-text-muted: #475569;
|
|
54
|
+
--valentino-surface-default-card-bg: rgba(255, 255, 255, 0.96);
|
|
55
|
+
--valentino-surface-default-card-border: rgba(203, 213, 225, 0.95);
|
|
56
|
+
|
|
57
|
+
/* muted: grigio sottile */
|
|
58
|
+
--valentino-surface-muted-background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
|
|
59
|
+
--valentino-surface-muted-text: #0f172a;
|
|
60
|
+
--valentino-surface-muted-text-muted: #475569;
|
|
61
|
+
--valentino-surface-muted-card-bg: rgba(255, 255, 255, 0.9);
|
|
62
|
+
--valentino-surface-muted-card-border: rgba(191, 219, 254, 0.65);
|
|
63
|
+
|
|
64
|
+
/* accent: calore e attenzione */
|
|
65
|
+
--valentino-surface-accent-background:
|
|
66
|
+
radial-gradient(circle at top left, rgba(244, 63, 94, 0.18), transparent 32%),
|
|
67
|
+
radial-gradient(circle at top right, rgba(14, 165, 233, 0.16), transparent 28%),
|
|
68
|
+
linear-gradient(180deg, #fff7fb 0%, #fff1f2 100%);
|
|
69
|
+
--valentino-surface-accent-text: #1f2937;
|
|
70
|
+
--valentino-surface-accent-text-muted: #4b5563;
|
|
71
|
+
--valentino-surface-accent-card-bg: rgba(255, 255, 255, 0.88);
|
|
72
|
+
--valentino-surface-accent-card-border: rgba(251, 113, 133, 0.28);
|
|
73
|
+
|
|
74
|
+
/* dark: profondità */
|
|
75
|
+
--valentino-surface-dark-background:
|
|
76
|
+
radial-gradient(circle at 50% 0%, rgba(244, 63, 94, 0.24), transparent 36%),
|
|
77
|
+
linear-gradient(180deg, #020617 0%, #0f172a 100%);
|
|
78
|
+
--valentino-surface-dark-text: #f8fafc;
|
|
79
|
+
--valentino-surface-dark-text-muted: rgba(226, 232, 240, 0.82);
|
|
80
|
+
--valentino-surface-dark-card-bg: rgba(15, 23, 42, 0.74);
|
|
81
|
+
--valentino-surface-dark-card-border: rgba(100, 116, 139, 0.35);
|
|
82
|
+
|
|
83
|
+
/* shell-dark: eredita dark */
|
|
84
|
+
--valentino-surface-shell-dark-background: var(--valentino-surface-dark-background);
|
|
85
|
+
--valentino-surface-shell-dark-text: var(--valentino-surface-dark-text);
|
|
86
|
+
--valentino-surface-shell-dark-text-muted: var(--valentino-surface-dark-text-muted);
|
|
87
|
+
--valentino-surface-shell-dark-card-bg: var(--valentino-surface-dark-card-bg);
|
|
88
|
+
--valentino-surface-shell-dark-card-border: var(--valentino-surface-dark-card-border);
|
|
89
|
+
|
|
90
|
+
/* reading-light: ottimizzato per testo lungo */
|
|
91
|
+
--valentino-surface-reading-light-background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
92
|
+
--valentino-surface-reading-light-text: #0f172a;
|
|
93
|
+
--valentino-surface-reading-light-text-muted: #334155;
|
|
94
|
+
--valentino-surface-reading-light-card-bg: rgba(255, 255, 255, 0.98);
|
|
95
|
+
--valentino-surface-reading-light-card-border: rgba(203, 213, 225, 0.88);
|
|
96
|
+
|
|
97
|
+
/* ops-light: dashboard / backoffice */
|
|
98
|
+
--valentino-surface-ops-light-background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
|
|
99
|
+
--valentino-surface-ops-light-text: #0f172a;
|
|
100
|
+
--valentino-surface-ops-light-text-muted: #475569;
|
|
101
|
+
--valentino-surface-ops-light-card-bg: rgba(255, 255, 255, 0.94);
|
|
102
|
+
--valentino-surface-ops-light-card-border: rgba(148, 163, 184, 0.3);
|
|
103
|
+
|
|
104
|
+
/* --- Rhythm Contract (non negoziabile) --- */
|
|
105
|
+
--valentino-rhythm-space-block-xl: clamp(4.5rem, 7vw, 7rem);
|
|
106
|
+
--valentino-rhythm-space-block-l: clamp(3.5rem, 5vw, 5.5rem);
|
|
107
|
+
--valentino-rhythm-space-block-m: clamp(2.75rem, 4vw, 4rem);
|
|
108
|
+
--valentino-rhythm-space-stack-m: 1rem;
|
|
109
|
+
--valentino-rhythm-space-stack-l: 1.5rem;
|
|
110
|
+
--valentino-rhythm-leading-display: 1.05;
|
|
111
|
+
--valentino-rhythm-leading-body: 1.7;
|
|
112
|
+
--valentino-rhythm-measure-reading: 68ch;
|
|
113
|
+
--valentino-rhythm-measure-support: 42rem;
|
|
114
|
+
--valentino-rhythm-measure-feature: 46rem;
|
|
115
|
+
--valentino-rhythm-measure-ops: 52rem;
|
|
116
|
+
--valentino-rhythm-measure-compact: 34rem;
|
|
117
|
+
|
|
118
|
+
/* --- Elevation --- */
|
|
119
|
+
--z-ground: 0;
|
|
120
|
+
--z-raised: 10;
|
|
121
|
+
--z-sticky: 100;
|
|
122
|
+
--z-modal: 9000;
|
|
123
|
+
--z-toast: 9500;
|
|
124
|
+
--z-overlord: 10000;
|
|
125
|
+
|
|
126
|
+
/* --- Typography --- */
|
|
127
|
+
--font-family: 'Inter', 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
|
128
|
+
--font-mono: 'Fira Code', 'Courier New', monospace;
|
|
129
|
+
|
|
130
|
+
/* Fluid scale */
|
|
131
|
+
--text-step-0: clamp(1rem, 0.95vw + 0.8rem, 1.125rem);
|
|
132
|
+
--text-step-1: clamp(1.2rem, 1.5vw + 0.9rem, 1.5rem);
|
|
133
|
+
--text-step-2: clamp(1.44rem, 2.2vw + 1rem, 2rem);
|
|
134
|
+
--text-step-3: clamp(1.728rem, 3.2vw + 1.1rem, 2.66rem);
|
|
135
|
+
--text-step-4: clamp(2.074rem, 4.5vw + 1.2rem, 3.55rem);
|
|
136
|
+
--text-step-5: clamp(2.488rem, 6.2vw + 1.3rem, 4.75rem);
|
|
137
|
+
|
|
138
|
+
/* --- Animation Timing --- */
|
|
139
|
+
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
140
|
+
--transition-ease: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
141
|
+
--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
142
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hale-bopp/valentino-engine",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.1",
|
|
4
4
|
"description": "Antifragile Open Source UI Design Engine — generates Runtime PageSpec JSON, validates accessibility, enforces Design Tokens, and consults GEDI for architectural decisions.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"types": "./dist/cockpit-server.d.ts",
|
|
27
27
|
"import": "./dist/cockpit-server.js"
|
|
28
28
|
},
|
|
29
|
+
"./css/tokens.css": "./css/tokens.css",
|
|
29
30
|
"./css/framework.base.css": "./css/framework.base.css",
|
|
30
31
|
"./css/framework.corporate.css": "./css/framework.corporate.css",
|
|
31
32
|
"./css/framework.landing.css": "./css/framework.landing.css"
|