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

package/src/ThemeExplorer/ThemeBuilder.tsx

@@ -0,0 +1,198 @@
+import type { ComponentType } from 'react';
+import { useState, 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 {
+  THEME_OVERRIDE_KEY,
+  injectThemeOverride,
+  transformTheme,
+} from '@basic-ui/dynamic-theme';
+
+import { Box } from '../Box';
+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 interface ThemeBuilderProps {
+  CodeHighlightingComponent?: ComponentType<{
+    children: string;
+    className: string;
+    showButtons?: boolean;
+  }>;
+}
+
+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 { CodeHighlightingComponent = DefaultHighlighter } = props;
+  const [primaryColor, setPrimaryColor] = useLocalStorageCachedState<Color>(
+    toColor('hex', theme.colors.primary),
+    '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]
+  );
+
+  const colorModes = useMemo(
+    () => transformTheme({ colors: scheme }, []).colorModes,
+    [scheme]
+  );
+  useEffect(() => {
+    localStorage.setItem(THEME_OVERRIDE_KEY, JSON.stringify({ colorModes }));
+    injectThemeOverride({ colorModes });
+  }, [colorModes]);
+
+  return (
+    <>
+      <Box display="flex" my={3} sx={{ gap: 3, flexWrap: 'wrap' }}>
+        <Box display="flex" minWidth="300px" flex="1">
+          <TextFieldColorPicker
+            label="Primary color"
+            value={primaryColor}
+            onChange={(c) => setPrimaryColor(c)}
+          />
+          <Button
+            variant="text"
+            disabled={
+              primaryColor.hex === toColor('hex', theme.colors.primary).hex
+            }
+            onClick={() =>
+              setPrimaryColor(toColor('hex', theme.colors.primary))
+            }
+          >
+            Reset
+          </Button>
+        </Box>
+        <Box display="flex" minWidth="300px" flex="1">
+          <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" minWidth="300px" flex="1">
+          <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" minWidth="300px" flex="1">
+          <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="100%">
+        <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
+          <Box flex="1">
+            <Text variant="title-medium" as="h1" pb={'0.3em'}>
+              Light theme
+            </Text>
+            <ThemeColors scheme={scheme} />
+          </Box>
+          <Box flex="1">
+            <Text variant="title-medium" 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>
+        <CodeHighlightingComponent className={`language-json`}>
+          {JSON.stringify({ colors: scheme }, null, 2)}
+        </CodeHighlightingComponent>
+      </Box>
+    </>
+  );
+};

package/src/ThemeExplorer/ThemeColors.tsx

@@ -1,7 +1,8 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
+
 import { Box } from '..';
 import { ColorRow } from './components';
-import { makeColorScheme } from './makeColorScheme';
+import type { makeColorScheme } from './makeColorScheme';
 
 export const ThemeColors = memo(
   ({

package/src/ThemeExplorer/components.tsx

@@ -1,16 +1,18 @@
-import React, { memo, useState, CSSProperties } from 'react';
-import { Box, Text, Tooltip } from '../';
+import type { CSSProperties } from 'react';
+import { memo, useState } from 'react';
 import { rgb, parseToHsl, parseToRgb } from 'polished';
 import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
 
+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)
@@ -39,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>
     );
   }
@@ -81,6 +89,7 @@ export const ColorRow = memo(
             borderBottomRightRadius: 24,
             overflow: 'hidden',
           },
+          height,
         }}
       >
         {colors.map(({ token, bg, color }, idx) => (
@@ -95,7 +104,6 @@ export const ColorRow = memo(
             key={token}
             token={token}
             style={{ backgroundColor: bg, color: color }}
-            height={height}
           />
         ))}
       </Box>
@@ -125,8 +133,10 @@ export const TonalColorItem = memo(
           </>
         }
       >
-        <Box
+        <Text
           key={level}
+          as="div"
+          variant="body-small"
           flex={1}
           display="flex"
           alignItems="center"
@@ -137,7 +147,7 @@ export const TonalColorItem = memo(
           }}
         >
           {level}
-        </Box>
+        </Text>
       </Tooltip>
     );
   }
@@ -166,22 +176,7 @@ export const TonalColorsFromToken = memo((props: { token: string }) => {
 
 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,
+    0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100,
   ];
   return (
     <Box display="flex" height="72px" width="100%">

package/src/ThemeExplorer/index.ts

@@ -0,0 +1 @@
+export * from './ThemeBuilder';

package/src/ThemeExplorer/makeColorScheme.tsx

@@ -1,4 +1,5 @@
-import { TonalPalette, hexFromArgb } from '@material/material-color-utilities';
+import type { TonalPalette } from '@material/material-color-utilities';
+import { hexFromArgb } from '@material/material-color-utilities';
 
 export function makeColorScheme(opts: {
   primary: TonalPalette;

package/src/ThemeExplorer/useDeferredColor.tsx

@@ -1,16 +1,16 @@
 import { useMemo, useDeferredValue } from 'react';
 import { TonalPalette, argbFromHex } from '@material/material-color-utilities';
-import { Color } from '@basic-ui/color-picker';
+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
+    null,
+    'theme-builder.' + key
   );
   const deferredColor = useDeferredValue(color);
   const colorTonal = useMemo(

package/src/ThemeExplorer/useLocalStorageCachedState.ts

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

package/src/Tooltip/Tooltip.story.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
 import { Tooltip } from './';
 import { Button } from '../Button';
 // import './styles.css';
@@ -8,7 +9,7 @@ export default {
 };
 
 const Example = () => {
-  const buttonRef = useRef();
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const [counter, setCounter] = useState(0);
   useEffect(() => {
     const interval = setInterval(() => setCounter((f) => f + 1), 50);

package/src/Tooltip/Tooltip.tsx

@@ -1,20 +1,25 @@
-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 { ElementType, FC, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
 
 export interface TooltipProps
   extends BoxProps,
     Omit<PopperProps, 'color' | 'anchorEl'> {
-  label: React.ReactNode;
+  label: ReactNode;
   disabled?: boolean;
 }
 
-const BaseTooltip: VFC<
+const BaseTooltip: FC<
   BoxProps & {
-    innerAs?: React.ElementType<any>;
+    innerAs?: ElementType<any>;
   } & Omit<PopperProps, 'color' | 'anchorEl'>
 > = _BaseTooltip as any;
+
 export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   function Tooltip(props, forwardedRef) {
     const { placement = 'bottom', __css, ...otherProps } = props;
@@ -27,15 +32,12 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         placement={placement}
         distance={8}
         __css={{
+          variant: ['text.body-medium', 'text.body-small'],
           bg: alpha('#616161', 0.9),
           color: '#fff',
-          fontSize: [2, 2, 1],
-          fontFamily: 'body',
-          fontWeight: 'regular',
-          lineHeight: [1.2, 1.2, 1.33],
-          px: [3, 3, 2],
-          py: [2, 2, 1],
-          borderRadius: '4px',
+          px: 2,
+          py: 1,
+          borderRadius: 'extra-small',
           zIndex: 'tooltip',
           ...__css,
         }}

package/src/color.ts

@@ -1,20 +1,45 @@
-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 { DARK_THEME_CLASS } from '@basic-ui/dynamic-theme';
+
+import type { Theme } from './theme';
 
-  const rgb = parseToRgb(color);
-  return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
-};
+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 mixColor(
+  baseColor: string,
+  overlayColor: string
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity: number
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity?: number
+): (theme: any) => string {
+  return (theme) => {
+    baseColor = get(theme, `colors.${baseColor}`, baseColor);
+    overlayColor = overlayOpacity
+      ? alpha(overlayColor, overlayOpacity)(theme)
+      : get(theme, `colors.${overlayColor}`, overlayColor);
+
+    return `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`;
+  };
+}
 
 export function getColorOverlay(
   theme: Theme,
@@ -22,11 +47,8 @@ export function getColorOverlay(
   overlayColor: string,
   overlayOpacity: number
 ): SystemStyleObject {
-  baseColor = get(theme, `colors.${baseColor}`) || baseColor;
-  overlayColor = alpha(overlayColor, overlayOpacity)(theme);
-
   return {
-    background: `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`,
+    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme),
   };
 }
 
@@ -44,7 +66,8 @@ export function getBackgroundOverlay(
 
 export function getDarkThemeBackgroundOverlay(
   theme: Theme,
-  backgroundOverlay: number | string
+  backgroundOverlay: number | string,
+  overlayColor = 'on.surface'
 ): SystemStyleObject {
   if (Number(backgroundOverlay) <= 0) {
     return {};
@@ -52,7 +75,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;

package/src/index.ts

@@ -8,7 +8,6 @@ export * from './Button';
 export * from './Combobox';
 export * from './CheckBox';
 export * from './Chip';
-export * from './ColorMode';
 export * from './Divider';
 export * from './Dialog';
 export * from './FloatingLabel';
@@ -17,6 +16,7 @@ export * from './Link';
 export * from './List';
 export * from './ListItem';
 export * from './Menu';
+export * from './NavRail';
 export * from './NotchedOutline';
 export * from './Paper';
 export * from './ProgressSpinner';
@@ -33,5 +33,6 @@ export * from './Table';
 export * from './Text';
 export * from './TextField';
 export * from './Tooltip';
+export * from './motion';
 export * from './theme';
 export * from './color';

package/src/motion.ts

@@ -0,0 +1,7 @@
+export const EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';
+export const EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';
+export const EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';
+export const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';
+export const EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';