Styles

A package for including a css reset, IBM Design Language Color Library scss functions, and scss variables for fonts and colors

What it does

• single .scss file import to include
  • css reset normalize.css
  • IBM Design Language Color Library
  • scss variables
• mapping of all of the IBM Design Color palette to scss variables

// IBM Design Language
$__ibm-color-palettes: (
  'blue': (
    1: #e1ebf7,
    10: #c8daf4,
  )
);

// @boomerang/boomerang-styles color palette to variable mapping
$blue-1: #e1ebf7;
$blue-10: #c8daf4;

Install

yarn add @boomerang/boomerang-styles
or
npm install @boomerang/boomerang-styles

Use

// styles.scss 
// base stylesheet for the application - includes resets
@import "~@boomerang/boomerang-styles";
 
// button.scss
@import "~@boomerang/boomerang-styles/lib/colors"; // import the color variables
 
 
.button {
  background: $blue-90; // use color variable
}


.button--disabled {
  background: color('blue', 90, $alpha: 0.5); // use IBM Design Language function
}

Requirements

• local configured to use @boomerang scoped npm packages. See our getting started guide for more information
• any Sass compiler compatible with Sass 3.3 or greater.