# Style Tokens

Import the main SCSS to access all token classes:

```scss
@use '@reuters-graphics/graphics-components/scss/main';
```

## Spacing

Static spacing uses the Tailwind scale: 1 unit = 0.25rem. So `.m-4` = 1rem, `.m-8` = 2rem, `.my-6` = 1.5rem block margin.

### Static margin

| Prefix | Property |
|--------|---------|
| `m-{n}` | margin (all sides) |
| `mt-{n}` | margin-block-start (top) |
| `mb-{n}` | margin-block-end (bottom) |
| `ml-{n}` | margin-inline-start (left) |
| `mr-{n}` | margin-inline-end (right) |
| `mx-{n}` | margin-inline (left + right) |
| `my-{n}` | margin-block (top + bottom) |

Available levels and their values:

| Level | Value |
|-------|-------|
| `0` | `0` |
| `0\.5` | `0.125rem` |
| `1` | `0.25rem` |
| `1\.5` | `0.375rem` |
| `2` | `0.5rem` |
| `2\.5` | `0.625rem` |
| `3` | `0.75rem` |
| `3\.5` | `0.875rem` |
| `4` | `1rem` |
| `5` | `1.25rem` |
| `6` | `1.5rem` |
| `7` | `1.75rem` |
| `8` | `2rem` |
| `9` | `2.25rem` |
| `10` | `2.5rem` |
| `11` | `2.75rem` |
| `12` | `3rem` |
| `14` | `3.5rem` |
| `16` | `4rem` |
| `20` | `5rem` |
| `24` | `6rem` |
| `28` | `7rem` |
| `32` | `8rem` |
| `36` | `9rem` |
| `40` | `10rem` |
| `44` | `11rem` |
| `48` | `12rem` |
| `52` | `13rem` |
| `56` | `14rem` |
| `60` | `15rem` |
| `64` | `16rem` |
| `72` | `18rem` |
| `80` | `20rem` |
| `96` | `24rem` |

### Static padding

Same scale as margin. Prefixes:

| Prefix | Property |
|--------|---------|
| `p-{n}` | padding (all sides) |
| `pt-{n}` | padding-block-start (top) |
| `pb-{n}` | padding-block-end (bottom) |
| `pl-{n}` | padding-inline-start (left) |
| `pr-{n}` | padding-inline-end (right) |
| `px-{n}` | padding-inline (left + right) |
| `py-{n}` | padding-block (top + bottom) |

### Fluid margin

Fluid values scale with viewport width. Use SCSS `@extend` to apply: `@extend %fmy-4;`. Direct utility classes are also available for levels 0–9.

| Class | Properties |
|-------|------------|
| `.fm-1` | `margin: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);` |
| `.fm-2` | `margin: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);` |
| `.fm-3` | `margin: clamp(0.88rem, 0.83rem + 0.21vw, 1rem);` |
| `.fm-4` | `margin: clamp(1.13rem, 1.06rem + 0.31vw, 1.31rem);` |
| `.fm-5` | `margin: clamp(1.69rem, 1.58rem + 0.52vw, 2rem);` |
| `.fm-6` | `margin: clamp(2.25rem, 2.13rem + 0.63vw, 2.63rem);` |
| `.fm-7` | `margin: clamp(3.38rem, 3.19rem + 0.94vw, 3.94rem);` |
| `.fm-8` | `margin: clamp(4.5rem, 4.25rem + 1.25vw, 5.25rem);` |
| `.fm-9` | `margin: clamp(6.75rem, 6.38rem + 1.88vw, 7.88rem);` |

### Fluid padding

Same scale as fluid margin. Prefix `fp` instead of `fm`.

| Class | Properties |
|-------|------------|
| `.fp-1` | `padding: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);` |
| `.fp-2` | `padding: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);` |
| `.fp-3` | `padding: clamp(0.88rem, 0.83rem + 0.21vw, 1rem);` |
| `.fp-4` | `padding: clamp(1.13rem, 1.06rem + 0.31vw, 1.31rem);` |
| `.fp-5` | `padding: clamp(1.69rem, 1.58rem + 0.52vw, 2rem);` |
| `.fp-6` | `padding: clamp(2.25rem, 2.13rem + 0.63vw, 2.63rem);` |
| `.fp-7` | `padding: clamp(3.38rem, 3.19rem + 0.94vw, 3.94rem);` |
| `.fp-8` | `padding: clamp(4.5rem, 4.25rem + 1.25vw, 5.25rem);` |
| `.fp-9` | `padding: clamp(6.75rem, 6.38rem + 1.88vw, 7.88rem);` |

## Typography

### Font size

| Class | Properties |
|-------|------------|
| `.text-xxs` | `font-size: var(--theme-font-size-xxs);` |
| `.text-xs` | `font-size: var(--theme-font-size-xs);` |
| `.text-sm` | `font-size: var(--theme-font-size-sm);` |
| `.text-base` | `font-size: var(--theme-font-size-base);` |
| `.text-lg` | `font-size: var(--theme-font-size-lg);` |
| `.text-xl` | `font-size: var(--theme-font-size-xl);` |
| `.text-2xl` | `font-size: var(--theme-font-size-2xl);` |
| `.text-3xl` | `font-size: var(--theme-font-size-3xl);` |
| `.text-4xl` | `font-size: var(--theme-font-size-4xl);` |
| `.text-5xl` | `font-size: var(--theme-font-size-5xl);` |
| `.text-6xl` | `font-size: var(--theme-font-size-6xl);` |

### Font weight

| Class | Properties |
|-------|------------|
| `.font-thin` | `font-weight: 100;` |
| `.font-extralight` | `font-weight: 200;` |
| `.font-light` | `font-weight: 300;` |
| `.font-regular` | `font-weight: 400;` |
| `.font-medium` | `font-weight: 500;` |
| `.font-semibold` | `font-weight: 600;` |
| `.font-bold` | `font-weight: 700;` |
| `.font-extrabold` | `font-weight: 800;` |
| `.font-black` | `font-weight: 900;` |

### Line height

| Class | Properties |
|-------|------------|
| `.leading-tighter` | `line-height: 1.15;` |
| `.leading-tight` | `line-height: 1.3;` |
| `.leading-normal` | `line-height: 1.5;` |
| `.leading-loose` | `line-height: 1.7;` |
| `.leading-looser` | `line-height: 1.9;` |