@astralkit/mcp 1.0.0 → 1.0.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/dist/data/rules.d.ts +1 -1
- package/dist/data/rules.d.ts.map +1 -1
- package/dist/data/rules.js +1 -1
- package/dist/data/tokens.d.ts +1 -1
- package/dist/data/tokens.d.ts.map +1 -1
- package/dist/data/tokens.js +420 -62
- package/dist/data/tokens.js.map +1 -1
- package/package.json +1 -1
package/dist/data/rules.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const CODING_STANDARDS = "# AstralKit Coding Standards\n\n## Setup\n- Package: `astralkit` (npm)\n- CSS: `@import \"astralkit/theme\"; @import \"astralkit/utilities\";` (after Tailwind imports)\n- Tailwind v3 plugin: `require('astralkit/tailwind.cjs')` in tailwind.config\n- Tailwind v4: `@import \"astralkit/theme-v4\"; @import \"astralkit/utilities\";`\n- Icons: `@phosphor-icons/react` exclusively. Never Lucide, Heroicons, or inline SVGs.\n- Fonts:
|
|
1
|
+
export declare const CODING_STANDARDS = "# AstralKit Coding Standards\n\n## Setup\n- Package: `astralkit` (npm)\n- CSS: `@import \"astralkit/theme\"; @import \"astralkit/utilities\";` (after Tailwind imports)\n- Tailwind v3 plugin: `require('astralkit/tailwind.cjs')` in tailwind.config\n- Tailwind v4: `@import \"astralkit/theme-v4\"; @import \"astralkit/utilities\";`\n- Icons: `@phosphor-icons/react` exclusively. Never Lucide, Heroicons, or inline SVGs.\n- Fonts: Inter (body), DM Serif Display (display), JetBrains Mono (code)\n\n## Token-First Rule\nALWAYS use `ak-*` tokens. NEVER use arbitrary bracket values.\n```tsx\n// CORRECT\n<div className=\"p-ak-3 gap-ak-2 text-ak-base rounded-ak-lg\">\n// WRONG \u2014 arbitrary values silently collapse in Tailwind v4\n<div className=\"p-[1.5rem] gap-[1rem] text-[16px] rounded-[0.75rem]\">\n```\n\n## Semantic Colors \u2014 No Raw Tailwind\n```tsx\n// CORRECT: bg-ak-surface, text-ak-text, border-ak-border, bg-ak-primary\n// WRONG: bg-gray-50, text-gray-900, border-gray-200, bg-blue-600\n```\n\n## Typography \u2014 16px Floor\n- Body text, descriptions, nav items, table cells: `text-ak-base` (16px) minimum\n- UI text: `font-medium` minimum \u2014 `font-normal` is for long-form prose only\n- Labels/badges: `text-ak-sm` (14px) or `text-ak-xs` (12px uppercase) acceptable\n- Helper/error text: `text-ak-sm` (14px) is the only exception\n\n## Spacing \u2014 ak-* Tokens Only\n```tsx\n// CORRECT: p-ak-3, gap-ak-2, mb-ak-1_5\n// WRONG: p-6, gap-4, mb-3\n```\n\n## Icons \u2014 Phosphor Only\n```tsx\nimport { House, Gear } from '@phosphor-icons/react'\n<House size={20} aria-hidden=\"true\" />\n```\n\n## No Inline Styles\nUse Tailwind classes. `style={{}}` only for CSS variables with no Tailwind equivalent.\n\n## No Shadows on Panels/Dropdowns \u2014 Borders Only\nUse `border border-ak-border`. Reserve shadows for modals and elevated cards.\n\n## No Framer Motion \u2014 CSS Animations or Lenis\nLicensing issue. Use CSS animations with `duration-ak-base`, `ease-ak-default`.\n\n## Touch Targets \u2014 48px Minimum\n- Buttons: `min-h-[3rem]` + `cursor-pointer`\n- Form inputs: `h-14` (56px)\n\n## Empty States \u2014 Every Data Container\nEvery list, table, or feed must handle: Loading \u2192 Error \u2192 Empty \u2192 Data.\nEmpty states need: icon, title, description, CTA.\n\n## Error Handling \u2014 Never Show Raw Errors\nUser-facing errors need: title (jargon-free), description, action (Retry/Go Back).\n\n## cn() Utility\n```tsx\nimport { cn } from '@/lib/utils'\n<div className={cn(\"p-ak-3\", isActive && \"bg-ak-primary\")}>\n```\n";
|
|
2
2
|
//# sourceMappingURL=rules.d.ts.map
|
package/dist/data/rules.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../src/data/rules.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../src/data/rules.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,2gFAoE5B,CAAC"}
|
package/dist/data/rules.js
CHANGED
|
@@ -6,7 +6,7 @@ export const CODING_STANDARDS = `# AstralKit Coding Standards
|
|
|
6
6
|
- Tailwind v3 plugin: \`require('astralkit/tailwind.cjs')\` in tailwind.config
|
|
7
7
|
- Tailwind v4: \`@import "astralkit/theme-v4"; @import "astralkit/utilities";\`
|
|
8
8
|
- Icons: \`@phosphor-icons/react\` exclusively. Never Lucide, Heroicons, or inline SVGs.
|
|
9
|
-
- Fonts:
|
|
9
|
+
- Fonts: Inter (body), DM Serif Display (display), JetBrains Mono (code)
|
|
10
10
|
|
|
11
11
|
## Token-First Rule
|
|
12
12
|
ALWAYS use \`ak-*\` tokens. NEVER use arbitrary bracket values.
|
package/dist/data/tokens.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const DESIGN_TOKENS = "# AstralKit Design Token Reference\n\n## Surfaces\n- `bg-ak-bg` \u2014 page background\n- `bg-ak-surface` \u2014 card/panel background\n- `bg-ak-surface-2` \u2014 secondary surface (nested panels)\n- `bg-ak-hover` \u2014 hover state background\n- `bg-ak-elevated` \u2014 elevated surface (modals, popovers)\n\n## Text\n- `text-ak-text` \u2014 primary body text\n- `text-ak-text-secondary` \u2014 descriptions, supporting copy\n- `text-ak-text-muted` \u2014 timestamps, captions, tertiary info\n- `text-ak-text-disabled` \u2014 disabled controls\n- `text-ak-text-inverse` \u2014 text on dark/ink backgrounds\n- `text-ak-text-link` \u2014 inline hyperlinks\n- `text-ak-on-primary` \u2014 text on primary-colored backgrounds\n\n## Borders\n- `border-ak-border` \u2014 default border\n- `border-ak-border-subtle` \u2014 lighter border\n- `border-ak-border-strong` \u2014 emphasis border\n\n## Primary (buttons, CTAs)\n- `bg-ak-primary` \u2014 primary action background\n- `bg-ak-primary-hover` \u2014 primary hover state\n- `text-ak-on-primary` \u2014 text on primary background\n- `bg-ak-primary-subtle` \u2014 soft tint (badges, soft buttons)\n\n## Status Colors\n- `ak-success` / `ak-warning` / `ak-danger` / `ak-info`\n- Each has `-subtle` and `-text` variants\n\n## Spacing Scale\n- `ak-0_5` (4px) \u00B7 `ak-1` (8px) \u00B7 `ak-1_5` (12px) \u00B7 `ak-2` (16px)\n- `ak-2_5` (20px) \u00B7 `ak-3` (24px) \u00B7 `ak-4` (32px) \u00B7 `ak-5` (40px) \u00B7 `ak-6` (48px)\n\n## Typography Scale\n- `text-ak-xs` (12px) \u00B7 `text-ak-sm` (14px) \u00B7 `text-ak-base` (16px)\n- `text-ak-lg` (18px) \u00B7 `text-ak-xl` (20px) \u00B7 `text-ak-2xl` (24px)\n\n## Fluid Typography (headings)\n- `text-ak-fl-lg` \u00B7 `text-ak-fl-xl` \u00B7 `text-ak-fl-2xl` \u00B7 `text-ak-fl-3xl`\n- `text-ak-fl-4xl` \u00B7 `text-ak-fl-5xl`\n\n## Radii\n- `rounded-ak-sm` \u00B7 `rounded-ak-md` \u00B7 `rounded-ak-lg` \u00B7 `rounded-ak-xl` \u00B7 `rounded-ak-full`\n\n## Control Heights\n- `min-h-ak-control-sm` (32px) \u00B7 `min-h-ak-control-md` (40px)\n- `min-h-ak-control-lg` (48px) \u00B7 `min-h-ak-control-xl` (56px)\n\n## Layout\n- `max-w-ak-page` (80rem) \u2014 max page width\n- `h-ak-nav` \u2014 nav bar height\n- `px-ak-fl-page-margin` \u2014 fluid side padding (16px mobile \u2192 80px desktop)\n\n## Fonts\n- `font-ak-sans` \u2014 DM Sans (body)\n- `font-ak-serif` \u2014 DM Serif Display (display/headlines)\n- `font-ak-mono` \u2014 JetBrains Mono (code)\n\n## Common Patterns\n```tsx\n// Card\n<div className=\"border border-ak-border rounded-ak-lg p-ak-3 bg-ak-surface\">\n\n// Primary button\n<button className=\"bg-ak-primary text-ak-on-primary px-ak-2_5 py-ak-1_25 min-h-[3rem] rounded-ak-lg font-semibold cursor-pointer\">\n\n// Section\n<section className=\"py-ak-fl-xl-3xl bg-ak-bg\">\n <div className=\"max-w-ak-page mx-auto px-ak-3\">\n\n// Icon\nimport { House } from '@phosphor-icons/react'\n<House size={20} aria-hidden=\"true\" />\n```\n";
|
|
1
|
+
export declare const DESIGN_TOKENS = "# AstralKit Design Token Reference\n\n**This is the complete, authoritative list of every `ak-*` design token.**\nThese are the ONLY valid AstralKit tokens. Do NOT invent or guess a token that\nis not listed here \u2014 in Tailwind v4 an undefined utility (e.g. `bg-ak-surface-muted`)\n**silently fails to compile** (no error, the element just renders unstyled).\n\nTailwind v3 vs v4: the token NAMES and VALUES are identical in both. v4 reads them\nfrom `astralkit/theme-v4` (`@theme`) and auto-generates every utility. v3 reads\n`astralkit/theme` (CSS vars) plus the `astralkit/tailwind` plugin, which registers\nthe same utilities. Either way the class names below are what you write.\n\n---\n\n## Colors\nEach color token works with every color utility: `bg-*`, `text-*`, `border-*`, `ring-*`, `fill-*`, `stroke-*`, `from-*`/`to-*`/`via-*`.\nExample: token `ak-surface` \u2192 `bg-ak-surface`, `text-ak-surface`, `border-ak-surface`.\n\n- `ak-neutral-0` \u2014 `#ffffff`\n- `ak-neutral-50` \u2014 `#fafafa`\n- `ak-neutral-100` \u2014 `#f5f5f5`\n- `ak-neutral-200` \u2014 `#e5e5e5`\n- `ak-neutral-300` \u2014 `#d4d4d4`\n- `ak-neutral-400` \u2014 `#a3a3a3`\n- `ak-neutral-500` \u2014 `#737373`\n- `ak-neutral-600` \u2014 `#525252`\n- `ak-neutral-700` \u2014 `#404040`\n- `ak-neutral-800` \u2014 `#262626`\n- `ak-neutral-900` \u2014 `#171717`\n- `ak-neutral-950` \u2014 `#0a0a0a`\n- `ak-primary-50` \u2014 `#f5f5f5`\n- `ak-primary-100` \u2014 `#e5e5e5`\n- `ak-primary-200` \u2014 `#cccccc`\n- `ak-primary-300` \u2014 `#a3a3a3`\n- `ak-primary-400` \u2014 `#737373`\n- `ak-primary-500` \u2014 `#525252`\n- `ak-primary-600` \u2014 `#404040`\n- `ak-primary-700` \u2014 `#333333`\n- `ak-primary-800` \u2014 `#1a1a1a`\n- `ak-primary-900` \u2014 `#000000`\n- `ak-primary-950` \u2014 `#000000`\n- `ak-primary` \u2014 `#000000`\n- `ak-primary-hover` \u2014 `#1a1a1a`\n- `ak-primary-active` \u2014 `#333333`\n- `ak-bg` \u2014 `#ffffff`\n- `ak-surface` \u2014 `#fafafa`\n- `ak-surface-2` \u2014 `#f5f5f5`\n- `ak-hover` \u2014 `#f7f7f7`\n- `ak-active` \u2014 `#f0f0f0`\n- `ak-elevated` \u2014 `#ffffff`\n- `ak-surface-raised` \u2014 `#ffffff`\n- `ak-surface-raised-soft` \u2014 `rgba(255, 255, 255, 0.78)`\n- `ak-surface-glass` \u2014 `rgba(255, 255, 255, 0.72)`\n- `ak-surface-glass-strong` \u2014 `rgba(255, 255, 255, 0.84)`\n- `ak-highlight-soft` \u2014 `rgba(255, 255, 255, 0.45)`\n- `ak-highlight-strong` \u2014 `rgba(255, 255, 255, 0.72)`\n- `ak-skeleton-base` \u2014 `#ededed`\n- `ak-skeleton-shine` \u2014 `rgba(255, 255, 255, 0.72)`\n- `ak-overlay` \u2014 `rgba(0, 0, 0, 0.5)`\n- `ak-on-primary` \u2014 `#ffffff`\n- `ak-primary-subtle` \u2014 `#f5f5f5`\n- `ak-primary-subtle-hover` \u2014 `#e5e5e5`\n- `ak-text` \u2014 `#171717`\n- `ak-text-emphasis` \u2014 `#2b2b2b`\n- `ak-text-secondary` \u2014 `#525252`\n- `ak-text-muted` \u2014 `#a3a3a3`\n- `ak-text-disabled` \u2014 `#d4d4d4`\n- `ak-text-inverse` \u2014 `#ffffff`\n- `ak-text-link` \u2014 `#000000`\n- `ak-text-placeholder` \u2014 `#525252`\n- `ak-border` \u2014 `#dee2e6`\n- `ak-border-subtle` \u2014 `#e5e5e5`\n- `ak-border-strong` \u2014 `#525252`\n- `ak-border-focus` \u2014 `#000000`\n- `ak-success` \u2014 `#16a34a`\n- `ak-success-subtle` \u2014 `#f0fdf4`\n- `ak-success-text` \u2014 `#15803d`\n- `ak-warning` \u2014 `#d97706`\n- `ak-warning-subtle` \u2014 `#fffbeb`\n- `ak-warning-text` \u2014 `#b45309`\n- `ak-danger` \u2014 `#dc2626`\n- `ak-danger-subtle` \u2014 `#fef2f2`\n- `ak-danger-text` \u2014 `#b91c1c`\n- `ak-info` \u2014 `#2563eb`\n- `ak-info-subtle` \u2014 `#eff6ff`\n- `ak-pink` \u2014 `#db2777`\n- `ak-pink-subtle` \u2014 `#fdf2f8`\n- `ak-info-text` \u2014 `#1d4ed8`\n- `ak-sheet-handle` \u2014 `#d4d4d4`\n- `ak-brutal-ink` \u2014 `#000000`\n- `ak-brutal-face` \u2014 `#ffffff`\n- `ak-brutal-face-dark` \u2014 `#262626`\n- `ak-brutal-on-face` \u2014 `#000000`\n- `ak-brutal-on-face-dark` \u2014 `#ffffff`\n- `ak-chart-1` \u2014 `#4e79a7`\n- `ak-chart-2` \u2014 `#f28e2c`\n- `ak-chart-3` \u2014 `#e15759`\n- `ak-chart-4` \u2014 `#76b7b2`\n- `ak-chart-5` \u2014 `#59a14f`\n- `ak-chart-6` \u2014 `#edc949`\n\n## Fonts\n`font-*` utilities.\n\n- `font-ak-sans` \u2014 'Inter', system-ui, -apple-system, sans-serif\n- `font-ak-serif` \u2014 'DM Serif Display', Georgia, serif\n- `font-ak-mono` \u2014 'JetBrains Mono', 'Fira Code', ui-monospace, monospace\n\n## Font Size (text scale)\n`text-*` utilities. Includes static, `_5` half-steps, fluid (`fl-*`), display, watermark, avatar, and badge sizes.\n\n- `text-ak-2xs` \u2014 `0.6875rem`\n- `text-ak-xs` \u2014 `0.75rem`\n- `text-ak-xs_5` \u2014 `0.8125rem`\n- `text-ak-sm` \u2014 `0.875rem`\n- `text-ak-sm_5` \u2014 `0.9375rem`\n- `text-ak-base` \u2014 `1rem`\n- `text-ak-lg` \u2014 `1.125rem`\n- `text-ak-xl` \u2014 `1.25rem`\n- `text-ak-xl_5` \u2014 `1.375rem`\n- `text-ak-2xl` \u2014 `1.5rem`\n- `text-ak-2xl_5` \u2014 `1.625rem`\n- `text-ak-3xl` \u2014 `2rem`\n- `text-ak-4xl` \u2014 `2.5rem`\n- `text-ak-4xl_5` \u2014 `2.75rem`\n- `text-ak-5xl` \u2014 `3rem`\n- `text-ak-6xl` \u2014 `3.75rem`\n- `text-ak-6xl_5` \u2014 `4rem`\n- `text-ak-7xl` \u2014 `4.5rem`\n- `text-ak-7xl_5` \u2014 `5.25rem`\n- `text-ak-8xl` \u2014 `6rem`\n- `text-ak-9xl` \u2014 `7rem`\n- `text-ak-10xl` \u2014 `8rem`\n- `text-ak-fl-xs` \u2014 `clamp(0.6875rem, 0.67rem + 0.06vw, 0.75rem)`\n- `text-ak-fl-sm` \u2014 `clamp(0.75rem, 0.71rem + 0.12vw, 0.875rem)`\n- `text-ak-fl-base` \u2014 `clamp(0.875rem, 0.84rem + 0.12vw, 1rem)`\n- `text-ak-fl-lg` \u2014 `clamp(1rem, 0.96rem + 0.12vw, 1.125rem)`\n- `text-ak-fl-xl` \u2014 `clamp(1.125rem, 1.09rem + 0.12vw, 1.25rem)`\n- `text-ak-fl-2xl` \u2014 `clamp(1.25rem, 1.18rem + 0.23vw, 1.5rem)`\n- `text-ak-fl-3xl` \u2014 `clamp(1.5rem, 1.39rem + 0.35vw, 1.875rem)`\n- `text-ak-fl-4xl` \u2014 `clamp(1.875rem, 1.76rem + 0.35vw, 2.25rem)`\n- `text-ak-fl-5xl` \u2014 `clamp(2.25rem, 2.03rem + 0.69vw, 3rem)`\n- `text-ak-fl-6xl` \u2014 `clamp(3rem, 2.78rem + 0.69vw, 3.75rem)`\n- `text-ak-fl-7xl` \u2014 `clamp(3.5rem, 3.2rem + 0.93vw, 4.5rem)`\n- `text-ak-fl-8xl` \u2014 `clamp(4.5rem, 4.06rem + 1.39vw, 6rem)`\n- `text-ak-fl-9xl` \u2014 `clamp(5.25rem, 4.73rem + 1.62vw, 7rem)`\n- `text-ak-display-xs` \u2014 `clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem)`\n- `text-ak-display-sm` \u2014 `clamp(0.875rem, 0.83rem + 0.19vw, 1rem)`\n- `text-ak-display-base` \u2014 `clamp(1rem, 0.94rem + 0.28vw, 1.1875rem)`\n- `text-ak-display-lg` \u2014 `clamp(1.125rem, 1.01rem + 0.52vw, 1.5rem)`\n- `text-ak-display-xl` \u2014 `clamp(1.25rem, 1.07rem + 0.83vw, 1.875rem)`\n- `text-ak-display-2xl` \u2014 `clamp(1.5rem, 1.2rem + 1.11vw, 2.25rem)`\n- `text-ak-display-3xl` \u2014 `clamp(1.875rem, 1.42rem + 1.67vw, 3rem)`\n- `text-ak-display-4xl` \u2014 `clamp(2.25rem, 1.58rem + 2.5vw, 3.75rem)`\n- `text-ak-display-5xl` \u2014 `clamp(3rem, 2.07rem + 3.47vw, 5.25rem)`\n- `text-ak-display-6xl` \u2014 `clamp(3.75rem, 2.5rem + 4.63vw, 7rem)`\n- `text-ak-display-7xl` \u2014 `clamp(4.5rem, 3.06rem + 5.56vw, 8rem)`\n- `text-ak-display-8xl` \u2014 `clamp(5rem, 3.06rem + 6.94vw, 9rem)`\n- `text-ak-display-9xl` \u2014 `clamp(5.5rem, 3.06rem + 7.64vw, 10rem)`\n- `text-ak-watermark-2xs` \u2014 `clamp(1rem, 13cqi, 13rem)`\n- `text-ak-watermark-xs` \u2014 `clamp(1rem, 16cqi, 16rem)`\n- `text-ak-watermark-sm` \u2014 `clamp(1rem, 19cqi, 20rem)`\n- `text-ak-watermark-base` \u2014 `clamp(1rem, 21cqi, 22rem)`\n- `text-ak-watermark-md` \u2014 `clamp(1rem, 24cqi, 26rem)`\n- `text-ak-watermark-lg` \u2014 `clamp(1rem, 26cqi, 28rem)`\n- `text-ak-watermark-xl` \u2014 `clamp(1rem, 28cqi, 30rem)`\n- `text-ak-watermark-2xl` \u2014 `clamp(1rem, 30cqi, 34rem)`\n- `text-ak-watermark-3xl` \u2014 `clamp(1rem, 33cqi, 38rem)`\n- `text-ak-watermark-4xl` \u2014 `clamp(1rem, 36cqi, 42rem)`\n- `text-ak-watermark-5xl` \u2014 `clamp(1rem, 40cqi, 48rem)`\n- `text-ak-avatar-xs` \u2014 `0.625rem`\n- `text-ak-avatar-sm` \u2014 `0.6875rem`\n- `text-ak-avatar-md` \u2014 `0.8125rem`\n- `text-ak-avatar-lg` \u2014 `1rem`\n- `text-ak-avatar-xl` \u2014 `1.25rem`\n- `text-ak-avatar-2xl` \u2014 `1.75rem`\n- `text-ak-avatar-3xl` \u2014 `2.25rem`\n- `text-ak-badge-md` \u2014 `0.625rem`\n- `text-ak-badge-lg` \u2014 `0.6875rem`\n- `text-ak-badge-xl` \u2014 `0.8125rem`\n- `text-ak-badge-2xl` \u2014 `0.9375rem`\n- `text-ak-badge-3xl` \u2014 `1.125rem`\n\n## Line Height\n`leading-*` utilities.\n\n- `leading-ak-display` \u2014 `0.85`\n- `leading-ak-squeezed` \u2014 `0.92`\n- `leading-ak-condensed` \u2014 `0.95`\n- `leading-ak-none` \u2014 `1`\n- `leading-ak-fitted` \u2014 `1.02`\n- `leading-ak-compact` \u2014 `1.05`\n- `leading-ak-tighter` \u2014 `1.1`\n- `leading-ak-snugger` \u2014 `1.2`\n- `leading-ak-tight` \u2014 `1.25`\n- `leading-ak-snug` \u2014 `1.375`\n- `leading-ak-normal` \u2014 `1.5`\n- `leading-ak-relaxed` \u2014 `1.625`\n- `leading-ak-prose` \u2014 `1.75`\n- `leading-ak-loose` \u2014 `2`\n\n## Letter Spacing\n`tracking-*` utilities.\n\n- `tracking-ak-tighter` \u2014 `-0.05em`\n- `tracking-ak-tight` \u2014 `-0.025em`\n- `tracking-ak-subtle` \u2014 `-0.01em`\n- `tracking-ak-normal` \u2014 `0em`\n- `tracking-ak-wide` \u2014 `0.025em`\n- `tracking-ak-section` \u2014 `0.08em`\n- `tracking-ak-wider` \u2014 `0.05em`\n- `tracking-ak-widest` \u2014 `0.1em`\n\n## Spacing\nFeeds every spacing utility: `p-* px-* py-* pt/pr/pb/pl-* m-* mx-* my-* gap-* gap-x/y-* space-x/y-* w-* h-* min-w-* min-h-* max-w-* inset-* top/right/bottom/left-*`.\nExample: token `ak-3` \u2192 `p-ak-3`, `gap-ak-3`, `mt-ak-3`.\n\n- `ak-0` \u2014 `0rem`\n- `ak-px` \u2014 `0.0625rem`\n- `ak-0_5` \u2014 `0.25rem`\n- `ak-0_75` \u2014 `0.375rem`\n- `ak-1` \u2014 `0.5rem`\n- `ak-1_25` \u2014 `0.625rem`\n- `ak-1_5` \u2014 `0.75rem`\n- `ak-2` \u2014 `1rem`\n- `ak-2_5` \u2014 `1.25rem`\n- `ak-3` \u2014 `1.5rem`\n- `ak-3_5` \u2014 `1.75rem`\n- `ak-4` \u2014 `2rem`\n- `ak-4_5` \u2014 `2.25rem`\n- `ak-5` \u2014 `2.5rem`\n- `ak-5_5` \u2014 `2.75rem`\n- `ak-6` \u2014 `3rem`\n- `ak-7` \u2014 `3.5rem`\n- `ak-8` \u2014 `4rem`\n- `ak-9` \u2014 `4.5rem`\n- `ak-10` \u2014 `5rem`\n- `ak-11` \u2014 `5.5rem`\n- `ak-12` \u2014 `6rem`\n- `ak-14` \u2014 `7rem`\n- `ak-16` \u2014 `8rem`\n- `ak-20` \u2014 `10rem`\n- `ak-24` \u2014 `12rem`\n- `ak-mobile-bar` \u2014 `4.5rem`\n- `ak-fl-page-margin` \u2014 `clamp(1rem, 0.26rem + 3.7vw, 5rem)`\n- `ak-fl-3xs` \u2014 `clamp(0.25rem, 0.21rem + 0.14vw, 0.375rem)`\n- `ak-fl-2xs` \u2014 `clamp(0.5rem, 0.43rem + 0.28vw, 0.75rem)`\n- `ak-fl-xs` \u2014 `clamp(0.75rem, 0.65rem + 0.42vw, 1rem)`\n- `ak-fl-sm` \u2014 `clamp(1rem, 0.86rem + 0.56vw, 1.5rem)`\n- `ak-fl-md` \u2014 `clamp(1.5rem, 1.29rem + 0.83vw, 2rem)`\n- `ak-fl-lg` \u2014 `clamp(2rem, 1.72rem + 1.11vw, 3rem)`\n- `ak-fl-xl` \u2014 `clamp(3rem, 2.5rem + 1.85vw, 4.5rem)`\n- `ak-fl-2xl` \u2014 `clamp(4rem, 3.22rem + 2.78vw, 6rem)`\n- `ak-fl-3xl` \u2014 `clamp(6rem, 4.86rem + 4.17vw, 9rem)`\n- `ak-fl-xs-md` \u2014 `clamp(0.75rem, 0.43rem + 1.39vw, 2rem)`\n- `ak-fl-xs-lg` \u2014 `clamp(0.75rem, 0.14rem + 2.78vw, 3rem)`\n- `ak-fl-sm-lg` \u2014 `clamp(1rem, 0.43rem + 2.78vw, 3rem)`\n- `ak-fl-sm-xl` \u2014 `clamp(1rem, 0rem + 4.17vw, 4.5rem)`\n- `ak-fl-md-xl` \u2014 `clamp(1.5rem, 0.57rem + 3.47vw, 4.5rem)`\n- `ak-fl-md-2xl` \u2014 `clamp(1.5rem, 0rem + 5.56vw, 6rem)`\n- `ak-fl-lg-2xl` \u2014 `clamp(2rem, 0.57rem + 5.56vw, 6rem)`\n- `ak-fl-xl-3xl` \u2014 `clamp(3rem, 0.57rem + 8.33vw, 9rem)`\n\n## Border Radius\n`rounded-*` utilities.\n\n- `rounded-ak-xs` \u2014 `0.125rem`\n- `rounded-ak-none` \u2014 `0`\n- `rounded-ak-sm` \u2014 `0.25rem`\n- `rounded-ak-md` \u2014 `0.5rem`\n- `rounded-ak-lg` \u2014 `0.75rem`\n- `rounded-ak-xl` \u2014 `1rem`\n- `rounded-ak-2xl` \u2014 `1.5rem`\n- `rounded-ak-3xl` \u2014 `2rem`\n- `rounded-ak-full` \u2014 `9999px`\n- `rounded-ak-brutal` \u2014 `0.5rem`\n- `rounded-ak-brutal-sm` \u2014 `0.25rem`\n- `rounded-ak-input` \u2014 `0.625rem`\n\n## Border Width\n`border-*` utilities (width).\n\n- `border-ak-brutal` \u2014 `2px`\n- `border-ak-brutal-lg` \u2014 `3px`\n\n## Box Shadow\n`shadow-*` utilities (includes focus rings and neobrutalist shadows).\n\n- `shadow-ak-xs` \u2014 `0 1px 2px rgba(0,0,0,0.04)`\n- `shadow-ak-sm` \u2014 `0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)`\n- `shadow-ak-md` \u2014 `0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04)`\n- `shadow-ak-lg` \u2014 `0 8px 30px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)`\n- `shadow-ak-xl` \u2014 `0 16px 50px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05)`\n- `shadow-ak-2xl` \u2014 `0 24px 60px rgba(0,0,0,0.14)`\n- `shadow-ak-brutal-xs` \u2014 `2px 2px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-brutal-sm` \u2014 `3px 3px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-brutal` \u2014 `4px 4px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-brutal-lg` \u2014 `6px 6px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-brutal-xl` \u2014 `8px 8px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-focus` \u2014 `0 0 0 3px rgba(0, 0, 0, 0.08)`\n- `shadow-ak-focus-primary` \u2014 `0 0 0 3px rgba(0, 0, 0, 0.15)`\n- `shadow-ak-focus-danger` \u2014 `0 0 0 3px rgba(220, 38, 38, 0.08)`\n- `shadow-ak-focus-success` \u2014 `0 0 0 3px rgba(22, 163, 74, 0.08)`\n\n## Max Width (containers)\n`max-w-*` utilities.\n\n- `max-w-ak-page` \u2014 `80rem`\n- `max-w-ak-xs` \u2014 `20rem`\n- `max-w-ak-sm` \u2014 `24rem`\n- `max-w-ak-md` \u2014 `28rem`\n- `max-w-ak-lg` \u2014 `32rem`\n- `max-w-ak-xl` \u2014 `36rem`\n- `max-w-ak-2xl` \u2014 `42rem`\n- `max-w-ak-3xl` \u2014 `48rem`\n- `max-w-ak-4xl` \u2014 `56rem`\n- `max-w-ak-prose` \u2014 `65ch`\n\n## Z-Index\n`z-*` utilities.\n\n- `z-ak-base` \u2014 `0`\n- `z-ak-docked` \u2014 `10`\n- `z-ak-dropdown` \u2014 `1000`\n- `z-ak-sticky` \u2014 `1100`\n- `z-ak-banner` \u2014 `1200`\n- `z-ak-overlay` \u2014 `1300`\n- `z-ak-modal` \u2014 `1400`\n- `z-ak-popover` \u2014 `1500`\n- `z-ak-toast` \u2014 `1700`\n- `z-ak-tooltip` \u2014 `1800`\n\n## Transition Duration\n`duration-*` utilities.\n\n- `duration-ak-fast` \u2014 `110ms`\n- `duration-ak-base` \u2014 `150ms`\n- `duration-ak-slow` \u2014 `240ms`\n- `duration-ak-skeleton` \u2014 `1800ms`\n\n## Transition Timing (easing)\n`ease-*` utilities.\n\n- `ease-ak-default` \u2014 `cubic-bezier(0.4, 0, 0.2, 1)`\n- `ease-ak-in` \u2014 `cubic-bezier(0.4, 0, 1, 1)`\n- `ease-ak-out` \u2014 `cubic-bezier(0, 0, 0.2, 1)`\n- `ease-ak-spring` \u2014 `cubic-bezier(0.34, 1.56, 0.64, 1)`\n- `ease-ak-bounce` \u2014 `cubic-bezier(0.25, 1, 0.5, 1)`\n\n## Heights\n`h-*` and `min-h-*` utilities (named, beyond the spacing scale).\n\n- `h-ak-nav` / `min-h-ak-nav` \u2014 `4.5rem`\n- `h-ak-touch` / `min-h-ak-touch` \u2014 `2.5rem`\n- `h-ak-control-sm` / `min-h-ak-control-sm` \u2014 `2rem`\n- `h-ak-control-md` / `min-h-ak-control-md` \u2014 `2.5rem`\n- `h-ak-control-lg` / `min-h-ak-control-lg` \u2014 `3rem`\n- `h-ak-control-xl` / `min-h-ak-control-xl` \u2014 `3.5rem`\n- `h-ak-control-2xl` / `min-h-ak-control-2xl` \u2014 `4rem`\n- `h-ak-row-compact` / `min-h-ak-row-compact` \u2014 `2.5rem`\n- `h-ak-row-default` / `min-h-ak-row-default` \u2014 `3rem`\n- `h-ak-row-comfortable` / `min-h-ak-row-comfortable` \u2014 `3.25rem`\n\n## Widths\n`w-*` and `min-w-*` utilities (named, beyond the spacing scale).\n\n- `w-ak-touch` \u2014 `2.5rem`\n- `w-ak-sidebar-collapsed` \u2014 `5rem`\n- `w-ak-sidebar-expanded` \u2014 `18rem`\n\n## Size (width + height shorthand)\n`size-*` utilities (sets width AND height \u2014 icons, avatars, status dots, badges).\n\n- `size-ak-sheet-handle-width` \u2014 `2.25rem`\n- `size-ak-sheet-handle-height` \u2014 `0.25rem`\n- `size-ak-icon-xs` \u2014 `0.75rem`\n- `size-ak-icon-sm` \u2014 `1rem`\n- `size-ak-icon-md` \u2014 `1.25rem`\n- `size-ak-icon-lg` \u2014 `1.5rem`\n- `size-ak-icon-xl` \u2014 `1.75rem`\n- `size-ak-icon-2xl` \u2014 `2rem`\n- `size-ak-icon-3xl` \u2014 `3rem`\n- `size-ak-panel-width` \u2014 `260px`\n- `size-ak-avatar-xs` \u2014 `1.5rem`\n- `size-ak-avatar-sm` \u2014 `2rem`\n- `size-ak-avatar-md` \u2014 `2.5rem`\n- `size-ak-avatar-lg` \u2014 `3rem`\n- `size-ak-avatar-xl` \u2014 `4rem`\n- `size-ak-avatar-2xl` \u2014 `6rem`\n- `size-ak-avatar-3xl` \u2014 `8rem`\n- `size-ak-status-md` \u2014 `12px`\n- `size-ak-status-lg` \u2014 `14px`\n- `size-ak-status-xl` \u2014 `20px`\n- `size-ak-status-2xl` \u2014 `28px`\n- `size-ak-status-3xl` \u2014 `36px`\n- `size-ak-badge-md` \u2014 `18px`\n- `size-ak-badge-lg` \u2014 `20px`\n- `size-ak-badge-xl` \u2014 `24px`\n- `size-ak-badge-2xl` \u2014 `32px`\n- `size-ak-badge-3xl` \u2014 `40px`\n- `size-ak-badge-border-md` \u2014 `2px`\n- `size-ak-badge-border-lg` \u2014 `2px`\n- `size-ak-badge-border-xl` \u2014 `3px`\n- `size-ak-badge-border-2xl` \u2014 `3.5px`\n- `size-ak-badge-border-3xl` \u2014 `4px`\n- `size-ak-icon-badge-md` \u2014 `22px`\n- `size-ak-icon-badge-lg` \u2014 `24px`\n- `size-ak-icon-badge-xl` \u2014 `28px`\n- `size-ak-icon-badge-2xl` \u2014 `34px`\n- `size-ak-icon-badge-3xl` \u2014 `40px`\n- `size-ak-control-sm` \u2014 `2rem`\n- `size-ak-control-md` \u2014 `2.5rem`\n- `size-ak-control-lg` \u2014 `3rem`\n- `size-ak-touch-min` \u2014 `3rem`\n\n---\n\n## Common Patterns\n```tsx\n// Card\n<div className=\"border border-ak-border rounded-ak-lg p-ak-3 bg-ak-surface\">\n\n// Primary button (48px min touch target)\n<button className=\"bg-ak-primary text-ak-on-primary px-ak-2_5 py-ak-1_25 min-h-ak-control-lg rounded-ak-lg font-ak-sans font-semibold cursor-pointer\">\n\n// Section with fluid vertical rhythm + max page width\n<section className=\"py-ak-fl-xl-3xl bg-ak-bg\">\n <div className=\"max-w-ak-page mx-auto px-ak-fl-page-margin\">\n\n// Icon (Phosphor only \u2014 never inline SVG)\nimport { House } from '@phosphor-icons/react'\n<House size={20} aria-hidden=\"true\" />\n```\n";
|
|
2
2
|
//# sourceMappingURL=tokens.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/data/tokens.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/data/tokens.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,iziBAibzB,CAAC"}
|
package/dist/data/tokens.js
CHANGED
|
@@ -1,78 +1,436 @@
|
|
|
1
|
+
// AUTO-GENERATED by packages/mcp/scripts/gen-tokens.cjs from
|
|
2
|
+
// src/sdk/astralkit/astralkit-theme.css — do not edit by hand.
|
|
3
|
+
// Re-run: node packages/mcp/scripts/gen-tokens.cjs
|
|
1
4
|
export const DESIGN_TOKENS = `# AstralKit Design Token Reference
|
|
2
5
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
- \`
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
- \`
|
|
21
|
-
- \`
|
|
22
|
-
- \`
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
- \`
|
|
26
|
-
- \`
|
|
27
|
-
- \`
|
|
28
|
-
- \`
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
- \`ak-
|
|
32
|
-
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
- \`ak-
|
|
36
|
-
- \`ak-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
- \`
|
|
40
|
-
- \`
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
- \`
|
|
44
|
-
- \`
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
- \`
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
- \`
|
|
51
|
-
- \`
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
- \`
|
|
55
|
-
- \`
|
|
56
|
-
- \`
|
|
6
|
+
**This is the complete, authoritative list of every \`ak-*\` design token.**
|
|
7
|
+
These are the ONLY valid AstralKit tokens. Do NOT invent or guess a token that
|
|
8
|
+
is not listed here — in Tailwind v4 an undefined utility (e.g. \`bg-ak-surface-muted\`)
|
|
9
|
+
**silently fails to compile** (no error, the element just renders unstyled).
|
|
10
|
+
|
|
11
|
+
Tailwind v3 vs v4: the token NAMES and VALUES are identical in both. v4 reads them
|
|
12
|
+
from \`astralkit/theme-v4\` (\`@theme\`) and auto-generates every utility. v3 reads
|
|
13
|
+
\`astralkit/theme\` (CSS vars) plus the \`astralkit/tailwind\` plugin, which registers
|
|
14
|
+
the same utilities. Either way the class names below are what you write.
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## Colors
|
|
19
|
+
Each color token works with every color utility: \`bg-*\`, \`text-*\`, \`border-*\`, \`ring-*\`, \`fill-*\`, \`stroke-*\`, \`from-*\`/\`to-*\`/\`via-*\`.
|
|
20
|
+
Example: token \`ak-surface\` → \`bg-ak-surface\`, \`text-ak-surface\`, \`border-ak-surface\`.
|
|
21
|
+
|
|
22
|
+
- \`ak-neutral-0\` — \`#ffffff\`
|
|
23
|
+
- \`ak-neutral-50\` — \`#fafafa\`
|
|
24
|
+
- \`ak-neutral-100\` — \`#f5f5f5\`
|
|
25
|
+
- \`ak-neutral-200\` — \`#e5e5e5\`
|
|
26
|
+
- \`ak-neutral-300\` — \`#d4d4d4\`
|
|
27
|
+
- \`ak-neutral-400\` — \`#a3a3a3\`
|
|
28
|
+
- \`ak-neutral-500\` — \`#737373\`
|
|
29
|
+
- \`ak-neutral-600\` — \`#525252\`
|
|
30
|
+
- \`ak-neutral-700\` — \`#404040\`
|
|
31
|
+
- \`ak-neutral-800\` — \`#262626\`
|
|
32
|
+
- \`ak-neutral-900\` — \`#171717\`
|
|
33
|
+
- \`ak-neutral-950\` — \`#0a0a0a\`
|
|
34
|
+
- \`ak-primary-50\` — \`#f5f5f5\`
|
|
35
|
+
- \`ak-primary-100\` — \`#e5e5e5\`
|
|
36
|
+
- \`ak-primary-200\` — \`#cccccc\`
|
|
37
|
+
- \`ak-primary-300\` — \`#a3a3a3\`
|
|
38
|
+
- \`ak-primary-400\` — \`#737373\`
|
|
39
|
+
- \`ak-primary-500\` — \`#525252\`
|
|
40
|
+
- \`ak-primary-600\` — \`#404040\`
|
|
41
|
+
- \`ak-primary-700\` — \`#333333\`
|
|
42
|
+
- \`ak-primary-800\` — \`#1a1a1a\`
|
|
43
|
+
- \`ak-primary-900\` — \`#000000\`
|
|
44
|
+
- \`ak-primary-950\` — \`#000000\`
|
|
45
|
+
- \`ak-primary\` — \`#000000\`
|
|
46
|
+
- \`ak-primary-hover\` — \`#1a1a1a\`
|
|
47
|
+
- \`ak-primary-active\` — \`#333333\`
|
|
48
|
+
- \`ak-bg\` — \`#ffffff\`
|
|
49
|
+
- \`ak-surface\` — \`#fafafa\`
|
|
50
|
+
- \`ak-surface-2\` — \`#f5f5f5\`
|
|
51
|
+
- \`ak-hover\` — \`#f7f7f7\`
|
|
52
|
+
- \`ak-active\` — \`#f0f0f0\`
|
|
53
|
+
- \`ak-elevated\` — \`#ffffff\`
|
|
54
|
+
- \`ak-surface-raised\` — \`#ffffff\`
|
|
55
|
+
- \`ak-surface-raised-soft\` — \`rgba(255, 255, 255, 0.78)\`
|
|
56
|
+
- \`ak-surface-glass\` — \`rgba(255, 255, 255, 0.72)\`
|
|
57
|
+
- \`ak-surface-glass-strong\` — \`rgba(255, 255, 255, 0.84)\`
|
|
58
|
+
- \`ak-highlight-soft\` — \`rgba(255, 255, 255, 0.45)\`
|
|
59
|
+
- \`ak-highlight-strong\` — \`rgba(255, 255, 255, 0.72)\`
|
|
60
|
+
- \`ak-skeleton-base\` — \`#ededed\`
|
|
61
|
+
- \`ak-skeleton-shine\` — \`rgba(255, 255, 255, 0.72)\`
|
|
62
|
+
- \`ak-overlay\` — \`rgba(0, 0, 0, 0.5)\`
|
|
63
|
+
- \`ak-on-primary\` — \`#ffffff\`
|
|
64
|
+
- \`ak-primary-subtle\` — \`#f5f5f5\`
|
|
65
|
+
- \`ak-primary-subtle-hover\` — \`#e5e5e5\`
|
|
66
|
+
- \`ak-text\` — \`#171717\`
|
|
67
|
+
- \`ak-text-emphasis\` — \`#2b2b2b\`
|
|
68
|
+
- \`ak-text-secondary\` — \`#525252\`
|
|
69
|
+
- \`ak-text-muted\` — \`#a3a3a3\`
|
|
70
|
+
- \`ak-text-disabled\` — \`#d4d4d4\`
|
|
71
|
+
- \`ak-text-inverse\` — \`#ffffff\`
|
|
72
|
+
- \`ak-text-link\` — \`#000000\`
|
|
73
|
+
- \`ak-text-placeholder\` — \`#525252\`
|
|
74
|
+
- \`ak-border\` — \`#dee2e6\`
|
|
75
|
+
- \`ak-border-subtle\` — \`#e5e5e5\`
|
|
76
|
+
- \`ak-border-strong\` — \`#525252\`
|
|
77
|
+
- \`ak-border-focus\` — \`#000000\`
|
|
78
|
+
- \`ak-success\` — \`#16a34a\`
|
|
79
|
+
- \`ak-success-subtle\` — \`#f0fdf4\`
|
|
80
|
+
- \`ak-success-text\` — \`#15803d\`
|
|
81
|
+
- \`ak-warning\` — \`#d97706\`
|
|
82
|
+
- \`ak-warning-subtle\` — \`#fffbeb\`
|
|
83
|
+
- \`ak-warning-text\` — \`#b45309\`
|
|
84
|
+
- \`ak-danger\` — \`#dc2626\`
|
|
85
|
+
- \`ak-danger-subtle\` — \`#fef2f2\`
|
|
86
|
+
- \`ak-danger-text\` — \`#b91c1c\`
|
|
87
|
+
- \`ak-info\` — \`#2563eb\`
|
|
88
|
+
- \`ak-info-subtle\` — \`#eff6ff\`
|
|
89
|
+
- \`ak-pink\` — \`#db2777\`
|
|
90
|
+
- \`ak-pink-subtle\` — \`#fdf2f8\`
|
|
91
|
+
- \`ak-info-text\` — \`#1d4ed8\`
|
|
92
|
+
- \`ak-sheet-handle\` — \`#d4d4d4\`
|
|
93
|
+
- \`ak-brutal-ink\` — \`#000000\`
|
|
94
|
+
- \`ak-brutal-face\` — \`#ffffff\`
|
|
95
|
+
- \`ak-brutal-face-dark\` — \`#262626\`
|
|
96
|
+
- \`ak-brutal-on-face\` — \`#000000\`
|
|
97
|
+
- \`ak-brutal-on-face-dark\` — \`#ffffff\`
|
|
98
|
+
- \`ak-chart-1\` — \`#4e79a7\`
|
|
99
|
+
- \`ak-chart-2\` — \`#f28e2c\`
|
|
100
|
+
- \`ak-chart-3\` — \`#e15759\`
|
|
101
|
+
- \`ak-chart-4\` — \`#76b7b2\`
|
|
102
|
+
- \`ak-chart-5\` — \`#59a14f\`
|
|
103
|
+
- \`ak-chart-6\` — \`#edc949\`
|
|
57
104
|
|
|
58
105
|
## Fonts
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
- \`font-ak-
|
|
106
|
+
\`font-*\` utilities.
|
|
107
|
+
|
|
108
|
+
- \`font-ak-sans\` — 'Inter', system-ui, -apple-system, sans-serif
|
|
109
|
+
- \`font-ak-serif\` — 'DM Serif Display', Georgia, serif
|
|
110
|
+
- \`font-ak-mono\` — 'JetBrains Mono', 'Fira Code', ui-monospace, monospace
|
|
111
|
+
|
|
112
|
+
## Font Size (text scale)
|
|
113
|
+
\`text-*\` utilities. Includes static, \`_5\` half-steps, fluid (\`fl-*\`), display, watermark, avatar, and badge sizes.
|
|
114
|
+
|
|
115
|
+
- \`text-ak-2xs\` — \`0.6875rem\`
|
|
116
|
+
- \`text-ak-xs\` — \`0.75rem\`
|
|
117
|
+
- \`text-ak-xs_5\` — \`0.8125rem\`
|
|
118
|
+
- \`text-ak-sm\` — \`0.875rem\`
|
|
119
|
+
- \`text-ak-sm_5\` — \`0.9375rem\`
|
|
120
|
+
- \`text-ak-base\` — \`1rem\`
|
|
121
|
+
- \`text-ak-lg\` — \`1.125rem\`
|
|
122
|
+
- \`text-ak-xl\` — \`1.25rem\`
|
|
123
|
+
- \`text-ak-xl_5\` — \`1.375rem\`
|
|
124
|
+
- \`text-ak-2xl\` — \`1.5rem\`
|
|
125
|
+
- \`text-ak-2xl_5\` — \`1.625rem\`
|
|
126
|
+
- \`text-ak-3xl\` — \`2rem\`
|
|
127
|
+
- \`text-ak-4xl\` — \`2.5rem\`
|
|
128
|
+
- \`text-ak-4xl_5\` — \`2.75rem\`
|
|
129
|
+
- \`text-ak-5xl\` — \`3rem\`
|
|
130
|
+
- \`text-ak-6xl\` — \`3.75rem\`
|
|
131
|
+
- \`text-ak-6xl_5\` — \`4rem\`
|
|
132
|
+
- \`text-ak-7xl\` — \`4.5rem\`
|
|
133
|
+
- \`text-ak-7xl_5\` — \`5.25rem\`
|
|
134
|
+
- \`text-ak-8xl\` — \`6rem\`
|
|
135
|
+
- \`text-ak-9xl\` — \`7rem\`
|
|
136
|
+
- \`text-ak-10xl\` — \`8rem\`
|
|
137
|
+
- \`text-ak-fl-xs\` — \`clamp(0.6875rem, 0.67rem + 0.06vw, 0.75rem)\`
|
|
138
|
+
- \`text-ak-fl-sm\` — \`clamp(0.75rem, 0.71rem + 0.12vw, 0.875rem)\`
|
|
139
|
+
- \`text-ak-fl-base\` — \`clamp(0.875rem, 0.84rem + 0.12vw, 1rem)\`
|
|
140
|
+
- \`text-ak-fl-lg\` — \`clamp(1rem, 0.96rem + 0.12vw, 1.125rem)\`
|
|
141
|
+
- \`text-ak-fl-xl\` — \`clamp(1.125rem, 1.09rem + 0.12vw, 1.25rem)\`
|
|
142
|
+
- \`text-ak-fl-2xl\` — \`clamp(1.25rem, 1.18rem + 0.23vw, 1.5rem)\`
|
|
143
|
+
- \`text-ak-fl-3xl\` — \`clamp(1.5rem, 1.39rem + 0.35vw, 1.875rem)\`
|
|
144
|
+
- \`text-ak-fl-4xl\` — \`clamp(1.875rem, 1.76rem + 0.35vw, 2.25rem)\`
|
|
145
|
+
- \`text-ak-fl-5xl\` — \`clamp(2.25rem, 2.03rem + 0.69vw, 3rem)\`
|
|
146
|
+
- \`text-ak-fl-6xl\` — \`clamp(3rem, 2.78rem + 0.69vw, 3.75rem)\`
|
|
147
|
+
- \`text-ak-fl-7xl\` — \`clamp(3.5rem, 3.2rem + 0.93vw, 4.5rem)\`
|
|
148
|
+
- \`text-ak-fl-8xl\` — \`clamp(4.5rem, 4.06rem + 1.39vw, 6rem)\`
|
|
149
|
+
- \`text-ak-fl-9xl\` — \`clamp(5.25rem, 4.73rem + 1.62vw, 7rem)\`
|
|
150
|
+
- \`text-ak-display-xs\` — \`clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem)\`
|
|
151
|
+
- \`text-ak-display-sm\` — \`clamp(0.875rem, 0.83rem + 0.19vw, 1rem)\`
|
|
152
|
+
- \`text-ak-display-base\` — \`clamp(1rem, 0.94rem + 0.28vw, 1.1875rem)\`
|
|
153
|
+
- \`text-ak-display-lg\` — \`clamp(1.125rem, 1.01rem + 0.52vw, 1.5rem)\`
|
|
154
|
+
- \`text-ak-display-xl\` — \`clamp(1.25rem, 1.07rem + 0.83vw, 1.875rem)\`
|
|
155
|
+
- \`text-ak-display-2xl\` — \`clamp(1.5rem, 1.2rem + 1.11vw, 2.25rem)\`
|
|
156
|
+
- \`text-ak-display-3xl\` — \`clamp(1.875rem, 1.42rem + 1.67vw, 3rem)\`
|
|
157
|
+
- \`text-ak-display-4xl\` — \`clamp(2.25rem, 1.58rem + 2.5vw, 3.75rem)\`
|
|
158
|
+
- \`text-ak-display-5xl\` — \`clamp(3rem, 2.07rem + 3.47vw, 5.25rem)\`
|
|
159
|
+
- \`text-ak-display-6xl\` — \`clamp(3.75rem, 2.5rem + 4.63vw, 7rem)\`
|
|
160
|
+
- \`text-ak-display-7xl\` — \`clamp(4.5rem, 3.06rem + 5.56vw, 8rem)\`
|
|
161
|
+
- \`text-ak-display-8xl\` — \`clamp(5rem, 3.06rem + 6.94vw, 9rem)\`
|
|
162
|
+
- \`text-ak-display-9xl\` — \`clamp(5.5rem, 3.06rem + 7.64vw, 10rem)\`
|
|
163
|
+
- \`text-ak-watermark-2xs\` — \`clamp(1rem, 13cqi, 13rem)\`
|
|
164
|
+
- \`text-ak-watermark-xs\` — \`clamp(1rem, 16cqi, 16rem)\`
|
|
165
|
+
- \`text-ak-watermark-sm\` — \`clamp(1rem, 19cqi, 20rem)\`
|
|
166
|
+
- \`text-ak-watermark-base\` — \`clamp(1rem, 21cqi, 22rem)\`
|
|
167
|
+
- \`text-ak-watermark-md\` — \`clamp(1rem, 24cqi, 26rem)\`
|
|
168
|
+
- \`text-ak-watermark-lg\` — \`clamp(1rem, 26cqi, 28rem)\`
|
|
169
|
+
- \`text-ak-watermark-xl\` — \`clamp(1rem, 28cqi, 30rem)\`
|
|
170
|
+
- \`text-ak-watermark-2xl\` — \`clamp(1rem, 30cqi, 34rem)\`
|
|
171
|
+
- \`text-ak-watermark-3xl\` — \`clamp(1rem, 33cqi, 38rem)\`
|
|
172
|
+
- \`text-ak-watermark-4xl\` — \`clamp(1rem, 36cqi, 42rem)\`
|
|
173
|
+
- \`text-ak-watermark-5xl\` — \`clamp(1rem, 40cqi, 48rem)\`
|
|
174
|
+
- \`text-ak-avatar-xs\` — \`0.625rem\`
|
|
175
|
+
- \`text-ak-avatar-sm\` — \`0.6875rem\`
|
|
176
|
+
- \`text-ak-avatar-md\` — \`0.8125rem\`
|
|
177
|
+
- \`text-ak-avatar-lg\` — \`1rem\`
|
|
178
|
+
- \`text-ak-avatar-xl\` — \`1.25rem\`
|
|
179
|
+
- \`text-ak-avatar-2xl\` — \`1.75rem\`
|
|
180
|
+
- \`text-ak-avatar-3xl\` — \`2.25rem\`
|
|
181
|
+
- \`text-ak-badge-md\` — \`0.625rem\`
|
|
182
|
+
- \`text-ak-badge-lg\` — \`0.6875rem\`
|
|
183
|
+
- \`text-ak-badge-xl\` — \`0.8125rem\`
|
|
184
|
+
- \`text-ak-badge-2xl\` — \`0.9375rem\`
|
|
185
|
+
- \`text-ak-badge-3xl\` — \`1.125rem\`
|
|
186
|
+
|
|
187
|
+
## Line Height
|
|
188
|
+
\`leading-*\` utilities.
|
|
189
|
+
|
|
190
|
+
- \`leading-ak-display\` — \`0.85\`
|
|
191
|
+
- \`leading-ak-squeezed\` — \`0.92\`
|
|
192
|
+
- \`leading-ak-condensed\` — \`0.95\`
|
|
193
|
+
- \`leading-ak-none\` — \`1\`
|
|
194
|
+
- \`leading-ak-fitted\` — \`1.02\`
|
|
195
|
+
- \`leading-ak-compact\` — \`1.05\`
|
|
196
|
+
- \`leading-ak-tighter\` — \`1.1\`
|
|
197
|
+
- \`leading-ak-snugger\` — \`1.2\`
|
|
198
|
+
- \`leading-ak-tight\` — \`1.25\`
|
|
199
|
+
- \`leading-ak-snug\` — \`1.375\`
|
|
200
|
+
- \`leading-ak-normal\` — \`1.5\`
|
|
201
|
+
- \`leading-ak-relaxed\` — \`1.625\`
|
|
202
|
+
- \`leading-ak-prose\` — \`1.75\`
|
|
203
|
+
- \`leading-ak-loose\` — \`2\`
|
|
204
|
+
|
|
205
|
+
## Letter Spacing
|
|
206
|
+
\`tracking-*\` utilities.
|
|
207
|
+
|
|
208
|
+
- \`tracking-ak-tighter\` — \`-0.05em\`
|
|
209
|
+
- \`tracking-ak-tight\` — \`-0.025em\`
|
|
210
|
+
- \`tracking-ak-subtle\` — \`-0.01em\`
|
|
211
|
+
- \`tracking-ak-normal\` — \`0em\`
|
|
212
|
+
- \`tracking-ak-wide\` — \`0.025em\`
|
|
213
|
+
- \`tracking-ak-section\` — \`0.08em\`
|
|
214
|
+
- \`tracking-ak-wider\` — \`0.05em\`
|
|
215
|
+
- \`tracking-ak-widest\` — \`0.1em\`
|
|
216
|
+
|
|
217
|
+
## Spacing
|
|
218
|
+
Feeds every spacing utility: \`p-* px-* py-* pt/pr/pb/pl-* m-* mx-* my-* gap-* gap-x/y-* space-x/y-* w-* h-* min-w-* min-h-* max-w-* inset-* top/right/bottom/left-*\`.
|
|
219
|
+
Example: token \`ak-3\` → \`p-ak-3\`, \`gap-ak-3\`, \`mt-ak-3\`.
|
|
220
|
+
|
|
221
|
+
- \`ak-0\` — \`0rem\`
|
|
222
|
+
- \`ak-px\` — \`0.0625rem\`
|
|
223
|
+
- \`ak-0_5\` — \`0.25rem\`
|
|
224
|
+
- \`ak-0_75\` — \`0.375rem\`
|
|
225
|
+
- \`ak-1\` — \`0.5rem\`
|
|
226
|
+
- \`ak-1_25\` — \`0.625rem\`
|
|
227
|
+
- \`ak-1_5\` — \`0.75rem\`
|
|
228
|
+
- \`ak-2\` — \`1rem\`
|
|
229
|
+
- \`ak-2_5\` — \`1.25rem\`
|
|
230
|
+
- \`ak-3\` — \`1.5rem\`
|
|
231
|
+
- \`ak-3_5\` — \`1.75rem\`
|
|
232
|
+
- \`ak-4\` — \`2rem\`
|
|
233
|
+
- \`ak-4_5\` — \`2.25rem\`
|
|
234
|
+
- \`ak-5\` — \`2.5rem\`
|
|
235
|
+
- \`ak-5_5\` — \`2.75rem\`
|
|
236
|
+
- \`ak-6\` — \`3rem\`
|
|
237
|
+
- \`ak-7\` — \`3.5rem\`
|
|
238
|
+
- \`ak-8\` — \`4rem\`
|
|
239
|
+
- \`ak-9\` — \`4.5rem\`
|
|
240
|
+
- \`ak-10\` — \`5rem\`
|
|
241
|
+
- \`ak-11\` — \`5.5rem\`
|
|
242
|
+
- \`ak-12\` — \`6rem\`
|
|
243
|
+
- \`ak-14\` — \`7rem\`
|
|
244
|
+
- \`ak-16\` — \`8rem\`
|
|
245
|
+
- \`ak-20\` — \`10rem\`
|
|
246
|
+
- \`ak-24\` — \`12rem\`
|
|
247
|
+
- \`ak-mobile-bar\` — \`4.5rem\`
|
|
248
|
+
- \`ak-fl-page-margin\` — \`clamp(1rem, 0.26rem + 3.7vw, 5rem)\`
|
|
249
|
+
- \`ak-fl-3xs\` — \`clamp(0.25rem, 0.21rem + 0.14vw, 0.375rem)\`
|
|
250
|
+
- \`ak-fl-2xs\` — \`clamp(0.5rem, 0.43rem + 0.28vw, 0.75rem)\`
|
|
251
|
+
- \`ak-fl-xs\` — \`clamp(0.75rem, 0.65rem + 0.42vw, 1rem)\`
|
|
252
|
+
- \`ak-fl-sm\` — \`clamp(1rem, 0.86rem + 0.56vw, 1.5rem)\`
|
|
253
|
+
- \`ak-fl-md\` — \`clamp(1.5rem, 1.29rem + 0.83vw, 2rem)\`
|
|
254
|
+
- \`ak-fl-lg\` — \`clamp(2rem, 1.72rem + 1.11vw, 3rem)\`
|
|
255
|
+
- \`ak-fl-xl\` — \`clamp(3rem, 2.5rem + 1.85vw, 4.5rem)\`
|
|
256
|
+
- \`ak-fl-2xl\` — \`clamp(4rem, 3.22rem + 2.78vw, 6rem)\`
|
|
257
|
+
- \`ak-fl-3xl\` — \`clamp(6rem, 4.86rem + 4.17vw, 9rem)\`
|
|
258
|
+
- \`ak-fl-xs-md\` — \`clamp(0.75rem, 0.43rem + 1.39vw, 2rem)\`
|
|
259
|
+
- \`ak-fl-xs-lg\` — \`clamp(0.75rem, 0.14rem + 2.78vw, 3rem)\`
|
|
260
|
+
- \`ak-fl-sm-lg\` — \`clamp(1rem, 0.43rem + 2.78vw, 3rem)\`
|
|
261
|
+
- \`ak-fl-sm-xl\` — \`clamp(1rem, 0rem + 4.17vw, 4.5rem)\`
|
|
262
|
+
- \`ak-fl-md-xl\` — \`clamp(1.5rem, 0.57rem + 3.47vw, 4.5rem)\`
|
|
263
|
+
- \`ak-fl-md-2xl\` — \`clamp(1.5rem, 0rem + 5.56vw, 6rem)\`
|
|
264
|
+
- \`ak-fl-lg-2xl\` — \`clamp(2rem, 0.57rem + 5.56vw, 6rem)\`
|
|
265
|
+
- \`ak-fl-xl-3xl\` — \`clamp(3rem, 0.57rem + 8.33vw, 9rem)\`
|
|
266
|
+
|
|
267
|
+
## Border Radius
|
|
268
|
+
\`rounded-*\` utilities.
|
|
269
|
+
|
|
270
|
+
- \`rounded-ak-xs\` — \`0.125rem\`
|
|
271
|
+
- \`rounded-ak-none\` — \`0\`
|
|
272
|
+
- \`rounded-ak-sm\` — \`0.25rem\`
|
|
273
|
+
- \`rounded-ak-md\` — \`0.5rem\`
|
|
274
|
+
- \`rounded-ak-lg\` — \`0.75rem\`
|
|
275
|
+
- \`rounded-ak-xl\` — \`1rem\`
|
|
276
|
+
- \`rounded-ak-2xl\` — \`1.5rem\`
|
|
277
|
+
- \`rounded-ak-3xl\` — \`2rem\`
|
|
278
|
+
- \`rounded-ak-full\` — \`9999px\`
|
|
279
|
+
- \`rounded-ak-brutal\` — \`0.5rem\`
|
|
280
|
+
- \`rounded-ak-brutal-sm\` — \`0.25rem\`
|
|
281
|
+
- \`rounded-ak-input\` — \`0.625rem\`
|
|
282
|
+
|
|
283
|
+
## Border Width
|
|
284
|
+
\`border-*\` utilities (width).
|
|
285
|
+
|
|
286
|
+
- \`border-ak-brutal\` — \`2px\`
|
|
287
|
+
- \`border-ak-brutal-lg\` — \`3px\`
|
|
288
|
+
|
|
289
|
+
## Box Shadow
|
|
290
|
+
\`shadow-*\` utilities (includes focus rings and neobrutalist shadows).
|
|
291
|
+
|
|
292
|
+
- \`shadow-ak-xs\` — \`0 1px 2px rgba(0,0,0,0.04)\`
|
|
293
|
+
- \`shadow-ak-sm\` — \`0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)\`
|
|
294
|
+
- \`shadow-ak-md\` — \`0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04)\`
|
|
295
|
+
- \`shadow-ak-lg\` — \`0 8px 30px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)\`
|
|
296
|
+
- \`shadow-ak-xl\` — \`0 16px 50px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05)\`
|
|
297
|
+
- \`shadow-ak-2xl\` — \`0 24px 60px rgba(0,0,0,0.14)\`
|
|
298
|
+
- \`shadow-ak-brutal-xs\` — \`2px 2px 0 0 var(--color-ak-brutal-ink)\`
|
|
299
|
+
- \`shadow-ak-brutal-sm\` — \`3px 3px 0 0 var(--color-ak-brutal-ink)\`
|
|
300
|
+
- \`shadow-ak-brutal\` — \`4px 4px 0 0 var(--color-ak-brutal-ink)\`
|
|
301
|
+
- \`shadow-ak-brutal-lg\` — \`6px 6px 0 0 var(--color-ak-brutal-ink)\`
|
|
302
|
+
- \`shadow-ak-brutal-xl\` — \`8px 8px 0 0 var(--color-ak-brutal-ink)\`
|
|
303
|
+
- \`shadow-ak-focus\` — \`0 0 0 3px rgba(0, 0, 0, 0.08)\`
|
|
304
|
+
- \`shadow-ak-focus-primary\` — \`0 0 0 3px rgba(0, 0, 0, 0.15)\`
|
|
305
|
+
- \`shadow-ak-focus-danger\` — \`0 0 0 3px rgba(220, 38, 38, 0.08)\`
|
|
306
|
+
- \`shadow-ak-focus-success\` — \`0 0 0 3px rgba(22, 163, 74, 0.08)\`
|
|
307
|
+
|
|
308
|
+
## Max Width (containers)
|
|
309
|
+
\`max-w-*\` utilities.
|
|
310
|
+
|
|
311
|
+
- \`max-w-ak-page\` — \`80rem\`
|
|
312
|
+
- \`max-w-ak-xs\` — \`20rem\`
|
|
313
|
+
- \`max-w-ak-sm\` — \`24rem\`
|
|
314
|
+
- \`max-w-ak-md\` — \`28rem\`
|
|
315
|
+
- \`max-w-ak-lg\` — \`32rem\`
|
|
316
|
+
- \`max-w-ak-xl\` — \`36rem\`
|
|
317
|
+
- \`max-w-ak-2xl\` — \`42rem\`
|
|
318
|
+
- \`max-w-ak-3xl\` — \`48rem\`
|
|
319
|
+
- \`max-w-ak-4xl\` — \`56rem\`
|
|
320
|
+
- \`max-w-ak-prose\` — \`65ch\`
|
|
321
|
+
|
|
322
|
+
## Z-Index
|
|
323
|
+
\`z-*\` utilities.
|
|
324
|
+
|
|
325
|
+
- \`z-ak-base\` — \`0\`
|
|
326
|
+
- \`z-ak-docked\` — \`10\`
|
|
327
|
+
- \`z-ak-dropdown\` — \`1000\`
|
|
328
|
+
- \`z-ak-sticky\` — \`1100\`
|
|
329
|
+
- \`z-ak-banner\` — \`1200\`
|
|
330
|
+
- \`z-ak-overlay\` — \`1300\`
|
|
331
|
+
- \`z-ak-modal\` — \`1400\`
|
|
332
|
+
- \`z-ak-popover\` — \`1500\`
|
|
333
|
+
- \`z-ak-toast\` — \`1700\`
|
|
334
|
+
- \`z-ak-tooltip\` — \`1800\`
|
|
335
|
+
|
|
336
|
+
## Transition Duration
|
|
337
|
+
\`duration-*\` utilities.
|
|
338
|
+
|
|
339
|
+
- \`duration-ak-fast\` — \`110ms\`
|
|
340
|
+
- \`duration-ak-base\` — \`150ms\`
|
|
341
|
+
- \`duration-ak-slow\` — \`240ms\`
|
|
342
|
+
- \`duration-ak-skeleton\` — \`1800ms\`
|
|
343
|
+
|
|
344
|
+
## Transition Timing (easing)
|
|
345
|
+
\`ease-*\` utilities.
|
|
346
|
+
|
|
347
|
+
- \`ease-ak-default\` — \`cubic-bezier(0.4, 0, 0.2, 1)\`
|
|
348
|
+
- \`ease-ak-in\` — \`cubic-bezier(0.4, 0, 1, 1)\`
|
|
349
|
+
- \`ease-ak-out\` — \`cubic-bezier(0, 0, 0.2, 1)\`
|
|
350
|
+
- \`ease-ak-spring\` — \`cubic-bezier(0.34, 1.56, 0.64, 1)\`
|
|
351
|
+
- \`ease-ak-bounce\` — \`cubic-bezier(0.25, 1, 0.5, 1)\`
|
|
352
|
+
|
|
353
|
+
## Heights
|
|
354
|
+
\`h-*\` and \`min-h-*\` utilities (named, beyond the spacing scale).
|
|
355
|
+
|
|
356
|
+
- \`h-ak-nav\` / \`min-h-ak-nav\` — \`4.5rem\`
|
|
357
|
+
- \`h-ak-touch\` / \`min-h-ak-touch\` — \`2.5rem\`
|
|
358
|
+
- \`h-ak-control-sm\` / \`min-h-ak-control-sm\` — \`2rem\`
|
|
359
|
+
- \`h-ak-control-md\` / \`min-h-ak-control-md\` — \`2.5rem\`
|
|
360
|
+
- \`h-ak-control-lg\` / \`min-h-ak-control-lg\` — \`3rem\`
|
|
361
|
+
- \`h-ak-control-xl\` / \`min-h-ak-control-xl\` — \`3.5rem\`
|
|
362
|
+
- \`h-ak-control-2xl\` / \`min-h-ak-control-2xl\` — \`4rem\`
|
|
363
|
+
- \`h-ak-row-compact\` / \`min-h-ak-row-compact\` — \`2.5rem\`
|
|
364
|
+
- \`h-ak-row-default\` / \`min-h-ak-row-default\` — \`3rem\`
|
|
365
|
+
- \`h-ak-row-comfortable\` / \`min-h-ak-row-comfortable\` — \`3.25rem\`
|
|
366
|
+
|
|
367
|
+
## Widths
|
|
368
|
+
\`w-*\` and \`min-w-*\` utilities (named, beyond the spacing scale).
|
|
369
|
+
|
|
370
|
+
- \`w-ak-touch\` — \`2.5rem\`
|
|
371
|
+
- \`w-ak-sidebar-collapsed\` — \`5rem\`
|
|
372
|
+
- \`w-ak-sidebar-expanded\` — \`18rem\`
|
|
373
|
+
|
|
374
|
+
## Size (width + height shorthand)
|
|
375
|
+
\`size-*\` utilities (sets width AND height — icons, avatars, status dots, badges).
|
|
376
|
+
|
|
377
|
+
- \`size-ak-sheet-handle-width\` — \`2.25rem\`
|
|
378
|
+
- \`size-ak-sheet-handle-height\` — \`0.25rem\`
|
|
379
|
+
- \`size-ak-icon-xs\` — \`0.75rem\`
|
|
380
|
+
- \`size-ak-icon-sm\` — \`1rem\`
|
|
381
|
+
- \`size-ak-icon-md\` — \`1.25rem\`
|
|
382
|
+
- \`size-ak-icon-lg\` — \`1.5rem\`
|
|
383
|
+
- \`size-ak-icon-xl\` — \`1.75rem\`
|
|
384
|
+
- \`size-ak-icon-2xl\` — \`2rem\`
|
|
385
|
+
- \`size-ak-icon-3xl\` — \`3rem\`
|
|
386
|
+
- \`size-ak-panel-width\` — \`260px\`
|
|
387
|
+
- \`size-ak-avatar-xs\` — \`1.5rem\`
|
|
388
|
+
- \`size-ak-avatar-sm\` — \`2rem\`
|
|
389
|
+
- \`size-ak-avatar-md\` — \`2.5rem\`
|
|
390
|
+
- \`size-ak-avatar-lg\` — \`3rem\`
|
|
391
|
+
- \`size-ak-avatar-xl\` — \`4rem\`
|
|
392
|
+
- \`size-ak-avatar-2xl\` — \`6rem\`
|
|
393
|
+
- \`size-ak-avatar-3xl\` — \`8rem\`
|
|
394
|
+
- \`size-ak-status-md\` — \`12px\`
|
|
395
|
+
- \`size-ak-status-lg\` — \`14px\`
|
|
396
|
+
- \`size-ak-status-xl\` — \`20px\`
|
|
397
|
+
- \`size-ak-status-2xl\` — \`28px\`
|
|
398
|
+
- \`size-ak-status-3xl\` — \`36px\`
|
|
399
|
+
- \`size-ak-badge-md\` — \`18px\`
|
|
400
|
+
- \`size-ak-badge-lg\` — \`20px\`
|
|
401
|
+
- \`size-ak-badge-xl\` — \`24px\`
|
|
402
|
+
- \`size-ak-badge-2xl\` — \`32px\`
|
|
403
|
+
- \`size-ak-badge-3xl\` — \`40px\`
|
|
404
|
+
- \`size-ak-badge-border-md\` — \`2px\`
|
|
405
|
+
- \`size-ak-badge-border-lg\` — \`2px\`
|
|
406
|
+
- \`size-ak-badge-border-xl\` — \`3px\`
|
|
407
|
+
- \`size-ak-badge-border-2xl\` — \`3.5px\`
|
|
408
|
+
- \`size-ak-badge-border-3xl\` — \`4px\`
|
|
409
|
+
- \`size-ak-icon-badge-md\` — \`22px\`
|
|
410
|
+
- \`size-ak-icon-badge-lg\` — \`24px\`
|
|
411
|
+
- \`size-ak-icon-badge-xl\` — \`28px\`
|
|
412
|
+
- \`size-ak-icon-badge-2xl\` — \`34px\`
|
|
413
|
+
- \`size-ak-icon-badge-3xl\` — \`40px\`
|
|
414
|
+
- \`size-ak-control-sm\` — \`2rem\`
|
|
415
|
+
- \`size-ak-control-md\` — \`2.5rem\`
|
|
416
|
+
- \`size-ak-control-lg\` — \`3rem\`
|
|
417
|
+
- \`size-ak-touch-min\` — \`3rem\`
|
|
418
|
+
|
|
419
|
+
---
|
|
62
420
|
|
|
63
421
|
## Common Patterns
|
|
64
422
|
\`\`\`tsx
|
|
65
423
|
// Card
|
|
66
424
|
<div className="border border-ak-border rounded-ak-lg p-ak-3 bg-ak-surface">
|
|
67
425
|
|
|
68
|
-
// Primary button
|
|
69
|
-
<button className="bg-ak-primary text-ak-on-primary px-ak-2_5 py-ak-1_25 min-h-
|
|
426
|
+
// Primary button (48px min touch target)
|
|
427
|
+
<button className="bg-ak-primary text-ak-on-primary px-ak-2_5 py-ak-1_25 min-h-ak-control-lg rounded-ak-lg font-ak-sans font-semibold cursor-pointer">
|
|
70
428
|
|
|
71
|
-
// Section
|
|
429
|
+
// Section with fluid vertical rhythm + max page width
|
|
72
430
|
<section className="py-ak-fl-xl-3xl bg-ak-bg">
|
|
73
|
-
<div className="max-w-ak-page mx-auto px-ak-
|
|
431
|
+
<div className="max-w-ak-page mx-auto px-ak-fl-page-margin">
|
|
74
432
|
|
|
75
|
-
// Icon
|
|
433
|
+
// Icon (Phosphor only — never inline SVG)
|
|
76
434
|
import { House } from '@phosphor-icons/react'
|
|
77
435
|
<House size={20} aria-hidden="true" />
|
|
78
436
|
\`\`\`
|
package/dist/data/tokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/data/tokens.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG
|
|
1
|
+
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/data/tokens.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,+DAA+D;AAC/D,mDAAmD;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAib5B,CAAC"}
|