medusa-storefront-theme-base 1.1.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "medusa-storefront-theme-base",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Default Tailwind preset and className maps for Medusa storefront UI packages.",
   "type": "module",
   "license": "MIT",
@@ -9,6 +9,7 @@
   },
   "files": [
     "src",
+    "styles",
     "tailwind.preset.cjs"
   ],
   "exports": {
@@ -17,10 +18,41 @@
       "import": "./src/index.ts",
       "default": "./src/index.ts"
     },
+    "./button-theme": {
+      "types": "./src/button-theme.ts",
+      "import": "./src/button-theme.ts",
+      "default": "./src/button-theme.ts"
+    },
+    "./button-css-vars": {
+      "types": "./src/button-css-vars.ts",
+      "import": "./src/button-css-vars.ts",
+      "default": "./src/button-css-vars.ts"
+    },
+    "./storefront-theme": {
+      "types": "./src/storefront-theme.ts",
+      "import": "./src/storefront-theme.ts",
+      "default": "./src/storefront-theme.ts"
+    },
+    "./create-site-theme": {
+      "types": "./src/create-site-theme.ts",
+      "import": "./src/create-site-theme.ts",
+      "default": "./src/create-site-theme.ts"
+    },
+    "./form-theme": {
+      "types": "./src/form-theme.ts",
+      "import": "./src/form-theme.ts",
+      "default": "./src/form-theme.ts"
+    },
+    "./button-themes/*": {
+      "types": "./src/button-themes/*",
+      "import": "./src/button-themes/*",
+      "default": "./src/button-themes/*"
+    },
     "./tailwind": {
       "require": "./tailwind.preset.cjs",
       "default": "./tailwind.preset.cjs"
-    }
+    },
+    "./styles/storefront-globals.css": "./styles/storefront-globals.css"
   },
   "scripts": {
     "build": "tsc --noEmit",
@@ -28,6 +60,16 @@
   },
   "peerDependencies": {
     "tailwindcss": "^3.0.0",
-    "@medusajs/ui-preset": "*"
+    "@medusajs/ui-preset": "*",
+    "medusa-ui-home": ">=2.1.0"
+  },
+  "peerDependenciesMeta": {
+    "medusa-ui-home": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "medusa-ui-home": "workspace:*",
+    "typescript": "^5.6.0"
   }
 }

package/src/button-css-vars.ts

@@ -0,0 +1,52 @@
+/** CSS custom property names — set on `:root` via ButtonThemeProvider. */
+export const buttonCssVarNames = {
+  primary: "--sf-btn-primary",
+  primaryHover: "--sf-btn-primary-hover",
+  secondary: "--sf-btn-secondary",
+  secondaryHover: "--sf-btn-secondary-hover",
+  black: "--sf-btn-black",
+  blackHover: "--sf-btn-black-hover",
+  onPrimary: "--sf-btn-on-primary",
+  onSecondary: "--sf-btn-on-secondary",
+  onBlack: "--sf-btn-on-black",
+} as const;
+
+export type ButtonCssVarValues = {
+  primary: string;
+  primaryHover: string;
+  secondary: string;
+  secondaryHover: string;
+  black: string;
+  blackHover: string;
+  onPrimary?: string;
+  onSecondary?: string;
+  onBlack?: string;
+};
+
+export function buildButtonCssVars(colors: ButtonCssVarValues): Record<string, string> {
+  return {
+    [buttonCssVarNames.primary]: colors.primary,
+    [buttonCssVarNames.primaryHover]: colors.primaryHover,
+    [buttonCssVarNames.secondary]: colors.secondary,
+    [buttonCssVarNames.secondaryHover]: colors.secondaryHover,
+    [buttonCssVarNames.black]: colors.black,
+    [buttonCssVarNames.blackHover]: colors.blackHover,
+    [buttonCssVarNames.onPrimary]: colors.onPrimary ?? "#ffffff",
+    [buttonCssVarNames.onSecondary]: colors.onSecondary ?? "#111111",
+    [buttonCssVarNames.onBlack]: colors.onBlack ?? "#ffffff",
+  };
+}
+
+/** Tailwind class fragments for legacy buttons (use with ButtonThemeProvider css vars). */
+export const buttonCssClasses = {
+  primary:
+    "bg-[var(--sf-btn-primary)] text-[var(--sf-btn-on-primary)] hover:bg-[var(--sf-btn-primary-hover)]",
+  secondary:
+    "bg-[var(--sf-btn-secondary)] text-[var(--sf-btn-on-secondary)] hover:bg-[var(--sf-btn-secondary-hover)]",
+  black:
+    "bg-[var(--sf-btn-black)] text-[var(--sf-btn-on-black)] hover:bg-[var(--sf-btn-black-hover)]",
+  outline:
+    "bg-transparent text-[var(--sf-btn-black)] border-2 border-[var(--sf-btn-black)] hover:bg-[var(--sf-btn-black)] hover:text-[var(--sf-btn-on-black)]",
+  borderPrimary: "border-[var(--sf-btn-primary)]",
+  textPrimary: "text-[var(--sf-btn-primary)]",
+} as const;

package/src/button-theme.ts

@@ -0,0 +1,74 @@
+/** Semantic button variants used across storefront UI packages. */
+export type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "outline"
+  | "ghost"
+  | "danger"
+  | "link";
+
+export type ButtonSize = "sm" | "md" | "lg";
+
+/**
+ * Tailwind class maps for buttons. Define once per site; components resolve via context.
+ */
+export type ButtonTheme = {
+  /** Shared classes on every button (layout, font, disabled state). */
+  base?: string;
+  sizes?: Partial<Record<ButtonSize, string>>;
+  variants: Record<ButtonVariant, string>;
+};
+
+export function mergeButtonTheme(
+  base: ButtonTheme,
+  overrides: Partial<ButtonTheme> & { variants?: Partial<Record<ButtonVariant, string>> },
+): ButtonTheme {
+  return {
+    base: [base.base, overrides.base].filter(Boolean).join(" ").trim() || undefined,
+    sizes: { ...base.sizes, ...overrides.sizes },
+    variants: { ...base.variants, ...overrides.variants } as Record<ButtonVariant, string>,
+  };
+}
+
+/** Neutral defaults — works without brand tokens. */
+export const defaultButtonTheme: ButtonTheme = {
+  base: "inline-flex items-center justify-center font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+  sizes: {
+    sm: "h-9 px-3 text-xs rounded-md",
+    md: "h-10 px-4 text-sm rounded-md",
+    lg: "h-12 px-6 text-base rounded-md",
+  },
+  variants: {
+    primary: "bg-ui-button-inverted text-ui-fg-on-inverted hover:bg-ui-button-inverted/90",
+    secondary:
+      "bg-ui-button-neutral text-ui-fg-base border border-ui-border-base hover:bg-ui-bg-subtle",
+    outline:
+      "bg-transparent text-ui-fg-base border border-ui-border-base hover:bg-ui-bg-subtle",
+    ghost: "bg-transparent text-ui-fg-base hover:bg-ui-bg-subtle",
+    danger: "bg-red-600 text-white hover:bg-red-700",
+    link: "bg-transparent text-ui-fg-interactive underline-offset-4 hover:underline h-auto p-0",
+  },
+};
+
+/** Rounded pill style (Chocomelon-style). Import and extend in site theme. */
+export const pillButtonTheme: ButtonTheme = {
+  base: "inline-flex items-center justify-center font-bold transition-all disabled:opacity-50 disabled:cursor-not-allowed",
+  sizes: {
+    sm: "h-9 px-4 text-xs rounded-full",
+    md: "h-11 px-6 text-sm rounded-full",
+    lg: "h-12 px-8 text-base rounded-full",
+  },
+  variants: {
+    primary:
+      "bg-[var(--sf-btn-primary)] text-[var(--sf-btn-on-primary)] hover:bg-[var(--sf-btn-primary-hover)] shadow-md hover:opacity-90",
+    secondary:
+      "bg-[var(--sf-btn-secondary)] text-[var(--sf-btn-on-secondary)] border-2 border-[var(--sf-btn-secondary)] hover:bg-[var(--sf-btn-secondary-hover)]",
+    outline:
+      "bg-transparent text-[var(--sf-btn-black)] border-2 border-[var(--sf-btn-black)] hover:bg-[var(--sf-btn-black)] hover:text-[var(--sf-btn-on-black)]",
+    ghost:
+      "bg-transparent text-[var(--sf-btn-primary)] hover:bg-[var(--sf-btn-primary)]/10",
+    danger:
+      "bg-[var(--sf-btn-black)] text-[var(--sf-btn-on-black)] hover:bg-[var(--sf-btn-black-hover)]",
+    link: "bg-transparent text-[var(--sf-btn-primary)] underline-offset-4 hover:underline h-auto p-0",
+  },
+};

package/src/button-themes/minimal.ts

@@ -0,0 +1,19 @@
+import type { ButtonTheme } from "../button-theme";
+
+/** Flat, square-corner buttons for admin-like or dense UIs. */
+export const minimalButtonTheme: ButtonTheme = {
+  base: "inline-flex items-center justify-center font-semibold transition-colors disabled:opacity-50",
+  sizes: {
+    sm: "h-8 px-3 text-xs rounded",
+    md: "h-10 px-4 text-sm rounded",
+    lg: "h-11 px-5 text-sm rounded",
+  },
+  variants: {
+    primary: "bg-gray-900 text-white hover:bg-gray-800",
+    secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200",
+    outline: "border border-gray-300 text-gray-900 hover:bg-gray-50",
+    ghost: "text-gray-700 hover:bg-gray-100",
+    danger: "bg-red-600 text-white hover:bg-red-700",
+    link: "text-gray-900 underline hover:no-underline h-auto p-0",
+  },
+};

package/src/create-site-theme-classes.ts

@@ -0,0 +1,189 @@
+import { themeCssClasses as p } from "./storefront-theme";
+import {
+  joinClasses,
+  layoutSlots,
+  responsivePageX,
+} from "./theme-layout";
+import {
+  themeClassNames,
+  type AccountThemeClassNames,
+  type CartThemeClassNames,
+  type CheckoutUiThemeClassNames,
+  type ContactThemeClassNames,
+  type HelpThemeClassNames,
+  type HomeThemeClassNames,
+  type OrderThemeClassNames,
+  type ProductThemeClassNames,
+  type StorefrontThemeClasses,
+  type StorefrontThemeClassOverrides,
+  type StoreThemeClassNames,
+} from "./theme-class-names";
+import { mergeThemeSlots } from "./theme-slot-merge";
+
+export function createSiteAccountTheme(): AccountThemeClassNames {
+  const a = themeClassNames.account;
+  return {
+    page: joinClasses(layoutSlots.accountPage, p.pageBackground),
+    container: joinClasses(layoutSlots.accountContainer, p.pageBackground),
+    title: joinClasses(layoutSlots.accountTitle, p.text),
+    contentGrid: layoutSlots.accountContentGrid,
+    card: joinClasses(p.surface, "rounded-2xl shadow-sm", p.border),
+    buttonPrimary:
+      "bg-[var(--sf-btn-primary)] text-[var(--sf-color-text-on-primary)] hover:bg-[var(--sf-btn-primary-hover)]",
+    loginShell: joinClasses(layoutSlots.loginShell, p.pageBackground),
+    loginCard: joinClasses(layoutSlots.loginCard, p.surface, p.border),
+    loginHeading: a.loginHeading,
+    loginSubheading: a.loginSubheading,
+    oauthButton: a.oauthButton,
+    oauthButtonText: a.oauthButtonText,
+    dividerText: a.dividerText,
+    bodyText: a.bodyText,
+    formLabel: a.formLabel,
+    link: a.link,
+    iconMuted: a.iconMuted,
+    hoverSurface: a.hoverSurface,
+    nav: { ...a.nav },
+  };
+}
+
+export function createSiteOrderTheme(): OrderThemeClassNames {
+  return {
+    page: `py-6 min-h-[calc(100vh-64px)] ${p.pageBackground} overflow-x-hidden`,
+    container: themeClassNames.order.container,
+    title: `text-2xl sm:text-3xl font-bold ${p.text} mb-6 sm:mb-8 text-center`,
+    innerContainer: themeClassNames.order.innerContainer,
+    card: `${p.surface} rounded-2xl shadow-sm ${p.border} p-4 sm:p-6`,
+    buttonPrimary:
+      "bg-[var(--sf-btn-primary)] text-[var(--sf-color-text-on-primary)] hover:bg-[var(--sf-btn-primary-hover)]",
+    buttonOutline: themeClassNames.order.buttonOutline,
+    exchangeBadge: themeClassNames.order.exchangeBadge,
+  };
+}
+
+export function createSiteCartTheme(): CartThemeClassNames {
+  return { ...themeClassNames.cart };
+}
+
+export function createSiteProductCardTheme() {
+  return { ...themeClassNames.productCard };
+}
+
+export function createSiteProductTheme(): ProductThemeClassNames {
+  const pr = themeClassNames.product;
+  return {
+    page: joinClasses("min-h-screen w-full", p.pageBackground),
+    container: layoutSlots.productInner,
+    breadcrumb: p.textMuted,
+    title: p.heading,
+    price: pr.price,
+    heading: pr.heading,
+    subheading: pr.subheading,
+    label: pr.label,
+    surface: pr.surface,
+    badgeSale: pr.badgeSale,
+    badgeNew: pr.badgeNew,
+    badgeHot: pr.badgeHot,
+  };
+}
+
+export function createSiteStoreTheme(): StoreThemeClassNames {
+  return {
+    page: joinClasses("min-h-screen w-full", p.pageBackground),
+    container: layoutSlots.storeContainer,
+    title: themeClassNames.store.title,
+    badge: themeClassNames.store.badge,
+  };
+}
+
+export function createSiteCheckoutUiTheme(): CheckoutUiThemeClassNames {
+  return { ...themeClassNames.checkout };
+}
+
+export function createSiteContactTheme(): ContactThemeClassNames {
+  const c = themeClassNames.contact;
+  return {
+    page: joinClasses("min-h-screen w-full", p.pageBackground),
+    container: layoutSlots.contactContainer,
+    card: joinClasses(
+      p.surface,
+      "rounded-2xl sm:rounded-3xl",
+      p.border,
+      "shadow-sm",
+    ),
+    heading: c.heading,
+    subheading: c.subheading,
+    label: c.label,
+    infoTitle: c.infoTitle,
+    infoBody: c.infoBody,
+    infoValue: c.infoValue,
+    infoIconBg: c.infoIconBg,
+    link: c.link,
+  };
+}
+
+export function createSiteHelpTheme(): HelpThemeClassNames {
+  return {
+    page: joinClasses(layoutSlots.helpPage, p.pageBackground),
+    container: joinClasses("content-container w-full", responsivePageX),
+    card: joinClasses(p.surface, "rounded-2xl", p.border),
+  };
+}
+
+export function createSiteHomeTheme(): HomeThemeClassNames {
+  const h = themeClassNames.home;
+  return {
+    ...h,
+    pageRoot: `${p.pageBackground} w-full`,
+    section: joinClasses(h.section, p.pageBackground),
+    testimonialSection: joinClasses(h.testimonialSection, p.pageBackground),
+  };
+}
+
+/** Default slot themes (CSS vars) — used when no provider is mounted. */
+export function createDefaultStorefrontThemeClasses(): StorefrontThemeClasses {
+  return {
+    layout: {
+      ...themeClassNames.layout,
+      main: `min-h-screen w-full ${p.pageBackground}`,
+      checkoutShell: `w-full relative min-h-screen ${p.pageBackground}`,
+    },
+    home: createSiteHomeTheme(),
+    notFound: {
+      root: `flex flex-col gap-4 items-center justify-center min-h-[calc(100vh-64px)] ${p.pageBackground}`,
+      title: `text-2xl-semi ${p.text}`,
+      description: `text-small-regular ${p.textMuted}`,
+    },
+    productCard: createSiteProductCardTheme(),
+    account: createSiteAccountTheme(),
+    order: createSiteOrderTheme(),
+    cart: createSiteCartTheme(),
+    product: createSiteProductTheme(),
+    store: createSiteStoreTheme(),
+    checkout: createSiteCheckoutUiTheme(),
+    contact: createSiteContactTheme(),
+    help: createSiteHelpTheme(),
+    pages: themeClassNames.pages,
+  };
+}
+
+export function createSiteThemeClasses(
+  overrides?: StorefrontThemeClassOverrides,
+): StorefrontThemeClasses {
+  const base = createDefaultStorefrontThemeClasses();
+  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),
+  };
+}