compass 0.10.0.rc3 → 0.10.0.rc4
Sign up to get free protection for your applications and to get access to all the features.
- data/Rakefile +30 -102
- data/VERSION.yml +1 -1
- data/examples/css3/bootstrap.rb +3 -0
- data/examples/css3/clean.rb +2 -0
- data/examples/downloader.rb +2 -2
- data/frameworks/_compass_deprecated_imports/stylesheets/compass/_misc.sass +1 -2
- data/frameworks/{compass → _compass_deprecated_imports}/stylesheets/compass/_misc.scss +1 -0
- data/frameworks/_compass_deprecated_imports/stylesheets/compass/css3/_inline_block.sass +1 -1
- data/frameworks/blueprint/stylesheets/_blueprint.scss +2 -1
- data/frameworks/blueprint/stylesheets/blueprint/_buttons.scss +47 -32
- data/frameworks/blueprint/stylesheets/blueprint/_colors.scss +25 -45
- data/frameworks/blueprint/stylesheets/blueprint/_debug.scss +6 -3
- data/frameworks/blueprint/stylesheets/blueprint/_fancy-type.scss +31 -24
- data/frameworks/blueprint/stylesheets/blueprint/_form.scss +45 -35
- data/frameworks/blueprint/stylesheets/blueprint/_grid.scss +2 -1
- data/frameworks/blueprint/stylesheets/blueprint/_link-icons.scss +21 -28
- data/frameworks/blueprint/stylesheets/blueprint/_typography.scss +66 -137
- data/frameworks/compass/stylesheets/compass/_css3.scss +1 -0
- data/frameworks/compass/stylesheets/compass/css3/_background-clip.scss +23 -5
- data/frameworks/compass/stylesheets/compass/css3/_background-origin.scss +22 -5
- data/frameworks/compass/stylesheets/compass/css3/_background-size.scss +8 -10
- data/frameworks/compass/stylesheets/compass/css3/_border-radius.scss +36 -16
- data/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss +14 -7
- data/frameworks/compass/stylesheets/compass/css3/_box-sizing.scss +4 -8
- data/frameworks/compass/stylesheets/compass/css3/_box.scss +89 -0
- data/frameworks/compass/stylesheets/compass/css3/_columns.scss +19 -40
- data/frameworks/compass/stylesheets/compass/css3/_font-face.scss +3 -1
- data/frameworks/compass/stylesheets/compass/css3/_gradient.scss +2 -0
- data/frameworks/compass/stylesheets/compass/css3/_inline-block.scss +5 -6
- data/frameworks/compass/stylesheets/compass/css3/_opacity.scss +15 -9
- data/frameworks/compass/stylesheets/compass/css3/_shared.scss +47 -0
- data/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss +10 -2
- data/frameworks/compass/stylesheets/compass/css3/_transform.scss +34 -17
- data/frameworks/compass/stylesheets/compass/css3/_transition.scss +19 -21
- data/frameworks/compass/stylesheets/compass/utilities/_print.scss +14 -15
- data/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss +27 -17
- data/frameworks/compass/stylesheets/compass/utilities/general/_float.scss +7 -9
- data/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss +4 -2
- data/frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss +12 -6
- data/frameworks/compass/stylesheets/compass/utilities/lists/_bullets.scss +24 -12
- data/frameworks/compass/stylesheets/compass/utilities/lists/_horizontal-list.scss +0 -4
- data/frameworks/compass/stylesheets/compass/utilities/lists/_inline-list.scss +5 -5
- data/frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss +15 -13
- data/frameworks/compass/stylesheets/compass/utilities/text/_replacement.scss +1 -1
- data/lib/compass.rb +6 -1
- data/lib/compass/commands/help.rb +1 -0
- data/lib/compass/configuration/data.rb +10 -2
- data/lib/compass/exec/helpers.rb +3 -0
- data/lib/compass/sass_extensions/functions/selectors.rb +21 -0
- data/lib/compass/version.rb +12 -21
- data/test/compass_test.rb +1 -1
- data/test/fixtures/stylesheets/blueprint/css/typography.css +8 -19
- data/test/fixtures/stylesheets/compass/css/box.css +90 -0
- data/test/fixtures/stylesheets/compass/sass/box.sass +50 -0
- data/test/sass_extensions_test.rb +19 -26
- metadata +42 -62
- data/CHANGELOG.markdown +0 -881
- data/REVISION +0 -1
- data/examples/css3/extensions/compass-colors/README.markdown +0 -50
- data/examples/css3/extensions/compass-colors/VERSION.yml +0 -5
- data/examples/css3/extensions/compass-colors/example/config.rb +0 -13
- data/examples/css3/extensions/compass-colors/example/src/_split_compliment_theme.sass +0 -28
- data/examples/css3/extensions/compass-colors/example/src/screen.sass +0 -40
- data/examples/css3/extensions/compass-colors/lib/compass-colors.rb +0 -9
- data/examples/css3/extensions/compass-colors/lib/compass-colors/compass_extension.rb +0 -7
- data/examples/css3/extensions/compass-colors/lib/compass-colors/hsl.rb +0 -109
- data/examples/css3/extensions/compass-colors/lib/compass-colors/sass_extensions.rb +0 -112
- data/examples/css3/extensions/compass-colors/spec/approximate_color_matching.rb +0 -43
- data/examples/css3/extensions/compass-colors/spec/sass_extensions_spec.rb +0 -54
- data/examples/css3/extensions/compass-colors/templates/analogous/_theme.sass +0 -28
- data/examples/css3/extensions/compass-colors/templates/analogous/manifest.rb +0 -1
- data/examples/css3/extensions/compass-colors/templates/basic/_theme.sass +0 -7
- data/examples/css3/extensions/compass-colors/templates/basic/manifest.rb +0 -1
- data/examples/css3/extensions/compass-colors/templates/complementary/_theme.sass +0 -20
- data/examples/css3/extensions/compass-colors/templates/complementary/manifest.rb +0 -1
- data/examples/css3/extensions/compass-colors/templates/split_complement/_theme.sass +0 -28
- data/examples/css3/extensions/compass-colors/templates/split_complement/manifest.rb +0 -1
- data/examples/css3/extensions/compass-colors/templates/triadic/_theme.sass +0 -28
- data/examples/css3/extensions/compass-colors/templates/triadic/manifest.rb +0 -1
- data/examples/css3/stylesheets/fonts/Vtks Revolt.ttf +0 -0
- data/examples/css3/stylesheets/fonts/angelina.ttf +0 -0
- data/examples/logo/logo.html.haml +0 -40
- data/examples/logo/src/ie.scss +0 -5
- data/examples/logo/src/print.scss +0 -3
- data/examples/logo/src/screen.scss +0 -28
data/REVISION
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
6faed2049cb16d05cbf0c721d1e005045f078d6a
|
@@ -1,50 +0,0 @@
|
|
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_complement)
|
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)` - Increase the saturation of a color by the percent amount provided.
|
41
|
-
* `desaturate(color, percentage)` - Decrease the saturation of a color 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.
|
@@ -1,13 +0,0 @@
|
|
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
|
@@ -1,28 +0,0 @@
|
|
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)
|
@@ -1,40 +0,0 @@
|
|
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%
|
@@ -1,9 +0,0 @@
|
|
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')
|
@@ -1,7 +0,0 @@
|
|
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
|
@@ -1,109 +0,0 @@
|
|
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
|
-
rgb = color.respond_to?(:rgb) ? color.rgb : color.value
|
12
|
-
from_rgb(*rgb)
|
13
|
-
end
|
14
|
-
|
15
|
-
def self.from_rgb(r, g, b)
|
16
|
-
rgb = [r,g,b]
|
17
|
-
rgb.map!{|c| c / 255.0}
|
18
|
-
min_rgb = rgb.min
|
19
|
-
max_rgb = rgb.max
|
20
|
-
delta = max_rgb - min_rgb
|
21
|
-
|
22
|
-
lightness = (max_rgb + min_rgb) / 2.0
|
23
|
-
|
24
|
-
if delta < 1e-5
|
25
|
-
hue = 0
|
26
|
-
saturation = 0
|
27
|
-
else
|
28
|
-
saturation = if ( lightness < 0.5 )
|
29
|
-
delta / ( max_rgb + min_rgb )
|
30
|
-
else
|
31
|
-
delta / ( 2 - max_rgb - min_rgb )
|
32
|
-
end
|
33
|
-
|
34
|
-
deltas = rgb.map{|c| (((max_rgb - c) / 6.0) + (delta / 2.0)) / delta}
|
35
|
-
|
36
|
-
hue = if (rgb[0] - max_rgb).abs < 1e-5
|
37
|
-
deltas[2] - deltas[1]
|
38
|
-
elsif (rgb[1] - max_rgb).abs < 1e-5
|
39
|
-
( 1.0 / 3.0 ) + deltas[0] - deltas[2]
|
40
|
-
else
|
41
|
-
( 2.0 / 3.0 ) + deltas[1] - deltas[0]
|
42
|
-
end
|
43
|
-
hue += 1 if hue < 0
|
44
|
-
hue -= 1 if hue > 1
|
45
|
-
end
|
46
|
-
from_fractions(hue, saturation, lightness)
|
47
|
-
end
|
48
|
-
|
49
|
-
def self.from_fractions(hue, saturation, lightness)
|
50
|
-
HSL.new(360 * hue, saturation, lightness)
|
51
|
-
end
|
52
|
-
|
53
|
-
def initialize(h, s, l)
|
54
|
-
self.h = h
|
55
|
-
self.s = s
|
56
|
-
self.l = l
|
57
|
-
end
|
58
|
-
|
59
|
-
def to_color
|
60
|
-
m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s
|
61
|
-
m1 = l * 2 - m2
|
62
|
-
Sass::Script::Color.new([hue_to_rgb(m1, m2, hp + 1.0/3),
|
63
|
-
hue_to_rgb(m1, m2, hp),
|
64
|
-
hue_to_rgb(m1, m2, hp - 1.0/3)].map { |c| (c * 0xff).round })
|
65
|
-
end
|
66
|
-
|
67
|
-
def h=(hue)
|
68
|
-
@h = hue % 360
|
69
|
-
end
|
70
|
-
|
71
|
-
def s=(saturation)
|
72
|
-
@s = if saturation < 0
|
73
|
-
0.0
|
74
|
-
elsif saturation > 1
|
75
|
-
1.0
|
76
|
-
else
|
77
|
-
saturation
|
78
|
-
end
|
79
|
-
end
|
80
|
-
|
81
|
-
def l=(lightness)
|
82
|
-
@l = if lightness < 0
|
83
|
-
0.0
|
84
|
-
elsif lightness > 1
|
85
|
-
1.0
|
86
|
-
else
|
87
|
-
lightness
|
88
|
-
end
|
89
|
-
end
|
90
|
-
|
91
|
-
private
|
92
|
-
#hue as a percentage
|
93
|
-
def hp
|
94
|
-
h / 360.0
|
95
|
-
end
|
96
|
-
# helper for making rgb
|
97
|
-
def hue_to_rgb(m1, m2, h)
|
98
|
-
h += 1 if h < 0
|
99
|
-
h -= 1 if h > 1
|
100
|
-
return m1 + (m2 - m1) * h * 6 if h * 6 < 1
|
101
|
-
return m2 if h * 2 < 1
|
102
|
-
return m1 + (m2 - m1) * (2.0/3 - h) * 6 if h * 3 < 2
|
103
|
-
return m1
|
104
|
-
end
|
105
|
-
|
106
|
-
end
|
107
|
-
end
|
108
|
-
end
|
109
|
-
|
@@ -1,112 +0,0 @@
|
|
1
|
-
require 'sass'
|
2
|
-
|
3
|
-
module Sass::Script::Functions
|
4
|
-
module Colors
|
5
|
-
extend self
|
6
|
-
def rgb_value(color)
|
7
|
-
if color.respond_to?(:rgb)
|
8
|
-
color.rgb
|
9
|
-
else
|
10
|
-
color.value
|
11
|
-
end
|
12
|
-
end
|
13
|
-
end
|
14
|
-
# Takes a color object and amount by which to lighten it (0 to 100).
|
15
|
-
def lighten(color, amount)
|
16
|
-
hsl = Compass::Colors::HSL.from_color(color)
|
17
|
-
hsl.l += amount.value / 100.0
|
18
|
-
hsl.to_color
|
19
|
-
end
|
20
|
-
|
21
|
-
# Takes a color object and percent by which to lighten it (0 to 100).
|
22
|
-
def lighten_percent(color, amount)
|
23
|
-
hsl = Compass::Colors::HSL.from_color(color)
|
24
|
-
hsl.l += (1 - hsl.l) * (amount.value / 100.0)
|
25
|
-
hsl.to_color
|
26
|
-
end
|
27
|
-
|
28
|
-
# Takes a color object and amount by which to darken it (0 to 100).
|
29
|
-
def darken(color, amount)
|
30
|
-
hsl = Compass::Colors::HSL.from_color(color)
|
31
|
-
hsl.l -= amount.value / 100.0
|
32
|
-
hsl.to_color
|
33
|
-
end
|
34
|
-
|
35
|
-
# Takes a color object and percent by which to darken it (0 to 100).
|
36
|
-
def darken_percent(color, amount)
|
37
|
-
hsl = Compass::Colors::HSL.from_color(color)
|
38
|
-
hsl.l *= 1.0 - (amount.value / 100.0)
|
39
|
-
hsl.to_color
|
40
|
-
end
|
41
|
-
|
42
|
-
# Saturate (make a color "richer") a color by the given amount (0 to 100)
|
43
|
-
def saturate(color, amount)
|
44
|
-
hsl = Compass::Colors::HSL.from_color(color)
|
45
|
-
hsl.s += amount.value / 100.0
|
46
|
-
hsl.to_color
|
47
|
-
end
|
48
|
-
|
49
|
-
# Saturate (make a color "richer") a color by the given percent (0 to 100)
|
50
|
-
def saturate_percent(color, amount)
|
51
|
-
hsl = Compass::Colors::HSL.from_color(color)
|
52
|
-
hsl.s += (1 - hsl.s) * (amount.value / 100.0)
|
53
|
-
hsl.to_color
|
54
|
-
end
|
55
|
-
|
56
|
-
# Desaturate (make a color "grayer") a color by the given amount (0 to 100)
|
57
|
-
def desaturate(color, amount)
|
58
|
-
hsl = Compass::Colors::HSL.from_color(color)
|
59
|
-
hsl.s -= amount.value / 100.0
|
60
|
-
hsl.to_color
|
61
|
-
end
|
62
|
-
|
63
|
-
# Desaturate (make a color "grayer") a color by the given percent (0 to 100)
|
64
|
-
def desaturate_percent(color, amount)
|
65
|
-
hsl = Compass::Colors::HSL.from_color(color)
|
66
|
-
hsl.s *= (1.0 - (amount.value / 100.0))
|
67
|
-
hsl.to_color
|
68
|
-
end
|
69
|
-
|
70
|
-
# Return the hue of a color as a number between 0 and 360
|
71
|
-
def hue(color)
|
72
|
-
Sass::Script::Number.new(Compass::Colors::HSL.from_color(color).h.round)
|
73
|
-
end
|
74
|
-
|
75
|
-
# Return the saturation of a color as a number between 0 and 100
|
76
|
-
def saturation(color)
|
77
|
-
Sass::Script::Number.new((Compass::Colors::HSL.from_color(color).s * 100).round)
|
78
|
-
end
|
79
|
-
|
80
|
-
# Return the luminosity of a color as a number between 0 and 100
|
81
|
-
def luminosity(color)
|
82
|
-
Sass::Script::Number.new((Compass::Colors::HSL.from_color(color).l * 100).round)
|
83
|
-
end
|
84
|
-
alias lightness luminosity
|
85
|
-
|
86
|
-
# Mixes two colors by some amount (0 to 100). Defaults to 50.
|
87
|
-
def mix(color1, color2, amount = nil)
|
88
|
-
percent = amount ? amount.value.round / 100.0 : 0.5
|
89
|
-
new_colors = Colors.rgb_value(color1).zip(Colors.rgb_value(color2)).map{|c1, c2| (c1 * percent) + (c2 * (1 - percent))}
|
90
|
-
Sass::Script::Color.new(new_colors)
|
91
|
-
end
|
92
|
-
|
93
|
-
# Returns the grayscale equivalent color for the given color
|
94
|
-
def grayscale(color)
|
95
|
-
hsl = Compass::Colors::HSL.from_color(color)
|
96
|
-
g = (hsl.l * 255).round
|
97
|
-
Sass::Script::Color.new([g, g, g])
|
98
|
-
end
|
99
|
-
|
100
|
-
# adjust the hue of a color by the given number of degrees.
|
101
|
-
def adjust_hue(color, degrees)
|
102
|
-
hsl = Compass::Colors::HSL.from_color(color)
|
103
|
-
degrees = degrees.value.to_f.round if degrees.is_a?(Sass::Script::Literal)
|
104
|
-
hsl.h += degrees
|
105
|
-
hsl.to_color
|
106
|
-
end
|
107
|
-
|
108
|
-
def complement(color)
|
109
|
-
adjust_hue color, 180
|
110
|
-
end
|
111
|
-
|
112
|
-
end
|
@@ -1,43 +0,0 @@
|
|
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.rgb.zip(@expected.rgb).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
|
@@ -1,54 +0,0 @@
|
|
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(25))
|
14
|
-
pink.should be_approximately_the_same_color_as(color(255,127,127))
|
15
|
-
end
|
16
|
-
|
17
|
-
it "should lighten red into pink (percentage)" do
|
18
|
-
pink = invoke(:lighten_percent, color(255,0,0), number(50))
|
19
|
-
pink.should be_approximately_the_same_color_as(color(255,127,127))
|
20
|
-
end
|
21
|
-
|
22
|
-
it "should darken red into maroon" do
|
23
|
-
maroon = invoke(:darken, color(255,0,0), number(25))
|
24
|
-
maroon.should be_approximately_the_same_color_as(color(127,0,0))
|
25
|
-
end
|
26
|
-
|
27
|
-
it "should darken red into maroon (percentage)" do
|
28
|
-
maroon = invoke(:darken_percent, color(255,0,0), number(50))
|
29
|
-
maroon.should be_approximately_the_same_color_as(color(127,0,0))
|
30
|
-
end
|
31
|
-
|
32
|
-
it "should darken white into gray and back again" do
|
33
|
-
darker = invoke(:darken, color(0xff, 0xff, 0xff), number(50))
|
34
|
-
lighter_again = invoke(:lighten, darker, number(100))
|
35
|
-
color(0xff, 0xff, 0xff).should be_approximately_the_same_color_as(lighter_again)
|
36
|
-
end
|
37
|
-
|
38
|
-
it "shouldn't saturate fully saturated colors" do
|
39
|
-
saturated = invoke(:saturate, color(0, 127, 127), number(50))
|
40
|
-
saturated.should be_approximately_the_same_color_as(color(0, 127, 127))
|
41
|
-
end
|
42
|
-
|
43
|
-
def invoke(name, *args)
|
44
|
-
Sass::Script::Functions::EvaluationContext.new({}).send(name, *args)
|
45
|
-
end
|
46
|
-
|
47
|
-
def color(r,g,b)
|
48
|
-
Sass::Script::Color.new([r,g,b])
|
49
|
-
end
|
50
|
-
|
51
|
-
def number(num)
|
52
|
-
Sass::Script::Number.new(num)
|
53
|
-
end
|
54
|
-
end
|