Skip to main content

Shadows

The design spec includes shadows. Light mode includes 4 shadows, and dark mode includes 1 shadow. For simplicity sake, if your component uses shadow #3, in dark mode it will automatically be mapped to the single available shadow.

Using stitches, a short-hand util bs is exposed for boxShadow.

import { styled } from '@streamelements/frontend-ui';

const Box = styled('div', {
  boxShadow: '$2',
});

<Box />;

Variants​

boxShadow: '$1'
boxShadow: '$2'
boxShadow: '$3'
boxShadow: '$4'

All variants will automatically be translated to a single variant in dark mode.

Dark mode​

boxShadow: '$1'