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

package/build/esm/ThemeExplorer/ThemeBuilder.js

@@ -1,6 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useState, useMemo, useEffect } from 'react';
+'use client';
+
+import { useState, useMemo, useEffect, useCallback } from 'react';
 import { argbFromHex, hexFromArgb, TonalPalette, HCT } from '@material/material-color-utilities';
 import { toColor } from '@basic-ui/color-picker';
 import { THEME_OVERRIDE_STORAGE_KEY, injectThemeOverride, transformTheme, loadGoogleFont } from '@basic-ui/dynamic-theme';
@@ -17,10 +17,7 @@ import { FontAutoComplete, parseMainFont } from './FontAutoComplete';
 import { BorderSlider } from './BorderSlider';
 import { ColorSchemePicker } from './ColorSchemePicker';
 import { makeTailwindThemeCSS } from './makeTailwindTheme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function DefaultHighlighter(props) {
   return /*#__PURE__*/_jsx(Box, {
     as: "pre",
@@ -29,70 +26,98 @@ function DefaultHighlighter(props) {
     children: props.children
   });
 }
-
-export var ThemeBuilder = function ThemeBuilder(props) {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      mounted = _useState2[0],
-      setMounted = _useState2[1];
-
-  useEffect(function () {
+function isCssVariableFont(font) {
+  return Boolean(font?.includes('var('));
+}
+function resolveCssVariables(value) {
+  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) {
+  return parseMainFont(resolveCssVariables(fontStack)) || fontStack;
+}
+function getStoredFont(fontStorageKey) {
+  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, fallback) {
+  if (!font) {
+    return fallback;
+  }
+  if (isCssVariableFont(font) || font.includes(',')) {
+    return font;
+  }
+  return `"${font}", sans-serif`;
+}
+function saveFontOverride(fontStorageKey, font) {
+  if (isCssVariableFont(font)) {
+    localStorage.removeItem(fontStorageKey);
+    return;
+  }
+  localStorage.setItem(fontStorageKey, JSON.stringify(font));
+}
+export const ThemeBuilder = props => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
     setMounted(true);
   }, []);
   if (!mounted) return null;
-  return /*#__PURE__*/_jsx(ThemeBuilderImpl, _extends({}, props));
+  return /*#__PURE__*/_jsx(ThemeBuilderImpl, {
+    ...props
+  });
 };
-
-var ThemeBuilderImpl = function ThemeBuilderImpl(props) {
-  var theme = props.baseTheme,
-      _props$CodeHighlighti = props.CodeHighlightingComponent,
-      CodeHighlightingComponent = _props$CodeHighlighti === void 0 ? DefaultHighlighter : _props$CodeHighlighti;
-
-  var _useLocalStorageCache = useLocalStorageCachedState(parseMainFont(theme.fonts.plain), 'fontFamily.plain'),
-      _useLocalStorageCache2 = _slicedToArray(_useLocalStorageCache, 2),
-      plainFont = _useLocalStorageCache2[0],
-      setPlainFont = _useLocalStorageCache2[1];
-
-  var _useLocalStorageCache3 = useLocalStorageCachedState(parseMainFont(theme.fonts.brand), 'fontFamily.brand'),
-      _useLocalStorageCache4 = _slicedToArray(_useLocalStorageCache3, 2),
-      brandFont = _useLocalStorageCache4[0],
-      setBrandFont = _useLocalStorageCache4[1];
-
-  var _useLocalStorageCache5 = useLocalStorageCachedState(parseInt(remToPx(theme.radii['extra-small'])), 'radii.extra-small'),
-      _useLocalStorageCache6 = _slicedToArray(_useLocalStorageCache5, 2),
-      radiusExtraSmall = _useLocalStorageCache6[0],
-      setRadiusExtraSmall = _useLocalStorageCache6[1];
-
-  var _useLocalStorageCache7 = useLocalStorageCachedState(parseInt(remToPx(theme.radii['small'])), 'radii.small'),
-      _useLocalStorageCache8 = _slicedToArray(_useLocalStorageCache7, 2),
-      radiusSmall = _useLocalStorageCache8[0],
-      setRadiusSmall = _useLocalStorageCache8[1];
-
-  var _useLocalStorageCache9 = useLocalStorageCachedState(parseInt(remToPx(theme.radii['medium'])), 'radii.medium'),
-      _useLocalStorageCache10 = _slicedToArray(_useLocalStorageCache9, 2),
-      radiusMedium = _useLocalStorageCache10[0],
-      setRadiusMedium = _useLocalStorageCache10[1];
-
-  var _useLocalStorageCache11 = useLocalStorageCachedState(parseInt(remToPx(theme.radii['large'])), 'radii.large'),
-      _useLocalStorageCache12 = _slicedToArray(_useLocalStorageCache11, 2),
-      radiusLarge = _useLocalStorageCache12[0],
-      setRadiusLarge = _useLocalStorageCache12[1];
-
-  var _useLocalStorageCache13 = useLocalStorageCachedState(parseInt(remToPx(theme.radii['extra-large'])), 'radii.extra-large'),
-      _useLocalStorageCache14 = _slicedToArray(_useLocalStorageCache13, 2),
-      radiusExtraLarge = _useLocalStorageCache14[0],
-      setRadiusExtraLarge = _useLocalStorageCache14[1];
-
-  var _useLocalStorageCache15 = useLocalStorageCachedState(toColor('hex', theme.colors.primary), 'primary'),
-      _useLocalStorageCache16 = _slicedToArray(_useLocalStorageCache15, 2),
-      primaryColor = _useLocalStorageCache16[0],
-      setPrimaryColor = _useLocalStorageCache16[1];
-
-  var _useMemo = useMemo(function () {
+const ThemeBuilderImpl = props => {
+  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 => {
+    _setPlainFont(font);
+    saveFontOverride('fontFamily.plain', font);
+  }, []);
+  const setBrandFont = useCallback(font => {
+    _setBrandFont(font);
+    saveFontOverride('fontFamily.brand', font);
+  }, []);
+  const [radiusExtraSmall, setRadiusExtraSmall] = useLocalStorageCachedState(parseInt(remToPx(theme.radii['extra-small'])), 'radii.extra-small');
+  const [radiusSmall, setRadiusSmall] = useLocalStorageCachedState(parseInt(remToPx(theme.radii['small'])), 'radii.small');
+  const [radiusMedium, setRadiusMedium] = useLocalStorageCachedState(parseInt(remToPx(theme.radii['medium'])), 'radii.medium');
+  const [radiusLarge, setRadiusLarge] = useLocalStorageCachedState(parseInt(remToPx(theme.radii['large'])), 'radii.large');
+  const [radiusExtraLarge, setRadiusExtraLarge] = useLocalStorageCachedState(parseInt(remToPx(theme.radii['extra-large'])), 'radii.extra-large');
+  const [primaryColor, setPrimaryColor] = useLocalStorageCachedState(toColor('hex', theme.colors.primary), 'primary');
+  const {
+    a1,
+    a2,
+    a3,
+    error,
+    n1,
+    n2
+  } = useMemo(() => {
     /* This is from CorePalette.of(...) */
-    var argb = argbFromHex(primaryColor.hex);
-    var hct = HCT.fromInt(argb);
-    var hue = hct.hue;
+    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),
@@ -101,71 +126,43 @@ var ThemeBuilderImpl = function ThemeBuilderImpl(props) {
       n2: TonalPalette.fromHueAndChroma(hue, 8),
       error: TonalPalette.fromHueAndChroma(25, 84)
     };
-  }, [primaryColor.hex]),
-      a1 = _useMemo.a1,
-      a2 = _useMemo.a2,
-      a3 = _useMemo.a3,
-      error = _useMemo.error,
-      n1 = _useMemo.n1,
-      n2 = _useMemo.n2;
-
-  var _useDeferredColor = useDeferredColor('secondary', a2),
-      _useDeferredColor2 = _slicedToArray(_useDeferredColor, 3),
-      secondaryColor = _useDeferredColor2[0],
-      secondaryColorTonal = _useDeferredColor2[1],
-      setSecondaryColor = _useDeferredColor2[2];
-
-  var _useDeferredColor3 = useDeferredColor('tertiary', a3),
-      _useDeferredColor4 = _slicedToArray(_useDeferredColor3, 3),
-      tertiaryColor = _useDeferredColor4[0],
-      tertiaryColorTonal = _useDeferredColor4[1],
-      setTertiaryColor = _useDeferredColor4[2];
-
-  var _useDeferredColor5 = useDeferredColor('neutral', n1),
-      _useDeferredColor6 = _slicedToArray(_useDeferredColor5, 3),
-      neutralColor = _useDeferredColor6[0],
-      neutralColorTonal = _useDeferredColor6[1],
-      setNeutralColor = _useDeferredColor6[2];
-
-  var scheme = useMemo(function () {
-    return makeColorScheme({
-      primary: a1,
-      secondary: secondaryColorTonal,
-      tertiary: tertiaryColorTonal,
-      error: error,
-      neutral: neutralColorTonal,
-      neutralVariant: n2
-    });
-  }, [a1, secondaryColorTonal, tertiaryColorTonal, error, neutralColorTonal, n2]);
-  var newTheme = useMemo(function () {
-    return {
-      colors: scheme,
-      fonts: {
-        plain: "\"".concat(plainFont, "\""),
-        brand: "\"".concat(brandFont, "\"")
-      },
-      radii: {
-        'extra-small': rem(radiusExtraSmall),
-        'extra-small_top': "".concat(rem(radiusExtraSmall), " ").concat(rem(radiusExtraSmall), " 0 0"),
-        small: rem(radiusSmall),
-        medium: rem(radiusMedium),
-        large: rem(radiusLarge),
-        large_end: "0 ".concat(rem(radiusLarge), " ").concat(rem(radiusLarge), " 0"),
-        large_top: "".concat(rem(radiusLarge), " ").concat(rem(radiusLarge), " 0 0"),
-        'extra-large': rem(radiusExtraLarge),
-        'extra-large_top': "".concat(rem(radiusExtraLarge), " ").concat(rem(radiusExtraLarge), " 0 0")
-      }
-    };
-  }, [scheme, plainFont, brandFont, radiusExtraSmall, radiusSmall, radiusMedium, radiusLarge, radiusExtraLarge]);
-  var colorModes = useMemo(function () {
-    return transformTheme(newTheme, ['fonts', 'radii']).colorModes;
-  }, [newTheme]);
-  useEffect(function () {
+  }, [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: colorModes
+      colorModes
     }));
     injectThemeOverride({
-      colorModes: colorModes
+      colorModes
     });
   }, [colorModes]);
   return /*#__PURE__*/_jsxs(_Fragment, {
@@ -182,50 +179,40 @@ var ThemeBuilderImpl = function ThemeBuilderImpl(props) {
       children: [/*#__PURE__*/_jsx(BorderSlider, {
         label: "Extra small",
         defaultValue: radiusExtraSmall,
-        onChange: function onChange(v) {
-          return setRadiusExtraSmall(v);
-        },
-        onReset: function onReset() {
+        onChange: v => setRadiusExtraSmall(v),
+        onReset: () => {
           setRadiusExtraSmall(parseInt(remToPx(theme.radii['extra-small'])));
         },
         resetDisabled: rem(radiusExtraSmall) === theme.radii['extra-small']
       }), /*#__PURE__*/_jsx(BorderSlider, {
         label: "Small",
         defaultValue: radiusSmall,
-        onChange: function onChange(v) {
-          return setRadiusSmall(v);
-        },
-        onReset: function onReset() {
+        onChange: v => setRadiusSmall(v),
+        onReset: () => {
           setRadiusSmall(parseInt(remToPx(theme.radii['small'])));
         },
         resetDisabled: rem(radiusSmall) === theme.radii.small
       }), /*#__PURE__*/_jsx(BorderSlider, {
         label: "Medium",
         defaultValue: radiusMedium,
-        onChange: function onChange(v) {
-          return setRadiusMedium(v);
-        },
-        onReset: function onReset() {
+        onChange: v => setRadiusMedium(v),
+        onReset: () => {
           setRadiusMedium(parseInt(remToPx(theme.radii['medium'])));
         },
         resetDisabled: rem(radiusMedium) === theme.radii['medium']
       }), /*#__PURE__*/_jsx(BorderSlider, {
         label: "Large",
         defaultValue: radiusLarge,
-        onChange: function onChange(v) {
-          return setRadiusLarge(v);
-        },
-        onReset: function onReset() {
+        onChange: v => setRadiusLarge(v),
+        onReset: () => {
           setRadiusLarge(parseInt(remToPx(theme.radii['large'])));
         },
         resetDisabled: rem(radiusLarge) === theme.radii['large']
       }), /*#__PURE__*/_jsx(BorderSlider, {
         label: "Extra large",
         defaultValue: radiusExtraLarge,
-        onChange: function onChange(v) {
-          return setRadiusExtraLarge(v);
-        },
-        onReset: function onReset() {
+        onChange: v => setRadiusExtraLarge(v),
+        onReset: () => {
           setRadiusExtraLarge(parseInt(remToPx(theme.radii['extra-large'])));
         },
         resetDisabled: rem(radiusExtraLarge) === theme.radii['extra-large']
@@ -242,8 +229,8 @@ var ThemeBuilderImpl = function ThemeBuilderImpl(props) {
       },
       children: [/*#__PURE__*/_jsx(FontAutoComplete, {
         label: "Brand",
-        initialValue: brandFont,
-        onSelect: function onSelect(f) {
+        initialValue: brandFont === theme.fonts.brand ? defaultBrandFontDisplayValue : brandFont,
+        onSelect: f => {
           if (f) {
             setBrandFont(f);
             loadGoogleFont([{
@@ -252,14 +239,14 @@ var ThemeBuilderImpl = function ThemeBuilderImpl(props) {
             }]);
           }
         },
-        onReset: function onReset() {
-          setBrandFont(parseMainFont(theme.fonts.brand));
+        onReset: () => {
+          setBrandFont(theme.fonts.brand);
         },
-        resetDisabled: brandFont === parseMainFont(theme.fonts.brand)
+        resetDisabled: brandFont === theme.fonts.brand
       }), /*#__PURE__*/_jsx(FontAutoComplete, {
         label: "Plain",
-        initialValue: plainFont,
-        onSelect: function onSelect(f) {
+        initialValue: plainFont === theme.fonts.plain ? defaultPlainFontDisplayValue : plainFont,
+        onSelect: f => {
           if (f) {
             setPlainFont(f);
             loadGoogleFont([{
@@ -268,10 +255,10 @@ var ThemeBuilderImpl = function ThemeBuilderImpl(props) {
             }]);
           }
         },
-        onReset: function onReset() {
-          setPlainFont(parseMainFont(theme.fonts.plain));
+        onReset: () => {
+          setPlainFont(theme.fonts.plain);
         },
-        resetDisabled: plainFont === parseMainFont(theme.fonts.plain)
+        resetDisabled: plainFont === theme.fonts.plain
       })]
     }), /*#__PURE__*/_jsx(Text, {
       variant: "headline-small",
@@ -286,42 +273,26 @@ var ThemeBuilderImpl = function ThemeBuilderImpl(props) {
       children: [/*#__PURE__*/_jsx(ColorSchemePicker, {
         label: "Primary color",
         initialValue: primaryColor,
-        onChange: function onChange(c) {
-          return setPrimaryColor(c);
-        },
-        onReset: function onReset() {
-          return setPrimaryColor(toColor('hex', theme.colors.primary));
-        },
+        onChange: c => setPrimaryColor(c),
+        onReset: () => setPrimaryColor(toColor('hex', theme.colors.primary)),
         resetDisabled: primaryColor.hex === toColor('hex', theme.colors.primary).hex
       }), /*#__PURE__*/_jsx(ColorSchemePicker, {
         label: "Secondary color",
         initialValue: secondaryColor || toColor('hex', hexFromArgb(secondaryColorTonal.tone(40))),
-        onChange: function onChange(c) {
-          return setSecondaryColor(c);
-        },
-        onReset: function onReset() {
-          return setSecondaryColor(null);
-        },
+        onChange: c => setSecondaryColor(c),
+        onReset: () => setSecondaryColor(null),
         resetDisabled: secondaryColor === null
       }), /*#__PURE__*/_jsx(ColorSchemePicker, {
         label: "Tertiary color",
         initialValue: tertiaryColor || toColor('hex', hexFromArgb(tertiaryColorTonal.tone(40))),
-        onChange: function onChange(c) {
-          return setTertiaryColor(c);
-        },
-        onReset: function onReset() {
-          return setTertiaryColor(null);
-        },
+        onChange: c => setTertiaryColor(c),
+        onReset: () => setTertiaryColor(null),
         resetDisabled: tertiaryColor === null
       }), /*#__PURE__*/_jsx(ColorSchemePicker, {
         label: "Neutral color",
         initialValue: neutralColor || toColor('hex', hexFromArgb(neutralColorTonal.tone(40))),
-        onChange: function onChange(c) {
-          return setNeutralColor(c);
-        },
-        onReset: function onReset() {
-          return setNeutralColor(null);
-        },
+        onChange: c => setNeutralColor(c),
+        onReset: () => setNeutralColor(null),
         resetDisabled: neutralColor === null
       })]
     }), /*#__PURE__*/_jsxs(Box, {
@@ -386,13 +357,13 @@ var ThemeBuilderImpl = function ThemeBuilderImpl(props) {
       variant: "headline-small",
       children: "Theme"
     }), /*#__PURE__*/_jsx(CodeHighlightingComponent, {
-      className: "language-json",
+      className: `language-json`,
       children: JSON.stringify(newTheme, null, 2)
     }), /*#__PURE__*/_jsx(Text, {
       variant: "headline-small",
       children: "Tailwind Theme"
     }), /*#__PURE__*/_jsx(CodeHighlightingComponent, {
-      className: "language-css",
+      className: `language-css`,
       children: makeTailwindThemeCSS(newTheme)
     })]
   });

package/build/esm/ThemeExplorer/ThemeBuilder.js.map

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

package/build/esm/ThemeExplorer/ThemeColors.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { makeColorScheme } from './makeColorScheme';
-export declare const ThemeColors: import("react").MemoExoticComponent<({ scheme, }: {
-    scheme: Omit<ReturnType<typeof makeColorScheme>, 'modes'>;
-}) => JSX.Element>;
+import type { makeColorScheme } from './makeColorScheme';
+export declare const ThemeColors: import("react").MemoExoticComponent<({ scheme, }: {
+    scheme: Omit<ReturnType<typeof makeColorScheme>, "modes">;
+}) => import("react/jsx-runtime").JSX.Element>;