feat(editor): add Barebone, Matte, Protocol, Arcane, Studio themes

apps/web/src/app/editor/email-theming/example.tsx

@@ -17,15 +17,20 @@ const initialContent = {
   content: [
     {
       type: 'heading',
-      attrs: { level: 2 },
+      attrs: { level: 1 },
       content: [{ type: 'text', text: 'Welcome to our newsletter' }],
     },
+    {
+      type: 'heading',
+      attrs: { level: 2 },
+      content: [{ type: 'text', text: 'The new release is live' }],
+    },
     {
       type: 'paragraph',
       content: [
         {
           type: 'text',
-          text: 'This is a themed email editor. Toggle between Basic, Minimal, and Custom themes to see how styles change.',
+          text: 'This editor showcases the built-in themes abstracted from the react-email demo templates (Barebone, Matte, Protocol, Arcane, Studio) alongside the original Basic, Minimal, and a Custom example.',
         },
       ],
     },
@@ -34,10 +39,15 @@ const initialContent = {
       content: [
         {
           type: 'text',
-          text: 'Try editing this content and switching themes to see the difference.',
+          text: 'Switch between themes to see how the container, typography, links, and buttons change.',
         },
       ],
     },
+    {
+      type: 'button',
+      attrs: { url: 'https://react.email' },
+      content: [{ type: 'text', text: 'Read the docs' }],
+    },
   ],
 };
 
@@ -55,16 +65,40 @@ const customTheme = extendTheme('basic', {
   },
 });
 
-type ThemeOption = 'basic' | 'minimal' | 'custom';
+type ThemeOption =
+  | 'basic'
+  | 'minimal'
+  | 'barebone'
+  | 'matte'
+  | 'protocol'
+  | 'arcane'
+  | 'studio'
+  | 'custom';
 
 const themeMap: Record<ThemeOption, EditorThemeInput> = {
   basic: 'basic',
   minimal: 'minimal',
+  barebone: 'barebone',
+  matte: 'matte',
+  protocol: 'protocol',
+  arcane: 'arcane',
+  studio: 'studio',
   custom: customTheme,
 };
 
+const themeOrder: ThemeOption[] = [
+  'basic',
+  'minimal',
+  'barebone',
+  'matte',
+  'protocol',
+  'arcane',
+  'studio',
+  'custom',
+];
+
 export function EmailThemingExample() {
-  const [selected, setSelected] = useState<ThemeOption>('basic');
+  const [selected, setSelected] = useState<ThemeOption>('barebone');
   const contentRef = useRef<JSONContent>(initialContent);
   const theme = themeMap[selected];
 
@@ -83,10 +117,10 @@ export function EmailThemingExample() {
   return (
     <ExampleShell
       title="Email theming"
-      description="Switch between Basic, Minimal, and Custom themes to see how email styles change."
+      description="Switch between the built-in themes (including the five abstracted from the demo email templates) to see how email styles change."
     >
-      <div className="flex gap-2 mb-4">
-        {(['basic', 'minimal', 'custom'] as const).map((option) => (
+      <div className="flex flex-wrap gap-2 mb-4">
+        {themeOrder.map((option) => (
           <button
             key={option}
             type="button"

apps/web/src/app/editor/email-theming/page.tsx

@@ -6,7 +6,7 @@ import { EmailThemingExample as Example } from './example';
 export const metadata: Metadata = {
   title: 'Email theming — Editor examples',
   description:
-    'Switch between Basic and Minimal themes to see how email styles change.',
+    'Switch between the built-in editor themes — Basic, Minimal, Barebone, Matte, Protocol, Arcane, Studio, and a Custom example — to see how email styles change.',
   alternates: { canonical: '/editor/email-theming' },
 };
 

apps/web/src/app/editor/page.tsx

@@ -122,7 +122,7 @@ const sections: Section[] = [
         slug: 'email-theming',
         title: 'Email theming',
         description:
-          'Switch between Basic, Minimal, and Custom themes to see how email styles change.',
+          'Switch between the built-in themes — Basic, Minimal, Barebone, Matte, Protocol, Arcane, Studio, and Custom — to see how email styles change.',
         docsUrl: 'https://react.email/docs/editor/features/theming',
       },
       {

packages/editor/src/plugins/email-theming/extension.tsx

@@ -227,6 +227,10 @@ export function setGlobalCssInjected(editor: Editor, css: string): boolean {
   return editor.commands.setGlobalContent('css', css);
 }
 
+function isKnownEditorTheme(value: unknown): value is EditorTheme {
+  return typeof value === 'string' && value in EDITOR_THEMES;
+}
+
 function getEmailTheme(editor: Editor): EditorTheme {
   const extensionOptions = (
     editor.extensionManager.extensions.find(
@@ -238,12 +242,12 @@ function getEmailTheme(editor: Editor): EditorTheme {
     return extensionOptions.extends ?? 'minimal';
   }
 
-  if (extensionOptions === 'basic' || extensionOptions === 'minimal') {
+  if (isKnownEditorTheme(extensionOptions)) {
     return extensionOptions;
   }
 
-  const globalTheme = getGlobalContent('theme', editor) as EditorTheme | null;
-  if (globalTheme === 'basic' || globalTheme === 'minimal') {
+  const globalTheme = getGlobalContent('theme', editor);
+  if (isKnownEditorTheme(globalTheme)) {
     return globalTheme;
   }
 

packages/editor/src/plugins/email-theming/theme-config.spec.ts

@@ -6,7 +6,8 @@ import {
   parseCssValue,
   themeStylesToPanelOverrides,
 } from './theme-config';
-import { EDITOR_THEMES } from './themes';
+import { EDITOR_THEMES, RESET_THEMES } from './themes';
+import type { EditorTheme } from './types';
 
 describe('parseCssValue', () => {
   it('parses pixel strings', () => {
@@ -210,3 +211,75 @@ describe('extendTheme', () => {
     expect(result.styles).toEqual({ link: { color: '#abc' } });
   });
 });
+
+describe('new design themes', () => {
+  const DESIGN_THEMES = [
+    'barebone',
+    'matte',
+    'protocol',
+    'arcane',
+    'studio',
+  ] as const satisfies readonly EditorTheme[];
+
+  const REQUIRED_PANEL_IDS = [
+    'body',
+    'container',
+    'typography',
+    'h1',
+    'h2',
+    'h3',
+    'paragraph',
+    'link',
+    'image',
+    'button',
+    'code-block',
+    'inline-code',
+  ];
+
+  for (const theme of DESIGN_THEMES) {
+    it(`${theme} is registered in EDITOR_THEMES with all required panels`, () => {
+      const panels = EDITOR_THEMES[theme];
+      expect(panels).toBeDefined();
+      const ids = panels.map((g) => g.id);
+      for (const id of REQUIRED_PANEL_IDS) {
+        expect(ids).toContain(id);
+      }
+    });
+
+    it(`${theme} is registered in RESET_THEMES with heading styles`, () => {
+      const reset = RESET_THEMES[theme];
+      expect(reset).toBeDefined();
+      expect(reset.h1.fontSize).toBeDefined();
+      expect(reset.h2.fontSize).toBeDefined();
+      expect(reset.h3.fontSize).toBeDefined();
+      expect(reset.button.backgroundColor).toBeDefined();
+      expect(reset.button.color).toBeDefined();
+    });
+
+    it(`${theme} can be used as extendTheme base`, () => {
+      const result = extendTheme(theme, { link: { color: '#abc' } });
+      expect(result.extends).toBe(theme);
+    });
+  }
+
+  it('barebone has a light body background', () => {
+    const bodyBg = EDITOR_THEMES.barebone
+      .find((g) => g.id === 'body')
+      ?.inputs.find((i) => i.prop === 'backgroundColor')?.value;
+    expect(bodyBg).toBe('#F3F4F6');
+  });
+
+  it('protocol is a dark theme', () => {
+    const containerBg = EDITOR_THEMES.protocol
+      .find((g) => g.id === 'container')
+      ?.inputs.find((i) => i.prop === 'backgroundColor')?.value;
+    expect(containerBg).toBe('#131313');
+  });
+
+  it('arcane has a dark maroon container', () => {
+    const containerBg = EDITOR_THEMES.arcane
+      .find((g) => g.id === 'container')
+      ?.inputs.find((i) => i.prop === 'backgroundColor')?.value;
+    expect(containerBg).toBe('#300610');
+  });
+});