chroma-sass 1.0.0.alpha.4 → 1.0.0.alpha.5
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.
- checksums.yaml +4 -4
- data/README.md +73 -8
- data/chroma-sass.gemspec +3 -3
- data/sass/_chroma.scss +1 -1
- data/sass/chroma/_colour.scss +132 -0
- data/sass/chroma/_functions.scss +562 -63
- data/sass/chroma/_internals.scss +87 -0
- data/sass/chroma/_kss-styles.scss +13 -0
- data/sass/chroma/_kss.scss +27 -11
- data/sass/chroma/_variables.scss +45 -3
- metadata +7 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: cb36b676551138964c229945e811261ea436f152
|
|
4
|
+
data.tar.gz: 40511de621e5059aebc7b0bf27ee7f9d00559ec5
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: af4eb5a017b45b290e96e31d0640e67acfbaeae343713405699d7c72f7ad2e25a57b83da1e5bf546890e1ad03e20a3f9433add16b5cf34e9ccbd73a40581c303
|
|
7
|
+
data.tar.gz: a463b2746e734f247fff4d06537c203c142bb38b8b73a20aeae1e9f01dcf5cad84d8889c242695451ca119cd7b73199246908b9e2ccadcc07aea7872fd5227c9
|
data/README.md
CHANGED
|
@@ -6,11 +6,80 @@ Chroma is a Sass library that manages a project's color names, color variations,
|
|
|
6
6
|
|
|
7
7
|
## USAGE
|
|
8
8
|
|
|
9
|
+
Betters docs are coming, but here's some documentation in the form of example
|
|
10
|
+
code.
|
|
11
|
+
|
|
9
12
|
```scss
|
|
10
13
|
@import "chroma";
|
|
11
|
-
```
|
|
12
14
|
|
|
13
|
-
|
|
15
|
+
// Define the default color scheme.
|
|
16
|
+
$chroma: define-default-color-scheme('Descriptive color names for use in "functional" color names below.');
|
|
17
|
+
|
|
18
|
+
// Add colors to the default color scheme.
|
|
19
|
+
$chroma: add-colors((
|
|
20
|
+
white: #fff,
|
|
21
|
+
off-white: #eaeaea,
|
|
22
|
+
grey-medium: #706e6c,
|
|
23
|
+
black: #000,
|
|
24
|
+
|
|
25
|
+
blue: #0e71b8,
|
|
26
|
+
blue-dark: shade(#0e71b8, 25%),
|
|
27
|
+
));
|
|
28
|
+
|
|
29
|
+
// Create a "functional" color scheme that inherits from the default color scheme.
|
|
30
|
+
$chroma: define-color-scheme('functional', 'Colors used by functional parts of the design.');
|
|
31
|
+
|
|
32
|
+
// Add colors to the functional color scheme.
|
|
33
|
+
$chroma: add-colors('functional', (
|
|
34
|
+
// Have the "text" color use the hex value given to the "black" color. Even
|
|
35
|
+
// though the "functional" color scheme doesn't define "black", it inherits
|
|
36
|
+
// from the "default" color scheme where "black" is defined.
|
|
37
|
+
text: 'black',
|
|
38
|
+
text-subdued: 'grey-medium',
|
|
39
|
+
|
|
40
|
+
// The primary highlight color.
|
|
41
|
+
primary: 'blue',
|
|
42
|
+
|
|
43
|
+
// Have the link color use the primary color.
|
|
44
|
+
link: 'primary',
|
|
45
|
+
link-active: 'blue-dark',
|
|
46
|
+
|
|
47
|
+
site-name: 'primary',
|
|
48
|
+
heading: 'text',
|
|
49
|
+
));
|
|
50
|
+
|
|
51
|
+
// Create an "alternate" color scheme that inherits from the "functional" color scheme.
|
|
52
|
+
$chroma: define-color-scheme('alternate', 'Alternate colors for the site.', 'functional');
|
|
53
|
+
|
|
54
|
+
// Add colors to the alternate color scheme.
|
|
55
|
+
$chroma: add-colors('alternate', (
|
|
56
|
+
red: #c00,
|
|
57
|
+
primary: 'red',
|
|
58
|
+
));
|
|
59
|
+
|
|
60
|
+
// Set which color scheme should be used by default when calling the color()
|
|
61
|
+
// function.
|
|
62
|
+
$chroma-active-scheme: 'functional';
|
|
63
|
+
|
|
64
|
+
.example-ruleset {
|
|
65
|
+
h1 {
|
|
66
|
+
// Outputs #000.
|
|
67
|
+
color: color(heading);
|
|
68
|
+
}
|
|
69
|
+
a {
|
|
70
|
+
// Outputs #0e71b8.
|
|
71
|
+
color: color(link);
|
|
72
|
+
|
|
73
|
+
.alternate-color-section & {
|
|
74
|
+
// Outputs #c00.
|
|
75
|
+
color: color(link, alternate);
|
|
76
|
+
// @TODO: Whoops! This doesn't work yet because it finds the "link" color
|
|
77
|
+
// value in the functional color scheme and never sees that the primary
|
|
78
|
+
// color has changed.
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
```
|
|
14
83
|
|
|
15
84
|
## INSTALLATION
|
|
16
85
|
|
|
@@ -23,7 +92,7 @@ gem install chroma-sass
|
|
|
23
92
|
If you are using Bundler (and you should!) then you can add it to an existing project by editing the project's Gemfile and adding this line:
|
|
24
93
|
|
|
25
94
|
```ruby
|
|
26
|
-
gem 'chroma-sass', '~> 1.0.0.alpha.
|
|
95
|
+
gem 'chroma-sass', '~> 1.0.0.alpha.5'
|
|
27
96
|
```
|
|
28
97
|
|
|
29
98
|
If you are using Compass, edit your project's config.rb and add this line:
|
|
@@ -38,14 +107,10 @@ You can then start using Chroma in your Sass files. Just add this line to one of
|
|
|
38
107
|
@import "chroma";
|
|
39
108
|
```
|
|
40
109
|
|
|
41
|
-
|
|
42
110
|
## REQUIREMENTS
|
|
43
111
|
|
|
44
|
-
* Sass 3.
|
|
45
|
-
|
|
112
|
+
* Sass 3.4.0 or later
|
|
46
113
|
|
|
47
114
|
## LICENSE
|
|
48
115
|
|
|
49
116
|
Available under the GPL v2 license. See [LICENSE.txt](https://github.com/JohnAlbin/chroma/blob/master/LICENSE.txt).
|
|
50
|
-
|
|
51
|
-
[](https://travis-ci.org/JohnAlbin/chroma)
|
data/chroma-sass.gemspec
CHANGED
|
@@ -9,14 +9,14 @@ Gem::Specification.new do |spec|
|
|
|
9
9
|
spec.homepage = 'http://github.com/JohnAlbin/chroma'
|
|
10
10
|
spec.rubyforge_project =
|
|
11
11
|
|
|
12
|
-
spec.version = '1.0.0.alpha.
|
|
13
|
-
spec.date = '2015-04-
|
|
12
|
+
spec.version = '1.0.0.alpha.5'
|
|
13
|
+
spec.date = '2015-04-30'
|
|
14
14
|
spec.licenses = ['GPL-2']
|
|
15
15
|
|
|
16
16
|
spec.authors = ['John Albin Wilkins']
|
|
17
17
|
spec.email = 'virtually.johnalbin@gmail.com'
|
|
18
18
|
|
|
19
|
-
spec.add_runtime_dependency('sass', "~> 3.
|
|
19
|
+
spec.add_runtime_dependency('sass', "~> 3.4")
|
|
20
20
|
|
|
21
21
|
spec.files = `git ls-files`.split($/).select {|f| File.exist?(f) && f =~ %r{^(lib|sass)/} }
|
|
22
22
|
spec.files += %w(
|
data/sass/_chroma.scss
CHANGED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Colour module for Chroma.
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
// Import the main module of Chroma.
|
|
6
|
+
@import './functions';
|
|
7
|
+
|
|
8
|
+
// The one true spelling.
|
|
9
|
+
$chroma-spelling : 'colour';
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
// is-dangerous-colour-keyword($name)
|
|
13
|
+
//
|
|
14
|
+
// Checks if the given name is a colour keyword. Returns false or a string
|
|
15
|
+
// containing the name of the colour keyword.
|
|
16
|
+
//
|
|
17
|
+
// $name - The name of the colour to check.
|
|
18
|
+
//
|
|
19
|
+
// Style guide: colour.is-dangerous-colour-keyword
|
|
20
|
+
@function is-dangerous-colour-keyword($name) {
|
|
21
|
+
@return is-dangerous-color-keyword($name);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// is-colour-keyword($name)
|
|
25
|
+
//
|
|
26
|
+
// Checks if the given name is a colour keyword. Returns false or a string
|
|
27
|
+
// containing the name of the colour keyword.
|
|
28
|
+
//
|
|
29
|
+
// $name - The name of the colour to check.
|
|
30
|
+
//
|
|
31
|
+
// Style guide: colour.is-colour-keyword
|
|
32
|
+
@function is-colour-keyword($name) {
|
|
33
|
+
@return is-color-keyword($name);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// colour([$scheme,] $name)
|
|
37
|
+
//
|
|
38
|
+
// Returns a colour value given a key word and optional colour scheme. If the
|
|
39
|
+
// named colour is not in the colour scheme, the colour scheme's parent scheme will
|
|
40
|
+
// be searched.
|
|
41
|
+
//
|
|
42
|
+
// Usage:
|
|
43
|
+
// ```scss
|
|
44
|
+
// .ex {
|
|
45
|
+
// background-color: colour(body-bg);
|
|
46
|
+
// border: 1px solid colour(grace, border);
|
|
47
|
+
// }
|
|
48
|
+
// ```
|
|
49
|
+
//
|
|
50
|
+
// $name - The name of the requested colour.
|
|
51
|
+
// $scheme - Optional colour scheme to choose from; defaults to
|
|
52
|
+
// `$chroma-active-scheme`.
|
|
53
|
+
//
|
|
54
|
+
// Style guide: colour.colour
|
|
55
|
+
@function colour($scheme, $name: null) {
|
|
56
|
+
@return color($scheme, $name);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// define-colour-scheme($scheme [, $description] [, $parent])
|
|
60
|
+
//
|
|
61
|
+
// Define a new colour scheme and, optionally, set its description and parent
|
|
62
|
+
// colour scheme.
|
|
63
|
+
//
|
|
64
|
+
// When searching for a colour and the colour scheme does not define that
|
|
65
|
+
// particular colour, the parent colour scheme will be checked to see if it
|
|
66
|
+
// defines that colour.
|
|
67
|
+
//
|
|
68
|
+
// By default, all colour schemes inherit their colours from the default colour
|
|
69
|
+
// scheme. Optionally, a colour scheme can choose to inherit from a different
|
|
70
|
+
// colour scheme by specifying the `$parent` parameter.
|
|
71
|
+
//
|
|
72
|
+
// Usage:
|
|
73
|
+
// ```scss
|
|
74
|
+
// $chroma: define-colour-scheme(taiwan, "Taiwan's colours");
|
|
75
|
+
// $chroma: define-colour-scheme(taipei, "Taipei's colours", $parent: taiwan);
|
|
76
|
+
// ```
|
|
77
|
+
//
|
|
78
|
+
// $scheme - The name of the new colour scheme.
|
|
79
|
+
// $description - Optional description of the colour scheme.
|
|
80
|
+
// $parent - The parent colour scheme to inherit colours from; defaults to
|
|
81
|
+
// `default` (i.e. `$CHROMA_DEFAULT_SCHEME`).
|
|
82
|
+
//
|
|
83
|
+
// Style guide: colour.define-colour-scheme
|
|
84
|
+
@function define-colour-scheme($scheme, $description: '', $parent: $CHROMA_DEFAULT_SCHEME) {
|
|
85
|
+
@return define-color-scheme($scheme, $description, $parent);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// define-default-colour-scheme($description)
|
|
89
|
+
//
|
|
90
|
+
// Sets the description of the default colour scheme.
|
|
91
|
+
//
|
|
92
|
+
// Usage:
|
|
93
|
+
// ```scss
|
|
94
|
+
// $chroma: define-default-colour-scheme('Default colours');
|
|
95
|
+
// ```
|
|
96
|
+
//
|
|
97
|
+
// $description - Description of the default colour scheme.
|
|
98
|
+
//
|
|
99
|
+
// Style guide: colour.define-default-colour-scheme
|
|
100
|
+
@function define-default-colour-scheme($description) {
|
|
101
|
+
@return define-color-scheme($CHROMA_DEFAULT_SCHEME, $description);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// add-colours([$scheme,] $colours)
|
|
105
|
+
//
|
|
106
|
+
// Add the colours to an existing colour scheme.
|
|
107
|
+
//
|
|
108
|
+
// Usage:
|
|
109
|
+
// ```scss
|
|
110
|
+
// $my-colours: add-colours('admiral', (
|
|
111
|
+
// nav: 'link',
|
|
112
|
+
// nav-visited: colour(link-visited),
|
|
113
|
+
// nav-focus: colour(link-focus),
|
|
114
|
+
// ));
|
|
115
|
+
// ```
|
|
116
|
+
//
|
|
117
|
+
// If you wish to add colours to the active scheme, you can just use:
|
|
118
|
+
// ```scss
|
|
119
|
+
// $my-colours: add-colours((
|
|
120
|
+
// nav: 'link',
|
|
121
|
+
// nav-visited: colour(link-visited),
|
|
122
|
+
// nav-focus: colour(link-focus),
|
|
123
|
+
// ));
|
|
124
|
+
// ```
|
|
125
|
+
//
|
|
126
|
+
// $colours - A Sass map containing the new colours.
|
|
127
|
+
// $scheme - The name of an existing colour scheme.
|
|
128
|
+
//
|
|
129
|
+
// Style guide: functions.add-colours
|
|
130
|
+
@function add-colours($scheme, $colours: null) {
|
|
131
|
+
@return add-colors($scheme, $colours);
|
|
132
|
+
}
|
data/sass/chroma/_functions.scss
CHANGED
|
@@ -1,120 +1,619 @@
|
|
|
1
1
|
//
|
|
2
|
-
// Main module for
|
|
2
|
+
// Main module for Chroma.
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
// Import the global variables and internal functions needed by all of Chroma.
|
|
6
|
+
@import './variables';
|
|
7
|
+
@import './internals';
|
|
5
8
|
|
|
6
|
-
//
|
|
7
|
-
|
|
9
|
+
// Initialize the $chroma data structure.
|
|
10
|
+
$chroma: _chroma-init();
|
|
8
11
|
|
|
9
12
|
|
|
10
|
-
// color($
|
|
13
|
+
// is-dangerous-color-keyword($name)
|
|
14
|
+
//
|
|
15
|
+
// If a real Sass color is given as a color name to Chroma, it is in danger of
|
|
16
|
+
// being converted to a hexadecimal value before Chroma can read the name. And
|
|
17
|
+
// some hex values map to more than one keyword (e.g. gray and grey), so the
|
|
18
|
+
// original name would be irretrievable.
|
|
19
|
+
//
|
|
20
|
+
// Checks if the given name is one of those dangerous color keywords. Returns
|
|
21
|
+
// false or causes the Sass compilation to die with an error message containing
|
|
22
|
+
// the name of the ambiguous color keywords.
|
|
23
|
+
//
|
|
24
|
+
// $name - The name of the color to check.
|
|
25
|
+
//
|
|
26
|
+
// Style guide: functions.is-dangerous-color-keyword
|
|
27
|
+
@function is-dangerous-color-keyword($name) {
|
|
28
|
+
$ambiguous-keywords: (
|
|
29
|
+
'aqua': 'aqua or cyan',
|
|
30
|
+
'cyan': 'aqua or cyan',
|
|
31
|
+
'fuchsia': 'fuchsia or magenta',
|
|
32
|
+
'magenta': 'fuchsia or magenta',
|
|
33
|
+
'darkgray': 'darkgray or darkgrey',
|
|
34
|
+
'darkgrey': 'darkgray or darkgrey',
|
|
35
|
+
'darkslategray': 'darkslategray or darkslategrey',
|
|
36
|
+
'darkslategrey': 'darkslategray or darkslategrey',
|
|
37
|
+
'dimgray': 'dimgray or dimgrey',
|
|
38
|
+
'dimgrey': 'dimgray or dimgrey',
|
|
39
|
+
'gray': 'gray or grey',
|
|
40
|
+
'grey': 'gray or grey',
|
|
41
|
+
'lightgray': 'lightgray or lightgrey',
|
|
42
|
+
'lightgrey': 'lightgray or lightgrey',
|
|
43
|
+
'lightslategray': 'lightslategray or lightslategrey',
|
|
44
|
+
'lightslategrey': 'lightslategray or lightslategrey',
|
|
45
|
+
'slategray': 'slategray or slategrey',
|
|
46
|
+
'slategrey': 'slategray or slategrey',
|
|
47
|
+
);
|
|
48
|
+
$converted-keywords: (
|
|
49
|
+
'#00ffff': 'aqua or cyan',
|
|
50
|
+
'#0ff': 'aqua or cyan',
|
|
51
|
+
'#ff00ff': 'fuchsia or magenta',
|
|
52
|
+
'#f0f': 'fuchsia or magenta',
|
|
53
|
+
'#a9a9a9': 'darkgray or darkgrey',
|
|
54
|
+
'#2f4f4f': 'darkslategray or darkslategrey',
|
|
55
|
+
'#696969': 'dimgray or dimgrey',
|
|
56
|
+
'#808080': 'gray or grey',
|
|
57
|
+
'#d3d3d3': 'lightgray or lightgrey',
|
|
58
|
+
'#778899': 'lightslategray or lightslategrey',
|
|
59
|
+
'#789': 'lightslategray or lightslategrey',
|
|
60
|
+
'#708090': 'slategray or slategrey',
|
|
61
|
+
);
|
|
62
|
+
|
|
63
|
+
@if type-of($name) == 'color' {
|
|
64
|
+
// Convert the color to a string.
|
|
65
|
+
$name: inspect($name);
|
|
66
|
+
// Check if Sass will convert the color into a hex value that we can't
|
|
67
|
+
// convert back to a keyword.
|
|
68
|
+
@if map-has-key($ambiguous-keywords, $name) {
|
|
69
|
+
@if $chroma-die-on-ambiguous-keyword {
|
|
70
|
+
@error "Sass will convert #{$name} into a hexidecimal value when it uses the \"compressed\" output style and Chroma will not be able to determine if the original name was #{map-get($ambiguous-keywords, $name)}. To prevent this error, quote the keyword like this: '#{$name}'.";
|
|
71
|
+
}
|
|
72
|
+
@else {
|
|
73
|
+
@return map-get($ambiguous-keywords, $name);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
// Check if Sass _has_ converted the color into a hex value that we can't
|
|
77
|
+
// convert back to a keyword.
|
|
78
|
+
@else if map-has-key($converted-keywords, $name) {
|
|
79
|
+
@error "Sass has converted a color keyword into the hexidecimal value, #{$name}, and Chroma was not be able to determine if the original name was #{map-get($ambiguous-keywords, $name)}. To prevent this error, use quotes around the keyword.";
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
@return false;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// is-color-keyword($name)
|
|
86
|
+
//
|
|
87
|
+
// Checks if the given name is a color keyword. Returns false or a string
|
|
88
|
+
// containing the name of the color keyword.
|
|
89
|
+
//
|
|
90
|
+
// $name - The name of the color to check.
|
|
91
|
+
//
|
|
92
|
+
// Style guide: functions.is-color-keyword
|
|
93
|
+
@function is-color-keyword($name) {
|
|
94
|
+
// If a real Sass color is given, it is in danger of being converted to a
|
|
95
|
+
// hexadecimal value before we can read the name. And some hex values map to
|
|
96
|
+
// more than one keyword (e.g. gray and grey), so the original name would be
|
|
97
|
+
// irretrievable.
|
|
98
|
+
@if is-dangerous-color-keyword($name) {
|
|
99
|
+
// If true, the is-dangerous-color-keyword() would @die before it returned.
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// CSS4 color keyword are from
|
|
103
|
+
// http://dev.w3.org/csswg/css-color-4/#named-colors
|
|
104
|
+
$css4-color-keywords: (
|
|
105
|
+
'aliceblue': 'aliceblue',
|
|
106
|
+
'#f0f8ff': 'aliceblue',
|
|
107
|
+
'antiquewhite': 'antiquewhite',
|
|
108
|
+
'#faebd7': 'antiquewhite',
|
|
109
|
+
'aqua': 'aqua',
|
|
110
|
+
'aquamarine': 'aquamarine',
|
|
111
|
+
'#7fffd4': 'aquamarine',
|
|
112
|
+
'azure': 'azure',
|
|
113
|
+
'#f0ffff': 'azure',
|
|
114
|
+
'beige': 'beige',
|
|
115
|
+
'#f5f5dc': 'beige',
|
|
116
|
+
'bisque': 'bisque',
|
|
117
|
+
'#ffe4c4': 'bisque',
|
|
118
|
+
'black': 'black',
|
|
119
|
+
'#000000': 'black',
|
|
120
|
+
'#000': 'black',
|
|
121
|
+
'blanchedalmond': 'blanchedalmond',
|
|
122
|
+
'#ffebcd': 'blanchedalmond',
|
|
123
|
+
'blue': 'blue',
|
|
124
|
+
'#0000ff': 'blue',
|
|
125
|
+
'#00f': 'blue',
|
|
126
|
+
'blueviolet': 'blueviolet',
|
|
127
|
+
'#8a2be2': 'blueviolet',
|
|
128
|
+
'brown': 'brown',
|
|
129
|
+
'#a52a2a': 'brown',
|
|
130
|
+
'burlywood': 'burlywood',
|
|
131
|
+
'#deb887': 'burlywood',
|
|
132
|
+
'cadetblue': 'cadetblue',
|
|
133
|
+
'#5f9ea0': 'cadetblue',
|
|
134
|
+
'chartreuse': 'chartreuse',
|
|
135
|
+
'#7fff00': 'chartreuse',
|
|
136
|
+
'chocolate': 'chocolate',
|
|
137
|
+
'#d2691e': 'chocolate',
|
|
138
|
+
'coral': 'coral',
|
|
139
|
+
'#ff7f50': 'coral',
|
|
140
|
+
'cornflowerblue': 'cornflowerblue',
|
|
141
|
+
'#6495ed': 'cornflowerblue',
|
|
142
|
+
'cornsilk': 'cornsilk',
|
|
143
|
+
'#fff8dc': 'cornsilk',
|
|
144
|
+
'crimson': 'crimson',
|
|
145
|
+
'#dc143c': 'crimson',
|
|
146
|
+
'cyan': 'cyan',
|
|
147
|
+
'#00ffff': 'cyan',
|
|
148
|
+
'#0ff': 'cyan',
|
|
149
|
+
'darkblue': 'darkblue',
|
|
150
|
+
'#00008b': 'darkblue',
|
|
151
|
+
'darkcyan': 'darkcyan',
|
|
152
|
+
'#008b8b': 'darkcyan',
|
|
153
|
+
'darkgoldenrod': 'darkgoldenrod',
|
|
154
|
+
'#b8860b': 'darkgoldenrod',
|
|
155
|
+
'darkgray': 'darkgray',
|
|
156
|
+
'#a9a9a9': 'darkgray',
|
|
157
|
+
'darkgreen': 'darkgreen',
|
|
158
|
+
'#006400': 'darkgreen',
|
|
159
|
+
'darkgrey': 'darkgrey',
|
|
160
|
+
'darkkhaki': 'darkkhaki',
|
|
161
|
+
'#bdb76b': 'darkkhaki',
|
|
162
|
+
'darkmagenta': 'darkmagenta',
|
|
163
|
+
'#8b008b': 'darkmagenta',
|
|
164
|
+
'darkolivegreen': 'darkolivegreen',
|
|
165
|
+
'#556b2f': 'darkolivegreen',
|
|
166
|
+
'darkorange': 'darkorange',
|
|
167
|
+
'#ff8c00': 'darkorange',
|
|
168
|
+
'darkorchid': 'darkorchid',
|
|
169
|
+
'#9932cc': 'darkorchid',
|
|
170
|
+
'darkred': 'darkred',
|
|
171
|
+
'#8b0000': 'darkred',
|
|
172
|
+
'darksalmon': 'darksalmon',
|
|
173
|
+
'#e9967a': 'darksalmon',
|
|
174
|
+
'darkseagreen': 'darkseagreen',
|
|
175
|
+
'#8fbc8f': 'darkseagreen',
|
|
176
|
+
'darkslateblue': 'darkslateblue',
|
|
177
|
+
'#483d8b': 'darkslateblue',
|
|
178
|
+
'darkslategray': 'darkslategray',
|
|
179
|
+
'#2f4f4f': 'darkslategray',
|
|
180
|
+
'darkslategrey': 'darkslategrey',
|
|
181
|
+
'darkturquoise': 'darkturquoise',
|
|
182
|
+
'#00ced1': 'darkturquoise',
|
|
183
|
+
'darkviolet': 'darkviolet',
|
|
184
|
+
'#9400d3': 'darkviolet',
|
|
185
|
+
'deeppink': 'deeppink',
|
|
186
|
+
'#ff1493': 'deeppink',
|
|
187
|
+
'deepskyblue': 'deepskyblue',
|
|
188
|
+
'#00bfff': 'deepskyblue',
|
|
189
|
+
'dimgray': 'dimgray',
|
|
190
|
+
'#696969': 'dimgray',
|
|
191
|
+
'dimgrey': 'dimgrey',
|
|
192
|
+
'dodgerblue': 'dodgerblue',
|
|
193
|
+
'#1e90ff': 'dodgerblue',
|
|
194
|
+
'firebrick': 'firebrick',
|
|
195
|
+
'#b22222': 'firebrick',
|
|
196
|
+
'floralwhite': 'floralwhite',
|
|
197
|
+
'#fffaf0': 'floralwhite',
|
|
198
|
+
'forestgreen': 'forestgreen',
|
|
199
|
+
'#228b22': 'forestgreen',
|
|
200
|
+
'fuchsia': 'fuchsia',
|
|
201
|
+
'gainsboro': 'gainsboro',
|
|
202
|
+
'#dcdcdc': 'gainsboro',
|
|
203
|
+
'ghostwhite': 'ghostwhite',
|
|
204
|
+
'#f8f8ff': 'ghostwhite',
|
|
205
|
+
'gold': 'gold',
|
|
206
|
+
'#ffd700': 'gold',
|
|
207
|
+
'goldenrod': 'goldenrod',
|
|
208
|
+
'#daa520': 'goldenrod',
|
|
209
|
+
'gray': 'gray',
|
|
210
|
+
'#808080': 'gray',
|
|
211
|
+
'green': 'green',
|
|
212
|
+
'#008000': 'green',
|
|
213
|
+
'greenyellow': 'greenyellow',
|
|
214
|
+
'#adff2f': 'greenyellow',
|
|
215
|
+
'grey': 'grey',
|
|
216
|
+
'honeydew': 'honeydew',
|
|
217
|
+
'#f0fff0': 'honeydew',
|
|
218
|
+
'hotpink': 'hotpink',
|
|
219
|
+
'#ff69b4': 'hotpink',
|
|
220
|
+
'indianred': 'indianred',
|
|
221
|
+
'#cd5c5c': 'indianred',
|
|
222
|
+
'indigo': 'indigo',
|
|
223
|
+
'#4b0082': 'indigo',
|
|
224
|
+
'ivory': 'ivory',
|
|
225
|
+
'#fffff0': 'ivory',
|
|
226
|
+
'khaki': 'khaki',
|
|
227
|
+
'#f0e68c': 'khaki',
|
|
228
|
+
'lavender': 'lavender',
|
|
229
|
+
'#e6e6fa': 'lavender',
|
|
230
|
+
'lavenderblush': 'lavenderblush',
|
|
231
|
+
'#fff0f5': 'lavenderblush',
|
|
232
|
+
'lawngreen': 'lawngreen',
|
|
233
|
+
'#7cfc00': 'lawngreen',
|
|
234
|
+
'lemonchiffon': 'lemonchiffon',
|
|
235
|
+
'#fffacd': 'lemonchiffon',
|
|
236
|
+
'lightblue': 'lightblue',
|
|
237
|
+
'#add8e6': 'lightblue',
|
|
238
|
+
'lightcoral': 'lightcoral',
|
|
239
|
+
'#f08080': 'lightcoral',
|
|
240
|
+
'lightcyan': 'lightcyan',
|
|
241
|
+
'#e0ffff': 'lightcyan',
|
|
242
|
+
'lightgoldenrodyellow': 'lightgoldenrodyellow',
|
|
243
|
+
'#fafad2': 'lightgoldenrodyellow',
|
|
244
|
+
'lightgray': 'lightgray',
|
|
245
|
+
'#d3d3d3': 'lightgray',
|
|
246
|
+
'lightgreen': 'lightgreen',
|
|
247
|
+
'#90ee90': 'lightgreen',
|
|
248
|
+
'lightgrey': 'lightgrey',
|
|
249
|
+
'lightpink': 'lightpink',
|
|
250
|
+
'#ffb6c1': 'lightpink',
|
|
251
|
+
'lightsalmon': 'lightsalmon',
|
|
252
|
+
'#ffa07a': 'lightsalmon',
|
|
253
|
+
'lightseagreen': 'lightseagreen',
|
|
254
|
+
'#20b2aa': 'lightseagreen',
|
|
255
|
+
'lightskyblue': 'lightskyblue',
|
|
256
|
+
'#87cefa': 'lightskyblue',
|
|
257
|
+
'lightslategray': 'lightslategray',
|
|
258
|
+
'#778899': 'lightslategray',
|
|
259
|
+
'#789': 'lightslategray',
|
|
260
|
+
'lightslategrey': 'lightslategrey',
|
|
261
|
+
'lightsteelblue': 'lightsteelblue',
|
|
262
|
+
'#b0c4de': 'lightsteelblue',
|
|
263
|
+
'lightyellow': 'lightyellow',
|
|
264
|
+
'#ffffe0': 'lightyellow',
|
|
265
|
+
'lime': 'lime',
|
|
266
|
+
'#00ff00': 'lime',
|
|
267
|
+
'#0f0': 'lime',
|
|
268
|
+
'limegreen': 'limegreen',
|
|
269
|
+
'#32cd32': 'limegreen',
|
|
270
|
+
'linen': 'linen',
|
|
271
|
+
'#faf0e6': 'linen',
|
|
272
|
+
'magenta': 'magenta',
|
|
273
|
+
'#ff00ff': 'magenta',
|
|
274
|
+
'#f0f': 'magenta',
|
|
275
|
+
'maroon': 'maroon',
|
|
276
|
+
'#800000': 'maroon',
|
|
277
|
+
'mediumaquamarine': 'mediumaquamarine',
|
|
278
|
+
'#66cdaa': 'mediumaquamarine',
|
|
279
|
+
'mediumblue': 'mediumblue',
|
|
280
|
+
'#0000cd': 'mediumblue',
|
|
281
|
+
'mediumorchid': 'mediumorchid',
|
|
282
|
+
'#ba55d3': 'mediumorchid',
|
|
283
|
+
'mediumpurple': 'mediumpurple',
|
|
284
|
+
'#9370db': 'mediumpurple',
|
|
285
|
+
'mediumseagreen': 'mediumseagreen',
|
|
286
|
+
'#3cb371': 'mediumseagreen',
|
|
287
|
+
'mediumslateblue': 'mediumslateblue',
|
|
288
|
+
'#7b68ee': 'mediumslateblue',
|
|
289
|
+
'mediumspringgreen': 'mediumspringgreen',
|
|
290
|
+
'#00fa9a': 'mediumspringgreen',
|
|
291
|
+
'mediumturquoise': 'mediumturquoise',
|
|
292
|
+
'#48d1cc': 'mediumturquoise',
|
|
293
|
+
'mediumvioletred': 'mediumvioletred',
|
|
294
|
+
'#c71585': 'mediumvioletred',
|
|
295
|
+
'midnightblue': 'midnightblue',
|
|
296
|
+
'#191970': 'midnightblue',
|
|
297
|
+
'mintcream': 'mintcream',
|
|
298
|
+
'#f5fffa': 'mintcream',
|
|
299
|
+
'mistyrose': 'mistyrose',
|
|
300
|
+
'#ffe4e1': 'mistyrose',
|
|
301
|
+
'moccasin': 'moccasin',
|
|
302
|
+
'#ffe4b5': 'moccasin',
|
|
303
|
+
'navajowhite': 'navajowhite',
|
|
304
|
+
'#ffdead': 'navajowhite',
|
|
305
|
+
'navy': 'navy',
|
|
306
|
+
'#000080': 'navy',
|
|
307
|
+
'oldlace': 'oldlace',
|
|
308
|
+
'#fdf5e6': 'oldlace',
|
|
309
|
+
'olive': 'olive',
|
|
310
|
+
'#808000': 'olive',
|
|
311
|
+
'olivedrab': 'olivedrab',
|
|
312
|
+
'#6b8e23': 'olivedrab',
|
|
313
|
+
'orange': 'orange',
|
|
314
|
+
'#ffa500': 'orange',
|
|
315
|
+
'orangered': 'orangered',
|
|
316
|
+
'#ff4500': 'orangered',
|
|
317
|
+
'orchid': 'orchid',
|
|
318
|
+
'#da70d6': 'orchid',
|
|
319
|
+
'palegoldenrod': 'palegoldenrod',
|
|
320
|
+
'#eee8aa': 'palegoldenrod',
|
|
321
|
+
'palegreen': 'palegreen',
|
|
322
|
+
'#98fb98': 'palegreen',
|
|
323
|
+
'paleturquoise': 'paleturquoise',
|
|
324
|
+
'#afeeee': 'paleturquoise',
|
|
325
|
+
'palevioletred': 'palevioletred',
|
|
326
|
+
'#db7093': 'palevioletred',
|
|
327
|
+
'papayawhip': 'papayawhip',
|
|
328
|
+
'#ffefd5': 'papayawhip',
|
|
329
|
+
'peachpuff': 'peachpuff',
|
|
330
|
+
'#ffdab9': 'peachpuff',
|
|
331
|
+
'peru': 'peru',
|
|
332
|
+
'#cd853f': 'peru',
|
|
333
|
+
'pink': 'pink',
|
|
334
|
+
'#ffc0cb': 'pink',
|
|
335
|
+
'plum': 'plum',
|
|
336
|
+
'#dda0dd': 'plum',
|
|
337
|
+
'powderblue': 'powderblue',
|
|
338
|
+
'#b0e0e6': 'powderblue',
|
|
339
|
+
'purple': 'purple',
|
|
340
|
+
'#800080': 'purple',
|
|
341
|
+
'rebeccapurple': 'rebeccapurple',
|
|
342
|
+
'#663399': 'rebeccapurple',
|
|
343
|
+
'red': 'red',
|
|
344
|
+
'#ff0000': 'red',
|
|
345
|
+
'#f00': 'red',
|
|
346
|
+
'rosybrown': 'rosybrown',
|
|
347
|
+
'#bc8f8f': 'rosybrown',
|
|
348
|
+
'royalblue': 'royalblue',
|
|
349
|
+
'#4169e1': 'royalblue',
|
|
350
|
+
'saddlebrown': 'saddlebrown',
|
|
351
|
+
'#8b4513': 'saddlebrown',
|
|
352
|
+
'salmon': 'salmon',
|
|
353
|
+
'#fa8072': 'salmon',
|
|
354
|
+
'sandybrown': 'sandybrown',
|
|
355
|
+
'#f4a460': 'sandybrown',
|
|
356
|
+
'seagreen': 'seagreen',
|
|
357
|
+
'#2e8b57': 'seagreen',
|
|
358
|
+
'seashell': 'seashell',
|
|
359
|
+
'#fff5ee': 'seashell',
|
|
360
|
+
'sienna': 'sienna',
|
|
361
|
+
'#a0522d': 'sienna',
|
|
362
|
+
'silver': 'silver',
|
|
363
|
+
'#c0c0c0': 'silver',
|
|
364
|
+
'skyblue': 'skyblue',
|
|
365
|
+
'#87ceeb': 'skyblue',
|
|
366
|
+
'slateblue': 'slateblue',
|
|
367
|
+
'#6a5acd': 'slateblue',
|
|
368
|
+
'slategray': 'slategray',
|
|
369
|
+
'#708090': 'slategray',
|
|
370
|
+
'slategrey': 'slategrey',
|
|
371
|
+
'snow': 'snow',
|
|
372
|
+
'#fffafa': 'snow',
|
|
373
|
+
'springgreen': 'springgreen',
|
|
374
|
+
'#00ff7f': 'springgreen',
|
|
375
|
+
'steelblue': 'steelblue',
|
|
376
|
+
'#4682b4': 'steelblue',
|
|
377
|
+
'tan': 'tan',
|
|
378
|
+
'#d2b48c': 'tan',
|
|
379
|
+
'teal': 'teal',
|
|
380
|
+
'#008080': 'teal',
|
|
381
|
+
'thistle': 'thistle',
|
|
382
|
+
'#d8bfd8': 'thistle',
|
|
383
|
+
'tomato': 'tomato',
|
|
384
|
+
'#ff6347': 'tomato',
|
|
385
|
+
'turquoise': 'turquoise',
|
|
386
|
+
'#40e0d0': 'turquoise',
|
|
387
|
+
'violet': 'violet',
|
|
388
|
+
'#ee82ee': 'violet',
|
|
389
|
+
'wheat': 'wheat',
|
|
390
|
+
'#f5deb3': 'wheat',
|
|
391
|
+
'white': 'white',
|
|
392
|
+
'#ffffff': 'white',
|
|
393
|
+
'#fff': 'white',
|
|
394
|
+
'whitesmoke': 'whitesmoke',
|
|
395
|
+
'#f5f5f5': 'whitesmoke',
|
|
396
|
+
'yellow': 'yellow',
|
|
397
|
+
'#ffff00': 'yellow',
|
|
398
|
+
'#ff0': 'yellow',
|
|
399
|
+
'yellowgreen': 'yellowgreen',
|
|
400
|
+
'#9acd32': 'yellowgreen',
|
|
401
|
+
);
|
|
402
|
+
|
|
403
|
+
// Convert the color to a string.
|
|
404
|
+
$name: inspect($name);
|
|
405
|
+
|
|
406
|
+
@return if(map-has-key($css4-color-keywords, $name), map-get($css4-color-keywords, $name), false);
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
// chroma-to-string($name)
|
|
410
|
+
//
|
|
411
|
+
// Cast the color name to a string to ensure color keywords do not cause
|
|
412
|
+
// problems as map keys.
|
|
413
|
+
//
|
|
414
|
+
// $name - The name of the color to convert.
|
|
415
|
+
//
|
|
416
|
+
// Style guide: functions.chroma-to-string
|
|
417
|
+
@function chroma-to-string($name) {
|
|
418
|
+
// If the name is a color keyword, convert it to a string.
|
|
419
|
+
$is-keyword: is-color-keyword($name);
|
|
420
|
+
@return if($is-keyword, $is-keyword, inspect($name));
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
// color([$scheme,] $name)
|
|
11
424
|
//
|
|
12
425
|
// Returns a color value given a key word and optional color scheme. If the
|
|
13
|
-
// named color is not in the
|
|
426
|
+
// named color is not in the color scheme, the color scheme's parent scheme will
|
|
14
427
|
// be searched.
|
|
15
428
|
//
|
|
16
429
|
// Usage:
|
|
17
430
|
// ```scss
|
|
18
431
|
// .ex {
|
|
19
432
|
// background-color: color(body-bg);
|
|
20
|
-
// border: 1px solid color(
|
|
433
|
+
// border: 1px solid color(grace, border);
|
|
21
434
|
// }
|
|
22
435
|
// ```
|
|
23
436
|
//
|
|
24
|
-
// $
|
|
25
|
-
//
|
|
26
|
-
//
|
|
27
|
-
//
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
437
|
+
// $scheme - Optional color scheme to choose from; defaults to
|
|
438
|
+
// `$chroma-active-scheme`.
|
|
439
|
+
// $name - The name of the requested color.
|
|
440
|
+
//
|
|
441
|
+
// Style guide: functions.color
|
|
442
|
+
@function color($scheme, $name: null) {
|
|
443
|
+
@if type-of($name) == 'null' {
|
|
444
|
+
// The shortcut syntax was used since $name is null. Move the color name to
|
|
445
|
+
// the $name parameter and set a default value to $scheme.
|
|
446
|
+
$name: $scheme;
|
|
447
|
+
$scheme: $chroma-active-scheme;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
// Confirm the scheme exists.
|
|
451
|
+
@if not chroma-has-scheme($scheme) {
|
|
452
|
+
@error 'The #{$chroma-spelling} scheme "#{$scheme}" was not found.';
|
|
453
|
+
}
|
|
454
|
+
// Cast the color name to a string to ensure color keywords do not cause
|
|
455
|
+
// problems as map keys.
|
|
456
|
+
$name: chroma-to-string($name);
|
|
457
|
+
// Find the actual scheme used by the named color.
|
|
458
|
+
$actual-scheme: chroma-has-color($name, $scheme);
|
|
459
|
+
@if not $actual-scheme {
|
|
460
|
+
@error 'The #{$chroma-spelling} "#{$name}" was not found.';
|
|
35
461
|
}
|
|
462
|
+
@return map-get(map-get(map-get($chroma, 'names'), "#{$actual-scheme}::#{$name}"), 'value');
|
|
36
463
|
}
|
|
37
464
|
|
|
38
|
-
//
|
|
465
|
+
// define-color-scheme($scheme [, $description] [, $parent])
|
|
466
|
+
//
|
|
467
|
+
// Define a new color scheme and, optionally, set its description and parent
|
|
468
|
+
// color scheme.
|
|
469
|
+
//
|
|
470
|
+
// When searching for a color and the color scheme does not define that
|
|
471
|
+
// particular color, the parent color scheme will be checked to see if it
|
|
472
|
+
// defines that color.
|
|
39
473
|
//
|
|
40
|
-
//
|
|
474
|
+
// By default, all color schemes inherit their colors from the default color
|
|
475
|
+
// scheme. Optionally, a color scheme can choose to inherit from a different
|
|
476
|
+
// color scheme by specifying the `$parent` parameter.
|
|
41
477
|
//
|
|
42
478
|
// Usage:
|
|
43
479
|
// ```scss
|
|
44
|
-
// $
|
|
45
|
-
//
|
|
46
|
-
// link-visited: color(blue-dark),
|
|
47
|
-
// link-focus: color(red),
|
|
48
|
-
// ));
|
|
480
|
+
// $chroma: define-color-scheme(taiwan, "Taiwan's colors");
|
|
481
|
+
// $chroma: define-color-scheme(taipei, "Taipei's colors", $parent: taiwan);
|
|
49
482
|
// ```
|
|
50
483
|
//
|
|
51
484
|
// $scheme - The name of the new color scheme.
|
|
52
|
-
// $description -
|
|
53
|
-
// $
|
|
485
|
+
// $description - Optional description of the color scheme.
|
|
486
|
+
// $parent - The parent color scheme to inherit colors from; defaults to
|
|
487
|
+
// `default` (i.e. `$CHROMA_DEFAULT_SCHEME`).
|
|
54
488
|
//
|
|
55
|
-
// Style guide:
|
|
56
|
-
@function
|
|
57
|
-
|
|
58
|
-
|
|
489
|
+
// Style guide: functions.define-color-scheme
|
|
490
|
+
@function define-color-scheme($scheme, $description: '', $parent: $CHROMA_DEFAULT_SCHEME) {
|
|
491
|
+
// Check if we are defining the default color scheme.
|
|
492
|
+
@if $scheme == $CHROMA_DEFAULT_SCHEME {
|
|
493
|
+
$parent: false;
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
// Check parent reference exists.
|
|
497
|
+
@if $parent and not chroma-has-scheme($parent) {
|
|
498
|
+
@error 'Cannot set the parent of #{scheme} to "#{$parent}" because the #{$chroma-spelling} scheme "#{$parent}" was not found.';
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
$schemes: map-merge(
|
|
502
|
+
map-get($chroma, 'schemes'),
|
|
59
503
|
($scheme: (
|
|
60
504
|
'description': $description,
|
|
61
|
-
'
|
|
505
|
+
'parent': $parent,
|
|
62
506
|
))
|
|
63
507
|
);
|
|
64
|
-
|
|
508
|
+
|
|
509
|
+
@return map-merge(
|
|
510
|
+
$chroma,
|
|
511
|
+
('schemes': $schemes)
|
|
512
|
+
);
|
|
65
513
|
}
|
|
66
514
|
|
|
67
|
-
//
|
|
515
|
+
// define-default-color-scheme($description)
|
|
68
516
|
//
|
|
69
|
-
// Sets the default scheme.
|
|
517
|
+
// Sets the description of the default color scheme.
|
|
70
518
|
//
|
|
71
519
|
// Usage:
|
|
72
520
|
// ```scss
|
|
73
|
-
// $
|
|
74
|
-
// white: #fff,
|
|
75
|
-
// grey-dark: #545d5d,
|
|
76
|
-
// blue: #008fbf,
|
|
77
|
-
// ));
|
|
521
|
+
// $chroma: define-default-color-scheme('Default colors');
|
|
78
522
|
// ```
|
|
79
523
|
//
|
|
80
|
-
// $description -
|
|
81
|
-
// $new-colors - A Sass map containing the new colors.
|
|
524
|
+
// $description - Description of the default color scheme.
|
|
82
525
|
//
|
|
83
|
-
// Style guide:
|
|
84
|
-
@function
|
|
85
|
-
@return
|
|
526
|
+
// Style guide: functions.define-default-color-scheme
|
|
527
|
+
@function define-default-color-scheme($description) {
|
|
528
|
+
@return define-color-scheme($CHROMA_DEFAULT_SCHEME, $description);
|
|
86
529
|
}
|
|
87
530
|
|
|
88
|
-
// add-colors($scheme, $
|
|
531
|
+
// add-colors([$scheme,] $colors)
|
|
89
532
|
//
|
|
90
533
|
// Add the colors to an existing color scheme.
|
|
91
534
|
//
|
|
92
535
|
// Usage:
|
|
93
536
|
// ```scss
|
|
94
|
-
// $my-colors: add-colors('
|
|
95
|
-
// nav:
|
|
537
|
+
// $my-colors: add-colors('admiral', (
|
|
538
|
+
// nav: 'link',
|
|
539
|
+
// nav-visited: color(link-visited),
|
|
540
|
+
// nav-focus: color(link-focus),
|
|
541
|
+
// ));
|
|
542
|
+
// ```
|
|
543
|
+
//
|
|
544
|
+
// If you wish to add colors to the active scheme, you can just use:
|
|
545
|
+
// ```scss
|
|
546
|
+
// $my-colors: add-colors((
|
|
547
|
+
// nav: 'link',
|
|
96
548
|
// nav-visited: color(link-visited),
|
|
97
549
|
// nav-focus: color(link-focus),
|
|
98
550
|
// ));
|
|
99
551
|
// ```
|
|
100
552
|
//
|
|
101
|
-
// $scheme
|
|
102
|
-
//
|
|
553
|
+
// $scheme - Optional: color scheme to add colors to; defaults to
|
|
554
|
+
// `$chroma-active-scheme`.
|
|
555
|
+
// $colors - A Sass map containing the new colors.
|
|
103
556
|
//
|
|
104
|
-
// Style guide:
|
|
105
|
-
@function add-colors($scheme, $
|
|
106
|
-
@if
|
|
107
|
-
|
|
557
|
+
// Style guide: functions.add-colors
|
|
558
|
+
@function add-colors($scheme, $colors: null) {
|
|
559
|
+
@if type-of($scheme) == 'map' or type-of($scheme) == 'list' {
|
|
560
|
+
// The shortcut syntax was used since only a map of $colors was given as the
|
|
561
|
+
// first parameter. Move the map to the $colors parameter and set a default
|
|
562
|
+
// value to $scheme.
|
|
563
|
+
$colors: $scheme;
|
|
564
|
+
$scheme: $chroma-active-scheme;
|
|
108
565
|
}
|
|
109
|
-
|
|
110
|
-
$chroma
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
)
|
|
118
|
-
|
|
566
|
+
@if not chroma-has-scheme($scheme) {
|
|
567
|
+
@error 'The #{$chroma-spelling} scheme "#{$scheme}" was not found.';
|
|
568
|
+
}
|
|
569
|
+
@each $color-name, $color-value in $colors {
|
|
570
|
+
// Cast the color name to a string to ensure color keywords do not cause
|
|
571
|
+
// problems as map keys.
|
|
572
|
+
$color-name: chroma-to-string($color-name);
|
|
573
|
+
// If the value given is a color, just add it.
|
|
574
|
+
@if type_of($color-value) == 'color' {
|
|
575
|
+
$chroma: _chroma-add-name($scheme, $color-name,
|
|
576
|
+
$value : $color-value,
|
|
577
|
+
$reference : false,
|
|
578
|
+
$referenced_by : ()
|
|
579
|
+
) !global;
|
|
580
|
+
}
|
|
581
|
+
// If the value given is a reference to another color...
|
|
582
|
+
@else if type_of($color-value) == 'string' {
|
|
583
|
+
$ref: $color-value;
|
|
584
|
+
// Find the referenced color.
|
|
585
|
+
$scheme-of-reference: chroma-has-color($ref, $scheme);
|
|
586
|
+
@if not $scheme-of-reference {
|
|
587
|
+
@error 'The #{$chroma-spelling} "#{$ref}" was not found.';
|
|
588
|
+
}
|
|
589
|
+
$referenced-color: map-get(map-get($chroma, 'names'), "#{$scheme-of-reference}::#{$ref}");
|
|
590
|
+
// Add the new color.
|
|
591
|
+
$chroma: _chroma-add-name($scheme, $color-name,
|
|
592
|
+
$value : map-get($referenced-color, 'value'),
|
|
593
|
+
$reference : $ref,
|
|
594
|
+
$referenced_by : ()
|
|
595
|
+
) !global;
|
|
596
|
+
// Document the new color in all the referenced_by lists.
|
|
597
|
+
@while $ref {
|
|
598
|
+
$chroma: _chroma-add-name($scheme-of-reference, $ref,
|
|
599
|
+
$value : map-get($referenced-color, 'value'),
|
|
600
|
+
$reference : map-get($referenced-color, 'reference'),
|
|
601
|
+
$referenced_by : append(
|
|
602
|
+
map-get($referenced-color, 'referenced_by'),
|
|
603
|
+
$color-name
|
|
604
|
+
)
|
|
605
|
+
) !global;
|
|
606
|
+
$ref: map-get($referenced-color, 'reference');
|
|
607
|
+
@if $ref {
|
|
608
|
+
$scheme-of-reference: chroma-has-color($ref, $scheme-of-reference);
|
|
609
|
+
$referenced-color: map-get(map-get($chroma, 'names'), "#{$scheme-of-reference}::#{$ref}");
|
|
610
|
+
}
|
|
611
|
+
}
|
|
612
|
+
}
|
|
613
|
+
@else {
|
|
614
|
+
@error 'Unexpected value given for color "#{$color-name}".';
|
|
615
|
+
}
|
|
616
|
+
}
|
|
617
|
+
|
|
119
618
|
@return $chroma;
|
|
120
619
|
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Helper functions that query the internal data structure in $chroma.
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
// Import the global variables needed by all of Chroma.
|
|
6
|
+
@import './variables';
|
|
7
|
+
|
|
8
|
+
// chroma-has-scheme($scheme)
|
|
9
|
+
//
|
|
10
|
+
// Checks if the named color scheme exists.
|
|
11
|
+
//
|
|
12
|
+
// Style guide: sass.functions.chroma.chroma-has-scheme
|
|
13
|
+
@function chroma-has-scheme($scheme) {
|
|
14
|
+
@return map-has-key(map-get($chroma, 'schemes'), $scheme);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// chroma-schemes()
|
|
18
|
+
//
|
|
19
|
+
// Returns a list of all color schemes in $chroma.
|
|
20
|
+
//
|
|
21
|
+
// Style guide: sass.functions.chroma.chroma-schemes
|
|
22
|
+
@function chroma-schemes() {
|
|
23
|
+
@return map-keys(map-get($chroma, 'schemes'));
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// chroma-has-color($name [, $scheme])
|
|
27
|
+
//
|
|
28
|
+
// Checks if the named color exists in the given scheme or its parent schemes.
|
|
29
|
+
// Returns false or a string of the scheme name that contains the color.
|
|
30
|
+
//
|
|
31
|
+
// Style guide: sass.functions.chroma.chroma-has-color
|
|
32
|
+
@function chroma-has-color($name, $scheme: $chroma-active-scheme) {
|
|
33
|
+
$current-scheme: $scheme;
|
|
34
|
+
@while $current-scheme {
|
|
35
|
+
@if map-has-key(map-get($chroma, 'names'), "#{$current-scheme}::#{$name}") {
|
|
36
|
+
@return $current-scheme;
|
|
37
|
+
}
|
|
38
|
+
// Look in the parent scheme.
|
|
39
|
+
$current-scheme: map-get(map-get(map-get($chroma, 'schemes'), $current-scheme), 'parent');
|
|
40
|
+
}
|
|
41
|
+
@return false;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// _chroma-add-name()
|
|
45
|
+
//
|
|
46
|
+
// Private function that adds a color to the data structure of the $chroma
|
|
47
|
+
// variable.
|
|
48
|
+
//
|
|
49
|
+
// No styleguide reference
|
|
50
|
+
@function _chroma-add-name($scheme, $name, $value: false, $reference: false, $referenced_by: ()) {
|
|
51
|
+
$names: map-merge(
|
|
52
|
+
map-get($chroma, 'names'),
|
|
53
|
+
("#{$scheme}::#{$name}": (
|
|
54
|
+
value : $value,
|
|
55
|
+
reference : $reference,
|
|
56
|
+
referenced_by : $referenced_by,
|
|
57
|
+
))
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
@return map-merge(
|
|
61
|
+
$chroma,
|
|
62
|
+
('names': $names)
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// _chroma-init()
|
|
67
|
+
//
|
|
68
|
+
// Private function that sets up the initial data structure of the $chroma
|
|
69
|
+
// variable.
|
|
70
|
+
//
|
|
71
|
+
// No styleguide reference
|
|
72
|
+
@function _chroma-init() {
|
|
73
|
+
@if length($chroma) == 0 {
|
|
74
|
+
@return (
|
|
75
|
+
'schemes': (
|
|
76
|
+
$CHROMA_DEFAULT_SCHEME : (
|
|
77
|
+
'description': '',
|
|
78
|
+
'parent': false,
|
|
79
|
+
),
|
|
80
|
+
),
|
|
81
|
+
'names': (),
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
@else {
|
|
85
|
+
@return $chroma;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
@@ -32,6 +32,10 @@
|
|
|
32
32
|
&__value {
|
|
33
33
|
color: #bbb;
|
|
34
34
|
|
|
35
|
+
code {
|
|
36
|
+
color: #bbb;
|
|
37
|
+
}
|
|
38
|
+
|
|
35
39
|
&:before {
|
|
36
40
|
// "\2192" is unicode for right arrow. "\ " is a hack; otherwise space is
|
|
37
41
|
// ignored in some browsers.
|
|
@@ -39,4 +43,13 @@
|
|
|
39
43
|
font-family: sans-serif;
|
|
40
44
|
}
|
|
41
45
|
}
|
|
46
|
+
|
|
47
|
+
&__reference {
|
|
48
|
+
display: block;
|
|
49
|
+
position: relative;
|
|
50
|
+
top: -12px;
|
|
51
|
+
line-height: 25px;
|
|
52
|
+
padding-left: 50px;
|
|
53
|
+
color: #999;
|
|
54
|
+
}
|
|
42
55
|
}
|
data/sass/chroma/_kss.scss
CHANGED
|
@@ -39,7 +39,8 @@
|
|
|
39
39
|
$swatch-class: 'chroma-kss__swatch',
|
|
40
40
|
$variable-class: 'chroma-kss__variable',
|
|
41
41
|
$alt-text-class: 'chroma-kss__alt-text',
|
|
42
|
-
$value-class: 'chroma-kss__value'
|
|
42
|
+
$value-class: 'chroma-kss__value',
|
|
43
|
+
$reference-class: 'chroma-kss__reference'
|
|
43
44
|
) {
|
|
44
45
|
$markup: '';
|
|
45
46
|
|
|
@@ -47,21 +48,36 @@
|
|
|
47
48
|
$markup: '<div class="' + $wrapper-class + '">';
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
@each $scheme, $
|
|
51
|
+
@each $scheme, $data in map-get($chroma, 'schemes') {
|
|
51
52
|
// Display the scheme name and description.
|
|
52
53
|
$markup: $markup
|
|
53
54
|
+ '<h3 class="' + $title-class + '">#{$scheme}</h3>'
|
|
54
|
-
+ '<p class="' + $description-class + '">#{map-get($
|
|
55
|
+
+ '<p class="' + $description-class + '">#{map-get($data, 'description')}</p>';
|
|
55
56
|
|
|
56
57
|
// Display the colors in the scheme.
|
|
57
|
-
@each $color, $
|
|
58
|
-
$
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
58
|
+
@each $color, $data in map-get($chroma, 'names') {
|
|
59
|
+
$seperator: str-index($color, '::');
|
|
60
|
+
@if $scheme == str-slice($color, 1, $seperator - 1) {
|
|
61
|
+
$color: str-slice($color, $seperator + 2);
|
|
62
|
+
$value: map-get($data, 'value');
|
|
63
|
+
$reference: map-get($data, 'reference');
|
|
64
|
+
$referenced_by: map-get($data, 'referenced_by');
|
|
65
|
+
|
|
66
|
+
$markup: $markup
|
|
67
|
+
+ '<div class="#{$color-class}">'
|
|
68
|
+
+ '<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> '
|
|
71
|
+
+ '<span class="#{$value-class}"><code>#{$value}</code>';
|
|
72
|
+
@if $reference {
|
|
73
|
+
$markup: $markup + ' (#{$reference})';
|
|
74
|
+
}
|
|
75
|
+
$markup: $markup + '</span>';
|
|
76
|
+
@if length($referenced_by) > 0 {
|
|
77
|
+
$markup: $markup + ' <span class="#{$reference_class}">This color is inherited by: #{inspect($referenced_by)}</span>'
|
|
78
|
+
}
|
|
79
|
+
$markup: $markup + '</div>';
|
|
80
|
+
}
|
|
65
81
|
}
|
|
66
82
|
}
|
|
67
83
|
|
data/sass/chroma/_variables.scss
CHANGED
|
@@ -1,6 +1,48 @@
|
|
|
1
1
|
//
|
|
2
|
-
// Variables module for
|
|
2
|
+
// Variables module for Chroma; auto-imported by other modules.
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
//
|
|
6
|
+
// Private variables.
|
|
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;
|
|
17
|
+
|
|
18
|
+
//
|
|
19
|
+
// Public variables.
|
|
20
|
+
//
|
|
21
|
+
|
|
22
|
+
// $chroma
|
|
23
|
+
//
|
|
24
|
+
// The colors and meta-data managed by Chroma.
|
|
25
|
+
//
|
|
26
|
+
// Style guide: variables.chroma
|
|
27
|
+
$chroma : () !default;
|
|
28
|
+
|
|
29
|
+
// $chroma-active-scheme
|
|
30
|
+
//
|
|
31
|
+
// The currently active color scheme. This is the default value used by the
|
|
32
|
+
// $scheme parameter of most Chroma functions.
|
|
33
|
+
//
|
|
34
|
+
// By default, this variable is set to the default color scheme.
|
|
35
|
+
//
|
|
36
|
+
// Style guide: variables.chroma-active-scheme
|
|
37
|
+
$chroma-active-scheme : $CHROMA_DEFAULT_SCHEME !default;
|
|
38
|
+
|
|
39
|
+
// $chroma-die-on-ambiguous-keyword
|
|
40
|
+
//
|
|
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.
|
|
46
|
+
//
|
|
47
|
+
// Style guide: variables.chroma-die-on-ambiguous-keyword
|
|
48
|
+
$chroma-die-on-ambiguous-keyword : true !default;
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: chroma-sass
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.0.0.alpha.
|
|
4
|
+
version: 1.0.0.alpha.5
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- John Albin Wilkins
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2015-04-
|
|
11
|
+
date: 2015-04-30 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: sass
|
|
@@ -16,14 +16,14 @@ dependencies:
|
|
|
16
16
|
requirements:
|
|
17
17
|
- - "~>"
|
|
18
18
|
- !ruby/object:Gem::Version
|
|
19
|
-
version: '3.
|
|
19
|
+
version: '3.4'
|
|
20
20
|
type: :runtime
|
|
21
21
|
prerelease: false
|
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
|
23
23
|
requirements:
|
|
24
24
|
- - "~>"
|
|
25
25
|
- !ruby/object:Gem::Version
|
|
26
|
-
version: '3.
|
|
26
|
+
version: '3.4'
|
|
27
27
|
description: Chroma is the Sass color manager. Manages color names, variations, and
|
|
28
28
|
schemes.
|
|
29
29
|
email: virtually.johnalbin@gmail.com
|
|
@@ -36,7 +36,9 @@ files:
|
|
|
36
36
|
- chroma-sass.gemspec
|
|
37
37
|
- lib/chroma.rb
|
|
38
38
|
- sass/_chroma.scss
|
|
39
|
+
- sass/chroma/_colour.scss
|
|
39
40
|
- sass/chroma/_functions.scss
|
|
41
|
+
- sass/chroma/_internals.scss
|
|
40
42
|
- sass/chroma/_kss-styles.scss
|
|
41
43
|
- sass/chroma/_kss.scss
|
|
42
44
|
- sass/chroma/_variables.scss
|
|
@@ -59,7 +61,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
59
61
|
- !ruby/object:Gem::Version
|
|
60
62
|
version: 1.3.1
|
|
61
63
|
requirements: []
|
|
62
|
-
rubyforge_project: 1.0.0.alpha.
|
|
64
|
+
rubyforge_project: 1.0.0.alpha.5
|
|
63
65
|
rubygems_version: 2.4.6
|
|
64
66
|
signing_key:
|
|
65
67
|
specification_version: 4
|