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

Consolidate theme radius/shadow props and make rounded utilities responsive

Browse Source 
- Remove duplicate roundedness/shadowLevel props (keep radius/shadow)
- Switch globals.css radius scale to proportional (square→pill works)
- Replace rounded-full with rounded-md on theme-driven elements
- Remove banner props from Navigation, drop publishing overlay

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Rami Bitar
2026-05-08 10:01:55 -04:00
parent f0323c2c57
commit 564c98c805
11 changed files with 34 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/ThemeProvider.tsx
View File

@@ -13,14 +13,12 @@ export type ThemeProps = {
mutedColor?: string;
mutedForegroundColor?: string;
borderColor?: string;
roundedness?: "none" | "sm" | "md" | "lg" | "xl" | "full";
radius?: "none" | "xs" | "sm" | "md" | "lg";
shadowLevel?: "none" | "sm" | "md" | "lg" | "xl";
shadow?: "none" | "sm" | "md" | "lg";
radius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
shadow?: "none" | "sm" | "md" | "lg" | "xl";
maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
};
const radiusMap: Record<NonNullable<ThemeProps["roundedness"]>, string> = {
const radiusMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
none: "0px",
sm: "0.25rem",
md: "0.5rem",
@@ -29,15 +27,7 @@ const radiusMap: Record<NonNullable<ThemeProps["roundedness"]>, string> = {
full: "9999px",
};
const radiusEnumMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
none: "0px",
xs: "0.125rem",
sm: "0.25rem",
md: "0.5rem",
lg: "0.75rem",
};
const shadowMap: Record<NonNullable<ThemeProps["shadowLevel"]>, string> = {
const shadowMap: Record<NonNullable<ThemeProps["shadow"]>, string> = {
none: "0 0 #0000",
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
md: "0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)",
@@ -45,13 +35,6 @@ const shadowMap: Record<NonNullable<ThemeProps["shadowLevel"]>, string> = {
xl: "0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10)",
};
const shadowEnumMap: Record<NonNullable<ThemeProps["shadow"]>, string> = {
none: "0 0 #0000",
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
md: "0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)",
lg: "0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10)",
};
function googleFontsHref(headerFont?: string, bodyFont?: string): string | null {
const fonts = [headerFont, bodyFont].filter(
(f): f is string => !!f && f !== "system-ui"
@@ -75,9 +58,7 @@ export function ThemeProvider({
mutedColor,
mutedForegroundColor,
borderColor,
roundedness,
radius,
shadowLevel,
shadow,
children,
}: ThemeProps & { children?: React.ReactNode }) {
@@ -93,10 +74,8 @@ export function ThemeProvider({
if (mutedColor) vars["--muted"] = mutedColor;
if (mutedForegroundColor) vars["--muted-foreground"] = mutedForegroundColor;
if (borderColor) vars["--border"] = borderColor;
if (radius) vars["--radius"] = radiusEnumMap[radius];
else if (roundedness) vars["--radius"] = radiusMap[roundedness];
if (shadow) vars["--shadow"] = shadowEnumMap[shadow];
else if (shadowLevel) vars["--shadow"] = shadowMap[shadowLevel];
if (radius) vars["--radius"] = radiusMap[radius];
if (shadow) vars["--shadow"] = shadowMap[shadow];
if (headerFont) vars["--font-header"] = `"${headerFont}", system-ui, sans-serif`;
if (bodyFont) vars["--font-body"] = `"${bodyFont}", system-ui, sans-serif`;
return vars;
@@ -112,9 +91,7 @@ export function ThemeProvider({
mutedColor,
mutedForegroundColor,
borderColor,
roundedness,
radius,
shadowLevel,
shadow,
]);