chroma-sass 1.0.0.alpha.5 → 1.0.0.beta.1

data/sass/chroma/_internals.scss

@@ -1,6 +1,9 @@
+// Internals
 //
-// Helper functions that query the internal data structure in $chroma.
+// Helper functions that query the internal data structure in $chroma. These are
+// not part of the public API and are subject to change at any time.
 //
+// Style guide: internals
 
 // Import the global variables needed by all of Chroma.
 @import './variables';
@@ -9,7 +12,7 @@
 //
 // Checks if the named color scheme exists.
 //
-// Style guide: sass.functions.chroma.chroma-has-scheme
+// Style guide: internals.chroma-has-scheme
 @function chroma-has-scheme($scheme) {
   @return map-has-key(map-get($chroma, 'schemes'), $scheme);
 }
@@ -18,7 +21,7 @@
 //
 // Returns a list of all color schemes in $chroma.
 //
-// Style guide: sass.functions.chroma.chroma-schemes
+// Style guide: internals.chroma-schemes
 @function chroma-schemes() {
   @return map-keys(map-get($chroma, 'schemes'));
 }
@@ -28,7 +31,7 @@
 // Checks if the named color exists in the given scheme or its parent schemes.
 // Returns false or a string of the scheme name that contains the color.
 //
-// Style guide: sass.functions.chroma.chroma-has-color
+// Style guide: internals.chroma-has-color
 @function chroma-has-color($name, $scheme: $chroma-active-scheme) {
   $current-scheme: $scheme;
   @while $current-scheme {
@@ -46,7 +49,7 @@
 // Private function that adds a color to the data structure of the $chroma
 // variable.
 //
-// No styleguide reference
+// Style guide: internals._chroma-add-name
 @function _chroma-add-name($scheme, $name, $value: false, $reference: false, $referenced_by: ()) {
   $names: map-merge(
     map-get($chroma, 'names'),
@@ -68,7 +71,7 @@
 // Private function that sets up the initial data structure of the $chroma
 // variable.
 //
-// No styleguide reference
+// Style guide: internals._chroma-init
 @function _chroma-init() {
   @if length($chroma) == 0 {
     @return (

data/sass/chroma/_kss.scss

@@ -1,9 +1,16 @@
+// KSS module
 //
-// "KSS" module for the system.
+// A basic "KSS" module for Chroma.
 //
+// Use `chroma-kss-markup()` to export a chunk of HTML wrapped in a `/* */` CSS
+// comment. Then use `chroma-kss-styles()` to style it.
+//
+// @TODO: These functions and mixins are a bit janky because it exports to HTML
+// directly rather than to JSON or some other exportable data set.
+//
+// Style guide: kss
 
-
-@import "./variables";
+@import "./functions";
 
 
 // chroma-kss-markup()
@@ -11,13 +18,20 @@
 // Returns the HTML needed to display all colors in color() in a KSS style
 // guide. The parameters are used to specify the classes for various elements.
 //
+// Since regular text can only be output with Sass in certain contexts, you must
+// wrap this function call in a CSS comment.
+//
 // Usage:
 // ```scss
+// // Include chroma's optional kss module.
+// @import 'chroma/kss';
+// // Include the colors defined for your project.
 // @import 'init';
 //
 // /*
 // #{chroma-kss-markup()}
 // */
+// ```
 //
 // Then use a Gulp.js or Grunt task to strip the leading and trailing lines
 // (containing "/*" and "*/" respectively) from the generated file.
@@ -28,8 +42,11 @@
 // $color-class       - Defaults to 'chroma-kss'.
 // $swatch-class      - Defaults to 'chroma-kss__swatch'.
 // $variable-class    - Defaults to 'chroma-kss__variable'.
+// $alt-text-class    - Defaults to 'chroma-kss__alt-text'.
+// $value-class       - Defaults to 'chroma-kss__value'.
+// $reference-class   - Defaults to 'chroma-kss__reference'.
 //
-// style guide: sass.functions.chroma.chroma-kss-markup
+// style guide: kss.chroma-kss-markup
 
 @function chroma-kss-markup(
   $wrapper-class:     'kss-style',
@@ -44,10 +61,6 @@
 ) {
   $markup: '';
 
-  @if $wrapper-class {
-    $markup: '<div class="' + $wrapper-class + '">';
-  }
-
   @each $scheme, $data in map-get($chroma, 'schemes') {
     // Display the scheme name and description.
     $markup: $markup
@@ -66,23 +79,157 @@
         $markup: $markup
           + '<div class="#{$color-class}">'
           +   '<span class="#{$swatch-class}" style="background-color: #{$value}"></span>'
-          +   '<code class="#{$variable-class}">color(#{$color})</code>'
-          +   ' <span class="#{$alt-text-class}">uses the color:</span> '
+          +   '<code class="#{$variable-class}">#{$_chroma-spelling}(#{$color})</code>'
+          +   ' <span class="#{$alt-text-class}">uses the #{$_chroma-spelling}:</span> '
           +   '<span class="#{$value-class}"><code>#{$value}</code>';
         @if $reference {
           $markup: $markup + ' (#{$reference})';
         }
         $markup: $markup + '</span>';
         @if length($referenced_by) > 0 {
-          $markup: $markup + ' <span class="#{$reference_class}">This color is inherited by: #{inspect($referenced_by)}</span>'
+          $markup: $markup + ' <span class="#{$reference_class}">This #{$_chroma-spelling} is inherited by: #{inspect($referenced_by)}</span>'
         }
         $markup: $markup + '</div>';
       }
     }
   }
 
-  @if $wrapper-class {
-    $markup: $markup + '</div>';
+  @if $markup and $wrapper-class {
+    $markup: '<div class="' + $wrapper-class + '">' + $markup + '</div>';
   }
+
+  $markup: '<!-- This markup is auto-generated from Sass with chroma-kss-markup(). Do not modify. -->' + $markup;
+
   @return $markup;
 }
+
+// chroma-kss-styles()
+//
+// A mixin to add a series of rulesets that style Chroma color swatches in a KSS
+// style guide.
+//
+// Since the mixin writes CSS selectors, the mixin can be used at the root of a
+// stylesheet.
+//
+// Usage:
+// ```scss
+// // Include chroma's optional kss module.
+// @import 'chroma/kss';
+//
+// @include chroma-kss-styles();
+// ```
+//
+// $wrapper-class     - Defaults to 'kss-style'.
+// $title-class       - Defaults to 'chroma-kss__title'.
+// $description-class - Defaults to 'chroma-kss__description'.
+// $color-class       - Defaults to 'chroma-kss'.
+// $swatch-class      - Defaults to 'chroma-kss__swatch'.
+// $variable-class    - Defaults to 'chroma-kss__variable'.
+// $alt-text-class    - Defaults to 'chroma-kss__alt-text'.
+// $value-class       - Defaults to 'chroma-kss__value'.
+// $reference-class   - Defaults to 'chroma-kss__reference'.
+//
+// Style guide: kss.chroma-kss-styles
+
+@mixin chroma-kss-styles(
+  $wrapper-class:     'kss-style',
+  $title-class:       'chroma-kss__title',
+  $description-class: 'chroma-kss__description',
+  $color-class:       'chroma-kss',
+  $swatch-class:      'chroma-kss__swatch',
+  $variable-class:    'chroma-kss__variable',
+  $alt-text-class:    'chroma-kss__alt-text',
+  $value-class:       'chroma-kss__value',
+  $reference-class:   'chroma-kss__reference'
+) {
+  @if $wrapper-class {
+    .#{$wrapper-class} {
+      @include _chroma-kss-styles(
+        $title-class,
+        $description-class,
+        $color-class,
+        $swatch-class,
+        $variable-class,
+        $alt-text-class,
+        $value-class,
+        $reference-class
+      );
+    }
+  }
+  @else {
+    @include _chroma-kss-styles(
+      $title-class,
+      $description-class,
+      $color-class,
+      $swatch-class,
+      $variable-class,
+      $alt-text-class,
+      $value-class,
+      $reference-class
+    );
+  }
+}
+
+@mixin _chroma-kss-styles(
+  $title-class:       'chroma-kss__title',
+  $description-class: 'chroma-kss__description',
+  $color-class:       'chroma-kss',
+  $swatch-class:      'chroma-kss__swatch',
+  $variable-class:    'chroma-kss__variable',
+  $alt-text-class:    'chroma-kss__alt-text',
+  $value-class:       'chroma-kss__value',
+  $reference-class:   'chroma-kss__reference'
+  ) {
+
+  .#{$color-class} {
+    line-height: 50px;
+  }
+
+  #{$swatch-class} {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    border-radius: 40px;
+    border: 2px solid #000;
+    margin-right: 10px;
+    vertical-align: middle;
+  }
+
+  #{$variable-class} {
+    margin-right: 10px;
+  }
+
+  #{$alt-text-class} {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    // IE6 and IE7 use the wrong syntax.
+    *clip: rect(1px 1px 1px 1px);
+    clip: rect(1px, 1px, 1px, 1px);
+  }
+
+  #{$value-class} {
+    color: #bbb;
+
+    code {
+      color: #bbb;
+    }
+
+    &:before {
+      // "\2192" is unicode for right arrow. "\ " is a hack; otherwise space is
+      // ignored in some browsers.
+      content: '\2192\ ';
+      font-family: sans-serif;
+    }
+  }
+
+  #{$reference-class} {
+    display: block;
+    position: relative;
+    top: -12px;
+    line-height: 25px;
+    padding-left: 50px;
+    color: #999;
+  }
+}

data/sass/chroma/_variables.scss

@@ -1,19 +1,11 @@
+// Variables module
 //
-// Variables module for Chroma; auto-imported by other modules.
+// This module contains all the public and private variables needed for Chroma
+// to function. Only public variables are documented.
 //
-
-//
-// Private variables.
+// Auto-imported by other modules.
 //
-
-// The name of the default color scheme. There's no reason to change this value.
-$CHROMA_DEFAULT_SCHEME  : 'default';
-
-// Let the Aussies, etc. have their preferred spelling.
-//
-// Rather than setting this variable directly, users should import the colour
-// module with: `@import 'chroma/colour';`
-$chroma-spelling        : 'color' !default;
+// Style guide: variables
 
 //
 // Public variables.
@@ -24,25 +16,390 @@ $chroma-spelling        : 'color' !default;
 // The colors and meta-data managed by Chroma.
 //
 // Style guide: variables.chroma
-$chroma                 : () !default;
+$chroma: () !default;
+
+// $CHROMA_DEFAULT_SCHEME
+//
+// The name of the default color scheme. There seems to be no reason to change
+// this value, but Chroma won't stifle your creativity.
+//
+// Style guide: variables.CHROMA_DEFAULT_SCHEME
+$CHROMA_DEFAULT_SCHEME: 'default';
 
 // $chroma-active-scheme
 //
 // The currently active color scheme. This is the default value used by the
 // $scheme parameter of most Chroma functions.
 //
-// By default, this variable is set to the default color scheme.
+// By default, this variable is set to the 'default' color scheme.
 //
 // Style guide: variables.chroma-active-scheme
-$chroma-active-scheme   : $CHROMA_DEFAULT_SCHEME !default;
+$chroma-active-scheme: $CHROMA_DEFAULT_SCHEME !default;
+
+// $chroma-die-on-dangerous-keyword
+//
+// Controls whether Chroma will halt Sass compilation if it encounters a
+// "dangerous color keyword".
+//
+// See the docs of is-dangerous-color-keyword() for more information.
+//
+// Style guide: variables.chroma-die-on-dangerous-keyword
+$chroma-die-on-dangerous-keyword: true !default;
 
-// $chroma-die-on-ambiguous-keyword
 //
-// Since Chroma _will_ die when using an ambiguous color keyword with Sass'
-// "compressed" output style, we die with all other output styles too.
-// Otherwise, Chroma could behave differently on production vs. development
-// environments. If you are really sure Chroma will never be run with Sass'
-// "compressed" output style, you can disable this feature.
+// Private variables.
+//
+
+// Let the Aussies, etc. have their preferred spelling.
+//
+// Rather than setting this variable directly, users should import the colour
+// module with: `@import 'chroma/colour';`
+$_chroma-spelling: 'color' !default;
+
+// The following keywords will cause confusion if used as color names. See the
+// docs of is-dangerous-color-keyword() for more information.
+$_chroma-dangerous-keywords: (
+  'aqua': 'aqua or cyan',
+  'cyan': 'aqua or cyan',
+  'fuchsia': 'fuchsia or magenta',
+  'magenta': 'fuchsia or magenta',
+  'darkgray': 'darkgray or darkgrey',
+  'darkgrey': 'darkgray or darkgrey',
+  'darkslategray': 'darkslategray or darkslategrey',
+  'darkslategrey': 'darkslategray or darkslategrey',
+  'dimgray': 'dimgray or dimgrey',
+  'dimgrey': 'dimgray or dimgrey',
+  'gray': 'gray or grey',
+  'grey': 'gray or grey',
+  'lightgray': 'lightgray or lightgrey',
+  'lightgrey': 'lightgray or lightgrey',
+  'lightslategray': 'lightslategray or lightslategrey',
+  'lightslategrey': 'lightslategray or lightslategrey',
+  'slategray': 'slategray or slategrey',
+  'slategrey': 'slategray or slategrey',
+);
+
+// The following color values are the converted values of dangerous color
+// keywords. If Chroma sees these values as color names, it means Sass converted
+// the original color name before Chroma could see it. See the docs of
+// is-dangerous-color-keyword() for more information.
+$_chroma-dangerous-converted-keywords: (
+  '#00ffff': 'aqua or cyan',
+  '#0ff': 'aqua or cyan',
+  '#ff00ff': 'fuchsia or magenta',
+  '#f0f': 'fuchsia or magenta',
+  '#a9a9a9': 'darkgray or darkgrey',
+  '#2f4f4f': 'darkslategray or darkslategrey',
+  '#696969': 'dimgray or dimgrey',
+  '#808080': 'gray or grey',
+  '#d3d3d3': 'lightgray or lightgrey',
+  '#778899': 'lightslategray or lightslategrey',
+  '#789': 'lightslategray or lightslategrey',
+  '#708090': 'slategray or slategrey',
+);
+
+// We need to identify color names that are also color keywords so we can safely
+// convert them to strings. Hex values are also included in the list since Sass
+// may convert keywords to hex before Chroma can see them; this allows us to
+// safely convert them back.
 //
-// Style guide: variables.chroma-die-on-ambiguous-keyword
-$chroma-die-on-ambiguous-keyword  : true !default;
+// This is the full list of CSS4 color keywords including the dangerous ones.
+// From http://dev.w3.org/csswg/css-color-4/#named-colors
+$_chroma-css4-color-keywords: (
+  'aliceblue': 'aliceblue',
+  '#f0f8ff': 'aliceblue',
+  'antiquewhite': 'antiquewhite',
+  '#faebd7': 'antiquewhite',
+  'aqua': 'aqua',
+  'aquamarine': 'aquamarine',
+  '#7fffd4': 'aquamarine',
+  'azure': 'azure',
+  '#f0ffff': 'azure',
+  'beige': 'beige',
+  '#f5f5dc': 'beige',
+  'bisque': 'bisque',
+  '#ffe4c4': 'bisque',
+  'black': 'black',
+  '#000000': 'black',
+  '#000': 'black',
+  'blanchedalmond': 'blanchedalmond',
+  '#ffebcd': 'blanchedalmond',
+  'blue': 'blue',
+  '#0000ff': 'blue',
+  '#00f': 'blue',
+  'blueviolet': 'blueviolet',
+  '#8a2be2': 'blueviolet',
+  'brown': 'brown',
+  '#a52a2a': 'brown',
+  'burlywood': 'burlywood',
+  '#deb887': 'burlywood',
+  'cadetblue': 'cadetblue',
+  '#5f9ea0': 'cadetblue',
+  'chartreuse': 'chartreuse',
+  '#7fff00': 'chartreuse',
+  'chocolate': 'chocolate',
+  '#d2691e': 'chocolate',
+  'coral': 'coral',
+  '#ff7f50': 'coral',
+  'cornflowerblue': 'cornflowerblue',
+  '#6495ed': 'cornflowerblue',
+  'cornsilk': 'cornsilk',
+  '#fff8dc': 'cornsilk',
+  'crimson': 'crimson',
+  '#dc143c': 'crimson',
+  'cyan': 'cyan',
+  '#00ffff': 'cyan',
+  '#0ff': 'cyan',
+  'darkblue': 'darkblue',
+  '#00008b': 'darkblue',
+  'darkcyan': 'darkcyan',
+  '#008b8b': 'darkcyan',
+  'darkgoldenrod': 'darkgoldenrod',
+  '#b8860b': 'darkgoldenrod',
+  'darkgray': 'darkgray',
+  '#a9a9a9': 'darkgray',
+  'darkgreen': 'darkgreen',
+  '#006400': 'darkgreen',
+  'darkgrey': 'darkgrey',
+  'darkkhaki': 'darkkhaki',
+  '#bdb76b': 'darkkhaki',
+  'darkmagenta': 'darkmagenta',
+  '#8b008b': 'darkmagenta',
+  'darkolivegreen': 'darkolivegreen',
+  '#556b2f': 'darkolivegreen',
+  'darkorange': 'darkorange',
+  '#ff8c00': 'darkorange',
+  'darkorchid': 'darkorchid',
+  '#9932cc': 'darkorchid',
+  'darkred': 'darkred',
+  '#8b0000': 'darkred',
+  'darksalmon': 'darksalmon',
+  '#e9967a': 'darksalmon',
+  'darkseagreen': 'darkseagreen',
+  '#8fbc8f': 'darkseagreen',
+  'darkslateblue': 'darkslateblue',
+  '#483d8b': 'darkslateblue',
+  'darkslategray': 'darkslategray',
+  '#2f4f4f': 'darkslategray',
+  'darkslategrey': 'darkslategrey',
+  'darkturquoise': 'darkturquoise',
+  '#00ced1': 'darkturquoise',
+  'darkviolet': 'darkviolet',
+  '#9400d3': 'darkviolet',
+  'deeppink': 'deeppink',
+  '#ff1493': 'deeppink',
+  'deepskyblue': 'deepskyblue',
+  '#00bfff': 'deepskyblue',
+  'dimgray': 'dimgray',
+  '#696969': 'dimgray',
+  'dimgrey': 'dimgrey',
+  'dodgerblue': 'dodgerblue',
+  '#1e90ff': 'dodgerblue',
+  'firebrick': 'firebrick',
+  '#b22222': 'firebrick',
+  'floralwhite': 'floralwhite',
+  '#fffaf0': 'floralwhite',
+  'forestgreen': 'forestgreen',
+  '#228b22': 'forestgreen',
+  'fuchsia': 'fuchsia',
+  'gainsboro': 'gainsboro',
+  '#dcdcdc': 'gainsboro',
+  'ghostwhite': 'ghostwhite',
+  '#f8f8ff': 'ghostwhite',
+  'gold': 'gold',
+  '#ffd700': 'gold',
+  'goldenrod': 'goldenrod',
+  '#daa520': 'goldenrod',
+  'gray': 'gray',
+  '#808080': 'gray',
+  'green': 'green',
+  '#008000': 'green',
+  'greenyellow': 'greenyellow',
+  '#adff2f': 'greenyellow',
+  'grey': 'grey',
+  'honeydew': 'honeydew',
+  '#f0fff0': 'honeydew',
+  'hotpink': 'hotpink',
+  '#ff69b4': 'hotpink',
+  'indianred': 'indianred',
+  '#cd5c5c': 'indianred',
+  'indigo': 'indigo',
+  '#4b0082': 'indigo',
+  'ivory': 'ivory',
+  '#fffff0': 'ivory',
+  'khaki': 'khaki',
+  '#f0e68c': 'khaki',
+  'lavender': 'lavender',
+  '#e6e6fa': 'lavender',
+  'lavenderblush': 'lavenderblush',
+  '#fff0f5': 'lavenderblush',
+  'lawngreen': 'lawngreen',
+  '#7cfc00': 'lawngreen',
+  'lemonchiffon': 'lemonchiffon',
+  '#fffacd': 'lemonchiffon',
+  'lightblue': 'lightblue',
+  '#add8e6': 'lightblue',
+  'lightcoral': 'lightcoral',
+  '#f08080': 'lightcoral',
+  'lightcyan': 'lightcyan',
+  '#e0ffff': 'lightcyan',
+  'lightgoldenrodyellow': 'lightgoldenrodyellow',
+  '#fafad2': 'lightgoldenrodyellow',
+  'lightgray': 'lightgray',
+  '#d3d3d3': 'lightgray',
+  'lightgreen': 'lightgreen',
+  '#90ee90': 'lightgreen',
+  'lightgrey': 'lightgrey',
+  'lightpink': 'lightpink',
+  '#ffb6c1': 'lightpink',
+  'lightsalmon': 'lightsalmon',
+  '#ffa07a': 'lightsalmon',
+  'lightseagreen': 'lightseagreen',
+  '#20b2aa': 'lightseagreen',
+  'lightskyblue': 'lightskyblue',
+  '#87cefa': 'lightskyblue',
+  'lightslategray': 'lightslategray',
+  '#778899': 'lightslategray',
+  '#789': 'lightslategray',
+  'lightslategrey': 'lightslategrey',
+  'lightsteelblue': 'lightsteelblue',
+  '#b0c4de': 'lightsteelblue',
+  'lightyellow': 'lightyellow',
+  '#ffffe0': 'lightyellow',
+  'lime': 'lime',
+  '#00ff00': 'lime',
+  '#0f0': 'lime',
+  'limegreen': 'limegreen',
+  '#32cd32': 'limegreen',
+  'linen': 'linen',
+  '#faf0e6': 'linen',
+  'magenta': 'magenta',
+  '#ff00ff': 'magenta',
+  '#f0f': 'magenta',
+  'maroon': 'maroon',
+  '#800000': 'maroon',
+  'mediumaquamarine': 'mediumaquamarine',
+  '#66cdaa': 'mediumaquamarine',
+  'mediumblue': 'mediumblue',
+  '#0000cd': 'mediumblue',
+  'mediumorchid': 'mediumorchid',
+  '#ba55d3': 'mediumorchid',
+  'mediumpurple': 'mediumpurple',
+  '#9370db': 'mediumpurple',
+  'mediumseagreen': 'mediumseagreen',
+  '#3cb371': 'mediumseagreen',
+  'mediumslateblue': 'mediumslateblue',
+  '#7b68ee': 'mediumslateblue',
+  'mediumspringgreen': 'mediumspringgreen',
+  '#00fa9a': 'mediumspringgreen',
+  'mediumturquoise': 'mediumturquoise',
+  '#48d1cc': 'mediumturquoise',
+  'mediumvioletred': 'mediumvioletred',
+  '#c71585': 'mediumvioletred',
+  'midnightblue': 'midnightblue',
+  '#191970': 'midnightblue',
+  'mintcream': 'mintcream',
+  '#f5fffa': 'mintcream',
+  'mistyrose': 'mistyrose',
+  '#ffe4e1': 'mistyrose',
+  'moccasin': 'moccasin',
+  '#ffe4b5': 'moccasin',
+  'navajowhite': 'navajowhite',
+  '#ffdead': 'navajowhite',
+  'navy': 'navy',
+  '#000080': 'navy',
+  'oldlace': 'oldlace',
+  '#fdf5e6': 'oldlace',
+  'olive': 'olive',
+  '#808000': 'olive',
+  'olivedrab': 'olivedrab',
+  '#6b8e23': 'olivedrab',
+  'orange': 'orange',
+  '#ffa500': 'orange',
+  'orangered': 'orangered',
+  '#ff4500': 'orangered',
+  'orchid': 'orchid',
+  '#da70d6': 'orchid',
+  'palegoldenrod': 'palegoldenrod',
+  '#eee8aa': 'palegoldenrod',
+  'palegreen': 'palegreen',
+  '#98fb98': 'palegreen',
+  'paleturquoise': 'paleturquoise',
+  '#afeeee': 'paleturquoise',
+  'palevioletred': 'palevioletred',
+  '#db7093': 'palevioletred',
+  'papayawhip': 'papayawhip',
+  '#ffefd5': 'papayawhip',
+  'peachpuff': 'peachpuff',
+  '#ffdab9': 'peachpuff',
+  'peru': 'peru',
+  '#cd853f': 'peru',
+  'pink': 'pink',
+  '#ffc0cb': 'pink',
+  'plum': 'plum',
+  '#dda0dd': 'plum',
+  'powderblue': 'powderblue',
+  '#b0e0e6': 'powderblue',
+  'purple': 'purple',
+  '#800080': 'purple',
+  'rebeccapurple': 'rebeccapurple',
+  '#663399': 'rebeccapurple',
+  'red': 'red',
+  '#ff0000': 'red',
+  '#f00': 'red',
+  'rosybrown': 'rosybrown',
+  '#bc8f8f': 'rosybrown',
+  'royalblue': 'royalblue',
+  '#4169e1': 'royalblue',
+  'saddlebrown': 'saddlebrown',
+  '#8b4513': 'saddlebrown',
+  'salmon': 'salmon',
+  '#fa8072': 'salmon',
+  'sandybrown': 'sandybrown',
+  '#f4a460': 'sandybrown',
+  'seagreen': 'seagreen',
+  '#2e8b57': 'seagreen',
+  'seashell': 'seashell',
+  '#fff5ee': 'seashell',
+  'sienna': 'sienna',
+  '#a0522d': 'sienna',
+  'silver': 'silver',
+  '#c0c0c0': 'silver',
+  'skyblue': 'skyblue',
+  '#87ceeb': 'skyblue',
+  'slateblue': 'slateblue',
+  '#6a5acd': 'slateblue',
+  'slategray': 'slategray',
+  '#708090': 'slategray',
+  'slategrey': 'slategrey',
+  'snow': 'snow',
+  '#fffafa': 'snow',
+  'springgreen': 'springgreen',
+  '#00ff7f': 'springgreen',
+  'steelblue': 'steelblue',
+  '#4682b4': 'steelblue',
+  'tan': 'tan',
+  '#d2b48c': 'tan',
+  'teal': 'teal',
+  '#008080': 'teal',
+  'thistle': 'thistle',
+  '#d8bfd8': 'thistle',
+  'tomato': 'tomato',
+  '#ff6347': 'tomato',
+  'turquoise': 'turquoise',
+  '#40e0d0': 'turquoise',
+  'violet': 'violet',
+  '#ee82ee': 'violet',
+  'wheat': 'wheat',
+  '#f5deb3': 'wheat',
+  'white': 'white',
+  '#ffffff': 'white',
+  '#fff': 'white',
+  'whitesmoke': 'whitesmoke',
+  '#f5f5f5': 'whitesmoke',
+  'yellow': 'yellow',
+  '#ffff00': 'yellow',
+  '#ff0': 'yellow',
+  'yellowgreen': 'yellowgreen',
+  '#9acd32': 'yellowgreen',
+);