@basic-ui/material 1.0.0-alpha.3 → 1.0.0-alpha.30

package/src/ThemeExplorer/components.tsx

@@ -1,18 +1,18 @@
 import type { CSSProperties } from 'react';
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
 import { rgb, parseToHsl, parseToRgb } from 'polished';
 import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
 
-import { Box, Text, Tooltip } from '../';
+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)
@@ -41,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>
     );
   }
@@ -74,15 +80,16 @@ export const ColorRow = memo(
         display="flex"
         sx={{
           ':first-of-type': {
-            borderTopLeftRadius: 24,
-            borderTopRightRadius: 24,
+            borderTopLeftRadius: 'extra-large',
+            borderTopRightRadius: 'extra-large',
             overflow: 'hidden',
           },
           ':last-of-type': {
-            borderBottomLeftRadius: 24,
-            borderBottomRightRadius: 24,
+            borderBottomLeftRadius: 'extra-large',
+            borderBottomRightRadius: 'extra-large',
             overflow: 'hidden',
           },
+          height,
         }}
       >
         {colors.map(({ token, bg, color }, idx) => (
@@ -97,7 +104,6 @@ export const ColorRow = memo(
             key={token}
             token={token}
             style={{ backgroundColor: bg, color: color }}
-            height={height}
           />
         ))}
       </Box>
@@ -127,8 +133,10 @@ export const TonalColorItem = memo(
           </>
         }
       >
-        <Box
+        <Text
           key={level}
+          as="div"
+          variant="body-small"
           flex={1}
           display="flex"
           alignItems="center"
@@ -139,7 +147,7 @@ export const TonalColorItem = memo(
           }}
         >
           {level}
-        </Box>
+        </Text>
       </Tooltip>
     );
   }