@grainulation/silo 1.0.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/CHANGELOG.md +13 -0
- package/LICENSE +21 -0
- package/README.md +111 -0
- package/bin/silo.js +327 -0
- package/lib/analytics.js +76 -0
- package/lib/import-export.js +174 -0
- package/lib/index.js +28 -0
- package/lib/packs.js +184 -0
- package/lib/search.js +128 -0
- package/lib/serve-mcp.js +337 -0
- package/lib/server.js +425 -0
- package/lib/store.js +145 -0
- package/lib/templates.js +139 -0
- package/package.json +48 -0
- package/packs/api-design.json +189 -0
- package/packs/architecture.json +175 -0
- package/packs/ci-cd.json +175 -0
- package/packs/compliance.json +203 -0
- package/packs/data-engineering.json +175 -0
- package/packs/frontend.json +175 -0
- package/packs/migration.json +147 -0
- package/packs/observability.json +175 -0
- package/packs/security.json +175 -0
- package/packs/team-process.json +175 -0
- package/packs/testing.json +147 -0
- package/public/grainulation-tokens.css +321 -0
- package/public/index.html +803 -0
|
@@ -0,0 +1,321 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* grainulation-tokens.css v1.0.0
|
|
3
|
+
* Shared design tokens for the grainulation ecosystem.
|
|
4
|
+
* Home: barn (the design-system tool)
|
|
5
|
+
*
|
|
6
|
+
* Usage:
|
|
7
|
+
* <link rel="stylesheet" href="grainulation-tokens.css">
|
|
8
|
+
* <html data-tool="wheat"> <!-- activates wheat accent scale -->
|
|
9
|
+
*
|
|
10
|
+
* Token architecture (three layers):
|
|
11
|
+
* 1. Base layer -- backgrounds, foregrounds, borders, spacing, type, radii
|
|
12
|
+
* 2. Semantic layer -- accent (maps to tool), status colors, feedback colors
|
|
13
|
+
* 3. Tool scales -- per-tool 5-weight accent ramp (50/200/400/600/800)
|
|
14
|
+
*
|
|
15
|
+
* Reset layer:
|
|
16
|
+
* Box model, scrollbar, font smoothing, shared components
|
|
17
|
+
*
|
|
18
|
+
* Accent activation:
|
|
19
|
+
* Set data-tool="<name>" on <html> to load that tool's accent scale.
|
|
20
|
+
* Default accent (no data-tool) = barn rose-red.
|
|
21
|
+
*
|
|
22
|
+
* Extracted from working UIs:
|
|
23
|
+
* - barn/public/index.html (accent: #f43f5e rose — lightened from #e11d48 for WCAG AA)
|
|
24
|
+
* - wheat/public/index.html (accent: #fbbf24 amber)
|
|
25
|
+
* - farmer/public/index.html (accent: #22c55e emerald)
|
|
26
|
+
* - grainulation/public/index.html (accent: #9ca3af neutral)
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
/* ══════════════════════════════════════════════════════════════════════════════
|
|
31
|
+
LAYER 1 — BASE TOKENS
|
|
32
|
+
Shared across every tool. Extracted from wheat + barn + farmer + grainulation.
|
|
33
|
+
══════════════════════════════════════════════════════════════════════════════ */
|
|
34
|
+
|
|
35
|
+
:root {
|
|
36
|
+
/* ── Backgrounds (dark tier) ──
|
|
37
|
+
#0a0e1a is universal across all four UIs.
|
|
38
|
+
bg2/bg3/bg4 from wheat + grainulation (Tailwind Slate scale). */
|
|
39
|
+
--bg: #0a0e1a;
|
|
40
|
+
--bg2: #111827;
|
|
41
|
+
--bg3: #1e293b;
|
|
42
|
+
--bg4: #334155;
|
|
43
|
+
|
|
44
|
+
/* ── Foregrounds ──
|
|
45
|
+
fg/fg2/fg3 from wheat + grainulation.
|
|
46
|
+
Barn used --text:#e8ecf1 (close to fg); standardized to #e2e8f0. */
|
|
47
|
+
--fg: #e2e8f0;
|
|
48
|
+
--fg2: #94a3b8;
|
|
49
|
+
--fg3: #64748b;
|
|
50
|
+
|
|
51
|
+
/* ── Backward-compat aliases ──
|
|
52
|
+
Barn-originated names still used in barn + farmer inline styles. */
|
|
53
|
+
--text: var(--fg);
|
|
54
|
+
--muted: var(--fg2);
|
|
55
|
+
--dim: var(--fg3);
|
|
56
|
+
|
|
57
|
+
/* ── Borders ──
|
|
58
|
+
Wheat/grainulation use solid #1e293b; barn/farmer use rgba.
|
|
59
|
+
Provide both — --border is the structural one, --border-subtle for overlays. */
|
|
60
|
+
--border: #1e293b;
|
|
61
|
+
--border-subtle: rgba(255, 255, 255, 0.08);
|
|
62
|
+
|
|
63
|
+
/* ── Glass (farmer-originated, useful for overlays) ── */
|
|
64
|
+
--glass: rgba(255, 255, 255, 0.08);
|
|
65
|
+
--glass-border: rgba(255, 255, 255, 0.12);
|
|
66
|
+
|
|
67
|
+
/* ── Radii ── (from wheat + barn + grainulation, converged) */
|
|
68
|
+
--radius: 8px;
|
|
69
|
+
--radius-sm: 4px;
|
|
70
|
+
--radius-lg: 12px;
|
|
71
|
+
--radius-full: 9999px;
|
|
72
|
+
|
|
73
|
+
/* ── Typography ──
|
|
74
|
+
Sans from barn/farmer; mono from wheat. Both used across UIs. */
|
|
75
|
+
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
|
|
76
|
+
--font-mono: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
|
77
|
+
--text-xs: 9px;
|
|
78
|
+
--text-sm: 10px;
|
|
79
|
+
--text-base: 12px;
|
|
80
|
+
--text-md: 13px;
|
|
81
|
+
--text-lg: 15px;
|
|
82
|
+
--text-xl: 18px;
|
|
83
|
+
--line-height: 1.5;
|
|
84
|
+
|
|
85
|
+
/* ── Spacing ── */
|
|
86
|
+
--space-xs: 4px;
|
|
87
|
+
--space-sm: 8px;
|
|
88
|
+
--space-md: 12px;
|
|
89
|
+
--space-lg: 16px;
|
|
90
|
+
--space-xl: 24px;
|
|
91
|
+
--space-2xl: 32px;
|
|
92
|
+
|
|
93
|
+
/* ── Transitions ── */
|
|
94
|
+
--transition-fast: 0.1s ease;
|
|
95
|
+
--transition-base: 0.15s ease;
|
|
96
|
+
--transition-slow: 0.3s ease;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
/* ══════════════════════════════════════════════════════════════════════════════
|
|
101
|
+
LAYER 2 — SEMANTIC TOKENS
|
|
102
|
+
Status, feedback, and accent. Accent defaults to barn rose-red.
|
|
103
|
+
══════════════════════════════════════════════════════════════════════════════ */
|
|
104
|
+
|
|
105
|
+
:root {
|
|
106
|
+
/* ── Status colors ──
|
|
107
|
+
Converged values: green from barn/farmer (#22c55e) vs wheat (#34d399).
|
|
108
|
+
Using the brighter #22c55e for success (used for connection dots);
|
|
109
|
+
keeping #34d399 as --success-light for softer contexts. */
|
|
110
|
+
--success: #22c55e;
|
|
111
|
+
--success-light: #34d399;
|
|
112
|
+
--warning: #f59e0b;
|
|
113
|
+
--error: #f87171;
|
|
114
|
+
--info: #60a5fa;
|
|
115
|
+
|
|
116
|
+
/* ── Semantic palette (named colors, used across UIs) ── */
|
|
117
|
+
--green: #22c55e;
|
|
118
|
+
--red: #f87171;
|
|
119
|
+
--blue: #60a5fa;
|
|
120
|
+
--purple: #a78bfa;
|
|
121
|
+
--orange: #fb923c;
|
|
122
|
+
--cyan: #22d3ee;
|
|
123
|
+
|
|
124
|
+
/* ── Accent (default: barn rose) ──
|
|
125
|
+
Overridden per-tool via [data-tool] selectors below.
|
|
126
|
+
--accent-bg is the very faint tint for hover/active states.
|
|
127
|
+
Lightened from #e11d48 to #f43f5e for WCAG AA (5.24:1 vs #0a0e1a). */
|
|
128
|
+
--accent: #f43f5e;
|
|
129
|
+
--accent-light: #fb7185;
|
|
130
|
+
--accent-dim: rgba(244, 63, 94, 0.12);
|
|
131
|
+
--accent-bg: rgba(244, 63, 94, 0.06);
|
|
132
|
+
--accent-border: rgba(244, 63, 94, 0.25);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
/* ══════════════════════════════════════════════════════════════════════════════
|
|
137
|
+
LAYER 3 — TOOL-SPECIFIC ACCENT SCALES
|
|
138
|
+
Each tool gets a 5-weight ramp (50/200/400/600/800) plus the four
|
|
139
|
+
semantic accent tokens. Activated via data-tool="<name>" on <html>.
|
|
140
|
+
══════════════════════════════════════════════════════════════════════════════ */
|
|
141
|
+
|
|
142
|
+
/* ── wheat: amber (#fbbf24) ── */
|
|
143
|
+
[data-tool="wheat"] {
|
|
144
|
+
--accent-50: #fffbeb;
|
|
145
|
+
--accent-200: #fde68a;
|
|
146
|
+
--accent-400: #fbbf24;
|
|
147
|
+
--accent-600: #d97706;
|
|
148
|
+
--accent-800: #92400e;
|
|
149
|
+
--accent: #fbbf24;
|
|
150
|
+
--accent-light: #fcd34d;
|
|
151
|
+
--accent-dim: rgba(251, 191, 36, 0.08);
|
|
152
|
+
--accent-bg: rgba(251, 191, 36, 0.06);
|
|
153
|
+
--accent-border: rgba(251, 191, 36, 0.25);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* ── barn: rose (#f43f5e) — default, repeated for explicitness ──
|
|
157
|
+
Lightened from #e11d48 for WCAG AA compliance (5.24:1 vs #0a0e1a). */
|
|
158
|
+
[data-tool="barn"] {
|
|
159
|
+
--accent-50: #fff1f2;
|
|
160
|
+
--accent-200: #fecdd3;
|
|
161
|
+
--accent-400: #fb7185;
|
|
162
|
+
--accent-600: #f43f5e;
|
|
163
|
+
--accent-800: #be123c;
|
|
164
|
+
--accent: #f43f5e;
|
|
165
|
+
--accent-light: #fb7185;
|
|
166
|
+
--accent-dim: rgba(244, 63, 94, 0.12);
|
|
167
|
+
--accent-bg: rgba(244, 63, 94, 0.06);
|
|
168
|
+
--accent-border: rgba(244, 63, 94, 0.25);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* ── farmer: emerald (#22c55e) ── */
|
|
172
|
+
[data-tool="farmer"] {
|
|
173
|
+
--accent-50: #ecfdf5;
|
|
174
|
+
--accent-200: #a7f3d0;
|
|
175
|
+
--accent-400: #34d399;
|
|
176
|
+
--accent-600: #16a34a;
|
|
177
|
+
--accent-800: #166534;
|
|
178
|
+
--accent: #22c55e;
|
|
179
|
+
--accent-light: #4ade80;
|
|
180
|
+
--accent-dim: rgba(34, 197, 94, 0.10);
|
|
181
|
+
--accent-bg: rgba(34, 197, 94, 0.06);
|
|
182
|
+
--accent-border: rgba(34, 197, 94, 0.25);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/* ── mill: blue (#3b82f6) ── */
|
|
186
|
+
[data-tool="mill"] {
|
|
187
|
+
--accent-50: #eff6ff;
|
|
188
|
+
--accent-200: #bfdbfe;
|
|
189
|
+
--accent-400: #60a5fa;
|
|
190
|
+
--accent-600: #2563eb;
|
|
191
|
+
--accent-800: #1e40af;
|
|
192
|
+
--accent: #3b82f6;
|
|
193
|
+
--accent-light: #60a5fa;
|
|
194
|
+
--accent-dim: rgba(59, 130, 246, 0.10);
|
|
195
|
+
--accent-bg: rgba(59, 130, 246, 0.06);
|
|
196
|
+
--accent-border: rgba(59, 130, 246, 0.25);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* ── silo: purple (#a78bfa) ── */
|
|
200
|
+
[data-tool="silo"] {
|
|
201
|
+
--accent-50: #f5f3ff;
|
|
202
|
+
--accent-200: #ddd6fe;
|
|
203
|
+
--accent-400: #a78bfa;
|
|
204
|
+
--accent-600: #7c3aed;
|
|
205
|
+
--accent-800: #5b21b6;
|
|
206
|
+
--accent: #a78bfa;
|
|
207
|
+
--accent-light: #c4b5fd;
|
|
208
|
+
--accent-dim: rgba(167, 139, 250, 0.10);
|
|
209
|
+
--accent-bg: rgba(167, 139, 250, 0.06);
|
|
210
|
+
--accent-border: rgba(167, 139, 250, 0.25);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* ── harvest: orange (#fb923c) ── */
|
|
214
|
+
[data-tool="harvest"] {
|
|
215
|
+
--accent-50: #fff7ed;
|
|
216
|
+
--accent-200: #fed7aa;
|
|
217
|
+
--accent-400: #fb923c;
|
|
218
|
+
--accent-600: #ea580c;
|
|
219
|
+
--accent-800: #9a3412;
|
|
220
|
+
--accent: #fb923c;
|
|
221
|
+
--accent-light: #fdba74;
|
|
222
|
+
--accent-dim: rgba(251, 146, 60, 0.10);
|
|
223
|
+
--accent-bg: rgba(251, 146, 60, 0.06);
|
|
224
|
+
--accent-border: rgba(251, 146, 60, 0.25);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/* ── orchard: cyan (#22d3ee) ── */
|
|
228
|
+
[data-tool="orchard"] {
|
|
229
|
+
--accent-50: #ecfeff;
|
|
230
|
+
--accent-200: #a5f3fc;
|
|
231
|
+
--accent-400: #22d3ee;
|
|
232
|
+
--accent-600: #0891b2;
|
|
233
|
+
--accent-800: #155e75;
|
|
234
|
+
--accent: #22d3ee;
|
|
235
|
+
--accent-light: #67e8f9;
|
|
236
|
+
--accent-dim: rgba(34, 211, 238, 0.10);
|
|
237
|
+
--accent-bg: rgba(34, 211, 238, 0.06);
|
|
238
|
+
--accent-border: rgba(34, 211, 238, 0.25);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* ── grainulation: neutral/white (#9ca3af) ── */
|
|
242
|
+
[data-tool="grainulation"],
|
|
243
|
+
[data-tool="grainulation"] {
|
|
244
|
+
--accent-50: #f9fafb;
|
|
245
|
+
--accent-200: #e5e7eb;
|
|
246
|
+
--accent-400: #9ca3af;
|
|
247
|
+
--accent-600: #6b7280;
|
|
248
|
+
--accent-800: #374151;
|
|
249
|
+
--accent: #9ca3af;
|
|
250
|
+
--accent-light: #d1d5db;
|
|
251
|
+
--accent-dim: rgba(156, 163, 175, 0.10);
|
|
252
|
+
--accent-bg: rgba(156, 163, 175, 0.06);
|
|
253
|
+
--accent-border: rgba(156, 163, 175, 0.25);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
/* ══════════════════════════════════════════════════════════════════════════════
|
|
258
|
+
RESET + BASE STYLES — shared across all tool UIs
|
|
259
|
+
══════════════════════════════════════════════════════════════════════════════ */
|
|
260
|
+
|
|
261
|
+
*,
|
|
262
|
+
*::before,
|
|
263
|
+
*::after {
|
|
264
|
+
box-sizing: border-box;
|
|
265
|
+
margin: 0;
|
|
266
|
+
padding: 0;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
html, body {
|
|
270
|
+
height: 100%;
|
|
271
|
+
overflow: hidden;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
body {
|
|
275
|
+
font-family: var(--font-sans);
|
|
276
|
+
background: var(--bg);
|
|
277
|
+
color: var(--fg);
|
|
278
|
+
font-size: var(--text-md);
|
|
279
|
+
line-height: var(--line-height);
|
|
280
|
+
-webkit-font-smoothing: antialiased;
|
|
281
|
+
-moz-osx-font-smoothing: grayscale;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
|
|
285
|
+
/* ── Scrollbar (webkit) ── */
|
|
286
|
+
|
|
287
|
+
::-webkit-scrollbar {
|
|
288
|
+
width: 6px;
|
|
289
|
+
height: 6px;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
::-webkit-scrollbar-track {
|
|
293
|
+
background: transparent;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
::-webkit-scrollbar-thumb {
|
|
297
|
+
background: var(--bg4);
|
|
298
|
+
border-radius: 3px;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
::-webkit-scrollbar-thumb:hover {
|
|
302
|
+
background: var(--fg3);
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
|
|
306
|
+
/* ── Shared components ── */
|
|
307
|
+
|
|
308
|
+
.conn-dot,
|
|
309
|
+
.connection-dot {
|
|
310
|
+
width: 8px;
|
|
311
|
+
height: 8px;
|
|
312
|
+
border-radius: 50%;
|
|
313
|
+
background: var(--green);
|
|
314
|
+
display: inline-block;
|
|
315
|
+
flex-shrink: 0;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.conn-dot.disconnected,
|
|
319
|
+
.connection-dot.disconnected {
|
|
320
|
+
background: var(--red);
|
|
321
|
+
}
|