import {Meta, Story} from '@storybook/addon-docs';
import Text from '../../components/text/Text';
import PageHeader from 'blocks/PageHeader';
export const Row = props => (
{props.children}
);
Shadows
Most of our components use color to differentiate themselves from the rest of the interface. Shadows are reserved for components that appear elevated on the interface (e.g., dropdown or bubble).
### Color
We use #323C45 (Gray Dark 900) as the shadow color with 20% opacity.
## Elevations
Elevation is a visual effect that makes an object appear to float above a surface. To highlight the differences in elevation between two surfaces, we use shadow effect (using the offset of the z-axis and shadow blur).
### Small
Components that are higher to draw a little more attention to themselves, but not much. They may have some interaction inside of it (e.g., dropdown, toast).
Token:
$shadowSmall
CSS:0 2px 8px 0 rgba($gray-70, 0.2);
### Medium
Components that are intended to be engaged themselves. They are slightly higher to communicate the affordance of interaction (e.g., notification, bubble, user menu).
Token:
$shadowMedium
CSS:0 4px 16px 0 rgba($gray-70, 0.2);
### Large
Components that are highest to draw the most attention to themselves. They usually have some interaction inside of it (e.g., dialog, toplayer, bottom sheet drawer).
Token:
$shadowLarge
CSS:0 8px 32px 0 rgba($gray-70, 0.2);