Spacing
Padding, margins and white-space between elements.
Overview
Spacing is commonly referred to as white space. It is the space between elements and defines the value for common properties such as padding and margin.
Scale
Nebula spacing is based on a 4px scale. This means each token is a multiple of 4. A pixel value can easily be converted to it's token form by dividing by 4. e.g. A 32px space, would be space.8.
Additionally we also include some "semantic" values for specific cases - between form fields for example.
Theme tokens
| Token | Default Value |
|---|---|
| space.1 | 0.4rem |
| space.2 | 0.8rem |
| space.3 | 1.2rem |
| space.4 | 1.6rem |
| space.5 | 2rem |
| space.6 | 2.4rem |
| space.7 | 2.8rem |
| space.8 | 3.2rem |
| space.9 | 3.6rem |
| space.10 | 4.0rem |
| space.11 | 4.4rem |
| space.12 | 4.8rem |
| space.betweenFormFields | 1.6rem |
| space.betweenButtons | 0.8rem |