@deckio/deck-engine 0.1.1 → 0.2.1
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/instructions/deck-config.instructions.md +13 -5
- package/instructions/deck-project.instructions.md +17 -1
- package/instructions/slide-css.instructions.md +45 -71
- package/instructions/slide-jsx.instructions.md +38 -11
- package/package.json +2 -1
- package/skills/deck-add-slide/SKILL.md +72 -190
- package/skills/deck-generate-image/SKILL.md +28 -11
- package/skills/deck-inspect/SKILL.md +35 -12
- package/skills/deck-sketch/SKILL.md +22 -15
- package/skills/deck-validate-project/SKILL.md +88 -48
- package/themes/descriptors/dark.md +169 -0
- package/themes/descriptors/light.md +172 -0
- package/themes/descriptors/shadcn.md +194 -0
- package/themes/funky-punk.css +249 -0
- package/themes/theme-loader.js +1 -1
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
# Theme Descriptor — Light
|
|
2
|
+
|
|
3
|
+
## Metadata
|
|
4
|
+
|
|
5
|
+
- **Theme id:** `light`
|
|
6
|
+
- **Primary slide authoring pattern:** `default`
|
|
7
|
+
- **Compatible design systems:** `default`
|
|
8
|
+
- **Mood:** crisp, professional, airy, projection-friendly
|
|
9
|
+
- **Read this file when:** `deck.config.js` uses `theme: 'light'` and you need to create, inspect, validate, or generate assets for slides
|
|
10
|
+
|
|
11
|
+
## Slide personality
|
|
12
|
+
|
|
13
|
+
Light slides still use the DECKIO default structure, but the feel should be cleaner and brighter than dark: lighter surfaces, softer glow usage, and more breathing room. Keep decoration present but restrained.
|
|
14
|
+
|
|
15
|
+
## Exact JSX skeleton
|
|
16
|
+
|
|
17
|
+
Use this exact starting structure for new slides:
|
|
18
|
+
|
|
19
|
+
```jsx
|
|
20
|
+
import { BottomBar, Slide } from '@deckio/deck-engine'
|
|
21
|
+
import styles from './MyNewSlide.module.css'
|
|
22
|
+
|
|
23
|
+
export default function MyNewSlide({ index, project }) {
|
|
24
|
+
return (
|
|
25
|
+
<Slide index={index} className={styles.myNewSlide}>
|
|
26
|
+
<div className="accent-bar" />
|
|
27
|
+
<div className={`orb ${styles.orb1}`} />
|
|
28
|
+
<div className={`orb ${styles.orb2}`} />
|
|
29
|
+
|
|
30
|
+
<div className={`${styles.body} content-frame content-gutter`}>
|
|
31
|
+
{/* Slide content */}
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<BottomBar text="Project Footer Text" />
|
|
35
|
+
</Slide>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Required child order inside `<Slide>`
|
|
41
|
+
|
|
42
|
+
1. `<div className="accent-bar" />`
|
|
43
|
+
2. `2–4` decorative orb elements using the global `orb` class plus local positioning classes
|
|
44
|
+
3. One content wrapper using `content-frame content-gutter`
|
|
45
|
+
4. `<BottomBar text="..." />` as the last child
|
|
46
|
+
|
|
47
|
+
## Exact CSS skeleton
|
|
48
|
+
|
|
49
|
+
```css
|
|
50
|
+
.myNewSlide {
|
|
51
|
+
background: var(--background);
|
|
52
|
+
padding: 0 0 44px 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.orb1 {
|
|
56
|
+
width: 420px;
|
|
57
|
+
height: 420px;
|
|
58
|
+
top: -100px;
|
|
59
|
+
right: -60px;
|
|
60
|
+
background: radial-gradient(
|
|
61
|
+
circle at 40% 40%,
|
|
62
|
+
color-mix(in srgb, var(--accent) 82%, white),
|
|
63
|
+
color-mix(in srgb, var(--cyan) 20%, transparent) 52%,
|
|
64
|
+
transparent 72%
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.orb2 {
|
|
69
|
+
width: 320px;
|
|
70
|
+
height: 320px;
|
|
71
|
+
bottom: -40px;
|
|
72
|
+
right: 100px;
|
|
73
|
+
background: radial-gradient(
|
|
74
|
+
circle at 50% 50%,
|
|
75
|
+
color-mix(in srgb, var(--purple) 72%, white),
|
|
76
|
+
color-mix(in srgb, var(--purple-deep) 18%, transparent) 60%,
|
|
77
|
+
transparent 76%
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.body {
|
|
82
|
+
position: relative;
|
|
83
|
+
z-index: 10;
|
|
84
|
+
display: flex;
|
|
85
|
+
flex-direction: column;
|
|
86
|
+
gap: 24px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.cards {
|
|
90
|
+
display: grid;
|
|
91
|
+
grid-template-columns: repeat(3, 1fr);
|
|
92
|
+
gap: 24px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.card {
|
|
96
|
+
position: relative;
|
|
97
|
+
overflow: hidden;
|
|
98
|
+
background: var(--card);
|
|
99
|
+
border: 1px solid var(--border);
|
|
100
|
+
border-radius: 16px;
|
|
101
|
+
padding: 24px;
|
|
102
|
+
box-shadow: var(--shadow-elevated);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.card::before {
|
|
106
|
+
content: '';
|
|
107
|
+
position: absolute;
|
|
108
|
+
top: 0;
|
|
109
|
+
left: 0;
|
|
110
|
+
right: 0;
|
|
111
|
+
height: 3px;
|
|
112
|
+
background: linear-gradient(90deg, var(--accent), var(--cyan));
|
|
113
|
+
opacity: 0.45;
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Token table
|
|
118
|
+
|
|
119
|
+
### Use these tokens
|
|
120
|
+
|
|
121
|
+
- `var(--background)`
|
|
122
|
+
- `var(--foreground)`
|
|
123
|
+
- `var(--muted-foreground)`
|
|
124
|
+
- `var(--card)`
|
|
125
|
+
- `var(--secondary)`
|
|
126
|
+
- `var(--border)`
|
|
127
|
+
- `var(--accent)`
|
|
128
|
+
- `var(--blue-glow)`
|
|
129
|
+
- `var(--purple)`
|
|
130
|
+
- `var(--purple-deep)`
|
|
131
|
+
- `var(--pink)`
|
|
132
|
+
- `var(--cyan)`
|
|
133
|
+
- `var(--green)`
|
|
134
|
+
- `var(--surface-overlay)`
|
|
135
|
+
- `var(--shadow-elevated)`
|
|
136
|
+
|
|
137
|
+
### Never regress to
|
|
138
|
+
|
|
139
|
+
- Heavy dark-theme glow stacks that overpower a light background
|
|
140
|
+
- `var(--bg-deep)` in new slide code
|
|
141
|
+
- `var(--surface)` in new slide code
|
|
142
|
+
- `var(--text)` or `var(--text-muted)` in new slide code
|
|
143
|
+
|
|
144
|
+
## Decorative elements available
|
|
145
|
+
|
|
146
|
+
| Element | How to use it |
|
|
147
|
+
|---|---|
|
|
148
|
+
| `accent-bar` | Required first child for default DECKIO slides |
|
|
149
|
+
| `orb` | Required, but keep the glow softer than dark |
|
|
150
|
+
| `grid-dots` | Optional light patterning inside a content area |
|
|
151
|
+
| Card top gradient | Acceptable, but use lower opacity than dark |
|
|
152
|
+
|
|
153
|
+
## Available components
|
|
154
|
+
|
|
155
|
+
| Resource | Import path |
|
|
156
|
+
|---|---|
|
|
157
|
+
| `Slide`, `BottomBar`, `Navigation`, `SlideProvider`, `useSlides`, `GenericThankYouSlide` | `'@deckio/deck-engine'` |
|
|
158
|
+
| Data / logos | `'../data/<file>'` |
|
|
159
|
+
|
|
160
|
+
## Anti-patterns
|
|
161
|
+
|
|
162
|
+
1. Removing the default DECKIO frame entirely
|
|
163
|
+
2. Making the orbs as loud as the dark theme
|
|
164
|
+
3. Missing `content-frame content-gutter`
|
|
165
|
+
4. Missing `BottomBar`
|
|
166
|
+
5. Using `flex: 1` on the body wrapper
|
|
167
|
+
6. Overloading the slide until it overflows the viewport
|
|
168
|
+
7. Importing shadcn-only UI components into a default DECKIO slide
|
|
169
|
+
|
|
170
|
+
## Example slide direction
|
|
171
|
+
|
|
172
|
+
A strong light slide should feel polished and executive-ready: crisp white or off-white surfaces, subtle blue/cyan motion in the decoration, and clear contrast between heading, body copy, and cards.
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
# Theme Descriptor — shadcn
|
|
2
|
+
|
|
3
|
+
## Metadata
|
|
4
|
+
|
|
5
|
+
- **Theme id:** `shadcn`
|
|
6
|
+
- **Primary slide authoring pattern:** `shadcn`
|
|
7
|
+
- **Compatible design systems:** `shadcn`
|
|
8
|
+
- **Mood:** editorial, product-grade, semantic-token-driven, clean
|
|
9
|
+
- **Read this file when:** `deck.config.js` uses `theme: 'shadcn'` or `designSystem: 'shadcn'` and you need to create, inspect, validate, or generate assets for slides
|
|
10
|
+
|
|
11
|
+
## Slide personality
|
|
12
|
+
|
|
13
|
+
shadcn slides should look intentionally different from the default DECKIO system: cleaner surfaces, no deep-space ornament, no left accent bar, no floating orbs, and strong reliance on semantic tokens.
|
|
14
|
+
|
|
15
|
+
## Exact JSX skeleton
|
|
16
|
+
|
|
17
|
+
Use this exact starting structure for new slides:
|
|
18
|
+
|
|
19
|
+
```jsx
|
|
20
|
+
import { BottomBar, Slide } from '@deckio/deck-engine'
|
|
21
|
+
import styles from './MyNewSlide.module.css'
|
|
22
|
+
|
|
23
|
+
export default function MyNewSlide({ index, project }) {
|
|
24
|
+
return (
|
|
25
|
+
<Slide index={index} className={styles.myNewSlide}>
|
|
26
|
+
<div className={`${styles.body} content-frame content-gutter`}>
|
|
27
|
+
<div className={styles.overline}>
|
|
28
|
+
<span className={styles.overlineDash} />
|
|
29
|
+
<span className={styles.overlineText}>SECTION LABEL</span>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<h2 className={styles.title}>Slide Title</h2>
|
|
33
|
+
<p className={styles.subtitle}>Supporting copy for the slide.</p>
|
|
34
|
+
|
|
35
|
+
<div className={styles.cards}>
|
|
36
|
+
<article className={styles.card}>
|
|
37
|
+
<h3>Card title</h3>
|
|
38
|
+
<p>Card body text.</p>
|
|
39
|
+
</article>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<BottomBar text="Project Footer Text" />
|
|
44
|
+
</Slide>
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Exact CSS skeleton
|
|
50
|
+
|
|
51
|
+
```css
|
|
52
|
+
.myNewSlide {
|
|
53
|
+
background: color-mix(in oklch, var(--background) 85%, transparent);
|
|
54
|
+
padding: 0 0 44px 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.body {
|
|
58
|
+
position: relative;
|
|
59
|
+
z-index: 10;
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-direction: column;
|
|
62
|
+
gap: 24px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.overline {
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
gap: 12px;
|
|
69
|
+
margin-bottom: 4px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.overlineDash {
|
|
73
|
+
width: 32px;
|
|
74
|
+
height: 2px;
|
|
75
|
+
border-radius: 999px;
|
|
76
|
+
background: var(--primary);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.overlineText {
|
|
80
|
+
font-size: 13px;
|
|
81
|
+
font-weight: 500;
|
|
82
|
+
letter-spacing: 3px;
|
|
83
|
+
text-transform: uppercase;
|
|
84
|
+
color: var(--muted-foreground);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.title {
|
|
88
|
+
font-size: clamp(28px, 3.2vw, 36px);
|
|
89
|
+
font-weight: 700;
|
|
90
|
+
color: var(--foreground);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.subtitle {
|
|
94
|
+
font-size: clamp(16px, 1.6vw, 19px);
|
|
95
|
+
font-weight: 400;
|
|
96
|
+
color: var(--muted-foreground);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.cards {
|
|
100
|
+
display: grid;
|
|
101
|
+
grid-template-columns: repeat(3, 1fr);
|
|
102
|
+
gap: 20px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.card {
|
|
106
|
+
background: var(--card);
|
|
107
|
+
border: 1px solid var(--border);
|
|
108
|
+
border-radius: var(--radius);
|
|
109
|
+
padding: 24px;
|
|
110
|
+
box-shadow: 0 1px 3px color-mix(in srgb, var(--foreground) 4%, transparent);
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Use `background: var(--background)` instead of the semi-transparent mix only when the slide intentionally needs a solid backdrop, such as a cover or thank-you slide.
|
|
115
|
+
|
|
116
|
+
## Token table
|
|
117
|
+
|
|
118
|
+
### Use these semantic tokens
|
|
119
|
+
|
|
120
|
+
- `var(--background)`
|
|
121
|
+
- `var(--foreground)`
|
|
122
|
+
- `var(--card)`
|
|
123
|
+
- `var(--card-foreground)`
|
|
124
|
+
- `var(--primary)`
|
|
125
|
+
- `var(--primary-foreground)`
|
|
126
|
+
- `var(--secondary)`
|
|
127
|
+
- `var(--secondary-foreground)`
|
|
128
|
+
- `var(--muted)`
|
|
129
|
+
- `var(--muted-foreground)`
|
|
130
|
+
- `var(--border)`
|
|
131
|
+
- `var(--ring)`
|
|
132
|
+
- `var(--radius)`
|
|
133
|
+
- `var(--destructive)`
|
|
134
|
+
- `var(--surface-overlay)`
|
|
135
|
+
- `var(--shadow-elevated)`
|
|
136
|
+
|
|
137
|
+
### Decorative accents allowed only inside content
|
|
138
|
+
|
|
139
|
+
- `var(--blue-glow)`
|
|
140
|
+
- `var(--purple)`
|
|
141
|
+
- `var(--purple-deep)`
|
|
142
|
+
- `var(--pink)`
|
|
143
|
+
- `var(--cyan)`
|
|
144
|
+
- `var(--green)`
|
|
145
|
+
|
|
146
|
+
## Decorative elements available
|
|
147
|
+
|
|
148
|
+
| Element | Rule |
|
|
149
|
+
|---|---|
|
|
150
|
+
| `content-frame` | Required layout wrapper |
|
|
151
|
+
| `content-gutter` | Required layout wrapper |
|
|
152
|
+
| Overline row | Preferred shadcn framing element |
|
|
153
|
+
| Clean cards | Preferred surface treatment |
|
|
154
|
+
| Decorative gradients | Allowed only inside content blocks, never as full-slide space effects |
|
|
155
|
+
|
|
156
|
+
## Available components
|
|
157
|
+
|
|
158
|
+
### Core imports
|
|
159
|
+
|
|
160
|
+
| Resource | Import path |
|
|
161
|
+
|---|---|
|
|
162
|
+
| `Slide`, `BottomBar`, `Navigation`, `SlideProvider`, `useSlides`, `GenericThankYouSlide` | `'@deckio/deck-engine'` |
|
|
163
|
+
| Data / logos | `'../data/<file>'` |
|
|
164
|
+
| ReactBits / shadcn components | `'@/components/ui/<component>'` |
|
|
165
|
+
|
|
166
|
+
### Pre-installed ReactBits components
|
|
167
|
+
|
|
168
|
+
- `import BlurText from '@/components/ui/blur-text'`
|
|
169
|
+
- `import ShinyText from '@/components/ui/shiny-text'`
|
|
170
|
+
- `import DecryptedText from '@/components/ui/decrypted-text'`
|
|
171
|
+
- `import SpotlightCard from '@/components/ui/spotlight-card'`
|
|
172
|
+
|
|
173
|
+
### Common shadcn/ui additions
|
|
174
|
+
|
|
175
|
+
- `npx shadcn add button` → `import { Button } from '@/components/ui/button'`
|
|
176
|
+
- `npx shadcn add badge` → `import { Badge } from '@/components/ui/badge'`
|
|
177
|
+
- `npx shadcn add card` → `import { Card, CardHeader, CardContent } from '@/components/ui/card'`
|
|
178
|
+
- `npx shadcn add separator` → `import { Separator } from '@/components/ui/separator'`
|
|
179
|
+
|
|
180
|
+
## Anti-patterns
|
|
181
|
+
|
|
182
|
+
1. Never use `accent-bar`
|
|
183
|
+
2. Never use `orb`
|
|
184
|
+
3. Never use `grid-dots`
|
|
185
|
+
4. Never use `var(--bg-deep)`
|
|
186
|
+
5. Never use `var(--surface)`
|
|
187
|
+
6. Never use `var(--text)`
|
|
188
|
+
7. Never use `var(--text-muted)`
|
|
189
|
+
8. Never add gradient `::before` bars to cards
|
|
190
|
+
9. Never hardcode deep-space glow decoration as full-slide ornament
|
|
191
|
+
|
|
192
|
+
## Example slide direction
|
|
193
|
+
|
|
194
|
+
A strong shadcn slide should read like a polished product or strategy artifact: overline, clear heading hierarchy, calm card surfaces, semantic token usage, and optional component accents such as `Badge`, `Separator`, `BlurText`, or `SpotlightCard` when they truly help the story.
|
|
@@ -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
|
/**
|