sass-color-schemes 0.1.0 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +92 -39
- data/stylesheets/_mixins.scss +40 -12
- data/stylesheets/_variables.scss +10 -7
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c45992fb58c248552b0e307edb7bb64adf379a5e
|
4
|
+
data.tar.gz: 7c9f0cd191151f4b9da95f454e635ae8b3b8f672
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f8a9be5b1d5e0c47c6a2fdfc80c4e7d6eb98863a1934815464fc5396cc8d1459c05eeb3e1349ce9de9485614c6073f8065b95d6ce36e0c9c87391f8c35f8bc39
|
7
|
+
data.tar.gz: 575990604cea78ccd5f9fbb477f6d21a165e98f164c566ee12e7961546b688eea13521701170dfd4d9454c38766b0a015a9fd6fb40b41e3cd3aa638786ff9b78
|
data/README.md
CHANGED
@@ -23,13 +23,13 @@ Or install it yourself as:
|
|
23
23
|
Import it into your main stylesheet:
|
24
24
|
|
25
25
|
@import 'sass-color-schemes';
|
26
|
-
|
26
|
+
|
27
27
|
### Color functions
|
28
28
|
|
29
29
|
Sass-color-schemes has 4 functions that all return an array of 5 color values (of 5 `null`'s). Each function uses variables, such as `$base-color`, `$variation`, etc. for calculating the proper values.
|
30
30
|
|
31
|
-
See
|
32
|
-
|
31
|
+
See [`$sass-color-schemes` variable](#sass-color-schemes-variable) for a description of the different types.
|
32
|
+
|
33
33
|
#### primary-colors
|
34
34
|
|
35
35
|
Returns an array of 5 colors, in which the first element is the base color and the rest are different shades of the base color. You need the Sass' `nth` function to access a specific color:
|
@@ -47,7 +47,7 @@ $color-primary-1: nth(primary-colors(), 2);
|
|
47
47
|
color: $color-primary-1;
|
48
48
|
}
|
49
49
|
|
50
|
-
```
|
50
|
+
```
|
51
51
|
|
52
52
|
#### complement-colors
|
53
53
|
|
@@ -83,24 +83,50 @@ $color-secondary-2-1: nth(secondary-2-colors(), 2);
|
|
83
83
|
```
|
84
84
|
**Note:** The `secondary-1-colors` and `secondary-2-colors` functions only returns an array of colors when the `$scheme` variable is set to `adjacent`, `tetrad` or `triad`. Otherwise an array with 5 `null`'s is returned.
|
85
85
|
|
86
|
-
###
|
86
|
+
### `$sass-color-schemes` variable
|
87
|
+
|
88
|
+
You can (and might want to) configure sass-color-schemes to customize the color scheme. For this you need to define the `$sass-color-schemes` map variable, which contains one or more of the following keys:
|
87
89
|
|
88
|
-
|
90
|
+
* [base-color](#base-color-key)
|
91
|
+
* [scheme](#scheme-key)
|
92
|
+
* [complement](#complement-key)
|
93
|
+
* [angle](#angle-key)
|
94
|
+
* [variation](#variation-key)
|
95
|
+
* [mode](#mode-key)
|
89
96
|
|
90
|
-
|
97
|
+
```
|
98
|
+
$sass-color-schemes: (
|
99
|
+
base-color: red,
|
100
|
+
scheme: 'monochromatic',
|
101
|
+
// ... etc.
|
102
|
+
);
|
103
|
+
|
104
|
+
```
|
91
105
|
|
92
|
-
|
106
|
+
#### `base-color` key
|
107
|
+
|
108
|
+
The color used as a base color to calculate the shades and all other colors. This can be any [Sass color](http://sass-lang.com/documentation/Sass/Script/Value/Color.html).
|
93
109
|
|
94
110
|
Defaults to `#ff0000` (red).
|
95
111
|
|
96
112
|
```
|
97
|
-
$
|
98
|
-
|
99
|
-
|
100
|
-
|
113
|
+
$sass-color-schemes: (
|
114
|
+
base-color: red,
|
115
|
+
// ... etc.
|
116
|
+
);
|
117
|
+
|
118
|
+
$sass-color-schemes: (
|
119
|
+
base-color: hsl(0deg, 100%, 50%),
|
120
|
+
// ... etc.
|
121
|
+
);
|
122
|
+
|
123
|
+
$sass-color-schemes: (
|
124
|
+
base-color: #ff0000,
|
125
|
+
// ... etc.
|
126
|
+
);
|
101
127
|
```
|
102
128
|
|
103
|
-
####
|
129
|
+
#### `scheme` key
|
104
130
|
|
105
131
|
Sass-color-schemes supports 4 different color schemes:
|
106
132
|
|
@@ -112,37 +138,55 @@ Sass-color-schemes supports 4 different color schemes:
|
|
112
138
|
Defaults to `'monochromatic'`.
|
113
139
|
|
114
140
|
```
|
115
|
-
$
|
116
|
-
|
117
|
-
// ... etc.
|
118
|
-
|
141
|
+
$sass-color-schemes: (
|
142
|
+
scheme: 'monochromatic',
|
143
|
+
// ... etc.
|
144
|
+
);
|
145
|
+
|
146
|
+
$sass-color-schemes: (
|
147
|
+
scheme: 'tetrad',
|
148
|
+
// ... etc.
|
149
|
+
);
|
119
150
|
```
|
120
151
|
|
121
|
-
####
|
152
|
+
#### `complement` key
|
122
153
|
|
123
154
|
If set to `true`, the `complement-colors` function returns shades of the complementary color of the `$base-color`.
|
124
155
|
|
125
|
-
Defaults to `
|
156
|
+
Defaults to `true`.
|
126
157
|
|
127
158
|
```
|
128
|
-
$
|
129
|
-
|
159
|
+
$sass-color-schemes: (
|
160
|
+
complement: false,
|
161
|
+
// ... etc.
|
162
|
+
);
|
130
163
|
|
131
164
|
```
|
132
165
|
|
133
|
-
####
|
166
|
+
#### `angle` key
|
134
167
|
|
135
168
|
The angle applied to the `$base-color` to calculate other colors in all schemes, expect `monochromatic`. This can be any value and can be set in degrees (deg) or radian (rad) units as well.
|
136
169
|
|
137
170
|
Defaults to `30deg`.
|
138
171
|
|
139
172
|
```
|
140
|
-
$
|
141
|
-
|
142
|
-
|
173
|
+
$sass-color-schemes: (
|
174
|
+
angle: 30,
|
175
|
+
// ... etc.
|
176
|
+
);
|
177
|
+
|
178
|
+
$sass-color-schemes: (
|
179
|
+
angle: 30deg,
|
180
|
+
// ... etc.
|
181
|
+
);
|
182
|
+
|
183
|
+
$sass-color-schemes: (
|
184
|
+
angle: 0.5236rad,
|
185
|
+
// ... etc.
|
186
|
+
);
|
143
187
|
```
|
144
188
|
|
145
|
-
####
|
189
|
+
#### `variation` key
|
146
190
|
|
147
191
|
This will vary the tints, tones and shades of the colors returned by all functions. Currently Sass-color-schemes supports 24 variations:
|
148
192
|
|
@@ -171,40 +215,49 @@ This will vary the tints, tones and shades of the colors returned by all functio
|
|
171
215
|
* greyish medium dark
|
172
216
|
* greyish lightest
|
173
217
|
|
174
|
-
Defaults to `
|
218
|
+
Defaults to `default`.
|
175
219
|
|
176
220
|
```
|
177
|
-
$
|
178
|
-
|
179
|
-
// ... etc.
|
221
|
+
$sass-color-schemes: (
|
222
|
+
variation: 'darker pale pastel',
|
223
|
+
// ... etc.
|
224
|
+
);
|
225
|
+
|
226
|
+
$sass-color-schemes: (
|
227
|
+
variation: 'shiny',
|
228
|
+
// ... etc.
|
229
|
+
);
|
180
230
|
|
181
231
|
```
|
182
232
|
|
183
|
-
####
|
233
|
+
#### `mode` key
|
184
234
|
|
185
235
|
You can choose between:
|
186
236
|
|
187
237
|
* [RGB](http://en.wikipedia.org/wiki/RGB_color_model) (a.k.a. the light model)
|
188
238
|
* [RYB](http://en.wikipedia.org/wiki/RYB_color_model)
|
189
239
|
|
190
|
-
These modes are internally
|
240
|
+
These modes are used internally when calculating colors. RYB is primarily used in art and design education.
|
191
241
|
|
192
242
|
Defaults to `ryb`.
|
193
243
|
|
194
244
|
```
|
195
|
-
$
|
196
|
-
|
245
|
+
$sass-color-schemes: (
|
246
|
+
mode: 'rgb',
|
247
|
+
// ... etc.
|
248
|
+
);
|
197
249
|
|
198
250
|
```
|
199
251
|
|
200
252
|
### Full example
|
201
253
|
|
202
254
|
```
|
203
|
-
$
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
255
|
+
$sass-color-schemes: (
|
256
|
+
base-color: #6893A6,
|
257
|
+
variation: 'shiny',
|
258
|
+
scheme: 'adjacent',
|
259
|
+
angle: 25
|
260
|
+
);
|
208
261
|
|
209
262
|
$color-primary-0: nth(primary-colors(), 1);
|
210
263
|
$color-primary-1: nth(primary-colors(), 2);
|
data/stylesheets/_mixins.scss
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
@function primary-colors() {
|
2
|
-
@return _compose-shades(
|
2
|
+
@return _compose-shades(_base-color());
|
3
3
|
}
|
4
4
|
|
5
5
|
@function complement-colors() {
|
6
|
-
@if (
|
6
|
+
@if (_complement() == false) and (_scheme() != 'tetrad') {
|
7
7
|
@return _empty-array();
|
8
8
|
}
|
9
9
|
|
@@ -11,20 +11,20 @@
|
|
11
11
|
}
|
12
12
|
|
13
13
|
@function secondary-1-colors() {
|
14
|
-
@if (
|
15
|
-
@return _compose-color(180 -
|
16
|
-
} @else if (
|
17
|
-
@return _compose-color(
|
14
|
+
@if (_scheme() == 'triad') {
|
15
|
+
@return _compose-color(180 - _angle());
|
16
|
+
} @else if (_scheme() == 'adjacent') or (_scheme() == 'tetrad') {
|
17
|
+
@return _compose-color(_angle());
|
18
18
|
} @else {
|
19
19
|
@return _empty-array();
|
20
20
|
}
|
21
21
|
}
|
22
22
|
|
23
23
|
@function secondary-2-colors() {
|
24
|
-
@if (
|
25
|
-
@return _compose-color(180 +
|
26
|
-
} @else if (
|
27
|
-
@return _compose-color(
|
24
|
+
@if (_scheme() == 'triad') or (_scheme() == 'tetrad') {
|
25
|
+
@return _compose-color(180 + _angle());
|
26
|
+
} @else if (_scheme() == 'adjacent') {
|
27
|
+
@return _compose-color(-_angle());
|
28
28
|
} @else {
|
29
29
|
@return _empty-array();
|
30
30
|
}
|
@@ -36,11 +36,11 @@
|
|
36
36
|
}
|
37
37
|
|
38
38
|
@function _adjust-hue($angle) {
|
39
|
-
@return if(
|
39
|
+
@return if(_mode() == 'ryb', ryb-adjust-hue(_base-color(), $angle), adjust-hue(_base-color(), $angle));
|
40
40
|
}
|
41
41
|
|
42
42
|
@function _compose-shades($color) {
|
43
|
-
$shades: map-get($variations,
|
43
|
+
$shades: map-get($_scs-variations, _variation());
|
44
44
|
|
45
45
|
$colors: ();
|
46
46
|
@for $i from 1 through 5 {
|
@@ -64,3 +64,31 @@
|
|
64
64
|
}
|
65
65
|
@return $arr;
|
66
66
|
}
|
67
|
+
|
68
|
+
@function _base-color() {
|
69
|
+
@return _fetch('base-color', $_scs-base-color);
|
70
|
+
}
|
71
|
+
|
72
|
+
@function _variation() {
|
73
|
+
@return _fetch('variation', $_scs-variation);
|
74
|
+
}
|
75
|
+
|
76
|
+
@function _scheme() {
|
77
|
+
@return _fetch('scheme', $_scs-scheme);
|
78
|
+
}
|
79
|
+
|
80
|
+
@function _mode() {
|
81
|
+
@return _fetch('mode', $_scs-mode);
|
82
|
+
}
|
83
|
+
|
84
|
+
@function _angle() {
|
85
|
+
@return _fetch('angle', $_scs-angle);
|
86
|
+
}
|
87
|
+
|
88
|
+
@function _complement() {
|
89
|
+
@return _fetch('complement', $_scs-complement);
|
90
|
+
}
|
91
|
+
|
92
|
+
@function _fetch($key, $default) {
|
93
|
+
@return if(map-has-key($sass-color-schemes, $key), map-get($sass-color-schemes, $key), $default);
|
94
|
+
}
|
data/stylesheets/_variables.scss
CHANGED
@@ -1,11 +1,14 @@
|
|
1
|
-
$
|
2
|
-
$variation: 'full colors' !default;
|
3
|
-
$scheme: 'monochromatic' !default; // monochromatic, adjacent, triad, tetrad
|
4
|
-
$mode: 'ryb' !default; // rgb, ryb
|
5
|
-
$angle: 30deg !default;
|
6
|
-
$complement: false !default;
|
1
|
+
$sass-color-schemes: () !default;
|
7
2
|
|
8
|
-
$
|
3
|
+
$_scs-base-color: green !default;
|
4
|
+
$_scs-variation: 'default' !default;
|
5
|
+
$_scs-scheme: 'monochromatic' !default; // monochromatic, adjacent, triad, tetrad
|
6
|
+
$_scs-mode: 'ryb' !default; // rgb, ryb
|
7
|
+
$_scs-angle: 30deg !default;
|
8
|
+
$_scs-complement: true !default;
|
9
|
+
|
10
|
+
$_scs-variations: (
|
11
|
+
'default': (0 0) (16 68) (9 36) (12 -24) (32 -44),
|
9
12
|
'lightest pale pastel': (0 77) (0 90) (0 82) (0 68) (0 60),
|
10
13
|
'very light pale pastel': (0 65) (0 86) (0 77) (-26 42) (-44 15),
|
11
14
|
'lighter pale pastel': (-36 48) (0 83) (0 75) (-49 22) (-52 -5),
|