import {Meta, Story} from '@storybook/addon-docs';
import Text from '../../components/text/Text';
import PageHeader from 'blocks/PageHeader';

export const Row = props => (
  <div
    style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      marginBottom: '50px',
    }}
  >
    {props.children}
  </div>
);

<Meta title="Foundation ✨/Shadows" />

<PageHeader type="foundation">Shadows</PageHeader>

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 <b>#323C45 (Gray Dark 900)</b> as the shadow color with <b>20%</b> 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).

<Row>
  <Text size="small">
    <Text weight="bold">Token:</Text>
    $shadowSmall
  </Text>
  <Text size="small">
    <Text weight="bold">CSS:</Text>0 2px 8px 0 rgba($gray-70, 0.2);
  </Text>
  <div className="sg-shadow" style={{width: 150, height: 150}} />
</Row>

### 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).

<Row>
  <Text size="small">
    <Text weight="bold">Token:</Text>
    $shadowMedium
  </Text>
  <Text size="small">
    <Text weight="bold">CSS:</Text>0 4px 16px 0 rgba($gray-70, 0.2);
  </Text>
  <div className="sg-shadow-medium" style={{width: 150, height: 150}} />
</Row>

### 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).

<Row>
  <Text size="small">
    <Text weight="bold">Token:</Text>
    $shadowLarge
  </Text>
  <Text size="small">
    <Text weight="bold">CSS:</Text>0 8px 32px 0 rgba($gray-70, 0.2);
  </Text>
  <div className="sg-shadow-large" style={{width: 150, height: 150}} />
</Row>
