juxscript 1.1.140 → 1.1.142

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.
@@ -0,0 +1,434 @@
1
+ /* ══════════════════════════════════════════════════════════════════
2
+ JUX THEME SYSTEM
3
+ Combines MODE (dark/light) + SWAG (brand aesthetic)
4
+
5
+ Usage:
6
+ <html data-mode="dark" data-swag="apple">
7
+
8
+ Swag Options: gumroad | stripe | google | apple | meta | notion
9
+ Mode Options: light | dark
10
+ ══════════════════════════════════════════════════════════════════ */
11
+
12
+ /* ══════════════════════════════════════════════════════════════════
13
+ 🍎 APPLE - Minimalist, Elegant, Rounded
14
+ ══════════════════════════════════════════════════════════════════ */
15
+
16
+ [data-swag="apple"][data-mode="light"] {
17
+ /* Brand Colors */
18
+ --jux-brand-from: #007aff;
19
+ --jux-brand-to: #0051d5;
20
+ --jux-brand-accent-from: #34c759;
21
+ --jux-brand-accent-to: #248a3d;
22
+
23
+ /* Surfaces */
24
+ --jux-surface-from: #ffffff;
25
+ --jux-surface-to: #f5f5f7;
26
+
27
+ /* Text */
28
+ --jux-text-from: #1d1d1f;
29
+ --jux-text-to: #86868b;
30
+
31
+ /* Borders */
32
+ --jux-border-from: #d2d2d7;
33
+ --jux-border-to: #86868b;
34
+
35
+ /* Radius - Very rounded (Apple style) */
36
+ --jux-radius-sharp: 0;
37
+ --jux-radius-sm: 0.5rem;
38
+ --jux-radius-md: 0.75rem;
39
+ --jux-radius-lg: 1rem;
40
+ --jux-radius-xl: 1.25rem;
41
+ --jux-radius-2xl: 1.5rem;
42
+ --jux-radius-full: 9999px;
43
+
44
+ /* Spacing - Generous (Apple loves whitespace) */
45
+ --jux-space-xs: 0.5rem;
46
+ --jux-space-sm: 0.75rem;
47
+ --jux-space-md: 1.25rem;
48
+ --jux-space-lg: 2rem;
49
+ --jux-space-xl: 3rem;
50
+ --jux-space-2xl: 4rem;
51
+ --jux-space-3xl: 6rem;
52
+
53
+ /* Typography - San Francisco inspired */
54
+ --jux-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
55
+ --jux-weight-normal: 400;
56
+ --jux-weight-medium: 500;
57
+ --jux-weight-semibold: 600;
58
+ --jux-weight-bold: 700;
59
+
60
+ /* Burn Factors - Subtle (Apple is understated) */
61
+ --jux-burn-subtle: 0.02;
62
+ --jux-burn-hover: 0.05;
63
+ --jux-burn-active: 0.08;
64
+ --jux-burn-muted: 0.3;
65
+ --jux-burn-strong: 0.6;
66
+ }
67
+
68
+ [data-swag="apple"][data-mode="dark"] {
69
+ --jux-brand-from: #0a84ff;
70
+ --jux-brand-to: #0062cc;
71
+ --jux-brand-accent-from: #32d74b;
72
+ --jux-brand-accent-to: #248a3d;
73
+
74
+ --jux-surface-from: #000000;
75
+ --jux-surface-to: #1c1c1e;
76
+
77
+ --jux-text-from: #ffffff;
78
+ --jux-text-to: #98989d;
79
+
80
+ --jux-border-from: #38383a;
81
+ --jux-border-to: #545456;
82
+
83
+ /* Radius, spacing, typography inherited from light mode */
84
+ }
85
+
86
+ /* ══════════════════════════════════════════════════════════════════
87
+ 🔵 GOOGLE - Bold, Colorful, Material Design
88
+ ══════════════════════════════════════════════════════════════════ */
89
+
90
+ [data-swag="google"][data-mode="light"] {
91
+ --jux-brand-from: #4285f4;
92
+ --jux-brand-to: #1a73e8;
93
+ --jux-brand-accent-from: #34a853;
94
+ --jux-brand-accent-to: #0d652d;
95
+
96
+ --jux-surface-from: #ffffff;
97
+ --jux-surface-to: #f8f9fa;
98
+
99
+ --jux-text-from: #202124;
100
+ --jux-text-to: #5f6368;
101
+
102
+ --jux-border-from: #dadce0;
103
+ --jux-border-to: #5f6368;
104
+
105
+ /* Radius - Less rounded (Material) */
106
+ --jux-radius-sharp: 0;
107
+ --jux-radius-sm: 0.25rem;
108
+ --jux-radius-md: 0.5rem;
109
+ --jux-radius-lg: 0.75rem;
110
+ --jux-radius-xl: 1rem;
111
+ --jux-radius-2xl: 1.25rem;
112
+ --jux-radius-full: 9999px;
113
+
114
+ /* Spacing - Standard Material */
115
+ --jux-space-xs: 0.25rem;
116
+ --jux-space-sm: 0.5rem;
117
+ --jux-space-md: 1rem;
118
+ --jux-space-lg: 1.5rem;
119
+ --jux-space-xl: 2rem;
120
+ --jux-space-2xl: 3rem;
121
+ --jux-space-3xl: 4rem;
122
+
123
+ /* Typography - Roboto */
124
+ --jux-font-sans: "Roboto", "Helvetica", "Arial", sans-serif;
125
+ --jux-weight-normal: 400;
126
+ --jux-weight-medium: 500;
127
+ --jux-weight-semibold: 600;
128
+ --jux-weight-bold: 700;
129
+
130
+ /* Burn Factors - Pronounced (Google loves color) */
131
+ --jux-burn-subtle: 0.04;
132
+ --jux-burn-hover: 0.08;
133
+ --jux-burn-active: 0.15;
134
+ --jux-burn-muted: 0.25;
135
+ --jux-burn-strong: 0.5;
136
+ }
137
+
138
+ [data-swag="google"][data-mode="dark"] {
139
+ --jux-brand-from: #8ab4f8;
140
+ --jux-brand-to: #4285f4;
141
+ --jux-brand-accent-from: #81c995;
142
+ --jux-brand-accent-to: #34a853;
143
+
144
+ --jux-surface-from: #202124;
145
+ --jux-surface-to: #292a2d;
146
+
147
+ --jux-text-from: #e8eaed;
148
+ --jux-text-to: #9aa0a6;
149
+
150
+ --jux-border-from: #3c4043;
151
+ --jux-border-to: #5f6368;
152
+ }
153
+
154
+ /* ══════════════════════════════════════════════════════════════════
155
+ 💳 STRIPE - Professional, Precise, Trustworthy
156
+ ══════════════════════════════════════════════════════════════════ */
157
+
158
+ [data-swag="stripe"][data-mode="light"] {
159
+ --jux-brand-from: #635bff;
160
+ --jux-brand-to: #0a2540;
161
+ --jux-brand-accent-from: #00d4ff;
162
+ --jux-brand-accent-to: #0073e6;
163
+
164
+ --jux-surface-from: #ffffff;
165
+ --jux-surface-to: #f6f9fc;
166
+
167
+ --jux-text-from: #0a2540;
168
+ --jux-text-to: #425466;
169
+
170
+ --jux-border-from: #e3e8ee;
171
+ --jux-border-to: #cbd2d9;
172
+
173
+ /* Radius - Sharp to moderate (professional) */
174
+ --jux-radius-sharp: 0;
175
+ --jux-radius-sm: 0.25rem;
176
+ --jux-radius-md: 0.375rem;
177
+ --jux-radius-lg: 0.5rem;
178
+ --jux-radius-xl: 0.75rem;
179
+ --jux-radius-2xl: 1rem;
180
+ --jux-radius-full: 9999px;
181
+
182
+ /* Spacing - Tight, efficient */
183
+ --jux-space-xs: 0.25rem;
184
+ --jux-space-sm: 0.5rem;
185
+ --jux-space-md: 1rem;
186
+ --jux-space-lg: 1.5rem;
187
+ --jux-space-xl: 2rem;
188
+ --jux-space-2xl: 3rem;
189
+ --jux-space-3xl: 4rem;
190
+
191
+ /* Typography - Camphor (fallback to system) */
192
+ --jux-font-sans: "Camphor", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
193
+ --jux-weight-normal: 400;
194
+ --jux-weight-medium: 500;
195
+ --jux-weight-semibold: 600;
196
+ --jux-weight-bold: 700;
197
+
198
+ /* Burn Factors - Subtle, professional */
199
+ --jux-burn-subtle: 0.02;
200
+ --jux-burn-hover: 0.04;
201
+ --jux-burn-active: 0.08;
202
+ --jux-burn-muted: 0.3;
203
+ --jux-burn-strong: 0.5;
204
+ }
205
+
206
+ [data-swag="stripe"][data-mode="dark"] {
207
+ --jux-brand-from: #7a73ff;
208
+ --jux-brand-to: #635bff;
209
+ --jux-brand-accent-from: #00d4ff;
210
+ --jux-brand-accent-to: #0073e6;
211
+
212
+ --jux-surface-from: #0a2540;
213
+ --jux-surface-to: #1a365d;
214
+
215
+ --jux-text-from: #ffffff;
216
+ --jux-text-to: #adbdcc;
217
+
218
+ --jux-border-from: #1a365d;
219
+ --jux-border-to: #2d4a6f;
220
+ }
221
+
222
+ /* ══════════════════════════════════════════════════════════════════
223
+ 🎨 GUMROAD - Bold, Playful, Creative
224
+ ══════════════════════════════════════════════════════════════════ */
225
+
226
+ [data-swag="gumroad"][data-mode="light"] {
227
+ --jux-brand-from: #ff90e8;
228
+ --jux-brand-to: #ff5ac4;
229
+ --jux-brand-accent-from: #36d9b8;
230
+ --jux-brand-accent-to: #1ead8a;
231
+
232
+ --jux-surface-from: #ffffff;
233
+ --jux-surface-to: #f9f9f9;
234
+
235
+ --jux-text-from: #000000;
236
+ --jux-text-to: #999999;
237
+
238
+ --jux-border-from: #e6e6e6;
239
+ --jux-border-to: #cccccc;
240
+
241
+ /* Radius - Playful, more rounded */
242
+ --jux-radius-sharp: 0;
243
+ --jux-radius-sm: 0.5rem;
244
+ --jux-radius-md: 0.75rem;
245
+ --jux-radius-lg: 1rem;
246
+ --jux-radius-xl: 1.5rem;
247
+ --jux-radius-2xl: 2rem;
248
+ --jux-radius-full: 9999px;
249
+
250
+ /* Spacing - Generous (creative needs room) */
251
+ --jux-space-xs: 0.5rem;
252
+ --jux-space-sm: 0.75rem;
253
+ --jux-space-md: 1.25rem;
254
+ --jux-space-lg: 2rem;
255
+ --jux-space-xl: 3rem;
256
+ --jux-space-2xl: 4rem;
257
+ --jux-space-3xl: 6rem;
258
+
259
+ /* Typography - Mabry (fallback to rounded sans) */
260
+ --jux-font-sans: "Mabry", "Circular", -apple-system, sans-serif;
261
+ --jux-weight-normal: 400;
262
+ --jux-weight-medium: 500;
263
+ --jux-weight-semibold: 600;
264
+ --jux-weight-bold: 700;
265
+
266
+ /* Burn Factors - Vibrant transitions */
267
+ --jux-burn-subtle: 0.05;
268
+ --jux-burn-hover: 0.1;
269
+ --jux-burn-active: 0.15;
270
+ --jux-burn-muted: 0.25;
271
+ --jux-burn-strong: 0.4;
272
+ }
273
+
274
+ [data-swag="gumroad"][data-mode="dark"] {
275
+ --jux-brand-from: #ff90e8;
276
+ --jux-brand-to: #ff5ac4;
277
+ --jux-brand-accent-from: #36d9b8;
278
+ --jux-brand-accent-to: #1ead8a;
279
+
280
+ --jux-surface-from: #000000;
281
+ --jux-surface-to: #1a1a1a;
282
+
283
+ --jux-text-from: #ffffff;
284
+ --jux-text-to: #999999;
285
+
286
+ --jux-border-from: #333333;
287
+ --jux-border-to: #666666;
288
+ }
289
+
290
+ /* ══════════════════════════════════════════════════════════════════
291
+ 🔷 META - Modern, Bold, Blue
292
+ ══════════════════════════════════════════════════════════════════ */
293
+
294
+ [data-swag="meta"][data-mode="light"] {
295
+ --jux-brand-from: #0866ff;
296
+ --jux-brand-to: #0554e5;
297
+ --jux-brand-accent-from: #0bc15c;
298
+ --jux-brand-accent-to: #089e48;
299
+
300
+ --jux-surface-from: #ffffff;
301
+ --jux-surface-to: #f0f2f5;
302
+
303
+ --jux-text-from: #050505;
304
+ --jux-text-to: #65676b;
305
+
306
+ --jux-border-from: #ced0d4;
307
+ --jux-border-to: #bcc0c4;
308
+
309
+ /* Radius - Moderate, friendly */
310
+ --jux-radius-sharp: 0;
311
+ --jux-radius-sm: 0.375rem;
312
+ --jux-radius-md: 0.5rem;
313
+ --jux-radius-lg: 0.75rem;
314
+ --jux-radius-xl: 1rem;
315
+ --jux-radius-2xl: 1.25rem;
316
+ --jux-radius-full: 9999px;
317
+
318
+ /* Spacing - Balanced */
319
+ --jux-space-xs: 0.25rem;
320
+ --jux-space-sm: 0.5rem;
321
+ --jux-space-md: 1rem;
322
+ --jux-space-lg: 1.5rem;
323
+ --jux-space-xl: 2rem;
324
+ --jux-space-2xl: 3rem;
325
+ --jux-space-3xl: 4rem;
326
+
327
+ /* Typography - Optimistic Display */
328
+ --jux-font-sans: "Optimistic Display", -apple-system, BlinkMacSystemFont, sans-serif;
329
+ --jux-weight-normal: 400;
330
+ --jux-weight-medium: 500;
331
+ --jux-weight-semibold: 600;
332
+ --jux-weight-bold: 700;
333
+
334
+ /* Burn Factors - Standard */
335
+ --jux-burn-subtle: 0.03;
336
+ --jux-burn-hover: 0.06;
337
+ --jux-burn-active: 0.12;
338
+ --jux-burn-muted: 0.25;
339
+ --jux-burn-strong: 0.5;
340
+ }
341
+
342
+ [data-swag="meta"][data-mode="dark"] {
343
+ --jux-brand-from: #2e89ff;
344
+ --jux-brand-to: #0866ff;
345
+ --jux-brand-accent-from: #0bc15c;
346
+ --jux-brand-accent-to: #089e48;
347
+
348
+ --jux-surface-from: #18191a;
349
+ --jux-surface-to: #242526;
350
+
351
+ --jux-text-from: #e4e6eb;
352
+ --jux-text-to: #b0b3b8;
353
+
354
+ --jux-border-from: #3a3b3c;
355
+ --jux-border-to: #4e4f50;
356
+ }
357
+
358
+ /* ══════════════════════════════════════════════════════════════════
359
+ 📝 NOTION - Clean, Minimal, Functional
360
+ ══════════════════════════════════════════════════════════════════ */
361
+
362
+ [data-swag="notion"][data-mode="light"] {
363
+ --jux-brand-from: #000000;
364
+ --jux-brand-to: #2e2e2e;
365
+ --jux-brand-accent-from: #0f7b6c;
366
+ --jux-brand-accent-to: #0a5a4f;
367
+
368
+ --jux-surface-from: #ffffff;
369
+ --jux-surface-to: #f7f6f3;
370
+
371
+ --jux-text-from: #37352f;
372
+ --jux-text-to: #9b9a97;
373
+
374
+ --jux-border-from: #e9e9e7;
375
+ --jux-border-to: #d3d1cb;
376
+
377
+ /* Radius - Minimal */
378
+ --jux-radius-sharp: 0;
379
+ --jux-radius-sm: 0.1875rem;
380
+ --jux-radius-md: 0.25rem;
381
+ --jux-radius-lg: 0.375rem;
382
+ --jux-radius-xl: 0.5rem;
383
+ --jux-radius-2xl: 0.75rem;
384
+ --jux-radius-full: 9999px;
385
+
386
+ /* Spacing - Compact, efficient */
387
+ --jux-space-xs: 0.25rem;
388
+ --jux-space-sm: 0.5rem;
389
+ --jux-space-md: 0.75rem;
390
+ --jux-space-lg: 1rem;
391
+ --jux-space-xl: 1.5rem;
392
+ --jux-space-2xl: 2rem;
393
+ --jux-space-3xl: 3rem;
394
+
395
+ /* Typography - Inter-like */
396
+ --jux-font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
397
+ --jux-weight-normal: 400;
398
+ --jux-weight-medium: 500;
399
+ --jux-weight-semibold: 600;
400
+ --jux-weight-bold: 700;
401
+
402
+ /* Burn Factors - Very subtle (Notion is understated) */
403
+ --jux-burn-subtle: 0.02;
404
+ --jux-burn-hover: 0.04;
405
+ --jux-burn-active: 0.08;
406
+ --jux-burn-muted: 0.35;
407
+ --jux-burn-strong: 0.6;
408
+ }
409
+
410
+ [data-swag="notion"][data-mode="dark"] {
411
+ --jux-brand-from: #ffffff;
412
+ --jux-brand-to: #e0e0e0;
413
+ --jux-brand-accent-from: #0f7b6c;
414
+ --jux-brand-accent-to: #0a5a4f;
415
+
416
+ --jux-surface-from: #191919;
417
+ --jux-surface-to: #2f2f2f;
418
+
419
+ --jux-text-from: #ffffff;
420
+ --jux-text-to: #9b9a97;
421
+
422
+ --jux-border-from: #373737;
423
+ --jux-border-to: #4a4a4a;
424
+ }
425
+
426
+ /* ══════════════════════════════════════════════════════════════════
427
+ 🎯 DEFAULT FALLBACK - Neutral, System-Based
428
+ ══════════════════════════════════════════════════════════════════ */
429
+
430
+ :root:not([data-swag]),
431
+ [data-swag="default"] {
432
+ /* Inherits from foundation.css defaults */
433
+ /* This ensures the system works even if no theme is selected */
434
+ }
@@ -1,4 +1,4 @@
1
- import { JuxCompiler } from './compiler3.js';
1
+ import { JuxCompiler } from './compiler4.js';
2
2
  import path from 'path';
3
3
  import fs from 'fs';
4
4