juxscript 1.0.115 → 1.0.117

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 (3) hide show
  1. package/create/themes/base.css +125 -0
  2. package/lib/componentsv2/element/structure.css +171 -76
  3. package/package.json +1 -1
package/create/themes/base.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --font-size-lg: 1.125rem;
11
11
  --font-size-xl: 1.5rem;
12
12
  --font-size-2xl: 2rem;
13
+ --font-size-3xl: 2.25rem; /* Added for H1 default */
13
14
  --font-size-4xl: 4rem;
14
15
  --line-height-normal: 1.6;
15
16
  --line-height-tight: 1.2;
@@ -70,3 +71,127 @@
70
71
  --color-surface-hover: #243447;
71
72
  --color-border: #384456;
72
73
  }
74
+
75
+ /* --- Primitives & Reset --- */
76
+
77
+ *, *::before, *::after {
78
+ box-sizing: border-box;
79
+ }
80
+
81
+ html, body {
82
+ height: 100%;
83
+ margin: 0;
84
+ padding: 0;
85
+ }
86
+
87
+ body {
88
+ font-family: var(--font-family-base);
89
+ font-size: var(--font-size-base);
90
+ line-height: var(--line-height-normal);
91
+ color: var(--color-text-primary);
92
+ background-color: var(--color-background);
93
+ -webkit-font-smoothing: antialiased;
94
+ -moz-osx-font-smoothing: grayscale;
95
+ }
96
+
97
+ h1, h2, h3, h4, h5, h6 {
98
+ margin-top: 0;
99
+ margin-bottom: var(--space-md);
100
+ font-weight: 700;
101
+ line-height: var(--line-height-tight);
102
+ color: var(--color-text-primary);
103
+ }
104
+
105
+ h1 { font-size: var(--font-size-3xl); letter-spacing: -0.02em; }
106
+ h2 { font-size: var(--font-size-2xl); letter-spacing: -0.01em; }
107
+ h3 { font-size: var(--font-size-xl); }
108
+ h4 { font-size: var(--font-size-lg); }
109
+ h5 { font-size: var(--font-size-base); }
110
+ h6 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
111
+
112
+ p {
113
+ margin-top: 0;
114
+ margin-bottom: var(--space-md);
115
+ max-width: 70ch; /* Optimal reading width */
116
+ }
117
+
118
+ a {
119
+ color: var(--color-brand);
120
+ text-decoration: none;
121
+ font-weight: 500;
122
+ transition: color var(--transition-fast);
123
+ }
124
+
125
+ a:hover {
126
+ color: var(--color-brand-hover);
127
+ text-decoration: underline;
128
+ }
129
+
130
+ strong, b {
131
+ font-weight: 700;
132
+ }
133
+
134
+ em, i {
135
+ font-style: italic;
136
+ }
137
+
138
+ ul, ol {
139
+ margin-top: 0;
140
+ margin-bottom: var(--space-md);
141
+ padding-left: var(--space-xl);
142
+ }
143
+
144
+ li {
145
+ margin-bottom: var(--space-xs);
146
+ }
147
+
148
+ code, kbd, samp {
149
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
150
+ font-size: 0.9em;
151
+ padding: 0.2em 0.4em;
152
+ border-radius: var(--radius-sm);
153
+ background-color: var(--color-surface-hover);
154
+ color: var(--color-text-primary);
155
+ }
156
+
157
+ pre {
158
+ display: block;
159
+ overflow-x: auto;
160
+ padding: var(--space-md);
161
+ background-color: var(--color-surface-hover);
162
+ border: 1px solid var(--color-border);
163
+ border-radius: var(--radius-md);
164
+ margin-bottom: var(--space-lg);
165
+ }
166
+
167
+ pre code {
168
+ background-color: transparent;
169
+ padding: 0;
170
+ color: inherit;
171
+ font-size: var(--font-size-sm);
172
+ }
173
+
174
+ blockquote {
175
+ margin: var(--space-lg) 0;
176
+ padding-left: var(--space-lg);
177
+ border-left: 4px solid var(--color-brand-subtle);
178
+ color: var(--color-text-secondary);
179
+ font-style: italic;
180
+ }
181
+
182
+ img, video {
183
+ max-width: 100%;
184
+ height: auto;
185
+ display: block;
186
+ }
187
+
188
+ hr {
189
+ border: 0;
190
+ border-top: var(--border-width) solid var(--color-border);
191
+ margin: var(--space-xl) 0;
192
+ }
193
+
194
+ button, input, select, textarea {
195
+ font-family: inherit;
196
+ font-size: inherit;
197
+ }
package/lib/componentsv2/element/structure.css CHANGED
@@ -1,102 +1,197 @@
1
- .jux-element {
2
- /* Minimal layout defaults to behave like a standard block/inline element */
3
- box-sizing: border-box;
4
- /* Allow text properties to inherit naturally */
5
- color: inherit;
6
- font-family: inherit;
1
+ /**
2
+ * Base
3
+ */
4
+
5
+ :root {
6
+ /* Typography */
7
+ --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
8
+ --font-size-sm: 0.875rem;
9
+ --font-size-base: 1rem;
10
+ --font-size-lg: 1.125rem;
11
+ --font-size-xl: 1.5rem;
12
+ --font-size-2xl: 2rem;
13
+ --font-size-3xl: 2.25rem; /* Added for H1 default */
14
+ --font-size-4xl: 4rem;
15
+ --line-height-normal: 1.6;
16
+ --line-height-tight: 1.2;
17
+
18
+ /* Spacing Scale */
19
+ --space-xs: 0.25rem;
20
+ --space-sm: 0.5rem;
21
+ --space-md: 1rem;
22
+ --space-lg: 1.5rem;
23
+ --space-xl: 2rem;
24
+ --space-2xl: 3rem;
25
+
26
+ /* Layout */
27
+ --radius-sm: 6px;
28
+ --radius-md: 10px;
29
+ --radius-lg: 12px;
30
+ --radius-round: 50px;
31
+ --border-width: 1px;
32
+ --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.05);
33
+
34
+ /* Animation */
35
+ --transition-fast: 150ms ease;
36
+ --transition-normal: 300ms ease;
37
+
38
+ /* Color Palette - RxTrail Brand Colors */
39
+ --color-brand: #e57373;
40
+ --color-brand-contrast: #000000;
41
+ --color-brand-hover: #ef5350;
42
+ --color-brand-subtle: rgba(229, 115, 115, 0.08);
43
+
44
+ --color-text-primary: #2c2f3e;
45
+ --color-text-secondary: #666666;
46
+ --color-text-inverse: #ffffff;
47
+
48
+ --color-background: #fafbfc;
49
+ --color-background-alt: #f8f9fa;
50
+ --color-background-inverse: #111111;
51
+
52
+ --color-surface-base: #ffffff;
53
+ --color-surface-hover: #fef5f5;
54
+ --color-surface-active: #fce8e8;
55
+
56
+ --color-border: #e5e7eb;
57
+ --color-border-hover: #d1d5db;
58
+
59
+ /* Accent colors for clinical data */
60
+ --color-success: #00a878;
61
+ --color-warning: #f39c12;
62
+ --color-danger: #e74c3c;
7
63
  }
8
64
 
9
- /* Optional helper for hidden state toggling via engine */
10
- .jux-element[hidden] {
11
- display: none !important;
65
+ /* Dark Mode Overrides */
66
+ [data-theme="dark"] {
67
+ --color-text-primary: #e8edf3;
68
+ --color-text-secondary: #9aa6b5;
69
+ --color-background: #0f1419;
70
+ --color-surface-base: #1a2332;
71
+ --color-surface-hover: #243447;
72
+ --color-border: #384456;
12
73
  }
13
74
 
14
- .jux-element:hover {
15
- background-color: transparent; /* Reset unless specific */
75
+ /* --- Primitives & Reset --- */
76
+
77
+ *, *::before, *::after {
78
+ box-sizing: border-box;
16
79
  }
17
80
 
18
- /* --- Layout Primitives --- */
81
+ html, body {
82
+ height: 100%;
83
+ margin: 0;
84
+ padding: 0;
85
+ }
19
86
 
20
- .jux-section-center {
21
- display: flex;
22
- flex-direction: column;
23
- justify-content: center;
24
- align-items: center;
25
- height: 100%;
26
- text-align: center;
27
- background-color: var(--color-background-alt);
87
+ body {
88
+ font-family: var(--font-family-base);
89
+ font-size: var(--font-size-base);
90
+ line-height: var(--line-height-normal);
91
+ color: var(--color-text-primary);
92
+ background-color: var(--color-background);
93
+ -webkit-font-smoothing: antialiased;
94
+ -moz-osx-font-smoothing: grayscale;
28
95
  }
29
96
 
30
- .jux-grid-responsive {
31
- display: grid;
32
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
33
- gap: 40px;
34
- max-width: 1000px;
35
- margin: 60px auto;
36
- padding: 0 20px;
97
+ h1, h2, h3, h4, h5, h6 {
98
+ margin-top: 0;
99
+ margin-bottom: var(--space-md);
100
+ font-weight: 700;
101
+ line-height: var(--line-height-tight);
102
+ color: var(--color-text-primary);
37
103
  }
38
104
 
39
- .jux-layout-footer {
40
- display: flex;
41
- align-items: center;
42
- justify-content: center;
43
- height: 100%;
44
- background: var(--color-background-inverse);
45
- color: var(--color-text-secondary);
105
+ h1 { font-size: var(--font-size-3xl); letter-spacing: -0.02em; }
106
+ h2 { font-size: var(--font-size-2xl); letter-spacing: -0.01em; }
107
+ h3 { font-size: var(--font-size-xl); }
108
+ h4 { font-size: var(--font-size-lg); }
109
+ h5 { font-size: var(--font-size-base); }
110
+ h6 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
111
+
112
+ p {
113
+ margin-top: 0;
114
+ margin-bottom: var(--space-md);
115
+ max-width: 70ch; /* Optimal reading width */
46
116
  }
47
117
 
48
- /* --- Typography Primitives --- */
118
+ a {
119
+ color: var(--color-brand);
120
+ text-decoration: none;
121
+ font-weight: 500;
122
+ transition: color var(--transition-fast);
123
+ }
49
124
 
50
- .jux-typo-brand {
51
- margin: 0;
52
- padding: 25px 40px;
53
- font-weight: 800;
54
- letter-spacing: -1px;
55
- display: flex;
56
- align-items: center;
125
+ a:hover {
126
+ color: var(--color-brand-hover);
127
+ text-decoration: underline;
57
128
  }
58
129
 
59
- .jux-typo-display {
60
- font-size: var(--font-size-4xl);
61
- margin: 0 0 20px 0;
62
- font-weight: 900;
63
- background: linear-gradient(45deg, #111, #555);
64
- -webkit-background-clip: text;
65
- -webkit-text-fill-color: transparent;
66
- line-height: var(--line-height-tight);
130
+ strong, b {
131
+ font-weight: 700;
67
132
  }
68
133
 
69
- .jux-typo-lead {
70
- font-size: var(--font-size-xl);
71
- color: var(--color-text-secondary);
72
- max-width: 600px;
73
- line-height: var(--line-height-normal);
134
+ em, i {
135
+ font-style: italic;
74
136
  }
75
137
 
76
- /* --- Visual Primitives --- */
138
+ ul, ol {
139
+ margin-top: 0;
140
+ margin-bottom: var(--space-md);
141
+ padding-left: var(--space-xl);
142
+ }
143
+
144
+ li {
145
+ margin-bottom: var(--space-xs);
146
+ }
147
+
148
+ code, kbd, samp {
149
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
150
+ font-size: 0.9em;
151
+ padding: 0.2em 0.4em;
152
+ border-radius: var(--radius-sm);
153
+ background-color: var(--color-surface-hover);
154
+ color: var(--color-text-primary);
155
+ }
156
+
157
+ pre {
158
+ display: block;
159
+ overflow-x: auto;
160
+ padding: var(--space-md);
161
+ background-color: var(--color-surface-hover);
162
+ border: 1px solid var(--color-border);
163
+ border-radius: var(--radius-md);
164
+ margin-bottom: var(--space-lg);
165
+ }
166
+
167
+ pre code {
168
+ background-color: transparent;
169
+ padding: 0;
170
+ color: inherit;
171
+ font-size: var(--font-size-sm);
172
+ }
173
+
174
+ blockquote {
175
+ margin: var(--space-lg) 0;
176
+ padding-left: var(--space-lg);
177
+ border-left: 4px solid var(--color-brand-subtle);
178
+ color: var(--color-text-secondary);
179
+ font-style: italic;
180
+ }
77
181
 
78
- .jux-card {
79
- background: var(--color-surface-base);
80
- padding: 30px;
81
- border-radius: var(--radius-lg);
82
- box-shadow: var(--shadow-lg);
83
- border: 1px solid var(--color-border);
182
+ img, video {
183
+ max-width: 100%;
184
+ height: auto;
185
+ display: block;
84
186
  }
85
187
 
86
- .jux-btn-primary {
87
- display: inline-block;
88
- margin-top: 30px;
89
- padding: 15px 40px;
90
- font-size: 1.2rem;
91
- background: var(--color-brand-contrast);
92
- color: var(--color-text-inverse);
93
- border: none;
94
- border-radius: var(--radius-round);
95
- cursor: pointer;
96
- transition: transform 0.2s;
188
+ hr {
189
+ border: 0;
190
+ border-top: var(--border-width) solid var(--color-border);
191
+ margin: var(--space-xl) 0;
97
192
  }
98
193
 
99
- .jux-btn-primary:hover {
100
- transform: translateY(-2px);
101
- background-color: var(--color-brand-contrast);
194
+ button, input, select, textarea {
195
+ font-family: inherit;
196
+ font-size: inherit;
102
197
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "juxscript",
3
- "version": "1.0.115",
3
+ "version": "1.0.117",
4
4
  "type": "module",
5
5
  "description": "A JavaScript UX authorship platform",
6
6
  "main": "./index.js",