@basic-ui/material 0.1.13 → 1.0.0-alpha.0

package/src/ThemeExplorer/ThemeExplorer.story.tsx

@@ -0,0 +1,42 @@
+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,208 @@
+import React, { memo, useState, CSSProperties } from 'react';
+import { Box, Text, Tooltip } from '../';
+import { rgb, parseToHsl, parseToRgb } from 'polished';
+import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
+
+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,73 @@
+import { TonalPalette, 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,24 @@
+import { useMemo, useDeferredValue } from 'react';
+import { TonalPalette, argbFromHex } from '@material/material-color-utilities';
+import { 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,9 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Tooltip } from './';
 import { Button } from '../Button';
-import { storiesOf } from '@storybook/react';
 // import './styles.css';
 
+export default {
+  title: 'components/Tooltip',
+};
+
 const Example = () => {
   const buttonRef = useRef();
   const [counter, setCounter] = useState(0);
@@ -28,6 +31,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/Tooltip', module);
-
-stories.add('controlled', () => <Example />);
+export const Default = () => <Example />;

package/src/color.ts

@@ -16,25 +16,30 @@ export const alpha = (colorString: string, alphaValue: number) => (
   return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
 };
 
+export function getColorOverlay(
+  theme: Theme,
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity: number
+): SystemStyleObject {
+  baseColor = get(theme, `colors.${baseColor}`) || baseColor;
+  overlayColor = alpha(overlayColor, overlayOpacity)(theme);
+
+  return {
+    background: `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`,
+  };
+}
+
 export function getBackgroundOverlay(
   theme: Theme,
-  backgroundOverlay: number | string
+  backgroundOverlay: number | string,
+  overlayColor = 'on.surface'
 ): SystemStyleObject {
   if (Number(backgroundOverlay) <= 0) {
     return {};
   }
-
-  return {
-    background: `linear-gradient(${get(theme, 'colors.surface')}, ${get(
-      theme,
-      'colors.surface'
-    )}), ${alpha(
-      'on.surface',
-      get(theme, `paper.overlays.${backgroundOverlay}`) || 0
-    )(theme)}`,
-    backgroundBlendMode: 'overlay',
-    backgroundRepeat: 'no-repeat',
-  };
+  const overlay = get(theme, `paper.overlays.${backgroundOverlay}`) || 0;
+  return getColorOverlay(theme, 'surface', overlayColor, overlay);
 }
 
 export function getDarkThemeBackgroundOverlay(