# `@volue/design-sizing`

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

## Installation

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

## Usage

### JavaScript

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

```js
const tokens = require('@volue/design-sizing');
console.log(tokens.spacing.xs); // 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-sizing/dist/index.json');
console.log(tokens['SIZE_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-sizing/dist/index';

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