color-schemer 0.1.3 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/color-schemer.rb +1 -1
- data/stylesheets/_color-schemer.scss +12 -0
- data/stylesheets/color-schemer/_color-adjustments.scss +30 -0
- data/stylesheets/color-schemer/_color-schemer.scss +171 -0
- data/stylesheets/color-schemer/_defaults.scss +5 -0
- data/stylesheets/color-schemer/_equalize.scss +5 -0
- data/stylesheets/color-schemer/_ryb.scss +136 -0
- data/stylesheets/color-schemer/_tint-shade.scss +9 -0
- metadata +39 -56
- data/color-schemer.gemspec +0 -24
- data/stylesheets/_color-schemer.sass +0 -178
data/lib/color-schemer.rb
CHANGED
@@ -0,0 +1,12 @@
|
|
1
|
+
// Define color schemes quickly
|
2
|
+
|
3
|
+
@import "color-schemer/defaults";
|
4
|
+
@import "color-schemer/ryb";
|
5
|
+
|
6
|
+
@import "color-schemer/equalize";
|
7
|
+
@import "color-schemer/tint-shade";
|
8
|
+
@import "color-schemer/color-adjustments";
|
9
|
+
@import "color-schemer/color-schemer";
|
10
|
+
|
11
|
+
// Tell other files that this is loaded.
|
12
|
+
$color-schemer-loaded: true;
|
@@ -0,0 +1,30 @@
|
|
1
|
+
// RGB functions
|
2
|
+
@function set-red($color, $red) {
|
3
|
+
@return rgba($red, green($color), blue($color), alpha($color));
|
4
|
+
}
|
5
|
+
|
6
|
+
@function set-green($color, $green) {
|
7
|
+
@return rgba(red($color), $green, blue($color), alpha($color));
|
8
|
+
}
|
9
|
+
|
10
|
+
@function set-blue($color, $blue) {
|
11
|
+
@return rgba(red($color), green($color), $blue, alpha($color));
|
12
|
+
}
|
13
|
+
|
14
|
+
|
15
|
+
// HSL Functions
|
16
|
+
@function set-hue($color, $hue) {
|
17
|
+
@return hsla($hue, saturation($color), lightness($color), alpha($color));
|
18
|
+
}
|
19
|
+
|
20
|
+
@function set-saturation($color, $saturation) {
|
21
|
+
@return hsla(hue($color), $saturation, lightness($color), alpha($color));
|
22
|
+
}
|
23
|
+
|
24
|
+
@function set-lightness($color, $lightness) {
|
25
|
+
@return hsla(hue($color), saturation($color), $lightness, alpha($color));
|
26
|
+
}
|
27
|
+
|
28
|
+
@function set-alpha($color, $alpha) {
|
29
|
+
@return hsla(hue($color), saturation($color), lightness($color), $alpha);
|
30
|
+
}
|
@@ -0,0 +1,171 @@
|
|
1
|
+
// brightness and hue offsets are based on the lightness and saturation of the color
|
2
|
+
// unless defined otherwise.
|
3
|
+
@function cs-brightness-offset($cs-brightness-offset) {
|
4
|
+
@if $cs-brightness-offset == false {
|
5
|
+
// find the difference between lightness
|
6
|
+
@return lightness($cs-primary) - lightness(invert($cs-primary));
|
7
|
+
}
|
8
|
+
@else {
|
9
|
+
@return $cs-brightness-offset;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
// Primary color
|
14
|
+
@function cs-primary($cs-primary:$cs-primary, $cs-scheme:$cs-scheme, $cs-hue-offset:$cs-hue-offset, $cs-brightness-offset:$cs-brightness-offset) {
|
15
|
+
@return $cs-primary;
|
16
|
+
}
|
17
|
+
|
18
|
+
// Secondary color scheme
|
19
|
+
@function cs-secondary($cs-primary:$cs-primary, $cs-scheme:$cs-scheme, $cs-hue-offset:$cs-hue-offset, $cs-brightness-offset:$cs-brightness-offset) {
|
20
|
+
$cs-brightness-offset: cs-brightness-offset($cs-brightness-offset);
|
21
|
+
|
22
|
+
// mono
|
23
|
+
@if $cs-scheme == mono {
|
24
|
+
@if $cs-brightness-offset < 0 {
|
25
|
+
@return lighten($cs-primary, abs($cs-brightness-offset));
|
26
|
+
}
|
27
|
+
@else {
|
28
|
+
@return darken($cs-primary, abs($cs-brightness-offset));
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
// complement
|
33
|
+
@if $cs-scheme == complement {
|
34
|
+
@if $cs-color-model == ryb {
|
35
|
+
@return ryb-complement($cs-primary);
|
36
|
+
}
|
37
|
+
@else {
|
38
|
+
@return complement($cs-primary);
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
// triad
|
43
|
+
@if $cs-scheme == triad {
|
44
|
+
@if $cs-color-model == ryb {
|
45
|
+
@return ryb-adjust-hue(ryb-complement($cs-primary), $cs-hue-offset);
|
46
|
+
}
|
47
|
+
@else {
|
48
|
+
@return adjust-hue(complement($cs-primary), $cs-hue-offset);
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
// tetrad
|
53
|
+
@if $cs-scheme == tetrad {
|
54
|
+
@if $cs-color-model == ryb {
|
55
|
+
@return ryb-adjust-hue($cs-primary, $cs-hue-offset);
|
56
|
+
}
|
57
|
+
@else {
|
58
|
+
@return adjust-hue($cs-primary, $cs-hue-offset);
|
59
|
+
}
|
60
|
+
}
|
61
|
+
|
62
|
+
// analogic
|
63
|
+
@if $cs-scheme == analogic or $cs-scheme == accented-analogic {
|
64
|
+
@if $cs-color-model == ryb {
|
65
|
+
@return ryb-adjust-hue($cs-primary, $cs-hue-offset);
|
66
|
+
}
|
67
|
+
@else {
|
68
|
+
@return adjust-hue($cs-primary, $cs-hue-offset);
|
69
|
+
}
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
73
|
+
// Tertiary color scheme
|
74
|
+
@function cs-tertiary($cs-primary:$cs-primary, $cs-scheme:$cs-scheme, $cs-hue-offset:$cs-hue-offset, $cs-brightness-offset:$cs-brightness-offset) {
|
75
|
+
$cs-brightness-offset: cs-brightness-offset($cs-brightness-offset);
|
76
|
+
|
77
|
+
// mono
|
78
|
+
@if $cs-scheme == mono {
|
79
|
+
@return mix(cs-primary(), cs-secondary());
|
80
|
+
}
|
81
|
+
|
82
|
+
// complement
|
83
|
+
@if $cs-scheme == complement {
|
84
|
+
@return equalize($cs-primary);
|
85
|
+
}
|
86
|
+
|
87
|
+
// triad
|
88
|
+
@if $cs-scheme == triad {
|
89
|
+
@if $cs-color-model == ryb {
|
90
|
+
@return ryb-adjust-hue(ryb-complement($cs-primary), $cs-hue-offset * -1);
|
91
|
+
}
|
92
|
+
@else {
|
93
|
+
@return adjust-hue(complement($cs-primary), $cs-hue-offset * -1);
|
94
|
+
}
|
95
|
+
}
|
96
|
+
|
97
|
+
// tetrad
|
98
|
+
@if $cs-scheme == tetrad {
|
99
|
+
@if $cs-color-model == ryb {
|
100
|
+
@return ryb-complement($cs-primary);
|
101
|
+
}
|
102
|
+
@else {
|
103
|
+
@return complement($cs-primary);
|
104
|
+
}
|
105
|
+
}
|
106
|
+
|
107
|
+
// analogic
|
108
|
+
@if $cs-scheme == analogic or $cs-scheme == accented-analogic {
|
109
|
+
@if $cs-color-model == ryb {
|
110
|
+
@return ryb-adjust-hue($cs-primary, $cs-hue-offset * -1);
|
111
|
+
}
|
112
|
+
@else {
|
113
|
+
@return adjust-hue($cs-primary, $cs-hue-offset * -1);
|
114
|
+
}
|
115
|
+
}
|
116
|
+
|
117
|
+
// accented-analogic
|
118
|
+
@if $cs-scheme == accented-analogic {
|
119
|
+
@if $cs-color-model == ryb {
|
120
|
+
@return ryb-complement($cs-primary);
|
121
|
+
}
|
122
|
+
@else {
|
123
|
+
@return complement($cs-primary);
|
124
|
+
}
|
125
|
+
}
|
126
|
+
}
|
127
|
+
|
128
|
+
// Quadrary color scheme
|
129
|
+
@function cs-quadrary($cs-primary:$cs-primary, $cs-scheme:$cs-scheme, $cs-hue-offset:$cs-hue-offset, $cs-brightness-offset:$cs-brightness-offset) {
|
130
|
+
$cs-brightness-offset: cs-brightness-offset($cs-brightness-offset);
|
131
|
+
|
132
|
+
// mono
|
133
|
+
@if $cs-scheme == mono {
|
134
|
+
@return equalize($cs-primary);
|
135
|
+
}
|
136
|
+
|
137
|
+
// complement
|
138
|
+
@if $cs-scheme == complement {
|
139
|
+
@return equalize(ryb-complement($cs-primary));
|
140
|
+
}
|
141
|
+
|
142
|
+
// triad
|
143
|
+
@if $cs-scheme == triad {
|
144
|
+
@return equalize($cs-primary);
|
145
|
+
}
|
146
|
+
|
147
|
+
// tetrad
|
148
|
+
@if $cs-scheme == tetrad {
|
149
|
+
@if $cs-color-model == ryb {
|
150
|
+
@return ryb-adjust-hue(ryb-complement($cs-primary), $cs-hue-offset);
|
151
|
+
}
|
152
|
+
@else {
|
153
|
+
@return adjust-hue(complement($cs-primary), $cs-hue-offset);
|
154
|
+
}
|
155
|
+
}
|
156
|
+
|
157
|
+
// analogic
|
158
|
+
@if $cs-scheme == analogic {
|
159
|
+
@return equalize($cs-primary);
|
160
|
+
}
|
161
|
+
|
162
|
+
// accented-analogic
|
163
|
+
@if $cs-scheme == accented-analogic {
|
164
|
+
@if $cs-color-model == ryb {
|
165
|
+
@return ryb-complement($cs-primary);
|
166
|
+
}
|
167
|
+
@else {
|
168
|
+
@return complement($cs-primary);
|
169
|
+
}
|
170
|
+
}
|
171
|
+
}
|
@@ -0,0 +1,136 @@
|
|
1
|
+
@function cs-interpolate($value, $units: 360, $stops: #FF0000 #FF4900 #FF7400 #FF9200 #FFAA00 #FFBF00 #FFD300 #FFE800 #FFFF00 #CCF600 #9FEE00 #67E300 #00CC00 #00AF64 #009999 #0B61A4 #1240AB #1B1BB3 #3914AF #530FAD #7109AA #A600A6 #CD0074 #E40045) {
|
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
|
+
}
|
35
|
+
|
36
|
+
// RYB color interpolation
|
37
|
+
@function find-ryb($hue) {
|
38
|
+
|
39
|
+
// remove units on $hue
|
40
|
+
@if unit($hue) == deg {
|
41
|
+
$hue: $hue / 1deg;
|
42
|
+
}
|
43
|
+
|
44
|
+
// return an interpolated hue
|
45
|
+
@return hue(cs-interpolate($hue));
|
46
|
+
}
|
47
|
+
|
48
|
+
// Find the RYB hue instead of RGB hue of a color.
|
49
|
+
// slow dumb loop at the moment.
|
50
|
+
@function ryb-hue($color) {
|
51
|
+
|
52
|
+
// find offset
|
53
|
+
$hue: find-ryb(hue($color)) - hue($color);
|
54
|
+
|
55
|
+
// apply the offset difference
|
56
|
+
$hue: hue($color) - $hue;
|
57
|
+
|
58
|
+
// Make within the range of 360 if not already.
|
59
|
+
@while $hue >= 360deg {
|
60
|
+
$hue: $hue - 360;
|
61
|
+
}
|
62
|
+
@while $hue < 0deg {
|
63
|
+
$hue: $hue + 360;
|
64
|
+
}
|
65
|
+
|
66
|
+
@return $hue;
|
67
|
+
}
|
68
|
+
|
69
|
+
// Changes the hue of a color.
|
70
|
+
@function ryb-adjust-hue($color, $degrees) {
|
71
|
+
|
72
|
+
// Convert precentag to degrees.
|
73
|
+
@if unit($degrees) == "%" {
|
74
|
+
$degrees: 360 * ($degrees / 100%);
|
75
|
+
}
|
76
|
+
|
77
|
+
// Start at the current hue and loop in the adjustment.
|
78
|
+
$hue-adjust: (ryb-hue($color) + $degrees) / 1deg;
|
79
|
+
|
80
|
+
$saturation: saturation(cs-interpolate(abs(ryb-hue($color)) / 1deg)) - saturation($color);
|
81
|
+
$lightness: lightness(cs-interpolate(abs(ryb-hue($color)) / 1deg)) - lightness($color);
|
82
|
+
|
83
|
+
// Set hue of new color
|
84
|
+
$new-color: cs-interpolate($hue-adjust);
|
85
|
+
|
86
|
+
// Tint or shade according to lightness
|
87
|
+
@if $lightness > 0 {
|
88
|
+
$new-color: shade($new-color, $lightness * 2);
|
89
|
+
}
|
90
|
+
@if $lightness < 0 {
|
91
|
+
$new-color: tint($new-color, abs($lightness));
|
92
|
+
}
|
93
|
+
|
94
|
+
// Adjust saturation
|
95
|
+
@if $saturation < 100% {
|
96
|
+
$new-color: desaturate($new-color, abs($saturation));
|
97
|
+
}
|
98
|
+
@return $new-color;
|
99
|
+
}
|
100
|
+
|
101
|
+
@function ryba($red, $yellow, $blue, $alpha) {
|
102
|
+
$hue: 0;
|
103
|
+
$saturation: 0;
|
104
|
+
$lightness: percentage(($red + $yellow + $blue) / (255 * 3));
|
105
|
+
@if $red == $yellow and $yellow == $blue {
|
106
|
+
@return hsla(0, 0, $lightness, $alpha);
|
107
|
+
}
|
108
|
+
@if $red >= $yellow and $red >= $blue {
|
109
|
+
$hue: 0;
|
110
|
+
}
|
111
|
+
@elseif $yellow >= $red and $yellow >= $blue {
|
112
|
+
$hue: 360 / 3;
|
113
|
+
}
|
114
|
+
@elseif $blue >= $red and $blue >= $yellow {
|
115
|
+
$hue: 360 / 3 * 2;
|
116
|
+
}
|
117
|
+
@return hsla(hue(cs-interpolate($hue)), 100%, 50%, 1);
|
118
|
+
}
|
119
|
+
|
120
|
+
@function ryb($red, $yellow, $blue) {
|
121
|
+
@return ryba($red, $yellow, $blue, 1);
|
122
|
+
}
|
123
|
+
|
124
|
+
@function set-ryb-hue($color, $hue) {
|
125
|
+
@return hsla(hue(cs-interpolate($hue)), saturation($color), lightness($color), alpha($color));
|
126
|
+
}
|
127
|
+
|
128
|
+
// Returns the complement of a color.
|
129
|
+
@function ryb-complement($color) {
|
130
|
+
@return ryb-adjust-hue($color, 180deg);
|
131
|
+
}
|
132
|
+
|
133
|
+
// Returns the inverse of a color.
|
134
|
+
@function ryb-invert($color) {
|
135
|
+
@return ryb-adjust-hue(hsl(hue($color), saturation(invert($color)), lightness(invert($color))), 180deg);
|
136
|
+
}
|
metadata
CHANGED
@@ -1,87 +1,70 @@
|
|
1
|
-
--- !ruby/object:Gem::Specification
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
2
|
name: color-schemer
|
3
|
-
version: !ruby/object:Gem::Version
|
4
|
-
|
5
|
-
prerelease:
|
6
|
-
segments:
|
7
|
-
- 0
|
8
|
-
- 1
|
9
|
-
- 3
|
10
|
-
version: 0.1.3
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.2.0
|
5
|
+
prerelease:
|
11
6
|
platform: ruby
|
12
|
-
authors:
|
7
|
+
authors:
|
13
8
|
- Scott Kellum
|
14
9
|
- Mason Wendell
|
15
10
|
autorequire:
|
16
11
|
bindir: bin
|
17
12
|
cert_chain: []
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
dependencies:
|
22
|
-
- !ruby/object:Gem::Dependency
|
13
|
+
date: 2011-10-06 00:00:00.000000000 Z
|
14
|
+
dependencies:
|
15
|
+
- !ruby/object:Gem::Dependency
|
23
16
|
name: compass
|
24
|
-
|
25
|
-
requirement: &id001 !ruby/object:Gem::Requirement
|
17
|
+
requirement: !ruby/object:Gem::Requirement
|
26
18
|
none: false
|
27
|
-
requirements:
|
19
|
+
requirements:
|
28
20
|
- - ~>
|
29
|
-
- !ruby/object:Gem::Version
|
30
|
-
|
31
|
-
segments:
|
32
|
-
- 0
|
33
|
-
- 11
|
34
|
-
version: "0.11"
|
21
|
+
- !ruby/object:Gem::Version
|
22
|
+
version: '0.12'
|
35
23
|
type: :runtime
|
36
|
-
|
24
|
+
prerelease: false
|
25
|
+
version_requirements: !ruby/object:Gem::Requirement
|
26
|
+
none: false
|
27
|
+
requirements:
|
28
|
+
- - ~>
|
29
|
+
- !ruby/object:Gem::Version
|
30
|
+
version: '0.12'
|
37
31
|
description: Create color schemes with ease.
|
38
|
-
email:
|
32
|
+
email:
|
39
33
|
- scott@scottkellum.com
|
40
34
|
executables: []
|
41
|
-
|
42
35
|
extensions: []
|
43
|
-
|
44
36
|
extra_rdoc_files: []
|
45
|
-
|
46
|
-
files:
|
47
|
-
- color-schemer.gemspec
|
37
|
+
files:
|
48
38
|
- lib/color-schemer.rb
|
49
|
-
- stylesheets/_color-schemer.
|
50
|
-
|
39
|
+
- stylesheets/_color-schemer.scss
|
40
|
+
- stylesheets/color-schemer/_color-adjustments.scss
|
41
|
+
- stylesheets/color-schemer/_color-schemer.scss
|
42
|
+
- stylesheets/color-schemer/_defaults.scss
|
43
|
+
- stylesheets/color-schemer/_equalize.scss
|
44
|
+
- stylesheets/color-schemer/_ryb.scss
|
45
|
+
- stylesheets/color-schemer/_tint-shade.scss
|
51
46
|
homepage: https://github.com/scottkellum/color-schemer
|
52
47
|
licenses: []
|
53
|
-
|
54
48
|
post_install_message:
|
55
49
|
rdoc_options: []
|
56
|
-
|
57
|
-
require_paths:
|
50
|
+
require_paths:
|
58
51
|
- lib
|
59
|
-
required_ruby_version: !ruby/object:Gem::Requirement
|
52
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
60
53
|
none: false
|
61
|
-
requirements:
|
62
|
-
- -
|
63
|
-
- !ruby/object:Gem::Version
|
64
|
-
|
65
|
-
|
66
|
-
- 0
|
67
|
-
version: "0"
|
68
|
-
required_rubygems_version: !ruby/object:Gem::Requirement
|
54
|
+
requirements:
|
55
|
+
- - ! '>='
|
56
|
+
- !ruby/object:Gem::Version
|
57
|
+
version: '0'
|
58
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
69
59
|
none: false
|
70
|
-
requirements:
|
71
|
-
- -
|
72
|
-
- !ruby/object:Gem::Version
|
73
|
-
hash: 17
|
74
|
-
segments:
|
75
|
-
- 1
|
76
|
-
- 3
|
77
|
-
- 5
|
60
|
+
requirements:
|
61
|
+
- - ! '>='
|
62
|
+
- !ruby/object:Gem::Version
|
78
63
|
version: 1.3.5
|
79
64
|
requirements: []
|
80
|
-
|
81
65
|
rubyforge_project: color-schemer
|
82
|
-
rubygems_version: 1.
|
66
|
+
rubygems_version: 1.8.24
|
83
67
|
signing_key:
|
84
68
|
specification_version: 3
|
85
69
|
summary: Create color schemes with ease.
|
86
70
|
test_files: []
|
87
|
-
|
data/color-schemer.gemspec
DELETED
@@ -1,24 +0,0 @@
|
|
1
|
-
# -*- encoding: utf-8 -*-
|
2
|
-
|
3
|
-
Gem::Specification.new do |s|
|
4
|
-
s.name = %q{color-schemer}
|
5
|
-
s.version = "0.1.3"
|
6
|
-
|
7
|
-
s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
|
8
|
-
s.authors = ["Scott Kellum", "Mason Wendell"]
|
9
|
-
s.date = %q{2011-10-06}
|
10
|
-
s.description = %q{Create color schemes with ease.}
|
11
|
-
s.email = %w{scott@scottkellum.com}
|
12
|
-
s.has_rdoc = false
|
13
|
-
s.files = [
|
14
|
-
"color-schemer.gemspec",
|
15
|
-
"lib/color-schemer.rb",
|
16
|
-
"stylesheets/_color-schemer.sass"
|
17
|
-
]
|
18
|
-
s.homepage = %q{https://github.com/scottkellum/color-schemer}
|
19
|
-
s.require_paths = ["lib"]
|
20
|
-
s.rubyforge_project = %q{color-schemer}
|
21
|
-
s.rubygems_version = %q{0.1.2}
|
22
|
-
s.summary = %q{Create color schemes with ease.}
|
23
|
-
s.add_dependency(%q<compass>, ["~> 0.11"])
|
24
|
-
end
|
@@ -1,178 +0,0 @@
|
|
1
|
-
// Define color schemes quickly
|
2
|
-
|
3
|
-
// Color schemes to choose from
|
4
|
-
// mono
|
5
|
-
// complement
|
6
|
-
// triad
|
7
|
-
// tetrad
|
8
|
-
// analogic
|
9
|
-
// accented-analogic
|
10
|
-
|
11
|
-
$color-location: primary !default
|
12
|
-
$base-color: #f00 !default
|
13
|
-
$color-scheme: mono !default
|
14
|
-
$hue-offset: 20 !default
|
15
|
-
$brightness-offset: 10% !default
|
16
|
-
$color-model: rgb !default
|
17
|
-
$equalize: false !default
|
18
|
-
|
19
|
-
// Normalizer credit to Mason Wendell: https://github.com/canarymason/The-Coding-Designers-Survival-Kit/blob/master/sass/partials/lib/variables/_color_schemes.sass
|
20
|
-
@function equalize($color)
|
21
|
-
@return hsl(hue($color), 100%, 50%)
|
22
|
-
|
23
|
-
// RYB color model complement
|
24
|
-
@function ryb-complement($color)
|
25
|
-
$hue: round(hue($color)/ 10) // find and round hue
|
26
|
-
$newhue: $hue
|
27
|
-
$sat: saturation($color)
|
28
|
-
$lite: lightness($color)
|
29
|
-
// Manually adjusted values until these can be mathmatically explained.
|
30
|
-
@if $hue == 0
|
31
|
-
$newhue: hue(adjust-hue(invert($color), -60)) // Start with red
|
32
|
-
@if $hue == 1
|
33
|
-
$newhue: hue(adjust-hue(invert($color), -50))
|
34
|
-
@if $hue == 2
|
35
|
-
$newhue: hue(adjust-hue(invert($color), -40))
|
36
|
-
@if $hue == 3
|
37
|
-
$newhue: hue(adjust-hue(invert($color), -25))
|
38
|
-
@if $hue == 4
|
39
|
-
$newhue: hue(adjust-hue(invert($color), 0))
|
40
|
-
@if $hue == 5
|
41
|
-
$newhue: hue(adjust-hue(invert($color), 25))
|
42
|
-
@if $hue == 6
|
43
|
-
$newhue: hue(adjust-hue(invert($color), 38))
|
44
|
-
@if $hue == 7
|
45
|
-
$newhue: hue(adjust-hue(invert($color), 44))
|
46
|
-
@if $hue == 8
|
47
|
-
$newhue: hue(adjust-hue(invert($color), 52))
|
48
|
-
@if $hue == 9
|
49
|
-
$newhue: hue(adjust-hue(invert($color), 58))
|
50
|
-
@if $hue == 10
|
51
|
-
$newhue: hue(adjust-hue(invert($color), 59))
|
52
|
-
@if $hue == 11
|
53
|
-
$newhue: hue(adjust-hue(invert($color), 60))
|
54
|
-
@if $hue == 12
|
55
|
-
$newhue: hue(adjust-hue(invert($color), 60)) // Green is halfway through the RYB model.
|
56
|
-
@if $hue == 13
|
57
|
-
$newhue: hue(adjust-hue(invert($color), 55))
|
58
|
-
@if $hue == 14
|
59
|
-
$newhue: hue(adjust-hue(invert($color), 50))
|
60
|
-
@if $hue == 15
|
61
|
-
$newhue: hue(adjust-hue(invert($color), 45))
|
62
|
-
@if $hue == 16
|
63
|
-
$newhue: hue(adjust-hue(invert($color), 40))
|
64
|
-
@if $hue == 17
|
65
|
-
$newhue: hue(adjust-hue(invert($color), 35))
|
66
|
-
@if $hue == 18
|
67
|
-
$newhue: hue(adjust-hue(invert($color), 30))
|
68
|
-
@if $hue == 19
|
69
|
-
$newhue: hue(adjust-hue(invert($color), 25))
|
70
|
-
@if $hue == 20
|
71
|
-
$newhue: hue(adjust-hue(invert($color), 20))
|
72
|
-
@if $hue == 21
|
73
|
-
$newhue: hue(adjust-hue(invert($color), 15))
|
74
|
-
@if $hue == 22
|
75
|
-
$newhue: hue(adjust-hue(invert($color), -5))
|
76
|
-
@if $hue == 23
|
77
|
-
$newhue: hue(adjust-hue(invert($color), -8))
|
78
|
-
@if $hue == 24
|
79
|
-
$newhue: hue(adjust-hue(invert($color), -17))
|
80
|
-
@if $hue == 25
|
81
|
-
$newhue: hue(adjust-hue(invert($color), -25))
|
82
|
-
@if $hue == 26
|
83
|
-
$newhue: hue(adjust-hue(invert($color), -30))
|
84
|
-
@if $hue == 27
|
85
|
-
$newhue: hue(adjust-hue(invert($color), -35))
|
86
|
-
@if $hue == 28
|
87
|
-
$newhue: hue(adjust-hue(invert($color), -40))
|
88
|
-
@if $hue == 29
|
89
|
-
$newhue: hue(adjust-hue(invert($color), -43))
|
90
|
-
@if $hue == 30
|
91
|
-
$newhue: hue(adjust-hue(invert($color), -46))
|
92
|
-
@if $hue == 31
|
93
|
-
$newhue: hue(adjust-hue(invert($color), -49))
|
94
|
-
@if $hue == 32
|
95
|
-
$newhue: hue(adjust-hue(invert($color), -52))
|
96
|
-
@if $hue == 33
|
97
|
-
$newhue: hue(adjust-hue(invert($color), -54))
|
98
|
-
@if $hue == 34
|
99
|
-
$newhue: hue(adjust-hue(invert($color), -57))
|
100
|
-
@if $hue == 35
|
101
|
-
$newhue: hue(adjust-hue(invert($color), -60))
|
102
|
-
@return hsl($newhue,$sat,$lite)
|
103
|
-
|
104
|
-
// Add percentage of white to a color
|
105
|
-
@function tint($color, $percent)
|
106
|
-
@return mix(white, $color, $percent)
|
107
|
-
|
108
|
-
// Add percentage of black to a color
|
109
|
-
@function shade($color, $percent)
|
110
|
-
@return mix(black, $color, $percent)
|
111
|
-
|
112
|
-
@function color-schemer($color-location:$color-location,$base-color:$base-color,$color-scheme:$color-scheme,$hue-offset:$hue-offset)
|
113
|
-
// Primary, just return the base-color.
|
114
|
-
@if $equalize
|
115
|
-
$base-color: equalize($base-color)
|
116
|
-
@if $color-location == primary
|
117
|
-
@return $base-color
|
118
|
-
// Secondary colors
|
119
|
-
@if $color-location == secondary
|
120
|
-
@if $color-scheme == mono
|
121
|
-
@return lighten($base-color, $brightness-offset)
|
122
|
-
@if $color-scheme == complement
|
123
|
-
@if $color-model == ryb
|
124
|
-
@return ryb-complement($base-color)
|
125
|
-
@return complement($base-color)
|
126
|
-
@if $color-scheme == triad
|
127
|
-
@if $color-model == ryb
|
128
|
-
@return adjust-hue(ryb-complement($base-color), $hue-offset)
|
129
|
-
@return adjust-hue(complement($base-color), $hue-offset)
|
130
|
-
@if $color-scheme == tetrad
|
131
|
-
@return adjust-hue($base-color, $hue-offset)
|
132
|
-
@if $color-scheme == analogic
|
133
|
-
@return adjust-hue($base-color, $hue-offset)
|
134
|
-
@if $color-scheme == accented-analogic
|
135
|
-
@return adjust-hue($base-color, $hue-offset)
|
136
|
-
@warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
|
137
|
-
// Tertiary colors
|
138
|
-
@if $color-location == tertiary
|
139
|
-
@if $color-scheme == mono
|
140
|
-
@return lighten($base-color, $brightness-offset * 2)
|
141
|
-
@if $color-scheme == complement
|
142
|
-
@return lighten($base-color, $brightness-offset)
|
143
|
-
@if $color-scheme == triad
|
144
|
-
@if $color-model == ryb
|
145
|
-
@return adjust-hue(ryb-complement($base-color), -$hue-offset)
|
146
|
-
@return adjust-hue(complement($base-color), -$hue-offset)
|
147
|
-
@if $color-scheme == tetrad
|
148
|
-
@if $color-model == ryb
|
149
|
-
@return ryb-complement($base-color)
|
150
|
-
@return complement($base-color)
|
151
|
-
@if $color-scheme == analogic
|
152
|
-
@return adjust-hue($base-color, -$hue-offset)
|
153
|
-
@if $color-scheme == accented-analogic
|
154
|
-
@return adjust-hue($base-color, -$hue-offset)
|
155
|
-
@warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
|
156
|
-
// Quadrary colors
|
157
|
-
@if $color-location == quadrary
|
158
|
-
@if $color-scheme == mono
|
159
|
-
@return darken($base-color, $brightness-offset)
|
160
|
-
@if $color-scheme == complement
|
161
|
-
@return darken($base-color, $brightness-offset)
|
162
|
-
@if $color-scheme == triad
|
163
|
-
@return darken($base-color, $brightness-offset)
|
164
|
-
@if $color-scheme == tetrad
|
165
|
-
@if $color-model == ryb
|
166
|
-
@return adjust-hue(ryb-complement($base-color), $hue-offset)
|
167
|
-
@return adjust-hue(complement($base-color), $hue-offset)
|
168
|
-
@if $color-scheme == analogic
|
169
|
-
@return darken($base-color, $brightness-offset)
|
170
|
-
@if $color-scheme == accented-analogic
|
171
|
-
@if $color-model == ryb
|
172
|
-
@return ryb-complement($base-color)
|
173
|
-
@return complement($base-color)
|
174
|
-
@warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
|
175
|
-
@warn "Oops! You didn’t properly define $color-location (primary, secondary...)"
|
176
|
-
|
177
|
-
// Tell other files that this is loaded.
|
178
|
-
$color-schemer-loaded: true
|