frontend-shopify/react-editor-shopify
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Container component and fix radius/maxWidth theming

Browse Source 
- 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>
This commit is contained in:
Rami Bitar
2026-05-10 12:25:13 -04:00
parent 3a3d0a6ac8
commit 383a593c42
19 changed files with 92 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/ThemeProvider.tsx
View File

@@ -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> = {
none: "0px",
sm: "0.25rem",
md: "0.5rem",
lg: "0.75rem",
xl: "1rem",
const maxWidthMap: Record<NonNullable<ThemeProps["maxWidth"]>, string> = {
sm: "64rem",
md: "72rem",
lg: "80rem",
xl: "96rem",
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);
}
`;