bc15ced92f
Previously we were using .stories.mdx extension for docs but now .mdx is the most recommend extension according to official Storybook 7 documentation.
59 lines
2.0 KiB
Plaintext
59 lines
2.0 KiB
Plaintext
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 sourceState="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 sourceState="shown">
|
|
<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>
|