colorkit 0.4.5

data/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Kwale Design, Sam Ashley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,70 @@
+Colorkit
+========
+
+Built on Compass and Sass, Colorkit provides a sensible default color library
+along with additional functions and mixins that make generating harmonious
+color schemes a breeze.
+
+Checkout the [Colorkit Codepen](http://codepen.io/kwaledesign/pen/glxBi) to play with a live version. 
+
+##Installation:
+1. Download or clone the Colorkit repo
+2. Install the Colorkit gem
+```
+sudo gem install colorkit
+```
+3. Run compass create specifying your project's directory (run compass create --help for further instructions).
+```
+compass create my_project_name -r colorkit --using colorkit
+```
+
+To use Colorkit in an existing project:
+1. Download and install Colorkit
+2. Edit your project's config.rb file adding:
+```
+require 'colorkit'
+```
+
+##What Is It?
+Colorkit includes a color library, the core mixins and functions, and your
+project specific color pallet.
+
+###Color Library
+Colorkit's default color library is based off the primary colors red, yellow,
+and blue keywords [defined in
+SVG](http://www.w3.org/TR/SVG/types.html#ColorKeywords) and referenced in the [Level 3 CSS Color
+Module](http://www.w3.org/TR/css3-color/#svg-color). Secondary and tertiary colors are derived in equal parts using [Sass's
+color
+functions](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#mix-instance_method). Each of these key-colors are then used in Colorkit's
+tint-stack, tone-stack, and shade-stack functions to produce a value stack for
+each. The color swatches are given a variable named based of the
+[BEM](http://bem.info/) naming
+methodology, as defined [here](https://github.com/kwaledesign/CSS-Styleguide), in the form of:
+```
+$color-name--value-name
+```
+example:
+
+```
+$red-orange--shade-3;
+```
+###Mixins and Functions
+Colorkit includes mixins and functions for creating color schemes, color
+stacks, and experimenting entire pallets by automaticlly generating class names
+to use with the pallet template. These are fairly well commented within the
+source, hopefully documentation here will be updated soon.
+
+###Color Pallet
+The `color-pallet.scss` partial is the main settings file for using Colorkit
+and integrating it into your project. This is where you'll want to set all your
+color variables. Be sure to `@include` towards the top of your project's main
+stylesheet to be sure these variables are available project wide.
+
+###Credit
+Color-stack functions were borrowed from [Snugug's](https://twitter.com/Snugug) excellent
+[toolkit](https://github.com/Snugug/toolkit#colour-functions)
+
+<hr>
+### License
+© Kwale Design - Original source code dual licensed under [MIT license](http://www.opensource.org/licenses/mit-license.php) / [GPL2 license](http://www.gnu.org/licenses/gpl-2.0.html). Open-sourced projects used within this project retain their original licenses.
+

data/lib/colorkit.rb

@@ -0,0 +1,3 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('colorkit', :path => extension_path)

data/stylesheets/_colorkit.scss

@@ -0,0 +1,19 @@
+@import "colorkit/colorkit";
+@import "colorkit/color-library";
+@import "colorkit/color-scheme";
+
+@import "colorkit/color-library/blue-greens";
+@import "colorkit/color-library/blue-violets";
+@import "colorkit/color-library/blues";
+@import "colorkit/color-library/browns";
+@import "colorkit/color-library/greens";
+@import "colorkit/color-library/grays";
+@import "colorkit/color-library/oranges";
+@import "colorkit/color-library/red-oranges";
+@import "colorkit/color-library/red-violets";
+@import "colorkit/color-library/reds";
+@import "colorkit/color-library/violets";
+@import "colorkit/color-library/yellow-greens";
+@import "colorkit/color-library/yellow-oranges";
+@import "colorkit/color-library/yellows";
+

data/stylesheets/colorkit/_color-library.scss

@@ -0,0 +1,20 @@
+/**
+ * Colorkit Color Library
+ *
+ */
+
+@import "color-library/reds";
+@import "color-library/red-oranges";
+@import "color-library/oranges";
+@import "color-library/yellow-oranges";
+@import "color-library/yellows";
+@import "color-library/yellow-greens";
+@import "color-library/greens";
+@import "color-library/blue-greens";
+@import "color-library/blues";
+@import "color-library/blue-violets";
+@import "color-library/violets";
+@import "color-library/red-violets";
+@import "color-library/browns";
+@import "color-library/grays";
+

data/stylesheets/colorkit/_color-scheme.scss

@@ -0,0 +1,291 @@
+/**
+ * Color Scheme Pallet
+ *
+ * for experimenting with color in the browser
+ * 
+ * generates monochromatic, complementary, split-complementary, triadic,
+ * analogous, double-complementary, tetradic, and quadradic color-schemes along
+ * with (six by default) tints, tones, and shades of each color in your scheme.  
+ * These colors are given class names automaticly. 
+ *
+ * Remember: the first value in the $tint-stack, $tone-stack, and $shade-stack
+ * lists is the unadjusted color, meaning each stack includes the color which the
+ * stack was derived from. The adjusted colors in the stack begin at 2.
+ */
+
+@mixin color-scheme-pallet($key-color: red) {
+  $base-color: $key-color;
+/**
+ * Monochromatic Color Scheme
+ */
+  .monochromatic {
+    @include color-scheme(monochromatic, $key-color);
+    .pure-color-swatch { background: $base-color; }
+    .base {
+      $tint-stack: tint-stack($base-color, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($base-color,$sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($base-color, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+  }
+
+/**
+ * Complementary Color Scheme
+ */
+  .complementary {
+    @include color-scheme(complementary, $key-color);
+    .base .pure-color-swatch { background: $base-color; }
+    .complementary .pure-color-swatch { background: $complementary; }
+    .base {
+      $tint-stack: tint-stack($base-color, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($base-color,$sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($base-color, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .complementary {
+      $tint-stack: tint-stack($complementary, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($complementary, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($complementary, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+  }
+
+/**
+ * Split-Complementary Color Scheme
+ */
+  .split-complementary {
+    @include color-scheme(split-complementary, $key-color);
+    .base .pure-color-swatch { background: $base-color; }
+    .secondaryA .pure-color-swatch { background: $secondaryA; }
+    .secondaryB .pure-color-swatch { background: $secondaryB; }
+    .base {
+      $tint-stack: tint-stack($base-color, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($base-color,$sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($base-color, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .secondaryA {
+      $tint-stack: tint-stack($secondaryA, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($secondaryA, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($secondaryA, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .secondaryB {
+      $tint-stack: tint-stack($secondaryB, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($secondaryB, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($secondaryB, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+  }
+
+/**
+ * Triadic Color Scheme
+ */
+  .triadic {
+    @include color-scheme(triadic, $key-color);
+    .base .pure-color-swatch { background: $base-color; }
+    .secondaryA .pure-color-swatch { background: $secondaryA; }
+    .secondaryB .pure-color-swatch { background: $secondaryB; }
+    .base {
+      $tint-stack: tint-stack($base-color, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($base-color,$sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($base-color, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .secondaryA {
+      $tint-stack: tint-stack($secondaryA, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($secondaryA, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($secondaryA, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .secondaryB {
+      $tint-stack: tint-stack($secondaryB, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($secondaryB, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($secondaryB, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+  }
+
+/**
+ * Analogous Color Scheme
+ */
+  .analogous{
+    @include color-scheme(analogous, $key-color); 
+    .pure-color-swatch { background: $base-color; }
+    .secondaryA .pure-color-swatch { background: $secondaryA; }
+    .secondaryB .pure-color-swatch { background: $secondaryB; }
+    .base {
+      $tint-stack: tint-stack($base-color, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($base-color,$sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($base-color, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .secondaryA {
+      $tint-stack: tint-stack($secondaryA, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($secondaryA, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($secondaryA, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .secondaryB {
+      $tint-stack: tint-stack($secondaryB, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($secondaryB, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($secondaryB, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+  }
+
+/**
+ * Double Complementary Color Scheme
+ */
+  .double-complementary {
+    @include color-scheme(double-complementary, $key-color);
+    .base .pure-color-swatch { background: $base-color; }
+    .secondaryA .pure-color-swatch { background: $secondaryA; }
+    .secondaryB .pure-color-swatch { background: $secondaryB; }
+    .complementary .pure-color-swatch { background: $complementary; }
+    .base {
+      $tint-stack: tint-stack($base-color, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($base-color,$sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($base-color, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .secondaryA {
+      $tint-stack: tint-stack($secondaryA, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($secondaryA, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($secondaryA, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .secondaryB {
+      $tint-stack: tint-stack($secondaryB, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($secondaryB, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($secondaryB, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .complementary {
+      $tint-stack: tint-stack($complementary, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($complementary, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($complementary, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+  }
+
+/**
+ * Tetradic Color Scheme
+ */
+  .tetradic {
+    @include color-scheme(tetradic, $key-color);
+    .base .pure-color-swatch { background: $base-color; }
+    .secondaryA .pure-color-swatch { background: $secondaryA; }
+    .secondaryB .pure-color-swatch { background: $secondaryB; }
+    .complementary .pure-color-swatch { background: $complementary; }
+    .base {
+      $tint-stack: tint-stack($base-color, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($base-color,$sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($base-color, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .secondaryA {
+      $tint-stack: tint-stack($secondaryA, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($secondaryA, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($secondaryA, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .secondaryB {
+      $tint-stack: tint-stack($secondaryB, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($secondaryB, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($secondaryB, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .complementary {
+      $tint-stack: tint-stack($complementary, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($complementary, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($complementary, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+  }
+
+/**
+ * Quadradic Color Scheme
+ */
+  .quadradic { 
+    @include color-scheme(quadradic, $key-color);
+    .base .pure-color-swatch { background: $base-color; }
+    .secondaryA .pure-color-swatch { background: $secondaryA; }
+    .secondaryB .pure-color-swatch { background: $secondaryB; }
+    .complementary .pure-color-swatch { background: $complementary; }
+    .base {
+      $tint-stack: tint-stack($base-color, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($base-color,$sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($base-color, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .secondaryA {
+      $tint-stack: tint-stack($secondaryA, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($secondaryA, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($secondaryA, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .secondaryB {
+      $tint-stack: tint-stack($secondaryB, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($secondaryB, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($secondaryB, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+    .complementary {
+      $tint-stack: tint-stack($complementary, $sixths);
+      @include swatch-gen($tint-stack, tint);
+      $tone-stack: tone-stack($complementary, $sixths);
+      @include swatch-gen($tone-stack, tone);
+      $shade-stack: shade-stack($complementary, $sixths);
+      @include swatch-gen($shade-stack, shade);
+    }
+  }
+
+} 
+

data/stylesheets/colorkit/_colorkit.scss

@@ -0,0 +1,190 @@
+/**
+ * Colorkit
+ * 
+ */
+
+/**
+ * Color Stacks
+ *
+ * Returns a list of mixed colors at given intervals based on two initial source colors
+ * https://github.com/ericam/accoutrement/blob/master/stylesheets/accoutrement/_color.scss
+ * 
+ * $main: The main color this stack is based on
+ * $second: The color to be mixed in at varrying amounts
+ * $amounts: Optional list of percentage mix intervals
+ */
+
+/**
+ * Amounts
+ * 
+ * used in stack functions to create multiple color variants
+ */
+$default-amounts  : 20% 40% 60% 70% 80%     !default;
+$sixths: 15% 30% 45% 60% 75% 90%;
+
+$amounts          : $default-amounts        !default;
+$default-tints    : $default-amounts        !default;
+$default-shades   : $default-amounts        !default;
+$default-tones    : $default-amounts        !default;
+
+
+/**
+ * Color Stack
+ * 
+ * creates a list (color pallet) of color values based on the following arguments:
+ *
+ * $main: the color to generate variants from
+ * $second: the color to mix with $main to create the variants
+ * $amounts: the list of mixture amounts, determines the number of variants
+ *
+ * Remember: the first value in the stack is the unadjusted color, meaning each 
+ * stack includes the color which the stack was derived from. The adjusted colors 
+ * in the stack begin at 2.
+ */
+@function color-stack($main, $second, $amounts: $default-amounts) {
+  $stack: $main;
+  @each $amount in $amounts {
+    $stack: join($stack, mix($second, $main, $amount));
+  }
+  @return $stack;
+}
+
+/**
+ * Value Stacks
+ *
+ * Functions to return a tint/shade/tone stack based on a given color
+ * 
+ * $color: color to adjust
+ * $amounts: optional list of percentage amounts
+ */
+
+// Tints
+@function tint-stack($color, $amounts: $default-tints) {
+    @return color-stack($color, #fff, $amounts);
+}
+// Shades
+@function shade-stack($color, $amounts: $default-shades) {  
+    @return color-stack($color, #000, $amounts);
+}
+// Tones
+@function tone-stack($color, $amounts: $default-tones) {
+  @return color-stack($color, #808080, $amounts);
+}
+
+/**
+ * Simple Color Value
+ * 
+ * Functions to adjust the tint/shade/tone of a single color
+ *
+ * $color: color to adjust
+ * $amount: the percentage amount
+ */
+// Tint
+@function tint($color, $amount) {
+  @return mix(#fff, $color, $amount);
+}
+// Shade
+@function shade($color, $amount) {
+  @return mix(#000, $color, $amount);
+}
+// Tone
+@function tone($color, $amount) {
+  @return mix(#808080, $color, $amount);
+}
+
+/**
+ * Gray Scale 
+ * 
+ * return opapue/alpha gray scale
+ */
+// gray-scale (opaque)
+@function black($tint) {
+	@return lighten(#000, $tint);
+}
+
+@function white($shade) {
+	@return darken(#FFF, $shade);
+}
+
+// gray-scale (alpha) 
+@function alpha-black($opacity) {
+  @return rgba(0,0,0,$opacity);
+}
+
+@function alpha-white($opacity) {
+	@return rgba(255,255,255,$opacity);
+}
+
+/**
+ * Color-Scheme
+ * 
+ * mixin to generate harmonious color-scheme variables 
+ *
+ * $color-relationship: monochromatic, analogous, complementary, split-complementary, triadic, tetradic, quadradic
+ * $base-color: the color to initiate the color scheme with
+ * $color-angle: the degrees of seperation between colors on the wheel.
+ *
+ */
+
+// initialize variables
+$complementary: null;
+$secondaryA: null;
+$secondaryB: null;
+
+@mixin color-scheme(
+$color-relationship: "monochromatic",
+$base-color: red,
+$color-angle: 30) {
+	@if $color-relationship == "monochromatic" {
+    $base-color: $base-color;
+  }
+	@if $color-relationship == "complementary" {
+		$complementary: complement($base-color);
+	}
+	@if $color-relationship == "split-complementary" {
+		$secondaryA: adjust-hue($base-color, 180 + $color-angle);
+		$secondaryB: adjust-hue($base-color, 180 - $color-angle);
+	}
+	@if $color-relationship == "double-complementary" {
+		$secondaryA: adjust-hue($base-color, $color-angle);
+		$secondaryB: complement($secondaryA);
+		$complementary: complement($base-color);
+	}
+	@if $color-relationship == "triadic" {
+		$secondaryA: adjust-hue($base-color, 120);
+		$secondaryB: adjust-hue($base-color, -120);
+	}
+	@if $color-relationship == "analogous" {
+		$secondaryA: adjust-hue($base-color, $color-angle);
+		$secondaryB: adjust-hue($base-color, - $color-angle);
+	}
+	@if $color-relationship == "tetradic" {
+		$secondaryA: adjust-hue($base-color, 300);
+		$secondaryB: complement($secondaryA);
+		$complementary: complement($base-color);
+	}
+	@if $color-relationship == "quadradic" {
+		$secondaryA: adjust-hue($base-color, 90);
+		$secondaryB: complement($secondaryA);  
+		$complementary: complement($base-color);
+	}
+}
+
+/**
+ * Color Swatch Generator
+ *
+ * generates color swatch class names based on a given color list
+ * $color-swatches
+ *
+ * ex:
+ * $swatches: color-stack(red, blue, $default-amounts);
+ * @include swatch-gen($swatches);
+ */
+@mixin swatch-gen($color-swatches: null, $swatch-name: color-swatch) {
+  $n: length($color-swatches);
+  @while $n > 0 {
+    .#{$swatch-name}-#{$n} { background: nth($color-swatches, $n); }
+    $n: $n - 1;
+  }
+}
+