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 />);