medusa-ui-common 2.0.1 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "medusa-ui-common",
-  "version": "2.0.1",
+  "version": "2.3.0",
   "description": "Shared storefront UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -22,10 +22,11 @@
     "lucide-react": "*",
     "medusa-contact-logic-plugin": "^2.0.0",
     "medusa-reviews-logic": "^2.0.0",
-    "medusa-storefront-analytics": "^1.3.0",
+    "medusa-storefront-analytics": "^1.0.0",
     "medusa-storefront-data": "^2.0.0",
     "medusa-storefront-hooks": "^1.0.0",
     "medusa-wishlist-logic": "^2.0.0",
+    "medusa-storefront-theme-base": "^2.0.0",
     "next": ">=14.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -96,6 +97,11 @@
     }
   },
   "devDependencies": {
+    "next": "^15.0.0",
+    "medusa-storefront-analytics": "workspace:*",
+    "medusa-storefront-core": "workspace:*",
+    "medusa-storefront-data": "workspace:*",
+    "medusa-storefront-theme-base": "workspace:*",
     "@headlessui/react": "^2.2.0",
     "@medusajs/icons": "^2.0.0",
     "@medusajs/ui": "^4.0.0",

package/src/common/components/breadcrumb/index.tsx

@@ -9,13 +9,13 @@ export default function Breadcrumb({ product }: BreadcrumbProps) {
   const primaryCategory = product.categories?.[0]
 
   return (
-    <nav className="text-xs sm:text-sm text-gray-800 mb-3 sm:mb-4 overflow-x-auto font-medium">
+    <nav className="text-xs sm:text-sm text-[var(--sf-color-text)] mb-3 sm:mb-4 overflow-x-auto font-medium">
       <div className="flex items-center whitespace-nowrap">
-        <LocalizedClientLink href="/" className="hover:text-gray-900 transition-colors">
+        <LocalizedClientLink href="/" className="hover:text-[var(--sf-color-text)] transition-colors">
           Home
         </LocalizedClientLink>
         <span className="mx-2">/</span>
-        <LocalizedClientLink href="/store" className="hover:text-gray-900 transition-colors">
+        <LocalizedClientLink href="/store" className="hover:text-[var(--sf-color-text)] transition-colors">
           Shop
         </LocalizedClientLink>
         {primaryCategory && (
@@ -23,14 +23,14 @@ export default function Breadcrumb({ product }: BreadcrumbProps) {
             <span className="mx-2">/</span>
             <LocalizedClientLink
               href={`/store?category=${primaryCategory.id}`}
-              className="hover:text-gray-900 transition-colors"
+              className="hover:text-[var(--sf-color-text)] transition-colors"
             >
               {primaryCategory.name}
             </LocalizedClientLink>
           </>
         )}
         <span className="mx-2">/</span>
-        <span className="text-gray-900 truncate max-w-[150px] sm:max-w-[300px] md:max-w-[400px] inline-block align-bottom" title={product.title ?? ""}>
+        <span className="text-[var(--sf-color-text)] truncate max-w-[150px] sm:max-w-[300px] md:max-w-[400px] inline-block align-bottom" title={product.title ?? ""}>
           {product.title}
         </span>
       </div>

package/src/common/components/cart-totals/index.tsx

@@ -9,6 +9,8 @@ import LocalizedClientLink from "medusa-ui-common/common/components/localized-cl
 import { useRouter, usePathname, useSearchParams } from "next/navigation"
 import ProcessingOverlay from "medusa-ui-common/common/components/processing-overlay"
 import { useSiteCompany } from "medusa-storefront-core"
+import { useButtonClassName } from "../../../context/button-theme-context"
+import { ThemedButton } from "../themed-button"
 
 type CartTotalsProps = {
   totals: {
@@ -27,6 +29,8 @@ type CartTotalsProps = {
 
 const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutStep, customer }) => {
   const company = useSiteCompany()
+  const primaryBtn = useButtonClassName("primary", { size: "lg", className: "w-full" })
+  const secondaryBtn = useButtonClassName("secondary", { size: "lg", className: "w-full" })
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
@@ -270,13 +274,13 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
   }
 
   return (
-    <div className="bg-[#FFFAFE] rounded-lg p-3 min-[550px]:p-4 sm:p-5 md:p-6 min-[1023px]:p-4 min-[1150px]:p-5 min-[1360px]:p-6 border shadow-sm w-full" style={{ borderColor: '#C0C0C0' }}>
+    <div className="bg-[var(--sf-color-background)] rounded-lg p-3 min-[550px]:p-4 sm:p-5 md:p-6 min-[1023px]:p-4 min-[1150px]:p-5 min-[1360px]:p-6 border shadow-sm w-full" style={{ borderColor: '#C0C0C0' }}>
       <ProcessingOverlay isOpen={showOverlay} variant={processingVariant} />
-      <h3 className="text-sm min-[550px]:text-base sm:text-lg min-[1023px]:text-base min-[1150px]:text-lg min-[1360px]:text-lg font-bold text-gray-900 mb-2.5 min-[550px]:mb-3 sm:mb-4 min-[1023px]:mb-3 min-[1150px]:mb-4 min-[1360px]:mb-4">
+      <h3 className="text-sm min-[550px]:text-base sm:text-lg min-[1023px]:text-base min-[1150px]:text-lg min-[1360px]:text-lg font-bold text-[var(--sf-color-text)] mb-2.5 min-[550px]:mb-3 sm:mb-4 min-[1023px]:mb-3 min-[1150px]:mb-4 min-[1360px]:mb-4">
         PRICE SUMMARY ({itemCount} {itemCount === 1 ? "ITEM" : "ITEMS"})
       </h3>
 
-      <div className="flex flex-col gap-y-2 min-[550px]:gap-y-2.5 sm:gap-y-3 min-[1023px]:gap-y-2 min-[1150px]:gap-y-3 min-[1360px]:gap-y-3 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-gray-900">
+      <div className="flex flex-col gap-y-2 min-[550px]:gap-y-2.5 sm:gap-y-3 min-[1023px]:gap-y-2 min-[1150px]:gap-y-3 min-[1360px]:gap-y-3 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-[var(--sf-color-text)]">
         <div className="flex items-center justify-between">
           <span>Total MRP</span>
           <span data-testid="cart-mrp" data-value={totalMRP}>
@@ -288,7 +292,7 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
           <div className="flex items-center justify-between">
             <span>Discount</span>
             <span
-              className="text-gray-900"
+              className="text-[var(--sf-color-text)]"
               data-testid="cart-discount"
               data-value={calculatedDiscount}
             >
@@ -311,7 +315,7 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
           <span>Shipping</span>
           <span data-testid="cart-shipping" data-value={shippingAmount} className="flex items-center gap-x-2">
             {isAutoSettingShipping && (
-              <span className="w-4 h-4 border-2 border-[#8B5AB1] border-t-transparent rounded-full animate-spin"></span>
+              <span className="w-4 h-4 border-2 border-[var(--sf-btn-primary)] border-t-transparent rounded-full animate-spin"></span>
             )}
             {convertToLocale({ amount: shippingAmount, currency_code })}
           </span>
@@ -320,7 +324,7 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
 
       <div className="h-px w-full border-b border-gray-200 my-3 min-[550px]:my-4" />
 
-      <div className="flex items-center justify-between text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base font-bold text-gray-900 mb-2.5 min-[550px]:mb-3 sm:mb-4 min-[1023px]:mb-3 min-[1150px]:mb-4 min-[1360px]:mb-4">
+      <div className="flex items-center justify-between text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base font-bold text-[var(--sf-color-text)] mb-2.5 min-[550px]:mb-3 sm:mb-4 min-[1023px]:mb-3 min-[1150px]:mb-4 min-[1360px]:mb-4">
         <span>Total</span>
         <span
           className="text-sm min-[550px]:text-base sm:text-lg min-[1023px]:text-base min-[1150px]:text-lg min-[1360px]:text-lg"
@@ -344,22 +348,22 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
 
       {/* No manual continue button needed as we are in one-step mode */}
       {isOnCartPage && (
-        <button
+        <ThemedButton
+          variant="primary"
+          size="lg"
+          fullWidth
           onClick={handleProceedToCheckout}
           disabled={isRedirecting}
+          isLoading={isRedirecting}
           data-ga-event="proceed_to_checkout_click"
           data-meta-event="InitiateCheckout"
           data-meta-action="proceed_to_checkout"
           data-ga-label={convertToLocale({ amount: finalTotal, currency_code })}
-          className="w-full h-10 min-[550px]:h-11 sm:h-12 min-[1023px]:h-11 min-[1150px]:h-12 min-[1360px]:h-12 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-white font-medium transition-colors duration-200 hover:opacity-90 mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6 disabled:opacity-50"
-          style={{
-            backgroundColor: '#8B5AB1',
-            borderRadius: '30px'
-          }}
+          className="mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6"
           data-testid="checkout-button"
         >
           {isRedirecting ? "Loading..." : "Proceed to Checkout"}
-        </button>
+        </ThemedButton>
       )}
       {!isOnCartPage && (
         <div className="w-full">
@@ -376,6 +380,7 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
                   return (
                     <>
                   <button
+                    type="button"
                     onClick={async () => {
                       trackPaymentMethodClick("cod")
                       setProcessingVariant("order")
@@ -404,18 +409,14 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
                     data-meta-event="AddPaymentInfo"
                     data-meta-action="select_payment_method"
                     data-meta-payment-type="cod"
-                    className={clx(
-                      "w-full py-2.5 min-[550px]:py-3 text-xs min-[550px]:text-sm sm:text-base text-gray-900 bg-white border-2 font-bold rounded-lg transition-colors border-[#8B5AB1]",
-                      {
-                        "hover:bg-purple-50": !isPaymentDisabled,
-                        "opacity-50 cursor-not-allowed": isPaymentDisabled
-                      }
-                    )}
-                    style={{ borderRadius: '30px' }}
+                    className={clx(secondaryBtn, {
+                      "opacity-50 cursor-not-allowed": isPaymentDisabled,
+                    })}
                   >
                     Cash on Delivery
                   </button>
                   <button
+                    type="button"
                     onClick={async () => {
                       trackPaymentMethodClick("razorpay")
                       setProcessingVariant("payment")
@@ -469,7 +470,7 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
                               contact: paymentPhone || undefined,
                             },
                             theme: {
-                              color: "#8B5AB1"
+                              color: "var(--sf-btn-primary)"
                             },
                             modal: {
                               ondismiss: () => {
@@ -498,14 +499,9 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
                     data-meta-event="AddPaymentInfo"
                     data-meta-action="select_payment_method"
                     data-meta-payment-type="razorpay"
-                    className={clx(
-                      "w-full py-2.5 min-[550px]:py-3 text-xs min-[550px]:text-sm sm:text-base text-white font-bold rounded-lg transition-colors bg-[#8B5AB1]",
-                      {
-                        "hover:opacity-90": !isPaymentDisabled,
-                        "opacity-50 cursor-not-allowed": isPaymentDisabled
-                      }
-                    )}
-                    style={{ borderRadius: '30px' }}
+                    className={clx(primaryBtn, {
+                      "opacity-50 cursor-not-allowed": isPaymentDisabled,
+                    })}
                   >
                     Pay with Razorpay
                   </button>
@@ -522,36 +518,35 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
               )}
             </div>
           ) : activeStep === "address" ? (
-            <button
+            <ThemedButton
+              variant="primary"
+              size="lg"
+              fullWidth
               onClick={() => {
                 window.dispatchEvent(new CustomEvent('trigger-checkout-step'))
               }}
-              className="w-full py-2.5 min-[550px]:py-3 sm:py-4 min-[1023px]:py-3 min-[1150px]:py-4 min-[1360px]:py-4 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-white font-medium mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6 rounded-lg transition-colors duration-200 hover:opacity-90"
-              style={{
-                backgroundColor: '#8B5AB1',
-                borderRadius: '30px'
-              }}
+              className="mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6"
               data-testid="checkout-button-address"
             >
               Continue to delivery
-            </button>
+            </ThemedButton>
           ) : (
-            <button
+            <ThemedButton
+              variant="primary"
+              size="lg"
+              fullWidth
               onClick={handleProceedToCheckout}
               disabled={isRedirecting}
+              isLoading={isRedirecting}
               data-ga-event="proceed_to_checkout_click"
               data-meta-event="InitiateCheckout"
               data-meta-action="proceed_to_checkout"
               data-ga-label={convertToLocale({ amount: finalTotal, currency_code })}
-              className="w-full h-10 min-[550px]:h-11 sm:h-12 min-[1023px]:h-11 min-[1150px]:h-12 min-[1360px]:h-12 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-white font-medium transition-colors duration-200 hover:opacity-90 mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6 disabled:opacity-50"
-              style={{
-                backgroundColor: '#8B5AB1',
-                borderRadius: '30px'
-              }}
+              className="mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6"
               data-testid="checkout-button"
             >
               {isRedirecting ? "Loading..." : "Proceed to Checkout"}
-            </button>
+            </ThemedButton>
           )}
         </div>
       )}

package/src/common/components/checkbox/index.tsx

@@ -56,8 +56,8 @@ const CheckboxWithLabel: React.FC<CheckboxProps> = ({
         data-ga-label={dataGaLabel}
         className="w-5 h-5 rounded-md border-2 flex items-center justify-center transition-all focus:outline-none focus:ring-2 focus:ring-offset-2"
         style={checked ? {
-          backgroundColor: '#8B5AB1',
-          borderColor: '#8B5AB1'
+          backgroundColor: 'var(--sf-btn-primary)',
+          borderColor: 'var(--sf-btn-primary)'
         } : {
           backgroundColor: 'white',
           borderColor: '#C0C0C0'

package/src/common/components/delete-button/index.tsx

@@ -100,7 +100,7 @@ const DeleteButton = ({
           {/* Body Content */}
           <div className="p-6 flex gap-6 pr-12">
             {/* Product Thumbnail */}
-            <div className="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 bg-gray-50 rounded-sm overflow-hidden border border-gray-100 shadow-sm">
+            <div className="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 bg-[color-mix(in_srgb,var(--sf-color-text-muted)_8%,var(--sf-color-surface))] rounded-sm overflow-hidden border border-gray-100 shadow-sm">
               {thumbnail ? (
                 <Image 
                   src={thumbnail} 
@@ -110,14 +110,14 @@ const DeleteButton = ({
                   className="w-full h-full object-cover"
                 />
               ) : (
-                <div className="w-full h-full flex items-center justify-center text-gray-300 bg-gray-50 uppercase text-[10px] font-bold">No Image</div>
+                <div className="w-full h-full flex items-center justify-center text-[var(--sf-color-text-muted)] bg-[color-mix(in_srgb,var(--sf-color-text-muted)_8%,var(--sf-color-surface))] uppercase text-[10px] font-bold">No Image</div>
               )}
             </div>
 
             {/* Title and Description */}
             <div className="flex flex-col justify-center">
-              <h3 className="text-[17px] font-bold text-gray-800 mb-1.5 leading-tight">Move from Bag</h3>
-              <p className="text-[15px] text-gray-500 leading-snug font-medium max-w-[280px]">
+              <h3 className="text-[17px] font-bold text-[var(--sf-color-text)] mb-1.5 leading-tight">Move from Bag</h3>
+              <p className="text-[15px] text-[var(--sf-color-text-muted)] leading-snug font-medium max-w-[280px]">
                 Are you sure you want to move this item from bag?
               </p>
               
@@ -132,7 +132,7 @@ const DeleteButton = ({
             <button
               onClick={handleDelete}
               disabled={isDeleting}
-              className="flex-1 h-full flex items-center justify-center text-[13px] font-bold text-gray-500 tracking-wider hover:bg-gray-50 transition-colors uppercase"
+              className="flex-1 h-full flex items-center justify-center text-[13px] font-bold text-[var(--sf-color-text-muted)] tracking-wider hover:bg-[color-mix(in_srgb,var(--sf-color-text-muted)_8%,transparent)] transition-colors uppercase"
             >
               {isDeleting ? <Spinner className="animate-spin" /> : "REMOVE"}
             </button>
@@ -143,7 +143,7 @@ const DeleteButton = ({
             <button
               onClick={handleMoveToWishlist}
               disabled={wishlistLoading}
-              className="flex-1 h-full flex items-center justify-center text-[13px] font-bold tracking-wider hover:bg-gray-50 transition-colors uppercase"
+              className="flex-1 h-full flex items-center justify-center text-[13px] font-bold tracking-wider hover:bg-[color-mix(in_srgb,var(--sf-color-text-muted)_8%,transparent)] transition-colors uppercase"
               style={{ color: '#D25C78' }} // Pinkish color from reference
             >
               {wishlistLoading ? <Spinner className="animate-spin" /> : "MOVE TO WISHLIST"}

package/src/common/components/discount-code/index.tsx

@@ -71,7 +71,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
       style={{ width: '480px', maxWidth: '100%' }}
     >
       {/* COUPONS Heading */}
-      <Heading className="text-lg font-bold text-gray-900 mb-4 uppercase">
+      <Heading className="text-lg font-bold text-[var(--sf-color-text)] mb-4 uppercase">
         COUPONS
       </Heading>
 
@@ -86,15 +86,15 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
         <div className="flex items-center gap-3">
           {/* Percentage Icon - White circle with black % symbol */}
           <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center flex-shrink-0 shadow-sm">
-            <span className="text-gray-900 font-bold text-xl">%</span>
+            <span className="text-[var(--sf-color-text)] font-bold text-xl">%</span>
           </div>
 
           {/* Text Content */}
           <div className="flex flex-col items-start">
-            <span className="font-bold text-base text-gray-900">
+            <span className="font-bold text-base text-[var(--sf-color-text)]">
               Apply Coupons
             </span>
-            <span className="text-sm text-gray-500">
+            <span className="text-sm text-[var(--sf-color-text-muted)]">
               View all offers
             </span>
           </div>
@@ -102,7 +102,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
 
         {/* Chevron Icon */}
         <svg
-          className="w-5 h-5 text-gray-900"
+          className="w-5 h-5 text-[var(--sf-color-text)]"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -131,7 +131,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
             />
             <SubmitButton
               variant="secondary"
-              className="!bg-[#8B5AB1] hover:!bg-[#7a4a9f] text-white border-0"
+              className="!bg-[var(--sf-btn-primary)] hover:!bg-[var(--sf-btn-primary-hover)] text-white border-0"
               data-testid="discount-apply-button"
             >
               Apply
@@ -157,7 +157,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
       {/* Applied Promotions - Clean Card Redesign */}
       {promotions.length > 0 && (
         <div className="w-full flex flex-col mt-6 pt-4 border-t border-gray-100">
-          <Heading className="text-sm font-bold mb-3 text-gray-900 uppercase tracking-tight">
+          <Heading className="text-sm font-bold mb-3 text-[var(--sf-color-text)] uppercase tracking-tight">
             Promotion(s) applied:
           </Heading>
 
@@ -166,12 +166,12 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
               return (
                 <div
                   key={promotion.id}
-                  className="flex items-center justify-between w-full p-3 rounded-xl border border-purple-100 bg-purple-50/50 transition-all hover:bg-purple-50 group"
+                  className="flex items-center justify-between w-full p-3 rounded-xl border border-purple-100 bg-[var(--sf-color-primary)]/10 transition-all hover:bg-[var(--sf-color-primary)]/10 group"
                   data-testid="discount-row"
                 >
                   <div className="flex items-center gap-x-3 overflow-hidden">
                     {/* Tag Icon */}
-                    <div className="flex-shrink-0 text-[#8B5AB1]">
+                    <div className="flex-shrink-0 text-[var(--sf-btn-primary)]">
                       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                         <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
                         <line x1="7" y1="7" x2="7.01" y2="7"></line>
@@ -179,7 +179,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
                     </div>
 
                     <div className="flex flex-col overflow-hidden">
-                      <span className="font-bold truncate text-sm uppercase tracking-wider" style={{ color: '#8B5AB1' }} data-testid="discount-code">
+                      <span className="font-bold truncate text-sm uppercase tracking-wider" style={{ color: 'var(--sf-btn-primary)' }} data-testid="discount-code">
                         {promotion.code}
                       </span>
                       {promotion.application_method?.value !== undefined && (
@@ -197,7 +197,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
 
                   {!promotion.is_automatic && (
                     <button
-                      className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-full transition-all"
+                      className="p-2 text-[var(--sf-color-text-muted)] hover:text-red-500 hover:bg-red-50 rounded-full transition-all"
                       onClick={() => {
                         if (!promotion.code) return
                         removePromotionCode(promotion.code)

package/src/common/components/filter-checkbox-group/index.tsx

@@ -66,12 +66,12 @@ const FilterCheckboxGroup = ({
             >
                 <Heading
                     level="h3"
-                    className="text-sm font-bold text-gray-900 uppercase tracking-wider group-hover:text-[#8B5AB1] transition-colors"
+                    className="text-sm font-bold text-[var(--sf-color-text)] uppercase tracking-wider group-hover:text-[var(--sf-btn-primary)] transition-colors"
                 >
                     {title}
                 </Heading>
                 <span
-                    className={`transform transition-transform duration-300 text-gray-400 group-hover:text-[#8B5AB1] ${isOpen ? "" : "-rotate-180"}`}
+                    className={`transform transition-transform duration-300 text-[var(--sf-color-text-muted)] group-hover:text-[var(--sf-btn-primary)] ${isOpen ? "" : "-rotate-180"}`}
                 >
                     <svg
                         width="18"
@@ -108,7 +108,7 @@ const FilterCheckboxGroup = ({
                 {hasMore && isOpen && (
                     <button
                         onClick={() => setShowAll(!showAll)}
-                        className="text-xs font-bold text-[#8B5AB1] hover:underline mt-2 flex items-center gap-1 uppercase tracking-tight"
+                        className="text-xs font-bold text-[var(--sf-btn-primary)] hover:underline mt-2 flex items-center gap-1 uppercase tracking-tight"
                     >
                         {showAll ? "View Less" : `View More (${items.length - initialItemsCount})`}
                         <svg

package/src/common/components/input/index.tsx

@@ -1,8 +1,13 @@
+"use client"
+
 import { Label } from "@medusajs/ui"
+import { clx } from "@medusajs/ui"
 import React, { useEffect, useImperativeHandle, useState } from "react"
 
 import Eye from "medusa-ui-common/common/icons/eye"
 import EyeOff from "medusa-ui-common/common/icons/eye-off"
+import { useFormThemeClasses } from "../../../context/storefront-theme-classes-context"
+import type { FormThemeClassNames } from "medusa-storefront-theme-base/form-theme"
 
 type InputProps = Omit<
   Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
@@ -13,13 +18,17 @@ type InputProps = Omit<
   touched?: Record<string, unknown>
   name: string
   topLabel?: string
+  /** Override site form theme per field */
+  classNames?: Partial<FormThemeClassNames>
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ type, name, label, touched, required, topLabel, ...props }, ref) => {
+  ({ type, name, label, touched, required, topLabel, classNames, className, ...props }, ref) => {
     const inputRef = React.useRef<HTMLInputElement>(null)
     const [showPassword, setShowPassword] = useState(false)
     const [inputType, setInputType] = useState(type)
+    const formTheme = useFormThemeClasses(classNames)
+    const cn = formTheme
 
     useEffect(() => {
       if (type === "password" && showPassword) {
@@ -36,7 +45,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className="flex flex-col w-full">
         {topLabel && (
-          <Label className="mb-2 txt-compact-medium-plus">{topLabel}</Label>
+          <Label className={cn.topLabel}>{topLabel}</Label>
         )}
         <div className="flex relative z-0 w-full txt-compact-medium overflow-visible">
           <input
@@ -44,8 +53,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             name={name}
             placeholder=" "
             required={required}
-            className="peer pt-6 pb-2 block w-full h-12 px-4 mt-0 bg-white border rounded-md appearance-none focus:outline-none focus:border-[#8B5AB1] focus:ring-0 hover:bg-gray-50 transition-colors duration-200 antialiased"
-            style={{ borderColor: '#C0C0C0' }}
+            className={clx(cn.field, className)}
             {...props}
             ref={inputRef}
           />
@@ -53,7 +61,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <label
               htmlFor={name}
               onClick={() => inputRef.current?.focus()}
-              className="flex items-center justify-center absolute left-4 px-1 transition-all duration-300 top-1/2 -translate-y-1/2 origin-0 text-ui-fg-subtle pointer-events-none peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-[11px] peer-focus:text-[#8B5AB1] 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"
+              className={clx(
+                "flex items-center justify-center absolute left-4 px-1 transition-all duration-300 top-1/2 -translate-y-1/2 origin-0 pointer-events-none",
+                cn.label,
+                cn.labelFloating,
+              )}
             >
               {label}
               {required && <span className="text-rose-500">*</span>}
@@ -63,7 +75,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <button
               type="button"
               onClick={() => setShowPassword(!showPassword)}
-              className="text-ui-fg-subtle px-4 focus:outline-none transition-all duration-150 outline-none focus:text-ui-fg-base absolute right-0 top-3"
+              className="text-[var(--sf-input-label)] px-4 focus:outline-none transition-all duration-150 outline-none hover:text-[var(--sf-input-text)] absolute right-0 top-3"
             >
               {showPassword ? <Eye /> : <EyeOff />}
             </button>

package/src/common/components/login-popup/index.tsx

@@ -34,38 +34,38 @@ export default function LoginPopup({ isOpen, onClose, countryCode = "us", messag
   return (
     <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-white/10 backdrop-blur-md p-4 animate-in fade-in duration-200">
       <div
-        className="bg-[#FFFAFE] rounded-2xl shadow-2xl p-8 max-w-sm w-full mx-auto border border-gray-100 transform transition-all scale-100 animate-in zoom-in-95 duration-200"
+        className="bg-[var(--sf-color-background)] rounded-2xl shadow-2xl p-8 max-w-sm w-full mx-auto border border-gray-100 transform transition-all scale-100 animate-in zoom-in-95 duration-200"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="text-center">
           <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 mb-4">
-            <svg className="h-6 w-6 text-[#8B5AB1]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg className="h-6 w-6 text-[var(--sf-btn-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
             </svg>
           </div>
-          <h2 className="text-xl font-bold text-gray-900 mb-2">
+          <h2 className="text-xl font-bold text-[var(--sf-color-text)] mb-2">
             Login Required
           </h2>
-          <p className="text-gray-500 mb-8 text-sm leading-relaxed">
+          <p className="text-[var(--sf-color-text-muted)] mb-8 text-sm leading-relaxed">
             {message}
           </p>
 
           <div className="grid grid-cols-2 gap-3">
             <button
               onClick={onClose}
-              className="px-4 py-2.5 border border-gray-200 rounded-xl font-semibold text-gray-600 hover:bg-gray-50 hover:border-gray-300 active:scale-95 transition-all duration-200"
+              className="px-4 py-2.5 border border-gray-200 rounded-xl font-semibold text-[var(--sf-color-text-muted)] hover:bg-[color-mix(in_srgb,var(--sf-color-text-muted)_8%,transparent)] hover:border-gray-300 active:scale-95 transition-all duration-200"
             >
               Cancel
             </button>
             <button
               onClick={handleLoginClick}
               className="px-4 py-2.5 rounded-xl font-semibold text-white transition-all duration-200 hover:shadow-lg hover:shadow-purple-100 active:scale-95"
-              style={{ backgroundColor: '#8B5AB1' }}
+              style={{ backgroundColor: 'var(--sf-btn-primary)' }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.backgroundColor = '#7a4a9a'
+                e.currentTarget.style.backgroundColor = 'var(--sf-btn-primary-hover)'
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor = '#8B5AB1'
+                e.currentTarget.style.backgroundColor = 'var(--sf-btn-primary)'
               }}
             >
               Login

package/src/common/components/modal/index.tsx

@@ -89,9 +89,9 @@ const Title: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 
   return (
     <Dialog.Title className="flex items-center justify-between px-6 small:px-8 py-5 border-b border-gray-100 flex-shrink-0">
-      <div className="text-xl small:text-2xl font-bold text-gray-900">{children}</div>
+      <div className="text-xl small:text-2xl font-bold text-[var(--sf-color-text)]">{children}</div>
       <div>
-        <button onClick={close} data-testid="close-modal-button" className="p-2 hover:bg-gray-100 rounded-full transition-colors text-gray-500">
+        <button onClick={close} data-testid="close-modal-button" className="p-2 hover:bg-[color-mix(in_srgb,var(--sf-color-text-muted)_10%,transparent)] rounded-full transition-colors text-[var(--sf-color-text-muted)]">
           <X size={24} />
         </button>
       </div>

package/src/common/components/native-select/index.tsx

@@ -42,7 +42,7 @@ const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           onFocus={() => innerRef.current?.focus()}
           onBlur={() => innerRef.current?.blur()}
           className={clx(
-            "relative flex items-center text-base-regular border bg-white rounded-lg hover:bg-gray-50",
+            "relative flex items-center text-base-regular border bg-white rounded-lg hover:bg-[color-mix(in_srgb,var(--sf-color-text-muted)_8%,transparent)]",
             className,
             {
               "text-ui-fg-muted": isPlaceholder,

package/src/common/components/processing-overlay/index.tsx

@@ -60,19 +60,19 @@ const ProcessingOverlay = ({
           />
         </div>
 
-        <h3 className="text-xl font-bold text-gray-900 mb-1 text-center">{displayTitle}</h3>
+        <h3 className="text-xl font-bold text-[var(--sf-color-text)] mb-1 text-center">{displayTitle}</h3>
         
         <div className="h-6 flex items-center justify-center mb-2 text-center px-4">
-          <p key={messageIndex} className="text-[#8B5AB1] font-semibold text-sm animate-in slide-in-from-bottom-2 fade-in duration-500">
+          <p key={messageIndex} className="text-[var(--sf-btn-primary)] font-semibold text-sm animate-in slide-in-from-bottom-2 fade-in duration-500">
             {messages[messageIndex]}
           </p>
         </div>
 
         <div className="w-full bg-gray-100 h-1.5 rounded-full overflow-hidden mb-4">
-          <div className="h-full bg-[#8B5AB1] rounded-full animate-progress transition-all duration-500 ease-out"></div>
+          <div className="h-full bg-[var(--sf-btn-primary)] rounded-full animate-progress transition-all duration-500 ease-out"></div>
         </div>
 
-        <p className="text-xs text-gray-400 text-center italic leading-relaxed">
+        <p className="text-xs text-[var(--sf-color-text-muted)] text-center italic leading-relaxed">
           {subtitle}
         </p>
       </div>

package/src/common/components/side-panel/index.tsx

@@ -35,16 +35,16 @@ const SidePanel: React.FC<SidePanelProps> = ({ isOpen, onClose, title, children
             {/* Panel */}
             <div
                 className={clx(
-                    "fixed top-0 right-0 h-full w-[90%] min-[400px]:w-[350px] sm:w-[400px] md:w-[450px] lg:w-[480px] bg-[#FFFAFE] shadow-2xl transition-transform duration-300 ease-in-out z-[1000] flex flex-col",
+                    "fixed top-0 right-0 h-full w-[90%] min-[400px]:w-[350px] sm:w-[400px] md:w-[450px] lg:w-[480px] bg-[var(--sf-color-background)] shadow-2xl transition-transform duration-300 ease-in-out z-[1000] flex flex-col",
                     isOpen ? "translate-x-0" : "translate-x-full"
                 )}
             >
                 {/* Header */}
                 <div className="flex items-center justify-between p-6 border-b border-gray-100">
-                    <h2 className="text-xl font-bold text-gray-900">{title}</h2>
+                    <h2 className="text-xl font-bold text-[var(--sf-color-text)]">{title}</h2>
                     <button
                         onClick={onClose}
-                        className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+                        className="p-2 hover:bg-[color-mix(in_srgb,var(--sf-color-text-muted)_10%,transparent)] rounded-full transition-colors"
                     >
                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                             <line x1="18" y1="6" x2="6" y2="18"></line>

package/src/common/components/submit-button/index.tsx

@@ -1,32 +1,35 @@
-"use client"
+"use client";
 
-import { Button } from "@medusajs/ui"
-import React from "react"
-import { useFormStatus } from "react-dom"
+import React from "react";
+import { useFormStatus } from "react-dom";
+import { ThemedButton, type ThemedButtonProps } from "../themed-button";
 
 export function SubmitButton({
   children,
   variant = "primary",
   className,
+  size = "lg",
   "data-testid": dataTestId,
 }: {
-  children: React.ReactNode
-  variant?: "primary" | "secondary" | "transparent" | "danger" | null
-  className?: string
-  "data-testid"?: string
+  children: React.ReactNode;
+  variant?: ThemedButtonProps["variant"];
+  className?: string;
+  size?: ThemedButtonProps["size"];
+  "data-testid"?: string;
 }) {
-  const { pending } = useFormStatus()
+  const { pending } = useFormStatus();
 
   return (
-    <Button
-      size="large"
+    <ThemedButton
+      size={size}
       className={className}
       type="submit"
       isLoading={pending}
-      variant={variant || "primary"}
+      variant={variant}
       data-testid={dataTestId}
+      fullWidth
     >
       {children}
-    </Button>
-  )
+    </ThemedButton>
+  );
 }

package/src/common/components/themed-button/index.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { clx } from "@medusajs/ui";
+import React, { forwardRef } from "react";
+import {
+  useButtonClassName,
+  type ButtonSize,
+  type ButtonTheme,
+  type ButtonVariant,
+} from "../../../context/button-theme-context";
+import Spinner from "../../icons/spinner";
+
+export type ThemedButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /** Override site theme for this button only (e.g. import `minimalButtonTheme`). */
+  theme?: ButtonTheme;
+  isLoading?: boolean;
+  fullWidth?: boolean;
+};
+
+export const ThemedButton = forwardRef<HTMLButtonElement, ThemedButtonProps>(
+  function ThemedButton(
+    {
+      variant = "primary",
+      size = "md",
+      theme,
+      className,
+      children,
+      disabled,
+      isLoading,
+      fullWidth,
+      type = "button",
+      ...props
+    },
+    ref,
+  ) {
+    const resolvedClassName = useButtonClassName(variant, {
+      size,
+      theme,
+      className: clx(fullWidth && "w-full", className),
+    });
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled || isLoading}
+        className={resolvedClassName}
+        {...props}
+      >
+        {isLoading ? (
+          <span className="inline-flex items-center justify-center gap-2">
+            <Spinner />
+            {children}
+          </span>
+        ) : (
+          children
+        )}
+      </button>
+    );
+  },
+);

package/src/context/button-theme-context.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  type ReactNode,
+} from "react";
+import { clx } from "@medusajs/ui";
+import {
+  defaultButtonTheme,
+  type ButtonSize,
+  type ButtonTheme,
+  type ButtonVariant,
+} from "medusa-storefront-theme-base/button-theme";
+import { buildButtonCssVars } from "../util/button-css-vars";
+
+const fallbackButtonCssVars = buildButtonCssVars({
+  primary: "#8B5AB1",
+  primaryHover: "#7a4a9a",
+  secondary: "#D4AF37",
+  secondaryHover: "#B8942F",
+  black: "#111111",
+  blackHover: "#000000",
+});
+
+export type { ButtonSize, ButtonTheme, ButtonVariant };
+
+type ButtonThemeContextValue = {
+  theme: ButtonTheme;
+  classNameFor: (
+    variant: ButtonVariant,
+    options?: { size?: ButtonSize; className?: string; theme?: ButtonTheme },
+  ) => string;
+};
+
+const ButtonThemeContext = createContext<ButtonThemeContextValue | undefined>(
+  undefined,
+);
+
+export type ButtonThemeProviderProps = {
+  children: ReactNode;
+  /** Site-wide button styles — import a library preset and extend in compositions/theme.ts */
+  theme?: ButtonTheme;
+  /** Injected on documentElement so all sections (banner, login, checkout) share colors */
+  cssVars?: Record<string, string>;
+};
+
+function applyButtonCssVars(cssVars: Record<string, string>) {
+  const root = document.documentElement;
+  Object.entries(cssVars).forEach(([key, value]) => {
+    root.style.setProperty(key, value);
+  });
+}
+
+function clearButtonCssVars(cssVars: Record<string, string>) {
+  const root = document.documentElement;
+  Object.keys(cssVars).forEach((key) => {
+    root.style.removeProperty(key);
+  });
+}
+
+export function ButtonThemeProvider({
+  children,
+  theme = defaultButtonTheme,
+  cssVars: cssVarsProp,
+}: ButtonThemeProviderProps) {
+  const cssVars = cssVarsProp ?? fallbackButtonCssVars;
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    applyButtonCssVars(cssVars);
+    return () => clearButtonCssVars(cssVars);
+  }, [cssVars]);
+
+  const classNameFor = useCallback(
+    (
+      variant: ButtonVariant,
+      options?: { size?: ButtonSize; className?: string; theme?: ButtonTheme },
+    ) => {
+      const active = options?.theme ?? theme;
+      const size = options?.size ?? "md";
+      return clx(
+        active.base,
+        active.sizes?.[size],
+        active.variants[variant],
+        options?.className,
+      );
+    },
+    [theme],
+  );
+
+  const value = useMemo(
+    () => ({ theme, classNameFor }),
+    [theme, classNameFor],
+  );
+
+  const cssVarStyle =
+    cssVars &&
+    `:root{${Object.entries(cssVars)
+      .map(([k, v]) => `${k}:${v}`)
+      .join(";")}}`;
+
+  return (
+    <ButtonThemeContext.Provider value={value}>
+      {cssVarStyle ? (
+        <style dangerouslySetInnerHTML={{ __html: cssVarStyle }} />
+      ) : null}
+      {children}
+    </ButtonThemeContext.Provider>
+  );
+}
+
+export function useButtonTheme(): ButtonThemeContextValue {
+  const ctx = useContext(ButtonThemeContext);
+  if (!ctx) {
+    throw new Error("useButtonTheme must be used within a ButtonThemeProvider");
+  }
+  return ctx;
+}
+
+/** Resolve Tailwind classes for a variant (optionally override theme per call). */
+export function useButtonClassName(
+  variant: ButtonVariant = "primary",
+  options?: { size?: ButtonSize; className?: string; theme?: ButtonTheme },
+): string {
+  const { classNameFor } = useButtonTheme();
+  return classNameFor(variant, options);
+}

package/src/context/site-theme-context.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  type ReactNode,
+} from "react";
+import {
+  buildStorefrontRootCss,
+  buildStorefrontRootCssVars,
+  buildStorefrontThemeCssVars,
+  defaultStorefrontTheme,
+  type StorefrontTheme,
+} from "../util/storefront-theme";
+
+export type SiteThemeContextValue = {
+  theme: StorefrontTheme;
+  cssVars: Record<string, string>;
+  buttonCssVars: Record<string, string>;
+};
+
+const SiteThemeContext = createContext<SiteThemeContextValue | undefined>(
+  undefined,
+);
+
+function applyCssVars(cssVars: Record<string, string>) {
+  const root = document.documentElement;
+  Object.entries(cssVars).forEach(([key, value]) => {
+    root.style.setProperty(key, value);
+  });
+}
+
+function clearCssVars(cssVars: Record<string, string>) {
+  const root = document.documentElement;
+  Object.keys(cssVars).forEach((key) => {
+    root.style.removeProperty(key);
+  });
+}
+
+export type SiteThemeProviderProps = {
+  children: ReactNode;
+  /** Site theme from compositions/theme.ts */
+  theme?: StorefrontTheme;
+};
+
+export function SiteThemeProvider({
+  children,
+  theme = defaultStorefrontTheme,
+}: SiteThemeProviderProps) {
+  const themeCssVars = useMemo(() => buildStorefrontThemeCssVars(theme), [theme]);
+  const allCssVars = useMemo(() => buildStorefrontRootCssVars(theme), [theme]);
+  const buttonCssVars = useMemo(
+    () =>
+      Object.fromEntries(
+        Object.entries(allCssVars).filter(([key]) => key.startsWith("--sf-btn-")),
+      ) as Record<string, string>,
+    [allCssVars],
+  );
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    applyCssVars(allCssVars);
+    return () => clearCssVars(allCssVars);
+  }, [allCssVars]);
+
+  const cssVarStyle = buildStorefrontRootCss(theme);
+
+  const value = useMemo(
+    () => ({ theme, cssVars: themeCssVars, buttonCssVars }),
+    [theme, themeCssVars, buttonCssVars],
+  );
+
+  return (
+    <SiteThemeContext.Provider value={value}>
+      <style dangerouslySetInnerHTML={{ __html: cssVarStyle }} />
+      {children}
+    </SiteThemeContext.Provider>
+  );
+}
+
+export function useSiteTheme(): SiteThemeContextValue {
+  const ctx = useContext(SiteThemeContext);
+  if (!ctx) {
+    throw new Error("useSiteTheme must be used within a SiteThemeProvider");
+  }
+  return ctx;
+}

package/src/context/storefront-theme-classes-context.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useMemo,
+  type ReactNode,
+} from "react";
+import {
+  createDefaultStorefrontThemeClasses,
+  defaultFormThemeClassNames,
+  mergeFormTheme,
+  mergeThemeSlots,
+  type FormThemeClassNames,
+  type StorefrontThemeClasses,
+} from "medusa-storefront-theme-base";
+
+export type StorefrontThemeClassesContextValue = {
+  themeClasses: StorefrontThemeClasses;
+  form: FormThemeClassNames;
+};
+
+const StorefrontThemeClassesContext = createContext<
+  StorefrontThemeClassesContextValue | undefined
+>(undefined);
+
+export type StorefrontThemeClassesProviderProps = {
+  children: ReactNode;
+  themeClasses?: StorefrontThemeClasses;
+  form?: FormThemeClassNames;
+};
+
+export function StorefrontThemeClassesProvider({
+  children,
+  themeClasses = createDefaultStorefrontThemeClasses(),
+  form = defaultFormThemeClassNames,
+}: StorefrontThemeClassesProviderProps) {
+  const value = useMemo(
+    () => ({ themeClasses, form }),
+    [themeClasses, form],
+  );
+  return (
+    <StorefrontThemeClassesContext.Provider value={value}>
+      {children}
+    </StorefrontThemeClassesContext.Provider>
+  );
+}
+
+export function useStorefrontThemeClasses(): StorefrontThemeClassesContextValue {
+  const ctx = useContext(StorefrontThemeClassesContext);
+  if (!ctx) {
+    return {
+      themeClasses: createDefaultStorefrontThemeClasses(),
+      form: defaultFormThemeClassNames,
+    };
+  }
+  return ctx;
+}
+
+/** Theme slot for a UI area (account, order, cart, …) with optional prop overrides. */
+export function useThemeSection<K extends keyof StorefrontThemeClasses>(
+  section: K,
+  propOverrides?: Partial<StorefrontThemeClasses[K]>,
+): StorefrontThemeClasses[K] {
+  const { themeClasses } = useStorefrontThemeClasses();
+  return useMemo(
+    () =>
+      mergeThemeSlots(
+        themeClasses[section] as Record<string, unknown>,
+        propOverrides as Record<string, unknown> | undefined,
+      ) as StorefrontThemeClasses[K],
+    [themeClasses, section, propOverrides],
+  );
+}
+
+export function useFormThemeClasses(
+  propOverrides?: Partial<FormThemeClassNames>,
+): FormThemeClassNames {
+  const { form } = useStorefrontThemeClasses();
+  return useMemo(
+    () => mergeFormTheme(form, propOverrides),
+    [form, propOverrides],
+  );
+}

package/src/index.ts

@@ -1,6 +1,14 @@
 /** Shared contexts */
 export { ModalProvider, useModal } from "./context/modal-context";
 export { WishlistProvider, useWishlist } from "./context/wishlist-context";
+export {
+  ButtonThemeProvider,
+  useButtonClassName,
+  useButtonTheme,
+  type ButtonSize,
+  type ButtonTheme,
+  type ButtonVariant,
+} from "./context/button-theme-context";
 
 /** Utilities */
 export { getBaseURL } from "./util/env";

package/src/skeletons/templates/skeleton-order-confirmed/index.tsx

@@ -4,7 +4,7 @@ import SkeletonOrderItems from "medusa-ui-common/skeletons/components/skeleton-o
 
 const SkeletonOrderConfirmed = () => {
   return (
-    <div className="bg-gray-50 py-6 min-h-[calc(100vh-64px)] animate-pulse">
+    <div className="bg-[color-mix(in_srgb,var(--sf-color-text-muted)_8%,var(--sf-color-surface))] py-6 min-h-[calc(100vh-64px)] animate-pulse">
       <div className="content-container flex justify-center">
         <div className="max-w-4xl h-full bg-white w-full p-10">
           <SkeletonOrderConfirmedHeader />

package/src/storefront-providers.tsx

@@ -1,11 +1,119 @@
 "use client";
 
 import type { ReactNode } from "react";
+import {
+  defaultButtonTheme,
+  type ButtonTheme,
+} from "medusa-storefront-theme-base/button-theme";
+import {
+  ButtonThemeProvider,
+  useButtonClassName,
+  useButtonTheme,
+} from "./context/button-theme-context";
+import { SiteThemeProvider, useSiteTheme } from "./context/site-theme-context";
+import {
+  StorefrontThemeClassesProvider,
+  useFormThemeClasses,
+  useStorefrontThemeClasses,
+  useThemeSection,
+} from "./context/storefront-theme-classes-context";
 import { WishlistProvider } from "./context/wishlist-context";
+import {
+  defaultStorefrontTheme,
+  type StorefrontTheme,
+} from "./util/storefront-theme";
+import type {
+  FormThemeClassNames,
+  StorefrontThemeClasses,
+} from "medusa-storefront-theme-base";
 
 export { WishlistProvider, useWishlist } from "./context/wishlist-context";
+export {
+  ButtonThemeProvider,
+  useButtonClassName,
+  useButtonTheme,
+  type ButtonSize,
+  type ButtonTheme,
+  type ButtonVariant,
+} from "./context/button-theme-context";
+export {
+  SiteThemeProvider,
+  useSiteTheme,
+  type SiteThemeContextValue,
+} from "./context/site-theme-context";
+export {
+  StorefrontThemeClassesProvider,
+  useStorefrontThemeClasses,
+  useThemeSection,
+  useFormThemeClasses,
+} from "./context/storefront-theme-classes-context";
+export {
+  buttonCssClasses,
+  buttonCssVarNames,
+  buildButtonCssVars,
+} from "./util/button-css-vars";
+export {
+  themeCssClasses,
+  themeCssVarNames,
+  buildStorefrontThemeCssVars,
+  themeColorsToButtonCssVars,
+  mergeStorefrontTheme,
+  defaultStorefrontTheme,
+  type StorefrontTheme,
+  type StorefrontThemeColors,
+  type StorefrontThemeFonts,
+} from "./util/storefront-theme";
 
-/** Wrap the storefront app so product cards and nav can use `useWishlist`. */
-export function StorefrontUiProviders({ children }: { children: ReactNode }) {
-  return <WishlistProvider>{children}</WishlistProvider>;
+export type StorefrontUiProvidersProps = {
+  children: ReactNode;
+  /** Site-wide colors and fonts — compositions/theme.ts */
+  siteTheme?: StorefrontTheme;
+  /** Button Tailwind variants — derived from siteTheme.colors when omitted */
+  buttonTheme?: ButtonTheme;
+  /** Per-area className slots — from defineSiteTheme().themeClasses */
+  themeClasses?: StorefrontThemeClasses;
+  /** Form field classNames — from defineSiteTheme().siteFormTheme */
+  formTheme?: FormThemeClassNames;
+  /**
+   * @deprecated Prefer siteTheme — button CSS vars are derived from siteTheme.colors.
+   */
+  buttonCssVars?: Record<string, string>;
+};
+
+function ButtonThemeFromSite({
+  children,
+  buttonTheme,
+  legacyButtonCssVars,
+}: {
+  children: ReactNode;
+  buttonTheme: ButtonTheme;
+  legacyButtonCssVars?: Record<string, string>;
+}) {
+  const { buttonCssVars: fromSite } = useSiteTheme();
+  const cssVars = legacyButtonCssVars ?? fromSite;
+  return (
+    <ButtonThemeProvider theme={buttonTheme} cssVars={cssVars}>
+      {children}
+    </ButtonThemeProvider>
+  );
+}
+
+/** Wrap the storefront app (site theme, buttons, wishlist). */
+export function StorefrontUiProviders({
+  children,
+  siteTheme = defaultStorefrontTheme,
+  buttonTheme = defaultButtonTheme,
+  themeClasses,
+  formTheme,
+  buttonCssVars,
+}: StorefrontUiProvidersProps) {
+  return (
+    <SiteThemeProvider theme={siteTheme}>
+      <StorefrontThemeClassesProvider themeClasses={themeClasses} form={formTheme}>
+        <ButtonThemeFromSite buttonTheme={buttonTheme} legacyButtonCssVars={buttonCssVars}>
+          <WishlistProvider>{children}</WishlistProvider>
+        </ButtonThemeFromSite>
+      </StorefrontThemeClassesProvider>
+    </SiteThemeProvider>
+  );
 }

package/src/util/button-css-vars.ts

@@ -0,0 +1,6 @@
+export {
+  buttonCssVarNames,
+  buttonCssClasses,
+  buildButtonCssVars,
+  type ButtonCssVarValues,
+} from "medusa-storefront-theme-base/button-css-vars";

package/src/util/storefront-theme.ts

@@ -0,0 +1,13 @@
+export {
+  themeCssVarNames,
+  themeCssClasses,
+  defaultStorefrontTheme,
+  buildStorefrontThemeCssVars,
+  buildStorefrontRootCssVars,
+  buildStorefrontRootCss,
+  themeColorsToButtonCssVars,
+  mergeStorefrontTheme,
+  type StorefrontTheme,
+  type StorefrontThemeColors,
+  type StorefrontThemeFonts,
+} from "medusa-storefront-theme-base/storefront-theme";