# @spscommerce/ds-colors

> Design approved colors distributed in various formats

```
npm install --save @spscommerce/ds-colors

# OR

yarn add @spscommerce/ds-colors
```

Now choose a format that you'd like to use. The following formats are available:

* [CommonJS](#commonjs)
* [CSS Variables](#css-variables)
* [JSON](#json)
* [Less](#less)
* [SCSS](#scss)
* [YAML](#yaml)

If you want more formats please open a pull request.

### CommonJS

```js
const colors, { red100 } = require('@spscommerce/ds-colors');
console.log(colors.red100); // > #ffeaec
console.log(red100); // > #ffeaec
```

### ES Modules

```js
import { colors } from '@spscommerce/ds-colors';
console.log(colors.red100); // > #ffeaec
```

### CSS Variables

```css
@import 'path/to/node_modules/@spscommerce/ds-colors/colors.css';

.myclass {
    color: var(--gray400);
}
```

### JSON

```bash
ln -s path/to/node_modules/@spscommerce/ds-colors/colors.json colors.json
```

### Less

```less
@import 'path/to/node_modules/@spscommerce/ds-colors/colors.less';

.myclass {
    color: @gray400;
}
```

### SCSS

```scss
@import '@spscommerce/ds-colors/colors.scss';

.myclass {
    color: $gray400;
}
```

### YAML

```bash
ln -s path/to/node_modules/@spscommerce/ds-colors/colors.yml colors.yml
```