compass-colors 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/README.markdown +50 -0
- data/Rakefile +26 -0
- data/VERSION.yml +4 -0
- data/example/config.rb +13 -0
- data/example/split_compliment_example.html +38 -0
- data/example/src/_split_compliment_theme.sass +28 -0
- data/example/src/screen.sass +40 -0
- data/lib/compass-colors.rb +9 -0
- data/lib/compass-colors/compass_extension.rb +7 -0
- data/lib/compass-colors/hsl.rb +108 -0
- data/lib/compass-colors/sass_extensions.rb +73 -0
- data/spec/approximate_color_matching.rb +43 -0
- data/spec/sass_extensions_spec.rb +44 -0
- data/templates/analogous/_theme.sass +28 -0
- data/templates/analogous/manifest.rb +1 -0
- data/templates/basic/_theme.sass +7 -0
- data/templates/basic/manifest.rb +1 -0
- data/templates/complementary/_theme.sass +20 -0
- data/templates/complementary/manifest.rb +1 -0
- data/templates/split_complement/_theme.sass +28 -0
- data/templates/split_complement/manifest.rb +1 -0
- data/templates/triadic/_theme.sass +28 -0
- data/templates/triadic/manifest.rb +1 -0
- metadata +87 -0
data/README.markdown
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
Compass Colors
|
|
2
|
+
==============
|
|
3
|
+
|
|
4
|
+
This compass extension provides support for working with colors in Sass and generating color themes for use on your website.
|
|
5
|
+
|
|
6
|
+
Installing
|
|
7
|
+
==========
|
|
8
|
+
|
|
9
|
+
sudo gem install chriseppstein-compass-colors
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
To install a theme into your existing compass project, add the following to your compass configuration file:
|
|
13
|
+
|
|
14
|
+
require 'compass-colors'
|
|
15
|
+
|
|
16
|
+
Then run this command:
|
|
17
|
+
|
|
18
|
+
compass -f colors -p <Theme Name>
|
|
19
|
+
|
|
20
|
+
The _theme.sass partial can then be imported into your stylesheets and the color constants can be used.
|
|
21
|
+
|
|
22
|
+
@import theme.sass
|
|
23
|
+
|
|
24
|
+
Supported Color Themes
|
|
25
|
+
======================
|
|
26
|
+
|
|
27
|
+
With all of these themes, you must pick a base color and the theme takes it from there:
|
|
28
|
+
|
|
29
|
+
* Basic/Monochromatic (basic)
|
|
30
|
+
* Complementary (complementary)
|
|
31
|
+
* Triadic (triadic)
|
|
32
|
+
* Split Complementary (split_complementary)
|
|
33
|
+
* Analogous (analogous)
|
|
34
|
+
|
|
35
|
+
Sass Functions Provided
|
|
36
|
+
=======================
|
|
37
|
+
|
|
38
|
+
* `lighten(color, percentage)` - Create a color lighter by the percent amount provided.
|
|
39
|
+
* `darken(color, percentage)` - Create a color darker by the percent amount provided.
|
|
40
|
+
* `saturate(color, percentage)` - Create a color lighter by the percent amount provided.
|
|
41
|
+
* `desaturate(color, percentage)` - Create a color lighter by the percent amount provided.
|
|
42
|
+
* `hue(color)` - Extract the hue from the color in degrees (0-360). Suitable to be passed as the first argument of hsl.
|
|
43
|
+
* `saturation(color)` - Extract the saturation from the color in percent (0-100). Suitable to be passed as the second argument of hsl.
|
|
44
|
+
* `luminosity(color)` - Extract the luminosity from the color in percent (0-100). Suitable to be passed as the third argument of hsl.
|
|
45
|
+
* `mix(color1, color2, percentage)` - Create a new color by mixing two colors together. Percentage (0-100) is optional, and indicates how
|
|
46
|
+
much of color2 should be mixed into color1.
|
|
47
|
+
* `grayscale(color)` - Create a gray color by mapping the color provided to the grayscale.
|
|
48
|
+
* `adjust_hue(color, degrees)` - Add the number of degrees provided to the hue of the color keeping luminosity and saturation constant.
|
|
49
|
+
Degrees can be negative.
|
|
50
|
+
* `complement(color)` - Returns the compliment of the color provided.
|
data/Rakefile
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
begin
|
|
2
|
+
require 'jeweler'
|
|
3
|
+
Jeweler::Tasks.new do |gemspec|
|
|
4
|
+
gemspec.name = "compass-colors"
|
|
5
|
+
gemspec.summary = "Color Support for Compass & Sass"
|
|
6
|
+
gemspec.email = "chris@eppsteins.net"
|
|
7
|
+
gemspec.homepage = "http://compass-style.org"
|
|
8
|
+
gemspec.description = "Sass Extensions and color theme templates to make working with colors easier and more maintainable."
|
|
9
|
+
gemspec.authors = ["Chris Eppstein"]
|
|
10
|
+
gemspec.has_rdoc = false
|
|
11
|
+
gemspec.add_dependency('chriseppstein-compass', '>= 0.8.7')
|
|
12
|
+
gemspec.files = []
|
|
13
|
+
gemspec.files << "README.markdown"
|
|
14
|
+
gemspec.files << "LICENSE.markdown"
|
|
15
|
+
gemspec.files << "VERSION.yml"
|
|
16
|
+
gemspec.files << "Rakefile"
|
|
17
|
+
gemspec.files += Dir.glob("example/**/*")
|
|
18
|
+
gemspec.files -= Dir.glob("example/**/*.css")
|
|
19
|
+
gemspec.files -= Dir.glob("example/*/extensions/**")
|
|
20
|
+
gemspec.files += Dir.glob("lib/**/*")
|
|
21
|
+
gemspec.files += Dir.glob("spec/**/*")
|
|
22
|
+
gemspec.files += Dir.glob("templates/**/*.*")
|
|
23
|
+
end
|
|
24
|
+
rescue LoadError
|
|
25
|
+
puts "Jeweler not available. Install it with: sudo gem install technicalpickles-jeweler -s http://gems.github.com"
|
|
26
|
+
end
|
data/VERSION.yml
ADDED
data/example/config.rb
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# Require any additional compass plugins here.
|
|
2
|
+
require File.join(File.dirname(__FILE__), '..', 'lib', 'compass-colors')
|
|
3
|
+
|
|
4
|
+
project_type = :stand_alone
|
|
5
|
+
# Set this to the root of your project when deployed:
|
|
6
|
+
http_path = "/"
|
|
7
|
+
css_dir = "stylesheets"
|
|
8
|
+
sass_dir = "src"
|
|
9
|
+
images_dir = "images"
|
|
10
|
+
extensions_dir = "extensions"
|
|
11
|
+
output_style = :compact
|
|
12
|
+
# To enable relative paths to assets via compass helper functions. Uncomment:
|
|
13
|
+
relative_assets = true
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
2
|
+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
6
|
+
<title>Color Example</title>
|
|
7
|
+
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" charset="utf-8">
|
|
8
|
+
</head>
|
|
9
|
+
<body id="split-compliment">
|
|
10
|
+
<div class="base">
|
|
11
|
+
<div class="lighter">
|
|
12
|
+
|
|
13
|
+
</div>
|
|
14
|
+
<div class="darker">
|
|
15
|
+
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
</div>
|
|
19
|
+
<div class="complement-support">
|
|
20
|
+
<div class="lighter">
|
|
21
|
+
|
|
22
|
+
</div>
|
|
23
|
+
<div class="darker">
|
|
24
|
+
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
</div>
|
|
28
|
+
<div class="complement-accent">
|
|
29
|
+
<div class="lighter">
|
|
30
|
+
|
|
31
|
+
</div>
|
|
32
|
+
<div class="darker">
|
|
33
|
+
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
</div>
|
|
37
|
+
</body>
|
|
38
|
+
</html>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
// In theory the lightness and saturation values of corresponding colors should not change.
|
|
2
|
+
// In reality, these values should be adjusted to create a more pleasant color combination.
|
|
3
|
+
// There is not any mathematical formula for this, but you can use the lighten, darken,
|
|
4
|
+
// saturate and desaturate functions to adjust your main colors.
|
|
5
|
+
!base_color ||= red
|
|
6
|
+
!complement_support_color = adjust_hue(!base_color, 180 + 30)
|
|
7
|
+
!complement_accent_color = adjust_hue(!base_color, 180 - 30)
|
|
8
|
+
|
|
9
|
+
!base_dark_color = darken(!base_color, 25)
|
|
10
|
+
!base_darker_color = darken(!base_color, 50)
|
|
11
|
+
!base_darkest_color = darken(!base_color, 75)
|
|
12
|
+
!base_light_color = lighten(!base_color, 25)
|
|
13
|
+
!base_lighter_color = lighten(!base_color, 50)
|
|
14
|
+
!base_lightest_color = lighten(!base_color, 75)
|
|
15
|
+
|
|
16
|
+
!dark_complement_support_color = darken(!complement_support_color, 25)
|
|
17
|
+
!darker_complement_support_color = darken(!complement_support_color, 50)
|
|
18
|
+
!darkest_complement_support_color = darken(!complement_support_color, 75)
|
|
19
|
+
!light_complement_support_color = lighten(!complement_support_color, 25)
|
|
20
|
+
!lighter_complement_support_color = lighten(!complement_support_color, 50)
|
|
21
|
+
!lightest_complement_support_color = lighten(!complement_support_color, 75)
|
|
22
|
+
|
|
23
|
+
!dark_complement_accent_color = darken(!complement_accent_color, 25)
|
|
24
|
+
!darker_complement_accent_color = darken(!complement_accent_color, 50)
|
|
25
|
+
!darkest_complement_accent_color = darken(!complement_accent_color, 75)
|
|
26
|
+
!light_complement_accent_color = lighten(!complement_accent_color, 25)
|
|
27
|
+
!lighter_complement_accent_color = lighten(!complement_accent_color, 50)
|
|
28
|
+
!lightest_complement_accent_color = lighten(!complement_accent_color, 75)
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
@import compass/utilities.sass
|
|
2
|
+
// We can change the theme color here by pre-setting the !base_color
|
|
3
|
+
!base_color = #614DA3
|
|
4
|
+
@import split_compliment_theme.sass
|
|
5
|
+
|
|
6
|
+
html
|
|
7
|
+
:height 100%
|
|
8
|
+
|
|
9
|
+
body#split-compliment
|
|
10
|
+
:margin 0
|
|
11
|
+
:height 100%
|
|
12
|
+
.base
|
|
13
|
+
:background-color = !base_color
|
|
14
|
+
.darker
|
|
15
|
+
:background-color = !base_dark_color
|
|
16
|
+
.lighter
|
|
17
|
+
:background-color = !base_light_color
|
|
18
|
+
.complement-support
|
|
19
|
+
:background-color = !complement_support_color
|
|
20
|
+
.darker
|
|
21
|
+
:background-color = !dark_complement_support_color
|
|
22
|
+
.lighter
|
|
23
|
+
:background-color = !light_complement_support_color
|
|
24
|
+
.complement-accent
|
|
25
|
+
:background-color = !complement_accent_color
|
|
26
|
+
.darker
|
|
27
|
+
:background-color = !dark_complement_accent_color
|
|
28
|
+
.lighter
|
|
29
|
+
:background-color = !light_complement_accent_color
|
|
30
|
+
.base, .complement-support, .complement-accent
|
|
31
|
+
+clearfix
|
|
32
|
+
:height 33%
|
|
33
|
+
div
|
|
34
|
+
:height 100%
|
|
35
|
+
.darker
|
|
36
|
+
:float left
|
|
37
|
+
.lighter
|
|
38
|
+
:float right
|
|
39
|
+
.darker, .lighter
|
|
40
|
+
:width 33%
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
require 'compass'
|
|
2
|
+
|
|
3
|
+
module Compass
|
|
4
|
+
module Colors
|
|
5
|
+
end
|
|
6
|
+
end
|
|
7
|
+
require File.join(File.dirname(__FILE__), 'compass-colors', 'hsl')
|
|
8
|
+
require File.join(File.dirname(__FILE__), 'compass-colors', 'compass_extension')
|
|
9
|
+
require File.join(File.dirname(__FILE__), 'compass-colors', 'sass_extensions')
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
if defined?(Compass)
|
|
2
|
+
options = Hash.new
|
|
3
|
+
options[:stylesheets_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'sass'))
|
|
4
|
+
options[:templates_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'templates'))
|
|
5
|
+
|
|
6
|
+
Compass::Frameworks.register('colors', options)
|
|
7
|
+
end
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
module Compass
|
|
2
|
+
module Colors
|
|
3
|
+
class HSL
|
|
4
|
+
|
|
5
|
+
# Stored in degrees [0, 360)
|
|
6
|
+
attr_reader :h
|
|
7
|
+
# Stored as a number from [0,1]
|
|
8
|
+
attr_reader :s, :l
|
|
9
|
+
|
|
10
|
+
def self.from_color(color)
|
|
11
|
+
from_rgb(*color.value)
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
def self.from_rgb(r, g, b)
|
|
15
|
+
rgb = [r,g,b]
|
|
16
|
+
rgb.map!{|c| c / 255.0}
|
|
17
|
+
min_rgb = rgb.min
|
|
18
|
+
max_rgb = rgb.max
|
|
19
|
+
delta = max_rgb - min_rgb
|
|
20
|
+
|
|
21
|
+
lightness = (max_rgb + min_rgb) / 2.0
|
|
22
|
+
|
|
23
|
+
if delta < 1e-5
|
|
24
|
+
hue = 0
|
|
25
|
+
saturation = 0
|
|
26
|
+
else
|
|
27
|
+
saturation = if ( lightness < 0.5 )
|
|
28
|
+
delta / ( max_rgb + min_rgb )
|
|
29
|
+
else
|
|
30
|
+
delta / ( 2 - max_rgb - min_rgb )
|
|
31
|
+
end
|
|
32
|
+
|
|
33
|
+
deltas = rgb.map{|c| (((max_rgb - c) / 6.0) + (delta / 2.0)) / delta}
|
|
34
|
+
|
|
35
|
+
hue = if (rgb[0] - max_rgb).abs < 1e-5
|
|
36
|
+
deltas[2] - deltas[1]
|
|
37
|
+
elsif (rgb[1] - max_rgb).abs < 1e-5
|
|
38
|
+
( 1.0 / 3.0 ) + deltas[0] - deltas[2]
|
|
39
|
+
else
|
|
40
|
+
( 2.0 / 3.0 ) + deltas[1] - deltas[0]
|
|
41
|
+
end
|
|
42
|
+
hue += 1 if hue < 0
|
|
43
|
+
hue -= 1 if hue > 1
|
|
44
|
+
end
|
|
45
|
+
from_fractions(hue, saturation, lightness)
|
|
46
|
+
end
|
|
47
|
+
|
|
48
|
+
def self.from_fractions(hue, saturation, lightness)
|
|
49
|
+
HSL.new(360 * hue, saturation, lightness)
|
|
50
|
+
end
|
|
51
|
+
|
|
52
|
+
def initialize(h, s, l)
|
|
53
|
+
self.h = h
|
|
54
|
+
self.s = s
|
|
55
|
+
self.l = l
|
|
56
|
+
end
|
|
57
|
+
|
|
58
|
+
def to_color
|
|
59
|
+
m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s
|
|
60
|
+
m1 = l * 2 - m2
|
|
61
|
+
Sass::Script::Color.new([hue_to_rgb(m1, m2, hp + 1.0/3),
|
|
62
|
+
hue_to_rgb(m1, m2, hp),
|
|
63
|
+
hue_to_rgb(m1, m2, hp - 1.0/3)].map { |c| (c * 0xff).round })
|
|
64
|
+
end
|
|
65
|
+
|
|
66
|
+
def h=(hue)
|
|
67
|
+
@h = hue % 360
|
|
68
|
+
end
|
|
69
|
+
|
|
70
|
+
def s=(saturation)
|
|
71
|
+
@s = if saturation < 0
|
|
72
|
+
0.0
|
|
73
|
+
elsif saturation > 1
|
|
74
|
+
1.0
|
|
75
|
+
else
|
|
76
|
+
saturation
|
|
77
|
+
end
|
|
78
|
+
end
|
|
79
|
+
|
|
80
|
+
def l=(lightness)
|
|
81
|
+
@l = if lightness < 0
|
|
82
|
+
0.0
|
|
83
|
+
elsif lightness > 1
|
|
84
|
+
1.0
|
|
85
|
+
else
|
|
86
|
+
lightness
|
|
87
|
+
end
|
|
88
|
+
end
|
|
89
|
+
|
|
90
|
+
private
|
|
91
|
+
#hue as a percentage
|
|
92
|
+
def hp
|
|
93
|
+
h / 360.0
|
|
94
|
+
end
|
|
95
|
+
# helper for making rgb
|
|
96
|
+
def hue_to_rgb(m1, m2, h)
|
|
97
|
+
h += 1 if h < 0
|
|
98
|
+
h -= 1 if h > 1
|
|
99
|
+
return m1 + (m2 - m1) * h * 6 if h * 6 < 1
|
|
100
|
+
return m2 if h * 2 < 1
|
|
101
|
+
return m1 + (m2 - m1) * (2.0/3 - h) * 6 if h * 3 < 2
|
|
102
|
+
return m1
|
|
103
|
+
end
|
|
104
|
+
|
|
105
|
+
end
|
|
106
|
+
end
|
|
107
|
+
end
|
|
108
|
+
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
require 'sass'
|
|
2
|
+
|
|
3
|
+
module Sass::Script::Functions
|
|
4
|
+
# Takes a color object and amount by which to lighten it (0 to 100).
|
|
5
|
+
def lighten(color, amount)
|
|
6
|
+
hsl = Compass::Colors::HSL.from_color(color)
|
|
7
|
+
hsl.l += (1 - hsl.l) * (amount.value / 100.0)
|
|
8
|
+
hsl.to_color
|
|
9
|
+
end
|
|
10
|
+
|
|
11
|
+
# Takes a color object and amount by which to darken it (0 to 100).
|
|
12
|
+
def darken(color, amount)
|
|
13
|
+
hsl = Compass::Colors::HSL.from_color(color)
|
|
14
|
+
hsl.l *= 1.0 - (amount.value / 100.0)
|
|
15
|
+
hsl.to_color
|
|
16
|
+
end
|
|
17
|
+
|
|
18
|
+
# Saturate (make a color "richer") a color by the given amount (0 to 100)
|
|
19
|
+
def saturate(color, amount)
|
|
20
|
+
hsl = Compass::Colors::HSL.from_color(color)
|
|
21
|
+
hsl.s += (1 - hsl.s) * (amount.value / 100.0)
|
|
22
|
+
hsl.to_color
|
|
23
|
+
end
|
|
24
|
+
|
|
25
|
+
# Desaturate (make a color "grayer") a color by the given amount (0 to 100)
|
|
26
|
+
def desaturate(color, amount)
|
|
27
|
+
hsl = Compass::Colors::HSL.from_color(color)
|
|
28
|
+
hsl.s *= (1.0 - (amount.value / 100.0))
|
|
29
|
+
hsl.to_color
|
|
30
|
+
end
|
|
31
|
+
|
|
32
|
+
# Return the hue of a color as a number between 0 and 360
|
|
33
|
+
def hue(color)
|
|
34
|
+
Sass::Script::Number.new(Compass::Colors::HSL.from_color(color).h.round)
|
|
35
|
+
end
|
|
36
|
+
|
|
37
|
+
# Return the saturation of a color as a number between 0 and 100
|
|
38
|
+
def saturation(color)
|
|
39
|
+
Sass::Script::Number.new((Compass::Colors::HSL.from_color(color).s * 100).round)
|
|
40
|
+
end
|
|
41
|
+
|
|
42
|
+
# Return the luminosity of a color as a number between 0 and 100
|
|
43
|
+
def luminosity(color)
|
|
44
|
+
Sass::Script::Number.new((Compass::Colors::HSL.from_color(color).l * 100).round)
|
|
45
|
+
end
|
|
46
|
+
|
|
47
|
+
# Mixes two colors by some amount (0 to 100). Defaults to 50.
|
|
48
|
+
def mix(color1, color2, amount = nil)
|
|
49
|
+
percent = amount ? amount.value.round / 100.0 : 0.5
|
|
50
|
+
new_colors = color1.value.zip(color2.value).map{|c1, c2| (c1 * percent) + (c2 * (1 - percent))}
|
|
51
|
+
Sass::Script::Color.new(new_colors)
|
|
52
|
+
end
|
|
53
|
+
|
|
54
|
+
# Returns the grayscale equivalent color for the given color
|
|
55
|
+
def grayscale(color)
|
|
56
|
+
hsl = Compass::Colors::HSL.from_color(color)
|
|
57
|
+
g = (hsl.l * 255).round
|
|
58
|
+
Sass::Script::Color.new([g, g, g])
|
|
59
|
+
end
|
|
60
|
+
|
|
61
|
+
# adjust the hue of a color by the given number of degrees.
|
|
62
|
+
def adjust_hue(color, degrees)
|
|
63
|
+
hsl = Compass::Colors::HSL.from_color(color)
|
|
64
|
+
degrees = degrees.value.to_f.round if degrees.is_a?(Sass::Script::Literal)
|
|
65
|
+
hsl.h += degrees
|
|
66
|
+
hsl.to_color
|
|
67
|
+
end
|
|
68
|
+
|
|
69
|
+
def complement(color)
|
|
70
|
+
adjust_hue color, 180
|
|
71
|
+
end
|
|
72
|
+
|
|
73
|
+
end
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
module BeApproximatelyTheSameColorAsMatcher
|
|
2
|
+
class BeApproximatelyTheSameColorAs
|
|
3
|
+
def initialize(expected)
|
|
4
|
+
@expected = expected
|
|
5
|
+
end
|
|
6
|
+
|
|
7
|
+
def matches?(target)
|
|
8
|
+
@target = target
|
|
9
|
+
@target.value.zip(@expected.value).all?{|e,t| (e-t).abs <= 1}
|
|
10
|
+
end
|
|
11
|
+
|
|
12
|
+
def failure_message
|
|
13
|
+
"expected <#{to_string(@target)}> to " +
|
|
14
|
+
"be approximately the same as <#{to_string(@expected)}>"
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
def negative_failure_message
|
|
18
|
+
"expected <#{to_string(@target)}> not to " +
|
|
19
|
+
"be approximately the same as <#{to_string(@expected)}>"
|
|
20
|
+
end
|
|
21
|
+
|
|
22
|
+
# Returns string representation of an object.
|
|
23
|
+
def to_string(value)
|
|
24
|
+
# indicate a nil
|
|
25
|
+
if value.nil?
|
|
26
|
+
'nil'
|
|
27
|
+
end
|
|
28
|
+
|
|
29
|
+
# join arrays
|
|
30
|
+
if value.class == Array
|
|
31
|
+
return value.join(", ")
|
|
32
|
+
end
|
|
33
|
+
|
|
34
|
+
# otherwise return to_s() instead of inspect()
|
|
35
|
+
return value.to_s
|
|
36
|
+
end
|
|
37
|
+
end
|
|
38
|
+
|
|
39
|
+
# Actual matcher that is exposed.
|
|
40
|
+
def be_approximately_the_same_color_as(expected)
|
|
41
|
+
BeApproximatelyTheSameColorAs.new(expected)
|
|
42
|
+
end
|
|
43
|
+
end
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
$:.unshift(File.join(File.dirname(__FILE__), '..', 'lib'))
|
|
2
|
+
|
|
3
|
+
require File.join(File.dirname(__FILE__), 'approximate_color_matching')
|
|
4
|
+
|
|
5
|
+
Spec::Runner.configure do |config|
|
|
6
|
+
config.include(BeApproximatelyTheSameColorAsMatcher)
|
|
7
|
+
end
|
|
8
|
+
|
|
9
|
+
require 'compass-colors'
|
|
10
|
+
|
|
11
|
+
describe "sass extensions" do
|
|
12
|
+
it "should lighten red into pink" do
|
|
13
|
+
pink = invoke(:lighten, color(255,0,0), number(50))
|
|
14
|
+
pink.should be_approximately_the_same_color_as(color(255,127,127))
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
it "should darken red into maroon" do
|
|
18
|
+
maroon = invoke(:darken, color(255,0,0), number(50))
|
|
19
|
+
maroon.should be_approximately_the_same_color_as(color(127,0,0))
|
|
20
|
+
end
|
|
21
|
+
|
|
22
|
+
it "should darken white into gray and back again" do
|
|
23
|
+
darker = invoke(:darken, color(0xff, 0xff, 0xff), number(50))
|
|
24
|
+
lighter_again = invoke(:lighten, darker, number(100))
|
|
25
|
+
color(0xff, 0xff, 0xff).should be_approximately_the_same_color_as(lighter_again)
|
|
26
|
+
end
|
|
27
|
+
|
|
28
|
+
it "shouldn't saturate fully saturated colors" do
|
|
29
|
+
saturated = invoke(:saturate, color(0, 127, 127), number(50))
|
|
30
|
+
saturated.should be_approximately_the_same_color_as(color(0, 127, 127))
|
|
31
|
+
end
|
|
32
|
+
|
|
33
|
+
def invoke(name, *args)
|
|
34
|
+
Sass::Script::Functions::EvaluationContext.new({}).send(name, *args)
|
|
35
|
+
end
|
|
36
|
+
|
|
37
|
+
def color(r,g,b)
|
|
38
|
+
Sass::Script::Color.new([r,g,b])
|
|
39
|
+
end
|
|
40
|
+
|
|
41
|
+
def number(num)
|
|
42
|
+
Sass::Script::Number.new(num)
|
|
43
|
+
end
|
|
44
|
+
end
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
// In theory the lightness and saturation values of corresponding colors should not change.
|
|
2
|
+
// In reality, these values should be adjusted to create a more pleasant color combination.
|
|
3
|
+
// There is not any mathematical formula for this, but you can use the lighten, darken,
|
|
4
|
+
// saturate and desaturate functions to adjust your main colors.
|
|
5
|
+
!base_color ||= red
|
|
6
|
+
!support_color = adjust_hue(!base_color, 30)
|
|
7
|
+
!accent_color = adjust_hue(!base_color, -30)
|
|
8
|
+
|
|
9
|
+
!dark_base_color = darken(!base_color, 25)
|
|
10
|
+
!darker_base_color = darken(!base_color, 50)
|
|
11
|
+
!darkest_base_color = darken(!base_color, 75)
|
|
12
|
+
!light_base_color = lighten(!base_color, 25)
|
|
13
|
+
!lighter_base_color = lighten(!base_color, 50)
|
|
14
|
+
!lightest_base_color = lighten(!base_color, 75)
|
|
15
|
+
|
|
16
|
+
!dark_support_color = darken(!support_color, 25)
|
|
17
|
+
!darker_support_color = darken(!support_color, 50)
|
|
18
|
+
!darkest_support_color = darken(!support_color, 75)
|
|
19
|
+
!light_support_color = lighten(!support_color, 25)
|
|
20
|
+
!lighter_support_color = lighten(!support_color, 50)
|
|
21
|
+
!lightest_support_color = lighten(!support_color, 75)
|
|
22
|
+
|
|
23
|
+
!dark_accent_color = darken(!accent_color, 25)
|
|
24
|
+
!darker_accent_color = darken(!accent_color, 50)
|
|
25
|
+
!darkest_accent_color = darken(!accent_color, 75)
|
|
26
|
+
!light_accent_color = lighten(!accent_color, 25)
|
|
27
|
+
!lighter_accent_color = lighten(!accent_color, 50)
|
|
28
|
+
!lightest_accent_color = lighten(!accent_color, 75)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
stylesheet '_theme.sass'
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
!base_color ||= red
|
|
2
|
+
!dark_base_color = darken(!base_color, 25)
|
|
3
|
+
!darker_base_color = darken(!base_color, 50)
|
|
4
|
+
!darkest_base_color = darken(!base_color, 75)
|
|
5
|
+
!light_base_color = lighten(!base_color, 25)
|
|
6
|
+
!lighter_base_color = lighten(!base_color, 75)
|
|
7
|
+
!lightest_base_color = lighten(!base_color, 50)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
stylesheet '_theme.sass'
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// In theory the lightness and saturation values of corresponding colors should not change.
|
|
2
|
+
// In reality, these values should be adjusted to create a more pleasant color combination.
|
|
3
|
+
// There is not any mathematical formula for this, but you can use the lighten, darken,
|
|
4
|
+
// saturate and desaturate functions to adjust your main colors.
|
|
5
|
+
!base_color ||= red
|
|
6
|
+
!complementary_color = complement(!base_color)
|
|
7
|
+
|
|
8
|
+
!dark_base_color = darken(!base_color, 25)
|
|
9
|
+
!darker_base_color = darken(!base_color, 50)
|
|
10
|
+
!darkest_base_color = darken(!base_color, 75)
|
|
11
|
+
!light_base_color = lighten(!base_color, 25)
|
|
12
|
+
!lighter_base_color = lighten(!base_color, 50)
|
|
13
|
+
!lightest_base_color = lighten(!base_color, 75)
|
|
14
|
+
|
|
15
|
+
!dark_complementary_color = darken(!complementary_color, 25)
|
|
16
|
+
!darker_complementary_color = darken(!complementary_color, 50)
|
|
17
|
+
!darkest_complementary_color = darken(!complementary_color, 75)
|
|
18
|
+
!light_complementary_color = lighten(!complementary_color, 25)
|
|
19
|
+
!lighter_complementary_color = lighten(!complementary_color, 50)
|
|
20
|
+
!lightest_complementary_color = lighten(!complementary_color, 75)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
stylesheet '_theme.sass'
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
// In theory the lightness and saturation values of corresponding colors should not change.
|
|
2
|
+
// In reality, these values should be adjusted to create a more pleasant color combination.
|
|
3
|
+
// There is not any mathematical formula for this, but you can use the lighten, darken,
|
|
4
|
+
// saturate and desaturate functions to adjust your main colors.
|
|
5
|
+
!base_color ||= red
|
|
6
|
+
!complement_support_color = adjust_hue(!base_color, 180 + 30)
|
|
7
|
+
!complement_accent_color = adjust_hue(!base_color, 180 - 30)
|
|
8
|
+
|
|
9
|
+
!dark_base_color = darken(!base_color, 25)
|
|
10
|
+
!darker_base_color = darken(!base_color, 50)
|
|
11
|
+
!darkest_base_color = darken(!base_color, 75)
|
|
12
|
+
!light_base_color = lighten(!base_color, 25)
|
|
13
|
+
!lighter_base_color = lighten(!base_color, 50)
|
|
14
|
+
!lightest_base_color = lighten(!base_color, 75)
|
|
15
|
+
|
|
16
|
+
!dark_complement_support_color = darken(!complement_support_color, 25)
|
|
17
|
+
!darker_complement_support_color = darken(!complement_support_color, 50)
|
|
18
|
+
!darkest_complement_support_color = darken(!complement_support_color, 75)
|
|
19
|
+
!light_complement_support_color = lighten(!complement_support_color, 25)
|
|
20
|
+
!lighter_complement_support_color = lighten(!complement_support_color, 50)
|
|
21
|
+
!lightest_complement_support_color = lighten(!complement_support_color, 75)
|
|
22
|
+
|
|
23
|
+
!dark_complement_accent_color = darken(!complement_accent_color, 25)
|
|
24
|
+
!darker_complement_accent_color = darken(!complement_accent_color, 50)
|
|
25
|
+
!darkest_complement_accent_color = darken(!complement_accent_color, 75)
|
|
26
|
+
!light_complement_accent_color = lighten(!complement_accent_color, 25)
|
|
27
|
+
!lighter_complement_accent_color = lighten(!complement_accent_color, 50)
|
|
28
|
+
!lightest_complement_accent_color = lighten(!complement_accent_color, 75)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
stylesheet '_theme.sass'
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
// In theory the lightness and saturation values of corresponding colors should not change.
|
|
2
|
+
// In reality, these values should be adjusted to create a more pleasant color combination.
|
|
3
|
+
// There is not any mathematical formula for this, but you can use the lighten, darken,
|
|
4
|
+
// saturate and desaturate functions to adjust your main colors.
|
|
5
|
+
!base_color ||= red
|
|
6
|
+
!support_color = adjust_hue(!base_color, 120)
|
|
7
|
+
!accent_color = adjust_hue(!base_color, -120)
|
|
8
|
+
|
|
9
|
+
!dark_base_color = darken(!base_color, 25)
|
|
10
|
+
!darker_base_color = darken(!base_color, 50)
|
|
11
|
+
!darkest_base_color = darken(!base_color, 75)
|
|
12
|
+
!light_base_color = lighten(!base_color, 25)
|
|
13
|
+
!lighter_base_color = lighten(!base_color, 50)
|
|
14
|
+
!lightest_base_color = lighten(!base_color, 75)
|
|
15
|
+
|
|
16
|
+
!dark_support_color = darken(!support_color, 25)
|
|
17
|
+
!darker_support_color = darken(!support_color, 50)
|
|
18
|
+
!darkest_support_color = darken(!support_color, 75)
|
|
19
|
+
!light_support_color = lighten(!support_color, 25)
|
|
20
|
+
!lighter_support_color = lighten(!support_color, 50)
|
|
21
|
+
!lightest_support_color = lighten(!support_color, 75)
|
|
22
|
+
|
|
23
|
+
!dark_accent_color = darken(!accent_color, 25)
|
|
24
|
+
!darker_accent_color = darken(!accent_color, 50)
|
|
25
|
+
!darkest_accent_color = darken(!accent_color, 75)
|
|
26
|
+
!light_accent_color = lighten(!accent_color, 25)
|
|
27
|
+
!lighter_accent_color = lighten(!accent_color, 50)
|
|
28
|
+
!lightest_accent_color = lighten(!accent_color, 75)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
stylesheet '_theme.sass'
|
metadata
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: compass-colors
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.2.0
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Chris Eppstein
|
|
8
|
+
autorequire:
|
|
9
|
+
bindir: bin
|
|
10
|
+
cert_chain: []
|
|
11
|
+
|
|
12
|
+
date: 2009-08-03 00:00:00 -07:00
|
|
13
|
+
default_executable:
|
|
14
|
+
dependencies:
|
|
15
|
+
- !ruby/object:Gem::Dependency
|
|
16
|
+
name: chriseppstein-compass
|
|
17
|
+
type: :runtime
|
|
18
|
+
version_requirement:
|
|
19
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
20
|
+
requirements:
|
|
21
|
+
- - ">="
|
|
22
|
+
- !ruby/object:Gem::Version
|
|
23
|
+
version: 0.8.7
|
|
24
|
+
version:
|
|
25
|
+
description: Sass Extensions and color theme templates to make working with colors easier and more maintainable.
|
|
26
|
+
email: chris@eppsteins.net
|
|
27
|
+
executables: []
|
|
28
|
+
|
|
29
|
+
extensions: []
|
|
30
|
+
|
|
31
|
+
extra_rdoc_files:
|
|
32
|
+
- README.markdown
|
|
33
|
+
files:
|
|
34
|
+
- README.markdown
|
|
35
|
+
- Rakefile
|
|
36
|
+
- VERSION.yml
|
|
37
|
+
- example/config.rb
|
|
38
|
+
- example/split_compliment_example.html
|
|
39
|
+
- example/src/_split_compliment_theme.sass
|
|
40
|
+
- example/src/screen.sass
|
|
41
|
+
- lib/compass-colors.rb
|
|
42
|
+
- lib/compass-colors/compass_extension.rb
|
|
43
|
+
- lib/compass-colors/hsl.rb
|
|
44
|
+
- lib/compass-colors/sass_extensions.rb
|
|
45
|
+
- spec/approximate_color_matching.rb
|
|
46
|
+
- spec/sass_extensions_spec.rb
|
|
47
|
+
- templates/analogous/_theme.sass
|
|
48
|
+
- templates/analogous/manifest.rb
|
|
49
|
+
- templates/basic/_theme.sass
|
|
50
|
+
- templates/basic/manifest.rb
|
|
51
|
+
- templates/complementary/_theme.sass
|
|
52
|
+
- templates/complementary/manifest.rb
|
|
53
|
+
- templates/split_complement/_theme.sass
|
|
54
|
+
- templates/split_complement/manifest.rb
|
|
55
|
+
- templates/triadic/_theme.sass
|
|
56
|
+
- templates/triadic/manifest.rb
|
|
57
|
+
has_rdoc: true
|
|
58
|
+
homepage: http://compass-style.org
|
|
59
|
+
licenses: []
|
|
60
|
+
|
|
61
|
+
post_install_message:
|
|
62
|
+
rdoc_options:
|
|
63
|
+
- --charset=UTF-8
|
|
64
|
+
require_paths:
|
|
65
|
+
- lib
|
|
66
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
67
|
+
requirements:
|
|
68
|
+
- - ">="
|
|
69
|
+
- !ruby/object:Gem::Version
|
|
70
|
+
version: "0"
|
|
71
|
+
version:
|
|
72
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
73
|
+
requirements:
|
|
74
|
+
- - ">="
|
|
75
|
+
- !ruby/object:Gem::Version
|
|
76
|
+
version: "0"
|
|
77
|
+
version:
|
|
78
|
+
requirements: []
|
|
79
|
+
|
|
80
|
+
rubyforge_project:
|
|
81
|
+
rubygems_version: 1.3.5
|
|
82
|
+
signing_key:
|
|
83
|
+
specification_version: 3
|
|
84
|
+
summary: Color Support for Compass & Sass
|
|
85
|
+
test_files:
|
|
86
|
+
- spec/approximate_color_matching.rb
|
|
87
|
+
- spec/sass_extensions_spec.rb
|