astralkit 0.2.0 → 0.3.1

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 (23) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/ai-rules.md +481 -100
  3. package/astralkit-theme-v4.css +612 -0
  4. package/astralkit-theme.css +272 -32
  5. package/astralkit-utilities.css +516 -540
  6. package/lib/utils.js +23 -1
  7. package/package.json +23 -4
  8. package/palettes.css +299 -0
  9. package/primitives/accounts.css +435 -0
  10. package/primitives/animations.css +136 -0
  11. package/primitives/avatar.css +410 -0
  12. package/primitives/badges.css +231 -0
  13. package/primitives/effects.css +388 -0
  14. package/primitives/focus.css +25 -0
  15. package/primitives/forms.css +2155 -0
  16. package/primitives/icons.css +90 -0
  17. package/primitives/layout.css +217 -0
  18. package/primitives/mobile.css +557 -0
  19. package/primitives/navigation.css +1057 -0
  20. package/primitives/sidebar.css +1819 -0
  21. package/primitives/typography.css +324 -0
  22. package/tailwind.cjs +416 -0
  23. package/tailwind.js +491 -0
package/lib/utils.js CHANGED
@@ -1,5 +1,27 @@
1
1
  import { clsx } from "clsx"
2
- import { twMerge } from "tailwind-merge"
2
+ import { extendTailwindMerge } from "tailwind-merge"
3
+
4
+ const twMerge = extendTailwindMerge({
5
+ extend: {
6
+ classGroups: {
7
+ // Font size: text-ak-base, text-ak-sm, text-ak-lg, text-ak-fl-*, text-ak-display-*
8
+ 'font-size': [
9
+ { 'text-ak': ['2xs', 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl'] },
10
+ { 'text-ak-fl': ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl'] },
11
+ { 'text-ak-display': ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl'] },
12
+ { 'text-ak-avatar': ['sm', 'md', 'lg', 'xl', '2xl', '3xl'] },
13
+ { 'text-ak-badge': ['md', 'lg', 'xl', '2xl', '3xl'] },
14
+ ],
15
+ // Text color: text-ak-text, text-ak-text-secondary, text-ak-text-muted, etc.
16
+ 'text-color': [
17
+ { 'text-ak': [
18
+ 'text', 'text-secondary', 'text-muted', 'text-disabled', 'text-inverse', 'text-link', 'text-placeholder',
19
+ 'danger-text', 'success-text', 'warning-text', 'info-text',
20
+ ]},
21
+ ],
22
+ },
23
+ },
24
+ })
3
25
 
4
26
  export function cn(...inputs) {
5
27
  return twMerge(clsx(inputs))
package/package.json CHANGED
@@ -1,26 +1,45 @@
1
1
  {
2
2
  "name": "astralkit",
3
- "version": "0.2.0",
3
+ "version": "0.3.1",
4
4
  "description": "Design tokens and component primitives for accessible UI — Tailwind CSS v4",
5
5
  "type": "module",
6
6
  "exports": {
7
- "./theme": "./astralkit-theme.css",
7
+ "./theme": "./astralkit-theme-v4.css",
8
+ "./theme-v3": "./astralkit-theme.css",
9
+ "./theme-v4": "./astralkit-theme-v4.css",
8
10
  "./utilities": "./astralkit-utilities.css",
11
+ "./tailwind": "./tailwind.js",
12
+ "./tailwind.cjs": "./tailwind.cjs",
9
13
  "./utils": "./lib/utils.js",
10
- "./ai-rules": "./ai-rules.md"
14
+ "./ai-rules": "./ai-rules.md",
15
+ "./palettes": "./palettes.css"
11
16
  },
12
17
  "files": [
13
18
  "astralkit-theme.css",
19
+ "astralkit-theme-v4.css",
14
20
  "astralkit-utilities.css",
21
+ "palettes.css",
22
+ "primitives/",
23
+ "tailwind.js",
24
+ "tailwind.cjs",
15
25
  "ai-rules.md",
16
26
  "lib/",
17
27
  "LICENSE",
18
- "README.md"
28
+ "README.md",
29
+ "CHANGELOG.md"
19
30
  ],
20
31
  "dependencies": {
21
32
  "clsx": "^2.1.0",
22
33
  "tailwind-merge": "^2.2.0"
23
34
  },
35
+ "peerDependencies": {
36
+ "tailwindcss": ">=3.0.0"
37
+ },
38
+ "peerDependenciesMeta": {
39
+ "tailwindcss": {
40
+ "optional": false
41
+ }
42
+ },
24
43
  "keywords": ["astralkit", "design-tokens", "tailwind", "css", "ui"],
25
44
  "homepage": "https://astralkit.com",
26
45
  "repository": {
package/palettes.css ADDED
@@ -0,0 +1,299 @@
1
+ /* ══════════════════════════════════════════════════════════
2
+ AstralKit Preset Theme Palettes
3
+
4
+ Usage: Add data-ak-theme="palette-name" to <html> or any container.
5
+ Example: <html data-ak-theme="ocean-blue">
6
+
7
+ Each palette overrides the 11 core semantic color variables.
8
+ All 90+ component tokens derive from these automatically.
9
+
10
+ Palettes follow the 60-30-10 rule:
11
+ - 60% bg/surface (dominant canvas)
12
+ - 30% borders/secondary text/cards
13
+ - 10% primary accent (CTAs, links, focus rings)
14
+ ══════════════════════════════════════════════════════════ */
15
+
16
+ /* ══════════════════════════════════════════════════════════
17
+ DECORATIVE GLOW RECIPES (black & white by default)
18
+
19
+ Used on dark banner panels (bg-[#0a0a0a]) to add soft ambient
20
+ depth without introducing color. These are tokenless gradients
21
+ because CSS variables can't be used inside url()/gradient()
22
+ strings inline in React style props reliably.
23
+
24
+ Canonical white-glow pattern used by Relay, Thrust, Vector,
25
+ Beacon, Bastion, Tessera banners. Apply via inline style:
26
+
27
+ — Top-right primary glow (stronger):
28
+ background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 65%);
29
+ className: absolute -top-40 -right-32 w-[44rem] h-[44rem] rounded-full opacity-50 blur-3xl
30
+
31
+ — Bottom-left secondary glow (softer):
32
+ background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 65%);
33
+ className: absolute -bottom-40 -left-32 w-[36rem] h-[36rem] rounded-full opacity-40 blur-3xl
34
+
35
+ — Middle accent (optional, subtle):
36
+ background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
37
+ className: absolute top-1/3 -right-20 w-[24rem] h-[24rem] rounded-full opacity-25 blur-3xl
38
+
39
+ For dark-mode dot-grid textures:
40
+ backgroundImage: radial-gradient(#ffffff 1px, transparent 1px);
41
+ backgroundSize: 28px 28px or 32px 32px;
42
+ className: absolute inset-0 opacity-10
43
+
44
+ For light-mode dot-grid textures (on bg-ak-surface / bg-ak-bg):
45
+ backgroundImage: radial-gradient(#000000 1px, transparent 1px);
46
+ backgroundSize: 24px 24px;
47
+ className: absolute inset-0 opacity-[0.05] or opacity-[0.06]
48
+
49
+ For light-mode neutral glows (on bg-ak-surface):
50
+ Top-right: radial-gradient(circle, #000 0%, transparent 65%) at opacity-[0.05]
51
+ Bottom-left: radial-gradient(circle, #000 0%, transparent 65%) at opacity-[0.035]
52
+
53
+ DO NOT introduce hue-tinted glows (orange, sky, teal, etc) in
54
+ Ready screens. If a palette needs warmth, define it as a preset
55
+ below and let the theme system propagate. Decorative glows on
56
+ dark banners stay white-alpha; decorative glows on light surfaces
57
+ stay black-alpha.
58
+ ══════════════════════════════════════════════════════════ */
59
+
60
+ /* ─── Light Palettes ─── */
61
+
62
+ [data-ak-theme="ocean-blue"] {
63
+ --color-ak-bg: #FFFFFE;
64
+ --color-ak-surface: #D8EEFE;
65
+ --color-ak-surface-2: #E8F3FD;
66
+ --color-ak-text: #094067;
67
+ --color-ak-text-secondary: #5F6C7B;
68
+ --color-ak-text-muted: #8899A6;
69
+ --color-ak-primary: #3DA9FC;
70
+ --color-ak-primary-hover: #2B96E8;
71
+ --color-ak-primary-active: #1E83D4;
72
+ --color-ak-on-primary: #ffffff;
73
+ --color-ak-border: #C4DFF3;
74
+ --color-ak-border-subtle: #E0EFF9;
75
+ --color-ak-border-strong: #90B4CE;
76
+ --color-ak-border-focus: #3DA9FC;
77
+ --color-ak-text-link: #3DA9FC;
78
+ --color-ak-danger: #EF4565;
79
+ }
80
+
81
+ [data-ak-theme="forest-gold"] {
82
+ --color-ak-bg: #F2F7F5;
83
+ --color-ak-surface: #FFFFFF;
84
+ --color-ak-surface-2: #E8F0ED;
85
+ --color-ak-text: #00473E;
86
+ --color-ak-text-secondary: #475D5B;
87
+ --color-ak-text-muted: #7A8E8C;
88
+ --color-ak-primary: #FAAE2B;
89
+ --color-ak-primary-hover: #E89D1A;
90
+ --color-ak-primary-active: #D18C0E;
91
+ --color-ak-on-primary: #00473E;
92
+ --color-ak-border: #C9D5D2;
93
+ --color-ak-border-subtle: #DDE6E3;
94
+ --color-ak-border-strong: #A0B2AE;
95
+ --color-ak-border-focus: #FAAE2B;
96
+ --color-ak-text-link: #00473E;
97
+ --color-ak-danger: #FA5246;
98
+ }
99
+
100
+ [data-ak-theme="minimal-violet"] {
101
+ --color-ak-bg: #FFFFFE;
102
+ --color-ak-surface: #F0EEFA;
103
+ --color-ak-surface-2: #E8E6F4;
104
+ --color-ak-text: #2B2C34;
105
+ --color-ak-text-secondary: #555660;
106
+ --color-ak-text-muted: #8788A0;
107
+ --color-ak-primary: #6246EA;
108
+ --color-ak-primary-hover: #5035D1;
109
+ --color-ak-primary-active: #4028B8;
110
+ --color-ak-on-primary: #ffffff;
111
+ --color-ak-border: #D1D1E9;
112
+ --color-ak-border-subtle: #E4E4F0;
113
+ --color-ak-border-strong: #ABABCD;
114
+ --color-ak-border-focus: #6246EA;
115
+ --color-ak-text-link: #6246EA;
116
+ --color-ak-danger: #E45858;
117
+ }
118
+
119
+ [data-ak-theme="warm-earth"] {
120
+ --color-ak-bg: #F8F5F2;
121
+ --color-ak-surface: #FFFFFF;
122
+ --color-ak-surface-2: #F0EDE9;
123
+ --color-ak-text: #232323;
124
+ --color-ak-text-secondary: #4A4A4A;
125
+ --color-ak-text-muted: #888888;
126
+ --color-ak-primary: #078080;
127
+ --color-ak-primary-hover: #066D6D;
128
+ --color-ak-primary-active: #055A5A;
129
+ --color-ak-on-primary: #ffffff;
130
+ --color-ak-border: #E8E2DB;
131
+ --color-ak-border-subtle: #F0ECE6;
132
+ --color-ak-border-strong: #CFC5B8;
133
+ --color-ak-border-focus: #078080;
134
+ --color-ak-text-link: #078080;
135
+ --color-ak-danger: #F45D48;
136
+ }
137
+
138
+ [data-ak-theme="tangerine"] {
139
+ --color-ak-bg: #EFF0F3;
140
+ --color-ak-surface: #FFFFFE;
141
+ --color-ak-surface-2: #E5E6E9;
142
+ --color-ak-text: #0D0D0D;
143
+ --color-ak-text-secondary: #2A2A2A;
144
+ --color-ak-text-muted: #777777;
145
+ --color-ak-primary: #FF8E3C;
146
+ --color-ak-primary-hover: #E87D2E;
147
+ --color-ak-primary-active: #D16C20;
148
+ --color-ak-on-primary: #0D0D0D;
149
+ --color-ak-border: #DDDDE2;
150
+ --color-ak-border-subtle: #EBEBEF;
151
+ --color-ak-border-strong: #C0C0C8;
152
+ --color-ak-border-focus: #FF8E3C;
153
+ --color-ak-text-link: #0D0D0D;
154
+ --color-ak-danger: #D9376E;
155
+ }
156
+
157
+ [data-ak-theme="slate-pro"] {
158
+ --color-ak-bg: #F8FAFC;
159
+ --color-ak-surface: #FFFFFF;
160
+ --color-ak-surface-2: #F1F5F9;
161
+ --color-ak-text: #0F172A;
162
+ --color-ak-text-secondary: #475569;
163
+ --color-ak-text-muted: #94A3B8;
164
+ --color-ak-primary: #2563EB;
165
+ --color-ak-primary-hover: #1D4FD7;
166
+ --color-ak-primary-active: #1E40AF;
167
+ --color-ak-on-primary: #ffffff;
168
+ --color-ak-border: #E2E8F0;
169
+ --color-ak-border-subtle: #F1F5F9;
170
+ --color-ak-border-strong: #CBD5E1;
171
+ --color-ak-border-focus: #2563EB;
172
+ --color-ak-text-link: #2563EB;
173
+ }
174
+
175
+ [data-ak-theme="emerald-saas"] {
176
+ --color-ak-bg: #F9FAFB;
177
+ --color-ak-surface: #FFFFFF;
178
+ --color-ak-surface-2: #F3F4F6;
179
+ --color-ak-text: #111827;
180
+ --color-ak-text-secondary: #4B5563;
181
+ --color-ak-text-muted: #9CA3AF;
182
+ --color-ak-primary: #059669;
183
+ --color-ak-primary-hover: #047857;
184
+ --color-ak-primary-active: #065F46;
185
+ --color-ak-on-primary: #ffffff;
186
+ --color-ak-border: #E5E7EB;
187
+ --color-ak-border-subtle: #F3F4F6;
188
+ --color-ak-border-strong: #D1D5DB;
189
+ --color-ak-border-focus: #059669;
190
+ --color-ak-text-link: #059669;
191
+ }
192
+
193
+ [data-ak-theme="astral-violet"] {
194
+ --color-ak-bg: #FAF9F7;
195
+ --color-ak-surface: #FFFFFF;
196
+ --color-ak-surface-2: #F4F2F9;
197
+ --color-ak-text: #150A35;
198
+ --color-ak-text-secondary: #544D6B;
199
+ --color-ak-text-muted: #8B849E;
200
+ --color-ak-primary: #6933FF;
201
+ --color-ak-primary-hover: #5A24F0;
202
+ --color-ak-primary-active: #4B18DE;
203
+ --color-ak-on-primary: #ffffff;
204
+ --color-ak-border: #E6E3EE;
205
+ --color-ak-border-subtle: #F0EEF5;
206
+ --color-ak-border-strong: #C8C3D6;
207
+ --color-ak-border-focus: #6933FF;
208
+ --color-ak-text-link: #6933FF;
209
+ }
210
+
211
+ /* ─── Dark Palettes ─── */
212
+
213
+ [data-ak-theme="midnight"] {
214
+ --color-ak-bg: #16161A;
215
+ --color-ak-surface: #242629;
216
+ --color-ak-surface-2: #2E3035;
217
+ --color-ak-text: #FFFFFE;
218
+ --color-ak-text-secondary: #94A1B2;
219
+ --color-ak-text-muted: #6B7280;
220
+ --color-ak-primary: #7F5AF0;
221
+ --color-ak-primary-hover: #9B7BF5;
222
+ --color-ak-primary-active: #6B46DC;
223
+ --color-ak-on-primary: #16161A;
224
+ --color-ak-border: rgba(255, 255, 255, 0.10);
225
+ --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
226
+ --color-ak-border-strong: rgba(255, 255, 255, 0.16);
227
+ --color-ak-border-focus: #7F5AF0;
228
+ --color-ak-text-link: #7F5AF0;
229
+ --color-ak-hover: rgba(255,255,255,0.04);
230
+ --color-ak-active: rgba(255,255,255,0.08);
231
+ --shadow-ak-xs: none;
232
+ --shadow-ak-sm: none;
233
+ }
234
+
235
+ [data-ak-theme="ember-dark"] {
236
+ --color-ak-bg: #0F0E17;
237
+ --color-ak-surface: #1A1925;
238
+ --color-ak-surface-2: #252433;
239
+ --color-ak-text: #FFFFFE;
240
+ --color-ak-text-secondary: #A7A9BE;
241
+ --color-ak-text-muted: #6E7089;
242
+ --color-ak-primary: #FF8906;
243
+ --color-ak-primary-hover: #FFa033;
244
+ --color-ak-primary-active: #E67A00;
245
+ --color-ak-on-primary: #0F0E17;
246
+ --color-ak-border: rgba(255, 255, 255, 0.10);
247
+ --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
248
+ --color-ak-border-strong: rgba(255, 255, 255, 0.16);
249
+ --color-ak-border-focus: #FF8906;
250
+ --color-ak-text-link: #FF8906;
251
+ --color-ak-hover: rgba(255,255,255,0.04);
252
+ --color-ak-active: rgba(255,255,255,0.08);
253
+ --shadow-ak-xs: none;
254
+ --shadow-ak-sm: none;
255
+ }
256
+
257
+ [data-ak-theme="obsidian"] {
258
+ --color-ak-bg: #09090B;
259
+ --color-ak-surface: #18181B;
260
+ --color-ak-surface-2: #27272A;
261
+ --color-ak-text: #FAFAFA;
262
+ --color-ak-text-secondary: #A1A1AA;
263
+ --color-ak-text-muted: #71717A;
264
+ --color-ak-primary: #60A5FA;
265
+ --color-ak-primary-hover: #93C5FD;
266
+ --color-ak-primary-active: #3B82F6;
267
+ --color-ak-on-primary: #09090B;
268
+ --color-ak-border: rgba(255, 255, 255, 0.10);
269
+ --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
270
+ --color-ak-border-strong: rgba(255, 255, 255, 0.16);
271
+ --color-ak-border-focus: #60A5FA;
272
+ --color-ak-text-link: #60A5FA;
273
+ --color-ak-hover: rgba(255,255,255,0.04);
274
+ --color-ak-active: rgba(255,255,255,0.08);
275
+ --shadow-ak-xs: none;
276
+ --shadow-ak-sm: none;
277
+ }
278
+
279
+ [data-ak-theme="deep-teal"] {
280
+ --color-ak-bg: #004643;
281
+ --color-ak-surface: #00332F;
282
+ --color-ak-surface-2: #0A5854;
283
+ --color-ak-text: #FFFFFE;
284
+ --color-ak-text-secondary: #ABD1C6;
285
+ --color-ak-text-muted: #7AAA9E;
286
+ --color-ak-primary: #F9BC60;
287
+ --color-ak-primary-hover: #FAC97A;
288
+ --color-ak-primary-active: #E8AA4E;
289
+ --color-ak-on-primary: #004643;
290
+ --color-ak-border: rgba(255, 255, 255, 0.10);
291
+ --color-ak-border-subtle: rgba(255, 255, 255, 0.06);
292
+ --color-ak-border-strong: rgba(255, 255, 255, 0.16);
293
+ --color-ak-border-focus: #F9BC60;
294
+ --color-ak-text-link: #F9BC60;
295
+ --color-ak-hover: rgba(255,255,255,0.04);
296
+ --color-ak-active: rgba(255,255,255,0.08);
297
+ --shadow-ak-xs: none;
298
+ --shadow-ak-sm: none;
299
+ }