juxscript 1.1.245 → 1.1.246

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 (36) hide show
  1. package/dist/lib/components/dataframe.d.ts +1 -0
  2. package/dist/lib/components/dataframe.d.ts.map +1 -0
  3. package/dist/lib/components/dataframe.js +1 -0
  4. package/dist/lib/components/include.d.ts +86 -0
  5. package/dist/lib/components/include.d.ts.map +1 -0
  6. package/{lib/components/include.ts → dist/lib/components/include.js} +57 -100
  7. package/dist/lib/components/tag.d.ts +27 -0
  8. package/dist/lib/components/tag.d.ts.map +1 -0
  9. package/{lib/components/tag.ts → dist/lib/components/tag.js} +14 -25
  10. package/dist/lib/index.d.ts +17 -0
  11. package/dist/lib/index.d.ts.map +1 -0
  12. package/{index.js → dist/lib/index.js} +4 -2
  13. package/dist/lib/utils/codeparser.d.ts +29 -0
  14. package/dist/lib/utils/codeparser.d.ts.map +1 -0
  15. package/{lib/utils/codeparser.ts → dist/lib/utils/codeparser.js} +64 -91
  16. package/dist/lib/utils/fetch.d.ts +176 -0
  17. package/dist/lib/utils/fetch.d.ts.map +1 -0
  18. package/{lib/utils/fetch.ts → dist/lib/utils/fetch.js} +80 -206
  19. package/dist/lib/utils/formatId.d.ts +16 -0
  20. package/dist/lib/utils/formatId.d.ts.map +1 -0
  21. package/{lib/utils/formatId.ts → dist/lib/utils/formatId.js} +7 -8
  22. package/dist/lib/utils/idgen.d.ts +2 -0
  23. package/dist/lib/utils/idgen.d.ts.map +1 -0
  24. package/{lib/utils/idgen.ts → dist/lib/utils/idgen.js} +2 -4
  25. package/package.json +2 -7
  26. package/lib/components/dataframe.ts +0 -0
  27. package/lib/styles/animations.css +0 -218
  28. package/lib/styles/foundation.css +0 -542
  29. package/lib/styles/gradients.css +0 -326
  30. package/lib/styles/link.css +0 -158
  31. package/lib/styles/modal.css +0 -402
  32. package/lib/styles/modifiers.css +0 -103
  33. package/lib/styles/nav.css +0 -322
  34. package/lib/styles/shadcn.css +0 -960
  35. package/lib/styles/stacks.css +0 -132
  36. package/lib/styles/themes.css +0 -486
package/lib/styles/stacks.css DELETED
@@ -1,132 +0,0 @@
1
- /* ══════════════════════════════════════════════════════════════════
2
- JUX STACKS - Layout System
3
- Uses foundation tokens for spacing, auto-adapts to themes
4
- ══════════════════════════════════════════════════════════════════ */
5
-
6
- /* ═════════════════════════════════════════════════════════════════
7
- * BASE STACK STYLES
8
- * ═════════════════════════════════════════════════════════════════ */
9
-
10
- .jux-vstack,
11
- .jux-hstack,
12
- .jux-zstack {
13
- display: flex;
14
-
15
- /* ✅ Use CSS variables from foundation/theme */
16
- gap: var(--jux-gap);
17
- padding: var(--jux-pad);
18
-
19
- /* Default alignment */
20
- align-items: var(--jux-align, flex-start);
21
- }
22
-
23
- /* ═════════════════════════════════════════════════════════════════
24
- * VERTICAL STACK (Column)
25
- * ═════════════════════════════════════════════════════════════════ */
26
-
27
- .jux-vstack {
28
- flex-direction: column;
29
- }
30
-
31
- /* ═════════════════════════════════════════════════════════════════
32
- * HORIZONTAL STACK (Row)
33
- * ═════════════════════════════════════════════════════════════════ */
34
-
35
- .jux-hstack {
36
- flex-direction: row;
37
- flex-wrap: wrap; /* Allow wrapping on mobile */
38
- }
39
-
40
- /* ═════════════════════════════════════════════════════════════════
41
- * Z-STACK (Layered)
42
- * ═════════════════════════════════════════════════════════════════ */
43
-
44
- .jux-zstack {
45
- position: relative;
46
- flex-direction: column;
47
- }
48
-
49
- .jux-zstack > * {
50
- position: absolute;
51
- top: 0;
52
- left: 0;
53
- }
54
-
55
- /* ═════════════════════════════════════════════════════════════════
56
- * ALIGNMENT UTILITIES (Via CSS Variables)
57
- * Applied via .align-* descriptor classes
58
- * ═════════════════════════════════════════════════════════════════ */
59
-
60
- .align-start { --jux-align: flex-start; }
61
- .align-center { --jux-align: center; }
62
- .align-end { --jux-align: flex-end; }
63
- .align-stretch { --jux-align: stretch; }
64
- .align-baseline { --jux-align: baseline; }
65
-
66
- /* ═════════════════════════════════════════════════════════════════
67
- * JUSTIFY CONTENT (For HStack distribution)
68
- * ═════════════════════════════════════════════════════════════════ */
69
-
70
- .justify-start { justify-content: flex-start; }
71
- .justify-center { justify-content: center; }
72
- .justify-end { justify-content: flex-end; }
73
- .justify-between { justify-content: space-between; }
74
- .justify-around { justify-content: space-around; }
75
- .justify-evenly { justify-content: space-evenly; }
76
-
77
- /* ═════════════════════════════════════════════════════════════════
78
- * RESPONSIVE BEHAVIOR
79
- * HStack becomes VStack on mobile for better UX
80
- * ═════════════════════════════════════════════════════════════════ */
81
-
82
- @media (max-width: 768px) {
83
- .jux-hstack {
84
- flex-direction: column;
85
- /* Gap remains consistent via CSS variables */
86
- }
87
-
88
- /* Optional: Force HStack to stay horizontal on mobile */
89
- .jux-hstack.stay-horizontal {
90
- flex-direction: row;
91
- }
92
- }
93
-
94
- /* ═════════════════════════════════════════════════════════════════
95
- * FULL WIDTH/HEIGHT UTILITIES
96
- * ═════════════════════════════════════════════════════════════════ */
97
-
98
- .full-width {
99
- width: 100%;
100
- }
101
-
102
- .full-height {
103
- height: 100%;
104
- min-height: 100vh;
105
- }
106
-
107
- /* ═════════════════════════════════════════════════════════════════
108
- * CENTERED CONTENT (Common Layout Pattern)
109
- * ═════════════════════════════════════════════════════════════════ */
110
-
111
- .center-content {
112
- justify-content: center;
113
- align-items: center;
114
- }
115
-
116
- /* ═════════════════════════════════════════════════════════════════
117
- * SCROLL BEHAVIOR
118
- * ═════════════════════════════════════════════════════════════════ */
119
-
120
- .scroll-x {
121
- overflow-x: auto;
122
- overflow-y: hidden;
123
- }
124
-
125
- .scroll-y {
126
- overflow-y: auto;
127
- overflow-x: hidden;
128
- }
129
-
130
- .scroll-both {
131
- overflow: auto;
132
- }
package/lib/styles/themes.css DELETED
@@ -1,486 +0,0 @@
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 - ✅ MORE GENEROUS */
45
- --jux-space-xs: 0.5rem; /* 8px */
46
- --jux-space-sm: 0.75rem; /* 12px */
47
- --jux-space-md: 1rem; /* 16px */
48
- --jux-space-lg: 1.75rem; /* 28px - ✅ Increased */
49
- --jux-space-xl: 2.5rem; /* 40px - ✅ Increased */
50
- --jux-space-2xl: 3.5rem; /* 56px - ✅ Increased */
51
- --jux-space-3xl: 5rem; /* 80px - ✅ Increased */
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
- /* ✅ DEFAULT STACK SPACING - More breathing room */
68
- --jux-gap-token: var(--jux-space-md); /* 16px */
69
- --jux-pad-token: var(--jux-space-xl); /* 40px */
70
- }
71
-
72
- [data-swag="apple"][data-mode="dark"] {
73
- --jux-brand-from: #0a84ff;
74
- --jux-brand-to: #0062cc;
75
- --jux-brand-accent-from: #32d74b;
76
- --jux-brand-accent-to: #248a3d;
77
-
78
- --jux-surface-from: #000000;
79
- --jux-surface-to: #1c1c1e;
80
-
81
- --jux-text-from: #ffffff;
82
- --jux-text-to: #98989d;
83
-
84
- --jux-border-from: #38383a;
85
- --jux-border-to: #545456;
86
-
87
- /* ✅ DEFAULT STACK SPACING */
88
- --jux-gap-token: var(--jux-space-md);
89
- --jux-pad-token: var(--jux-space-lg);
90
- }
91
-
92
- /* ══════════════════════════════════════════════════════════════════
93
- 🔵 GOOGLE - Bold, Colorful, Material Design
94
- ══════════════════════════════════════════════════════════════════ */
95
-
96
- [data-swag="google"][data-mode="light"] {
97
- /* Brand Colors */
98
- --jux-brand-from: #4285f4;
99
- --jux-brand-to: #1a73e8;
100
- --jux-brand-accent-from: #34a853;
101
- --jux-brand-accent-to: #0d652d;
102
-
103
- /* Surfaces */
104
- --jux-surface-from: #ffffff;
105
- --jux-surface-to: #f8f9fa;
106
-
107
- /* Text */
108
- --jux-text-from: #202124;
109
- --jux-text-to: #5f6368;
110
-
111
- /* Borders */
112
- --jux-border-from: #dadce0;
113
- --jux-border-to: #5f6368;
114
-
115
- /* Radius - Less rounded (Material) */
116
- --jux-radius-sharp: 0;
117
- --jux-radius-sm: 0.25rem;
118
- --jux-radius-md: 0.5rem;
119
- --jux-radius-lg: 0.75rem;
120
- --jux-radius-xl: 1rem;
121
- --jux-radius-2xl: 1.25rem;
122
- --jux-radius-full: 9999px;
123
-
124
- /* Spacing - ✅ MORE GENEROUS */
125
- --jux-space-xs: 0.5rem;
126
- --jux-space-sm: 0.75rem;
127
- --jux-space-md: 1rem;
128
- --jux-space-lg: 1.5rem; /* ✅ Increased */
129
- --jux-space-xl: 2.5rem; /* ✅ Increased */
130
- --jux-space-2xl: 3.5rem; /* ✅ Increased */
131
- --jux-space-3xl: 5rem; /* ✅ Increased */
132
-
133
- /* Typography - Roboto */
134
- --jux-font-sans: "Roboto", "Helvetica", "Arial", sans-serif;
135
- --jux-weight-normal: 400;
136
- --jux-weight-medium: 500;
137
- --jux-weight-semibold: 600;
138
- --jux-weight-bold: 700;
139
-
140
- /* Burn Factors - Pronounced (Google loves color) */
141
- --jux-burn-subtle: 0.04;
142
- --jux-burn-hover: 0.08;
143
- --jux-burn-active: 0.15;
144
- --jux-burn-muted: 0.25;
145
- --jux-burn-strong: 0.5;
146
-
147
- /* ✅ DEFAULT STACK SPACING */
148
- --jux-gap-token: var(--jux-space-md); /* 16px */
149
- --jux-pad-token: var(--jux-space-lg); /* 24px */
150
- }
151
-
152
- [data-swag="google"][data-mode="dark"] {
153
- --jux-brand-from: #8ab4f8;
154
- --jux-brand-to: #4285f4;
155
- --jux-brand-accent-from: #81c995;
156
- --jux-brand-accent-to: #34a853;
157
-
158
- --jux-surface-from: #202124;
159
- --jux-surface-to: #292a2d;
160
-
161
- --jux-text-from: #e8eaed;
162
- --jux-text-to: #9aa0a6;
163
-
164
- --jux-border-from: #3c4043;
165
- --jux-border-to: #5f6368;
166
-
167
- /* ✅ DEFAULT STACK SPACING */
168
- --jux-gap-token: var(--jux-space-sm);
169
- --jux-pad-token: var(--jux-space-md);
170
- }
171
-
172
- /* ══════════════════════════════════════════════════════════════════
173
- 💳 STRIPE - Professional, Precise, Trustworthy
174
- ══════════════════════════════════════════════════════════════════ */
175
-
176
- [data-swag="stripe"][data-mode="light"] {
177
- /* Brand Colors */
178
- --jux-brand-from: #635bff;
179
- --jux-brand-to: #0a2540;
180
- --jux-brand-accent-from: #00d4ff;
181
- --jux-brand-accent-to: #0073e6;
182
-
183
- /* Surfaces */
184
- --jux-surface-from: #ffffff;
185
- --jux-surface-to: #f6f9fc;
186
-
187
- /* Text */
188
- --jux-text-from: #0a2540;
189
- --jux-text-to: #425466;
190
-
191
- /* Borders */
192
- --jux-border-from: #e3e8ee;
193
- --jux-border-to: #cbd2d9;
194
-
195
- /* Radius - Sharp to moderate (professional) */
196
- --jux-radius-sharp: 0;
197
- --jux-radius-sm: 0.25rem;
198
- --jux-radius-md: 0.375rem;
199
- --jux-radius-lg: 0.5rem;
200
- --jux-radius-xl: 0.75rem;
201
- --jux-radius-2xl: 1rem;
202
- --jux-radius-full: 9999px;
203
-
204
- /* Spacing - ✅ UNCHANGED (already tight) */
205
- --jux-space-xs: 0.25rem;
206
- --jux-space-sm: 0.5rem;
207
- --jux-space-md: 1rem;
208
- --jux-space-lg: 1.5rem;
209
- --jux-space-xl: 2rem;
210
- --jux-space-2xl: 3rem;
211
- --jux-space-3xl: 4rem;
212
-
213
- /* Typography - Camphor (fallback to system) */
214
- --jux-font-sans: "Camphor", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
215
- --jux-weight-normal: 400;
216
- --jux-weight-medium: 500;
217
- --jux-weight-semibold: 600;
218
- --jux-weight-bold: 700;
219
-
220
- /* Burn Factors - Subtle, professional */
221
- --jux-burn-subtle: 0.02;
222
- --jux-burn-hover: 0.04;
223
- --jux-burn-active: 0.08;
224
- --jux-burn-muted: 0.3;
225
- --jux-burn-strong: 0.5;
226
-
227
- /* ✅ DEFAULT STACK SPACING - Reduced */
228
- --jux-gap-token: var(--jux-space-sm); /* 8px instead of 16px */
229
- --jux-pad-token: var(--jux-space-md); /* 16px instead of 16px (same) */
230
- }
231
-
232
- [data-swag="stripe"][data-mode="dark"] {
233
- --jux-brand-from: #7a73ff;
234
- --jux-brand-to: #635bff;
235
- --jux-brand-accent-from: #00d4ff;
236
- --jux-brand-accent-to: #0073e6;
237
-
238
- --jux-surface-from: #0a2540;
239
- --jux-surface-to: #1a365d;
240
-
241
- --jux-text-from: #ffffff;
242
- --jux-text-to: #adbdcc;
243
-
244
- --jux-border-from: #1a365d;
245
- --jux-border-to: #2d4a6f;
246
-
247
- /* ✅ DEFAULT STACK SPACING */
248
- --jux-gap-token: var(--jux-space-sm);
249
- --jux-pad-token: var(--jux-space-md);
250
- }
251
-
252
- /* ══════════════════════════════════════════════════════════════════
253
- 🎨 GUMROAD - Bold, Playful, Creative
254
- ══════════════════════════════════════════════════════════════════ */
255
-
256
- [data-swag="gumroad"][data-mode="light"] {
257
- /* Brand Colors */
258
- --jux-brand-from: #ff90e8;
259
- --jux-brand-to: #ff5ac4;
260
- --jux-brand-accent-from: #36d9b8;
261
- --jux-brand-accent-to: #1ead8a;
262
-
263
- /* Surfaces */
264
- --jux-surface-from: #ffffff;
265
- --jux-surface-to: #f9f9f9;
266
-
267
- /* Text */
268
- --jux-text-from: #000000;
269
- --jux-text-to: #999999;
270
-
271
- /* Borders */
272
- --jux-border-from: #e6e6e6;
273
- --jux-border-to: #cccccc;
274
-
275
- /* Radius - Playful, more rounded */
276
- --jux-radius-sharp: 0;
277
- --jux-radius-sm: 0.5rem;
278
- --jux-radius-md: 0.75rem;
279
- --jux-radius-lg: 1rem;
280
- --jux-radius-xl: 1.5rem;
281
- --jux-radius-2xl: 2rem;
282
- --jux-radius-full: 9999px;
283
-
284
- /* Spacing - ✅ REDUCED (was way too generous) */
285
- --jux-space-xs: 0.25rem; /* 4px */
286
- --jux-space-sm: 0.5rem; /* 8px */
287
- --jux-space-md: 0.75rem; /* 12px */
288
- --jux-space-lg: 1.25rem; /* 20px */
289
- --jux-space-xl: 2rem; /* 32px */
290
- --jux-space-2xl: 2.5rem; /* 40px */
291
- --jux-space-3xl: 4rem; /* 64px */
292
-
293
- /* ✅ DEFAULT STACK SPACING - Much more reasonable */
294
- --jux-gap-token: var(--jux-space-md); /* 12px instead of 48px */
295
- --jux-pad-token: var(--jux-space-lg); /* 20px instead of 64px */
296
- }
297
-
298
- [data-swag="gumroad"][data-mode="dark"] {
299
- --jux-brand-from: #ff90e8;
300
- --jux-brand-to: #ff5ac4;
301
- --jux-brand-accent-from: #36d9b8;
302
- --jux-brand-accent-to: #1ead8a;
303
-
304
- --jux-surface-from: #000000;
305
- --jux-surface-to: #1a1a1a;
306
-
307
- --jux-text-from: #ffffff;
308
- --jux-text-to: #999999;
309
-
310
- --jux-border-from: #333333;
311
- --jux-border-to: #666666;
312
-
313
- /* ✅ DEFAULT STACK SPACING */
314
- --jux-gap-token: var(--jux-space-md);
315
- --jux-pad-token: var(--jux-space-lg);
316
- }
317
-
318
- /* ══════════════════════════════════════════════════════════════════
319
- 🔷 META - Modern, Bold, Blue
320
- ══════════════════════════════════════════════════════════════════ */
321
-
322
- [data-swag="meta"][data-mode="light"] {
323
- /* Brand Colors */
324
- --jux-brand-from: #0866ff;
325
- --jux-brand-to: #0554e5;
326
- --jux-brand-accent-from: #0bc15c;
327
- --jux-brand-accent-to: #089e48;
328
-
329
- /* Surfaces */
330
- --jux-surface-from: #ffffff;
331
- --jux-surface-to: #f0f2f5;
332
-
333
- /* Text */
334
- --jux-text-from: #050505;
335
- --jux-text-to: #65676b;
336
-
337
- /* Borders */
338
- --jux-border-from: #ced0d4;
339
- --jux-border-to: #bcc0c4;
340
-
341
- /* Radius - Moderate, friendly */
342
- --jux-radius-sharp: 0;
343
- --jux-radius-sm: 0.375rem;
344
- --jux-radius-md: 0.5rem;
345
- --jux-radius-lg: 0.75rem;
346
- --jux-radius-xl: 1rem;
347
- --jux-radius-2xl: 1.25rem;
348
- --jux-radius-full: 9999px;
349
-
350
- /* Spacing - ✅ UNCHANGED (already balanced) */
351
- --jux-space-xs: 0.25rem;
352
- --jux-space-sm: 0.5rem;
353
- --jux-space-md: 1rem;
354
- --jux-space-lg: 1.5rem;
355
- --jux-space-xl: 2rem;
356
- --jux-space-2xl: 3rem;
357
- --jux-space-3xl: 4rem;
358
-
359
- /* Typography - Optimistic Display */
360
- --jux-font-sans: "Optimistic Display", -apple-system, BlinkMacSystemFont, sans-serif;
361
- --jux-weight-normal: 400;
362
- --jux-weight-medium: 500;
363
- --jux-weight-semibold: 600;
364
- --jux-weight-bold: 700;
365
-
366
- /* Burn Factors - Standard */
367
- --jux-burn-subtle: 0.03;
368
- --jux-burn-hover: 0.06;
369
- --jux-burn-active: 0.12;
370
- --jux-burn-muted: 0.25;
371
- --jux-burn-strong: 0.5;
372
-
373
- /* ✅ DEFAULT STACK SPACING - Reduced */
374
- --jux-gap-token: var(--jux-space-sm); /* 8px instead of 16px */
375
- --jux-pad-token: var(--jux-space-md); /* 16px instead of 24px */
376
- }
377
-
378
- [data-swag="meta"][data-mode="dark"] {
379
- --jux-brand-from: #2e89ff;
380
- --jux-brand-to: #0866ff;
381
- --jux-brand-accent-from: #0bc15c;
382
- --jux-brand-accent-to: #089e48;
383
-
384
- --jux-surface-from: #18191a;
385
- --jux-surface-to: #242526;
386
-
387
- --jux-text-from: #e4e6eb;
388
- --jux-text-to: #b0b3b8;
389
-
390
- --jux-border-from: #3a3b3c;
391
- --jux-border-to: #4e4f50;
392
-
393
- /* ✅ DEFAULT STACK SPACING */
394
- --jux-gap-token: var(--jux-space-sm);
395
- --jux-pad-token: var(--jux-space-md);
396
- }
397
-
398
- /* ══════════════════════════════════════════════════════════════════
399
- 📝 NOTION - Clean, Minimal, Functional
400
- ══════════════════════════════════════════════════════════════════ */
401
-
402
- [data-swag="notion"][data-mode="light"] {
403
- /* Brand Colors */
404
- --jux-brand-from: #000000;
405
- --jux-brand-to: #2e2e2e;
406
- --jux-brand-accent-from: #0f7b6c;
407
- --jux-brand-accent-to: #0a5a4f;
408
-
409
- /* Surfaces */
410
- --jux-surface-from: #ffffff;
411
- --jux-surface-to: #f7f6f3;
412
-
413
- /* Text */
414
- --jux-text-from: #37352f;
415
- --jux-text-to: #9b9a97;
416
-
417
- /* Borders */
418
- --jux-border-from: #e9e9e7;
419
- --jux-border-to: #d3d1cb;
420
-
421
- /* Radius - Minimal */
422
- --jux-radius-sharp: 0;
423
- --jux-radius-sm: 0.1875rem;
424
- --jux-radius-md: 0.25rem;
425
- --jux-radius-lg: 0.375rem;
426
- --jux-radius-xl: 0.5rem;
427
- --jux-radius-2xl: 0.75rem;
428
- --jux-radius-full: 9999px;
429
-
430
- /* Spacing - ✅ UNCHANGED (already compact) */
431
- --jux-space-xs: 0.25rem;
432
- --jux-space-sm: 0.5rem;
433
- --jux-space-md: 0.75rem;
434
- --jux-space-lg: 1rem;
435
- --jux-space-xl: 1.5rem;
436
- --jux-space-2xl: 2rem;
437
- --jux-space-3xl: 3rem;
438
-
439
- /* Typography - Inter-like */
440
- --jux-font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
441
- --jux-weight-normal: 400;
442
- --jux-weight-medium: 500;
443
- --jux-weight-semibold: 600;
444
- --jux-weight-bold: 700;
445
-
446
- /* Burn Factors - Very subtle (Notion is understated) */
447
- --jux-burn-subtle: 0.02;
448
- --jux-burn-hover: 0.04;
449
- --jux-burn-active: 0.08;
450
- --jux-burn-muted: 0.35;
451
- --jux-burn-strong: 0.6;
452
-
453
- /* ✅ DEFAULT STACK SPACING - Already good */
454
- --jux-gap-token: var(--jux-space-sm); /* 8px */
455
- --jux-pad-token: var(--jux-space-md); /* 12px */
456
- }
457
-
458
- [data-swag="notion"][data-mode="dark"] {
459
- --jux-brand-from: #ffffff;
460
- --jux-brand-to: #e0e0e0;
461
- --jux-brand-accent-from: #0f7b6c;
462
- --jux-brand-accent-to: #0a5a4f;
463
-
464
- --jux-surface-from: #191919;
465
- --jux-surface-to: #2f2f2f;
466
-
467
- --jux-text-from: #ffffff;
468
- --jux-text-to: #9b9a97;
469
-
470
- --jux-border-from: #373737;
471
- --jux-border-to: #4a4a4a;
472
-
473
- /* ✅ DEFAULT STACK SPACING */
474
- --jux-gap-token: var(--jux-space-sm);
475
- --jux-pad-token: var(--jux-space-md);
476
- }
477
-
478
- /* ══════════════════════════════════════════════════════════════════
479
- 🎯 DEFAULT FALLBACK - Neutral, System-Based
480
- ══════════════════════════════════════════════════════════════════ */
481
-
482
- :root:not([data-swag]),
483
- [data-swag="default"] {
484
- /* Inherits from foundation.css defaults */
485
- /* This ensures the system works even if no theme is selected */
486
- }