feat(editor): add Barebone, Matte, Protocol, Arcane, Studio themes#3417
Draft
feat(editor): add Barebone, Matte, Protocol, Arcane, Studio themes#3417
Conversation
Extracts the visual languages used by the demo email folders
(apps/demo/emails/0{1..5}-*) into first-class editor themes, so the
email-theming plugin can expose them alongside Basic and Minimal.
- ThemeDef + buildThemePanels/buildThemeReset factory keeps each theme
declarative (one config object → panel groups + reset styles).
- Each theme captures body background, container padding/radius/border,
heading scale (h1–h3) with letter-spacing and weight, paragraph,
link decoration, image radius, button surface/padding/border, and
code-block/inline-code tokens mirroring the Tailwind themes.
- EDITOR_THEMES and RESET_THEMES maps now satisfy the broader EditorTheme
union; theme resolution in extension.tsx uses a shared
isKnownEditorTheme guard instead of hardcoded 'basic'|'minimal' checks.
- applyStyleChange in the inspector document accepts any EditorTheme so
user-picked themes flow through the override path.
- Adds theme-config tests that assert every new theme registers all
required panels and reset tokens.
|
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
commit: |
Extends the existing /editor/email-theming example so reviewers can switch between Basic, Minimal, the five new themes (Barebone, Matte, Protocol, Arcane, Studio), and a Custom example side-by-side, using the same editable content for each. Updates the sample document to include a button (to exercise button theming) and broader heading coverage. Also refreshes the index description and page metadata to list all available themes.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
2 issues found across 5 files
Confidence score: 3/5
- There is moderate regression risk: in
packages/editor/src/plugins/email-theming/extension.tsx, theme validation usesin, which can match inherited keys and may allow invalid non-theme strings through validation. packages/editor/src/plugins/email-theming/themes.tsintroducescontainer.borderWidthvalues that are not wired into panel input generation or style reset logic, so some theme settings (like matte/studio borders) won’t actually apply for users.- Given one medium-severity validation flaw and one concrete behavior gap, this looks mergeable with caution but not fully low-risk until these are addressed.
- Pay close attention to
packages/editor/src/plugins/email-theming/extension.tsxandpackages/editor/src/plugins/email-theming/themes.ts- validation strictness and missingcontainer.borderWidthplumbing are the main user-visible risks.
Shadow auto-approve: would not auto-approve because issues were found.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="packages/editor/src/plugins/email-theming/extension.tsx">
<violation number="1" location="packages/editor/src/plugins/email-theming/extension.tsx:231">
P2: Theme validation is too permissive because `in` accepts inherited object keys; use an own-key check to avoid accepting non-theme strings.</violation>
</file>
<file name="packages/editor/src/plugins/email-theming/themes.ts">
<violation number="1" location="packages/editor/src/plugins/email-theming/themes.ts:646">
P2: `container.borderWidth` is currently dead config: it is declared and set in new theme defs, but never used to generate panel inputs or reset styles, so themes that specify container borders (e.g. matte/studio) won’t actually render that border width.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| } | ||
|
|
||
| function isKnownEditorTheme(value: unknown): value is EditorTheme { | ||
| return typeof value === 'string' && value in EDITOR_THEMES; |
Contributor
There was a problem hiding this comment.
P2: Theme validation is too permissive because in accepts inherited object keys; use an own-key check to avoid accepting non-theme strings.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/editor/src/plugins/email-theming/extension.tsx, line 231:
<comment>Theme validation is too permissive because `in` accepts inherited object keys; use an own-key check to avoid accepting non-theme strings.</comment>
<file context>
@@ -227,6 +227,10 @@ export function setGlobalCssInjected(editor: Editor, css: string): boolean {
}
+function isKnownEditorTheme(value: unknown): value is EditorTheme {
+ return typeof value === 'string' && value in EDITOR_THEMES;
+}
+
</file context>
Suggested change
| return typeof value === 'string' && value in EDITOR_THEMES; | |
| return typeof value === 'string' && Object.hasOwn(EDITOR_THEMES, value); |
| padding: [number, number, number, number]; | ||
| borderRadius: number; | ||
| borderColor: string; | ||
| borderWidth: number; |
Contributor
There was a problem hiding this comment.
P2: container.borderWidth is currently dead config: it is declared and set in new theme defs, but never used to generate panel inputs or reset styles, so themes that specify container borders (e.g. matte/studio) won’t actually render that border width.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/editor/src/plugins/email-theming/themes.ts, line 646:
<comment>`container.borderWidth` is currently dead config: it is declared and set in new theme defs, but never used to generate panel inputs or reset styles, so themes that specify container borders (e.g. matte/studio) won’t actually render that border width.</comment>
<file context>
@@ -618,6 +619,859 @@ const THEME_MINIMAL: PanelGroup[] = [
+ padding: [number, number, number, number];
+ borderRadius: number;
+ borderColor: string;
+ borderWidth: number;
+ };
+ h1: HeadingDef;
</file context>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Extracts the visual languages used by the demo email folders (apps/demo/emails/0{1..5}-*) into first-class editor themes, so the email-theming plugin can expose them alongside Basic and Minimal.
Summary by cubic
Adds five new editor themes—Barebone, Matte, Protocol, Arcane, Studio—and exposes them alongside Basic and Minimal. The example page now lets you switch between all built-in themes with broader sample content and updated copy.
New Features
ThemeDef,buildThemePanels, andbuildThemeReset.Refactors
EditorThemeand updatedEDITOR_THEMES/RESET_THEMES.isKnownEditorThemeinextension.tsx.applyStyleChangeaccepts anyEditorTheme.Written for commit aef43e3. Summary will update on new commits.