Skip to content

Instantly share code, notes, and snippets.

@hellobrian

hellobrian/SassMeister-rendered.html

Last active November 14, 2015 20:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hellobrian/c63e29d500e9e9233a5e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hellobrian/c63e29d500e9e9233a5e to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
bluemix-colors.css
div {
background-color: #5596e6;
color: rgba(255, 255, 255, 0.1);
}
Raw
bluemix-colors.html
<!-- html -->
<h1> blah</h1>
<h2 class="hi">hi</h2>
Raw
bluemix-colors.scss
// ----
// libsass (v3.2.5)
// ----
////////////////////////////////
// //
// IBM Design Language //
// Color Palette //
// //
////////////////////////////////
//////////////////////////////
// Color Palette
//
// Gets the specified color from the specified color palette
//
// Usage:
//
// background: color('blue', 80); // #1d3649
// background: color('blue'); // #4178be
//////////////////////////////
@function color($palette, $tone: 'core') {
// Add a little helper so tone can be passed as single digit number
@if type-of($tone) == 'number' {
@if $tone % 10 == $tone {
$tone: $tone * 10;
}
}
// Because it's spelled gr(a|e)y and we've got spaces
@if $palette == 'grey' {
$palette: 'gray';
}
@else if $palette == 'warm-grey' or $palette == 'warm grey' or $palette == 'warm gray' {
$palette: 'warm-gray';
}
@else if $palette == 'cool-grey' or $palette == 'cool grey' or $palette == 'cool gray' {
$palette: 'cool-gray';
}
@else if $palette == 'neutral white' {
$palette: 'neutral-white';
}
@else if $palette == 'cool white' {
$palette: 'cool-white';
}
@else if $palette == 'warm white' {
$palette: 'warm-white';
}
@return map-get(map-get($__ibm-color-palettes, $palette), $tone);
}
//////////////////////////////
// Tint and Shade Functions
//////////////////////////////
// Internal helper: finds the palette and key of a color
@function _ibm-find-color($color) {
$found-index: false;
$found-palette: false;
@each $palette, $vals in $__ibm-color-palettes {
@if not $found-index {
@each $key, $clr in $vals {
@if $color == $clr and $key != 'core' {
$found-index: $key;
$found-palette: $palette;
}
}
}
}
$error-message: 'Color #{$color} is not an IBM color';
@if not $found-index {
@if feature-exists(at-error) {
@error $error-message;
}
@else {
@warn $error-message;
}
}
@return ('index': $found-index, 'palette': $found-palette);
}
// Internal helper: transforms amount into base 10, rounding
@function _ibm-round-tint-shade($amount) {
@if $amount < 10 {
$amount: $amount * 10;
}
$return: round($amount);
$remainder: $return % 10;
$return: $return - $remainder;
@if $remainder >= 5 {
$return: $return + 10;
}
@return $return;
}
//////////////////////////////
// Tint an IBM Color
//
// Pass in a color (as retrieved from the `color` function) and how many stops you want to tint (lighten) the color along its palette.
// Pegged to the lightest color in the palette
//////////////////////////////
@function color-tint($color, $amount) {
$key: _ibm-find-color($color);
$index: map-get($key, 'index');
$palette: map-get($key, 'palette');
$move: _ibm-round-tint-shade($amount);
$index: $index - $move;
@if ($index < 10) {
$index: 10;
}
@return color($palette, $index);
}
//////////////////////////////
// Shade an IBM Color
//
// Pass in a color (as retrieved from the `color` function) and how many stops you want to shade (darken) the color along its palette.
// Pegged to the darkest color in the palette
//////////////////////////////
@function color-shade($color, $amount) {
$key: _ibm-find-color($color);
$index: map-get($key, 'index');
$palette: map-get($key, 'palette');
$move: _ibm-round-tint-shade($amount);
$index: $index + $move;
@if ($index > 100) {
$index: 100;
}
@return color($palette, $index);
}
//////////////////////////////
// Get Colors
//
// Lists out available colors
//////////////////////////////
@function get-colors($palette: null) {
// Return a list of colors available if nothing is passed in
@if $palette == null {
@return map-keys($__ibm-color-palettes);
}
// Return the full color map if 'all' is passed in
@else if $palette == 'all' {
@return $__ibm-color-palettes;
}
// Return just the color map if a specific color is passed in
@else {
@return map-get($__ibm-color-palettes, $palette);
}
}
//////////////////////////////
// IBM Color Palettes
//////////////////////////////
$__ibm-color-palettes: (
'blue': (
core: #4178be,
10: #c0e6ff,
20: #7cc7ff,
30: #5aaafa,
40: #5596e6,
50: #4178be,
60: #325c80,
70: #264a60,
80: #1d3649,
90: #152935,
100: #010205
),
'green': (
core: #4b8400,
10: #c8f08f,
20: #b4e051,
30: #8cd211,
40: #5aa700,
50: #4b8400,
60: #2d660a,
70: #144d14,
80: #0a3c02,
90: #0c2808,
100: #010200
),
'teal': (
core: #008571,
10: #a7fae6,
20: #6eedd8,
30: #41d6c3,
40: #00b4a0,
50: #008571,
60: #006d5d,
70: #005448,
80: #003c32,
90: #012b22,
100: #000202
),
'purple': (
core: #9855d4,
10: #eed2ff,
20: #d7aaff,
30: #ba8ff7,
40: #af6ee8,
50: #9855d4,
60: #734098,
70: #562f72,
80: #412356,
90: #311a41,
100: #030103
),
'magenta': (
core: #db2780,
10: #ffd2ff,
20: #ff9eee,
30: #ff71d4,
40: #ff3ca0,
50: #db2780,
60: #a6266e,
70: #7c1c58,
80: #601146,
90: #3a0b2e,
100: #040102
),
'red': (
core: #e71d32,
10: #ffd2dd,
20: #ffa5b4,
30: #ff7d87,
40: #ff5050,
50: #e71d32,
60: #ad1625,
70: #8c101c,
80: #6e0a1e,
90: #4c0a17,
100: #040001
),
'orange': (
core: #ff7832,
10: #ffd4a0,
20: #ffa573,
30: #ff7832,
40: #ff5003,
50: #d74108,
60: #a53725,
70: #872a0f,
80: #6d120f,
90: #43100b,
100: #030100
),
'yellow': (
core: #fdd600,
10: #fde876,
20: #fdd600,
30: #efc100,
40: #be9b00,
50: #8c7300,
60: #735f00,
70: #574a00,
80: #3c3200,
90: #281e00,
100: #020100
),
'gray': (
core: #777677,
10: #e0e0e0,
20: #c7c7c7,
30: #aeaeae,
40: #959595,
50: #777677,
60: #5a5a5a,
70: #464646,
80: #323232,
90: #121212,
100: #000
),
'cool-gray': (
core: #6d7777,
10: #dfe9e9,
20: #c8d2d2,
30: #aeb8b8,
40: #959f9f,
50: #6d7777,
60: #5a6464,
70: #3c4646,
80: #323c3c,
90: #0d1111,
100: #000203
),
'warm-gray': (
core: #7d7373,
10: #e9e0e0,
20: #d0c7c7,
30: #b8aeae,
40: #9e9494,
50: #7d7373,
60: #645a5a,
70: #504646,
80: #3c3232,
90: #1a1314,
100: #030000
),
'neutral-white': (
core: #fdfdfd,
10: #fdfdfd,
20: #f9f9f9,
30: #f4f4f4,
40: #ececec
),
'cool-white': (
core: #fbfcfc,
10: #fbfcfc,
20: #f9f9fb,
30: #f0f2f4,
40: #ecf2f2
),
'warm-white': (
core: #fdfbfb,
10: #fdfbfb,
20: #fdfbfb,
30: #f7f5f5,
40: #f2eeee
),
'black': (
core: #000
),
'white': (
core: #fff
)
);
//------ IBM COLORS ------//
$palette__ibm-colors: (
'blue-30': color('blue', 30),
'blue-40': color('blue', 40),
'blue-90': color('blue', 90),
'gray': color('cool-gray', 60),
'green-30': color('green', 30),
'red-30': color('red', 40),
'teal-20': color('teal', 20),
'white': #fff,
'yellow-30': color('yellow', 30)
);
@function ibm-color($color) {
$palette-ibm: $palette__ibm-colors;
@if map-has-key($palette-ibm, $color) {
@return map-get($palette-ibm, $color);
}
}
//------ BLUEMIX COLORS ------//
$palette__bluemix-colors: (
'white': rgba(255, 255, 255, .1),
'blue-70': #2D3F49,
'blue-90-light': rgba(21, 41, 51, .5),
'gray-atlas': #8C9BA5,
'gray': rgba(72, 87, 97, 1),
'gray-light' rgba(72, 87, 97, .7),
'gray-lightest': rgba(72, 87, 97, .5)
);
@function bluemix-color($color) {
$palette: $palette__bluemix-colors;
@if map-has-key($palette, $color) {
@return map-get($palette, $color);
}
}
div {
background-color: ibm-color('blue-40');
color: bluemix-color('white');
}
Raw
SassMeister-rendered.html
<!-- html -->
<h1> blah</h1>
<h2 class="hi">hi</h2>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment