juxscript 1.0.113 → 1.0.115
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/create/themes/base.css
CHANGED
|
@@ -8,7 +8,11 @@
|
|
|
8
8
|
--font-size-sm: 0.875rem;
|
|
9
9
|
--font-size-base: 1rem;
|
|
10
10
|
--font-size-lg: 1.125rem;
|
|
11
|
+
--font-size-xl: 1.5rem;
|
|
12
|
+
--font-size-2xl: 2rem;
|
|
13
|
+
--font-size-4xl: 4rem;
|
|
11
14
|
--line-height-normal: 1.6;
|
|
15
|
+
--line-height-tight: 1.2;
|
|
12
16
|
|
|
13
17
|
/* Spacing Scale */
|
|
14
18
|
--space-xs: 0.25rem;
|
|
@@ -16,11 +20,15 @@
|
|
|
16
20
|
--space-md: 1rem;
|
|
17
21
|
--space-lg: 1.5rem;
|
|
18
22
|
--space-xl: 2rem;
|
|
23
|
+
--space-2xl: 3rem;
|
|
19
24
|
|
|
20
25
|
/* Layout */
|
|
21
26
|
--radius-sm: 6px;
|
|
22
27
|
--radius-md: 10px;
|
|
28
|
+
--radius-lg: 12px;
|
|
29
|
+
--radius-round: 50px;
|
|
23
30
|
--border-width: 1px;
|
|
31
|
+
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.05);
|
|
24
32
|
|
|
25
33
|
/* Animation */
|
|
26
34
|
--transition-fast: 150ms ease;
|
|
@@ -28,14 +36,18 @@
|
|
|
28
36
|
|
|
29
37
|
/* Color Palette - RxTrail Brand Colors */
|
|
30
38
|
--color-brand: #e57373;
|
|
39
|
+
--color-brand-contrast: #000000;
|
|
31
40
|
--color-brand-hover: #ef5350;
|
|
32
41
|
--color-brand-subtle: rgba(229, 115, 115, 0.08);
|
|
33
42
|
|
|
34
43
|
--color-text-primary: #2c2f3e;
|
|
35
|
-
--color-text-secondary: #
|
|
44
|
+
--color-text-secondary: #666666;
|
|
36
45
|
--color-text-inverse: #ffffff;
|
|
37
46
|
|
|
38
47
|
--color-background: #fafbfc;
|
|
48
|
+
--color-background-alt: #f8f9fa;
|
|
49
|
+
--color-background-inverse: #111111;
|
|
50
|
+
|
|
39
51
|
--color-surface-base: #ffffff;
|
|
40
52
|
--color-surface-hover: #fef5f5;
|
|
41
53
|
--color-surface-active: #fce8e8;
|
|
@@ -48,6 +48,8 @@ export declare class ElementEngine extends BaseEngine<ElementState, ElementOptio
|
|
|
48
48
|
* Append raw HTML to existing content
|
|
49
49
|
*/
|
|
50
50
|
appendHtml(value: string): this;
|
|
51
|
+
/** @alias for content(value, 'text') */
|
|
52
|
+
text(value: string): this;
|
|
51
53
|
/**
|
|
52
54
|
* Receives RAW DOM events from the Skin and emits them to listeners.
|
|
53
55
|
*/
|
|
@@ -98,6 +98,10 @@ export class ElementEngine extends BaseEngine {
|
|
|
98
98
|
this.updateState({ content: current + value, contentType: 'html' });
|
|
99
99
|
return this;
|
|
100
100
|
}
|
|
101
|
+
/** @alias for content(value, 'text') */
|
|
102
|
+
text(value) {
|
|
103
|
+
return this.content(value, 'text');
|
|
104
|
+
}
|
|
101
105
|
/**
|
|
102
106
|
* Receives RAW DOM events from the Skin and emits them to listeners.
|
|
103
107
|
*/
|
|
@@ -12,5 +12,91 @@
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.jux-element:hover {
|
|
15
|
-
background-color:
|
|
15
|
+
background-color: transparent; /* Reset unless specific */
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* --- Layout Primitives --- */
|
|
19
|
+
|
|
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);
|
|
28
|
+
}
|
|
29
|
+
|
|
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;
|
|
37
|
+
}
|
|
38
|
+
|
|
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);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* --- Typography Primitives --- */
|
|
49
|
+
|
|
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;
|
|
57
|
+
}
|
|
58
|
+
|
|
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);
|
|
67
|
+
}
|
|
68
|
+
|
|
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);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* --- Visual Primitives --- */
|
|
77
|
+
|
|
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);
|
|
84
|
+
}
|
|
85
|
+
|
|
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;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.jux-btn-primary:hover {
|
|
100
|
+
transform: translateY(-2px);
|
|
101
|
+
background-color: var(--color-brand-contrast);
|
|
16
102
|
}
|