RubyGems - compass-colors - Versions diffs - 0.2.0 - Mend

compass-colors 0.2.0

Files changed (24) hide show

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 Viewed

@@ -0,0 +1,50 @@
+Compass Colors
+==============
+This compass extension provides support for working with colors in Sass and generating color themes for use on your website.
+Installing
+==========
+    sudo gem install chriseppstein-compass-colors
+To install a theme into your existing compass project, add the following to your compass configuration file:
+    require 'compass-colors'
+Then run this command:
+    compass -f colors -p <Theme Name>
+The _theme.sass partial can then be imported into your stylesheets and the color constants can be used.
+    @import theme.sass
+Supported Color Themes
+======================
+With all of these themes, you must pick a base color and the theme takes it from there:
+* Basic/Monochromatic (basic)
+* Complementary (complementary)
+* Triadic (triadic)
+* Split Complementary (split_complementary)
+* Analogous (analogous)
+Sass Functions Provided
+=======================
+* `lighten(color, percentage)` - Create a color lighter by the percent amount provided.
+* `darken(color, percentage)`  - Create a color darker by the percent amount provided.
+* `saturate(color, percentage)` - Create a color lighter by the percent amount provided.
+* `desaturate(color, percentage)` - Create a color lighter by the percent amount provided.
+* `hue(color)` - Extract the hue from the color in degrees (0-360). Suitable to be passed as the first argument of hsl.
+* `saturation(color)` - Extract the saturation from the color in percent (0-100). Suitable to be passed as the second argument of hsl.
+* `luminosity(color)` - Extract the luminosity from the color in percent (0-100). Suitable to be passed as the third argument of hsl.
+* `mix(color1, color2, percentage)` - Create a new color by mixing two colors together. Percentage (0-100) is optional, and indicates how
+  much of color2 should be mixed into color1.
+* `grayscale(color)` - Create a gray color by mapping the color provided to the grayscale.
+* `adjust_hue(color, degrees)` - Add the number of degrees provided to the hue of the color keeping luminosity and saturation constant.
+  Degrees can be negative.
+* `complement(color)` - Returns the compliment of the color provided.

data/Rakefile ADDED Viewed

@@ -0,0 +1,26 @@
+begin
+  require 'jeweler'
+  Jeweler::Tasks.new do |gemspec|
+    gemspec.name = "compass-colors"
+    gemspec.summary = "Color Support for Compass & Sass"
+    gemspec.email = "chris@eppsteins.net"
+    gemspec.homepage = "http://compass-style.org"
+    gemspec.description = "Sass Extensions and color theme templates to make working with colors easier and more maintainable."
+    gemspec.authors = ["Chris Eppstein"]
+    gemspec.has_rdoc = false
+    gemspec.add_dependency('chriseppstein-compass', '>= 0.8.7')
+    gemspec.files = []
+    gemspec.files << "README.markdown"
+    gemspec.files << "LICENSE.markdown"
+    gemspec.files << "VERSION.yml"
+    gemspec.files << "Rakefile"
+    gemspec.files += Dir.glob("example/**/*")
+    gemspec.files -= Dir.glob("example/**/*.css")
+    gemspec.files -= Dir.glob("example/*/extensions/**")
+    gemspec.files += Dir.glob("lib/**/*")
+    gemspec.files += Dir.glob("spec/**/*")
+    gemspec.files += Dir.glob("templates/**/*.*")
+  end
+rescue LoadError
+  puts "Jeweler not available. Install it with: sudo gem install technicalpickles-jeweler -s http://gems.github.com"
+end

data/VERSION.yml ADDED Viewed

@@ -0,0 +1,4 @@
+---
+:minor: 2
+:patch: 0
+:major: 0

data/example/config.rb ADDED Viewed

@@ -0,0 +1,13 @@
+# Require any additional compass plugins here.
+require File.join(File.dirname(__FILE__), '..', 'lib', 'compass-colors')
+project_type = :stand_alone
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "src"
+images_dir = "images"
+extensions_dir = "extensions"
+output_style = :compact
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true

data/example/split_compliment_example.html ADDED Viewed

@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>Color Example</title>
+    <link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" charset="utf-8">
+  </head>
+  <body id="split-compliment">
+    <div class="base">
+      <div class="lighter">
+        &nbsp;
+      </div>
+      <div class="darker">
+        &nbsp;
+      </div>
+      &nbsp;
+    </div>
+    <div class="complement-support">
+      <div class="lighter">
+        &nbsp;
+      </div>
+      <div class="darker">
+        &nbsp;
+      </div>
+      &nbsp;
+    </div>
+    <div class="complement-accent">
+      <div class="lighter">
+        &nbsp;
+      </div>
+      <div class="darker">
+        &nbsp;
+      </div>
+      &nbsp;
+    </div>
+  </body>
+</html>

data/example/src/_split_compliment_theme.sass ADDED Viewed

@@ -0,0 +1,28 @@
+// In theory the lightness and saturation values of corresponding colors should not change.
+// In reality, these values should be adjusted to create a more pleasant color combination.
+// There is not any mathematical formula for this, but you can use the lighten, darken,
+// saturate and desaturate functions to adjust your main colors.
+!base_color ||= red
+!complement_support_color = adjust_hue(!base_color, 180 + 30)
+!complement_accent_color  = adjust_hue(!base_color, 180 - 30)
+!base_dark_color     = darken(!base_color, 25)
+!base_darker_color   = darken(!base_color, 50)
+!base_darkest_color  = darken(!base_color, 75)
+!base_light_color    = lighten(!base_color, 25)
+!base_lighter_color  = lighten(!base_color, 50)
+!base_lightest_color = lighten(!base_color, 75)
+!dark_complement_support_color     = darken(!complement_support_color, 25)
+!darker_complement_support_color   = darken(!complement_support_color, 50)
+!darkest_complement_support_color  = darken(!complement_support_color, 75)
+!light_complement_support_color    = lighten(!complement_support_color, 25)
+!lighter_complement_support_color  = lighten(!complement_support_color, 50)
+!lightest_complement_support_color = lighten(!complement_support_color, 75)
+!dark_complement_accent_color     = darken(!complement_accent_color, 25)
+!darker_complement_accent_color   = darken(!complement_accent_color, 50)
+!darkest_complement_accent_color  = darken(!complement_accent_color, 75)
+!light_complement_accent_color    = lighten(!complement_accent_color, 25)
+!lighter_complement_accent_color  = lighten(!complement_accent_color, 50)
+!lightest_complement_accent_color = lighten(!complement_accent_color, 75)

data/example/src/screen.sass ADDED Viewed

@@ -0,0 +1,40 @@
+@import compass/utilities.sass
+// We can change the theme color here by pre-setting the !base_color
+!base_color = #614DA3
+@import split_compliment_theme.sass
+html
+  :height 100%
+body#split-compliment
+  :margin 0
+  :height 100%
+  .base
+    :background-color = !base_color
+    .darker
+      :background-color = !base_dark_color
+    .lighter
+      :background-color = !base_light_color
+  .complement-support
+    :background-color = !complement_support_color
+    .darker
+      :background-color = !dark_complement_support_color
+    .lighter
+      :background-color = !light_complement_support_color
+  .complement-accent
+    :background-color = !complement_accent_color
+    .darker
+      :background-color = !dark_complement_accent_color
+    .lighter
+      :background-color = !light_complement_accent_color
+  .base, .complement-support, .complement-accent
+    +clearfix
+    :height 33%
+    div
+      :height 100%
+  .darker
+    :float left
+  .lighter
+    :float right
+  .darker, .lighter
+    :width 33%

data/lib/compass-colors.rb ADDED Viewed

@@ -0,0 +1,9 @@
+require 'compass'
+module Compass
+  module Colors
+  end
+end
+require File.join(File.dirname(__FILE__), 'compass-colors', 'hsl')
+require File.join(File.dirname(__FILE__), 'compass-colors', 'compass_extension')
+require File.join(File.dirname(__FILE__), 'compass-colors', 'sass_extensions')

data/lib/compass-colors/compass_extension.rb ADDED Viewed

@@ -0,0 +1,7 @@
+if defined?(Compass)
+  options = Hash.new
+  options[:stylesheets_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'sass'))
+  options[:templates_directory]   = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'templates'))
+  Compass::Frameworks.register('colors', options)
+end

data/lib/compass-colors/hsl.rb ADDED Viewed

@@ -0,0 +1,108 @@
+module Compass
+  module Colors
+    class HSL
+      # Stored in degrees [0, 360)
+      attr_reader :h
+      # Stored as a number from [0,1]
+      attr_reader :s, :l
+      def self.from_color(color)
+        from_rgb(*color.value)
+      end
+      def self.from_rgb(r, g, b)
+        rgb = [r,g,b]
+        rgb.map!{|c| c / 255.0}
+        min_rgb = rgb.min
+        max_rgb = rgb.max
+        delta = max_rgb - min_rgb
+        lightness = (max_rgb + min_rgb) / 2.0
+        if delta < 1e-5
+           hue = 0
+           saturation = 0
+        else
+           saturation = if ( lightness < 0.5 )
+              delta / ( max_rgb + min_rgb )
+           else
+             delta / ( 2 - max_rgb - min_rgb )
+           end
+           deltas = rgb.map{|c| (((max_rgb - c) / 6.0) + (delta / 2.0)) / delta}
+           hue = if (rgb[0] - max_rgb).abs < 1e-5
+             deltas[2] - deltas[1]
+           elsif (rgb[1] - max_rgb).abs < 1e-5
+             ( 1.0 / 3.0 ) + deltas[0] - deltas[2]
+           else
+             ( 2.0 / 3.0 ) + deltas[1] - deltas[0]
+           end
+           hue += 1 if hue < 0
+           hue -= 1 if hue > 1
+         end
+         from_fractions(hue, saturation, lightness)
+      end
+      def self.from_fractions(hue, saturation, lightness)
+        HSL.new(360 * hue, saturation, lightness)
+      end
+      def initialize(h, s, l)
+        self.h = h
+        self.s = s
+        self.l = l
+      end
+      def to_color
+        m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s
+        m1 = l * 2 - m2
+        Sass::Script::Color.new([hue_to_rgb(m1, m2, hp + 1.0/3),
+                                 hue_to_rgb(m1, m2, hp),
+                                 hue_to_rgb(m1, m2, hp - 1.0/3)].map { |c| (c * 0xff).round })
+      end
+      def h=(hue)
+        @h = hue % 360
+      end
+      def s=(saturation)
+        @s = if saturation < 0
+          0.0
+        elsif saturation > 1
+          1.0
+        else
+          saturation
+        end
+      end
+      def l=(lightness)
+        @l = if lightness < 0
+          0.0
+        elsif lightness > 1
+          1.0
+        else
+          lightness
+        end
+      end
+      private
+      #hue as a percentage
+      def hp
+        h / 360.0
+      end
+      # helper for making rgb
+      def hue_to_rgb(m1, m2, h)
+        h += 1 if h < 0
+        h -= 1 if h > 1
+        return m1 + (m2 - m1) * h * 6 if h * 6 < 1
+        return m2 if h * 2 < 1
+        return m1 + (m2 - m1) * (2.0/3 - h) * 6 if h * 3 < 2
+        return m1
+      end
+    end
+  end
+end

data/lib/compass-colors/sass_extensions.rb ADDED Viewed

@@ -0,0 +1,73 @@
+require 'sass'
+module Sass::Script::Functions
+  # Takes a color object and amount by which to lighten it (0 to 100).
+  def lighten(color, amount)
+    hsl = Compass::Colors::HSL.from_color(color)
+    hsl.l += (1 - hsl.l) * (amount.value / 100.0)
+    hsl.to_color
+  end
+  # Takes a color object and amount by which to darken it (0 to 100).
+  def darken(color, amount)
+    hsl = Compass::Colors::HSL.from_color(color)
+    hsl.l *= 1.0 - (amount.value / 100.0)
+    hsl.to_color
+  end
+  # Saturate (make a color "richer") a color by the given amount (0 to 100)
+  def saturate(color, amount)
+    hsl = Compass::Colors::HSL.from_color(color)
+    hsl.s += (1 - hsl.s) * (amount.value / 100.0)
+    hsl.to_color
+  end
+  # Desaturate (make a color "grayer") a color by the given amount (0 to 100)
+  def desaturate(color, amount)
+    hsl = Compass::Colors::HSL.from_color(color)
+    hsl.s *= (1.0 - (amount.value / 100.0))
+    hsl.to_color
+  end
+  # Return the hue of a color as a number between 0 and 360
+  def hue(color)
+    Sass::Script::Number.new(Compass::Colors::HSL.from_color(color).h.round)
+  end
+  # Return the saturation of a color as a number between 0 and 100
+  def saturation(color)
+    Sass::Script::Number.new((Compass::Colors::HSL.from_color(color).s * 100).round)
+  end
+  # Return the luminosity of a color as a number between 0 and 100
+  def luminosity(color)
+    Sass::Script::Number.new((Compass::Colors::HSL.from_color(color).l * 100).round)
+  end
+  # Mixes two colors by some amount (0 to 100). Defaults to 50.
+  def mix(color1, color2, amount = nil)
+    percent = amount ? amount.value.round / 100.0 : 0.5
+    new_colors = color1.value.zip(color2.value).map{|c1, c2| (c1 * percent) + (c2 * (1 - percent))}
+    Sass::Script::Color.new(new_colors)
+  end
+  # Returns the grayscale equivalent color for the given color
+  def grayscale(color)
+    hsl = Compass::Colors::HSL.from_color(color)
+    g = (hsl.l * 255).round
+    Sass::Script::Color.new([g, g, g])
+  end
+  # adjust the hue of a color by the given number of degrees.
+  def adjust_hue(color, degrees)
+    hsl = Compass::Colors::HSL.from_color(color)
+    degrees = degrees.value.to_f.round if degrees.is_a?(Sass::Script::Literal)
+    hsl.h += degrees
+    hsl.to_color
+  end
+  def complement(color)
+    adjust_hue color, 180
+  end
+end

data/spec/approximate_color_matching.rb ADDED Viewed

@@ -0,0 +1,43 @@
+module BeApproximatelyTheSameColorAsMatcher
+  class BeApproximatelyTheSameColorAs
+    def initialize(expected)
+      @expected = expected
+    end
+    def matches?(target)
+      @target = target
+      @target.value.zip(@expected.value).all?{|e,t| (e-t).abs <= 1}
+    end
+    def failure_message
+      "expected <#{to_string(@target)}> to " +
+      "be approximately the same as <#{to_string(@expected)}>"
+    end
+    def negative_failure_message
+      "expected <#{to_string(@target)}> not to " +
+      "be approximately the same as <#{to_string(@expected)}>"
+    end
+    # Returns string representation of an object.
+    def to_string(value)
+      # indicate a nil
+      if value.nil?
+        'nil'
+      end
+      # join arrays
+      if value.class == Array
+        return value.join(", ")
+      end
+      # otherwise return to_s() instead of inspect()
+      return value.to_s
+    end
+  end
+  # Actual matcher that is exposed.
+  def be_approximately_the_same_color_as(expected)
+    BeApproximatelyTheSameColorAs.new(expected)
+  end
+end

data/spec/sass_extensions_spec.rb ADDED Viewed

@@ -0,0 +1,44 @@
+$:.unshift(File.join(File.dirname(__FILE__), '..', 'lib'))
+require File.join(File.dirname(__FILE__), 'approximate_color_matching')
+Spec::Runner.configure do |config|
+  config.include(BeApproximatelyTheSameColorAsMatcher)
+end
+require 'compass-colors'
+describe "sass extensions" do
+  it "should lighten red into pink" do
+    pink = invoke(:lighten, color(255,0,0), number(50))
+    pink.should be_approximately_the_same_color_as(color(255,127,127))
+  end
+  it "should darken red into maroon" do
+    maroon = invoke(:darken, color(255,0,0), number(50))
+    maroon.should be_approximately_the_same_color_as(color(127,0,0))
+  end
+  it "should darken white into gray and back again" do
+    darker = invoke(:darken, color(0xff, 0xff, 0xff), number(50))
+    lighter_again = invoke(:lighten, darker, number(100))
+    color(0xff, 0xff, 0xff).should be_approximately_the_same_color_as(lighter_again)
+  end
+  it "shouldn't saturate fully saturated colors" do
+    saturated = invoke(:saturate, color(0, 127, 127), number(50))
+    saturated.should be_approximately_the_same_color_as(color(0, 127, 127))
+  end
+  def invoke(name, *args)
+    Sass::Script::Functions::EvaluationContext.new({}).send(name, *args)
+  end
+  def color(r,g,b)
+    Sass::Script::Color.new([r,g,b])
+  end
+  def number(num)
+    Sass::Script::Number.new(num)
+  end
+end

data/templates/analogous/_theme.sass ADDED Viewed

@@ -0,0 +1,28 @@
+// In theory the lightness and saturation values of corresponding colors should not change.
+// In reality, these values should be adjusted to create a more pleasant color combination.
+// There is not any mathematical formula for this, but you can use the lighten, darken,
+// saturate and desaturate functions to adjust your main colors.
+!base_color ||= red
+!support_color = adjust_hue(!base_color, 30)
+!accent_color  = adjust_hue(!base_color, -30)
+!dark_base_color     = darken(!base_color, 25)
+!darker_base_color   = darken(!base_color, 50)
+!darkest_base_color  = darken(!base_color, 75)
+!light_base_color    = lighten(!base_color, 25)
+!lighter_base_color  = lighten(!base_color, 50)
+!lightest_base_color = lighten(!base_color, 75)
+!dark_support_color     = darken(!support_color, 25)
+!darker_support_color   = darken(!support_color, 50)
+!darkest_support_color  = darken(!support_color, 75)
+!light_support_color    = lighten(!support_color, 25)
+!lighter_support_color  = lighten(!support_color, 50)
+!lightest_support_color = lighten(!support_color, 75)
+!dark_accent_color     = darken(!accent_color, 25)
+!darker_accent_color   = darken(!accent_color, 50)
+!darkest_accent_color  = darken(!accent_color, 75)
+!light_accent_color    = lighten(!accent_color, 25)
+!lighter_accent_color  = lighten(!accent_color, 50)
+!lightest_accent_color = lighten(!accent_color, 75)

data/templates/analogous/manifest.rb ADDED Viewed

	@@ -0,0 +1 @@
1	+ stylesheet '_theme.sass'

data/templates/basic/_theme.sass ADDED Viewed

@@ -0,0 +1,7 @@
+!base_color        ||= red
+!dark_base_color     = darken(!base_color, 25)
+!darker_base_color   = darken(!base_color, 50)
+!darkest_base_color  = darken(!base_color, 75)
+!light_base_color    = lighten(!base_color, 25)
+!lighter_base_color  = lighten(!base_color, 75)
+!lightest_base_color = lighten(!base_color, 50)

data/templates/basic/manifest.rb ADDED Viewed

	@@ -0,0 +1 @@
1	+ stylesheet '_theme.sass'

data/templates/complementary/_theme.sass ADDED Viewed

@@ -0,0 +1,20 @@
+// In theory the lightness and saturation values of corresponding colors should not change.
+// In reality, these values should be adjusted to create a more pleasant color combination.
+// There is not any mathematical formula for this, but you can use the lighten, darken,
+// saturate and desaturate functions to adjust your main colors.
+!base_color ||= red
+!complementary_color = complement(!base_color)
+!dark_base_color     = darken(!base_color, 25)
+!darker_base_color   = darken(!base_color, 50)
+!darkest_base_color  = darken(!base_color, 75)
+!light_base_color    = lighten(!base_color, 25)
+!lighter_base_color  = lighten(!base_color, 50)
+!lightest_base_color = lighten(!base_color, 75)
+!dark_complementary_color     = darken(!complementary_color, 25)
+!darker_complementary_color   = darken(!complementary_color, 50)
+!darkest_complementary_color  = darken(!complementary_color, 75)
+!light_complementary_color    = lighten(!complementary_color, 25)
+!lighter_complementary_color  = lighten(!complementary_color, 50)
+!lightest_complementary_color = lighten(!complementary_color, 75)

data/templates/complementary/manifest.rb ADDED Viewed

	@@ -0,0 +1 @@
1	+ stylesheet '_theme.sass'

data/templates/split_complement/_theme.sass ADDED Viewed

@@ -0,0 +1,28 @@
+// In theory the lightness and saturation values of corresponding colors should not change.
+// In reality, these values should be adjusted to create a more pleasant color combination.
+// There is not any mathematical formula for this, but you can use the lighten, darken,
+// saturate and desaturate functions to adjust your main colors.
+!base_color ||= red
+!complement_support_color = adjust_hue(!base_color, 180 + 30)
+!complement_accent_color  = adjust_hue(!base_color, 180 - 30)
+!dark_base_color     = darken(!base_color, 25)
+!darker_base_color   = darken(!base_color, 50)
+!darkest_base_color  = darken(!base_color, 75)
+!light_base_color    = lighten(!base_color, 25)
+!lighter_base_color  = lighten(!base_color, 50)
+!lightest_base_color = lighten(!base_color, 75)
+!dark_complement_support_color     = darken(!complement_support_color, 25)
+!darker_complement_support_color   = darken(!complement_support_color, 50)
+!darkest_complement_support_color  = darken(!complement_support_color, 75)
+!light_complement_support_color    = lighten(!complement_support_color, 25)
+!lighter_complement_support_color  = lighten(!complement_support_color, 50)
+!lightest_complement_support_color = lighten(!complement_support_color, 75)
+!dark_complement_accent_color     = darken(!complement_accent_color, 25)
+!darker_complement_accent_color   = darken(!complement_accent_color, 50)
+!darkest_complement_accent_color  = darken(!complement_accent_color, 75)
+!light_complement_accent_color    = lighten(!complement_accent_color, 25)
+!lighter_complement_accent_color  = lighten(!complement_accent_color, 50)
+!lightest_complement_accent_color = lighten(!complement_accent_color, 75)

data/templates/split_complement/manifest.rb ADDED Viewed

	@@ -0,0 +1 @@
1	+ stylesheet '_theme.sass'

data/templates/triadic/_theme.sass ADDED Viewed

@@ -0,0 +1,28 @@
+// In theory the lightness and saturation values of corresponding colors should not change.
+// In reality, these values should be adjusted to create a more pleasant color combination.
+// There is not any mathematical formula for this, but you can use the lighten, darken,
+// saturate and desaturate functions to adjust your main colors.
+!base_color ||= red
+!support_color = adjust_hue(!base_color, 120)
+!accent_color  = adjust_hue(!base_color, -120)
+!dark_base_color     = darken(!base_color, 25)
+!darker_base_color   = darken(!base_color, 50)
+!darkest_base_color  = darken(!base_color, 75)
+!light_base_color    = lighten(!base_color, 25)
+!lighter_base_color  = lighten(!base_color, 50)
+!lightest_base_color = lighten(!base_color, 75)
+!dark_support_color     = darken(!support_color, 25)
+!darker_support_color   = darken(!support_color, 50)
+!darkest_support_color  = darken(!support_color, 75)
+!light_support_color    = lighten(!support_color, 25)
+!lighter_support_color  = lighten(!support_color, 50)
+!lightest_support_color = lighten(!support_color, 75)
+!dark_accent_color     = darken(!accent_color, 25)
+!darker_accent_color   = darken(!accent_color, 50)
+!darkest_accent_color  = darken(!accent_color, 75)
+!light_accent_color    = lighten(!accent_color, 25)
+!lighter_accent_color  = lighten(!accent_color, 50)
+!lightest_accent_color = lighten(!accent_color, 75)

data/templates/triadic/manifest.rb ADDED Viewed

	@@ -0,0 +1 @@
1	+ stylesheet '_theme.sass'

metadata ADDED Viewed

@@ -0,0 +1,87 @@
+--- !ruby/object:Gem::Specification
+name: compass-colors
+version: !ruby/object:Gem::Version
+  version: 0.2.0
+platform: ruby
+authors:
+- Chris Eppstein
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2009-08-03 00:00:00 -07:00
+default_executable:
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: chriseppstein-compass
+  type: :runtime
+  version_requirement:
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.8.7
+    version:
+description: Sass Extensions and color theme templates to make working with colors easier and more maintainable.
+email: chris@eppsteins.net
+executables: []
+extensions: []
+extra_rdoc_files:
+- README.markdown
+files:
+- README.markdown
+- Rakefile
+- VERSION.yml
+- example/config.rb
+- example/split_compliment_example.html
+- example/src/_split_compliment_theme.sass
+- example/src/screen.sass
+- lib/compass-colors.rb
+- lib/compass-colors/compass_extension.rb
+- lib/compass-colors/hsl.rb
+- lib/compass-colors/sass_extensions.rb
+- spec/approximate_color_matching.rb
+- spec/sass_extensions_spec.rb
+- templates/analogous/_theme.sass
+- templates/analogous/manifest.rb
+- templates/basic/_theme.sass
+- templates/basic/manifest.rb
+- templates/complementary/_theme.sass
+- templates/complementary/manifest.rb
+- templates/split_complement/_theme.sass
+- templates/split_complement/manifest.rb
+- templates/triadic/_theme.sass
+- templates/triadic/manifest.rb
+has_rdoc: true
+homepage: http://compass-style.org
+licenses: []
+post_install_message:
+rdoc_options:
+- --charset=UTF-8
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: "0"
+  version:
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: "0"
+  version:
+requirements: []
+rubyforge_project:
+rubygems_version: 1.3.5
+signing_key:
+specification_version: 3
+summary: Color Support for Compass & Sass
+test_files:
+- spec/approximate_color_matching.rb
+- spec/sass_extensions_spec.rb