@basic-ui/material 1.0.0-alpha.51 → 1.0.0-alpha.54

package/src/ThemeExplorer/ThemeBuilder.tsx

@@ -1,353 +1,437 @@
-import type { ComponentType } from 'react';
-import { useState, useMemo, useEffect } from 'react';
-import {
-  argbFromHex,
-  hexFromArgb,
-  TonalPalette,
-  HCT,
-} from '@material/material-color-utilities';
-import type { Color } from '@basic-ui/color-picker';
-import { toColor } from '@basic-ui/color-picker';
-import {
-  THEME_OVERRIDE_STORAGE_KEY,
-  injectThemeOverride,
-  transformTheme,
-  loadGoogleFont,
-} from '@basic-ui/dynamic-theme';
-import { rem } from 'polished';
-import remToPx from 'polished/lib/helpers/remToPx';
-
-import { Box } from '../Box';
-import { TonalColors } from './components';
-import { ThemeColors } from './ThemeColors';
-import { makeColorScheme } from './makeColorScheme';
-import { Text } from '../Text';
-import { useLocalStorageCachedState } from './useLocalStorageCachedState';
-import { useDeferredColor } from './useDeferredColor';
-import { FontAutoComplete, parseMainFont } from './FontAutoComplete';
-import type { Theme } from '../theme/theme';
-import { BorderSlider } from './BorderSlider';
-import { ColorSchemePicker } from './ColorSchemePicker';
-import { makeTailwindThemeCSS } from './makeTailwindTheme';
-
-export interface ThemeBuilderProps {
-  CodeHighlightingComponent?: ComponentType<{
-    children: string;
-    className: string;
-    showButtons?: boolean;
-  }>;
-  baseTheme: Theme;
-}
-
-function DefaultHighlighter(props: { children: string }) {
-  return (
-    <Box as="pre" fontFamily="monospace" fontSize="12px">
-      {props.children}
-    </Box>
-  );
-}
-
-export const ThemeBuilder = (props: ThemeBuilderProps) => {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  if (!mounted) return null;
-  return <ThemeBuilderImpl {...props} />;
-};
-
-const ThemeBuilderImpl = (props: ThemeBuilderProps) => {
-  const { baseTheme: theme, CodeHighlightingComponent = DefaultHighlighter } =
-    props;
-  const [plainFont, setPlainFont] = useLocalStorageCachedState(
-    parseMainFont(theme.fonts.plain),
-    'fontFamily.plain'
-  );
-  const [brandFont, setBrandFont] = useLocalStorageCachedState(
-    parseMainFont(theme.fonts.brand),
-    'fontFamily.brand'
-  );
-
-  const [radiusExtraSmall, setRadiusExtraSmall] =
-    useLocalStorageCachedState<number>(
-      parseInt(remToPx(theme.radii['extra-small'])),
-      'radii.extra-small'
-    );
-
-  const [radiusSmall, setRadiusSmall] = useLocalStorageCachedState<number>(
-    parseInt(remToPx(theme.radii['small'])),
-    'radii.small'
-  );
-
-  const [radiusMedium, setRadiusMedium] = useLocalStorageCachedState<number>(
-    parseInt(remToPx(theme.radii['medium'])),
-    'radii.medium'
-  );
-
-  const [radiusLarge, setRadiusLarge] = useLocalStorageCachedState<number>(
-    parseInt(remToPx(theme.radii['large'])),
-    'radii.large'
-  );
-
-  const [radiusExtraLarge, setRadiusExtraLarge] =
-    useLocalStorageCachedState<number>(
-      parseInt(remToPx(theme.radii['extra-large'])),
-      'radii.extra-large'
-    );
-
-  const [primaryColor, setPrimaryColor] = useLocalStorageCachedState<Color>(
-    toColor('hex', theme.colors.primary),
-    'primary'
-  );
-
-  const { a1, a2, a3, error, n1, n2 } = useMemo(() => {
-    /* This is from CorePalette.of(...) */
-    const argb = argbFromHex(primaryColor.hex);
-    const hct = HCT.fromInt(argb);
-    const hue = hct.hue;
-    return {
-      a1: TonalPalette.fromHueAndChroma(hue, Math.max(48, hct.chroma)),
-      a2: TonalPalette.fromHueAndChroma(hue, 16),
-      a3: TonalPalette.fromHueAndChroma(hue + 60, 24),
-      n1: TonalPalette.fromHueAndChroma(hue, 6),
-      n2: TonalPalette.fromHueAndChroma(hue, 8),
-      error: TonalPalette.fromHueAndChroma(25, 84),
-    };
-  }, [primaryColor.hex]);
-
-  const [secondaryColor, secondaryColorTonal, setSecondaryColor] =
-    useDeferredColor('secondary', a2);
-  const [tertiaryColor, tertiaryColorTonal, setTertiaryColor] =
-    useDeferredColor('tertiary', a3);
-  const [neutralColor, neutralColorTonal, setNeutralColor] = useDeferredColor(
-    'neutral',
-    n1
-  );
-
-  const scheme = useMemo(
-    () =>
-      makeColorScheme({
-        primary: a1,
-        secondary: secondaryColorTonal,
-        tertiary: tertiaryColorTonal,
-        error: error,
-        neutral: neutralColorTonal,
-        neutralVariant: n2,
-      }),
-    [a1, secondaryColorTonal, tertiaryColorTonal, error, neutralColorTonal, n2]
-  );
-
-  const newTheme = useMemo(
-    () => ({
-      colors: scheme,
-      fonts: { plain: `"${plainFont}"`, brand: `"${brandFont}"` },
-      radii: {
-        'extra-small': rem(radiusExtraSmall),
-        'extra-small_top': `${rem(radiusExtraSmall)} ${rem(
-          radiusExtraSmall
-        )} 0 0`,
-        small: rem(radiusSmall),
-        medium: rem(radiusMedium),
-        large: rem(radiusLarge),
-        large_end: `0 ${rem(radiusLarge)} ${rem(radiusLarge)} 0`,
-        large_top: `${rem(radiusLarge)} ${rem(radiusLarge)} 0 0`,
-        'extra-large': rem(radiusExtraLarge),
-        'extra-large_top': `${rem(radiusExtraLarge)} ${rem(
-          radiusExtraLarge
-        )} 0 0`,
-      },
-    }),
-    [
-      scheme,
-      plainFont,
-      brandFont,
-      radiusExtraSmall,
-      radiusSmall,
-      radiusMedium,
-      radiusLarge,
-      radiusExtraLarge,
-    ]
-  );
-
-  const colorModes = useMemo(
-    () => transformTheme(newTheme, ['fonts', 'radii']).colorModes,
-    [newTheme]
-  );
-
-  useEffect(() => {
-    localStorage.setItem(
-      THEME_OVERRIDE_STORAGE_KEY,
-      JSON.stringify({ colorModes })
-    );
-    injectThemeOverride({ colorModes });
-  }, [colorModes]);
-
-  return (
-    <>
-      {/* Shape */}
-      <Text variant="headline-small">Shape</Text>
-      <Box display="flex" my={3} sx={{ gap: 3, flexWrap: 'wrap' }}>
-        <BorderSlider
-          label="Extra small"
-          defaultValue={radiusExtraSmall}
-          onChange={(v) => setRadiusExtraSmall(v)}
-          onReset={() => {
-            setRadiusExtraSmall(parseInt(remToPx(theme.radii['extra-small'])));
-          }}
-          resetDisabled={rem(radiusExtraSmall) === theme.radii['extra-small']}
-        />
-        <BorderSlider
-          label="Small"
-          defaultValue={radiusSmall}
-          onChange={(v) => setRadiusSmall(v)}
-          onReset={() => {
-            setRadiusSmall(parseInt(remToPx(theme.radii['small'])));
-          }}
-          resetDisabled={rem(radiusSmall) === theme.radii.small}
-        />
-        <BorderSlider
-          label="Medium"
-          defaultValue={radiusMedium}
-          onChange={(v) => setRadiusMedium(v)}
-          onReset={() => {
-            setRadiusMedium(parseInt(remToPx(theme.radii['medium'])));
-          }}
-          resetDisabled={rem(radiusMedium) === theme.radii['medium']}
-        />
-        <BorderSlider
-          label="Large"
-          defaultValue={radiusLarge}
-          onChange={(v) => setRadiusLarge(v)}
-          onReset={() => {
-            setRadiusLarge(parseInt(remToPx(theme.radii['large'])));
-          }}
-          resetDisabled={rem(radiusLarge) === theme.radii['large']}
-        />
-        <BorderSlider
-          label="Extra large"
-          defaultValue={radiusExtraLarge}
-          onChange={(v) => setRadiusExtraLarge(v)}
-          onReset={() => {
-            setRadiusExtraLarge(parseInt(remToPx(theme.radii['extra-large'])));
-          }}
-          resetDisabled={rem(radiusExtraLarge) === theme.radii['extra-large']}
-        />
-      </Box>
-      {/* Font pickers */}
-      <Text variant="headline-small">Typography</Text>
-      <Box display="flex" my={3} sx={{ gap: 3, flexWrap: 'wrap' }}>
-        <FontAutoComplete
-          label="Brand"
-          initialValue={brandFont}
-          onSelect={(f) => {
-            if (f) {
-              setBrandFont(f);
-              loadGoogleFont([
-                { family: f, weights: [300, 400, 500, 600, 700] },
-              ]);
-            }
-          }}
-          onReset={() => {
-            setBrandFont(parseMainFont(theme.fonts.brand));
-          }}
-          resetDisabled={brandFont === parseMainFont(theme.fonts.brand)}
-        />
-        <FontAutoComplete
-          label="Plain"
-          initialValue={plainFont}
-          onSelect={(f) => {
-            if (f) {
-              setPlainFont(f);
-              loadGoogleFont([
-                { family: f, weights: [300, 400, 500, 600, 700] },
-              ]);
-            }
-          }}
-          onReset={() => {
-            setPlainFont(parseMainFont(theme.fonts.plain));
-          }}
-          resetDisabled={plainFont === parseMainFont(theme.fonts.plain)}
-        />
-      </Box>
-      {/* Color pickers */}
-      <Text variant="headline-small">Color schemes</Text>
-      <Box display="flex" my={3} sx={{ gap: 3, flexWrap: 'wrap' }}>
-        <ColorSchemePicker
-          label="Primary color"
-          initialValue={primaryColor}
-          onChange={(c) => setPrimaryColor(c)}
-          onReset={() => setPrimaryColor(toColor('hex', theme.colors.primary))}
-          resetDisabled={
-            primaryColor.hex === toColor('hex', theme.colors.primary).hex
-          }
-        />
-        <ColorSchemePicker
-          label="Secondary color"
-          initialValue={
-            secondaryColor ||
-            toColor('hex', hexFromArgb(secondaryColorTonal.tone(40)))
-          }
-          onChange={(c) => setSecondaryColor(c)}
-          onReset={() => setSecondaryColor(null)}
-          resetDisabled={secondaryColor === null}
-        />
-        <ColorSchemePicker
-          label="Tertiary color"
-          initialValue={
-            tertiaryColor ||
-            toColor('hex', hexFromArgb(tertiaryColorTonal.tone(40)))
-          }
-          onChange={(c) => setTertiaryColor(c)}
-          onReset={() => setTertiaryColor(null)}
-          resetDisabled={tertiaryColor === null}
-        />
-        <ColorSchemePicker
-          label="Neutral color"
-          initialValue={
-            neutralColor ||
-            toColor('hex', hexFromArgb(neutralColorTonal.tone(40)))
-          }
-          onChange={(c) => setNeutralColor(c)}
-          onReset={() => setNeutralColor(null)}
-          resetDisabled={neutralColor === null}
-        />
-      </Box>
-      <Box width="100%">
-        <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
-          <Box flex="1">
-            <Text variant="title-medium" as="h1" pb={'0.3em'} pt={3}>
-              Light theme
-            </Text>
-            <ThemeColors scheme={scheme} />
-          </Box>
-          <Box flex="1">
-            <Text variant="title-medium" as="h1" pb={'0.3em'} pt={3}>
-              Dark theme
-            </Text>
-            <ThemeColors scheme={scheme.modes.dark} />
-          </Box>
-        </Box>
-        <Box my={4} display="flex" sx={{ gap: 3 }} flexDirection="column">
-          <Text variant="title-medium" as="h1" pb={'0.3em'} pt={3}>
-            Palettes
-          </Text>
-          <TonalColors palette={a1} />
-          <TonalColors palette={secondaryColorTonal} />
-          <TonalColors palette={tertiaryColorTonal} />
-          <TonalColors palette={error} />
-          <TonalColors palette={neutralColorTonal} />
-          <TonalColors palette={n2} />
-        </Box>
-      </Box>
-      {/* Code pickers */}
-      <Text variant="headline-small">Theme</Text>
-      <CodeHighlightingComponent className={`language-json`}>
-        {JSON.stringify(newTheme, null, 2)}
-      </CodeHighlightingComponent>
-      <Text variant="headline-small">Tailwind Theme</Text>
-      <CodeHighlightingComponent className={`language-css`}>
-        {makeTailwindThemeCSS(newTheme as any)}
-      </CodeHighlightingComponent>
-    </>
-  );
-};
+'use client';
+import type { ComponentType } from 'react';
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import {
+  argbFromHex,
+  hexFromArgb,
+  TonalPalette,
+  HCT,
+} from '@material/material-color-utilities';
+import type { Color } from '@basic-ui/color-picker';
+import { toColor } from '@basic-ui/color-picker';
+import {
+  THEME_OVERRIDE_STORAGE_KEY,
+  injectThemeOverride,
+  transformTheme,
+  loadGoogleFont,
+} from '@basic-ui/dynamic-theme';
+import { rem } from 'polished';
+import remToPx from 'polished/lib/helpers/remToPx';
+
+import { Box } from '../Box';
+import { TonalColors } from './components';
+import { ThemeColors } from './ThemeColors';
+import { makeColorScheme } from './makeColorScheme';
+import { Text } from '../Text';
+import { useLocalStorageCachedState } from './useLocalStorageCachedState';
+import { useDeferredColor } from './useDeferredColor';
+import { FontAutoComplete, parseMainFont } from './FontAutoComplete';
+import type { Theme } from '../theme/theme';
+import { BorderSlider } from './BorderSlider';
+import { ColorSchemePicker } from './ColorSchemePicker';
+import { makeTailwindThemeCSS } from './makeTailwindTheme';
+
+export interface ThemeBuilderProps {
+  CodeHighlightingComponent?: ComponentType<{
+    children: string;
+    className: string;
+    showButtons?: boolean;
+  }>;
+  baseTheme: Theme;
+}
+
+function DefaultHighlighter(props: { children: string }) {
+  return (
+    <Box as="pre" fontFamily="monospace" fontSize="12px">
+      {props.children}
+    </Box>
+  );
+}
+
+function isCssVariableFont(font: string | undefined): boolean {
+  return Boolean(font?.includes('var('));
+}
+
+function resolveCssVariables(value: string): string {
+  if (typeof document === 'undefined') {
+    return value;
+  }
+
+  const rootStyles = getComputedStyle(document.documentElement);
+  return value.replace(/var\((--[^,)]+)(?:,[^)]+)?\)/g, (match, varName) => {
+    const resolvedValue = rootStyles.getPropertyValue(varName).trim();
+    return resolvedValue || match;
+  });
+}
+
+function getFontDisplayValue(fontStack: string): string {
+  return parseMainFont(resolveCssVariables(fontStack)) || fontStack;
+}
+
+function getStoredFont(fontStorageKey: string): string | undefined {
+  try {
+    const storedFont = JSON.parse(
+      localStorage.getItem(fontStorageKey) || 'null'
+    );
+    if (typeof storedFont !== 'string' || !storedFont) {
+      return undefined;
+    }
+    if (isCssVariableFont(storedFont)) {
+      localStorage.removeItem(fontStorageKey);
+      return undefined;
+    }
+    return storedFont;
+  } catch (err) {
+    return undefined;
+  }
+}
+
+function formatThemeFont(font: string | undefined, fallback: string): string {
+  if (!font) {
+    return fallback;
+  }
+  if (isCssVariableFont(font) || font.includes(',')) {
+    return font;
+  }
+  return `"${font}", sans-serif`;
+}
+
+function saveFontOverride(fontStorageKey: string, font: string): void {
+  if (isCssVariableFont(font)) {
+    localStorage.removeItem(fontStorageKey);
+    return;
+  }
+  localStorage.setItem(fontStorageKey, JSON.stringify(font));
+}
+
+export const ThemeBuilder = (props: ThemeBuilderProps) => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) return null;
+  return <ThemeBuilderImpl {...props} />;
+};
+
+const ThemeBuilderImpl = (props: ThemeBuilderProps) => {
+  const { baseTheme: theme, CodeHighlightingComponent = DefaultHighlighter } =
+    props;
+  const defaultPlainFontDisplayValue = useMemo(
+    () => getFontDisplayValue(theme.fonts.plain),
+    [theme.fonts.plain]
+  );
+  const defaultBrandFontDisplayValue = useMemo(
+    () => getFontDisplayValue(theme.fonts.brand),
+    [theme.fonts.brand]
+  );
+  const [plainFont, _setPlainFont] = useState(
+    () => getStoredFont('fontFamily.plain') || theme.fonts.plain
+  );
+  const [brandFont, _setBrandFont] = useState(
+    () => getStoredFont('fontFamily.brand') || theme.fonts.brand
+  );
+  const setPlainFont = useCallback((font: string) => {
+    _setPlainFont(font);
+    saveFontOverride('fontFamily.plain', font);
+  }, []);
+  const setBrandFont = useCallback((font: string) => {
+    _setBrandFont(font);
+    saveFontOverride('fontFamily.brand', font);
+  }, []);
+
+  const [radiusExtraSmall, setRadiusExtraSmall] =
+    useLocalStorageCachedState<number>(
+      parseInt(remToPx(theme.radii['extra-small'])),
+      'radii.extra-small'
+    );
+
+  const [radiusSmall, setRadiusSmall] = useLocalStorageCachedState<number>(
+    parseInt(remToPx(theme.radii['small'])),
+    'radii.small'
+  );
+
+  const [radiusMedium, setRadiusMedium] = useLocalStorageCachedState<number>(
+    parseInt(remToPx(theme.radii['medium'])),
+    'radii.medium'
+  );
+
+  const [radiusLarge, setRadiusLarge] = useLocalStorageCachedState<number>(
+    parseInt(remToPx(theme.radii['large'])),
+    'radii.large'
+  );
+
+  const [radiusExtraLarge, setRadiusExtraLarge] =
+    useLocalStorageCachedState<number>(
+      parseInt(remToPx(theme.radii['extra-large'])),
+      'radii.extra-large'
+    );
+
+  const [primaryColor, setPrimaryColor] = useLocalStorageCachedState<Color>(
+    toColor('hex', theme.colors.primary),
+    'primary'
+  );
+
+  const { a1, a2, a3, error, n1, n2 } = useMemo(() => {
+    /* This is from CorePalette.of(...) */
+    const argb = argbFromHex(primaryColor.hex);
+    const hct = HCT.fromInt(argb);
+    const hue = hct.hue;
+    return {
+      a1: TonalPalette.fromHueAndChroma(hue, Math.max(48, hct.chroma)),
+      a2: TonalPalette.fromHueAndChroma(hue, 16),
+      a3: TonalPalette.fromHueAndChroma(hue + 60, 24),
+      n1: TonalPalette.fromHueAndChroma(hue, 6),
+      n2: TonalPalette.fromHueAndChroma(hue, 8),
+      error: TonalPalette.fromHueAndChroma(25, 84),
+    };
+  }, [primaryColor.hex]);
+
+  const [secondaryColor, secondaryColorTonal, setSecondaryColor] =
+    useDeferredColor('secondary', a2);
+  const [tertiaryColor, tertiaryColorTonal, setTertiaryColor] =
+    useDeferredColor('tertiary', a3);
+  const [neutralColor, neutralColorTonal, setNeutralColor] = useDeferredColor(
+    'neutral',
+    n1
+  );
+
+  const scheme = useMemo(
+    () =>
+      makeColorScheme({
+        primary: a1,
+        secondary: secondaryColorTonal,
+        tertiary: tertiaryColorTonal,
+        error: error,
+        neutral: neutralColorTonal,
+        neutralVariant: n2,
+      }),
+    [a1, secondaryColorTonal, tertiaryColorTonal, error, neutralColorTonal, n2]
+  );
+
+  const newTheme = useMemo(
+    () => ({
+      colors: scheme,
+      fonts: {
+        plain: formatThemeFont(plainFont, theme.fonts.plain),
+        brand: formatThemeFont(brandFont, theme.fonts.brand),
+      },
+      radii: {
+        'extra-small': rem(radiusExtraSmall),
+        'extra-small_top': `${rem(radiusExtraSmall)} ${rem(
+          radiusExtraSmall
+        )} 0 0`,
+        small: rem(radiusSmall),
+        medium: rem(radiusMedium),
+        large: rem(radiusLarge),
+        large_end: `0 ${rem(radiusLarge)} ${rem(radiusLarge)} 0`,
+        large_top: `${rem(radiusLarge)} ${rem(radiusLarge)} 0 0`,
+        'extra-large': rem(radiusExtraLarge),
+        'extra-large_top': `${rem(radiusExtraLarge)} ${rem(
+          radiusExtraLarge
+        )} 0 0`,
+      },
+    }),
+    [
+      scheme,
+      plainFont,
+      brandFont,
+      theme.fonts.plain,
+      theme.fonts.brand,
+      radiusExtraSmall,
+      radiusSmall,
+      radiusMedium,
+      radiusLarge,
+      radiusExtraLarge,
+    ]
+  );
+
+  const colorModes = useMemo(
+    () => transformTheme(newTheme, ['fonts', 'radii']).colorModes,
+    [newTheme]
+  );
+
+  useEffect(() => {
+    localStorage.setItem(
+      THEME_OVERRIDE_STORAGE_KEY,
+      JSON.stringify({ colorModes })
+    );
+    injectThemeOverride({ colorModes });
+  }, [colorModes]);
+
+  return (
+    <>
+      {/* Shape */}
+      <Text variant="headline-small">Shape</Text>
+      <Box display="flex" my={3} sx={{ gap: 3, flexWrap: 'wrap' }}>
+        <BorderSlider
+          label="Extra small"
+          defaultValue={radiusExtraSmall}
+          onChange={(v) => setRadiusExtraSmall(v)}
+          onReset={() => {
+            setRadiusExtraSmall(parseInt(remToPx(theme.radii['extra-small'])));
+          }}
+          resetDisabled={rem(radiusExtraSmall) === theme.radii['extra-small']}
+        />
+        <BorderSlider
+          label="Small"
+          defaultValue={radiusSmall}
+          onChange={(v) => setRadiusSmall(v)}
+          onReset={() => {
+            setRadiusSmall(parseInt(remToPx(theme.radii['small'])));
+          }}
+          resetDisabled={rem(radiusSmall) === theme.radii.small}
+        />
+        <BorderSlider
+          label="Medium"
+          defaultValue={radiusMedium}
+          onChange={(v) => setRadiusMedium(v)}
+          onReset={() => {
+            setRadiusMedium(parseInt(remToPx(theme.radii['medium'])));
+          }}
+          resetDisabled={rem(radiusMedium) === theme.radii['medium']}
+        />
+        <BorderSlider
+          label="Large"
+          defaultValue={radiusLarge}
+          onChange={(v) => setRadiusLarge(v)}
+          onReset={() => {
+            setRadiusLarge(parseInt(remToPx(theme.radii['large'])));
+          }}
+          resetDisabled={rem(radiusLarge) === theme.radii['large']}
+        />
+        <BorderSlider
+          label="Extra large"
+          defaultValue={radiusExtraLarge}
+          onChange={(v) => setRadiusExtraLarge(v)}
+          onReset={() => {
+            setRadiusExtraLarge(parseInt(remToPx(theme.radii['extra-large'])));
+          }}
+          resetDisabled={rem(radiusExtraLarge) === theme.radii['extra-large']}
+        />
+      </Box>
+      {/* Font pickers */}
+      <Text variant="headline-small">Typography</Text>
+      <Box display="flex" my={3} sx={{ gap: 3, flexWrap: 'wrap' }}>
+        <FontAutoComplete
+          label="Brand"
+          initialValue={
+            brandFont === theme.fonts.brand
+              ? defaultBrandFontDisplayValue
+              : brandFont
+          }
+          onSelect={(f) => {
+            if (f) {
+              setBrandFont(f);
+              loadGoogleFont([
+                { family: f, weights: [300, 400, 500, 600, 700] },
+              ]);
+            }
+          }}
+          onReset={() => {
+            setBrandFont(theme.fonts.brand);
+          }}
+          resetDisabled={brandFont === theme.fonts.brand}
+        />
+        <FontAutoComplete
+          label="Plain"
+          initialValue={
+            plainFont === theme.fonts.plain
+              ? defaultPlainFontDisplayValue
+              : plainFont
+          }
+          onSelect={(f) => {
+            if (f) {
+              setPlainFont(f);
+              loadGoogleFont([
+                { family: f, weights: [300, 400, 500, 600, 700] },
+              ]);
+            }
+          }}
+          onReset={() => {
+            setPlainFont(theme.fonts.plain);
+          }}
+          resetDisabled={plainFont === theme.fonts.plain}
+        />
+      </Box>
+      {/* Color pickers */}
+      <Text variant="headline-small">Color schemes</Text>
+      <Box display="flex" my={3} sx={{ gap: 3, flexWrap: 'wrap' }}>
+        <ColorSchemePicker
+          label="Primary color"
+          initialValue={primaryColor}
+          onChange={(c) => setPrimaryColor(c)}
+          onReset={() => setPrimaryColor(toColor('hex', theme.colors.primary))}
+          resetDisabled={
+            primaryColor.hex === toColor('hex', theme.colors.primary).hex
+          }
+        />
+        <ColorSchemePicker
+          label="Secondary color"
+          initialValue={
+            secondaryColor ||
+            toColor('hex', hexFromArgb(secondaryColorTonal.tone(40)))
+          }
+          onChange={(c) => setSecondaryColor(c)}
+          onReset={() => setSecondaryColor(null)}
+          resetDisabled={secondaryColor === null}
+        />
+        <ColorSchemePicker
+          label="Tertiary color"
+          initialValue={
+            tertiaryColor ||
+            toColor('hex', hexFromArgb(tertiaryColorTonal.tone(40)))
+          }
+          onChange={(c) => setTertiaryColor(c)}
+          onReset={() => setTertiaryColor(null)}
+          resetDisabled={tertiaryColor === null}
+        />
+        <ColorSchemePicker
+          label="Neutral color"
+          initialValue={
+            neutralColor ||
+            toColor('hex', hexFromArgb(neutralColorTonal.tone(40)))
+          }
+          onChange={(c) => setNeutralColor(c)}
+          onReset={() => setNeutralColor(null)}
+          resetDisabled={neutralColor === null}
+        />
+      </Box>
+      <Box width="100%">
+        <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
+          <Box flex="1">
+            <Text variant="title-medium" as="h1" pb={'0.3em'} pt={3}>
+              Light theme
+            </Text>
+            <ThemeColors scheme={scheme} />
+          </Box>
+          <Box flex="1">
+            <Text variant="title-medium" as="h1" pb={'0.3em'} pt={3}>
+              Dark theme
+            </Text>
+            <ThemeColors scheme={scheme.modes.dark} />
+          </Box>
+        </Box>
+        <Box my={4} display="flex" sx={{ gap: 3 }} flexDirection="column">
+          <Text variant="title-medium" as="h1" pb={'0.3em'} pt={3}>
+            Palettes
+          </Text>
+          <TonalColors palette={a1} />
+          <TonalColors palette={secondaryColorTonal} />
+          <TonalColors palette={tertiaryColorTonal} />
+          <TonalColors palette={error} />
+          <TonalColors palette={neutralColorTonal} />
+          <TonalColors palette={n2} />
+        </Box>
+      </Box>
+      {/* Code pickers */}
+      <Text variant="headline-small">Theme</Text>
+      <CodeHighlightingComponent className={`language-json`}>
+        {JSON.stringify(newTheme, null, 2)}
+      </CodeHighlightingComponent>
+      <Text variant="headline-small">Tailwind Theme</Text>
+      <CodeHighlightingComponent className={`language-css`}>
+        {makeTailwindThemeCSS(newTheme as any)}
+      </CodeHighlightingComponent>
+    </>
+  );
+};