# `@volue/design-colors`

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

## Installation

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

## 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-colors');
console.log(tokens.core.solarMist60); // rgb(159, 227, 215)
console.log(tokens.background.neutral.default);
```

#### Flat tokens

Use `flat` entrypoint to consume flattened tokens:

```js
const tokens = require('@volue/design-colors/flat');
console.log(tokens.colorBlue100);
console.log(tokens.backgroundNeutralSubtle);
```

### JSON

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

```js
const tokens = require('@volue/design-colors/dist/index.json');
console.log(tokens['COLOR_WHITE']); // rgb(255, 255, 255)
```

### Sass

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

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

a {
  color: $color-solarMist100;
}
```

### CSS variables

CSS variables/custom properties are formatted in [kebab-case](https://en.wikipedia.org/wiki/Kebab_case).

```scss
@import '~@volue/design-colors/dist/index.custom-properties.css';

a {
  color: var(--color-solarMist100);
}
```