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

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 { black, blue, warmGray } from '@carbon/colors';

// CommonJS
const { black, blue, warmGray } = require('@carbon/colors');

Each color swatch is exported as a variable, and each color name is also exported as an object that can be called by specifying grade, for example:

black;
blue[50]; // Using the `blue` object.
warmGray100; // Using the `warmGray100` variable.

Sass

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

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

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-colors__blue-50;
$ibm-colors__warm-gray-100;

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

🙌 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.