From 85cc77124291a70e4315fdeea9983034a0558b3f Mon Sep 17 00:00:00 2001
From: Nikos Douvlis <nikosdouvlis@gmail.com>
Date: Wed, 4 Mar 2026 15:44:01 +0200
Subject: [PATCH 1/5] feat(ui): add raw mode theme that strips decorative CSS

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
---
 packages/clerk-js/sandbox/app.ts              |   7 +-
 packages/clerk-js/sandbox/template.html       |   1 +
 .../ui/src/customizables/makeCustomizable.tsx |  24 ++++-
 .../ui/src/customizables/parseAppearance.ts   |   5 +-
 packages/ui/src/hooks/useDevMode.tsx          |   7 +-
 .../styledSystem/InternalThemeProvider.tsx    |   8 +-
 .../ui/src/styledSystem/createVariants.ts     |   4 +
 .../src/styledSystem/stripDecorativeStyles.ts | 100 ++++++++++++++++++
 packages/ui/src/themes/index.ts               |   1 +
 packages/ui/src/themes/raw.ts                 |  54 ++++++++++
 10 files changed, 199 insertions(+), 12 deletions(-)
 create mode 100644 packages/ui/src/styledSystem/stripDecorativeStyles.ts
 create mode 100644 packages/ui/src/themes/raw.ts

diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts
index 3be79d71860..bb6f9adf400 100644
--- a/packages/clerk-js/sandbox/app.ts
+++ b/packages/clerk-js/sandbox/app.ts
@@ -1,6 +1,6 @@
 import { PageMocking, type MockScenario } from '@clerk/msw';
 import * as l from '../../localizations';
-import { dark, neobrutalism, shadcn, shadesOfPurple } from '../../ui/src/themes';
+import { dark, neobrutalism, raw, shadcn, shadesOfPurple } from '../../ui/src/themes';
 import type { Clerk as ClerkType } from '../';
 import * as scenarios from './scenarios';
 
@@ -319,6 +319,7 @@ const themes: Record<string, unknown> = {
   shadesOfPurple,
   neobrutalism,
   shadcn,
+  raw,
 };
 
 function themeSelector() {
@@ -326,7 +327,7 @@ function themeSelector() {
 
   const themeSelect = document.getElementById('themeSelect') as HTMLSelectElement;
 
-  const savedTheme = sessionStorage.getItem('baseTheme') ?? '';
+  const savedTheme = sessionStorage.getItem('baseTheme') ?? 'raw';
   themeSelect.value = savedTheme;
 
   const updateTheme = () => {
@@ -533,7 +534,7 @@ void (async () => {
       await mocking.initialize(route, { scenario });
     }
 
-    const initialThemeName = sessionStorage.getItem('baseTheme') ?? '';
+    const initialThemeName = sessionStorage.getItem('baseTheme') ?? 'raw';
     const initialTheme = initialThemeName ? themes[initialThemeName] : undefined;
     const initialPresetName = sessionStorage.getItem('preset') ?? '';
     const initialPreset = initialPresetName ? presets[initialPresetName] : undefined;
diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
index eb7f557034e..ae342e59d72 100644
--- a/packages/clerk-js/sandbox/template.html
+++ b/packages/clerk-js/sandbox/template.html
@@ -375,6 +375,7 @@
             <option value="shadesOfPurple">shadesOfPurple</option>
             <option value="neobrutalism">neobrutalism</option>
             <option value="shadcn">shadcn</option>
+            <option value="raw">raw</option>
           </select>
         </label>
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
diff --git a/packages/ui/src/customizables/makeCustomizable.tsx b/packages/ui/src/customizables/makeCustomizable.tsx
index 3169dbe4d5f..ac495573c92 100644
--- a/packages/ui/src/customizables/makeCustomizable.tsx
+++ b/packages/ui/src/customizables/makeCustomizable.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import type { ThemableCssProp } from '../styledSystem';
+import type { InternalTheme, ThemableCssProp } from '../styledSystem';
+import { stripDecorativeStyles, type StripOptions } from '../styledSystem/stripDecorativeStyles';
 import { useAppearance } from './AppearanceContext';
 import { appendEmojiSeparator, generateClassName } from './classGeneration';
 import type { ElementDescriptor, ElementId } from './elementDescriptors';
@@ -44,6 +45,17 @@ type MakeCustomizableOptions = {
   defaultDescriptor?: ElementDescriptor;
 };
 
+function wrapWithStripper(style: ThemableCssProp | undefined, options?: StripOptions): ThemableCssProp | undefined {
+  if (!style) return style;
+  if (Array.isArray(style)) {
+    return style.map(s => wrapWithStripper(s as ThemableCssProp, options)) as ThemableCssProp;
+  }
+  if (typeof style === 'function') {
+    return (theme: InternalTheme) => stripDecorativeStyles(style(theme) as Record<string, any>, options);
+  }
+  return stripDecorativeStyles(style as Record<string, any>, options);
+}
+
 export const makeCustomizable = <P,>(
   Component: React.FunctionComponent<P>,
   options?: MakeCustomizableOptions,
@@ -52,7 +64,7 @@ export const makeCustomizable = <P,>(
 
   const customizableComponent = React.forwardRef((props: Customizable<any>, ref) => {
     const { elementDescriptor, elementId, sx, className, ...restProps } = props;
-    const { parsedElements } = useAppearance();
+    const { parsedElements, rawMode } = useAppearance();
     const descriptors = [
       defaultDescriptor,
       ...(Array.isArray(elementDescriptor) ? elementDescriptor : [elementDescriptor]),
@@ -71,7 +83,13 @@ export const makeCustomizable = <P,>(
 
     const generatedStyles = generateClassName(parsedElements, descriptors, elementId, props);
     const generatedClassname = appendEmojiSeparator(generatedStyles.className, className);
-    generatedStyles.css.unshift(defaultStyles, sx);
+    // In rawMode, strip decorative styles from both defaultStyles and sx.
+    // sx is filtered with preserveContentRendering so icon images
+    // (backgroundImage/maskImage) survive while borders/colors are removed.
+    generatedStyles.css.unshift(
+      rawMode ? wrapWithStripper(defaultStyles) : defaultStyles,
+      rawMode ? wrapWithStripper(sx, { preserveContentRendering: true }) : sx,
+    );
 
     return (
       <Component
diff --git a/packages/ui/src/customizables/parseAppearance.ts b/packages/ui/src/customizables/parseAppearance.ts
index a61b883191f..ee08a820459 100644
--- a/packages/ui/src/customizables/parseAppearance.ts
+++ b/packages/ui/src/customizables/parseAppearance.ts
@@ -36,6 +36,7 @@ export type ParsedAppearance = {
   parsedInternalTheme: ParsedInternalTheme;
   parsedOptions: ParsedOptions;
   parsedCaptcha: ParsedCaptcha;
+  rawMode: boolean;
 };
 
 const defaultOptions: ParsedOptions = {
@@ -78,6 +79,8 @@ export const parseAppearance = (cascade: AppearanceCascade): ParsedAppearance =>
   const parsedOptions = parseOptions(appearanceList);
   const parsedCaptcha = parseCaptcha(appearanceList);
 
+  const rawMode = appearanceList.some(a => !!(a as any).__internal_rawMode);
+
   if (
     !appearanceList.find(a => {
       //@ts-expect-error not public api
@@ -97,7 +100,7 @@ export const parseAppearance = (cascade: AppearanceCascade): ParsedAppearance =>
       return res;
     }),
   );
-  return { parsedElements, parsedInternalTheme, parsedOptions, parsedCaptcha };
+  return { parsedElements, parsedInternalTheme, parsedOptions, parsedCaptcha, rawMode };
 };
 
 const expand = (theme: Theme | undefined, cascade: any[]) => {
diff --git a/packages/ui/src/hooks/useDevMode.tsx b/packages/ui/src/hooks/useDevMode.tsx
index 08550d633ef..b8c97a77a44 100644
--- a/packages/ui/src/hooks/useDevMode.tsx
+++ b/packages/ui/src/hooks/useDevMode.tsx
@@ -6,11 +6,12 @@ import { useAppearance } from '../customizables';
 export function useDevMode() {
   const { displayConfig, isDevelopmentOrStaging } = useEnvironment();
   const isDevelopment = isDevelopmentOrStaging();
-  const { unsafe_disableDevelopmentModeWarnings = false } = useAppearance().parsedOptions;
+  const { parsedOptions, rawMode } = useAppearance();
+  const { unsafe_disableDevelopmentModeWarnings = false } = parsedOptions;
   const developmentUiDisabled = isDevelopment && unsafe_disableDevelopmentModeWarnings;
   const showDevModeNotice = useMemo(
-    () => !developmentUiDisabled && displayConfig.showDevModeWarning,
-    [developmentUiDisabled, displayConfig],
+    () => !developmentUiDisabled && !rawMode && displayConfig.showDevModeWarning,
+    [developmentUiDisabled, rawMode, displayConfig],
   );
 
   return {
diff --git a/packages/ui/src/styledSystem/InternalThemeProvider.tsx b/packages/ui/src/styledSystem/InternalThemeProvider.tsx
index 09677ad733d..ab4ed0990e3 100644
--- a/packages/ui/src/styledSystem/InternalThemeProvider.tsx
+++ b/packages/ui/src/styledSystem/InternalThemeProvider.tsx
@@ -10,7 +10,11 @@ type InternalThemeProviderProps = React.PropsWithChildren<{
 }>;
 
 export const InternalThemeProvider = (props: InternalThemeProviderProps) => {
-  const { parsedInternalTheme } = useAppearance();
+  const { parsedInternalTheme, rawMode } = useAppearance();
+  const theme = React.useMemo(
+    () => (rawMode ? { ...parsedInternalTheme, __rawMode: true } : parsedInternalTheme),
+    [parsedInternalTheme, rawMode],
+  );
 
-  return <ThemeProvider theme={parsedInternalTheme}>{props.children}</ThemeProvider>;
+  return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
 };
diff --git a/packages/ui/src/styledSystem/createVariants.ts b/packages/ui/src/styledSystem/createVariants.ts
index 11ce1dd898f..1d4954f172b 100644
--- a/packages/ui/src/styledSystem/createVariants.ts
+++ b/packages/ui/src/styledSystem/createVariants.ts
@@ -1,6 +1,7 @@
 import { fastDeepMergeAndReplace } from '@clerk/shared/utils';
 
 import { createInfiniteAccessProxy } from '../utils/createInfiniteAccessProxy';
+import { stripDecorativeStyles } from './stripDecorativeStyles';
 import type { InternalTheme, StyleRule } from './types';
 
 type UnwrapBooleanVariant<T> = T extends 'true' | 'false' ? boolean : T;
@@ -57,6 +58,9 @@ export const createVariants: CreateVariants = configFn => {
       applyVariantRules(computedStyles, variantsToApply, variants);
       applyCompoundVariantRules(computedStyles, variantsToApply, compoundVariants);
       sanitizeCssVariables(computedStyles);
+      if (theme.__rawMode) {
+        return stripDecorativeStyles(computedStyles);
+      }
       return computedStyles;
     };
 
diff --git a/packages/ui/src/styledSystem/stripDecorativeStyles.ts b/packages/ui/src/styledSystem/stripDecorativeStyles.ts
new file mode 100644
index 00000000000..2b43bc27816
--- /dev/null
+++ b/packages/ui/src/styledSystem/stripDecorativeStyles.ts
@@ -0,0 +1,100 @@
+// Pure layout properties only. Everything else reverts to browser defaults.
+// This gives raw mode a "plain HTML" feel where buttons look like <button>,
+// inputs look like <input>, etc.
+const STRUCTURAL_PROPERTIES = new Set([
+  'display',
+  'position',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'width',
+  'height',
+  'gap',
+  'rowGap',
+  'columnGap',
+  'zIndex',
+  'boxSizing',
+  'pointerEvents',
+  'verticalAlign',
+  'aspectRatio',
+  'objectFit',
+  'objectPosition',
+  'float',
+  'clear',
+  'order',
+  'alignSelf',
+  'alignItems',
+  'alignContent',
+  'justifySelf',
+  'justifyItems',
+  'justifyContent',
+  'placeSelf',
+  'placeItems',
+  'placeContent',
+  'opacity',
+  'visibility',
+  'tableLayout',
+  'borderCollapse',
+  'borderSpacing',
+]);
+
+// Content-rendering properties that produce visible icon/image content.
+// These must survive stripping so icons remain visible in raw mode.
+const CONTENT_RENDERING_PREFIXES = ['background', 'mask', 'WebkitMask'];
+
+const STRUCTURAL_PREFIXES = ['flex', 'grid', 'inset', 'margin', 'padding', 'overflow', 'min', 'max', 'clip'];
+
+function isPlainObject(value: unknown): value is Record<string, any> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function isStructuralProperty(key: string): boolean {
+  if (STRUCTURAL_PROPERTIES.has(key)) return true;
+  return STRUCTURAL_PREFIXES.some(prefix => key.startsWith(prefix));
+}
+
+function isContentRenderingProperty(key: string): boolean {
+  return CONTENT_RENDERING_PREFIXES.some(prefix => key.startsWith(prefix));
+}
+
+export type StripOptions = {
+  // When true, preserve backgroundImage/maskImage and related properties
+  // so icon content remains visible. Used for sx props but NOT for variant
+  // base styles where these properties are purely decorative.
+  preserveContentRendering?: boolean;
+};
+
+export function stripDecorativeStyles(styles: Record<string, any>, options?: StripOptions): Record<string, any> {
+  const preserveContent = options?.preserveContentRendering ?? false;
+
+  // Emotion supports style arrays - recurse into each item
+  if (Array.isArray(styles)) {
+    return styles.map(s => {
+      if (!s) return s;
+      if (typeof s === 'object') return stripDecorativeStyles(s, options);
+      return s;
+    }) as any;
+  }
+
+  const result: Record<string, any> = {};
+  for (const key in styles) {
+    const value = styles[key];
+    if (key.startsWith('--')) {
+      // Keep CSS custom properties - structural properties may reference them
+      // (e.g. grid math, spinner sizing). Decorative properties that consume
+      // these vars are already stripped, so unused vars are harmless.
+      result[key] = value;
+      continue;
+    }
+    if (isPlainObject(value)) {
+      const filtered = stripDecorativeStyles(value, options);
+      if (Object.keys(filtered).length > 0) {
+        result[key] = filtered;
+      }
+    } else if (isStructuralProperty(key) || (preserveContent && isContentRenderingProperty(key))) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
diff --git a/packages/ui/src/themes/index.ts b/packages/ui/src/themes/index.ts
index b98c9f9bde1..4b52c2b2ed8 100644
--- a/packages/ui/src/themes/index.ts
+++ b/packages/ui/src/themes/index.ts
@@ -2,3 +2,4 @@ export * from './dark';
 export * from './shadesOfPurple';
 export * from './neobrutalism';
 export * from './shadcn';
+export * from './raw';
diff --git a/packages/ui/src/themes/raw.ts b/packages/ui/src/themes/raw.ts
new file mode 100644
index 00000000000..928ff4f6789
--- /dev/null
+++ b/packages/ui/src/themes/raw.ts
@@ -0,0 +1,54 @@
+import { createTheme } from './createTheme';
+
+/**
+ * A theme that strips all Clerk visual styling down to bare structural layout.
+ * Designed as a blank canvas for LLMs and AI-powered coding tools that generate
+ * complete custom styles via the `elements` API.
+ *
+ * What it removes: colors, shadows, border-radius, shimmer, animations, decorative borders
+ * What it keeps: flexbox/grid layout, positioning, spacing, visibility, state mechanics
+ */
+export const raw = createTheme({
+  name: 'raw',
+  // @ts-expect-error Internal API - skip the default clerkTheme decorative layer and enable raw mode
+  simpleStyles: true,
+  __internal_rawMode: true,
+  variables: {
+    // Backgrounds: transparent so the page shows through
+    colorBackground: 'transparent',
+    colorInput: 'transparent',
+    colorMuted: 'transparent',
+    colorShimmer: 'transparent',
+
+    // Text: black on transparent, plain and neutral
+    colorForeground: '#000000',
+    colorInputForeground: '#000000',
+    colorMutedForeground: '#000000',
+    colorPrimaryForeground: '#ffffff',
+
+    // All semantic colors flattened to black (no color opinions)
+    colorPrimary: '#000000',
+    colorDanger: '#000000',
+    colorSuccess: '#000000',
+    colorWarning: '#000000',
+    colorNeutral: '#000000',
+
+    // Borders and shadows: invisible
+    colorBorder: 'transparent',
+    colorShadow: 'transparent',
+    colorRing: 'transparent',
+    colorModalBackdrop: 'transparent',
+
+    // Typography: inherit from parent, browser-default size
+    fontFamily: 'inherit',
+    fontFamilyButtons: 'inherit',
+    fontSize: '1rem',
+
+    // Shape: no rounding
+    borderRadius: '0',
+  },
+  options: {
+    shimmer: false,
+    animations: false,
+  },
+});

From ffc4c40bf4671bd667fe6f778eabac76da68da3a Mon Sep 17 00:00:00 2001
From: Nikos Douvlis <nikosdouvlis@gmail.com>
Date: Wed, 4 Mar 2026 15:48:27 +0200
Subject: [PATCH 2/5] refactor(ui): simplify raw theme to only meaningful
 variables

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.
---
 packages/ui/src/themes/raw.ts | 35 +++++------------------------------
 1 file changed, 5 insertions(+), 30 deletions(-)

diff --git a/packages/ui/src/themes/raw.ts b/packages/ui/src/themes/raw.ts
index 928ff4f6789..aaebcfc08c2 100644
--- a/packages/ui/src/themes/raw.ts
+++ b/packages/ui/src/themes/raw.ts
@@ -7,6 +7,10 @@ import { createTheme } from './createTheme';
  *
  * What it removes: colors, shadows, border-radius, shimmer, animations, decorative borders
  * What it keeps: flexbox/grid layout, positioning, spacing, visibility, state mechanics
+ *
+ * Most variables are irrelevant here because `__internal_rawMode` strips the CSS
+ * properties that consume them. The exceptions are colors that feed CSS custom
+ * properties surviving the strip (icon fills, gauge strokes).
  */
 export const raw = createTheme({
   name: 'raw',
@@ -14,38 +18,9 @@ export const raw = createTheme({
   simpleStyles: true,
   __internal_rawMode: true,
   variables: {
-    // Backgrounds: transparent so the page shows through
-    colorBackground: 'transparent',
-    colorInput: 'transparent',
-    colorMuted: 'transparent',
-    colorShimmer: 'transparent',
-
-    // Text: black on transparent, plain and neutral
+    // Icon fill: masked provider icons use --cl-icon-fill which survives stripping
     colorForeground: '#000000',
-    colorInputForeground: '#000000',
-    colorMutedForeground: '#000000',
     colorPrimaryForeground: '#ffffff',
-
-    // All semantic colors flattened to black (no color opinions)
-    colorPrimary: '#000000',
-    colorDanger: '#000000',
-    colorSuccess: '#000000',
-    colorWarning: '#000000',
-    colorNeutral: '#000000',
-
-    // Borders and shadows: invisible
-    colorBorder: 'transparent',
-    colorShadow: 'transparent',
-    colorRing: 'transparent',
-    colorModalBackdrop: 'transparent',
-
-    // Typography: inherit from parent, browser-default size
-    fontFamily: 'inherit',
-    fontFamilyButtons: 'inherit',
-    fontSize: '1rem',
-
-    // Shape: no rounding
-    borderRadius: '0',
   },
   options: {
     shimmer: false,

From beedae60310894be0be63844de8f541484c35634 Mon Sep 17 00:00:00 2001
From: Nikos Douvlis <nikosdouvlis@gmail.com>
Date: Wed, 4 Mar 2026 15:53:37 +0200
Subject: [PATCH 3/5] refactor(ui): strip grid template properties in raw mode

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.
---
 packages/ui/src/styledSystem/stripDecorativeStyles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/styledSystem/stripDecorativeStyles.ts b/packages/ui/src/styledSystem/stripDecorativeStyles.ts
index 2b43bc27816..4f413a8b0b6 100644
--- a/packages/ui/src/styledSystem/stripDecorativeStyles.ts
+++ b/packages/ui/src/styledSystem/stripDecorativeStyles.ts
@@ -43,7 +43,7 @@ const STRUCTURAL_PROPERTIES = new Set([
 // These must survive stripping so icons remain visible in raw mode.
 const CONTENT_RENDERING_PREFIXES = ['background', 'mask', 'WebkitMask'];
 
-const STRUCTURAL_PREFIXES = ['flex', 'grid', 'inset', 'margin', 'padding', 'overflow', 'min', 'max', 'clip'];
+const STRUCTURAL_PREFIXES = ['flex', 'inset', 'margin', 'padding', 'overflow', 'min', 'max', 'clip'];
 
 function isPlainObject(value: unknown): value is Record<string, any> {
   return value !== null && typeof value === 'object' && !Array.isArray(value);

From 19bb1ce5f2caf3bfc9d63605a32cdc6f5499e41e Mon Sep 17 00:00:00 2001
From: Nikos Douvlis <nikosdouvlis@gmail.com>
Date: Wed, 4 Mar 2026 15:57:53 +0200
Subject: [PATCH 4/5] refactor(ui): use exact property set for content
 rendering preservation

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.
---
 .../src/styledSystem/stripDecorativeStyles.ts | 22 ++++++++++++++++---
 packages/ui/src/themes/raw.ts                 |  4 ++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/styledSystem/stripDecorativeStyles.ts b/packages/ui/src/styledSystem/stripDecorativeStyles.ts
index 4f413a8b0b6..c249c6da19c 100644
--- a/packages/ui/src/styledSystem/stripDecorativeStyles.ts
+++ b/packages/ui/src/styledSystem/stripDecorativeStyles.ts
@@ -39,9 +39,25 @@ const STRUCTURAL_PROPERTIES = new Set([
   'borderSpacing',
 ]);
 
-// Content-rendering properties that produce visible icon/image content.
+// Specific properties that produce visible icon/image content.
 // These must survive stripping so icons remain visible in raw mode.
-const CONTENT_RENDERING_PREFIXES = ['background', 'mask', 'WebkitMask'];
+// Uses exact properties instead of prefixes to avoid preserving
+// decorative properties like backgroundColor on non-icon elements.
+const CONTENT_RENDERING_PROPERTIES = new Set([
+  'backgroundColor',
+  'backgroundImage',
+  'backgroundSize',
+  'backgroundPosition',
+  'backgroundRepeat',
+  'maskImage',
+  'maskSize',
+  'maskPosition',
+  'maskRepeat',
+  'WebkitMaskImage',
+  'WebkitMaskSize',
+  'WebkitMaskPosition',
+  'WebkitMaskRepeat',
+]);
 
 const STRUCTURAL_PREFIXES = ['flex', 'inset', 'margin', 'padding', 'overflow', 'min', 'max', 'clip'];
 
@@ -55,7 +71,7 @@ function isStructuralProperty(key: string): boolean {
 }
 
 function isContentRenderingProperty(key: string): boolean {
-  return CONTENT_RENDERING_PREFIXES.some(prefix => key.startsWith(prefix));
+  return CONTENT_RENDERING_PROPERTIES.has(key);
 }
 
 export type StripOptions = {
diff --git a/packages/ui/src/themes/raw.ts b/packages/ui/src/themes/raw.ts
index aaebcfc08c2..0c522336a57 100644
--- a/packages/ui/src/themes/raw.ts
+++ b/packages/ui/src/themes/raw.ts
@@ -18,6 +18,10 @@ export const raw = createTheme({
   simpleStyles: true,
   __internal_rawMode: true,
   variables: {
+    // backgroundColor survives stripping (needed for icon mask fills), so
+    // background colors must be explicitly transparent to avoid leaking.
+    colorBackground: 'transparent',
+    colorInput: 'transparent',
     // Icon fill: masked provider icons use --cl-icon-fill which survives stripping
     colorForeground: '#000000',
     colorPrimaryForeground: '#ffffff',

From 654ed1541083045dc70391e210173a2fd074fd82 Mon Sep 17 00:00:00 2001
From: Nikos Douvlis <nikosdouvlis@gmail.com>
Date: Wed, 11 Mar 2026 14:02:32 +0200
Subject: [PATCH 5/5] feat(clerk-js): add raw mode demo presets to sandbox

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
---
 packages/clerk-js/sandbox/app.ts              |   9 +-
 .../clerk-js/sandbox/raw-demo-appearances.ts  | 928 ++++++++++++++++++
 2 files changed, 936 insertions(+), 1 deletion(-)
 create mode 100644 packages/clerk-js/sandbox/raw-demo-appearances.ts

diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts
index bb6f9adf400..437e220b25e 100644
--- a/packages/clerk-js/sandbox/app.ts
+++ b/packages/clerk-js/sandbox/app.ts
@@ -1,6 +1,7 @@
 import { PageMocking, type MockScenario } from '@clerk/msw';
 import * as l from '../../localizations';
 import { dark, neobrutalism, raw, shadcn, shadesOfPurple } from '../../ui/src/themes';
+import { darkPremium, darkPremiumDefault, modernSaas, terminalDefault, terminalRaw } from './raw-demo-appearances';
 import type { Clerk as ClerkType } from '../';
 import * as scenarios from './scenarios';
 
@@ -359,7 +360,13 @@ function presetToAppearance(preset: Preset | undefined) {
   };
 }
 
-const presets: Record<string, Preset> = {};
+const presets: Record<string, Preset> = {
+  modernSaas,
+  darkPremium,
+  darkPremiumDefault,
+  terminalRaw,
+  terminalDefault,
+};
 
 function presetSelector() {
   assertClerkIsLoaded(Clerk);
diff --git a/packages/clerk-js/sandbox/raw-demo-appearances.ts b/packages/clerk-js/sandbox/raw-demo-appearances.ts
new file mode 100644
index 00000000000..205edb7e288
--- /dev/null
+++ b/packages/clerk-js/sandbox/raw-demo-appearances.ts
@@ -0,0 +1,928 @@
+/**
+ * Demo appearance configs that style Clerk's SignIn on top of the raw theme.
+ * These simulate what an LLM would generate for a user who says
+ * "make my sign-in match my brand" with raw mode as the base.
+ *
+ * FRICTION LOG: See comments inline and summary at bottom.
+ */
+
+// Previous light theme (kept for comparison)
+export const modernSaas = {
+  elements: {
+    rootBox: {
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+    },
+    card: {
+      backgroundColor: '#ffffff',
+      border: '1px solid #e5e7eb',
+      borderRadius: '16px',
+      boxShadow: '0 4px 24px rgba(0, 0, 0, 0.06)',
+      padding: '40px 32px',
+    },
+    headerTitle: {
+      fontSize: '24px',
+      fontWeight: 700,
+      color: '#111827',
+      letterSpacing: '-0.025em',
+    },
+    headerSubtitle: {
+      fontSize: '14px',
+      color: '#6b7280',
+      lineHeight: 1.5,
+    },
+    socialButtonsIconButton: {
+      backgroundColor: '#ffffff',
+      border: '1px solid #d1d5db',
+      borderRadius: '10px',
+      transition: 'all 0.15s ease',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: '#f9fafb',
+        borderColor: '#9ca3af',
+      },
+    },
+    lastAuthenticationStrategyBadge: {
+      backgroundColor: '#eef2ff',
+      color: '#4f46e5',
+      fontSize: '11px',
+      fontWeight: 600,
+      borderRadius: '4px',
+    },
+    dividerLine: {
+      backgroundColor: '#e5e7eb',
+    },
+    dividerText: {
+      color: '#9ca3af',
+      fontSize: '13px',
+      fontWeight: 500,
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.05em',
+    },
+    formFieldLabel: {
+      fontSize: '14px',
+      fontWeight: 500,
+      color: '#374151',
+    },
+    formFieldInput: {
+      backgroundColor: '#ffffff',
+      border: '1px solid #d1d5db',
+      borderRadius: '10px',
+      fontSize: '14px',
+      color: '#111827',
+      transition: 'border-color 0.15s ease, box-shadow 0.15s ease',
+      '&:focus': {
+        borderColor: '#6366f1',
+        boxShadow: '0 0 0 3px rgba(99, 102, 241, 0.12)',
+        outline: 'none',
+      },
+      '&::placeholder': {
+        color: '#9ca3af',
+      },
+    },
+    formFieldAction: {
+      color: '#6366f1',
+      fontSize: '13px',
+      fontWeight: 500,
+      '&:hover': { color: '#4f46e5' },
+    },
+    formFieldErrorText: {
+      color: '#ef4444',
+      fontSize: '13px',
+    },
+    formButtonPrimary: {
+      backgroundColor: '#6366f1',
+      color: '#ffffff',
+      borderRadius: '10px',
+      fontSize: '14px',
+      fontWeight: 600,
+      border: 'none',
+      cursor: 'pointer',
+      transition: 'background-color 0.15s ease',
+      '&:hover': { backgroundColor: '#4f46e5' },
+      '&:active': { backgroundColor: '#4338ca' },
+    },
+    spinner: { color: '#ffffff' },
+    footerActionText: { color: '#6b7280', fontSize: '14px' },
+    footerActionLink: {
+      color: '#6366f1',
+      fontWeight: 500,
+      fontSize: '14px',
+      '&:hover': { color: '#4f46e5' },
+    },
+    alternativeMethodsBlockButton: {
+      color: '#6366f1',
+      fontSize: '14px',
+      fontWeight: 500,
+      cursor: 'pointer',
+      '&:hover': { color: '#4f46e5' },
+    },
+  },
+};
+
+// Dark premium theme - designed by Codex (GPT-5.2) + Claude coordination
+// Inspired by: dark SaaS sign-in with purple/violet accent
+export const darkPremium = {
+  options: {
+    socialButtonsVariant: 'blockButton' as const,
+  },
+  elements: {
+    rootBox: {
+      fontFamily: '"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
+      color: '#f8fafc',
+      backgroundColor: 'transparent',
+      lineHeight: 1.4,
+      WebkitFontSmoothing: 'antialiased',
+      MozOsxFontSmoothing: 'grayscale',
+    },
+    card: {
+      backgroundColor: '#1a1a2e',
+      borderRadius: '12px',
+      border: '1px solid #2a2a44',
+      boxShadow: '0 24px 60px rgba(0,0,0,0.45)',
+      padding: '32px',
+      color: '#f8fafc',
+    },
+    headerTitle: {
+      fontSize: '24px',
+      fontWeight: 700,
+      letterSpacing: '-0.01em',
+      color: '#f8fafc',
+    },
+    headerSubtitle: {
+      fontSize: '14px',
+      color: '#cbd5f5',
+    },
+
+    // Social buttons layout - re-add grid since raw mode strips grid-template
+    socialButtons: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      gap: '8px',
+    },
+
+    // Social buttons - style both icon and block variants
+    socialButtonsIconButton: {
+      backgroundColor: '#151528',
+      border: '1px solid #2a2a44',
+      color: '#e2e8f0',
+      borderRadius: '8px',
+      transition: 'background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: '#1b1b32',
+        borderColor: '#3a3a5c',
+        boxShadow: '0 6px 16px rgba(0,0,0,0.35)',
+      },
+      '&:active': {
+        transform: 'translateY(1px)',
+      },
+      '&:focus-visible': {
+        outline: 'none',
+        borderColor: '#8b5cf6',
+        boxShadow: '0 0 0 3px rgba(139, 92, 246, 0.35)',
+      },
+    },
+    socialButtonsBlockButton: {
+      backgroundColor: '#151528',
+      border: '1px solid #2a2a44',
+      color: '#e2e8f0',
+      borderRadius: '8px',
+      fontSize: '14px',
+      fontWeight: 600,
+      transition: 'background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: '#1b1b32',
+        borderColor: '#3a3a5c',
+        boxShadow: '0 6px 16px rgba(0,0,0,0.35)',
+      },
+      '&:active': {
+        transform: 'translateY(1px)',
+      },
+      '&:focus-visible': {
+        outline: 'none',
+        borderColor: '#8b5cf6',
+        boxShadow: '0 0 0 3px rgba(139, 92, 246, 0.35)',
+      },
+    },
+    socialButtonsProviderIcon: {
+      opacity: 0.95,
+      filter: 'brightness(1.05)',
+    },
+
+    // Divider
+    dividerLine: {
+      backgroundColor: '#2a2a44',
+    },
+    dividerText: {
+      fontSize: '12px',
+      color: '#94a3b8',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.08em',
+    },
+
+    // Form fields
+    formFieldLabel: {
+      color: '#e2e8f0',
+      fontSize: '12px',
+      fontWeight: 600,
+      letterSpacing: '0.02em',
+    },
+    formFieldInput: {
+      backgroundColor: '#202038',
+      border: '1px solid #2e2e4d',
+      borderRadius: '8px',
+      color: '#f8fafc',
+      fontSize: '14px',
+      outline: 'none',
+      transition: 'background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease',
+      caretColor: '#a78bfa',
+      '&::placeholder': {
+        color: '#94a3b8',
+      },
+      '&:hover': {
+        borderColor: '#3a3a5c',
+      },
+      '&:focus': {
+        borderColor: '#8b5cf6',
+        boxShadow: '0 0 0 3px rgba(139, 92, 246, 0.35)',
+      },
+      '&:-webkit-autofill': {
+        WebkitTextFillColor: '#f8fafc',
+        boxShadow: '0 0 0 1000px #202038 inset',
+        caretColor: '#a78bfa',
+      },
+    },
+    formFieldAction: {
+      color: '#8b5cf6',
+      fontSize: '12px',
+      fontWeight: 600,
+      transition: 'color 150ms ease',
+      cursor: 'pointer',
+      '&:hover': {
+        color: '#a78bfa',
+        textDecoration: 'underline',
+      },
+    },
+    formFieldErrorText: {
+      color: '#fca5a5',
+      fontSize: '12px',
+    },
+
+    // Primary button
+    formButtonPrimary: {
+      backgroundColor: '#7c3aed',
+      color: '#ffffff',
+      border: '1px solid #7c3aed',
+      borderRadius: '8px',
+      fontSize: '14px',
+      fontWeight: 700,
+      letterSpacing: '0.02em',
+      cursor: 'pointer',
+      boxShadow: '0 10px 20px rgba(124, 58, 237, 0.25)',
+      transition: 'background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease',
+      '&:hover': {
+        backgroundColor: '#8b5cf6',
+        borderColor: '#8b5cf6',
+        boxShadow: '0 12px 24px rgba(139, 92, 246, 0.35)',
+        transform: 'translateY(-1px)',
+      },
+      '&:active': {
+        transform: 'translateY(0)',
+      },
+      '&:focus-visible': {
+        outline: 'none',
+        boxShadow: '0 0 0 3px rgba(139, 92, 246, 0.45)',
+      },
+    },
+
+    // Footer
+    footerActionText: {
+      color: '#cbd5f5',
+      fontSize: '13px',
+    },
+    footerActionLink: {
+      color: '#8b5cf6',
+      fontWeight: 700,
+      transition: 'color 150ms ease',
+      '&:hover': {
+        color: '#a78bfa',
+        textDecoration: 'underline',
+      },
+    },
+
+    // Badge
+    lastAuthenticationStrategyBadge: {
+      backgroundColor: '#23233d',
+      color: '#c7d2fe',
+      border: '1px solid #2f2f52',
+      borderRadius: '999px',
+      fontSize: '11px',
+      fontWeight: 700,
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.06em',
+    },
+
+    // Identity preview (second step)
+    identityPreview: {
+      backgroundColor: '#202038',
+      border: '1px solid #2e2e4d',
+      borderRadius: '8px',
+    },
+    identityPreviewText: {
+      color: '#e2e8f0',
+      fontSize: '13px',
+      fontWeight: 600,
+    },
+    identityPreviewEditButton: {
+      color: '#8b5cf6',
+      cursor: 'pointer',
+      transition: 'color 150ms ease, background-color 150ms ease',
+      '&:hover': {
+        color: '#a78bfa',
+        backgroundColor: 'rgba(139, 92, 246, 0.12)',
+      },
+    },
+
+    // OTP code input
+    otpCodeFieldInput: {
+      backgroundColor: '#202038',
+      border: '1px solid #2e2e4d',
+      borderRadius: '8px',
+      color: '#f8fafc',
+      fontSize: '18px',
+      fontWeight: 700,
+      outline: 'none',
+      transition: 'border-color 150ms ease, box-shadow 150ms ease',
+      '&:focus': {
+        borderColor: '#8b5cf6',
+        boxShadow: '0 0 0 3px rgba(139, 92, 246, 0.35)',
+      },
+    },
+
+    // Alerts
+    alert: {
+      backgroundColor: '#1b1b32',
+      border: '1px solid #2a2a44',
+      borderRadius: '8px',
+    },
+    alertText: {
+      color: '#fecaca',
+      fontSize: '13px',
+    },
+
+    // Passkey / alternative methods
+    alternativeMethodsBlockButton: {
+      color: '#8b5cf6',
+      fontSize: '14px',
+      fontWeight: 600,
+      cursor: 'pointer',
+      transition: 'color 150ms ease',
+      '&:hover': {
+        color: '#a78bfa',
+      },
+    },
+
+    // Spinner (global)
+    spinner: {
+      color: '#8b5cf6',
+    },
+
+    // Back link
+    headerBackLink: {
+      color: '#8b5cf6',
+      fontSize: '14px',
+      '&:hover': { color: '#a78bfa' },
+    },
+
+    // Footer pages
+    footerPagesLink: {
+      color: '#94a3b8',
+      fontSize: '13px',
+      '&:hover': { color: '#cbd5e1' },
+    },
+  },
+};
+
+// Same dark premium look, but using the DEFAULT theme as base.
+// Variables cascade automatically - dramatically less code needed.
+export const darkPremiumDefault = {
+  variables: {
+    colorBackground: '#1a1a2e',
+    colorForeground: '#ffffff',
+    colorMutedForeground: '#b8b6d3',
+    colorPrimary: '#7c3aed',
+    colorPrimaryForeground: '#ffffff',
+    colorInput: '#141427',
+    colorInputForeground: '#ffffff',
+    colorNeutral: '#2d2d4a',
+    colorShimmer: '#22223b',
+    borderRadius: '0.75rem',
+  },
+  options: {
+    socialButtonsVariant: 'blockButton' as const,
+  },
+  elements: {
+    // Variables can't control layout - needed for 2-column social buttons grid
+    socialButtons: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+      gap: '0.75rem',
+    },
+    socialButtonsBlockButton: {
+      width: '100%',
+    },
+  },
+};
+
+// CRT Terminal theme - raw mode version
+// Green phosphor, monospace, scanlines, hard edges, no polish
+export const terminalRaw = {
+  options: {
+    socialButtonsVariant: 'blockButton' as const,
+  },
+  elements: {
+    rootBox: {
+      fontFamily: '"IBM Plex Mono", Menlo, Consolas, "Courier New", monospace',
+      backgroundColor: '#020b06',
+      color: '#19ff7d',
+      letterSpacing: '0.04em',
+      backgroundImage:
+        'repeating-linear-gradient(0deg, rgba(25,255,125,0.08) 0px, rgba(25,255,125,0.08) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px)',
+    },
+    card: {
+      backgroundColor: '#04150b',
+      border: '2px solid #19ff7d',
+      borderRadius: '0',
+      boxShadow: 'none',
+    },
+    headerTitle: {
+      fontSize: '18px',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.12em',
+      textShadow: '0 0 6px #19ff7d',
+      color: '#19ff7d',
+    },
+    headerSubtitle: {
+      fontSize: '12px',
+      color: '#9be7c1',
+    },
+    socialButtons: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      gap: '8px',
+    },
+    socialButtonsBlockButton: {
+      border: '2px solid #19ff7d',
+      borderRadius: '0',
+      backgroundColor: 'transparent',
+      color: '#19ff7d',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.08em',
+      transition: 'none',
+      '&:hover': {
+        backgroundColor: '#19ff7d',
+        color: '#021008',
+      },
+    },
+    socialButtonsBlockButtonText: {
+      fontSize: '12px',
+      letterSpacing: '0.08em',
+    },
+    socialButtonsIconButton: {
+      border: '2px solid #19ff7d',
+      borderRadius: '0',
+      backgroundColor: 'transparent',
+      transition: 'none',
+      '&:hover': {
+        backgroundColor: '#19ff7d',
+        color: '#021008',
+      },
+    },
+    socialButtonsProviderIcon: {
+      opacity: 0.9,
+      filter: 'grayscale(1) contrast(1.2)',
+    },
+    dividerLine: {
+      backgroundColor: '#19ff7d',
+      height: '1px',
+    },
+    dividerText: {
+      fontSize: '11px',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.12em',
+      color: '#9be7c1',
+    },
+    formFieldLabel: {
+      fontSize: '12px',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.1em',
+      color: '#9be7c1',
+    },
+    formFieldInput: {
+      backgroundColor: '#03160c',
+      border: '2px solid #19ff7d',
+      borderRadius: '0',
+      color: '#19ff7d',
+      fontFamily: '"IBM Plex Mono", Menlo, Consolas, "Courier New", monospace',
+      '&::placeholder': {
+        color: '#4ea87b',
+      },
+      '&:focus': {
+        outline: '2px dashed #19ff7d',
+        outlineOffset: '2px',
+      },
+    },
+    formFieldAction: {
+      fontSize: '11px',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.08em',
+      color: '#19ff7d',
+      textDecoration: 'underline',
+    },
+    formFieldErrorText: {
+      fontSize: '11px',
+      textTransform: 'uppercase' as const,
+      color: '#ff5c5c',
+    },
+    formButtonPrimary: {
+      backgroundColor: '#19ff7d',
+      color: '#021008',
+      border: '2px solid #19ff7d',
+      borderRadius: '0',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.12em',
+      fontWeight: 700,
+      transition: 'none',
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: '#8fffc0',
+        color: '#021008',
+      },
+    },
+    footerActionText: {
+      fontSize: '11px',
+      color: '#9be7c1',
+    },
+    footerActionLink: {
+      fontSize: '11px',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.08em',
+      color: '#19ff7d',
+      textDecoration: 'underline',
+    },
+    lastAuthenticationStrategyBadge: {
+      border: '1px solid #19ff7d',
+      borderRadius: '0',
+      backgroundColor: 'transparent',
+      color: '#19ff7d',
+      fontSize: '10px',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.08em',
+    },
+    alternativeMethodsBlockButton: {
+      color: '#19ff7d',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.08em',
+      textDecoration: 'underline',
+      transition: 'none',
+      '&:hover': {
+        color: '#8fffc0',
+      },
+    },
+    spinner: {
+      color: '#19ff7d',
+      filter: 'drop-shadow(0 0 6px #19ff7d)',
+    },
+    alert: {
+      backgroundColor: '#220808',
+      border: '2px solid #ff5c5c',
+      borderRadius: '0',
+    },
+    alertText: {
+      color: '#ffb3b3',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.06em',
+    },
+    otpCodeFieldInput: {
+      backgroundColor: '#03160c',
+      border: '2px solid #19ff7d',
+      borderRadius: '0',
+      color: '#19ff7d',
+      fontFamily: '"IBM Plex Mono", Menlo, Consolas, "Courier New", monospace',
+      fontWeight: 700,
+      '&:focus': {
+        outline: '2px dashed #19ff7d',
+        outlineOffset: '2px',
+      },
+    },
+    identityPreview: {
+      border: '1px dashed #19ff7d',
+      borderRadius: '0',
+      backgroundColor: '#03160c',
+    },
+    identityPreviewText: {
+      fontSize: '12px',
+      color: '#9be7c1',
+    },
+    identityPreviewEditButton: {
+      color: '#19ff7d',
+      textDecoration: 'underline',
+      '&:hover': {
+        color: '#8fffc0',
+      },
+    },
+    headerBackLink: {
+      color: '#19ff7d',
+      textDecoration: 'underline',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.08em',
+      fontSize: '11px',
+    },
+    footerPagesLink: {
+      color: '#9be7c1',
+      textDecoration: 'underline',
+      fontSize: '11px',
+    },
+  },
+};
+
+// CRT Terminal theme - default theme version (same look, more overrides needed)
+// Must UNDO shadows, transitions, border-radius, background-images
+export const terminalDefault = {
+  variables: {
+    colorPrimary: '#19ff7d',
+    colorPrimaryForeground: '#021008',
+    colorForeground: '#19ff7d',
+    colorMutedForeground: '#9be7c1',
+    colorBackground: '#04150b',
+    colorInput: '#03160c',
+    colorInputForeground: '#19ff7d',
+    colorNeutral: '#0a3b24',
+    colorDanger: '#ff5c5c',
+    colorShimmer: '#022b15',
+    borderRadius: '0px',
+  },
+  options: {
+    socialButtonsVariant: 'blockButton' as const,
+  },
+  elements: {
+    rootBox: {
+      fontFamily: '"IBM Plex Mono", Menlo, Consolas, "Courier New", monospace',
+      backgroundColor: '#020b06',
+      color: '#19ff7d',
+      letterSpacing: '0.04em',
+      backgroundImage:
+        'repeating-linear-gradient(0deg, rgba(25,255,125,0.08) 0px, rgba(25,255,125,0.08) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px)',
+    },
+    card: {
+      backgroundColor: '#04150b',
+      border: '2px solid #19ff7d',
+      boxShadow: 'none', // UNDO: default theme adds card shadow
+      backgroundImage: 'none', // UNDO: default theme adds gradient
+      transition: 'none', // UNDO: default theme adds transitions
+    },
+    headerTitle: {
+      fontSize: '18px',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.12em',
+      textShadow: '0 0 6px #19ff7d',
+    },
+    headerSubtitle: {
+      fontSize: '12px',
+      color: '#9be7c1',
+    },
+    socialButtons: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      gap: '8px',
+    },
+    socialButtonsBlockButton: {
+      border: '2px solid #19ff7d',
+      backgroundColor: 'transparent',
+      color: '#19ff7d',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.08em',
+      boxShadow: 'none', // UNDO
+      backgroundImage: 'none', // UNDO
+      transition: 'none', // UNDO
+      '&:hover': {
+        backgroundColor: '#19ff7d',
+        color: '#021008',
+        boxShadow: 'none', // UNDO: hover shadow
+        transform: 'none', // UNDO: hover transform
+      },
+    },
+    socialButtonsBlockButtonText: {
+      fontSize: '12px',
+      letterSpacing: '0.08em',
+    },
+    socialButtonsIconButton: {
+      border: '2px solid #19ff7d',
+      backgroundColor: 'transparent',
+      boxShadow: 'none', // UNDO
+      backgroundImage: 'none', // UNDO
+      transition: 'none', // UNDO
+      '&:hover': {
+        backgroundColor: '#19ff7d',
+        color: '#021008',
+        boxShadow: 'none', // UNDO
+        transform: 'none', // UNDO
+      },
+    },
+    socialButtonsProviderIcon: {
+      opacity: 0.9,
+      filter: 'grayscale(1) contrast(1.2)',
+    },
+    dividerLine: {
+      backgroundColor: '#19ff7d',
+      height: '1px',
+    },
+    dividerText: {
+      fontSize: '11px',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.12em',
+      color: '#9be7c1',
+    },
+    formFieldLabel: {
+      fontSize: '12px',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.1em',
+      color: '#9be7c1',
+    },
+    formFieldInput: {
+      backgroundColor: '#03160c',
+      border: '2px solid #19ff7d',
+      color: '#19ff7d',
+      fontFamily: '"IBM Plex Mono", Menlo, Consolas, "Courier New", monospace',
+      boxShadow: 'none', // UNDO
+      backgroundImage: 'none', // UNDO
+      transition: 'none', // UNDO
+      '&::placeholder': {
+        color: '#4ea87b',
+      },
+      '&:focus': {
+        outline: '2px dashed #19ff7d',
+        outlineOffset: '2px',
+        boxShadow: 'none', // UNDO: focus ring shadow
+      },
+    },
+    formFieldAction: {
+      fontSize: '11px',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.08em',
+      color: '#19ff7d',
+      textDecoration: 'underline',
+    },
+    formFieldErrorText: {
+      fontSize: '11px',
+      textTransform: 'uppercase' as const,
+      color: '#ff5c5c',
+    },
+    formButtonPrimary: {
+      backgroundColor: '#19ff7d',
+      color: '#021008',
+      border: '2px solid #19ff7d',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.12em',
+      fontWeight: 700,
+      boxShadow: 'none', // UNDO
+      backgroundImage: 'none', // UNDO
+      transition: 'none', // UNDO
+      '&:hover': {
+        backgroundColor: '#8fffc0',
+        color: '#021008',
+        boxShadow: 'none', // UNDO
+        transform: 'none', // UNDO
+      },
+    },
+    footerActionText: {
+      fontSize: '11px',
+      color: '#9be7c1',
+    },
+    footerActionLink: {
+      fontSize: '11px',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.08em',
+      color: '#19ff7d',
+      textDecoration: 'underline',
+    },
+    lastAuthenticationStrategyBadge: {
+      border: '1px solid #19ff7d',
+      backgroundColor: 'transparent',
+      color: '#19ff7d',
+      fontSize: '10px',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.08em',
+      boxShadow: 'none', // UNDO
+    },
+    alternativeMethodsBlockButton: {
+      color: '#19ff7d',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.08em',
+      textDecoration: 'underline',
+      boxShadow: 'none', // UNDO
+      backgroundImage: 'none', // UNDO
+      transition: 'none', // UNDO
+      '&:hover': {
+        color: '#8fffc0',
+        boxShadow: 'none', // UNDO
+        transform: 'none', // UNDO
+      },
+    },
+    spinner: {
+      color: '#19ff7d',
+      filter: 'drop-shadow(0 0 6px #19ff7d)',
+    },
+    alert: {
+      backgroundColor: '#220808',
+      border: '2px solid #ff5c5c',
+      boxShadow: 'none', // UNDO
+      backgroundImage: 'none', // UNDO
+    },
+    alertText: {
+      color: '#ffb3b3',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.06em',
+    },
+    otpCodeFieldInput: {
+      backgroundColor: '#03160c',
+      border: '2px solid #19ff7d',
+      color: '#19ff7d',
+      fontFamily: '"IBM Plex Mono", Menlo, Consolas, "Courier New", monospace',
+      fontWeight: 700,
+      boxShadow: 'none', // UNDO
+      backgroundImage: 'none', // UNDO
+      transition: 'none', // UNDO
+      '&:focus': {
+        outline: '2px dashed #19ff7d',
+        outlineOffset: '2px',
+        boxShadow: 'none', // UNDO
+      },
+    },
+    identityPreview: {
+      border: '1px dashed #19ff7d',
+      backgroundColor: '#03160c',
+      boxShadow: 'none', // UNDO
+      backgroundImage: 'none', // UNDO
+    },
+    identityPreviewText: {
+      fontSize: '12px',
+      color: '#9be7c1',
+    },
+    identityPreviewEditButton: {
+      color: '#19ff7d',
+      textDecoration: 'underline',
+      boxShadow: 'none', // UNDO
+      transition: 'none', // UNDO
+      '&:hover': {
+        color: '#8fffc0',
+        boxShadow: 'none', // UNDO
+        transform: 'none', // UNDO
+      },
+    },
+    headerBackLink: {
+      color: '#19ff7d',
+      textDecoration: 'underline',
+      textTransform: 'uppercase' as const,
+      letterSpacing: '0.08em',
+      fontSize: '11px',
+    },
+    footerPagesLink: {
+      color: '#9be7c1',
+      textDecoration: 'underline',
+      fontSize: '11px',
+    },
+  },
+};
+
+// COMPARISON:
+// darkPremium (raw mode base):    ~40 element overrides, 0 variables
+// darkPremiumDefault (default base): 10 variables, 3 element overrides
+//
+// terminalRaw (raw mode):      ~160 lines, 0 "UNDO" overrides
+// terminalDefault (default):   ~220 lines, ~30 "UNDO" overrides (boxShadow: none, transition: none, etc.)
+//
+// For radical design changes, raw mode is cleaner - you only write what you WANT.
+// For color-swap themes, the default theme wins via variable cascade.
+
+// Friction log from building both presets:
+//
+// DISCOVERY:
+// 1. Element key names aren't guessable ("formButtonPrimary", "socialButtonsIconButton")
+// 2. cardBox vs card vs rootBox - three nesting levels
+// 3. socialButtonsIconButton vs socialButtonsBlockButton depends on variant config
+// 4. "lastAuthenticationStrategyBadge" is very internal-sounding
+//
+// STYLING:
+// 5. backgroundColor leaks in raw mode (preserved for icon masks)
+// 6. Provider icon colors driven by CSS custom properties, not elements API
+// 7. spinner element is global (no scoped per-button override)
+// 8. Social button text color doesn't inherit - need socialButtonsBlockButtonText
+// 9. Dark theme: icon fills are #000 by default, need to adjust theme variables
+//    (colorForeground) to make icons visible on dark backgrounds
+//
+// COMPLETENESS:
+// 10. Multi-step flows (OTP, password reset) have separate element keys
+// 11. Error/loading states easy to forget
+// 12. Autofill styling needs vendor-prefixed hacks (-webkit-autofill)