import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
import { tokens } from '../cunningham-tokens';

<Meta title="Getting Started/Spacings" />

# Spacings

Cunningham comes with an existing toolkit to deal with spacings. 📏

Here are the existing spacings:

<Canvas isColumn={true} withSource="none">
  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
    {Object.keys(tokens.theme.spacings).map(key => (
      <div key={key} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
        <div className="fw-bold clr-secondary-text" style={{ width: '30px' }}>-{key}</div>
        <div className="fw-medium fs-m clr-secondary-text" style={{ width: '100px' }}>{tokens.theme.spacings[key]}</div>
        <div className={"bg-danger-100 pl-" + key} style={{ height: '48px', width: 0 }}></div>
      </div>
    ))}
  </div>
</Canvas>

Those can be used both with paddings and margins.

## Margins

You can use the following classes to add margins to your elements:

| Class        | Equivalent                 |
|--------------|----------------------------|
| m-{spacing}  | `margin: {spacing}`        |
| mt-{spacing} | `margin-top: {spacing}`    |
| mr-{spacing} | `margin-right: {spacing}`  |
| mb-{spacing} | `margin-bottom: {spacing}` |
| ml-{spacing} | `margin-left: {spacing}`   |

## Paddings

You can use the following classes to add paddings to your elements:

| Class        | Equivalent                 |
|--------------|----------------------------|
| p-{spacing}  | `padding: {spacing}`        |
| pt-{spacing} | `padding-top: {spacing}`    |
| pr-{spacing} | `padding-right: {spacing}`  |
| pb-{spacing} | `padding-bottom: {spacing}` |
| pl-{spacing} | `padding-left: {spacing}`   |


## Example

<Canvas isColumn={true} withSource="open">
  <div className="bg-danger-100">
    <div className="bg-primary-500 clr-primary-text fw-medium p-t mb-l">
      Tiny padding + Large margin bottom
    </div>
    <div className="bg-secondary-500 clr-secondary-text fw-medium p-l ml-b">
      Large padding + Base margin left
    </div>
</div>
</Canvas>