feat(color): Named color support for color mixins. (#155)

Adds support for CSS named colors in all color mixins. Also fixes some outdated tests for mix/shade/tint and updates associated docs.
styled-components · Apr 30, 2017 · 16ecf5b · 16ecf5b
1 parent ddc6f9e
commit 16ecf5b
Show file tree

Hide file tree

Showing 9 changed files with 501 additions and 107 deletions.
diff --git a/docs/assets/polished.js b/docs/assets/polished.js
@@ -1157,6 +1157,168 @@ function hslToRgb(hue, saturation, lightness) {
   return convert(finalRed, finalGreen, finalBlue);
 }
 
+//      
+var namedColorMap = {
+  'aliceblue': 'f0f8ff',
+  'antiquewhite': 'faebd7',
+  'aqua': '00ffff',
+  'aquamarine': '7fffd4',
+  'azure': 'f0ffff',
+  'beige': 'f5f5dc',
+  'bisque': 'ffe4c4',
+  'black': '000',
+  'blanchedalmond': 'ffebcd',
+  'blue': '0000ff',
+  'blueviolet': '8a2be2',
+  'brown': 'a52a2a',
+  'burlywood': 'deb887',
+  'cadetblue': '5f9ea0',
+  'chartreuse': '7fff00',
+  'chocolate': 'd2691e',
+  'coral': 'ff7f50',
+  'cornflowerblue': '6495ed',
+  'cornsilk': 'fff8dc',
+  'crimson': 'dc143c',
+  'cyan': '00ffff',
+  'darkblue': '00008b',
+  'darkcyan': '008b8b',
+  'darkgoldenrod': 'b8860b',
+  'darkgray': 'a9a9a9',
+  'darkgreen': '006400',
+  'darkgrey': 'a9a9a9',
+  'darkkhaki': 'bdb76b',
+  'darkmagenta': '8b008b',
+  'darkolivegreen': '556b2f',
+  'darkorange': 'ff8c00',
+  'darkorchid': '9932cc',
+  'darkred': '8b0000',
+  'darksalmon': 'e9967a',
+  'darkseagreen': '8fbc8f',
+  'darkslateblue': '483d8b',
+  'darkslategray': '2f4f4f',
+  'darkslategrey': '2f4f4f',
+  'darkturquoise': '00ced1',
+  'darkviolet': '9400d3',
+  'deeppink': 'ff1493',
+  'deepskyblue': '00bfff',
+  'dimgray': '696969',
+  'dimgrey': '696969',
+  'dodgerblue': '1e90ff',
+  'firebrick': 'b22222',
+  'floralwhite': 'fffaf0',
+  'forestgreen': '228b22',
+  'fuchsia': 'ff00ff',
+  'gainsboro': 'dcdcdc',
+  'ghostwhite': 'f8f8ff',
+  'gold': 'ffd700',
+  'goldenrod': 'daa520',
+  'gray': '808080',
+  'green': '008000',
+  'greenyellow': 'adff2f',
+  'grey': '808080',
+  'honeydew': 'f0fff0',
+  'hotpink': 'ff69b4',
+  'indianred': 'cd5c5c',
+  'indigo': '4b0082',
+  'ivory': 'fffff0',
+  'khaki': 'f0e68c',
+  'lavender': 'e6e6fa',
+  'lavenderblush': 'fff0f5',
+  'lawngreen': '7cfc00',
+  'lemonchiffon': 'fffacd',
+  'lightblue': 'add8e6',
+  'lightcoral': 'f08080',
+  'lightcyan': 'e0ffff',
+  'lightgoldenrodyellow': 'fafad2',
+  'lightgray': 'd3d3d3',
+  'lightgreen': '90ee90',
+  'lightgrey': 'd3d3d3',
+  'lightpink': 'ffb6c1',
+  'lightsalmon': 'ffa07a',
+  'lightseagreen': '20b2aa',
+  'lightskyblue': '87cefa',
+  'lightslategray': '789',
+  'lightslategrey': '789',
+  'lightsteelblue': 'b0c4de',
+  'lightyellow': 'ffffe0',
+  'lime': '0f0',
+  'limegreen': '32cd32',
+  'linen': 'faf0e6',
+  'magenta': 'f0f',
+  'maroon': '800000',
+  'mediumaquamarine': '66cdaa',
+  'mediumblue': '0000cd',
+  'mediumorchid': 'ba55d3',
+  'mediumpurple': '9370db',
+  'mediumseagreen': '3cb371',
+  'mediumslateblue': '7b68ee',
+  'mediumspringgreen': '00fa9a',
+  'mediumturquoise': '48d1cc',
+  'mediumvioletred': 'c71585',
+  'midnightblue': '191970',
+  'mintcream': 'f5fffa',
+  'mistyrose': 'ffe4e1',
+  'moccasin': 'ffe4b5',
+  'navajowhite': 'ffdead',
+  'navy': '000080',
+  'oldlace': 'fdf5e6',
+  'olive': '808000',
+  'olivedrab': '6b8e23',
+  'orange': 'ffa500',
+  'orangered': 'ff4500',
+  'orchid': 'da70d6',
+  'palegoldenrod': 'eee8aa',
+  'palegreen': '98fb98',
+  'paleturquoise': 'afeeee',
+  'palevioletred': 'db7093',
+  'papayawhip': 'ffefd5',
+  'peachpuff': 'ffdab9',
+  'peru': 'cd853f',
+  'pink': 'ffc0cb',
+  'plum': 'dda0dd',
+  'powderblue': 'b0e0e6',
+  'purple': '800080',
+  'rebeccapurple': '639',
+  'red': 'f00',
+  'rosybrown': 'bc8f8f',
+  'royalblue': '4169e1',
+  'saddlebrown': '8b4513',
+  'salmon': 'fa8072',
+  'sandybrown': 'f4a460',
+  'seagreen': '2e8b57',
+  'seashell': 'fff5ee',
+  'sienna': 'a0522d',
+  'silver': 'c0c0c0',
+  'skyblue': '87ceeb',
+  'slateblue': '6a5acd',
+  'slategray': '708090',
+  'slategrey': '708090',
+  'snow': 'fffafa',
+  'springgreen': '00ff7f',
+  'steelblue': '4682b4',
+  'tan': 'd2b48c',
+  'teal': '008080',
+  'thistle': 'd8bfd8',
+  'tomato': 'ff6347',
+  'turquoise': '40e0d0',
+  'violet': 'ee82ee',
+  'wheat': 'f5deb3',
+  'white': 'fff',
+  'whitesmoke': 'f5f5f5',
+  'yellow': 'ff0',
+  'yellowgreen': '9acd32'
+};
+
+/**
+ * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
+ * @private
+ */
+function nameToHex(color) {
+  if (typeof color !== 'string') return color;
+  var normalizedColorName = color.toLowerCase();
+  return namedColorMap[normalizedColorName] ? '#' + namedColorMap[normalizedColorName] : color;
+}
+
 //      
 
 var hexRegex = /^#[a-fA-F0-9]{6}$/;
@@ -1179,29 +1341,30 @@ var hslaRegex = /^hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*,\s*([-
  */
 function parseToRgb(color) {
   if (typeof color !== 'string') throw new Error('Passed an incorrect argument to a color function, please pass a string representation of a color.');
-  if (color.match(hexRegex)) {
+  var normalizedColor = nameToHex(color);
+  if (normalizedColor.match(hexRegex)) {
     return {
-      red: parseInt('' + color[1] + color[2], 16),
-      green: parseInt('' + color[3] + color[4], 16),
-      blue: parseInt('' + color[5] + color[6], 16)
+      red: parseInt('' + normalizedColor[1] + normalizedColor[2], 16),
+      green: parseInt('' + normalizedColor[3] + normalizedColor[4], 16),
+      blue: parseInt('' + normalizedColor[5] + normalizedColor[6], 16)
     };
   }
-  if (color.match(reducedHexRegex)) {
+  if (normalizedColor.match(reducedHexRegex)) {
     return {
-      red: parseInt('' + color[1] + color[1], 16),
-      green: parseInt('' + color[2] + color[2], 16),
-      blue: parseInt('' + color[3] + color[3], 16)
+      red: parseInt('' + normalizedColor[1] + normalizedColor[1], 16),
+      green: parseInt('' + normalizedColor[2] + normalizedColor[2], 16),
+      blue: parseInt('' + normalizedColor[3] + normalizedColor[3], 16)
     };
   }
-  var rgbMatched = rgbRegex.exec(color);
+  var rgbMatched = rgbRegex.exec(normalizedColor);
   if (rgbMatched) {
     return {
       red: parseInt('' + rgbMatched[1], 10),
       green: parseInt('' + rgbMatched[2], 10),
       blue: parseInt('' + rgbMatched[3], 10)
     };
   }
-  var rgbaMatched = rgbaRegex.exec(color);
+  var rgbaMatched = rgbaRegex.exec(normalizedColor);
   if (rgbaMatched) {
     return {
       red: parseInt('' + rgbaMatched[1], 10),
@@ -1210,7 +1373,7 @@ function parseToRgb(color) {
       alpha: parseFloat('' + rgbaMatched[4], 10)
     };
   }
-  var hslMatched = hslRegex.exec(color);
+  var hslMatched = hslRegex.exec(normalizedColor);
   if (hslMatched) {
     var hue = parseInt('' + hslMatched[1], 10);
     var saturation = parseInt('' + hslMatched[2], 10) / 100;
@@ -1223,7 +1386,7 @@ function parseToRgb(color) {
       blue: parseInt('' + hslRgbMatched[3], 10)
     };
   }
-  var hslaMatched = hslaRegex.exec(color);
+  var hslaMatched = hslaRegex.exec(normalizedColor);
   if (hslaMatched) {
     var _hue = parseInt('' + hslaMatched[1], 10);
     var _saturation = parseInt('' + hslaMatched[2], 10) / 100;
@@ -1301,7 +1464,7 @@ function rgbToHsl(color) {
 function parseToHsl(color) {
   // Note: At a later stage we can optimize this function as right now a hsl
   // color would be parsed converted to rgb values and converted back to hsl.
-  return rgbToHsl(parseToRgb(color));
+  return rgbToHsl(parseToRgb(nameToHex(color)));
 }
 
 //      
@@ -1780,7 +1943,7 @@ function grayscale(color) {
  * }
  */
 function invert(color) {
-  // parse color string to hsl
+  // parse color string to rgb
   var value = parseToRgb(color);
   return toColorString(_extends({}, value, {
     red: 255 - value.red,
@@ -2069,8 +2232,8 @@ var setSaturation$1 = curry(setSaturation);
 //      
 
 /**
- * Shades a color by mixing it with black. Compared to `darken` it can produce
- * hue shifts, wheres `darken` manipulates the luminance channel and therefor
+ * Shades a color by mixing it with black. `shade` can produce
+ * hue shifts, where as `darken` manipulates the luminance channel and therefore
  * doesn't produce hue shifts.
  *
  * @example
@@ -2093,16 +2256,18 @@ var setSaturation$1 = curry(setSaturation);
 
 function shade(percentage, color) {
   if (typeof percentage !== 'number' || percentage > 1 || percentage < -1) throw new Error('Passed an incorrect argument to shade, please pass a percentage less than or equal to 1 and larger than or equal to -1.');
-  return mix$1(percentage, color, 'rgb(0, 0, 0)');
+  if (typeof color !== 'string') throw new Error('Passed an incorrect argument to a color function, please pass a string representation of a color.');
+  var normalizedColor = nameToHex(color);
+  return mix$1(percentage, normalizedColor, 'rgb(0, 0, 0)');
 }
 
 var shade$1 = curry(shade);
 
 //      
 
 /**
- * Tints a color by mixing it with white. Compared to `lighten` it can produce
- * hue shifts, wheres `lighten` manipulates the luminance channel and therefor
+ * Tints a color by mixing it with white. `tint` can produce
+ * hue shifts, where as `lighten` manipulates the luminance channel and therefore
  * doesn't produce hue shifts.
  *
  * @example
@@ -2125,7 +2290,9 @@ var shade$1 = curry(shade);
 
 function tint(percentage, color) {
   if (typeof percentage !== 'number' || percentage > 1 || percentage < -1) throw new Error('Passed an incorrect argument to tint, please pass a percentage less than or equal to 1 and larger than or equal to -1.');
-  return mix$1(percentage, color, 'rgb(255, 255, 255)');
+  if (typeof color !== 'string') throw new Error('Passed an incorrect argument to a color function, please pass a string representation of a color.');
+  var normalizedColor = nameToHex(color);
+  return mix$1(percentage, normalizedColor, 'rgb(255, 255, 255)');
 }
 
 var tint$1 = curry(tint);