astralkit 0.5.0 → 0.7.0

package/lib/presets/font-pairings.js

@@ -0,0 +1,123 @@
+/**
+ * Curated font pairings — the AstralKit answer to shadcn's 26-font buffet.
+ *
+ * A pairing is not two font names: it is a MINIATURE TYPE SYSTEM — per-role
+ * family AND weight, balanced by hand. Swapping families without weight
+ * compensation always looks wrong (Space Grotesk 500 reads lighter than
+ * Inter 500), which is exactly why this is authored, never parametric.
+ *
+ * Roles (consumed via SDK classes ak-font-heading / -body / -ui / -label):
+ *   heading — titles, section heads, KPIs
+ *   body    — descriptions, paragraphs, links
+ *   ui      — buttons, inputs, menus, tabs
+ *   label   — overlines, badges, table headers
+ * The typical split: the DISPLAY family carries heading + label, the BODY
+ * family carries body + ui — but each pairing decides. Links always follow
+ * body (a separate link font is almost never good typography).
+ */
+export const DEFAULT_FONT_PAIRING_ID = 'inter';
+const SANS = "system-ui, -apple-system, sans-serif";
+const INTER = `'Inter', ${SANS}`;
+const GROTESK = `'Space Grotesk', ${SANS}`;
+const DM = `'DM Sans', ${SANS}`;
+const OUTFIT = `'Outfit', ${SANS}`;
+const PLAYFAIR = `'Playfair Display', Georgia, serif`;
+const JBMONO = `'JetBrains Mono', ui-monospace, monospace`;
+export const FONT_PAIRINGS = [
+    {
+        id: 'inter',
+        name: 'Inter',
+        description: 'The house default — one family, weight does the hierarchy.',
+        variables: {
+            '--font-ak-sans': INTER,
+            '--font-ak-heading': INTER,
+            '--font-ak-ui': INTER,
+            '--font-ak-label': INTER,
+            '--ak-weight-heading': '600',
+            '--ak-weight-body': '400',
+            '--ak-weight-ui': '500',
+            '--ak-weight-label': '600',
+        },
+    },
+    {
+        id: 'grotesk',
+        name: 'Grotesk',
+        description: 'Space Grotesk display + UI over Inter body — technical, product-led. Weights bumped to compensate its light curve.',
+        variables: {
+            '--font-ak-sans': INTER,
+            '--font-ak-heading': GROTESK,
+            '--font-ak-ui': GROTESK,
+            '--font-ak-label': GROTESK,
+            '--ak-weight-heading': '700',
+            '--ak-weight-body': '400',
+            '--ak-weight-ui': '500',
+            '--ak-weight-label': '500',
+            '--ak-tracking-label': '0.04em',
+        },
+    },
+    {
+        id: 'editorial',
+        name: 'Editorial',
+        description: 'Playfair Display headlines over DM Sans everything else — magazine warmth.',
+        variables: {
+            '--font-ak-sans': DM,
+            '--font-ak-heading': PLAYFAIR,
+            '--font-ak-ui': DM,
+            '--font-ak-label': DM,
+            '--ak-weight-heading': '600',
+            '--ak-weight-body': '400',
+            '--ak-weight-ui': '500',
+            '--ak-weight-label': '700',
+            '--ak-tracking-label': '0.06em',
+        },
+    },
+    {
+        id: 'humanist',
+        name: 'Humanist',
+        description: 'DM Sans throughout — rounded and friendly; headings carry extra weight.',
+        variables: {
+            '--font-ak-sans': DM,
+            '--font-ak-heading': DM,
+            '--font-ak-ui': DM,
+            '--font-ak-label': DM,
+            '--ak-weight-heading': '700',
+            '--ak-weight-body': '400',
+            '--ak-weight-ui': '500',
+            '--ak-weight-label': '600',
+        },
+    },
+    {
+        id: 'soft',
+        name: 'Soft Display',
+        description: 'Outfit throughout — geometric softness for consumer products.',
+        variables: {
+            '--font-ak-sans': OUTFIT,
+            '--font-ak-heading': OUTFIT,
+            '--font-ak-ui': OUTFIT,
+            '--font-ak-label': OUTFIT,
+            '--ak-weight-heading': '600',
+            '--ak-weight-body': '400',
+            '--ak-weight-ui': '500',
+            '--ak-weight-label': '600',
+        },
+    },
+    {
+        id: 'terminal',
+        name: 'Terminal',
+        description: 'JetBrains Mono display + labels over Inter body and UI — dev-tool energy.',
+        variables: {
+            '--font-ak-sans': INTER,
+            '--font-ak-heading': JBMONO,
+            '--font-ak-ui': INTER,
+            '--font-ak-label': JBMONO,
+            '--ak-weight-heading': '600',
+            '--ak-weight-body': '400',
+            '--ak-weight-ui': '500',
+            '--ak-weight-label': '500',
+            '--ak-tracking-label': '0',
+        },
+    },
+];
+export function fontPairingToVariables(pairing) {
+    return { ...pairing.variables };
+}

package/lib/presets/fonts.d.ts

@@ -0,0 +1,16 @@
+export type FontGroup = 'sans' | 'mono' | 'serif'
+
+export interface LibraryFont {
+  id: string
+  name: string
+  group: FontGroup
+  minWeight: number
+  maxWeight: number
+  stack: string
+}
+
+export declare const FONT_LIBRARY: LibraryFont[]
+export declare const FONT_GROUPS: FontGroup[]
+export declare function getFont(id: string): LibraryFont | undefined
+export declare function fontWeights(font: LibraryFont): number[]
+export declare function clampWeight(font: LibraryFont, weight: number): number

package/lib/presets/fonts.js

@@ -0,0 +1,76 @@
+/**
+ * astralkit/presets — the font library.
+ *
+ * The full shadcn font roster (all 26), grouped sans / mono / serif exactly
+ * as their pickers group them, plus per-font weight ranges so a weight
+ * dropdown can offer only weights the font actually ships — the control
+ * shadcn does not have.
+ */
+
+const SANS_FALLBACK = 'system-ui, -apple-system, sans-serif'
+const SERIF_FALLBACK = 'Georgia, serif'
+const MONO_FALLBACK = 'ui-monospace, monospace'
+
+const f = (id, name, group, minWeight, maxWeight, fallback) => ({
+  id,
+  name,
+  group,
+  minWeight,
+  maxWeight,
+  stack: `'${name}', ${fallback}`,
+})
+
+export const FONT_LIBRARY = [
+  // Sans
+  f('geist', 'Geist', 'sans', 100, 900, SANS_FALLBACK),
+  f('inter', 'Inter', 'sans', 100, 900, SANS_FALLBACK),
+  f('noto-sans', 'Noto Sans', 'sans', 100, 900, SANS_FALLBACK),
+  f('nunito-sans', 'Nunito Sans', 'sans', 200, 900, SANS_FALLBACK),
+  f('figtree', 'Figtree', 'sans', 300, 900, SANS_FALLBACK),
+  f('roboto', 'Roboto', 'sans', 100, 900, SANS_FALLBACK),
+  f('raleway', 'Raleway', 'sans', 100, 900, SANS_FALLBACK),
+  f('dm-sans', 'DM Sans', 'sans', 100, 900, SANS_FALLBACK),
+  f('public-sans', 'Public Sans', 'sans', 100, 900, SANS_FALLBACK),
+  f('outfit', 'Outfit', 'sans', 100, 900, SANS_FALLBACK),
+  f('oxanium', 'Oxanium', 'sans', 200, 800, SANS_FALLBACK),
+  f('manrope', 'Manrope', 'sans', 200, 800, SANS_FALLBACK),
+  f('space-grotesk', 'Space Grotesk', 'sans', 300, 700, SANS_FALLBACK),
+  f('montserrat', 'Montserrat', 'sans', 100, 900, SANS_FALLBACK),
+  f('ibm-plex-sans', 'IBM Plex Sans', 'sans', 300, 700, SANS_FALLBACK),
+  f('source-sans-3', 'Source Sans 3', 'sans', 200, 900, SANS_FALLBACK),
+  f('instrument-sans', 'Instrument Sans', 'sans', 400, 700, SANS_FALLBACK),
+  // Mono
+  f('geist-mono', 'Geist Mono', 'mono', 100, 900, MONO_FALLBACK),
+  f('jetbrains-mono', 'JetBrains Mono', 'mono', 100, 800, MONO_FALLBACK),
+  // Serif
+  f('noto-serif', 'Noto Serif', 'serif', 100, 900, SERIF_FALLBACK),
+  f('roboto-slab', 'Roboto Slab', 'serif', 100, 900, SERIF_FALLBACK),
+  f('merriweather', 'Merriweather', 'serif', 300, 900, SERIF_FALLBACK),
+  f('lora', 'Lora', 'serif', 400, 700, SERIF_FALLBACK),
+  f('playfair-display', 'Playfair Display', 'serif', 400, 900, SERIF_FALLBACK),
+  f('eb-garamond', 'EB Garamond', 'serif', 400, 800, SERIF_FALLBACK),
+  f('instrument-serif', 'Instrument Serif', 'serif', 400, 400, SERIF_FALLBACK),
+]
+
+export const FONT_GROUPS = ['sans', 'mono', 'serif']
+
+export function getFont(id) {
+  return FONT_LIBRARY.find((font) => font.id === id)
+}
+
+/** Weights the font actually ships, in 100 steps, clamped to the UI-sane 300–900 band
+ *  (fonts whose whole range sits outside keep their own bounds). */
+export function fontWeights(font) {
+  const lo = Math.max(font.minWeight, 300)
+  const hi = Math.min(font.maxWeight, 900)
+  if (lo > hi) return [font.minWeight]
+  const out = []
+  for (let w = lo; w <= hi; w += 100) out.push(w)
+  return out
+}
+
+/** Nearest available weight when switching fonts keeps the user's intent. */
+export function clampWeight(font, weight) {
+  const weights = fontWeights(font)
+  return weights.reduce((best, w) => (Math.abs(w - weight) < Math.abs(best - weight) ? w : best), weights[0])
+}

package/lib/presets/index.d.ts

@@ -0,0 +1,7 @@
+export * from './theme-palettes'
+export * from './appearance-presets'
+export * from './font-pairings'
+export * from './chart-palettes'
+export * from './dials'
+export * from './fonts'
+export * from './materials'

package/lib/presets/index.js

@@ -0,0 +1,24 @@
+/**
+ * astralkit/presets — the single source of truth for every theming dial.
+ *
+ * One data model serves them all: the demo showcase bar, the Theme Builder,
+ * and (later) the MCP's list_themes / apply_theme. Every entry is
+ * { id, name, description, variables } where `variables` is a flat record of
+ * CSS custom properties — applying a preset is spreading those onto any
+ * container's style. Nothing here imports React or the DOM.
+ *
+ * Dials:
+ *   THEME_PALETTES     — 16 authored color palettes (+ dark handling)
+ *   FONT_PAIRINGS      — miniature type systems (per-role family + weight)
+ *   CHART_PALETTES     — authored 6-color series sets
+ *   RADIUS_OPTIONS     — the one-knob radius system's named stops
+ *   APPEARANCE_PRESETS — atmosphere layers (mesh, grain, neon, backlight)
+ */
+
+export * from './theme-palettes.js'
+export * from './appearance-presets.js'
+export * from './font-pairings.js'
+export * from './chart-palettes.js'
+export * from './dials.js'
+export * from './fonts.js'
+export * from './materials.js'

package/lib/presets/materials.d.ts

@@ -0,0 +1,15 @@
+export type MaterialId = 'soft' | 'flat' | 'glass' | 'brutal'
+
+export interface MaterialAppearance {
+  id: MaterialId
+  name: string
+  description: string
+  /** Suggested radius, applied only while the Radius dial is on Default. */
+  radius: string | null
+  variables: Record<string, string>
+  darkVariables: Record<string, string>
+}
+
+export declare const DEFAULT_MATERIAL_ID: MaterialId
+export declare const MATERIAL_APPEARANCES: MaterialAppearance[]
+export declare function materialToVariables(material: MaterialAppearance, opts?: { mode?: 'light' | 'dark' }): Record<string, string>

package/lib/presets/materials.js

@@ -0,0 +1,245 @@
+/**
+ * astralkit/presets — material appearances.
+ *
+ * An APPEARANCE is a design language: the physical properties of the UI —
+ * surface fill/blur, border weight, shadow character, press behavior, type
+ * weight — expressed as a pack of --ak-material slots. Components consume
+ * the slots via the SDK recipes (.ak-material-control / .ak-material-surface
+ * / .ak-press); switching packs re-materializes a RUNNING app.
+ *
+ * Composability is the point: Appearance × Palette × Radius × Type Scale,
+ * all runtime. shadcn's styles are frozen skins baked at scaffold time —
+ * this dial is the thing that architecture cannot do.
+ *
+ * Each pack: light `variables`, authored `darkVariables`, and a suggested
+ * `radius` (applied only while the Radius dial sits on Default — an explicit
+ * radius pick always wins).
+ */
+
+export const DEFAULT_MATERIAL_ID = 'soft'
+
+const INK = '#0a0a0a'
+const PAPER = '#f4f4f5'
+
+export const MATERIAL_APPEARANCES = [
+  {
+    id: 'soft',
+    name: 'Soft',
+    description: 'The house default — quiet borders, calm surfaces.',
+    radius: null,
+    variables: {},
+    darkVariables: {},
+  },
+  {
+    id: 'flat',
+    name: 'Flat',
+    description: 'Zero elevation, crisp hairlines, sharp corners.',
+    radius: '0.375rem',
+    variables: {
+      '--ak-control-shadow': 'none',
+      '--ak-surface-shadow': 'none',
+      '--ak-surface-border-color': 'var(--color-ak-border-strong)',
+      '--ak-press-transform': 'scale(0.99)',
+      // Zero elevation extends to the small parts: crisp bordered thumb,
+      // shadowless knob, flat tracks, no hover theatrics.
+      '--ak-knob-shadow': 'none',
+      '--ak-thumb-shadow': 'none',
+      '--ak-thumb-border-w': '1px',
+      '--ak-thumb-border-color': 'var(--color-ak-border-strong)',
+      '--ak-thumb-hover-transform': 'none',
+      '--ak-track-shadow': '0 0 0 0 transparent',
+      '--ak-effect-mesh-opacity': '0',
+      '--ak-effect-grain-opacity': '0',
+      '--ak-effect-backlight-opacity': '0',
+    },
+    darkVariables: {
+      '--ak-control-shadow': 'none',
+      '--ak-surface-shadow': 'none',
+      '--ak-surface-border-color': 'rgba(255,255,255,0.22)',
+      '--ak-press-transform': 'scale(0.99)',
+      '--ak-knob-shadow': 'none',
+      '--ak-thumb-shadow': 'none',
+      '--ak-thumb-border-w': '1px',
+      '--ak-thumb-border-color': 'rgba(255,255,255,0.22)',
+      '--ak-thumb-hover-transform': 'none',
+      '--ak-track-shadow': '0 0 0 0 transparent',
+      '--ak-effect-mesh-opacity': '0',
+      '--ak-effect-grain-opacity': '0',
+      '--ak-effect-backlight-opacity': '0',
+    },
+  },
+  {
+    id: 'glass',
+    name: 'Glassmorphic',
+    description: 'White glass — one top-left light source; sheen, rim and speculars all agree on it.',
+    radius: '0.875rem',
+    variables: {
+      // Fred's Glass v2 reference: sheen falls off from the light (125deg),
+      // rim burns hot near it and dies opposite, specular inset on the lit
+      // edge + faint bounce on the shadow side. Standard 18px thickness.
+      '--ak-surface-fill': 'rgba(255,255,255,0.11)',
+      '--ak-surface-fill-2': 'rgba(255,255,255,0.18)',
+      '--ak-surface-sheen': 'linear-gradient(125deg, rgba(255,255,255,0.20), rgba(255,255,255,0.04) 38%, rgba(255,255,255,0) 62%)',
+      '--ak-surface-blur': 'blur(18px) saturate(1.6)',
+      '--ak-surface-border-w': '0px',
+      '--ak-surface-rim': 'linear-gradient(125deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.25) 30%, rgba(255,255,255,0.08) 55%, rgba(255,255,255,0.18) 100%)',
+      '--ak-surface-shadow': '0 24px 48px -16px rgba(0,0,0,0.28), inset 1px 1px 1px rgba(255,255,255,0.45), inset -1px -1px 1px rgba(255,255,255,0.08)',
+      '--ak-surface-shadow-2': '0 10px 22px -10px rgba(0,0,0,0.28), inset 1px 1px 1px rgba(255,255,255,0.4)',
+      '--ak-control-shadow': '0 4px 14px rgba(15,15,20,0.10)',
+      '--ak-press-transform': 'scale(0.97)',
+      // Law 4: glass is for surfaces — small-control active parts stay FLAT
+      // SOLID. Knob/thumb = plain white with a real drop; slider track = a
+      // carved groove (dark inset + light bottom edge). Spring per the ref.
+      '--ak-knob-fill': '#ffffff',
+      '--ak-knob-fill-checked': '#ffffff',
+      '--ak-knob-shadow': '0 2px 5px rgba(0,0,0,0.4)',
+      '--ak-control-spring': 'cubic-bezier(0.34, 1.4, 0.5, 1)',
+      '--ak-thumb-fill': '#ffffff',
+      '--ak-thumb-shadow': '0 2px 5px rgba(0,0,0,0.4)',
+      '--ak-thumb-hover-transform': 'scale(1.1)',
+      '--ak-thumb-active-transform': 'scale(0.96)',
+      '--ak-track-shadow': 'inset 0 2px 3px rgba(0,0,0,0.35), inset 0 -1px 1px rgba(255,255,255,0.25)',
+      '--ak-effect-mesh-opacity': '0.18',
+      '--ak-effect-grain-opacity': '0.015',
+      '--ak-effect-backlight-opacity': '0.08',
+    },
+    darkVariables: {
+      // Smoked glass — dark material, locks in text contrast regardless of
+      // the backdrop. Dimmer sheen and rim, calmer saturation.
+      '--ak-surface-fill': 'rgba(16,17,22,0.45)',
+      '--ak-surface-fill-2': 'rgba(22,24,30,0.55)',
+      '--ak-surface-sheen': 'linear-gradient(125deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 38%, rgba(255,255,255,0) 62%)',
+      '--ak-surface-blur': 'blur(18px) saturate(1.2)',
+      '--ak-surface-border-w': '0px',
+      '--ak-surface-rim': 'linear-gradient(125deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.10) 100%)',
+      '--ak-surface-shadow': '0 24px 48px -16px rgba(0,0,0,0.5), inset 1px 1px 1px rgba(255,255,255,0.18), inset -1px -1px 1px rgba(255,255,255,0.04)',
+      '--ak-surface-shadow-2': '0 10px 22px -10px rgba(0,0,0,0.5), inset 1px 1px 1px rgba(255,255,255,0.14)',
+      '--ak-control-shadow': '0 4px 14px rgba(0,0,0,0.35)',
+      '--ak-press-transform': 'scale(0.97)',
+      '--ak-knob-fill': '#ffffff',
+      '--ak-knob-fill-checked': '#ffffff',
+      '--ak-knob-shadow': '0 2px 5px rgba(0,0,0,0.55)',
+      '--ak-control-spring': 'cubic-bezier(0.34, 1.4, 0.5, 1)',
+      '--ak-thumb-fill': '#ffffff',
+      '--ak-thumb-shadow': '0 2px 5px rgba(0,0,0,0.55)',
+      '--ak-thumb-hover-transform': 'scale(1.1)',
+      '--ak-thumb-active-transform': 'scale(0.96)',
+      '--ak-track-shadow': 'inset 0 2px 3px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.12)',
+      '--ak-effect-mesh-opacity': '0.14',
+      '--ak-effect-grain-opacity': '0.015',
+      '--ak-effect-backlight-opacity': '0.10',
+    },
+  },
+  {
+    id: 'brutal',
+    name: 'Neo-Brutal',
+    description: 'The house brutalism — ink borders, hard offsets, the push-into-shadow press.',
+    // House brutal keeps FRIENDLY corners (--radius-ak-brutal = 0.5rem) —
+    // hard geometry, soft radius. That contrast IS the AstralKit brutal look.
+    radius: '0.5rem',
+    variables: {
+      // The authored ak-brutal token ladder (ink #000, 4/3/6px offsets) and
+      // the three-act ak-brutal-press choreography, expressed as slots:
+      // rest 4px → hover: slide 2px into a 3px shadow → active: fully
+      // pressed, shadow collapses to zero.
+      // Control shadows use SOFTENED ink (mixed toward the page color) so a
+      // fill that matches the ink — the B&W palette's primary — still reads
+      // against its shadow (Fred's call: tone separation, not rings). Card
+      // shadows stay pure ink; faces are always lighter there.
+      '--ak-control-shadow': '4px 4px 0 0 color-mix(in srgb, #000000 72%, var(--color-ak-bg))',
+      '--ak-control-hover-transform': 'translate(2px, 2px)',
+      '--ak-control-shadow-hover': '3px 3px 0 0 color-mix(in srgb, #000000 72%, var(--color-ak-bg))',
+      '--ak-press-transform': 'translate(4px, 4px)',
+      '--ak-control-shadow-active': '0 0 0 0 #000000',
+      '--ak-surface-border-w': 'var(--border-ak-brutal)',
+      '--ak-surface-border-color': '#000000',
+      '--ak-surface-shadow': '6px 6px 0 0 #000000',
+      '--ak-weight-ui': '700',
+      '--ak-weight-ui-strong': '800',
+      '--ak-weight-heading': '800',
+      '--ak-weight-label': '700',
+      '--ak-tracking-label': '0.05em',
+      // Quiet hover = the brutal backface, bottom edge only: a THICK ink
+      // underline pushed away from the text (not a hairline text-decoration).
+      '--ak-quiet-hover-line': 'underline',
+      '--ak-quiet-hover-thickness': '3px',
+      '--ak-quiet-hover-offset': '2px',
+      '--ak-quiet-hover-bg': 'transparent',
+      '--ak-quiet-hover-color': '#000000',
+      // Brutal focus is dashed ink; nested brutal surfaces go FLAT (border
+      // only) — shadow lives at the top level, per the reference doctrine.
+      '--ak-focus-outline': '3px dashed #000000',
+      '--ak-focus-offset': '4px',
+      '--ak-surface-shadow-2': 'none',
+      // Batch-2 control slots — the squish is the juice: solid ink knob that
+      // stretches on press, square-ish thumb that tilts on hover, loud
+      // bordered tracks. Thumb shadow uses the same softened ink as controls.
+      '--ak-knob-fill': '#000000',
+      '--ak-knob-fill-checked': 'var(--color-ak-bg)',
+      '--ak-knob-shadow': 'none',
+      '--ak-knob-press': 'scaleX(1.25)',
+      '--ak-control-spring': 'cubic-bezier(0.6, 1.6, 0.4, 1)',
+      '--ak-thumb-fill': 'var(--color-ak-bg)',
+      '--ak-thumb-radius': '8px',
+      '--ak-thumb-border-w': '3px',
+      '--ak-thumb-border-color': '#000000',
+      '--ak-thumb-shadow': '2px 2px 0 0 color-mix(in srgb, #000000 72%, var(--color-ak-bg))',
+      '--ak-thumb-hover-transform': 'rotate(8deg) scale(1.08)',
+      '--ak-thumb-active-transform': 'scale(0.94)',
+      '--ak-track-shadow': '0 0 0 0 transparent',
+      '--ak-track-border-w': '2px',
+      '--ak-track-border-color': '#000000',
+      '--ak-effect-mesh-opacity': '0',
+      '--ak-effect-grain-opacity': '0',
+      '--ak-effect-backlight-opacity': '0',
+    },
+    darkVariables: {
+      // Explicit paper values — the :root substitution rule means overriding
+      // --color-ak-brutal-ink here would never reach the shadow tokens.
+      '--ak-control-shadow': '4px 4px 0 0 color-mix(in srgb, #f4f4f5 68%, var(--color-ak-bg))',
+      '--ak-control-hover-transform': 'translate(2px, 2px)',
+      '--ak-control-shadow-hover': '3px 3px 0 0 color-mix(in srgb, #f4f4f5 68%, var(--color-ak-bg))',
+      '--ak-press-transform': 'translate(4px, 4px)',
+      '--ak-control-shadow-active': '0 0 0 0 #f4f4f5',
+      '--ak-surface-border-w': 'var(--border-ak-brutal)',
+      '--ak-surface-border-color': '#f4f4f5',
+      '--ak-surface-shadow': '6px 6px 0 0 #f4f4f5',
+      '--ak-weight-ui': '700',
+      '--ak-weight-ui-strong': '800',
+      '--ak-weight-heading': '800',
+      '--ak-weight-label': '700',
+      '--ak-tracking-label': '0.05em',
+      '--ak-quiet-hover-line': 'underline',
+      '--ak-quiet-hover-thickness': '3px',
+      '--ak-quiet-hover-offset': '2px',
+      '--ak-quiet-hover-bg': 'transparent',
+      '--ak-quiet-hover-color': '#f4f4f5',
+      '--ak-focus-outline': '3px dashed #f4f4f5',
+      '--ak-focus-offset': '4px',
+      '--ak-surface-shadow-2': 'none',
+      '--ak-knob-fill': '#f4f4f5',
+      '--ak-knob-fill-checked': 'var(--color-ak-bg)',
+      '--ak-knob-shadow': 'none',
+      '--ak-knob-press': 'scaleX(1.25)',
+      '--ak-control-spring': 'cubic-bezier(0.6, 1.6, 0.4, 1)',
+      '--ak-thumb-fill': 'var(--color-ak-bg)',
+      '--ak-thumb-radius': '8px',
+      '--ak-thumb-border-w': '3px',
+      '--ak-thumb-border-color': '#f4f4f5',
+      '--ak-thumb-shadow': '2px 2px 0 0 color-mix(in srgb, #f4f4f5 68%, var(--color-ak-bg))',
+      '--ak-thumb-hover-transform': 'rotate(8deg) scale(1.08)',
+      '--ak-thumb-active-transform': 'scale(0.94)',
+      '--ak-track-shadow': '0 0 0 0 transparent',
+      '--ak-track-border-w': '2px',
+      '--ak-track-border-color': '#f4f4f5',
+      '--ak-effect-mesh-opacity': '0',
+      '--ak-effect-grain-opacity': '0',
+      '--ak-effect-backlight-opacity': '0',
+    },
+  },
+]
+
+export function materialToVariables(material, opts) {
+  const mode = (opts && opts.mode) || 'light'
+  return { ...(mode === 'dark' ? material.darkVariables : material.variables) }
+}

package/lib/presets/theme-palettes.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Curated 60-30-10 Theme Palettes for AstralKit Theme Builder
+ *
+ * Each palette follows the 60-30-10 rule:
+ * - 60% Dominant: background, surface (large areas)
+ * - 30% Secondary: cards, sidebar, secondary surfaces
+ * - 10% Accent: CTAs, links, highlights, primary actions
+ *
+ * Token mapping:
+ * - background: Page background (60%)
+ * - surface: Card/panel backgrounds (60% variant)
+ * - foreground: Primary text color
+ * - foregroundMuted: Secondary/body text
+ * - primary: Main accent / CTA color (10%)
+ * - secondary: Supporting color (30%)
+ * - accent: Highlight / tertiary color
+ * - border: Divider and border color
+ * - ring: Focus ring color (usually primary-based)
+ * - muted: Muted/disabled backgrounds
+ * - destructive: Error/danger color
+ */
+export interface ThemePalette {
+    id: string;
+    name: string;
+    description: string;
+    mode: 'light' | 'dark';
+    colors: {
+        background: string;
+        surface: string;
+        foreground: string;
+        foregroundMuted: string;
+        primary: string;
+        secondary: string;
+        accent: string;
+        /** Optional text color for filled accent elements. Defaults to computed contrast. */
+        onAccent?: string;
+        border: string;
+        ring: string;
+        muted: string;
+        destructive: string;
+        /** Optional: slider/scrubber filled-track color. Defaults to primary when omitted. */
+        sliderFill?: string;
+        /** Optional: slider thumb ring color. Defaults to paper (bg) when omitted. */
+        sliderRing?: string;
+        /** Optional: branded CTA gradient stops. Defaults are derived from primary. */
+        brandGradient?: {
+            from: string;
+            via: string;
+            to: string;
+            hoverFrom?: string;
+            hoverVia?: string;
+            hoverTo?: string;
+        };
+    };
+    effects?: {
+        glowPrimary?: string;
+        glowSecondary?: string;
+        glowTertiary?: string;
+        glowWarm?: string;
+        meshBase?: string;
+    };
+}
+export type ThemeMode = ThemePalette['mode'];
+export declare const THEME_PALETTES: ThemePalette[];
+/**
+ * Keeps the chosen brand colors while swapping surface, text, border, and muted
+ * scaffolding to the current UI mode.
+ */
+export declare function resolvePaletteForMode(palette: ThemePalette, mode: ThemeMode): ThemePalette;
+/**
+ * Maps a ThemePalette to the actual --color-ak-* CSS variables
+ * that AstralKit components consume.
+ *
+ * This is the critical bridge between our 60-30-10 palette
+ * and the component design token system.
+ */
+export declare function paletteToAkVariables(palette: ThemePalette, options?: {
+    mode?: ThemeMode;
+}): Record<string, string>;
+/**
+ * Palette authorship lint — encodes the recipe learned from curation:
+ * keepers share a near-neutral foreground, neutral light surfaces, and a
+ * mid-luminance primary (or an explicit accent split for light primaries).
+ * Returns human-readable warnings; empty array = palette is well-formed.
+ */
+export declare function validatePalette(palette: ThemePalette): string[];
+/**
+ * Generates CSS :root block from a palette using the ak variable names.
+ */
+export declare function paletteToCSS(palette: ThemePalette): string;