
Research
/Security News
Toptal’s GitHub Organization Hijacked: 10 Malicious Packages Published
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
ibm-design-colors
Advanced tools
The resource for IBM Design Language's color library in .ase, .clr, .json, .scss, and .sketchpallete extensions. Read our Color Guidelines to learn how to best use these colors.
To maintain color accuracy across applications, we recommend setting your computer's display color profile to sRGB. You can change this under system preferences/display/color.
There are two options for Sketch. One option uses the Colors Window for quick selection. The other option requires the Sketch Palettes Plugin, but allows you to quickly import the palette as global or document colors.
Colors Window Option
Global/Document Colors Option
The IBM Design Language Color Library can be installed via npm.
npm
$ npm install ibm-design-colors --save
There are ten variations of blue, aqua, teal, green, yellow, orange, red, magenta, purple, indigo, gray, cool gray, and warm gray that range from 10 to 100.
Neutral white, cool white, and warm white have four variations in ones from 1 to 4.
For contrast accessibility, we recommend that you never apply a text of one color variation that is 50 points within any other color. Example: You should not use a text that is Neutral White 20 on a blue background lighter than Blue 70.
The .scss file will work with any Sass compiler compatible with Sass 3.3 or greater.
Returns the specified color from the specified color palette
color($palette, [$grade: 'core'], $alpha)
//////////////////////////////////////////////////
// ------------------------------------------ //
// | Options | Type | Required | //
// |---------------|---------------|----------| //
// | Color Palette | String | Yes | //
// | Color grade | String/Number | Optional | //
// | Color Alpha | Number | Optional | //
// ------------------------------------------ //
//////////////////////////////////////////////////
background: color('blue', 80); // #1d3649
background: color('blue'); // #4178be
-- with an alpha
background: color('blue', 80, $alpha: 0.5); // rgba(29, 54, 73, 0.5)
background: color('blue', $alpha: 0.5); // rgba(65, 120, 190, 0.5)
Returns a color the specified amount of steps lighter than the given color in the given color's color palette
color-tint($color, $amount)
//////////////////////////////////////////////////
// ------------------------------------------ //
// | Options | Type | Required | //
// |---------------|---------------|----------| //
// | Color Palette | Color | Yes | //
// | Tint Amount | Number | Yes | //
// ------------------------------------------ //
//////////////////////////////////////////////////
background: color-tint(color('blue', 80), 20); // #325c80
background: color-tint(color('blue', 80), 23); // #325c80
background: color-tint(color('blue', 80), 25); // #4178be
background: color-tint(color('blue', 80), 100); // #c0e6ff
Returns a color the specified amount of steps darker than the given color in the given color's color palette
color-shade($color, $amount)
//////////////////////////////////////////////////
// ------------------------------------------ //
// | Options | Type | Required | //
// |---------------|---------------|----------| //
// | Color Palette | Color | Yes | //
// | Shade Amount | Number | Yes | //
// ------------------------------------------ //
//////////////////////////////////////////////////
background: color-shade(color('blue', 30), 20); // #4178be
background: color-shade(color('blue', 30), 23); // #4178be
background: color-shade(color('blue', 30), 25); // #325c80
background: color-shade(color('blue', 30), 100); // #010205
Returns the list of available color palettes if no parameter is passed in, all palettes and all of their colors if 'all'
is passed in, and all colors of a given palette if one is specified.
get-colors([$palette])
///////////////////////////////////////////
// ----------------------------------- //
// | Options | Type | Required | //
// |---------------|--------|----------| //
// | Color Palette | String | Optional | //
// ----------------------------------- //
///////////////////////////////////////////
$color-keys: get-colors();
$all-blues: get-colors('blue');
$full-color-map: get-colors('all');
//////////////////////////////
// Example Usage
//////////////////////////////
// Generating a class for each color palette
@each $color in $color-keys {
.color--#{$color} {
content: #{$color} is available;
}
}
// Generate a class for each color of a color palette
@each $grade, $color in $all-blues {
.blue--grade-#{$grade} {
background: $color;
}
}
// Generate a class for each color of each color palette
@each $palette-name, $palette in $full-color-map {
@each $grade, $color in $palette {
.#{$palette-name}--grade-#{$grade} {
background: $color;
}
}
}
Setup the environment with git and node already installed. Then:
git clone https://github.com/IBM-Design/colors.git
cd colors
npm install
You can either submit an issue or submit the pull request of changed code yourself:
./source/colors.js
gulp
.All files will build into the root folder.
Our goal is to have a single source of truth that all other files build from. This is ./source/colors.js
. We love supporting different file types to cater to a variety of use cases. If you can add support to a new file type, please have it build from the source file when the gulp
command is ran.
FAQs
Color Palettes and helper functions for IBM Design Language
The npm package ibm-design-colors receives a total of 1,970 weekly downloads. As such, ibm-design-colors popularity was classified as popular.
We found that ibm-design-colors demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.