medusa-storefront-theme-base 1.1.0 → 2.0.0

package/src/create-site-theme.ts

@@ -0,0 +1,299 @@
+import { mergeButtonTheme, pillButtonTheme, type ButtonTheme } from "./button-theme";
+import {
+  createSiteAccountTheme,
+  createSiteCartTheme,
+  createSiteCheckoutUiTheme,
+  createSiteContactTheme,
+  createSiteHelpTheme,
+  createSiteHomeTheme,
+  createSiteOrderTheme,
+  createSiteProductCardTheme,
+  createSiteProductTheme,
+  createSiteStoreTheme,
+} from "./create-site-theme-classes";
+export { createSiteHomeTheme } from "./create-site-theme-classes";
+export type { StorefrontThemeClassOverrides } from "./theme-class-names";
+import { mergeThemeSlots } from "./theme-slot-merge";
+import {
+  themeClassNames,
+  type HomeThemeClassNames,
+  type LayoutThemeClassNames,
+  type NotFoundThemeClassNames,
+  type SitePageThemeClassNames,
+  type StorefrontThemeClassOverrides,
+  type StorefrontThemeClasses,
+} from "./theme-class-names";
+import {
+  defaultFormThemeClassNames,
+  mergeFormTheme,
+  type FormThemeClassNames,
+  type SiteThemeInputTokens,
+} from "./form-theme";
+import {
+  resolveInputColors,
+  themeCssClasses,
+  type StorefrontTheme,
+  type StorefrontThemeColors,
+} from "./storefront-theme";
+
+/** Minimal palette — edit only these in compositions/theme/tokens.ts */
+export type SiteThemePalette = {
+  primary: string;
+  primaryHover: string;
+  secondary: string;
+  secondaryHover?: string;
+  background: string;
+  backgroundAlt: string;
+  surface?: string;
+  text: string;
+  textMuted: string;
+  textOnPrimary?: string;
+  footer?: string;
+  header?: string;
+  /** Header chrome text — defaults to `text` */
+  headerText?: string;
+  /** Footer body/link text — defaults to `textOnPrimary` */
+  footerText?: string;
+  /** Footer muted copy — defaults to `secondary` */
+  footerTextMuted?: string;
+  /** Footer section titles — defaults to `secondary` */
+  footerHeading?: string;
+  border?: string;
+  /** Optional — defaults derived from palette (text, border, primary focus) */
+  input?: SiteThemeInputTokens;
+};
+
+export type SiteThemeFonts = {
+  body: string;
+  heading?: string;
+};
+
+export type DefineSiteThemeInput = {
+  palette: SiteThemePalette;
+  fonts: SiteThemeFonts;
+  /** Per-site form field class overrides */
+  form?: Partial<FormThemeClassNames>;
+  /** Per-area className slot overrides (account, cart, product, …) */
+  classOverrides?: StorefrontThemeClassOverrides;
+};
+
+/** Shared Tailwind fragments (CSS vars) — used by buttons and pages */
+export const themeUi = {
+  btn: {
+    primary:
+      "bg-[var(--sf-color-primary)] text-[var(--sf-color-text-on-primary)] hover:bg-[var(--sf-color-primary-hover)]",
+    secondary:
+      "bg-[var(--sf-color-secondary)] text-[var(--sf-color-text)] hover:bg-[var(--sf-color-secondary-hover)]",
+    outline:
+      "bg-transparent text-[var(--sf-color-text)] border-2 border-[var(--sf-color-text)] hover:bg-[var(--sf-color-text)] hover:text-[var(--sf-color-text-on-primary)]",
+    ghost:
+      "bg-transparent text-[var(--sf-color-text)] hover:bg-[color-mix(in_srgb,var(--sf-color-text-muted)_8%,transparent)]",
+    danger:
+      "bg-[var(--sf-color-text)] text-[var(--sf-color-text-on-primary)] hover:bg-black",
+    link: "text-[var(--sf-color-link)] hover:text-[var(--sf-color-link-hover)] underline-offset-4 hover:underline h-auto p-0",
+  },
+  page: themeCssClasses,
+  input: themeCssClasses.input,
+  layout: themeClassNames.layout,
+} as const;
+
+export function paletteToThemeColors(palette: SiteThemePalette): StorefrontThemeColors {
+  return {
+    primary: palette.primary,
+    primaryHover: palette.primaryHover,
+    secondary: palette.secondary,
+    secondaryHover: palette.secondaryHover ?? palette.secondary,
+    background: palette.background,
+    backgroundAlt: palette.backgroundAlt,
+    surface: palette.surface ?? "#FFFFFF",
+    text: palette.text,
+    textMuted: palette.textMuted,
+    textOnPrimary: palette.textOnPrimary ?? "#FFFFFF",
+    link: palette.primary,
+    linkHover: palette.secondary,
+    footerBg: palette.footer ?? "#04122C",
+    headerBg: palette.header ?? "#FFFFFF",
+    navText: palette.textMuted,
+    navActive: palette.primary,
+    headerText: palette.headerText ?? palette.text,
+    footerText: palette.footerText ?? palette.textOnPrimary ?? "#FFFFFF",
+    footerTextMuted: palette.footerTextMuted ?? palette.textMuted,
+    footerHeading:
+      palette.footerHeading ?? palette.footerText ?? palette.textOnPrimary ?? "#FFFFFF",
+    border: palette.border ?? "#E5E7EB",
+  };
+}
+
+export function createSiteTheme({
+  palette,
+  fonts,
+}: DefineSiteThemeInput): StorefrontTheme {
+  const colors = paletteToThemeColors(palette);
+  return {
+    colors,
+    fonts: {
+      body: fonts.body,
+      heading: fonts.heading ?? fonts.body,
+    },
+    input: palette.input
+      ? resolveInputColors(colors, palette.input)
+      : undefined,
+  };
+}
+
+export function createSiteFormTheme(
+  overrides?: Partial<FormThemeClassNames>,
+): FormThemeClassNames {
+  return mergeFormTheme(defaultFormThemeClassNames, overrides);
+}
+
+export function createSiteButtonTheme(): ButtonTheme {
+  return mergeButtonTheme(pillButtonTheme, {
+    variants: {
+      primary: `${themeUi.btn.primary} shadow-md hover:opacity-95`,
+      secondary: `${themeUi.btn.secondary} shadow-sm border border-[var(--sf-color-secondary-hover)]/40`,
+      outline: themeUi.btn.outline,
+      ghost: themeUi.btn.ghost,
+      danger: `${themeUi.btn.danger} shadow-sm`,
+      link: themeUi.btn.link,
+    },
+  });
+}
+
+export function createSiteLayoutTheme(): LayoutThemeClassNames {
+  const p = themeUi.page;
+  const base = themeUi.layout;
+  return {
+    ...base,
+    body: `${base.body} ${p.pageBackground} ${p.bodyFont} ${p.text}`.trim(),
+    main: `${base.main} ${p.pageBackground}`.trim(),
+    checkoutShell: `${base.checkoutShell} ${p.pageBackground}`.trim(),
+  };
+}
+
+export function createSiteNotFoundTheme(): NotFoundThemeClassNames {
+  return {
+    ...themeClassNames.notFound,
+    root: `${themeClassNames.notFound.root} ${themeUi.page.pageBackground}`.trim(),
+  };
+}
+
+export function createSitePageTheme(): SitePageThemeClassNames {
+  const p = themeUi.page;
+  const pages = themeClassNames.pages;
+
+  return {
+    checkout: { ...pages.checkout },
+    returnIneligible: { ...pages.returnIneligible },
+    pageWrappers: {
+      legal: `min-h-screen ${p.pageBackground} pb-16 sm:pb-24`,
+      resetPassword: `min-h-screen flex items-center justify-center ${p.pageBackgroundAlt} px-4`,
+      returnRequest: `${p.pageBackground} min-h-screen`,
+      exchangeRequest: `${p.pageBackground} min-h-screen`,
+    },
+    legal: {
+      pageRoot: `min-h-screen ${p.pageBackground} pb-16 sm:pb-24`,
+      header: `bg-[var(--sf-color-footer-bg)] text-white py-16 sm:py-24 mb-12 relative overflow-hidden`,
+      headerBlurPrimary:
+        "absolute top-0 left-0 w-96 h-96 bg-[var(--sf-color-primary)] opacity-10 rounded-full -ml-48 -mt-48 blur-3xl",
+      headerBlurSecondary:
+        "absolute bottom-0 right-0 w-64 h-64 bg-blue-500 opacity-10 rounded-full -mr-32 -mb-32 blur-3xl",
+      headerTitle: `text-3xl sm:text-5xl font-extrabold mb-4 tracking-tight ${p.heading}`,
+      headerSubtitle:
+        "text-gray-300 text-base sm:text-xl max-w-2xl mx-auto leading-relaxed font-light",
+      contentCard: `${p.surface} rounded-3xl shadow-xl shadow-gray-200/50 border ${p.border} overflow-hidden`,
+      contentCardFlat: `${p.surface} rounded-3xl shadow-xl shadow-gray-200/50 border ${p.border} p-5 sm:p-10 md:p-16 space-y-10 sm:space-y-12`,
+      sectionNumberPrimary:
+        "flex-shrink-0 w-10 h-10 sm:w-14 sm:h-14 bg-blue-50 text-[var(--sf-color-footer-bg)] rounded-2xl flex items-center justify-center font-bold text-xl sm:text-2xl shadow-sm",
+      sectionNumberAccent:
+        "flex-shrink-0 w-10 h-10 sm:w-14 sm:h-14 bg-red-50 text-[var(--sf-color-primary)] rounded-2xl flex items-center justify-center font-bold text-xl sm:text-2xl shadow-sm",
+      sectionNumberPink:
+        "flex-shrink-0 w-10 h-10 sm:w-14 sm:h-14 bg-pink-50 text-pink-500 rounded-2xl flex items-center justify-center font-bold text-xl sm:text-2xl shadow-sm",
+      sectionNumberYellow:
+        "flex-shrink-0 w-10 h-10 sm:w-14 sm:h-14 bg-yellow-50 text-yellow-600 rounded-2xl flex items-center justify-center font-bold text-xl sm:text-2xl shadow-sm",
+      sectionHeading: `text-2xl font-bold mb-4 ${p.heading}`,
+      sectionBody: `leading-relaxed ${p.textMuted} text-lg`,
+      highlightBox: "bg-gray-50 rounded-2xl p-6 border border-gray-100",
+      highlightLabel:
+        "text-sm font-semibold text-[var(--sf-color-footer-bg)] uppercase tracking-wider mb-2",
+      footerCard:
+        "bg-[var(--sf-color-footer-bg)] rounded-3xl p-6 sm:p-10 text-white relative overflow-hidden",
+      contactBlock: "bg-red-50/30 p-6 sm:p-8 rounded-3xl border border-red-100/50",
+      contactLink: `${p.link} font-semibold hover:underline`,
+      badgeOfficial:
+        "px-5 py-2 rounded-full bg-gradient-to-r from-[var(--sf-color-footer-bg)] to-blue-900 text-white text-[10px] font-bold shadow-lg shadow-blue-900/20 uppercase tracking-widest flex items-center gap-1.5 transition-transform hover:scale-105",
+      badgeVerified:
+        "px-5 py-2 rounded-full bg-gradient-to-r from-green-600 to-emerald-400 text-white text-[10px] font-bold shadow-lg shadow-green-900/20 uppercase tracking-widest flex items-center gap-1.5 transition-transform hover:scale-105",
+      badgeSecure:
+        "px-5 py-2 rounded-full bg-gradient-to-r from-[var(--sf-color-primary)] to-[var(--sf-color-secondary)] text-white text-[10px] font-bold shadow-lg shadow-red-900/20 flex items-center gap-1.5 uppercase tracking-wider transition-transform hover:scale-105",
+    },
+    resetPassword: {
+      pageRoot: `min-h-screen flex items-center justify-center ${p.pageBackgroundAlt} px-4`,
+      card: "w-full max-w-md bg-white rounded-2xl shadow-lg p-8",
+      button: `w-full ${themeUi.btn.primary} font-bold rounded-full shadow-md`,
+    },
+  };
+}
+
+export type SiteThemes = {
+  siteTheme: StorefrontTheme;
+  siteButtonTheme: ButtonTheme;
+  siteFormTheme: FormThemeClassNames;
+  siteLayoutTheme: LayoutThemeClassNames;
+  siteHomeTheme: HomeThemeClassNames;
+  siteNotFoundTheme: NotFoundThemeClassNames;
+  sitePageTheme: SitePageThemeClassNames;
+  /** All UI slot classNames — pass to StorefrontThemeClassesProvider */
+  themeClasses: StorefrontThemeClasses;
+};
+
+function buildSiteThemeClasses(
+  overrides?: StorefrontThemeClassOverrides,
+): StorefrontThemeClasses {
+  const base: StorefrontThemeClasses = {
+    layout: createSiteLayoutTheme(),
+    home: createSiteHomeTheme(),
+    notFound: createSiteNotFoundTheme(),
+    productCard: createSiteProductCardTheme(),
+    account: createSiteAccountTheme(),
+    order: createSiteOrderTheme(),
+    cart: createSiteCartTheme(),
+    product: createSiteProductTheme(),
+    store: createSiteStoreTheme(),
+    checkout: createSiteCheckoutUiTheme(),
+    contact: createSiteContactTheme(),
+    help: createSiteHelpTheme(),
+    pages: createSitePageTheme(),
+  };
+  if (!overrides) return base;
+  return {
+    layout: mergeThemeSlots(base.layout, overrides.layout),
+    home: mergeThemeSlots(base.home, overrides.home),
+    notFound: mergeThemeSlots(base.notFound, overrides.notFound),
+    productCard: mergeThemeSlots(base.productCard, overrides.productCard),
+    account: mergeThemeSlots(base.account, overrides.account),
+    order: mergeThemeSlots(base.order, overrides.order),
+    cart: mergeThemeSlots(base.cart, overrides.cart),
+    product: mergeThemeSlots(base.product, overrides.product),
+    store: mergeThemeSlots(base.store, overrides.store),
+    checkout: mergeThemeSlots(base.checkout, overrides.checkout),
+    contact: mergeThemeSlots(base.contact, overrides.contact),
+    help: mergeThemeSlots(base.help, overrides.help),
+    pages: mergeThemeSlots(base.pages, overrides.pages),
+  };
+}
+
+/** One call — palette + fonts in, all theme exports out. */
+export function defineSiteTheme(input: DefineSiteThemeInput): SiteThemes {
+  const themeClasses = buildSiteThemeClasses(input.classOverrides);
+  return {
+    siteTheme: createSiteTheme(input),
+    siteButtonTheme: createSiteButtonTheme(),
+    siteFormTheme: createSiteFormTheme(input.form),
+    siteLayoutTheme: themeClasses.layout,
+    siteHomeTheme: themeClasses.home,
+    siteNotFoundTheme: themeClasses.notFound,
+    sitePageTheme: createSitePageTheme(),
+    themeClasses,
+  };
+}

package/src/define-brand.ts

@@ -0,0 +1,53 @@
+import {
+  defineSiteTheme,
+  type DefineSiteThemeInput,
+  type SiteThemeFonts,
+  type SiteThemePalette,
+  type SiteThemes,
+} from "./create-site-theme";
+import type { FormThemeClassNames } from "./form-theme";
+import { themePresets, type ThemePresetId } from "./presets";
+import { mergeThemeSlots } from "./theme-slot-merge";
+import type { DeepPartial } from "./types/deep-partial";
+import type { StorefrontThemeClassOverrides } from "./theme-class-names";
+
+export type DefineBrandInput = {
+  /** L3 preset id — merges default palette + class decisions */
+  preset?: ThemePresetId;
+  /** L4 brand palette (overrides preset palette) */
+  palette?: Partial<SiteThemePalette>;
+  fonts: SiteThemeFonts;
+  form?: Partial<FormThemeClassNames>;
+  /** L4 structural overrides (merged after preset) */
+  classOverrides?: DeepPartial<StorefrontThemeClassOverrides>;
+};
+
+/** L4 entry — pick a preset, set palette/fonts, optional overrides. */
+export function defineBrand(input: DefineBrandInput): SiteThemes {
+  const preset = input.preset ? themePresets[input.preset] : undefined;
+  const palette = {
+    ...(preset?.palette ?? {}),
+    ...input.palette,
+  } as SiteThemePalette;
+
+  let classOverrides: StorefrontThemeClassOverrides | undefined;
+  if (preset?.classOverrides && input.classOverrides) {
+    classOverrides = mergeThemeSlots(
+      preset.classOverrides as Record<string, unknown>,
+      input.classOverrides,
+    ) as StorefrontThemeClassOverrides;
+  } else {
+    classOverrides =
+      (input.classOverrides as StorefrontThemeClassOverrides | undefined) ??
+      preset?.classOverrides;
+  }
+
+  const siteInput: DefineSiteThemeInput = {
+    palette,
+    fonts: input.fonts,
+    form: input.form,
+    classOverrides,
+  };
+
+  return defineSiteTheme(siteInput);
+}

package/src/form-theme.ts

@@ -0,0 +1,55 @@
+import { themeCssClasses } from "./storefront-theme";
+
+/** Optional input color overrides — defaults derive from site palette in create-site-theme. */
+export type SiteThemeInputTokens = {
+  text?: string;
+  border?: string;
+  focus?: string;
+  background?: string;
+  label?: string;
+  labelFocus?: string;
+  placeholder?: string;
+};
+
+/** ClassName slots for form fields — library defaults; override per site or per page. */
+export type FormThemeClassNames = {
+  field: string;
+  label: string;
+  labelFloating: string;
+  topLabel: string;
+  error: string;
+};
+
+export const defaultFormThemeClassNames: FormThemeClassNames = {
+  field: [
+    "peer pt-6 pb-2 block w-full h-12 px-4 mt-0 rounded-md appearance-none",
+    "bg-[var(--sf-input-bg)] text-[var(--sf-input-text)]",
+    "border border-[var(--sf-input-border)]",
+    "focus:outline-none focus:border-[var(--sf-input-focus)] focus:ring-2 focus:ring-[var(--sf-input-focus)]/20",
+    "hover:bg-[var(--sf-input-bg)] transition-colors duration-200 antialiased",
+    "[font-family:var(--sf-font-family)]",
+  ].join(" "),
+  label: "text-[var(--sf-input-label)]",
+  labelFloating: [
+    "peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-[11px]",
+    "peer-focus:text-[var(--sf-input-label-focus)] peer-focus:z-10",
+    "peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:translate-y-0",
+    "peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:z-10",
+  ].join(" "),
+  topLabel: `mb-2 txt-compact-medium-plus ${themeCssClasses.text}`,
+  error: "text-rose-500 text-xs mt-1",
+};
+
+export function mergeFormTheme(
+  base: FormThemeClassNames,
+  overrides?: Partial<FormThemeClassNames>,
+): FormThemeClassNames {
+  if (!overrides) return base;
+  return {
+    field: overrides.field ?? base.field,
+    label: overrides.label ?? base.label,
+    labelFloating: overrides.labelFloating ?? base.labelFloating,
+    topLabel: overrides.topLabel ?? base.topLabel,
+    error: overrides.error ?? base.error,
+  };
+}

package/src/index.ts

@@ -1,65 +1,90 @@
-/** Default className maps for headless UI slots (override per site). */
-export const themeClassNames = {
-  productCard: {
-    root: "group flex flex-col",
-    title: "text-base font-medium text-ui-fg-base",
-    price: "text-sm text-ui-fg-subtle",
-  },
-  nav: {
-    root: "flex items-center gap-6",
-  },
-  notFound: {
-    root: "flex flex-col gap-4 items-center justify-center min-h-[calc(100vh-64px)]",
-    title: "text-2xl-semi text-ui-fg-base",
-    description: "text-small-regular text-ui-fg-base",
-  },
-  layout: {
-    body: "",
-    rootMain: "relative",
-    main: "min-h-screen w-full",
-    checkoutShell: "w-full relative min-h-screen",
-    checkoutContainer: "relative",
-  },
-  home: {
-    pageRoot: "w-full",
-  },
-  pages: {
-    checkout: {
-      shell:
-        "w-full max-w-[1360px] mx-auto px-3 min-[550px]:px-4 sm:px-6 md:px-8 min-[1023px]:px-4 min-[1150px]:px-6 min-[1360px]:px-8 py-4 min-[550px]:py-6 sm:py-8 md:py-12 min-[1023px]:py-10 min-[1150px]:py-12 min-[1360px]:py-12",
-      grid:
-        "grid grid-cols-1 min-[1024px]:grid-cols-[1fr_416px] gap-4 min-[550px]:gap-5 sm:gap-6 md:gap-8 min-[768px]:gap-6 min-[1023px]:gap-4 min-[1150px]:gap-6 min-[1200px]:gap-10 min-[1360px]:gap-12 w-full items-start",
-      leftColumn: "w-full min-[1024px]:sticky min-[1024px]:top-20",
-      rightColumn: "w-full min-[1024px]:sticky min-[1024px]:top-20",
-      paymentWrapper: "w-full grid grid-cols-1 gap-y-6 min-[550px]:gap-y-8",
-      backLinkContainer: "mb-4 min-[550px]:mb-6",
-    },
-    pageWrappers: {
-      legal: "min-h-screen bg-ui-bg-base pb-16 sm:pb-24",
-      resetPassword:
-        "min-h-screen flex items-center justify-center bg-ui-bg-subtle px-4",
-      returnRequest: "min-h-screen bg-ui-bg-base",
-      exchangeRequest: "min-h-screen bg-ui-bg-base",
-    },
-    returnIneligible: {
-      wrapper: "max-w-4xl mx-auto py-16 px-4 text-center",
-      title: "text-2xl font-bold mb-4 text-ui-fg-base",
-      description: "text-ui-fg-subtle mb-8",
-      backLink: "text-ui-fg-interactive hover:underline text-lg font-medium",
-    },
-  },
-} as const;
-
-export type ThemeClassNames = typeof themeClassNames;
-
-export type NotFoundThemeClassNames = {
-  [K in keyof typeof themeClassNames.notFound]: string;
-};
-
-export type LayoutThemeClassNames = {
-  [K in keyof typeof themeClassNames.layout]: string;
-};
-
-export type HomeThemeClassNames = typeof themeClassNames.home;
-
-export type PagesThemeClassNames = typeof themeClassNames.pages;
+export type { ButtonTheme, ButtonVariant, ButtonSize } from "./button-theme";
+export {
+  defaultButtonTheme,
+  pillButtonTheme,
+  mergeButtonTheme,
+} from "./button-theme";
+export {
+  buttonCssVarNames,
+  buttonCssClasses,
+  buildButtonCssVars,
+  type ButtonCssVarValues,
+} from "./button-css-vars";
+export { minimalButtonTheme } from "./button-themes/minimal";
+export type {
+  StorefrontTheme,
+  StorefrontThemeColors,
+  StorefrontThemeFonts,
+  StorefrontThemeInputColors,
+} from "./storefront-theme";
+export {
+  themeCssVarNames,
+  themeCssClasses,
+  defaultStorefrontTheme,
+  buildStorefrontThemeCssVars,
+  buildStorefrontRootCssVars,
+  buildStorefrontRootCss,
+  themeColorsToButtonCssVars,
+  mergeStorefrontTheme,
+  resolveInputColors,
+} from "./storefront-theme";
+export {
+  defaultFormThemeClassNames,
+  mergeFormTheme,
+  type FormThemeClassNames,
+  type SiteThemeInputTokens,
+} from "./form-theme";
+export { mergePageTheme, mergeThemeSlots } from "./page-theme-merge";
+export { joinClasses, layoutSlots, responsivePageX, responsivePageY } from "./theme-layout";
+export { resolveThemeSection } from "./theme-resolve";
+export {
+  createDefaultStorefrontThemeClasses,
+  createSiteThemeClasses,
+  createSiteAccountTheme,
+  createSiteOrderTheme,
+  createSiteCartTheme,
+  createSiteProductTheme,
+  createSiteStoreTheme,
+  createSiteCheckoutUiTheme,
+  createSiteContactTheme,
+  createSiteHelpTheme,
+  createSiteHomeTheme,
+} from "./create-site-theme-classes";
+export { defineBrand, type DefineBrandInput } from "./define-brand";
+export { themePresets, retailWarmPreset, type ThemePresetId } from "./presets";
+export type { DeepPartial } from "./types/deep-partial";
+export {
+  defineSiteTheme,
+  createSiteTheme,
+  createSiteButtonTheme,
+  createSiteLayoutTheme,
+  createSiteNotFoundTheme,
+  createSitePageTheme,
+  paletteToThemeColors,
+  themeUi,
+  type SiteThemePalette,
+  type SiteThemeFonts,
+  type DefineSiteThemeInput,
+  type SiteThemes,
+  createSiteFormTheme,
+} from "./create-site-theme";
+export {
+  themeClassNames,
+  type ThemeClassNames,
+  type NotFoundThemeClassNames,
+  type LayoutThemeClassNames,
+  type HomeThemeClassNames,
+  type BasePagesThemeClassNames,
+  type SitePageThemeClassNames,
+  type AccountThemeClassNames,
+  type OrderThemeClassNames,
+  type CartThemeClassNames,
+  type ProductCardThemeClassNames,
+  type ProductThemeClassNames,
+  type StoreThemeClassNames,
+  type CheckoutUiThemeClassNames,
+  type ContactThemeClassNames,
+  type HelpThemeClassNames,
+  type StorefrontThemeClasses,
+  type StorefrontThemeClassOverrides,
+} from "./theme-class-names";

package/src/page-theme-merge.ts

@@ -0,0 +1 @@
+export { mergeThemeSlots, mergeThemeSlots as mergePageTheme } from "./theme-slot-merge";

package/src/presets/index.ts

@@ -0,0 +1,10 @@
+import { retailWarmPreset } from "./retail-warm";
+
+export { retailWarmPreset } from "./retail-warm";
+export type { RetailWarmPresetId } from "./retail-warm";
+
+export const themePresets = {
+  "retail-warm": retailWarmPreset,
+} as const;
+
+export type ThemePresetId = keyof typeof themePresets;

package/src/presets/retail-warm.ts

@@ -0,0 +1,28 @@
+import type { SiteThemePalette } from "../create-site-theme";
+import type { StorefrontThemeClassOverrides } from "../theme-class-names";
+
+/** L3 — retail-warm preset: Chocomelon-style defaults (palette + slot decisions). */
+export const retailWarmPreset = {
+  id: "retail-warm" as const,
+  palette: {
+    primary: "#C41E3A",
+    primaryHover: "#9E1830",
+    secondary: "#D4AF37",
+    secondaryHover: "#B8942F",
+    background: "#FFFFFF",
+    backgroundAlt: "#FEF2F2",
+    surface: "#FFFFFF",
+    text: "#111111",
+    textMuted: "#6B7280",
+    textOnPrimary: "#FFFFFF",
+    footer: "#04122C",
+    header: "#FFFFFF",
+    footerText: "#F3F4F6",
+    footerHeading: "#FFFFFF",
+    footerTextMuted: "#94A3B8",
+    border: "#E5E7EB",
+  } satisfies SiteThemePalette,
+  classOverrides: {} satisfies StorefrontThemeClassOverrides,
+};
+
+export type RetailWarmPresetId = typeof retailWarmPreset.id;