sass-color-schemes 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 092075af671c7f8422c9d5d4d5958787d5086436
-  data.tar.gz: 4567e52a8b37a22edeba60bc81a096ea3723491d
+  metadata.gz: c45992fb58c248552b0e307edb7bb64adf379a5e
+  data.tar.gz: 7c9f0cd191151f4b9da95f454e635ae8b3b8f672
 SHA512:
-  metadata.gz: be61f2ba4994195ffb0d0b069e5ff13aa25cbc455026a435d514aaca150a6876199fec0fd68a6baed7826d25a1da6121cf9a4659c1a64e6c4698ef75a626ebb5
-  data.tar.gz: d4db49a72db0ba1fe0b65552a0faef393b75fc46015fc337fa5b829981f70a1eea07c9a51352bae469ec32596f4792b096cc95aaff9460a81cd7216fb223dfe1
+  metadata.gz: f8a9be5b1d5e0c47c6a2fdfc80c4e7d6eb98863a1934815464fc5396cc8d1459c05eeb3e1349ce9de9485614c6073f8065b95d6ce36e0c9c87391f8c35f8bc39
+  data.tar.gz: 575990604cea78ccd5f9fbb477f6d21a165e98f164c566ee12e7961546b688eea13521701170dfd4d9454c38766b0a015a9fd6fb40b41e3cd3aa638786ff9b78

data/README.md

@@ -23,13 +23,13 @@ Or install it yourself as:
 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.
-    
+See [`$sass-color-schemes` variable](#sass-color-schemes-variable) for a description of the different types.
+
 #### 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:
@@ -47,7 +47,7 @@ $color-primary-1: nth(primary-colors(), 2);
   color: $color-primary-1;
 }
 
-``` 
+```
 
 #### complement-colors
 
@@ -83,24 +83,50 @@ $color-secondary-2-1: nth(secondary-2-colors(), 2);
 ```
 **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
+### `$sass-color-schemes` variable
+
+You can (and might want to) configure sass-color-schemes to customize the color scheme. For this you need to define the `$sass-color-schemes` map variable, which contains one or more of the following keys:
 
-You can (and might want to) define several variables to customize the color scheme.
+* [base-color](#base-color-key)
+* [scheme](#scheme-key)
+* [complement](#complement-key)
+* [angle](#angle-key)
+* [variation](#variation-key)
+* [mode](#mode-key)
 
-#### $base-color
+```
+$sass-color-schemes: (
+  base-color: red,
+  scheme: 'monochromatic',
+  // ... etc.
+);
+
+```
 
-The color used as a base color to calculate the shades and all other colors. This can be any Sass color.
+#### `base-color` key
+
+The color used as a base color to calculate the shades and all other colors. This can be any [Sass color](http://sass-lang.com/documentation/Sass/Script/Value/Color.html).
 
 Defaults to `#ff0000` (red).
 
 ```
-$base-color: red;
-$base-color: hsl(0deg, 100%, 50%);
-$base-color: #ff0000;
-// ... etc.
+$sass-color-schemes: (
+  base-color: red,
+  // ... etc.
+);
+
+$sass-color-schemes: (
+  base-color: hsl(0deg, 100%, 50%),
+  // ... etc.
+);
+
+$sass-color-schemes: (
+  base-color: #ff0000,
+  // ... etc.
+);
 ```
 
-#### $scheme
+#### `scheme` key
 
 Sass-color-schemes supports 4 different color schemes:
 
@@ -112,37 +138,55 @@ Sass-color-schemes supports 4 different color schemes:
 Defaults to `'monochromatic'`.
 
 ```
-$scheme: 'monochromatic';
-$scheme: 'tetrad';
-// ... etc.
-
+$sass-color-schemes: (
+  scheme: 'monochromatic',
+  // ... etc.
+);
+
+$sass-color-schemes: (
+  scheme: 'tetrad',
+  // ... etc.
+);
 ```
 
-#### $complement
+#### `complement` key
 
 If set to `true`, the `complement-colors` function returns shades of the complementary color of the `$base-color`.
 
-Defaults to `false`.
+Defaults to `true`.
 
 ```
-$complement: true;
-$complement: false;
+$sass-color-schemes: (
+  complement: false,
+  // ... etc.
+);
 
 ```
 
-#### $angle
+#### `angle` key
 
 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;
+$sass-color-schemes: (
+  angle: 30,
+  // ... etc.
+);
+
+$sass-color-schemes: (
+  angle: 30deg,
+  // ... etc.
+);
+
+$sass-color-schemes: (
+  angle: 0.5236rad,
+  // ... etc.
+);
 ```
 
-#### $variation
+#### `variation` key
 
 This will vary the tints, tones and shades of the colors returned by all functions. Currently Sass-color-schemes supports 24 variations:
 
@@ -171,40 +215,49 @@ This will vary the tints, tones and shades of the colors returned by all functio
 * greyish medium dark
 * greyish lightest
 
-Defaults to `full colors`.
+Defaults to `default`.
 
 ```
-$variation: 'darker pale pastel';
-$variation: 'shiny';
-// ... etc.
+$sass-color-schemes: (
+  variation: 'darker pale pastel',
+  // ... etc.
+);
+
+$sass-color-schemes: (
+  variation: 'shiny',
+  // ... etc.
+);
 
 ```
 
-#### $mode
+#### `mode` key
 
 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.
+These modes are used internally when calculating colors. RYB is primarily used in art and design education.
 
 Defaults to `ryb`.
 
 ```
-$mode: 'rgb';
-$mode: 'ryb';
+$sass-color-schemes: (
+  mode: 'rgb',
+  // ... etc.
+);
 
 ```
 
 ### Full example
 
 ```
-$base-color:          #6893A6;
-$variation:           'shiny';
-$scheme:              'adjacent';
-$angle:               25;
-$complement:          true;
+$sass-color-schemes: (
+  base-color:         #6893A6,
+  variation:          'shiny',
+  scheme:             'adjacent',
+  angle:              25
+);
 
 $color-primary-0:     nth(primary-colors(), 1);
 $color-primary-1:     nth(primary-colors(), 2);

data/stylesheets/_mixins.scss

@@ -1,9 +1,9 @@
 @function primary-colors() {
-  @return _compose-shades($base-color);
+  @return _compose-shades(_base-color());
 }
 
 @function complement-colors() {
-  @if ($complement == false) and ($scheme != 'tetrad') {
+  @if (_complement() == false) and (_scheme() != 'tetrad') {
     @return _empty-array();
   }
 
@@ -11,20 +11,20 @@
 }
 
 @function secondary-1-colors() {
-  @if ($scheme == 'triad') {
-    @return _compose-color(180 - $angle);
-  } @else if ($scheme == 'adjacent') or ($scheme == 'tetrad') {
-    @return _compose-color($angle);
+  @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);
+  @if (_scheme() == 'triad') or (_scheme() == 'tetrad') {
+    @return _compose-color(180 + _angle());
+  } @else if (_scheme() == 'adjacent') {
+    @return _compose-color(-_angle());
   } @else {
     @return _empty-array();
   }
@@ -36,11 +36,11 @@
 }
 
 @function _adjust-hue($angle) {
-  @return if($mode == 'ryb', ryb-adjust-hue($base-color, $angle), adjust-hue($base-color, $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);
+  $shades: map-get($_scs-variations, _variation());
 
   $colors: ();
   @for $i from 1 through 5 {
@@ -64,3 +64,31 @@
   }
   @return $arr;
 }
+
+@function _base-color() {
+  @return _fetch('base-color', $_scs-base-color);
+}
+
+@function _variation() {
+  @return _fetch('variation', $_scs-variation);
+}
+
+@function _scheme() {
+  @return _fetch('scheme', $_scs-scheme);
+}
+
+@function _mode() {
+  @return _fetch('mode', $_scs-mode);
+}
+
+@function _angle() {
+  @return _fetch('angle', $_scs-angle);
+}
+
+@function _complement() {
+  @return _fetch('complement', $_scs-complement);
+}
+
+@function _fetch($key, $default) {
+  @return if(map-has-key($sass-color-schemes, $key), map-get($sass-color-schemes, $key), $default);
+}

data/stylesheets/_variables.scss

@@ -1,11 +1,14 @@
-$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;
+$sass-color-schemes: () !default;
 
-$variations: (
+$_scs-base-color:  green !default;
+$_scs-variation:   'default' !default;
+$_scs-scheme:      'monochromatic' !default;  // monochromatic, adjacent, triad, tetrad
+$_scs-mode:        'ryb' !default; // rgb, ryb
+$_scs-angle:       30deg !default;
+$_scs-complement:  true !default;
+
+$_scs-variations: (
+  'default':                 (0 0) (16 68) (9 36) (12 -24) (32 -44),
   '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),

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sass-color-schemes
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Patrick Baselier