astralkit 0.4.0 → 0.6.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/CHANGELOG.md +20 -0
- package/astralkit-theme-v4.css +139 -64
- package/astralkit-theme.css +139 -64
- package/astralkit-utilities.css +276 -2
- package/lib/theme-context.d.ts +17 -0
- package/lib/theme-context.js +33 -0
- package/package.json +7 -2
- package/palettes.css +2055 -328
- package/primitives/effects.css +373 -115
- package/primitives/layout.css +3 -0
- package/tailwind.cjs +43 -0
package/primitives/effects.css
CHANGED
|
@@ -9,12 +9,226 @@
|
|
|
9
9
|
Override colors via --ak-mesh-color-* vars.
|
|
10
10
|
══════════════════════════════════════════════ */
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
--ak-mesh-
|
|
14
|
-
--ak-
|
|
15
|
-
--ak-
|
|
16
|
-
--ak-
|
|
17
|
-
--ak-
|
|
12
|
+
:where(:root, [data-ak-appearance]) {
|
|
13
|
+
--ak-effect-mesh-opacity: 0;
|
|
14
|
+
--ak-effect-grain-opacity: 0;
|
|
15
|
+
--ak-effect-grid-opacity: 0;
|
|
16
|
+
--ak-effect-backlight-opacity: 0;
|
|
17
|
+
--ak-effect-vignette-opacity: 0;
|
|
18
|
+
--ak-effect-border-opacity: 0.65;
|
|
19
|
+
--ak-effect-glow-opacity: 0.32;
|
|
20
|
+
--ak-effect-border-speed: 8s;
|
|
21
|
+
--ak-effect-spark-size: 34%;
|
|
22
|
+
--ak-effect-border-blur: 12px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
:where([data-ak-appearance="clean"]) {
|
|
26
|
+
--ak-effect-mesh-opacity: 0;
|
|
27
|
+
--ak-effect-grain-opacity: 0;
|
|
28
|
+
--ak-effect-grid-opacity: 0;
|
|
29
|
+
--ak-effect-backlight-opacity: 0;
|
|
30
|
+
--ak-effect-vignette-opacity: 0;
|
|
31
|
+
--ak-effect-border-opacity: 0.55;
|
|
32
|
+
--ak-effect-glow-opacity: 0.22;
|
|
33
|
+
--ak-effect-border-speed: 8s;
|
|
34
|
+
--ak-effect-spark-size: 34%;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
:where([data-ak-appearance="soft-mesh"]) {
|
|
38
|
+
--ak-effect-mesh-opacity: 0.18;
|
|
39
|
+
--ak-effect-grain-opacity: 0.018;
|
|
40
|
+
--ak-effect-grid-opacity: 0;
|
|
41
|
+
--ak-effect-backlight-opacity: 0.08;
|
|
42
|
+
--ak-effect-vignette-opacity: 0.035;
|
|
43
|
+
--ak-effect-border-opacity: 0.62;
|
|
44
|
+
--ak-effect-glow-opacity: 0.32;
|
|
45
|
+
--ak-effect-border-speed: 9s;
|
|
46
|
+
--ak-effect-spark-size: 32%;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
:where([data-ak-appearance="neon-edge"]) {
|
|
50
|
+
--ak-effect-mesh-opacity: 0.12;
|
|
51
|
+
--ak-effect-grain-opacity: 0.014;
|
|
52
|
+
--ak-effect-grid-opacity: 0;
|
|
53
|
+
--ak-effect-backlight-opacity: 0.14;
|
|
54
|
+
--ak-effect-vignette-opacity: 0.06;
|
|
55
|
+
--ak-effect-border-opacity: 0.92;
|
|
56
|
+
--ak-effect-glow-opacity: 0.44;
|
|
57
|
+
--ak-effect-border-speed: 6s;
|
|
58
|
+
--ak-effect-spark-size: 24%;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
:where([data-ak-appearance="cinematic-backlight"]) {
|
|
62
|
+
--ak-effect-mesh-opacity: 0.24;
|
|
63
|
+
--ak-effect-grain-opacity: 0.022;
|
|
64
|
+
--ak-effect-grid-opacity: 0;
|
|
65
|
+
--ak-effect-backlight-opacity: 0.28;
|
|
66
|
+
--ak-effect-vignette-opacity: 0.12;
|
|
67
|
+
--ak-effect-border-opacity: 0.7;
|
|
68
|
+
--ak-effect-glow-opacity: 0.5;
|
|
69
|
+
--ak-effect-border-speed: 10s;
|
|
70
|
+
--ak-effect-spark-size: 36%;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
:where([data-ak-appearance="circuit-spark"]) {
|
|
74
|
+
--ak-effect-mesh-opacity: 0.15;
|
|
75
|
+
--ak-effect-grain-opacity: 0.016;
|
|
76
|
+
--ak-effect-grid-opacity: 0.12;
|
|
77
|
+
--ak-effect-backlight-opacity: 0.16;
|
|
78
|
+
--ak-effect-vignette-opacity: 0.08;
|
|
79
|
+
--ak-effect-border-opacity: 1;
|
|
80
|
+
--ak-effect-glow-opacity: 0.48;
|
|
81
|
+
--ak-effect-border-speed: 4.8s;
|
|
82
|
+
--ak-effect-spark-size: 18%;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
:where([data-ak-appearance="portfolio-grain"]) {
|
|
86
|
+
--ak-effect-mesh-opacity: 0.1;
|
|
87
|
+
--ak-effect-grain-opacity: 0.055;
|
|
88
|
+
--ak-effect-grid-opacity: 0;
|
|
89
|
+
--ak-effect-backlight-opacity: 0.07;
|
|
90
|
+
--ak-effect-vignette-opacity: 0.1;
|
|
91
|
+
--ak-effect-border-opacity: 0.5;
|
|
92
|
+
--ak-effect-glow-opacity: 0.28;
|
|
93
|
+
--ak-effect-border-speed: 12s;
|
|
94
|
+
--ak-effect-spark-size: 40%;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Appearance stage: optional page-level atmosphere controlled by presets. */
|
|
98
|
+
.ak-effect-stage {
|
|
99
|
+
position: relative;
|
|
100
|
+
isolation: isolate;
|
|
101
|
+
overflow: hidden;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.ak-effect-stage > * {
|
|
105
|
+
position: relative;
|
|
106
|
+
z-index: 1;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.ak-effect-stage::before,
|
|
110
|
+
.ak-effect-stage::after {
|
|
111
|
+
content: "";
|
|
112
|
+
position: absolute;
|
|
113
|
+
inset: 0;
|
|
114
|
+
pointer-events: none;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.ak-effect-stage::before {
|
|
118
|
+
z-index: 0;
|
|
119
|
+
background-image:
|
|
120
|
+
radial-gradient(ellipse 72% 48% at 18% 0%, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 56%, transparent) 0%, transparent 68%),
|
|
121
|
+
radial-gradient(ellipse 58% 42% at 86% 18%, color-mix(in srgb, var(--color-ak-glow-secondary, #22d3ee) 42%, transparent) 0%, transparent 64%),
|
|
122
|
+
radial-gradient(ellipse 64% 48% at 50% 100%, color-mix(in srgb, var(--color-ak-glow-tertiary, #a78bfa) 34%, transparent) 0%, transparent 70%),
|
|
123
|
+
radial-gradient(ellipse 46% 36% at 92% 82%, color-mix(in srgb, var(--color-ak-glow-warm, #ff7a5c) 28%, transparent) 0%, transparent 66%);
|
|
124
|
+
opacity: var(--ak-effect-mesh-opacity, 0);
|
|
125
|
+
transform: scale(1.06);
|
|
126
|
+
will-change: transform, opacity;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.ak-effect-stage::after {
|
|
130
|
+
z-index: 0;
|
|
131
|
+
background-image:
|
|
132
|
+
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E"),
|
|
133
|
+
linear-gradient(to right, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 28%, transparent) 1px, transparent 1px),
|
|
134
|
+
linear-gradient(to bottom, color-mix(in srgb, var(--color-ak-glow-secondary, #22d3ee) 22%, transparent) 1px, transparent 1px);
|
|
135
|
+
background-size: 220px 220px, 44px 44px, 44px 44px;
|
|
136
|
+
box-shadow: inset 0 0 12rem rgba(0, 0, 0, var(--ak-effect-vignette-opacity, 0));
|
|
137
|
+
mix-blend-mode: overlay;
|
|
138
|
+
opacity: calc(var(--ak-effect-grain-opacity, 0) + var(--ak-effect-grid-opacity, 0));
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.ak-effect-grain {
|
|
142
|
+
position: relative;
|
|
143
|
+
isolation: isolate;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.ak-effect-grain::after {
|
|
147
|
+
content: "";
|
|
148
|
+
position: absolute;
|
|
149
|
+
inset: 0;
|
|
150
|
+
z-index: 1;
|
|
151
|
+
border-radius: inherit;
|
|
152
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
|
|
153
|
+
background-size: 220px 220px;
|
|
154
|
+
opacity: var(--ak-effect-grain-opacity, 0.04);
|
|
155
|
+
mix-blend-mode: overlay;
|
|
156
|
+
pointer-events: none;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.ak-effect-backlight {
|
|
160
|
+
position: relative;
|
|
161
|
+
isolation: isolate;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.ak-effect-backlight::before {
|
|
165
|
+
content: "";
|
|
166
|
+
position: absolute;
|
|
167
|
+
inset: -28%;
|
|
168
|
+
z-index: -1;
|
|
169
|
+
border-radius: inherit;
|
|
170
|
+
background:
|
|
171
|
+
radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 44%, transparent) 0%, transparent 62%),
|
|
172
|
+
radial-gradient(ellipse at 80% 78%, color-mix(in srgb, var(--color-ak-glow-secondary, #22d3ee) 28%, transparent) 0%, transparent 66%);
|
|
173
|
+
filter: blur(42px);
|
|
174
|
+
opacity: var(--ak-effect-backlight-opacity, 0.22);
|
|
175
|
+
pointer-events: none;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.ak-effect-neon-border,
|
|
179
|
+
.ak-effect-comet-border {
|
|
180
|
+
position: relative;
|
|
181
|
+
isolation: isolate;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.ak-effect-neon-border::before,
|
|
185
|
+
.ak-effect-comet-border::before {
|
|
186
|
+
content: "";
|
|
187
|
+
position: absolute;
|
|
188
|
+
inset: -1px;
|
|
189
|
+
z-index: 2;
|
|
190
|
+
border-radius: inherit;
|
|
191
|
+
padding: 1px;
|
|
192
|
+
background: var(--gradient-ak-neon-border, conic-gradient(from 180deg at 50% 50%, transparent 0 18%, var(--color-ak-glow-primary, #818cf8) 40%, var(--color-ak-glow-secondary, #22d3ee) 52%, transparent 78% 100%));
|
|
193
|
+
opacity: var(--ak-effect-border-opacity, 0.72);
|
|
194
|
+
pointer-events: none;
|
|
195
|
+
-webkit-mask:
|
|
196
|
+
linear-gradient(#000 0 0) content-box,
|
|
197
|
+
linear-gradient(#000 0 0);
|
|
198
|
+
-webkit-mask-composite: xor;
|
|
199
|
+
mask-composite: exclude;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.ak-effect-comet-border::before {
|
|
203
|
+
background: conic-gradient(
|
|
204
|
+
from var(--ak-border-angle, 0deg) at 50% 50%,
|
|
205
|
+
transparent 0 calc(50% - var(--ak-effect-spark-size, 34%)),
|
|
206
|
+
color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 92%, transparent) 50%,
|
|
207
|
+
color-mix(in srgb, var(--color-ak-glow-secondary, #22d3ee) 72%, transparent) calc(50% + 8%),
|
|
208
|
+
transparent calc(50% + var(--ak-effect-spark-size, 34%)) 100%
|
|
209
|
+
);
|
|
210
|
+
animation: ak-border-spin var(--ak-effect-border-speed, 8s) linear infinite;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.ak-effect-comet-border::after {
|
|
214
|
+
content: "";
|
|
215
|
+
position: absolute;
|
|
216
|
+
inset: -6px;
|
|
217
|
+
z-index: -1;
|
|
218
|
+
border-radius: inherit;
|
|
219
|
+
background: var(--gradient-ak-neon-border, conic-gradient(from var(--ak-border-angle, 0deg), transparent 20%, var(--color-ak-glow-primary, #818cf8) 48%, transparent 72%));
|
|
220
|
+
filter: blur(var(--ak-effect-border-blur, 12px));
|
|
221
|
+
opacity: calc(var(--ak-effect-border-opacity, 0.72) * 0.42);
|
|
222
|
+
pointer-events: none;
|
|
223
|
+
animation: ak-border-spin var(--ak-effect-border-speed, 8s) linear infinite;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.ak-mesh-dark {
|
|
227
|
+
--ak-mesh-color-1: color-mix(in srgb, var(--color-ak-glow-primary, hsl(265 90% 55%)) 55%, transparent);
|
|
228
|
+
--ak-mesh-color-2: color-mix(in srgb, var(--color-ak-glow-secondary, hsl(220 85% 60%)) 40%, transparent);
|
|
229
|
+
--ak-mesh-color-3: color-mix(in srgb, var(--color-ak-glow-tertiary, hsl(185 80% 50%)) 30%, transparent);
|
|
230
|
+
--ak-mesh-color-4: color-mix(in srgb, var(--color-ak-glow-warm, hsl(300 70% 55%)) 25%, transparent);
|
|
231
|
+
--ak-mesh-base: var(--color-ak-mesh-base, #0a0a0f);
|
|
18
232
|
|
|
19
233
|
background-color: var(--ak-mesh-base);
|
|
20
234
|
background-image:
|
|
@@ -24,12 +238,12 @@
|
|
|
24
238
|
radial-gradient(ellipse 50% 40% at 90% 70%, var(--ak-mesh-color-4) 0%, transparent 60%);
|
|
25
239
|
}
|
|
26
240
|
|
|
27
|
-
.ak-mesh-light {
|
|
28
|
-
--ak-mesh-color-1:
|
|
29
|
-
--ak-mesh-color-2:
|
|
30
|
-
--ak-mesh-color-3:
|
|
31
|
-
--ak-mesh-color-4:
|
|
32
|
-
--ak-mesh-base: #fafafa;
|
|
241
|
+
.ak-mesh-light {
|
|
242
|
+
--ak-mesh-color-1: color-mix(in srgb, var(--color-ak-glow-primary, hsl(265 80% 70%)) 18%, transparent);
|
|
243
|
+
--ak-mesh-color-2: color-mix(in srgb, var(--color-ak-glow-secondary, hsl(210 90% 65%)) 15%, transparent);
|
|
244
|
+
--ak-mesh-color-3: color-mix(in srgb, var(--color-ak-glow-tertiary, hsl(320 70% 75%)) 12%, transparent);
|
|
245
|
+
--ak-mesh-color-4: color-mix(in srgb, var(--color-ak-glow-warm, hsl(175 70% 60%)) 10%, transparent);
|
|
246
|
+
--ak-mesh-base: var(--color-ak-mesh-base, #fafafa);
|
|
33
247
|
|
|
34
248
|
background-color: var(--ak-mesh-base);
|
|
35
249
|
background-image:
|
|
@@ -40,15 +254,15 @@
|
|
|
40
254
|
}
|
|
41
255
|
|
|
42
256
|
/* AstralKit branded mesh (violet/blue/teal on deep purple) */
|
|
43
|
-
.ak-mesh-astral {
|
|
44
|
-
--ak-mesh-base: #0D0622;
|
|
45
|
-
background-color: var(--ak-mesh-base);
|
|
46
|
-
background-image:
|
|
47
|
-
radial-gradient(ellipse 80% 55% at 15% 15%,
|
|
48
|
-
radial-gradient(ellipse 65% 50% at 82% 18%,
|
|
49
|
-
radial-gradient(ellipse 70% 55% at 50% 85%,
|
|
50
|
-
radial-gradient(ellipse 55% 40% at 90% 72%,
|
|
51
|
-
}
|
|
257
|
+
.ak-mesh-astral {
|
|
258
|
+
--ak-mesh-base: var(--color-ak-mesh-base, #0D0622);
|
|
259
|
+
background-color: var(--ak-mesh-base);
|
|
260
|
+
background-image:
|
|
261
|
+
radial-gradient(ellipse 80% 55% at 15% 15%, color-mix(in srgb, var(--color-ak-glow-primary, hsl(258 100% 60%)) 60%, transparent) 0%, transparent 70%),
|
|
262
|
+
radial-gradient(ellipse 65% 50% at 82% 18%, color-mix(in srgb, var(--color-ak-glow-secondary, hsl(220 90% 58%)) 40%, transparent) 0%, transparent 65%),
|
|
263
|
+
radial-gradient(ellipse 70% 55% at 50% 85%, color-mix(in srgb, var(--color-ak-glow-tertiary, hsl(195 85% 50%)) 32%, transparent) 0%, transparent 65%),
|
|
264
|
+
radial-gradient(ellipse 55% 40% at 90% 72%, color-mix(in srgb, var(--color-ak-glow-warm, hsl(280 75% 55%)) 28%, transparent) 0%, transparent 60%);
|
|
265
|
+
}
|
|
52
266
|
|
|
53
267
|
|
|
54
268
|
/* ══════════════════════════════════════════════
|
|
@@ -101,12 +315,12 @@
|
|
|
101
315
|
.ak-card-glow {
|
|
102
316
|
transition: box-shadow var(--duration-ak-base, 150ms) var(--ease-ak-default, ease);
|
|
103
317
|
}
|
|
104
|
-
.ak-card-glow:hover {
|
|
105
|
-
box-shadow:
|
|
106
|
-
0 0 0 1px
|
|
107
|
-
0 8px 32px -4px
|
|
108
|
-
0 0 48px -8px
|
|
109
|
-
}
|
|
318
|
+
.ak-card-glow:hover {
|
|
319
|
+
box-shadow:
|
|
320
|
+
0 0 0 1px color-mix(in srgb, var(--color-ak-glow-primary, hsl(265 90% 60%)) calc(var(--ak-effect-glow-opacity, 0.32) * 62%), transparent),
|
|
321
|
+
0 8px 32px -4px color-mix(in srgb, var(--color-ak-glow-primary, hsl(265 90% 60%)) calc(var(--ak-effect-glow-opacity, 0.32) * 78%), transparent),
|
|
322
|
+
0 0 48px -8px color-mix(in srgb, var(--color-ak-glow-secondary, hsl(265 90% 60%)) calc(var(--ak-effect-glow-opacity, 0.32) * 48%), transparent);
|
|
323
|
+
}
|
|
110
324
|
|
|
111
325
|
/* Neutral glow (no accent color) — works on any theme */
|
|
112
326
|
.ak-card-glow-neutral {
|
|
@@ -125,21 +339,21 @@
|
|
|
125
339
|
Usage: <h1 class="ak-text-glow">
|
|
126
340
|
══════════════════════════════════════════════ */
|
|
127
341
|
|
|
128
|
-
.ak-text-glow {
|
|
129
|
-
text-shadow:
|
|
130
|
-
0 0 20px
|
|
131
|
-
0 0 60px
|
|
132
|
-
}
|
|
342
|
+
.ak-text-glow {
|
|
343
|
+
text-shadow:
|
|
344
|
+
0 0 20px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) calc(var(--ak-effect-glow-opacity, 0.32) * 180%), transparent),
|
|
345
|
+
0 0 60px color-mix(in srgb, var(--color-ak-glow-secondary, #818cf8) calc(var(--ak-effect-glow-opacity, 0.32) * 78%), transparent);
|
|
346
|
+
}
|
|
133
347
|
|
|
134
348
|
/* Intense neon — use on single accent words, not full paragraphs */
|
|
135
|
-
.ak-text-glow-intense {
|
|
136
|
-
color: #a5b4fc;
|
|
137
|
-
text-shadow:
|
|
138
|
-
0 0 4px
|
|
139
|
-
0 0 16px
|
|
140
|
-
0 0 40px
|
|
141
|
-
0 0 80px
|
|
142
|
-
}
|
|
349
|
+
.ak-text-glow-intense {
|
|
350
|
+
color: var(--color-ak-glow-primary, #a5b4fc);
|
|
351
|
+
text-shadow:
|
|
352
|
+
0 0 4px color-mix(in srgb, var(--color-ak-glow-primary, #a5b4fc) calc(var(--ak-effect-glow-opacity, 0.32) * 180%), transparent),
|
|
353
|
+
0 0 16px color-mix(in srgb, var(--color-ak-glow-primary, #a5b4fc) calc(var(--ak-effect-glow-opacity, 0.32) * 130%), transparent),
|
|
354
|
+
0 0 40px color-mix(in srgb, var(--color-ak-glow-secondary, #818cf8) calc(var(--ak-effect-glow-opacity, 0.32) * 90%), transparent),
|
|
355
|
+
0 0 80px color-mix(in srgb, var(--color-ak-glow-tertiary, #6366f1) calc(var(--ak-effect-glow-opacity, 0.32) * 45%), transparent);
|
|
356
|
+
}
|
|
143
357
|
|
|
144
358
|
|
|
145
359
|
/* ══════════════════════════════════════════════
|
|
@@ -156,11 +370,11 @@
|
|
|
156
370
|
content: "";
|
|
157
371
|
position: absolute;
|
|
158
372
|
inset: 0;
|
|
159
|
-
background: radial-gradient(
|
|
160
|
-
ellipse 60% 50% at 50% 0%,
|
|
161
|
-
|
|
162
|
-
transparent 70%
|
|
163
|
-
);
|
|
373
|
+
background: radial-gradient(
|
|
374
|
+
ellipse 60% 50% at 50% 0%,
|
|
375
|
+
color-mix(in srgb, var(--color-ak-glow-primary, hsl(258 80% 70%)) calc(var(--ak-effect-backlight-opacity, 0.15) * 100%), transparent) 0%,
|
|
376
|
+
transparent 70%
|
|
377
|
+
);
|
|
164
378
|
pointer-events: none;
|
|
165
379
|
z-index: -1;
|
|
166
380
|
}
|
|
@@ -206,20 +420,21 @@
|
|
|
206
420
|
background-clip: padding-box;
|
|
207
421
|
border: var(--ak-gb-width) solid transparent;
|
|
208
422
|
}
|
|
209
|
-
.ak-gradient-border::before {
|
|
423
|
+
.ak-gradient-border::before {
|
|
210
424
|
content: "";
|
|
211
425
|
position: absolute;
|
|
212
426
|
inset: calc(var(--ak-gb-width) * -1);
|
|
213
427
|
border-radius: inherit;
|
|
214
428
|
z-index: -1;
|
|
215
|
-
background: conic-gradient(
|
|
216
|
-
from 180deg at 50% 50%,
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
);
|
|
222
|
-
|
|
429
|
+
background: var(--gradient-ak-neon-border, conic-gradient(
|
|
430
|
+
from 180deg at 50% 50%,
|
|
431
|
+
color-mix(in srgb, var(--color-ak-glow-primary, hsl(265 80% 65%)) 80%, transparent),
|
|
432
|
+
color-mix(in srgb, var(--color-ak-glow-secondary, hsl(220 90% 60%)) 60%, transparent),
|
|
433
|
+
color-mix(in srgb, var(--color-ak-glow-tertiary, hsl(195 85% 55%)) 50%, transparent),
|
|
434
|
+
color-mix(in srgb, var(--color-ak-glow-primary, hsl(265 80% 65%)) 80%, transparent)
|
|
435
|
+
));
|
|
436
|
+
opacity: var(--ak-effect-border-opacity, 0.72);
|
|
437
|
+
}
|
|
223
438
|
|
|
224
439
|
.dark .ak-gradient-border {
|
|
225
440
|
--ak-gb-bg: var(--color-ak-surface, #18191b);
|
|
@@ -238,52 +453,54 @@
|
|
|
238
453
|
initial-value: 0deg;
|
|
239
454
|
}
|
|
240
455
|
|
|
241
|
-
.ak-animated-border {
|
|
242
|
-
--ak-ab-width: 1px;
|
|
243
|
-
--ak-ab-radius: var(--radius-ak-lg, 0.75rem);
|
|
244
|
-
--ak-ab-bg: var(--color-ak-surface, #18191b);
|
|
456
|
+
.ak-animated-border {
|
|
457
|
+
--ak-ab-width: 1px;
|
|
458
|
+
--ak-ab-radius: var(--radius-ak-lg, 0.75rem);
|
|
459
|
+
--ak-ab-bg: var(--color-ak-surface, #18191b);
|
|
245
460
|
|
|
246
461
|
position: relative;
|
|
247
462
|
border-radius: var(--ak-ab-radius);
|
|
248
|
-
background: var(--ak-ab-bg);
|
|
249
|
-
background-clip: padding-box;
|
|
250
|
-
border: var(--ak-ab-width) solid transparent;
|
|
251
|
-
|
|
252
|
-
}
|
|
463
|
+
background: var(--ak-ab-bg);
|
|
464
|
+
background-clip: padding-box;
|
|
465
|
+
border: var(--ak-ab-width) solid transparent;
|
|
466
|
+
}
|
|
253
467
|
|
|
254
468
|
/* Glow layer (blurred behind) */
|
|
255
|
-
.ak-animated-border::before {
|
|
469
|
+
.ak-animated-border::before {
|
|
256
470
|
content: "";
|
|
257
471
|
position: absolute;
|
|
258
472
|
inset: calc(var(--ak-ab-width) * -1 - 4px);
|
|
259
473
|
border-radius: calc(var(--ak-ab-radius) + 4px);
|
|
260
474
|
z-index: -2;
|
|
261
|
-
background: conic-gradient(
|
|
262
|
-
from var(--ak-border-angle),
|
|
263
|
-
transparent 20%,
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
transparent 70%
|
|
267
|
-
);
|
|
268
|
-
filter: blur(12px);
|
|
269
|
-
opacity: 0.8;
|
|
270
|
-
|
|
475
|
+
background: var(--gradient-ak-neon-border, conic-gradient(
|
|
476
|
+
from var(--ak-border-angle),
|
|
477
|
+
transparent 20%,
|
|
478
|
+
color-mix(in srgb, var(--color-ak-glow-primary, hsl(265 90% 60%)) 60%, transparent) 40%,
|
|
479
|
+
color-mix(in srgb, var(--color-ak-glow-secondary, hsl(220 85% 60%)) 40%, transparent) 55%,
|
|
480
|
+
transparent 70%
|
|
481
|
+
));
|
|
482
|
+
filter: blur(var(--ak-effect-border-blur, 12px));
|
|
483
|
+
opacity: calc(var(--ak-effect-border-opacity, 0.8) * 0.85);
|
|
484
|
+
animation: ak-border-spin var(--ak-effect-border-speed, 4s) linear infinite;
|
|
485
|
+
}
|
|
271
486
|
|
|
272
487
|
/* Border layer */
|
|
273
|
-
.ak-animated-border::after {
|
|
488
|
+
.ak-animated-border::after {
|
|
274
489
|
content: "";
|
|
275
490
|
position: absolute;
|
|
276
491
|
inset: calc(var(--ak-ab-width) * -1);
|
|
277
492
|
border-radius: inherit;
|
|
278
493
|
z-index: -1;
|
|
279
|
-
background: conic-gradient(
|
|
280
|
-
from var(--ak-border-angle),
|
|
281
|
-
transparent 20%,
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
transparent 70%
|
|
285
|
-
);
|
|
286
|
-
|
|
494
|
+
background: var(--gradient-ak-neon-border, conic-gradient(
|
|
495
|
+
from var(--ak-border-angle),
|
|
496
|
+
transparent 20%,
|
|
497
|
+
var(--color-ak-glow-primary, hsl(265 90% 65%)) 40%,
|
|
498
|
+
color-mix(in srgb, var(--color-ak-glow-secondary, hsl(220 85% 65%)) 80%, transparent) 55%,
|
|
499
|
+
transparent 70%
|
|
500
|
+
));
|
|
501
|
+
opacity: var(--ak-effect-border-opacity, 0.8);
|
|
502
|
+
animation: ak-border-spin var(--ak-effect-border-speed, 4s) linear infinite;
|
|
503
|
+
}
|
|
287
504
|
|
|
288
505
|
@keyframes ak-border-spin {
|
|
289
506
|
to { --ak-border-angle: 360deg; }
|
|
@@ -299,20 +516,21 @@
|
|
|
299
516
|
position: relative;
|
|
300
517
|
display: inline-block;
|
|
301
518
|
}
|
|
302
|
-
.ak-ambient-glow::before {
|
|
519
|
+
.ak-ambient-glow::before {
|
|
303
520
|
content: "";
|
|
304
521
|
position: absolute;
|
|
305
522
|
inset: -20% -15%;
|
|
306
|
-
background: radial-gradient(
|
|
307
|
-
ellipse at center,
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
transparent 70%
|
|
311
|
-
);
|
|
312
|
-
filter: blur(40px);
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
523
|
+
background: radial-gradient(
|
|
524
|
+
ellipse at center,
|
|
525
|
+
color-mix(in srgb, var(--color-ak-glow-primary, hsl(265 90% 60%)) 35%, transparent) 0%,
|
|
526
|
+
color-mix(in srgb, var(--color-ak-glow-secondary, hsl(220 80% 55%)) 15%, transparent) 45%,
|
|
527
|
+
transparent 70%
|
|
528
|
+
);
|
|
529
|
+
filter: blur(40px);
|
|
530
|
+
opacity: var(--ak-effect-backlight-opacity, 0.35);
|
|
531
|
+
z-index: -1;
|
|
532
|
+
pointer-events: none;
|
|
533
|
+
}
|
|
316
534
|
|
|
317
535
|
|
|
318
536
|
/* ══════════════════════════════════════════════
|
|
@@ -345,17 +563,17 @@
|
|
|
345
563
|
box-shadow var(--duration-ak-fast, 110ms) var(--ease-ak-default, ease),
|
|
346
564
|
transform var(--duration-ak-fast, 110ms) var(--ease-ak-default, ease);
|
|
347
565
|
}
|
|
348
|
-
.ak-btn-neon:hover {
|
|
349
|
-
transform: translateY(-1px);
|
|
350
|
-
box-shadow:
|
|
351
|
-
0 0 8px 2px
|
|
352
|
-
0 0 24px 4px
|
|
353
|
-
0 0 48px 8px
|
|
354
|
-
}
|
|
355
|
-
.ak-btn-neon:active {
|
|
356
|
-
transform: translateY(0);
|
|
357
|
-
box-shadow: 0 0 12px 2px
|
|
358
|
-
}
|
|
566
|
+
.ak-btn-neon:hover {
|
|
567
|
+
transform: translateY(-1px);
|
|
568
|
+
box-shadow:
|
|
569
|
+
0 0 8px 2px color-mix(in srgb, var(--color-ak-glow-primary, hsl(258 100% 60%)) calc(var(--ak-effect-glow-opacity, 0.32) * 150%), transparent),
|
|
570
|
+
0 0 24px 4px color-mix(in srgb, var(--color-ak-glow-secondary, hsl(258 100% 60%)) calc(var(--ak-effect-glow-opacity, 0.32) * 94%), transparent),
|
|
571
|
+
0 0 48px 8px color-mix(in srgb, var(--color-ak-glow-tertiary, hsl(258 100% 60%)) calc(var(--ak-effect-glow-opacity, 0.32) * 48%), transparent);
|
|
572
|
+
}
|
|
573
|
+
.ak-btn-neon:active {
|
|
574
|
+
transform: translateY(0);
|
|
575
|
+
box-shadow: 0 0 12px 2px color-mix(in srgb, var(--color-ak-glow-primary, hsl(258 100% 60%)) calc(var(--ak-effect-glow-opacity, 0.32) * 125%), transparent);
|
|
576
|
+
}
|
|
359
577
|
|
|
360
578
|
|
|
361
579
|
/* ══════════════════════════════════════════════
|
|
@@ -368,21 +586,61 @@
|
|
|
368
586
|
position: relative;
|
|
369
587
|
overflow: hidden;
|
|
370
588
|
}
|
|
371
|
-
.ak-spotlight-card::before {
|
|
589
|
+
.ak-spotlight-card::before {
|
|
372
590
|
content: "";
|
|
373
591
|
position: absolute;
|
|
374
592
|
inset: 0;
|
|
375
|
-
background: radial-gradient(
|
|
376
|
-
circle 200px at var(--ak-spotlight-x, 50%) var(--ak-spotlight-y, 50%),
|
|
377
|
-
|
|
378
|
-
transparent 100%
|
|
379
|
-
);
|
|
593
|
+
background: radial-gradient(
|
|
594
|
+
circle 200px at var(--ak-spotlight-x, 50%) var(--ak-spotlight-y, 50%),
|
|
595
|
+
color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) calc(var(--ak-effect-glow-opacity, 0.32) * 38%), transparent) 0%,
|
|
596
|
+
transparent 100%
|
|
597
|
+
);
|
|
380
598
|
pointer-events: none;
|
|
381
599
|
opacity: 0;
|
|
382
600
|
transition: opacity 300ms ease;
|
|
383
601
|
z-index: 1;
|
|
384
602
|
}
|
|
385
|
-
.ak-spotlight-card:hover::before {
|
|
386
|
-
opacity: 1;
|
|
387
|
-
}
|
|
388
|
-
|
|
603
|
+
.ak-spotlight-card:hover::before {
|
|
604
|
+
opacity: 1;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
@keyframes ak-effect-mesh-drift {
|
|
608
|
+
0% { transform: scale(1.06) translate3d(0, 0, 0); }
|
|
609
|
+
50% { transform: scale(1.1) translate3d(1.4%, -1%, 0); }
|
|
610
|
+
100% { transform: scale(1.08) translate3d(-1%, 1.2%, 0); }
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
@keyframes ak-effect-grain-shift {
|
|
614
|
+
0%, 100% { transform: translate3d(0, 0, 0); }
|
|
615
|
+
20% { transform: translate3d(-2%, 1%, 0); }
|
|
616
|
+
40% { transform: translate3d(2%, -1%, 0); }
|
|
617
|
+
60% { transform: translate3d(-1%, -2%, 0); }
|
|
618
|
+
80% { transform: translate3d(1%, 2%, 0); }
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
622
|
+
.ak-effect-stage:not([data-ak-appearance="clean"])::before {
|
|
623
|
+
animation: ak-effect-mesh-drift 18s ease-in-out infinite alternate;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
.ak-effect-stage:not([data-ak-appearance="clean"])::after,
|
|
627
|
+
.ak-effect-grain::after {
|
|
628
|
+
animation: ak-effect-grain-shift 9s steps(6) infinite;
|
|
629
|
+
}
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
@media (prefers-reduced-motion: reduce) {
|
|
633
|
+
.ak-effect-stage::before,
|
|
634
|
+
.ak-effect-stage::after,
|
|
635
|
+
.ak-effect-grain::after,
|
|
636
|
+
.ak-effect-comet-border::before,
|
|
637
|
+
.ak-effect-comet-border::after,
|
|
638
|
+
.ak-animated-border::before,
|
|
639
|
+
.ak-animated-border::after {
|
|
640
|
+
animation: none;
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
.ak-btn-neon:hover {
|
|
644
|
+
transform: none;
|
|
645
|
+
}
|
|
646
|
+
}
|
package/primitives/layout.css
CHANGED
|
@@ -149,6 +149,9 @@
|
|
|
149
149
|
);
|
|
150
150
|
animation: ak-skeleton-shimmer var(--duration-ak-skeleton) ease-in-out infinite;
|
|
151
151
|
}
|
|
152
|
+
@media (prefers-reduced-motion: reduce) {
|
|
153
|
+
.ak-skeleton::after { animation: none; }
|
|
154
|
+
}
|
|
152
155
|
.ak-skeleton-pill { border-radius: var(--radius-ak-full); }
|
|
153
156
|
.ak-skeleton-circle { border-radius: var(--radius-ak-full); }
|
|
154
157
|
|
package/tailwind.cjs
CHANGED
|
@@ -121,6 +121,49 @@ module.exports = plugin(
|
|
|
121
121
|
'ak-sheet-handle': 'var(--color-ak-sheet-handle)',
|
|
122
122
|
'ak-on-primary': 'var(--color-ak-on-primary)',
|
|
123
123
|
'ak-primary-subtle': 'var(--color-ak-primary-subtle)',
|
|
124
|
+
|
|
125
|
+
// Selection accent: defaults to brand primary; palettes may split
|
|
126
|
+
// (e.g. Pulse: ink CTAs via primary, volt-lime selection via accent).
|
|
127
|
+
'ak-accent': 'var(--color-ak-accent, var(--color-ak-primary))',
|
|
128
|
+
'ak-on-accent': 'var(--color-ak-on-accent, var(--color-ak-on-primary))',
|
|
129
|
+
'ak-accent-soft': 'var(--color-ak-accent-soft, var(--color-ak-surface-2))',
|
|
130
|
+
|
|
131
|
+
// Slider/scrubber fill: defaults to primary; palettes may override to ink
|
|
132
|
+
'ak-slider-fill': 'var(--color-ak-slider-fill, var(--color-ak-primary))',
|
|
133
|
+
'ak-slider-ring': 'var(--color-ak-slider-ring, var(--color-ak-bg))',
|
|
134
|
+
|
|
135
|
+
// M3 role layer (additive aliases)
|
|
136
|
+
'ak-surface-3': 'var(--color-ak-surface-3)',
|
|
137
|
+
'ak-surface-4': 'var(--color-ak-surface-4)',
|
|
138
|
+
'ak-surface-container-lowest': 'var(--color-ak-surface-container-lowest, var(--color-ak-bg))',
|
|
139
|
+
'ak-surface-container-low': 'var(--color-ak-surface-container-low, var(--color-ak-surface))',
|
|
140
|
+
'ak-surface-container': 'var(--color-ak-surface-container, var(--color-ak-surface-2))',
|
|
141
|
+
'ak-surface-container-high': 'var(--color-ak-surface-container-high, var(--color-ak-surface-3))',
|
|
142
|
+
'ak-surface-container-highest': 'var(--color-ak-surface-container-highest, var(--color-ak-surface-4))',
|
|
143
|
+
'ak-on-surface': 'var(--color-ak-on-surface, var(--color-ak-text))',
|
|
144
|
+
'ak-on-surface-variant': 'var(--color-ak-on-surface-variant, var(--color-ak-text-secondary))',
|
|
145
|
+
'ak-outline': 'var(--color-ak-outline, var(--color-ak-border))',
|
|
146
|
+
'ak-outline-variant': 'var(--color-ak-outline-variant, var(--color-ak-border-subtle))',
|
|
147
|
+
'ak-primary-container': 'var(--color-ak-primary-container, var(--color-ak-primary-subtle))',
|
|
148
|
+
'ak-on-primary-container': 'var(--color-ak-on-primary-container, var(--color-ak-primary-900))',
|
|
149
|
+
'ak-selection-ink': 'var(--color-ak-selection-ink, var(--color-ak-on-primary-container, var(--color-ak-primary-900)))',
|
|
150
|
+
'ak-primary-container-emphasis': 'var(--color-ak-primary-container-emphasis, var(--color-ak-selection-ink, var(--color-ak-on-primary-container)))',
|
|
151
|
+
'ak-secondary': 'var(--color-ak-secondary, var(--color-ak-accent, var(--color-ak-primary)))',
|
|
152
|
+
'ak-on-secondary': 'var(--color-ak-on-secondary, var(--color-ak-on-accent, var(--color-ak-on-primary)))',
|
|
153
|
+
'ak-secondary-container': 'var(--color-ak-secondary-container, var(--color-ak-accent-soft, var(--color-ak-surface-2)))',
|
|
154
|
+
'ak-on-secondary-container': 'var(--color-ak-on-secondary-container, var(--color-ak-text))',
|
|
155
|
+
'ak-tertiary': 'var(--color-ak-tertiary, var(--color-ak-info))',
|
|
156
|
+
'ak-on-tertiary': 'var(--color-ak-on-tertiary)',
|
|
157
|
+
'ak-tertiary-container': 'var(--color-ak-tertiary-container, var(--color-ak-info-subtle))',
|
|
158
|
+
'ak-on-tertiary-container': 'var(--color-ak-on-tertiary-container, var(--color-ak-info-text))',
|
|
159
|
+
'ak-error': 'var(--color-ak-error, var(--color-ak-danger))',
|
|
160
|
+
'ak-on-error': 'var(--color-ak-on-error)',
|
|
161
|
+
'ak-error-container': 'var(--color-ak-error-container, var(--color-ak-danger-subtle))',
|
|
162
|
+
'ak-on-error-container': 'var(--color-ak-on-error-container, var(--color-ak-danger-text))',
|
|
163
|
+
'ak-inverse-surface': 'var(--color-ak-inverse-surface)',
|
|
164
|
+
'ak-inverse-on-surface': 'var(--color-ak-inverse-on-surface)',
|
|
165
|
+
'ak-scrim': 'var(--color-ak-scrim, var(--color-ak-overlay))',
|
|
166
|
+
|
|
124
167
|
'ak-primary-subtle-hover': 'var(--color-ak-primary-subtle-hover)',
|
|
125
168
|
'ak-overlay': 'var(--color-ak-overlay)',
|
|
126
169
|
|