@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.50

package/src/ThemeExplorer/ThemeBuilder.tsx

@@ -0,0 +1,353 @@
+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>
+    </>
+  );
+};

package/src/ThemeExplorer/ThemeColors.tsx

@@ -1,89 +1,118 @@
-import React, { memo } from 'react';
-
-import { Box } from '..';
-import { ColorRow } from './components';
-import type { makeColorScheme } from './makeColorScheme';
-
-export const ThemeColors = memo(
-  ({
-    scheme,
-  }: {
-    scheme: Omit<ReturnType<typeof makeColorScheme>, 'modes'>;
-  }) => {
-    function makeColorArrayForToken(token: string) {
-      return [
-        {
-          token: `${token}`,
-          bg: scheme[token],
-          color: scheme.on[token],
-        },
-        {
-          token: `on.${token}`,
-          bg: scheme.on[token],
-          color: scheme[token],
-        },
-        {
-          token: `${token}-container`,
-          bg: scheme[`${token}-container`],
-          color: scheme.on[`${token}-container`],
-        },
-        {
-          token: `on.${token}-container`,
-          bg: scheme.on[`${token}-container`],
-          color: scheme[`${token}-container`],
-        },
-      ];
-    }
-    return (
-      <Box width="600" display="flex" flexDirection="column" sx={{ gap: 2 }}>
-        <ColorRow colors={makeColorArrayForToken('primary')} height={118} />
-        <ColorRow colors={makeColorArrayForToken('secondary')} />
-        <ColorRow colors={makeColorArrayForToken('tertiary')} />
-        <ColorRow colors={makeColorArrayForToken('error')} />
-        <ColorRow
-          colors={[
-            {
-              token: `background`,
-              bg: scheme.background,
-              color: scheme.on.background,
-            },
-            {
-              token: `on.background`,
-              bg: scheme.on.background,
-              color: scheme.background,
-            },
-            {
-              token: `surface`,
-              bg: scheme.surface,
-              color: scheme.on.surface,
-            },
-            {
-              token: `on.surface`,
-              bg: scheme.on.surface,
-              color: scheme.surface,
-            },
-          ]}
-        />
-        <ColorRow
-          colors={[
-            {
-              token: `surface-variant`,
-              bg: scheme['surface-variant'],
-              color: scheme.on['surface-variant'],
-            },
-            {
-              token: `on.surface-variant`,
-              bg: scheme.on['surface-variant'],
-              color: scheme['surface-variant'],
-            },
-            {
-              token: `outline`,
-              bg: scheme.outline,
-              color: scheme.on.outline,
-            },
-          ]}
-        />
-      </Box>
-    );
-  }
-);
+import { memo } from 'react';
+
+import { Box } from '..';
+import { ColorRow } from './components';
+import type { makeColorScheme } from './makeColorScheme';
+
+export const ThemeColors = memo(
+  ({
+    scheme,
+  }: {
+    scheme: Omit<ReturnType<typeof makeColorScheme>, 'modes'>;
+  }) => {
+    function makeColorArrayForToken(token: string) {
+      return [
+        {
+          token: `${token}`,
+          bg: scheme[token],
+          color: scheme.on[token],
+        },
+        {
+          token: `on.${token}`,
+          bg: scheme.on[token],
+          color: scheme[token],
+        },
+        {
+          token: `${token}-container`,
+          bg: scheme[`${token}-container`],
+          color: scheme.on[`${token}-container`],
+        },
+        {
+          token: `on.${token}-container`,
+          bg: scheme.on[`${token}-container`],
+          color: scheme[`${token}-container`],
+        },
+      ];
+    }
+    return (
+      <Box width="600" display="flex" flexDirection="column" sx={{ gap: 2 }}>
+        <ColorRow colors={makeColorArrayForToken('primary')} height={118} />
+        <ColorRow colors={makeColorArrayForToken('secondary')} />
+        <ColorRow colors={makeColorArrayForToken('tertiary')} />
+        <ColorRow colors={makeColorArrayForToken('error')} />
+        <ColorRow
+          colors={[
+            {
+              token: `surface-dim`,
+              bg: scheme['surface-dim'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface`,
+              bg: scheme['surface'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface-bright`,
+              bg: scheme['surface-bright'],
+              color: scheme.on['surface'],
+            },
+          ]}
+        />
+        <ColorRow
+          colors={[
+            {
+              token: `surface-container-lowest`,
+              bg: scheme['surface-container-lowest'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface-container-low`,
+              bg: scheme['surface-container-low'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface-container`,
+              bg: scheme['surface-container'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface-container-high`,
+              bg: scheme['surface-container-high'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface-container-highest`,
+              bg: scheme['surface-container-highest'],
+              color: scheme.on['surface'],
+            },
+          ]}
+        />
+        <ColorRow
+          colors={[
+            {
+              token: `on.surface`,
+              bg: scheme.on['surface'],
+              color: scheme['surface'],
+            },
+            {
+              token: `on.surface-variant`,
+              bg: scheme.on['surface-variant'],
+              color: scheme['surface-variant'],
+            },
+            {
+              token: `outline`,
+              bg: scheme.outline,
+              color: scheme.on.outline,
+            },
+            {
+              token: `outline-variant`,
+              bg: scheme['outline-variant'],
+              color: scheme.on['outline-variant'],
+            },
+          ]}
+        />
+      </Box>
+    );
+  }
+);