@grainulation/grainulation 1.0.0 → 1.0.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.
@@ -26,7 +26,6 @@
26
26
  * - grainulation/public/index.html (accent: #9ca3af neutral)
27
27
  */
28
28
 
29
-
30
29
  /* ══════════════════════════════════════════════════════════════════════════════
31
30
  LAYER 1 — BASE TOKENS
32
31
  Shared across every tool. Extracted from wheat + barn + farmer + grainulation.
@@ -36,7 +35,7 @@
36
35
  /* ── Backgrounds (dark tier) ──
37
36
  #0a0e1a is universal across all four UIs.
38
37
  bg2/bg3/bg4 from wheat + grainulation (Tailwind Slate scale). */
39
- --bg: #0a0e1a;
38
+ --bg: #0a0e1a;
40
39
  --bg2: #111827;
41
40
  --bg3: #1e293b;
42
41
  --bg4: #334155;
@@ -44,50 +43,50 @@
44
43
  /* ── Foregrounds ──
45
44
  fg/fg2/fg3 from wheat + grainulation.
46
45
  Barn used --text:#e8ecf1 (close to fg); standardized to #e2e8f0. */
47
- --fg: #e2e8f0;
46
+ --fg: #e2e8f0;
48
47
  --fg2: #94a3b8;
49
48
  --fg3: #64748b;
50
49
 
51
50
  /* ── Backward-compat aliases ──
52
51
  Barn-originated names still used in barn + farmer inline styles. */
53
- --text: var(--fg);
52
+ --text: var(--fg);
54
53
  --muted: var(--fg2);
55
- --dim: var(--fg3);
54
+ --dim: var(--fg3);
56
55
 
57
56
  /* ── Borders ──
58
57
  Wheat/grainulation use solid #1e293b; barn/farmer use rgba.
59
58
  Provide both — --border is the structural one, --border-subtle for overlays. */
60
- --border: #1e293b;
59
+ --border: #1e293b;
61
60
  --border-subtle: rgba(255, 255, 255, 0.08);
62
61
 
63
62
  /* ── Glass (farmer-originated, useful for overlays) ── */
64
- --glass: rgba(255, 255, 255, 0.08);
63
+ --glass: rgba(255, 255, 255, 0.08);
65
64
  --glass-border: rgba(255, 255, 255, 0.12);
66
65
 
67
66
  /* ── Radii ── (from wheat + barn + grainulation, converged) */
68
- --radius: 8px;
69
- --radius-sm: 4px;
70
- --radius-lg: 12px;
67
+ --radius: 8px;
68
+ --radius-sm: 4px;
69
+ --radius-lg: 12px;
71
70
  --radius-full: 9999px;
72
71
 
73
72
  /* ── Typography ──
74
73
  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;
74
+ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
75
+ --font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code", "Consolas", monospace;
76
+ --text-xs: 9px;
77
+ --text-sm: 10px;
79
78
  --text-base: 12px;
80
- --text-md: 13px;
81
- --text-lg: 15px;
82
- --text-xl: 18px;
79
+ --text-md: 13px;
80
+ --text-lg: 15px;
81
+ --text-xl: 18px;
83
82
  --line-height: 1.5;
84
83
 
85
84
  /* ── Spacing ── */
86
- --space-xs: 4px;
87
- --space-sm: 8px;
88
- --space-md: 12px;
89
- --space-lg: 16px;
90
- --space-xl: 24px;
85
+ --space-xs: 4px;
86
+ --space-sm: 8px;
87
+ --space-md: 12px;
88
+ --space-lg: 16px;
89
+ --space-xl: 24px;
91
90
  --space-2xl: 32px;
92
91
 
93
92
  /* ── Transitions ── */
@@ -96,7 +95,6 @@
96
95
  --transition-slow: 0.3s ease;
97
96
  }
98
97
 
99
-
100
98
  /* ══════════════════════════════════════════════════════════════════════════════
101
99
  LAYER 2 — SEMANTIC TOKENS
102
100
  Status, feedback, and accent. Accent defaults to barn rose-red.
@@ -107,32 +105,31 @@
107
105
  Converged values: green from barn/farmer (#22c55e) vs wheat (#34d399).
108
106
  Using the brighter #22c55e for success (used for connection dots);
109
107
  keeping #34d399 as --success-light for softer contexts. */
110
- --success: #22c55e;
108
+ --success: #22c55e;
111
109
  --success-light: #34d399;
112
- --warning: #f59e0b;
113
- --error: #f87171;
114
- --info: #60a5fa;
110
+ --warning: #f59e0b;
111
+ --error: #f87171;
112
+ --info: #60a5fa;
115
113
 
116
114
  /* ── Semantic palette (named colors, used across UIs) ── */
117
- --green: #22c55e;
118
- --red: #f87171;
119
- --blue: #60a5fa;
115
+ --green: #22c55e;
116
+ --red: #f87171;
117
+ --blue: #60a5fa;
120
118
  --purple: #a78bfa;
121
119
  --orange: #fb923c;
122
- --cyan: #22d3ee;
120
+ --cyan: #22d3ee;
123
121
 
124
122
  /* ── Accent (default: barn rose) ──
125
123
  Overridden per-tool via [data-tool] selectors below.
126
124
  --accent-bg is the very faint tint for hover/active states.
127
125
  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);
126
+ --accent: #f43f5e;
127
+ --accent-light: #fb7185;
128
+ --accent-dim: rgba(244, 63, 94, 0.12);
129
+ --accent-bg: rgba(244, 63, 94, 0.06);
132
130
  --accent-border: rgba(244, 63, 94, 0.25);
133
131
  }
134
132
 
135
-
136
133
  /* ══════════════════════════════════════════════════════════════════════════════
137
134
  LAYER 3 — TOOL-SPECIFIC ACCENT SCALES
138
135
  Each tool gets a 5-weight ramp (50/200/400/600/800) plus the four
@@ -141,119 +138,118 @@
141
138
 
142
139
  /* ── wheat: amber (#fbbf24) ── */
143
140
  [data-tool="wheat"] {
144
- --accent-50: #fffbeb;
141
+ --accent-50: #fffbeb;
145
142
  --accent-200: #fde68a;
146
143
  --accent-400: #fbbf24;
147
144
  --accent-600: #d97706;
148
145
  --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);
146
+ --accent: #fbbf24;
147
+ --accent-light: #fcd34d;
148
+ --accent-dim: rgba(251, 191, 36, 0.08);
149
+ --accent-bg: rgba(251, 191, 36, 0.06);
153
150
  --accent-border: rgba(251, 191, 36, 0.25);
154
151
  }
155
152
 
156
153
  /* ── barn: rose (#f43f5e) — default, repeated for explicitness ──
157
154
  Lightened from #e11d48 for WCAG AA compliance (5.24:1 vs #0a0e1a). */
158
155
  [data-tool="barn"] {
159
- --accent-50: #fff1f2;
156
+ --accent-50: #fff1f2;
160
157
  --accent-200: #fecdd3;
161
158
  --accent-400: #fb7185;
162
159
  --accent-600: #f43f5e;
163
160
  --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);
161
+ --accent: #f43f5e;
162
+ --accent-light: #fb7185;
163
+ --accent-dim: rgba(244, 63, 94, 0.12);
164
+ --accent-bg: rgba(244, 63, 94, 0.06);
168
165
  --accent-border: rgba(244, 63, 94, 0.25);
169
166
  }
170
167
 
171
168
  /* ── farmer: emerald (#22c55e) ── */
172
169
  [data-tool="farmer"] {
173
- --accent-50: #ecfdf5;
170
+ --accent-50: #ecfdf5;
174
171
  --accent-200: #a7f3d0;
175
172
  --accent-400: #34d399;
176
173
  --accent-600: #16a34a;
177
174
  --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);
175
+ --accent: #22c55e;
176
+ --accent-light: #4ade80;
177
+ --accent-dim: rgba(34, 197, 94, 0.1);
178
+ --accent-bg: rgba(34, 197, 94, 0.06);
182
179
  --accent-border: rgba(34, 197, 94, 0.25);
183
180
  }
184
181
 
185
182
  /* ── mill: blue (#3b82f6) ── */
186
183
  [data-tool="mill"] {
187
- --accent-50: #eff6ff;
184
+ --accent-50: #eff6ff;
188
185
  --accent-200: #bfdbfe;
189
186
  --accent-400: #60a5fa;
190
187
  --accent-600: #2563eb;
191
188
  --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);
189
+ --accent: #3b82f6;
190
+ --accent-light: #60a5fa;
191
+ --accent-dim: rgba(59, 130, 246, 0.1);
192
+ --accent-bg: rgba(59, 130, 246, 0.06);
196
193
  --accent-border: rgba(59, 130, 246, 0.25);
197
194
  }
198
195
 
199
196
  /* ── silo: purple (#a78bfa) ── */
200
197
  [data-tool="silo"] {
201
- --accent-50: #f5f3ff;
198
+ --accent-50: #f5f3ff;
202
199
  --accent-200: #ddd6fe;
203
200
  --accent-400: #a78bfa;
204
201
  --accent-600: #7c3aed;
205
202
  --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);
203
+ --accent: #a78bfa;
204
+ --accent-light: #c4b5fd;
205
+ --accent-dim: rgba(167, 139, 250, 0.1);
206
+ --accent-bg: rgba(167, 139, 250, 0.06);
210
207
  --accent-border: rgba(167, 139, 250, 0.25);
211
208
  }
212
209
 
213
210
  /* ── harvest: orange (#fb923c) ── */
214
211
  [data-tool="harvest"] {
215
- --accent-50: #fff7ed;
212
+ --accent-50: #fff7ed;
216
213
  --accent-200: #fed7aa;
217
214
  --accent-400: #fb923c;
218
215
  --accent-600: #ea580c;
219
216
  --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);
217
+ --accent: #fb923c;
218
+ --accent-light: #fdba74;
219
+ --accent-dim: rgba(251, 146, 60, 0.1);
220
+ --accent-bg: rgba(251, 146, 60, 0.06);
224
221
  --accent-border: rgba(251, 146, 60, 0.25);
225
222
  }
226
223
 
227
224
  /* ── orchard: cyan (#22d3ee) ── */
228
225
  [data-tool="orchard"] {
229
- --accent-50: #ecfeff;
226
+ --accent-50: #ecfeff;
230
227
  --accent-200: #a5f3fc;
231
228
  --accent-400: #22d3ee;
232
229
  --accent-600: #0891b2;
233
230
  --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);
231
+ --accent: #22d3ee;
232
+ --accent-light: #67e8f9;
233
+ --accent-dim: rgba(34, 211, 238, 0.1);
234
+ --accent-bg: rgba(34, 211, 238, 0.06);
238
235
  --accent-border: rgba(34, 211, 238, 0.25);
239
236
  }
240
237
 
241
238
  /* ── grainulation: neutral/white (#9ca3af) ── */
242
239
  [data-tool="grainulation"],
243
240
  [data-tool="grainulation"] {
244
- --accent-50: #f9fafb;
241
+ --accent-50: #f9fafb;
245
242
  --accent-200: #e5e7eb;
246
243
  --accent-400: #9ca3af;
247
244
  --accent-600: #6b7280;
248
245
  --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);
246
+ --accent: #9ca3af;
247
+ --accent-light: #d1d5db;
248
+ --accent-dim: rgba(156, 163, 175, 0.1);
249
+ --accent-bg: rgba(156, 163, 175, 0.06);
253
250
  --accent-border: rgba(156, 163, 175, 0.25);
254
251
  }
255
252
 
256
-
257
253
  /* ══════════════════════════════════════════════════════════════════════════════
258
254
  RESET + BASE STYLES — shared across all tool UIs
259
255
  ══════════════════════════════════════════════════════════════════════════════ */
@@ -266,7 +262,8 @@
266
262
  padding: 0;
267
263
  }
268
264
 
269
- html, body {
265
+ html,
266
+ body {
270
267
  height: 100%;
271
268
  overflow: hidden;
272
269
  }
@@ -281,7 +278,6 @@ body {
281
278
  -moz-osx-font-smoothing: grayscale;
282
279
  }
283
280
 
284
-
285
281
  /* ── Scrollbar (webkit) ── */
286
282
 
287
283
  ::-webkit-scrollbar {
@@ -302,7 +298,6 @@ body {
302
298
  background: var(--fg3);
303
299
  }
304
300
 
305
-
306
301
  /* ── Shared components ── */
307
302
 
308
303
  .conn-dot,