@carbon/colors

Colors for digital and software products using the Carbon Design System

Getting started

To install @carbon/colors in your project, you will need to 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.

📚 Examples

If you're looking for more examples on how to use @carbon/colors, we have some examples that you can check out:

• Basic

🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide ! 👀

📝 License

Licensed under the Apache 2.0 License.