Package Exports

@carbon/colors

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@carbon/colors) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`@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!