Shadows
Cherry offers several shadow variations that allow you to create elevations and add depth to your interfaces. Shadows play a crucial role in enhancing the visual hierarchy of elements, providing a sense of depth and realism.
There are two sets of shadows, one for dark mode and one for light mode.
| Level | Value |
|---|---|
| xs | 0px 4px 4px 0px rgba(18,18,18,0.04), 0px 1px 3px 0px rgba(39,41,45,0.02) |
| sm | 0px 4px 4px 0px rgba(18,18,18,0.08), 0px 1px 3px 0px rgba(39,41,45,0.04) |
| md | 0px 8px 8px 0px rgba(18,18,18,0.16), 0px 2px 3px 0px rgba(39,41,45,0.06) |
| lg | 0px 16px 24px 0px rgba(18,18,18,0.20), 0px 2px 3px 0px rgba(39,41,45,0.08) |
| xl | 0px 24px 32px 0px rgba(18,18,18,0.24), 0px 2px 3px 0px rgba(39,41,45,0.12) |
Usage
Shadows live on the theme object under theme.shadows, keyed by level (xs, sm, md, lg, xl). Reference them in your styled components and the matching set is applied automatically in light and dark mode:
import styled from "styled-components";
const Card = styled.div`
box-shadow: ${({ theme }) => theme.shadows.md};
`;The raw values are also exported as shadows and shadowsDark from cherry-styled-components if you need them outside the theme.
Shadow tokens live on the theme object; see Theme for setup.
Shadows can be found in the Figma Template in the Elevation section of the Foundations page.