@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
• CSS Variables
• JSON
• Less
• SCSS
• YAML

If you want more formats please open a pull request.

CommonJS

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

ES Modules

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

CSS Variables

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

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

JSON

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

Less

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

.myclass {
    color: @gray400;
}

SCSS

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

.myclass {
    color: $gray400;
}

YAML

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