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

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'>

package/src/color.ts

@@ -1,45 +1,52 @@
-import { get, SystemStyleObject } from '@styled-system/css';
+import type { SystemStyleObject } from '@styled-system/css';
+import { get } from '@styled-system/css';
 import { parseToRgb } from 'polished';
+
 import { DARK_THEME_CLASS } from './ColorMode';
-import { Theme } from './theme';
-
-export const alpha = (colorString: string, alphaValue: number) => (
-  theme: any
-) => {
-  const color = get(theme, 'colors.' + colorString, colorString);
-  if (color.startsWith('var')) {
-    const color = get(theme, 'colors.' + colorString + '_rgb', colorString);
-    return `rgba(${color},${alphaValue})`;
-  }
+import type { Theme } from './theme';
+
+export const alpha =
+  (colorString: string, alphaValue: number) => (theme: any) => {
+    const color = get(theme, 'colors.' + colorString, colorString);
+    if (color.startsWith('var')) {
+      const color = get(theme, 'colors.' + colorString + '_rgb', colorString);
+      return `rgba(${color},${alphaValue})`;
+    }
+
+    const rgb = parseToRgb(color);
+    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);
 
-  const rgb = parseToRgb(color);
-  return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
-};
+  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(
   theme: Theme,
-  backgroundOverlay: number | string
+  backgroundOverlay: number | string,
+  overlayColor = 'on.surface'
 ): SystemStyleObject {
   if (Number(backgroundOverlay) <= 0) {
     return {};
@@ -47,7 +54,7 @@ export function getDarkThemeBackgroundOverlay(
 
   return {
     [`.${DARK_THEME_CLASS} &, &.${DARK_THEME_CLASS}`]: {
-      ...getBackgroundOverlay(theme, backgroundOverlay),
+      ...getBackgroundOverlay(theme, backgroundOverlay, overlayColor),
     },
   };
 }

package/src/hooks/useAnimation.ts

@@ -1,4 +1,5 @@
-import { useState, useEffect, useCallback, CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 export type AnimationStateStyles<TStyleProps extends CSSProperties> = {
   closed: TStyleProps;