Shadows

Add or remove shadows to elements with box-shadow utilities.

export const shadows = {
  none: 'none',
  dark: {
    sm: '0 2px 8px 0 rgba(0, 0, 0, 0.48), 0 1px 2px 0 rgba(0, 0, 0, 0.16)',
    md: '0 4px 16px 0 rgba(0, 0, 0, 0.48), 0 2px 4px 0 rgba(0, 0, 0, 0.16)',
    lg: '0 8px 32px 0 rgba(0, 0, 0, 0.48), 0 4px 8px 0 rgba(0, 0, 0, 0.16)'
  },
  light: {
    sm: '0 2px 8px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.08)',
    md: '0 4px 16px 0 rgba(0, 0, 0, 0.16), 0 2px 4px 0 rgba(0, 0, 0, 0.08)',
    lg: '0 8px 32px 0 rgba(0, 0, 0, 0.16), 0 4px 8px 0 rgba(0, 0, 0, 0.08)'
  }
}

EDITABLE EXAMPLE
copy
function Example() {
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });
  const backgroundColor = {
    dark: 'gray:80',
    light: 'white',
  }[colorMode];
  const color = colorStyle.text.primary;
  const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1);

  return (
    <Box backgroundColor={backgroundColor} m="-4x" p="8x">
      <Stack
        direction="row"
        spacing="6x"
        justifyContent="center"
      >
        {['thin', 'medium', 'thick'].map(key => (
          <Flex
            key={key}
            width={256}
            height={128}
            backgroundColor={backgroundColor}
            color={color}
            boxShadow={colorStyle.shadow[key]}
            align="center"
            justify="center"
          >
            <Text fontSize="md" lineHeight="md">
              {capitalizeFirstLetter(key)}
            </Text>
          </Flex>
        ))}
      </Stack>
    </Box>
  );
}

render(<Example />);
function Example() {
  const [colorMode] = useColorMode();
  const [colorStyle] = useColorStyle({ colorMode });
  const backgroundColor = {
    dark: 'gray:80',
    light: 'white',
  }[colorMode];
  const color = colorStyle.text.primary;
  const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1);

  return (
    <Box backgroundColor={backgroundColor} m="-4x" p="8x">
      <Stack
        direction="row"
        spacing="6x"
        justifyContent="center"
      >
        {['thin', 'medium', 'thick'].map(key => (
          <Flex
            key={key}
            width={256}
            height={128}
            backgroundColor={backgroundColor}
            color={color}
            boxShadow={colorStyle.shadow[key]}
            align="center"
            justify="center"
          >
            <Text fontSize="md" lineHeight="md">
              {capitalizeFirstLetter(key)}
            </Text>
          </Flex>
        ))}
      </Stack>
    </Box>
  );
}

render(<Example />);

Configuration Reference

Except for breakpoints, colors, and spacing, all keys in the theme object map to one of the core themes. All keys can be replaced or extended.

For more information, see the complete properties reference table.