astralkit 0.8.0 → 0.9.0

package/lib/presets/theme-palettes.js

@@ -45,17 +45,21 @@ export const THEME_PALETTES = [
         description: 'The default AstralKit violet theme',
         mode: 'light',
         colors: {
-            background: '#FAF9F7',
-            surface: '#FFFFFF',
+            /* Neutrals ride the cal-neutral base family (white cards on the
+               tinted canvas, near-white panels) — the palette's voice is the
+               violet accent, not a competing warm neutral set. Re-based
+               2026-08-24 when the default theme moved to cal-neutral. */
+            background: '#FFFFFF',
+            surface: '#F6F8FB',
             foreground: '#150A35',
             foregroundMuted: '#544D6B',
             primary: '#6933FF',
             secondary: '#7C3AED',
             accent: '#3523BD',
             onAccent: '#FFFFFF',
-            border: '#E6E3EE',
+            border: '#E5E7EB',
             ring: '#A585FF',
-            muted: '#F4F2F9',
+            muted: '#F9FAFB',
             destructive: '#DC2626',
             brandGradient: {
                 from: '#A585FF',
@@ -73,12 +77,13 @@ export const THEME_PALETTES = [
         description: 'Teal primary with coral-red highlights — Happy Hues #8',
         mode: 'light',
         colors: {
-            background: '#F8F5F2',
-            surface: '#FFFFFF',
+            background: '#FFFFFF',
+            surface: '#F8F5F2',
             foreground: '#232323',
             foregroundMuted: '#222525',
             primary: '#078080',
-            secondary: '#F45D48',
+            onPrimary: '#FFFFFF',
+            secondary: '#D8260D',
             accent: '#F45D48',
             border: '#E8E2DB',
             ring: '#078080',
@@ -92,10 +97,10 @@ export const THEME_PALETTES = [
         description: 'Professional gray with blue accent',
         mode: 'light',
         colors: {
-            background: '#F8FAFC',
-            surface: '#FFFFFF',
+            background: '#FFFFFF',
+            surface: '#F8FAFC',
             foreground: '#0F172A',
-            foregroundMuted: '#64748B',
+            foregroundMuted: '#5D6B80',
             primary: '#2563EB',
             secondary: '#E2E8F0',
             accent: '#7C3AED',
@@ -111,10 +116,10 @@ export const THEME_PALETTES = [
         description: 'Warm neutral with indigo primary',
         mode: 'light',
         colors: {
-            background: '#FAFAF9',
-            surface: '#FFFFFF',
+            background: '#FFFFFF',
+            surface: '#FAFAF9',
             foreground: '#1C1917',
-            foregroundMuted: '#78716C',
+            foregroundMuted: '#6E6762',
             primary: '#4F46E5',
             secondary: '#EEF2FF',
             accent: '#EC4899',
@@ -130,15 +135,16 @@ export const THEME_PALETTES = [
         description: 'Clean white with emerald primary and mint washes — healthcare CRM',
         mode: 'light',
         colors: {
-            background: '#F7F9F8',
-            surface: '#FFFFFF',
+            background: '#FFFFFF',
+            surface: '#F7F9F8',
             foreground: '#17211D',
             foregroundMuted: '#5B6661',
-            primary: '#0FA47A',
-            secondary: '#0FA47A',
-            accent: '#0FA47A',
+            primary: '#0C8663',
+            onPrimary: '#FFFFFF',
+            secondary: '#0C8160',
+            accent: '#0C8663',
             border: '#E2E8E5',
-            ring: '#0FA47A',
+            ring: '#0C8663',
             muted: '#ECF2EF',
             destructive: '#E5484D',
         },
@@ -149,12 +155,13 @@ export const THEME_PALETTES = [
         description: 'Lavender-white canvas with vivid periwinkle — fitness SaaS',
         mode: 'light',
         colors: {
-            background: '#F4F3FB',
-            surface: '#FFFFFF',
+            background: '#FFFFFF',
+            surface: '#F4F3FB',
             foreground: '#1B1A2E',
             foregroundMuted: '#5A5874',
             primary: '#6F5CF1',
-            secondary: '#6F5CF1',
+            onPrimary: '#FFFFFF',
+            secondary: '#6955F0',
             accent: '#6F5CF1',
             border: '#E4E2F0',
             ring: '#6F5CF1',
@@ -168,15 +175,16 @@ export const THEME_PALETTES = [
         description: 'Crisp white with deep sky-cyan — referral dashboard',
         mode: 'light',
         colors: {
-            background: '#F6FAFC',
-            surface: '#FFFFFF',
+            background: '#FFFFFF',
+            surface: '#F6FAFC',
             foreground: '#14262D',
             foregroundMuted: '#587077',
-            primary: '#0E96C4',
-            secondary: '#0E96C4',
-            accent: '#0E96C4',
+            primary: '#0C7EA5',
+            onPrimary: '#FFFFFF',
+            secondary: '#0C7AA0',
+            accent: '#0C7EA5',
             border: '#DEE9EE',
-            ring: '#0E96C4',
+            ring: '#0C7EA5',
             muted: '#EAF3F7',
             destructive: '#E5484D',
         },
@@ -188,8 +196,8 @@ export const THEME_PALETTES = [
         description: 'Bone neutrals, ink CTAs, volt-lime selection — fitness app energy',
         mode: 'light',
         colors: {
-            background: '#F3F3EF',
-            surface: '#FFFFFF',
+            background: '#FFFFFF',
+            surface: '#F3F3EF',
             foreground: '#0B0B0B',
             foregroundMuted: '#55564F',
             primary: '#D7FA4B',
@@ -209,19 +217,61 @@ export const THEME_PALETTES = [
         description: 'Warm paper with Zap Blue accent — brand design system experiment',
         mode: 'light',
         colors: {
-            background: '#FAFAF7',
-            surface: '#FFFFFF',
+            background: '#FFFFFF',
+            surface: '#FAFAF7',
             foreground: '#0A0A0A',
             foregroundMuted: '#5A5A5A',
-            primary: '#1E7BFF',
+            primary: '#076DFF',
+            onPrimary: '#FFFFFF',
             secondary: '#CFE3FF',
             accent: '#0B4FD9',
             border: '#E4E2DA',
-            ring: '#1E7BFF',
+            ring: '#076DFF',
             muted: '#F0EFEA',
             destructive: '#EF4444',
         },
     },
+    {
+        id: 'blue-beacon',
+        name: 'Blue Beacon Creative',
+        description: 'Warm cream canvas with electric royal blue — Blue Beacon Creative studio',
+        mode: 'light',
+        colors: {
+            // seed.background → ak-surface (canvas band), seed.surface → ak-bg/elevated (paper)
+            // cards white like every light palette; the warm mood lives in
+            // the canvas and the whisper-ivory side panel
+            background: '#FFFFFF',
+            surface: '#F6F3EC',
+            foreground: '#14130F',
+            foregroundMuted: '#514D45',
+            primary: '#2238FF',
+            // pure white on royal blue — the computed fallback would pick the cream paper
+            onPrimary: '#FFFFFF',
+            secondary: '#1726B8',
+            // accent == primary on purpose: keeps border-focus on the royal blue
+            accent: '#2238FF',
+            onAccent: '#FFFFFF',
+            border: '#D9D3C4',
+            ring: '#2238FF',
+            muted: '#FDFBF0',
+            destructive: '#EF4444',
+            brandGradient: {
+                from: '#8E9BFF',
+                via: '#2238FF',
+                to: '#04429E',
+                hoverFrom: '#A9B4FF',
+                hoverVia: '#3D51FF',
+                hoverTo: '#0A3FBF',
+            },
+        },
+        effects: {
+            glowPrimary: '#2238FF',
+            glowSecondary: '#8E9BFF',
+            glowTertiary: '#F6C955',
+            glowWarm: '#F6C955',
+            meshBase: '#F6F3EC',
+        },
+    },
     /* ─── Dark Palettes ─── */
     {
         id: 'volt-noir',
@@ -253,7 +303,8 @@ export const THEME_PALETTES = [
             foreground: '#EDEAF6',
             foregroundMuted: '#9D97B8',
             primary: '#8B7CF7',
-            secondary: '#8B7CF7',
+            onPrimary: '#171717',
+            secondary: '#6F5DF5',
             accent: '#8B7CF7',
             border: '#2B2542',
             ring: '#8B7CF7',
@@ -271,16 +322,16 @@ export const THEME_PALETTES = [
             surface: '#111024',
             foreground: '#F8F5FF',
             foregroundMuted: '#AAA2C8',
-            primary: '#6D5DFF',
-            secondary: '#A855F7',
+            primary: '#5B48F7',
+            secondary: '#9E42F6',
             accent: '#FF7A5C',
             border: '#2B2545',
-            ring: '#6D5DFF',
+            ring: '#5B48F7',
             muted: '#1B1830',
             destructive: '#FF5A6E',
             brandGradient: {
                 from: '#A78BFA',
-                via: '#6D5DFF',
+                via: '#5B48F7',
                 to: '#5B21B6',
                 hoverFrom: '#C4B5FD',
                 hoverVia: '#8B7CFF',
@@ -288,7 +339,7 @@ export const THEME_PALETTES = [
             },
         },
         effects: {
-            glowPrimary: '#6D5DFF',
+            glowPrimary: '#5B48F7',
             glowSecondary: '#A855F7',
             glowTertiary: '#7C3AED',
             glowWarm: '#FF7A5C',
@@ -305,16 +356,17 @@ export const THEME_PALETTES = [
             surface: '#0B1020',
             foreground: '#F4F8FF',
             foregroundMuted: '#9AA8C7',
-            primary: '#16A3FF',
+            primary: '#0079C8',
+            onPrimary: '#FFFFFF',
             secondary: '#6D5DFF',
             accent: '#22D3EE',
             border: '#1A2440',
-            ring: '#16A3FF',
+            ring: '#0079C8',
             muted: '#101831',
             destructive: '#FF5A7A',
             brandGradient: {
                 from: '#22D3EE',
-                via: '#16A3FF',
+                via: '#0079C8',
                 to: '#6D5DFF',
                 hoverFrom: '#67E8F9',
                 hoverVia: '#38BDF8',
@@ -322,7 +374,7 @@ export const THEME_PALETTES = [
             },
         },
         effects: {
-            glowPrimary: '#16A3FF',
+            glowPrimary: '#0079C8',
             glowSecondary: '#22D3EE',
             glowTertiary: '#6D5DFF',
             glowWarm: '#8B5CF6',
@@ -340,7 +392,7 @@ export const THEME_PALETTES = [
             foreground: '#F7F7EC',
             foregroundMuted: '#A8A49A',
             primary: '#E9FF5B',
-            secondary: '#8B7CF7',
+            secondary: '#6F5DF5',
             accent: '#E9FF5B',
             border: '#2C2A33',
             ring: '#E9FF5B',
@@ -373,11 +425,12 @@ export const THEME_PALETTES = [
             surface: '#141016',
             foreground: '#FFF7FB',
             foregroundMuted: '#B7A9B7',
-            primary: '#E43DDC',
-            secondary: '#8B5CF6',
+            primary: '#CF1DC6',
+            onPrimary: '#FFFFFF',
+            secondary: '#8452F5',
             accent: '#FF5AA8',
             border: '#2C1C2E',
-            ring: '#E43DDC',
+            ring: '#CF1DC6',
             muted: '#1F1721',
             destructive: '#FF4D6D',
             brandGradient: {
@@ -390,7 +443,7 @@ export const THEME_PALETTES = [
             },
         },
         effects: {
-            glowPrimary: '#E43DDC',
+            glowPrimary: '#CF1DC6',
             glowSecondary: '#8B5CF6',
             glowTertiary: '#FF5AA8',
             glowWarm: '#22C55E',
@@ -450,6 +503,22 @@ function contrastRatio(a, b) {
 function onColor(fill, darkOption, lightOption) {
     return luminance(fill) > 0.45 ? darkOption : lightOption;
 }
+/**
+ * CTA text over a brand fill: prefer the palette's own ink/paper, but when the
+ * tinted paper falls short of 4.5:1 and pure white clears it, use white — the
+ * white-CTA-text rule (2026-08-24) applied at the bridge level.
+ */
+function ctaOnColor(fill, darkOption, lightOption) {
+    const contrast = (a, b) => {
+        const [l1, l2] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+        return (l1 + 0.05) / (l2 + 0.05);
+    };
+    const first = onColor(fill, darkOption, lightOption);
+    if (contrast(fill, first) >= 4.5) return first;
+    if (contrast(fill, '#ffffff') >= 4.5) return '#ffffff';
+    if (contrast(fill, '#111113') >= 4.5) return '#111113';
+    return first;
+}
 /**
  * Keeps the chosen brand colors while swapping surface, text, border, and muted
  * scaffolding to the current UI mode.
@@ -488,10 +557,12 @@ export function paletteToAkVariables(palette, options) {
     // (volt lime, yellow, etc. need ink text — not the background color).
     const ink = isDark ? c.background : c.foreground;
     const paper = isDark ? c.foreground : c.surface;
-    const onPrimary = onColor(p, ink, paper);
+    // Explicit palette override first: mid-luminance primaries need ink
+    // text and the auto-picker chooses wrong there.
+    const onPrimary = c.onPrimary ?? onColor(p, ink, paper);
     const secondary = c.secondary || c.accent;
     const onAccent = c.onAccent ?? onColor(c.accent, ink, paper);
-    const onSecondary = onColor(secondary, ink, paper);
+    const onSecondary = ctaOnColor(secondary, ink, paper);
     const accentSoft = mixColor(c.accent, c.surface, isDark ? 0.78 : 0.82);
     const secondaryContainer = mixColor(secondary, c.surface, isDark ? 0.78 : 0.82);
     const primaryContainer = isDark ? mixColor(p, c.surface, 0.76) : lighten(p, 0.88);
@@ -634,23 +705,30 @@ export function paletteToAkVariables(palette, options) {
         '--color-ak-tertiary-container': accentSoft,
         '--color-ak-on-tertiary-container': onAccentSoft,
         // Status colors
-        '--color-ak-success': '#22C55E',
-        '--color-ak-success-subtle': lighten('#22C55E', 0.88),
-        '--color-ak-success-text': darken('#22C55E', 0.2),
-        '--color-ak-warning': '#F59E0B',
-        '--color-ak-warning-subtle': lighten('#F59E0B', 0.88),
-        '--color-ak-warning-text': darken('#F59E0B', 0.2),
-        '--color-ak-danger': c.destructive,
-        '--color-ak-on-error': onColor(c.destructive, isDark ? c.background : c.foreground, isDark ? c.foreground : c.surface),
+        // Status ladders are SEMANTIC, not brand: fixed AA-safe pairs (the
+        // generated lighten/darken pairs measured ~3:1, and the light pastels
+        // leaked into dark mode). Same values as the SDK default theme.
+        '--color-ak-success': isDark ? '#4ade80' : '#16a34a',
+        '--color-ak-success-subtle': isDark ? 'rgba(34, 197, 94, 0.12)' : '#f0fdf4',
+        '--color-ak-success-text': isDark ? '#86efac' : '#15803d',
+        '--color-ak-warning': isDark ? '#fbbf24' : '#d97706',
+        '--color-ak-warning-subtle': isDark ? 'rgba(251, 191, 36, 0.12)' : '#fffbeb',
+        '--color-ak-warning-text': isDark ? '#fcd34d' : '#b45309',
+        // Danger + info are SEMANTIC like success/warning: fixed AA pairs,
+        // mode-aware (generated pairs measured ~2.3:1 and leaked light
+        // pastels into dark). c.destructive still drives error-container.
+        '--color-ak-danger': isDark ? '#f87171' : '#dc2626',
+        '--color-ak-on-error': isDark ? '#111113' : '#ffffff',
         ...(isDark ? { '--color-ak-pink': '#f472b6', '--color-ak-pink-subtle': 'rgba(244,114,182,.12)' } : {}),
-        '--color-ak-danger-subtle': errorContainer,
-        '--color-ak-danger-text': darken(c.destructive, 0.2),
-        '--color-ak-error': c.destructive,
+        '--color-ak-error': isDark ? '#f87171' : '#dc2626',
         '--color-ak-error-container': errorContainer,
         '--color-ak-on-error-container': onErrorContainer,
-        '--color-ak-info': '#3B82F6',
-        '--color-ak-info-subtle': lighten('#3B82F6', 0.88),
-        '--color-ak-info-text': darken('#3B82F6', 0.2),
+        '--color-ak-danger-hover': isDark ? '#ef4444' : '#b91c1c',
+        '--color-ak-danger-subtle': isDark ? '#301a1a' : '#fef2f2',
+        '--color-ak-danger-text': isDark ? '#fca5a5' : '#b91c1c',
+        '--color-ak-info': isDark ? '#60a5fa' : '#2563eb',
+        '--color-ak-info-subtle': isDark ? 'rgba(96, 165, 250, 0.12)' : '#eff6ff',
+        '--color-ak-info-text': isDark ? '#93c5fd' : '#1d4ed8',
         // Overlay
         '--color-ak-overlay': isDark ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0.5)',
         // Dark mode: disable shadows (they don't read on dark surfaces)

package/package.json

@@ -1,65 +1,65 @@
-{
-  "name": "astralkit",
-  "version": "0.8.0",
-  "description": "Design tokens and component primitives for accessible UI — Tailwind CSS v3 & v4",
-  "type": "module",
-  "exports": {
-    "./theme": "./astralkit-theme.css",
-    "./theme-v4": "./astralkit-theme-v4.css",
-    "./utilities": "./astralkit-utilities.css",
-    "./tailwind": "./tailwind.cjs",
-    "./tailwind.cjs": "./tailwind.cjs",
-    "./utils": "./lib/utils.js",
-    "./motion": "./lib/motion.js",
-    "./theme-context": "./lib/theme-context.js",
-    "./ai-rules": "./ai-rules.md",
-    "./palettes": "./palettes.css",
-    "./presets": "./lib/presets/index.js"
-  },
-  "files": [
-    "astralkit-theme.css",
-    "astralkit-theme-v4.css",
-    "astralkit-utilities.css",
-    "palettes.css",
-    "primitives/",
-    "tailwind.cjs",
-    "ai-rules.md",
-    "lib/",
-    "LICENSE",
-    "README.md",
-    "CHANGELOG.md"
-  ],
-  "dependencies": {
-    "clsx": "^2.1.0",
-    "tailwind-merge": "^2.2.0 || ^3.0.0"
-  },
-  "peerDependencies": {
-    "tailwindcss": ">=3.0.0",
-    "react": ">=18.0.0"
-  },
-  "peerDependenciesMeta": {
-    "tailwindcss": {
-      "optional": false
-    },
-    "react": {
-      "optional": true
-    }
-  },
-  "keywords": [
-    "astralkit",
-    "design-tokens",
-    "tailwind",
-    "css",
-    "ui"
-  ],
-  "homepage": "https://astralkit.com",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/astral-kit/astralkit.git"
-  },
-  "license": "SEE LICENSE IN LICENSE",
-  "author": "Blue Beacon Creative LLC",
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "astralkit",
+  "version": "0.9.0",
+  "description": "Design tokens and component primitives for accessible UI — Tailwind CSS v3 & v4",
+  "type": "module",
+  "exports": {
+    "./theme": "./astralkit-theme.css",
+    "./theme-v4": "./astralkit-theme-v4.css",
+    "./utilities": "./astralkit-utilities.css",
+    "./tailwind": "./tailwind.cjs",
+    "./tailwind.cjs": "./tailwind.cjs",
+    "./utils": "./lib/utils.js",
+    "./motion": "./lib/motion.js",
+    "./theme-context": "./lib/theme-context.js",
+    "./ai-rules": "./ai-rules.md",
+    "./palettes": "./palettes.css",
+    "./presets": "./lib/presets/index.js"
+  },
+  "files": [
+    "astralkit-theme.css",
+    "astralkit-theme-v4.css",
+    "astralkit-utilities.css",
+    "palettes.css",
+    "primitives/",
+    "tailwind.cjs",
+    "ai-rules.md",
+    "lib/",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0 || ^3.0.0"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=3.0.0",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": false
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "astralkit",
+    "design-tokens",
+    "tailwind",
+    "css",
+    "ui"
+  ],
+  "homepage": "https://astralkit.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/astral-kit/astralkit.git"
+  },
+  "license": "SEE LICENSE IN LICENSE",
+  "author": "Blue Beacon Creative LLC",
+  "publishConfig": {
+    "access": "public"
+  }
+}