@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.50

package/src/ThemeExplorer/components.tsx

@@ -1,195 +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'; // eslint-disable-line import/no-unresolved
-
-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' },
-  ];
-}
+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' },
+  ];
+}