> ## Documentation Index
> Fetch the complete documentation index at: https://www.propeldata.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Spacing

> Control spacing between components.

<div />

Spacing values are derived from a 9-step scale, which is used for props such as margin and padding.

<div style={{ display: 'flex', alignItems: 'flex-end', gap: '4px' }}>
  <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, alignItems: 'center', gap: '16px' }}>
    <div style={{ width: "100%", height: '4px', backgroundColor: '#E4E4E7', borderRadius: '4px' }} />

    <div style={{ fontSize: '12px', color: '#52525B' }}>1</div>
  </div>

  <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, alignItems: 'center', gap: '16px' }}>
    <div style={{ width: "100%", height: '8px', backgroundColor: '#E4E4E7', borderRadius: '4px' }} />

    <div style={{ fontSize: '12px', color: '#52525B' }}>2</div>
  </div>

  <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, alignItems: 'center', gap: '16px' }}>
    <div style={{ width: "100%", height: '12px', backgroundColor: '#E4E4E7', borderRadius: '4px' }} />

    <div style={{ fontSize: '12px', color: '#52525B' }}>3</div>
  </div>

  <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, alignItems: 'center', gap: '16px' }}>
    <div style={{ width: "100%", height: '16px', backgroundColor: '#E4E4E7', borderRadius: '4px' }} />

    <div style={{ fontSize: '12px', color: '#52525B' }}>4</div>
  </div>

  <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, alignItems: 'center', gap: '16px' }}>
    <div style={{ width: "100%", height: '24px', backgroundColor: '#E4E4E7', borderRadius: '4px' }} />

    <div style={{ fontSize: '12px', color: '#52525B' }}>5</div>
  </div>

  <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, alignItems: 'center', gap: '16px' }}>
    <div style={{ width: "100%", height: '32px', backgroundColor: '#E4E4E7', borderRadius: '4px' }} />

    <div style={{ fontSize: '12px', color: '#52525B' }}>6</div>
  </div>

  <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, alignItems: 'center', gap: '16px' }}>
    <div style={{ width: "100%", height: '40px', backgroundColor: '#E4E4E7', borderRadius: '4px' }} />

    <div style={{ fontSize: '12px', color: '#52525B' }}>7</div>
  </div>

  <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, alignItems: 'center', gap: '16px' }}>
    <div style={{ width: "100%", height: '48px', backgroundColor: '#E4E4E7', borderRadius: '4px' }} />

    <div style={{ fontSize: '12px', color: '#52525B' }}>8</div>
  </div>

  <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, alignItems: 'center', gap: '16px' }}>
    <div style={{ width: "100%", height: '64px', backgroundColor: '#E4E4E7', borderRadius: '4px' }} />

    <div style={{ fontSize: '12px', color: '#52525B' }}>9</div>
  </div>
</div>

These props accept numeric strings from `"1"` to `"9"`, which correspond to the steps in the scale below.

| **Step** | **Base value** |
| -------- | -------------- |
| 1        | `4px`          |
| 2        | `8px`          |
| 3        | `12px`         |
| 4        | `16px`         |
| 5        | `24px`         |
| 6        | `32px`         |
| 7        | `40px`         |
| 8        | `48px`         |
| 9        | `64px`         |

### Space scale tokens

Space scale tokens can also be accessed using CSS variables. You can use these tokens to style your custom components, ensuring they are consistent with the rest of your theme.

```css theme={"system"}
/* Space scale */
var(--space-1);
var(--space-2);
var(--space-3);
var(--space-4);
var(--space-5);
var(--space-6);
var(--space-7);
var(--space-8);
var(--space-9);
```

## Scaling

Values that affect layout (spacing, font size, line height) scale relatively to each other based on the `scaling` value defined in your Theme. This setting allows you to scale the UI density uniformly across your entire application.

```html theme={"system"}
<ThemeProvider
  scaling="100%"
>
  <TimeSeries
		variant="bar"
    query={{
      accessToken: "<PROPEL_ACCESS_TOKEN>",
      metric: {
	      count: {
	        dataPool: { name: "TacoSoft Demo Data" }
	      },
	    }
      timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
      granularity: "DAY",
    }}
  />
</ThemeProvider>
```

### Scaling factor

The scaling factor token can be accessed using the `--propel-scaling` CSS variable. If you need to use different scaling factors in your app, you can use this token in your custom styles, ensuring they are consistent with the rest of your theme.

```css theme={"system"}
.MyCustomComponent {
  width: calc(200px * var(--propel-scaling));
}
```