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/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
53
  --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;
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);
@@ -81,6 +85,8 @@
81
85
  --color-ak-outline-variant: var(--color-ak-border-subtle);
82
86
  --color-ak-primary-container: var(--color-ak-primary-subtle);
83
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);
84
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);
@@ -89,33 +95,34 @@
89
95
  --color-ak-tertiary-container: var(--color-ak-info-subtle);
90
96
  --color-ak-on-tertiary-container: var(--color-ak-info-text);
91
97
  --color-ak-error: var(--color-ak-danger);
98
+ --color-ak-error-hover: var(--color-ak-danger-hover);
92
99
  --color-ak-error-container: var(--color-ak-danger-subtle);
93
100
  --color-ak-on-error-container: var(--color-ak-danger-text);
94
101
  --color-ak-scrim: var(--color-ak-overlay);
95
102
  --color-ak-highlight-soft: rgba(255, 255, 255, 0.45);
96
103
  --color-ak-highlight-strong: rgba(255, 255, 255, 0.72);
97
- --color-ak-skeleton-base: #ededed;
104
+ --color-ak-skeleton-base: #eeeeea;
98
105
  --color-ak-skeleton-shine: rgba(255, 255, 255, 0.72);
99
106
  --color-ak-overlay: rgba(0, 0, 0, 0.5);
100
107
  --color-ak-on-primary: #ffffff;
101
- --color-ak-primary-subtle: #f5f5f5;
102
- --color-ak-primary-subtle-hover: #e5e5e5;
108
+ --color-ak-primary-subtle: #eeeeea;
109
+ --color-ak-primary-subtle-hover: #deded6;
103
110
 
104
111
  /* ── 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;
112
+ --color-ak-text: #0b0b0b;
113
+ --color-ak-text-emphasis: #171814;
114
+ --color-ak-text-secondary: #55564f;
115
+ --color-ak-text-muted: #8a8a84;
116
+ --color-ak-text-disabled: #c8c8bd;
110
117
  --color-ak-text-inverse: #ffffff;
111
- --color-ak-text-link: #000000;
112
- --color-ak-text-placeholder:#525252;
118
+ --color-ak-text-link: #0b0b0b;
119
+ --color-ak-text-placeholder:#6f7068;
113
120
 
114
121
  /* ── 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;
122
+ --color-ak-border: #deded6;
123
+ --color-ak-border-subtle: #e8e8e2;
124
+ --color-ak-border-strong: #55564f;
125
+ --color-ak-border-focus: #0b0b0b;
119
126
 
120
127
  /* ── Status colors ── */
121
128
  --color-ak-success: #16a34a;
@@ -125,6 +132,7 @@
125
132
  --color-ak-warning-subtle: #fffbeb;
126
133
  --color-ak-warning-text: #b45309;
127
134
  --color-ak-danger: #dc2626;
135
+ --color-ak-danger-hover: #b91c1c;
128
136
  --color-ak-danger-subtle: #fef2f2;
129
137
  --color-ak-danger-text: #b91c1c;
130
138
  --color-ak-info: #2563eb;
@@ -135,6 +143,9 @@
135
143
 
136
144
  /* ── Font families ── */
137
145
  --font-ak-sans: 'Inter', system-ui, -apple-system, sans-serif;
146
+ --font-ak-heading: var(--font-ak-sans);
147
+ --font-ak-ui: var(--font-ak-sans);
148
+ --font-ak-label: var(--font-ak-sans);
138
149
  --font-ak-serif: 'DM Serif Display', Georgia, serif;
139
150
  --font-ak-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
140
151
 
@@ -326,15 +337,23 @@
326
337
  --spacing-ak-fl-xl-3xl: clamp(3rem, 0.57rem + 8.33vw, 9rem);
327
338
 
328
339
  /* ── Border Radius ── */
329
- --radius-ak-xs: 0.125rem;
340
+ /* One-knob radius system: every step derives from --ak-radius, so a theme,
341
+ palette, or container can re-radius the whole tree by setting ONE variable
342
+ (default 0.5rem reproduces the historic fixed values exactly).
343
+ --radius-ak-control-sm is the clamped radius for compact controls - it
344
+ tracks the knob but caps at 10px so small elements never go pill-shaped
345
+ when the knob is cranked. */
346
+ --ak-radius: 0.5rem;
347
+ --radius-ak-xs: calc(var(--ak-radius) * 0.25);
330
348
  --radius-ak-none: 0;
331
- --radius-ak-sm: 0.25rem;
332
- --radius-ak-md: 0.5rem;
333
- --radius-ak-lg: 0.75rem;
334
- --radius-ak-xl: 1rem;
335
- --radius-ak-2xl: 1.5rem;
336
- --radius-ak-3xl: 2rem;
349
+ --radius-ak-sm: calc(var(--ak-radius) * 0.5);
350
+ --radius-ak-md: var(--ak-radius);
351
+ --radius-ak-lg: calc(var(--ak-radius) * 1.5);
352
+ --radius-ak-xl: calc(var(--ak-radius) * 2);
353
+ --radius-ak-2xl: calc(var(--ak-radius) * 3);
354
+ --radius-ak-3xl: calc(var(--ak-radius) * 4);
337
355
  --radius-ak-full: 9999px;
356
+ --radius-ak-control-sm: min(var(--ak-radius), 0.625rem);
338
357
 
339
358
  /* ── Shadows ── */
340
359
  --shadow-ak-xs: 0 1px 2px rgba(0,0,0,0.04);
@@ -535,7 +554,7 @@
535
554
  --color-ak-chart-6: #edc949;
536
555
 
537
556
  /* ── Form input border radius ── */
538
- --radius-ak-input: 0.625rem;
557
+ --radius-ak-input: calc(var(--ak-radius) * 1.25);
539
558
 
540
559
  /* ── Sidebar widths ── */
541
560
  --width-ak-sidebar-collapsed: 5rem;
@@ -604,13 +623,25 @@
604
623
  --color-ak-surface-4: #2c2d30;
605
624
  --color-ak-inverse-surface: #f4f4f5;
606
625
  --color-ak-inverse-on-surface: #111113;
607
- --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);
608
634
  --color-ak-on-tertiary: #111113;
609
635
  --color-ak-hover: rgba(255,255,255,0.04);
610
636
  --color-ak-active: rgba(255,255,255,0.08);
611
637
  --color-ak-elevated: #252628;
612
638
  --color-ak-surface-raised: #1e1f21;
613
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;
614
645
  --color-ak-surface-glass: rgba(255,255,255,0.05);
615
646
  --color-ak-surface-glass-strong: rgba(255,255,255,0.08);
616
647
  --color-ak-highlight-soft: rgba(255,255,255,0.06);
@@ -619,8 +650,8 @@
619
650
  --color-ak-skeleton-shine: rgba(255,255,255,0.06);
620
651
  --color-ak-overlay: rgba(0,0,0,0.7);
621
652
  --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);
653
+ --color-ak-primary-subtle: rgba(255, 255, 255, 0.10);
654
+ --color-ak-primary-subtle-hover: rgba(255, 255, 255, 0.16);
624
655
 
625
656
  /* ── Text ── */
626
657
  --color-ak-text: #f4f4f5;
@@ -629,31 +660,53 @@
629
660
  --color-ak-text-muted: #71717a;
630
661
  --color-ak-text-disabled: #52525b;
631
662
  --color-ak-text-inverse: #111113;
632
- --color-ak-text-link: #818cf8;
663
+ --color-ak-text-link: #f4f4f5;
633
664
  --color-ak-text-placeholder:#a1a1aa;
665
+ --color-ak-on-surface: #f4f4f5;
666
+ --color-ak-on-surface-variant: #a1a1aa;
634
667
 
635
668
  /* ── Borders (alpha — adapts to any surface) ── */
636
669
  --color-ak-border: rgba(255, 255, 255, 0.10);
637
670
  --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
638
671
  --color-ak-border-strong: rgba(255, 255, 255, 0.16);
639
672
  --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;
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;
657
710
 
658
711
  /* ── Status (lighter for dark bg readability) ── */
659
712
  --color-ak-success: #4ade80;
@@ -662,7 +715,8 @@
662
715
  --color-ak-warning: #fbbf24;
663
716
  --color-ak-warning-subtle: rgba(251, 191, 36, 0.12);
664
717
  --color-ak-warning-text: #fbbf24;
665
- --color-ak-danger: #f87171;
718
+ --color-ak-danger: #dc2626;
719
+ --color-ak-danger-hover: #b91c1c;
666
720
  --color-ak-danger-subtle: rgba(248, 113, 113, 0.12);
667
721
  --color-ak-danger-text: #f87171;
668
722
  --color-ak-info: #60a5fa;
@@ -680,7 +734,7 @@
680
734
  /* ── Focus rings (solid for AAA 2.4.13 compliance) ── */
681
735
  --color-ak-border-focus: #ffffff;
682
736
  --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);
737
+ --shadow-ak-focus-primary: 0 0 0 3px rgba(255, 255, 255, 0.24);
684
738
  --shadow-ak-focus-danger: 0 0 0 3px rgba(248, 113, 113, 0.25);
685
739
  --shadow-ak-focus-success: 0 0 0 3px rgba(74, 222, 128, 0.25);
686
740