astralkit 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/astralkit-theme-v4.css +104 -71
  3. package/astralkit-theme.css +104 -71
  4. package/astralkit-utilities.css +276 -2
  5. package/lib/theme-context.d.ts +17 -0
  6. package/lib/theme-context.js +33 -0
  7. package/package.json +7 -2
  8. package/palettes.css +961 -90
  9. package/primitives/effects.css +373 -115
  10. package/tailwind.cjs +6 -4
package/CHANGELOG.md CHANGED
@@ -5,6 +5,12 @@ 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.6.0] — 2026-07-06
9
+
10
+ ### Added
11
+ - **`astralkit/theme-context` export** — `AkThemeProvider` / `useAkTheme`, the React context that propagates per-component dark mode across Radix portal boundaries (Dialog/DropdownMenu/Popover content portals to `document.body`, escaping the `data-ak-dark-*` attribute scope). Installable components now import this from the SDK instead of shipping a local provider file. Adds `react >= 18` as an **optional** peer dependency — CSS-only consumers are unaffected.
12
+ - **Sidebar theming layer** (authored post-0.5.0, first published here): `primitives/sidebar.css`, `ak-dark-material` / `ak-mirror-shimmer` and `ak-sidebar-*` utilities, plus the gradient / selection / inverse / surface-container token extensions the themed sidebar set depends on.
13
+
8
14
  ## [0.5.0] — 2026-06-12
9
15
 
10
16
  ### Added (Material 3 role grammar)
package/astralkit-theme-v4.css CHANGED
@@ -26,31 +26,35 @@
26
26
  --color-ak-neutral-950: #0a0a0a;
27
27
 
28
28
  /* ── Primary scale (full 11-shade ramp) ── */
29
- --color-ak-primary-50: #f5f5f5;
30
- --color-ak-primary-100: #e5e5e5;
31
- --color-ak-primary-200: #cccccc;
32
- --color-ak-primary-300: #a3a3a3;
33
- --color-ak-primary-400: #737373;
34
- --color-ak-primary-500: #525252;
35
- --color-ak-primary-600: #404040;
36
- --color-ak-primary-700: #333333;
37
- --color-ak-primary-800: #1a1a1a;
38
- --color-ak-primary-900: #000000;
39
- --color-ak-primary-950: #000000;
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: #000000;
43
- --color-ak-primary-hover: #1a1a1a;
44
- --color-ak-primary-active: #333333;
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);
45
49
 
46
50
  /* ── Semantic color aliases ── */
47
- --color-ak-bg: #ffffff;
48
- --color-ak-surface: #fafafa;
49
- --color-ak-surface-2: #f5f5f5;
50
- --color-ak-surface-3: #efefef;
51
- --color-ak-surface-4: #e9e9e9;
52
- --color-ak-hover: #f7f7f7;
53
- --color-ak-active: #f0f0f0;
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;
54
58
  --color-ak-elevated: #ffffff;
55
59
  --color-ak-surface-raised: #ffffff;
56
60
  --color-ak-surface-raised-soft: rgba(255, 255, 255, 0.78);
@@ -66,7 +70,7 @@
66
70
  (e.g. Pulse: ink CTAs via primary, volt-lime selection via accent). */
67
71
  --color-ak-accent: var(--color-ak-primary);
68
72
  --color-ak-on-accent: var(--color-ak-on-primary);
69
- --color-ak-accent-soft: var(--color-ak-surface-2);
73
+ --color-ak-accent-soft: #f8f8f5;
70
74
  /* M3 names as alias vars (follow their targets in dark automatically) */
71
75
  --color-ak-surface-container-lowest: var(--color-ak-bg);
72
76
  --color-ak-surface-container-low: var(--color-ak-surface);
@@ -76,10 +80,12 @@
76
80
  --color-ak-on-surface: var(--color-ak-text);
77
81
  --color-ak-on-surface-variant: var(--color-ak-text-secondary);
78
82
  --color-ak-outline: var(--color-ak-border);
79
- --color-ak-outline-variant: var(--color-ak-border-subtle);
80
- --color-ak-primary-container: var(--color-ak-primary-subtle);
81
- --color-ak-on-primary-container: var(--color-ak-primary-900);
82
- --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);
83
89
  --color-ak-on-secondary: var(--color-ak-on-accent);
84
90
  --color-ak-secondary-container: var(--color-ak-accent-soft);
85
91
  --color-ak-on-secondary-container: var(--color-ak-text);
@@ -92,28 +98,28 @@
92
98
  --color-ak-scrim: var(--color-ak-overlay);
93
99
  --color-ak-highlight-soft: rgba(255, 255, 255, 0.45);
94
100
  --color-ak-highlight-strong: rgba(255, 255, 255, 0.72);
95
- --color-ak-skeleton-base: #ededed;
101
+ --color-ak-skeleton-base: #eeeeea;
96
102
  --color-ak-skeleton-shine: rgba(255, 255, 255, 0.72);
97
103
  --color-ak-overlay: rgba(0, 0, 0, 0.5);
98
104
  --color-ak-on-primary: #ffffff;
99
- --color-ak-primary-subtle: #f5f5f5;
100
- --color-ak-primary-subtle-hover: #e5e5e5;
105
+ --color-ak-primary-subtle: #eeeeea;
106
+ --color-ak-primary-subtle-hover: #deded6;
101
107
 
102
108
  /* ── Semantic text ── */
103
- --color-ak-text: #171717;
104
- --color-ak-text-emphasis: #2b2b2b;
105
- --color-ak-text-secondary: #525252;
106
- --color-ak-text-muted: #a3a3a3;
107
- --color-ak-text-disabled: #d4d4d4;
108
- --color-ak-text-inverse: #ffffff;
109
- --color-ak-text-link: #000000;
110
- --color-ak-text-placeholder:#525252;
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;
111
117
 
112
118
  /* ── Semantic border ── */
113
- --color-ak-border: #dee2e6;
114
- --color-ak-border-subtle: #e5e5e5;
115
- --color-ak-border-strong: #525252;
116
- --color-ak-border-focus: #000000;
119
+ --color-ak-border: #deded6;
120
+ --color-ak-border-subtle: #e8e8e2;
121
+ --color-ak-border-strong: #55564f;
122
+ --color-ak-border-focus: #0b0b0b;
117
123
 
118
124
  /* ── Status colors ── */
119
125
  --color-ak-success: #16a34a;
@@ -608,19 +614,24 @@
608
614
  --color-ak-on-tertiary: #111113;
609
615
  --color-ak-hover: rgba(255,255,255,0.04);
610
616
  --color-ak-active: rgba(255,255,255,0.08);
611
- --color-ak-elevated: #252628;
612
- --color-ak-surface-raised: #1e1f21;
613
- --color-ak-surface-raised-soft: rgba(255,255,255,0.04);
614
- --color-ak-surface-glass: rgba(255,255,255,0.05);
615
- --color-ak-surface-glass-strong: 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);
616
627
  --color-ak-highlight-soft: rgba(255,255,255,0.06);
617
628
  --color-ak-highlight-strong: rgba(255,255,255,0.12);
618
629
  --color-ak-skeleton-base: #1e1f21;
619
630
  --color-ak-skeleton-shine: rgba(255,255,255,0.06);
620
631
  --color-ak-overlay: rgba(0,0,0,0.7);
621
- --color-ak-on-primary: #111113;
622
- --color-ak-primary-subtle: rgba(129, 140, 248, 0.15);
623
- --color-ak-primary-subtle-hover: rgba(129, 140, 248, 0.24);
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);
624
635
 
625
636
  /* ── Text ── */
626
637
  --color-ak-text: #f4f4f5;
@@ -629,31 +640,53 @@
629
640
  --color-ak-text-muted: #71717a;
630
641
  --color-ak-text-disabled: #52525b;
631
642
  --color-ak-text-inverse: #111113;
632
- --color-ak-text-link: #818cf8;
633
- --color-ak-text-placeholder:#a1a1aa;
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;
634
647
 
635
648
  /* ── Borders (alpha — adapts to any surface) ── */
636
649
  --color-ak-border: rgba(255, 255, 255, 0.10);
637
650
  --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
638
- --color-ak-border-strong: rgba(255, 255, 255, 0.16);
639
- --color-ak-border-focus: #ffffff;
640
-
641
- /* ── Primary (lightened for contrast on dark bg) ── */
642
- --color-ak-primary: #818cf8;
643
- --color-ak-primary-hover: #a5b4fc;
644
- --color-ak-primary-active: #6366f1;
645
-
646
- --color-ak-primary-50: rgba(129, 140, 248, 0.06);
647
- --color-ak-primary-100: rgba(129, 140, 248, 0.10);
648
- --color-ak-primary-200: rgba(129, 140, 248, 0.16);
649
- --color-ak-primary-300: rgba(129, 140, 248, 0.24);
650
- --color-ak-primary-400: #6366f1;
651
- --color-ak-primary-500: #818cf8;
652
- --color-ak-primary-600: #a5b4fc;
653
- --color-ak-primary-700: #c7d2fe;
654
- --color-ak-primary-800: #e0e7ff;
655
- --color-ak-primary-900: #eef2ff;
656
- --color-ak-primary-950: #f5f7ff;
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;
657
690
 
658
691
  /* ── Status (lighter for dark bg readability) ── */
659
692
  --color-ak-success: #4ade80;
@@ -680,7 +713,7 @@
680
713
  /* ── Focus rings (solid for AAA 2.4.13 compliance) ── */
681
714
  --color-ak-border-focus: #ffffff;
682
715
  --shadow-ak-focus: 0 0 0 3px rgba(255, 255, 255, 0.20);
683
- --shadow-ak-focus-primary: 0 0 0 3px rgba(129, 140, 248, 0.30);
716
+ --shadow-ak-focus-primary: 0 0 0 3px rgba(255, 255, 255, 0.24);
684
717
  --shadow-ak-focus-danger: 0 0 0 3px rgba(248, 113, 113, 0.25);
685
718
  --shadow-ak-focus-success: 0 0 0 3px rgba(74, 222, 128, 0.25);
686
719
 
package/astralkit-theme.css CHANGED
@@ -28,31 +28,35 @@
28
28
  --color-ak-neutral-950: #0a0a0a;
29
29
 
30
30
  /* ── Primary scale (full 11-shade ramp) ── */
31
- --color-ak-primary-50: #f5f5f5;
32
- --color-ak-primary-100: #e5e5e5;
33
- --color-ak-primary-200: #cccccc;
34
- --color-ak-primary-300: #a3a3a3;
35
- --color-ak-primary-400: #737373;
36
- --color-ak-primary-500: #525252;
37
- --color-ak-primary-600: #404040;
38
- --color-ak-primary-700: #333333;
39
- --color-ak-primary-800: #1a1a1a;
40
- --color-ak-primary-900: #000000;
41
- --color-ak-primary-950: #000000;
31
+ --color-ak-primary-50: #f6f6f3;
32
+ --color-ak-primary-100: #eeeeea;
33
+ --color-ak-primary-200: #deded6;
34
+ --color-ak-primary-300: #c8c8bd;
35
+ --color-ak-primary-400: #8a8a84;
36
+ --color-ak-primary-500: #55564f;
37
+ --color-ak-primary-600: #3b3c37;
38
+ --color-ak-primary-700: #272823;
39
+ --color-ak-primary-800: #171814;
40
+ --color-ak-primary-900: #0b0b0b;
41
+ --color-ak-primary-950: #050505;
42
42
 
43
43
  /* ── Primary action colors ── */
44
- --color-ak-primary: #000000;
45
- --color-ak-primary-hover: #1a1a1a;
46
- --color-ak-primary-active: #333333;
44
+ --color-ak-primary: #0b0b0b;
45
+ --color-ak-primary-hover: #1f1f1d;
46
+ --color-ak-primary-active: #33332f;
47
+ --color-ak-primary-outline: var(--color-ak-primary-400);
48
+ --color-ak-secondary-outline: var(--color-ak-primary-400);
49
+ --color-ak-primary-selection: #1f1f1d;
50
+ --color-ak-on-primary-selection: var(--color-ak-on-primary);
47
51
 
48
52
  /* ── Semantic color aliases ── */
49
- --color-ak-bg: #ffffff;
50
- --color-ak-surface: #fafafa;
51
- --color-ak-surface-2: #f5f5f5;
52
- --color-ak-surface-3: #efefef;
53
- --color-ak-surface-4: #e9e9e9;
54
- --color-ak-hover: #f7f7f7;
55
- --color-ak-active: #f0f0f0;
53
+ --color-ak-bg: #ffffff;
54
+ --color-ak-surface: #ffffff;
55
+ --color-ak-surface-2: #eeeeea;
56
+ --color-ak-surface-3: #e7e7e0;
57
+ --color-ak-surface-4: #ddddd6;
58
+ --color-ak-hover: #f3f3f0;
59
+ --color-ak-active: #ecece6;
56
60
  --color-ak-elevated: #ffffff;
57
61
  --color-ak-surface-raised: #ffffff;
58
62
  --color-ak-surface-raised-soft: rgba(255, 255, 255, 0.78);
@@ -68,7 +72,7 @@
68
72
  (e.g. Pulse: ink CTAs via primary, volt-lime selection via accent). */
69
73
  --color-ak-accent: var(--color-ak-primary);
70
74
  --color-ak-on-accent: var(--color-ak-on-primary);
71
- --color-ak-accent-soft: var(--color-ak-surface-2);
75
+ --color-ak-accent-soft: #f8f8f5;
72
76
  /* M3 names as alias vars (follow their targets in dark automatically) */
73
77
  --color-ak-surface-container-lowest: var(--color-ak-bg);
74
78
  --color-ak-surface-container-low: var(--color-ak-surface);
@@ -78,10 +82,12 @@
78
82
  --color-ak-on-surface: var(--color-ak-text);
79
83
  --color-ak-on-surface-variant: var(--color-ak-text-secondary);
80
84
  --color-ak-outline: var(--color-ak-border);
81
- --color-ak-outline-variant: var(--color-ak-border-subtle);
82
- --color-ak-primary-container: var(--color-ak-primary-subtle);
83
- --color-ak-on-primary-container: var(--color-ak-primary-900);
84
- --color-ak-secondary: var(--color-ak-accent);
85
+ --color-ak-outline-variant: var(--color-ak-border-subtle);
86
+ --color-ak-primary-container: var(--color-ak-primary-subtle);
87
+ --color-ak-on-primary-container: var(--color-ak-primary-900);
88
+ --color-ak-selection-ink: var(--color-ak-on-primary-container);
89
+ --color-ak-primary-container-emphasis: var(--color-ak-selection-ink);
90
+ --color-ak-secondary: var(--color-ak-accent);
85
91
  --color-ak-on-secondary: var(--color-ak-on-accent);
86
92
  --color-ak-secondary-container: var(--color-ak-accent-soft);
87
93
  --color-ak-on-secondary-container: var(--color-ak-text);
@@ -94,28 +100,28 @@
94
100
  --color-ak-scrim: var(--color-ak-overlay);
95
101
  --color-ak-highlight-soft: rgba(255, 255, 255, 0.45);
96
102
  --color-ak-highlight-strong: rgba(255, 255, 255, 0.72);
97
- --color-ak-skeleton-base: #ededed;
103
+ --color-ak-skeleton-base: #eeeeea;
98
104
  --color-ak-skeleton-shine: rgba(255, 255, 255, 0.72);
99
105
  --color-ak-overlay: rgba(0, 0, 0, 0.5);
100
106
  --color-ak-on-primary: #ffffff;
101
- --color-ak-primary-subtle: #f5f5f5;
102
- --color-ak-primary-subtle-hover: #e5e5e5;
107
+ --color-ak-primary-subtle: #eeeeea;
108
+ --color-ak-primary-subtle-hover: #deded6;
103
109
 
104
110
  /* ── Semantic text ── */
105
- --color-ak-text: #171717;
106
- --color-ak-text-emphasis: #2b2b2b;
107
- --color-ak-text-secondary: #525252;
108
- --color-ak-text-muted: #a3a3a3;
109
- --color-ak-text-disabled: #d4d4d4;
110
- --color-ak-text-inverse: #ffffff;
111
- --color-ak-text-link: #000000;
112
- --color-ak-text-placeholder:#525252;
111
+ --color-ak-text: #0b0b0b;
112
+ --color-ak-text-emphasis: #171814;
113
+ --color-ak-text-secondary: #55564f;
114
+ --color-ak-text-muted: #8a8a84;
115
+ --color-ak-text-disabled: #c8c8bd;
116
+ --color-ak-text-inverse: #ffffff;
117
+ --color-ak-text-link: #0b0b0b;
118
+ --color-ak-text-placeholder:#6f7068;
113
119
 
114
120
  /* ── Semantic border ── */
115
- --color-ak-border: #dee2e6;
116
- --color-ak-border-subtle: #e5e5e5;
117
- --color-ak-border-strong: #525252;
118
- --color-ak-border-focus: #000000;
121
+ --color-ak-border: #deded6;
122
+ --color-ak-border-subtle: #e8e8e2;
123
+ --color-ak-border-strong: #55564f;
124
+ --color-ak-border-focus: #0b0b0b;
119
125
 
120
126
  /* ── Status colors ── */
121
127
  --color-ak-success: #16a34a;
@@ -608,19 +614,24 @@
608
614
  --color-ak-on-tertiary: #111113;
609
615
  --color-ak-hover: rgba(255,255,255,0.04);
610
616
  --color-ak-active: rgba(255,255,255,0.08);
611
- --color-ak-elevated: #252628;
612
- --color-ak-surface-raised: #1e1f21;
613
- --color-ak-surface-raised-soft: rgba(255,255,255,0.04);
614
- --color-ak-surface-glass: rgba(255,255,255,0.05);
615
- --color-ak-surface-glass-strong: 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);
616
627
  --color-ak-highlight-soft: rgba(255,255,255,0.06);
617
628
  --color-ak-highlight-strong: rgba(255,255,255,0.12);
618
629
  --color-ak-skeleton-base: #1e1f21;
619
630
  --color-ak-skeleton-shine: rgba(255,255,255,0.06);
620
631
  --color-ak-overlay: rgba(0,0,0,0.7);
621
- --color-ak-on-primary: #111113;
622
- --color-ak-primary-subtle: rgba(129, 140, 248, 0.15);
623
- --color-ak-primary-subtle-hover: rgba(129, 140, 248, 0.24);
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);
624
635
 
625
636
  /* ── Text ── */
626
637
  --color-ak-text: #f4f4f5;
@@ -629,31 +640,53 @@
629
640
  --color-ak-text-muted: #71717a;
630
641
  --color-ak-text-disabled: #52525b;
631
642
  --color-ak-text-inverse: #111113;
632
- --color-ak-text-link: #818cf8;
633
- --color-ak-text-placeholder:#a1a1aa;
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;
634
647
 
635
648
  /* ── Borders (alpha — adapts to any surface) ── */
636
649
  --color-ak-border: rgba(255, 255, 255, 0.10);
637
650
  --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
638
- --color-ak-border-strong: rgba(255, 255, 255, 0.16);
639
- --color-ak-border-focus: #ffffff;
640
-
641
- /* ── Primary (lightened for contrast on dark bg) ── */
642
- --color-ak-primary: #818cf8;
643
- --color-ak-primary-hover: #a5b4fc;
644
- --color-ak-primary-active: #6366f1;
645
-
646
- --color-ak-primary-50: rgba(129, 140, 248, 0.06);
647
- --color-ak-primary-100: rgba(129, 140, 248, 0.10);
648
- --color-ak-primary-200: rgba(129, 140, 248, 0.16);
649
- --color-ak-primary-300: rgba(129, 140, 248, 0.24);
650
- --color-ak-primary-400: #6366f1;
651
- --color-ak-primary-500: #818cf8;
652
- --color-ak-primary-600: #a5b4fc;
653
- --color-ak-primary-700: #c7d2fe;
654
- --color-ak-primary-800: #e0e7ff;
655
- --color-ak-primary-900: #eef2ff;
656
- --color-ak-primary-950: #f5f7ff;
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;
657
690
 
658
691
  /* ── Status (lighter for dark bg readability) ── */
659
692
  --color-ak-success: #4ade80;
@@ -680,7 +713,7 @@
680
713
  /* ── Focus rings (solid for AAA 2.4.13 compliance) ── */
681
714
  --color-ak-border-focus: #ffffff;
682
715
  --shadow-ak-focus: 0 0 0 3px rgba(255, 255, 255, 0.20);
683
- --shadow-ak-focus-primary: 0 0 0 3px rgba(129, 140, 248, 0.30);
716
+ --shadow-ak-focus-primary: 0 0 0 3px rgba(255, 255, 255, 0.24);
684
717
  --shadow-ak-focus-danger: 0 0 0 3px rgba(248, 113, 113, 0.25);
685
718
  --shadow-ak-focus-success: 0 0 0 3px rgba(74, 222, 128, 0.25);
686
719