@basic-ui/material 0.1.15 → 1.0.0-alpha.1

package/src/ThemeExplorer/ThemeBuilder.story.tsx

@@ -0,0 +1,165 @@
+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';
+
+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 />;

package/src/ThemeExplorer/ThemeColors.tsx

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

package/src/ThemeExplorer/ThemeExplorer.story.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+
+import { ThemeColors } from './ThemeColors';
+import { DARK_THEME_CLASS, DEFAULT_THEME_CLASS, Box } from '../';
+
+export default {
+  title: 'components/ThemeExplorer',
+};
+
+const ThemeExplorer = () => {
+  const theme = useTheme();
+  return (
+    <>
+      <Box
+        flex="1"
+        p={3}
+        borderRadius="extra-large"
+        overflow="hidden"
+        border="1px solid #fff"
+        borderColor="outline"
+        bg="surface"
+        className={DEFAULT_THEME_CLASS}
+      >
+        <ThemeColors scheme={theme.colors as any} />
+      </Box>
+      <Box
+        flex="1"
+        p={3}
+        borderRadius="extra-large"
+        overflow="hidden"
+        border="1px solid #fff"
+        borderColor="outline"
+        bg="surface"
+        className={DARK_THEME_CLASS}
+      >
+        <ThemeColors scheme={theme.colors.modes.dark as any} />
+      </Box>
+    </>
+  );
+};
+
+export const Explorer = () => <ThemeExplorer />;

package/src/ThemeExplorer/components.tsx

@@ -0,0 +1,195 @@
+import type { CSSProperties } from 'react';
+import React, { memo, useState } from 'react';
+import { rgb, parseToHsl, parseToRgb } from 'polished';
+import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
+
+import { Box, Text, Tooltip } from '../';
+
+export const ColorItem = memo(
+  (props: {
+    token: string;
+    style: CSSProperties;
+    height: number;
+    width: string;
+  }) => {
+    const { token, style, height = 50, width } = props;
+    const [computedColor, setComputedColor] = useState<string>();
+    const hslColor = computedColor
+      ? parseToHsl(computedColor)
+      : { hue: 0, saturation: 0, lightness: 0 };
+    const rgbColor = computedColor
+      ? parseToRgb(computedColor)
+      : { red: 0, green: 0, blue: 0 };
+    return (
+      <Tooltip
+        label={
+          computedColor ? (
+            <>
+              <p>{token}</p>
+              <p>{rgb(rgbColor)}</p>
+              <p>
+                rgb({rgbColor.red}, {rgbColor.green}, {rgbColor.blue})
+              </p>
+              <p>
+                hsl({Math.round(hslColor.hue)},{' '}
+                {Math.round(hslColor.saturation * 100)}%,{' '}
+                {Math.round(hslColor.lightness * 100)}%)
+              </p>
+            </>
+          ) : (
+            <p>{token}</p>
+          )
+        }
+      >
+        <Box
+          width={width}
+          height={height}
+          style={style}
+          pl="10px"
+          pt="10px"
+          ref={(ref: HTMLDivElement | null) => {
+            if (ref) {
+              setComputedColor(window.getComputedStyle(ref).backgroundColor);
+            }
+          }}
+        >
+          <Text variant="body2" as="span" fontSize="11px" lineHeight="11px">
+            {token}
+          </Text>
+        </Box>
+      </Tooltip>
+    );
+  }
+);
+
+export const ColorRow = memo(
+  (props: {
+    colors: { token: string; bg: string; color: string }[];
+    height?: number;
+  }) => {
+    const { colors, height = 50 } = props;
+    return (
+      <Box
+        width="100%"
+        display="flex"
+        sx={{
+          ':first-of-type': {
+            borderTopLeftRadius: 24,
+            borderTopRightRadius: 24,
+            overflow: 'hidden',
+          },
+          ':last-of-type': {
+            borderBottomLeftRadius: 24,
+            borderBottomRightRadius: 24,
+            overflow: 'hidden',
+          },
+        }}
+      >
+        {colors.map(({ token, bg, color }, idx) => (
+          <ColorItem
+            width={
+              colors.length % 2 === 1
+                ? idx === colors.length - 1
+                  ? '50%'
+                  : '25%'
+                : '33.33%'
+            }
+            key={token}
+            token={token}
+            style={{ backgroundColor: bg, color: color }}
+            height={height}
+          />
+        ))}
+      </Box>
+    );
+  }
+);
+
+export const TonalColorItem = memo(
+  (props: { color: string; level: number }) => {
+    const { level, color } = props;
+    const hslColor = parseToHsl(color);
+    const rgbColor = parseToRgb(color);
+    return (
+      <Tooltip
+        label={
+          <>
+            <p>Luminance: {level}</p>
+            <p>{rgb(rgbColor)}</p>
+            <p>
+              rgb({rgbColor.red}, {rgbColor.green}, {rgbColor.blue})
+            </p>
+            <p>
+              hsl({Math.round(hslColor.hue)},{' '}
+              {Math.round(hslColor.saturation * 100)}%,{' '}
+              {Math.round(hslColor.lightness * 100)}%)
+            </p>
+          </>
+        }
+      >
+        <Box
+          key={level}
+          flex={1}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          style={{
+            backgroundColor: color,
+            color: level <= 50 ? '#fff' : '#000',
+          }}
+        >
+          {level}
+        </Box>
+      </Tooltip>
+    );
+  }
+);
+
+export const TonalColorsFromToken = memo((props: { token: string }) => {
+  const [computedColor, setComputedColor] = useState<string>();
+  if (!computedColor) {
+    return (
+      <Box
+        ref={(ref: HTMLDivElement | null) => {
+          if (ref) {
+            setComputedColor(window.getComputedStyle(ref).backgroundColor);
+          }
+        }}
+        bg={props.token}
+        style={{ position: 'fixed', left: -5000, top: -5000 }}
+      />
+    );
+  }
+  const colorInt = parseInt(rgb(parseToRgb(computedColor)).slice(1), 16);
+  const tonal = TonalPalette.fromInt(colorInt);
+
+  return <TonalColors palette={tonal} />;
+});
+
+export const TonalColors = memo((props: { palette: TonalPalette }) => {
+  const luminanceLevels = [
+    0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100,
+  ];
+  return (
+    <Box display="flex" height="72px" width="100%">
+      {luminanceLevels.map((level) => (
+        <TonalColorItem
+          key={level}
+          level={level}
+          color={hexFromArgb(props.palette.tone(level))}
+        />
+      ))}
+    </Box>
+  );
+});
+
+export function makeColorArrayForToken(
+  token: string
+): { token: string; bg: string; color: string }[] {
+  return [
+    { token, bg: token, color: 'on.' + token },
+    { token, bg: 'on.' + token, color: token },
+    { token, bg: token + '-container', color: 'on.' + token + '-container' },
+    { token, bg: 'on.' + token + '-container', color: token + '-container' },
+  ];
+}

package/src/ThemeExplorer/makeColorScheme.tsx

@@ -0,0 +1,74 @@
+import type { TonalPalette } from '@material/material-color-utilities';
+import { hexFromArgb } from '@material/material-color-utilities';
+
+export function makeColorScheme(opts: {
+  primary: TonalPalette;
+  secondary: TonalPalette;
+  tertiary: TonalPalette;
+  error: TonalPalette;
+  neutral: TonalPalette;
+  neutralVariant: TonalPalette;
+}) {
+  function c(palette: TonalPalette, tone: number) {
+    return hexFromArgb(palette.tone(tone));
+  }
+
+  return {
+    primary: c(opts.primary, 40),
+    secondary: c(opts.secondary, 40),
+    tertiary: c(opts.tertiary, 40),
+    error: c(opts.error, 40),
+    'primary-container': c(opts.primary, 90),
+    'secondary-container': c(opts.secondary, 90),
+    'tertiary-container': c(opts.tertiary, 90),
+    'error-container': c(opts.error, 90),
+    background: c(opts.neutral, 99),
+    surface: c(opts.neutral, 99),
+    'surface-variant': c(opts.neutralVariant, 90),
+    outline: c(opts.neutralVariant, 50),
+    on: {
+      primary: c(opts.primary, 100),
+      secondary: c(opts.secondary, 100),
+      tertiary: c(opts.tertiary, 100),
+      error: c(opts.error, 100),
+      'primary-container': c(opts.primary, 10),
+      'secondary-container': c(opts.secondary, 10),
+      'tertiary-container': c(opts.tertiary, 10),
+      'error-container': c(opts.error, 10),
+      background: c(opts.neutral, 10),
+      surface: c(opts.neutral, 10),
+      'surface-variant': c(opts.neutralVariant, 30),
+      outline: c(opts.neutralVariant, 95),
+    },
+    modes: {
+      dark: {
+        primary: c(opts.primary, 80),
+        secondary: c(opts.secondary, 80),
+        tertiary: c(opts.tertiary, 80),
+        error: c(opts.error, 80),
+        'primary-container': c(opts.primary, 30),
+        'secondary-container': c(opts.secondary, 30),
+        'tertiary-container': c(opts.tertiary, 30),
+        'error-container': c(opts.error, 30),
+        background: c(opts.neutral, 10),
+        surface: c(opts.neutral, 10),
+        'surface-variant': c(opts.neutralVariant, 30),
+        outline: c(opts.neutralVariant, 60),
+        on: {
+          primary: c(opts.primary, 20),
+          secondary: c(opts.secondary, 20),
+          tertiary: c(opts.tertiary, 20),
+          error: c(opts.error, 20),
+          'primary-container': c(opts.primary, 90),
+          'secondary-container': c(opts.secondary, 90),
+          'tertiary-container': c(opts.tertiary, 90),
+          'error-container': c(opts.error, 90),
+          background: c(opts.neutral, 90),
+          surface: c(opts.neutral, 90),
+          'surface-variant': c(opts.neutralVariant, 80),
+          outline: c(opts.neutralVariant, 10),
+        },
+      },
+    },
+  };
+}

package/src/ThemeExplorer/useDeferredColor.tsx

@@ -0,0 +1,25 @@
+import { useMemo, useDeferredValue } from 'react';
+import { TonalPalette, argbFromHex } from '@material/material-color-utilities';
+import type { Color } from '@basic-ui/color-picker';
+
+import { useLocalStorageCachedState } from './useLocalStorageCachedState';
+
+// import './styles.css';
+export function useDeferredColor(
+  key: string,
+  fallbackValue: TonalPalette
+): [Color | null, TonalPalette, (c: Color | null) => void] {
+  const [color, setColor] = useLocalStorageCachedState<Color | null>(
+    'theme-builder.' + key,
+    null
+  );
+  const deferredColor = useDeferredValue(color);
+  const colorTonal = useMemo(
+    () =>
+      deferredColor?.hex
+        ? TonalPalette.fromInt(argbFromHex(deferredColor.hex))
+        : fallbackValue,
+    [deferredColor?.hex, fallbackValue]
+  );
+  return [color, colorTonal, setColor];
+}

package/src/ThemeExplorer/useLocalStorageCachedState.ts

@@ -0,0 +1,18 @@
+import { useCallback, useState } from 'react';
+
+export function useLocalStorageCachedState<T>(
+  key: string,
+  initialValue: T
+): [T, (c: T) => void] {
+  const [state, _setState] = useState<T>(
+    () => JSON.parse(localStorage.getItem(key) || 'null') || initialValue
+  );
+  const setState = useCallback(
+    (c: T): void => {
+      _setState(c);
+      localStorage.setItem(key, JSON.stringify(c));
+    },
+    [key]
+  );
+  return [state, setState];
+}

package/src/Tooltip/Tooltip.story.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+
 import { Tooltip } from './';
 import { Button } from '../Button';
 // import './styles.css';

package/src/Tooltip/Tooltip.tsx

@@ -1,6 +1,10 @@
-import { Tooltip as _BaseTooltip, Popper, PopperProps } from '@basic-ui/core';
-import React, { forwardRef, VFC } from 'react';
-import { Box, BoxProps } from '../Box';
+import type { PopperProps } from '@basic-ui/core';
+import { Tooltip as _BaseTooltip, Popper } from '@basic-ui/core';
+import type { FC } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
 
 export interface TooltipProps
@@ -10,7 +14,7 @@ export interface TooltipProps
   disabled?: boolean;
 }
 
-const BaseTooltip: VFC<
+const BaseTooltip: FC<
   BoxProps & {
     innerAs?: React.ElementType<any>;
   } & Omit<PopperProps, 'color' | 'anchorEl'>