@mohasinac/appkit 3.2.8 → 3.2.10

package/dist/tokens/index.d.ts

@@ -264,11 +264,11 @@ export declare const LAYOUT: {
     readonly containerWidth: "max-w-[1920px]";
     readonly contentPadding: "px-4 md:px-6 lg:px-8";
     readonly navPadding: "px-4 sm:px-6 lg:px-8";
-    readonly titleBarBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80";
-    readonly navbarBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80";
-    readonly sidebarBg: "bg-white dark:bg-slate-900 border-l border-zinc-200 dark:border-slate-800";
-    readonly bottomNavBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-t border-zinc-200/80 dark:border-slate-800/80";
-    readonly footerBg: "bg-zinc-50 dark:bg-slate-900 border-t border-zinc-200 dark:border-slate-800";
+    readonly titleBarBg: "bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-b border-[var(--appkit-color-border)]";
+    readonly navbarBg: "bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-b border-[var(--appkit-color-border)]";
+    readonly sidebarBg: "bg-[var(--appkit-color-surface)] border-l border-[var(--appkit-color-border-subtle)]";
+    readonly bottomNavBg: "bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-t border-[var(--appkit-color-border)]";
+    readonly footerBg: "bg-zinc-50 bg-[var(--appkit-color-surface)] border-t border-[var(--appkit-color-border-subtle)]";
     readonly fullScreen: "min-h-screen";
     readonly flexCenter: "flex items-center justify-center";
     readonly centerText: "text-center";
@@ -291,7 +291,7 @@ export declare const LAYOUT: {
     /** Kill bottom margin from last element in a zone */
     readonly lastChild: "mb-0 pb-0";
     /** Combined bottom-nav bar (hidden on lg+, iPhone safe-area aware) */
-    readonly bottomNav: "fixed bottom-0 inset-x-0 z-50 flex justify-around items-center h-16 bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 lg:hidden pb-[env(safe-area-inset-bottom)]";
+    readonly bottomNav: "fixed bottom-0 inset-x-0 z-50 flex justify-around items-center h-16 bg-[var(--appkit-color-surface)] border-t border-[var(--appkit-color-border-subtle)] lg:hidden pb-[env(safe-area-inset-bottom)]";
     /** Main content bottom padding to clear the bottom nav on mobile */
     readonly mainPadBottomNav: "pb-20 lg:pb-0";
     /** Standard card heights for consistency */

package/dist/tokens/index.js

@@ -195,33 +195,33 @@ export const LOCALE_CONFIG = {
  */
 const THEMED = {
     // Backgrounds
-    bgPrimary: "bg-zinc-50 dark:bg-slate-950",
-    bgSecondary: "bg-zinc-100 dark:bg-slate-900",
-    bgTertiary: "bg-zinc-200 dark:bg-slate-800",
-    bgElevated: "bg-white dark:bg-slate-900/90",
-    bgInput: "bg-white dark:bg-slate-800/60",
+    bgPrimary: "bg-zinc-50 bg-[var(--appkit-color-bg)]",
+    bgSecondary: "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface)]",
+    bgTertiary: "bg-zinc-200 bg-[var(--appkit-color-surface-elevated)]",
+    bgElevated: "bg-[var(--appkit-color-surface)]",
+    bgInput: "bg-[var(--appkit-color-surface-input)]",
     // Text
-    textPrimary: "text-zinc-900 dark:text-zinc-50",
-    textSecondary: "text-zinc-500 dark:text-zinc-400",
-    textMuted: "text-zinc-400 dark:text-zinc-400",
+    textPrimary: "text-[var(--appkit-color-text)]",
+    textSecondary: "text-[var(--appkit-color-text-muted)]",
+    textMuted: "text-[var(--appkit-color-text-faint)]",
     textError: "text-red-600 dark:text-red-400",
     textSuccess: "text-emerald-600 dark:text-emerald-400",
     textOnPrimary: "text-white",
     textOnDark: "text-white",
     // Borders
-    border: "border-zinc-200 dark:border-slate-700",
-    borderSubtle: "border-zinc-100 dark:border-slate-800/60",
-    borderLight: "border-zinc-100 dark:border-slate-700/60",
+    border: "border-[var(--appkit-color-border)]",
+    borderSubtle: "border-[var(--appkit-color-border-subtle)]",
+    borderLight: "border-zinc-100 border-[var(--appkit-color-border)]/60",
     borderError: "border-red-500",
-    borderColor: "border-zinc-200 dark:border-slate-700",
+    borderColor: "border-[var(--appkit-color-border)]",
     // Interactive
-    hover: "hover:bg-zinc-100 dark:hover:bg-slate-800",
-    hoverCard: "hover:bg-zinc-50 dark:hover:bg-slate-800/60",
-    hoverBorder: "hover:border-zinc-300 dark:hover:border-slate-600",
+    hover: "hover:bg-[var(--appkit-color-surface)] hover:bg-[var(--appkit-color-surface-elevated)]",
+    hoverCard: "hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]/60",
+    hoverBorder: "hover:border-[var(--appkit-color-border)]",
     hoverText: "hover:text-zinc-800 dark:hover:text-zinc-100",
     activeRow: "bg-primary-50 dark:bg-secondary-950/30",
     focusRing: "focus:ring-primary-500 dark:focus:ring-secondary-400",
-    divider: "divide-zinc-200 dark:divide-slate-700",
+    divider: "divide-zinc-200 divide-[var(--appkit-color-border)]",
     placeholder: "placeholder-zinc-400 dark:placeholder-zinc-500",
 };
 /**
@@ -236,11 +236,11 @@ export const LAYOUT = {
     containerWidth: "max-w-[1920px]",
     contentPadding: "px-4 md:px-6 lg:px-8",
     navPadding: "px-4 sm:px-6 lg:px-8",
-    titleBarBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80",
-    navbarBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80",
-    sidebarBg: "bg-white dark:bg-slate-900 border-l border-zinc-200 dark:border-slate-800",
-    bottomNavBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-t border-zinc-200/80 dark:border-slate-800/80",
-    footerBg: "bg-zinc-50 dark:bg-slate-900 border-t border-zinc-200 dark:border-slate-800",
+    titleBarBg: "bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-b border-[var(--appkit-color-border)]",
+    navbarBg: "bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-b border-[var(--appkit-color-border)]",
+    sidebarBg: "bg-[var(--appkit-color-surface)] border-l border-[var(--appkit-color-border-subtle)]",
+    bottomNavBg: "bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-t border-[var(--appkit-color-border)]",
+    footerBg: "bg-zinc-50 bg-[var(--appkit-color-surface)] border-t border-[var(--appkit-color-border-subtle)]",
     fullScreen: "min-h-screen",
     flexCenter: "flex items-center justify-center",
     centerText: "text-center",
@@ -264,7 +264,7 @@ export const LAYOUT = {
     /** Kill bottom margin from last element in a zone */
     lastChild: "mb-0 pb-0",
     /** Combined bottom-nav bar (hidden on lg+, iPhone safe-area aware) */
-    bottomNav: "fixed bottom-0 inset-x-0 z-50 flex justify-around items-center h-16 bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 lg:hidden pb-[env(safe-area-inset-bottom)]",
+    bottomNav: "fixed bottom-0 inset-x-0 z-50 flex justify-around items-center h-16 bg-[var(--appkit-color-surface)] border-t border-[var(--appkit-color-border-subtle)] lg:hidden pb-[env(safe-area-inset-bottom)]",
     /** Main content bottom padding to clear the bottom nav on mobile */
     mainPadBottomNav: "pb-20 lg:pb-0",
     /** Standard card heights for consistency */
@@ -292,14 +292,14 @@ export const LAYOUT = {
  */
 const TYPOGRAPHY = {
     pageTitle: "text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight leading-tight",
-    pageSubtitle: "text-base md:text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed mt-1",
+    pageSubtitle: "text-base md:text-lg text-[var(--appkit-color-text-muted)] leading-relaxed mt-1",
     sectionTitle: "text-xl md:text-2xl lg:text-3xl font-semibold tracking-tight",
-    sectionSubtitle: "text-sm md:text-base lg:text-lg text-zinc-500 dark:text-zinc-400",
+    sectionSubtitle: "text-sm md:text-base lg:text-lg text-[var(--appkit-color-text-muted)]",
     cardTitle: "text-base md:text-lg font-semibold leading-snug",
     cardBody: "text-sm md:text-base leading-relaxed",
-    label: "text-sm font-medium text-zinc-700 dark:text-zinc-300",
-    caption: "text-xs text-zinc-500 dark:text-zinc-400",
-    overline: "text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400",
+    label: "text-sm font-medium text-[var(--appkit-color-text-muted)]",
+    caption: "text-xs text-[var(--appkit-color-text-muted)]",
+    overline: "text-xs font-semibold uppercase tracking-wider text-[var(--appkit-color-text-muted)]",
     h1: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight font-display",
     h2: "text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight font-display",
     h3: "text-xl md:text-2xl lg:text-3xl font-bold tracking-tight font-display",
@@ -485,10 +485,10 @@ const PAGE = {
  * Form input styles — border, bg, focus ring, error/success/disabled states.
  */
 const INPUT = {
-    base: "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3.5 py-2.5 text-base sm:text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-primary-500/40 dark:focus:ring-secondary-400/40 focus:border-primary-500 dark:focus:border-secondary-400 focus:outline-none transition-colors duration-150 placeholder:text-zinc-400 dark:placeholder:text-zinc-500",
+    base: "rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-input)] px-3.5 py-2.5 text-base sm:text-sm text-[var(--appkit-color-text)] focus:ring-2 focus:ring-primary-500/40  focus:border-primary-500  focus:outline-none transition-colors duration-150 placeholder:text-[var(--appkit-color-text-faint)]",
     error: "border-red-400 dark:border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/30 dark:bg-red-950/10",
     success: "border-emerald-400 dark:border-emerald-500 focus:ring-emerald-500/20 focus:border-emerald-500",
-    disabled: "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-400 cursor-not-allowed opacity-60",
+    disabled: "bg-zinc-50 bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text-faint)] cursor-not-allowed opacity-60",
     withIcon: "pl-10",
 };
 /**
@@ -499,17 +499,17 @@ const CARD = {
     shadow: "shadow-sm",
     shadowElevated: "shadow-lg",
     hover: "hover:shadow-md dark:hover:shadow-xl cursor-pointer transition-shadow duration-200",
-    standard: "rounded-2xl border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm hover:shadow-md transition-all duration-200",
-    elevated: "rounded-2xl bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 shadow-md hover:shadow-lg transition-shadow duration-200",
-    interactive: "rounded-2xl border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm hover:shadow-md hover:border-primary-300/60 dark:hover:border-secondary-500/60 transition-all duration-200 cursor-pointer",
-    glass: "rounded-2xl backdrop-blur-md bg-white/85 dark:bg-slate-900/85 border border-zinc-200/60 dark:border-slate-700/40 shadow-lg",
+    standard: "rounded-2xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] shadow-sm hover:shadow-md transition-all duration-200",
+    elevated: "rounded-2xl bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)] shadow-md hover:shadow-lg transition-shadow duration-200",
+    interactive: "rounded-2xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] shadow-sm hover:shadow-md hover:border-primary-300/60 dark:hover:border-secondary-500/60 transition-all duration-200 cursor-pointer",
+    glass: "rounded-2xl backdrop-blur-md bg-[color-mix(in_srgb,var(--appkit-color-surface)_85%,transparent)] border border-[var(--appkit-color-border-subtle)] shadow-lg",
     // Card anatomy tokens (Phase 20)
     /** Product card image wrapper — portrait aspect ratio */
-    image: "relative aspect-[3/4] overflow-hidden bg-zinc-100 dark:bg-zinc-800",
+    image: "relative aspect-[3/4] overflow-hidden bg-[var(--appkit-color-surface)]",
     /** Wide image wrapper — video/landscape ratio */
-    imageWide: "relative aspect-video overflow-hidden bg-zinc-100 dark:bg-zinc-800",
+    imageWide: "relative aspect-video overflow-hidden bg-[var(--appkit-color-surface)]",
     /** Square image wrapper */
-    imageSquare: "relative aspect-square overflow-hidden bg-zinc-100 dark:bg-zinc-800",
+    imageSquare: "relative aspect-square overflow-hidden bg-[var(--appkit-color-surface)]",
     /** Banner aspect ratio — 4:3 on mobile, auto on md+ */
     aspectBanner: "aspect-[4/3] md:aspect-auto",
     /** Card body — flex-column, responsive padding */
@@ -578,10 +578,10 @@ const POSITION = {
 const STATES = {
     disabled: "opacity-50 cursor-not-allowed pointer-events-none",
     loading: "opacity-75 cursor-wait",
-    readonly: "bg-zinc-100 dark:bg-slate-800 cursor-default",
+    readonly: "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface-elevated)] cursor-default",
     error: "border-red-500 dark:border-red-500",
     success: "border-green-500 dark:border-green-500",
-    focus: "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-secondary-400 dark:focus:ring-offset-slate-950",
+    focus: "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-secondary-400 dark:focus:ring-offset-[var(--appkit-color-bg)]",
 };
 /**
  * Transition classes.
@@ -610,15 +610,15 @@ const TRANSITIONS = {
  */
 const SKELETON = {
     // - Pulse (fade) variant ----------------------------------------------------------------
-    base: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60",
-    text: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60 h-4",
-    heading: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60 h-7",
-    image: "animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700/60",
-    card: "animate-pulse rounded-2xl bg-zinc-200 dark:bg-slate-700/60",
+    base: "animate-pulse rounded bg-zinc-200 bg-[var(--appkit-color-border-subtle)]",
+    text: "animate-pulse rounded bg-zinc-200 bg-[var(--appkit-color-border-subtle)] h-4",
+    heading: "animate-pulse rounded bg-zinc-200 bg-[var(--appkit-color-border-subtle)] h-7",
+    image: "animate-pulse rounded-xl bg-zinc-200 bg-[var(--appkit-color-border-subtle)]",
+    card: "animate-pulse rounded-2xl bg-zinc-200 bg-[var(--appkit-color-border-subtle)]",
     // - Shimmer (sweep) variant ----------------------------------------------------------
-    shimmer: "animate-shimmer bg-[length:400%_100%] rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800",
-    shimmerText: "animate-shimmer bg-[length:400%_100%] h-4 rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800",
-    shimmerCard: "animate-shimmer bg-[length:400%_100%] rounded-2xl bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800",
+    shimmer: "animate-shimmer bg-[length:400%_100%] rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 from-[var(--appkit-color-border-subtle)] via-[var(--appkit-color-bg)] to-[var(--appkit-color-border-subtle)]",
+    shimmerText: "animate-shimmer bg-[length:400%_100%] h-4 rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 from-[var(--appkit-color-border-subtle)] via-[var(--appkit-color-bg)] to-[var(--appkit-color-border-subtle)]",
+    shimmerCard: "animate-shimmer bg-[length:400%_100%] rounded-2xl bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 from-[var(--appkit-color-border-subtle)] via-[var(--appkit-color-bg)] to-[var(--appkit-color-border-subtle)]",
 };
 /**
  * Touch target sizes — WCAG 2.5.5 (minimum 44 × 44 px).
@@ -644,8 +644,8 @@ const TOUCH = {
  */
 const UTILITIES = {
     scrollbarHide: "scrollbar-hide [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
-    scrollbarThin: "scrollbar-thin [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-zinc-100 dark:[&::-webkit-scrollbar-track]:bg-slate-800/60 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-zinc-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-slate-500",
-    scrollbarThinX: "[&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-zinc-100 dark:[&::-webkit-scrollbar-track]:bg-slate-800/60 [&::-webkit-scrollbar-thumb]:bg-zinc-300 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-zinc-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-slate-500",
+    scrollbarThin: "scrollbar-thin [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-[var(--appkit-color-surface)] dark:[&::-webkit-scrollbar-track]:bg-slate-800/60 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-zinc-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-slate-500",
+    scrollbarThinX: "[&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-[var(--appkit-color-surface)] dark:[&::-webkit-scrollbar-track]:bg-slate-800/60 [&::-webkit-scrollbar-thumb]:bg-zinc-300 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-zinc-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-slate-500",
     safeAreaBottom: "pb-[env(safe-area-inset-bottom)]",
     safeAreaTop: "pt-[env(safe-area-inset-top)]",
     safeAreaInline: "px-[env(safe-area-inset-left)] px-[env(safe-area-inset-right)]",
@@ -661,20 +661,20 @@ const UTILITIES = {
  * Common component pattern compositions.
  */
 const PATTERNS = {
-    pageContainer: "min-h-screen bg-white dark:bg-slate-950",
+    pageContainer: "min-h-screen bg-[var(--appkit-color-bg)]",
     sectionContainer: "max-w-7xl mx-auto px-4 md:px-6 lg:px-8 py-8 lg:py-12",
-    formContainer: "bg-white dark:bg-slate-900 rounded-2xl border border-zinc-200 dark:border-slate-700 shadow-sm p-6 lg:p-8 space-y-6",
-    listItem: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-xl p-4 hover:border-zinc-300 dark:hover:border-slate-600 transition-colors",
+    formContainer: "bg-[var(--appkit-color-surface)] rounded-2xl border border-[var(--appkit-color-border)] shadow-sm p-6 lg:p-8 space-y-6",
+    listItem: "bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)] rounded-xl p-4 hover:border-[var(--appkit-color-border)] transition-colors",
     linkDefault: "text-primary-600 dark:text-secondary-400 hover:text-primary-500 dark:hover:text-secondary-300 transition-colors underline-offset-2 hover:underline",
-    iconButton: "p-2 rounded-lg transition-colors hover:bg-zinc-100 dark:hover:bg-slate-800 active:bg-zinc-200 dark:active:bg-slate-700 min-h-[44px] min-w-[44px] flex items-center justify-center",
+    iconButton: "p-2 rounded-lg transition-colors hover:bg-[var(--appkit-color-surface)] hover:bg-[var(--appkit-color-surface-elevated)] active:bg-zinc-200 dark:active:bg-slate-700 min-h-[44px] min-w-[44px] flex items-center justify-center",
     modalOverlay: "fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50",
-    modalContent: "bg-white dark:bg-slate-900 rounded-2xl border border-zinc-200 dark:border-slate-700 shadow-xl max-w-lg w-full mx-4 overflow-hidden",
-    divider: "border-t border-zinc-200 dark:border-slate-700",
-    emptyState: "flex flex-col items-center justify-center py-12 text-center text-zinc-500 dark:text-zinc-400",
+    modalContent: "bg-[var(--appkit-color-surface)] rounded-2xl border border-[var(--appkit-color-border)] shadow-xl max-w-lg w-full mx-4 overflow-hidden",
+    divider: "border-t border-[var(--appkit-color-border)]",
+    emptyState: "flex flex-col items-center justify-center py-12 text-center text-[var(--appkit-color-text-muted)]",
 };
 /** Icon colour variants and sizes. */
 const ICON = {
-    muted: "text-zinc-400 dark:text-zinc-400",
+    muted: "text-[var(--appkit-color-text-faint)]",
     primary: "text-primary-600 dark:text-secondary-400",
     success: "text-emerald-500 dark:text-emerald-400",
     danger: "text-red-500 dark:text-red-400",
@@ -689,7 +689,7 @@ const ICON = {
 /** Horizontal tab active / inactive states. */
 const TAB = {
     active: "border-b-2 border-primary-600 dark:border-secondary-400 text-primary-600 dark:text-secondary-400 font-semibold",
-    inactive: "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300",
+    inactive: "border-transparent text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text-muted)]",
 };
 /**
  * Motion tokens — respect prefers-reduced-motion via motion-safe: prefix.
@@ -719,14 +719,14 @@ const TEXT = {
     label: "text-xs font-medium uppercase tracking-wide",
     price: "text-lg sm:text-xl font-bold tabular-nums",
     priceLg: "text-2xl sm:text-3xl font-bold tabular-nums",
-    muted: "text-zinc-500 dark:text-zinc-400",
+    muted: "text-[var(--appkit-color-text-muted)]",
     error: "text-red-600 dark:text-red-400",
     success: "text-green-600 dark:text-green-400",
 };
 /** Star rating colours. */
 const RATING = {
     filled: "text-yellow-400",
-    empty: "text-zinc-300 dark:text-zinc-600",
+    empty: "text-[var(--appkit-color-text-faint)]",
 };
 // THEME_CONSTANTS deleted 2026-06-17 in Phase 8 of the Three-Layer Style
 // System refactor. Use primitive variant props (<Card>, <Section>, <Stack>,

package/dist/ui/DataTable.js

@@ -100,7 +100,7 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
     if (data.length === 0) {
         if (emptyState)
             return _jsx(_Fragment, { children: emptyState });
-        return (_jsx(Div, { className: "appkit-data-table__wrapper", children: _jsx(Div, { className: "appkit-data-table__empty", children: _jsxs(Div, { className: "text-center", padding: "x-md", children: [emptyIcon ?? (_jsx("svg", { className: "mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) })), _jsx(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle ?? noDataTitle }), _jsx(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage ?? noDataDescription })] }) }) }));
+        return (_jsx(Div, { className: "appkit-data-table__wrapper", children: _jsx(Div, { className: "appkit-data-table__empty", children: _jsxs(Div, { className: "text-center", padding: "x-md", children: [emptyIcon ?? (_jsx("svg", { className: "mx-auto h-12 w-12 text-[var(--appkit-color-text-faint)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) })), _jsx(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle ?? noDataTitle }), _jsx(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage ?? noDataDescription })] }) }) }));
     }
     const renderViewToggle = () => {
         if (!showViewToggle)
@@ -134,7 +134,7 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                                                         ? "ascending"
                                                         : "descending"
                                                     : "none"
-                                                : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && handleSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { "aria-hidden": "true", color: "faint", children: sortKey === col.key ? (sortDirection === "asc" ? ("↑") : ("↓")) : (_jsx(Span, { className: "opacity-30", children: "\u2195" })) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
+                                                : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && handleSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { "aria-hidden": "true", color: "faint", children: sortKey === col.key ? (sortDirection === "asc" ? ("↑") : ("↓")) : (_jsx(Span, { className: "opacity-30", children: "\u2195" })) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 divide-[var(--appkit-color-border)]", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
                                         "appkit-data-table__row",
                                         striped && index % 2 === 1
                                             ? "appkit-data-table__row--striped"
@@ -159,7 +159,7 @@ function DataTableTableView({ columns, paginatedData, keyExtractor, selectable,
                                         ? sortKey === col.key
                                             ? sortDirection === "asc" ? "ascending" : "descending"
                                             : "none"
-                                        : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { "aria-hidden": "true", color: "faint", children: sortKey === col.key ? (sortDirection === "asc" ? "↑" : "↓") : _jsx(Span, { className: "opacity-30", children: "\u2195" }) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
+                                        : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { "aria-hidden": "true", color: "faint", children: sortKey === col.key ? (sortDirection === "asc" ? "↑" : "↓") : _jsx(Span, { className: "opacity-30", children: "\u2195" }) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 divide-[var(--appkit-color-border)]", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
                                 "appkit-data-table__row",
                                 striped && index % 2 === 1 ? "appkit-data-table__row--striped" : "",
                                 onRowClick ? "appkit-data-table__row--clickable" : "",

package/dist/ui/components/Avatar.js

@@ -36,6 +36,6 @@ export function Avatar({ src, alt, fallback, name, size = "md", className = "",
 export function AvatarGroup({ avatars, max = 4, size = "sm", className = "", }) {
     const visible = avatars.slice(0, max);
     const extra = avatars.length - visible.length;
-    return (_jsxs("div", { className: [UI_AVATAR.group, className].filter(Boolean).join(" "), "data-section": "avatar-div-453", children: [visible.map((avatar, index) => (_jsx(Avatar, { ...avatar, size: size, className: "ring-2 ring-white dark:ring-slate-900" }, `${avatar.src ?? avatar.name ?? "avatar"}-${index}`))), extra > 0 ? (_jsxs("span", { className: [UI_AVATAR.overflow, UI_AVATAR.sizes[size]].join(" "), children: ["+", extra] })) : null] }));
+    return (_jsxs("div", { className: [UI_AVATAR.group, className].filter(Boolean).join(" "), "data-section": "avatar-div-453", children: [visible.map((avatar, index) => (_jsx(Avatar, { ...avatar, size: size, className: "ring-2 ring-white ring-[var(--appkit-color-bg)]" }, `${avatar.src ?? avatar.name ?? "avatar"}-${index}`))), extra > 0 ? (_jsxs("span", { className: [UI_AVATAR.overflow, UI_AVATAR.sizes[size]].join(" "), children: ["+", extra] })) : null] }));
 }
 export default Avatar;

package/dist/ui/components/BaseListingCard.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Span } from "./Typography";
 function BaseListingCardRoot({ className = "", isSelected, isDisabled, variant = "grid", onClick, onMouseDown, onMouseUp, onMouseLeave, onTouchStart, onTouchEnd, children, }) {
     return (_jsx("div", { onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseLeave: onMouseLeave, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, className: [
-            "group relative w-full min-w-0 overflow-hidden rounded-xl border bg-white dark:bg-zinc-900 transition-shadow",
+            "group relative w-full min-w-0 overflow-hidden rounded-xl border bg-[var(--appkit-color-surface)] transition-shadow",
             variant === "list" ? "flex flex-row items-stretch" : "flex flex-col",
             isSelected
                 ? "border-primary outline outline-2 outline-primary shadow-sm"
-                : "border-zinc-200 dark:border-zinc-700 shadow-sm hover:shadow-md",
+                : "border-[var(--appkit-color-border)] shadow-sm hover:shadow-md",
             isDisabled ? "opacity-60" : "",
             onClick ? "cursor-pointer" : "",
             className,
@@ -17,7 +17,7 @@ function BaseListingCardRoot({ className = "", isSelected, isDisabled, variant =
 function BaseListingCardHero({ aspect, variant = "grid", className = "", children, onMouseEnter, onMouseLeave, }) {
     if (variant === "list") {
         return (_jsx("div", { className: [
-                "relative overflow-hidden bg-zinc-100 dark:bg-zinc-800 flex-shrink-0",
+                "relative overflow-hidden bg-[var(--appkit-color-surface)] flex-shrink-0",
                 "w-20 h-20 sm:w-28 sm:h-28",
                 className,
             ]
@@ -30,7 +30,7 @@ function BaseListingCardHero({ aspect, variant = "grid", className = "", childre
             ? "aspect-[4/3]"
             : `aspect-[${aspect}]`;
     return (_jsx("div", { className: [
-            "relative overflow-hidden bg-zinc-100 dark:bg-zinc-800 flex-shrink-0",
+            "relative overflow-hidden bg-[var(--appkit-color-surface)] flex-shrink-0",
             aspectClass,
             className,
         ]
@@ -56,7 +56,7 @@ function BaseListingCardCheckbox({ selected, onSelect, label, position = "top-2
             "focus-visible:ring-2 focus-visible:ring-primary/50",
             selected
                 ? "bg-primary border-primary shadow-sm"
-                : "bg-white/80 border-zinc-300/80 hover:border-primary/60 hover:bg-white dark:bg-zinc-800/80 dark:border-zinc-600",
+                : "bg-white/80 border-zinc-300/80 hover:border-primary/60 hover:bg-[var(--appkit-color-surface)]/80 border-[var(--appkit-color-border)]",
             position,
             className,
         ]
@@ -71,9 +71,9 @@ function BaseListingCardIconOverlay({ groupIcon, sublistingIcon, position = "top
         if (isMediaUrl) {
             return (
             // eslint-disable-next-line @next/next/no-img-element
-            _jsx("img", { src: icon, alt: "", className: "w-5 h-5 rounded-full border border-white/80 shadow-sm bg-white dark:bg-zinc-900 object-cover" }, key));
+            _jsx("img", { src: icon, alt: "", className: "w-5 h-5 rounded-full border border-white/80 shadow-sm bg-[var(--appkit-color-surface)] object-cover" }, key));
         }
-        return (_jsx(Span, { size: "sm", className: "inline-flex items-center justify-center w-5 h-5 rounded-full border border-white/80 bg-white/95 dark:bg-zinc-900/95 shadow-sm leading-none", children: icon }, key));
+        return (_jsx(Span, { size: "sm", className: "inline-flex items-center justify-center w-5 h-5 rounded-full border border-white/80 bg-white/95 bg-[var(--appkit-color-surface)]/95 shadow-sm leading-none", children: icon }, key));
     };
     return (_jsxs("div", { className: `absolute z-10 flex items-center gap-1 ${position}`, "aria-hidden": "true", children: [groupIcon && renderOne(groupIcon, "group"), sublistingIcon && renderOne(sublistingIcon, "sublisting")] }));
 }

package/dist/ui/components/Button.js

@@ -80,9 +80,9 @@ const BUTTON_TEXT_COLOR_MAP = {
 };
 const BUTTON_BORDER_MAP = {
     none: "",
-    default: "border border-zinc-200 dark:border-slate-700",
-    subtle: "border border-zinc-100 dark:border-slate-800/60",
-    strong: "border border-zinc-300 dark:border-slate-600",
+    default: "border border-[var(--appkit-color-border)]",
+    subtle: "border border-[var(--appkit-color-border-subtle)]",
+    strong: "border border-[var(--appkit-color-border)]",
 };
 const BUTTON_PADDING_Y_MAP = {
     none: "",

package/dist/ui/components/DetailPageGallery.js

@@ -24,7 +24,7 @@ export function DetailPageGallery({ images, title, aspect = "square", fallback,
     if (!images.length) {
         return (_jsx(Div, { className: [
                 "appkit-detail-gallery",
-                "w-full overflow-hidden rounded-2xl bg-zinc-100 dark:bg-zinc-800",
+                "w-full overflow-hidden rounded-2xl bg-[var(--appkit-color-surface)]",
                 ASPECT_CLASS[aspect],
                 className,
             ]
@@ -39,12 +39,12 @@ export function DetailPageGallery({ images, title, aspect = "square", fallback,
         ]
             .filter(Boolean)
             .join(" "), children: [_jsx(Div, { className: [
-                    "w-full overflow-hidden rounded-2xl bg-zinc-100 dark:bg-zinc-800",
+                    "w-full overflow-hidden rounded-2xl bg-[var(--appkit-color-surface)]",
                     ASPECT_CLASS[aspect],
                 ].join(" "), children: _jsx("img", { src: active.url, alt: active.alt ?? title ?? "", className: "h-full w-full object-cover" }) }), images.length > 1 ? (_jsx(Div, { className: `flex gap-2 ${__O.xAuto} pb-1`, children: images.map((img, idx) => (_jsx("button", { type: "button", "aria-label": `View image ${idx + 1}`, onClick: () => setActiveIndex(idx), className: [
                         "flex-shrink-0 h-16 w-16 overflow-hidden rounded-md border-2 transition-colors",
                         idx === activeIndex
                             ? "border-[var(--appkit-color-primary)]"
                             : "border-transparent hover:border-zinc-300 dark:hover:border-zinc-600",
-                    ].join(" "), children: _jsx("img", { src: img.url, alt: img.alt ?? `${title ?? ""} ${idx + 1}`, className: "h-full w-full object-cover" }) }, img.url + idx))) })) : null, active.caption ? (_jsx(Div, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: active.caption })) : null] }));
+                    ].join(" "), children: _jsx("img", { src: img.url, alt: img.alt ?? `${title ?? ""} ${idx + 1}`, className: "h-full w-full object-cover" }) }, img.url + idx))) })) : null, active.caption ? (_jsx(Div, { className: "text-xs text-[var(--appkit-color-text-muted)]", children: active.caption })) : null] }));
 }

package/dist/ui/components/DetailPageHero.js

@@ -18,5 +18,5 @@ export function DetailPageHero({ title, eyebrow, subtitle, metaRow, description,
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: [mediaSlot ? _jsx(Div, { className: "w-full md:w-2/5", children: mediaSlot }) : null, _jsxs(Stack, { gap: "md", className: "flex-1 min-w-0", children: [eyebrow ? (_jsx(Div, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: eyebrow })) : null, _jsx(Heading, { level: 1, className: "text-3xl font-semibold text-zinc-900 dark:text-zinc-100", children: title }), subtitle ? (_jsx(Text, { size: "lg", color: "muted", children: subtitle })) : null, metaRow ? _jsx(Row, { gap: "sm", align: "center", className: "flex-wrap", children: metaRow }) : null, description ? (_jsx(Text, { className: "whitespace-pre-line", children: description })) : null, actionsSlot, belowActions] })] }));
+            .join(" "), children: [mediaSlot ? _jsx(Div, { className: "w-full md:w-2/5", children: mediaSlot }) : null, _jsxs(Stack, { gap: "md", className: "flex-1 min-w-0", children: [eyebrow ? (_jsx(Div, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: eyebrow })) : null, _jsx(Heading, { level: 1, className: "text-3xl font-semibold text-[var(--appkit-color-text)]", children: title }), subtitle ? (_jsx(Text, { size: "lg", color: "muted", children: subtitle })) : null, metaRow ? _jsx(Row, { gap: "sm", align: "center", className: "flex-wrap", children: metaRow }) : null, description ? (_jsx(Text, { className: "whitespace-pre-line", children: description })) : null, actionsSlot, belowActions] })] }));
 }

package/dist/ui/components/DetailPageTabs.js

@@ -29,14 +29,14 @@ export function DetailPageTabs({ tabs, activeTab: activeTabProp, defaultTab, onT
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: [_jsx(Div, { role: "tablist", "aria-orientation": "horizontal", className: `flex gap-2 border-b border-zinc-200 dark:border-zinc-700 ${__O.xAuto}`, children: tabs.map((tab) => {
+            .join(" "), children: [_jsx(Div, { role: "tablist", "aria-orientation": "horizontal", className: `flex gap-2 border-b border-[var(--appkit-color-border)] ${__O.xAuto}`, children: tabs.map((tab) => {
                     const isActive = tab.id === active?.id;
                     return (_jsxs("button", { type: "button", role: "tab", "aria-selected": isActive, "aria-controls": `detail-tab-panel-${tab.id}`, id: `detail-tab-trigger-${tab.id}`, disabled: tab.disabled, onClick: () => handleChange(tab.id), className: [
                             "flex-shrink-0 px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
                             isActive
-                                ? "border-[var(--appkit-color-primary)] text-zinc-900 dark:text-zinc-100"
-                                : "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200",
+                                ? "border-[var(--appkit-color-primary)] text-[var(--appkit-color-text)]"
+                                : "border-transparent text-[var(--appkit-color-text-muted)] hover:text-zinc-700 hover:text-[var(--appkit-color-text-muted)]",
                             tab.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-                        ].join(" "), children: [tab.label, typeof tab.count === "number" ? (_jsx(Span, { size: "xs", className: "ml-2 inline-flex items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5", children: tab.count })) : null] }, tab.id));
+                        ].join(" "), children: [tab.label, typeof tab.count === "number" ? (_jsx(Span, { size: "xs", className: "ml-2 inline-flex items-center justify-center rounded-full bg-[var(--appkit-color-surface)] px-2 py-0.5", children: tab.count })) : null] }, tab.id));
                 }) }), active ? (_jsx(Div, { role: "tabpanel", id: `detail-tab-panel-${active.id}`, "aria-labelledby": `detail-tab-trigger-${active.id}`, children: active.content })) : null] }));
 }

package/dist/ui/components/FilterChipGroup.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div } from "./Div";
 import { Text } from "./Typography";
 const ACTIVE_CLS = "bg-[var(--appkit-color-primary)] text-white border-[var(--appkit-color-primary)]";
-const INACTIVE_CLS = "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800";
+const INACTIVE_CLS = "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]";
 const CHIP_BASE_CLS = "rounded-full px-3 py-1 text-xs font-medium border transition-colors";
-const LABEL_CLS = "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400";
+const LABEL_CLS = "text-xs font-semibold uppercase tracking-widest text-[var(--appkit-color-text-muted)]";
 export function FilterChipGroup({ label, tabs, value, onChange, allId = "All", className, }) {
     const current = value || allId;
     return (_jsxs(Div, { className: `space-y-2 ${className ?? ""}`.trim(), children: [_jsx(Text, { as: "p", className: LABEL_CLS, children: label }), _jsx(Div, { className: "flex flex-wrap gap-2", children: tabs.map((tab) => {

package/dist/ui/components/Input.js

@@ -27,6 +27,6 @@ export const Input = React.forwardRef(function Input({ label, error, helperText,
     }
     const adornment = rightIcon ??
         (success && !error ? (_jsx("svg", { className: CLS_INPUT_SUCCESS_ICON, viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.704 5.29a1 1 0 010 1.42l-7.2 7.2a1 1 0 01-1.415 0l-3.2-3.2a1 1 0 111.414-1.42l2.493 2.494 6.493-6.494a1 1 0 011.415 0z", clipRule: "evenodd" }) })) : null);
-    return (_jsxs("div", { className: "w-full", "data-section": "input-div-527", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsxs("div", { className: "relative", "data-section": "input-div-528", children: [icon && (_jsx(Div, { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "input-div-529", children: icon })), _jsx("input", { ...props, ref: ref, id: inputId, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: inputClassName }), adornment && (_jsx(Div, { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "input-div-530", children: adornment }))] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "mt-1.5", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
+    return (_jsxs("div", { className: "w-full", "data-section": "input-div-527", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsxs("div", { className: "relative", "data-section": "input-div-528", children: [icon && (_jsx(Div, { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-[var(--appkit-color-text-faint)]", "data-section": "input-div-529", children: icon })), _jsx("input", { ...props, ref: ref, id: inputId, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: inputClassName }), adornment && (_jsx(Div, { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-[var(--appkit-color-text-faint)]", "data-section": "input-div-530", children: adornment }))] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "mt-1.5", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
 });
 Input.displayName = "Input";

package/dist/ui/components/Layout.d.ts

@@ -219,7 +219,7 @@ export interface StackProps extends React.HTMLAttributes<HTMLElement>, SurfacePr
     /**
      * Render a themed top-border between adjacent children. `true` / `"default"`
      * uses the active theme's border colour; `"subtle"` uses border-subtle.
-     * Replaces the recurrent `divide-y divide-zinc-200 dark:divide-zinc-700`
+     * Replaces the recurrent `divide-y divide-[var(--appkit-color-border)]`
      * className pattern (which bypasses theme tokens).
      */
     divide?: boolean | "default" | "subtle";
@@ -284,7 +284,7 @@ export interface RowProps extends React.HTMLAttributes<HTMLElement>, SurfaceProp
     /**
      * Render a themed left-border between adjacent children. `true` / `"default"`
      * uses the active theme's border colour; `"subtle"` uses border-subtle.
-     * Replaces the recurrent `divide-x divide-zinc-200 dark:divide-zinc-700`
+     * Replaces the recurrent `divide-x divide-[var(--appkit-color-border)]`
      * className pattern (which bypasses theme tokens).
      */
     divide?: boolean | "default" | "subtle";

package/dist/ui/components/ListingFilterDrawer.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { X } from "lucide-react";
 import { Button } from "./Button";
 import { Span } from "./Typography";
-const CLS_CLEAR_BTN = "text-xs text-zinc-500 hover:text-error dark:text-zinc-400 transition-colors min-h-0 h-auto p-0";
+const CLS_CLEAR_BTN = "text-xs text-[var(--appkit-color-text-muted)] hover:text-error text-[var(--appkit-color-text-muted)] transition-colors min-h-0 h-auto p-0";
 export function ListingFilterDrawer({ open, onClose, onApply, onClear, activeCount, children, }) {
     if (!open)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx(Span, { size: "base", weight: "semibold", className: "text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeCount > 0 && (_jsx(Button, { variant: "ghost", type: "button", onClick: onClear, className: CLS_CLEAR_BTN, children: "Clear all" })), _jsx(Button, { variant: "ghost", type: "button", onClick: onClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors min-h-0 h-auto", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: children }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs(Button, { type: "button", onClick: onApply, className: "w-full", children: ["Apply Filters", activeCount > 0 ? ` (${activeCount})` : ""] }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-[var(--appkit-color-surface)] shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[var(--appkit-color-border)] px-4 py-3.5", children: [_jsx(Span, { size: "base", weight: "semibold", className: "text-[var(--appkit-color-text)]", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeCount > 0 && (_jsx(Button, { variant: "ghost", type: "button", onClick: onClear, className: CLS_CLEAR_BTN, children: "Clear all" })), _jsx(Button, { variant: "ghost", type: "button", onClick: onClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)] transition-colors min-h-0 h-auto", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: children }), _jsx("div", { className: "border-t border-[var(--appkit-color-border)] px-4 py-3.5", children: _jsxs(Button, { type: "button", onClick: onApply, className: "w-full", children: ["Apply Filters", activeCount > 0 ? ` (${activeCount})` : ""] }) })] })] }));
 }

package/dist/ui/components/ListingToolbar.js

@@ -4,8 +4,8 @@ import { CheckSquare, Search, SlidersHorizontal, LayoutGrid, List, Table2, Rotat
 import { SortDropdown } from "./SortDropdown";
 import { Div } from "./Div";
 import { Span } from "./Typography";
-const CLS_CLEAR_LINK = "text-xs text-zinc-400 hover:text-error dark:text-zinc-400 transition-colors";
-const CLS_CLEAR_ICON_BTN = "flex shrink-0 items-center justify-center rounded-lg border border-zinc-300 dark:border-slate-600 p-1.5 sm:p-2 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:text-error dark:hover:text-error transition-colors";
+const CLS_CLEAR_LINK = "text-xs text-zinc-400 hover:text-error text-[var(--appkit-color-text-muted)] transition-colors";
+const CLS_CLEAR_ICON_BTN = "flex shrink-0 items-center justify-center rounded-lg border border-[var(--appkit-color-border)] p-1.5 sm:p-2 text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] hover:text-error dark:hover:text-error transition-colors";
 const DEFAULT_LABELS = {
     search: "Search",
     filters: "Filters",
@@ -21,7 +21,7 @@ const DEFAULT_LABELS = {
 };
 const VIEW_BTN_BASE = "p-1.5 sm:p-2 transition-colors";
 const VIEW_BTN_ACTIVE = "bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white";
-const VIEW_BTN_INACTIVE = "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400";
+const VIEW_BTN_INACTIVE = "text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)]";
 export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue = "", searchPlaceholder = "Search…", onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view = "grid", onViewChange, hideViewToggle = false, showTableView = false, onResetAll, hasActiveState = false, bulkMode = false, bulkSelectedCount = 0, bulkTotalCount = 0, onBulkSelectAll, onBulkClear, toggles, extra, labels, className = "", }) {
     const l = { ...DEFAULT_LABELS, ...labels };
     const handleKeyDown = (e) => {
@@ -33,9 +33,9 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
         }
     };
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
-    return (_jsx("div", { "data-testid": "listing-toolbar", className: `sticky top-[var(--header-height,0px)] z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2 px-3 sm:py-2.5 sm:px-4 ${className}`, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2.5", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-3 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [allSelected
+    return (_jsx("div", { "data-testid": "listing-toolbar", className: `sticky top-[var(--header-height,0px)] z-20 border-b border-[var(--appkit-color-border)] bg-white/95 bg-[var(--appkit-color-surface)]/95 backdrop-blur-sm py-2 px-3 sm:py-2.5 sm:px-4 ${className}`, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2.5", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-3 py-1.5 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [allSelected
                                     ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary,theme(colors.violet.600))]" })
-                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900 min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary,theme(colors.violet.600))] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-zinc-500 dark:text-zinc-400", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
+                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary,theme(colors.violet.600))] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
                                     ? "border-transparent bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white"
-                                    : "border-zinc-300 dark:border-slate-600 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: t.label }, t.label))) })), extra] })] }) }));
+                                    : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]"}`, children: t.label }, t.label))) })), extra] })] }) }));
 }

package/dist/ui/components/LoginRequiredModal.js

@@ -7,5 +7,5 @@ import { Text } from "./Typography";
 import { ROUTES } from "../../next/routing/route-map";
 export function LoginRequiredModal({ isOpen, onClose, message = "You need to be signed in to continue. Please log in or create an account.", loginHref, }) {
     const href = loginHref ?? String(ROUTES.AUTH.LOGIN);
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Sign in required", size: "sm", actions: _jsxs(Div, { className: "flex gap-3 justify-end", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: "Cancel" }), _jsx(Button, { variant: "primary", size: "sm", onClick: () => { window.location.href = href; }, children: "Go to Login" })] }), children: _jsx(Text, { className: "text-sm text-zinc-600 dark:text-zinc-300", children: message }) }));
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Sign in required", size: "sm", actions: _jsxs(Div, { className: "flex gap-3 justify-end", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: "Cancel" }), _jsx(Button, { variant: "primary", size: "sm", onClick: () => { window.location.href = href; }, children: "Go to Login" })] }), children: _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: message }) }));
 }