@basic-ui/material 1.0.0-alpha.2 → 1.0.0-alpha.21

package/src/ThemeExplorer/ThemeBuilder.story.tsx

@@ -1,165 +1,8 @@
-import React, { useMemo, useDeferredValue, useEffect } from 'react';
-import {
-  CorePalette,
-  argbFromHex,
-  hexFromArgb,
-} from '@material/material-color-utilities';
-import type { Color } from '@basic-ui/color-picker';
-import { toColor } from '@basic-ui/color-picker';
-
-import { Box } from '..';
-import { TonalColors } from './components';
-import { TextFieldColorPicker } from './TextFieldColorPicker';
-import { ThemeColors } from './ThemeColors';
-import { makeColorScheme } from './makeColorScheme';
-import { theme } from '../theme';
-import { Text } from '../Text';
-import { Button } from '../Button';
-import { useLocalStorageCachedState } from './useLocalStorageCachedState';
-import { useDeferredColor } from './useDeferredColor';
+import { theme } from '../theme/theme';
+import { ThemeBuilder } from './ThemeBuilder';
 
 export default {
   title: 'components/ThemeExplorer',
 };
 
-const ThemeBuilder = () => {
-  const [primaryColor, setPrimaryColor] = useLocalStorageCachedState<Color>(
-    'primary',
-    toColor('hex', theme.colors.primary)
-  );
-  const deferredPrimaryColor = useDeferredValue(primaryColor);
-
-  const { a1, a2, a3, error, n1, n2 } = useMemo(
-    () => CorePalette.of(argbFromHex(deferredPrimaryColor.hex)),
-    [deferredPrimaryColor.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]
-  );
-
-  useEffect(() => {
-    localStorage.setItem('theme-builder.themeOverride', JSON.stringify(scheme));
-  }, [scheme]);
-
-  return (
-    <Box display="flex">
-      <Box
-        display="flex"
-        my={3}
-        sx={{ gap: 3 }}
-        flexDirection="column"
-        width="300px"
-      >
-        <Box display="flex">
-          <TextFieldColorPicker
-            label="Primary color"
-            value={primaryColor}
-            onChange={(c) => setPrimaryColor(c)}
-          />
-          <Button variant="text" disabled={true}>
-            Reset
-          </Button>
-        </Box>
-        <Box display="flex">
-          <TextFieldColorPicker
-            label="Secondary color"
-            value={
-              secondaryColor ||
-              toColor('hex', hexFromArgb(secondaryColorTonal.tone(40)))
-            }
-            onChange={(c) => setSecondaryColor(c)}
-          />
-          <Button
-            variant="text"
-            onClick={() => setSecondaryColor(null)}
-            disabled={secondaryColor === null}
-          >
-            Reset
-          </Button>
-        </Box>
-        <Box display="flex">
-          <TextFieldColorPicker
-            label="Tertiary color"
-            value={
-              tertiaryColor ||
-              toColor('hex', hexFromArgb(tertiaryColorTonal.tone(40)))
-            }
-            onChange={(c) => setTertiaryColor(c)}
-          />
-          <Button
-            variant="text"
-            onClick={() => setTertiaryColor(null)}
-            disabled={tertiaryColor === null}
-          >
-            Reset
-          </Button>
-        </Box>
-        <Box display="flex">
-          <TextFieldColorPicker
-            label="Neutral color"
-            value={
-              neutralColor ||
-              toColor('hex', hexFromArgb(neutralColorTonal.tone(40)))
-            }
-            onChange={(c) => setNeutralColor(c)}
-          />
-          <Button
-            variant="text"
-            onClick={() => setNeutralColor(null)}
-            disabled={neutralColor === null}
-          >
-            Reset
-          </Button>
-        </Box>
-      </Box>
-      <Box width="600px" mx="auto">
-        <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
-          <Box flex="1">
-            <Text variant="h5" as="h1" pb={'0.3em'}>
-              Light theme
-            </Text>
-            <ThemeColors scheme={scheme} />
-          </Box>
-          <Box flex="1">
-            <Text variant="h5" as="h1" pb={'0.3em'}>
-              Dark theme
-            </Text>
-            <ThemeColors scheme={scheme.modes.dark} />
-          </Box>
-        </Box>
-        <Box my={4} display="flex" sx={{ gap: 3 }} flexDirection="column">
-          <TonalColors palette={a1} />
-          <TonalColors palette={secondaryColorTonal} />
-          <TonalColors palette={tertiaryColorTonal} />
-          <TonalColors palette={error} />
-          <TonalColors palette={neutralColorTonal} />
-          <TonalColors palette={n2} />
-        </Box>
-        <Box as="pre" fontFamily="monospace" fontSize="12px">
-          {JSON.stringify({ colors: scheme }, null, 2)}
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-export const Builder = () => <ThemeBuilder />;
+export const Builder = () => <ThemeBuilder baseTheme={theme} />;

package/src/ThemeExplorer/ThemeBuilder.tsx

@@ -0,0 +1,337 @@
+import type { ComponentType } from 'react';
+import { useState, useMemo, useEffect } from 'react';
+import {
+  CorePalette,
+  argbFromHex,
+  hexFromArgb,
+} 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';
+
+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(
+    () => CorePalette.of(argbFromHex(primaryColor.hex)),
+    [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>
+      {/* Color pickers */}
+      <Text variant="headline-small">Theme</Text>
+      <CodeHighlightingComponent className={`language-json`}>
+        {JSON.stringify(newTheme, null, 2)}
+      </CodeHighlightingComponent>
+    </>
+  );
+};

package/src/ThemeExplorer/ThemeColors.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import { Box } from '..';
 import { ColorRow } from './components';

package/src/ThemeExplorer/components.tsx

@@ -1,18 +1,18 @@
 import type { CSSProperties } from 'react';
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
 import { rgb, parseToHsl, parseToRgb } from 'polished';
 import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
 
-import { Box, Text, Tooltip } from '../';
+import { Box, Tooltip, Text } from '../';
 
 export const ColorItem = memo(
   (props: {
     token: string;
     style: CSSProperties;
-    height: number;
+    height?: number;
     width: string;
   }) => {
-    const { token, style, height = 50, width } = props;
+    const { token, style, width, height = '100%' } = props;
     const [computedColor, setComputedColor] = useState<string>();
     const hslColor = computedColor
       ? parseToHsl(computedColor)
@@ -41,22 +41,28 @@ export const ColorItem = memo(
           )
         }
       >
-        <Box
-          width={width}
-          height={height}
+        <Text
+          as="div"
+          variant="body-small"
           style={style}
-          pl="10px"
-          pt="10px"
           ref={(ref: HTMLDivElement | null) => {
             if (ref) {
               setComputedColor(window.getComputedStyle(ref).backgroundColor);
             }
           }}
+          sx={{
+            width,
+            height,
+            px: '10px',
+            py: '10px',
+            fontSize: '11px',
+            lineHeight: '11px',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+          }}
         >
-          <Text variant="body2" as="span" fontSize="11px" lineHeight="11px">
-            {token}
-          </Text>
-        </Box>
+          {token}
+        </Text>
       </Tooltip>
     );
   }
@@ -74,15 +80,16 @@ export const ColorRow = memo(
         display="flex"
         sx={{
           ':first-of-type': {
-            borderTopLeftRadius: 24,
-            borderTopRightRadius: 24,
+            borderTopLeftRadius: 'extra-large',
+            borderTopRightRadius: 'extra-large',
             overflow: 'hidden',
           },
           ':last-of-type': {
-            borderBottomLeftRadius: 24,
-            borderBottomRightRadius: 24,
+            borderBottomLeftRadius: 'extra-large',
+            borderBottomRightRadius: 'extra-large',
             overflow: 'hidden',
           },
+          height,
         }}
       >
         {colors.map(({ token, bg, color }, idx) => (
@@ -97,7 +104,6 @@ export const ColorRow = memo(
             key={token}
             token={token}
             style={{ backgroundColor: bg, color: color }}
-            height={height}
           />
         ))}
       </Box>
@@ -127,8 +133,10 @@ export const TonalColorItem = memo(
           </>
         }
       >
-        <Box
+        <Text
           key={level}
+          as="div"
+          variant="body-small"
           flex={1}
           display="flex"
           alignItems="center"
@@ -139,7 +147,7 @@ export const TonalColorItem = memo(
           }}
         >
           {level}
-        </Box>
+        </Text>
       </Tooltip>
     );
   }