astralkit 0.8.0 → 0.9.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.
- package/CHANGELOG.md +119 -109
- package/astralkit-theme-v4.css +71 -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 +2 -2
- package/palettes.css +1110 -788
- package/primitives/typography.css +21 -0
- package/tailwind.cjs +55 -26
package/CHANGELOG.md
CHANGED
|
@@ -1,109 +1,119 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
All notable changes to the `astralkit` SDK package.
|
|
4
|
-
|
|
5
|
-
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
|
-
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
-
|
|
8
|
-
## [0.
|
|
9
|
-
|
|
10
|
-
###
|
|
11
|
-
- **
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
- **
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
- `ak-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
- **`
|
|
34
|
-
- **
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
-
|
|
64
|
-
|
|
65
|
-
###
|
|
66
|
-
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
###
|
|
76
|
-
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
###
|
|
81
|
-
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
- `
|
|
88
|
-
-
|
|
89
|
-
|
|
90
|
-
###
|
|
91
|
-
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
- `
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to the `astralkit` SDK package.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
## [0.9.1] — 2026-09-03
|
|
9
|
+
|
|
10
|
+
### Fixed
|
|
11
|
+
- **Tailwind v4 fraction-alias shim.** 0.8.0 kept the deprecated pre-0.8 fraction names (`ak-0_5`…`ak-5_5`) alive as aliases — but only in the v3 preset (`tailwind.cjs`). The v4 `@theme` file never got them, so on any Tailwind-v4 app those classes generated **nothing** and every legacy gap/padding silently rendered at zero (found 2026-09-03 when a pre-0.8 component copy met a v4 app). `astralkit-theme-v4.css` now declares the same six aliases at the same pixel values, so stale copies degrade gracefully instead of collapsing. Removal still planned for 1.0 together with the v3 aliases. Note: old INTEGER names remain unmigratable by alias (they collide with the new grammar) — cross-generation integer code still needs the one-pass rename (`tools/spacing-migration`).
|
|
12
|
+
|
|
13
|
+
## [0.9.0] — 2026-08-2x *(entry added retroactively 2026-09-03)*
|
|
14
|
+
|
|
15
|
+
### Fixed
|
|
16
|
+
- **Status `-text` token contrast.** `--color-ak-success-text` / `--color-ak-warning-text` lightened past AA in 0.8.0 (`#1b9e4b` / `#c47e09` ≈ 3.1:1 on their subtle backgrounds — the exact badge idiom the docs teach). Corrected to `#15803d` / `#b45309` (≥4.5:1). Part of the contrast-zero pass.
|
|
17
|
+
|
|
18
|
+
## [0.8.0] — 2026-08-23
|
|
19
|
+
|
|
20
|
+
### Changed (BREAKING — spacing grammar renumbered)
|
|
21
|
+
- **The ak spacing scale now uses Tailwind's core 4px-grid numbering.** `ak-N` = core `N` semantics: `ak-1`=4px, `ak-2`=8px, `ak-3`=12px, `ak-4`=16px, `ak-6`=24px … `ak-48`=192px. Values are UNCHANGED — names moved onto the numbering every AI coder and Tailwind user already knows, eliminating the underscore-fraction gotcha family (`ak-1_5` et al.).
|
|
22
|
+
- The two off-grid steps left the ak namespace: 6px is core `1.5` (`p-1.5`), 10px is core `2.5` — identical pixels, standard spelling.
|
|
23
|
+
- Old fraction names (`ak-0_5`…`ak-5_5`, dot variants in v3) remain as DEPRECATED aliases at their original values; removal planned for 1.0. Old INTEGER names could not be aliased (they collide with the new grammar) — code written against pre-0.8 integers must be migrated (`tools/spacing-migration/rename-map.py` in the AstralKit repo does it in one pass).
|
|
24
|
+
|
|
25
|
+
## [0.7.0] — 2026-08-22
|
|
26
|
+
|
|
27
|
+
### Added
|
|
28
|
+
- **Material utilities** — `ak-material-surface`, `ak-material-control`, refined `ak-dark-material`: the opaque elevated material surfaces the kanban/core component sets use for modals, drawers, and floating controls. Components built against these rendered **transparent overlays** on 0.6.0 (found live via the kanban-01 task drawer).
|
|
29
|
+
- **Semantic font utilities** — `ak-font-heading`, `ak-font-label`, `ak-font-ui`, `ak-font-ui-strong`, `ak-font-body`, backed by new font-dial variables (`--font-ak-heading` etc., with the previous literal stacks as fallbacks) so a theme can re-font at runtime.
|
|
30
|
+
- **Radix animation helpers** — `ak-overlay-anim`, `ak-pop-anim`, `ak-sheet-anim`, `ak-accordion-anim`, `ak-collapsible-anim`.
|
|
31
|
+
- **Control primitives** — `ak-control-track`, `ak-control-thumb`, `ak-control-knob`; plus `ak-button-group`(+`-separator`), `ak-scrollbar`, `ak-quiet-hover`.
|
|
32
|
+
- **`astralkit/presets` export** — appearance presets, theme palettes, chart palettes, font pairings, dials, and materials as data (the role system + font library per the no-font-dials-in-builder decision).
|
|
33
|
+
- **`ak-hover-shimmer`** animation (+ `ak-hover-shimmer-sweep` keyframes).
|
|
34
|
+
- **Error-role hover tokens** — `ak-error-hover`, `ak-danger-hover`.
|
|
35
|
+
|
|
36
|
+
### Changed
|
|
37
|
+
- `font-ak-sans`/`-serif`/`-mono` (v3 plugin) are now var-driven (`var(--font-ak-sans, Inter)` …) so containers can re-font at runtime; literal stacks remain as fallbacks — no visual change for existing consumers.
|
|
38
|
+
- `ak-focus-ring` implementation refined.
|
|
39
|
+
|
|
40
|
+
## [0.6.0] — 2026-07-06
|
|
41
|
+
|
|
42
|
+
### Added
|
|
43
|
+
- **`astralkit/theme-context` export** — `AkThemeProvider` / `useAkTheme`, the React context that propagates per-component dark mode across Radix portal boundaries (Dialog/DropdownMenu/Popover content portals to `document.body`, escaping the `data-ak-dark-*` attribute scope). Installable components now import this from the SDK instead of shipping a local provider file. Adds `react >= 18` as an **optional** peer dependency — CSS-only consumers are unaffected.
|
|
44
|
+
- **Sidebar theming layer** (authored post-0.5.0, first published here): `primitives/sidebar.css`, `ak-dark-material` / `ak-mirror-shimmer` and `ak-sidebar-*` utilities, plus the gradient / selection / inverse / surface-container token extensions the themed sidebar set depends on.
|
|
45
|
+
|
|
46
|
+
## [0.5.0] — 2026-06-12
|
|
47
|
+
|
|
48
|
+
### Added (Material 3 role grammar)
|
|
49
|
+
- **45 new color-role tokens across both the v4 `@theme` and the v3 Tailwind plugin** (full v3/v4 parity). These complete the M3 role grammar that a large set of components now depend on:
|
|
50
|
+
- **Surface containers** — `surface-3`, `surface-4`, `surface-container`, `surface-container-low`/`-lowest`/`-high`/`-highest`.
|
|
51
|
+
- **Inverse** — `inverse-surface`, `inverse-on-surface` (dark cards on light themes and vice-versa).
|
|
52
|
+
- **Secondary / tertiary / accent / error roles** — `secondary`(+`-container`), `on-secondary`(+`-container`), `tertiary`(+`-container`), `on-tertiary`(+`-container`), `accent`, `accent-soft`, `on-accent`, `error`, `error-container`, `on-error`, `on-error-container`, plus `primary-container`/`on-primary-container`.
|
|
53
|
+
- **Surface / outline** — `on-surface`, `on-surface-variant`, `outline`, `outline-variant`, `scrim`.
|
|
54
|
+
- **Per-theme controls** — `slider-fill`, `slider-ring` (themed Radix slider fill/ring).
|
|
55
|
+
- **Status badges** — `status-{new,beta,stable,deprecated}-{bg,border,text}`.
|
|
56
|
+
|
|
57
|
+
### Fixed
|
|
58
|
+
- **`ak-skeleton` shimmer now respects `prefers-reduced-motion`.** Added a `@media (prefers-reduced-motion: reduce)` guard that stops the looping shimmer on `.ak-skeleton::after`.
|
|
59
|
+
|
|
60
|
+
## [0.4.0] — 2026-06-06
|
|
61
|
+
|
|
62
|
+
### Added
|
|
63
|
+
- **`astralkit/motion`** — accessible Framer Motion presets tuned to the AstralKit motion tokens (`fadeInUp`, `fadeIn`, `scaleIn`, `staggerContainer`/`staggerItem`, `revealOnScroll`, `hoverLift`/`pressable`, `akTransition`, and `withReducedMotion`). Plain variant/transition objects — importing adds **no dependency**; bring your own `motion` (MIT). All presets are `prefers-reduced-motion`-safe via `withReducedMotion`.
|
|
64
|
+
|
|
65
|
+
### Changed
|
|
66
|
+
- **Motion policy reversed: Framer Motion is now allowed.** The previous "no Framer Motion" rule was based on a licensing misunderstanding — the `motion` package is MIT. `ai-rules.md` now permits Framer Motion + CSS + Lenis and points to the `astralkit/motion` presets; **GSAP** is the disallowed one (its license restricts sold products/templates).
|
|
67
|
+
- `ai-rules.md`: motion guidance updated accordingly; premium-effect toolkit (`ak-card-glow`, `ak-mesh-*`, `ak-float`, `ak-scroll-fade`, etc.) emphasized for richer output.
|
|
68
|
+
|
|
69
|
+
## [0.3.8] — 2026-06-06
|
|
70
|
+
|
|
71
|
+
### Fixed
|
|
72
|
+
- **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.
|
|
73
|
+
- **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.
|
|
74
|
+
|
|
75
|
+
### Added (v3 plugin token parity with v4)
|
|
76
|
+
- 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.
|
|
77
|
+
|
|
78
|
+
## [0.3.3] — 2026-04-22
|
|
79
|
+
|
|
80
|
+
### Changed
|
|
81
|
+
- Widened `tailwind-merge` dependency range from `^2.2.0` to `^2.2.0 || ^3.0.0`. Tailwind CSS v4 projects use `tailwind-merge@v3` (which adds v4 class-name recognition), so accepting either major version lets npm dedupe to the host project's copy instead of nesting a second `node_modules/astralkit/node_modules/tailwind-merge`. Same `twMerge` API in both; no SDK code change required.
|
|
82
|
+
|
|
83
|
+
## [0.3.2] — 2026-04-19
|
|
84
|
+
|
|
85
|
+
### Fixed (revert of accidental change in 0.3.0 / 0.3.1)
|
|
86
|
+
- **`astralkit/theme` export restored to the Tailwind v3 file (`astralkit-theme.css`, `:root` syntax).** This matches the 0.2.x default and is the designed behavior: v3 is the primary customer base, so the default export targets v3. Projects that pinned `0.3.0` or `0.3.1` saw this default silently flip to v4, which broke any v3 project with `@import "astralkit/theme"` in its CSS.
|
|
87
|
+
- `astralkit/theme-v4` export unchanged — still the explicit opt-in for Tailwind v4 projects.
|
|
88
|
+
- Removed the short-lived `astralkit/theme-v3` alias introduced in 0.3.0/0.3.1. If you added it to your CSS during that window, change it back to `astralkit/theme`.
|
|
89
|
+
|
|
90
|
+
### Migrating from 0.3.0 / 0.3.1
|
|
91
|
+
- **Tailwind v3 projects**: no action — your existing `@import "astralkit/theme"` now resolves to the v3 file again, as it did in 0.2.x.
|
|
92
|
+
- **Tailwind v4 projects**: ensure your CSS uses `@import "astralkit/theme-v4"` (not `"astralkit/theme"`). The AstralKit main app and `astralkit init` for v4 projects already use the explicit `theme-v4` form.
|
|
93
|
+
|
|
94
|
+
## [0.3.1] — 2026-04-18 (superseded — do not use for new installs)
|
|
95
|
+
|
|
96
|
+
### Added
|
|
97
|
+
- `peerDependencies` declaration: `tailwindcss >= 3.0.0`. Installing `astralkit` in a project without Tailwind now surfaces a clear peer-dep warning instead of silent breakage.
|
|
98
|
+
- File header comment on `astralkit-theme.css` marking it as the Tailwind v3 file.
|
|
99
|
+
|
|
100
|
+
### Known issue (fixed in 0.3.2)
|
|
101
|
+
- The `astralkit/theme` export was flipped to resolve to the v4 file — unintentional. Any v3 project that upgraded from `0.2.x` silently started pulling v4 CSS. Use `0.3.2`.
|
|
102
|
+
|
|
103
|
+
## [0.3.0] — 2026-04-18 (superseded — do not use for new installs)
|
|
104
|
+
|
|
105
|
+
### Added
|
|
106
|
+
- v4 theme refinements across 12 commits of token architecture work (rail/panel elevated colors, sidebar tokens, avatar sizes, Phase A standardization).
|
|
107
|
+
- `primitives/.npmignore` — excludes `*.backup` and `*.pre-v4-split` scratch files from published tarballs (~220 kB removed).
|
|
108
|
+
|
|
109
|
+
### Fixed
|
|
110
|
+
- Tailwind v3 plugin registration (via CLI init) now covers additional `plugins: [...]` formatting variants.
|
|
111
|
+
|
|
112
|
+
### Known issue (fixed in 0.3.2)
|
|
113
|
+
- Same `astralkit/theme` export mis-resolution as 0.3.1. Use `0.3.2`.
|
|
114
|
+
|
|
115
|
+
## [0.2.0] — 2026-04-02
|
|
116
|
+
|
|
117
|
+
### Added
|
|
118
|
+
- Initial public release on npm.
|
|
119
|
+
- Design tokens (theme CSS), utilities CSS, palette presets, primitives folder, `cn()` helper, Tailwind v3/v4 configs.
|
package/astralkit-theme-v4.css
CHANGED
|
@@ -26,35 +26,35 @@
|
|
|
26
26
|
--color-ak-neutral-950: #0a0a0a;
|
|
27
27
|
|
|
28
28
|
/* ── Primary scale (full 11-shade ramp) ── */
|
|
29
|
-
--color-ak-primary-50: #
|
|
30
|
-
--color-ak-primary-100: #
|
|
31
|
-
--color-ak-primary-200: #
|
|
32
|
-
--color-ak-primary-300: #
|
|
33
|
-
--color-ak-primary-400: #
|
|
34
|
-
--color-ak-primary-500: #
|
|
35
|
-
--color-ak-primary-600: #
|
|
36
|
-
--color-ak-primary-700: #
|
|
37
|
-
--color-ak-primary-800: #
|
|
38
|
-
--color-ak-primary-900: #
|
|
39
|
-
--color-ak-primary-950: #
|
|
29
|
+
--color-ak-primary-50: #f9fafb;
|
|
30
|
+
--color-ak-primary-100: #f3f4f6;
|
|
31
|
+
--color-ak-primary-200: #e5e7eb;
|
|
32
|
+
--color-ak-primary-300: #d1d5db;
|
|
33
|
+
--color-ak-primary-400: #9ca3af;
|
|
34
|
+
--color-ak-primary-500: #6b7280;
|
|
35
|
+
--color-ak-primary-600: #4b5563;
|
|
36
|
+
--color-ak-primary-700: #374151;
|
|
37
|
+
--color-ak-primary-800: #1f2937;
|
|
38
|
+
--color-ak-primary-900: #111827;
|
|
39
|
+
--color-ak-primary-950: #030712;
|
|
40
40
|
|
|
41
41
|
/* ── Primary action colors ── */
|
|
42
|
-
--color-ak-primary: #
|
|
43
|
-
--color-ak-primary-hover: #
|
|
44
|
-
--color-ak-primary-active: #
|
|
42
|
+
--color-ak-primary: #111827;
|
|
43
|
+
--color-ak-primary-hover: #1f2937;
|
|
44
|
+
--color-ak-primary-active: #374151;
|
|
45
45
|
--color-ak-primary-outline: var(--color-ak-primary-400);
|
|
46
46
|
--color-ak-secondary-outline: var(--color-ak-primary-400);
|
|
47
|
-
--color-ak-primary-selection: #
|
|
47
|
+
--color-ak-primary-selection: #1f2937;
|
|
48
48
|
--color-ak-on-primary-selection: var(--color-ak-on-primary);
|
|
49
49
|
|
|
50
50
|
/* ── Semantic color aliases ── */
|
|
51
|
-
--color-ak-bg: #
|
|
51
|
+
--color-ak-bg: #f6f8fb;
|
|
52
52
|
--color-ak-surface: #ffffff;
|
|
53
|
-
--color-ak-surface-2: #
|
|
54
|
-
--color-ak-surface-3: #
|
|
55
|
-
--color-ak-surface-4: #
|
|
56
|
-
--color-ak-hover: #
|
|
57
|
-
--color-ak-active: #
|
|
53
|
+
--color-ak-surface-2: #f9fafb;
|
|
54
|
+
--color-ak-surface-3: #f3f4f6;
|
|
55
|
+
--color-ak-surface-4: #e5e7eb;
|
|
56
|
+
--color-ak-hover: #f3f4f6;
|
|
57
|
+
--color-ak-active: #e5e7eb;
|
|
58
58
|
--color-ak-elevated: #ffffff;
|
|
59
59
|
--color-ak-surface-raised: #ffffff;
|
|
60
60
|
--color-ak-surface-raised-soft: rgba(255, 255, 255, 0.78);
|
|
@@ -62,15 +62,15 @@
|
|
|
62
62
|
--color-ak-surface-glass-strong: rgba(255, 255, 255, 0.84);
|
|
63
63
|
|
|
64
64
|
/* == M3 role layer (additive - old names remain working aliases forever) == */
|
|
65
|
-
--color-ak-inverse-surface: #
|
|
66
|
-
--color-ak-inverse-on-surface: #
|
|
65
|
+
--color-ak-inverse-surface: #111827;
|
|
66
|
+
--color-ak-inverse-on-surface: #ffffff;
|
|
67
67
|
--color-ak-on-error: #ffffff;
|
|
68
68
|
--color-ak-on-tertiary: #ffffff;
|
|
69
69
|
/* Selection accent: defaults to brand primary; palettes may split it
|
|
70
70
|
(e.g. Pulse: ink CTAs via primary, volt-lime selection via accent). */
|
|
71
71
|
--color-ak-accent: var(--color-ak-primary);
|
|
72
72
|
--color-ak-on-accent: var(--color-ak-on-primary);
|
|
73
|
-
--color-ak-accent-soft: #
|
|
73
|
+
--color-ak-accent-soft: #f9fafb;
|
|
74
74
|
/* M3 names as alias vars (follow their targets in dark automatically) */
|
|
75
75
|
--color-ak-surface-container-lowest: var(--color-ak-bg);
|
|
76
76
|
--color-ak-surface-container-low: var(--color-ak-surface);
|
|
@@ -99,28 +99,28 @@
|
|
|
99
99
|
--color-ak-scrim: var(--color-ak-overlay);
|
|
100
100
|
--color-ak-highlight-soft: rgba(255, 255, 255, 0.45);
|
|
101
101
|
--color-ak-highlight-strong: rgba(255, 255, 255, 0.72);
|
|
102
|
-
--color-ak-skeleton-base: #
|
|
102
|
+
--color-ak-skeleton-base: #f3f4f6;
|
|
103
103
|
--color-ak-skeleton-shine: rgba(255, 255, 255, 0.72);
|
|
104
104
|
--color-ak-overlay: rgba(0, 0, 0, 0.5);
|
|
105
105
|
--color-ak-on-primary: #ffffff;
|
|
106
|
-
--color-ak-primary-subtle: #
|
|
107
|
-
--color-ak-primary-subtle-hover: #
|
|
106
|
+
--color-ak-primary-subtle: #f3f4f6;
|
|
107
|
+
--color-ak-primary-subtle-hover: #e5e7eb;
|
|
108
108
|
|
|
109
109
|
/* ── Semantic text ── */
|
|
110
|
-
--color-ak-text: #
|
|
111
|
-
--color-ak-text-emphasis: #
|
|
112
|
-
--color-ak-text-secondary: #
|
|
113
|
-
--color-ak-text-muted: #
|
|
114
|
-
--color-ak-text-disabled: #
|
|
110
|
+
--color-ak-text: #111827;
|
|
111
|
+
--color-ak-text-emphasis: #030712;
|
|
112
|
+
--color-ak-text-secondary: #626b79;
|
|
113
|
+
--color-ak-text-muted: #9ca3af;
|
|
114
|
+
--color-ak-text-disabled: #d1d5db;
|
|
115
115
|
--color-ak-text-inverse: #ffffff;
|
|
116
|
-
--color-ak-text-link: #
|
|
117
|
-
--color-ak-text-placeholder:#
|
|
116
|
+
--color-ak-text-link: #111827;
|
|
117
|
+
--color-ak-text-placeholder:#6b7280;
|
|
118
118
|
|
|
119
119
|
/* ── Semantic border ── */
|
|
120
|
-
--color-ak-border: #
|
|
121
|
-
--color-ak-border-subtle: #
|
|
122
|
-
--color-ak-border-strong: #
|
|
123
|
-
--color-ak-border-focus: #
|
|
120
|
+
--color-ak-border: #e5e7eb;
|
|
121
|
+
--color-ak-border-subtle: #f3f4f6;
|
|
122
|
+
--color-ak-border-strong: #d1d5db;
|
|
123
|
+
--color-ak-border-focus: #111827;
|
|
124
124
|
|
|
125
125
|
/* ── Status colors ── */
|
|
126
126
|
--color-ak-success: #16a34a;
|
|
@@ -203,6 +203,8 @@
|
|
|
203
203
|
--text-ak-display-3xl: clamp(1.875rem, 1.42rem + 1.67vw, 3rem);
|
|
204
204
|
--text-ak-display-4xl: clamp(2.25rem, 1.58rem + 2.5vw, 3.75rem);
|
|
205
205
|
--text-ak-display-5xl: clamp(3rem, 2.07rem + 3.47vw, 5.25rem);
|
|
206
|
+
/* half-step between 5xl and 6xl — hero headlines that outgrow 5xl but drown at 6xl */
|
|
207
|
+
--text-ak-display-5xl_5: clamp(3.4rem, 2.3rem + 4.2vw, 6.35rem);
|
|
206
208
|
--text-ak-display-6xl: clamp(3.75rem, 2.5rem + 4.63vw, 7rem);
|
|
207
209
|
--text-ak-display-7xl: clamp(4.5rem, 3.06rem + 5.56vw, 8rem);
|
|
208
210
|
--text-ak-display-8xl: clamp(5rem, 3.06rem + 6.94vw, 9rem);
|
|
@@ -258,6 +260,17 @@
|
|
|
258
260
|
--spacing-ak-2: 0.5rem;
|
|
259
261
|
--spacing-ak-1_25: 0.625rem;
|
|
260
262
|
--spacing-ak-3: 0.75rem;
|
|
263
|
+
/* DEPRECATED legacy fraction names (pre-0.8 grammar) — same pixel values as the
|
|
264
|
+
tailwind.cjs v3 aliases, so unswept component code renders identically on v4.
|
|
265
|
+
The v3 preset carried these from 0.8.0; the v4 theme missing them silently
|
|
266
|
+
collapsed every legacy gap/padding to zero for v4 consumers (found 2026-09-03
|
|
267
|
+
by the round-5 bake-off). Remove in 1.0 together with the v3 aliases. */
|
|
268
|
+
--spacing-ak-0_5: 0.25rem; /* → ak-1 */
|
|
269
|
+
--spacing-ak-1_5: 0.75rem; /* → ak-3 */
|
|
270
|
+
--spacing-ak-2_5: 1.25rem; /* → ak-5 */
|
|
271
|
+
--spacing-ak-3_5: 1.75rem; /* → ak-7 */
|
|
272
|
+
--spacing-ak-4_5: 2.25rem; /* → ak-9 */
|
|
273
|
+
--spacing-ak-5_5: 2.75rem; /* → ak-11 */
|
|
261
274
|
--spacing-ak-4: 1rem;
|
|
262
275
|
--spacing-ak-5: 1.25rem;
|
|
263
276
|
--spacing-ak-6: 1.5rem;
|
|
@@ -280,7 +293,7 @@
|
|
|
280
293
|
--spacing-ak-mobile-bar: 4.5rem;
|
|
281
294
|
--size-ak-sheet-handle-width: 2.25rem;
|
|
282
295
|
--size-ak-sheet-handle-height: 0.25rem;
|
|
283
|
-
--color-ak-sheet-handle: #
|
|
296
|
+
--color-ak-sheet-handle: #d1d5db;
|
|
284
297
|
|
|
285
298
|
/* ── Layout sizes ──
|
|
286
299
|
Uses Tailwind v4 native namespaces so they generate real utilities:
|
|
@@ -356,7 +369,7 @@
|
|
|
356
369
|
/* ── Shadows ── */
|
|
357
370
|
--shadow-ak-xs: 0 1px 2px rgba(0,0,0,0.04);
|
|
358
371
|
--shadow-ak-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
|
|
359
|
-
--shadow-ak-md: 0 4px
|
|
372
|
+
--shadow-ak-md: 0 4px 10px rgba(16,24,40,0.05), 0 2px 4px rgba(16,24,40,0.04);
|
|
360
373
|
--shadow-ak-lg: 0 8px 30px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
|
|
361
374
|
--shadow-ak-xl: 0 16px 50px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);
|
|
362
375
|
--shadow-ak-2xl: 0 24px 60px rgba(0,0,0,0.14);
|
|
@@ -507,6 +520,20 @@
|
|
|
507
520
|
--container-ak-3xl: 48rem;
|
|
508
521
|
--container-ak-4xl: 56rem;
|
|
509
522
|
--container-ak-prose: 65ch;
|
|
523
|
+
/* measure scale — ch line-lengths for non-prose copy (labels, blurbs, standfirsts) */
|
|
524
|
+
--container-ak-measure-xs: 15ch;
|
|
525
|
+
--container-ak-measure-sm: 26ch;
|
|
526
|
+
--container-ak-measure-md: 42ch;
|
|
527
|
+
--container-ak-measure-lg: 50ch;
|
|
528
|
+
--container-ak-measure-xl: 58ch;
|
|
529
|
+
|
|
530
|
+
/* ── Breakpoints ──
|
|
531
|
+
Core names/values untouched; custom screens are ak- prefixed + hyphenated
|
|
532
|
+
(unprefixed names squat on global variant space; underscores are reserved
|
|
533
|
+
for type/spacing fraction tokens). Rule: use these, never min-[NNNpx]. */
|
|
534
|
+
--breakpoint-ak-xs: 480px;
|
|
535
|
+
--breakpoint-ak-md-5: 896px;
|
|
536
|
+
--breakpoint-ak-lg-5: 1152px;
|
|
510
537
|
|
|
511
538
|
/* ── Animation ── */
|
|
512
539
|
--duration-ak-fast: 110ms;
|
|
@@ -711,17 +738,17 @@
|
|
|
711
738
|
/* ── Status (lighter for dark bg readability) ── */
|
|
712
739
|
--color-ak-success: #4ade80;
|
|
713
740
|
--color-ak-success-subtle: rgba(34, 197, 94, 0.12);
|
|
714
|
-
--color-ak-success-text: #
|
|
741
|
+
--color-ak-success-text: #86efac;
|
|
715
742
|
--color-ak-warning: #fbbf24;
|
|
716
743
|
--color-ak-warning-subtle: rgba(251, 191, 36, 0.12);
|
|
717
|
-
--color-ak-warning-text: #
|
|
744
|
+
--color-ak-warning-text: #fcd34d;
|
|
718
745
|
--color-ak-danger: #dc2626;
|
|
719
746
|
--color-ak-danger-hover: #b91c1c;
|
|
720
747
|
--color-ak-danger-subtle: rgba(248, 113, 113, 0.12);
|
|
721
|
-
--color-ak-danger-text: #
|
|
748
|
+
--color-ak-danger-text: #fca5a5;
|
|
722
749
|
--color-ak-info: #60a5fa;
|
|
723
750
|
--color-ak-info-subtle: rgba(96, 165, 250, 0.12);
|
|
724
|
-
--color-ak-info-text: #
|
|
751
|
+
--color-ak-info-text: #93c5fd;
|
|
725
752
|
|
|
726
753
|
/* ── Shadows (mostly invisible on dark — reduce or remove) ── */
|
|
727
754
|
--shadow-ak-xs: none;
|