Skip to content

Latest commit

 

History

History
306 lines (293 loc) · 9.6 KB

sass.md

File metadata and controls

306 lines (293 loc) · 9.6 KB
Raw

Sass

Sass documentation for @carbon/colors

Usage

The @carbon/colors package enables you to access colors from the IBM Design Language in Sass. You can access a color directly from the package by writing the following:

@use '@carbon/colors';

.selector {
  background: colors.$blue-50;
}

For a full list of colors exported, refer to the exports section below.

In addition to individual colors, you can also access a Map of all colors from the IBM Design Language using the $colors variable.

@use '@carbon/colors';

@each $swatch, $grades in colors.$colors {
  @each $grade in $grades {
    //
  }
}

Each key in the $colors map is the name of a group of colors, also known as a swatch. The value of each entry is a Map where the keys are the color grade and the values are the hex codes for the color at that grade. For example:

$colors: (
  blue: (
    10: #edf5ff,
    20: #d0e2ff,
    30: #a6c8ff,
    40: #78a9ff,
    50: #4589ff,
    60: #0f62fe,
    70: #0043ce,
    80: #002d9c,
    90: #001d6c,
    100: #001141,
  ),
);

API

Name Type
$colors Map
$black Color
$white Color
$black-100 Color
$blue-10 Color
$blue-20 Color
$blue-30 Color
$blue-40 Color
$blue-50 Color
$blue-60 Color
$blue-70 Color
$blue-80 Color
$blue-90 Color
$blue-100 Color
$cool-gray-10 Color
$cool-gray-20 Color
$cool-gray-30 Color
$cool-gray-40 Color
$cool-gray-50 Color
$cool-gray-60 Color
$cool-gray-70 Color
$cool-gray-80 Color
$cool-gray-90 Color
$cool-gray-100 Color
$cyan-10 Color
$cyan-20 Color
$cyan-30 Color
$cyan-40 Color
$cyan-50 Color
$cyan-60 Color
$cyan-70 Color
$cyan-80 Color
$cyan-90 Color
$cyan-100 Color
$gray-10 Color
$gray-20 Color
$gray-30 Color
$gray-40 Color
$gray-50 Color
$gray-60 Color
$gray-70 Color
$gray-80 Color
$gray-90 Color
$gray-100 Color
$green-10 Color
$green-20 Color
$green-30 Color
$green-40 Color
$green-50 Color
$green-60 Color
$green-70 Color
$green-80 Color
$green-90 Color
$green-100 Color
$magenta-10 Color
$magenta-20 Color
$magenta-30 Color
$magenta-40 Color
$magenta-50 Color
$magenta-60 Color
$magenta-70 Color
$magenta-80 Color
$magenta-90 Color
$magenta-100 Color
$orange-10 Color
$orange-20 Color
$orange-30 Color
$orange-40 Color
$orange-50 Color
$orange-60 Color
$orange-70 Color
$orange-80 Color
$orange-90 Color
$orange-100 Color
$purple-10 Color
$purple-20 Color
$purple-30 Color
$purple-40 Color
$purple-50 Color
$purple-60 Color
$purple-70 Color
$purple-80 Color
$purple-90 Color
$purple-100 Color
$red-10 Color
$red-20 Color
$red-30 Color
$red-40 Color
$red-50 Color
$red-60 Color
$red-70 Color
$red-80 Color
$red-90 Color
$red-100 Color
$teal-10 Color
$teal-20 Color
$teal-30 Color
$teal-40 Color
$teal-50 Color
$teal-60 Color
$teal-70 Color
$teal-80 Color
$teal-90 Color
$teal-100 Color
$warm-gray-10 Color
$warm-gray-20 Color
$warm-gray-30 Color
$warm-gray-40 Color
$warm-gray-50 Color
$warm-gray-60 Color
$warm-gray-70 Color
$warm-gray-80 Color
$warm-gray-90 Color
$warm-gray-100 Color
$white-0 Color
$yellow-10 Color
$yellow-20 Color
$yellow-30 Color
$yellow-40 Color
$yellow-50 Color
$yellow-60 Color
$yellow-70 Color
$yellow-80 Color
$yellow-90 Color
$yellow-100 Color
$white-hover Color
$black-hover Color
$blue-10-hover Color
$blue-20-hover Color
$blue-30-hover Color
$blue-40-hover Color
$blue-50-hover Color
$blue-60-hover Color
$blue-70-hover Color
$blue-80-hover Color
$blue-90-hover Color
$blue-100-hover Color
$cool-gray-10-hover Color
$cool-gray-20-hover Color
$cool-gray-30-hover Color
$cool-gray-40-hover Color
$cool-gray-50-hover Color
$cool-gray-60-hover Color
$cool-gray-70-hover Color
$cool-gray-80-hover Color
$cool-gray-90-hover Color
$cool-gray-100-hover Color
$cyan-10-hover Color
$cyan-20-hover Color
$cyan-30-hover Color
$cyan-40-hover Color
$cyan-50-hover Color
$cyan-60-hover Color
$cyan-70-hover Color
$cyan-80-hover Color
$cyan-90-hover Color
$cyan-100-hover Color
$gray-10-hover Color
$gray-20-hover Color
$gray-30-hover Color
$gray-40-hover Color
$gray-50-hover Color
$gray-60-hover Color
$gray-70-hover Color
$gray-80-hover Color
$gray-90-hover Color
$gray-100-hover Color
$green-10-hover Color
$green-20-hover Color
$green-30-hover Color
$green-40-hover Color
$green-50-hover Color
$green-60-hover Color
$green-70-hover Color
$green-80-hover Color
$green-90-hover Color
$green-100-hover Color
$magenta-10-hover Color
$magenta-20-hover Color
$magenta-30-hover Color
$magenta-40-hover Color
$magenta-50-hover Color
$magenta-60-hover Color
$magenta-70-hover Color
$magenta-80-hover Color
$magenta-90-hover Color
$magenta-100-hover Color
$orange-10-hover Color
$orange-20-hover Color
$orange-30-hover Color
$orange-40-hover Color
$orange-50-hover Color
$orange-60-hover Color
$orange-70-hover Color
$orange-80-hover Color
$orange-90-hover Color
$orange-100-hover Color
$purple-10-hover Color
$purple-20-hover Color
$purple-30-hover Color
$purple-40-hover Color
$purple-50-hover Color
$purple-60-hover Color
$purple-70-hover Color
$purple-80-hover Color
$purple-90-hover Color
$purple-100-hover Color
$red-10-hover Color
$red-20-hover Color
$red-30-hover Color
$red-40-hover Color
$red-50-hover Color
$red-60-hover Color
$red-70-hover Color
$red-80-hover Color
$red-90-hover Color
$red-100-hover Color
$teal-10-hover Color
$teal-20-hover Color
$teal-30-hover Color
$teal-40-hover Color
$teal-50-hover Color
$teal-60-hover Color
$teal-70-hover Color
$teal-80-hover Color
$teal-90-hover Color
$teal-100-hover Color
$warm-gray-10-hover Color
$warm-gray-20-hover Color
$warm-gray-30-hover Color
$warm-gray-40-hover Color
$warm-gray-50-hover Color
$warm-gray-60-hover Color
$warm-gray-70-hover Color
$warm-gray-80-hover Color
$warm-gray-90-hover Color
$warm-gray-100-hover Color
$yellow-10-hover Color
$yellow-20-hover Color
$yellow-30-hover Color
$yellow-40-hover Color
$yellow-50-hover Color
$yellow-60-hover Color
$yellow-70-hover Color
$yellow-80-hover Color
$yellow-90-hover Color
$yellow-100-hover Color