color-schemer 0.1.3 → 0.2.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.
- 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
|