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

Add media and AI plugins, refresh editor configs

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Rami Bitar
2026-05-04 22:36:42 -04:00
parent 865e16400c
commit 343a2aa3a7
14 changed files with 197 additions and 2024 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
editor/theme/ThemeProvider.tsx
View File

@@ -6,6 +6,7 @@ export type ThemeProps = {
bodyFont?: string;
primaryColor?: string;
primaryForegroundColor?: string;
secondaryColor?: string;
accentColor?: string;
bgColor?: string;
fgColor?: string;
@@ -13,7 +14,9 @@ export type ThemeProps = {
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";
maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
};
@@ -26,6 +29,14 @@ 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> = {
none: "0 0 #0000",
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -34,6 +45,13 @@ 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"
@@ -50,6 +68,7 @@ export function ThemeProvider({
bodyFont,
primaryColor,
primaryForegroundColor,
secondaryColor,
accentColor,
bgColor,
fgColor,
@@ -57,7 +76,9 @@ export function ThemeProvider({
mutedForegroundColor,
borderColor,
roundedness,
radius,
shadowLevel,
shadow,
children,
}: ThemeProps & { children?: React.ReactNode }) {
// Recompute CSS-variable map only when a relevant prop changes.
@@ -65,14 +86,17 @@ export function ThemeProvider({
const vars: Record<string, string> = {};
if (primaryColor) vars["--primary"] = primaryColor;
if (primaryForegroundColor) vars["--primary-foreground"] = primaryForegroundColor;
if (secondaryColor) vars["--secondary"] = secondaryColor;
if (accentColor) vars["--accent"] = accentColor;
if (bgColor) vars["--background"] = bgColor;
if (fgColor) vars["--foreground"] = fgColor;
if (mutedColor) vars["--muted"] = mutedColor;
if (mutedForegroundColor) vars["--muted-foreground"] = mutedForegroundColor;
if (borderColor) vars["--border"] = borderColor;
if (roundedness) vars["--radius"] = radiusMap[roundedness];
if (shadowLevel) vars["--shadow"] = shadowMap[shadowLevel];
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 (headerFont) vars["--font-header"] = `"${headerFont}", system-ui, sans-serif`;
if (bodyFont) vars["--font-body"] = `"${bodyFont}", system-ui, sans-serif`;
return vars;
@@ -81,6 +105,7 @@ export function ThemeProvider({
bodyFont,
primaryColor,
primaryForegroundColor,
secondaryColor,
accentColor,
bgColor,
fgColor,
@@ -88,7 +113,9 @@ export function ThemeProvider({
mutedForegroundColor,
borderColor,
roundedness,
radius,
shadowLevel,
shadow,
]);
// Imperatively push every CSS var onto :root inside the host document