sass-color-schemes 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c45992fb58c248552b0e307edb7bb64adf379a5e
-  data.tar.gz: 7c9f0cd191151f4b9da95f454e635ae8b3b8f672
+  metadata.gz: 602932356004da4a84eb9afb690a0ffe090ffa6e
+  data.tar.gz: 34a40ee6445ef408e7db31a9711bd26196bd0957
 SHA512:
-  metadata.gz: f8a9be5b1d5e0c47c6a2fdfc80c4e7d6eb98863a1934815464fc5396cc8d1459c05eeb3e1349ce9de9485614c6073f8065b95d6ce36e0c9c87391f8c35f8bc39
-  data.tar.gz: 575990604cea78ccd5f9fbb477f6d21a165e98f164c566ee12e7961546b688eea13521701170dfd4d9454c38766b0a015a9fd6fb40b41e3cd3aa638786ff9b78
+  metadata.gz: 2aaa6871fa8e8e4f7a4c8c5119d483d1005406df13a6566d44580ac0fabff44f5ff00ab1537d129c08132aa75064928094217b03d9e1f75ce5976de3c70e633b
+  data.tar.gz: 392d9a4c3187aaa4957dd865a5265c5b5c356b4f9647af2ea688d695d56f71c38656948b6f28635a136fa277931e00ce8e32b9138275d5c350a099f6a5a49a0c

data/README.md

@@ -249,6 +249,36 @@ $sass-color-schemes: (
 
 ```
 
+### Test your color scheme
+
+The `scs-test` mixin adds a bar to the top of your page displaying all the colors that your color scheme provides:
+
+```
+$sass-color-schemes: (
+  base-color: #2980B9,
+  variation:  'tetrad'
+);
+
+@include scs-test;
+```
+
+![image](img/scss-test.png)
+
+`scs-test` accepts the following arguments:
+
+#### `$height`
+
+The height of the colored bar.
+
+Defaults to `2em`.
+
+#### `$selector`
+
+The selector that will contain the colored bar.
+
+Defaults to `body::after`.
+
+
 ### Full example
 
 ```

data/stylesheets/_mixins.scss

@@ -1,94 +1,4 @@
-@function primary-colors() {
-  @return _compose-shades(_base-color());
-}
+@import './mixins/getters';
+@import './mixins/colors';
+@import './mixins/sample';
 
-@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($_scs-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;
-}
-
-@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/mixins/_colors.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($_scs-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/mixins/_getters.scss

@@ -0,0 +1,27 @@
+@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/mixins/_sample.scss

@@ -0,0 +1,29 @@
+@mixin scs-test($height: 2em, $element: 'body:before') {
+  $colors: primary-colors();
+  $colors: join($colors, compact(complement-colors()));
+  $colors: join($colors, compact(secondary-1-colors()));
+  $colors: join($colors, compact(secondary-2-colors()));
+
+  #{$element} {
+    content: "";
+    display: block;
+    height: $height;
+    @include background(_scs-stripes(left, ($colors)));
+    position: relative;
+    z-index: 999999999999;
+    @include box-shadow(rgba(black, 0.23) 0 3px 10px, rgba(black, 0.16) 0 3px 10px);
+  }
+};
+
+@function _scs-stripes($position, $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);
+};

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sass-color-schemes
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Patrick Baselier
@@ -52,6 +52,9 @@ files:
 - stylesheets/_mixins.scss
 - stylesheets/_sass-color-schemes.scss
 - stylesheets/_variables.scss
+- stylesheets/mixins/_colors.scss
+- stylesheets/mixins/_getters.scss
+- stylesheets/mixins/_sample.scss
 - templates/project/manifest.rb
 - templates/project/screen.scss
 homepage: https://github.com/bazzel/sass-color-schemes