@basic-ui/material 1.0.0-alpha.6 → 1.0.0-alpha.9

package/src/NavRail/NavRail.story.tsx

@@ -1,8 +1,10 @@
 import { rem } from 'polished';
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 
 import { Box } from '../Box';
 import { NavRailItem, NavRailIndicator, NavRailLabel } from './';
+import type { NavRailLabelProps } from './';
+import { EASING_STANDARD } from '../motion';
 // import './styles.css';
 
 export default {
@@ -54,8 +56,8 @@ const MenuIcon = (props) => (
   </svg>
 );
 
-const Example = ({ selectable = true }) => {
-  const [selectedItem, setSelectedItem] = useState(selectable ? '0' : '-1');
+export const Default = () => {
+  const [selectedItem, setSelectedItem] = useState('0');
 
   return (
     <Box
@@ -71,9 +73,7 @@ const Example = ({ selectable = true }) => {
     >
       <NavRailItem
         selected={selectedItem === '0'}
-        onClick={() => {
-          selectable && setSelectedItem('0');
-        }}
+        onClick={() => setSelectedItem('0')}
       >
         <NavRailIndicator>
           <MenuIcon />
@@ -82,9 +82,7 @@ const Example = ({ selectable = true }) => {
       </NavRailItem>
       <NavRailItem
         selected={selectedItem === '1'}
-        onClick={() => {
-          selectable && setSelectedItem('1');
-        }}
+        onClick={() => setSelectedItem('1')}
       >
         <NavRailIndicator>
           <KitchenIcon />
@@ -93,9 +91,7 @@ const Example = ({ selectable = true }) => {
       </NavRailItem>
       <NavRailItem
         selected={selectedItem === '2'}
-        onClick={() => {
-          selectable && setSelectedItem('2');
-        }}
+        onClick={() => setSelectedItem('2')}
       >
         <NavRailIndicator>
           <ListIcon />
@@ -106,4 +102,89 @@ const Example = ({ selectable = true }) => {
   );
 };
 
-export const Normal = () => <Example />;
+const DisappearingNavRailLabel = forwardRef<
+  HTMLDivElement,
+  NavRailLabelProps & { selected: boolean }
+>(function AnimatedNavRailLabel({ selected, height = '28px', ...props }, ref) {
+  const transitionDuration = '0.2s';
+  const transitionTimingFunction = EASING_STANDARD;
+  return (
+    <Box
+      ref={ref}
+      style={{
+        height: selected ? height : '0px',
+      }}
+      sx={{
+        transition: `height ${transitionDuration} ${transitionTimingFunction}`,
+      }}
+    >
+      <NavRailLabel
+        style={{
+          transform: selected
+            ? 'scale(1) translateY(0)'
+            : `scale(0.8, 0.64) translateY(calc(${height} * -0.5 * 0.64))`,
+          opacity: selected ? '1' : '0',
+        }}
+        sx={{
+          transformOrigin: 'center top',
+          transition:
+            `transform ${transitionDuration} ${transitionTimingFunction}, ` +
+            `opacity ${transitionDuration} ${transitionTimingFunction}`,
+        }}
+        {...props}
+      />
+    </Box>
+  );
+});
+
+export const WithHiddenLabels = () => {
+  const [selectedItem, setSelectedItem] = useState('0');
+
+  return (
+    <Box
+      bg="surface"
+      width="80px"
+      position="fixed"
+      top="0"
+      bottom="0"
+      left="0"
+      py={rem(80)}
+      display="flex"
+      flexDirection="column"
+    >
+      <NavRailItem
+        selected={selectedItem === '0'}
+        onClick={() => setSelectedItem('0')}
+      >
+        <NavRailIndicator>
+          <MenuIcon />
+        </NavRailIndicator>
+        <DisappearingNavRailLabel selected={selectedItem === '0'}>
+          Menu
+        </DisappearingNavRailLabel>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '1'}
+        onClick={() => setSelectedItem('1')}
+      >
+        <NavRailIndicator>
+          <KitchenIcon />
+        </NavRailIndicator>
+        <DisappearingNavRailLabel selected={selectedItem === '1'}>
+          Kitchen
+        </DisappearingNavRailLabel>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '2'}
+        onClick={() => setSelectedItem('2')}
+      >
+        <NavRailIndicator>
+          <ListIcon />
+        </NavRailIndicator>
+        <DisappearingNavRailLabel selected={selectedItem === '2'}>
+          Orders
+        </DisappearingNavRailLabel>
+      </NavRailItem>
+    </Box>
+  );
+};

package/src/NavRail/NavRailItem.tsx

@@ -7,8 +7,8 @@ import { Box } from '../Box';
 import { useTheme } from '../theme';
 import { Text } from '../Text';
 import type { TextProps } from '../Text';
-import type { RippleBoxProps } from '../Ripple';
 import { useRippleSurface } from '../Ripple';
+import { EASING_STANDARD } from '../motion';
 
 export interface NavRailItemProps extends Omit<BoxProps, 'color'> {
   as?: React.ElementType<any>;
@@ -18,38 +18,45 @@ export interface NavRailItemProps extends Omit<BoxProps, 'color'> {
   color?: string;
 }
 
-export const NavRailIndicator = forwardRef<HTMLDivElement, RippleBoxProps>(
-  function NavRailIndicator(props, forwardedRef) {
-    const { as = 'div', children, __css, ...otherProps } = props;
+export type NavRailIndicatorProps = BoxProps;
 
-    return (
-      <Box
-        color="currentColor"
-        ref={forwardedRef}
-        as={as}
-        data-nav-rail-item-indicator=""
-        {...otherProps}
-        __css={{
-          width: '100%',
-          height: '100%',
-          maxWidth: rem(56),
-          maxHeight: rem(56),
-          borderRadius: 'full',
-          bg: 'var(--indicator-background-color)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          minHeight: rem(32),
-          ...__css,
-        }}
-      >
-        {children}
-      </Box>
-    );
-  }
-);
+export const NavRailIndicator = forwardRef<
+  HTMLDivElement,
+  NavRailIndicatorProps
+>(function NavRailIndicator(props, forwardedRef) {
+  const { as = 'div', children, __css, ...otherProps } = props;
 
-export const NavRailLabel = forwardRef<HTMLDivElement, TextProps>(
+  return (
+    <Box
+      color="currentColor"
+      ref={forwardedRef}
+      as={as}
+      data-nav-rail-item-indicator=""
+      {...otherProps}
+      __css={{
+        width: '100%',
+        height: '100%',
+        maxWidth: rem(56),
+        maxHeight: rem(56),
+        borderRadius: 'full',
+        bg: 'var(--indicator-background-color)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: rem(32),
+        transition: `background-color .2s ${EASING_STANDARD}`,
+        pointerEvents: 'none',
+        ...__css,
+      }}
+    >
+      {children}
+    </Box>
+  );
+});
+
+export type NavRailLabelProps = TextProps;
+
+export const NavRailLabel = forwardRef<HTMLDivElement, NavRailLabelProps>(
   function NavRailLabel(props, forwardedRef) {
     const { as = 'div', children, __css, ...otherProps } = props;
 
@@ -58,12 +65,13 @@ export const NavRailLabel = forwardRef<HTMLDivElement, TextProps>(
         ref={forwardedRef}
         as={as}
         variant="caption"
-        {...otherProps}
         lineHeight={1}
+        {...otherProps}
         __css={{
           pt: rem(4),
           pb: rem(12),
           color: 'inherit',
+          pointerEvents: 'none',
           ...__css,
         }}
       >
@@ -93,7 +101,7 @@ export const NavRailItem = forwardRef<HTMLDivElement, NavRailItemProps>(
       focusOpacity = 0.12,
       pressedOpacity = 0.12;
     const ripple = useRippleSurface({
-      rippleColor: `on.${color}`,
+      rippleColor: 'currentColor',
       onKeyDown,
       onPointerDown,
       baseOpacity,
@@ -107,13 +115,17 @@ export const NavRailItem = forwardRef<HTMLDivElement, NavRailItemProps>(
       const ret: SxStyleProp = {};
       const keys = Object.keys(ripple.__css);
       for (const key of keys) {
-        const newKey =
-          key === '&'
-            ? '& [data-nav-rail-item-indicator]'
-            : key.replace(
-                /(.+?)::(before|after)/g,
-                '$1 [data-nav-rail-item-indicator]::$2'
-              );
+        if (!key.startsWith('&')) {
+          ret['& [data-nav-rail-item-indicator]'] =
+            ret['& [data-nav-rail-item-indicator]'] || {};
+          ret['& [data-nav-rail-item-indicator]'][key] = ripple.__css[key];
+          continue;
+        }
+
+        const newKey = key.replace(
+          /(.+?)::(before|after)/g,
+          '$1 [data-nav-rail-item-indicator]::$2'
+        );
         ret[newKey] = ripple.__css[key];
       }
       return ret;
@@ -129,11 +141,13 @@ export const NavRailItem = forwardRef<HTMLDivElement, NavRailItemProps>(
         aria-pressed={selected}
         type="button"
         style={{ ...ripple.style, ...style }}
+        disabled={disabled}
         __css={{
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
-          color: `on.${color}`,
+          transition: `color .2s ${EASING_STANDARD}`,
+          color: selected ? `on.${color}` : 'on.surface-variant',
           '--indicator-background-color': selected
             ? get(theme, `colors.${color}`)
             : 'transparent',
@@ -145,8 +159,11 @@ export const NavRailItem = forwardRef<HTMLDivElement, NavRailItemProps>(
           margin: 0,
           padding: 0,
           px: rem(12),
+          minHeight: rem(60),
+          height: rem(60),
           cursor: 'pointer',
           textDecoration: 'none',
+          WebkitTapHighlightColor: 'transparent',
           ...rippleCss,
           ...__css,
         }}

package/src/NotchedOutline/styledComponents.ts

@@ -5,6 +5,7 @@ import { css } from '@styled-system/css';
 
 import { alpha } from '../color';
 import type { Theme } from '../theme';
+import { EASING_STANDARD } from '../motion';
 
 export const NOTCH_PADDING = 4;
 
@@ -105,7 +106,7 @@ export const InnerContainer = styled('div', {
       ['[data-notch-outline-item]']: {
         boxSizing: 'border-box',
         borderStyle,
-        transition: `border-color .15s cubic-bezier(.4,0,.2,1)`,
+        transition: `border-color .15s ${EASING_STANDARD}`,
         ...(forceActive ? focusStyle : inactiveStyle),
       },
       // notch items styles when input is hovered

package/src/ProgressSpinner/ProgressSpinner.tsx

@@ -5,6 +5,7 @@ import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
 export type ProgressSpinnerProps = BoxProps & {
   progress?: number;
@@ -105,8 +106,7 @@ export const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(
                       strokeDashoffset: '0px',
                     }
                   : {
-                      transition:
-                        'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                      transition: `stroke-dashoffset 300ms ${EASING_STANDARD} 0ms`,
                       strokeDasharray: circumference.toFixed(3),
                     }
               }

package/src/RadioButton/RadioButtonIcon.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { rem } from 'polished';
 
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
 export interface RadioButtonIconProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -34,8 +35,7 @@ export const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(
             borderRadius: 'full',
             width: '100%',
             height: '100%',
-            transition:
-              'transform .12s cubic-bezier(0,0,.2,1) 0ms,background-color .12s cubic-bezier(0,0,.2,1) 0ms',
+            transition: `transform .12s ${EASING_STANDARD} 0ms,background-color .12s ${EASING_STANDARD} 0ms`,
             transform: checked ? 'scale(1)' : 'scale(0)',
           }}
         />

package/src/Ripple/useRippleSurface.ts

@@ -65,15 +65,13 @@ export function useRippleSurface<T extends HTMLElement>(
 
   const css: SxStyleProp = useMemo(
     () => ({
-      '&': {
-        overflow: 'hidden',
-        position: 'relative',
-        cursor: 'pointer',
-        // fix overflow: hidden + borderRadius in Safari
-        // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
-        willChange: 'transform,opacity',
-        WebkitTapHighlightColor: 'transparent',
-      },
+      overflow: 'hidden',
+      position: 'relative',
+      cursor: 'pointer',
+      // fix overflow: hidden + borderRadius in Safari
+      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
+      willChange: 'transform,opacity',
+      WebkitTapHighlightColor: 'transparent',
       // ripple overlay
       '&::before': {
         backgroundColor: rippleColor,

package/src/Select/SelectIcon.tsx

@@ -7,6 +7,7 @@ import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { alpha } from '../color';
 import { PADDING_RIGHT_WITH_ICON } from '../TextField/consts';
+import { EASING_STANDARD } from '../motion';
 
 export type SelectIconProps = BoxProps<
   SVGElement,
@@ -32,8 +33,7 @@ export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
           color: open ? 'primary' : alpha('on.surface', 0.54),
           pointerEvents: 'none',
           transform: open ? 'rotate(180deg)' : undefined,
-          transition:
-            'transform .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1)',
+          transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`,
         }}
         {...otherProps}
       >

package/src/Snackbar/useSnackbarAnimation.ts

@@ -1,6 +1,7 @@
 import type { CSSProperties } from 'react';
 import { useEffect } from 'react';
 
+import { EASING_STANDARD } from '../motion';
 import { useStackItem } from './Stack';
 
 const TRANSITION_TIME = 150;
@@ -100,7 +101,7 @@ export const placements = {
 const commonStyle = { position: 'fixed', zIndex: 'snackbar' };
 
 function getTransition(timems: number) {
-  return `opacity ${timems}ms cubic-bezier(.4,0,.2,1),transform ${timems}ms cubic-bezier(.4,0,.2,1)`;
+  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;
 }
 
 const defaultAnimation = {

package/src/Switch/styledComponents.tsx

@@ -1,6 +1,7 @@
 import { rem } from 'polished';
 
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
 const BORDER_WIDTH = 2;
 const TRAIL_WIDTH = 52;
@@ -48,8 +49,7 @@ export const SwitchThumb = ({ checked = false, ...otherProps }) => (
         (TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2
       )})) translateY(-50%)`,
       WebkitTapHighlightColor: 'transparent',
-      transition:
-        'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1),height 90ms cubic-bezier(.4,0,.2,1),width 90ms cubic-bezier(.4,0,.2,1)',
+      transition: `background-color 90ms ${EASING_STANDARD},border-color 90ms ${EASING_STANDARD},transform 90ms ${EASING_STANDARD},height 90ms ${EASING_STANDARD},width 90ms ${EASING_STANDARD}`,
       '& > input': {
         width: THUMB_SIZE,
         height: THUMB_SIZE,

package/src/TabIndicator/TabIndicator.tsx

@@ -5,6 +5,7 @@ import { assignMultipleRefs } from '@basic-ui/core';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { useTabIndicatorContext } from './context';
+import { EASING_STANDARD } from '../motion';
 
 export interface TabIndicatorProps extends BoxProps {
   selected?: boolean;
@@ -59,7 +60,7 @@ export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
           transform: `scale(1)`,
           opacity: selected ? 1 : 0,
           transformOrigin: 'left',
-          transition: 'transform .25s cubic-bezier(.4,0,.2,1)',
+          transition: `transform .25s ${EASING_STANDARD}`,
           zIndex: 1,
         }}
         {...otherProps}

package/src/Text/Text.story.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Text } from './';
 import { Box } from '../Box';
 // import './styles.css';
@@ -6,7 +8,46 @@ export default {
   title: 'components/Text',
 };
 
+const loremIpsum =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit.' +
+  'Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque,' +
+  'possimus nihil molestias sapiente necessitatibus dolor saepe inventore,' +
+  'soluta id accusantium voluptas beatae.';
+
 const Example = () => {
+  const variantMapping = {
+    'display-large': 'Display large',
+    'display-medium': 'Display medium',
+    'display-small': 'Display small',
+    'headline-large': 'Headline large',
+    'headline-medium': 'Headline medium',
+    'headline-small': 'Headline small',
+    'title-large': 'Title large',
+    'title-medium': 'Title medium',
+    'title-small': 'Title small',
+    'label-large': 'Label large',
+    'label-medium': 'Label medium',
+    'label-small': 'Label small',
+    'body-large': `Body large. ${loremIpsum}`,
+    'body-medium': `Body medium. ${loremIpsum}`,
+    'body-small': `Body small. ${loremIpsum}`,
+  };
+  const variants = Object.keys(variantMapping).map((v) => (
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
+      {variantMapping[v]}
+    </Text>
+  ));
+
+  return (
+    <Box bg="surface" p="2">
+      {variants}
+    </Box>
+  );
+};
+
+export const AllVariants = () => <Example />;
+
+export const LegacyVariants = () => {
   const variantMapping = {
     h1: 'Heading 1',
     h2: 'Heading 2',
@@ -16,16 +57,14 @@ const Example = () => {
     h6: 'Heading 6',
     subtitle1: 'Subtitle 1',
     subtitle2: 'Subtitle 2',
-    body1:
-      'Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.',
-    body2:
-      'Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.',
+    body1: `Body 1. ${loremIpsum}`,
+    body2: `Body 2. ${loremIpsum}`,
     button: 'Button text',
     caption: 'Caption text',
     overline: 'Overline text',
   };
   const variants = Object.keys(variantMapping).map((v) => (
-    <Text key={v} variant={v} mb={2}>
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
       {variantMapping[v]}
     </Text>
   ));
@@ -36,5 +75,3 @@ const Example = () => {
     </Box>
   );
 };
-
-export const AllVariants = () => <Example />;

package/src/Text/Text.tsx

@@ -4,7 +4,10 @@ import * as React from 'react';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 
-export type TextVariants =
+/**
+ * @deprecated
+ */
+export type LegacyTextVariants =
   | 'h1'
   | 'h2'
   | 'h3'
@@ -19,8 +22,25 @@ export type TextVariants =
   | 'overline'
   | 'button';
 
+export type TextVariants =
+  | 'display-large'
+  | 'display-medium'
+  | 'display-small'
+  | 'headline-large'
+  | 'headline-medium'
+  | 'headline-small'
+  | 'title-large'
+  | 'title-medium'
+  | 'title-small'
+  | 'label-large'
+  | 'label-medium'
+  | 'label-small'
+  | 'body-large'
+  | 'body-medium'
+  | 'body-small';
+
 export interface TextProps extends BoxProps {
-  variant?: TextVariants;
+  variant?: LegacyTextVariants | TextVariants;
 }
 
 const mappings: { [key: string]: React.ElementType<any> } = {

package/src/TextField/Input.tsx

@@ -5,6 +5,7 @@ import { forwardRef } from 'react';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { alpha } from '../color';
+import { EASING_STANDARD } from '../motion';
 import {
   ICON_WIDTH,
   PADDING_LEFT_WITHOUT_ICON,
@@ -72,7 +73,7 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
             variant === 'filled'
               ? alpha('on.surface-variant', 0.87)
               : alpha('on.surface-variant', 0.6),
-          transition: `opacity .18s cubic-bezier(.4,0,.2,1)`,
+          transition: `opacity .18s ${EASING_STANDARD}`,
         },
         ':disabled::placeholder': {
           color: alpha('on.surface', 0.38),

package/src/ThemeExplorer/ThemeBuilder.story.tsx

@@ -68,6 +68,8 @@ const ThemeBuilder = () => {
         sx={{ gap: 3 }}
         flexDirection="column"
         width="300px"
+        position="fixed"
+        top="0"
       >
         <Box display="flex">
           <TextFieldColorPicker
@@ -131,31 +133,33 @@ const ThemeBuilder = () => {
           </Button>
         </Box>
       </Box>
-      <Box width="600px" mx="auto">
-        <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
-          <Box flex="1">
-            <Text variant="h5" as="h1" pb={'0.3em'}>
-              Light theme
-            </Text>
-            <ThemeColors scheme={scheme} />
+      <Box width="100%" pl="300px">
+        <Box width="600px" mx="auto">
+          <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
+            <Box flex="1">
+              <Text variant="h5" as="h1" pb={'0.3em'}>
+                Light theme
+              </Text>
+              <ThemeColors scheme={scheme} />
+            </Box>
+            <Box flex="1">
+              <Text variant="h5" as="h1" pb={'0.3em'}>
+                Dark theme
+              </Text>
+              <ThemeColors scheme={scheme.modes.dark} />
+            </Box>
           </Box>
-          <Box flex="1">
-            <Text variant="h5" as="h1" pb={'0.3em'}>
-              Dark theme
-            </Text>
-            <ThemeColors scheme={scheme.modes.dark} />
+          <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>
+          <Box as="pre" fontFamily="monospace" fontSize="12px">
+            {JSON.stringify({ colors: scheme }, null, 2)}
           </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>
-        <Box as="pre" fontFamily="monospace" fontSize="12px">
-          {JSON.stringify({ colors: scheme }, null, 2)}
         </Box>
       </Box>
     </Box>