astralkit 0.5.0 → 0.7.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.
Files changed (29) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/LICENSE +73 -34
  3. package/README.md +31 -1
  4. package/astralkit-theme-v4.css +120 -66
  5. package/astralkit-theme.css +120 -66
  6. package/astralkit-utilities.css +587 -2
  7. package/lib/presets/appearance-presets.d.ts +12 -0
  8. package/lib/presets/appearance-presets.js +102 -0
  9. package/lib/presets/chart-palettes.d.ts +29 -0
  10. package/lib/presets/chart-palettes.js +99 -0
  11. package/lib/presets/dials.d.ts +31 -0
  12. package/lib/presets/dials.js +330 -0
  13. package/lib/presets/font-pairings.d.ts +29 -0
  14. package/lib/presets/font-pairings.js +123 -0
  15. package/lib/presets/fonts.d.ts +16 -0
  16. package/lib/presets/fonts.js +76 -0
  17. package/lib/presets/index.d.ts +7 -0
  18. package/lib/presets/index.js +24 -0
  19. package/lib/presets/materials.d.ts +15 -0
  20. package/lib/presets/materials.js +245 -0
  21. package/lib/presets/theme-palettes.d.ts +90 -0
  22. package/lib/presets/theme-palettes.js +720 -0
  23. package/lib/theme-context.d.ts +17 -0
  24. package/lib/theme-context.js +33 -0
  25. package/package.json +9 -3
  26. package/palettes.css +961 -90
  27. package/primitives/animations.css +43 -1
  28. package/primitives/effects.css +373 -115
  29. package/tailwind.cjs +11 -3
package/palettes.css CHANGED
@@ -1,74 +1,79 @@
1
- /* ══════════════════════════════════════════════════════════
2
- AstralKit Preset Theme Palettes
3
-
4
- Usage: Add data-ak-theme="palette-name" to <html> or any container.
5
- Example: <html data-ak-theme="ocean-blue">
6
-
7
- Each palette overrides the 11 core semantic color variables.
8
- All 90+ component tokens derive from these automatically.
9
-
10
- Palettes follow the 60-30-10 rule:
11
- - 60% bg/surface (dominant canvas)
12
- - 30% borders/secondary text/cards
13
- - 10% primary accent (CTAs, links, focus rings)
14
- ══════════════════════════════════════════════════════════ */
15
-
16
- /* ══════════════════════════════════════════════════════════
17
- DECORATIVE GLOW RECIPES (black & white by default)
18
-
19
- Used on dark banner panels (bg-[#0a0a0a]) to add soft ambient
20
- depth without introducing color. These are tokenless gradients
21
- because CSS variables can't be used inside url()/gradient()
22
- strings inline in React style props reliably.
23
-
24
- Canonical white-glow pattern used by Relay, Thrust, Vector,
25
- Beacon, Bastion, Tessera banners. Apply via inline style:
26
-
27
- — Top-right primary glow (stronger):
28
- background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 65%);
29
- className: absolute -top-40 -right-32 w-[44rem] h-[44rem] rounded-full opacity-50 blur-3xl
30
-
31
- — Bottom-left secondary glow (softer):
32
- background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 65%);
33
- className: absolute -bottom-40 -left-32 w-[36rem] h-[36rem] rounded-full opacity-40 blur-3xl
34
-
35
- — Middle accent (optional, subtle):
36
- background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
37
- className: absolute top-1/3 -right-20 w-[24rem] h-[24rem] rounded-full opacity-25 blur-3xl
38
-
39
- For dark-mode dot-grid textures:
40
- backgroundImage: radial-gradient(#ffffff 1px, transparent 1px);
41
- backgroundSize: 28px 28px or 32px 32px;
42
- className: absolute inset-0 opacity-10
43
-
44
- For light-mode dot-grid textures (on bg-ak-surface / bg-ak-bg):
45
- backgroundImage: radial-gradient(#000000 1px, transparent 1px);
46
- backgroundSize: 24px 24px;
47
- className: absolute inset-0 opacity-[0.05] or opacity-[0.06]
48
-
49
- For light-mode neutral glows (on bg-ak-surface):
50
- Top-right: radial-gradient(circle, #000 0%, transparent 65%) at opacity-[0.05]
51
- Bottom-left: radial-gradient(circle, #000 0%, transparent 65%) at opacity-[0.035]
52
-
53
- DO NOT introduce hue-tinted glows (orange, sky, teal, etc) in
54
- Ready screens. If a palette needs warmth, define it as a preset
55
- below and let the theme system propagate. Decorative glows on
56
- dark banners stay white-alpha; decorative glows on light surfaces
57
- stay black-alpha.
58
- ══════════════════════════════════════════════════════════ */
59
-
1
+ /* ══════════════════════════════════════════════════════════
2
+ AstralKit Preset Theme Palettes
3
+
4
+ Usage: Add data-ak-theme="palette-name" to <html> or any container.
5
+ Example: <html data-ak-theme="ocean-blue">
6
+
7
+ Each palette overrides the 11 core semantic color variables.
8
+ All 90+ component tokens derive from these automatically.
9
+
10
+ Palettes follow the 60-30-10 rule:
11
+ - 60% bg/surface (dominant canvas)
12
+ - 30% borders/secondary text/cards
13
+ - 10% primary accent (CTAs, links, focus rings)
14
+ ══════════════════════════════════════════════════════════ */
15
+
16
+ /* ══════════════════════════════════════════════════════════
17
+ DECORATIVE GLOW RECIPES (black & white by default)
18
+
19
+ Used on dark banner panels (bg-[#0a0a0a]) to add soft ambient
20
+ depth without introducing color. These are tokenless gradients
21
+ because CSS variables can't be used inside url()/gradient()
22
+ strings inline in React style props reliably.
23
+
24
+ Canonical white-glow pattern used by Relay, Thrust, Vector,
25
+ Beacon, Bastion, Tessera banners. Apply via inline style:
26
+
27
+ — Top-right primary glow (stronger):
28
+ background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 65%);
29
+ className: absolute -top-40 -right-32 w-[44rem] h-[44rem] rounded-full opacity-50 blur-3xl
30
+
31
+ — Bottom-left secondary glow (softer):
32
+ background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 65%);
33
+ className: absolute -bottom-40 -left-32 w-[36rem] h-[36rem] rounded-full opacity-40 blur-3xl
34
+
35
+ — Middle accent (optional, subtle):
36
+ background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
37
+ className: absolute top-1/3 -right-20 w-[24rem] h-[24rem] rounded-full opacity-25 blur-3xl
38
+
39
+ For dark-mode dot-grid textures:
40
+ backgroundImage: radial-gradient(#ffffff 1px, transparent 1px);
41
+ backgroundSize: 28px 28px or 32px 32px;
42
+ className: absolute inset-0 opacity-10
43
+
44
+ For light-mode dot-grid textures (on bg-ak-surface / bg-ak-bg):
45
+ backgroundImage: radial-gradient(#000000 1px, transparent 1px);
46
+ backgroundSize: 24px 24px;
47
+ className: absolute inset-0 opacity-[0.05] or opacity-[0.06]
48
+
49
+ For light-mode neutral glows (on bg-ak-surface):
50
+ Top-right: radial-gradient(circle, #000 0%, transparent 65%) at opacity-[0.05]
51
+ Bottom-left: radial-gradient(circle, #000 0%, transparent 65%) at opacity-[0.035]
52
+
53
+ DO NOT introduce hue-tinted glows (orange, sky, teal, etc) in
54
+ Ready screens. If a palette needs warmth, define it as a preset
55
+ below and let the theme system propagate. Decorative glows on
56
+ dark banners stay white-alpha; decorative glows on light surfaces
57
+ stay black-alpha.
58
+ ══════════════════════════════════════════════════════════ */
59
+
60
60
  /* ─── Light Palettes ─── */
61
61
 
62
62
  /* ============================================================
63
63
  GENERATED from theme-palettes.ts (paletteToAkVariables).
64
- Curated set: 9 light + 3 dark. Do not hand-edit — regenerate.
64
+ Curated set: 9 light + 7 dark. Do not hand-edit — regenerate.
65
65
  ============================================================ */
66
66
 
67
- /* AstralKit — The default AstralKit violet theme (light) */
67
+ /* AstralKit - The default AstralKit violet theme (light) */
68
68
  [data-ak-theme="astral-default"] {
69
- --color-ak-accent: #A585FF;
69
+ --color-ak-accent: #3523BD;
70
70
  --color-ak-on-accent: #FFFFFF;
71
- --color-ak-accent-soft: #efe9ff;
71
+ --color-ak-accent-soft: #dbd7f3;
72
+ --color-ak-gradient-start: #A585FF;
73
+ --color-ak-gradient-mid: #6933FF;
74
+ --color-ak-gradient-end: #3523BD;
75
+ --gradient-ak-primary: linear-gradient(135deg, #A585FF 0%, #6933FF 52%, #3523BD 100%);
76
+ --gradient-ak-primary-hover: linear-gradient(135deg, #C4B5FD 0%, #875CFF 48%, #2C1CB3 100%);
72
77
  --color-ak-primary-50: #f3efff;
73
78
  --color-ak-primary-100: #e7deff;
74
79
  --color-ak-primary-200: #cfbeff;
@@ -86,12 +91,19 @@
86
91
  --color-ak-text-disabled: #b8b4bf;
87
92
  --color-ak-text-link: #6933FF;
88
93
  --color-ak-text-inverse: #FFFFFF;
94
+ --color-ak-on-surface: #150A35;
95
+ --color-ak-on-surface-variant: #544D6B;
89
96
  --color-ak-text-placeholder: #9692a3;
90
97
  --color-ak-bg: #FFFFFF;
91
98
  --color-ak-surface: #FAF9F7;
92
99
  --color-ak-surface-2: #F4F2F9;
93
100
  --color-ak-surface-3: #eae8e9;
94
101
  --color-ak-surface-4: #e2e0e3;
102
+ --color-ak-surface-container-lowest: #FFFFFF;
103
+ --color-ak-surface-container-low: #FAF9F7;
104
+ --color-ak-surface-container: #F4F2F9;
105
+ --color-ak-surface-container-high: #eae8e9;
106
+ --color-ak-surface-container-highest: #e2e0e3;
95
107
  --color-ak-surface-raised-soft: #f5f4f3;
96
108
  --color-ak-hover: #f3f3f5;
97
109
  --color-ak-active: #ecebef;
@@ -101,6 +113,8 @@
101
113
  --color-ak-border: #E6E3EE;
102
114
  --color-ak-border-subtle: #f0eef3;
103
115
  --color-ak-border-strong: #bcb8c9;
116
+ --color-ak-outline: #bcb8c9;
117
+ --color-ak-outline-variant: #f0eef3;
104
118
  --color-ak-border-focus: #A585FF;
105
119
  --color-ak-neutral-50: #f5f4f3;
106
120
  --color-ak-neutral-100: #f1efef;
@@ -118,6 +132,18 @@
118
132
  --color-ak-primary-active: #5429cc;
119
133
  --color-ak-on-primary: #FFFFFF;
120
134
  --color-ak-primary-subtle: #ede7ff;
135
+ --color-ak-primary-container: #ede7ff;
136
+ --color-ak-on-primary-container: #150A35;
137
+ --color-ak-selection-ink: #6933FF;
138
+ --color-ak-primary-container-emphasis: #6933FF;
139
+ --color-ak-secondary: #7C3AED;
140
+ --color-ak-on-secondary: #FFFFFF;
141
+ --color-ak-secondary-container: #e7dcfc;
142
+ --color-ak-on-secondary-container: #150A35;
143
+ --color-ak-tertiary: #3523BD;
144
+ --color-ak-on-tertiary: #FFFFFF;
145
+ --color-ak-tertiary-container: #dbd7f3;
146
+ --color-ak-on-tertiary-container: #150A35;
121
147
  --color-ak-success: #22C55E;
122
148
  --color-ak-success-subtle: #e4f8ec;
123
149
  --color-ak-success-text: #1b9e4b;
@@ -128,6 +154,9 @@
128
154
  --color-ak-on-error: #FFFFFF;
129
155
  --color-ak-danger-subtle: #fbe5e5;
130
156
  --color-ak-danger-text: #b01e1e;
157
+ --color-ak-error: #DC2626;
158
+ --color-ak-error-container: #fbe5e5;
159
+ --color-ak-on-error-container: #150A35;
131
160
  --color-ak-info: #3B82F6;
132
161
  --color-ak-info-subtle: #e7f0fe;
133
162
  --color-ak-info-text: #2f68c5;
@@ -156,11 +185,16 @@
156
185
  --color-ak-status-deprecated-border: #fac7c7;
157
186
  }
158
187
 
159
- /* Warm Earth — Teal primary with coral-red highlights — Happy Hues #8 (light) */
188
+ /* Warm Earth - Teal primary with coral-red highlights — Happy Hues #8 (light) */
160
189
  [data-ak-theme="warm-earth"] {
161
190
  --color-ak-accent: #F45D48;
162
191
  --color-ak-on-accent: #FFFFFF;
163
192
  --color-ak-accent-soft: #fde2de;
193
+ --color-ak-gradient-start: #56a9a9;
194
+ --color-ak-gradient-mid: #078080;
195
+ --color-ak-gradient-end: #055f5f;
196
+ --gradient-ak-primary: linear-gradient(135deg, #56a9a9 0%, #078080 52%, #055f5f 100%);
197
+ --gradient-ak-primary-hover: linear-gradient(135deg, #6fb5b5 0%, #258f8f 48%, #055454 100%);
164
198
  --color-ak-primary-50: #ebf5f5;
165
199
  --color-ak-primary-100: #d7ebeb;
166
200
  --color-ak-primary-200: #b0d6d6;
@@ -178,12 +212,19 @@
178
212
  --color-ak-text-disabled: #a2a2a0;
179
213
  --color-ak-text-link: #078080;
180
214
  --color-ak-text-inverse: #FFFFFF;
215
+ --color-ak-on-surface: #232323;
216
+ --color-ak-on-surface-variant: #222525;
181
217
  --color-ak-text-placeholder: #787877;
182
218
  --color-ak-bg: #FFFFFF;
183
219
  --color-ak-surface: #F8F5F2;
184
220
  --color-ak-surface-2: #FEEFE8;
185
221
  --color-ak-surface-3: #e9e6e4;
186
222
  --color-ak-surface-4: #e2dfdc;
223
+ --color-ak-surface-container-lowest: #FFFFFF;
224
+ --color-ak-surface-container-low: #F8F5F2;
225
+ --color-ak-surface-container: #FEEFE8;
226
+ --color-ak-surface-container-high: #e9e6e4;
227
+ --color-ak-surface-container-highest: #e2dfdc;
187
228
  --color-ak-surface-raised-soft: #f4f1ee;
188
229
  --color-ak-hover: #f4f4f4;
189
230
  --color-ak-active: #ededed;
@@ -193,6 +234,8 @@
193
234
  --color-ak-border: #E8E2DB;
194
235
  --color-ak-border-subtle: #f0ece7;
195
236
  --color-ak-border-strong: #c1bcb6;
237
+ --color-ak-outline: #c1bcb6;
238
+ --color-ak-outline-variant: #f0ece7;
196
239
  --color-ak-border-focus: #F45D48;
197
240
  --color-ak-neutral-50: #f4f1ee;
198
241
  --color-ak-neutral-100: #efedea;
@@ -210,6 +253,18 @@
210
253
  --color-ak-primary-active: #066666;
211
254
  --color-ak-on-primary: #FFFFFF;
212
255
  --color-ak-primary-subtle: #e1f0f0;
256
+ --color-ak-primary-container: #e1f0f0;
257
+ --color-ak-on-primary-container: #232323;
258
+ --color-ak-selection-ink: #232323;
259
+ --color-ak-primary-container-emphasis: #232323;
260
+ --color-ak-secondary: #F45D48;
261
+ --color-ak-on-secondary: #FFFFFF;
262
+ --color-ak-secondary-container: #fde2de;
263
+ --color-ak-on-secondary-container: #232323;
264
+ --color-ak-tertiary: #F45D48;
265
+ --color-ak-on-tertiary: #FFFFFF;
266
+ --color-ak-tertiary-container: #fde2de;
267
+ --color-ak-on-tertiary-container: #232323;
213
268
  --color-ak-success: #22C55E;
214
269
  --color-ak-success-subtle: #e4f8ec;
215
270
  --color-ak-success-text: #1b9e4b;
@@ -220,6 +275,9 @@
220
275
  --color-ak-on-error: #FFFFFF;
221
276
  --color-ak-danger-subtle: #feece9;
222
277
  --color-ak-danger-text: #c34a3a;
278
+ --color-ak-error: #F45D48;
279
+ --color-ak-error-container: #feece9;
280
+ --color-ak-on-error-container: #232323;
223
281
  --color-ak-info: #3B82F6;
224
282
  --color-ak-info-subtle: #e7f0fe;
225
283
  --color-ak-info-text: #2f68c5;
@@ -248,11 +306,16 @@
248
306
  --color-ak-status-deprecated-border: #fac7c7;
249
307
  }
250
308
 
251
- /* Slate Pro — Professional gray with blue accent (light) */
309
+ /* Slate Pro - Professional gray with blue accent (light) */
252
310
  [data-ak-theme="slate-pro"] {
253
311
  --color-ak-accent: #7C3AED;
254
312
  --color-ak-on-accent: #FFFFFF;
255
313
  --color-ak-accent-soft: #e7dcfc;
314
+ --color-ak-gradient-start: #6b95f1;
315
+ --color-ak-gradient-mid: #2563EB;
316
+ --color-ak-gradient-end: #1b49ae;
317
+ --gradient-ak-primary: linear-gradient(135deg, #6b95f1 0%, #2563EB 52%, #1b49ae 100%);
318
+ --gradient-ak-primary-hover: linear-gradient(135deg, #81a5f3 0%, #3f76ed 48%, #18419b 100%);
256
319
  --color-ak-primary-50: #eef3fd;
257
320
  --color-ak-primary-100: #dce6fc;
258
321
  --color-ak-primary-200: #b9cdf9;
@@ -270,12 +333,19 @@
270
333
  --color-ak-text-disabled: #bdc4cf;
271
334
  --color-ak-text-link: #2563EB;
272
335
  --color-ak-text-inverse: #FFFFFF;
336
+ --color-ak-on-surface: #0F172A;
337
+ --color-ak-on-surface-variant: #64748B;
273
338
  --color-ak-text-placeholder: #9faab8;
274
339
  --color-ak-bg: #FFFFFF;
275
340
  --color-ak-surface: #F8FAFC;
276
341
  --color-ak-surface-2: #F1F5F9;
277
342
  --color-ak-surface-3: #e8eaed;
278
343
  --color-ak-surface-4: #e0e2e6;
344
+ --color-ak-surface-container-lowest: #FFFFFF;
345
+ --color-ak-surface-container-low: #F8FAFC;
346
+ --color-ak-surface-container: #F1F5F9;
347
+ --color-ak-surface-container-high: #e8eaed;
348
+ --color-ak-surface-container-highest: #e0e2e6;
279
349
  --color-ak-surface-raised-soft: #f3f5f8;
280
350
  --color-ak-hover: #f3f3f4;
281
351
  --color-ak-active: #ececee;
@@ -285,6 +355,8 @@
285
355
  --color-ak-border: #E2E8F0;
286
356
  --color-ak-border-subtle: #edf1f6;
287
357
  --color-ak-border-strong: #b8bec8;
358
+ --color-ak-outline: #b8bec8;
359
+ --color-ak-outline-variant: #edf1f6;
288
360
  --color-ak-border-focus: #7C3AED;
289
361
  --color-ak-neutral-50: #f3f5f8;
290
362
  --color-ak-neutral-100: #eff1f4;
@@ -302,6 +374,18 @@
302
374
  --color-ak-primary-active: #1e4fbc;
303
375
  --color-ak-on-primary: #FFFFFF;
304
376
  --color-ak-primary-subtle: #e5ecfd;
377
+ --color-ak-primary-container: #e5ecfd;
378
+ --color-ak-on-primary-container: #0F172A;
379
+ --color-ak-selection-ink: #0F172A;
380
+ --color-ak-primary-container-emphasis: #0F172A;
381
+ --color-ak-secondary: #E2E8F0;
382
+ --color-ak-on-secondary: #0F172A;
383
+ --color-ak-secondary-container: #fafbfc;
384
+ --color-ak-on-secondary-container: #0F172A;
385
+ --color-ak-tertiary: #7C3AED;
386
+ --color-ak-on-tertiary: #FFFFFF;
387
+ --color-ak-tertiary-container: #e7dcfc;
388
+ --color-ak-on-tertiary-container: #0F172A;
305
389
  --color-ak-success: #22C55E;
306
390
  --color-ak-success-subtle: #e4f8ec;
307
391
  --color-ak-success-text: #1b9e4b;
@@ -312,6 +396,9 @@
312
396
  --color-ak-on-error: #FFFFFF;
313
397
  --color-ak-danger-subtle: #fbe5e5;
314
398
  --color-ak-danger-text: #b01e1e;
399
+ --color-ak-error: #DC2626;
400
+ --color-ak-error-container: #fbe5e5;
401
+ --color-ak-on-error-container: #0F172A;
315
402
  --color-ak-info: #3B82F6;
316
403
  --color-ak-info-subtle: #e7f0fe;
317
404
  --color-ak-info-text: #2f68c5;
@@ -340,11 +427,16 @@
340
427
  --color-ak-status-deprecated-border: #fac7c7;
341
428
  }
342
429
 
343
- /* Indigo Craft — Warm neutral with indigo primary (light) */
430
+ /* Indigo Craft - Warm neutral with indigo primary (light) */
344
431
  [data-ak-theme="indigo-craft"] {
345
432
  --color-ak-accent: #EC4899;
346
433
  --color-ak-on-accent: #FFFFFF;
347
434
  --color-ak-accent-soft: #fcdeed;
435
+ --color-ak-gradient-start: #8781ed;
436
+ --color-ak-gradient-mid: #4F46E5;
437
+ --color-ak-gradient-end: #3a34a9;
438
+ --gradient-ak-primary: linear-gradient(135deg, #8781ed 0%, #4F46E5 52%, #3a34a9 100%);
439
+ --gradient-ak-primary-hover: linear-gradient(135deg, #9994f0 0%, #645ce8 48%, #342e97 100%);
348
440
  --color-ak-primary-50: #f1f0fd;
349
441
  --color-ak-primary-100: #e3e1fb;
350
442
  --color-ak-primary-200: #c7c4f7;
@@ -362,12 +454,19 @@
362
454
  --color-ak-text-disabled: #c6c3c1;
363
455
  --color-ak-text-link: #4F46E5;
364
456
  --color-ak-text-inverse: #FFFFFF;
457
+ --color-ak-on-surface: #1C1917;
458
+ --color-ak-on-surface-variant: #78716C;
365
459
  --color-ak-text-placeholder: #aca8a4;
366
460
  --color-ak-bg: #FFFFFF;
367
461
  --color-ak-surface: #FAFAF9;
368
462
  --color-ak-surface-2: #F5F5F4;
369
463
  --color-ak-surface-3: #eaeae9;
370
464
  --color-ak-surface-4: #e3e2e1;
465
+ --color-ak-surface-container-lowest: #FFFFFF;
466
+ --color-ak-surface-container-low: #FAFAF9;
467
+ --color-ak-surface-container: #F5F5F4;
468
+ --color-ak-surface-container-high: #eaeae9;
469
+ --color-ak-surface-container-highest: #e3e2e1;
371
470
  --color-ak-surface-raised-soft: #f6f6f4;
372
471
  --color-ak-hover: #f4f4f3;
373
472
  --color-ak-active: #ededec;
@@ -377,6 +476,8 @@
377
476
  --color-ak-border: #E7E5E4;
378
477
  --color-ak-border-subtle: #f1f0ef;
379
478
  --color-ak-border-strong: #bebcbb;
479
+ --color-ak-outline: #bebcbb;
480
+ --color-ak-outline-variant: #f1f0ef;
380
481
  --color-ak-border-focus: #EC4899;
381
482
  --color-ak-neutral-50: #f6f6f4;
382
483
  --color-ak-neutral-100: #f1f1f0;
@@ -394,6 +495,18 @@
394
495
  --color-ak-primary-active: #3f38b7;
395
496
  --color-ak-on-primary: #FFFFFF;
396
497
  --color-ak-primary-subtle: #eae9fc;
498
+ --color-ak-primary-container: #eae9fc;
499
+ --color-ak-on-primary-container: #1C1917;
500
+ --color-ak-selection-ink: #4F46E5;
501
+ --color-ak-primary-container-emphasis: #4F46E5;
502
+ --color-ak-secondary: #EEF2FF;
503
+ --color-ak-on-secondary: #1C1917;
504
+ --color-ak-secondary-container: #fcfdff;
505
+ --color-ak-on-secondary-container: #1C1917;
506
+ --color-ak-tertiary: #EC4899;
507
+ --color-ak-on-tertiary: #FFFFFF;
508
+ --color-ak-tertiary-container: #fcdeed;
509
+ --color-ak-on-tertiary-container: #1C1917;
397
510
  --color-ak-success: #22C55E;
398
511
  --color-ak-success-subtle: #e4f8ec;
399
512
  --color-ak-success-text: #1b9e4b;
@@ -404,6 +517,9 @@
404
517
  --color-ak-on-error: #FFFFFF;
405
518
  --color-ak-danger-subtle: #fbe5e5;
406
519
  --color-ak-danger-text: #b01e1e;
520
+ --color-ak-error: #DC2626;
521
+ --color-ak-error-container: #fbe5e5;
522
+ --color-ak-on-error-container: #1C1917;
407
523
  --color-ak-info: #3B82F6;
408
524
  --color-ak-info-subtle: #e7f0fe;
409
525
  --color-ak-info-text: #2f68c5;
@@ -432,11 +548,16 @@
432
548
  --color-ak-status-deprecated-border: #fac7c7;
433
549
  }
434
550
 
435
- /* MedTrackr Green — Clean white with emerald primary and mint washes — healthcare CRM (light) */
551
+ /* MedTrackr Green - Clean white with emerald primary and mint washes — healthcare CRM (light) */
436
552
  [data-ak-theme="medtrackr"] {
437
553
  --color-ak-accent: #0FA47A;
438
554
  --color-ak-on-accent: #FFFFFF;
439
555
  --color-ak-accent-soft: #d4efe7;
556
+ --color-ak-gradient-start: #5cc1a5;
557
+ --color-ak-gradient-mid: #0FA47A;
558
+ --color-ak-gradient-end: #0b795a;
559
+ --gradient-ak-primary: linear-gradient(135deg, #5cc1a5 0%, #0FA47A 52%, #0b795a 100%);
560
+ --gradient-ak-primary-hover: linear-gradient(135deg, #74cab2 0%, #2caf8a 48%, #0a6c51 100%);
440
561
  --color-ak-primary-50: #ecf8f4;
441
562
  --color-ak-primary-100: #d9f0ea;
442
563
  --color-ak-primary-200: #b2e2d4;
@@ -454,12 +575,19 @@
454
575
  --color-ak-text-disabled: #b9bebc;
455
576
  --color-ak-text-link: #0FA47A;
456
577
  --color-ak-text-inverse: #FFFFFF;
578
+ --color-ak-on-surface: #17211D;
579
+ --color-ak-on-surface-variant: #5B6661;
457
580
  --color-ak-text-placeholder: #99a19d;
458
581
  --color-ak-bg: #FFFFFF;
459
582
  --color-ak-surface: #F7F9F8;
460
583
  --color-ak-surface-2: #ECF2EF;
461
584
  --color-ak-surface-3: #e7eae9;
462
585
  --color-ak-surface-4: #dfe2e1;
586
+ --color-ak-surface-container-lowest: #FFFFFF;
587
+ --color-ak-surface-container-low: #F7F9F8;
588
+ --color-ak-surface-container: #ECF2EF;
589
+ --color-ak-surface-container-high: #e7eae9;
590
+ --color-ak-surface-container-highest: #dfe2e1;
463
591
  --color-ak-surface-raised-soft: #f3f5f4;
464
592
  --color-ak-hover: #f3f4f4;
465
593
  --color-ak-active: #eceded;
@@ -469,6 +597,8 @@
469
597
  --color-ak-border: #E2E8E5;
470
598
  --color-ak-border-subtle: #edf1ef;
471
599
  --color-ak-border-strong: #b9c0bd;
600
+ --color-ak-outline: #b9c0bd;
601
+ --color-ak-outline-variant: #edf1ef;
472
602
  --color-ak-border-focus: #0FA47A;
473
603
  --color-ak-neutral-50: #f3f5f4;
474
604
  --color-ak-neutral-100: #eef0ef;
@@ -486,6 +616,18 @@
486
616
  --color-ak-primary-active: #0c8362;
487
617
  --color-ak-on-primary: #FFFFFF;
488
618
  --color-ak-primary-subtle: #e2f4ef;
619
+ --color-ak-primary-container: #e2f4ef;
620
+ --color-ak-on-primary-container: #17211D;
621
+ --color-ak-selection-ink: #17211D;
622
+ --color-ak-primary-container-emphasis: #17211D;
623
+ --color-ak-secondary: #0FA47A;
624
+ --color-ak-on-secondary: #FFFFFF;
625
+ --color-ak-secondary-container: #d4efe7;
626
+ --color-ak-on-secondary-container: #17211D;
627
+ --color-ak-tertiary: #0FA47A;
628
+ --color-ak-on-tertiary: #FFFFFF;
629
+ --color-ak-tertiary-container: #d4efe7;
630
+ --color-ak-on-tertiary-container: #17211D;
489
631
  --color-ak-success: #22C55E;
490
632
  --color-ak-success-subtle: #e4f8ec;
491
633
  --color-ak-success-text: #1b9e4b;
@@ -496,6 +638,9 @@
496
638
  --color-ak-on-error: #FFFFFF;
497
639
  --color-ak-danger-subtle: #fce9ea;
498
640
  --color-ak-danger-text: #b73a3e;
641
+ --color-ak-error: #E5484D;
642
+ --color-ak-error-container: #fce9ea;
643
+ --color-ak-on-error-container: #17211D;
499
644
  --color-ak-info: #3B82F6;
500
645
  --color-ak-info-subtle: #e7f0fe;
501
646
  --color-ak-info-text: #2f68c5;
@@ -524,11 +669,16 @@
524
669
  --color-ak-status-deprecated-border: #fac7c7;
525
670
  }
526
671
 
527
- /* Periwinkle — Lavender-white canvas with vivid periwinkle — fitness SaaS (light) */
672
+ /* Periwinkle - Lavender-white canvas with vivid periwinkle — fitness SaaS (light) */
528
673
  [data-ak-theme="periwinkle"] {
529
674
  --color-ak-accent: #6F5CF1;
530
675
  --color-ak-on-accent: #FFFFFF;
531
676
  --color-ak-accent-soft: #e5e2fc;
677
+ --color-ak-gradient-start: #9d90f5;
678
+ --color-ak-gradient-mid: #6F5CF1;
679
+ --color-ak-gradient-end: #5244b2;
680
+ --gradient-ak-primary: linear-gradient(135deg, #9d90f5 0%, #6F5CF1 52%, #5244b2 100%);
681
+ --gradient-ak-primary-hover: linear-gradient(135deg, #aba0f7 0%, #8070f3 48%, #493d9f 100%);
532
682
  --color-ak-primary-50: #f3f2fe;
533
683
  --color-ak-primary-100: #e8e5fd;
534
684
  --color-ak-primary-200: #d1cbfb;
@@ -546,12 +696,19 @@
546
696
  --color-ak-text-disabled: #b6b5c5;
547
697
  --color-ak-text-link: #6F5CF1;
548
698
  --color-ak-text-inverse: #FFFFFF;
699
+ --color-ak-on-surface: #1B1A2E;
700
+ --color-ak-on-surface-variant: #5A5874;
549
701
  --color-ak-text-placeholder: #9896aa;
550
702
  --color-ak-bg: #FFFFFF;
551
703
  --color-ak-surface: #F4F3FB;
552
704
  --color-ak-surface-2: #ECEAF8;
553
705
  --color-ak-surface-3: #e5e4ed;
554
706
  --color-ak-surface-4: #dddce5;
707
+ --color-ak-surface-container-lowest: #FFFFFF;
708
+ --color-ak-surface-container-low: #F4F3FB;
709
+ --color-ak-surface-container: #ECEAF8;
710
+ --color-ak-surface-container-high: #e5e4ed;
711
+ --color-ak-surface-container-highest: #dddce5;
555
712
  --color-ak-surface-raised-soft: #f0eff7;
556
713
  --color-ak-hover: #f4f4f5;
557
714
  --color-ak-active: #ededee;
@@ -561,6 +718,8 @@
561
718
  --color-ak-border: #E4E2F0;
562
719
  --color-ak-border-subtle: #ecebf6;
563
720
  --color-ak-border-strong: #bcbac9;
721
+ --color-ak-outline: #bcbac9;
722
+ --color-ak-outline-variant: #ecebf6;
564
723
  --color-ak-border-focus: #6F5CF1;
565
724
  --color-ak-neutral-50: #f0eff7;
566
725
  --color-ak-neutral-100: #ebeaf3;
@@ -578,6 +737,18 @@
578
737
  --color-ak-primary-active: #594ac1;
579
738
  --color-ak-on-primary: #FFFFFF;
580
739
  --color-ak-primary-subtle: #eeebfd;
740
+ --color-ak-primary-container: #eeebfd;
741
+ --color-ak-on-primary-container: #1B1A2E;
742
+ --color-ak-selection-ink: #1B1A2E;
743
+ --color-ak-primary-container-emphasis: #1B1A2E;
744
+ --color-ak-secondary: #6F5CF1;
745
+ --color-ak-on-secondary: #FFFFFF;
746
+ --color-ak-secondary-container: #e5e2fc;
747
+ --color-ak-on-secondary-container: #1B1A2E;
748
+ --color-ak-tertiary: #6F5CF1;
749
+ --color-ak-on-tertiary: #FFFFFF;
750
+ --color-ak-tertiary-container: #e5e2fc;
751
+ --color-ak-on-tertiary-container: #1B1A2E;
581
752
  --color-ak-success: #22C55E;
582
753
  --color-ak-success-subtle: #e4f8ec;
583
754
  --color-ak-success-text: #1b9e4b;
@@ -588,6 +759,9 @@
588
759
  --color-ak-on-error: #FFFFFF;
589
760
  --color-ak-danger-subtle: #fce9ea;
590
761
  --color-ak-danger-text: #b73a3e;
762
+ --color-ak-error: #E5484D;
763
+ --color-ak-error-container: #fce9ea;
764
+ --color-ak-on-error-container: #1B1A2E;
591
765
  --color-ak-info: #3B82F6;
592
766
  --color-ak-info-subtle: #e7f0fe;
593
767
  --color-ak-info-text: #2f68c5;
@@ -616,11 +790,16 @@
616
790
  --color-ak-status-deprecated-border: #fac7c7;
617
791
  }
618
792
 
619
- /* Scout Cyan — Crisp white with deep sky-cyan — referral dashboard (light) */
793
+ /* Scout Cyan - Crisp white with deep sky-cyan — referral dashboard (light) */
620
794
  [data-ak-theme="scout-cyan"] {
621
795
  --color-ak-accent: #0E96C4;
622
796
  --color-ak-on-accent: #FFFFFF;
623
797
  --color-ak-accent-soft: #d4ecf4;
798
+ --color-ak-gradient-start: #5bb8d7;
799
+ --color-ak-gradient-mid: #0E96C4;
800
+ --color-ak-gradient-end: #0a6f91;
801
+ --gradient-ak-primary: linear-gradient(135deg, #5bb8d7 0%, #0E96C4 52%, #0a6f91 100%);
802
+ --gradient-ak-primary-hover: linear-gradient(135deg, #73c2dd 0%, #2ba3cb 48%, #096381 100%);
624
803
  --color-ak-primary-50: #ecf7fa;
625
804
  --color-ak-primary-100: #d8eef6;
626
805
  --color-ak-primary-200: #b2ddec;
@@ -638,12 +817,19 @@
638
817
  --color-ak-text-disabled: #b7c3c7;
639
818
  --color-ak-text-link: #0E96C4;
640
819
  --color-ak-text-inverse: #FFFFFF;
820
+ --color-ak-on-surface: #14262D;
821
+ --color-ak-on-surface-variant: #587077;
641
822
  --color-ak-text-placeholder: #97a7ac;
642
823
  --color-ak-bg: #FFFFFF;
643
824
  --color-ak-surface: #F6FAFC;
644
825
  --color-ak-surface-2: #EAF3F7;
645
826
  --color-ak-surface-3: #e6ebee;
646
827
  --color-ak-surface-4: #dee4e6;
828
+ --color-ak-surface-container-lowest: #FFFFFF;
829
+ --color-ak-surface-container-low: #F6FAFC;
830
+ --color-ak-surface-container: #EAF3F7;
831
+ --color-ak-surface-container-high: #e6ebee;
832
+ --color-ak-surface-container-highest: #dee4e6;
647
833
  --color-ak-surface-raised-soft: #f1f6f8;
648
834
  --color-ak-hover: #f3f4f5;
649
835
  --color-ak-active: #eceeee;
@@ -653,6 +839,8 @@
653
839
  --color-ak-border: #DEE9EE;
654
840
  --color-ak-border-subtle: #eaf2f5;
655
841
  --color-ak-border-strong: #b6c2c7;
842
+ --color-ak-outline: #b6c2c7;
843
+ --color-ak-outline-variant: #eaf2f5;
656
844
  --color-ak-border-focus: #0E96C4;
657
845
  --color-ak-neutral-50: #f1f6f8;
658
846
  --color-ak-neutral-100: #edf2f4;
@@ -670,6 +858,18 @@
670
858
  --color-ak-primary-active: #0b789d;
671
859
  --color-ak-on-primary: #FFFFFF;
672
860
  --color-ak-primary-subtle: #e2f2f8;
861
+ --color-ak-primary-container: #e2f2f8;
862
+ --color-ak-on-primary-container: #14262D;
863
+ --color-ak-selection-ink: #14262D;
864
+ --color-ak-primary-container-emphasis: #14262D;
865
+ --color-ak-secondary: #0E96C4;
866
+ --color-ak-on-secondary: #FFFFFF;
867
+ --color-ak-secondary-container: #d4ecf4;
868
+ --color-ak-on-secondary-container: #14262D;
869
+ --color-ak-tertiary: #0E96C4;
870
+ --color-ak-on-tertiary: #FFFFFF;
871
+ --color-ak-tertiary-container: #d4ecf4;
872
+ --color-ak-on-tertiary-container: #14262D;
673
873
  --color-ak-success: #22C55E;
674
874
  --color-ak-success-subtle: #e4f8ec;
675
875
  --color-ak-success-text: #1b9e4b;
@@ -680,6 +880,9 @@
680
880
  --color-ak-on-error: #FFFFFF;
681
881
  --color-ak-danger-subtle: #fce9ea;
682
882
  --color-ak-danger-text: #b73a3e;
883
+ --color-ak-error: #E5484D;
884
+ --color-ak-error-container: #fce9ea;
885
+ --color-ak-on-error-container: #14262D;
683
886
  --color-ak-info: #3B82F6;
684
887
  --color-ak-info-subtle: #e7f0fe;
685
888
  --color-ak-info-text: #2f68c5;
@@ -708,11 +911,16 @@
708
911
  --color-ak-status-deprecated-border: #fac7c7;
709
912
  }
710
913
 
711
- /* Pulse — Bone neutrals, ink CTAs, volt-lime selection — fitness app energy (light) */
914
+ /* Pulse - Bone neutrals, ink CTAs, volt-lime selection — fitness app energy (light) */
712
915
  [data-ak-theme="pulse"] {
713
916
  --color-ak-accent: #D7FA4B;
714
917
  --color-ak-on-accent: #0B0B0B;
715
918
  --color-ak-accent-soft: #f8fedf;
919
+ --color-ak-gradient-start: #e4fc85;
920
+ --color-ak-gradient-mid: #D7FA4B;
921
+ --color-ak-gradient-end: #9fb938;
922
+ --gradient-ak-primary: linear-gradient(135deg, #e4fc85 0%, #D7FA4B 52%, #9fb938 100%);
923
+ --gradient-ak-primary-hover: linear-gradient(135deg, #e8fc97 0%, #dcfb61 48%, #8ea532 100%);
716
924
  --color-ak-slider-fill: #0B0B0B;
717
925
  --color-ak-slider-ring: #0B0B0B;
718
926
  --color-ak-primary-50: #fcfff1;
@@ -732,12 +940,19 @@
732
940
  --color-ak-text-disabled: #b4b4af;
733
941
  --color-ak-text-link: #0B0B0B;
734
942
  --color-ak-text-inverse: #FFFFFF;
943
+ --color-ak-on-surface: #0B0B0B;
944
+ --color-ak-on-surface-variant: #55564F;
735
945
  --color-ak-text-placeholder: #94958f;
736
946
  --color-ak-bg: #FFFFFF;
737
947
  --color-ak-surface: #F3F3EF;
738
948
  --color-ak-surface-2: #ECEDE5;
739
949
  --color-ak-surface-3: #e3e3df;
740
950
  --color-ak-surface-4: #dbdbd7;
951
+ --color-ak-surface-container-lowest: #FFFFFF;
952
+ --color-ak-surface-container-low: #F3F3EF;
953
+ --color-ak-surface-container: #ECEDE5;
954
+ --color-ak-surface-container-high: #e3e3df;
955
+ --color-ak-surface-container-highest: #dbdbd7;
741
956
  --color-ak-surface-raised-soft: #eeeeea;
742
957
  --color-ak-hover: #f3f3f3;
743
958
  --color-ak-active: #ebebeb;
@@ -747,6 +962,8 @@
747
962
  --color-ak-border: #E4E4DC;
748
963
  --color-ak-border-subtle: #ecece6;
749
964
  --color-ak-border-strong: #b9b9b2;
965
+ --color-ak-outline: #b9b9b2;
966
+ --color-ak-outline-variant: #ecece6;
750
967
  --color-ak-border-focus: #D7FA4B;
751
968
  --color-ak-neutral-50: #eeeeea;
752
969
  --color-ak-neutral-100: #eaeae6;
@@ -764,6 +981,18 @@
764
981
  --color-ak-primary-active: #acc83c;
765
982
  --color-ak-on-primary: #0B0B0B;
766
983
  --color-ak-primary-subtle: #fafee9;
984
+ --color-ak-primary-container: #fafee9;
985
+ --color-ak-on-primary-container: #0B0B0B;
986
+ --color-ak-selection-ink: #0B0B0B;
987
+ --color-ak-primary-container-emphasis: #0B0B0B;
988
+ --color-ak-secondary: #D7FA4B;
989
+ --color-ak-on-secondary: #0B0B0B;
990
+ --color-ak-secondary-container: #f8fedf;
991
+ --color-ak-on-secondary-container: #0B0B0B;
992
+ --color-ak-tertiary: #D7FA4B;
993
+ --color-ak-on-tertiary: #0B0B0B;
994
+ --color-ak-tertiary-container: #f8fedf;
995
+ --color-ak-on-tertiary-container: #0B0B0B;
767
996
  --color-ak-success: #22C55E;
768
997
  --color-ak-success-subtle: #e4f8ec;
769
998
  --color-ak-success-text: #1b9e4b;
@@ -774,6 +1003,9 @@
774
1003
  --color-ak-on-error: #FFFFFF;
775
1004
  --color-ak-danger-subtle: #fde9e7;
776
1005
  --color-ak-danger-text: #c0362d;
1006
+ --color-ak-error: #F04438;
1007
+ --color-ak-error-container: #fde9e7;
1008
+ --color-ak-on-error-container: #0B0B0B;
777
1009
  --color-ak-info: #3B82F6;
778
1010
  --color-ak-info-subtle: #e7f0fe;
779
1011
  --color-ak-info-text: #2f68c5;
@@ -802,11 +1034,16 @@
802
1034
  --color-ak-status-deprecated-border: #fac7c7;
803
1035
  }
804
1036
 
805
- /* LogoZap — Warm paper with Zap Blue accent — brand design system experiment (light) */
1037
+ /* LogoZap - Warm paper with Zap Blue accent — brand design system experiment (light) */
806
1038
  [data-ak-theme="logozap"] {
807
1039
  --color-ak-accent: #0B4FD9;
808
1040
  --color-ak-on-accent: #FFFFFF;
809
1041
  --color-ak-accent-soft: #d3dff8;
1042
+ --color-ak-gradient-start: #66a5ff;
1043
+ --color-ak-gradient-mid: #1E7BFF;
1044
+ --color-ak-gradient-end: #165bbd;
1045
+ --gradient-ak-primary: linear-gradient(135deg, #66a5ff 0%, #1E7BFF 52%, #165bbd 100%);
1046
+ --gradient-ak-primary-hover: linear-gradient(135deg, #7db2ff 0%, #398bff 48%, #1451a8 100%);
810
1047
  --color-ak-primary-50: #edf4ff;
811
1048
  --color-ak-primary-100: #dbeaff;
812
1049
  --color-ak-primary-200: #b7d5ff;
@@ -824,12 +1061,19 @@
824
1061
  --color-ak-text-disabled: #babab8;
825
1062
  --color-ak-text-link: #1E7BFF;
826
1063
  --color-ak-text-inverse: #FFFFFF;
1064
+ --color-ak-on-surface: #0A0A0A;
1065
+ --color-ak-on-surface-variant: #5A5A5A;
827
1066
  --color-ak-text-placeholder: #9a9a99;
828
1067
  --color-ak-bg: #FFFFFF;
829
1068
  --color-ak-surface: #FAFAF7;
830
1069
  --color-ak-surface-2: #F0EFEA;
831
1070
  --color-ak-surface-3: #e9e9e6;
832
1071
  --color-ak-surface-4: #e1e1de;
1072
+ --color-ak-surface-container-lowest: #FFFFFF;
1073
+ --color-ak-surface-container-low: #FAFAF7;
1074
+ --color-ak-surface-container: #F0EFEA;
1075
+ --color-ak-surface-container-high: #e9e9e6;
1076
+ --color-ak-surface-container-highest: #e1e1de;
833
1077
  --color-ak-surface-raised-soft: #f5f5f2;
834
1078
  --color-ak-hover: #f3f3f3;
835
1079
  --color-ak-active: #ebebeb;
@@ -839,6 +1083,8 @@
839
1083
  --color-ak-border: #E4E2DA;
840
1084
  --color-ak-border-subtle: #efeee9;
841
1085
  --color-ak-border-strong: #b8b7b0;
1086
+ --color-ak-outline: #b8b7b0;
1087
+ --color-ak-outline-variant: #efeee9;
842
1088
  --color-ak-border-focus: #0B4FD9;
843
1089
  --color-ak-neutral-50: #f5f5f2;
844
1090
  --color-ak-neutral-100: #f0f0ee;
@@ -856,6 +1102,18 @@
856
1102
  --color-ak-primary-active: #1862cc;
857
1103
  --color-ak-on-primary: #FFFFFF;
858
1104
  --color-ak-primary-subtle: #e4efff;
1105
+ --color-ak-primary-container: #e4efff;
1106
+ --color-ak-on-primary-container: #0A0A0A;
1107
+ --color-ak-selection-ink: #0A0A0A;
1108
+ --color-ak-primary-container-emphasis: #0A0A0A;
1109
+ --color-ak-secondary: #CFE3FF;
1110
+ --color-ak-on-secondary: #0A0A0A;
1111
+ --color-ak-secondary-container: #f6faff;
1112
+ --color-ak-on-secondary-container: #0A0A0A;
1113
+ --color-ak-tertiary: #0B4FD9;
1114
+ --color-ak-on-tertiary: #FFFFFF;
1115
+ --color-ak-tertiary-container: #d3dff8;
1116
+ --color-ak-on-tertiary-container: #0A0A0A;
859
1117
  --color-ak-success: #22C55E;
860
1118
  --color-ak-success-subtle: #e4f8ec;
861
1119
  --color-ak-success-text: #1b9e4b;
@@ -866,6 +1124,9 @@
866
1124
  --color-ak-on-error: #FFFFFF;
867
1125
  --color-ak-danger-subtle: #fde9e9;
868
1126
  --color-ak-danger-text: #bf3636;
1127
+ --color-ak-error: #EF4444;
1128
+ --color-ak-error-container: #fde9e9;
1129
+ --color-ak-on-error-container: #0A0A0A;
869
1130
  --color-ak-info: #3B82F6;
870
1131
  --color-ak-info-subtle: #e7f0fe;
871
1132
  --color-ak-info-text: #2f68c5;
@@ -894,11 +1155,16 @@
894
1155
  --color-ak-status-deprecated-border: #fac7c7;
895
1156
  }
896
1157
 
897
- /* Volt Noir — True black with volt-lime CTAs — dark sibling of Pulse (dark) */
1158
+ /* Volt Noir - True black with volt-lime CTAs — dark sibling of Pulse (dark) */
898
1159
  [data-ak-theme="volt-noir"] {
899
1160
  --color-ak-accent: #D7F94C;
900
1161
  --color-ak-on-accent: #0A0A0A;
901
- --color-ak-accent-soft: #393f20;
1162
+ --color-ak-accent-soft: #404822;
1163
+ --color-ak-gradient-start: #defa6c;
1164
+ --color-ak-gradient-mid: #D7F94C;
1165
+ --color-ak-gradient-end: #c6e546;
1166
+ --gradient-ak-primary: linear-gradient(135deg, #defa6c 0%, #D7F94C 52%, #c6e546 100%);
1167
+ --gradient-ak-primary-hover: linear-gradient(135deg, #e2fb7e 0%, #daf95a 48%, #d3f44a 100%);
902
1168
  --color-ak-primary-50: #fcfff1;
903
1169
  --color-ak-primary-100: #f9fee2;
904
1170
  --color-ak-primary-200: #f2fdc6;
@@ -916,12 +1182,19 @@
916
1182
  --color-ak-text-disabled: #484846;
917
1183
  --color-ak-text-link: #D7F94C;
918
1184
  --color-ak-text-inverse: #161616;
1185
+ --color-ak-on-surface: #F2F2EF;
1186
+ --color-ak-on-surface-variant: #A6A6A0;
919
1187
  --color-ak-text-placeholder: #686864;
920
1188
  --color-ak-bg: #161616;
921
1189
  --color-ak-surface: #0A0A0A;
922
1190
  --color-ak-surface-2: #1F1F1F;
923
- --color-ak-surface-3: #1a1a1a;
924
- --color-ak-surface-4: #222222;
1191
+ --color-ak-surface-3: #242423;
1192
+ --color-ak-surface-4: #2f2f2f;
1193
+ --color-ak-surface-container-lowest: #161616;
1194
+ --color-ak-surface-container-low: #0A0A0A;
1195
+ --color-ak-surface-container: #1F1F1F;
1196
+ --color-ak-surface-container-high: #242423;
1197
+ --color-ak-surface-container-highest: #2f2f2f;
925
1198
  --color-ak-surface-raised-soft: #0f0f0f;
926
1199
  --color-ak-hover: rgba(255,255,255,0.04);
927
1200
  --color-ak-active: rgba(255,255,255,0.08);
@@ -931,6 +1204,8 @@
931
1204
  --color-ak-border: rgba(255,255,255,0.10);
932
1205
  --color-ak-border-subtle: rgba(255,255,255,0.06);
933
1206
  --color-ak-border-strong: rgba(255,255,255,0.16);
1207
+ --color-ak-outline: rgba(255,255,255,0.16);
1208
+ --color-ak-outline-variant: rgba(255,255,255,0.06);
934
1209
  --color-ak-border-focus: #D7F94C;
935
1210
  --color-ak-neutral-50: #0f0f0f;
936
1211
  --color-ak-neutral-100: #131313;
@@ -947,7 +1222,19 @@
947
1222
  --color-ak-primary-hover: #ddfa67;
948
1223
  --color-ak-primary-active: #e1fb79;
949
1224
  --color-ak-on-primary: #0A0A0A;
950
- --color-ak-primary-subtle: #fafeea;
1225
+ --color-ak-primary-subtle: #444c23;
1226
+ --color-ak-primary-container: #444c23;
1227
+ --color-ak-on-primary-container: #F2F2EF;
1228
+ --color-ak-selection-ink: #D7F94C;
1229
+ --color-ak-primary-container-emphasis: #D7F94C;
1230
+ --color-ak-secondary: #D7F94C;
1231
+ --color-ak-on-secondary: #0A0A0A;
1232
+ --color-ak-secondary-container: #404822;
1233
+ --color-ak-on-secondary-container: #F2F2EF;
1234
+ --color-ak-tertiary: #D7F94C;
1235
+ --color-ak-on-tertiary: #0A0A0A;
1236
+ --color-ak-tertiary-container: #404822;
1237
+ --color-ak-on-tertiary-container: #F2F2EF;
951
1238
  --color-ak-success: #22C55E;
952
1239
  --color-ak-success-subtle: #e4f8ec;
953
1240
  --color-ak-success-text: #1b9e4b;
@@ -958,8 +1245,11 @@
958
1245
  --color-ak-on-error: #F2F2EF;
959
1246
  --color-ak-pink: #f472b6;
960
1247
  --color-ak-pink-subtle: rgba(244,114,182,.12);
961
- --color-ak-danger-subtle: #ffebe9;
1248
+ --color-ak-danger-subtle: #492521;
962
1249
  --color-ak-danger-text: #cc483a;
1250
+ --color-ak-error: #FF5A48;
1251
+ --color-ak-error-container: #492521;
1252
+ --color-ak-on-error-container: #F2F2EF;
963
1253
  --color-ak-info: #3B82F6;
964
1254
  --color-ak-info-subtle: #e7f0fe;
965
1255
  --color-ak-info-text: #2f68c5;
@@ -990,11 +1280,16 @@
990
1280
  --color-ak-status-deprecated-border: #fac7c7;
991
1281
  }
992
1282
 
993
- /* Neon Noir — Deep violet-black with periwinkle glow — neon casino energy (dark) */
1283
+ /* Neon Noir - Deep violet-black with periwinkle glow — neon casino energy (dark) */
994
1284
  [data-ak-theme="neon-noir"] {
995
1285
  --color-ak-accent: #8B7CF7;
996
1286
  --color-ak-on-accent: #EDEAF6;
997
- --color-ak-accent-soft: #2c264c;
1287
+ --color-ak-accent-soft: #312a55;
1288
+ --color-ak-gradient-start: #a094f8;
1289
+ --color-ak-gradient-mid: #8B7CF7;
1290
+ --color-ak-gradient-end: #8072e3;
1291
+ --gradient-ak-primary: linear-gradient(135deg, #a094f8 0%, #8B7CF7 52%, #8072e3 100%);
1292
+ --gradient-ak-primary-hover: linear-gradient(135deg, #aba1f9 0%, #9486f8 48%, #887af2 100%);
998
1293
  --color-ak-primary-50: #f6f5fe;
999
1294
  --color-ak-primary-100: #eceafe;
1000
1295
  --color-ak-primary-200: #dad5fc;
@@ -1012,12 +1307,19 @@
1012
1307
  --color-ak-text-disabled: #474357;
1013
1308
  --color-ak-text-link: #8B7CF7;
1014
1309
  --color-ak-text-inverse: #171327;
1310
+ --color-ak-on-surface: #EDEAF6;
1311
+ --color-ak-on-surface-variant: #9D97B8;
1015
1312
  --color-ak-text-placeholder: #635f77;
1016
1313
  --color-ak-bg: #171327;
1017
1314
  --color-ak-surface: #0D0B16;
1018
1315
  --color-ak-surface-2: #1E1936;
1019
- --color-ak-surface-3: #1d1b26;
1020
- --color-ak-surface-4: #25222e;
1316
+ --color-ak-surface-3: #26242f;
1317
+ --color-ak-surface-4: #312f3a;
1318
+ --color-ak-surface-container-lowest: #171327;
1319
+ --color-ak-surface-container-low: #0D0B16;
1320
+ --color-ak-surface-container: #1E1936;
1321
+ --color-ak-surface-container-high: #26242f;
1322
+ --color-ak-surface-container-highest: #312f3a;
1021
1323
  --color-ak-surface-raised-soft: #110f1a;
1022
1324
  --color-ak-hover: rgba(255,255,255,0.04);
1023
1325
  --color-ak-active: rgba(255,255,255,0.08);
@@ -1027,6 +1329,8 @@
1027
1329
  --color-ak-border: rgba(255,255,255,0.10);
1028
1330
  --color-ak-border-subtle: rgba(255,255,255,0.06);
1029
1331
  --color-ak-border-strong: rgba(255,255,255,0.16);
1332
+ --color-ak-outline: rgba(255,255,255,0.16);
1333
+ --color-ak-outline-variant: rgba(255,255,255,0.06);
1030
1334
  --color-ak-border-focus: #8B7CF7;
1031
1335
  --color-ak-neutral-50: #110f1a;
1032
1336
  --color-ak-neutral-100: #16141f;
@@ -1043,7 +1347,19 @@
1043
1347
  --color-ak-primary-hover: #9c90f8;
1044
1348
  --color-ak-primary-active: #a89df9;
1045
1349
  --color-ak-on-primary: #EDEAF6;
1046
- --color-ak-primary-subtle: #f1effe;
1350
+ --color-ak-primary-subtle: #332c59;
1351
+ --color-ak-primary-container: #332c59;
1352
+ --color-ak-on-primary-container: #EDEAF6;
1353
+ --color-ak-selection-ink: #EDEAF6;
1354
+ --color-ak-primary-container-emphasis: #EDEAF6;
1355
+ --color-ak-secondary: #8B7CF7;
1356
+ --color-ak-on-secondary: #EDEAF6;
1357
+ --color-ak-secondary-container: #312a55;
1358
+ --color-ak-on-secondary-container: #EDEAF6;
1359
+ --color-ak-tertiary: #8B7CF7;
1360
+ --color-ak-on-tertiary: #EDEAF6;
1361
+ --color-ak-tertiary-container: #312a55;
1362
+ --color-ak-on-tertiary-container: #EDEAF6;
1047
1363
  --color-ak-success: #22C55E;
1048
1364
  --color-ak-success-subtle: #e4f8ec;
1049
1365
  --color-ak-success-text: #1b9e4b;
@@ -1054,8 +1370,11 @@
1054
1370
  --color-ak-on-error: #EDEAF6;
1055
1371
  --color-ak-pink: #f472b6;
1056
1372
  --color-ak-pink-subtle: rgba(244,114,182,.12);
1057
- --color-ak-danger-subtle: #ffeaed;
1373
+ --color-ak-danger-subtle: #4a2036;
1058
1374
  --color-ak-danger-text: #cc3e55;
1375
+ --color-ak-error: #FF4D6A;
1376
+ --color-ak-error-container: #4a2036;
1377
+ --color-ak-on-error-container: #EDEAF6;
1059
1378
  --color-ak-info: #3B82F6;
1060
1379
  --color-ak-info-subtle: #e7f0fe;
1061
1380
  --color-ak-info-text: #2f68c5;
@@ -1086,11 +1405,540 @@
1086
1405
  --color-ak-status-deprecated-border: #fac7c7;
1087
1406
  }
1088
1407
 
1089
- /* Deep Teal — Dark ocean teal with golden accent — Happy Hues #10 (dark) */
1408
+ /* Astral Ultraviolet - Deep violet-black with rich purple gradients and a small coral pulse (dark) */
1409
+ [data-ak-theme="astral-ultraviolet"] {
1410
+ --color-ak-accent: #FF7A5C;
1411
+ --color-ak-on-accent: #F8F5FF;
1412
+ --color-ak-accent-soft: #452730;
1413
+ --color-ak-gradient-start: #A78BFA;
1414
+ --color-ak-gradient-mid: #6D5DFF;
1415
+ --color-ak-gradient-end: #5B21B6;
1416
+ --gradient-ak-primary: linear-gradient(135deg, #A78BFA 0%, #6D5DFF 52%, #5B21B6 100%);
1417
+ --gradient-ak-primary-hover: linear-gradient(135deg, #C4B5FD 0%, #8B7CFF 48%, #6D28D9 100%);
1418
+ --color-ak-glow-primary: #6D5DFF;
1419
+ --color-ak-glow-secondary: #A855F7;
1420
+ --color-ak-glow-tertiary: #7C3AED;
1421
+ --color-ak-glow-warm: #FF7A5C;
1422
+ --color-ak-mesh-base: #070510;
1423
+ --gradient-ak-neon-border: conic-gradient(from var(--ak-border-angle, 180deg) at 50% 50%, transparent 0 18%, color-mix(in srgb, #6D5DFF 90%, transparent) 34%, color-mix(in srgb, #A855F7 78%, transparent) 50%, color-mix(in srgb, #7C3AED 70%, transparent) 64%, transparent 78% 100%);
1424
+ --color-ak-primary-50: #f3f2ff;
1425
+ --color-ak-primary-100: #e8e5ff;
1426
+ --color-ak-primary-200: #d0cbff;
1427
+ --color-ak-primary-300: #b3abff;
1428
+ --color-ak-primary-400: #968aff;
1429
+ --color-ak-primary-500: #6D5DFF;
1430
+ --color-ak-primary-600: #6052e0;
1431
+ --color-ak-primary-700: #5347c2;
1432
+ --color-ak-primary-800: #463ca3;
1433
+ --color-ak-primary-900: #342d7a;
1434
+ --color-ak-primary-950: #231e52;
1435
+ --color-ak-text: #F8F5FF;
1436
+ --color-ak-text-secondary: #AAA2C8;
1437
+ --color-ak-text-muted: #797391;
1438
+ --color-ak-text-disabled: #48445a;
1439
+ --color-ak-text-link: #6D5DFF;
1440
+ --color-ak-text-inverse: #111024;
1441
+ --color-ak-on-surface: #F8F5FF;
1442
+ --color-ak-on-surface-variant: #AAA2C8;
1443
+ --color-ak-text-placeholder: #69637e;
1444
+ --color-ak-bg: #111024;
1445
+ --color-ak-surface: #070510;
1446
+ --color-ak-surface-2: #1B1830;
1447
+ --color-ak-surface-3: #221f2a;
1448
+ --color-ak-surface-4: #2e2b36;
1449
+ --color-ak-surface-container-lowest: #111024;
1450
+ --color-ak-surface-container-low: #070510;
1451
+ --color-ak-surface-container: #1B1830;
1452
+ --color-ak-surface-container-high: #221f2a;
1453
+ --color-ak-surface-container-highest: #2e2b36;
1454
+ --color-ak-surface-raised-soft: #0c0a15;
1455
+ --color-ak-hover: rgba(255,255,255,0.04);
1456
+ --color-ak-active: rgba(255,255,255,0.08);
1457
+ --color-ak-elevated: #111024;
1458
+ --color-ak-inverse-surface: #F8F5FF;
1459
+ --color-ak-inverse-on-surface: #070510;
1460
+ --color-ak-border: rgba(255,255,255,0.10);
1461
+ --color-ak-border-subtle: rgba(255,255,255,0.06);
1462
+ --color-ak-border-strong: rgba(255,255,255,0.16);
1463
+ --color-ak-outline: rgba(255,255,255,0.16);
1464
+ --color-ak-outline-variant: rgba(255,255,255,0.06);
1465
+ --color-ak-border-focus: #FF7A5C;
1466
+ --color-ak-neutral-50: #0c0a15;
1467
+ --color-ak-neutral-100: #110f1a;
1468
+ --color-ak-neutral-200: #1a1823;
1469
+ --color-ak-neutral-300: #2b2934;
1470
+ --color-ak-neutral-400: #4f4d58;
1471
+ --color-ak-neutral-500: #73717c;
1472
+ --color-ak-neutral-600: #98959f;
1473
+ --color-ak-neutral-700: #b5b2bc;
1474
+ --color-ak-neutral-800: #d1cfd9;
1475
+ --color-ak-neutral-900: #e5e2ec;
1476
+ --color-ak-neutral-950: #eeebf5;
1477
+ --color-ak-primary: #6D5DFF;
1478
+ --color-ak-primary-hover: #8375ff;
1479
+ --color-ak-primary-active: #9286ff;
1480
+ --color-ak-on-primary: #F8F5FF;
1481
+ --color-ak-primary-subtle: #272259;
1482
+ --color-ak-primary-container: #272259;
1483
+ --color-ak-on-primary-container: #F8F5FF;
1484
+ --color-ak-selection-ink: #F8F5FF;
1485
+ --color-ak-primary-container-emphasis: #F8F5FF;
1486
+ --color-ak-secondary: #A855F7;
1487
+ --color-ak-on-secondary: #F8F5FF;
1488
+ --color-ak-secondary-container: #321f52;
1489
+ --color-ak-on-secondary-container: #F8F5FF;
1490
+ --color-ak-tertiary: #FF7A5C;
1491
+ --color-ak-on-tertiary: #F8F5FF;
1492
+ --color-ak-tertiary-container: #452730;
1493
+ --color-ak-on-tertiary-container: #F8F5FF;
1494
+ --color-ak-success: #22C55E;
1495
+ --color-ak-success-subtle: #e4f8ec;
1496
+ --color-ak-success-text: #1b9e4b;
1497
+ --color-ak-warning: #F59E0B;
1498
+ --color-ak-warning-subtle: #fef3e2;
1499
+ --color-ak-warning-text: #c47e09;
1500
+ --color-ak-danger: #FF5A6E;
1501
+ --color-ak-on-error: #F8F5FF;
1502
+ --color-ak-pink: #f472b6;
1503
+ --color-ak-pink-subtle: rgba(244,114,182,.12);
1504
+ --color-ak-danger-subtle: #452034;
1505
+ --color-ak-danger-text: #cc4858;
1506
+ --color-ak-error: #FF5A6E;
1507
+ --color-ak-error-container: #452034;
1508
+ --color-ak-on-error-container: #F8F5FF;
1509
+ --color-ak-info: #3B82F6;
1510
+ --color-ak-info-subtle: #e7f0fe;
1511
+ --color-ak-info-text: #2f68c5;
1512
+ --color-ak-overlay: rgba(0,0,0,0.7);
1513
+ --shadow-ak-xs: none;
1514
+ --shadow-ak-sm: none;
1515
+ --color-ak-brutal-ink: #6D5DFF;
1516
+ --color-ak-brutal-face: #070510;
1517
+ --color-ak-brutal-face-dark: #8375ff;
1518
+ --color-ak-brutal-on-face: #6D5DFF;
1519
+ --color-ak-brutal-on-face-dark: #070510;
1520
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #8a7dff;
1521
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #8a7dff;
1522
+ --shadow-ak-brutal: 4px 4px 0 0 #8a7dff;
1523
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #8a7dff;
1524
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #8a7dff;
1525
+ --color-ak-status-beta-bg: #f1ebfe;
1526
+ --color-ak-status-beta-text: #7C3AED;
1527
+ --color-ak-status-beta-border: #dccefc;
1528
+ --color-ak-status-new-bg: #e4f8ec;
1529
+ --color-ak-status-new-text: #16A34A;
1530
+ --color-ak-status-new-border: #bdeecf;
1531
+ --color-ak-status-stable-bg: #e7f0fe;
1532
+ --color-ak-status-stable-text: #2563EB;
1533
+ --color-ak-status-stable-border: #c4dafc;
1534
+ --color-ak-status-deprecated-bg: #fde9e9;
1535
+ --color-ak-status-deprecated-text: #DC2626;
1536
+ --color-ak-status-deprecated-border: #fac7c7;
1537
+ }
1538
+
1539
+ /* Plasma Orbit - Black-blue dashboard dark with electric indigo, cyan, and violet glow (dark) */
1540
+ [data-ak-theme="plasma-orbit"] {
1541
+ --color-ak-accent: #22D3EE;
1542
+ --color-ak-on-accent: #030712;
1543
+ --color-ak-accent-soft: #103b4d;
1544
+ --color-ak-gradient-start: #22D3EE;
1545
+ --color-ak-gradient-mid: #16A3FF;
1546
+ --color-ak-gradient-end: #6D5DFF;
1547
+ --gradient-ak-primary: linear-gradient(135deg, #22D3EE 0%, #16A3FF 52%, #6D5DFF 100%);
1548
+ --gradient-ak-primary-hover: linear-gradient(135deg, #67E8F9 0%, #38BDF8 48%, #8B7CFF 100%);
1549
+ --color-ak-glow-primary: #16A3FF;
1550
+ --color-ak-glow-secondary: #22D3EE;
1551
+ --color-ak-glow-tertiary: #6D5DFF;
1552
+ --color-ak-glow-warm: #8B5CF6;
1553
+ --color-ak-mesh-base: #030712;
1554
+ --gradient-ak-neon-border: conic-gradient(from var(--ak-border-angle, 180deg) at 50% 50%, transparent 0 18%, color-mix(in srgb, #16A3FF 90%, transparent) 34%, color-mix(in srgb, #22D3EE 78%, transparent) 50%, color-mix(in srgb, #6D5DFF 70%, transparent) 64%, transparent 78% 100%);
1555
+ --color-ak-primary-50: #ecf8ff;
1556
+ --color-ak-primary-100: #daf0ff;
1557
+ --color-ak-primary-200: #b4e2ff;
1558
+ --color-ak-primary-300: #86cfff;
1559
+ --color-ak-primary-400: #57bdff;
1560
+ --color-ak-primary-500: #16A3FF;
1561
+ --color-ak-primary-600: #138fe0;
1562
+ --color-ak-primary-700: #117cc2;
1563
+ --color-ak-primary-800: #0e68a3;
1564
+ --color-ak-primary-900: #0b4e7a;
1565
+ --color-ak-primary-950: #073452;
1566
+ --color-ak-text: #F4F8FF;
1567
+ --color-ak-text-secondary: #9AA8C7;
1568
+ --color-ak-text-muted: #6d7891;
1569
+ --color-ak-text-disabled: #3f475a;
1570
+ --color-ak-text-link: #16A3FF;
1571
+ --color-ak-text-inverse: #0B1020;
1572
+ --color-ak-on-surface: #F4F8FF;
1573
+ --color-ak-on-surface-variant: #9AA8C7;
1574
+ --color-ak-text-placeholder: #5e687f;
1575
+ --color-ak-bg: #0B1020;
1576
+ --color-ak-surface: #030712;
1577
+ --color-ak-surface-2: #101831;
1578
+ --color-ak-surface-3: #1e222c;
1579
+ --color-ak-surface-4: #2a2e38;
1580
+ --color-ak-surface-container-lowest: #0B1020;
1581
+ --color-ak-surface-container-low: #030712;
1582
+ --color-ak-surface-container: #101831;
1583
+ --color-ak-surface-container-high: #1e222c;
1584
+ --color-ak-surface-container-highest: #2a2e38;
1585
+ --color-ak-surface-raised-soft: #080c17;
1586
+ --color-ak-hover: rgba(255,255,255,0.04);
1587
+ --color-ak-active: rgba(255,255,255,0.08);
1588
+ --color-ak-elevated: #0B1020;
1589
+ --color-ak-inverse-surface: #F4F8FF;
1590
+ --color-ak-inverse-on-surface: #030712;
1591
+ --color-ak-border: rgba(255,255,255,0.10);
1592
+ --color-ak-border-subtle: rgba(255,255,255,0.06);
1593
+ --color-ak-border-strong: rgba(255,255,255,0.16);
1594
+ --color-ak-outline: rgba(255,255,255,0.16);
1595
+ --color-ak-outline-variant: rgba(255,255,255,0.06);
1596
+ --color-ak-border-focus: #22D3EE;
1597
+ --color-ak-neutral-50: #080c17;
1598
+ --color-ak-neutral-100: #0d111b;
1599
+ --color-ak-neutral-200: #161a25;
1600
+ --color-ak-neutral-300: #272b36;
1601
+ --color-ak-neutral-400: #4b4f59;
1602
+ --color-ak-neutral-500: #6f737d;
1603
+ --color-ak-neutral-600: #9498a0;
1604
+ --color-ak-neutral-700: #b1b5bd;
1605
+ --color-ak-neutral-800: #cdd1d9;
1606
+ --color-ak-neutral-900: #e1e5ec;
1607
+ --color-ak-neutral-950: #eaeef6;
1608
+ --color-ak-primary: #16A3FF;
1609
+ --color-ak-primary-hover: #39b1ff;
1610
+ --color-ak-primary-active: #50baff;
1611
+ --color-ak-on-primary: #F4F8FF;
1612
+ --color-ak-primary-subtle: #0e3356;
1613
+ --color-ak-primary-container: #0e3356;
1614
+ --color-ak-on-primary-container: #F4F8FF;
1615
+ --color-ak-selection-ink: #16A3FF;
1616
+ --color-ak-primary-container-emphasis: #16A3FF;
1617
+ --color-ak-secondary: #6D5DFF;
1618
+ --color-ak-on-secondary: #F4F8FF;
1619
+ --color-ak-secondary-container: #212151;
1620
+ --color-ak-on-secondary-container: #F4F8FF;
1621
+ --color-ak-tertiary: #22D3EE;
1622
+ --color-ak-on-tertiary: #030712;
1623
+ --color-ak-tertiary-container: #103b4d;
1624
+ --color-ak-on-tertiary-container: #F4F8FF;
1625
+ --color-ak-success: #22C55E;
1626
+ --color-ak-success-subtle: #e4f8ec;
1627
+ --color-ak-success-text: #1b9e4b;
1628
+ --color-ak-warning: #F59E0B;
1629
+ --color-ak-warning-subtle: #fef3e2;
1630
+ --color-ak-warning-text: #c47e09;
1631
+ --color-ak-danger: #FF5A7A;
1632
+ --color-ak-on-error: #F4F8FF;
1633
+ --color-ak-pink: #f472b6;
1634
+ --color-ak-pink-subtle: rgba(244,114,182,.12);
1635
+ --color-ak-danger-subtle: #412034;
1636
+ --color-ak-danger-text: #cc4862;
1637
+ --color-ak-error: #FF5A7A;
1638
+ --color-ak-error-container: #412034;
1639
+ --color-ak-on-error-container: #F4F8FF;
1640
+ --color-ak-info: #3B82F6;
1641
+ --color-ak-info-subtle: #e7f0fe;
1642
+ --color-ak-info-text: #2f68c5;
1643
+ --color-ak-overlay: rgba(0,0,0,0.7);
1644
+ --shadow-ak-xs: none;
1645
+ --shadow-ak-sm: none;
1646
+ --color-ak-brutal-ink: #16A3FF;
1647
+ --color-ak-brutal-face: #030712;
1648
+ --color-ak-brutal-face-dark: #39b1ff;
1649
+ --color-ak-brutal-on-face: #16A3FF;
1650
+ --color-ak-brutal-on-face-dark: #030712;
1651
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #45b5ff;
1652
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #45b5ff;
1653
+ --shadow-ak-brutal: 4px 4px 0 0 #45b5ff;
1654
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #45b5ff;
1655
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #45b5ff;
1656
+ --color-ak-status-beta-bg: #f1ebfe;
1657
+ --color-ak-status-beta-text: #7C3AED;
1658
+ --color-ak-status-beta-border: #dccefc;
1659
+ --color-ak-status-new-bg: #e4f8ec;
1660
+ --color-ak-status-new-text: #16A34A;
1661
+ --color-ak-status-new-border: #bdeecf;
1662
+ --color-ak-status-stable-bg: #e7f0fe;
1663
+ --color-ak-status-stable-text: #2563EB;
1664
+ --color-ak-status-stable-border: #c4dafc;
1665
+ --color-ak-status-deprecated-bg: #fde9e9;
1666
+ --color-ak-status-deprecated-text: #DC2626;
1667
+ --color-ak-status-deprecated-border: #fac7c7;
1668
+ }
1669
+
1670
+ /* Lunar Citron - Obsidian surfaces with soft lavender depth and sharp citron energy (dark) */
1671
+ [data-ak-theme="lunar-citron"] {
1672
+ --color-ak-accent: #E9FF5B;
1673
+ --color-ak-on-accent: #090A0D;
1674
+ --color-ak-accent-soft: #444829;
1675
+ --color-ak-gradient-start: #F4FF8C;
1676
+ --color-ak-gradient-mid: #E9FF5B;
1677
+ --color-ak-gradient-end: #B6D932;
1678
+ --gradient-ak-primary: linear-gradient(135deg, #F4FF8C 0%, #E9FF5B 52%, #B6D932 100%);
1679
+ --gradient-ak-primary-hover: linear-gradient(135deg, #F8FFAD 0%, #EEFF72 48%, #CBEA44 100%);
1680
+ --color-ak-glow-primary: #E9FF5B;
1681
+ --color-ak-glow-secondary: #8B7CF7;
1682
+ --color-ak-glow-tertiary: #C084FC;
1683
+ --color-ak-glow-warm: #FF9F68;
1684
+ --color-ak-mesh-base: #090A0D;
1685
+ --gradient-ak-neon-border: conic-gradient(from var(--ak-border-angle, 180deg) at 50% 50%, transparent 0 18%, color-mix(in srgb, #E9FF5B 90%, transparent) 34%, color-mix(in srgb, #8B7CF7 78%, transparent) 50%, color-mix(in srgb, #C084FC 70%, transparent) 64%, transparent 78% 100%);
1686
+ --color-ak-primary-50: #fdfff2;
1687
+ --color-ak-primary-100: #fbffe5;
1688
+ --color-ak-primary-200: #f8ffcb;
1689
+ --color-ak-primary-300: #f4ffaa;
1690
+ --color-ak-primary-400: #efff89;
1691
+ --color-ak-primary-500: #E9FF5B;
1692
+ --color-ak-primary-600: #cde050;
1693
+ --color-ak-primary-700: #b1c245;
1694
+ --color-ak-primary-800: #95a33a;
1695
+ --color-ak-primary-900: #707a2c;
1696
+ --color-ak-primary-950: #4b521d;
1697
+ --color-ak-text: #F7F7EC;
1698
+ --color-ak-text-secondary: #A8A49A;
1699
+ --color-ak-text-muted: #787670;
1700
+ --color-ak-text-disabled: #494845;
1701
+ --color-ak-text-link: #E9FF5B;
1702
+ --color-ak-text-inverse: #15141B;
1703
+ --color-ak-on-surface: #F7F7EC;
1704
+ --color-ak-on-surface-variant: #A8A49A;
1705
+ --color-ak-text-placeholder: #686662;
1706
+ --color-ak-bg: #15141B;
1707
+ --color-ak-surface: #090A0D;
1708
+ --color-ak-surface-2: #1E1D24;
1709
+ --color-ak-surface-3: #232426;
1710
+ --color-ak-surface-4: #2f3031;
1711
+ --color-ak-surface-container-lowest: #15141B;
1712
+ --color-ak-surface-container-low: #090A0D;
1713
+ --color-ak-surface-container: #1E1D24;
1714
+ --color-ak-surface-container-high: #232426;
1715
+ --color-ak-surface-container-highest: #2f3031;
1716
+ --color-ak-surface-raised-soft: #0e0f11;
1717
+ --color-ak-hover: rgba(255,255,255,0.04);
1718
+ --color-ak-active: rgba(255,255,255,0.08);
1719
+ --color-ak-elevated: #15141B;
1720
+ --color-ak-inverse-surface: #F7F7EC;
1721
+ --color-ak-inverse-on-surface: #090A0D;
1722
+ --color-ak-border: rgba(255,255,255,0.10);
1723
+ --color-ak-border-subtle: rgba(255,255,255,0.06);
1724
+ --color-ak-border-strong: rgba(255,255,255,0.16);
1725
+ --color-ak-outline: rgba(255,255,255,0.16);
1726
+ --color-ak-outline-variant: rgba(255,255,255,0.06);
1727
+ --color-ak-border-focus: #E9FF5B;
1728
+ --color-ak-neutral-50: #0e0f11;
1729
+ --color-ak-neutral-100: #131316;
1730
+ --color-ak-neutral-200: #1c1d1f;
1731
+ --color-ak-neutral-300: #2d2e2e;
1732
+ --color-ak-neutral-400: #505150;
1733
+ --color-ak-neutral-500: #747571;
1734
+ --color-ak-neutral-600: #989893;
1735
+ --color-ak-neutral-700: #b4b5ae;
1736
+ --color-ak-neutral-800: #d1d1c8;
1737
+ --color-ak-neutral-900: #e4e4da;
1738
+ --color-ak-neutral-950: #edeee3;
1739
+ --color-ak-primary: #E9FF5B;
1740
+ --color-ak-primary-hover: #ecff74;
1741
+ --color-ak-primary-active: #efff84;
1742
+ --color-ak-on-primary: #090A0D;
1743
+ --color-ak-primary-subtle: #484c2a;
1744
+ --color-ak-primary-container: #484c2a;
1745
+ --color-ak-on-primary-container: #F7F7EC;
1746
+ --color-ak-selection-ink: #E9FF5B;
1747
+ --color-ak-primary-container-emphasis: #E9FF5B;
1748
+ --color-ak-secondary: #8B7CF7;
1749
+ --color-ak-on-secondary: #090A0D;
1750
+ --color-ak-secondary-container: #2f2b4b;
1751
+ --color-ak-on-secondary-container: #F7F7EC;
1752
+ --color-ak-tertiary: #E9FF5B;
1753
+ --color-ak-on-tertiary: #090A0D;
1754
+ --color-ak-tertiary-container: #444829;
1755
+ --color-ak-on-tertiary-container: #F7F7EC;
1756
+ --color-ak-success: #22C55E;
1757
+ --color-ak-success-subtle: #e4f8ec;
1758
+ --color-ak-success-text: #1b9e4b;
1759
+ --color-ak-warning: #F59E0B;
1760
+ --color-ak-warning-subtle: #fef3e2;
1761
+ --color-ak-warning-text: #c47e09;
1762
+ --color-ak-danger: #FF6B5F;
1763
+ --color-ak-on-error: #090A0D;
1764
+ --color-ak-pink: #f472b6;
1765
+ --color-ak-pink-subtle: rgba(244,114,182,.12);
1766
+ --color-ak-danger-subtle: #48272a;
1767
+ --color-ak-danger-text: #cc564c;
1768
+ --color-ak-error: #FF6B5F;
1769
+ --color-ak-error-container: #48272a;
1770
+ --color-ak-on-error-container: #F7F7EC;
1771
+ --color-ak-info: #3B82F6;
1772
+ --color-ak-info-subtle: #e7f0fe;
1773
+ --color-ak-info-text: #2f68c5;
1774
+ --color-ak-overlay: rgba(0,0,0,0.7);
1775
+ --shadow-ak-xs: none;
1776
+ --shadow-ak-sm: none;
1777
+ --color-ak-brutal-ink: #E9FF5B;
1778
+ --color-ak-brutal-face: #090A0D;
1779
+ --color-ak-brutal-face-dark: #ecff74;
1780
+ --color-ak-brutal-on-face: #E9FF5B;
1781
+ --color-ak-brutal-on-face-dark: #090A0D;
1782
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #edff79;
1783
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #edff79;
1784
+ --shadow-ak-brutal: 4px 4px 0 0 #edff79;
1785
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #edff79;
1786
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #edff79;
1787
+ --color-ak-status-beta-bg: #efe7fd;
1788
+ --color-ak-status-beta-text: #7C3AED;
1789
+ --color-ak-status-beta-border: #dac8fa;
1790
+ --color-ak-status-new-bg: #e4f8ec;
1791
+ --color-ak-status-new-text: #16A34A;
1792
+ --color-ak-status-new-border: #c1efd2;
1793
+ --color-ak-status-stable-bg: #e7f0fe;
1794
+ --color-ak-status-stable-text: #2563EB;
1795
+ --color-ak-status-stable-border: #c8dcfc;
1796
+ --color-ak-status-deprecated-bg: #fde9e9;
1797
+ --color-ak-status-deprecated-text: #DC2626;
1798
+ --color-ak-status-deprecated-border: #fbcbcb;
1799
+ }
1800
+
1801
+ /* Magenta Circuit - Charcoal-black with hot magenta, violet circuitry, and small data-green hits (dark) */
1802
+ [data-ak-theme="magenta-circuit"] {
1803
+ --color-ak-accent: #FF5AA8;
1804
+ --color-ak-on-accent: #08070A;
1805
+ --color-ak-accent-soft: #482036;
1806
+ --color-ak-gradient-start: #FF5FE7;
1807
+ --color-ak-gradient-mid: #D946EF;
1808
+ --color-ak-gradient-end: #7C3AED;
1809
+ --gradient-ak-primary: linear-gradient(135deg, #FF5FE7 0%, #D946EF 52%, #7C3AED 100%);
1810
+ --gradient-ak-primary-hover: linear-gradient(135deg, #FF8CF0 0%, #E879F9 48%, #8B5CF6 100%);
1811
+ --color-ak-glow-primary: #E43DDC;
1812
+ --color-ak-glow-secondary: #8B5CF6;
1813
+ --color-ak-glow-tertiary: #FF5AA8;
1814
+ --color-ak-glow-warm: #22C55E;
1815
+ --color-ak-mesh-base: #08070A;
1816
+ --gradient-ak-neon-border: conic-gradient(from var(--ak-border-angle, 180deg) at 50% 50%, transparent 0 18%, color-mix(in srgb, #E43DDC 90%, transparent) 34%, color-mix(in srgb, #8B5CF6 78%, transparent) 50%, color-mix(in srgb, #FF5AA8 70%, transparent) 64%, transparent 78% 100%);
1817
+ --color-ak-primary-50: #fdeffc;
1818
+ --color-ak-primary-100: #fbe0f9;
1819
+ --color-ak-primary-200: #f6c1f4;
1820
+ --color-ak-primary-300: #f19aed;
1821
+ --color-ak-primary-400: #ec73e6;
1822
+ --color-ak-primary-500: #E43DDC;
1823
+ --color-ak-primary-600: #c936c2;
1824
+ --color-ak-primary-700: #ad2ea7;
1825
+ --color-ak-primary-800: #92278d;
1826
+ --color-ak-primary-900: #6d1d6a;
1827
+ --color-ak-primary-950: #491446;
1828
+ --color-ak-text: #FFF7FB;
1829
+ --color-ak-text-secondary: #B7A9B7;
1830
+ --color-ak-text-muted: #837883;
1831
+ --color-ak-text-disabled: #4e484f;
1832
+ --color-ak-text-link: #E43DDC;
1833
+ --color-ak-text-inverse: #141016;
1834
+ --color-ak-on-surface: #FFF7FB;
1835
+ --color-ak-on-surface-variant: #B7A9B7;
1836
+ --color-ak-text-placeholder: #716872;
1837
+ --color-ak-bg: #141016;
1838
+ --color-ak-surface: #08070A;
1839
+ --color-ak-surface-2: #1F1721;
1840
+ --color-ak-surface-3: #232125;
1841
+ --color-ak-surface-4: #302d31;
1842
+ --color-ak-surface-container-lowest: #141016;
1843
+ --color-ak-surface-container-low: #08070A;
1844
+ --color-ak-surface-container: #1F1721;
1845
+ --color-ak-surface-container-high: #232125;
1846
+ --color-ak-surface-container-highest: #302d31;
1847
+ --color-ak-surface-raised-soft: #0d0c0f;
1848
+ --color-ak-hover: rgba(255,255,255,0.04);
1849
+ --color-ak-active: rgba(255,255,255,0.08);
1850
+ --color-ak-elevated: #141016;
1851
+ --color-ak-inverse-surface: #FFF7FB;
1852
+ --color-ak-inverse-on-surface: #08070A;
1853
+ --color-ak-border: rgba(255,255,255,0.10);
1854
+ --color-ak-border-subtle: rgba(255,255,255,0.06);
1855
+ --color-ak-border-strong: rgba(255,255,255,0.16);
1856
+ --color-ak-outline: rgba(255,255,255,0.16);
1857
+ --color-ak-outline-variant: rgba(255,255,255,0.06);
1858
+ --color-ak-border-focus: #FF5AA8;
1859
+ --color-ak-neutral-50: #0d0c0f;
1860
+ --color-ak-neutral-100: #121114;
1861
+ --color-ak-neutral-200: #1c1a1d;
1862
+ --color-ak-neutral-300: #2d2b2e;
1863
+ --color-ak-neutral-400: #524f52;
1864
+ --color-ak-neutral-500: #777376;
1865
+ --color-ak-neutral-600: #9c979b;
1866
+ --color-ak-neutral-700: #bab4b8;
1867
+ --color-ak-neutral-800: #d7d1d4;
1868
+ --color-ak-neutral-900: #ebe4e8;
1869
+ --color-ak-neutral-950: #f5edf1;
1870
+ --color-ak-primary: #E43DDC;
1871
+ --color-ak-primary-hover: #e85ae1;
1872
+ --color-ak-primary-active: #eb6ee5;
1873
+ --color-ak-on-primary: #08070A;
1874
+ --color-ak-primary-subtle: #461b46;
1875
+ --color-ak-primary-container: #461b46;
1876
+ --color-ak-on-primary-container: #FFF7FB;
1877
+ --color-ak-selection-ink: #FFF7FB;
1878
+ --color-ak-primary-container-emphasis: #FFF7FB;
1879
+ --color-ak-secondary: #8B5CF6;
1880
+ --color-ak-on-secondary: #08070A;
1881
+ --color-ak-secondary-container: #2e2147;
1882
+ --color-ak-on-secondary-container: #FFF7FB;
1883
+ --color-ak-tertiary: #FF5AA8;
1884
+ --color-ak-on-tertiary: #08070A;
1885
+ --color-ak-tertiary-container: #482036;
1886
+ --color-ak-on-tertiary-container: #FFF7FB;
1887
+ --color-ak-success: #22C55E;
1888
+ --color-ak-success-subtle: #e4f8ec;
1889
+ --color-ak-success-text: #1b9e4b;
1890
+ --color-ak-warning: #F59E0B;
1891
+ --color-ak-warning-subtle: #fef3e2;
1892
+ --color-ak-warning-text: #c47e09;
1893
+ --color-ak-danger: #FF4D6D;
1894
+ --color-ak-on-error: #08070A;
1895
+ --color-ak-pink: #f472b6;
1896
+ --color-ak-pink-subtle: rgba(244,114,182,.12);
1897
+ --color-ak-danger-subtle: #481d29;
1898
+ --color-ak-danger-text: #cc3e57;
1899
+ --color-ak-error: #FF4D6D;
1900
+ --color-ak-error-container: #481d29;
1901
+ --color-ak-on-error-container: #FFF7FB;
1902
+ --color-ak-info: #3B82F6;
1903
+ --color-ak-info-subtle: #e7f0fe;
1904
+ --color-ak-info-text: #2f68c5;
1905
+ --color-ak-overlay: rgba(0,0,0,0.7);
1906
+ --shadow-ak-xs: none;
1907
+ --shadow-ak-sm: none;
1908
+ --color-ak-brutal-ink: #E43DDC;
1909
+ --color-ak-brutal-face: #08070A;
1910
+ --color-ak-brutal-face-dark: #e85ae1;
1911
+ --color-ak-brutal-on-face: #E43DDC;
1912
+ --color-ak-brutal-on-face-dark: #08070A;
1913
+ --shadow-ak-brutal-xs: 2px 2px 0 0 #e960e2;
1914
+ --shadow-ak-brutal-sm: 3px 3px 0 0 #e960e2;
1915
+ --shadow-ak-brutal: 4px 4px 0 0 #e960e2;
1916
+ --shadow-ak-brutal-lg: 6px 6px 0 0 #e960e2;
1917
+ --shadow-ak-brutal-xl: 8px 8px 0 0 #e960e2;
1918
+ --color-ak-status-beta-bg: #efe7fd;
1919
+ --color-ak-status-beta-text: #7C3AED;
1920
+ --color-ak-status-beta-border: #dac8fa;
1921
+ --color-ak-status-new-bg: #e4f8ec;
1922
+ --color-ak-status-new-text: #16A34A;
1923
+ --color-ak-status-new-border: #c1efd2;
1924
+ --color-ak-status-stable-bg: #e7f0fe;
1925
+ --color-ak-status-stable-text: #2563EB;
1926
+ --color-ak-status-stable-border: #c8dcfc;
1927
+ --color-ak-status-deprecated-bg: #fde9e9;
1928
+ --color-ak-status-deprecated-text: #DC2626;
1929
+ --color-ak-status-deprecated-border: #fbcbcb;
1930
+ }
1931
+
1932
+ /* Deep Teal - Dark ocean teal with golden accent — Happy Hues #10 (dark) */
1090
1933
  [data-ak-theme="deep-teal"] {
1091
1934
  --color-ak-accent: #E16162;
1092
1935
  --color-ak-on-accent: #FFFFFE;
1093
- --color-ak-accent-soft: #292a29;
1936
+ --color-ak-accent-soft: #322d2c;
1937
+ --color-ak-gradient-start: #fac87d;
1938
+ --color-ak-gradient-mid: #F9BC60;
1939
+ --color-ak-gradient-end: #e5ad58;
1940
+ --gradient-ak-primary: linear-gradient(135deg, #fac87d 0%, #F9BC60 52%, #e5ad58 100%);
1941
+ --gradient-ak-primary-hover: linear-gradient(135deg, #fbcf8d 0%, #f9c16d 48%, #f4b85e 100%);
1094
1942
  --color-ak-primary-50: #fffaf2;
1095
1943
  --color-ak-primary-100: #fef4e6;
1096
1944
  --color-ak-primary-200: #fdeacc;
@@ -1108,12 +1956,19 @@
1108
1956
  --color-ak-text-disabled: #447e77;
1109
1957
  --color-ak-text-link: #F9BC60;
1110
1958
  --color-ak-text-inverse: #001E1D;
1959
+ --color-ak-on-surface: #FFFFFE;
1960
+ --color-ak-on-surface-variant: #ABD1C6;
1111
1961
  --color-ak-text-placeholder: #679992;
1112
1962
  --color-ak-bg: #001E1D;
1113
1963
  --color-ak-surface: #004643;
1114
1964
  --color-ak-surface-2: #0A5854;
1115
- --color-ak-surface-3: #125350;
1116
- --color-ak-surface-4: #1b5957;
1965
+ --color-ak-surface-3: #1c5a58;
1966
+ --color-ak-surface-4: #296461;
1967
+ --color-ak-surface-container-lowest: #001E1D;
1968
+ --color-ak-surface-container-low: #004643;
1969
+ --color-ak-surface-container: #0A5854;
1970
+ --color-ak-surface-container-high: #1c5a58;
1971
+ --color-ak-surface-container-highest: #296461;
1117
1972
  --color-ak-surface-raised-soft: #054a47;
1118
1973
  --color-ak-hover: rgba(255,255,255,0.04);
1119
1974
  --color-ak-active: rgba(255,255,255,0.08);
@@ -1123,6 +1978,8 @@
1123
1978
  --color-ak-border: rgba(255,255,255,0.10);
1124
1979
  --color-ak-border-subtle: rgba(255,255,255,0.06);
1125
1980
  --color-ak-border-strong: rgba(255,255,255,0.16);
1981
+ --color-ak-outline: rgba(255,255,255,0.16);
1982
+ --color-ak-outline-variant: rgba(255,255,255,0.06);
1126
1983
  --color-ak-border-focus: #E16162;
1127
1984
  --color-ak-neutral-50: #054a47;
1128
1985
  --color-ak-neutral-100: #0a4d4a;
@@ -1139,7 +1996,19 @@
1139
1996
  --color-ak-primary-hover: #fac678;
1140
1997
  --color-ak-primary-active: #fbcd88;
1141
1998
  --color-ak-on-primary: #004643;
1142
- --color-ak-primary-subtle: #fef7ec;
1999
+ --color-ak-primary-subtle: #3c442d;
2000
+ --color-ak-primary-container: #3c442d;
2001
+ --color-ak-on-primary-container: #FFFFFE;
2002
+ --color-ak-selection-ink: #F9BC60;
2003
+ --color-ak-primary-container-emphasis: #F9BC60;
2004
+ --color-ak-secondary: #ABD1C6;
2005
+ --color-ak-on-secondary: #004643;
2006
+ --color-ak-secondary-container: #264542;
2007
+ --color-ak-on-secondary-container: #FFFFFE;
2008
+ --color-ak-tertiary: #E16162;
2009
+ --color-ak-on-tertiary: #FFFFFE;
2010
+ --color-ak-tertiary-container: #322d2c;
2011
+ --color-ak-on-tertiary-container: #FFFFFE;
1143
2012
  --color-ak-success: #22C55E;
1144
2013
  --color-ak-success-subtle: #e4f8ec;
1145
2014
  --color-ak-success-text: #1b9e4b;
@@ -1150,8 +2019,11 @@
1150
2019
  --color-ak-on-error: #FFFFFE;
1151
2020
  --color-ak-pink: #f472b6;
1152
2021
  --color-ak-pink-subtle: rgba(244,114,182,.12);
1153
- --color-ak-danger-subtle: #fbecec;
2022
+ --color-ak-danger-subtle: #322d2c;
1154
2023
  --color-ak-danger-text: #b44e4e;
2024
+ --color-ak-error: #E16162;
2025
+ --color-ak-error-container: #322d2c;
2026
+ --color-ak-on-error-container: #FFFFFE;
1155
2027
  --color-ak-info: #3B82F6;
1156
2028
  --color-ak-info-subtle: #e7f0fe;
1157
2029
  --color-ak-info-text: #2f68c5;
@@ -1181,4 +2053,3 @@
1181
2053
  --color-ak-status-deprecated-text: #DC2626;
1182
2054
  --color-ak-status-deprecated-border: #fac7c7;
1183
2055
  }
1184
-