# @volue/design-spacing

> Spacing primitives for Volue design primitives

Latest version **1.3.3** (published 2023-10-13) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @volue/design-spacing
pnpm add @volue/design-spacing
yarn add @volue/design-spacing
bun add @volue/design-spacing
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.3 |
| Published | 2023-10-13 |
| First published | 2021-03-21 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fima1, adka |

## Links

- npm: https://www.npmjs.com/package/@volue/design-spacing
- Repository: https://github.com/Volue/wave
- npm.io page: https://npm.io/package/@volue/design-spacing

## Recent versions

- 1.3.3 (latest) — 2023-10-13
- 1.3.3-next.3 (next) — 2023-10-04
- 1.3.3-next.2 — 2023-09-14
- 1.3.3-next.1 — 2023-07-31
- 1.3.3-next.0 — 2023-06-28
- 1.3.2 — 2023-06-15
- 1.3.2-next.0 — 2023-06-14
- 1.3.1 — 2023-05-16
- 1.3.1-next.3 — 2023-05-15
- 1.3.1-next.2 — 2023-05-05
- 1.3.1-next.1 — 2023-04-24
- 1.3.1-next.0 — 2023-04-03
- 1.3.0 — 2023-03-01
- 1.3.0-next.2 — 2023-02-15
- 1.3.0-next.1 — 2023-02-15
- … 45 more at https://npm.io/package/@volue/design-spacing/versions

## README

# `@volue/design-spacing`

> **Warning**
> This package has been deprecated in favor of [sizing tokens](../design-sizing).

Spacing primitives/tokens to be used across Volue's products

![Screenshot](https://user-images.githubusercontent.com/927591/73183450-16c2a980-411b-11ea-8a15-e12d5773bce7.png)

## Installation

```sh
npm install @volue/design-spacing --save
# or
yarn add @volue/design-spacing
```

## Usage

### JavaScript

In JavaScript, design token names are formatted in [lower camelCase](https://en.wikipedia.org/wiki/Camel_case).

```js
const tokens = require('@volue/design-spacing');
console.log(tokens.spacingXs); // 0.25rem
```

In JSON, design token names are formatted in [SNAKE_CASE](https://en.wikipedia.org/wiki/Snake_case).

```js
const tokens = require('@volue/design-spacing/dist/index.json');
console.log(tokens['SPACING_XS']); // 0.25rem
```

### Sass

Sass variables and map keys are formatted in [kebab-case](https://en.wikipedia.org/wiki/Kebab_case).

```scss
// Using variables
@import '~@volue/design-spacing/dist/index';

div {
  padding: $spacing-xs;
}
```

---
_Source: https://npm.io/package/@volue/design-spacing · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._