Merge pull request #8 from lee-chase/alpha-colors

Alpha colors
IBM-Design · Dec 16, 2015 · 7f54b50 · 7f54b50
2 parents 8be81cd + 56720b0
commit 7f54b50
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ With the color palette imported you will now have access to two functions:
 
 Returns the specified color from the specified color palette
 
-#### `color($palette, [$tone: 'core'])`
+#### `color($palette, [$tone: 'core'], $alpha)`
 
 ```scss
 //////////////////////////////////////////////////
@@ -34,13 +34,18 @@ Returns the specified color from the specified color palette
 // |---------------|---------------|----------| //
 // | Color Palette | String        | Yes      | //
 // | Color Tone    | String/Number | Optional | //
+// | Color Alpha   | Number        | Optional | //
 //  ------------------------------------------  //
 //////////////////////////////////////////////////
 
 background: color('blue', 80);     // #1d3649
 background: color('blue', 8);      // #1d3649
 background: color('blue', 'core'); // #4178be
 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)
+
 ```
 
 ### Color Tint

diff --git a/_ibm-colors.scss b/_ibm-colors.scss
@@ -14,8 +14,12 @@
 //
 // background: color('blue', 80); // #1d3649
 // background: color('blue');     // #4178be
+//
+// 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)
+//
 //////////////////////////////
-@function color($palette, $tone: 'core') {
+@function color($palette, $tone: 'core', $alpha: 1) {
   // Add a little helper so tone can be passed as single digit number
   @if type-of($tone) == 'number' {
     @if $tone % 10 == $tone {
@@ -43,7 +47,7 @@
     $palette: 'warm-white';
   }
 
-  @return map-get(map-get($__ibm-color-palettes, $palette), $tone);
+  @return rgba(map-get(map-get($__ibm-color-palettes, $palette), $tone), $alpha);
 }
 
 //////////////////////////////