@carbon/colors

@carbon/colors

Colors for digital and software products using the Carbon Design System.

Getting Started

Run the following command using npm:

npm install -S @carbon/colors

If you prefer Yarn, use the following command instead:

yarn add @carbon/colors

Usage

You can use the @carbon/colors module in your JavaScript, in addition to your Sass.

JavaScript

For JavaScript, you can import and use this module by doing the following in your code:

// ESM
import { colors, tokens } from '@carbon/colors';

// CommonJS
const { colors, tokens } = require('@carbon/colors');

Each color swatch is exported on the colors object and can be called by specifying the name and grade, for example:

colors.black;
colors.blue50;
colors.warmGray100;

Similary, you can access tokens on the tokens object, for example:

tokens.brand01;
tokens.activePrimary;

Sass

In Sass, you can import the files individual by doing:

@import '@carbon/colors/scss/colors';
@import '@carbon/colors/scss/tokens';

This will make all the colors and token variables available to you in your file. They are named with the following structure: $ibm-color__swatch--grade, for example:

$ibm-color__blue--50;
$ibm-color__warm-gray--100;

Similarly, you can access the tokens variables after including them.

🤲 Contributing

To learn more about how to contribute, look here!