@pradip1995/theme-impulse 1.1.4

package/src/slots/product/ProductInfo/index.tsx

@@ -0,0 +1,40 @@
+import { HttpTypes } from "@medusajs/types"
+import ProductRating from "@modules/common/components/product/product-rating"
+import ShareButton from "@modules/common/components/product/share-button"
+import WishlistIcon from "@modules/common/components/product/wishlist-icon"
+
+type ProductInfoProps = {
+  product: HttpTypes.StoreProduct
+  region: HttpTypes.StoreRegion
+}
+
+export default function ProductInfo({ product }: ProductInfoProps) {
+  const metadataBrand = product.metadata?.brand as string | undefined
+  const brand = metadataBrand || product.collection?.title || "Valero"
+
+  return (
+    <div id="product-info" className="flex flex-col gap-4 w-full">
+      <p className="text-[11px] font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-[var(--color-text-muted)]">
+        {brand}
+      </p>
+
+      <div className="flex items-start justify-between gap-4">
+        <h1
+          className="font-display text-2xl sm:text-3xl lg:text-4xl text-heading leading-heading flex-1"
+          data-testid="product-title"
+        >
+          {product.title}
+        </h1>
+        <div className="flex items-center gap-2 flex-shrink-0 pt-1">
+          {product.id && <WishlistIcon productId={product.id} />}
+          <ShareButton
+            productTitle={product.title ?? ""}
+            productHandle={product.handle ?? ""}
+          />
+        </div>
+      </div>
+
+      <ProductRating product={product} showButton={false} />
+    </div>
+  )
+}

package/src/templates/StorePage/index.tsx

@@ -0,0 +1,154 @@
+import { Suspense } from "react"
+import SkeletonProductGrid from "@modules/skeletons/templates/skeleton-product-grid"
+import RefinementList from "@modules/store/components/refinement-list"
+import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+import MobileFilters from "@modules/store/components/mobile-filters"
+import PaginatedProducts from "@modules/store/templates/paginated-products"
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+
+type StorePageProps = {
+  sortBy?: SortOptions
+  page?: string
+  countryCode: string
+  collections?: HttpTypes.StoreCollection[]
+  collection?: string | string[]
+  category?: string | string[]
+  gender?: string | string[]
+  type?: string | string[]
+  material?: string | string[]
+  color?: string | string[]
+  minPrice?: string
+  maxPrice?: string
+  genderOptions?: { value: string; label: string }[]
+  typeOptions?: { value: string; label: string }[]
+  materialOptions?: { value: string; label: string }[]
+  colorOptions?: { value: string; label: string }[]
+  categoryOptions?: { value: string; label: string }[]
+  q?: string
+}
+
+export default function StorePage({
+  sortBy,
+  page,
+  countryCode,
+  collections,
+  collection,
+  category,
+  gender,
+  type,
+  material,
+  color,
+  minPrice,
+  maxPrice,
+  genderOptions,
+  typeOptions,
+  materialOptions,
+  colorOptions,
+  categoryOptions,
+  q,
+}: StorePageProps) {
+  const pageNumber = page ? parseInt(page, 10) : 1
+  const sort = sortBy || "created_at_desc"
+
+  const filterProps = {
+    sortBy: sort,
+    collections,
+    collectionValue: collection,
+    categoryValue: category,
+    categoryOptions,
+    genderValue: gender,
+    typeValue: type,
+    materialValue: material,
+    colorValue: color,
+    minPrice,
+    maxPrice,
+    genderOptions,
+    typeOptions,
+    materialOptions,
+    colorOptions,
+    q,
+  }
+
+  return (
+    <div className="bg-page-bg min-h-screen">
+      {/* Collection banner — Impulse style */}
+      <div className="bg-surface-alt border-b border-[var(--color-header-border)]">
+        <div
+          className="mx-auto px-4 sm:px-6 py-10 md:py-14 text-center"
+          style={{ maxWidth: "var(--container-max)" }}
+        >
+          <nav className="text-xs uppercase tracking-[var(--letter-spacing-nav)] text-[var(--color-text-muted)] mb-4">
+            <LocalizedClientLink href="/" className="hover:text-heading">
+              Home
+            </LocalizedClientLink>
+            <span className="mx-2">/</span>
+            <span className="text-heading">Shop</span>
+          </nav>
+          <h1 className="font-display text-3xl md:text-4xl lg:text-5xl text-heading">
+            {q ? `Results for “${q}”` : "All products"}
+          </h1>
+          <p className="mt-3 text-sm text-[var(--color-text-muted)] max-w-lg mx-auto">
+            Browse our full collection. Filter by category, price, and more.
+          </p>
+        </div>
+      </div>
+
+      <div
+        className="mx-auto px-4 sm:px-6 py-8 lg:py-12"
+        style={{ maxWidth: "var(--container-max)" }}
+      >
+        <div className="flex flex-col lg:flex-row gap-8 lg:gap-12">
+          <aside className="hidden lg:block w-64 flex-shrink-0 lg:sticky lg:top-28 lg:self-start lg:max-h-[calc(100vh-8rem)] lg:overflow-y-auto">
+            <h2 className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-heading mb-6 pb-2 border-b border-[var(--color-header-border)]">
+              Filter
+            </h2>
+            <RefinementList {...filterProps} />
+          </aside>
+
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center justify-between gap-4 mb-6 lg:hidden">
+              <MobileFilters {...filterProps} />
+            </div>
+
+            {q && (
+              <div className="mb-6 flex items-center justify-between gap-4 p-4 bg-surface-muted border border-[var(--color-header-border)]">
+                <span className="text-sm text-[var(--color-text-muted)]">
+                  Showing results for <strong className="text-heading">"{q}"</strong>
+                </span>
+                <LocalizedClientLink
+                  href="/store"
+                  className="text-xs uppercase tracking-[var(--letter-spacing-nav)] font-semibold text-heading hover:underline"
+                >
+                  Clear
+                </LocalizedClientLink>
+              </div>
+            )}
+
+            <Suspense fallback={<SkeletonProductGrid />}>
+              <PaginatedProducts
+                sortBy={sort}
+                page={pageNumber}
+                countryCode={countryCode}
+                collectionId={
+                  Array.isArray(collection) ? collection.join(",") : collection
+                }
+                categoryId={
+                  Array.isArray(category) ? category.join(",") : category
+                }
+                gender={Array.isArray(gender) ? gender.join(",") : gender}
+                type={Array.isArray(type) ? type.join(",") : type}
+                material={Array.isArray(material) ? material.join(",") : material}
+                color={Array.isArray(color) ? color.join(",") : color}
+                min_price={minPrice}
+                max_price={maxPrice}
+                q={q}
+                filterProps={filterProps}
+              />
+            </Suspense>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/tokens/colors.js

@@ -0,0 +1,16 @@
+/**
+ * @deprecated Use theme.css CSS variables as the source of truth.
+ * Kept for tooling that reads JS token files during migration.
+ */
+module.exports = {
+  colors: {
+    pageBg: "var(--color-page-bg)",
+    brand: {
+      accent: "var(--color-brand-accent)",
+      accentHover: "var(--color-brand-accent-hover)",
+      accentLight: "var(--color-brand-accent-light)",
+      pink: "var(--color-brand-pink)",
+      primary: "var(--color-brand-primary)",
+    },
+  },
+}

package/src/tokens/colors.ts

@@ -0,0 +1,21 @@
+/**
+ * Semantic Tailwind classes mapped to CSS variables in theme.css.
+ * Do not hardcode hex values here — edit theme.css instead.
+ */
+export const colorClasses = {
+  pageBg: "bg-page-bg",
+  surface: "bg-surface",
+  surfaceMuted: "bg-surface-muted",
+  brandAccent: "bg-brand-accent text-inverse",
+  brandAccentText: "text-brand-accent",
+  brandAccentBorder: "border-brand-accent",
+  brandAccentMuted: "bg-brand-accent-muted",
+  heading: "text-heading",
+  headingSub: "text-heading-sub",
+  body: "text-body",
+  muted: "text-muted",
+  inverse: "text-inverse",
+  footerBg: "bg-brand-footer",
+  promoGradient: "bg-promo-gradient",
+  cartBorder: "bg-cart-border",
+} as const

package/src/tokens/fonts.ts

@@ -0,0 +1,13 @@
+/**
+ * Semantic Tailwind font classes mapped to CSS variables in theme.css.
+ * Do not hardcode font families here — edit theme.css instead.
+ */
+export const fontClasses = {
+  sans: "font-sans",
+  heading: "font-heading",
+  display: "font-display",
+  quote: "font-quote",
+  mono: "font-mono",
+  body: "font-sans leading-body tracking-body",
+  pageTitle: "font-heading font-bold leading-heading tracking-heading",
+} as const

package/src/tokens/index.ts

@@ -0,0 +1,3 @@
+export * from "./colors"
+export * from "./fonts"
+export * from "./spacing"

package/src/tokens/spacing.ts

@@ -0,0 +1,9 @@
+export const spacing = {
+  sectionY: {
+    sm: "py-8",
+    md: "py-12",
+    lg: "py-16",
+  },
+  container: "max-w-[1440px] mx-auto",
+  content: "max-w-[1360px] mx-auto",
+} as const

package/src/tokens/theme.css

@@ -0,0 +1,89 @@
+/**
+ * Impulse theme — Shopify Impulse preset design tokens.
+ * Reference: https://themes.shopify.com/themes/impulse/presets/impulse
+ */
+@import url("https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
+
+:root {
+  /* Typography — Karla body, Playfair display (Impulse editorial feel) */
+  --font-sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    sans-serif;
+  --font-heading: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    sans-serif;
+  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
+  --font-quote: "Playfair Display", Georgia, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 700;
+
+  --line-height-body: 1.65;
+  --line-height-heading: 1.2;
+  --letter-spacing-heading: 0.02em;
+  --letter-spacing-body: 0;
+  --letter-spacing-nav: 0.14em;
+
+  /* Surfaces */
+  --color-page-bg: #ffffff;
+  --color-surface: #ffffff;
+  --color-surface-muted: #f6f6f6;
+  --color-surface-alt: #efefef;
+  --color-hero-fallback: #e5e5e5;
+  --color-footer-bg: #1a1a1a;
+  --color-header-bg: #ffffff;
+  --color-header-border: #e5e5e5;
+
+  /* Brand — Impulse preset: monochrome + sale red */
+  --color-brand-accent: #1a1a1a;
+  --color-brand-accent-hover: #404040;
+  --color-brand-accent-light: #525252;
+  --color-brand-accent-border: #d4d4d4;
+  --color-brand-accent-muted: #f5f5f5;
+  --color-brand-accent-rgb: 26, 26, 26;
+
+  --color-brand-pink: #c1272d;
+  --color-brand-primary: #1a1a1a;
+  --color-brand-sale: #c1272d;
+  --color-brand-success: #2d6a4f;
+
+  /* Text */
+  --color-text-heading: #1a1a1a;
+  --color-text-subheading: #333333;
+  --color-text-body: #4d4d4d;
+  --color-text-muted: #737373;
+  --color-text-inverse: #ffffff;
+
+  /* Navigation & panels */
+  --color-nav-active: var(--color-brand-accent);
+  --color-nav-active-bg: var(--color-brand-accent-muted);
+  --color-cart-panel-bg: var(--color-page-bg);
+  --color-border: var(--color-header-border);
+
+  /* Layout */
+  --header-height: 4rem;
+  --container-max: 1440px;
+
+  /* Effects */
+  --shadow-brand: 0 16px 40px rgba(0, 0, 0, 0.1);
+  --shadow-brand-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
+  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.04);
+  --gradient-promo: linear-gradient(
+    135deg,
+    var(--color-brand-accent),
+    var(--color-brand-accent-light)
+  );
+  --gradient-cart-border: linear-gradient(
+    to bottom right,
+    var(--color-brand-accent),
+    var(--color-brand-accent-light)
+  );
+  --gradient-hero: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.5) 0%,
+    rgba(0, 0, 0, 0.12) 50%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}