sass-color-schemes 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 092075af671c7f8422c9d5d4d5958787d5086436
+  data.tar.gz: 4567e52a8b37a22edeba60bc81a096ea3723491d
+SHA512:
+  metadata.gz: be61f2ba4994195ffb0d0b069e5ff13aa25cbc455026a435d514aaca150a6876199fec0fd68a6baed7826d25a1da6121cf9a4659c1a64e6c4698ef75a626ebb5
+  data.tar.gz: d4db49a72db0ba1fe0b65552a0faef393b75fc46015fc337fa5b829981f70a1eea07c9a51352bae469ec32596f4792b096cc95aaff9460a81cd7216fb223dfe1

data/README.md

@@ -0,0 +1,242 @@
+# Sass-color-schemes
+
+This [Compass](compass-style.org) extension makes it easy to use color schemes in your web pages by providing a collection of colors based on one (base-) color which is supplemented with additional colors to make the best visual impression.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'sass-color-schemes'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install sass-color-schemes
+
+## Usage
+
+Import it into your main stylesheet:
+
+    @import 'sass-color-schemes';
+    
+### Color functions
+
+Sass-color-schemes has 4 functions that all return an array of 5 color values (of 5 `null`'s). Each function uses variables, such as `$base-color`, `$variation`, etc. for calculating the proper values.
+
+See **variables** for a description of the different kinds.
+    
+#### primary-colors
+
+Returns an array of 5 colors, in which the first element is the base color and the rest are different shades of the base color. You need the Sass' `nth` function to access a specific color:
+
+```
+$color-primary-0: nth(primary-colors(), 1);
+$color-primary-1: nth(primary-colors(), 2);
+// ... etc.
+
+.title {
+  color: $color-primary-0;
+}
+
+.subtitle {
+  color: $color-primary-1;
+}
+
+``` 
+
+#### complement-colors
+
+Returns an array of 5 colors, in which the first element is the complementary color of base color and the rest are different shades of this complementary color. You need the Sass' `nth` function to access a specific color:
+
+
+```
+$color-complement-0: nth(complement-colors(), 1);
+$color-complement-1: nth(complement-colors(), 2);
+// ... etc.
+
+.call-to-action {
+  background-color: $color-complement-0;
+}
+
+```
+
+**Note:** The `complement-colors` function only returns an array of colors when the `$complement` variable is set to `true` or the `$scheme` variable is set to `triad`. Otherwise an array with 5 `null`'s is returned.
+
+#### secondary-1-colors and secondary-2-colors
+
+Some color schemes contain 2 additional colors. These functions each returns an array of 5 colors with, again, 5 different shades of a color. You need the Sass' `nth` function to access a specific color:
+
+```
+$color-secondary-1-0: nth(secondary-1-colors(), 1);
+$color-secondary-1-1: nth(secondary-1-colors(), 2);
+// ... etc.
+
+$color-secondary-2-0: nth(secondary-2-colors(), 1);
+$color-secondary-2-1: nth(secondary-2-colors(), 2);
+// ... etc.
+
+```
+**Note:** The `secondary-1-colors` and `secondary-2-colors` functions only returns an array of colors when the `$scheme` variable is set to `adjacent`, `tetrad` or `triad`. Otherwise an array with 5 `null`'s is returned.
+
+### Variables
+
+You can (and might want to) define several variables to customize the color scheme.
+
+#### $base-color
+
+The color used as a base color to calculate the shades and all other colors. This can be any Sass color.
+
+Defaults to `#ff0000` (red).
+
+```
+$base-color: red;
+$base-color: hsl(0deg, 100%, 50%);
+$base-color: #ff0000;
+// ... etc.
+```
+
+#### $scheme
+
+Sass-color-schemes supports 4 different color schemes:
+
+* **monochromatic** - all the colors (tints, tones, and shades) of a single hue
+* **adjacent** - groups of colors that are adjacent to each other on the color wheel
+* **triad** - three colors equally spaced around the color wheel
+* **tetrad** - four colors arranged into two complementary color pairs
+
+Defaults to `'monochromatic'`.
+
+```
+$scheme: 'monochromatic';
+$scheme: 'tetrad';
+// ... etc.
+
+```
+
+#### $complement
+
+If set to `true`, the `complement-colors` function returns shades of the complementary color of the `$base-color`.
+
+Defaults to `false`.
+
+```
+$complement: true;
+$complement: false;
+
+```
+
+#### $angle
+
+The angle applied to the `$base-color` to calculate other colors in all schemes, expect `monochromatic`. This can be any value and can be set in degrees (deg) or radian (rad) units as well.
+
+Defaults to `30deg`.
+
+```
+$angle: 30;
+$angle: 30deg;
+$angle: 0.5236rad;
+```
+
+#### $variation
+
+This will vary the tints, tones and shades of the colors returned by all functions. Currently Sass-color-schemes supports 24 variations:
+
+* lightest pale pastel
+* very light pale pastel
+* lighter pale pastel
+* pale pastel
+* darker pale pastel
+* dark pale pastel
+* greyish darkest
+* greyish medium light
+* bright pastel
+* very light pastel
+* lighter pastel
+* pastel
+* darker pastel
+* dark pastel
+* greyish dark
+* greyish lighter
+* shiny
+* full colors
+* darker colors
+* darker neon
+* dark
+* deep colors
+* greyish medium dark
+* greyish lightest
+
+Defaults to `full colors`.
+
+```
+$variation: 'darker pale pastel';
+$variation: 'shiny';
+// ... etc.
+
+```
+
+#### $mode
+
+You can choose between:
+
+* [RGB](http://en.wikipedia.org/wiki/RGB_color_model) (a.k.a. the light model)
+* [RYB](http://en.wikipedia.org/wiki/RYB_color_model)
+
+These modes are internally used when calculating colors. RYB is primarily used in art and design education.
+
+Defaults to `ryb`.
+
+```
+$mode: 'rgb';
+$mode: 'ryb';
+
+```
+
+### Full example
+
+```
+$base-color:          #6893A6;
+$variation:           'shiny';
+$scheme:              'adjacent';
+$angle:               25;
+$complement:          true;
+
+$color-primary-0:     nth(primary-colors(), 1);
+$color-primary-1:     nth(primary-colors(), 2);
+$color-primary-2:     nth(primary-colors(), 3);
+$color-primary-3:     nth(primary-colors(), 4);
+$color-primary-4:     nth(primary-colors(), 5);
+
+$color-complement-0:  nth(complement-colors(), 1);
+$color-complement-1:  nth(complement-colors(), 2);
+$color-complement-2:  nth(complement-colors(), 3);
+$color-complement-3:  nth(complement-colors(), 4);
+$color-complement-4:  nth(complement-colors(), 5);
+
+$color-secondary-1-0: nth(secondary-1-colors(), 1);
+$color-secondary-1-1: nth(secondary-1-colors(), 2);
+$color-secondary-1-2: nth(secondary-1-colors(), 3);
+$color-secondary-1-3: nth(secondary-1-colors(), 4);
+$color-secondary-1-4: nth(secondary-1-colors(), 5);
+
+$color-secondary-2-0: nth(secondary-2-colors(), 1);
+$color-secondary-2-1: nth(secondary-2-colors(), 2);
+$color-secondary-2-2: nth(secondary-2-colors(), 3);
+$color-secondary-2-3: nth(secondary-2-colors(), 4);
+$color-secondary-2-4: nth(secondary-2-colors(), 5);
+
+
+```
+
+## Contributing
+
+1. Fork it (https://github.com/bazzel/sass-color-schemes/fork)
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/lib/sass-color-schemes.rb

@@ -0,0 +1,5 @@
+require 'compass'
+require 'color-schemer'
+
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
+Compass::Frameworks.register('sass-color-schemes', path: extension_path)

data/stylesheets/_mixins.scss

@@ -0,0 +1,66 @@
+@function primary-colors() {
+  @return _compose-shades($base-color);
+}
+
+@function complement-colors() {
+  @if ($complement == false) and ($scheme != 'tetrad') {
+    @return _empty-array();
+  }
+
+  @return _compose-color(180);
+}
+
+@function secondary-1-colors() {
+  @if ($scheme == 'triad') {
+    @return _compose-color(180 - $angle);
+  } @else if ($scheme == 'adjacent') or ($scheme == 'tetrad') {
+    @return _compose-color($angle);
+  } @else {
+    @return _empty-array();
+  }
+}
+
+@function secondary-2-colors() {
+  @if ($scheme == 'triad') or ($scheme == 'tetrad') {
+    @return _compose-color(180 + $angle);
+  } @else if ($scheme == 'adjacent') {
+    @return _compose-color(-$angle);
+  } @else {
+    @return _empty-array();
+  }
+}
+
+@function _compose-color($angle) {
+    $color: _adjust-hue($angle);
+    @return _compose-shades($color);
+}
+
+@function _adjust-hue($angle) {
+  @return if($mode == 'ryb', ryb-adjust-hue($base-color, $angle), adjust-hue($base-color, $angle));
+}
+
+@function _compose-shades($color) {
+  $shades: map-get($variations, $variation);
+
+  $colors: ();
+  @for $i from 1 through 5 {
+    $colors: append($colors, _adjust-color($color, $shades, $i));
+  }
+  @return $colors;
+}
+
+@function _adjust-color($base-color, $shades, $n) {
+  $sval: percentage(nth(nth($shades, $n), 1))/100;
+  $lval: percentage(nth(nth($shades, $n), 2))/100;
+  $color: scale-color($base-color, $saturation: $sval, $lightness: $lval);
+
+  @return $color;
+}
+
+@function _empty-array() {
+  $arr: ();
+  @for $i from 1 through 5 {
+    $arr: append($arr, null);
+  }
+  @return $arr;
+}

data/stylesheets/_sass-color-schemes.scss

@@ -0,0 +1,4 @@
+@import 'color-schemer';
+
+@import 'variables';
+@import 'mixins';

data/stylesheets/_variables.scss

@@ -0,0 +1,33 @@
+$base-color:  #ff0000 !default;
+$variation:   'full colors' !default;
+$scheme:      'monochromatic' !default;  // monochromatic, adjacent, triad, tetrad
+$mode:        'ryb' !default; // rgb, ryb
+$angle:       30deg !default;
+$complement:  false !default;
+
+$variations: (
+  'lightest pale pastel':    (0 77) (0 90) (0 82) (0 68) (0 60),
+  'very light pale pastel':  (0 65) (0 86) (0 77) (-26 42) (-44 15),
+  'lighter pale pastel':     (-36 48) (0 83) (0 75) (-49 22) (-52 -5),
+  'pale pastel':             (-71 9) (-17 83) (-63 42) (-70 -17) (-53 -40),
+  'darker pale pastel':      (-77 -35) (-81 15) (-81 -8) (-61 -48) (-44 -57),
+  'dark pale pastel':        (-85 -62) (-87 -8) (-87 -35) (-73 -68) (-62 -75),
+  'greyish darkest':         (-93 -72) (-79 -16) (-86 -40) (-80 -58) (-65 -50),
+  'greyish medium light':    (-95 17) (-78 35) (-94 2) (-92 -10) (-89 -23),
+  'bright pastel':           (0 34) (0 96) (0 60) (0 10) (0 0),
+  'very light pastel':       (0 42) (0 72) (0 57) (0 29) (-18 5),
+  'lighter pastel':          (-39 9) (0 63) (-13 42) (-35 -14) (-17 -38),
+  'pastel':                  (-50 -9) (0 65) (-45 24) (-28 -42) (0 -66),
+  'darker pastel':           (-57 -41) (-77 -4) (-73 -29) (-43 -55) (-21 -70),
+  'dark pastel':             (-64 -65) (-69 -24) (-67 -44) (-50 -56) (-36 -55),
+  'greyish dark':            (-95 -55) (-93 -26) (-94 -42) (-92 -58) (-82 -68),
+  'greyish lighter':         (-87 60) (-25 82) (-85 45) (-85 25) (-84 12),
+  'shiny':                   (0 0) (0 63) (0 43) (0 -14) (0 -35),
+  'full colors':             (0 0) (0 38) (0 22) (0 -22) (0 -40),
+  'darker colors':           (-12 -28) (-27 18) (-23 -6) (0 -43) (0 -59),
+  'darker neon':             (-10 -38) (-2 -8) (-11 -22) (0 -59) (0 -77),
+  'dark':                    (0 -60) (-6 -75) (0 -70) (0 -40) (0 -19),
+  'deep colors':             (0 -78) (0 -83) (-8 -72) (0 -55) (0 -35),
+  'greyish medium dark':     (-96 -29) (-90 -8) (-95 -40) (-94 -52) (-92 -66),
+  'greyish lightest':        (0 96) (0 77) (0 85) (0 92) (-67 74)
+);

data/templates/project/manifest.rb

@@ -0,0 +1,2 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet 'screen.scss', media: 'screen, projection'

data/templates/project/screen.scss

@@ -0,0 +1,3 @@
+// This is where you put the contents of the main stylesheet for the user's project.
+// It should import your sass stylesheets and demonstrate how to use them.
+@import 'sass-color-schemes';

metadata

@@ -0,0 +1,81 @@
+--- !ruby/object:Gem::Specification
+name: sass-color-schemes
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Patrick Baselier
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-04-27 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+- !ruby/object:Gem::Dependency
+  name: color-schemer
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.2.8
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.2.8
+description: Makes it easy to use color schemes in your web pages by providing a collection
+  of colors based on one (base-) color which is supplemented with additional colors
+  to make the best visual impression.
+email:
+- patrick.baselier@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/sass-color-schemes.rb
+- stylesheets/_mixins.scss
+- stylesheets/_sass-color-schemes.scss
+- stylesheets/_variables.scss
+- templates/project/manifest.rb
+- templates/project/screen.scss
+homepage: https://github.com/bazzel/sass-color-schemes
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: Use color schemes in your web pages the easy way
+test_files: []