astralkit 0.6.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 (25) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/LICENSE +73 -34
  3. package/README.md +31 -1
  4. package/astralkit-theme-v4.css +135 -114
  5. package/astralkit-theme.css +135 -114
  6. package/astralkit-utilities.css +312 -1
  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/package.json +3 -2
  24. package/primitives/animations.css +43 -1
  25. package/tailwind.cjs +15 -9
package/CHANGELOG.md CHANGED
@@ -5,6 +5,21 @@ All notable changes to the `astralkit` SDK package.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [0.7.0] — 2026-08-22
9
+
10
+ ### Added
11
+ - **Material utilities** — `ak-material-surface`, `ak-material-control`, refined `ak-dark-material`: the opaque elevated material surfaces the kanban/core component sets use for modals, drawers, and floating controls. Components built against these rendered **transparent overlays** on 0.6.0 (found live via the kanban-01 task drawer).
12
+ - **Semantic font utilities** — `ak-font-heading`, `ak-font-label`, `ak-font-ui`, `ak-font-ui-strong`, `ak-font-body`, backed by new font-dial variables (`--font-ak-heading` etc., with the previous literal stacks as fallbacks) so a theme can re-font at runtime.
13
+ - **Radix animation helpers** — `ak-overlay-anim`, `ak-pop-anim`, `ak-sheet-anim`, `ak-accordion-anim`, `ak-collapsible-anim`.
14
+ - **Control primitives** — `ak-control-track`, `ak-control-thumb`, `ak-control-knob`; plus `ak-button-group`(+`-separator`), `ak-scrollbar`, `ak-quiet-hover`.
15
+ - **`astralkit/presets` export** — appearance presets, theme palettes, chart palettes, font pairings, dials, and materials as data (the role system + font library per the no-font-dials-in-builder decision).
16
+ - **`ak-hover-shimmer`** animation (+ `ak-hover-shimmer-sweep` keyframes).
17
+ - **Error-role hover tokens** — `ak-error-hover`, `ak-danger-hover`.
18
+
19
+ ### Changed
20
+ - `font-ak-sans`/`-serif`/`-mono` (v3 plugin) are now var-driven (`var(--font-ak-sans, Inter)` …) so containers can re-font at runtime; literal stacks remain as fallbacks — no visual change for existing consumers.
21
+ - `ak-focus-ring` implementation refined.
22
+
8
23
  ## [0.6.0] — 2026-07-06
9
24
 
10
25
  ### Added
package/LICENSE CHANGED
@@ -1,34 +1,73 @@
1
- AstralKit License
2
-
3
- Copyright (c) 2025-2026 Blue Beacon Creative LLC. All rights reserved.
4
-
5
- This software and associated files (the "Software") are the proprietary
6
- intellectual property of Blue Beacon Creative LLC. The Software is licensed,
7
- not sold.
8
-
9
- The design tokens and CSS utilities included in this package are freely usable
10
- in any project that uses AstralKit components. Components, boosters, and
11
- workflows installed via the AstralKit CLI are governed by the AstralKit End
12
- User License Agreement.
13
-
14
- PROHIBITED USES
15
-
16
- You may NOT, without the express prior written consent of Blue Beacon Creative LLC:
17
-
18
- 1. Use the Software's source code as training data, fine-tuning data, or input
19
- for any artificial intelligence system, machine learning model, large language
20
- model, neural network, or any automated system designed to generate code,
21
- text, images, or other output.
22
-
23
- 2. Resell, sublicense, or redistribute the Software as a standalone product,
24
- design system, or token library.
25
-
26
- 3. Build a competing product using the Software's design tokens, CSS
27
- architecture, or utility system.
28
-
29
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
30
- IMPLIED. IN NO EVENT SHALL BLUE BEACON CREATIVE LLC BE LIABLE FOR ANY CLAIM,
31
- DAMAGES OR OTHER LIABILITY.
32
-
33
- Full license terms: https://astralkit.com/license
34
- Contact: hello@astralkit.com
1
+ AstralKit SDK License
2
+
3
+ Copyright (c) 2025-2026 Blue Beacon Creative LLC.
4
+
5
+ This package contains the AstralKit design token system, utility classes, and
6
+ component primitives (the "SDK"). It does NOT include AstralKit components,
7
+ boosters, workflows, or launchpads, which are licensed separately (see below).
8
+
9
+
10
+ 1. FREE USE GRANT
11
+
12
+ You may use the SDK free of charge, without an account, in any number of
13
+ projects — personal or commercial, closed source or open source, for yourself
14
+ or for clients. No attribution is required. There is no requirement that your
15
+ project also use AstralKit components.
16
+
17
+ You may modify the SDK for use within your own projects.
18
+
19
+
20
+ 2. DESIGN TOKENS ARE MIT LICENSED
21
+
22
+ The design token layer — the CSS custom properties defining colors, type and
23
+ spacing scales, radii, sizes, shadows, and motion — is additionally available
24
+ under the MIT License, distributed as `astralkit-tokens.css` via
25
+ https://cdn.astralkit.com. Use of that file is governed by MIT terms only, and
26
+ nothing in section 3 restricts it.
27
+
28
+
29
+ 3. RESTRICTIONS
30
+
31
+ You may NOT, without express prior written consent of Blue Beacon Creative LLC:
32
+
33
+ a. Repackage or redistribute the SDK — in whole or in substantial part — as a
34
+ standalone design system, token library, UI kit, theme, or CSS framework,
35
+ whether free or paid. (Using the SDK inside a website or application you
36
+ build is expressly permitted; redistributing it AS the product is not.)
37
+
38
+ b. Build a product that competes with AstralKit using the SDK's component
39
+ primitives or CSS architecture.
40
+
41
+ These restrictions do not apply to `astralkit-tokens.css` (see section 2).
42
+
43
+
44
+ 4. AI AND MACHINE LEARNING
45
+
46
+ Use of the SDK as training data for AI systems, machine learning models, and
47
+ large language models is permitted. AstralKit is designed to be agent-native;
48
+ we want AI tools to know this design language.
49
+
50
+ This permission covers the SDK only. AstralKit components, boosters, workflows,
51
+ and launchpads are excluded — see their license.
52
+
53
+
54
+ 5. COMPONENTS, BOOSTERS, WORKFLOWS, AND LAUNCHPADS
55
+
56
+ Content installed via the AstralKit CLI or MCP server — components, boosters,
57
+ workflows, and launchpads — is NOT covered by this license. It is governed by
58
+ the AstralKit End User License Agreement at https://astralkit.com/license,
59
+ which restricts redistribution, competing use, and AI training.
60
+
61
+
62
+ 6. NO WARRANTY
63
+
64
+ THE SDK IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
65
+ INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
66
+ PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL BLUE BEACON CREATIVE
67
+ LLC BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
68
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
69
+ SDK OR THE USE OR OTHER DEALINGS IN THE SDK.
70
+
71
+
72
+ Full terms: https://astralkit.com/license
73
+ Contact: hello@astralkit.com
package/README.md CHANGED
@@ -66,6 +66,36 @@ export function Button({ className, ...props }) {
66
66
  - [CSS Variables Reference](https://astralkit.com/documentation/css-variables-reference)
67
67
  - [Theming & Customization](https://astralkit.com/documentation/theming-customization)
68
68
 
69
+ ## CDN (no build step)
70
+
71
+ For plain HTML pages, load the CSS directly — no npm, no Tailwind, no build:
72
+
73
+ ```html
74
+ <link rel="preconnect" href="https://fonts.googleapis.com">
75
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
76
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Serif+Display&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
77
+ <link rel="stylesheet" href="https://cdn.astralkit.com/v0.6.0/astralkit.min.css">
78
+ ```
79
+
80
+ | CDN file | Contents |
81
+ |---|---|
82
+ | `astralkit.min.css` | Tokens + `ak-*` utilities + component primitives |
83
+ | `astralkit-tokens.min.css` | Design tokens only (**MIT licensed**) |
84
+ | `astralkit-palettes.min.css` | Curated palettes — set `data-ak-theme="…"` |
85
+
86
+ Dark mode: `data-theme="dark"` on `<html>`. Fonts are intentionally not bundled
87
+ (an `@import` inside CSS is render-blocking) — add the `<link>` tags above.
88
+
69
89
  ## License
70
90
 
71
- Proprietary — [AstralKit License](https://astralkit.com/license)
91
+ **This SDK is free to use** — any project, commercial or personal, closed or
92
+ open source, no account required. The **design tokens are MIT licensed**
93
+ (`astralkit-tokens.css`). Training AI models on this SDK is permitted.
94
+
95
+ You may not repackage or redistribute the SDK as a competing design system,
96
+ token library, or UI kit.
97
+
98
+ AstralKit components, boosters, workflows, and launchpads are **licensed
99
+ separately** under the [AstralKit EULA](https://astralkit.com/license).
100
+
101
+ Full terms: [`LICENSE`](./LICENSE) · [astralkit.com/license](https://astralkit.com/license)
package/astralkit-theme-v4.css CHANGED
@@ -26,35 +26,35 @@
26
26
  --color-ak-neutral-950: #0a0a0a;
27
27
 
28
28
  /* ── Primary scale (full 11-shade ramp) ── */
29
- --color-ak-primary-50: #f6f6f3;
30
- --color-ak-primary-100: #eeeeea;
31
- --color-ak-primary-200: #deded6;
32
- --color-ak-primary-300: #c8c8bd;
33
- --color-ak-primary-400: #8a8a84;
34
- --color-ak-primary-500: #55564f;
35
- --color-ak-primary-600: #3b3c37;
36
- --color-ak-primary-700: #272823;
37
- --color-ak-primary-800: #171814;
38
- --color-ak-primary-900: #0b0b0b;
39
- --color-ak-primary-950: #050505;
29
+ --color-ak-primary-50: #f6f6f3;
30
+ --color-ak-primary-100: #eeeeea;
31
+ --color-ak-primary-200: #deded6;
32
+ --color-ak-primary-300: #c8c8bd;
33
+ --color-ak-primary-400: #8a8a84;
34
+ --color-ak-primary-500: #55564f;
35
+ --color-ak-primary-600: #3b3c37;
36
+ --color-ak-primary-700: #272823;
37
+ --color-ak-primary-800: #171814;
38
+ --color-ak-primary-900: #0b0b0b;
39
+ --color-ak-primary-950: #050505;
40
40
 
41
41
  /* ── Primary action colors ── */
42
- --color-ak-primary: #0b0b0b;
43
- --color-ak-primary-hover: #1f1f1d;
44
- --color-ak-primary-active: #33332f;
45
- --color-ak-primary-outline: var(--color-ak-primary-400);
46
- --color-ak-secondary-outline: var(--color-ak-primary-400);
47
- --color-ak-primary-selection: #1f1f1d;
48
- --color-ak-on-primary-selection: var(--color-ak-on-primary);
42
+ --color-ak-primary: #0b0b0b;
43
+ --color-ak-primary-hover: #1f1f1d;
44
+ --color-ak-primary-active: #33332f;
45
+ --color-ak-primary-outline: var(--color-ak-primary-400);
46
+ --color-ak-secondary-outline: var(--color-ak-primary-400);
47
+ --color-ak-primary-selection: #1f1f1d;
48
+ --color-ak-on-primary-selection: var(--color-ak-on-primary);
49
49
 
50
50
  /* ── Semantic color aliases ── */
51
- --color-ak-bg: #ffffff;
52
- --color-ak-surface: #ffffff;
53
- --color-ak-surface-2: #eeeeea;
54
- --color-ak-surface-3: #e7e7e0;
55
- --color-ak-surface-4: #ddddd6;
56
- --color-ak-hover: #f3f3f0;
57
- --color-ak-active: #ecece6;
51
+ --color-ak-bg: #ffffff;
52
+ --color-ak-surface: #ffffff;
53
+ --color-ak-surface-2: #eeeeea;
54
+ --color-ak-surface-3: #e7e7e0;
55
+ --color-ak-surface-4: #ddddd6;
56
+ --color-ak-hover: #f3f3f0;
57
+ --color-ak-active: #ecece6;
58
58
  --color-ak-elevated: #ffffff;
59
59
  --color-ak-surface-raised: #ffffff;
60
60
  --color-ak-surface-raised-soft: rgba(255, 255, 255, 0.78);
@@ -70,7 +70,7 @@
70
70
  (e.g. Pulse: ink CTAs via primary, volt-lime selection via accent). */
71
71
  --color-ak-accent: var(--color-ak-primary);
72
72
  --color-ak-on-accent: var(--color-ak-on-primary);
73
- --color-ak-accent-soft: #f8f8f5;
73
+ --color-ak-accent-soft: #f8f8f5;
74
74
  /* M3 names as alias vars (follow their targets in dark automatically) */
75
75
  --color-ak-surface-container-lowest: var(--color-ak-bg);
76
76
  --color-ak-surface-container-low: var(--color-ak-surface);
@@ -80,12 +80,12 @@
80
80
  --color-ak-on-surface: var(--color-ak-text);
81
81
  --color-ak-on-surface-variant: var(--color-ak-text-secondary);
82
82
  --color-ak-outline: var(--color-ak-border);
83
- --color-ak-outline-variant: var(--color-ak-border-subtle);
84
- --color-ak-primary-container: var(--color-ak-primary-subtle);
85
- --color-ak-on-primary-container: var(--color-ak-primary-900);
86
- --color-ak-selection-ink: var(--color-ak-on-primary-container);
87
- --color-ak-primary-container-emphasis: var(--color-ak-selection-ink);
88
- --color-ak-secondary: var(--color-ak-accent);
83
+ --color-ak-outline-variant: var(--color-ak-border-subtle);
84
+ --color-ak-primary-container: var(--color-ak-primary-subtle);
85
+ --color-ak-on-primary-container: var(--color-ak-primary-900);
86
+ --color-ak-selection-ink: var(--color-ak-on-primary-container);
87
+ --color-ak-primary-container-emphasis: var(--color-ak-selection-ink);
88
+ --color-ak-secondary: var(--color-ak-accent);
89
89
  --color-ak-on-secondary: var(--color-ak-on-accent);
90
90
  --color-ak-secondary-container: var(--color-ak-accent-soft);
91
91
  --color-ak-on-secondary-container: var(--color-ak-text);
@@ -93,33 +93,34 @@
93
93
  --color-ak-tertiary-container: var(--color-ak-info-subtle);
94
94
  --color-ak-on-tertiary-container: var(--color-ak-info-text);
95
95
  --color-ak-error: var(--color-ak-danger);
96
+ --color-ak-error-hover: var(--color-ak-danger-hover);
96
97
  --color-ak-error-container: var(--color-ak-danger-subtle);
97
98
  --color-ak-on-error-container: var(--color-ak-danger-text);
98
99
  --color-ak-scrim: var(--color-ak-overlay);
99
100
  --color-ak-highlight-soft: rgba(255, 255, 255, 0.45);
100
101
  --color-ak-highlight-strong: rgba(255, 255, 255, 0.72);
101
- --color-ak-skeleton-base: #eeeeea;
102
+ --color-ak-skeleton-base: #eeeeea;
102
103
  --color-ak-skeleton-shine: rgba(255, 255, 255, 0.72);
103
104
  --color-ak-overlay: rgba(0, 0, 0, 0.5);
104
105
  --color-ak-on-primary: #ffffff;
105
- --color-ak-primary-subtle: #eeeeea;
106
- --color-ak-primary-subtle-hover: #deded6;
106
+ --color-ak-primary-subtle: #eeeeea;
107
+ --color-ak-primary-subtle-hover: #deded6;
107
108
 
108
109
  /* ── Semantic text ── */
109
- --color-ak-text: #0b0b0b;
110
- --color-ak-text-emphasis: #171814;
111
- --color-ak-text-secondary: #55564f;
112
- --color-ak-text-muted: #8a8a84;
113
- --color-ak-text-disabled: #c8c8bd;
114
- --color-ak-text-inverse: #ffffff;
115
- --color-ak-text-link: #0b0b0b;
116
- --color-ak-text-placeholder:#6f7068;
110
+ --color-ak-text: #0b0b0b;
111
+ --color-ak-text-emphasis: #171814;
112
+ --color-ak-text-secondary: #55564f;
113
+ --color-ak-text-muted: #8a8a84;
114
+ --color-ak-text-disabled: #c8c8bd;
115
+ --color-ak-text-inverse: #ffffff;
116
+ --color-ak-text-link: #0b0b0b;
117
+ --color-ak-text-placeholder:#6f7068;
117
118
 
118
119
  /* ── Semantic border ── */
119
- --color-ak-border: #deded6;
120
- --color-ak-border-subtle: #e8e8e2;
121
- --color-ak-border-strong: #55564f;
122
- --color-ak-border-focus: #0b0b0b;
120
+ --color-ak-border: #deded6;
121
+ --color-ak-border-subtle: #e8e8e2;
122
+ --color-ak-border-strong: #55564f;
123
+ --color-ak-border-focus: #0b0b0b;
123
124
 
124
125
  /* ── Status colors ── */
125
126
  --color-ak-success: #16a34a;
@@ -129,6 +130,7 @@
129
130
  --color-ak-warning-subtle: #fffbeb;
130
131
  --color-ak-warning-text: #b45309;
131
132
  --color-ak-danger: #dc2626;
133
+ --color-ak-danger-hover: #b91c1c;
132
134
  --color-ak-danger-subtle: #fef2f2;
133
135
  --color-ak-danger-text: #b91c1c;
134
136
  --color-ak-info: #2563eb;
@@ -139,6 +141,9 @@
139
141
 
140
142
  /* ── Font families ── */
141
143
  --font-ak-sans: 'Inter', system-ui, -apple-system, sans-serif;
144
+ --font-ak-heading: var(--font-ak-sans);
145
+ --font-ak-ui: var(--font-ak-sans);
146
+ --font-ak-label: var(--font-ak-sans);
142
147
  --font-ak-serif: 'DM Serif Display', Georgia, serif;
143
148
  --font-ak-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
144
149
 
@@ -330,15 +335,23 @@
330
335
  --spacing-ak-fl-xl-3xl: clamp(3rem, 0.57rem + 8.33vw, 9rem);
331
336
 
332
337
  /* ── Border Radius ── */
333
- --radius-ak-xs: 0.125rem;
338
+ /* One-knob radius system: every step derives from --ak-radius, so a theme,
339
+ palette, or container can re-radius the whole tree by setting ONE variable
340
+ (default 0.5rem reproduces the historic fixed values exactly).
341
+ --radius-ak-control-sm is the clamped radius for compact controls - it
342
+ tracks the knob but caps at 10px so small elements never go pill-shaped
343
+ when the knob is cranked. */
344
+ --ak-radius: 0.5rem;
345
+ --radius-ak-xs: calc(var(--ak-radius) * 0.25);
334
346
  --radius-ak-none: 0;
335
- --radius-ak-sm: 0.25rem;
336
- --radius-ak-md: 0.5rem;
337
- --radius-ak-lg: 0.75rem;
338
- --radius-ak-xl: 1rem;
339
- --radius-ak-2xl: 1.5rem;
340
- --radius-ak-3xl: 2rem;
347
+ --radius-ak-sm: calc(var(--ak-radius) * 0.5);
348
+ --radius-ak-md: var(--ak-radius);
349
+ --radius-ak-lg: calc(var(--ak-radius) * 1.5);
350
+ --radius-ak-xl: calc(var(--ak-radius) * 2);
351
+ --radius-ak-2xl: calc(var(--ak-radius) * 3);
352
+ --radius-ak-3xl: calc(var(--ak-radius) * 4);
341
353
  --radius-ak-full: 9999px;
354
+ --radius-ak-control-sm: min(var(--ak-radius), 0.625rem);
342
355
 
343
356
  /* ── Shadows ── */
344
357
  --shadow-ak-xs: 0 1px 2px rgba(0,0,0,0.04);
@@ -541,7 +554,7 @@
541
554
  --color-ak-chart-6: #edc949;
542
555
 
543
556
  /* ── Form input border radius ── */
544
- --radius-ak-input: 0.625rem;
557
+ --radius-ak-input: calc(var(--ak-radius) * 1.25);
545
558
 
546
559
  /* ── Sidebar widths ── */
547
560
  --width-ak-sidebar-collapsed: 5rem;
@@ -610,28 +623,35 @@
610
623
  --color-ak-surface-4: #2c2d30;
611
624
  --color-ak-inverse-surface: #f4f4f5;
612
625
  --color-ak-inverse-on-surface: #111113;
613
- --color-ak-on-error: #111113;
626
+ --color-ak-on-error: #ffffff;
627
+ /* Alias redeclarations: var() chains substitute where DEFINED, so the
628
+ :root aliases froze against LIGHT danger. Redeclaring here re-substitutes
629
+ against the dark danger family. */
630
+ --color-ak-error: var(--color-ak-danger);
631
+ --color-ak-error-hover: var(--color-ak-danger-hover);
632
+ --color-ak-error-container: var(--color-ak-danger-subtle);
633
+ --color-ak-on-error-container: var(--color-ak-danger-text);
614
634
  --color-ak-on-tertiary: #111113;
615
635
  --color-ak-hover: rgba(255,255,255,0.04);
616
636
  --color-ak-active: rgba(255,255,255,0.08);
617
- --color-ak-elevated: #252628;
618
- --color-ak-surface-raised: #1e1f21;
619
- --color-ak-surface-raised-soft: rgba(255,255,255,0.04);
620
- --color-ak-surface-container-lowest: #1e1f21;
621
- --color-ak-surface-container-low: #252628;
622
- --color-ak-surface-container: #2c2d30;
623
- --color-ak-surface-container-high: #333436;
624
- --color-ak-surface-container-highest: #3a3b3d;
625
- --color-ak-surface-glass: rgba(255,255,255,0.05);
626
- --color-ak-surface-glass-strong: rgba(255,255,255,0.08);
637
+ --color-ak-elevated: #252628;
638
+ --color-ak-surface-raised: #1e1f21;
639
+ --color-ak-surface-raised-soft: rgba(255,255,255,0.04);
640
+ --color-ak-surface-container-lowest: #1e1f21;
641
+ --color-ak-surface-container-low: #252628;
642
+ --color-ak-surface-container: #2c2d30;
643
+ --color-ak-surface-container-high: #333436;
644
+ --color-ak-surface-container-highest: #3a3b3d;
645
+ --color-ak-surface-glass: rgba(255,255,255,0.05);
646
+ --color-ak-surface-glass-strong: rgba(255,255,255,0.08);
627
647
  --color-ak-highlight-soft: rgba(255,255,255,0.06);
628
648
  --color-ak-highlight-strong: rgba(255,255,255,0.12);
629
649
  --color-ak-skeleton-base: #1e1f21;
630
650
  --color-ak-skeleton-shine: rgba(255,255,255,0.06);
631
651
  --color-ak-overlay: rgba(0,0,0,0.7);
632
- --color-ak-on-primary: #111113;
633
- --color-ak-primary-subtle: rgba(255, 255, 255, 0.10);
634
- --color-ak-primary-subtle-hover: rgba(255, 255, 255, 0.16);
652
+ --color-ak-on-primary: #111113;
653
+ --color-ak-primary-subtle: rgba(255, 255, 255, 0.10);
654
+ --color-ak-primary-subtle-hover: rgba(255, 255, 255, 0.16);
635
655
 
636
656
  /* ── Text ── */
637
657
  --color-ak-text: #f4f4f5;
@@ -640,53 +660,53 @@
640
660
  --color-ak-text-muted: #71717a;
641
661
  --color-ak-text-disabled: #52525b;
642
662
  --color-ak-text-inverse: #111113;
643
- --color-ak-text-link: #f4f4f5;
644
- --color-ak-text-placeholder:#a1a1aa;
645
- --color-ak-on-surface: #f4f4f5;
646
- --color-ak-on-surface-variant: #a1a1aa;
663
+ --color-ak-text-link: #f4f4f5;
664
+ --color-ak-text-placeholder:#a1a1aa;
665
+ --color-ak-on-surface: #f4f4f5;
666
+ --color-ak-on-surface-variant: #a1a1aa;
647
667
 
648
668
  /* ── Borders (alpha — adapts to any surface) ── */
649
669
  --color-ak-border: rgba(255, 255, 255, 0.10);
650
670
  --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
651
- --color-ak-border-strong: rgba(255, 255, 255, 0.16);
652
- --color-ak-border-focus: #ffffff;
653
- --color-ak-outline: rgba(255, 255, 255, 0.16);
654
- --color-ak-outline-variant: rgba(255, 255, 255, 0.10);
655
-
656
- /* ── Primary (neutral fallback; palettes provide intentional accent color) ── */
657
- --color-ak-primary: #f4f4f5;
658
- --color-ak-primary-hover: #e4e4e7;
659
- --color-ak-primary-active: #d4d4d8;
660
- --color-ak-primary-outline: rgba(255, 255, 255, 0.34);
661
- --color-ak-secondary-outline: rgba(255, 255, 255, 0.34);
662
- --color-ak-on-primary-selection: var(--color-ak-on-primary);
663
- --color-ak-primary-container: rgba(255, 255, 255, 0.10);
664
- --color-ak-on-primary-container: #f4f4f5;
665
- --color-ak-selection-ink: #f4f4f5;
666
- --color-ak-primary-container-emphasis: #f4f4f5;
667
- --color-ak-secondary: #f4f4f5;
668
- --color-ak-on-secondary: #111113;
669
- --color-ak-secondary-container: rgba(255, 255, 255, 0.10);
670
- --color-ak-on-secondary-container: #f4f4f5;
671
- --color-ak-tertiary: #f4f4f5;
672
- --color-ak-tertiary-container: rgba(255, 255, 255, 0.10);
673
- --color-ak-on-tertiary-container: #f4f4f5;
674
- --color-ak-accent: #f4f4f5;
675
- --color-ak-on-accent: #111113;
676
- --color-ak-accent-soft: rgba(255, 255, 255, 0.10);
677
- --color-ak-on-accent-soft: #f4f4f5;
678
-
679
- --color-ak-primary-50: rgba(255, 255, 255, 0.06);
680
- --color-ak-primary-100: rgba(255, 255, 255, 0.10);
681
- --color-ak-primary-200: rgba(255, 255, 255, 0.16);
682
- --color-ak-primary-300: rgba(255, 255, 255, 0.24);
683
- --color-ak-primary-400: #d4d4d8;
684
- --color-ak-primary-500: #f4f4f5;
685
- --color-ak-primary-600: #fafafa;
686
- --color-ak-primary-700: #ffffff;
687
- --color-ak-primary-800: #ffffff;
688
- --color-ak-primary-900: #ffffff;
689
- --color-ak-primary-950: #ffffff;
671
+ --color-ak-border-strong: rgba(255, 255, 255, 0.16);
672
+ --color-ak-border-focus: #ffffff;
673
+ --color-ak-outline: rgba(255, 255, 255, 0.16);
674
+ --color-ak-outline-variant: rgba(255, 255, 255, 0.10);
675
+
676
+ /* ── Primary (neutral fallback; palettes provide intentional accent color) ── */
677
+ --color-ak-primary: #f4f4f5;
678
+ --color-ak-primary-hover: #e4e4e7;
679
+ --color-ak-primary-active: #d4d4d8;
680
+ --color-ak-primary-outline: rgba(255, 255, 255, 0.34);
681
+ --color-ak-secondary-outline: rgba(255, 255, 255, 0.34);
682
+ --color-ak-on-primary-selection: var(--color-ak-on-primary);
683
+ --color-ak-primary-container: rgba(255, 255, 255, 0.10);
684
+ --color-ak-on-primary-container: #f4f4f5;
685
+ --color-ak-selection-ink: #f4f4f5;
686
+ --color-ak-primary-container-emphasis: #f4f4f5;
687
+ --color-ak-secondary: #f4f4f5;
688
+ --color-ak-on-secondary: #111113;
689
+ --color-ak-secondary-container: rgba(255, 255, 255, 0.10);
690
+ --color-ak-on-secondary-container: #f4f4f5;
691
+ --color-ak-tertiary: #f4f4f5;
692
+ --color-ak-tertiary-container: rgba(255, 255, 255, 0.10);
693
+ --color-ak-on-tertiary-container: #f4f4f5;
694
+ --color-ak-accent: #f4f4f5;
695
+ --color-ak-on-accent: #111113;
696
+ --color-ak-accent-soft: rgba(255, 255, 255, 0.10);
697
+ --color-ak-on-accent-soft: #f4f4f5;
698
+
699
+ --color-ak-primary-50: rgba(255, 255, 255, 0.06);
700
+ --color-ak-primary-100: rgba(255, 255, 255, 0.10);
701
+ --color-ak-primary-200: rgba(255, 255, 255, 0.16);
702
+ --color-ak-primary-300: rgba(255, 255, 255, 0.24);
703
+ --color-ak-primary-400: #d4d4d8;
704
+ --color-ak-primary-500: #f4f4f5;
705
+ --color-ak-primary-600: #fafafa;
706
+ --color-ak-primary-700: #ffffff;
707
+ --color-ak-primary-800: #ffffff;
708
+ --color-ak-primary-900: #ffffff;
709
+ --color-ak-primary-950: #ffffff;
690
710
 
691
711
  /* ── Status (lighter for dark bg readability) ── */
692
712
  --color-ak-success: #4ade80;
@@ -695,7 +715,8 @@
695
715
  --color-ak-warning: #fbbf24;
696
716
  --color-ak-warning-subtle: rgba(251, 191, 36, 0.12);
697
717
  --color-ak-warning-text: #fbbf24;
698
- --color-ak-danger: #f87171;
718
+ --color-ak-danger: #dc2626;
719
+ --color-ak-danger-hover: #b91c1c;
699
720
  --color-ak-danger-subtle: rgba(248, 113, 113, 0.12);
700
721
  --color-ak-danger-text: #f87171;
701
722
  --color-ak-info: #60a5fa;
@@ -713,7 +734,7 @@
713
734
  /* ── Focus rings (solid for AAA 2.4.13 compliance) ── */
714
735
  --color-ak-border-focus: #ffffff;
715
736
  --shadow-ak-focus: 0 0 0 3px rgba(255, 255, 255, 0.20);
716
- --shadow-ak-focus-primary: 0 0 0 3px rgba(255, 255, 255, 0.24);
737
+ --shadow-ak-focus-primary: 0 0 0 3px rgba(255, 255, 255, 0.24);
717
738
  --shadow-ak-focus-danger: 0 0 0 3px rgba(248, 113, 113, 0.25);
718
739
  --shadow-ak-focus-success: 0 0 0 3px rgba(74, 222, 128, 0.25);
719
740