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,376 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
/* ══════════════════════════════════════════════════════════
|
|
3
|
+
AstralKit Design Tokens
|
|
4
|
+
Default: Black & white neutral theme.
|
|
5
|
+
Override any variable in your project's @theme to brand it.
|
|
6
|
+
══════════════════════════════════════════════════════════ */
|
|
7
|
+
|
|
8
|
+
/* ── Neutral scale (full 11-shade ramp) ── */
|
|
9
|
+
--color-ak-neutral-0: #ffffff;
|
|
10
|
+
--color-ak-neutral-50: #fafafa;
|
|
11
|
+
--color-ak-neutral-100: #f5f5f5;
|
|
12
|
+
--color-ak-neutral-200: #e5e5e5;
|
|
13
|
+
--color-ak-neutral-300: #d4d4d4;
|
|
14
|
+
--color-ak-neutral-400: #a3a3a3;
|
|
15
|
+
--color-ak-neutral-500: #737373;
|
|
16
|
+
--color-ak-neutral-600: #525252;
|
|
17
|
+
--color-ak-neutral-700: #404040;
|
|
18
|
+
--color-ak-neutral-800: #262626;
|
|
19
|
+
--color-ak-neutral-900: #171717;
|
|
20
|
+
--color-ak-neutral-950: #0a0a0a;
|
|
21
|
+
|
|
22
|
+
/* ── Primary scale (full 11-shade ramp) ── */
|
|
23
|
+
--color-ak-primary-50: #f5f5f5;
|
|
24
|
+
--color-ak-primary-100: #e5e5e5;
|
|
25
|
+
--color-ak-primary-200: #cccccc;
|
|
26
|
+
--color-ak-primary-300: #a3a3a3;
|
|
27
|
+
--color-ak-primary-400: #737373;
|
|
28
|
+
--color-ak-primary-500: #525252;
|
|
29
|
+
--color-ak-primary-600: #404040;
|
|
30
|
+
--color-ak-primary-700: #333333;
|
|
31
|
+
--color-ak-primary-800: #1a1a1a;
|
|
32
|
+
--color-ak-primary-900: #000000;
|
|
33
|
+
--color-ak-primary-950: #000000;
|
|
34
|
+
|
|
35
|
+
/* ── Primary action colors ── */
|
|
36
|
+
--color-ak-primary: #000000;
|
|
37
|
+
--color-ak-primary-hover: #1a1a1a;
|
|
38
|
+
--color-ak-primary-active: #333333;
|
|
39
|
+
|
|
40
|
+
/* ── Semantic color aliases ── */
|
|
41
|
+
--color-ak-bg: #ffffff;
|
|
42
|
+
--color-ak-surface: #fafafa;
|
|
43
|
+
--color-ak-surface-2: #f5f5f5;
|
|
44
|
+
--color-ak-hover: #f7f7f7;
|
|
45
|
+
--color-ak-active: #f0f0f0;
|
|
46
|
+
--color-ak-elevated: #ffffff;
|
|
47
|
+
--color-ak-surface-raised: #ffffff;
|
|
48
|
+
--color-ak-surface-raised-soft: rgba(255, 255, 255, 0.78);
|
|
49
|
+
--color-ak-surface-glass: rgba(255, 255, 255, 0.72);
|
|
50
|
+
--color-ak-surface-glass-strong: rgba(255, 255, 255, 0.84);
|
|
51
|
+
--color-ak-highlight-soft: rgba(255, 255, 255, 0.45);
|
|
52
|
+
--color-ak-highlight-strong: rgba(255, 255, 255, 0.72);
|
|
53
|
+
--color-ak-skeleton-base: #ededed;
|
|
54
|
+
--color-ak-skeleton-shine: rgba(255, 255, 255, 0.72);
|
|
55
|
+
--color-ak-overlay: rgba(0, 0, 0, 0.5);
|
|
56
|
+
--color-ak-on-primary: #ffffff;
|
|
57
|
+
--color-ak-primary-subtle: #f5f5f5;
|
|
58
|
+
|
|
59
|
+
/* ── Semantic text ── */
|
|
60
|
+
--color-ak-text: #171717;
|
|
61
|
+
--color-ak-text-secondary: #525252;
|
|
62
|
+
--color-ak-text-muted: #a3a3a3;
|
|
63
|
+
--color-ak-text-disabled: #d4d4d4;
|
|
64
|
+
--color-ak-text-inverse: #ffffff;
|
|
65
|
+
--color-ak-text-link: #000000;
|
|
66
|
+
--color-ak-text-placeholder:#a3a3a3;
|
|
67
|
+
|
|
68
|
+
/* ── Semantic border ── */
|
|
69
|
+
--color-ak-border: #e5e5e5;
|
|
70
|
+
--color-ak-border-subtle: #f5f5f5;
|
|
71
|
+
--color-ak-border-strong: #d4d4d4;
|
|
72
|
+
--color-ak-border-focus: #000000;
|
|
73
|
+
|
|
74
|
+
/* ── Status colors ── */
|
|
75
|
+
--color-ak-success: #16a34a;
|
|
76
|
+
--color-ak-success-subtle: #f0fdf4;
|
|
77
|
+
--color-ak-success-text: #15803d;
|
|
78
|
+
--color-ak-warning: #d97706;
|
|
79
|
+
--color-ak-warning-subtle: #fffbeb;
|
|
80
|
+
--color-ak-warning-text: #b45309;
|
|
81
|
+
--color-ak-danger: #dc2626;
|
|
82
|
+
--color-ak-danger-subtle: #fef2f2;
|
|
83
|
+
--color-ak-danger-text: #b91c1c;
|
|
84
|
+
--color-ak-info: #2563eb;
|
|
85
|
+
--color-ak-info-subtle: #eff6ff;
|
|
86
|
+
--color-ak-info-text: #1d4ed8;
|
|
87
|
+
|
|
88
|
+
/* ── Font families ── */
|
|
89
|
+
--font-ak-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
|
|
90
|
+
--font-ak-serif: 'DM Serif Display', Georgia, serif;
|
|
91
|
+
--font-ak-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
|
|
92
|
+
|
|
93
|
+
/* ── Type scale (static) ── */
|
|
94
|
+
--text-ak-2xs: 0.6875rem;
|
|
95
|
+
--text-ak-xs: 0.75rem;
|
|
96
|
+
--text-ak-sm: 0.875rem;
|
|
97
|
+
--text-ak-base: 1rem;
|
|
98
|
+
--text-ak-lg: 1.125rem;
|
|
99
|
+
--text-ak-xl: 1.25rem;
|
|
100
|
+
--text-ak-2xl: 1.5rem;
|
|
101
|
+
--text-ak-3xl: 1.875rem;
|
|
102
|
+
--text-ak-4xl: 2.25rem;
|
|
103
|
+
--text-ak-5xl: 3rem;
|
|
104
|
+
--text-ak-6xl: 3.75rem;
|
|
105
|
+
--text-ak-7xl: 4.5rem;
|
|
106
|
+
--text-ak-8xl: 6rem;
|
|
107
|
+
--text-ak-9xl: 7rem;
|
|
108
|
+
|
|
109
|
+
/* ── Fluid type scale (viewport: 320px → 1400px) ──
|
|
110
|
+
One class, zero breakpoints. Use text-ak-fl-* instead of text-ak-*.
|
|
111
|
+
MAX of each step = the matching static token (e.g. fl-lg max = text-ak-lg).
|
|
112
|
+
MIN = one static step down, giving subtle mobile shrink.
|
|
113
|
+
WCAG SC 1.4.4 compliant: max ≤ 2.5× min on all steps. ── */
|
|
114
|
+
--text-ak-fl-xs: clamp(0.6875rem, 0.67rem + 0.06vw, 0.75rem);
|
|
115
|
+
--text-ak-fl-sm: clamp(0.75rem, 0.71rem + 0.12vw, 0.875rem);
|
|
116
|
+
--text-ak-fl-base: clamp(0.875rem, 0.84rem + 0.12vw, 1rem);
|
|
117
|
+
--text-ak-fl-lg: clamp(1rem, 0.96rem + 0.12vw, 1.125rem);
|
|
118
|
+
--text-ak-fl-xl: clamp(1.125rem, 1.09rem + 0.12vw, 1.25rem);
|
|
119
|
+
--text-ak-fl-2xl: clamp(1.25rem, 1.18rem + 0.23vw, 1.5rem);
|
|
120
|
+
--text-ak-fl-3xl: clamp(1.5rem, 1.39rem + 0.35vw, 1.875rem);
|
|
121
|
+
--text-ak-fl-4xl: clamp(1.875rem, 1.76rem + 0.35vw, 2.25rem);
|
|
122
|
+
--text-ak-fl-5xl: clamp(2.25rem, 2.03rem + 0.69vw, 3rem);
|
|
123
|
+
--text-ak-fl-6xl: clamp(3rem, 2.78rem + 0.69vw, 3.75rem);
|
|
124
|
+
--text-ak-fl-7xl: clamp(3.5rem, 3.2rem + 0.93vw, 4.5rem);
|
|
125
|
+
--text-ak-fl-8xl: clamp(4.5rem, 4.06rem + 1.39vw, 6rem);
|
|
126
|
+
--text-ak-fl-9xl: clamp(5.25rem, 4.73rem + 1.62vw, 7rem);
|
|
127
|
+
|
|
128
|
+
/* ── Display type scale (viewport: 320px → 1400px) ──
|
|
129
|
+
Dramatic fluid scaling for hero headings and marketing display text.
|
|
130
|
+
Each step grows ~1.5–2 static steps across the viewport range.
|
|
131
|
+
Use text-ak-display-* for hero h1, section display headings, etc. ── */
|
|
132
|
+
--text-ak-display-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);
|
|
133
|
+
--text-ak-display-sm: clamp(0.875rem, 0.83rem + 0.19vw, 1rem);
|
|
134
|
+
--text-ak-display-base: clamp(1rem, 0.94rem + 0.28vw, 1.1875rem);
|
|
135
|
+
--text-ak-display-lg: clamp(1.125rem, 1.01rem + 0.52vw, 1.5rem);
|
|
136
|
+
--text-ak-display-xl: clamp(1.25rem, 1.07rem + 0.83vw, 1.875rem);
|
|
137
|
+
--text-ak-display-2xl: clamp(1.5rem, 1.2rem + 1.11vw, 2.25rem);
|
|
138
|
+
--text-ak-display-3xl: clamp(1.875rem, 1.42rem + 1.67vw, 3rem);
|
|
139
|
+
--text-ak-display-4xl: clamp(2.25rem, 1.58rem + 2.5vw, 3.75rem);
|
|
140
|
+
--text-ak-display-5xl: clamp(3rem, 2.07rem + 3.47vw, 5.25rem);
|
|
141
|
+
--text-ak-display-6xl: clamp(3.75rem, 2.5rem + 4.63vw, 7rem);
|
|
142
|
+
--text-ak-display-7xl: clamp(4.5rem, 3.06rem + 5.56vw, 8rem);
|
|
143
|
+
--text-ak-display-8xl: clamp(5rem, 3.06rem + 6.94vw, 9rem);
|
|
144
|
+
--text-ak-display-9xl: clamp(5.5rem, 3.06rem + 7.64vw, 10rem);
|
|
145
|
+
|
|
146
|
+
/* ── Line Height ── */
|
|
147
|
+
--leading-ak-display: 0.85;
|
|
148
|
+
--leading-ak-tighter: 1.1;
|
|
149
|
+
--leading-ak-none: 1;
|
|
150
|
+
--leading-ak-tight: 1.25;
|
|
151
|
+
--leading-ak-snug: 1.375;
|
|
152
|
+
--leading-ak-normal: 1.5;
|
|
153
|
+
--leading-ak-relaxed: 1.625;
|
|
154
|
+
--leading-ak-loose: 2;
|
|
155
|
+
|
|
156
|
+
/* ── Letter Spacing ── */
|
|
157
|
+
--tracking-ak-tighter: -0.05em;
|
|
158
|
+
--tracking-ak-tight: -0.025em;
|
|
159
|
+
--tracking-ak-normal: 0em;
|
|
160
|
+
--tracking-ak-wide: 0.025em;
|
|
161
|
+
--tracking-ak-wider: 0.05em;
|
|
162
|
+
--tracking-ak-widest: 0.1em;
|
|
163
|
+
|
|
164
|
+
/* ── Spacing ── */
|
|
165
|
+
--spacing-ak-0: 0rem;
|
|
166
|
+
--spacing-ak-px: 0.0625rem;
|
|
167
|
+
--spacing-ak-0_5: 0.25rem;
|
|
168
|
+
--spacing-ak-1: 0.5rem;
|
|
169
|
+
--spacing-ak-1_5: 0.75rem;
|
|
170
|
+
--spacing-ak-2: 1rem;
|
|
171
|
+
--spacing-ak-2_5: 1.25rem;
|
|
172
|
+
--spacing-ak-3: 1.5rem;
|
|
173
|
+
--spacing-ak-3_5: 1.75rem;
|
|
174
|
+
--spacing-ak-4: 2rem;
|
|
175
|
+
--spacing-ak-4_5: 2.25rem;
|
|
176
|
+
--spacing-ak-5: 2.5rem;
|
|
177
|
+
--spacing-ak-5_5: 2.75rem;
|
|
178
|
+
--spacing-ak-6: 3rem;
|
|
179
|
+
--spacing-ak-7: 3.5rem;
|
|
180
|
+
--spacing-ak-8: 4rem;
|
|
181
|
+
--spacing-ak-10: 5rem;
|
|
182
|
+
--spacing-ak-12: 6rem;
|
|
183
|
+
--spacing-ak-16: 8rem;
|
|
184
|
+
--spacing-ak-20: 10rem;
|
|
185
|
+
--spacing-ak-24: 12rem;
|
|
186
|
+
--spacing-ak-mobile-bar: 4.5rem;
|
|
187
|
+
--size-ak-sheet-handle-width: 2.25rem;
|
|
188
|
+
--size-ak-sheet-handle-height: 0.25rem;
|
|
189
|
+
--color-ak-sheet-handle: #d4d4d4;
|
|
190
|
+
|
|
191
|
+
/* ── Layout sizes ──
|
|
192
|
+
Uses Tailwind v4 native namespaces so they generate real utilities:
|
|
193
|
+
--container-* → max-w-*
|
|
194
|
+
--height-* → h-*
|
|
195
|
+
--width-* → w-* */
|
|
196
|
+
--container-ak-page: 80rem;
|
|
197
|
+
--height-ak-nav: 4.5rem;
|
|
198
|
+
--height-ak-touch: 2.5rem;
|
|
199
|
+
--width-ak-touch: 2.5rem;
|
|
200
|
+
|
|
201
|
+
/* ── Control heights (buttons, inputs, selects) ──
|
|
202
|
+
48px (md) is the standard minimum for all interactive controls.
|
|
203
|
+
Use h-ak-control-md, min-h-ak-control-md, etc. ── */
|
|
204
|
+
--height-ak-control-sm: 2rem; /* 32px — compact desktop-only */
|
|
205
|
+
--height-ak-control-md: 2.5rem; /* 40px — STANDARD */
|
|
206
|
+
--height-ak-control-lg: 3rem; /* 48px — prominent CTAs */
|
|
207
|
+
--height-ak-control-xl: 3.5rem; /* 56px — hero CTAs */
|
|
208
|
+
|
|
209
|
+
/* ── Fluid spacing (viewport: 320px → 1400px) ──
|
|
210
|
+
Scales smoothly. Use p-ak-fl-*, gap-ak-fl-*, m-ak-fl-*, etc.
|
|
211
|
+
Named sizes (xs → 3xl) for intuitive selection. ── */
|
|
212
|
+
--spacing-ak-fl-3xs: clamp(0.25rem, 0.21rem + 0.14vw, 0.375rem);
|
|
213
|
+
--spacing-ak-fl-2xs: clamp(0.5rem, 0.43rem + 0.28vw, 0.75rem);
|
|
214
|
+
--spacing-ak-fl-xs: clamp(0.75rem, 0.65rem + 0.42vw, 1rem);
|
|
215
|
+
--spacing-ak-fl-sm: clamp(1rem, 0.86rem + 0.56vw, 1.5rem);
|
|
216
|
+
--spacing-ak-fl-md: clamp(1.5rem, 1.29rem + 0.83vw, 2rem);
|
|
217
|
+
--spacing-ak-fl-lg: clamp(2rem, 1.72rem + 1.11vw, 3rem);
|
|
218
|
+
--spacing-ak-fl-xl: clamp(3rem, 2.5rem + 1.85vw, 4.5rem);
|
|
219
|
+
--spacing-ak-fl-2xl: clamp(4rem, 3.22rem + 2.78vw, 6rem);
|
|
220
|
+
--spacing-ak-fl-3xl: clamp(6rem, 4.86rem + 4.17vw, 9rem);
|
|
221
|
+
|
|
222
|
+
/* ── Fluid space pairs (dramatic scaling for sections) ──
|
|
223
|
+
"xs-lg" = starts at xs on mobile, reaches lg on desktop.
|
|
224
|
+
Perfect for section padding, hero spacing, large gaps. ── */
|
|
225
|
+
--spacing-ak-fl-xs-md: clamp(0.75rem, 0.43rem + 1.39vw, 2rem);
|
|
226
|
+
--spacing-ak-fl-xs-lg: clamp(0.75rem, 0.14rem + 2.78vw, 3rem);
|
|
227
|
+
--spacing-ak-fl-sm-lg: clamp(1rem, 0.43rem + 2.78vw, 3rem);
|
|
228
|
+
--spacing-ak-fl-sm-xl: clamp(1rem, 0rem + 4.17vw, 4.5rem);
|
|
229
|
+
--spacing-ak-fl-md-xl: clamp(1.5rem, 0.57rem + 3.47vw, 4.5rem);
|
|
230
|
+
--spacing-ak-fl-md-2xl: clamp(1.5rem, 0rem + 5.56vw, 6rem);
|
|
231
|
+
--spacing-ak-fl-lg-2xl: clamp(2rem, 0.57rem + 5.56vw, 6rem);
|
|
232
|
+
--spacing-ak-fl-xl-3xl: clamp(3rem, 0.57rem + 8.33vw, 9rem);
|
|
233
|
+
|
|
234
|
+
/* ── Border Radius ── */
|
|
235
|
+
--radius-ak-none: 0;
|
|
236
|
+
--radius-ak-sm: 0.25rem;
|
|
237
|
+
--radius-ak-md: 0.5rem;
|
|
238
|
+
--radius-ak-lg: 0.75rem;
|
|
239
|
+
--radius-ak-xl: 1rem;
|
|
240
|
+
--radius-ak-2xl: 1.5rem;
|
|
241
|
+
--radius-ak-3xl: 2rem;
|
|
242
|
+
--radius-ak-full: 9999px;
|
|
243
|
+
|
|
244
|
+
/* ── Shadows ── */
|
|
245
|
+
--shadow-ak-xs: 0 1px 2px rgba(0,0,0,0.04);
|
|
246
|
+
--shadow-ak-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
|
|
247
|
+
--shadow-ak-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
|
|
248
|
+
--shadow-ak-lg: 0 8px 30px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
|
|
249
|
+
--shadow-ak-xl: 0 16px 50px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);
|
|
250
|
+
--shadow-ak-2xl: 0 24px 60px rgba(0,0,0,0.14);
|
|
251
|
+
|
|
252
|
+
/* ── Component sizes ──
|
|
253
|
+
--size-* namespace → size-* utility (sets both width AND height).
|
|
254
|
+
Use: size-ak-icon-lg, size-ak-avatar-md, etc. ── */
|
|
255
|
+
|
|
256
|
+
/* Icons (for SVG w/h — also used by .ak-icon-* for font-size) */
|
|
257
|
+
--size-ak-icon-xs: 0.75rem;
|
|
258
|
+
--size-ak-icon-sm: 1rem;
|
|
259
|
+
--size-ak-icon-md: 1.25rem;
|
|
260
|
+
--size-ak-icon-lg: 1.5rem;
|
|
261
|
+
--size-ak-icon-xl: 1.75rem;
|
|
262
|
+
--size-ak-icon-2xl: 2rem;
|
|
263
|
+
--size-ak-icon-3xl: 3rem;
|
|
264
|
+
|
|
265
|
+
/* Avatars */
|
|
266
|
+
--size-ak-avatar-sm: 2rem;
|
|
267
|
+
--size-ak-avatar-md: 2.5rem;
|
|
268
|
+
--size-ak-avatar-lg: 3rem;
|
|
269
|
+
--size-ak-avatar-xl: 4rem;
|
|
270
|
+
--size-ak-avatar-2xl: 6rem;
|
|
271
|
+
--size-ak-avatar-3xl: 8rem;
|
|
272
|
+
|
|
273
|
+
/* Avatar initials font size */
|
|
274
|
+
--text-ak-avatar-sm: 0.6875rem;
|
|
275
|
+
--text-ak-avatar-md: 0.8125rem;
|
|
276
|
+
--text-ak-avatar-lg: 1rem;
|
|
277
|
+
--text-ak-avatar-xl: 1.25rem;
|
|
278
|
+
--text-ak-avatar-2xl: 1.75rem;
|
|
279
|
+
--text-ak-avatar-3xl: 2.25rem;
|
|
280
|
+
|
|
281
|
+
/* Status dots */
|
|
282
|
+
--size-ak-status-md: 12px;
|
|
283
|
+
--size-ak-status-lg: 14px;
|
|
284
|
+
--size-ak-status-xl: 16px;
|
|
285
|
+
--size-ak-status-2xl: 20px;
|
|
286
|
+
--size-ak-status-3xl: 24px;
|
|
287
|
+
|
|
288
|
+
/* Badges (count/notification) */
|
|
289
|
+
--size-ak-badge-md: 18px;
|
|
290
|
+
--size-ak-badge-lg: 20px;
|
|
291
|
+
--size-ak-badge-xl: 22px;
|
|
292
|
+
--size-ak-badge-2xl: 24px;
|
|
293
|
+
--size-ak-badge-3xl: 28px;
|
|
294
|
+
|
|
295
|
+
/* Badge border widths */
|
|
296
|
+
--size-ak-badge-border-md: 2px;
|
|
297
|
+
--size-ak-badge-border-lg: 2px;
|
|
298
|
+
--size-ak-badge-border-xl: 2.5px;
|
|
299
|
+
--size-ak-badge-border-2xl: 3px;
|
|
300
|
+
--size-ak-badge-border-3xl: 3px;
|
|
301
|
+
|
|
302
|
+
/* Icon badges (larger badge with icon inside) */
|
|
303
|
+
--size-ak-icon-badge-md: 22px;
|
|
304
|
+
--size-ak-icon-badge-lg: 24px;
|
|
305
|
+
--size-ak-icon-badge-xl: 28px;
|
|
306
|
+
--size-ak-icon-badge-2xl: 34px;
|
|
307
|
+
--size-ak-icon-badge-3xl: 40px;
|
|
308
|
+
|
|
309
|
+
/* Badge text sizes */
|
|
310
|
+
--text-ak-badge-md: 0.625rem;
|
|
311
|
+
--text-ak-badge-lg: 0.6875rem;
|
|
312
|
+
--text-ak-badge-xl: 0.75rem;
|
|
313
|
+
--text-ak-badge-2xl: 0.8125rem;
|
|
314
|
+
--text-ak-badge-3xl: 0.875rem;
|
|
315
|
+
|
|
316
|
+
/* ── Avatar positioning offsets ──
|
|
317
|
+
Used for absolute-positioned status dots, badges, and icon badges.
|
|
318
|
+
Negative values pull elements inward; positive push outward. ── */
|
|
319
|
+
|
|
320
|
+
/* Status dot offsets (bottom-right corner) */
|
|
321
|
+
--offset-ak-status-md: 1px;
|
|
322
|
+
--offset-ak-status-lg: 1px;
|
|
323
|
+
--offset-ak-status-xl: 2px;
|
|
324
|
+
--offset-ak-status-2xl: 5px;
|
|
325
|
+
--offset-ak-status-3xl: 8px;
|
|
326
|
+
|
|
327
|
+
/* Status ring offsets (with ring decoration) */
|
|
328
|
+
--offset-ak-status-ring-md: -2px;
|
|
329
|
+
--offset-ak-status-ring-lg: -2px;
|
|
330
|
+
--offset-ak-status-ring-xl: 0px;
|
|
331
|
+
--offset-ak-status-ring-2xl: 2px;
|
|
332
|
+
--offset-ak-status-ring-3xl: 4px;
|
|
333
|
+
|
|
334
|
+
/* Badge offsets (top-right corner) */
|
|
335
|
+
--offset-ak-badge-md: -3px;
|
|
336
|
+
--offset-ak-badge-lg: -3px;
|
|
337
|
+
--offset-ak-badge-xl: -2px;
|
|
338
|
+
--offset-ak-badge-2xl: 2px;
|
|
339
|
+
--offset-ak-badge-3xl: 5px;
|
|
340
|
+
|
|
341
|
+
/* Icon badge offsets (bottom-right corner) */
|
|
342
|
+
--offset-ak-icon-badge-md: -5px;
|
|
343
|
+
--offset-ak-icon-badge-lg: -5px;
|
|
344
|
+
--offset-ak-icon-badge-xl: -5px;
|
|
345
|
+
--offset-ak-icon-badge-2xl: -3px;
|
|
346
|
+
--offset-ak-icon-badge-3xl: -1px;
|
|
347
|
+
|
|
348
|
+
/* ── Content max-widths ──
|
|
349
|
+
--container-* namespace → max-w-* utility. ── */
|
|
350
|
+
--container-ak-xs: 20rem;
|
|
351
|
+
--container-ak-sm: 24rem;
|
|
352
|
+
--container-ak-md: 28rem;
|
|
353
|
+
--container-ak-lg: 32rem;
|
|
354
|
+
--container-ak-xl: 36rem;
|
|
355
|
+
--container-ak-2xl: 42rem;
|
|
356
|
+
--container-ak-3xl: 48rem;
|
|
357
|
+
--container-ak-4xl: 56rem;
|
|
358
|
+
--container-ak-prose: 65ch;
|
|
359
|
+
|
|
360
|
+
/* ── Animation ── */
|
|
361
|
+
--duration-ak-fast: 110ms;
|
|
362
|
+
--duration-ak-base: 150ms;
|
|
363
|
+
--duration-ak-slow: 240ms;
|
|
364
|
+
--duration-ak-skeleton: 1800ms;
|
|
365
|
+
--ease-ak-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
366
|
+
--ease-ak-in: cubic-bezier(0.4, 0, 1, 1);
|
|
367
|
+
--ease-ak-out: cubic-bezier(0, 0, 0.2, 1);
|
|
368
|
+
--ease-ak-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
369
|
+
--ease-ak-bounce: cubic-bezier(0.25, 1, 0.5, 1);
|
|
370
|
+
|
|
371
|
+
/* ── Z-index ── */
|
|
372
|
+
--z-ak-sticky: 100;
|
|
373
|
+
--z-ak-dropdown: 200;
|
|
374
|
+
--z-ak-overlay: 300;
|
|
375
|
+
--z-ak-modal: 400;
|
|
376
|
+
}
|