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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,9 @@
1
+ // Internals
1
2
  //
2
- // Helper functions that query the internal data structure in $chroma.
3
+ // Helper functions that query the internal data structure in $chroma. These are
4
+ // not part of the public API and are subject to change at any time.
3
5
  //
6
+ // Style guide: internals
4
7
 
5
8
  // Import the global variables needed by all of Chroma.
6
9
  @import './variables';
@@ -9,7 +12,7 @@
9
12
  //
10
13
  // Checks if the named color scheme exists.
11
14
  //
12
- // Style guide: sass.functions.chroma.chroma-has-scheme
15
+ // Style guide: internals.chroma-has-scheme
13
16
  @function chroma-has-scheme($scheme) {
14
17
  @return map-has-key(map-get($chroma, 'schemes'), $scheme);
15
18
  }
@@ -18,7 +21,7 @@
18
21
  //
19
22
  // Returns a list of all color schemes in $chroma.
20
23
  //
21
- // Style guide: sass.functions.chroma.chroma-schemes
24
+ // Style guide: internals.chroma-schemes
22
25
  @function chroma-schemes() {
23
26
  @return map-keys(map-get($chroma, 'schemes'));
24
27
  }
@@ -28,7 +31,7 @@
28
31
  // Checks if the named color exists in the given scheme or its parent schemes.
29
32
  // Returns false or a string of the scheme name that contains the color.
30
33
  //
31
- // Style guide: sass.functions.chroma.chroma-has-color
34
+ // Style guide: internals.chroma-has-color
32
35
  @function chroma-has-color($name, $scheme: $chroma-active-scheme) {
33
36
  $current-scheme: $scheme;
34
37
  @while $current-scheme {
@@ -46,7 +49,7 @@
46
49
  // Private function that adds a color to the data structure of the $chroma
47
50
  // variable.
48
51
  //
49
- // No styleguide reference
52
+ // Style guide: internals._chroma-add-name
50
53
  @function _chroma-add-name($scheme, $name, $value: false, $reference: false, $referenced_by: ()) {
51
54
  $names: map-merge(
52
55
  map-get($chroma, 'names'),
@@ -68,7 +71,7 @@
68
71
  // Private function that sets up the initial data structure of the $chroma
69
72
  // variable.
70
73
  //
71
- // No styleguide reference
74
+ // Style guide: internals._chroma-init
72
75
  @function _chroma-init() {
73
76
  @if length($chroma) == 0 {
74
77
  @return (
@@ -1,9 +1,16 @@
1
+ // KSS module
1
2
  //
2
- // "KSS" module for the system.
3
+ // A basic "KSS" module for Chroma.
3
4
  //
5
+ // Use `chroma-kss-markup()` to export a chunk of HTML wrapped in a `/* */` CSS
6
+ // comment. Then use `chroma-kss-styles()` to style it.
7
+ //
8
+ // @TODO: These functions and mixins are a bit janky because it exports to HTML
9
+ // directly rather than to JSON or some other exportable data set.
10
+ //
11
+ // Style guide: kss
4
12
 
5
-
6
- @import "./variables";
13
+ @import "./functions";
7
14
 
8
15
 
9
16
  // chroma-kss-markup()
@@ -11,13 +18,20 @@
11
18
  // Returns the HTML needed to display all colors in color() in a KSS style
12
19
  // guide. The parameters are used to specify the classes for various elements.
13
20
  //
21
+ // Since regular text can only be output with Sass in certain contexts, you must
22
+ // wrap this function call in a CSS comment.
23
+ //
14
24
  // Usage:
15
25
  // ```scss
26
+ // // Include chroma's optional kss module.
27
+ // @import 'chroma/kss';
28
+ // // Include the colors defined for your project.
16
29
  // @import 'init';
17
30
  //
18
31
  // /*
19
32
  // #{chroma-kss-markup()}
20
33
  // */
34
+ // ```
21
35
  //
22
36
  // Then use a Gulp.js or Grunt task to strip the leading and trailing lines
23
37
  // (containing "/*" and "*/" respectively) from the generated file.
@@ -28,8 +42,11 @@
28
42
  // $color-class - Defaults to 'chroma-kss'.
29
43
  // $swatch-class - Defaults to 'chroma-kss__swatch'.
30
44
  // $variable-class - Defaults to 'chroma-kss__variable'.
45
+ // $alt-text-class - Defaults to 'chroma-kss__alt-text'.
46
+ // $value-class - Defaults to 'chroma-kss__value'.
47
+ // $reference-class - Defaults to 'chroma-kss__reference'.
31
48
  //
32
- // style guide: sass.functions.chroma.chroma-kss-markup
49
+ // style guide: kss.chroma-kss-markup
33
50
 
34
51
  @function chroma-kss-markup(
35
52
  $wrapper-class: 'kss-style',
@@ -44,10 +61,6 @@
44
61
  ) {
45
62
  $markup: '';
46
63
 
47
- @if $wrapper-class {
48
- $markup: '<div class="' + $wrapper-class + '">';
49
- }
50
-
51
64
  @each $scheme, $data in map-get($chroma, 'schemes') {
52
65
  // Display the scheme name and description.
53
66
  $markup: $markup
@@ -66,23 +79,157 @@
66
79
  $markup: $markup
67
80
  + '<div class="#{$color-class}">'
68
81
  + '<span class="#{$swatch-class}" style="background-color: #{$value}"></span>'
69
- + '<code class="#{$variable-class}">color(#{$color})</code>'
70
- + ' <span class="#{$alt-text-class}">uses the color:</span> '
82
+ + '<code class="#{$variable-class}">#{$_chroma-spelling}(#{$color})</code>'
83
+ + ' <span class="#{$alt-text-class}">uses the #{$_chroma-spelling}:</span> '
71
84
  + '<span class="#{$value-class}"><code>#{$value}</code>';
72
85
  @if $reference {
73
86
  $markup: $markup + ' (#{$reference})';
74
87
  }
75
88
  $markup: $markup + '</span>';
76
89
  @if length($referenced_by) > 0 {
77
- $markup: $markup + ' <span class="#{$reference_class}">This color is inherited by: #{inspect($referenced_by)}</span>'
90
+ $markup: $markup + ' <span class="#{$reference_class}">This #{$_chroma-spelling} is inherited by: #{inspect($referenced_by)}</span>'
78
91
  }
79
92
  $markup: $markup + '</div>';
80
93
  }
81
94
  }
82
95
  }
83
96
 
84
- @if $wrapper-class {
85
- $markup: $markup + '</div>';
97
+ @if $markup and $wrapper-class {
98
+ $markup: '<div class="' + $wrapper-class + '">' + $markup + '</div>';
86
99
  }
100
+
101
+ $markup: '<!-- This markup is auto-generated from Sass with chroma-kss-markup(). Do not modify. -->' + $markup;
102
+
87
103
  @return $markup;
88
104
  }
105
+
106
+ // chroma-kss-styles()
107
+ //
108
+ // A mixin to add a series of rulesets that style Chroma color swatches in a KSS
109
+ // style guide.
110
+ //
111
+ // Since the mixin writes CSS selectors, the mixin can be used at the root of a
112
+ // stylesheet.
113
+ //
114
+ // Usage:
115
+ // ```scss
116
+ // // Include chroma's optional kss module.
117
+ // @import 'chroma/kss';
118
+ //
119
+ // @include chroma-kss-styles();
120
+ // ```
121
+ //
122
+ // $wrapper-class - Defaults to 'kss-style'.
123
+ // $title-class - Defaults to 'chroma-kss__title'.
124
+ // $description-class - Defaults to 'chroma-kss__description'.
125
+ // $color-class - Defaults to 'chroma-kss'.
126
+ // $swatch-class - Defaults to 'chroma-kss__swatch'.
127
+ // $variable-class - Defaults to 'chroma-kss__variable'.
128
+ // $alt-text-class - Defaults to 'chroma-kss__alt-text'.
129
+ // $value-class - Defaults to 'chroma-kss__value'.
130
+ // $reference-class - Defaults to 'chroma-kss__reference'.
131
+ //
132
+ // Style guide: kss.chroma-kss-styles
133
+
134
+ @mixin chroma-kss-styles(
135
+ $wrapper-class: 'kss-style',
136
+ $title-class: 'chroma-kss__title',
137
+ $description-class: 'chroma-kss__description',
138
+ $color-class: 'chroma-kss',
139
+ $swatch-class: 'chroma-kss__swatch',
140
+ $variable-class: 'chroma-kss__variable',
141
+ $alt-text-class: 'chroma-kss__alt-text',
142
+ $value-class: 'chroma-kss__value',
143
+ $reference-class: 'chroma-kss__reference'
144
+ ) {
145
+ @if $wrapper-class {
146
+ .#{$wrapper-class} {
147
+ @include _chroma-kss-styles(
148
+ $title-class,
149
+ $description-class,
150
+ $color-class,
151
+ $swatch-class,
152
+ $variable-class,
153
+ $alt-text-class,
154
+ $value-class,
155
+ $reference-class
156
+ );
157
+ }
158
+ }
159
+ @else {
160
+ @include _chroma-kss-styles(
161
+ $title-class,
162
+ $description-class,
163
+ $color-class,
164
+ $swatch-class,
165
+ $variable-class,
166
+ $alt-text-class,
167
+ $value-class,
168
+ $reference-class
169
+ );
170
+ }
171
+ }
172
+
173
+ @mixin _chroma-kss-styles(
174
+ $title-class: 'chroma-kss__title',
175
+ $description-class: 'chroma-kss__description',
176
+ $color-class: 'chroma-kss',
177
+ $swatch-class: 'chroma-kss__swatch',
178
+ $variable-class: 'chroma-kss__variable',
179
+ $alt-text-class: 'chroma-kss__alt-text',
180
+ $value-class: 'chroma-kss__value',
181
+ $reference-class: 'chroma-kss__reference'
182
+ ) {
183
+
184
+ .#{$color-class} {
185
+ line-height: 50px;
186
+ }
187
+
188
+ #{$swatch-class} {
189
+ display: inline-block;
190
+ width: 40px;
191
+ height: 40px;
192
+ border-radius: 40px;
193
+ border: 2px solid #000;
194
+ margin-right: 10px;
195
+ vertical-align: middle;
196
+ }
197
+
198
+ #{$variable-class} {
199
+ margin-right: 10px;
200
+ }
201
+
202
+ #{$alt-text-class} {
203
+ position: absolute !important;
204
+ height: 1px;
205
+ width: 1px;
206
+ overflow: hidden;
207
+ // IE6 and IE7 use the wrong syntax.
208
+ *clip: rect(1px 1px 1px 1px);
209
+ clip: rect(1px, 1px, 1px, 1px);
210
+ }
211
+
212
+ #{$value-class} {
213
+ color: #bbb;
214
+
215
+ code {
216
+ color: #bbb;
217
+ }
218
+
219
+ &:before {
220
+ // "\2192" is unicode for right arrow. "\ " is a hack; otherwise space is
221
+ // ignored in some browsers.
222
+ content: '\2192\ ';
223
+ font-family: sans-serif;
224
+ }
225
+ }
226
+
227
+ #{$reference-class} {
228
+ display: block;
229
+ position: relative;
230
+ top: -12px;
231
+ line-height: 25px;
232
+ padding-left: 50px;
233
+ color: #999;
234
+ }
235
+ }
@@ -1,19 +1,11 @@
1
+ // Variables module
1
2
  //
2
- // Variables module for Chroma; auto-imported by other modules.
3
+ // This module contains all the public and private variables needed for Chroma
4
+ // to function. Only public variables are documented.
3
5
  //
4
-
5
- //
6
- // Private variables.
6
+ // Auto-imported by other modules.
7
7
  //
8
-
9
- // The name of the default color scheme. There's no reason to change this value.
10
- $CHROMA_DEFAULT_SCHEME : 'default';
11
-
12
- // Let the Aussies, etc. have their preferred spelling.
13
- //
14
- // Rather than setting this variable directly, users should import the colour
15
- // module with: `@import 'chroma/colour';`
16
- $chroma-spelling : 'color' !default;
8
+ // Style guide: variables
17
9
 
18
10
  //
19
11
  // Public variables.
@@ -24,25 +16,390 @@ $chroma-spelling : 'color' !default;
24
16
  // The colors and meta-data managed by Chroma.
25
17
  //
26
18
  // Style guide: variables.chroma
27
- $chroma : () !default;
19
+ $chroma: () !default;
20
+
21
+ // $CHROMA_DEFAULT_SCHEME
22
+ //
23
+ // The name of the default color scheme. There seems to be no reason to change
24
+ // this value, but Chroma won't stifle your creativity.
25
+ //
26
+ // Style guide: variables.CHROMA_DEFAULT_SCHEME
27
+ $CHROMA_DEFAULT_SCHEME: 'default';
28
28
 
29
29
  // $chroma-active-scheme
30
30
  //
31
31
  // The currently active color scheme. This is the default value used by the
32
32
  // $scheme parameter of most Chroma functions.
33
33
  //
34
- // By default, this variable is set to the default color scheme.
34
+ // By default, this variable is set to the 'default' color scheme.
35
35
  //
36
36
  // Style guide: variables.chroma-active-scheme
37
- $chroma-active-scheme : $CHROMA_DEFAULT_SCHEME !default;
37
+ $chroma-active-scheme: $CHROMA_DEFAULT_SCHEME !default;
38
+
39
+ // $chroma-die-on-dangerous-keyword
40
+ //
41
+ // Controls whether Chroma will halt Sass compilation if it encounters a
42
+ // "dangerous color keyword".
43
+ //
44
+ // See the docs of is-dangerous-color-keyword() for more information.
45
+ //
46
+ // Style guide: variables.chroma-die-on-dangerous-keyword
47
+ $chroma-die-on-dangerous-keyword: true !default;
38
48
 
39
- // $chroma-die-on-ambiguous-keyword
40
49
  //
41
- // Since Chroma _will_ die when using an ambiguous color keyword with Sass'
42
- // "compressed" output style, we die with all other output styles too.
43
- // Otherwise, Chroma could behave differently on production vs. development
44
- // environments. If you are really sure Chroma will never be run with Sass'
45
- // "compressed" output style, you can disable this feature.
50
+ // Private variables.
51
+ //
52
+
53
+ // Let the Aussies, etc. have their preferred spelling.
54
+ //
55
+ // Rather than setting this variable directly, users should import the colour
56
+ // module with: `@import 'chroma/colour';`
57
+ $_chroma-spelling: 'color' !default;
58
+
59
+ // The following keywords will cause confusion if used as color names. See the
60
+ // docs of is-dangerous-color-keyword() for more information.
61
+ $_chroma-dangerous-keywords: (
62
+ 'aqua': 'aqua or cyan',
63
+ 'cyan': 'aqua or cyan',
64
+ 'fuchsia': 'fuchsia or magenta',
65
+ 'magenta': 'fuchsia or magenta',
66
+ 'darkgray': 'darkgray or darkgrey',
67
+ 'darkgrey': 'darkgray or darkgrey',
68
+ 'darkslategray': 'darkslategray or darkslategrey',
69
+ 'darkslategrey': 'darkslategray or darkslategrey',
70
+ 'dimgray': 'dimgray or dimgrey',
71
+ 'dimgrey': 'dimgray or dimgrey',
72
+ 'gray': 'gray or grey',
73
+ 'grey': 'gray or grey',
74
+ 'lightgray': 'lightgray or lightgrey',
75
+ 'lightgrey': 'lightgray or lightgrey',
76
+ 'lightslategray': 'lightslategray or lightslategrey',
77
+ 'lightslategrey': 'lightslategray or lightslategrey',
78
+ 'slategray': 'slategray or slategrey',
79
+ 'slategrey': 'slategray or slategrey',
80
+ );
81
+
82
+ // The following color values are the converted values of dangerous color
83
+ // keywords. If Chroma sees these values as color names, it means Sass converted
84
+ // the original color name before Chroma could see it. See the docs of
85
+ // is-dangerous-color-keyword() for more information.
86
+ $_chroma-dangerous-converted-keywords: (
87
+ '#00ffff': 'aqua or cyan',
88
+ '#0ff': 'aqua or cyan',
89
+ '#ff00ff': 'fuchsia or magenta',
90
+ '#f0f': 'fuchsia or magenta',
91
+ '#a9a9a9': 'darkgray or darkgrey',
92
+ '#2f4f4f': 'darkslategray or darkslategrey',
93
+ '#696969': 'dimgray or dimgrey',
94
+ '#808080': 'gray or grey',
95
+ '#d3d3d3': 'lightgray or lightgrey',
96
+ '#778899': 'lightslategray or lightslategrey',
97
+ '#789': 'lightslategray or lightslategrey',
98
+ '#708090': 'slategray or slategrey',
99
+ );
100
+
101
+ // We need to identify color names that are also color keywords so we can safely
102
+ // convert them to strings. Hex values are also included in the list since Sass
103
+ // may convert keywords to hex before Chroma can see them; this allows us to
104
+ // safely convert them back.
46
105
  //
47
- // Style guide: variables.chroma-die-on-ambiguous-keyword
48
- $chroma-die-on-ambiguous-keyword : true !default;
106
+ // This is the full list of CSS4 color keywords including the dangerous ones.
107
+ // From http://dev.w3.org/csswg/css-color-4/#named-colors
108
+ $_chroma-css4-color-keywords: (
109
+ 'aliceblue': 'aliceblue',
110
+ '#f0f8ff': 'aliceblue',
111
+ 'antiquewhite': 'antiquewhite',
112
+ '#faebd7': 'antiquewhite',
113
+ 'aqua': 'aqua',
114
+ 'aquamarine': 'aquamarine',
115
+ '#7fffd4': 'aquamarine',
116
+ 'azure': 'azure',
117
+ '#f0ffff': 'azure',
118
+ 'beige': 'beige',
119
+ '#f5f5dc': 'beige',
120
+ 'bisque': 'bisque',
121
+ '#ffe4c4': 'bisque',
122
+ 'black': 'black',
123
+ '#000000': 'black',
124
+ '#000': 'black',
125
+ 'blanchedalmond': 'blanchedalmond',
126
+ '#ffebcd': 'blanchedalmond',
127
+ 'blue': 'blue',
128
+ '#0000ff': 'blue',
129
+ '#00f': 'blue',
130
+ 'blueviolet': 'blueviolet',
131
+ '#8a2be2': 'blueviolet',
132
+ 'brown': 'brown',
133
+ '#a52a2a': 'brown',
134
+ 'burlywood': 'burlywood',
135
+ '#deb887': 'burlywood',
136
+ 'cadetblue': 'cadetblue',
137
+ '#5f9ea0': 'cadetblue',
138
+ 'chartreuse': 'chartreuse',
139
+ '#7fff00': 'chartreuse',
140
+ 'chocolate': 'chocolate',
141
+ '#d2691e': 'chocolate',
142
+ 'coral': 'coral',
143
+ '#ff7f50': 'coral',
144
+ 'cornflowerblue': 'cornflowerblue',
145
+ '#6495ed': 'cornflowerblue',
146
+ 'cornsilk': 'cornsilk',
147
+ '#fff8dc': 'cornsilk',
148
+ 'crimson': 'crimson',
149
+ '#dc143c': 'crimson',
150
+ 'cyan': 'cyan',
151
+ '#00ffff': 'cyan',
152
+ '#0ff': 'cyan',
153
+ 'darkblue': 'darkblue',
154
+ '#00008b': 'darkblue',
155
+ 'darkcyan': 'darkcyan',
156
+ '#008b8b': 'darkcyan',
157
+ 'darkgoldenrod': 'darkgoldenrod',
158
+ '#b8860b': 'darkgoldenrod',
159
+ 'darkgray': 'darkgray',
160
+ '#a9a9a9': 'darkgray',
161
+ 'darkgreen': 'darkgreen',
162
+ '#006400': 'darkgreen',
163
+ 'darkgrey': 'darkgrey',
164
+ 'darkkhaki': 'darkkhaki',
165
+ '#bdb76b': 'darkkhaki',
166
+ 'darkmagenta': 'darkmagenta',
167
+ '#8b008b': 'darkmagenta',
168
+ 'darkolivegreen': 'darkolivegreen',
169
+ '#556b2f': 'darkolivegreen',
170
+ 'darkorange': 'darkorange',
171
+ '#ff8c00': 'darkorange',
172
+ 'darkorchid': 'darkorchid',
173
+ '#9932cc': 'darkorchid',
174
+ 'darkred': 'darkred',
175
+ '#8b0000': 'darkred',
176
+ 'darksalmon': 'darksalmon',
177
+ '#e9967a': 'darksalmon',
178
+ 'darkseagreen': 'darkseagreen',
179
+ '#8fbc8f': 'darkseagreen',
180
+ 'darkslateblue': 'darkslateblue',
181
+ '#483d8b': 'darkslateblue',
182
+ 'darkslategray': 'darkslategray',
183
+ '#2f4f4f': 'darkslategray',
184
+ 'darkslategrey': 'darkslategrey',
185
+ 'darkturquoise': 'darkturquoise',
186
+ '#00ced1': 'darkturquoise',
187
+ 'darkviolet': 'darkviolet',
188
+ '#9400d3': 'darkviolet',
189
+ 'deeppink': 'deeppink',
190
+ '#ff1493': 'deeppink',
191
+ 'deepskyblue': 'deepskyblue',
192
+ '#00bfff': 'deepskyblue',
193
+ 'dimgray': 'dimgray',
194
+ '#696969': 'dimgray',
195
+ 'dimgrey': 'dimgrey',
196
+ 'dodgerblue': 'dodgerblue',
197
+ '#1e90ff': 'dodgerblue',
198
+ 'firebrick': 'firebrick',
199
+ '#b22222': 'firebrick',
200
+ 'floralwhite': 'floralwhite',
201
+ '#fffaf0': 'floralwhite',
202
+ 'forestgreen': 'forestgreen',
203
+ '#228b22': 'forestgreen',
204
+ 'fuchsia': 'fuchsia',
205
+ 'gainsboro': 'gainsboro',
206
+ '#dcdcdc': 'gainsboro',
207
+ 'ghostwhite': 'ghostwhite',
208
+ '#f8f8ff': 'ghostwhite',
209
+ 'gold': 'gold',
210
+ '#ffd700': 'gold',
211
+ 'goldenrod': 'goldenrod',
212
+ '#daa520': 'goldenrod',
213
+ 'gray': 'gray',
214
+ '#808080': 'gray',
215
+ 'green': 'green',
216
+ '#008000': 'green',
217
+ 'greenyellow': 'greenyellow',
218
+ '#adff2f': 'greenyellow',
219
+ 'grey': 'grey',
220
+ 'honeydew': 'honeydew',
221
+ '#f0fff0': 'honeydew',
222
+ 'hotpink': 'hotpink',
223
+ '#ff69b4': 'hotpink',
224
+ 'indianred': 'indianred',
225
+ '#cd5c5c': 'indianred',
226
+ 'indigo': 'indigo',
227
+ '#4b0082': 'indigo',
228
+ 'ivory': 'ivory',
229
+ '#fffff0': 'ivory',
230
+ 'khaki': 'khaki',
231
+ '#f0e68c': 'khaki',
232
+ 'lavender': 'lavender',
233
+ '#e6e6fa': 'lavender',
234
+ 'lavenderblush': 'lavenderblush',
235
+ '#fff0f5': 'lavenderblush',
236
+ 'lawngreen': 'lawngreen',
237
+ '#7cfc00': 'lawngreen',
238
+ 'lemonchiffon': 'lemonchiffon',
239
+ '#fffacd': 'lemonchiffon',
240
+ 'lightblue': 'lightblue',
241
+ '#add8e6': 'lightblue',
242
+ 'lightcoral': 'lightcoral',
243
+ '#f08080': 'lightcoral',
244
+ 'lightcyan': 'lightcyan',
245
+ '#e0ffff': 'lightcyan',
246
+ 'lightgoldenrodyellow': 'lightgoldenrodyellow',
247
+ '#fafad2': 'lightgoldenrodyellow',
248
+ 'lightgray': 'lightgray',
249
+ '#d3d3d3': 'lightgray',
250
+ 'lightgreen': 'lightgreen',
251
+ '#90ee90': 'lightgreen',
252
+ 'lightgrey': 'lightgrey',
253
+ 'lightpink': 'lightpink',
254
+ '#ffb6c1': 'lightpink',
255
+ 'lightsalmon': 'lightsalmon',
256
+ '#ffa07a': 'lightsalmon',
257
+ 'lightseagreen': 'lightseagreen',
258
+ '#20b2aa': 'lightseagreen',
259
+ 'lightskyblue': 'lightskyblue',
260
+ '#87cefa': 'lightskyblue',
261
+ 'lightslategray': 'lightslategray',
262
+ '#778899': 'lightslategray',
263
+ '#789': 'lightslategray',
264
+ 'lightslategrey': 'lightslategrey',
265
+ 'lightsteelblue': 'lightsteelblue',
266
+ '#b0c4de': 'lightsteelblue',
267
+ 'lightyellow': 'lightyellow',
268
+ '#ffffe0': 'lightyellow',
269
+ 'lime': 'lime',
270
+ '#00ff00': 'lime',
271
+ '#0f0': 'lime',
272
+ 'limegreen': 'limegreen',
273
+ '#32cd32': 'limegreen',
274
+ 'linen': 'linen',
275
+ '#faf0e6': 'linen',
276
+ 'magenta': 'magenta',
277
+ '#ff00ff': 'magenta',
278
+ '#f0f': 'magenta',
279
+ 'maroon': 'maroon',
280
+ '#800000': 'maroon',
281
+ 'mediumaquamarine': 'mediumaquamarine',
282
+ '#66cdaa': 'mediumaquamarine',
283
+ 'mediumblue': 'mediumblue',
284
+ '#0000cd': 'mediumblue',
285
+ 'mediumorchid': 'mediumorchid',
286
+ '#ba55d3': 'mediumorchid',
287
+ 'mediumpurple': 'mediumpurple',
288
+ '#9370db': 'mediumpurple',
289
+ 'mediumseagreen': 'mediumseagreen',
290
+ '#3cb371': 'mediumseagreen',
291
+ 'mediumslateblue': 'mediumslateblue',
292
+ '#7b68ee': 'mediumslateblue',
293
+ 'mediumspringgreen': 'mediumspringgreen',
294
+ '#00fa9a': 'mediumspringgreen',
295
+ 'mediumturquoise': 'mediumturquoise',
296
+ '#48d1cc': 'mediumturquoise',
297
+ 'mediumvioletred': 'mediumvioletred',
298
+ '#c71585': 'mediumvioletred',
299
+ 'midnightblue': 'midnightblue',
300
+ '#191970': 'midnightblue',
301
+ 'mintcream': 'mintcream',
302
+ '#f5fffa': 'mintcream',
303
+ 'mistyrose': 'mistyrose',
304
+ '#ffe4e1': 'mistyrose',
305
+ 'moccasin': 'moccasin',
306
+ '#ffe4b5': 'moccasin',
307
+ 'navajowhite': 'navajowhite',
308
+ '#ffdead': 'navajowhite',
309
+ 'navy': 'navy',
310
+ '#000080': 'navy',
311
+ 'oldlace': 'oldlace',
312
+ '#fdf5e6': 'oldlace',
313
+ 'olive': 'olive',
314
+ '#808000': 'olive',
315
+ 'olivedrab': 'olivedrab',
316
+ '#6b8e23': 'olivedrab',
317
+ 'orange': 'orange',
318
+ '#ffa500': 'orange',
319
+ 'orangered': 'orangered',
320
+ '#ff4500': 'orangered',
321
+ 'orchid': 'orchid',
322
+ '#da70d6': 'orchid',
323
+ 'palegoldenrod': 'palegoldenrod',
324
+ '#eee8aa': 'palegoldenrod',
325
+ 'palegreen': 'palegreen',
326
+ '#98fb98': 'palegreen',
327
+ 'paleturquoise': 'paleturquoise',
328
+ '#afeeee': 'paleturquoise',
329
+ 'palevioletred': 'palevioletred',
330
+ '#db7093': 'palevioletred',
331
+ 'papayawhip': 'papayawhip',
332
+ '#ffefd5': 'papayawhip',
333
+ 'peachpuff': 'peachpuff',
334
+ '#ffdab9': 'peachpuff',
335
+ 'peru': 'peru',
336
+ '#cd853f': 'peru',
337
+ 'pink': 'pink',
338
+ '#ffc0cb': 'pink',
339
+ 'plum': 'plum',
340
+ '#dda0dd': 'plum',
341
+ 'powderblue': 'powderblue',
342
+ '#b0e0e6': 'powderblue',
343
+ 'purple': 'purple',
344
+ '#800080': 'purple',
345
+ 'rebeccapurple': 'rebeccapurple',
346
+ '#663399': 'rebeccapurple',
347
+ 'red': 'red',
348
+ '#ff0000': 'red',
349
+ '#f00': 'red',
350
+ 'rosybrown': 'rosybrown',
351
+ '#bc8f8f': 'rosybrown',
352
+ 'royalblue': 'royalblue',
353
+ '#4169e1': 'royalblue',
354
+ 'saddlebrown': 'saddlebrown',
355
+ '#8b4513': 'saddlebrown',
356
+ 'salmon': 'salmon',
357
+ '#fa8072': 'salmon',
358
+ 'sandybrown': 'sandybrown',
359
+ '#f4a460': 'sandybrown',
360
+ 'seagreen': 'seagreen',
361
+ '#2e8b57': 'seagreen',
362
+ 'seashell': 'seashell',
363
+ '#fff5ee': 'seashell',
364
+ 'sienna': 'sienna',
365
+ '#a0522d': 'sienna',
366
+ 'silver': 'silver',
367
+ '#c0c0c0': 'silver',
368
+ 'skyblue': 'skyblue',
369
+ '#87ceeb': 'skyblue',
370
+ 'slateblue': 'slateblue',
371
+ '#6a5acd': 'slateblue',
372
+ 'slategray': 'slategray',
373
+ '#708090': 'slategray',
374
+ 'slategrey': 'slategrey',
375
+ 'snow': 'snow',
376
+ '#fffafa': 'snow',
377
+ 'springgreen': 'springgreen',
378
+ '#00ff7f': 'springgreen',
379
+ 'steelblue': 'steelblue',
380
+ '#4682b4': 'steelblue',
381
+ 'tan': 'tan',
382
+ '#d2b48c': 'tan',
383
+ 'teal': 'teal',
384
+ '#008080': 'teal',
385
+ 'thistle': 'thistle',
386
+ '#d8bfd8': 'thistle',
387
+ 'tomato': 'tomato',
388
+ '#ff6347': 'tomato',
389
+ 'turquoise': 'turquoise',
390
+ '#40e0d0': 'turquoise',
391
+ 'violet': 'violet',
392
+ '#ee82ee': 'violet',
393
+ 'wheat': 'wheat',
394
+ '#f5deb3': 'wheat',
395
+ 'white': 'white',
396
+ '#ffffff': 'white',
397
+ '#fff': 'white',
398
+ 'whitesmoke': 'whitesmoke',
399
+ '#f5f5f5': 'whitesmoke',
400
+ 'yellow': 'yellow',
401
+ '#ffff00': 'yellow',
402
+ '#ff0': 'yellow',
403
+ 'yellowgreen': 'yellowgreen',
404
+ '#9acd32': 'yellowgreen',
405
+ );