medusa-storefront-theme-base 1.1.0

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "medusa-storefront-theme-base",
+  "version": "1.1.0",
+  "description": "Default Tailwind preset and className maps for Medusa storefront UI packages.",
+  "type": "module",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "tailwind.preset.cjs"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./tailwind": {
+      "require": "./tailwind.preset.cjs",
+      "default": "./tailwind.preset.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsc --noEmit",
+    "clean": "true"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.0.0",
+    "@medusajs/ui-preset": "*"
+  }
+}

package/src/index.ts

@@ -0,0 +1,65 @@
+/** 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;

package/tailwind.preset.cjs

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [require("@medusajs/ui-preset")],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          DEFAULT: "rgb(var(--color-brand) / <alpha-value>)",
+          foreground: "rgb(var(--color-brand-fg) / <alpha-value>)",
+        },
+      },
+    },
+  },
+};