@spscommerce/ds-colors

@spscommerce/ds-colors

Design approved colors distributed in various formats

I want to use existing colors, see available colors, or add or change colors.

Using Existing Colors

Ensure you have access to and have configured our private jFrog Artifactory npm registry.

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

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';

.myclass {
    color: @gray400;
}

SCSS

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

.myclass {
    color: $gray400;
}

YAML

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

View this package on jFrog Artifactory on jFrog Artifactory

Available colors

white

black

gray100

gray200

gray300

gray400

gray500

gray600

blue000

blue100

blue200

blue300

orange100

orange200

orange300

yellow100

yellow200

yellow300

purple100

purple200

purple300

green100

green200

green300

red100

red200

red300