@deckio/deck-engine 0.1.1 → 0.2.0
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/package.json +1 -1
- package/themes/funky-punk.css +249 -0
- package/themes/theme-loader.js +1 -1
package/package.json
CHANGED
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* DECKIO — Funky Punk Theme 🤘
|
|
3
|
+
*
|
|
4
|
+
* LOUD. NEON. CHAOS. The anti-corporate theme that screams rebellion.
|
|
5
|
+
* Hot pink meets electric lime on a jet-black canvas.
|
|
6
|
+
* Clashing colors, sharp edges, unapologetic attitude.
|
|
7
|
+
*
|
|
8
|
+
* CSS custom properties → Tailwind utility bridge via @theme inline.
|
|
9
|
+
*/
|
|
10
|
+
@import "tailwindcss";
|
|
11
|
+
|
|
12
|
+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
|
|
13
|
+
|
|
14
|
+
:root {
|
|
15
|
+
color-scheme: dark;
|
|
16
|
+
|
|
17
|
+
/* ── 1. Core Semantic Colors ─────────────────────────────────────────── */
|
|
18
|
+
--background: #0a0a0a;
|
|
19
|
+
--foreground: #f0f0f0;
|
|
20
|
+
--card: #1a1a1a;
|
|
21
|
+
--card-foreground: #f0f0f0;
|
|
22
|
+
--primary: #ff2d6f;
|
|
23
|
+
--primary-foreground: #000000;
|
|
24
|
+
--secondary: #1c1c2e;
|
|
25
|
+
--secondary-foreground: #e0ff00;
|
|
26
|
+
--muted: #2a2a2a;
|
|
27
|
+
--muted-foreground: #888888;
|
|
28
|
+
--accent: #e0ff00;
|
|
29
|
+
--accent-foreground: #000000;
|
|
30
|
+
--destructive: #ff0040;
|
|
31
|
+
--destructive-foreground: #ffffff;
|
|
32
|
+
--border: #ff2d6f;
|
|
33
|
+
--input: #2a2a2a;
|
|
34
|
+
--ring: rgba(224, 255, 0, 0.6);
|
|
35
|
+
--radius: 2px;
|
|
36
|
+
|
|
37
|
+
/* ── 2. Decorative Palette — MAXIMUM VOLUME ──────────────────────────── */
|
|
38
|
+
--blue-glow: #00e5ff;
|
|
39
|
+
--purple: #bf00ff;
|
|
40
|
+
--purple-deep: #7b00cc;
|
|
41
|
+
--pink: #ff2d6f;
|
|
42
|
+
--cyan: #00e5ff;
|
|
43
|
+
--green: #e0ff00;
|
|
44
|
+
|
|
45
|
+
/* ── 3. Derived Overlays & Glows ─────────────────────────────────────── */
|
|
46
|
+
--surface-overlay: rgba(10, 10, 10, 0.85);
|
|
47
|
+
--surface-overlay-heavy: rgba(10, 10, 10, 0.95);
|
|
48
|
+
--background-overlay: rgba(10, 10, 10, 0.9);
|
|
49
|
+
--border-subtle: rgba(255, 45, 111, 0.35);
|
|
50
|
+
--glow-primary: rgba(255, 45, 111, 0.3);
|
|
51
|
+
--glow-primary-strong: rgba(255, 45, 111, 0.45);
|
|
52
|
+
--glow-primary-shadow: rgba(255, 45, 111, 0.25);
|
|
53
|
+
--glow-ring: rgba(224, 255, 0, 0.3);
|
|
54
|
+
--glow-accent: rgba(224, 255, 0, 0.15);
|
|
55
|
+
--glow-purple: rgba(191, 0, 255, 0.2);
|
|
56
|
+
--glow-cyan: rgba(0, 229, 255, 0.15);
|
|
57
|
+
--dot-color: rgba(255, 45, 111, 0.2);
|
|
58
|
+
--destructive-subtle: rgba(255, 0, 64, 0.08);
|
|
59
|
+
--shadow-elevated: 0 8px 32px rgba(255, 45, 111, 0.3), 0 0 80px rgba(224, 255, 0, 0.08);
|
|
60
|
+
|
|
61
|
+
/* ── 4. Presentation Layout ──────────────────────────────────────────── */
|
|
62
|
+
--slide-bg: var(--background);
|
|
63
|
+
--content-max-width: 1280px;
|
|
64
|
+
--content-gutter: 72px;
|
|
65
|
+
|
|
66
|
+
/* ── 5. Typography — PUNK FONTS ──────────────────────────────────────── */
|
|
67
|
+
--font-family: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
|
|
68
|
+
--font-family-mono: 'Space Mono', 'Courier New', monospace;
|
|
69
|
+
--font-size-2xs: 10px;
|
|
70
|
+
--font-size-xs: 11px;
|
|
71
|
+
--font-size-sm: 13px;
|
|
72
|
+
--font-size-md: 14px;
|
|
73
|
+
--font-size-base: 17px;
|
|
74
|
+
--font-size-lg: 22px;
|
|
75
|
+
--font-size-xl: 28px;
|
|
76
|
+
--font-size-2xl: 40px;
|
|
77
|
+
--font-size-display: clamp(48px, 8vw, 80px);
|
|
78
|
+
|
|
79
|
+
--font-weight-light: 300;
|
|
80
|
+
--font-weight-regular: 400;
|
|
81
|
+
--font-weight-medium: 500;
|
|
82
|
+
--font-weight-semibold: 600;
|
|
83
|
+
--font-weight-bold: 700;
|
|
84
|
+
--font-weight-extrabold: 900;
|
|
85
|
+
|
|
86
|
+
--letter-spacing-tight: -1px;
|
|
87
|
+
--letter-spacing-normal: 1px;
|
|
88
|
+
--letter-spacing-wide: 3px;
|
|
89
|
+
--letter-spacing-wider: 5px;
|
|
90
|
+
--letter-spacing-widest: 8px;
|
|
91
|
+
|
|
92
|
+
--line-height-tight: 1.1;
|
|
93
|
+
--line-height-normal: 1.4;
|
|
94
|
+
--line-height-relaxed: 1.7;
|
|
95
|
+
|
|
96
|
+
/* ── 6. Spacing Scale (4 px base) ────────────────────────────────────── */
|
|
97
|
+
--space-0: 0px;
|
|
98
|
+
--space-0-5: 2px;
|
|
99
|
+
--space-1: 4px;
|
|
100
|
+
--space-1-5: 6px;
|
|
101
|
+
--space-2: 8px;
|
|
102
|
+
--space-3: 12px;
|
|
103
|
+
--space-4: 16px;
|
|
104
|
+
--space-5: 20px;
|
|
105
|
+
--space-6: 24px;
|
|
106
|
+
--space-8: 32px;
|
|
107
|
+
--space-10: 40px;
|
|
108
|
+
--space-11: 44px;
|
|
109
|
+
--space-12: 48px;
|
|
110
|
+
--space-14: 56px;
|
|
111
|
+
|
|
112
|
+
/* ── 7. Border Radius — SHARP EDGES, PUNK DOESN'T DO SMOOTH ──────── */
|
|
113
|
+
--radius-sm: 0px;
|
|
114
|
+
--radius-md: 2px;
|
|
115
|
+
--radius-lg: 2px;
|
|
116
|
+
--radius-xl: 4px;
|
|
117
|
+
--radius-full: 50%;
|
|
118
|
+
|
|
119
|
+
/* ── 8. Z-Index Scale ────────────────────────────────────────────────── */
|
|
120
|
+
--z-content: 2;
|
|
121
|
+
--z-bar: 100;
|
|
122
|
+
--z-nav: 200;
|
|
123
|
+
--z-progress: 300;
|
|
124
|
+
--z-overlay: 9999;
|
|
125
|
+
|
|
126
|
+
/* ── 9. Transitions — FAST AND SNAPPY ────────────────────────────────── */
|
|
127
|
+
--transition-fast: 0.08s ease-out;
|
|
128
|
+
--transition-base: 0.15s ease-out;
|
|
129
|
+
--transition-slow: 0.3s ease-out;
|
|
130
|
+
--ease-slide: cubic-bezier(0.7, 0, 0.3, 1);
|
|
131
|
+
--duration-slide: 0.4s;
|
|
132
|
+
--duration-progress: 0.3s;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* ── PUNK TEXTURE — scanlines + noise ──────────────────────────────────── */
|
|
136
|
+
:root::after {
|
|
137
|
+
content: '';
|
|
138
|
+
position: fixed;
|
|
139
|
+
inset: 0;
|
|
140
|
+
pointer-events: none;
|
|
141
|
+
z-index: 1;
|
|
142
|
+
background:
|
|
143
|
+
repeating-linear-gradient(
|
|
144
|
+
0deg,
|
|
145
|
+
transparent,
|
|
146
|
+
transparent 2px,
|
|
147
|
+
rgba(255, 45, 111, 0.03) 2px,
|
|
148
|
+
rgba(255, 45, 111, 0.03) 4px
|
|
149
|
+
);
|
|
150
|
+
mix-blend-mode: overlay;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* ── SELECTION — hot pink highlight ────────────────────────────────────── */
|
|
154
|
+
::selection {
|
|
155
|
+
background: #ff2d6f;
|
|
156
|
+
color: #000;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* ── HEADINGS — uppercase screaming ────────────────────────────────────── */
|
|
160
|
+
h1, h2, h3, h4, h5, h6 {
|
|
161
|
+
font-family: 'Bebas Neue', 'Impact', sans-serif !important;
|
|
162
|
+
text-transform: uppercase;
|
|
163
|
+
letter-spacing: 3px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
h1 {
|
|
167
|
+
text-shadow:
|
|
168
|
+
4px 4px 0px #e0ff00,
|
|
169
|
+
-2px -2px 0px #00e5ff;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
h2 {
|
|
173
|
+
text-shadow:
|
|
174
|
+
2px 2px 0px #ff2d6f;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* ── CODE — mono with neon accent ──────────────────────────────────────── */
|
|
178
|
+
code, pre {
|
|
179
|
+
font-family: 'Space Mono', monospace !important;
|
|
180
|
+
border: 1px solid #ff2d6f;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
pre {
|
|
184
|
+
background: #111 !important;
|
|
185
|
+
box-shadow: inset 0 0 30px rgba(255, 45, 111, 0.08);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* ── LINKS — electric ──────────────────────────────────────────────────── */
|
|
189
|
+
a {
|
|
190
|
+
color: #e0ff00;
|
|
191
|
+
text-decoration: underline;
|
|
192
|
+
text-decoration-style: wavy;
|
|
193
|
+
text-underline-offset: 4px;
|
|
194
|
+
transition: color 0.1s;
|
|
195
|
+
}
|
|
196
|
+
a:hover {
|
|
197
|
+
color: #00e5ff;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* ── STRONG / BOLD — pink highlight ────────────────────────────────────── */
|
|
201
|
+
strong, b {
|
|
202
|
+
color: #ff2d6f;
|
|
203
|
+
font-weight: 900;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* ── EMPHASIS — lime italic ────────────────────────────────────────────── */
|
|
207
|
+
em, i {
|
|
208
|
+
color: #e0ff00;
|
|
209
|
+
font-style: italic;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
/* ── BORDERS — neon stripes ────────────────────────────────────────────── */
|
|
213
|
+
hr {
|
|
214
|
+
border: none;
|
|
215
|
+
height: 3px;
|
|
216
|
+
background: linear-gradient(90deg, #ff2d6f, #e0ff00, #00e5ff, #bf00ff);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* ── LISTS — punk bullets ──────────────────────────────────────────────── */
|
|
220
|
+
ul {
|
|
221
|
+
list-style: none;
|
|
222
|
+
}
|
|
223
|
+
ul > li::before {
|
|
224
|
+
content: '✘ ';
|
|
225
|
+
color: #ff2d6f;
|
|
226
|
+
font-weight: 900;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/* ── Tailwind ↔ CSS variable bridge ── */
|
|
230
|
+
@theme inline {
|
|
231
|
+
--color-background: var(--background);
|
|
232
|
+
--color-foreground: var(--foreground);
|
|
233
|
+
--color-card: var(--card);
|
|
234
|
+
--color-card-foreground: var(--card-foreground);
|
|
235
|
+
--color-primary: var(--primary);
|
|
236
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
237
|
+
--color-secondary: var(--secondary);
|
|
238
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
239
|
+
--color-accent: var(--accent);
|
|
240
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
241
|
+
--color-destructive: var(--destructive);
|
|
242
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
243
|
+
--color-muted: var(--muted);
|
|
244
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
245
|
+
--color-border: var(--border);
|
|
246
|
+
--color-input: var(--input);
|
|
247
|
+
--color-ring: var(--ring);
|
|
248
|
+
--radius: var(--radius);
|
|
249
|
+
}
|
package/themes/theme-loader.js
CHANGED
|
@@ -12,7 +12,7 @@ import { fileURLToPath } from 'url'
|
|
|
12
12
|
|
|
13
13
|
const __dirname = dirname(fileURLToPath(import.meta.url))
|
|
14
14
|
|
|
15
|
-
const BUILTIN_THEMES = ['dark', 'light', 'shadcn']
|
|
15
|
+
const BUILTIN_THEMES = ['dark', 'light', 'shadcn', 'funky-punk']
|
|
16
16
|
const DEFAULT_THEME = 'dark'
|
|
17
17
|
|
|
18
18
|
/**
|