astralkit 0.4.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/astralkit-theme-v4.css +139 -64
  3. package/astralkit-theme.css +139 -64
  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 +2055 -328
  9. package/primitives/effects.css +373 -115
  10. package/primitives/layout.css +3 -0
  11. package/tailwind.cjs +43 -0
package/CHANGELOG.md CHANGED
@@ -5,6 +5,26 @@ 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
+
14
+ ## [0.5.0] — 2026-06-12
15
+
16
+ ### Added (Material 3 role grammar)
17
+ - **45 new color-role tokens across both the v4 `@theme` and the v3 Tailwind plugin** (full v3/v4 parity). These complete the M3 role grammar that a large set of components now depend on:
18
+ - **Surface containers** — `surface-3`, `surface-4`, `surface-container`, `surface-container-low`/`-lowest`/`-high`/`-highest`.
19
+ - **Inverse** — `inverse-surface`, `inverse-on-surface` (dark cards on light themes and vice-versa).
20
+ - **Secondary / tertiary / accent / error roles** — `secondary`(+`-container`), `on-secondary`(+`-container`), `tertiary`(+`-container`), `on-tertiary`(+`-container`), `accent`, `accent-soft`, `on-accent`, `error`, `error-container`, `on-error`, `on-error-container`, plus `primary-container`/`on-primary-container`.
21
+ - **Surface / outline** — `on-surface`, `on-surface-variant`, `outline`, `outline-variant`, `scrim`.
22
+ - **Per-theme controls** — `slider-fill`, `slider-ring` (themed Radix slider fill/ring).
23
+ - **Status badges** — `status-{new,beta,stable,deprecated}-{bg,border,text}`.
24
+
25
+ ### Fixed
26
+ - **`ak-skeleton` shimmer now respects `prefers-reduced-motion`.** Added a `@media (prefers-reduced-motion: reduce)` guard that stops the looping shimmer on `.ak-skeleton::after`.
27
+
8
28
  ## [0.4.0] — 2026-06-06
9
29
 
10
30
  ### Added
package/astralkit-theme-v4.css CHANGED
@@ -26,58 +26,100 @@
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-hover: #f7f7f7;
51
- --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;
52
58
  --color-ak-elevated: #ffffff;
53
59
  --color-ak-surface-raised: #ffffff;
54
60
  --color-ak-surface-raised-soft: rgba(255, 255, 255, 0.78);
55
61
  --color-ak-surface-glass: rgba(255, 255, 255, 0.72);
56
62
  --color-ak-surface-glass-strong: rgba(255, 255, 255, 0.84);
63
+
64
+ /* == M3 role layer (additive - old names remain working aliases forever) == */
65
+ --color-ak-inverse-surface: #171717;
66
+ --color-ak-inverse-on-surface: #fafafa;
67
+ --color-ak-on-error: #ffffff;
68
+ --color-ak-on-tertiary: #ffffff;
69
+ /* Selection accent: defaults to brand primary; palettes may split it
70
+ (e.g. Pulse: ink CTAs via primary, volt-lime selection via accent). */
71
+ --color-ak-accent: var(--color-ak-primary);
72
+ --color-ak-on-accent: var(--color-ak-on-primary);
73
+ --color-ak-accent-soft: #f8f8f5;
74
+ /* M3 names as alias vars (follow their targets in dark automatically) */
75
+ --color-ak-surface-container-lowest: var(--color-ak-bg);
76
+ --color-ak-surface-container-low: var(--color-ak-surface);
77
+ --color-ak-surface-container: var(--color-ak-surface-2);
78
+ --color-ak-surface-container-high: var(--color-ak-surface-3);
79
+ --color-ak-surface-container-highest: var(--color-ak-surface-4);
80
+ --color-ak-on-surface: var(--color-ak-text);
81
+ --color-ak-on-surface-variant: var(--color-ak-text-secondary);
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);
89
+ --color-ak-on-secondary: var(--color-ak-on-accent);
90
+ --color-ak-secondary-container: var(--color-ak-accent-soft);
91
+ --color-ak-on-secondary-container: var(--color-ak-text);
92
+ --color-ak-tertiary: var(--color-ak-info);
93
+ --color-ak-tertiary-container: var(--color-ak-info-subtle);
94
+ --color-ak-on-tertiary-container: var(--color-ak-info-text);
95
+ --color-ak-error: var(--color-ak-danger);
96
+ --color-ak-error-container: var(--color-ak-danger-subtle);
97
+ --color-ak-on-error-container: var(--color-ak-danger-text);
98
+ --color-ak-scrim: var(--color-ak-overlay);
57
99
  --color-ak-highlight-soft: rgba(255, 255, 255, 0.45);
58
100
  --color-ak-highlight-strong: rgba(255, 255, 255, 0.72);
59
- --color-ak-skeleton-base: #ededed;
101
+ --color-ak-skeleton-base: #eeeeea;
60
102
  --color-ak-skeleton-shine: rgba(255, 255, 255, 0.72);
61
103
  --color-ak-overlay: rgba(0, 0, 0, 0.5);
62
104
  --color-ak-on-primary: #ffffff;
63
- --color-ak-primary-subtle: #f5f5f5;
64
- --color-ak-primary-subtle-hover: #e5e5e5;
105
+ --color-ak-primary-subtle: #eeeeea;
106
+ --color-ak-primary-subtle-hover: #deded6;
65
107
 
66
108
  /* ── Semantic text ── */
67
- --color-ak-text: #171717;
68
- --color-ak-text-emphasis: #2b2b2b;
69
- --color-ak-text-secondary: #525252;
70
- --color-ak-text-muted: #a3a3a3;
71
- --color-ak-text-disabled: #d4d4d4;
72
- --color-ak-text-inverse: #ffffff;
73
- --color-ak-text-link: #000000;
74
- --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;
75
117
 
76
118
  /* ── Semantic border ── */
77
- --color-ak-border: #dee2e6;
78
- --color-ak-border-subtle: #e5e5e5;
79
- --color-ak-border-strong: #525252;
80
- --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;
81
123
 
82
124
  /* ── Status colors ── */
83
125
  --color-ak-success: #16a34a;
@@ -564,21 +606,32 @@
564
606
  --color-ak-bg: #111113;
565
607
  --color-ak-surface: #18191b;
566
608
  --color-ak-surface-2: #1e1f21;
609
+ --color-ak-surface-3: #252628;
610
+ --color-ak-surface-4: #2c2d30;
611
+ --color-ak-inverse-surface: #f4f4f5;
612
+ --color-ak-inverse-on-surface: #111113;
613
+ --color-ak-on-error: #111113;
614
+ --color-ak-on-tertiary: #111113;
567
615
  --color-ak-hover: rgba(255,255,255,0.04);
568
616
  --color-ak-active: rgba(255,255,255,0.08);
569
- --color-ak-elevated: #252628;
570
- --color-ak-surface-raised: #1e1f21;
571
- --color-ak-surface-raised-soft: rgba(255,255,255,0.04);
572
- --color-ak-surface-glass: rgba(255,255,255,0.05);
573
- --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);
574
627
  --color-ak-highlight-soft: rgba(255,255,255,0.06);
575
628
  --color-ak-highlight-strong: rgba(255,255,255,0.12);
576
629
  --color-ak-skeleton-base: #1e1f21;
577
630
  --color-ak-skeleton-shine: rgba(255,255,255,0.06);
578
631
  --color-ak-overlay: rgba(0,0,0,0.7);
579
- --color-ak-on-primary: #111113;
580
- --color-ak-primary-subtle: rgba(129, 140, 248, 0.15);
581
- --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);
582
635
 
583
636
  /* ── Text ── */
584
637
  --color-ak-text: #f4f4f5;
@@ -587,31 +640,53 @@
587
640
  --color-ak-text-muted: #71717a;
588
641
  --color-ak-text-disabled: #52525b;
589
642
  --color-ak-text-inverse: #111113;
590
- --color-ak-text-link: #818cf8;
591
- --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;
592
647
 
593
648
  /* ── Borders (alpha — adapts to any surface) ── */
594
649
  --color-ak-border: rgba(255, 255, 255, 0.10);
595
650
  --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
596
- --color-ak-border-strong: rgba(255, 255, 255, 0.16);
597
- --color-ak-border-focus: #ffffff;
598
-
599
- /* ── Primary (lightened for contrast on dark bg) ── */
600
- --color-ak-primary: #818cf8;
601
- --color-ak-primary-hover: #a5b4fc;
602
- --color-ak-primary-active: #6366f1;
603
-
604
- --color-ak-primary-50: rgba(129, 140, 248, 0.06);
605
- --color-ak-primary-100: rgba(129, 140, 248, 0.10);
606
- --color-ak-primary-200: rgba(129, 140, 248, 0.16);
607
- --color-ak-primary-300: rgba(129, 140, 248, 0.24);
608
- --color-ak-primary-400: #6366f1;
609
- --color-ak-primary-500: #818cf8;
610
- --color-ak-primary-600: #a5b4fc;
611
- --color-ak-primary-700: #c7d2fe;
612
- --color-ak-primary-800: #e0e7ff;
613
- --color-ak-primary-900: #eef2ff;
614
- --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;
615
690
 
616
691
  /* ── Status (lighter for dark bg readability) ── */
617
692
  --color-ak-success: #4ade80;
@@ -638,7 +713,7 @@
638
713
  /* ── Focus rings (solid for AAA 2.4.13 compliance) ── */
639
714
  --color-ak-border-focus: #ffffff;
640
715
  --shadow-ak-focus: 0 0 0 3px rgba(255, 255, 255, 0.20);
641
- --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);
642
717
  --shadow-ak-focus-danger: 0 0 0 3px rgba(248, 113, 113, 0.25);
643
718
  --shadow-ak-focus-success: 0 0 0 3px rgba(74, 222, 128, 0.25);
644
719
 
package/astralkit-theme.css CHANGED
@@ -28,58 +28,100 @@
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-hover: #f7f7f7;
53
- --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;
54
60
  --color-ak-elevated: #ffffff;
55
61
  --color-ak-surface-raised: #ffffff;
56
62
  --color-ak-surface-raised-soft: rgba(255, 255, 255, 0.78);
57
63
  --color-ak-surface-glass: rgba(255, 255, 255, 0.72);
58
64
  --color-ak-surface-glass-strong: rgba(255, 255, 255, 0.84);
65
+
66
+ /* == M3 role layer (additive - old names remain working aliases forever) == */
67
+ --color-ak-inverse-surface: #171717;
68
+ --color-ak-inverse-on-surface: #fafafa;
69
+ --color-ak-on-error: #ffffff;
70
+ --color-ak-on-tertiary: #ffffff;
71
+ /* Selection accent: defaults to brand primary; palettes may split it
72
+ (e.g. Pulse: ink CTAs via primary, volt-lime selection via accent). */
73
+ --color-ak-accent: var(--color-ak-primary);
74
+ --color-ak-on-accent: var(--color-ak-on-primary);
75
+ --color-ak-accent-soft: #f8f8f5;
76
+ /* M3 names as alias vars (follow their targets in dark automatically) */
77
+ --color-ak-surface-container-lowest: var(--color-ak-bg);
78
+ --color-ak-surface-container-low: var(--color-ak-surface);
79
+ --color-ak-surface-container: var(--color-ak-surface-2);
80
+ --color-ak-surface-container-high: var(--color-ak-surface-3);
81
+ --color-ak-surface-container-highest: var(--color-ak-surface-4);
82
+ --color-ak-on-surface: var(--color-ak-text);
83
+ --color-ak-on-surface-variant: var(--color-ak-text-secondary);
84
+ --color-ak-outline: var(--color-ak-border);
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);
91
+ --color-ak-on-secondary: var(--color-ak-on-accent);
92
+ --color-ak-secondary-container: var(--color-ak-accent-soft);
93
+ --color-ak-on-secondary-container: var(--color-ak-text);
94
+ --color-ak-tertiary: var(--color-ak-info);
95
+ --color-ak-tertiary-container: var(--color-ak-info-subtle);
96
+ --color-ak-on-tertiary-container: var(--color-ak-info-text);
97
+ --color-ak-error: var(--color-ak-danger);
98
+ --color-ak-error-container: var(--color-ak-danger-subtle);
99
+ --color-ak-on-error-container: var(--color-ak-danger-text);
100
+ --color-ak-scrim: var(--color-ak-overlay);
59
101
  --color-ak-highlight-soft: rgba(255, 255, 255, 0.45);
60
102
  --color-ak-highlight-strong: rgba(255, 255, 255, 0.72);
61
- --color-ak-skeleton-base: #ededed;
103
+ --color-ak-skeleton-base: #eeeeea;
62
104
  --color-ak-skeleton-shine: rgba(255, 255, 255, 0.72);
63
105
  --color-ak-overlay: rgba(0, 0, 0, 0.5);
64
106
  --color-ak-on-primary: #ffffff;
65
- --color-ak-primary-subtle: #f5f5f5;
66
- --color-ak-primary-subtle-hover: #e5e5e5;
107
+ --color-ak-primary-subtle: #eeeeea;
108
+ --color-ak-primary-subtle-hover: #deded6;
67
109
 
68
110
  /* ── Semantic text ── */
69
- --color-ak-text: #171717;
70
- --color-ak-text-emphasis: #2b2b2b;
71
- --color-ak-text-secondary: #525252;
72
- --color-ak-text-muted: #a3a3a3;
73
- --color-ak-text-disabled: #d4d4d4;
74
- --color-ak-text-inverse: #ffffff;
75
- --color-ak-text-link: #000000;
76
- --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;
77
119
 
78
120
  /* ── Semantic border ── */
79
- --color-ak-border: #dee2e6;
80
- --color-ak-border-subtle: #e5e5e5;
81
- --color-ak-border-strong: #525252;
82
- --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;
83
125
 
84
126
  /* ── Status colors ── */
85
127
  --color-ak-success: #16a34a;
@@ -564,21 +606,32 @@
564
606
  --color-ak-bg: #111113;
565
607
  --color-ak-surface: #18191b;
566
608
  --color-ak-surface-2: #1e1f21;
609
+ --color-ak-surface-3: #252628;
610
+ --color-ak-surface-4: #2c2d30;
611
+ --color-ak-inverse-surface: #f4f4f5;
612
+ --color-ak-inverse-on-surface: #111113;
613
+ --color-ak-on-error: #111113;
614
+ --color-ak-on-tertiary: #111113;
567
615
  --color-ak-hover: rgba(255,255,255,0.04);
568
616
  --color-ak-active: rgba(255,255,255,0.08);
569
- --color-ak-elevated: #252628;
570
- --color-ak-surface-raised: #1e1f21;
571
- --color-ak-surface-raised-soft: rgba(255,255,255,0.04);
572
- --color-ak-surface-glass: rgba(255,255,255,0.05);
573
- --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);
574
627
  --color-ak-highlight-soft: rgba(255,255,255,0.06);
575
628
  --color-ak-highlight-strong: rgba(255,255,255,0.12);
576
629
  --color-ak-skeleton-base: #1e1f21;
577
630
  --color-ak-skeleton-shine: rgba(255,255,255,0.06);
578
631
  --color-ak-overlay: rgba(0,0,0,0.7);
579
- --color-ak-on-primary: #111113;
580
- --color-ak-primary-subtle: rgba(129, 140, 248, 0.15);
581
- --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);
582
635
 
583
636
  /* ── Text ── */
584
637
  --color-ak-text: #f4f4f5;
@@ -587,31 +640,53 @@
587
640
  --color-ak-text-muted: #71717a;
588
641
  --color-ak-text-disabled: #52525b;
589
642
  --color-ak-text-inverse: #111113;
590
- --color-ak-text-link: #818cf8;
591
- --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;
592
647
 
593
648
  /* ── Borders (alpha — adapts to any surface) ── */
594
649
  --color-ak-border: rgba(255, 255, 255, 0.10);
595
650
  --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
596
- --color-ak-border-strong: rgba(255, 255, 255, 0.16);
597
- --color-ak-border-focus: #ffffff;
598
-
599
- /* ── Primary (lightened for contrast on dark bg) ── */
600
- --color-ak-primary: #818cf8;
601
- --color-ak-primary-hover: #a5b4fc;
602
- --color-ak-primary-active: #6366f1;
603
-
604
- --color-ak-primary-50: rgba(129, 140, 248, 0.06);
605
- --color-ak-primary-100: rgba(129, 140, 248, 0.10);
606
- --color-ak-primary-200: rgba(129, 140, 248, 0.16);
607
- --color-ak-primary-300: rgba(129, 140, 248, 0.24);
608
- --color-ak-primary-400: #6366f1;
609
- --color-ak-primary-500: #818cf8;
610
- --color-ak-primary-600: #a5b4fc;
611
- --color-ak-primary-700: #c7d2fe;
612
- --color-ak-primary-800: #e0e7ff;
613
- --color-ak-primary-900: #eef2ff;
614
- --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;
615
690
 
616
691
  /* ── Status (lighter for dark bg readability) ── */
617
692
  --color-ak-success: #4ade80;
@@ -638,7 +713,7 @@
638
713
  /* ── Focus rings (solid for AAA 2.4.13 compliance) ── */
639
714
  --color-ak-border-focus: #ffffff;
640
715
  --shadow-ak-focus: 0 0 0 3px rgba(255, 255, 255, 0.20);
641
- --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);
642
717
  --shadow-ak-focus-danger: 0 0 0 3px rgba(248, 113, 113, 0.25);
643
718
  --shadow-ak-focus-success: 0 0 0 3px rgba(74, 222, 128, 0.25);
644
719