astralkit 0.2.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.
- package/LICENSE +34 -0
- package/README.md +58 -0
- package/ai-rules.md +339 -0
- package/astralkit-theme.css +376 -0
- package/astralkit-utilities.css +567 -0
- package/lib/utils.js +6 -0
- package/package.json +35 -0
|
@@ -0,0 +1,567 @@
|
|
|
1
|
+
/* ══════════════════════════════════════════════════════════
|
|
2
|
+
AstralKit Component Primitives
|
|
3
|
+
Only things Tailwind classes can't express:
|
|
4
|
+
- Pseudo-elements (tooltips)
|
|
5
|
+
- Parent-state child selectors ([data-expanded] children)
|
|
6
|
+
- Transitions on width (not supported by Tailwind)
|
|
7
|
+
|
|
8
|
+
IMPORTANT: All rules MUST be inside @layer so they don't
|
|
9
|
+
become unlayered CSS. Unlayered styles override ALL layered
|
|
10
|
+
utility classes (text-white, text-[#fff], etc.) regardless
|
|
11
|
+
of specificity — this is how CSS cascade layers work.
|
|
12
|
+
══════════════════════════════════════════════════════════ */
|
|
13
|
+
|
|
14
|
+
@layer base {
|
|
15
|
+
/* Tailwind v4 preflight already sets a { color: inherit },
|
|
16
|
+
so we only add text-decoration: none here. */
|
|
17
|
+
a { text-decoration: none; }
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@layer components {
|
|
21
|
+
|
|
22
|
+
/* Focus ring — Tailwind v4 has no --focus-* namespace, so this must be a utility class */
|
|
23
|
+
.ak-focus-ring {
|
|
24
|
+
outline: none;
|
|
25
|
+
}
|
|
26
|
+
.ak-focus-ring:focus-visible {
|
|
27
|
+
outline: 2px solid var(--color-ak-border-focus);
|
|
28
|
+
outline-offset: 2px;
|
|
29
|
+
}
|
|
30
|
+
/* Inset variant for menu items inside panels */
|
|
31
|
+
.ak-focus-ring-inset {
|
|
32
|
+
outline: none;
|
|
33
|
+
}
|
|
34
|
+
.ak-focus-ring-inset:focus-visible {
|
|
35
|
+
outline: 2px solid var(--color-ak-border-focus);
|
|
36
|
+
outline-offset: -2px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* ── Heading Presets ──
|
|
40
|
+
Composite heading styles. Usage: <h1 class="ak-h1">
|
|
41
|
+
Combine font-size, line-height, letter-spacing, weight. */
|
|
42
|
+
.ak-h1 {
|
|
43
|
+
font-size: var(--text-ak-5xl);
|
|
44
|
+
line-height: var(--leading-ak-tight);
|
|
45
|
+
letter-spacing: var(--tracking-ak-tighter);
|
|
46
|
+
font-weight: 700;
|
|
47
|
+
color: var(--color-ak-text);
|
|
48
|
+
}
|
|
49
|
+
.ak-h2 {
|
|
50
|
+
font-size: var(--text-ak-4xl);
|
|
51
|
+
line-height: var(--leading-ak-tight);
|
|
52
|
+
letter-spacing: var(--tracking-ak-tight);
|
|
53
|
+
font-weight: 700;
|
|
54
|
+
color: var(--color-ak-text);
|
|
55
|
+
}
|
|
56
|
+
.ak-h3 {
|
|
57
|
+
font-size: var(--text-ak-3xl);
|
|
58
|
+
line-height: var(--leading-ak-snug);
|
|
59
|
+
letter-spacing: var(--tracking-ak-tight);
|
|
60
|
+
font-weight: 600;
|
|
61
|
+
color: var(--color-ak-text);
|
|
62
|
+
}
|
|
63
|
+
.ak-h4 {
|
|
64
|
+
font-size: var(--text-ak-2xl);
|
|
65
|
+
line-height: var(--leading-ak-snug);
|
|
66
|
+
letter-spacing: var(--tracking-ak-normal);
|
|
67
|
+
font-weight: 600;
|
|
68
|
+
color: var(--color-ak-text);
|
|
69
|
+
}
|
|
70
|
+
.ak-h5 {
|
|
71
|
+
font-size: var(--text-ak-xl);
|
|
72
|
+
line-height: var(--leading-ak-snug);
|
|
73
|
+
letter-spacing: var(--tracking-ak-normal);
|
|
74
|
+
font-weight: 600;
|
|
75
|
+
color: var(--color-ak-text);
|
|
76
|
+
}
|
|
77
|
+
.ak-h6 {
|
|
78
|
+
font-size: var(--text-ak-lg);
|
|
79
|
+
line-height: var(--leading-ak-snug);
|
|
80
|
+
letter-spacing: var(--tracking-ak-normal);
|
|
81
|
+
font-weight: 500;
|
|
82
|
+
color: var(--color-ak-text);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* ── Body / Caption Presets ── */
|
|
86
|
+
.ak-body {
|
|
87
|
+
font-size: var(--text-ak-base);
|
|
88
|
+
line-height: var(--leading-ak-normal);
|
|
89
|
+
color: var(--color-ak-text);
|
|
90
|
+
}
|
|
91
|
+
.ak-body-secondary {
|
|
92
|
+
font-size: var(--text-ak-base);
|
|
93
|
+
line-height: var(--leading-ak-normal);
|
|
94
|
+
color: var(--color-ak-text-secondary);
|
|
95
|
+
}
|
|
96
|
+
.ak-small {
|
|
97
|
+
font-size: var(--text-ak-sm);
|
|
98
|
+
line-height: var(--leading-ak-normal);
|
|
99
|
+
color: var(--color-ak-text-secondary);
|
|
100
|
+
}
|
|
101
|
+
.ak-caption {
|
|
102
|
+
font-size: var(--text-ak-xs);
|
|
103
|
+
line-height: var(--leading-ak-normal);
|
|
104
|
+
color: var(--color-ak-text-muted);
|
|
105
|
+
}
|
|
106
|
+
.ak-label {
|
|
107
|
+
font-size: var(--text-ak-xs);
|
|
108
|
+
line-height: var(--leading-ak-normal);
|
|
109
|
+
font-weight: 600;
|
|
110
|
+
letter-spacing: var(--tracking-ak-wider);
|
|
111
|
+
text-transform: uppercase;
|
|
112
|
+
color: var(--color-ak-text-muted);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* ── UI Chrome Typography Presets ──
|
|
116
|
+
For shell, nav, panels, forms — NOT document content.
|
|
117
|
+
Each bundles size + weight + line-height + tracking + color. */
|
|
118
|
+
.ak-overline { font-size: var(--text-ak-xs); font-weight: 600; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ak-text-muted); }
|
|
119
|
+
.ak-form-label { font-size: var(--text-ak-sm); font-weight: 500; line-height: 1; color: var(--color-ak-text); }
|
|
120
|
+
.ak-helper { font-size: var(--text-ak-xs); font-weight: 400; line-height: 1.3; color: var(--color-ak-text-muted); }
|
|
121
|
+
.ak-ui-body { font-size: var(--text-ak-sm); font-weight: 400; line-height: 1.5; color: var(--color-ak-text-secondary); }
|
|
122
|
+
.ak-nav-label-text { font-size: var(--text-ak-base); font-weight: 500; line-height: 1; color: var(--color-ak-text); }
|
|
123
|
+
.ak-card-title { font-size: var(--text-ak-base); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-ak-text); }
|
|
124
|
+
.ak-panel-title { font-size: var(--text-ak-lg); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-ak-text); }
|
|
125
|
+
.ak-page-title { font-size: var(--text-ak-xl); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-ak-text); }
|
|
126
|
+
|
|
127
|
+
/* Icon sizes (referenced by theme, will move to @theme when Tailwind supports --size-*) */
|
|
128
|
+
.ak-icon-xs { font-size: var(--size-ak-icon-xs); line-height: 1; }
|
|
129
|
+
.ak-icon-sm { font-size: var(--size-ak-icon-sm); line-height: 1; }
|
|
130
|
+
.ak-icon-md { font-size: var(--size-ak-icon-md); line-height: 1; }
|
|
131
|
+
.ak-icon-lg { font-size: var(--size-ak-icon-lg); line-height: 1; }
|
|
132
|
+
.ak-icon-xl { font-size: var(--size-ak-icon-xl); line-height: 1; }
|
|
133
|
+
.ak-icon-2xl { font-size: var(--size-ak-icon-2xl); line-height: 1; }
|
|
134
|
+
.ak-icon-3xl { font-size: var(--size-ak-icon-3xl); line-height: 1; }
|
|
135
|
+
|
|
136
|
+
/* Sidebar: width transition (Tailwind can't transition between two width values) */
|
|
137
|
+
[data-ak-sidebar] {
|
|
138
|
+
width: 5rem;
|
|
139
|
+
transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
140
|
+
}
|
|
141
|
+
[data-ak-sidebar][data-expanded] {
|
|
142
|
+
width: 18rem;
|
|
143
|
+
align-items: stretch;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* Expanded: nav items go full-width left-aligned */
|
|
147
|
+
[data-expanded] .ak-nav-item {
|
|
148
|
+
width: 100%;
|
|
149
|
+
justify-content: flex-start;
|
|
150
|
+
padding-left: 1rem;
|
|
151
|
+
padding-right: 0.75rem;
|
|
152
|
+
gap: 0.75rem;
|
|
153
|
+
}
|
|
154
|
+
[data-expanded] .ak-nav-item.ak-logo-item {
|
|
155
|
+
padding-left: 0.5rem;
|
|
156
|
+
padding-right: 0.5rem;
|
|
157
|
+
gap: 0.5rem;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* Mobile bar labels */
|
|
161
|
+
.ak-mobile-label { font-size: var(--size-ak-icon-sm); font-weight: 500; line-height: 1.25; }
|
|
162
|
+
|
|
163
|
+
/* Nav labels: hidden collapsed, shown expanded */
|
|
164
|
+
.ak-nav-label {
|
|
165
|
+
display: none;
|
|
166
|
+
font-size: 1rem;
|
|
167
|
+
line-height: 1.5;
|
|
168
|
+
white-space: nowrap;
|
|
169
|
+
overflow: hidden;
|
|
170
|
+
text-overflow: ellipsis;
|
|
171
|
+
flex: 1;
|
|
172
|
+
min-width: 0;
|
|
173
|
+
text-align: left;
|
|
174
|
+
}
|
|
175
|
+
[data-expanded] .ak-nav-label { display: block; }
|
|
176
|
+
|
|
177
|
+
/* Tooltips (CSS pseudo-elements — can't do in Tailwind) */
|
|
178
|
+
[data-ak-tooltip] { position: relative; }
|
|
179
|
+
[data-ak-tooltip]::before {
|
|
180
|
+
content: '';
|
|
181
|
+
position: absolute;
|
|
182
|
+
left: 100%; top: 50%; transform: translateY(-50%);
|
|
183
|
+
width: 0.75rem; height: 100%;
|
|
184
|
+
pointer-events: none;
|
|
185
|
+
}
|
|
186
|
+
[data-ak-tooltip]::after {
|
|
187
|
+
content: attr(data-ak-tooltip);
|
|
188
|
+
position: absolute;
|
|
189
|
+
left: calc(100% + 0.5rem); top: 50%;
|
|
190
|
+
transform: translateY(-50%);
|
|
191
|
+
background: var(--color-ak-text);
|
|
192
|
+
color: var(--color-ak-text-inverse);
|
|
193
|
+
font-size: var(--size-ak-icon-sm);
|
|
194
|
+
line-height: 1.25;
|
|
195
|
+
padding: 0.375rem 0.75rem;
|
|
196
|
+
border-radius: var(--radius-ak-md);
|
|
197
|
+
white-space: nowrap;
|
|
198
|
+
pointer-events: none;
|
|
199
|
+
opacity: 0;
|
|
200
|
+
transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
201
|
+
z-index: var(--z-ak-modal);
|
|
202
|
+
}
|
|
203
|
+
[data-ak-tooltip]:hover::after,
|
|
204
|
+
[data-ak-tooltip]:focus-visible::after { opacity: 1; }
|
|
205
|
+
[data-ak-tooltip]:hover::before { pointer-events: auto; }
|
|
206
|
+
[data-expanded] [data-ak-tooltip]::after,
|
|
207
|
+
[data-expanded] [data-ak-tooltip]::before { display: none; }
|
|
208
|
+
@media (max-width: 767px) {
|
|
209
|
+
[data-ak-tooltip]::before,
|
|
210
|
+
[data-ak-tooltip]::after { display: none; }
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* Account switcher: collapsed vs expanded (complex child selectors) */
|
|
214
|
+
[data-expanded] .ak-profile-info { display: flex; }
|
|
215
|
+
[data-expanded] .ak-account-chevron { display: flex; }
|
|
216
|
+
[data-expanded] .ak-account-trigger {
|
|
217
|
+
justify-content: space-between;
|
|
218
|
+
border: 1px solid var(--color-ak-border);
|
|
219
|
+
border-radius: var(--radius-ak-lg);
|
|
220
|
+
padding: 0.625rem 0.75rem;
|
|
221
|
+
gap: 0.625rem;
|
|
222
|
+
min-height: auto;
|
|
223
|
+
}
|
|
224
|
+
[data-expanded] .ak-account-left { gap: 0.625rem; }
|
|
225
|
+
|
|
226
|
+
/* Mobile overlay transition */
|
|
227
|
+
.ak-mobile-overlay {
|
|
228
|
+
position: fixed; inset: 0;
|
|
229
|
+
z-index: var(--z-ak-overlay);
|
|
230
|
+
background: var(--color-ak-overlay);
|
|
231
|
+
opacity: 0; visibility: hidden;
|
|
232
|
+
transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
233
|
+
visibility 240ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
234
|
+
}
|
|
235
|
+
.ak-mobile-overlay-open { opacity: 1; visibility: visible; }
|
|
236
|
+
|
|
237
|
+
/* Mobile sheet transition */
|
|
238
|
+
.ak-mobile-sheet {
|
|
239
|
+
position: fixed;
|
|
240
|
+
bottom: 0; left: 0; right: 0;
|
|
241
|
+
z-index: var(--z-ak-modal);
|
|
242
|
+
max-height: 85vh;
|
|
243
|
+
overflow-y: auto;
|
|
244
|
+
border-radius: var(--radius-ak-lg) var(--radius-ak-lg) 0 0;
|
|
245
|
+
transform: translateY(100%);
|
|
246
|
+
transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
247
|
+
}
|
|
248
|
+
.ak-mobile-sheet-open { transform: translateY(0); }
|
|
249
|
+
.ak-mobile-sheet-handle {
|
|
250
|
+
display: flex;
|
|
251
|
+
justify-content: center;
|
|
252
|
+
padding-top: var(--spacing-ak-1);
|
|
253
|
+
touch-action: none;
|
|
254
|
+
-webkit-user-select: none;
|
|
255
|
+
user-select: none;
|
|
256
|
+
cursor: grab;
|
|
257
|
+
}
|
|
258
|
+
.ak-mobile-sheet-handle:active { cursor: grabbing; }
|
|
259
|
+
.ak-mobile-sheet-handle::before {
|
|
260
|
+
content: "";
|
|
261
|
+
display: block;
|
|
262
|
+
width: var(--size-ak-sheet-handle-width);
|
|
263
|
+
height: var(--size-ak-sheet-handle-height);
|
|
264
|
+
background: var(--color-ak-sheet-handle);
|
|
265
|
+
border-radius: var(--radius-ak-full);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/* Profile panel */
|
|
269
|
+
.ak-profile-panel {
|
|
270
|
+
position: fixed;
|
|
271
|
+
width: 16rem;
|
|
272
|
+
background: var(--color-ak-bg);
|
|
273
|
+
border: 1px solid var(--color-ak-border);
|
|
274
|
+
border-radius: var(--radius-ak-lg);
|
|
275
|
+
box-shadow: var(--shadow-ak-lg);
|
|
276
|
+
opacity: 0; visibility: hidden;
|
|
277
|
+
transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
278
|
+
visibility 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
279
|
+
z-index: var(--z-ak-modal);
|
|
280
|
+
}
|
|
281
|
+
.ak-profile-panel-open { opacity: 1; visibility: visible; }
|
|
282
|
+
|
|
283
|
+
/* Scrollbar — thin styled scrollbar for any scrollable AstralKit container */
|
|
284
|
+
.ak-scrollbar {
|
|
285
|
+
scrollbar-width: thin;
|
|
286
|
+
scrollbar-color: var(--color-ak-border-strong) transparent;
|
|
287
|
+
}
|
|
288
|
+
.ak-scrollbar::-webkit-scrollbar {
|
|
289
|
+
width: 6px;
|
|
290
|
+
height: 6px;
|
|
291
|
+
}
|
|
292
|
+
.ak-scrollbar::-webkit-scrollbar-track {
|
|
293
|
+
background: transparent;
|
|
294
|
+
}
|
|
295
|
+
.ak-scrollbar::-webkit-scrollbar-thumb {
|
|
296
|
+
background: var(--color-ak-border-strong);
|
|
297
|
+
border-radius: var(--radius-ak-full);
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
/* Raised card / panel surface */
|
|
301
|
+
.ak-surface-raised {
|
|
302
|
+
background: var(--ak-surface-raised-bg, var(--color-ak-surface-raised));
|
|
303
|
+
border: 1px solid var(--ak-surface-raised-border, var(--color-ak-border));
|
|
304
|
+
box-shadow: var(--ak-surface-raised-shadow, var(--shadow-ak-md));
|
|
305
|
+
}
|
|
306
|
+
/* Glass-like elevated surface */
|
|
307
|
+
.ak-surface-glass {
|
|
308
|
+
background: var(--ak-surface-glass-bg, var(--color-ak-surface-glass));
|
|
309
|
+
border: 1px solid var(--ak-surface-glass-border, var(--color-ak-border-subtle));
|
|
310
|
+
backdrop-filter: blur(var(--ak-surface-glass-blur, 12px));
|
|
311
|
+
}
|
|
312
|
+
/* Optional highlight overlay for premium / elevated surfaces */
|
|
313
|
+
.ak-sheen {
|
|
314
|
+
position: relative;
|
|
315
|
+
}
|
|
316
|
+
.ak-sheen::before {
|
|
317
|
+
content: "";
|
|
318
|
+
position: absolute;
|
|
319
|
+
inset: 0;
|
|
320
|
+
border-radius: inherit;
|
|
321
|
+
background: linear-gradient(
|
|
322
|
+
145deg,
|
|
323
|
+
var(--ak-sheen-highlight, var(--color-ak-highlight-soft)),
|
|
324
|
+
rgba(255, 255, 255, 0) 65%
|
|
325
|
+
);
|
|
326
|
+
opacity: var(--ak-sheen-opacity, 1);
|
|
327
|
+
pointer-events: none;
|
|
328
|
+
}
|
|
329
|
+
.ak-sheen-strong {
|
|
330
|
+
--ak-sheen-highlight: var(--color-ak-highlight-strong);
|
|
331
|
+
}
|
|
332
|
+
/* Standard skeleton block */
|
|
333
|
+
.ak-skeleton {
|
|
334
|
+
position: relative;
|
|
335
|
+
overflow: hidden;
|
|
336
|
+
background: linear-gradient(
|
|
337
|
+
180deg,
|
|
338
|
+
var(--ak-skeleton-base, var(--color-ak-skeleton-base)),
|
|
339
|
+
var(--ak-skeleton-base-end, var(--color-ak-surface-2))
|
|
340
|
+
);
|
|
341
|
+
border-radius: var(--ak-skeleton-radius, var(--radius-ak-md));
|
|
342
|
+
color: transparent !important;
|
|
343
|
+
user-select: none;
|
|
344
|
+
}
|
|
345
|
+
.ak-skeleton::after {
|
|
346
|
+
content: "";
|
|
347
|
+
position: absolute;
|
|
348
|
+
inset: 0;
|
|
349
|
+
transform: translateX(-100%);
|
|
350
|
+
background: linear-gradient(
|
|
351
|
+
90deg,
|
|
352
|
+
rgba(255, 255, 255, 0),
|
|
353
|
+
var(--ak-skeleton-shine, var(--color-ak-skeleton-shine)),
|
|
354
|
+
rgba(255, 255, 255, 0)
|
|
355
|
+
);
|
|
356
|
+
animation: ak-skeleton-shimmer var(--duration-ak-skeleton) ease-in-out infinite;
|
|
357
|
+
}
|
|
358
|
+
.ak-skeleton-pill {
|
|
359
|
+
border-radius: var(--radius-ak-full);
|
|
360
|
+
}
|
|
361
|
+
.ak-skeleton-circle {
|
|
362
|
+
border-radius: var(--radius-ak-full);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
/* Shared card shell scaffold */
|
|
366
|
+
.ak-card-shell {
|
|
367
|
+
position: relative;
|
|
368
|
+
overflow: hidden;
|
|
369
|
+
border: 1px solid var(--ak-card-shell-border, var(--color-ak-border));
|
|
370
|
+
border-radius: var(--ak-card-shell-radius, var(--radius-ak-lg));
|
|
371
|
+
background: var(--ak-card-shell-bg, var(--color-ak-surface-raised));
|
|
372
|
+
box-shadow: var(--ak-card-shell-shadow, var(--shadow-ak-md));
|
|
373
|
+
transition:
|
|
374
|
+
transform var(--duration-ak-base) var(--ease-ak-default),
|
|
375
|
+
box-shadow var(--duration-ak-base) var(--ease-ak-default),
|
|
376
|
+
border-color var(--duration-ak-base) var(--ease-ak-default);
|
|
377
|
+
}
|
|
378
|
+
.ak-card-shell-interactive:hover,
|
|
379
|
+
.ak-card-shell-interactive:focus-within {
|
|
380
|
+
transform: translateY(var(--ak-card-shell-lift, -2px));
|
|
381
|
+
border-color: var(--ak-card-shell-border-hover, var(--color-ak-border-strong));
|
|
382
|
+
box-shadow: var(--ak-card-shell-shadow-hover, var(--shadow-ak-lg));
|
|
383
|
+
}
|
|
384
|
+
.ak-card-shell-inner {
|
|
385
|
+
position: relative;
|
|
386
|
+
z-index: 1;
|
|
387
|
+
display: flex;
|
|
388
|
+
flex-direction: column;
|
|
389
|
+
gap: var(--ak-card-shell-gap, var(--spacing-ak-3));
|
|
390
|
+
}
|
|
391
|
+
.ak-card-shell-header {
|
|
392
|
+
display: grid;
|
|
393
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
394
|
+
align-items: start;
|
|
395
|
+
gap: var(--ak-card-shell-header-gap, var(--spacing-ak-2));
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
/* ══════════════════════════════════════════════════════════
|
|
399
|
+
Layout Primitives
|
|
400
|
+
Breakpoint-free, intrinsic responsive patterns.
|
|
401
|
+
Based on Every Layout (Heydon Pickering & Andy Bell).
|
|
402
|
+
Customize via CSS custom properties on the element.
|
|
403
|
+
══════════════════════════════════════════════════════════ */
|
|
404
|
+
|
|
405
|
+
/* Stack — vertical spacing between children.
|
|
406
|
+
Usage: <div class="ak-stack"> or style="--ak-stack-gap: 2rem"
|
|
407
|
+
Default gap: --spacing-ak-fl-sm (fluid 1rem → 1.5rem) */
|
|
408
|
+
.ak-stack {
|
|
409
|
+
display: flex;
|
|
410
|
+
flex-direction: column;
|
|
411
|
+
gap: var(--ak-stack-gap, var(--spacing-ak-fl-sm));
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
/* Cluster — horizontal wrapping group (tags, nav links, badges).
|
|
415
|
+
Usage: <div class="ak-cluster">
|
|
416
|
+
Default gap: --spacing-ak-fl-xs */
|
|
417
|
+
.ak-cluster {
|
|
418
|
+
display: flex;
|
|
419
|
+
flex-wrap: wrap;
|
|
420
|
+
gap: var(--ak-cluster-gap, var(--spacing-ak-fl-xs));
|
|
421
|
+
align-items: var(--ak-cluster-align, center);
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
/* Center — horizontally centered content with max-width.
|
|
425
|
+
Usage: <div class="ak-center">
|
|
426
|
+
Default max-width: 75rem (1200px), with fluid side padding */
|
|
427
|
+
.ak-center {
|
|
428
|
+
box-sizing: content-box;
|
|
429
|
+
max-inline-size: var(--ak-center-max, 75rem);
|
|
430
|
+
margin-inline: auto;
|
|
431
|
+
padding-inline: var(--ak-center-gutter, var(--spacing-ak-fl-sm));
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
/* Sidebar — two-panel: one fixed-width sidebar + one flexible main.
|
|
435
|
+
Auto-stacks vertically when content would overflow.
|
|
436
|
+
Usage: <div class="ak-sidebar"><aside>Sidebar</aside><main>Content</main></div>
|
|
437
|
+
Default sidebar width: 18rem, switch point: 50% */
|
|
438
|
+
.ak-sidebar {
|
|
439
|
+
display: flex;
|
|
440
|
+
flex-wrap: wrap;
|
|
441
|
+
gap: var(--ak-sidebar-gap, var(--spacing-ak-fl-md));
|
|
442
|
+
}
|
|
443
|
+
.ak-sidebar > :first-child {
|
|
444
|
+
flex-basis: var(--ak-sidebar-width, 18rem);
|
|
445
|
+
flex-grow: 1;
|
|
446
|
+
}
|
|
447
|
+
.ak-sidebar > :last-child {
|
|
448
|
+
flex-basis: 0;
|
|
449
|
+
flex-grow: 999;
|
|
450
|
+
min-inline-size: var(--ak-sidebar-threshold, 50%);
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
/* Switcher — horizontal layout that flips to vertical at a threshold.
|
|
454
|
+
Usage: <div class="ak-switcher">
|
|
455
|
+
Default threshold: 30rem (480px container width) */
|
|
456
|
+
.ak-switcher {
|
|
457
|
+
display: flex;
|
|
458
|
+
flex-wrap: wrap;
|
|
459
|
+
gap: var(--ak-switcher-gap, var(--spacing-ak-fl-sm));
|
|
460
|
+
}
|
|
461
|
+
.ak-switcher > * {
|
|
462
|
+
flex-basis: calc((var(--ak-switcher-threshold, 30rem) - 100%) * 999);
|
|
463
|
+
flex-grow: 1;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
/* Cover — fills viewport height, vertically centers primary content.
|
|
467
|
+
Usage: <div class="ak-cover"><header/><div class="ak-cover-center">Hero</div><footer/></div>
|
|
468
|
+
The .ak-cover-center child gets vertically centered. */
|
|
469
|
+
.ak-cover {
|
|
470
|
+
display: flex;
|
|
471
|
+
flex-direction: column;
|
|
472
|
+
min-block-size: var(--ak-cover-min, 100dvh);
|
|
473
|
+
padding: var(--ak-cover-padding, var(--spacing-ak-fl-md));
|
|
474
|
+
}
|
|
475
|
+
.ak-cover > * { margin-block: auto; }
|
|
476
|
+
.ak-cover > :first-child:not(.ak-cover-center) { margin-block-start: 0; }
|
|
477
|
+
.ak-cover > :last-child:not(.ak-cover-center) { margin-block-end: 0; }
|
|
478
|
+
|
|
479
|
+
/* ══════════════════════════════════════════════════════════
|
|
480
|
+
Auto-Responsive Grid
|
|
481
|
+
The RAM pattern (Repeat, Auto-fit, Minmax).
|
|
482
|
+
Columns reflow automatically — zero breakpoints needed.
|
|
483
|
+
Usage: <div class="ak-grid"> or style="--ak-grid-min: 320px"
|
|
484
|
+
Default min column width: 280px, fluid gap.
|
|
485
|
+
══════════════════════════════════════════════════════════ */
|
|
486
|
+
.ak-grid {
|
|
487
|
+
display: grid;
|
|
488
|
+
gap: var(--ak-grid-gap, var(--spacing-ak-fl-sm));
|
|
489
|
+
grid-template-columns: repeat(
|
|
490
|
+
auto-fill,
|
|
491
|
+
minmax(min(var(--ak-grid-min, 280px), 100%), 1fr)
|
|
492
|
+
);
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
/* ══════════════════════════════════════════════════════════
|
|
496
|
+
Container Query Helper
|
|
497
|
+
Mark any element as a query container, then use
|
|
498
|
+
Tailwind v4's native @sm:, @md:, @lg: prefixes on children.
|
|
499
|
+
Usage: <div class="ak-container"><div class="@md:flex-row">...</div></div>
|
|
500
|
+
══════════════════════════════════════════════════════════ */
|
|
501
|
+
.ak-container {
|
|
502
|
+
container-type: inline-size;
|
|
503
|
+
}
|
|
504
|
+
/* Named container variant for nesting */
|
|
505
|
+
.ak-container-named {
|
|
506
|
+
container-type: inline-size;
|
|
507
|
+
container-name: var(--ak-container-name, content);
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
} /* end @layer components */
|
|
511
|
+
|
|
512
|
+
@keyframes ak-skeleton-shimmer {
|
|
513
|
+
100% { transform: translateX(100%); }
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
/* ══════════════════════════════════════════════════════════
|
|
517
|
+
Dark Mode Override
|
|
518
|
+
Apply: <html data-theme="dark"> or <div data-theme="dark">
|
|
519
|
+
Only overrides color tokens. Spacing, type, radius stay the same.
|
|
520
|
+
══════════════════════════════════════════════════════════ */
|
|
521
|
+
[data-theme="dark"] {
|
|
522
|
+
--color-ak-bg: #0a0a0a;
|
|
523
|
+
--color-ak-surface: #171717;
|
|
524
|
+
--color-ak-surface-2: #262626;
|
|
525
|
+
--color-ak-hover: #1a1a1a;
|
|
526
|
+
--color-ak-active: #262626;
|
|
527
|
+
--color-ak-elevated: #171717;
|
|
528
|
+
--color-ak-surface-raised: #171717;
|
|
529
|
+
--color-ak-surface-raised-soft: rgba(23, 23, 23, 0.78);
|
|
530
|
+
--color-ak-surface-glass: rgba(23, 23, 23, 0.72);
|
|
531
|
+
--color-ak-surface-glass-strong: rgba(23, 23, 23, 0.84);
|
|
532
|
+
--color-ak-highlight-soft: rgba(255, 255, 255, 0.06);
|
|
533
|
+
--color-ak-highlight-strong: rgba(255, 255, 255, 0.1);
|
|
534
|
+
--color-ak-skeleton-base: #262626;
|
|
535
|
+
--color-ak-skeleton-shine: rgba(255, 255, 255, 0.08);
|
|
536
|
+
--color-ak-overlay: rgba(0, 0, 0, 0.7);
|
|
537
|
+
--color-ak-on-primary: #000000;
|
|
538
|
+
--color-ak-primary-subtle: #262626;
|
|
539
|
+
|
|
540
|
+
--color-ak-text: #f5f5f5;
|
|
541
|
+
--color-ak-text-secondary: #a3a3a3;
|
|
542
|
+
--color-ak-text-muted: #737373;
|
|
543
|
+
--color-ak-text-disabled: #525252;
|
|
544
|
+
--color-ak-text-inverse: #0a0a0a;
|
|
545
|
+
--color-ak-text-link: #ffffff;
|
|
546
|
+
--color-ak-text-placeholder: #525252;
|
|
547
|
+
|
|
548
|
+
--color-ak-border: #262626;
|
|
549
|
+
--color-ak-border-subtle: #1a1a1a;
|
|
550
|
+
--color-ak-border-strong: #404040;
|
|
551
|
+
--color-ak-border-focus: #ffffff;
|
|
552
|
+
|
|
553
|
+
--shadow-ak-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
554
|
+
--shadow-ak-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
555
|
+
--shadow-ak-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
556
|
+
--shadow-ak-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
|
|
557
|
+
--shadow-ak-xl: 0 16px 50px rgba(0, 0, 0, 0.6);
|
|
558
|
+
--shadow-ak-2xl: 0 24px 60px rgba(0, 0, 0, 0.7);
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
/* Reduced motion — must be unlayered to override everything */
|
|
562
|
+
@media (prefers-reduced-motion: reduce) {
|
|
563
|
+
*, *::before, *::after {
|
|
564
|
+
animation-duration: 0.01ms !important;
|
|
565
|
+
transition-duration: 0.01ms !important;
|
|
566
|
+
}
|
|
567
|
+
}
|
package/lib/utils.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "astralkit",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Design tokens and component primitives for accessible UI — Tailwind CSS v4",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"exports": {
|
|
7
|
+
"./theme": "./astralkit-theme.css",
|
|
8
|
+
"./utilities": "./astralkit-utilities.css",
|
|
9
|
+
"./utils": "./lib/utils.js",
|
|
10
|
+
"./ai-rules": "./ai-rules.md"
|
|
11
|
+
},
|
|
12
|
+
"files": [
|
|
13
|
+
"astralkit-theme.css",
|
|
14
|
+
"astralkit-utilities.css",
|
|
15
|
+
"ai-rules.md",
|
|
16
|
+
"lib/",
|
|
17
|
+
"LICENSE",
|
|
18
|
+
"README.md"
|
|
19
|
+
],
|
|
20
|
+
"dependencies": {
|
|
21
|
+
"clsx": "^2.1.0",
|
|
22
|
+
"tailwind-merge": "^2.2.0"
|
|
23
|
+
},
|
|
24
|
+
"keywords": ["astralkit", "design-tokens", "tailwind", "css", "ui"],
|
|
25
|
+
"homepage": "https://astralkit.com",
|
|
26
|
+
"repository": {
|
|
27
|
+
"type": "git",
|
|
28
|
+
"url": "https://github.com/astral-kit/astralkit"
|
|
29
|
+
},
|
|
30
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
31
|
+
"author": "Blue Beacon Creative LLC",
|
|
32
|
+
"publishConfig": {
|
|
33
|
+
"access": "public"
|
|
34
|
+
}
|
|
35
|
+
}
|