sass-color-schemes 0.2.0 → 0.3.0
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 +30 -0
- data/stylesheets/_mixins.scss +3 -93
- data/stylesheets/mixins/_colors.scss +66 -0
- data/stylesheets/mixins/_getters.scss +27 -0
- data/stylesheets/mixins/_sample.scss +29 -0
- metadata +4 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 602932356004da4a84eb9afb690a0ffe090ffa6e
|
|
4
|
+
data.tar.gz: 34a40ee6445ef408e7db31a9711bd26196bd0957
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2aaa6871fa8e8e4f7a4c8c5119d483d1005406df13a6566d44580ac0fabff44f5ff00ab1537d129c08132aa75064928094217b03d9e1f75ce5976de3c70e633b
|
|
7
|
+
data.tar.gz: 392d9a4c3187aaa4957dd865a5265c5b5c356b4f9647af2ea688d695d56f71c38656948b6f28635a136fa277931e00ce8e32b9138275d5c350a099f6a5a49a0c
|
data/README.md
CHANGED
|
@@ -249,6 +249,36 @@ $sass-color-schemes: (
|
|
|
249
249
|
|
|
250
250
|
```
|
|
251
251
|
|
|
252
|
+
### Test your color scheme
|
|
253
|
+
|
|
254
|
+
The `scs-test` mixin adds a bar to the top of your page displaying all the colors that your color scheme provides:
|
|
255
|
+
|
|
256
|
+
```
|
|
257
|
+
$sass-color-schemes: (
|
|
258
|
+
base-color: #2980B9,
|
|
259
|
+
variation: 'tetrad'
|
|
260
|
+
);
|
|
261
|
+
|
|
262
|
+
@include scs-test;
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
|
|
266
|
+
|
|
267
|
+
`scs-test` accepts the following arguments:
|
|
268
|
+
|
|
269
|
+
#### `$height`
|
|
270
|
+
|
|
271
|
+
The height of the colored bar.
|
|
272
|
+
|
|
273
|
+
Defaults to `2em`.
|
|
274
|
+
|
|
275
|
+
#### `$selector`
|
|
276
|
+
|
|
277
|
+
The selector that will contain the colored bar.
|
|
278
|
+
|
|
279
|
+
Defaults to `body::after`.
|
|
280
|
+
|
|
281
|
+
|
|
252
282
|
### Full example
|
|
253
283
|
|
|
254
284
|
```
|
data/stylesheets/_mixins.scss
CHANGED
|
@@ -1,94 +1,4 @@
|
|
|
1
|
-
@
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
@import './mixins/getters';
|
|
2
|
+
@import './mixins/colors';
|
|
3
|
+
@import './mixins/sample';
|
|
4
4
|
|
|
5
|
-
@function complement-colors() {
|
|
6
|
-
@if (_complement() == false) and (_scheme() != 'tetrad') {
|
|
7
|
-
@return _empty-array();
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
@return _compose-color(180);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@function secondary-1-colors() {
|
|
14
|
-
@if (_scheme() == 'triad') {
|
|
15
|
-
@return _compose-color(180 - _angle());
|
|
16
|
-
} @else if (_scheme() == 'adjacent') or (_scheme() == 'tetrad') {
|
|
17
|
-
@return _compose-color(_angle());
|
|
18
|
-
} @else {
|
|
19
|
-
@return _empty-array();
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
@function secondary-2-colors() {
|
|
24
|
-
@if (_scheme() == 'triad') or (_scheme() == 'tetrad') {
|
|
25
|
-
@return _compose-color(180 + _angle());
|
|
26
|
-
} @else if (_scheme() == 'adjacent') {
|
|
27
|
-
@return _compose-color(-_angle());
|
|
28
|
-
} @else {
|
|
29
|
-
@return _empty-array();
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
@function _compose-color($angle) {
|
|
34
|
-
$color: _adjust-hue($angle);
|
|
35
|
-
@return _compose-shades($color);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
@function _adjust-hue($angle) {
|
|
39
|
-
@return if(_mode() == 'ryb', ryb-adjust-hue(_base-color(), $angle), adjust-hue(_base-color(), $angle));
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@function _compose-shades($color) {
|
|
43
|
-
$shades: map-get($_scs-variations, _variation());
|
|
44
|
-
|
|
45
|
-
$colors: ();
|
|
46
|
-
@for $i from 1 through 5 {
|
|
47
|
-
$colors: append($colors, _adjust-color($color, $shades, $i));
|
|
48
|
-
}
|
|
49
|
-
@return $colors;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@function _adjust-color($base-color, $shades, $n) {
|
|
53
|
-
$sval: percentage(nth(nth($shades, $n), 1))/100;
|
|
54
|
-
$lval: percentage(nth(nth($shades, $n), 2))/100;
|
|
55
|
-
$color: scale-color($base-color, $saturation: $sval, $lightness: $lval);
|
|
56
|
-
|
|
57
|
-
@return $color;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
@function _empty-array() {
|
|
61
|
-
$arr: ();
|
|
62
|
-
@for $i from 1 through 5 {
|
|
63
|
-
$arr: append($arr, null);
|
|
64
|
-
}
|
|
65
|
-
@return $arr;
|
|
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
|
-
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
@function primary-colors() {
|
|
2
|
+
@return _compose-shades(_base-color());
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
@function complement-colors() {
|
|
6
|
+
@if (_complement() == false) and (_scheme() != 'tetrad') {
|
|
7
|
+
@return _empty-array();
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@return _compose-color(180);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@function secondary-1-colors() {
|
|
14
|
+
@if (_scheme() == 'triad') {
|
|
15
|
+
@return _compose-color(180 - _angle());
|
|
16
|
+
} @else if (_scheme() == 'adjacent') or (_scheme() == 'tetrad') {
|
|
17
|
+
@return _compose-color(_angle());
|
|
18
|
+
} @else {
|
|
19
|
+
@return _empty-array();
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@function secondary-2-colors() {
|
|
24
|
+
@if (_scheme() == 'triad') or (_scheme() == 'tetrad') {
|
|
25
|
+
@return _compose-color(180 + _angle());
|
|
26
|
+
} @else if (_scheme() == 'adjacent') {
|
|
27
|
+
@return _compose-color(-_angle());
|
|
28
|
+
} @else {
|
|
29
|
+
@return _empty-array();
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@function _compose-color($angle) {
|
|
34
|
+
$color: _adjust-hue($angle);
|
|
35
|
+
@return _compose-shades($color);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@function _adjust-hue($angle) {
|
|
39
|
+
@return if(_mode() == 'ryb', ryb-adjust-hue(_base-color(), $angle), adjust-hue(_base-color(), $angle));
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@function _compose-shades($color) {
|
|
43
|
+
$shades: map-get($_scs-variations, _variation());
|
|
44
|
+
|
|
45
|
+
$colors: ();
|
|
46
|
+
@for $i from 1 through 5 {
|
|
47
|
+
$colors: append($colors, _adjust-color($color, $shades, $i));
|
|
48
|
+
}
|
|
49
|
+
@return $colors;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@function _adjust-color($base-color, $shades, $n) {
|
|
53
|
+
$sval: percentage(nth(nth($shades, $n), 1))/100;
|
|
54
|
+
$lval: percentage(nth(nth($shades, $n), 2))/100;
|
|
55
|
+
$color: scale-color($base-color, $saturation: $sval, $lightness: $lval);
|
|
56
|
+
|
|
57
|
+
@return $color;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@function _empty-array() {
|
|
61
|
+
$arr: ();
|
|
62
|
+
@for $i from 1 through 5 {
|
|
63
|
+
$arr: append($arr, null);
|
|
64
|
+
}
|
|
65
|
+
@return $arr;
|
|
66
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@function _base-color() {
|
|
2
|
+
@return _fetch('base-color', $_scs-base-color);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
@function _variation() {
|
|
6
|
+
@return _fetch('variation', $_scs-variation);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@function _scheme() {
|
|
10
|
+
@return _fetch('scheme', $_scs-scheme);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@function _mode() {
|
|
14
|
+
@return _fetch('mode', $_scs-mode);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@function _angle() {
|
|
18
|
+
@return _fetch('angle', $_scs-angle);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@function _complement() {
|
|
22
|
+
@return _fetch('complement', $_scs-complement);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@function _fetch($key, $default) {
|
|
26
|
+
@return if(map-has-key($sass-color-schemes, $key), map-get($sass-color-schemes, $key), $default);
|
|
27
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
@mixin scs-test($height: 2em, $element: 'body:before') {
|
|
2
|
+
$colors: primary-colors();
|
|
3
|
+
$colors: join($colors, compact(complement-colors()));
|
|
4
|
+
$colors: join($colors, compact(secondary-1-colors()));
|
|
5
|
+
$colors: join($colors, compact(secondary-2-colors()));
|
|
6
|
+
|
|
7
|
+
#{$element} {
|
|
8
|
+
content: "";
|
|
9
|
+
display: block;
|
|
10
|
+
height: $height;
|
|
11
|
+
@include background(_scs-stripes(left, ($colors)));
|
|
12
|
+
position: relative;
|
|
13
|
+
z-index: 999999999999;
|
|
14
|
+
@include box-shadow(rgba(black, 0.23) 0 3px 10px, rgba(black, 0.16) 0 3px 10px);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
@function _scs-stripes($position, $colors) {
|
|
19
|
+
$gradient: ();
|
|
20
|
+
$width: 100% / length($colors);
|
|
21
|
+
|
|
22
|
+
@for $i from 1 through length($colors) {
|
|
23
|
+
$pop: nth($colors,$i);
|
|
24
|
+
$new: $pop ($width * ($i - 1)), $pop ($width * $i);
|
|
25
|
+
$gradient: join($gradient, $new, comma);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@return linear-gradient($position, $gradient);
|
|
29
|
+
};
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: sass-color-schemes
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Patrick Baselier
|
|
@@ -52,6 +52,9 @@ files:
|
|
|
52
52
|
- stylesheets/_mixins.scss
|
|
53
53
|
- stylesheets/_sass-color-schemes.scss
|
|
54
54
|
- stylesheets/_variables.scss
|
|
55
|
+
- stylesheets/mixins/_colors.scss
|
|
56
|
+
- stylesheets/mixins/_getters.scss
|
|
57
|
+
- stylesheets/mixins/_sample.scss
|
|
55
58
|
- templates/project/manifest.rb
|
|
56
59
|
- templates/project/screen.scss
|
|
57
60
|
homepage: https://github.com/bazzel/sass-color-schemes
|