@zoneflow/themes 0.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.
Files changed (6) hide show
  1. package/README.md +45 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +1 -0
  4. package/dist/presets.d.ts +48 -0
  5. package/dist/presets.js +591 -0
  6. package/package.json +26 -0
package/README.md ADDED
@@ -0,0 +1,45 @@
1
+ # @zoneflow/themes
2
+
3
+ `@zoneflow/themes`는 Zoneflow용 기본 프리셋 테마 묶음입니다.
4
+
5
+ 포함 프리셋:
6
+
7
+ - `dark`
8
+ - `ocean`
9
+ - `sunset`
10
+ - `light`
11
+ - `party`
12
+ - `korean-culture`
13
+
14
+ ## 설치
15
+
16
+ ```bash
17
+ pnpm add @zoneflow/themes @zoneflow/react @zoneflow/core
18
+ ```
19
+
20
+ ## 사용 예제
21
+
22
+ ```tsx
23
+ import { UniverseEditorCanvas, DefaultEditorToolbar } from "@zoneflow/react";
24
+ import { oceanPreset } from "@zoneflow/themes";
25
+
26
+ <DefaultEditorToolbar editor={editor} theme={oceanPreset.editorTheme} />
27
+
28
+ <UniverseEditorCanvas
29
+ editor={editor}
30
+ theme={oceanPreset.rendererTheme}
31
+ editorConfig={{
32
+ theme: oceanPreset.editorTheme,
33
+ }}
34
+ />
35
+ ```
36
+
37
+ 프리셋은 다음 구조를 가집니다.
38
+
39
+ - `rendererTheme`
40
+ - `editorTheme`
41
+ - `surfacePalette`
42
+
43
+ `surfacePalette`는 playground 같은 샘플 앱이나 자체 shell UI에 톤을 맞출 때 사용할 수 있는 보조 팔레트입니다.
44
+
45
+ 레포지토리: [github.com/groobee/zoneflow](https://github.com/groobee/zoneflow)
package/dist/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./presets";
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ export * from "./presets";
package/dist/presets.d.ts ADDED
@@ -0,0 +1,48 @@
1
+ import type { ZoneflowEditorThemeInput } from "@zoneflow/react";
2
+ import type { ZoneflowTheme } from "@zoneflow/renderer-dom";
3
+ export type ZoneflowThemePresetId = "dark" | "ocean" | "sunset" | "light" | "party" | "korean-culture";
4
+ export type ZoneflowThemePreset = {
5
+ id: ZoneflowThemePresetId;
6
+ label: string;
7
+ description: string;
8
+ rendererTheme: Partial<ZoneflowTheme>;
9
+ editorTheme: ZoneflowEditorThemeInput;
10
+ surfacePalette: {
11
+ canvasBackground: string;
12
+ topbar: {
13
+ background: string;
14
+ border: string;
15
+ controlBackground: string;
16
+ controlBorder: string;
17
+ controlText: string;
18
+ };
19
+ sidebar: {
20
+ background: string;
21
+ border: string;
22
+ text: string;
23
+ mutedText: string;
24
+ sectionTitle: string;
25
+ cardBackground: string;
26
+ cardBorder: string;
27
+ controlBackground: string;
28
+ controlBorder: string;
29
+ controlText: string;
30
+ accent: string;
31
+ };
32
+ };
33
+ };
34
+ declare const darkPreset: ZoneflowThemePreset;
35
+ declare const oceanPreset: ZoneflowThemePreset;
36
+ declare const sunsetPreset: ZoneflowThemePreset;
37
+ declare const lightPreset: ZoneflowThemePreset;
38
+ declare const partyPreset: ZoneflowThemePreset;
39
+ declare const koreanCulturePreset: ZoneflowThemePreset;
40
+ export declare const zoneflowThemePresets: {
41
+ dark: ZoneflowThemePreset;
42
+ ocean: ZoneflowThemePreset;
43
+ sunset: ZoneflowThemePreset;
44
+ light: ZoneflowThemePreset;
45
+ party: ZoneflowThemePreset;
46
+ "korean-culture": ZoneflowThemePreset;
47
+ };
48
+ export { darkPreset, oceanPreset, sunsetPreset, lightPreset, partyPreset, koreanCulturePreset, };
package/dist/presets.js ADDED
@@ -0,0 +1,591 @@
1
+ const chromeOverlay = "linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 100%)";
2
+ const chromeGlow = "radial-gradient(circle, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.22) 36%, rgba(255,255,255,0) 72%)";
3
+ const darkPreset = {
4
+ id: "dark",
5
+ label: "Dark",
6
+ description: "Dense dark operations board.",
7
+ rendererTheme: {
8
+ background: "#020617",
9
+ zoneTitle: "#f8fafc",
10
+ zoneSubtext: "#94a3b8",
11
+ zoneContainerBorder: "#334155",
12
+ zoneActionBorder: "#38bdf8",
13
+ zoneBadgeBg: "#0f172a",
14
+ pathLabel: "#f8fafc",
15
+ pathEdge: "#64748b",
16
+ pathInboundEdge: "#22c55e",
17
+ selection: "#38bdf8",
18
+ surface: {
19
+ chrome: {
20
+ overlay: "linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 100%)",
21
+ glow: "radial-gradient(circle, rgba(56,189,248,0.16) 0%, rgba(56,189,248,0.04) 36%, rgba(56,189,248,0) 72%)",
22
+ accentFade: "rgba(15, 23, 42, 0.2)",
23
+ },
24
+ zone: {
25
+ background: "linear-gradient(180deg, rgba(15,23,42,0.98) 0%, rgba(2,6,23,0.98) 100%)",
26
+ shadow: "0 18px 34px rgba(2, 6, 23, 0.42), 0 3px 8px rgba(2, 6, 23, 0.26)",
27
+ containerAccent: "rgba(56, 189, 248, 0.18)",
28
+ actionAccent: "rgba(34, 197, 94, 0.18)",
29
+ },
30
+ path: {
31
+ background: "linear-gradient(180deg, rgba(15,23,42,0.98) 0%, rgba(3,7,18,0.98) 100%)",
32
+ shadow: "0 16px 26px rgba(2, 6, 23, 0.42), 0 3px 8px rgba(2, 6, 23, 0.26)",
33
+ accent: "rgba(56, 189, 248, 0.18)",
34
+ },
35
+ anchor: {
36
+ background: "linear-gradient(180deg, rgba(15,23,42,0.99) 0%, rgba(3,7,18,0.98) 100%)",
37
+ shadow: "0 18px 28px rgba(2, 6, 23, 0.34), inset 0 1px 0 rgba(255,255,255,0.04)",
38
+ containerAccent: "#38bdf8",
39
+ actionAccent: "#22c55e",
40
+ },
41
+ },
42
+ status: {
43
+ info: {
44
+ border: "1px solid rgba(250, 204, 21, 0.28)",
45
+ background: "linear-gradient(180deg, rgba(113,63,18,0.88) 0%, rgba(120,53,15,0.82) 100%)",
46
+ color: "#fde68a",
47
+ shadow: "0 6px 14px rgba(120, 53, 15, 0.18)",
48
+ },
49
+ warning: {
50
+ border: "1px solid rgba(248, 113, 113, 0.28)",
51
+ background: "linear-gradient(180deg, rgba(127,29,29,0.88) 0%, rgba(153,27,27,0.82) 100%)",
52
+ color: "#fecaca",
53
+ shadow: "0 6px 14px rgba(127, 29, 29, 0.18)",
54
+ },
55
+ },
56
+ },
57
+ editorTheme: {
58
+ hud: {
59
+ panelBackground: "rgba(2, 6, 23, 0.92)",
60
+ panelBorder: "1px solid rgba(71, 85, 105, 0.42)",
61
+ buttonBackground: "rgba(15, 23, 42, 0.86)",
62
+ buttonBorder: "1px solid rgba(71, 85, 105, 0.42)",
63
+ buttonText: "#e2e8f0",
64
+ buttonActiveBackground: "#0f766e",
65
+ buttonActiveBorder: "1px solid rgba(52, 211, 153, 0.44)",
66
+ },
67
+ overlay: {
68
+ helpPanel: {
69
+ background: "rgba(2, 6, 23, 0.92)",
70
+ border: "1px solid rgba(71, 85, 105, 0.42)",
71
+ },
72
+ floatingToolbar: {
73
+ background: "rgba(2, 6, 23, 0.96)",
74
+ border: "1px solid rgba(71, 85, 105, 0.32)",
75
+ },
76
+ dialog: {
77
+ background: "rgba(15, 23, 42, 0.98)",
78
+ border: "1px solid rgba(51, 65, 85, 0.4)",
79
+ titleText: "#f8fafc",
80
+ secondaryButton: {
81
+ background: "#0f172a",
82
+ border: "1px solid rgba(71, 85, 105, 0.42)",
83
+ color: "#cbd5e1",
84
+ },
85
+ },
86
+ toast: {
87
+ background: "rgba(2, 6, 23, 0.98)",
88
+ border: "1px solid rgba(51, 65, 85, 0.38)",
89
+ },
90
+ },
91
+ },
92
+ surfacePalette: {
93
+ canvasBackground: "#020617",
94
+ topbar: {
95
+ background: "#020617",
96
+ border: "1px solid rgba(71, 85, 105, 0.38)",
97
+ controlBackground: "#0f172a",
98
+ controlBorder: "1px solid rgba(71, 85, 105, 0.42)",
99
+ controlText: "#e2e8f0",
100
+ },
101
+ sidebar: {
102
+ background: "#0b1220",
103
+ border: "1px solid rgba(71, 85, 105, 0.24)",
104
+ text: "#e2e8f0",
105
+ mutedText: "#94a3b8",
106
+ sectionTitle: "#cbd5e1",
107
+ cardBackground: "rgba(15, 23, 42, 0.72)",
108
+ cardBorder: "rgba(148, 163, 184, 0.16)",
109
+ controlBackground: "#1e293b",
110
+ controlBorder: "1px solid rgba(148, 163, 184, 0.2)",
111
+ controlText: "#e2e8f0",
112
+ accent: "#22c55e",
113
+ },
114
+ },
115
+ };
116
+ const oceanPreset = {
117
+ id: "ocean",
118
+ label: "Ocean",
119
+ description: "Clean cyan workflow preset.",
120
+ rendererTheme: {
121
+ background: "#effcfb",
122
+ zoneTitle: "#082f49",
123
+ zoneSubtext: "#155e75",
124
+ zoneContainerBorder: "#67e8f9",
125
+ zoneActionBorder: "#06b6d4",
126
+ zoneBadgeBg: "#cffafe",
127
+ pathLabel: "#0f172a",
128
+ pathEdge: "#0891b2",
129
+ pathInboundEdge: "#0f766e",
130
+ selection: "#0ea5e9",
131
+ surface: {
132
+ chrome: {
133
+ overlay: chromeOverlay,
134
+ glow: chromeGlow,
135
+ accentFade: "rgba(207, 250, 254, 0.18)",
136
+ },
137
+ zone: {
138
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(236,254,255,0.98) 100%)",
139
+ shadow: "0 18px 34px rgba(8, 47, 73, 0.08), 0 3px 8px rgba(8, 47, 73, 0.05)",
140
+ containerAccent: "rgba(14, 165, 233, 0.14)",
141
+ actionAccent: "rgba(6, 182, 212, 0.18)",
142
+ },
143
+ path: {
144
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(240,253,250,0.98) 100%)",
145
+ shadow: "0 16px 26px rgba(8, 47, 73, 0.08), 0 3px 8px rgba(8, 47, 73, 0.05)",
146
+ accent: "rgba(45, 212, 191, 0.16)",
147
+ },
148
+ anchor: {
149
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(236,254,255,0.98) 100%)",
150
+ shadow: "0 18px 28px rgba(8, 47, 73, 0.08), inset 0 1px 0 rgba(255,255,255,0.9)",
151
+ containerAccent: "#0ea5e9",
152
+ actionAccent: "#06b6d4",
153
+ },
154
+ },
155
+ },
156
+ editorTheme: {
157
+ hud: {
158
+ panelBackground: "rgba(8, 47, 73, 0.92)",
159
+ panelBorder: "1px solid rgba(103, 232, 249, 0.28)",
160
+ buttonBackground: "rgba(14, 116, 144, 0.78)",
161
+ buttonBorder: "1px solid rgba(103, 232, 249, 0.24)",
162
+ buttonText: "#ecfeff",
163
+ buttonActiveBackground: "#0891b2",
164
+ buttonActiveBorder: "1px solid rgba(165, 243, 252, 0.4)",
165
+ },
166
+ overlay: {
167
+ helpPanel: {
168
+ background: "rgba(8, 47, 73, 0.9)",
169
+ border: "1px solid rgba(103, 232, 249, 0.28)",
170
+ },
171
+ connectTarget: {
172
+ badgeBackground: "#0f766e",
173
+ },
174
+ dropTarget: {
175
+ badgeBackground: "#0891b2",
176
+ },
177
+ },
178
+ },
179
+ surfacePalette: {
180
+ canvasBackground: "#effcfb",
181
+ topbar: {
182
+ background: "#082f49",
183
+ border: "1px solid rgba(103, 232, 249, 0.2)",
184
+ controlBackground: "#0e7490",
185
+ controlBorder: "1px solid rgba(103, 232, 249, 0.24)",
186
+ controlText: "#ecfeff",
187
+ },
188
+ sidebar: {
189
+ background: "#082f49",
190
+ border: "1px solid rgba(103, 232, 249, 0.16)",
191
+ text: "#ecfeff",
192
+ mutedText: "#a5f3fc",
193
+ sectionTitle: "#cffafe",
194
+ cardBackground: "rgba(14, 116, 144, 0.34)",
195
+ cardBorder: "rgba(103, 232, 249, 0.16)",
196
+ controlBackground: "#0e7490",
197
+ controlBorder: "1px solid rgba(103, 232, 249, 0.24)",
198
+ controlText: "#ecfeff",
199
+ accent: "#06b6d4",
200
+ },
201
+ },
202
+ };
203
+ const sunsetPreset = {
204
+ id: "sunset",
205
+ label: "Sunset",
206
+ description: "Warm retention-oriented preset.",
207
+ rendererTheme: {
208
+ background: "#fff7ed",
209
+ zoneTitle: "#431407",
210
+ zoneSubtext: "#7c2d12",
211
+ zoneContainerBorder: "#fdba74",
212
+ zoneActionBorder: "#fb923c",
213
+ zoneBadgeBg: "#ffedd5",
214
+ pathLabel: "#431407",
215
+ pathEdge: "#c2410c",
216
+ pathInboundEdge: "#ea580c",
217
+ selection: "#ea580c",
218
+ surface: {
219
+ chrome: {
220
+ overlay: chromeOverlay,
221
+ glow: chromeGlow,
222
+ accentFade: "rgba(255, 237, 213, 0.14)",
223
+ },
224
+ zone: {
225
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(255,247,237,0.98) 100%)",
226
+ shadow: "0 18px 34px rgba(154, 52, 18, 0.10), 0 3px 8px rgba(154, 52, 18, 0.06)",
227
+ containerAccent: "rgba(251, 146, 60, 0.14)",
228
+ actionAccent: "rgba(249, 115, 22, 0.2)",
229
+ },
230
+ path: {
231
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(255,251,235,0.98) 100%)",
232
+ shadow: "0 16px 26px rgba(154, 52, 18, 0.10), 0 3px 8px rgba(154, 52, 18, 0.06)",
233
+ accent: "rgba(251, 146, 60, 0.18)",
234
+ },
235
+ anchor: {
236
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(255,247,237,0.98) 100%)",
237
+ shadow: "0 18px 28px rgba(154, 52, 18, 0.10), inset 0 1px 0 rgba(255,255,255,0.9)",
238
+ containerAccent: "#ea580c",
239
+ actionAccent: "#c2410c",
240
+ },
241
+ },
242
+ },
243
+ editorTheme: {
244
+ hud: {
245
+ panelBackground: "rgba(67, 20, 7, 0.92)",
246
+ panelBorder: "1px solid rgba(251, 146, 60, 0.28)",
247
+ buttonBackground: "rgba(124, 45, 18, 0.78)",
248
+ buttonBorder: "1px solid rgba(253, 186, 116, 0.28)",
249
+ buttonText: "#ffedd5",
250
+ buttonActiveBackground: "#ea580c",
251
+ buttonActiveBorder: "1px solid rgba(254, 215, 170, 0.46)",
252
+ },
253
+ overlay: {
254
+ helpPanel: {
255
+ background: "rgba(67, 20, 7, 0.9)",
256
+ border: "1px solid rgba(251, 146, 60, 0.28)",
257
+ },
258
+ connectTarget: {
259
+ badgeBackground: "#ea580c",
260
+ },
261
+ dropTarget: {
262
+ badgeBackground: "#f97316",
263
+ },
264
+ },
265
+ },
266
+ surfacePalette: {
267
+ canvasBackground: "#fff7ed",
268
+ topbar: {
269
+ background: "#431407",
270
+ border: "1px solid rgba(251, 146, 60, 0.22)",
271
+ controlBackground: "#7c2d12",
272
+ controlBorder: "1px solid rgba(253, 186, 116, 0.28)",
273
+ controlText: "#ffedd5",
274
+ },
275
+ sidebar: {
276
+ background: "#3b1c10",
277
+ border: "1px solid rgba(251, 146, 60, 0.18)",
278
+ text: "#ffedd5",
279
+ mutedText: "#fdba74",
280
+ sectionTitle: "#fed7aa",
281
+ cardBackground: "rgba(124, 45, 18, 0.42)",
282
+ cardBorder: "rgba(251, 146, 60, 0.18)",
283
+ controlBackground: "#7c2d12",
284
+ controlBorder: "1px solid rgba(253, 186, 116, 0.24)",
285
+ controlText: "#ffedd5",
286
+ accent: "#f97316",
287
+ },
288
+ },
289
+ };
290
+ const lightPreset = {
291
+ id: "light",
292
+ label: "Light",
293
+ description: "Neutral product UI preset.",
294
+ rendererTheme: {
295
+ background: "#f8fafc",
296
+ zoneTitle: "#0f172a",
297
+ zoneSubtext: "#64748b",
298
+ zoneContainerBorder: "#cbd5e1",
299
+ zoneActionBorder: "#2563eb",
300
+ zoneBadgeBg: "#eff6ff",
301
+ pathLabel: "#0f172a",
302
+ pathEdge: "#94a3b8",
303
+ pathInboundEdge: "#2563eb",
304
+ selection: "#2563eb",
305
+ surface: {
306
+ chrome: {
307
+ overlay: chromeOverlay,
308
+ glow: chromeGlow,
309
+ accentFade: "rgba(226, 232, 240, 0.08)",
310
+ },
311
+ zone: {
312
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.98) 100%)",
313
+ shadow: "0 18px 34px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.05)",
314
+ containerAccent: "rgba(37, 99, 235, 0.10)",
315
+ actionAccent: "rgba(37, 99, 235, 0.16)",
316
+ },
317
+ path: {
318
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(246,248,252,0.98) 100%)",
319
+ shadow: "0 16px 26px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.05)",
320
+ accent: "rgba(37, 99, 235, 0.12)",
321
+ },
322
+ anchor: {
323
+ background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(247,250,253,0.98) 100%)",
324
+ shadow: "0 18px 28px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.9)",
325
+ containerAccent: "#2563eb",
326
+ actionAccent: "#2563eb",
327
+ },
328
+ },
329
+ },
330
+ editorTheme: {
331
+ hud: {
332
+ panelBackground: "rgba(255, 255, 255, 0.92)",
333
+ panelBorder: "1px solid rgba(148, 163, 184, 0.26)",
334
+ panelShadow: "0 16px 32px rgba(15, 23, 42, 0.12)",
335
+ buttonBackground: "rgba(255, 255, 255, 0.92)",
336
+ buttonBorder: "1px solid rgba(148, 163, 184, 0.26)",
337
+ buttonText: "#0f172a",
338
+ buttonActiveBackground: "#2563eb",
339
+ buttonActiveBorder: "1px solid rgba(59, 130, 246, 0.42)",
340
+ buttonActiveText: "#eff6ff",
341
+ buttonDangerBackground: "#dc2626",
342
+ buttonDangerBorder: "1px solid rgba(239, 68, 68, 0.42)",
343
+ buttonDangerText: "#fff7f7",
344
+ },
345
+ overlay: {
346
+ helpPanel: {
347
+ background: "rgba(255, 255, 255, 0.96)",
348
+ border: "1px solid rgba(148, 163, 184, 0.28)",
349
+ titleText: "#0f172a",
350
+ bodyText: "#334155",
351
+ mutedText: "#64748b",
352
+ shadow: "0 12px 24px rgba(15, 23, 42, 0.12)",
353
+ },
354
+ floatingToolbar: {
355
+ background: "rgba(255, 255, 255, 0.98)",
356
+ border: "1px solid rgba(148, 163, 184, 0.22)",
357
+ shadow: "0 18px 30px rgba(15, 23, 42, 0.12)",
358
+ zoneLabelText: "#1d4ed8",
359
+ pathLabelText: "#2563eb",
360
+ buttonBackground: "rgba(241, 245, 249, 0.96)",
361
+ buttonBorder: "1px solid rgba(148, 163, 184, 0.22)",
362
+ buttonText: "#0f172a",
363
+ buttonDisabledText: "rgba(100, 116, 139, 0.48)",
364
+ },
365
+ dialog: {
366
+ background: "rgba(255, 255, 255, 0.98)",
367
+ border: "1px solid rgba(148, 163, 184, 0.26)",
368
+ shadow: "0 18px 32px rgba(15, 23, 42, 0.14)",
369
+ },
370
+ toast: {
371
+ background: "rgba(255, 255, 255, 0.98)",
372
+ border: "1px solid rgba(148, 163, 184, 0.26)",
373
+ shadow: "0 18px 36px rgba(15, 23, 42, 0.16)",
374
+ text: "#0f172a",
375
+ },
376
+ metaChip: {
377
+ background: "rgba(255, 255, 255, 0.92)",
378
+ color: "#0f172a",
379
+ shadow: "0 4px 12px rgba(15, 23, 42, 0.08)",
380
+ },
381
+ },
382
+ },
383
+ surfacePalette: {
384
+ canvasBackground: "#f8fafc",
385
+ topbar: {
386
+ background: "#ffffff",
387
+ border: "1px solid rgba(148, 163, 184, 0.22)",
388
+ controlBackground: "#ffffff",
389
+ controlBorder: "1px solid rgba(148, 163, 184, 0.26)",
390
+ controlText: "#0f172a",
391
+ },
392
+ sidebar: {
393
+ background: "#f8fafc",
394
+ border: "1px solid rgba(148, 163, 184, 0.18)",
395
+ text: "#0f172a",
396
+ mutedText: "#64748b",
397
+ sectionTitle: "#334155",
398
+ cardBackground: "rgba(255, 255, 255, 0.92)",
399
+ cardBorder: "rgba(148, 163, 184, 0.16)",
400
+ controlBackground: "#ffffff",
401
+ controlBorder: "1px solid rgba(148, 163, 184, 0.24)",
402
+ controlText: "#0f172a",
403
+ accent: "#2563eb",
404
+ },
405
+ },
406
+ };
407
+ const partyPreset = {
408
+ id: "party",
409
+ label: "Party",
410
+ description: "Playful high-contrast neon preset.",
411
+ rendererTheme: {
412
+ background: "#12061f",
413
+ zoneTitle: "#fff7fb",
414
+ zoneSubtext: "#f5d0fe",
415
+ zoneContainerBorder: "#d946ef",
416
+ zoneActionBorder: "#22d3ee",
417
+ zoneBadgeBg: "#2a113a",
418
+ pathLabel: "#fff7fb",
419
+ pathEdge: "#f472b6",
420
+ pathInboundEdge: "#22d3ee",
421
+ selection: "#facc15",
422
+ surface: {
423
+ chrome: {
424
+ overlay: "linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 100%)",
425
+ glow: "radial-gradient(circle, rgba(244,114,182,0.18) 0%, rgba(34,211,238,0.08) 36%, rgba(34,211,238,0) 72%)",
426
+ accentFade: "rgba(45, 14, 56, 0.24)",
427
+ },
428
+ zone: {
429
+ background: "linear-gradient(180deg, rgba(46,16,63,0.98) 0%, rgba(24,9,37,0.98) 100%)",
430
+ shadow: "0 18px 34px rgba(17, 24, 39, 0.42), 0 3px 8px rgba(17, 24, 39, 0.26)",
431
+ containerAccent: "rgba(217, 70, 239, 0.22)",
432
+ actionAccent: "rgba(34, 211, 238, 0.20)",
433
+ },
434
+ path: {
435
+ background: "linear-gradient(180deg, rgba(45,14,56,0.98) 0%, rgba(24,9,37,0.98) 100%)",
436
+ shadow: "0 16px 26px rgba(17, 24, 39, 0.42), 0 3px 8px rgba(17, 24, 39, 0.26)",
437
+ accent: "rgba(250, 204, 21, 0.18)",
438
+ },
439
+ anchor: {
440
+ background: "linear-gradient(180deg, rgba(46,16,63,0.98) 0%, rgba(24,9,37,0.98) 100%)",
441
+ shadow: "0 18px 28px rgba(17, 24, 39, 0.36), inset 0 1px 0 rgba(255,255,255,0.06)",
442
+ containerAccent: "#d946ef",
443
+ actionAccent: "#22d3ee",
444
+ },
445
+ },
446
+ },
447
+ editorTheme: {
448
+ hud: {
449
+ panelBackground: "rgba(24, 9, 37, 0.94)",
450
+ panelBorder: "1px solid rgba(217, 70, 239, 0.34)",
451
+ buttonBackground: "rgba(46, 16, 63, 0.84)",
452
+ buttonBorder: "1px solid rgba(34, 211, 238, 0.28)",
453
+ buttonText: "#fff7fb",
454
+ buttonActiveBackground: "#d946ef",
455
+ buttonActiveBorder: "1px solid rgba(250, 204, 21, 0.42)",
456
+ },
457
+ overlay: {
458
+ helpPanel: {
459
+ background: "rgba(24, 9, 37, 0.92)",
460
+ border: "1px solid rgba(217, 70, 239, 0.34)",
461
+ },
462
+ connectTarget: {
463
+ badgeBackground: "#22d3ee",
464
+ badgeColor: "#082f49",
465
+ },
466
+ dropTarget: {
467
+ badgeBackground: "#d946ef",
468
+ badgeColor: "#fff7fb",
469
+ },
470
+ },
471
+ },
472
+ surfacePalette: {
473
+ canvasBackground: "#12061f",
474
+ topbar: {
475
+ background: "#1e0b2e",
476
+ border: "1px solid rgba(217, 70, 239, 0.28)",
477
+ controlBackground: "#2e103f",
478
+ controlBorder: "1px solid rgba(34, 211, 238, 0.24)",
479
+ controlText: "#fff7fb",
480
+ },
481
+ sidebar: {
482
+ background: "#1a0b28",
483
+ border: "1px solid rgba(217, 70, 239, 0.18)",
484
+ text: "#fff7fb",
485
+ mutedText: "#f5d0fe",
486
+ sectionTitle: "#f9a8d4",
487
+ cardBackground: "rgba(46, 16, 63, 0.46)",
488
+ cardBorder: "rgba(217, 70, 239, 0.18)",
489
+ controlBackground: "#2e103f",
490
+ controlBorder: "1px solid rgba(34, 211, 238, 0.22)",
491
+ controlText: "#fff7fb",
492
+ accent: "#facc15",
493
+ },
494
+ },
495
+ };
496
+ const koreanCulturePreset = {
497
+ id: "korean-culture",
498
+ label: "Korean Culture",
499
+ description: "Dancheong-inspired jade and lacquer preset.",
500
+ rendererTheme: {
501
+ background: "#f8f3e7",
502
+ zoneTitle: "#3d1f14",
503
+ zoneSubtext: "#6c4a3f",
504
+ zoneContainerBorder: "#0f766e",
505
+ zoneActionBorder: "#9f1239",
506
+ zoneBadgeBg: "#fef3c7",
507
+ pathLabel: "#3d1f14",
508
+ pathEdge: "#15803d",
509
+ pathInboundEdge: "#9f1239",
510
+ selection: "#2563eb",
511
+ surface: {
512
+ chrome: {
513
+ overlay: chromeOverlay,
514
+ glow: "radial-gradient(circle, rgba(15,118,110,0.16) 0%, rgba(159,18,57,0.08) 36%, rgba(159,18,57,0) 72%)",
515
+ accentFade: "rgba(245, 222, 179, 0.14)",
516
+ },
517
+ zone: {
518
+ background: "linear-gradient(180deg, rgba(255,251,235,0.99) 0%, rgba(248,243,231,0.98) 100%)",
519
+ shadow: "0 18px 34px rgba(61, 31, 20, 0.10), 0 3px 8px rgba(61, 31, 20, 0.06)",
520
+ containerAccent: "rgba(15, 118, 110, 0.14)",
521
+ actionAccent: "rgba(159, 18, 57, 0.14)",
522
+ },
523
+ path: {
524
+ background: "linear-gradient(180deg, rgba(255,251,235,0.99) 0%, rgba(254,243,199,0.98) 100%)",
525
+ shadow: "0 16px 26px rgba(61, 31, 20, 0.10), 0 3px 8px rgba(61, 31, 20, 0.06)",
526
+ accent: "rgba(37, 99, 235, 0.12)",
527
+ },
528
+ anchor: {
529
+ background: "linear-gradient(180deg, rgba(255,251,235,0.99) 0%, rgba(248,243,231,0.98) 100%)",
530
+ shadow: "0 18px 28px rgba(61, 31, 20, 0.10), inset 0 1px 0 rgba(255,255,255,0.9)",
531
+ containerAccent: "#0f766e",
532
+ actionAccent: "#9f1239",
533
+ },
534
+ },
535
+ },
536
+ editorTheme: {
537
+ hud: {
538
+ panelBackground: "rgba(61, 31, 20, 0.92)",
539
+ panelBorder: "1px solid rgba(15, 118, 110, 0.26)",
540
+ buttonBackground: "rgba(120, 53, 15, 0.8)",
541
+ buttonBorder: "1px solid rgba(180, 83, 9, 0.24)",
542
+ buttonText: "#fef3c7",
543
+ buttonActiveBackground: "#0f766e",
544
+ buttonActiveBorder: "1px solid rgba(37, 99, 235, 0.36)",
545
+ },
546
+ overlay: {
547
+ helpPanel: {
548
+ background: "rgba(61, 31, 20, 0.92)",
549
+ border: "1px solid rgba(15, 118, 110, 0.24)",
550
+ },
551
+ connectTarget: {
552
+ badgeBackground: "#9f1239",
553
+ },
554
+ dropTarget: {
555
+ badgeBackground: "#0f766e",
556
+ },
557
+ },
558
+ },
559
+ surfacePalette: {
560
+ canvasBackground: "#f8f3e7",
561
+ topbar: {
562
+ background: "#3d1f14",
563
+ border: "1px solid rgba(15, 118, 110, 0.18)",
564
+ controlBackground: "#78350f",
565
+ controlBorder: "1px solid rgba(180, 83, 9, 0.24)",
566
+ controlText: "#fef3c7",
567
+ },
568
+ sidebar: {
569
+ background: "#4a2418",
570
+ border: "1px solid rgba(15, 118, 110, 0.16)",
571
+ text: "#fef3c7",
572
+ mutedText: "#fcd34d",
573
+ sectionTitle: "#fde68a",
574
+ cardBackground: "rgba(120, 53, 15, 0.42)",
575
+ cardBorder: "rgba(180, 83, 9, 0.18)",
576
+ controlBackground: "#78350f",
577
+ controlBorder: "1px solid rgba(180, 83, 9, 0.24)",
578
+ controlText: "#fef3c7",
579
+ accent: "#0f766e",
580
+ },
581
+ },
582
+ };
583
+ export const zoneflowThemePresets = {
584
+ dark: darkPreset,
585
+ ocean: oceanPreset,
586
+ sunset: sunsetPreset,
587
+ light: lightPreset,
588
+ party: partyPreset,
589
+ "korean-culture": koreanCulturePreset,
590
+ };
591
+ export { darkPreset, oceanPreset, sunsetPreset, lightPreset, partyPreset, koreanCulturePreset, };
package/package.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "name": "@zoneflow/themes",
3
+ "version": "0.0.1",
4
+ "description": "Preset renderer and editor themes for Zoneflow.",
5
+ "type": "module",
6
+ "main": "dist/index.js",
7
+ "types": "dist/index.d.ts",
8
+ "homepage": "https://github.com/groobee/zoneflow",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "https://github.com/groobee/zoneflow.git",
12
+ "directory": "packages/themes"
13
+ },
14
+ "publishConfig": {
15
+ "registry": "https://registry.npmjs.org"
16
+ },
17
+ "files": ["dist"],
18
+ "dependencies": {
19
+ "@zoneflow/react": "workspace:*",
20
+ "@zoneflow/renderer-dom": "workspace:*"
21
+ },
22
+ "scripts": {
23
+ "build": "tsc -p tsconfig.json",
24
+ "type-check": "tsc -p tsconfig.json --noEmit"
25
+ }
26
+ }