color-schemer 0.2.1 → 0.2.2

data/lib/color-schemer.rb

@@ -1,9 +1,10 @@
 require 'compass'
+require 'blend-mode'
 Compass::Frameworks.register("color-schemer", :path => "#{File.dirname(__FILE__)}/..")
 
 module ColorSchemer
   
-  VERSION = "0.2.1"
+  VERSION = "0.2.2"
   DATE = "2011-09-15"
 
 end

data/stylesheets/_color-schemer.scss

@@ -1,13 +1,25 @@
-// Define color schemes quickly
+@import "blend-mode";
 
-@import "color-schemer/defaults";
+// Defaults
+$cs-primary           : #f00 !default;
+$cs-scheme            : mono !default;   // mono, complement, triad, tetrad, analogic, accented-analogic
+$cs-hue-offset        : 30 !default;
+$cs-brightness-offset : false !default;
+$cs-color-model       : rgb !default;    // rgb, ryb
+$cs-colorblind        : normal !default;
+
+// Partials
+@import "color-schemer/interpolation";
 @import "color-schemer/cmyk";
 @import "color-schemer/ryb";
-
+@import "color-schemer/colorblind";
 @import "color-schemer/equalize";
+@import "color-schemer/mix";
 @import "color-schemer/tint-shade";
 @import "color-schemer/color-adjustments";
 @import "color-schemer/color-schemer";
 
+@import "color-schemer/mixins";
+
 // Tell other files that this is loaded.
-$color-schemer-loaded: true;
+$color-schemer-loaded : true;

data/stylesheets/color-schemer/_colorblind.scss

@@ -0,0 +1,54 @@
+@function cs-colorblind($color, $mode: $cs-colorblind) {
+
+  $severity: 66%;
+
+  // Protanopia - no red
+  @if $mode == protanopia {
+    @return $color - #f00;
+  }
+
+  // Deuteranopia - no green
+  @if $mode == deuteranopia {
+    @return $color - #0f0;
+  }
+
+  // Tritanopia - no blue
+  @if $mode == tritanopia {
+    @return $color - #00f;
+  }
+
+  // Protanomaly - low red
+  @if $mode == protanomaly {
+    @return $color - shade(#f00, 100% - $severity);
+  }
+
+  // Deuteranomaly - low green
+  @if $mode == deuteranomaly {
+    @return $color - shade(#0f0, 100% - $severity);
+  }
+
+  // Tritanomaly - low blue
+  @if $mode == tritanomaly {
+    @return $color - shade(#00f, 100% - $severity);
+  }
+
+  // Typical Monochromacy
+  @if $mode == monochromacy {
+    @return desaturate($color, 100%);
+  }
+
+  // Atypical Monochromacy
+  @if $mode == amonochromacy {
+    @return desaturate($color, $severity);
+  }
+
+
+  // Return color if no color blind mode.
+  @else {
+    @return $color;
+  }
+}
+
+@function cs-cb($color, $mode: $cs-colorblind) {
+  @return cs-colorblind($color, $mode);
+}

data/stylesheets/color-schemer/_interpolation.scss

@@ -0,0 +1,34 @@
+@function cs-interpolate($value, $units: 360, $stops: $ryb-interpolation) {
+  
+  // Loop numbers out of scale back into the scale.
+  @while $value >= 360 {
+    $value: $value - 360;
+  }
+  @while $value < 0 {
+    $value: $value + 360;
+  }
+
+  // Find out how many units in each stop
+  $cs-color-deg: $units / length($stops);
+
+  // Count through stops
+  $cs-deg-count: $cs-color-deg;
+  $cs-stop-count: 1;
+
+  // Add the first stop to the end so it will be
+  // interpolated with the last stop.
+  $stops: append($stops, nth($stops, 1));
+
+  // Start interpolating
+  @for $i from 0 through length($stops) {
+    @if $value < $cs-deg-count {
+      @return cs-mix(nth($stops, $cs-stop-count + 1), nth($stops, $cs-stop-count), abs(percentage(($cs-deg-count - $value) / $cs-color-deg) - 100 ), $model: rgb);
+    }
+
+    // If the value is not in this stop, loop up to another stop.
+    @else {
+      $cs-deg-count: $cs-deg-count + $cs-color-deg;
+      $cs-stop-count: $cs-stop-count + 1
+    }
+  }
+}

data/stylesheets/color-schemer/_mix.scss

@@ -0,0 +1,40 @@
+@function cs-mix($color1, $color2, $percent: 50%, $model: $cs-color-model) {
+
+  $decimal           : abs($percent - 100%) / 100%;
+  $hue-offset        : ();
+
+  @if $model == rgb {
+    $hue-offset        : (hue($color1) - hue($color2)) * $decimal;
+    @if (hue($color1) - hue($color2)) * .5 < -90deg {
+      $hue-offset      : (hue($color1) + 360deg - hue($color2)) * $decimal;
+    }
+    @if (hue($color1) - hue($color2)) * .5 > 90deg {
+      $hue-offset      : (hue($color1) - 360deg - hue($color2)) * $decimal;
+    }
+  }
+
+  @if $model == ryb {
+    $hue-offset        : (ryb-hue($color1) - ryb-hue($color2)) * $decimal;
+    @if (ryb-hue($color1) - ryb-hue($color2)) * .5 < -90deg {
+      $hue-offset      : (ryb-hue($color1) + 360deg - ryb-hue($color2)) * $decimal;
+    }
+    @if (ryb-hue($color1) - ryb-hue($color2)) * .5 > 90deg {
+      $hue-offset      : (ryb-hue($color1) - 360deg - ryb-hue($color2)) * $decimal;
+    }
+  }
+
+  $saturation-offset : (saturation($color1) - saturation($color2)) * $decimal;
+  $lightness-offset  : (lightness($color1) - lightness($color2)) * $decimal;
+
+  @if $model == ryb {
+    $color1: ryb-adjust-hue($color1, $hue-offset * -1);
+  }
+  @else {
+    $color1: adjust-hue($color1, $hue-offset * -1);
+  }
+
+  $color1: set-saturation($color1, saturation($color1) - $saturation-offset);
+  $color1: set-lightness($color1, lightness($color1) - $lightness-offset);
+
+  @return $color1;
+}

data/stylesheets/color-schemer/_mixins.scss

@@ -0,0 +1,29 @@
+////////////////////////////////////////////
+// From Jina Bolton and Eric Meyer -- http://codepen.io/jina/pen/iosjp
+@function cs-stripes($position, $colors) {
+  $colors: if(type-of($colors) != 'list', compact($colors), $colors);
+  $gradient: ();
+  $width: 100% / length($colors);
+
+  @for $i from 1 through length($colors) {
+    $pop: nth($colors,$i);
+    $new: $pop ($width * ($i - 1)), $pop ($width * $i);
+    $gradient: join($gradient, $new, comma);
+  }
+
+  @return linear-gradient($position, $gradient);
+}
+
+////////////////////////////////////////////
+// Color tester
+
+@mixin cs-test($colors, $height: 2em, $element: "body:before") {
+  #{$element} {
+    content: "";
+    display: block;
+    height: $height;
+    @include background(cs-stripes(left, ($colors)));
+    position: relative;
+    z-index: 999999999999;
+  }
+}

data/stylesheets/color-schemer/_ryb.scss

@@ -1,45 +1,10 @@
-@function cs-interpolate($value, $units: 360, $stops: #FF0000 #FF4900 #FF7400 #FF9200 #FFAA00 #FFBF00 #FFD300 #FFE800 #FFFF00 #CCF600 #9FEE00 #67E300 #00CC00 #00AF64 #009999 #0B61A4 #1240AB #1B1BB3 #3914AF #530FAD #7109AA #A600A6 #CD0074 #E40045) {
-  
-  // Loop numbers out of scale back into the scale.
-  @while $value >= 360 {
-    $value: $value - 360;
-  }
-  @while $value < 0 {
-    $value: $value + 360;
-  }
-
-  // Find out how many units in each stop
-  $cs-color-deg: $units / length($stops);
-
-  // Count through stops
-  $cs-deg-count: $cs-color-deg;
-  $cs-stop-count: 1;
-
-  // Add the first stop to the end so it will be
-  // interpolated with the last stop.
-  $stops: append($stops, nth($stops, 1));
-
-  // Start interpolating
-  @for $i from 0 through length($stops) {
-    @if $value < $cs-deg-count {
-      @return mix(nth($stops, $cs-stop-count + 1), nth($stops, $cs-stop-count), abs(percentage(($cs-deg-count - $value) / $cs-color-deg) - 100 ));
-    }
-
-    // If the value is not in this stop, loop up to another stop.
-    @else {
-      $cs-deg-count: $cs-deg-count + $cs-color-deg;
-      $cs-stop-count: $cs-stop-count + 1
-    }
-  }
-}
+$ryb-interpolation: #FF0000 #FF4900 #FF7400 #FF9200 #FFAA00 #FFBF00 #FFD300 #FFE800 #FFFF00 #CCF600 #9FEE00 #67E300 #00CC00 #00AF64 #009999 #0B61A4 #1240AB #1B1BB3 #3914AF #530FAD #7109AA #A600A6 #CD0074 #E40045;
 
 // RYB color interpolation
 @function find-ryb($hue) {
 
   // remove units on $hue
-  @if unit($hue) == deg {
-    $hue: $hue / 1deg;
-  }
+  @if unit($hue) == deg { $hue: $hue / 1deg; }
 
   // return an interpolated hue
   @return hue(cs-interpolate($hue));
@@ -77,24 +42,18 @@
   // Start at the current hue and loop in the adjustment.
   $hue-adjust: (ryb-hue($color) + $degrees) / 1deg;
 
-  $saturation: saturation(cs-interpolate(abs(ryb-hue($color)) / 1deg)) - saturation($color);
-  $lightness: lightness(cs-interpolate(abs(ryb-hue($color)) / 1deg)) - lightness($color);
+  $lightness: lightness($color);
+  $saturation: saturation($color);
 
   // Set hue of new color
-  $new-color: cs-interpolate($hue-adjust);
+  $new-color: set-hue(red, hue(cs-interpolate($hue-adjust)));
 
-  // Tint or shade according to lightness
-  @if $lightness > 0 {
-    $new-color: shade($new-color, $lightness * 2);
-  }
-  @if $lightness < 0 {
-    $new-color: tint($new-color, abs($lightness));
-  }
+  // Add back lightness
+  $new-color: set-lightness($new-color, $lightness);
+
+  // Add back saturation
+  $new-color: set-saturation($new-color, $saturation);
 
-  // Adjust saturation
-  @if $saturation < 100% {
-    $new-color: desaturate($new-color, abs($saturation));
-  }
   @return $new-color;
 }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: color-schemer
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
   prerelease: 
 platform: ruby
 authors:
@@ -28,6 +28,22 @@ dependencies:
     - - ~>
       - !ruby/object:Gem::Version
         version: '0.12'
+- !ruby/object:Gem::Dependency
+  name: blend-mode
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 0.0.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 0.0.1
 description: Create color schemes with ease.
 email:
 - scott@scottkellum.com
@@ -40,8 +56,11 @@ files:
 - stylesheets/color-schemer/_cmyk.scss
 - stylesheets/color-schemer/_color-adjustments.scss
 - stylesheets/color-schemer/_color-schemer.scss
-- stylesheets/color-schemer/_defaults.scss
+- stylesheets/color-schemer/_colorblind.scss
 - stylesheets/color-schemer/_equalize.scss
+- stylesheets/color-schemer/_interpolation.scss
+- stylesheets/color-schemer/_mix.scss
+- stylesheets/color-schemer/_mixins.scss
 - stylesheets/color-schemer/_ryb.scss
 - stylesheets/color-schemer/_tint-shade.scss
 homepage: https://github.com/scottkellum/color-schemer

data/stylesheets/color-schemer/_defaults.scss

@@ -1,5 +0,0 @@
-$cs-primary           : #f00 !default;
-$cs-scheme            : mono !default;   // mono, complement, triad, tetrad, analogic, accented-analogic
-$cs-hue-offset        : 30 !default;
-$cs-brightness-offset : false !default;
-$cs-color-model       : rgb !default;    // rgb, ryb