feat(ui): add raw mode theme that strips decorative CSS

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, shadcn, shadesOfPurple } from '../../ui/src/themes';
+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';
 
@@ -319,14 +320,15 @@ const themes: Record<string, unknown> = {
   shadesOfPurple,
   neobrutalism,
   shadcn,
+  raw,
 };
 
 function themeSelector() {
   assertClerkIsLoaded(Clerk);
 
   const themeSelect = document.getElementById('themeSelect') as HTMLSelectElement;
 
-  const savedTheme = sessionStorage.getItem('baseTheme') ?? '';
+  const savedTheme = sessionStorage.getItem('baseTheme') ?? 'raw';
   themeSelect.value = savedTheme;
 
   const updateTheme = () => {
@@ -358,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);
@@ -533,7 +541,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;