Add Container component and fix radius/maxWidth theming

- Drop buttonRadius prop; button now uses --radius via rounded-md
- Inject @theme radius mappings into ThemeProvider so rounded-* utilities
  pick up --radius inside the Tailwind CDN iframe
- Add shared Container that consumes --container-max-width set from the
  global maxWidth prop, replacing ad-hoc "container mx-auto max-w-7xl px-6"
  wrappers across commerce, landing, footer, navigation, and others
- Simplify maxWidth options to Small/Medium/Large/X-Large/Full bleed and
  shift the scale up so Large (1280px) matches the previous default

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

components/ThemeProvider.tsx

@@ -14,9 +14,8 @@ export type ThemeProps = {
   mutedForegroundColor?: string;
   borderColor?: string;
   radius?: "none" | "sm" | "md" | "lg" | "xl";
-  buttonRadius?: "none" | "sm" | "md" | "lg" | "xl";
   shadow?: "none" | "sm" | "md" | "lg" | "xl";
-  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "full";
 };
 
 const radiusMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
@@ -27,12 +26,12 @@ const radiusMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
   xl: "1rem",
 };
 
-const buttonRadiusMap: Record<NonNullable<ThemeProps["buttonRadius"]>, string> = {
+const maxWidthMap: Record<NonNullable<ThemeProps["maxWidth"]>, string> = {
-  none: "0px",
+  sm: "64rem",
-  sm: "0.25rem",
+  md: "72rem",
-  md: "0.5rem",
+  lg: "80rem",
-  lg: "0.75rem",
+  xl: "96rem",
-  xl: "1rem",
+  full: "100%",
 };
 
 const shadowMap: Record<NonNullable<ThemeProps["shadow"]>, string> = {
@@ -67,8 +66,8 @@ export function ThemeProvider({
   mutedForegroundColor,
   borderColor,
   radius,
-  buttonRadius,
   shadow,
+  maxWidth,
   children,
 }: ThemeProps & { children?: React.ReactNode }) {
   // Recompute CSS-variable map only when a relevant prop changes.
@@ -84,8 +83,8 @@ export function ThemeProvider({
     if (mutedForegroundColor) vars["--muted-foreground"] = mutedForegroundColor;
     if (borderColor) vars["--border"] = borderColor;
     if (radius) vars["--radius"] = radiusMap[radius];
-    if (buttonRadius) vars["--button-radius"] = buttonRadiusMap[buttonRadius];
     if (shadow) vars["--shadow"] = shadowMap[shadow];
+    if (maxWidth) vars["--container-max-width"] = maxWidthMap[maxWidth];
     if (headerFont) vars["--font-header"] = `"${headerFont}", system-ui, sans-serif`;
     if (bodyFont) vars["--font-body"] = `"${bodyFont}", system-ui, sans-serif`;
     return vars;
@@ -102,8 +101,8 @@ export function ThemeProvider({
     mutedForegroundColor,
     borderColor,
     radius,
-    buttonRadius,
     shadow,
+    maxWidth,
   ]);
 
   // Imperatively push every CSS var onto :root inside the host document
@@ -157,6 +156,12 @@ export function ThemeProvider({
     @theme {
       --font-family-heading: var(--font-header), system-ui, -apple-system, sans-serif;
       --font-family-body: var(--font-body), system-ui, -apple-system, sans-serif;
+      --radius-sm: calc(var(--radius) * 0.5);
+      --radius-md: calc(var(--radius) * 0.75);
+      --radius-lg: var(--radius);
+      --radius-xl: calc(var(--radius) * 1.5);
+      --radius-2xl: calc(var(--radius) * 2);
+      --radius-3xl: calc(var(--radius) * 3);
     }
   `;
 

components/commerce/collection-grid.tsx

@@ -3,6 +3,7 @@ import { Link } from "react-router";
 import { shopifyFetch } from "@/services/shopify/client";
 import { GET_COLLECTIONS_QUERY } from "@/graphql/collections";
 import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
 
 export type CollectionGridProps = {
   tagline: string;
@@ -45,7 +46,7 @@ export function CollectionGrid({
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         <div className="mx-auto mb-12 max-w-2xl text-center">
           {tagline ? (
             <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
@@ -110,7 +111,7 @@ export function CollectionGrid({
             </Link>
           ))}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/collection.tsx

@@ -13,6 +13,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetFooter } from '@/components/ui/sheet';
 import { Button } from '@/components/ui/button';
+import { Container } from '@/components/layout/Container';
 import { cn } from '@/lib/utils';
 
 type FilterOption = { label: string };
@@ -425,7 +426,7 @@ export function CollectionView(props: CollectionProps) {
   if (!selected && !paramHandle) {
     return (
       <section className="bg-background pb-24 pt-12 md:pt-20">
-        <div className="container mx-auto max-w-7xl px-6">
+        <Container>
           <header className="mx-auto mb-14 flex max-w-2xl flex-col items-center gap-3 text-center">
             <Skeleton className="h-3 w-24" />
             <Skeleton className="h-10 w-3/4" />
@@ -435,14 +436,14 @@ export function CollectionView(props: CollectionProps) {
               <Skeleton key={i} className="aspect-[4/5] w-full" />
             ))}
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
 
   return (
     <section className="bg-background pb-24 pt-12 md:pt-20">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         {/* Cover image */}
         {showCoverImage === 'yes' && collectionImage && (
           <div className="mb-10 overflow-hidden rounded-lg">
@@ -545,7 +546,7 @@ export function CollectionView(props: CollectionProps) {
             </button>
           </div>
         )}
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/featured-product.tsx

@@ -4,6 +4,7 @@ import { useProduct } from "@/hooks/use-shopify-products";
 import { useShopifyCart } from "@/hooks/use-shopify-cart";
 import { Typography } from "@/components/Typography";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Container } from "@/components/layout/Container";
 import { cn } from "@/lib/utils";
 
 export type FeaturedProductProps = {
@@ -33,7 +34,7 @@ export function FeaturedProductView({
           tone === "muted" ? "bg-muted/40" : "bg-background",
         )}
       >
-        <div className="container mx-auto grid max-w-7xl grid-cols-1 items-center gap-10 px-6 md:grid-cols-2 md:gap-16">
+        <Container className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
           <div className={cn(align === "right" && "md:order-2")}>
             <Skeleton className="aspect-[4/5] w-full" />
           </div>
@@ -51,7 +52,7 @@ export function FeaturedProductView({
               <Skeleton className="h-11 w-32 rounded-md" />
             </div>
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
@@ -75,7 +76,7 @@ export function FeaturedProductView({
           : "bg-background py-20 md:py-28"
       }
     >
-      <div className="container mx-auto grid max-w-7xl grid-cols-1 items-center gap-10 px-6 md:grid-cols-2 md:gap-16">
+      <Container className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
         <div className={align === "right" ? "md:order-2" : ""}>
           {image ? (
             <img
@@ -123,7 +124,7 @@ export function FeaturedProductView({
             </Link>
           </div>
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/product-details.tsx

@@ -7,6 +7,7 @@ import { Typography } from "@/components/Typography";
 import { cn } from "@/lib/utils";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Loader } from "@/components/ui/loader";
+import { Container } from "@/components/layout/Container";
 
 export type ProductDetailsProps = {
   product: ShopifyProduct | null;
@@ -31,7 +32,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
   if (!handle || loading || !product) {
     return (
       <section className="bg-background py-12 md:py-20">
-        <div className="container mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 md:grid-cols-2 md:gap-16">
+        <Container className="grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-16">
           <div className="flex flex-col gap-4">
             <Skeleton className="aspect-[4/5] w-full" />
             <div className="flex gap-3">
@@ -62,7 +63,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
               <Skeleton className="h-4 w-4/6" />
             </div>
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
@@ -90,7 +91,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
 
   return (
     <section className="bg-background py-12 md:py-20">
-      <div className="container mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 md:grid-cols-2 md:gap-16">
+      <Container className="grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-16">
         <div className="flex flex-col gap-4">
           <div className="aspect-[4/5] w-full overflow-hidden rounded-md bg-muted">
             {main ? (
@@ -214,7 +215,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
             </div>
           ) : null}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/products-carousel.tsx

@@ -12,6 +12,7 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
+import { Container } from "@/components/layout/Container";
 
 export type ProductsCarouselProps = {
   collection: ShopifyCollection | null;
@@ -71,7 +72,7 @@ export function ProductsCarousel({
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         <div className="mb-10 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
           <div className="max-w-xl">
             {tagline ? (
@@ -120,7 +121,7 @@ export function ProductsCarousel({
           <CarouselPrevious className="hidden md:inline-flex" />
           <CarouselNext className="hidden md:inline-flex" />
         </Carousel>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/products-grid.tsx

@@ -5,6 +5,7 @@ import { getProducts } from "@/hooks/use-shopify-products";
 import { getCollectionProducts } from "@/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
 import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
 
 export type ProductsGridProps = {
   collection: ShopifyCollection | null;
@@ -59,7 +60,7 @@ export function ProductsGrid({
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         <div className="mb-12 flex flex-col items-end justify-between gap-6 md:flex-row md:items-end">
           <div className="max-w-xl">
             {tagline ? (
@@ -94,7 +95,7 @@ export function ProductsGrid({
               ))
             : products.map((p) => <ProductCard key={p.id} product={p} />)}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/recommended-products.tsx

@@ -6,6 +6,7 @@ import {
 import { ProductCard } from "./product-card";
 import { Typography } from "@/components/Typography";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Container } from "@/components/layout/Container";
 
 export type RecommendedProductsProps = {
   product: ShopifyProduct | null;
@@ -27,7 +28,7 @@ export function RecommendedProductsView({
   if (!selected) {
     return (
       <section className="bg-background py-20 md:py-28">
-        <div className="container mx-auto max-w-7xl px-6">
+        <Container>
           <div className="mb-12 flex max-w-xl flex-col gap-3">
             {tagline ? <Skeleton className="h-3 w-24" /> : null}
             <Skeleton className="h-8 w-2/3" />
@@ -37,14 +38,14 @@ export function RecommendedProductsView({
               <Skeleton key={i} className="aspect-[4/5] w-full" />
             ))}
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         <div className="mb-12 max-w-xl">
           {tagline ? (
             <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
@@ -61,7 +62,7 @@ export function RecommendedProductsView({
               ))
             : items.map((p: any) => <ProductCard key={p.id} product={p} />)}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/search-products.tsx

@@ -8,6 +8,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetFooter } from '@/components/ui/sheet';
+import { Container } from '@/components/layout/Container';
 import { cn } from '@/lib/utils';
 
 type FilterOption = { label: string };
@@ -397,7 +398,7 @@ export function SearchProductsView(props: SearchProductsProps) {
 
   return (
     <section className="bg-background py-12 md:py-16">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
 
         {/* Page header */}
         <div className="mb-10">
@@ -523,7 +524,7 @@ export function SearchProductsView(props: SearchProductsProps) {
             </button>
           </div>
         )}
-      </div>
+      </Container>
     </section>
   );
 }

components/features/features.tsx

@@ -1,4 +1,5 @@
 import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
 
 export type FeaturesProps = {
   tagline: string;
@@ -17,7 +18,7 @@ const colClass: Record<FeaturesProps["columns"], string> = {
 export function Features({ tagline, heading, subheading, columns, items }: FeaturesProps) {
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         <div className="mx-auto mb-16 max-w-2xl text-center">
           {tagline ? (
             <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
@@ -45,7 +46,7 @@ export function Features({ tagline, heading, subheading, columns, items }: Featu
             </div>
           ))}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/footer/footer.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Link } from "react-router";
 import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
 
 export type FooterProps = {
   brand: string;
@@ -45,7 +46,7 @@ export function Footer({
 
   return (
     <footer className="border-t border-border bg-background">
-      <div className="container mx-auto max-w-7xl px-6 py-20 md:py-24">
+      <Container className="py-20 md:py-24">
         <div className="grid grid-cols-1 gap-12 md:grid-cols-12">
           <div className="md:col-span-4">
             <Typography variant="h5" as="p">
@@ -123,7 +124,7 @@ export function Footer({
             ))}
           </div>
         </div>
-      </div>
+      </Container>
     </footer>
   );
 }

components/landing/image-gallery.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils";
 import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
 
 export type ImageGalleryProps = {
   tagline: string;
@@ -12,7 +13,7 @@ export type ImageGalleryProps = {
 export function ImageGallery({ tagline, heading, subheading, layout, items }: ImageGalleryProps) {
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         {(tagline || heading || subheading) && (
           <div className="mx-auto mb-12 max-w-2xl text-center">
             {tagline ? (
@@ -86,7 +87,7 @@ export function ImageGallery({ tagline, heading, subheading, layout, items }: Im
             ))}
           </div>
         )}
-      </div>
+      </Container>
     </section>
   );
 }

components/landing/newsletter-cta.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { cn } from "@/lib/utils";
 import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
 
 export type EmailProvider = "none" | "mailchimp" | "klaviyo";
 
@@ -131,7 +132,7 @@ export function NewsletterCta({
   if (layout === "split") {
     return (
       <section className="bg-background">
-        <div className="container mx-auto max-w-7xl px-6 py-16 md:py-24">
+        <Container className="py-16 md:py-24">
           <div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2">
             <div>
               {imageUrl ? (
@@ -165,7 +166,7 @@ export function NewsletterCta({
               </div>
             </div>
           </div>
-        </div>
+        </Container>
       </section>
     );
   }

components/layout/Container.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type ContainerProps = React.HTMLAttributes<HTMLElement> & {
+  as?: React.ElementType;
+};
+
+export function Container({
+  as: Comp = "div",
+  className,
+  style,
+  ...props
+}: ContainerProps) {
+  return (
+    <Comp
+      className={cn("mx-auto w-full px-6", className)}
+      style={{ maxWidth: "var(--container-max-width, 80rem)", ...style }}
+      {...props}
+    />
+  );
+}

components/logos/logos.tsx

@@ -1,3 +1,5 @@
+import { Container } from "@/components/layout/Container";
+
 export type LogosProps = {
   tagline: string;
   items: Array<{ src: string; alt: string }>;
@@ -7,7 +9,7 @@ export type LogosProps = {
 export function Logos({ tagline, items, layout }: LogosProps) {
   return (
     <section className="border-y border-border bg-muted/40 py-12">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         {tagline ? (
           <p className="mb-8 text-center text-xs uppercase tracking-[0.2em] text-muted-foreground">
             {tagline}
@@ -38,7 +40,7 @@ export function Logos({ tagline, items, layout }: LogosProps) {
             ))}
           </div>
         )}
-      </div>
+      </Container>
     </section>
   );
 }

components/navigation/navigation.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { Link } from "react-router";
 import { useShopifyCart } from "@/hooks/use-shopify-cart";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Container } from "@/components/layout/Container";
 import { cn } from "@/lib/utils";
 
 export type NavigationProps = {
@@ -49,7 +50,7 @@ export function Navigation({
           toneClass[tone],
         )}
       >
-        <div className="container mx-auto flex h-16 max-w-7xl items-center justify-between px-6 md:h-20">
+        <Container className="flex h-16 items-center justify-between md:h-20">
           <Link
             to="/"
             className="inline-flex items-center font-semibold tracking-tight"
@@ -110,7 +111,7 @@ export function Navigation({
               <MenuIcon size={20} strokeWidth={1.5} />
             </button>
           </div>
-        </div>
+        </Container>
       </header>
       </div>
 

components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-button)] text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring",
   {
     variants: {
       variant: {

config/root.tsx

@@ -32,9 +32,8 @@ export const Root: RootConfig<{
     fgColor: "#0a0a0a",
     mutedColor: "#f5f5f5",
     radius: "md",
-    buttonRadius: "md",
     shadow: "sm",
-    maxWidth: "xl",
+    maxWidth: "lg",
   },
   fields: {
     title: { label: "Page title", type: "text" },
@@ -59,17 +58,6 @@ export const Root: RootConfig<{
         { label: "Extra large", value: "xl" },
       ],
     },
-    buttonRadius: {
-      label: "Button radius",
-      type: "select",
-      options: [
-        { label: "None (square)", value: "none" },
-        { label: "Small", value: "sm" },
-        { label: "Medium", value: "md" },
-        { label: "Large", value: "lg" },
-        { label: "Extra large", value: "xl" },
-      ],
-    },
     shadow: {
       label: "Shadow",
       type: "select",
@@ -89,7 +77,6 @@ export const Root: RootConfig<{
         { label: "Medium", value: "md" },
         { label: "Large", value: "lg" },
         { label: "Extra large", value: "xl" },
-        { label: "2X large", value: "2xl" },
         { label: "Full bleed", value: "full" },
       ],
     },
@@ -105,8 +92,8 @@ export const Root: RootConfig<{
     fgColor,
     mutedColor,
     radius,
-    buttonRadius,
     shadow,
+    maxWidth,
   }) => {
     return (
       <ThemeProvider
@@ -119,8 +106,8 @@ export const Root: RootConfig<{
         fgColor={fgColor}
         mutedColor={mutedColor}
         radius={radius}
-        buttonRadius={buttonRadius}
         shadow={shadow}
+        maxWidth={maxWidth}
       >
         {children}
       </ThemeProvider>

src/globals.css

@@ -32,7 +32,6 @@
   --radius-md: calc(var(--radius) * 0.75);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) * 1.5);
-  --radius-button: var(--button-radius, var(--radius));
 
   --animate-marquee: marquee var(--duration) infinite linear;
   --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;