@cascivo/themes 0.2.0 → 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/README.md +1 -1
- package/package.json +5 -3
- package/src/cyberpunk.css +234 -0
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# @cascivo/themes
|
|
4
4
|
|
|
5
|
-
> First-party cascivo themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal
|
|
5
|
+
> First-party cascivo themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal, cyberpunk
|
|
6
6
|
|
|
7
7
|
[cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/urbanisierung/cascivo)
|
|
8
8
|
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cascivo/themes",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"private": false,
|
|
5
|
-
"description": "First-party cascivo themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal",
|
|
5
|
+
"description": "First-party cascivo themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist, corporate, terminal, cyberpunk",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"cascivo",
|
|
8
8
|
"css",
|
|
@@ -50,7 +50,9 @@
|
|
|
50
50
|
"./corporate": "./src/corporate.css",
|
|
51
51
|
"./corporate.css": "./src/corporate.css",
|
|
52
52
|
"./terminal": "./src/terminal.css",
|
|
53
|
-
"./terminal.css": "./src/terminal.css"
|
|
53
|
+
"./terminal.css": "./src/terminal.css",
|
|
54
|
+
"./cyberpunk": "./src/cyberpunk.css",
|
|
55
|
+
"./cyberpunk.css": "./src/cyberpunk.css"
|
|
54
56
|
},
|
|
55
57
|
"publishConfig": {
|
|
56
58
|
"access": "public",
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
/* cascivo — Cyberpunk Theme */
|
|
2
|
+
/* Brutalism × cyberpunk: near-black base, neon magenta/cyan, zero radius, hard glow shadows */
|
|
3
|
+
|
|
4
|
+
@import '@cascivo/tokens';
|
|
5
|
+
|
|
6
|
+
@layer cascivo.theme {
|
|
7
|
+
[data-theme='cyberpunk'] {
|
|
8
|
+
color-scheme: dark;
|
|
9
|
+
|
|
10
|
+
/* ── Surface ──────────────────────────────────────── */
|
|
11
|
+
--cascivo-color-background: oklch(0.16 0.03 285);
|
|
12
|
+
--cascivo-color-surface: oklch(0.2 0.035 285);
|
|
13
|
+
--cascivo-color-surface-2: oklch(0.25 0.04 285);
|
|
14
|
+
--cascivo-color-bg: var(--cascivo-color-background);
|
|
15
|
+
--cascivo-color-bg-subtle: var(--cascivo-color-surface);
|
|
16
|
+
--cascivo-color-surface-raised: var(--cascivo-color-surface-2);
|
|
17
|
+
--cascivo-color-surface-overlay: var(--cascivo-color-surface);
|
|
18
|
+
--cascivo-color-border: oklch(0.6 0.2 320 / 60%);
|
|
19
|
+
--cascivo-color-border-strong: oklch(0.72 0.22 330 / 85%);
|
|
20
|
+
--cascivo-border-subtle: oklch(0.45 0.12 300 / 50%);
|
|
21
|
+
--cascivo-border-default: oklch(0.6 0.2 320 / 60%);
|
|
22
|
+
--cascivo-border-strong: oklch(0.72 0.22 330 / 85%);
|
|
23
|
+
|
|
24
|
+
/* ── Text ─────────────────────────────────────────── */
|
|
25
|
+
--cascivo-color-foreground: oklch(0.95 0.03 320);
|
|
26
|
+
--cascivo-color-foreground-muted: oklch(0.7 0.05 300);
|
|
27
|
+
--cascivo-color-text: var(--cascivo-color-foreground);
|
|
28
|
+
--cascivo-color-text-subtle: var(--cascivo-color-foreground-muted);
|
|
29
|
+
--cascivo-color-text-muted: oklch(0.55 0.05 300);
|
|
30
|
+
--cascivo-color-text-on-accent: oklch(0.16 0.03 285);
|
|
31
|
+
--cascivo-color-text-on-destructive: oklch(0.16 0.03 285);
|
|
32
|
+
|
|
33
|
+
/* ── Accent — neon magenta ───────────────────────── */
|
|
34
|
+
--cascivo-color-accent: oklch(0.7 0.25 330);
|
|
35
|
+
--cascivo-color-accent-foreground: oklch(0.16 0.03 285);
|
|
36
|
+
--cascivo-color-accent-hover: oklch(0.76 0.23 330);
|
|
37
|
+
--cascivo-color-accent-active: oklch(0.82 0.2 330);
|
|
38
|
+
--cascivo-color-accent-subtle: oklch(0.7 0.25 330 / 0.12);
|
|
39
|
+
--cascivo-color-accent-muted: oklch(0.7 0.25 330 / 0.22);
|
|
40
|
+
|
|
41
|
+
/* ── Primary — accent-mapped ─────────────────────── */
|
|
42
|
+
--cascivo-color-primary: var(--cascivo-color-accent);
|
|
43
|
+
--cascivo-color-primary-fg: oklch(0.16 0.03 285);
|
|
44
|
+
--cascivo-color-primary-hover: var(--cascivo-color-accent-hover);
|
|
45
|
+
--cascivo-color-primary-active: var(--cascivo-color-accent-active);
|
|
46
|
+
--cascivo-color-active-bg: oklch(0.7 0.25 330 / 0.12);
|
|
47
|
+
|
|
48
|
+
/* ── Destructive — neon red ───────────────────────── */
|
|
49
|
+
--cascivo-color-destructive: oklch(0.65 0.25 18);
|
|
50
|
+
--cascivo-color-destructive-hover: oklch(0.72 0.22 18);
|
|
51
|
+
--cascivo-color-destructive-subtle: oklch(0.65 0.25 18 / 0.12);
|
|
52
|
+
|
|
53
|
+
/* ── Semantic status colors ───────────────────────── */
|
|
54
|
+
--cascivo-color-error: oklch(0.65 0.25 18);
|
|
55
|
+
--cascivo-color-warning: oklch(0.82 0.17 75);
|
|
56
|
+
--cascivo-color-success: oklch(0.82 0.2 150);
|
|
57
|
+
--cascivo-color-success-subtle: oklch(0.82 0.2 150 / 0.12);
|
|
58
|
+
--cascivo-color-warning-subtle: oklch(0.82 0.17 75 / 0.12);
|
|
59
|
+
--cascivo-color-info: oklch(0.78 0.16 200);
|
|
60
|
+
--cascivo-color-info-subtle: oklch(0.78 0.16 200 / 0.12);
|
|
61
|
+
--cascivo-color-success-foreground: oklch(0.82 0.2 150);
|
|
62
|
+
--cascivo-color-warning-foreground: oklch(0.82 0.17 75);
|
|
63
|
+
--cascivo-color-destructive-foreground: oklch(0.78 0.18 18);
|
|
64
|
+
|
|
65
|
+
/* ── Radius — zero ───────────────────────────────── */
|
|
66
|
+
--cascivo-radius-base: 0;
|
|
67
|
+
--cascivo-radius-control: 0;
|
|
68
|
+
--cascivo-radius-surface: 0;
|
|
69
|
+
--cascivo-radius-indicator: 0;
|
|
70
|
+
--cascivo-radius-full: 0;
|
|
71
|
+
--cascivo-radius-component: 0;
|
|
72
|
+
--cascivo-radius-button: 0;
|
|
73
|
+
--cascivo-radius-input: 0;
|
|
74
|
+
--cascivo-radius-card: 0;
|
|
75
|
+
--cascivo-radius-badge: 0;
|
|
76
|
+
--cascivo-radius-modal: 0;
|
|
77
|
+
|
|
78
|
+
/* ── Shadows — hard offset, neon glow ────────────── */
|
|
79
|
+
--cascivo-shadow-xs: 1px 1px 0 oklch(0.7 0.25 330);
|
|
80
|
+
--cascivo-shadow-sm: 2px 2px 0 oklch(0.7 0.25 330);
|
|
81
|
+
--cascivo-shadow-md: 4px 4px 0 oklch(0.7 0.25 330);
|
|
82
|
+
--cascivo-shadow-overlay: 6px 6px 0 oklch(0.78 0.16 200), 0 0 24px oklch(0.7 0.25 330 / 0.4);
|
|
83
|
+
--cascivo-shadow-lg: var(--cascivo-shadow-overlay);
|
|
84
|
+
|
|
85
|
+
/* ── Focus ring — neon cyan ──────────────────────── */
|
|
86
|
+
--cascivo-ring-width: 3px;
|
|
87
|
+
--cascivo-ring-offset: 2px;
|
|
88
|
+
--cascivo-ring-color: oklch(0.78 0.16 200);
|
|
89
|
+
--cascivo-color-focus-ring: oklch(0.78 0.16 200);
|
|
90
|
+
--cascivo-focus-ring: 0 0 0 var(--cascivo-ring-width) var(--cascivo-ring-color);
|
|
91
|
+
|
|
92
|
+
/* ── Chart overrides ─────────────────────────────── */
|
|
93
|
+
--cascivo-chart-1: oklch(0.82 0.14 75);
|
|
94
|
+
--cascivo-chart-2: oklch(0.82 0.11 180);
|
|
95
|
+
--cascivo-chart-3: oklch(0.78 0.15 150);
|
|
96
|
+
--cascivo-chart-4: oklch(0.96 0.14 110);
|
|
97
|
+
--cascivo-chart-5: oklch(0.72 0.12 200);
|
|
98
|
+
--cascivo-chart-6: oklch(0.72 0.15 50);
|
|
99
|
+
--cascivo-chart-7: oklch(0.75 0.1 340);
|
|
100
|
+
--cascivo-chart-8: oklch(0.78 0.03 160);
|
|
101
|
+
--cascivo-chart-grid: oklch(0.4 0.1 300 / 40%);
|
|
102
|
+
--cascivo-chart-axis: oklch(0.65 0.06 300);
|
|
103
|
+
|
|
104
|
+
/* ── -content tokens (foreground ≥4.5:1 on paired background) ── */
|
|
105
|
+
--cascivo-color-primary-content: var(--cascivo-color-primary-fg);
|
|
106
|
+
--cascivo-color-accent-content: var(--cascivo-color-text-on-accent);
|
|
107
|
+
--cascivo-color-destructive-content: var(--cascivo-color-text-on-destructive);
|
|
108
|
+
--cascivo-color-info-content: oklch(0.16 0.03 285);
|
|
109
|
+
--cascivo-color-success-content: oklch(0.16 0.03 285);
|
|
110
|
+
--cascivo-color-warning-content: oklch(0.145 0 0);
|
|
111
|
+
--cascivo-color-error-content: oklch(0.16 0.03 285);
|
|
112
|
+
|
|
113
|
+
/* ── Secondary color role — electric cyan ────────── */
|
|
114
|
+
--cascivo-color-secondary: oklch(0.78 0.16 200);
|
|
115
|
+
--cascivo-color-secondary-content: oklch(0.16 0.03 285);
|
|
116
|
+
--cascivo-color-secondary-hover: oklch(0.84 0.14 200);
|
|
117
|
+
--cascivo-color-secondary-subtle: oklch(0.78 0.16 200 / 0.15);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* ── Opt-in signature effects ───────────────────────── */
|
|
121
|
+
/* These never fire unless a consumer opts in via a marker class, so arbitrary */
|
|
122
|
+
/* components stay calm. Each declares its static look first, then layers the */
|
|
123
|
+
/* animation as enhancement; all are disabled under prefers-reduced-motion. */
|
|
124
|
+
|
|
125
|
+
/* Scanline / CRT overlay */
|
|
126
|
+
[data-theme='cyberpunk'] .cascivo-cyber-scanline {
|
|
127
|
+
position: relative;
|
|
128
|
+
}
|
|
129
|
+
[data-theme='cyberpunk'] .cascivo-cyber-scanline::after {
|
|
130
|
+
content: '';
|
|
131
|
+
position: absolute;
|
|
132
|
+
inset: 0;
|
|
133
|
+
z-index: 1;
|
|
134
|
+
pointer-events: none;
|
|
135
|
+
background: repeating-linear-gradient(
|
|
136
|
+
to bottom,
|
|
137
|
+
oklch(0.78 0.16 200 / 0.08) 0,
|
|
138
|
+
oklch(0.78 0.16 200 / 0.08) 1px,
|
|
139
|
+
transparent 1px,
|
|
140
|
+
transparent 3px
|
|
141
|
+
);
|
|
142
|
+
mix-blend-mode: screen;
|
|
143
|
+
animation: cascivo-cyber-scanline 8s linear infinite;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* Glitch / RGB-split on hover or focus */
|
|
147
|
+
[data-theme='cyberpunk'] .cascivo-cyber-glitch {
|
|
148
|
+
text-shadow:
|
|
149
|
+
-1px 0 oklch(0.7 0.25 330 / 0.6),
|
|
150
|
+
1px 0 oklch(0.78 0.16 200 / 0.6);
|
|
151
|
+
}
|
|
152
|
+
[data-theme='cyberpunk'] .cascivo-cyber-glitch:hover,
|
|
153
|
+
[data-theme='cyberpunk'] .cascivo-cyber-glitch:focus-visible {
|
|
154
|
+
animation: cascivo-cyber-glitch var(--cascivo-duration-300) steps(2, jump-end) infinite;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Neon flicker — broken-sign buzz.
|
|
158
|
+
A stack of text-shadows builds the neon-tube glow (tight bright core + wide
|
|
159
|
+
colored halo); the keyframes hold that glow for long stretches, then cut it
|
|
160
|
+
to nothing at a few irregular, close-together stops so it reads as failing
|
|
161
|
+
electrics — a sign that flickers "sometimes" rather than blinking on a beat.
|
|
162
|
+
The base rule is the steady, fully-lit fallback (used when the animation is
|
|
163
|
+
unsupported or disabled by reduced-motion). */
|
|
164
|
+
[data-theme='cyberpunk'] .cascivo-cyber-flicker {
|
|
165
|
+
color: oklch(0.97 0.04 330);
|
|
166
|
+
text-shadow:
|
|
167
|
+
0 0 4px oklch(0.98 0.02 330),
|
|
168
|
+
0 0 11px oklch(0.95 0.05 330),
|
|
169
|
+
0 0 19px oklch(0.9 0.12 330),
|
|
170
|
+
0 0 40px oklch(0.7 0.25 330),
|
|
171
|
+
0 0 75px oklch(0.7 0.25 330),
|
|
172
|
+
0 0 110px oklch(0.7 0.25 330);
|
|
173
|
+
animation: cascivo-cyber-flicker 4s linear infinite;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
@keyframes cascivo-cyber-scanline {
|
|
177
|
+
from {
|
|
178
|
+
background-position-y: 0;
|
|
179
|
+
}
|
|
180
|
+
to {
|
|
181
|
+
background-position-y: 3px;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
@keyframes cascivo-cyber-glitch {
|
|
186
|
+
0%,
|
|
187
|
+
100% {
|
|
188
|
+
transform: translateX(0);
|
|
189
|
+
text-shadow:
|
|
190
|
+
-1px 0 oklch(0.7 0.25 330 / 0.6),
|
|
191
|
+
1px 0 oklch(0.78 0.16 200 / 0.6);
|
|
192
|
+
}
|
|
193
|
+
50% {
|
|
194
|
+
transform: translateX(1px);
|
|
195
|
+
text-shadow:
|
|
196
|
+
1px 0 oklch(0.7 0.25 330 / 0.8),
|
|
197
|
+
-1px 0 oklch(0.78 0.16 200 / 0.8);
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
@keyframes cascivo-cyber-flicker {
|
|
202
|
+
0%,
|
|
203
|
+
19%,
|
|
204
|
+
21%,
|
|
205
|
+
55%,
|
|
206
|
+
57%,
|
|
207
|
+
62%,
|
|
208
|
+
100% {
|
|
209
|
+
color: oklch(0.97 0.04 330);
|
|
210
|
+
text-shadow:
|
|
211
|
+
0 0 4px oklch(0.98 0.02 330),
|
|
212
|
+
0 0 11px oklch(0.95 0.05 330),
|
|
213
|
+
0 0 19px oklch(0.9 0.12 330),
|
|
214
|
+
0 0 40px oklch(0.7 0.25 330),
|
|
215
|
+
0 0 75px oklch(0.7 0.25 330),
|
|
216
|
+
0 0 110px oklch(0.7 0.25 330);
|
|
217
|
+
}
|
|
218
|
+
20%,
|
|
219
|
+
56%,
|
|
220
|
+
60% {
|
|
221
|
+
color: oklch(0.5 0.1 330);
|
|
222
|
+
text-shadow: none;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
@media (prefers-reduced-motion: reduce) {
|
|
227
|
+
[data-theme='cyberpunk'] .cascivo-cyber-scanline::after,
|
|
228
|
+
[data-theme='cyberpunk'] .cascivo-cyber-glitch:hover,
|
|
229
|
+
[data-theme='cyberpunk'] .cascivo-cyber-glitch:focus-visible,
|
|
230
|
+
[data-theme='cyberpunk'] .cascivo-cyber-flicker {
|
|
231
|
+
animation: none;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
}
|