import { Meta } from '@storybook/addon-docs/blocks';
import { SpacingBox } from './components/SpacingBox';

<Meta title="Foundations/Spacing" />

# Spacing

The Discourser Design System uses a consistent spacing scale based on an 8-point grid system. This creates visual rhythm and helps maintain consistent layouts across all components and screens.

## Spacing Scale

Our spacing scale ranges from `none` (0px) to `xxxl` (64px), with incremental steps that follow a logical progression.

<div style={{ marginTop: '32px', marginBottom: '48px' }}>
  <SpacingBox name="none" value="0px" />
  <SpacingBox name="xxs"  value="2px" />
  <SpacingBox name="xs"   value="4px" />
  <SpacingBox name="sm"   value="8px" />
  <SpacingBox name="md"   value="16px" />
  <SpacingBox name="lg"   value="24px" />
  <SpacingBox name="xl"   value="32px" />
  <SpacingBox name="xxl"  value="48px" />
  <SpacingBox name="xxxl" value="64px" />
</div>

---

## Spacing Reference Table

| Token | Value | Pixels | Use Case |
|-------|-------|--------|----------|
| `none` | 0px | 0px | Reset spacing, remove gaps |
| `xxs` | 2px | 2px | Minimal gaps, fine-tuning |
| `xs` | 4px | 4px | Tight spacing within components |
| `sm` | 8px | 8px | Component internal spacing |
| `md` | 16px | 16px | Default spacing, component gaps |
| `lg` | 24px | 24px | Section spacing, card padding |
| `xl` | 32px | 32px | Large section breaks |
| `xxl` | 48px | 48px | Major section dividers |
| `xxxl` | 64px | 64px | Page-level spacing |

---

## Usage Guidelines

### Common Patterns

**Component Internal Spacing**
- Icon-to-text gap: `xs` (4px) or `sm` (8px)
- Button padding: `sm` (8px) vertical, `md` (16px) horizontal
- Input padding: `md` (16px)

**Component Gaps**
- Between related items: `sm` (8px) or `md` (16px)
- Between form fields: `md` (16px) or `lg` (24px)
- Between sections: `lg` (24px) to `xxl` (48px)

**Layout Spacing**
- Card padding: `lg` (24px) or `xl` (32px)
- Section margins: `xl` (32px) or `xxl` (48px)
- Page margins: `xxl` (48px) or `xxxl` (64px)

### The 8-Point Grid

Most of our spacing values are multiples of 8px, which:
- Creates visual consistency
- Simplifies spacing decisions
- Works well with common screen sizes
- Aligns with Material Design principles

The exceptions (`xxs: 2px`) are provided for fine-tuning and edge cases.

### Responsive Spacing

Consider adjusting spacing at different breakpoints:

```tsx
import { css } from 'styled-system/css';

const containerStyle = css({
  padding: {
    base: 'md',  // 16px on mobile
    md: 'lg',    // 24px on tablet
    lg: 'xl'     // 32px on desktop
  }
});
```

### Negative Space

Empty space is just as important as filled space. Use larger spacing values to:
- Create visual breathing room
- Establish content hierarchy
- Guide user attention
- Improve scannability

---

## Example Usage

### Padding

```tsx
import { css } from 'styled-system/css';

// Card padding
const cardStyle = css({
  padding: 'lg'  // 24px all sides
});

// Asymmetric padding
const headerStyle = css({
  paddingX: 'md',  // 16px horizontal
  paddingY: 'sm'   // 8px vertical
});
```

### Margins

```tsx
import { css } from 'styled-system/css';

// Section spacing
const sectionStyle = css({
  marginBottom: 'xxl'  // 48px bottom margin
});

// Component gap
const stackStyle = css({
  display: 'flex',
  flexDirection: 'column',
  gap: 'md'  // 16px between children
});
```

### Gap (Flexbox/Grid)

```tsx
import { css } from 'styled-system/css';

// Grid layout
const gridStyle = css({
  display: 'grid',
  gridTemplateColumns: 'repeat(3, 1fr)',
  gap: 'lg'  // 24px between grid items
});

// Flex layout
const flexStyle = css({
  display: 'flex',
  gap: 'sm'  // 8px between flex items
});
```

---

## Visual Examples

### Compact Layout (sm spacing)

<div style={{
  display: 'flex',
  flexDirection: 'column',
  gap: '8px',
  padding: '16px',
  backgroundColor: '#f5f5f5',
  borderRadius: '8px',
  marginBottom: '24px'
}}>
  <div style={{ padding: '12px', backgroundColor: '#4C662B', color: 'white', borderRadius: '4px' }}>
    Item 1 (gap: 8px)
  </div>
  <div style={{ padding: '12px', backgroundColor: '#4C662B', color: 'white', borderRadius: '4px' }}>
    Item 2
  </div>
  <div style={{ padding: '12px', backgroundColor: '#4C662B', color: 'white', borderRadius: '4px' }}>
    Item 3
  </div>
</div>

### Comfortable Layout (md spacing)

<div style={{
  display: 'flex',
  flexDirection: 'column',
  gap: '16px',
  padding: '24px',
  backgroundColor: '#f5f5f5',
  borderRadius: '8px',
  marginBottom: '24px'
}}>
  <div style={{ padding: '16px', backgroundColor: '#4C662B', color: 'white', borderRadius: '4px' }}>
    Item 1 (gap: 16px)
  </div>
  <div style={{ padding: '16px', backgroundColor: '#4C662B', color: 'white', borderRadius: '4px' }}>
    Item 2
  </div>
  <div style={{ padding: '16px', backgroundColor: '#4C662B', color: 'white', borderRadius: '4px' }}>
    Item 3
  </div>
</div>

### Spacious Layout (lg spacing)

<div style={{
  display: 'flex',
  flexDirection: 'column',
  gap: '24px',
  padding: '32px',
  backgroundColor: '#f5f5f5',
  borderRadius: '8px'
}}>
  <div style={{ padding: '20px', backgroundColor: '#4C662B', color: 'white', borderRadius: '4px' }}>
    Item 1 (gap: 24px)
  </div>
  <div style={{ padding: '20px', backgroundColor: '#4C662B', color: 'white', borderRadius: '4px' }}>
    Item 2
  </div>
  <div style={{ padding: '20px', backgroundColor: '#4C662B', color: 'white', borderRadius: '4px' }}>
    Item 3
  </div>
</div>