feat(branding): beginner-friendly custom CSS (live preview + starter snippets)#179
Merged
Merged
Conversation
…snippets) Custom CSS was a bare textarea with no feedback. Make it approachable: - Live preview: a sample public form rendered in a sandboxed iframe with the guild's accent color and custom CSS applied instantly (no save needed). The iframe is fully isolated (sandbox="", CSS sanitized the same way as on save), so rules can't leak into the dashboard or run scripts, and it mirrors the live page's token system (.msk-form + CSS variables, light/dark aware). - Quick styles: one-click starter snippets (rounded corners, accent background, larger text, colored heading) inserted into the editor. Each targets .msk-form or a CSS variable, so it works identically in preview and live. i18n for the new labels, snippet names and sample content in all 7 locales. No schema/env change.
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
1 participant
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.
Customer suggestion: a more beginner-friendly approach to custom CSS, e.g. a preview option or recommended things to change.
Custom CSS was a bare textarea with no feedback. This makes it approachable in two ways.
Live preview
A sample of the guild's public form, rendered in a sandboxed iframe with the current accent color and custom CSS applied instantly, without saving. As the manager edits the CSS (or picks snippets), the preview updates live.
sandbox=""(no scripts, no dashboard leakage), CSS sanitized the same way as on save/render..msk-formwrapper and CSS-variable names/values fromglobals.css, light/dark aware (follows the dashboard theme).Quick styles (recommended things to change)
One-click starter snippets inserted into the editor: Rounded corners, Accent background, Larger text, Colored heading. Each targets
.msk-formor a CSS variable, i.e. the two documented, stable hooks, so a snippet behaves identically in the preview and on the live page. The manager can then tweak the values.Details
components/branding/css-preview.tsx.branding-form.tsxgains the snippet row and the preview (Pro-gated, same as the CSS field).Checks
Typecheck, lint, test (shared 83 / web 40 / bot 4), build all green.