astralkit 0.8.0 → 0.9.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/astralkit-theme-v4.css +60 -44
- package/astralkit-theme.css +52 -44
- package/astralkit-utilities.css +5 -3
- package/lib/presets/dials.js +365 -330
- package/lib/presets/index.js +1 -1
- package/lib/presets/materials.js +8 -226
- package/lib/presets/theme-palettes.d.ts +2 -0
- package/lib/presets/theme-palettes.js +143 -65
- package/package.json +65 -65
- package/palettes.css +1110 -788
- package/primitives/typography.css +21 -0
- package/tailwind.cjs +55 -26
|
@@ -165,6 +165,27 @@
|
|
|
165
165
|
text-transform: uppercase;
|
|
166
166
|
color: var(--color-ak-text-secondary);
|
|
167
167
|
}
|
|
168
|
+
|
|
169
|
+
/* Marketing eyebrow — the wide-tracked section/kicker label. Unlike ak-overline
|
|
170
|
+
it inherits weight and color, so it sits on dark panels, brand fills and
|
|
171
|
+
muted captions alike; callers add font-semibold / a text color as needed. */
|
|
172
|
+
.ak-eyebrow {
|
|
173
|
+
font-size: var(--text-ak-xs);
|
|
174
|
+
letter-spacing: var(--tracking-ak-widest, 0.1em);
|
|
175
|
+
text-transform: uppercase;
|
|
176
|
+
/* weight, color and family inherit — eyebrows sit on dark panels, brand
|
|
177
|
+
fills and muted captions alike; callers add font-semibold etc. */
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* Marketing display headline — the heading-font/extrabold/condensed/tight
|
|
181
|
+
bundle every landing hero and section title re-assembles by hand.
|
|
182
|
+
Size stays a utility (text-ak-display-*): one knob, not nine classes. */
|
|
183
|
+
.ak-display-title {
|
|
184
|
+
font-family: var(--font-ak-heading, var(--font-ak-sans, Inter)), system-ui, sans-serif;
|
|
185
|
+
font-weight: 800;
|
|
186
|
+
line-height: var(--leading-ak-condensed, 0.95);
|
|
187
|
+
letter-spacing: var(--tracking-ak-tight, -0.025em);
|
|
188
|
+
}
|
|
168
189
|
.ak-form-label {
|
|
169
190
|
font-size: var(--text-ak-base);
|
|
170
191
|
font-weight: 600;
|
package/tailwind.cjs
CHANGED
|
@@ -74,6 +74,27 @@ module.exports = plugin(
|
|
|
74
74
|
// Config — extends Tailwind's theme with ak-* utilities
|
|
75
75
|
{
|
|
76
76
|
theme: {
|
|
77
|
+
/* ── Breakpoints ──
|
|
78
|
+
Core Tailwind names/values untouched (agents' priors just work), plus
|
|
79
|
+
ak- prefixed customs: ak-xs (480) and hyphenated half-steps ak-md-5
|
|
80
|
+
(896) / ak-lg-5 (1152) at the md/lg and lg/xl midpoints.
|
|
81
|
+
Naming law: custom screens = ak- + hyphen — unprefixed screens squat
|
|
82
|
+
on global variant space (customer configs, other plugins), and the
|
|
83
|
+
_5 underscore form stays reserved for type/spacing fraction tokens.
|
|
84
|
+
Declared as a FULL ordered object (not extend) so ak-xs sorts before
|
|
85
|
+
sm — appended screens would break min-width cascade order. Apps that
|
|
86
|
+
define their own `screens` win over this (plugin config is lower
|
|
87
|
+
precedence). Rule: use these names; never write min-[NNNpx]. */
|
|
88
|
+
screens: {
|
|
89
|
+
'ak-xs': '480px',
|
|
90
|
+
'sm': '640px',
|
|
91
|
+
'md': '768px',
|
|
92
|
+
'ak-md-5': '896px',
|
|
93
|
+
'lg': '1024px',
|
|
94
|
+
'ak-lg-5': '1152px',
|
|
95
|
+
'xl': '1280px',
|
|
96
|
+
'2xl': '1536px',
|
|
97
|
+
},
|
|
77
98
|
extend: {
|
|
78
99
|
/* ── Colors ──
|
|
79
100
|
Every ak-* color token becomes a Tailwind color utility:
|
|
@@ -295,33 +316,34 @@ module.exports = plugin(
|
|
|
295
316
|
'ak-9xl': 'var(--text-ak-9xl)',
|
|
296
317
|
'ak-10xl': 'var(--text-ak-10xl)',
|
|
297
318
|
// Fluid scale
|
|
298
|
-
'ak-fl-xs': '
|
|
299
|
-
'ak-fl-sm': '
|
|
300
|
-
'ak-fl-base': '
|
|
301
|
-
'ak-fl-lg': '
|
|
302
|
-
'ak-fl-xl': '
|
|
303
|
-
'ak-fl-2xl': '
|
|
304
|
-
'ak-fl-3xl': '
|
|
305
|
-
'ak-fl-4xl': '
|
|
306
|
-
'ak-fl-5xl': '
|
|
307
|
-
'ak-fl-6xl': '
|
|
308
|
-
'ak-fl-7xl': '
|
|
309
|
-
'ak-fl-8xl': '
|
|
310
|
-
'ak-fl-9xl': '
|
|
319
|
+
'ak-fl-xs': 'var(--text-ak-fl-xs)',
|
|
320
|
+
'ak-fl-sm': 'var(--text-ak-fl-sm)',
|
|
321
|
+
'ak-fl-base': 'var(--text-ak-fl-base)',
|
|
322
|
+
'ak-fl-lg': 'var(--text-ak-fl-lg)',
|
|
323
|
+
'ak-fl-xl': 'var(--text-ak-fl-xl)',
|
|
324
|
+
'ak-fl-2xl': 'var(--text-ak-fl-2xl)',
|
|
325
|
+
'ak-fl-3xl': 'var(--text-ak-fl-3xl)',
|
|
326
|
+
'ak-fl-4xl': 'var(--text-ak-fl-4xl)',
|
|
327
|
+
'ak-fl-5xl': 'var(--text-ak-fl-5xl)',
|
|
328
|
+
'ak-fl-6xl': 'var(--text-ak-fl-6xl)',
|
|
329
|
+
'ak-fl-7xl': 'var(--text-ak-fl-7xl)',
|
|
330
|
+
'ak-fl-8xl': 'var(--text-ak-fl-8xl)',
|
|
331
|
+
'ak-fl-9xl': 'var(--text-ak-fl-9xl)',
|
|
311
332
|
// Display scale
|
|
312
|
-
'ak-display-xs': '
|
|
313
|
-
'ak-display-sm': '
|
|
314
|
-
'ak-display-base': '
|
|
315
|
-
'ak-display-lg': '
|
|
316
|
-
'ak-display-xl': '
|
|
317
|
-
'ak-display-2xl': '
|
|
318
|
-
'ak-display-3xl': '
|
|
319
|
-
'ak-display-4xl': '
|
|
320
|
-
'ak-display-5xl': '
|
|
321
|
-
'ak-display-
|
|
322
|
-
'ak-display-
|
|
323
|
-
'ak-display-
|
|
324
|
-
'ak-display-
|
|
333
|
+
'ak-display-xs': 'var(--text-ak-display-xs)',
|
|
334
|
+
'ak-display-sm': 'var(--text-ak-display-sm)',
|
|
335
|
+
'ak-display-base': 'var(--text-ak-display-base)',
|
|
336
|
+
'ak-display-lg': 'var(--text-ak-display-lg)',
|
|
337
|
+
'ak-display-xl': 'var(--text-ak-display-xl)',
|
|
338
|
+
'ak-display-2xl': 'var(--text-ak-display-2xl)',
|
|
339
|
+
'ak-display-3xl': 'var(--text-ak-display-3xl)',
|
|
340
|
+
'ak-display-4xl': 'var(--text-ak-display-4xl)',
|
|
341
|
+
'ak-display-5xl': 'var(--text-ak-display-5xl)',
|
|
342
|
+
'ak-display-5xl_5': 'var(--text-ak-display-5xl_5)',
|
|
343
|
+
'ak-display-6xl': 'var(--text-ak-display-6xl)',
|
|
344
|
+
'ak-display-7xl': 'var(--text-ak-display-7xl)',
|
|
345
|
+
'ak-display-8xl': 'var(--text-ak-display-8xl)',
|
|
346
|
+
'ak-display-9xl': 'var(--text-ak-display-9xl)',
|
|
325
347
|
|
|
326
348
|
'ak-watermark-2xs': 'clamp(1rem, 13cqi, 13rem)',
|
|
327
349
|
'ak-watermark-xs': 'clamp(1rem, 16cqi, 16rem)',
|
|
@@ -437,6 +459,13 @@ module.exports = plugin(
|
|
|
437
459
|
'ak-3xl': 'var(--container-ak-3xl)',
|
|
438
460
|
'ak-4xl': 'var(--container-ak-4xl)',
|
|
439
461
|
'ak-prose': 'var(--container-ak-prose)',
|
|
462
|
+
// Measure scale (ch-based line lengths for copy that isn't full prose:
|
|
463
|
+
// stat labels, card blurbs, hero standfirsts). ak-prose (65ch) is the max.
|
|
464
|
+
'ak-measure-xs': 'var(--container-ak-measure-xs)',
|
|
465
|
+
'ak-measure-sm': 'var(--container-ak-measure-sm)',
|
|
466
|
+
'ak-measure-md': 'var(--container-ak-measure-md)',
|
|
467
|
+
'ak-measure-lg': 'var(--container-ak-measure-lg)',
|
|
468
|
+
'ak-measure-xl': 'var(--container-ak-measure-xl)',
|
|
440
469
|
},
|
|
441
470
|
|
|
442
471
|
/* ── Z-Index (Chakra-inspired scale) ── */
|