juxscript 1.0.3 → 1.0.5
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/README.md +37 -92
- package/bin/cli.js +57 -56
- package/lib/components/alert.ts +240 -0
- package/lib/components/app.ts +216 -82
- package/lib/components/badge.ts +164 -0
- package/lib/components/barchart.ts +1248 -0
- package/lib/components/button.ts +188 -53
- package/lib/components/card.ts +75 -61
- package/lib/components/chart.ts +17 -15
- package/lib/components/checkbox.ts +199 -0
- package/lib/components/code.ts +66 -152
- package/lib/components/container.ts +104 -208
- package/lib/components/data.ts +1 -3
- package/lib/components/datepicker.ts +226 -0
- package/lib/components/dialog.ts +258 -0
- package/lib/components/docs-data.json +1969 -423
- package/lib/components/dropdown.ts +244 -0
- package/lib/components/element.ts +271 -0
- package/lib/components/fileupload.ts +319 -0
- package/lib/components/footer.ts +37 -18
- package/lib/components/header.ts +53 -33
- package/lib/components/heading.ts +119 -0
- package/lib/components/helpers.ts +34 -0
- package/lib/components/hero.ts +57 -31
- package/lib/components/include.ts +292 -0
- package/lib/components/input.ts +508 -77
- package/lib/components/layout.ts +144 -18
- package/lib/components/list.ts +83 -74
- package/lib/components/loading.ts +263 -0
- package/lib/components/main.ts +43 -17
- package/lib/components/menu.ts +108 -24
- package/lib/components/modal.ts +50 -21
- package/lib/components/nav.ts +60 -18
- package/lib/components/paragraph.ts +111 -0
- package/lib/components/progress.ts +276 -0
- package/lib/components/radio.ts +236 -0
- package/lib/components/req.ts +300 -0
- package/lib/components/script.ts +33 -74
- package/lib/components/select.ts +280 -0
- package/lib/components/sidebar.ts +87 -37
- package/lib/components/style.ts +47 -70
- package/lib/components/switch.ts +261 -0
- package/lib/components/table.ts +47 -24
- package/lib/components/tabs.ts +105 -63
- package/lib/components/theme-toggle.ts +361 -0
- package/lib/components/token-calculator.ts +380 -0
- package/lib/components/tooltip.ts +244 -0
- package/lib/components/view.ts +36 -20
- package/lib/components/write.ts +284 -0
- package/lib/globals.d.ts +21 -0
- package/lib/jux.ts +178 -68
- package/lib/presets/notion.css +521 -0
- package/lib/presets/notion.jux +27 -0
- package/lib/reactivity/state.ts +364 -0
- package/lib/themes/charts.js +126 -0
- package/machinery/compiler.js +126 -38
- package/machinery/generators/html.js +2 -3
- package/machinery/server.js +2 -2
- package/package.json +29 -3
- package/lib/components/import.ts +0 -430
- package/lib/components/node.ts +0 -200
- package/lib/components/reactivity.js +0 -104
- package/lib/components/theme.ts +0 -97
- package/lib/layouts/notion.css +0 -258
- package/lib/styles/base-theme.css +0 -186
- package/lib/styles/dark-theme.css +0 -144
- package/lib/styles/light-theme.css +0 -144
- package/lib/styles/tokens/dark.css +0 -86
- package/lib/styles/tokens/light.css +0 -86
- package/lib/templates/index.juxt +0 -33
- package/lib/themes/dark.css +0 -86
- package/lib/themes/light.css +0 -86
- /package/lib/{styles → presets}/global.css +0 -0
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
/* Dark Theme Styles ./dark-theme.css */
|
|
2
|
-
:root {
|
|
3
|
-
--theme-brand: #0a9ca5;
|
|
4
|
-
--theme-brand-hover: #088892;
|
|
5
|
-
--theme-success: #0a9ca5;
|
|
6
|
-
--theme-danger: #ef4444;
|
|
7
|
-
--theme-text: #e0e0e0;
|
|
8
|
-
--theme-text-muted: #aaa;
|
|
9
|
-
--theme-text-inverse: #ffffff;
|
|
10
|
-
--theme-surface: #2a2a2a;
|
|
11
|
-
--theme-surface-elevated: #333;
|
|
12
|
-
--theme-border: #444;
|
|
13
|
-
--theme-hover-deeper: #3a3a3a;
|
|
14
|
-
--theme-wash-slate: #2a2a2a;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
body {
|
|
18
|
-
color: var(--theme-text);
|
|
19
|
-
background: #1a1a1a;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.jux-hero {
|
|
23
|
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.jux-grid-item {
|
|
27
|
-
background: #2a2a2a;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.jux-grid-title {
|
|
31
|
-
color: #667eea;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.jux-grid-description {
|
|
35
|
-
color: #aaa;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.jux-button-primary {
|
|
39
|
-
background: #667eea;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.jux-button-primary:hover {
|
|
43
|
-
background: #5568d3;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.jux-table {
|
|
47
|
-
background: #2a2a2a;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.jux-table th {
|
|
51
|
-
background-color: #333;
|
|
52
|
-
border-bottom-color: #444;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.jux-table td {
|
|
56
|
-
border-bottom-color: #333;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.jux-table tr:hover {
|
|
60
|
-
background-color: #2a2a2a;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.table-search {
|
|
64
|
-
background: #2a2a2a;
|
|
65
|
-
color: #e0e0e0;
|
|
66
|
-
border-color: #444;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.table-toolbar {
|
|
70
|
-
background: #2a2a2a;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.table-toolbar button {
|
|
74
|
-
background: #2a2a2a;
|
|
75
|
-
color: #e0e0e0;
|
|
76
|
-
border-color: #444;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.table-toolbar button:hover {
|
|
80
|
-
background: #333;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.table-toolbar button.active {
|
|
84
|
-
background: #667eea;
|
|
85
|
-
border-color: #667eea;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.table-filter-dropdown-menu {
|
|
89
|
-
background: #2a2a2a;
|
|
90
|
-
border-color: #444;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.table-filter-dropdown-menu select,
|
|
94
|
-
.table-filter-dropdown-menu input {
|
|
95
|
-
background: #2a2a2a;
|
|
96
|
-
color: #e0e0e0;
|
|
97
|
-
border-color: #444;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.table-active-filters span {
|
|
101
|
-
background: #667eea;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.table-row-menu {
|
|
105
|
-
background: #2a2a2a;
|
|
106
|
-
border-color: #444;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.table-row-menu button {
|
|
110
|
-
color: #e0e0e0;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.table-row-menu button:hover {
|
|
114
|
-
background: #333;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.table-cards .card {
|
|
118
|
-
background: #2a2a2a;
|
|
119
|
-
border-color: #444;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.table-card-actions {
|
|
123
|
-
border-top-color: #444;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.table-pagination button {
|
|
127
|
-
background: #2a2a2a;
|
|
128
|
-
color: #e0e0e0;
|
|
129
|
-
border-color: #444;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.table-pagination button:hover:not(:disabled) {
|
|
133
|
-
background: #333;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.table-pages button.active {
|
|
137
|
-
background: #667eea;
|
|
138
|
-
border-color: #667eea;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.table-pages-ellipsis {
|
|
142
|
-
color: #e0e0e0;
|
|
143
|
-
}
|
|
144
|
-
/* END Dark Theme Styles ./dark-theme.css */
|
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
/* Light Theme Styles ./light-theme.css */
|
|
2
|
-
:root {
|
|
3
|
-
--theme-brand: #085156;
|
|
4
|
-
--theme-brand-hover: #06393c;
|
|
5
|
-
--theme-success: #085156;
|
|
6
|
-
--theme-danger: #ef4444;
|
|
7
|
-
--theme-text: #333;
|
|
8
|
-
--theme-text-muted: #666;
|
|
9
|
-
--theme-text-inverse: #ffffff;
|
|
10
|
-
--theme-surface: #f4f4f4;
|
|
11
|
-
--theme-surface-elevated: #ffffff;
|
|
12
|
-
--theme-border: #ddd;
|
|
13
|
-
--theme-hover-deeper: #f9f9f9;
|
|
14
|
-
--theme-wash-slate: #f9f9f9;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
body {
|
|
18
|
-
color: var(--theme-text);
|
|
19
|
-
background: #f5f5f5;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.jux-hero {
|
|
23
|
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.jux-grid-item {
|
|
27
|
-
background: #ffffff;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.jux-grid-title {
|
|
31
|
-
color: #667eea;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.jux-grid-description {
|
|
35
|
-
color: #666;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.jux-button-primary {
|
|
39
|
-
background: #667eea;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.jux-button-primary:hover {
|
|
43
|
-
background: #5568d3;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.jux-table {
|
|
47
|
-
background: #ffffff;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.jux-table th {
|
|
51
|
-
background-color: #f4f4f4;
|
|
52
|
-
border-bottom-color: #ddd;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.jux-table td {
|
|
56
|
-
border-bottom-color: #eee;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.jux-table tr:hover {
|
|
60
|
-
background-color: #f9f9f9;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.table-search {
|
|
64
|
-
background: #ffffff;
|
|
65
|
-
color: #333;
|
|
66
|
-
border-color: #ddd;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.table-toolbar {
|
|
70
|
-
background: #f9f9f9;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.table-toolbar button {
|
|
74
|
-
background: #ffffff;
|
|
75
|
-
color: #333;
|
|
76
|
-
border-color: #ddd;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.table-toolbar button:hover {
|
|
80
|
-
background: #f4f4f4;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.table-toolbar button.active {
|
|
84
|
-
background: #667eea;
|
|
85
|
-
border-color: #667eea;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.table-filter-dropdown-menu {
|
|
89
|
-
background: #ffffff;
|
|
90
|
-
border-color: #ddd;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.table-filter-dropdown-menu select,
|
|
94
|
-
.table-filter-dropdown-menu input {
|
|
95
|
-
background: #ffffff;
|
|
96
|
-
color: #333;
|
|
97
|
-
border-color: #ddd;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.table-active-filters span {
|
|
101
|
-
background: #667eea;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.table-row-menu {
|
|
105
|
-
background: #ffffff;
|
|
106
|
-
border-color: #ddd;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.table-row-menu button {
|
|
110
|
-
color: #333;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.table-row-menu button:hover {
|
|
114
|
-
background: #f4f4f4;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.table-cards .card {
|
|
118
|
-
background: #ffffff;
|
|
119
|
-
border-color: #ddd;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.table-card-actions {
|
|
123
|
-
border-top-color: #eee;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.table-pagination button {
|
|
127
|
-
background: #ffffff;
|
|
128
|
-
color: #333;
|
|
129
|
-
border-color: #ddd;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.table-pagination button:hover:not(:disabled) {
|
|
133
|
-
background: #f4f4f4;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.table-pages button.active {
|
|
137
|
-
background: #667eea;
|
|
138
|
-
border-color: #667eea;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.table-pages-ellipsis {
|
|
142
|
-
color: #333;
|
|
143
|
-
}
|
|
144
|
-
/* END Light Theme Styles ./light-theme.css */
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Dark Theme Tokens
|
|
3
|
-
* Swappable design decisions
|
|
4
|
-
*/
|
|
5
|
-
:root {
|
|
6
|
-
/* Colors */
|
|
7
|
-
--color-brand: #0a9ca5;
|
|
8
|
-
--color-brand-hover: #088892;
|
|
9
|
-
--color-success: #10b981;
|
|
10
|
-
--color-warning: #f59e0b;
|
|
11
|
-
--color-danger: #ef4444;
|
|
12
|
-
--color-info: #3b82f6;
|
|
13
|
-
|
|
14
|
-
--color-text-primary: #e8e8e8;
|
|
15
|
-
--color-text-secondary: #a0a0a0;
|
|
16
|
-
--color-text-tertiary: #707070;
|
|
17
|
-
--color-text-inverse: #ffffff;
|
|
18
|
-
|
|
19
|
-
--color-surface-base: #1a1a1a;
|
|
20
|
-
--color-surface-elevated: #242424;
|
|
21
|
-
--color-surface-hover: #2a2a2a;
|
|
22
|
-
--color-background: #0a0a0a;
|
|
23
|
-
|
|
24
|
-
--color-border: #333333;
|
|
25
|
-
--color-border-hover: #404040;
|
|
26
|
-
--color-border-focus: #7c3aed;
|
|
27
|
-
|
|
28
|
-
/* Typography */
|
|
29
|
-
--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
30
|
-
--font-family-mono: 'Courier New', monospace;
|
|
31
|
-
|
|
32
|
-
--font-size-xs: 0.75rem;
|
|
33
|
-
--font-size-sm: 0.875rem;
|
|
34
|
-
--font-size-base: 1rem;
|
|
35
|
-
--font-size-lg: 1.125rem;
|
|
36
|
-
--font-size-xl: 1.25rem;
|
|
37
|
-
--font-size-2xl: 1.5rem;
|
|
38
|
-
--font-size-3xl: 2rem;
|
|
39
|
-
|
|
40
|
-
--font-weight-normal: 400;
|
|
41
|
-
--font-weight-medium: 500;
|
|
42
|
-
--font-weight-semibold: 600;
|
|
43
|
-
--font-weight-bold: 700;
|
|
44
|
-
|
|
45
|
-
--line-height-tight: 1.25;
|
|
46
|
-
--line-height-normal: 1.5;
|
|
47
|
-
--line-height-relaxed: 1.75;
|
|
48
|
-
|
|
49
|
-
/* Spacing */
|
|
50
|
-
--space-xs: 0.25rem;
|
|
51
|
-
--space-sm: 0.5rem;
|
|
52
|
-
--space-md: 1rem;
|
|
53
|
-
--space-lg: 1.5rem;
|
|
54
|
-
--space-xl: 2rem;
|
|
55
|
-
--space-2xl: 3rem;
|
|
56
|
-
--space-3xl: 4rem;
|
|
57
|
-
|
|
58
|
-
/* Borders */
|
|
59
|
-
--border-radius-sm: 4px;
|
|
60
|
-
--border-radius-md: 6px;
|
|
61
|
-
--border-radius-lg: 8px;
|
|
62
|
-
--border-radius-xl: 12px;
|
|
63
|
-
--border-radius-full: 9999px;
|
|
64
|
-
|
|
65
|
-
--border-width: 1px;
|
|
66
|
-
--border-width-thick: 2px;
|
|
67
|
-
|
|
68
|
-
/* Shadows */
|
|
69
|
-
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
70
|
-
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
|
|
71
|
-
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
|
|
72
|
-
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
|
|
73
|
-
|
|
74
|
-
/* Transitions */
|
|
75
|
-
--transition-fast: 150ms ease;
|
|
76
|
-
--transition-base: 200ms ease;
|
|
77
|
-
--transition-slow: 300ms ease;
|
|
78
|
-
|
|
79
|
-
/* Legacy aliases for backward compatibility */
|
|
80
|
-
--theme-brand: var(--color-brand);
|
|
81
|
-
--theme-text: var(--color-text-primary);
|
|
82
|
-
--theme-text-muted: var(--color-text-secondary);
|
|
83
|
-
--theme-surface: var(--color-surface-base);
|
|
84
|
-
--theme-surface-elevated: var(--color-surface-elevated);
|
|
85
|
-
--theme-border: var(--color-border);
|
|
86
|
-
}
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Light Theme Tokens
|
|
3
|
-
* Swappable design decisions
|
|
4
|
-
*/
|
|
5
|
-
:root {
|
|
6
|
-
/* Colors */
|
|
7
|
-
--color-brand: #0a9ca5;
|
|
8
|
-
--color-brand-hover: #088892;
|
|
9
|
-
--color-success: #10b981;
|
|
10
|
-
--color-warning: #f59e0b;
|
|
11
|
-
--color-danger: #ef4444;
|
|
12
|
-
--color-info: #3b82f6;
|
|
13
|
-
|
|
14
|
-
--color-text-primary: #111827;
|
|
15
|
-
--color-text-secondary: #4b5563;
|
|
16
|
-
--color-text-tertiary: #6b7280;
|
|
17
|
-
--color-text-inverse: #ffffff;
|
|
18
|
-
|
|
19
|
-
--color-surface-base: #f3f4f6;
|
|
20
|
-
--color-surface-elevated: #ffffff;
|
|
21
|
-
--color-surface-hover: #e5e7eb;
|
|
22
|
-
--color-background: #ffffff;
|
|
23
|
-
|
|
24
|
-
--color-border: #d1d5db;
|
|
25
|
-
--color-border-hover: #9ca3af;
|
|
26
|
-
--color-border-focus: #7c3aed;
|
|
27
|
-
|
|
28
|
-
/* Typography */
|
|
29
|
-
--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
30
|
-
--font-family-mono: 'Courier New', monospace;
|
|
31
|
-
|
|
32
|
-
--font-size-xs: 0.75rem;
|
|
33
|
-
--font-size-sm: 0.875rem;
|
|
34
|
-
--font-size-base: 1rem;
|
|
35
|
-
--font-size-lg: 1.125rem;
|
|
36
|
-
--font-size-xl: 1.25rem;
|
|
37
|
-
--font-size-2xl: 1.5rem;
|
|
38
|
-
--font-size-3xl: 2rem;
|
|
39
|
-
|
|
40
|
-
--font-weight-normal: 400;
|
|
41
|
-
--font-weight-medium: 500;
|
|
42
|
-
--font-weight-semibold: 600;
|
|
43
|
-
--font-weight-bold: 700;
|
|
44
|
-
|
|
45
|
-
--line-height-tight: 1.25;
|
|
46
|
-
--line-height-normal: 1.5;
|
|
47
|
-
--line-height-relaxed: 1.75;
|
|
48
|
-
|
|
49
|
-
/* Spacing */
|
|
50
|
-
--space-xs: 0.25rem;
|
|
51
|
-
--space-sm: 0.5rem;
|
|
52
|
-
--space-md: 1rem;
|
|
53
|
-
--space-lg: 1.5rem;
|
|
54
|
-
--space-xl: 2rem;
|
|
55
|
-
--space-2xl: 3rem;
|
|
56
|
-
--space-3xl: 4rem;
|
|
57
|
-
|
|
58
|
-
/* Borders */
|
|
59
|
-
--border-radius-sm: 4px;
|
|
60
|
-
--border-radius-md: 6px;
|
|
61
|
-
--border-radius-lg: 8px;
|
|
62
|
-
--border-radius-xl: 12px;
|
|
63
|
-
--border-radius-full: 9999px;
|
|
64
|
-
|
|
65
|
-
--border-width: 1px;
|
|
66
|
-
--border-width-thick: 2px;
|
|
67
|
-
|
|
68
|
-
/* Shadows */
|
|
69
|
-
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
70
|
-
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
71
|
-
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
|
|
72
|
-
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
|
|
73
|
-
|
|
74
|
-
/* Transitions */
|
|
75
|
-
--transition-fast: 150ms ease;
|
|
76
|
-
--transition-base: 200ms ease;
|
|
77
|
-
--transition-slow: 300ms ease;
|
|
78
|
-
|
|
79
|
-
/* Legacy aliases for backward compatibility */
|
|
80
|
-
--theme-brand: var(--color-brand);
|
|
81
|
-
--theme-text: var(--color-text-primary);
|
|
82
|
-
--theme-text-muted: var(--color-text-secondary);
|
|
83
|
-
--theme-surface: var(--color-surface-base);
|
|
84
|
-
--theme-surface-elevated: var(--color-surface-elevated);
|
|
85
|
-
--theme-border: var(--color-border);
|
|
86
|
-
}
|
package/lib/templates/index.juxt
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
// Welcome to JUX!
|
|
2
|
-
import { code } from '/lib/components/code.js';
|
|
3
|
-
import { jux } from '/lib/jux.js';
|
|
4
|
-
|
|
5
|
-
jux.style('/lib/layouts/notion.css');
|
|
6
|
-
jux.theme('light');
|
|
7
|
-
|
|
8
|
-
const appheader = jux.header('appheader', {}).render("#app");
|
|
9
|
-
const appsubheader = jux.header('appsubheader', {}).render("#app");
|
|
10
|
-
const appsidebar = jux.sidebar('appsidebar', {}).render("#app");
|
|
11
|
-
const appmain = jux.main('appmain', {}).render("#app");
|
|
12
|
-
const appaside = jux.sidebar('appaside', {}).render("#app");
|
|
13
|
-
const appfooter = jux.footer('appfooter', {}).render("#app");
|
|
14
|
-
const appmodal = jux.modal('appmodal', {}).render("#app");
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
await jux.hero('hero1', {
|
|
18
|
-
title: 'Welcome to JUX',
|
|
19
|
-
subtitle: 'A JavaScript UX authorship platform'
|
|
20
|
-
}).render();
|
|
21
|
-
|
|
22
|
-
const code1 = code('code1').code(`Serve from your backend:
|
|
23
|
-
Express: app.use(express.static('jux-dist'))
|
|
24
|
-
Flask: app = Flask(__name__, static_folder='jux-dist')
|
|
25
|
-
FastAPI: app.mount("/", StaticFiles(directory="jux-dist"), name="static")
|
|
26
|
-
Laravel: Route::view('/', 'jux-dist/index.html')`)
|
|
27
|
-
.language('bash');
|
|
28
|
-
|
|
29
|
-
code1.render();
|
|
30
|
-
|
|
31
|
-
// note
|
|
32
|
-
// render()
|
|
33
|
-
// renderTo()
|
package/lib/themes/dark.css
DELETED
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Dark Theme Tokens
|
|
3
|
-
* Swappable design decisions
|
|
4
|
-
*/
|
|
5
|
-
:root {
|
|
6
|
-
/* Colors */
|
|
7
|
-
--color-brand: #0a9ca5;
|
|
8
|
-
--color-brand-hover: #088892;
|
|
9
|
-
--color-success: #10b981;
|
|
10
|
-
--color-warning: #f59e0b;
|
|
11
|
-
--color-danger: #ef4444;
|
|
12
|
-
--color-info: #3b82f6;
|
|
13
|
-
|
|
14
|
-
--color-text-primary: #e8e8e8;
|
|
15
|
-
--color-text-secondary: #a0a0a0;
|
|
16
|
-
--color-text-tertiary: #707070;
|
|
17
|
-
--color-text-inverse: #ffffff;
|
|
18
|
-
|
|
19
|
-
--color-surface-base: #1a1a1a;
|
|
20
|
-
--color-surface-elevated: #242424;
|
|
21
|
-
--color-surface-hover: #2a2a2a;
|
|
22
|
-
--color-background: #0a0a0a;
|
|
23
|
-
|
|
24
|
-
--color-border: #333333;
|
|
25
|
-
--color-border-hover: #404040;
|
|
26
|
-
--color-border-focus: #7c3aed;
|
|
27
|
-
|
|
28
|
-
/* Typography */
|
|
29
|
-
--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
30
|
-
--font-family-mono: 'Courier New', monospace;
|
|
31
|
-
|
|
32
|
-
--font-size-xs: 0.75rem;
|
|
33
|
-
--font-size-sm: 0.875rem;
|
|
34
|
-
--font-size-base: 1rem;
|
|
35
|
-
--font-size-lg: 1.125rem;
|
|
36
|
-
--font-size-xl: 1.25rem;
|
|
37
|
-
--font-size-2xl: 1.5rem;
|
|
38
|
-
--font-size-3xl: 2rem;
|
|
39
|
-
|
|
40
|
-
--font-weight-normal: 400;
|
|
41
|
-
--font-weight-medium: 500;
|
|
42
|
-
--font-weight-semibold: 600;
|
|
43
|
-
--font-weight-bold: 700;
|
|
44
|
-
|
|
45
|
-
--line-height-tight: 1.25;
|
|
46
|
-
--line-height-normal: 1.5;
|
|
47
|
-
--line-height-relaxed: 1.75;
|
|
48
|
-
|
|
49
|
-
/* Spacing */
|
|
50
|
-
--space-xs: 0.25rem;
|
|
51
|
-
--space-sm: 0.5rem;
|
|
52
|
-
--space-md: 1rem;
|
|
53
|
-
--space-lg: 1.5rem;
|
|
54
|
-
--space-xl: 2rem;
|
|
55
|
-
--space-2xl: 3rem;
|
|
56
|
-
--space-3xl: 4rem;
|
|
57
|
-
|
|
58
|
-
/* Borders */
|
|
59
|
-
--border-radius-sm: 4px;
|
|
60
|
-
--border-radius-md: 6px;
|
|
61
|
-
--border-radius-lg: 8px;
|
|
62
|
-
--border-radius-xl: 12px;
|
|
63
|
-
--border-radius-full: 9999px;
|
|
64
|
-
|
|
65
|
-
--border-width: 1px;
|
|
66
|
-
--border-width-thick: 2px;
|
|
67
|
-
|
|
68
|
-
/* Shadows */
|
|
69
|
-
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
70
|
-
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
|
|
71
|
-
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
|
|
72
|
-
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
|
|
73
|
-
|
|
74
|
-
/* Transitions */
|
|
75
|
-
--transition-fast: 150ms ease;
|
|
76
|
-
--transition-base: 200ms ease;
|
|
77
|
-
--transition-slow: 300ms ease;
|
|
78
|
-
|
|
79
|
-
/* Legacy aliases for backward compatibility */
|
|
80
|
-
--theme-brand: var(--color-brand);
|
|
81
|
-
--theme-text: var(--color-text-primary);
|
|
82
|
-
--theme-text-muted: var(--color-text-secondary);
|
|
83
|
-
--theme-surface: var(--color-surface-base);
|
|
84
|
-
--theme-surface-elevated: var(--color-surface-elevated);
|
|
85
|
-
--theme-border: var(--color-border);
|
|
86
|
-
}
|
package/lib/themes/light.css
DELETED
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Light Theme Tokens
|
|
3
|
-
* Swappable design decisions
|
|
4
|
-
*/
|
|
5
|
-
:root {
|
|
6
|
-
/* Colors */
|
|
7
|
-
--color-brand: #0a9ca5;
|
|
8
|
-
--color-brand-hover: #088892;
|
|
9
|
-
--color-success: #10b981;
|
|
10
|
-
--color-warning: #f59e0b;
|
|
11
|
-
--color-danger: #ef4444;
|
|
12
|
-
--color-info: #3b82f6;
|
|
13
|
-
|
|
14
|
-
--color-text-primary: #111827;
|
|
15
|
-
--color-text-secondary: #4b5563;
|
|
16
|
-
--color-text-tertiary: #6b7280;
|
|
17
|
-
--color-text-inverse: #ffffff;
|
|
18
|
-
|
|
19
|
-
--color-surface-base: #f3f4f6;
|
|
20
|
-
--color-surface-elevated: #ffffff;
|
|
21
|
-
--color-surface-hover: #e5e7eb;
|
|
22
|
-
--color-background: #ffffff;
|
|
23
|
-
|
|
24
|
-
--color-border: #d1d5db;
|
|
25
|
-
--color-border-hover: #9ca3af;
|
|
26
|
-
--color-border-focus: #7c3aed;
|
|
27
|
-
|
|
28
|
-
/* Typography */
|
|
29
|
-
--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
30
|
-
--font-family-mono: 'Courier New', monospace;
|
|
31
|
-
|
|
32
|
-
--font-size-xs: 0.75rem;
|
|
33
|
-
--font-size-sm: 0.875rem;
|
|
34
|
-
--font-size-base: 1rem;
|
|
35
|
-
--font-size-lg: 1.125rem;
|
|
36
|
-
--font-size-xl: 1.25rem;
|
|
37
|
-
--font-size-2xl: 1.5rem;
|
|
38
|
-
--font-size-3xl: 2rem;
|
|
39
|
-
|
|
40
|
-
--font-weight-normal: 400;
|
|
41
|
-
--font-weight-medium: 500;
|
|
42
|
-
--font-weight-semibold: 600;
|
|
43
|
-
--font-weight-bold: 700;
|
|
44
|
-
|
|
45
|
-
--line-height-tight: 1.25;
|
|
46
|
-
--line-height-normal: 1.5;
|
|
47
|
-
--line-height-relaxed: 1.75;
|
|
48
|
-
|
|
49
|
-
/* Spacing */
|
|
50
|
-
--space-xs: 0.25rem;
|
|
51
|
-
--space-sm: 0.5rem;
|
|
52
|
-
--space-md: 1rem;
|
|
53
|
-
--space-lg: 1.5rem;
|
|
54
|
-
--space-xl: 2rem;
|
|
55
|
-
--space-2xl: 3rem;
|
|
56
|
-
--space-3xl: 4rem;
|
|
57
|
-
|
|
58
|
-
/* Borders */
|
|
59
|
-
--border-radius-sm: 4px;
|
|
60
|
-
--border-radius-md: 6px;
|
|
61
|
-
--border-radius-lg: 8px;
|
|
62
|
-
--border-radius-xl: 12px;
|
|
63
|
-
--border-radius-full: 9999px;
|
|
64
|
-
|
|
65
|
-
--border-width: 1px;
|
|
66
|
-
--border-width-thick: 2px;
|
|
67
|
-
|
|
68
|
-
/* Shadows */
|
|
69
|
-
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
70
|
-
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
71
|
-
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
|
|
72
|
-
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
|
|
73
|
-
|
|
74
|
-
/* Transitions */
|
|
75
|
-
--transition-fast: 150ms ease;
|
|
76
|
-
--transition-base: 200ms ease;
|
|
77
|
-
--transition-slow: 300ms ease;
|
|
78
|
-
|
|
79
|
-
/* Legacy aliases for backward compatibility */
|
|
80
|
-
--theme-brand: var(--color-brand);
|
|
81
|
-
--theme-text: var(--color-text-primary);
|
|
82
|
-
--theme-text-muted: var(--color-text-secondary);
|
|
83
|
-
--theme-surface: var(--color-surface-base);
|
|
84
|
-
--theme-surface-elevated: var(--color-surface-elevated);
|
|
85
|
-
--theme-border: var(--color-border);
|
|
86
|
-
}
|
|
File without changes
|