color-schemer 0.2.1 → 0.2.2
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.
- data/lib/color-schemer.rb +2 -1
- data/stylesheets/_color-schemer.scss +16 -4
- data/stylesheets/color-schemer/_colorblind.scss +54 -0
- data/stylesheets/color-schemer/_interpolation.scss +34 -0
- data/stylesheets/color-schemer/_mix.scss +40 -0
- data/stylesheets/color-schemer/_mixins.scss +29 -0
- data/stylesheets/color-schemer/_ryb.scss +10 -51
- metadata +21 -2
- data/stylesheets/color-schemer/_defaults.scss +0 -5
data/lib/color-schemer.rb
CHANGED
|
@@ -1,13 +1,25 @@
|
|
|
1
|
-
|
|
1
|
+
@import "blend-mode";
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
// Defaults
|
|
4
|
+
$cs-primary : #f00 !default;
|
|
5
|
+
$cs-scheme : mono !default; // mono, complement, triad, tetrad, analogic, accented-analogic
|
|
6
|
+
$cs-hue-offset : 30 !default;
|
|
7
|
+
$cs-brightness-offset : false !default;
|
|
8
|
+
$cs-color-model : rgb !default; // rgb, ryb
|
|
9
|
+
$cs-colorblind : normal !default;
|
|
10
|
+
|
|
11
|
+
// Partials
|
|
12
|
+
@import "color-schemer/interpolation";
|
|
4
13
|
@import "color-schemer/cmyk";
|
|
5
14
|
@import "color-schemer/ryb";
|
|
6
|
-
|
|
15
|
+
@import "color-schemer/colorblind";
|
|
7
16
|
@import "color-schemer/equalize";
|
|
17
|
+
@import "color-schemer/mix";
|
|
8
18
|
@import "color-schemer/tint-shade";
|
|
9
19
|
@import "color-schemer/color-adjustments";
|
|
10
20
|
@import "color-schemer/color-schemer";
|
|
11
21
|
|
|
22
|
+
@import "color-schemer/mixins";
|
|
23
|
+
|
|
12
24
|
// Tell other files that this is loaded.
|
|
13
|
-
$color-schemer-loaded: true;
|
|
25
|
+
$color-schemer-loaded : true;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
@function cs-colorblind($color, $mode: $cs-colorblind) {
|
|
2
|
+
|
|
3
|
+
$severity: 66%;
|
|
4
|
+
|
|
5
|
+
// Protanopia - no red
|
|
6
|
+
@if $mode == protanopia {
|
|
7
|
+
@return $color - #f00;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// Deuteranopia - no green
|
|
11
|
+
@if $mode == deuteranopia {
|
|
12
|
+
@return $color - #0f0;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Tritanopia - no blue
|
|
16
|
+
@if $mode == tritanopia {
|
|
17
|
+
@return $color - #00f;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Protanomaly - low red
|
|
21
|
+
@if $mode == protanomaly {
|
|
22
|
+
@return $color - shade(#f00, 100% - $severity);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// Deuteranomaly - low green
|
|
26
|
+
@if $mode == deuteranomaly {
|
|
27
|
+
@return $color - shade(#0f0, 100% - $severity);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Tritanomaly - low blue
|
|
31
|
+
@if $mode == tritanomaly {
|
|
32
|
+
@return $color - shade(#00f, 100% - $severity);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Typical Monochromacy
|
|
36
|
+
@if $mode == monochromacy {
|
|
37
|
+
@return desaturate($color, 100%);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Atypical Monochromacy
|
|
41
|
+
@if $mode == amonochromacy {
|
|
42
|
+
@return desaturate($color, $severity);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
// Return color if no color blind mode.
|
|
47
|
+
@else {
|
|
48
|
+
@return $color;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@function cs-cb($color, $mode: $cs-colorblind) {
|
|
53
|
+
@return cs-colorblind($color, $mode);
|
|
54
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
@function cs-interpolate($value, $units: 360, $stops: $ryb-interpolation) {
|
|
2
|
+
|
|
3
|
+
// Loop numbers out of scale back into the scale.
|
|
4
|
+
@while $value >= 360 {
|
|
5
|
+
$value: $value - 360;
|
|
6
|
+
}
|
|
7
|
+
@while $value < 0 {
|
|
8
|
+
$value: $value + 360;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// Find out how many units in each stop
|
|
12
|
+
$cs-color-deg: $units / length($stops);
|
|
13
|
+
|
|
14
|
+
// Count through stops
|
|
15
|
+
$cs-deg-count: $cs-color-deg;
|
|
16
|
+
$cs-stop-count: 1;
|
|
17
|
+
|
|
18
|
+
// Add the first stop to the end so it will be
|
|
19
|
+
// interpolated with the last stop.
|
|
20
|
+
$stops: append($stops, nth($stops, 1));
|
|
21
|
+
|
|
22
|
+
// Start interpolating
|
|
23
|
+
@for $i from 0 through length($stops) {
|
|
24
|
+
@if $value < $cs-deg-count {
|
|
25
|
+
@return cs-mix(nth($stops, $cs-stop-count + 1), nth($stops, $cs-stop-count), abs(percentage(($cs-deg-count - $value) / $cs-color-deg) - 100 ), $model: rgb);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// If the value is not in this stop, loop up to another stop.
|
|
29
|
+
@else {
|
|
30
|
+
$cs-deg-count: $cs-deg-count + $cs-color-deg;
|
|
31
|
+
$cs-stop-count: $cs-stop-count + 1
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
@function cs-mix($color1, $color2, $percent: 50%, $model: $cs-color-model) {
|
|
2
|
+
|
|
3
|
+
$decimal : abs($percent - 100%) / 100%;
|
|
4
|
+
$hue-offset : ();
|
|
5
|
+
|
|
6
|
+
@if $model == rgb {
|
|
7
|
+
$hue-offset : (hue($color1) - hue($color2)) * $decimal;
|
|
8
|
+
@if (hue($color1) - hue($color2)) * .5 < -90deg {
|
|
9
|
+
$hue-offset : (hue($color1) + 360deg - hue($color2)) * $decimal;
|
|
10
|
+
}
|
|
11
|
+
@if (hue($color1) - hue($color2)) * .5 > 90deg {
|
|
12
|
+
$hue-offset : (hue($color1) - 360deg - hue($color2)) * $decimal;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@if $model == ryb {
|
|
17
|
+
$hue-offset : (ryb-hue($color1) - ryb-hue($color2)) * $decimal;
|
|
18
|
+
@if (ryb-hue($color1) - ryb-hue($color2)) * .5 < -90deg {
|
|
19
|
+
$hue-offset : (ryb-hue($color1) + 360deg - ryb-hue($color2)) * $decimal;
|
|
20
|
+
}
|
|
21
|
+
@if (ryb-hue($color1) - ryb-hue($color2)) * .5 > 90deg {
|
|
22
|
+
$hue-offset : (ryb-hue($color1) - 360deg - ryb-hue($color2)) * $decimal;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
$saturation-offset : (saturation($color1) - saturation($color2)) * $decimal;
|
|
27
|
+
$lightness-offset : (lightness($color1) - lightness($color2)) * $decimal;
|
|
28
|
+
|
|
29
|
+
@if $model == ryb {
|
|
30
|
+
$color1: ryb-adjust-hue($color1, $hue-offset * -1);
|
|
31
|
+
}
|
|
32
|
+
@else {
|
|
33
|
+
$color1: adjust-hue($color1, $hue-offset * -1);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
$color1: set-saturation($color1, saturation($color1) - $saturation-offset);
|
|
37
|
+
$color1: set-lightness($color1, lightness($color1) - $lightness-offset);
|
|
38
|
+
|
|
39
|
+
@return $color1;
|
|
40
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
////////////////////////////////////////////
|
|
2
|
+
// From Jina Bolton and Eric Meyer -- http://codepen.io/jina/pen/iosjp
|
|
3
|
+
@function cs-stripes($position, $colors) {
|
|
4
|
+
$colors: if(type-of($colors) != 'list', compact($colors), $colors);
|
|
5
|
+
$gradient: ();
|
|
6
|
+
$width: 100% / length($colors);
|
|
7
|
+
|
|
8
|
+
@for $i from 1 through length($colors) {
|
|
9
|
+
$pop: nth($colors,$i);
|
|
10
|
+
$new: $pop ($width * ($i - 1)), $pop ($width * $i);
|
|
11
|
+
$gradient: join($gradient, $new, comma);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@return linear-gradient($position, $gradient);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
////////////////////////////////////////////
|
|
18
|
+
// Color tester
|
|
19
|
+
|
|
20
|
+
@mixin cs-test($colors, $height: 2em, $element: "body:before") {
|
|
21
|
+
#{$element} {
|
|
22
|
+
content: "";
|
|
23
|
+
display: block;
|
|
24
|
+
height: $height;
|
|
25
|
+
@include background(cs-stripes(left, ($colors)));
|
|
26
|
+
position: relative;
|
|
27
|
+
z-index: 999999999999;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -1,45 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
// Loop numbers out of scale back into the scale.
|
|
4
|
-
@while $value >= 360 {
|
|
5
|
-
$value: $value - 360;
|
|
6
|
-
}
|
|
7
|
-
@while $value < 0 {
|
|
8
|
-
$value: $value + 360;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
// Find out how many units in each stop
|
|
12
|
-
$cs-color-deg: $units / length($stops);
|
|
13
|
-
|
|
14
|
-
// Count through stops
|
|
15
|
-
$cs-deg-count: $cs-color-deg;
|
|
16
|
-
$cs-stop-count: 1;
|
|
17
|
-
|
|
18
|
-
// Add the first stop to the end so it will be
|
|
19
|
-
// interpolated with the last stop.
|
|
20
|
-
$stops: append($stops, nth($stops, 1));
|
|
21
|
-
|
|
22
|
-
// Start interpolating
|
|
23
|
-
@for $i from 0 through length($stops) {
|
|
24
|
-
@if $value < $cs-deg-count {
|
|
25
|
-
@return mix(nth($stops, $cs-stop-count + 1), nth($stops, $cs-stop-count), abs(percentage(($cs-deg-count - $value) / $cs-color-deg) - 100 ));
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
// If the value is not in this stop, loop up to another stop.
|
|
29
|
-
@else {
|
|
30
|
-
$cs-deg-count: $cs-deg-count + $cs-color-deg;
|
|
31
|
-
$cs-stop-count: $cs-stop-count + 1
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
1
|
+
$ryb-interpolation: #FF0000 #FF4900 #FF7400 #FF9200 #FFAA00 #FFBF00 #FFD300 #FFE800 #FFFF00 #CCF600 #9FEE00 #67E300 #00CC00 #00AF64 #009999 #0B61A4 #1240AB #1B1BB3 #3914AF #530FAD #7109AA #A600A6 #CD0074 #E40045;
|
|
35
2
|
|
|
36
3
|
// RYB color interpolation
|
|
37
4
|
@function find-ryb($hue) {
|
|
38
5
|
|
|
39
6
|
// remove units on $hue
|
|
40
|
-
@if unit($hue) == deg {
|
|
41
|
-
$hue: $hue / 1deg;
|
|
42
|
-
}
|
|
7
|
+
@if unit($hue) == deg { $hue: $hue / 1deg; }
|
|
43
8
|
|
|
44
9
|
// return an interpolated hue
|
|
45
10
|
@return hue(cs-interpolate($hue));
|
|
@@ -77,24 +42,18 @@
|
|
|
77
42
|
// Start at the current hue and loop in the adjustment.
|
|
78
43
|
$hue-adjust: (ryb-hue($color) + $degrees) / 1deg;
|
|
79
44
|
|
|
80
|
-
$
|
|
81
|
-
$
|
|
45
|
+
$lightness: lightness($color);
|
|
46
|
+
$saturation: saturation($color);
|
|
82
47
|
|
|
83
48
|
// Set hue of new color
|
|
84
|
-
$new-color: cs-interpolate($hue-adjust);
|
|
49
|
+
$new-color: set-hue(red, hue(cs-interpolate($hue-adjust)));
|
|
85
50
|
|
|
86
|
-
//
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
$new-color: tint($new-color, abs($lightness));
|
|
92
|
-
}
|
|
51
|
+
// Add back lightness
|
|
52
|
+
$new-color: set-lightness($new-color, $lightness);
|
|
53
|
+
|
|
54
|
+
// Add back saturation
|
|
55
|
+
$new-color: set-saturation($new-color, $saturation);
|
|
93
56
|
|
|
94
|
-
// Adjust saturation
|
|
95
|
-
@if $saturation < 100% {
|
|
96
|
-
$new-color: desaturate($new-color, abs($saturation));
|
|
97
|
-
}
|
|
98
57
|
@return $new-color;
|
|
99
58
|
}
|
|
100
59
|
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: color-schemer
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.2.
|
|
4
|
+
version: 0.2.2
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -28,6 +28,22 @@ dependencies:
|
|
|
28
28
|
- - ~>
|
|
29
29
|
- !ruby/object:Gem::Version
|
|
30
30
|
version: '0.12'
|
|
31
|
+
- !ruby/object:Gem::Dependency
|
|
32
|
+
name: blend-mode
|
|
33
|
+
requirement: !ruby/object:Gem::Requirement
|
|
34
|
+
none: false
|
|
35
|
+
requirements:
|
|
36
|
+
- - ~>
|
|
37
|
+
- !ruby/object:Gem::Version
|
|
38
|
+
version: 0.0.1
|
|
39
|
+
type: :runtime
|
|
40
|
+
prerelease: false
|
|
41
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
42
|
+
none: false
|
|
43
|
+
requirements:
|
|
44
|
+
- - ~>
|
|
45
|
+
- !ruby/object:Gem::Version
|
|
46
|
+
version: 0.0.1
|
|
31
47
|
description: Create color schemes with ease.
|
|
32
48
|
email:
|
|
33
49
|
- scott@scottkellum.com
|
|
@@ -40,8 +56,11 @@ files:
|
|
|
40
56
|
- stylesheets/color-schemer/_cmyk.scss
|
|
41
57
|
- stylesheets/color-schemer/_color-adjustments.scss
|
|
42
58
|
- stylesheets/color-schemer/_color-schemer.scss
|
|
43
|
-
- stylesheets/color-schemer/
|
|
59
|
+
- stylesheets/color-schemer/_colorblind.scss
|
|
44
60
|
- stylesheets/color-schemer/_equalize.scss
|
|
61
|
+
- stylesheets/color-schemer/_interpolation.scss
|
|
62
|
+
- stylesheets/color-schemer/_mix.scss
|
|
63
|
+
- stylesheets/color-schemer/_mixins.scss
|
|
45
64
|
- stylesheets/color-schemer/_ryb.scss
|
|
46
65
|
- stylesheets/color-schemer/_tint-shade.scss
|
|
47
66
|
homepage: https://github.com/scottkellum/color-schemer
|