feat(ui): add raw mode theme that strips decorative CSS#8039
Open
nikosdouvlis wants to merge 5 commits intonk/sandbox-preset-selectorfrom
Open
feat(ui): add raw mode theme that strips decorative CSS#8039nikosdouvlis wants to merge 5 commits intonk/sandbox-preset-selectorfrom
nikosdouvlis wants to merge 5 commits intonk/sandbox-preset-selectorfrom
Conversation
Add a "raw" theme that strips all decorative CSS (colors, shadows, borders, fonts, transitions) from component variants while keeping structural CSS (layout, flex, grid, position, sizing). This gives components a plain-HTML feel as a blank canvas for custom styling via the elements API. Key changes: - stripDecorativeStyles utility with structural property allowlist - rawMode flag propagated through appearance context and theme - createVariants strips variant output in raw mode - makeCustomizable strips defaultStyles and sx (preserving icon content) - Dev mode overlay hidden in raw mode - Sandbox: theme selector, Tailwind toggle, initial theme loading fix
Most variable values are irrelevant in raw mode because stripDecorativeStyles removes the CSS properties that consume them. Only colorForeground and colorPrimaryForeground matter because they feed CSS custom properties (--cl-icon-fill) that survive stripping for masked provider icons.
Remove 'grid' from structural prefixes so gridTemplateColumns and gridTemplateRows are stripped. This simplifies the OAuth button grid (5+4 columns -> single column stack) and other grid layouts into plain flowing content. Safe because Collapsible unmounts content directly when animations:false (which raw mode sets). LLMs can re-add grid templates via the elements API.
Replace broad prefix matching (background*, mask*) with an exact property set for content-rendering preservation. This prevents decorative properties like backgroundClip or backgroundOrigin from leaking through while still preserving backgroundImage, maskImage, and backgroundColor (needed for masked icon fills). Re-add colorBackground and colorInput as transparent to raw theme since backgroundColor survives stripping via the preserve set.
Why: Need demo presets to compare raw mode vs default theme styling side by side and document the friction points of each approach. What changed: - 5 presets: modernSaas (light, raw), darkPremium (dark, raw), darkPremiumDefault (dark, default), terminalRaw (CRT, raw), terminalDefault (CRT, default) - Wire presets into the sandbox preset selector - Inline friction log documenting element key discoverability, CSS bleed, and comparison metrics
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Summary
When LLMs or developers want to fully custom-style Clerk components to match a brand, the default theme's decorative CSS (shadows, transitions, gradients, border-radius) gets in the way. Every style needs an "UNDO" override before the desired style can be applied.
Raw mode strips all decorative CSS from component variants, defaultStyles, and sx props, leaving only structural layout properties (display, flex, grid, padding, margin, gap, position, etc). This gives a clean canvas where you only write what you WANT, not what you want + what you need to undo.
Key finding from the demo presets: raw mode is better for radical designs (terminal theme: ~160 lines, 0 UNDO overrides vs ~220 lines, ~30 UNDO overrides on default). Default theme is better for color-swap theming (10 variables + 3 element overrides vs ~40 element overrides on raw).
Depends on #8038.
Test plan