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/astralkit-theme.css CHANGED
@@ -28,35 +28,35 @@
28
28
  --color-ak-neutral-950: #0a0a0a;
29
29
 
30
30
  /* ── Primary scale (full 11-shade ramp) ── */
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;
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: #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);
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);
51
51
 
52
52
  /* ── Semantic color aliases ── */
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;
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;
60
60
  --color-ak-elevated: #ffffff;
61
61
  --color-ak-surface-raised: #ffffff;
62
62
  --color-ak-surface-raised-soft: rgba(255, 255, 255, 0.78);
@@ -72,7 +72,7 @@
72
72
  (e.g. Pulse: ink CTAs via primary, volt-lime selection via accent). */
73
73
  --color-ak-accent: var(--color-ak-primary);
74
74
  --color-ak-on-accent: var(--color-ak-on-primary);
75
- --color-ak-accent-soft: #f8f8f5;
75
+ --color-ak-accent-soft: #f8f8f5;
76
76
  /* M3 names as alias vars (follow their targets in dark automatically) */
77
77
  --color-ak-surface-container-lowest: var(--color-ak-bg);
78
78
  --color-ak-surface-container-low: var(--color-ak-surface);
@@ -82,12 +82,12 @@
82
82
  --color-ak-on-surface: var(--color-ak-text);
83
83
  --color-ak-on-surface-variant: var(--color-ak-text-secondary);
84
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);
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
91
  --color-ak-on-secondary: var(--color-ak-on-accent);
92
92
  --color-ak-secondary-container: var(--color-ak-accent-soft);
93
93
  --color-ak-on-secondary-container: var(--color-ak-text);
@@ -95,33 +95,34 @@
95
95
  --color-ak-tertiary-container: var(--color-ak-info-subtle);
96
96
  --color-ak-on-tertiary-container: var(--color-ak-info-text);
97
97
  --color-ak-error: var(--color-ak-danger);
98
+ --color-ak-error-hover: var(--color-ak-danger-hover);
98
99
  --color-ak-error-container: var(--color-ak-danger-subtle);
99
100
  --color-ak-on-error-container: var(--color-ak-danger-text);
100
101
  --color-ak-scrim: var(--color-ak-overlay);
101
102
  --color-ak-highlight-soft: rgba(255, 255, 255, 0.45);
102
103
  --color-ak-highlight-strong: rgba(255, 255, 255, 0.72);
103
- --color-ak-skeleton-base: #eeeeea;
104
+ --color-ak-skeleton-base: #eeeeea;
104
105
  --color-ak-skeleton-shine: rgba(255, 255, 255, 0.72);
105
106
  --color-ak-overlay: rgba(0, 0, 0, 0.5);
106
107
  --color-ak-on-primary: #ffffff;
107
- --color-ak-primary-subtle: #eeeeea;
108
- --color-ak-primary-subtle-hover: #deded6;
108
+ --color-ak-primary-subtle: #eeeeea;
109
+ --color-ak-primary-subtle-hover: #deded6;
109
110
 
110
111
  /* ── Semantic text ── */
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;
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;
117
+ --color-ak-text-inverse: #ffffff;
118
+ --color-ak-text-link: #0b0b0b;
119
+ --color-ak-text-placeholder:#6f7068;
119
120
 
120
121
  /* ── Semantic border ── */
121
- --color-ak-border: #deded6;
122
- --color-ak-border-subtle: #e8e8e2;
123
- --color-ak-border-strong: #55564f;
124
- --color-ak-border-focus: #0b0b0b;
122
+ --color-ak-border: #deded6;
123
+ --color-ak-border-subtle: #e8e8e2;
124
+ --color-ak-border-strong: #55564f;
125
+ --color-ak-border-focus: #0b0b0b;
125
126
 
126
127
  /* ── Status colors ── */
127
128
  --color-ak-success: #16a34a;
@@ -131,6 +132,7 @@
131
132
  --color-ak-warning-subtle: #fffbeb;
132
133
  --color-ak-warning-text: #b45309;
133
134
  --color-ak-danger: #dc2626;
135
+ --color-ak-danger-hover: #b91c1c;
134
136
  --color-ak-danger-subtle: #fef2f2;
135
137
  --color-ak-danger-text: #b91c1c;
136
138
  --color-ak-info: #2563eb;
@@ -141,6 +143,9 @@
141
143
 
142
144
  /* ── Font families ── */
143
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);
144
149
  --font-ak-serif: 'DM Serif Display', Georgia, serif;
145
150
  --font-ak-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
146
151
 
@@ -332,15 +337,23 @@
332
337
  --spacing-ak-fl-xl-3xl: clamp(3rem, 0.57rem + 8.33vw, 9rem);
333
338
 
334
339
  /* ── Border Radius ── */
335
- --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);
336
348
  --radius-ak-none: 0;
337
- --radius-ak-sm: 0.25rem;
338
- --radius-ak-md: 0.5rem;
339
- --radius-ak-lg: 0.75rem;
340
- --radius-ak-xl: 1rem;
341
- --radius-ak-2xl: 1.5rem;
342
- --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);
343
355
  --radius-ak-full: 9999px;
356
+ --radius-ak-control-sm: min(var(--ak-radius), 0.625rem);
344
357
 
345
358
  /* ── Shadows ── */
346
359
  --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