@basic-ui/material 1.0.0-alpha.52 → 1.0.0-alpha.54

package/src/ThemeExplorer/ThemeColors.tsx

@@ -1,118 +1,122 @@
-import { 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: `surface-dim`,
-              bg: scheme['surface-dim'],
-              color: scheme.on['surface'],
-            },
-            {
-              token: `surface`,
-              bg: scheme['surface'],
-              color: scheme.on['surface'],
-            },
-            {
-              token: `surface-bright`,
-              bg: scheme['surface-bright'],
-              color: scheme.on['surface'],
-            },
-          ]}
-        />
-        <ColorRow
-          colors={[
-            {
-              token: `surface-container-lowest`,
-              bg: scheme['surface-container-lowest'],
-              color: scheme.on['surface'],
-            },
-            {
-              token: `surface-container-low`,
-              bg: scheme['surface-container-low'],
-              color: scheme.on['surface'],
-            },
-            {
-              token: `surface-container`,
-              bg: scheme['surface-container'],
-              color: scheme.on['surface'],
-            },
-            {
-              token: `surface-container-high`,
-              bg: scheme['surface-container-high'],
-              color: scheme.on['surface'],
-            },
-            {
-              token: `surface-container-highest`,
-              bg: scheme['surface-container-highest'],
-              color: scheme.on['surface'],
-            },
-          ]}
-        />
-        <ColorRow
-          colors={[
-            {
-              token: `on.surface`,
-              bg: scheme.on['surface'],
-              color: scheme['surface'],
-            },
-            {
-              token: `on.surface-variant`,
-              bg: scheme.on['surface-variant'],
-              color: scheme['surface-variant'],
-            },
-            {
-              token: `outline`,
-              bg: scheme.outline,
-              color: scheme.on.outline,
-            },
-            {
-              token: `outline-variant`,
-              bg: scheme['outline-variant'],
-              color: scheme.on['outline-variant'],
-            },
-          ]}
-        />
-      </Box>
-    );
-  }
-);
+import { 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'>;
+  }) => {
+    const colors = scheme as unknown as Record<string, string> & {
+      on: Record<string, string>;
+    };
+
+    function makeColorArrayForToken(token: string) {
+      return [
+        {
+          token: `${token}`,
+          bg: colors[token],
+          color: colors.on[token],
+        },
+        {
+          token: `on.${token}`,
+          bg: colors.on[token],
+          color: colors[token],
+        },
+        {
+          token: `${token}-container`,
+          bg: colors[`${token}-container`],
+          color: colors.on[`${token}-container`],
+        },
+        {
+          token: `on.${token}-container`,
+          bg: colors.on[`${token}-container`],
+          color: colors[`${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: `surface-dim`,
+              bg: colors['surface-dim'],
+              color: colors.on['surface'],
+            },
+            {
+              token: `surface`,
+              bg: colors['surface'],
+              color: colors.on['surface'],
+            },
+            {
+              token: `surface-bright`,
+              bg: colors['surface-bright'],
+              color: colors.on['surface'],
+            },
+          ]}
+        />
+        <ColorRow
+          colors={[
+            {
+              token: `surface-container-lowest`,
+              bg: colors['surface-container-lowest'],
+              color: colors.on['surface'],
+            },
+            {
+              token: `surface-container-low`,
+              bg: colors['surface-container-low'],
+              color: colors.on['surface'],
+            },
+            {
+              token: `surface-container`,
+              bg: colors['surface-container'],
+              color: colors.on['surface'],
+            },
+            {
+              token: `surface-container-high`,
+              bg: colors['surface-container-high'],
+              color: colors.on['surface'],
+            },
+            {
+              token: `surface-container-highest`,
+              bg: colors['surface-container-highest'],
+              color: colors.on['surface'],
+            },
+          ]}
+        />
+        <ColorRow
+          colors={[
+            {
+              token: `on.surface`,
+              bg: colors.on['surface'],
+              color: colors['surface'],
+            },
+            {
+              token: `on.surface-variant`,
+              bg: colors.on['surface-variant'],
+              color: colors['surface-variant'],
+            },
+            {
+              token: `outline`,
+              bg: colors.outline,
+              color: colors.on.outline,
+            },
+            {
+              token: `outline-variant`,
+              bg: colors['outline-variant'],
+              color: colors.on['outline-variant'],
+            },
+          ]}
+        />
+      </Box>
+    );
+  }
+);

package/src/ThemeExplorer/components.tsx

@@ -1,195 +1,195 @@
-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;
-    flex: number;
-  }) => {
-    const { token, style, flex, height = '100%' } = 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>
-          )
-        }
-      >
-        <Text
-          as="div"
-          variant="body-medium"
-          style={style}
-          ref={(ref: HTMLDivElement | null) => {
-            if (ref) {
-              setComputedColor(window.getComputedStyle(ref).backgroundColor);
-            }
-          }}
-          sx={{
-            flex,
-            height,
-            px: '12px',
-            py: '12px',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-          }}
-        >
-          {token}
-        </Text>
-      </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: 'large',
-            borderTopRightRadius: 'large',
-            overflow: 'hidden',
-          },
-          ':last-of-type': {
-            borderBottomLeftRadius: 'large',
-            borderBottomRightRadius: 'large',
-            overflow: 'hidden',
-          },
-          height,
-        }}
-      >
-        {colors.map(({ token, bg, color }) => (
-          <ColorItem
-            flex={1}
-            key={token}
-            token={token}
-            style={{ backgroundColor: bg, color: color }}
-          />
-        ))}
-      </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>
-          </>
-        }
-      >
-        <Text
-          key={level}
-          as="div"
-          variant="body-small"
-          flex={1}
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          style={{
-            backgroundColor: color,
-            color: level <= 50 ? '#fff' : '#000',
-          }}
-        >
-          {level}
-        </Text>
-      </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' },
-  ];
-}
+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;
+    flex: number;
+  }) => {
+    const { token, style, flex, height = '100%' } = 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>
+          )
+        }
+      >
+        <Text
+          as="div"
+          variant="body-medium"
+          style={style}
+          ref={(ref: HTMLDivElement | null) => {
+            if (ref) {
+              setComputedColor(window.getComputedStyle(ref).backgroundColor);
+            }
+          }}
+          sx={{
+            flex,
+            height,
+            px: '12px',
+            py: '12px',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+          }}
+        >
+          {token}
+        </Text>
+      </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: 'large',
+            borderTopRightRadius: 'large',
+            overflow: 'hidden',
+          },
+          ':last-of-type': {
+            borderBottomLeftRadius: 'large',
+            borderBottomRightRadius: 'large',
+            overflow: 'hidden',
+          },
+          height,
+        }}
+      >
+        {colors.map(({ token, bg, color }) => (
+          <ColorItem
+            flex={1}
+            key={token}
+            token={token}
+            style={{ backgroundColor: bg, color: color }}
+          />
+        ))}
+      </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>
+          </>
+        }
+      >
+        <Text
+          key={level}
+          as="div"
+          variant="body-small"
+          flex={1}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          style={{
+            backgroundColor: color,
+            color: level <= 50 ? '#fff' : '#000',
+          }}
+        >
+          {level}
+        </Text>
+      </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' },
+  ];
+}