compass 0.10.0.pre5 → 0.10.0.pre6

data/examples/css3/extensions/compass-colors/spec/approximate_color_matching.rb

@@ -0,0 +1,43 @@
+module BeApproximatelyTheSameColorAsMatcher
+  class BeApproximatelyTheSameColorAs
+    def initialize(expected)
+      @expected = expected
+    end
+
+    def matches?(target)
+      @target = target
+      @target.rgb.zip(@expected.rgb).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/examples/css3/extensions/compass-colors/spec/sass_extensions_spec.rb

@@ -0,0 +1,54 @@
+$:.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(25))
+    pink.should be_approximately_the_same_color_as(color(255,127,127))
+  end
+
+  it "should lighten red into pink (percentage)" do
+    pink = invoke(:lighten_percent, 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(25))
+    maroon.should be_approximately_the_same_color_as(color(127,0,0))
+  end
+
+  it "should darken red into maroon (percentage)" do
+    maroon = invoke(:darken_percent, 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/examples/css3/extensions/compass-colors/templates/analogous/_theme.sass

@@ -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/examples/css3/extensions/compass-colors/templates/analogous/manifest.rb

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

data/examples/css3/extensions/compass-colors/templates/basic/_theme.sass

@@ -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/examples/css3/extensions/compass-colors/templates/basic/manifest.rb

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

data/examples/css3/extensions/compass-colors/templates/complementary/_theme.sass

@@ -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/examples/css3/extensions/compass-colors/templates/complementary/manifest.rb

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

data/examples/css3/extensions/compass-colors/templates/split_complement/_theme.sass

@@ -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/examples/css3/extensions/compass-colors/templates/split_complement/manifest.rb

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

data/examples/css3/extensions/compass-colors/templates/triadic/_theme.sass

@@ -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/examples/css3/extensions/compass-colors/templates/triadic/manifest.rb

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

data/examples/css3/gradients.html.haml

@@ -0,0 +1,60 @@
+!!!
+%html
+  %head
+    %link(href="stylesheets/gradients.css" rel="stylesheet" type="text/css")
+  %body
+    %table
+      %thead
+        %th  
+        %th.linear Linear
+        %th.radial Radial
+      %tbody
+        %tr.default
+          %th Default
+          %td.linear <br><br><br>
+          %td.radial <br><br><br>
+        %tr.default
+          %th
+          %td.linear-code
+          %td.radial-code
+        %tr.top-left
+          %th Top Left
+          %td.linear <br><br><br>
+          %td.radial <br><br><br>
+        %tr.top-left
+          %th
+          %td.linear-code
+          %td.radial-code
+        %tr.bottom-right
+          %th Bottom Right
+          %td.linear <br><br><br>
+          %td.radial <br><br><br>
+        %tr.bottom-right
+          %th
+          %td.linear-code
+          %td.radial-code
+        %tr.three-color
+          %th Three Evenly-spaced Colors
+          %td.linear <br><br><br>
+          %td.radial <br><br><br>
+        %tr.three-color
+          %th
+          %td.linear-code
+          %td.radial-code
+        %tr.four-color
+          %th Four Positioned Colors
+          %td.linear <br><br><br>
+          %td.radial <br><br><br>
+        %tr.four-color
+          %th
+          %td.linear-code
+          %td.radial-code
+        %tr.filled-in
+          %th Filled-in End-points
+          %td.linear <br><br><br>
+          %td.radial <br><br><br>
+        %tr.filled-in
+          %th
+          %td.linear-code
+          %td.radial-code
+

data/examples/css3/index.html.haml

@@ -30,21 +30,23 @@
           %h2 Gradients
           %pre.horizontal
             %code<>
-              +h-gradient(#d92626, #2626d9)
+              :preserve
+                +linear-gradient(
+                  color_stops(#d92626, #2626d9),
+                  "left")
           %pre.vertical
             %code<>
-              +v-gradient(#d92626, #2626d9)
-          %pre.diagonal
-            %code<
-              +linear-gradient("left top",
-              "right bottom",
-              \#d92626, #2626d9)
+              :preserve
+                +linear-gradient(
+                  color_stops(#d92626, #2626d9))
           %pre.radial
             %code<>
-              +radial-gradient(<br />  "center center, 10, center center, 100",<br />  #d92626, #2626d9)
+              +radial-gradient(<br>  color_stops(#d92626, #2626d9))
+          %a(href="gradients.html") More Gradients
       .examples
         #border-radius.example
           %h2 Border Radius
+          %p This box has rounded corners
         .gutter
         #box-shadow.example
           %h2 Box Shadow

data/examples/css3/src/fancy-fonts.sass

@@ -1,6 +1,6 @@
 @import compass/css3.sass
 
-+font-face("Angelina", font-files("angelina.ttf", 'truetype'))
++font-face("Angelina", font_files("angelina.ttf", "truetype"))
 h1
   font-family: "Angelina"
   font-size: 5em

data/examples/css3/src/gradients.sass

@@ -0,0 +1,69 @@
+@import compass/css3.sass
+
+#gradient
+  width: 200px
+  height: 100px
+  border: 1px solid #777
+
+thead th
+  min-height: 50px
+  min-width: 100px
+  +text-shadow(#fff)
+th.linear
+  +linear-gradient(color_stops(#fff, #f00 50%, #ff0 75%, #0f0))
+th.radial
+  +radial-gradient(color_stops(#fff, #f00 20px, #ff0 30px, #0f0 40px))
+tr.default
+  td.linear
+    +linear-gradient(color_stops(#c00, #00c))
+  td.radial
+    +radial-gradient(color_stops(#c00, #00c))
+  td.linear-code:before
+    content: "+linear-gradient(color_stops(#c00, #00c))"
+  td.radial-code:before
+    content: "+radial-gradient(color_stops(#c00, #00c))"
+tr.top-left
+  td.linear
+    +linear-gradient(color_stops(#c00, #00c), "top left")
+  td.radial
+    +radial-gradient(color_stops(#c00, #00c), "top left")
+  td.linear-code:before
+    content: "+linear-gradient(color_stops(#c00, #00c), \"top left\")"
+  td.radial-code:before
+    content: "+radial-gradient(color_stops(#c00, #00c), \"top left\")"
+tr.bottom-right
+  td.linear
+    +linear-gradient(color_stops(#c00, #00c), "bottom right")
+  td.radial
+    +radial-gradient(color_stops(#c00, #00c), "bottom right")
+  td.linear-code:before
+    content: "+linear-gradient(color_stops(#c00, #00c), \"bottom right\")"
+  td.radial-code:before
+    content: "+radial-gradient(color_stops(#c00, #00c), \"bottom right\")"
+tr.three-color
+  td.linear
+    +linear-gradient(color_stops(#c00, #fff, #00c))
+  td.radial
+    +radial-gradient(color_stops(#c00, #fff, #00c 50px))
+  td.linear-code:before
+    content: "+linear-gradient(color_stops(#c00, #fff, #00c))"
+  td.radial-code:before
+    content: "+radial-gradient(color_stops(#c00, #fff, #00c 50px))"
+tr.four-color
+  td.linear
+    +linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))
+  td.radial
+    +radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))
+  td.linear-code:before
+    content: "+linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))"
+  td.radial-code:before
+    content: "+radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))"
+tr.filled-in
+  td.linear
+    +linear-gradient(color_stops(#c00 33%, #00c 66%))
+  td.radial
+    +radial-gradient(color_stops(#c00 25px, #00c 75px))
+  td.linear-code:before
+    content: "+linear-gradient(color_stops(#c00 33%, #00c 66%))"
+  td.radial-code:before
+    content: "+radial-gradient(color_stops(#c00 25px, #00c 75px))"

data/examples/css3/src/main.sass

@@ -39,7 +39,7 @@ h1
   content: " "
 
 .example
-  +v-gradient(#fff, #ccc)
+  +linear-gradient(color_stops(#fff, #ccc))
   pre
     padding: 1em
     margin: 1em
@@ -48,8 +48,8 @@ h1
     font-weight: bold
 #background-clip
   pre
-    background: transparent #{image-url("fresh-peas.jpg")} no-repeat
-    border: 1em solid #{transparentize(red, .75)}
+    background: transparent #{image_url("fresh-peas.jpg")} no-repeat
+    border: 1em solid rgba(255,0,0,.25)
   .padding-box
     +background-clip("padding-box")
     +background-origin("padding-box")
@@ -59,8 +59,9 @@ h1
 
 #background-size
   pre
-    background: transparent #{image-url("fresh-peas.jpg")} no-repeat
-    border: 1em solid #{transparentize(red, .75)}
+    background: transparent #{image_url("fresh-peas.jpg")} no-repeat
+    border: 1em solid #{mix(red, white, .5)}
+    border: 1em solid rgba(255,0,0,.25)
   .top-left
     +background-size(50% 50%)
   .centered
@@ -69,12 +70,39 @@ h1
 
 #gradients
   .horizontal
-    +h-gradient(#d92626, #2626d9)
+    +linear-gradient(color_stops(#d92626, #2626d9), "left")
   .vertical
-    +v-gradient(#d92626, #2626d9)
+    +linear-gradient(color_stops(#d92626, #2626d9))
   .diagonal
-    +linear-gradient("left top", "right bottom", #d92626, #2626d9)
+    +linear-gradient(color_stops(#d92626, #2626d9), "right top")
   .radial
-    +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9) 
-    background-color: #2626d9
+    /* +radial-gradient(color_stops(#d92626 0, #2626d9 1))
+    +radial-gradient(color_stops(#d92626 10px, #2626d9 150px))
+    // +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
+    // background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
+    // background-color: #2626d9
+  .radial-1
+    // A default radial gradient:
+    /* +radial-gradient(color_stops(#ddd, #aaa))
+    +radial-gradient(color_stops(#ddd, #aaa))
+  .radial-2
+    // A centered gradient
+    /* +radial-gradient(color_stops(#ddd, #aaa))
+    +radial-gradient(color_stops(#ddd, #aaa))
+  .radial-3
+    // A centered radial gradient at the top
+    /* +radial-gradient(color_stops(#ddd, #aaa), "top center")
+    +radial-gradient(color_stops(#ddd, #aaa), "top center")
+  .radial-4
+    // A centered radial gradient with fixed color stops
+    /* +radial-gradient(color_stops(#ddd 20px, #aaa 50px))
+    +radial-gradient(color_stops(#ddd 20px, #aaa 50px))
+  .radial-5
+    // A centered gradient with several color stops
+    /* +radial-gradient(color_stops(#ddd 20%, #aaa 50%, #c00))
+    +radial-gradient(color_stops(#ddd 20px, #aaa 50%, #c00 200px))
+  .radial-6
+    // A centered gradient with color stops
+    /* +radial-gradient(color_stops(#0c0, #ddd 20%, #aaa 50%, #00c))
+    +radial-gradient(color_stops(#0c0 0px, #ddd 20px, #aaa 50px, #00c 100px))