import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import imgSpacing from './images/spacing-system.jpg';
import imgSpacingInset from './images/spacing-inset.jpg';
import imgSpacingInline from './images/spacing-inline.jpg';
import imgSpacingStack from './images/spacing-stack.jpg';
import imgSpacingOverview from './images/spacing-overview.jpg';
import imgSpacingStretchInset from './images/spacing-stretch-inset.jpg';
import imgSpacingSquishInset from './images/spacing-squish-inset.jpg';

<Meta title='1.Docs|06-Spacing System'/>

# Spacing System
CSS use properties like margin, padding and absolute positioning to separate objects. We think that Spacing should have an own concept like the color section. Sometimes you need a padding for a box, a space to the item left or a distance to the next row. So we should separate this into different categories.

<img src={imgSpacingOverview} />

**Separation in these categories:**
* Inset
* Inline
* Stack
* Squish Inset
* Stretch Inset

## Scaling
It always helps to use a value system for the creation of spacing. So we use a non-linear System. Starting from the base, we’ll go in both directions to stops smaller (16, 8, 4, 2) and larger (16, 32, 64, and… that’s about it) on the scale.
<img src={imgSpacing} />

## Categories in Detail

### Inset

| Variable  | Default Value
| ------------- |:-------------:
| `$spacing-inset-xs` | 4px
| `$spacing-inset-s` | 8px
| `$spacing-inset-m` | 16px
| `$spacing-inset-l` | 32px
| `$spacing-inset-xl` | 64px

A inset spacing offers indent spacing like boxes or a photo frame on a wall.
<img src={imgSpacingInset} />
<br/>

### Inline
We put elements in a row like a list of chips. So wee need a space between these elements.
<img src={imgSpacingInline} />
<br/>

### Stack
In the general case you scroll vertically through the user interface. So we stack elements like a heading on a data table.
<img src={imgSpacingStack} />
<br/>

### Squish Inset
The squish inset reduces the space top and bottom. It is mostly used in **buttons and listitems.**
<img src={imgSpacingSquishInset} />
<br/>

### Stretch Inset
The stretch inset reduces the space left and right. It is mostly used in **textboxes, textareas and other form elements.**
<img src={imgSpacingStretchInset} />

## Technical Quickview
You can use each value in your component You can see an example of the inline concept here:

`01-settings/_settings.spacing.scss`

```scss
$spacing-inline-xxs: 2px;
$spacing-inline-xs: 4px;
$spacing-inline-s: 8px;
$spacing-inline-m: 16px;
$spacing-inline-l: 32px;
$spacing-inline-xl: 64px;
```
