@koehler8/cms-theme-aurora 1.0.2
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/LICENSE +21 -0
- package/README.md +49 -0
- package/index.js +5 -0
- package/package.json +31 -0
- package/theme.config.js +225 -0
- package/theme.css +30 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 koehler8
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# @koehler8/cms-theme-aurora — Aurora Drift
|
|
2
|
+
|
|
3
|
+
- **Slug**: `aurora`
|
|
4
|
+
- **Version**: 1.0.1
|
|
5
|
+
- **Author**: koehler8
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @koehler8/cms-theme-aurora
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
// vite.config.js
|
|
15
|
+
import cms from '@koehler8/cms/vite';
|
|
16
|
+
|
|
17
|
+
export default {
|
|
18
|
+
plugins: cms({ siteDir: './site', themes: ['@koehler8/cms-theme-aurora'] }),
|
|
19
|
+
};
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Set `site.theme` to `"aurora"` in your site config. Removing the value falls back to the Core Base palette.
|
|
23
|
+
|
|
24
|
+
If your deployment blocks Google Fonts, self-host the `Space Grotesk` family or swap the import in `theme.css`.
|
|
25
|
+
|
|
26
|
+
## Visual Direction
|
|
27
|
+
|
|
28
|
+
- Dark sci-fi gradients with electric blue/purple primary hues, orange highlights, and glassy cards.
|
|
29
|
+
- Body and hero canvases layer multiple radial gradients; containers clamp to `min(1180px, 92vw)` for tighter marketing layouts.
|
|
30
|
+
- Cards pick up a violet border/glow and uppercase CTAs; heading typography swaps to Space Grotesk.
|
|
31
|
+
|
|
32
|
+
## Token Highlights
|
|
33
|
+
|
|
34
|
+
- Primary CTA: multi-stop gradient (blue → purple → orange) with strong glow; secondary CTA keeps a dark, velvety surface.
|
|
35
|
+
- Surfaces include overlay/backdrop tokens for modals plus helper/tab/field treatments tuned for dark backgrounds.
|
|
36
|
+
- Status headline + chart tokens lean on the same electric palette so KPI tiles stay legible against the deep canvas.
|
|
37
|
+
|
|
38
|
+
## Compatibility Notes
|
|
39
|
+
|
|
40
|
+
- Optimized for dark hero art and neon iconography; avoid pairing with extremely light site imagery unless you override section backgrounds.
|
|
41
|
+
- The theme ships only CSS/manifest — no extra JS. Structured tokens follow the standard theme schema so extension components inherit colors automatically.
|
|
42
|
+
|
|
43
|
+
## Contributing
|
|
44
|
+
|
|
45
|
+
See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.
|
|
46
|
+
|
|
47
|
+
## License
|
|
48
|
+
|
|
49
|
+
[MIT](./LICENSE)
|
package/index.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@koehler8/cms-theme-aurora",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "Aurora Drift theme for Vertex CMS — dark sci-fi gradients with electric blue/purple primary hues",
|
|
5
|
+
"author": "koehler8",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"keywords": ["cms", "theme", "koehler8", "aurora", "dark-theme"],
|
|
8
|
+
"homepage": "https://github.com/koehler8/cms-theme-aurora#readme",
|
|
9
|
+
"bugs": {
|
|
10
|
+
"url": "https://github.com/koehler8/cms-theme-aurora/issues"
|
|
11
|
+
},
|
|
12
|
+
"type": "module",
|
|
13
|
+
"exports": {
|
|
14
|
+
".": "./index.js",
|
|
15
|
+
"./config": "./theme.config.js"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"index.js",
|
|
19
|
+
"theme.config.js",
|
|
20
|
+
"theme.css",
|
|
21
|
+
"README.md",
|
|
22
|
+
"LICENSE"
|
|
23
|
+
],
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"@koehler8/cms": "^1.0.0-beta.1"
|
|
26
|
+
},
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "git+https://github.com/koehler8/cms-theme-aurora.git"
|
|
30
|
+
}
|
|
31
|
+
}
|
package/theme.config.js
ADDED
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
const sharedPrimary = '#0f6bf2';
|
|
2
|
+
const sharedPrimaryDeep = '#182b57';
|
|
3
|
+
const sharedSecondary = '#8237f5';
|
|
4
|
+
const sharedAccent = '#f26b0f';
|
|
5
|
+
const sharedNeutral = '#0b1220';
|
|
6
|
+
const sharedNeutralAlt = '#142038';
|
|
7
|
+
const sharedText = '#e1e8ff';
|
|
8
|
+
|
|
9
|
+
export default {
|
|
10
|
+
slug: 'aurora',
|
|
11
|
+
meta: {
|
|
12
|
+
name: 'Aurora Drift',
|
|
13
|
+
version: '1.0.0',
|
|
14
|
+
author: 'koehler8',
|
|
15
|
+
source: 'public',
|
|
16
|
+
},
|
|
17
|
+
tokens: {
|
|
18
|
+
palette: {
|
|
19
|
+
primary: sharedPrimary,
|
|
20
|
+
primaryAccent: sharedPrimaryDeep,
|
|
21
|
+
secondary: sharedSecondary,
|
|
22
|
+
accent: sharedAccent,
|
|
23
|
+
accentSoft: 'rgba(242, 107, 15, 0.28)',
|
|
24
|
+
neutral: sharedNeutral,
|
|
25
|
+
neutralStrong: sharedText,
|
|
26
|
+
neutralSoft: 'rgba(31, 42, 68, 0.85)',
|
|
27
|
+
inverse: '#ffffff',
|
|
28
|
+
success: '#239c65',
|
|
29
|
+
info: sharedPrimary,
|
|
30
|
+
warning: '#f8a94f',
|
|
31
|
+
critical: '#ff577a',
|
|
32
|
+
criticalSoft: 'rgba(255, 87, 122, 0.22)',
|
|
33
|
+
},
|
|
34
|
+
text: {
|
|
35
|
+
primary: sharedText,
|
|
36
|
+
muted: 'rgba(198, 208, 240, 0.76)',
|
|
37
|
+
mutedStrong: 'rgba(176, 189, 228, 0.88)',
|
|
38
|
+
inverse: '#070c18',
|
|
39
|
+
accent: sharedPrimary,
|
|
40
|
+
onAccent: '#051127',
|
|
41
|
+
},
|
|
42
|
+
surfaces: {
|
|
43
|
+
base: sharedNeutral,
|
|
44
|
+
baseAlt: sharedNeutralAlt,
|
|
45
|
+
raised: '#18253d',
|
|
46
|
+
sunken: '#101b33',
|
|
47
|
+
callout: 'rgba(15, 107, 242, 0.22)',
|
|
48
|
+
card: '#101b33',
|
|
49
|
+
cardAlt: 'rgba(16, 27, 51, 0.92)',
|
|
50
|
+
overlay: 'rgba(5, 8, 16, 0.92)',
|
|
51
|
+
backdrop: 'rgba(5, 8, 16, 0.75)',
|
|
52
|
+
border: 'rgba(15, 107, 242, 0.28)',
|
|
53
|
+
divider: 'rgba(15, 107, 242, 0.14)',
|
|
54
|
+
input: '#0f192c',
|
|
55
|
+
chip: 'rgba(15, 107, 242, 0.22)',
|
|
56
|
+
chipAccent: 'rgba(130, 55, 245, 0.22)',
|
|
57
|
+
helper: {
|
|
58
|
+
background: 'rgba(15, 107, 242, 0.18)',
|
|
59
|
+
hover: 'rgba(15, 107, 242, 0.26)',
|
|
60
|
+
text: sharedText,
|
|
61
|
+
border: 'rgba(15, 107, 242, 0.32)',
|
|
62
|
+
heading: sharedText,
|
|
63
|
+
body: 'rgba(198, 208, 240, 0.8)',
|
|
64
|
+
},
|
|
65
|
+
tabs: {
|
|
66
|
+
background: '#0f192c',
|
|
67
|
+
border: 'rgba(15, 107, 242, 0.25)',
|
|
68
|
+
shadow: '0 20px 45px rgba(4, 8, 18, 0.45)',
|
|
69
|
+
tabColor: 'rgba(198, 208, 240, 0.75)',
|
|
70
|
+
activeBackground: 'rgba(130, 55, 245, 0.22)',
|
|
71
|
+
activeColor: '#ffffff',
|
|
72
|
+
activeShadow: '0 16px 36px rgba(2, 5, 12, 0.45)',
|
|
73
|
+
stepBackground: 'rgba(255, 255, 255, 0.08)',
|
|
74
|
+
stepBorder: 'rgba(15, 107, 242, 0.35)',
|
|
75
|
+
stepColor: '#c0c8ff',
|
|
76
|
+
activeStepBackground: 'rgba(15, 107, 242, 0.28)',
|
|
77
|
+
activeStepBorder: 'rgba(15, 107, 242, 0.4)',
|
|
78
|
+
activeStepColor: '#ffffff',
|
|
79
|
+
},
|
|
80
|
+
field: {
|
|
81
|
+
background: '#0f192c',
|
|
82
|
+
border: 'rgba(15, 107, 242, 0.35)',
|
|
83
|
+
shadow: '0 12px 28px rgba(2, 5, 12, 0.65)',
|
|
84
|
+
addonBackground: 'rgba(5, 8, 16, 0.85)',
|
|
85
|
+
addonBorder: 'rgba(15, 107, 242, 0.3)',
|
|
86
|
+
addonColor: '#6de0ff',
|
|
87
|
+
inputColor: sharedText,
|
|
88
|
+
inputPlaceholder: 'rgba(198, 208, 240, 0.65)',
|
|
89
|
+
},
|
|
90
|
+
strip: {
|
|
91
|
+
background: '#0f192c',
|
|
92
|
+
border: 'rgba(130, 55, 245, 0.35)',
|
|
93
|
+
text: sharedText,
|
|
94
|
+
},
|
|
95
|
+
chrome: {
|
|
96
|
+
background: '#050a16',
|
|
97
|
+
text: sharedText,
|
|
98
|
+
shadow: '0 28px 48px rgba(2, 4, 10, 0.7)',
|
|
99
|
+
compactShadow: '0 14px 32px rgba(2, 4, 10, 0.8)',
|
|
100
|
+
},
|
|
101
|
+
backdropPrimary: {
|
|
102
|
+
background:
|
|
103
|
+
'linear-gradient(135deg, rgba(15, 107, 242, 0.85), rgba(130, 55, 245, 0.85))',
|
|
104
|
+
before: 'radial-gradient(circle, rgba(243, 109, 15, 0.25), transparent 60%)',
|
|
105
|
+
after: 'radial-gradient(circle at 80% 20%, rgba(111, 231, 255, 0.3), transparent 65%)',
|
|
106
|
+
},
|
|
107
|
+
backdropSecondary: {
|
|
108
|
+
background:
|
|
109
|
+
'linear-gradient(145deg, rgba(11, 18, 32, 0.95), rgba(15, 107, 242, 0.65))',
|
|
110
|
+
before: 'radial-gradient(circle at 20% 80%, rgba(130, 55, 245, 0.35), transparent 60%)',
|
|
111
|
+
after: 'radial-gradient(circle at 70% 10%, rgba(15, 107, 242, 0.25), transparent 55%)',
|
|
112
|
+
},
|
|
113
|
+
},
|
|
114
|
+
typography: {
|
|
115
|
+
bodyFamily: '"Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
|
|
116
|
+
headingFamily:
|
|
117
|
+
'"Clash Display", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
|
|
118
|
+
monoFamily: '"JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace',
|
|
119
|
+
baseSize: '16px',
|
|
120
|
+
scale: 1.125,
|
|
121
|
+
weightRegular: 400,
|
|
122
|
+
weightMedium: 500,
|
|
123
|
+
weightBold: 600,
|
|
124
|
+
letterSpacingTight: '-0.015em',
|
|
125
|
+
letterSpacingWide: '0.08em',
|
|
126
|
+
},
|
|
127
|
+
ctas: {
|
|
128
|
+
primary: {
|
|
129
|
+
bg: 'linear-gradient(135deg, #0f6bf2 0%, #8237f5 55%, #f26b0f 100%)',
|
|
130
|
+
text: '#050a16',
|
|
131
|
+
border: '1px solid rgba(255, 255, 255, 0.2)',
|
|
132
|
+
hoverBg: 'linear-gradient(135deg, #8237f5 0%, #0f6bf2 60%, #6de0ff 100%)',
|
|
133
|
+
hoverBorder: '1px solid rgba(255, 255, 255, 0.28)',
|
|
134
|
+
shadow: '0 20px 40px rgba(4, 8, 18, 0.55)',
|
|
135
|
+
},
|
|
136
|
+
secondary: {
|
|
137
|
+
bg: '#101b33',
|
|
138
|
+
text: sharedText,
|
|
139
|
+
border: '1px solid rgba(130, 55, 245, 0.4)',
|
|
140
|
+
hoverBg: 'rgba(130, 55, 245, 0.18)',
|
|
141
|
+
hoverBorder: '1px solid rgba(130, 55, 245, 0.55)',
|
|
142
|
+
shadow: '0 10px 24px rgba(2, 4, 10, 0.55)',
|
|
143
|
+
},
|
|
144
|
+
ghost: {
|
|
145
|
+
bg: 'transparent',
|
|
146
|
+
text: sharedPrimary,
|
|
147
|
+
border: '1px solid rgba(130, 55, 245, 0.45)',
|
|
148
|
+
hoverBg: 'rgba(130, 55, 245, 0.15)',
|
|
149
|
+
hoverBorder: '1px solid rgba(130, 55, 245, 0.65)',
|
|
150
|
+
shadow: 'none',
|
|
151
|
+
},
|
|
152
|
+
link: {
|
|
153
|
+
text: sharedPrimary,
|
|
154
|
+
hoverText: sharedAccent,
|
|
155
|
+
underline: 'rgba(130, 55, 245, 0.45)',
|
|
156
|
+
},
|
|
157
|
+
},
|
|
158
|
+
chips: {
|
|
159
|
+
neutral: {
|
|
160
|
+
bg: 'rgba(15, 107, 242, 0.18)',
|
|
161
|
+
text: sharedText,
|
|
162
|
+
border: 'rgba(15, 107, 242, 0.3)',
|
|
163
|
+
},
|
|
164
|
+
accent: {
|
|
165
|
+
bg: 'rgba(130, 55, 245, 0.22)',
|
|
166
|
+
text: '#ffffff',
|
|
167
|
+
border: 'rgba(130, 55, 245, 0.4)',
|
|
168
|
+
},
|
|
169
|
+
outline: {
|
|
170
|
+
bg: 'transparent',
|
|
171
|
+
text: sharedAccent,
|
|
172
|
+
border: '1px solid rgba(242, 107, 15, 0.45)',
|
|
173
|
+
},
|
|
174
|
+
},
|
|
175
|
+
focus: {
|
|
176
|
+
ring: '0 0 0 2px rgba(15, 107, 242, 0.35)',
|
|
177
|
+
ringMuted: '0 0 0 1px rgba(15, 107, 242, 0.22)',
|
|
178
|
+
outline: 'rgba(15, 107, 242, 0.6)',
|
|
179
|
+
shadowInset: 'inset 0 0 0 1px rgba(15, 107, 242, 0.25)',
|
|
180
|
+
},
|
|
181
|
+
radii: {
|
|
182
|
+
sm: '8px',
|
|
183
|
+
md: '14px',
|
|
184
|
+
lg: '24px',
|
|
185
|
+
pill: '999px',
|
|
186
|
+
full: '50%',
|
|
187
|
+
},
|
|
188
|
+
elevation: {
|
|
189
|
+
flat: '0 0 1px rgba(10, 15, 30, 0.12)',
|
|
190
|
+
raised: '0 18px 40px rgba(15, 23, 42, 0.12)',
|
|
191
|
+
overlay: '0 24px 48px rgba(15, 23, 42, 0.18)',
|
|
192
|
+
},
|
|
193
|
+
utility: {
|
|
194
|
+
divider: 'rgba(15, 107, 242, 0.2)',
|
|
195
|
+
inputBorder: 'rgba(15, 107, 242, 0.35)',
|
|
196
|
+
inputText: sharedText,
|
|
197
|
+
inputPlaceholder: 'rgba(198, 208, 240, 0.65)',
|
|
198
|
+
selectionBg: 'rgba(130, 55, 245, 0.3)',
|
|
199
|
+
selectionText: '#ffffff',
|
|
200
|
+
gradientHero:
|
|
201
|
+
'linear-gradient(135deg, rgba(15, 107, 242, 0.85), rgba(130, 55, 245, 0.85))',
|
|
202
|
+
gradientPromo:
|
|
203
|
+
'linear-gradient(145deg, rgba(11, 18, 32, 0.95), rgba(15, 107, 242, 0.65))',
|
|
204
|
+
bodyBackground: [
|
|
205
|
+
'radial-gradient(circle at 18% 25%, rgba(15, 107, 242, 0.32), transparent 60%)',
|
|
206
|
+
'radial-gradient(circle at 78% 12%, rgba(130, 55, 245, 0.28), transparent 55%)',
|
|
207
|
+
'linear-gradient(180deg, #050a16 0%, #0f192c 100%)',
|
|
208
|
+
],
|
|
209
|
+
modalSurface: 'rgba(5, 8, 16, 0.96)',
|
|
210
|
+
modalBorder: 'rgba(130, 55, 245, 0.4)',
|
|
211
|
+
modalShadow: '0 35px 60px rgba(2, 4, 10, 0.8)',
|
|
212
|
+
modalRadius: '28px',
|
|
213
|
+
chartTrack: 'rgba(27, 39, 68, 0.85)',
|
|
214
|
+
chartCenterText: sharedText,
|
|
215
|
+
statusHeadline: {
|
|
216
|
+
background: 'linear-gradient(120deg, rgba(15, 107, 242, 0.35), rgba(242, 107, 15, 0.25))',
|
|
217
|
+
color: sharedText,
|
|
218
|
+
shadow: '0 22px 40px rgba(2, 4, 10, 0.65)',
|
|
219
|
+
},
|
|
220
|
+
},
|
|
221
|
+
},
|
|
222
|
+
assets: {
|
|
223
|
+
css: './theme.css',
|
|
224
|
+
},
|
|
225
|
+
};
|
package/theme.css
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap');
|
|
2
|
+
|
|
3
|
+
:root[data-site-theme="aurora"] {
|
|
4
|
+
--aurora-glow: 0 0 48px rgba(15, 107, 242, 0.55);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
[data-site-theme="aurora"] body {
|
|
8
|
+
background: radial-gradient(circle at 20% 15%, rgba(15, 107, 242, 0.25), transparent 55%),
|
|
9
|
+
radial-gradient(circle at 80% 10%, rgba(130, 55, 245, 0.25), transparent 60%),
|
|
10
|
+
linear-gradient(180deg, #050a16 0%, #0f192c 100%);
|
|
11
|
+
color: var(--ui-text-primary);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
[data-site-theme="aurora"] .container {
|
|
15
|
+
max-width: min(1180px, 92vw);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
[data-site-theme="aurora"] .display-heading {
|
|
19
|
+
font-family: 'Space Grotesk', var(--ui-heading-font, 'Clash Display');
|
|
20
|
+
letter-spacing: -0.02em;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
[data-site-theme="aurora"] .ui-card {
|
|
24
|
+
border: 1px solid rgba(130, 55, 245, 0.35);
|
|
25
|
+
box-shadow: var(--aurora-glow), 0 20px 45px rgba(2, 4, 10, 0.6);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
[data-site-theme="aurora"] .ui-card .action-pill {
|
|
29
|
+
text-transform: uppercase;
|
|
30
|
+
}
|