astralkit 0.3.7 → 0.3.8

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 (7) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/ai-rules.md +1 -1
  3. package/astralkit-theme-v4.css +1 -1
  4. package/astralkit-theme.css +1 -1
  5. package/package.json +2 -3
  6. package/tailwind.cjs +35 -4
  7. package/tailwind.js +0 -491
package/CHANGELOG.md CHANGED
@@ -5,6 +5,15 @@ 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.3.8] — 2026-06-06
9
+
10
+ ### Fixed
11
+ - **Body font corrected to Inter.** `--font-ak-sans` was `'DM Sans'` in `astralkit-theme.css`, `astralkit-theme-v4.css`, and the Tailwind plugin, contradicting the canonical Inter body font. Replaced with `'Inter'` everywhere.
12
+ - **Tailwind v3 plugin export repointed to `tailwind.cjs`.** `astralkit/tailwind` resolved to a stale `tailwind.js` that was both an incomplete token subset and broken under the package's `"type": "module"` (it used CommonJS `require()`). Removed `tailwind.js`; `astralkit/tailwind` now resolves to the complete `tailwind.cjs`. Single source of truth for v3 utilities.
13
+
14
+ ### Added (v3 plugin token parity with v4)
15
+ - Registered every token the v4 `@theme` auto-generates but the v3 plugin was missing: colors (`surface-raised`/`-soft`, `surface-glass`/`-strong`, `highlight-soft`/`-strong`, `skeleton-base`/`-shine`, `sheet-handle`, `pink`/`pink-subtle`), avatar/badge text sizes, spacing `ak-9`/`ak-11`/`ak-14`, `rounded-ak-xs`, `duration-ak-skeleton`, and `size-ak-avatar-xs`. v3 and v4 now expose an identical utility surface.
16
+
8
17
  ## [0.3.3] — 2026-04-22
9
18
 
10
19
  ### Changed
package/ai-rules.md CHANGED
@@ -23,7 +23,7 @@ These constraints prevent generic "AI slop" output. Follow them strictly.
23
23
 
24
24
  **Never use shadows on containment surfaces.** No `shadow-md` on cards, panels, or dropdowns. Use `border border-ak-border` instead. Shadows are reserved for modals and floating elements only.
25
25
 
26
- **Never use generic fonts.** The system fonts are DM Sans (`font-ak-sans`), DM Serif Display (`font-ak-serif`), and JetBrains Mono (`font-ak-mono`). Do not add Arial, Inter, Roboto, or system-ui.
26
+ **Never use generic fonts.** The system fonts are Inter (`font-ak-sans`), DM Serif Display (`font-ak-serif`), and JetBrains Mono (`font-ak-mono`). Do not add Arial, DM Sans, Roboto, or bare system-ui.
27
27
 
28
28
  **Never put gradients on every surface.** Gradients are for hero sections and marketing areas only (`.ak-mesh-dark`, `.ak-mesh-light`). Dashboard chrome, cards, and data views use flat semantic surfaces.
29
29
 
package/astralkit-theme-v4.css CHANGED
@@ -96,7 +96,7 @@
96
96
  --color-ak-info-text: #1d4ed8;
97
97
 
98
98
  /* ── Font families ── */
99
- --font-ak-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
99
+ --font-ak-sans: 'Inter', system-ui, -apple-system, sans-serif;
100
100
  --font-ak-serif: 'DM Serif Display', Georgia, serif;
101
101
  --font-ak-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
102
102
 
package/astralkit-theme.css CHANGED
@@ -98,7 +98,7 @@
98
98
  --color-ak-info-text: #1d4ed8;
99
99
 
100
100
  /* ── Font families ── */
101
- --font-ak-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
101
+ --font-ak-sans: 'Inter', system-ui, -apple-system, sans-serif;
102
102
  --font-ak-serif: 'DM Serif Display', Georgia, serif;
103
103
  --font-ak-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
104
104
 
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "astralkit",
3
- "version": "0.3.7",
3
+ "version": "0.3.8",
4
4
  "description": "Design tokens and component primitives for accessible UI — Tailwind CSS v3 & v4",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  "./theme": "./astralkit-theme.css",
8
8
  "./theme-v4": "./astralkit-theme-v4.css",
9
9
  "./utilities": "./astralkit-utilities.css",
10
- "./tailwind": "./tailwind.js",
10
+ "./tailwind": "./tailwind.cjs",
11
11
  "./tailwind.cjs": "./tailwind.cjs",
12
12
  "./utils": "./lib/utils.js",
13
13
  "./ai-rules": "./ai-rules.md",
@@ -19,7 +19,6 @@
19
19
  "astralkit-utilities.css",
20
20
  "palettes.css",
21
21
  "primitives/",
22
- "tailwind.js",
23
22
  "tailwind.cjs",
24
23
  "ai-rules.md",
25
24
  "lib/",
package/tailwind.cjs CHANGED
@@ -44,8 +44,11 @@ const AK_SPACING = {
44
44
  'ak-6': 'var(--spacing-ak-6)',
45
45
  'ak-7': 'var(--spacing-ak-7)',
46
46
  'ak-8': 'var(--spacing-ak-8)',
47
+ 'ak-9': 'var(--spacing-ak-9)',
47
48
  'ak-10': 'var(--spacing-ak-10)',
49
+ 'ak-11': 'var(--spacing-ak-11)',
48
50
  'ak-12': 'var(--spacing-ak-12)',
51
+ 'ak-14': 'var(--spacing-ak-14)',
49
52
  'ak-16': 'var(--spacing-ak-16)',
50
53
  'ak-20': 'var(--spacing-ak-20)',
51
54
  'ak-24': 'var(--spacing-ak-24)',
@@ -107,6 +110,15 @@ module.exports = plugin(
107
110
  'ak-hover': 'var(--color-ak-hover)',
108
111
  'ak-active': 'var(--color-ak-active)',
109
112
  'ak-elevated': 'var(--color-ak-elevated)',
113
+ 'ak-surface-raised': 'var(--color-ak-surface-raised)',
114
+ 'ak-surface-raised-soft': 'var(--color-ak-surface-raised-soft)',
115
+ 'ak-surface-glass': 'var(--color-ak-surface-glass)',
116
+ 'ak-surface-glass-strong': 'var(--color-ak-surface-glass-strong)',
117
+ 'ak-highlight-soft': 'var(--color-ak-highlight-soft)',
118
+ 'ak-highlight-strong': 'var(--color-ak-highlight-strong)',
119
+ 'ak-skeleton-base': 'var(--color-ak-skeleton-base)',
120
+ 'ak-skeleton-shine': 'var(--color-ak-skeleton-shine)',
121
+ 'ak-sheet-handle': 'var(--color-ak-sheet-handle)',
110
122
  'ak-on-primary': 'var(--color-ak-on-primary)',
111
123
  'ak-primary-subtle': 'var(--color-ak-primary-subtle)',
112
124
  'ak-primary-subtle-hover': 'var(--color-ak-primary-subtle-hover)',
@@ -141,6 +153,8 @@ module.exports = plugin(
141
153
  'ak-info': 'var(--color-ak-info)',
142
154
  'ak-info-subtle': 'var(--color-ak-info-subtle)',
143
155
  'ak-info-text': 'var(--color-ak-info-text)',
156
+ 'ak-pink': 'var(--color-ak-pink)',
157
+ 'ak-pink-subtle': 'var(--color-ak-pink-subtle)',
144
158
  'ak-chart-1': 'var(--color-ak-chart-1)',
145
159
  'ak-chart-2': 'var(--color-ak-chart-2)',
146
160
  'ak-chart-3': 'var(--color-ak-chart-3)',
@@ -186,7 +200,7 @@ module.exports = plugin(
186
200
 
187
201
  /* ── Font Family ── */
188
202
  fontFamily: {
189
- 'ak-sans': ['DM Sans', 'system-ui', '-apple-system', 'sans-serif'],
203
+ 'ak-sans': ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
190
204
  'ak-serif': ['DM Serif Display', 'Georgia', 'serif'],
191
205
  'ak-mono': ['JetBrains Mono', 'Fira Code', 'ui-monospace', 'monospace'],
192
206
  },
@@ -264,6 +278,20 @@ module.exports = plugin(
264
278
  'ak-watermark-3xl': 'clamp(1rem, 33cqi, 38rem)',
265
279
  'ak-watermark-4xl': 'clamp(1rem, 36cqi, 42rem)',
266
280
  'ak-watermark-5xl': 'clamp(1rem, 40cqi, 48rem)',
281
+ // Avatar initials font size
282
+ 'ak-avatar-xs': 'var(--text-ak-avatar-xs)',
283
+ 'ak-avatar-sm': 'var(--text-ak-avatar-sm)',
284
+ 'ak-avatar-md': 'var(--text-ak-avatar-md)',
285
+ 'ak-avatar-lg': 'var(--text-ak-avatar-lg)',
286
+ 'ak-avatar-xl': 'var(--text-ak-avatar-xl)',
287
+ 'ak-avatar-2xl': 'var(--text-ak-avatar-2xl)',
288
+ 'ak-avatar-3xl': 'var(--text-ak-avatar-3xl)',
289
+ // Badge text size
290
+ 'ak-badge-md': 'var(--text-ak-badge-md)',
291
+ 'ak-badge-lg': 'var(--text-ak-badge-lg)',
292
+ 'ak-badge-xl': 'var(--text-ak-badge-xl)',
293
+ 'ak-badge-2xl': 'var(--text-ak-badge-2xl)',
294
+ 'ak-badge-3xl': 'var(--text-ak-badge-3xl)',
267
295
  },
268
296
 
269
297
  /* ── Line Height ── */
@@ -299,6 +327,7 @@ module.exports = plugin(
299
327
  /* ── Border Radius ── */
300
328
  borderRadius: {
301
329
  'ak-none': 'var(--radius-ak-none)',
330
+ 'ak-xs': 'var(--radius-ak-xs)',
302
331
  'ak-sm': 'var(--radius-ak-sm)',
303
332
  'ak-md': 'var(--radius-ak-md)',
304
333
  'ak-lg': 'var(--radius-ak-lg)',
@@ -425,6 +454,7 @@ module.exports = plugin(
425
454
  'ak-icon-xl': 'var(--size-ak-icon-xl)',
426
455
  'ak-icon-2xl': 'var(--size-ak-icon-2xl)',
427
456
  'ak-icon-3xl': 'var(--size-ak-icon-3xl)',
457
+ 'ak-avatar-xs': 'var(--size-ak-avatar-xs)',
428
458
  'ak-avatar-sm': 'var(--size-ak-avatar-sm)',
429
459
  'ak-avatar-md': 'var(--size-ak-avatar-md)',
430
460
  'ak-avatar-lg': 'var(--size-ak-avatar-lg)',
@@ -437,9 +467,10 @@ module.exports = plugin(
437
467
 
438
468
  /* ── Transition Duration ── */
439
469
  transitionDuration: {
440
- 'ak-fast': 'var(--duration-ak-fast)',
441
- 'ak-base': 'var(--duration-ak-base)',
442
- 'ak-slow': 'var(--duration-ak-slow)',
470
+ 'ak-fast': 'var(--duration-ak-fast)',
471
+ 'ak-base': 'var(--duration-ak-base)',
472
+ 'ak-slow': 'var(--duration-ak-slow)',
473
+ 'ak-skeleton': 'var(--duration-ak-skeleton)',
443
474
  },
444
475
 
445
476
  /* ── Transition Timing Function ── */
package/tailwind.js DELETED
@@ -1,491 +0,0 @@
1
- /**
2
- * AstralKit Tailwind CSS v3 Compatibility Plugin
3
- *
4
- * Registers all ak-* design tokens as Tailwind theme extensions
5
- * so that utility classes like bg-ak-bg, text-ak-text, p-ak-2, etc.
6
- * work in Tailwind v3 projects.
7
- *
8
- * Usage (tailwind.config.js):
9
- * const astralkit = require('astralkit/tailwind')
10
- * module.exports = { plugins: [astralkit] }
11
- *
12
- * In Tailwind v4, this plugin is NOT needed — the @theme directive
13
- * in astralkit/theme-v4 handles everything automatically.
14
- */
15
-
16
- const plugin = require('tailwindcss/plugin')
17
-
18
- // Shared spacing map — used by spacing, width, height, minWidth, minHeight, maxWidth
19
- // In Tailwind v4 spacing auto-feeds all sizing utils; in v3 we must extend each explicitly
20
- const AK_SPACING = {
21
- 'ak-0': 'var(--spacing-ak-0)',
22
- 'ak-px': 'var(--spacing-ak-px)',
23
- 'ak-0_5': 'var(--spacing-ak-0_5)',
24
- 'ak-0.5': 'var(--spacing-ak-0_5)',
25
- 'ak-1': 'var(--spacing-ak-1)',
26
- 'ak-1_5': 'var(--spacing-ak-1_5)',
27
- 'ak-1.5': 'var(--spacing-ak-1_5)',
28
- 'ak-2': 'var(--spacing-ak-2)',
29
- 'ak-2_5': 'var(--spacing-ak-2_5)',
30
- 'ak-2.5': 'var(--spacing-ak-2_5)',
31
- 'ak-3': 'var(--spacing-ak-3)',
32
- 'ak-3_5': 'var(--spacing-ak-3_5)',
33
- 'ak-3.5': 'var(--spacing-ak-3_5)',
34
- 'ak-4': 'var(--spacing-ak-4)',
35
- 'ak-4_5': 'var(--spacing-ak-4_5)',
36
- 'ak-4.5': 'var(--spacing-ak-4_5)',
37
- 'ak-5': 'var(--spacing-ak-5)',
38
- 'ak-5_5': 'var(--spacing-ak-5_5)',
39
- 'ak-5.5': 'var(--spacing-ak-5_5)',
40
- 'ak-6': 'var(--spacing-ak-6)',
41
- 'ak-7': 'var(--spacing-ak-7)',
42
- 'ak-8': 'var(--spacing-ak-8)',
43
- 'ak-10': 'var(--spacing-ak-10)',
44
- 'ak-12': 'var(--spacing-ak-12)',
45
- 'ak-16': 'var(--spacing-ak-16)',
46
- 'ak-20': 'var(--spacing-ak-20)',
47
- 'ak-24': 'var(--spacing-ak-24)',
48
- 'ak-mobile-bar': 'var(--spacing-ak-mobile-bar)',
49
- }
50
-
51
- module.exports = plugin(
52
- // Plugin function — injects the CSS custom property definitions as base styles
53
- function ({ addBase }) {
54
- addBase({
55
- ':root': {
56
- /* ── Neutral scale ── */
57
- '--color-ak-neutral-0': '#ffffff',
58
- '--color-ak-neutral-50': '#fafafa',
59
- '--color-ak-neutral-100': '#f5f5f5',
60
- '--color-ak-neutral-200': '#e5e5e5',
61
- '--color-ak-neutral-300': '#d4d4d4',
62
- '--color-ak-neutral-400': '#a3a3a3',
63
- '--color-ak-neutral-500': '#737373',
64
- '--color-ak-neutral-600': '#525252',
65
- '--color-ak-neutral-700': '#404040',
66
- '--color-ak-neutral-800': '#262626',
67
- '--color-ak-neutral-900': '#171717',
68
- '--color-ak-neutral-950': '#0a0a0a',
69
-
70
- /* ── Primary scale ── */
71
- '--color-ak-primary-50': '#f5f5f5',
72
- '--color-ak-primary-100': '#e5e5e5',
73
- '--color-ak-primary-200': '#cccccc',
74
- '--color-ak-primary-300': '#a3a3a3',
75
- '--color-ak-primary-400': '#737373',
76
- '--color-ak-primary-500': '#525252',
77
- '--color-ak-primary-600': '#404040',
78
- '--color-ak-primary-700': '#333333',
79
- '--color-ak-primary-800': '#1a1a1a',
80
- '--color-ak-primary-900': '#000000',
81
- '--color-ak-primary-950': '#000000',
82
-
83
- /* ── Primary action ── */
84
- '--color-ak-primary': '#000000',
85
- '--color-ak-primary-hover': '#1a1a1a',
86
- '--color-ak-primary-active': '#333333',
87
-
88
- /* ── Semantic surfaces ── */
89
- '--color-ak-bg': '#ffffff',
90
- '--color-ak-surface': '#fafafa',
91
- '--color-ak-surface-2': '#f5f5f5',
92
- '--color-ak-hover': '#f7f7f7',
93
- '--color-ak-active': '#f0f0f0',
94
- '--color-ak-elevated': '#ffffff',
95
- '--color-ak-surface-raised': '#ffffff',
96
- '--color-ak-surface-raised-soft': 'rgba(255, 255, 255, 0.78)',
97
- '--color-ak-surface-glass': 'rgba(255, 255, 255, 0.72)',
98
- '--color-ak-surface-glass-strong': 'rgba(255, 255, 255, 0.84)',
99
- '--color-ak-highlight-soft': 'rgba(255, 255, 255, 0.45)',
100
- '--color-ak-highlight-strong': 'rgba(255, 255, 255, 0.72)',
101
- '--color-ak-skeleton-base': '#ededed',
102
- '--color-ak-skeleton-shine': 'rgba(255, 255, 255, 0.72)',
103
- '--color-ak-overlay': 'rgba(0, 0, 0, 0.5)',
104
- '--color-ak-on-primary': '#ffffff',
105
- '--color-ak-primary-subtle': '#f5f5f5',
106
-
107
- /* ── Semantic text ── */
108
- '--color-ak-text': '#171717',
109
- '--color-ak-text-secondary': '#525252',
110
- '--color-ak-text-muted': '#a3a3a3',
111
- '--color-ak-text-disabled': '#d4d4d4',
112
- '--color-ak-text-inverse': '#ffffff',
113
- '--color-ak-text-link': '#000000',
114
- '--color-ak-text-placeholder':'#a3a3a3',
115
-
116
- /* ── Semantic border ── */
117
- '--color-ak-border': '#e5e5e5',
118
- '--color-ak-border-subtle': '#f5f5f5',
119
- '--color-ak-border-strong': '#d4d4d4',
120
- '--color-ak-border-focus': '#000000',
121
-
122
- /* ── Status ── */
123
- '--color-ak-success': '#16a34a',
124
- '--color-ak-success-subtle': '#f0fdf4',
125
- '--color-ak-success-text': '#15803d',
126
- '--color-ak-warning': '#d97706',
127
- '--color-ak-warning-subtle': '#fffbeb',
128
- '--color-ak-warning-text': '#b45309',
129
- '--color-ak-danger': '#dc2626',
130
- '--color-ak-danger-subtle': '#fef2f2',
131
- '--color-ak-danger-text': '#b91c1c',
132
- '--color-ak-info': '#2563eb',
133
- '--color-ak-info-subtle': '#eff6ff',
134
- '--color-ak-info-text': '#1d4ed8',
135
-
136
- /* ── Spacing tokens ── */
137
- '--spacing-ak-0': '0rem',
138
- '--spacing-ak-px': '0.0625rem',
139
- '--spacing-ak-0_5': '0.25rem',
140
- '--spacing-ak-1': '0.5rem',
141
- '--spacing-ak-1_5': '0.75rem',
142
- '--spacing-ak-2': '1rem',
143
- '--spacing-ak-2_5': '1.25rem',
144
- '--spacing-ak-3': '1.5rem',
145
- '--spacing-ak-3_5': '1.75rem',
146
- '--spacing-ak-4': '2rem',
147
- '--spacing-ak-4_5': '2.25rem',
148
- '--spacing-ak-5': '2.5rem',
149
- '--spacing-ak-5_5': '2.75rem',
150
- '--spacing-ak-6': '3rem',
151
- '--spacing-ak-7': '3.5rem',
152
- '--spacing-ak-8': '4rem',
153
- '--spacing-ak-10': '5rem',
154
- '--spacing-ak-12': '6rem',
155
- '--spacing-ak-16': '8rem',
156
- '--spacing-ak-20': '10rem',
157
- '--spacing-ak-24': '12rem',
158
- '--spacing-ak-mobile-bar': '4.5rem',
159
-
160
- /* ── Size tokens ── */
161
- '--size-ak-panel-width': '260px',
162
- '--size-ak-icon-xs': '0.75rem',
163
- '--size-ak-icon-sm': '1rem',
164
- '--size-ak-icon-md': '1.25rem',
165
- '--size-ak-icon-lg': '1.5rem',
166
- '--size-ak-icon-xl': '1.75rem',
167
- '--size-ak-icon-2xl': '2rem',
168
- '--size-ak-icon-3xl': '3rem',
169
- '--size-ak-sheet-handle-width': '2.25rem',
170
- '--size-ak-sheet-handle-height': '0.25rem',
171
- '--color-ak-sheet-handle': '#d4d4d4',
172
-
173
- /* ── Animation tokens ── */
174
- '--duration-ak-fast': '110ms',
175
- '--duration-ak-base': '150ms',
176
- '--duration-ak-slow': '240ms',
177
- '--duration-ak-skeleton': '1800ms',
178
- '--ease-ak-default': 'cubic-bezier(0.4, 0, 0.2, 1)',
179
- '--ease-ak-in': 'cubic-bezier(0.4, 0, 1, 1)',
180
- '--ease-ak-out': 'cubic-bezier(0, 0, 0.2, 1)',
181
- '--ease-ak-spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
182
- '--ease-ak-bounce': 'cubic-bezier(0.25, 1, 0.5, 1)',
183
-
184
- /* ── Z-index tokens ── */
185
- '--z-ak-sticky': '100',
186
- '--z-ak-dropdown': '200',
187
- '--z-ak-overlay': '300',
188
- '--z-ak-modal': '400',
189
-
190
- /* ── Radius tokens ── */
191
- '--radius-ak-none': '0',
192
- '--radius-ak-sm': '0.25rem',
193
- '--radius-ak-md': '0.5rem',
194
- '--radius-ak-lg': '0.75rem',
195
- '--radius-ak-xl': '1rem',
196
- '--radius-ak-2xl': '1.5rem',
197
- '--radius-ak-3xl': '2rem',
198
- '--radius-ak-full': '9999px',
199
-
200
- /* ── Font families ── */
201
- '--font-ak-sans': "'DM Sans', system-ui, -apple-system, sans-serif",
202
- '--font-ak-serif': "'DM Serif Display', Georgia, serif",
203
- '--font-ak-mono': "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
204
- },
205
- })
206
- },
207
-
208
- // Config — extends Tailwind's theme with ak-* utilities
209
- {
210
- theme: {
211
- extend: {
212
- /* ── Colors ──
213
- Every ak-* color token becomes a Tailwind color utility:
214
- bg-ak-bg, text-ak-text, border-ak-border, etc. */
215
- colors: {
216
- // Neutral scale
217
- 'ak-neutral-0': 'var(--color-ak-neutral-0)',
218
- 'ak-neutral-50': 'var(--color-ak-neutral-50)',
219
- 'ak-neutral-100': 'var(--color-ak-neutral-100)',
220
- 'ak-neutral-200': 'var(--color-ak-neutral-200)',
221
- 'ak-neutral-300': 'var(--color-ak-neutral-300)',
222
- 'ak-neutral-400': 'var(--color-ak-neutral-400)',
223
- 'ak-neutral-500': 'var(--color-ak-neutral-500)',
224
- 'ak-neutral-600': 'var(--color-ak-neutral-600)',
225
- 'ak-neutral-700': 'var(--color-ak-neutral-700)',
226
- 'ak-neutral-800': 'var(--color-ak-neutral-800)',
227
- 'ak-neutral-900': 'var(--color-ak-neutral-900)',
228
- 'ak-neutral-950': 'var(--color-ak-neutral-950)',
229
-
230
- // Primary scale
231
- 'ak-primary-50': 'var(--color-ak-primary-50)',
232
- 'ak-primary-100': 'var(--color-ak-primary-100)',
233
- 'ak-primary-200': 'var(--color-ak-primary-200)',
234
- 'ak-primary-300': 'var(--color-ak-primary-300)',
235
- 'ak-primary-400': 'var(--color-ak-primary-400)',
236
- 'ak-primary-500': 'var(--color-ak-primary-500)',
237
- 'ak-primary-600': 'var(--color-ak-primary-600)',
238
- 'ak-primary-700': 'var(--color-ak-primary-700)',
239
- 'ak-primary-800': 'var(--color-ak-primary-800)',
240
- 'ak-primary-900': 'var(--color-ak-primary-900)',
241
- 'ak-primary-950': 'var(--color-ak-primary-950)',
242
-
243
- // Primary action
244
- 'ak-primary': 'var(--color-ak-primary)',
245
- 'ak-primary-hover': 'var(--color-ak-primary-hover)',
246
- 'ak-primary-active': 'var(--color-ak-primary-active)',
247
-
248
- // Semantic surfaces
249
- 'ak-bg': 'var(--color-ak-bg)',
250
- 'ak-surface': 'var(--color-ak-surface)',
251
- 'ak-surface-2': 'var(--color-ak-surface-2)',
252
- 'ak-hover': 'var(--color-ak-hover)',
253
- 'ak-active': 'var(--color-ak-active)',
254
- 'ak-elevated': 'var(--color-ak-elevated)',
255
- 'ak-on-primary': 'var(--color-ak-on-primary)',
256
- 'ak-primary-subtle': 'var(--color-ak-primary-subtle)',
257
- 'ak-overlay': 'var(--color-ak-overlay)',
258
-
259
- // Semantic text
260
- 'ak-text': 'var(--color-ak-text)',
261
- 'ak-text-secondary': 'var(--color-ak-text-secondary)',
262
- 'ak-text-muted': 'var(--color-ak-text-muted)',
263
- 'ak-text-disabled': 'var(--color-ak-text-disabled)',
264
- 'ak-text-inverse': 'var(--color-ak-text-inverse)',
265
- 'ak-text-link': 'var(--color-ak-text-link)',
266
- 'ak-text-placeholder':'var(--color-ak-text-placeholder)',
267
-
268
- // Semantic border
269
- 'ak-border': 'var(--color-ak-border)',
270
- 'ak-border-subtle': 'var(--color-ak-border-subtle)',
271
- 'ak-border-strong': 'var(--color-ak-border-strong)',
272
- 'ak-border-focus': 'var(--color-ak-border-focus)',
273
-
274
- // Status
275
- 'ak-success': 'var(--color-ak-success)',
276
- 'ak-success-subtle': 'var(--color-ak-success-subtle)',
277
- 'ak-success-text': 'var(--color-ak-success-text)',
278
- 'ak-warning': 'var(--color-ak-warning)',
279
- 'ak-warning-subtle': 'var(--color-ak-warning-subtle)',
280
- 'ak-warning-text': 'var(--color-ak-warning-text)',
281
- 'ak-danger': 'var(--color-ak-danger)',
282
- 'ak-danger-subtle': 'var(--color-ak-danger-subtle)',
283
- 'ak-danger-text': 'var(--color-ak-danger-text)',
284
- 'ak-info': 'var(--color-ak-info)',
285
- 'ak-info-subtle': 'var(--color-ak-info-subtle)',
286
- 'ak-info-text': 'var(--color-ak-info-text)',
287
- },
288
-
289
- /* ── Spacing ──
290
- p-ak-2, m-ak-3, gap-ak-1, etc.
291
- In v3, spacing doesn't auto-feed into w-/h-/min-w-/min-h-/max-w-
292
- so we also spread AK_SPACING into those configs below. */
293
- spacing: {
294
- ...AK_SPACING,
295
- // Fluid spacing
296
- 'ak-fl-3xs': 'clamp(0.25rem, 0.21rem + 0.14vw, 0.375rem)',
297
- 'ak-fl-2xs': 'clamp(0.5rem, 0.43rem + 0.28vw, 0.75rem)',
298
- 'ak-fl-xs': 'clamp(0.75rem, 0.65rem + 0.42vw, 1rem)',
299
- 'ak-fl-sm': 'clamp(1rem, 0.86rem + 0.56vw, 1.5rem)',
300
- 'ak-fl-md': 'clamp(1.5rem, 1.29rem + 0.83vw, 2rem)',
301
- 'ak-fl-lg': 'clamp(2rem, 1.72rem + 1.11vw, 3rem)',
302
- 'ak-fl-xl': 'clamp(3rem, 2.5rem + 1.85vw, 4.5rem)',
303
- 'ak-fl-2xl': 'clamp(4rem, 3.22rem + 2.78vw, 6rem)',
304
- 'ak-fl-3xl': 'clamp(6rem, 4.86rem + 4.17vw, 9rem)',
305
- // Fluid space pairs
306
- 'ak-fl-xs-md': 'clamp(0.75rem, 0.43rem + 1.39vw, 2rem)',
307
- 'ak-fl-xs-lg': 'clamp(0.75rem, 0.14rem + 2.78vw, 3rem)',
308
- 'ak-fl-sm-lg': 'clamp(1rem, 0.43rem + 2.78vw, 3rem)',
309
- 'ak-fl-sm-xl': 'clamp(1rem, 0rem + 4.17vw, 4.5rem)',
310
- 'ak-fl-md-xl': 'clamp(1.5rem, 0.57rem + 3.47vw, 4.5rem)',
311
- 'ak-fl-md-2xl': 'clamp(1.5rem, 0rem + 5.56vw, 6rem)',
312
- 'ak-fl-lg-2xl': 'clamp(2rem, 0.57rem + 5.56vw, 6rem)',
313
- 'ak-fl-xl-3xl': 'clamp(3rem, 0.57rem + 8.33vw, 9rem)',
314
- },
315
-
316
- /* ── Font Family ── */
317
- fontFamily: {
318
- 'ak-sans': ['DM Sans', 'system-ui', '-apple-system', 'sans-serif'],
319
- 'ak-serif': ['DM Serif Display', 'Georgia', 'serif'],
320
- 'ak-mono': ['JetBrains Mono', 'Fira Code', 'ui-monospace', 'monospace'],
321
- },
322
-
323
- /* ── Font Size ──
324
- text-ak-base, text-ak-lg, text-ak-fl-2xl, etc. */
325
- fontSize: {
326
- // Static scale
327
- 'ak-2xs': 'var(--text-ak-2xs)',
328
- 'ak-xs': 'var(--text-ak-xs)',
329
- 'ak-sm': 'var(--text-ak-sm)',
330
- 'ak-base': 'var(--text-ak-base)',
331
- 'ak-lg': 'var(--text-ak-lg)',
332
- 'ak-xl': 'var(--text-ak-xl)',
333
- 'ak-2xl': 'var(--text-ak-2xl)',
334
- 'ak-3xl': 'var(--text-ak-3xl)',
335
- 'ak-4xl': 'var(--text-ak-4xl)',
336
- 'ak-5xl': 'var(--text-ak-5xl)',
337
- 'ak-6xl': 'var(--text-ak-6xl)',
338
- 'ak-7xl': 'var(--text-ak-7xl)',
339
- 'ak-8xl': 'var(--text-ak-8xl)',
340
- 'ak-9xl': 'var(--text-ak-9xl)',
341
- // Fluid scale
342
- 'ak-fl-xs': 'clamp(0.6875rem, 0.67rem + 0.06vw, 0.75rem)',
343
- 'ak-fl-sm': 'clamp(0.75rem, 0.71rem + 0.12vw, 0.875rem)',
344
- 'ak-fl-base': 'clamp(0.875rem, 0.84rem + 0.12vw, 1rem)',
345
- 'ak-fl-lg': 'clamp(1rem, 0.96rem + 0.12vw, 1.125rem)',
346
- 'ak-fl-xl': 'clamp(1.125rem, 1.09rem + 0.12vw, 1.25rem)',
347
- 'ak-fl-2xl': 'clamp(1.25rem, 1.18rem + 0.23vw, 1.5rem)',
348
- 'ak-fl-3xl': 'clamp(1.5rem, 1.39rem + 0.35vw, 1.875rem)',
349
- 'ak-fl-4xl': 'clamp(1.875rem, 1.76rem + 0.35vw, 2.25rem)',
350
- 'ak-fl-5xl': 'clamp(2.25rem, 2.03rem + 0.69vw, 3rem)',
351
- 'ak-fl-6xl': 'clamp(3rem, 2.78rem + 0.69vw, 3.75rem)',
352
- 'ak-fl-7xl': 'clamp(3.5rem, 3.2rem + 0.93vw, 4.5rem)',
353
- 'ak-fl-8xl': 'clamp(4.5rem, 4.06rem + 1.39vw, 6rem)',
354
- 'ak-fl-9xl': 'clamp(5.25rem, 4.73rem + 1.62vw, 7rem)',
355
- // Display scale
356
- 'ak-display-xs': 'clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem)',
357
- 'ak-display-sm': 'clamp(0.875rem, 0.83rem + 0.19vw, 1rem)',
358
- 'ak-display-base': 'clamp(1rem, 0.94rem + 0.28vw, 1.1875rem)',
359
- 'ak-display-lg': 'clamp(1.125rem, 1.01rem + 0.52vw, 1.5rem)',
360
- 'ak-display-xl': 'clamp(1.25rem, 1.07rem + 0.83vw, 1.875rem)',
361
- 'ak-display-2xl': 'clamp(1.5rem, 1.2rem + 1.11vw, 2.25rem)',
362
- 'ak-display-3xl': 'clamp(1.875rem, 1.42rem + 1.67vw, 3rem)',
363
- 'ak-display-4xl': 'clamp(2.25rem, 1.58rem + 2.5vw, 3.75rem)',
364
- 'ak-display-5xl': 'clamp(3rem, 2.07rem + 3.47vw, 5.25rem)',
365
- 'ak-display-6xl': 'clamp(3.75rem, 2.5rem + 4.63vw, 7rem)',
366
- 'ak-display-7xl': 'clamp(4.5rem, 3.06rem + 5.56vw, 8rem)',
367
- 'ak-display-8xl': 'clamp(5rem, 3.06rem + 6.94vw, 9rem)',
368
- 'ak-display-9xl': 'clamp(5.5rem, 3.06rem + 7.64vw, 10rem)',
369
- },
370
-
371
- /* ── Line Height ── */
372
- lineHeight: {
373
- 'ak-display': 'var(--leading-ak-display)',
374
- 'ak-tighter': 'var(--leading-ak-tighter)',
375
- 'ak-none': 'var(--leading-ak-none)',
376
- 'ak-tight': 'var(--leading-ak-tight)',
377
- 'ak-snug': 'var(--leading-ak-snug)',
378
- 'ak-normal': 'var(--leading-ak-normal)',
379
- 'ak-relaxed': 'var(--leading-ak-relaxed)',
380
- 'ak-loose': 'var(--leading-ak-loose)',
381
- },
382
-
383
- /* ── Letter Spacing ── */
384
- letterSpacing: {
385
- 'ak-tighter': 'var(--tracking-ak-tighter)',
386
- 'ak-tight': 'var(--tracking-ak-tight)',
387
- 'ak-normal': 'var(--tracking-ak-normal)',
388
- 'ak-wide': 'var(--tracking-ak-wide)',
389
- 'ak-wider': 'var(--tracking-ak-wider)',
390
- 'ak-widest': 'var(--tracking-ak-widest)',
391
- },
392
-
393
- /* ── Border Radius ── */
394
- borderRadius: {
395
- 'ak-none': 'var(--radius-ak-none)',
396
- 'ak-sm': 'var(--radius-ak-sm)',
397
- 'ak-md': 'var(--radius-ak-md)',
398
- 'ak-lg': 'var(--radius-ak-lg)',
399
- 'ak-xl': 'var(--radius-ak-xl)',
400
- 'ak-2xl': 'var(--radius-ak-2xl)',
401
- 'ak-3xl': 'var(--radius-ak-3xl)',
402
- 'ak-full': 'var(--radius-ak-full)',
403
- },
404
-
405
- /* ── Box Shadow ── */
406
- boxShadow: {
407
- 'ak-xs': 'var(--shadow-ak-xs)',
408
- 'ak-sm': 'var(--shadow-ak-sm)',
409
- 'ak-md': 'var(--shadow-ak-md)',
410
- 'ak-lg': 'var(--shadow-ak-lg)',
411
- 'ak-xl': 'var(--shadow-ak-xl)',
412
- 'ak-2xl': 'var(--shadow-ak-2xl)',
413
- },
414
-
415
- /* ── Max Width (containers) ── */
416
- maxWidth: {
417
- 'ak-page': 'var(--container-ak-page)',
418
- 'ak-xs': 'var(--container-ak-xs)',
419
- 'ak-sm': 'var(--container-ak-sm)',
420
- 'ak-md': 'var(--container-ak-md)',
421
- 'ak-lg': 'var(--container-ak-lg)',
422
- 'ak-xl': 'var(--container-ak-xl)',
423
- 'ak-2xl': 'var(--container-ak-2xl)',
424
- 'ak-3xl': 'var(--container-ak-3xl)',
425
- 'ak-4xl': 'var(--container-ak-4xl)',
426
- 'ak-prose': 'var(--container-ak-prose)',
427
- },
428
-
429
- /* ── Z-Index ── */
430
- zIndex: {
431
- 'ak-sticky': 'var(--z-ak-sticky)',
432
- 'ak-dropdown': 'var(--z-ak-dropdown)',
433
- 'ak-overlay': 'var(--z-ak-overlay)',
434
- 'ak-modal': 'var(--z-ak-modal)',
435
- },
436
-
437
- /* ── Height ── (spacing + named heights) */
438
- height: {
439
- ...AK_SPACING,
440
- 'ak-nav': 'var(--height-ak-nav)',
441
- 'ak-touch': 'var(--height-ak-touch)',
442
- 'ak-control-sm': 'var(--height-ak-control-sm)',
443
- 'ak-control-md': 'var(--height-ak-control-md)',
444
- 'ak-control-lg': 'var(--height-ak-control-lg)',
445
- 'ak-control-xl': 'var(--height-ak-control-xl)',
446
- },
447
-
448
- /* ── Min Height ── */
449
- minHeight: {
450
- ...AK_SPACING,
451
- 'ak-nav': 'var(--height-ak-nav)',
452
- 'ak-touch': 'var(--height-ak-touch)',
453
- 'ak-control-sm': 'var(--height-ak-control-sm)',
454
- 'ak-control-md': 'var(--height-ak-control-md)',
455
- 'ak-control-lg': 'var(--height-ak-control-lg)',
456
- 'ak-control-xl': 'var(--height-ak-control-xl)',
457
- },
458
-
459
- /* ── Width ── */
460
- width: {
461
- ...AK_SPACING,
462
- 'ak-touch': 'var(--width-ak-touch)',
463
- 'ak-panel-width': 'var(--size-ak-panel-width)',
464
- },
465
-
466
- /* ── Min Width ── */
467
- minWidth: {
468
- ...AK_SPACING,
469
- 'ak-touch': 'var(--width-ak-touch)',
470
- 'ak-panel-width': 'var(--size-ak-panel-width)',
471
- },
472
-
473
- /* ── Transition Duration ── */
474
- transitionDuration: {
475
- 'ak-fast': 'var(--duration-ak-fast)',
476
- 'ak-base': 'var(--duration-ak-base)',
477
- 'ak-slow': 'var(--duration-ak-slow)',
478
- },
479
-
480
- /* ── Transition Timing Function ── */
481
- transitionTimingFunction: {
482
- 'ak-default': 'var(--ease-ak-default)',
483
- 'ak-in': 'var(--ease-ak-in)',
484
- 'ak-out': 'var(--ease-ak-out)',
485
- 'ak-spring': 'var(--ease-ak-spring)',
486
- 'ak-bounce': 'var(--ease-ak-bounce)',
487
- },
488
- },
489
- },
490
- }
491
- )