sass-color-helpers 2.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: aa4987f5606b1e6bb34404ab346bab84369b2de4
+  data.tar.gz: 6e9215bcb8698b72fb50812b3002aeca6cba5282
+SHA512:
+  metadata.gz: 34c4fb8e574d78285158af0dacc2d892a05dc1d1302e1ec4ab28af17d8686cbb551737ac1ca3b91c410551877548177d4a369338e60f6eb6f50d23b62b42be6d
+  data.tar.gz: ee01068dfcc395679af181e0d88d706387bcf1364ca53d2aa83ee4b0c946567570c94c8d5bce326bcfff05a57c66c99a278be2ba59c8617bd90ce7eaf9953591

data/README.md

@@ -0,0 +1,110 @@
+# Sass Color Helpers
+
+Pure Sass, no Ruby. Should therefore be [libsass](http://libsass.org/) compatible. Also available as a Compass extension for those who still want that.
+
+A collection of color helpers (and some related math helpers). Handles HSL to HSV/HSB conversion, calculation of contrast (and warnings for worst case scenarios) and estimation of semi-transparent colors – everything to make it easier and more fool-proof to implement a target design and in the end get as good of a design as possible.
+
+Lastly also some candy for the geeks: nth root and decimal exponent powers function. Because graphics can be tough.
+
+## Installation
+
+**Bower**:
+
+```bash
+bower install sass-color-helpers --save
+```
+
+Then either manually include the individual helpers from the `stylesheets/` folder or set the load path of something like [grunt-contrib-sass](https://npmjs.org/package/grunt-contrib-sass) to look for files in the bower folder – or use something like [grunt-bower-install](https://www.npmjs.org/package/grunt-bower-install) to automate it all.
+
+**Compass**:
+
+Install as a Compass extension through ruby gems: `gem install sass-color-helpers`
+
+## Helpers
+
+### Alpha Picker / Estimation
+
+```scss
+$alpha: ch-calculate-alpha(#FFF, #526D4E, #DFE4DF);
+$actionColor: ch-calculate-top-color($alpha, #BEDBA1, #89D338);
+```
+
+Originaly published at: https://gist.github.com/voxpelli/8452877
+
+#### Methods:
+
+* `ch-calculate-alpha($topColor, $bottomColor, $targetColor)` – to calculate an alpha from a defined color and colors picked from a reference image
+* `ch-calculate-top-color($alpha, $bottomColor, $targetColor)` – to calculate a color from a defined alpha and colors picked from a reference image
+
+### Contrast
+
+```scss
+$contrast: ch-color-contrast($backgroundColor, $textColor);
+
+@if ($contrast < 3) {
+  @warn "Contrast ratio of #{$textColor} on #{$backgroundColor} is pretty bad, just #{$contrast}";
+}
+```
+
+Originally published at: https://gist.github.com/voxpelli/6304812
+
+Based on code from: https://github.com/LeaVerou/contrast-ratio
+
+#### Methods:
+
+* `ch-color-contrast($color1, $color2)` – when given a background color and a front color it returns the [contrast ratio](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef) between those two
+* `ch-best-color-contrast($base, $colors, $tolerance: 0)` – when given a background color and a list of front colors it will return the first front color with the best contrast ratio. If tolerance is set to something higher than 0 than a front color later in the list will only beat a previous color if it improves the contrast ratio  by at least that much – useful if one has a preferably color that one wants to use in all but the most extreme cases.
+
+### HSV/HSB to HSL
+
+```scss
+$hsv: ch-color-to-hsv($color);
+
+$v: nth($hsv, 3);
+$s: nth($hsv, 2);
+$h: nth($hsv, 1);
+
+$v: max(0%, min(100%, $v + $tweak));
+
+$color: ch-hsv-to-color($h, $s, $v);
+```
+
+Originally published at: https://gist.github.com/voxpelli/1069204
+
+Based on code from: http://ariya.blogspot.com/2008/07/converting-between-hsl-and-hsv.html
+
+#### Methods:
+
+* `ch-hsv-to-hsl($h, $s: 0, $v: 0)` – transforms a hsv value given by either individual parameters, or by a list as the first parameter, to a list of hsl values
+* `ch-hsl-to-hsv($h, $ss: 0, $ll: 0)` – transforms a hsl value given by either individual parameters, a list values as the first parameter or as a color as the first parameter, to a list of hsv values
+* `ch-color-to-hsv($color)` – alias for `ch-hsl-to-hsv($color)`
+* `ch-hsv-to-color($h, $s: 0, $v: 0)` – shorthand for a `ch-hsv-to-hsl($h, $s, $v)` followed by a `hsl()` transforming the hsl values to a color
+* `ch-brightness($h, $s: 0, $v: 0, $adjustment: 0)` – shorthand for changing the brightness of a color. If first argument is either a list of hsv values or a color then the second argument is the adjustment to apply. Otherwise the first threee arguments are the individal hsv values and the adjustment the fourth argument.
+
+### Math
+
+Originally published at: https://gist.github.com/voxpelli/6304812
+
+Based on code from: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript and http://rosettacode.org/wiki/Nth_root#JavaScript
+
+#### Methods:
+
+* `ch-pow($base, $exponent, $prec: 12)` – calculates $base raised to the power of $exponent where $exponent can be a decimal number – and if so, $prec defines the precision of the calculation
+* `ch-nth-root($num, $n: 2, $prec: 12)` – calculates the nth root of a number with the defined precision. Used by `ch-pow()`.
+* `ch-gcd($a, $b)` – finds the greatest common divisor between the two values
+* `ch-max($v1, $v2)` – returns the biggest of the two values
+* `ch-min($v1, $v2)` – returns the smaller of the two values
+
+## License
+
+MIT, [http://voxpelli.mit-license.org](http://voxpelli.mit-license.org)
+
+## Changelog
+
+### 2.0.0
+
+* Repackaged as a Compass extension so that the code can be installed through either Compass or Bower (or manually)
+
+### 1.0.0
+
+* First packaged version of the scripts. They were previously published as gists on GitHub over a period of time.

data/lib/sass-color-helpers.rb

@@ -0,0 +1,11 @@
+# Based on https://github.com/Team-Sass/Compass-Extension-Template
+
+require 'compass'
+
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('sass-color-helpers', :path => extension_path)
+
+module SassColorHelpers
+  VERSION = "2.0.0"
+  DATE = "2014-06-16"
+end

data/stylesheets/_color-helpers.scss

@@ -0,0 +1,4 @@
+@import 'color-helpers/math';
+@import 'color-helpers/alpha-pick';
+@import 'color-helpers/contrast';
+@import 'color-helpers/hsv-hsl';

data/stylesheets/color-helpers/_alpha-pick.scss

@@ -0,0 +1,25 @@
+@function ch-calculate-alpha($topColor, $bottomColor, $targetColor) {
+  $topRgb: red($topColor), green($topColor), blue($topColor);
+  $bottomRgb: red($bottomColor), green($bottomColor), blue($bottomColor);
+  $targetRgb: red($targetColor), green($targetColor), blue($targetColor);
+  $alphaAvg: 0;
+
+  @for $i from 1 through 3 {
+    $alphaAvg: ($alphaAvg * ($i - 1) + (nth($targetRgb, $i) - nth($bottomRgb, $i)) / (nth($topRgb, $i) - nth($bottomRgb, $i))) / $i;
+  }
+
+  @return $alphaAvg;
+}
+
+@function ch-calculate-top-color($alpha, $bottomColor, $targetColor) {
+  $topRgb: ();
+  $bottomRgb: red($bottomColor), green($bottomColor), blue($bottomColor);
+  $targetRgb: red($targetColor), green($targetColor), blue($targetColor);
+
+  @for $i from 1 through 3 {
+    $topRgb: append($topRgb, (nth($targetRgb, $i) - (1 - $alpha) * nth($bottomRgb, $i)) / $alpha);
+  }
+
+  @return rgb(nth($topRgb, 1), nth($topRgb, 2), nth($topRgb, 3));
+}
+

data/stylesheets/color-helpers/_contrast.scss

@@ -0,0 +1,53 @@
+@function ch-color-luminance($color) {
+  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+  $rgba: red($color), green($color), blue($color);
+  $rgba2: ();
+
+  @for $i from 1 through 3 {
+    $rgb: nth($rgba, $i);
+    $rgb: $rgb / 255;
+
+    $rgb: if($rgb < .03928, $rgb / 12.92, ch-pow(($rgb + .055) / 1.055, 2.4));
+
+    $rgba2: append($rgba2, $rgb);
+  }
+
+  @return .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
+}
+
+@function ch-color-contrast($color1, $color2) {
+  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+  $luminance1: ch-color-luminance($color1) + .05;
+  $luminance2: ch-color-luminance($color2) + .05;
+  $ratio: $luminance1 / $luminance2;
+
+  @if $luminance2 > $luminance1 {
+    $ratio: 1 / $ratio;
+  }
+
+  $ratio: round($ratio * 10) / 10;
+
+  @return $ratio;
+}
+
+@function ch-best-color-contrast($base, $colors, $tolerance: 0) {
+  $best: nth($colors, 1);
+  $contrast: ch-color-contrast($base, $best);
+
+  @for $i from 2 through length($colors) {
+    $currentColor: nth($colors, $i);
+    $currentContrast: ch-color-contrast($base, $currentColor);
+    @if ($currentContrast - $contrast > $tolerance) {
+      $best: $currentColor;
+      $contrast: $currentContrast;
+    }
+  }
+
+  @if ($contrast < 3) {
+    @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}";
+  }
+
+  @return $best;
+}

data/stylesheets/color-helpers/_hsv-hsl.scss

@@ -0,0 +1,98 @@
+// Ported from http://ariya.blogspot.com/2008/07/converting-between-hsl-and-hsv.html
+
+@function ch-hsv-to-hsl($h, $s: 0, $v: 0) {
+  @if type_of($h) == 'list' {
+    $v: nth($h, 3);
+    $s: nth($h, 2);
+    $h: nth($h, 1);
+  }
+
+  @if unit($h) == 'deg' {
+    $h: 3.1415 * 2 * ($h / 360deg);
+  }
+  @if unit($s) == '%' {
+    $s: 0 + ($s / 100%);
+  }
+  @if unit($v) == '%' {
+    $v: 0 + ($v / 100%);
+  }
+
+  $ss: $s * $v;
+  $ll: (2 - $s) * $v;
+
+  @if ($ll == 2 or $ll == 0) {
+    $ss: 0;
+  } @else if $ll <= 1 {
+    $ss: $ss / $ll;
+  } @else {
+    $ss: $ss / (2 - $ll);
+  }
+
+  $ll: $ll / 2;
+
+  @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $ss))), percentage(max(0, min(1, $ll)));
+}
+
+@function ch-hsl-to-hsv($h, $ss: 0, $ll: 0) {
+  @if type_of($h) == 'list' {
+    $ll: nth($h, 3);
+    $ss: nth($h, 2);
+    $h: nth($h, 1);
+  } @else if type_of($h) == 'color' {
+    $ll: lightness($h);
+    $ss: saturation($h);
+    $h: hue($h);
+  }
+
+  @if unit($h) == 'deg' {
+    $h: 3.1415 * 2 * ($h / 360deg);
+  }
+  @if unit($ss) == '%' {
+    $ss: 0 + ($ss / 100%);
+  }
+  @if unit($ll) == '%' {
+    $ll: 0 + ($ll / 100%);
+  }
+
+  $ll: $ll * 2;
+
+  @if $ll <= 1 {
+    $ss: $ss * $ll;
+  } @else {
+    $ss: $ss * (2 - $ll);
+  }
+
+  $v: ($ll + $ss) / 2;
+
+  $s: 0;
+  @if $ll + $ss != 0 {
+    $s: (2 * $ss) / ($ll + $ss);
+  }
+
+  @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $s))), percentage(max(0, min(1, $v)));
+}
+
+@function ch-color-to-hsv($color) {
+  @return ch-hsl-to-hsv($color);
+}
+
+@function ch-hsv-to-color($h, $s: 0, $v: 0) {
+  $hsl: ch-hsv-to-hsl($h, $s, $v);
+  @return hsl(nth($hsl, 1), nth($hsl, 2), nth($hsl, 3));
+}
+
+@function ch-brightness($h, $s: 0, $v: 0, $adjustment: 0) {
+  @if type_of($h) == 'color' {
+    $h: ch-color-to-hsv($h);
+  }
+  @if type_of($h) == 'list' {
+    $adjustment: $s;
+    $v: nth($h, 3);
+    $s: nth($h, 2);
+    $h: nth($h, 1);
+  }
+
+  $v: ch-max(0%, ch-min(100%, $v + $adjustment));
+
+  @return ch-hsv-to-color($h, $s, $v);
+}

data/stylesheets/color-helpers/_math.scss

@@ -0,0 +1,50 @@
+@function ch-max($v1, $v2) {
+  @return if($v1 > $v2, $v1, $v2);
+}
+
+@function ch-min($v1, $v2) {
+  @return if($v1 < $v2, $v1, $v2);
+}
+
+@function ch-gcd($a, $b) {
+  // From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
+  @if ($b != 0) {
+    @return ch-gcd($b, $a % $b);
+  } @else {
+    @return abs($a);
+  }
+}
+
+@function ch-pow($base, $exponent, $prec: 12) {
+  // Handles decimal exponents by trying to convert them into a fraction and then use a nthRoot-algorithm for parts of the calculation
+  @if (floor($exponent) != $exponent) {
+    $prec2 : ch-pow(10, $prec);
+    $exponent: round($exponent * $prec2);
+    $denominator: ch-gcd($exponent, $prec2);
+    @return ch-nth-root(ch-pow($base, $exponent / $denominator), $prec2 / $denominator, $prec);
+  }
+
+  $value: $base;
+  @if $exponent > 1 {
+    @for $i from 2 through $exponent {
+      $value: $value * $base;
+    }
+  } @else if $exponent < 1 {
+    @for $i from 0 through -$exponent {
+      $value: $value / $base;
+    }
+  }
+
+  @return $value;
+}
+
+@function ch-nth-root($num, $n: 2, $prec: 12) {
+  // From: http://rosettacode.org/wiki/Nth_root#JavaScript
+  $x: 1;
+
+  @for $i from 0 through $prec {
+    $x: 1 / $n * (($n - 1) * $x + ($num / ch-pow($x, $n - 1)));
+  }
+
+  @return $x;
+}

metadata

@@ -0,0 +1,79 @@
+--- !ruby/object:Gem::Specification
+name: sass-color-helpers
+version: !ruby/object:Gem::Version
+  version: 2.0.0
+platform: ruby
+authors:
+- Pelle Wessman
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-06-16 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.12.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.12.1
+description: Sass Color Helpers
+email:
+- pelle@kodfabrik.se
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/sass-color-helpers.rb
+- stylesheets/_color-helpers.scss
+- stylesheets/color-helpers/_alpha-pick.scss
+- stylesheets/color-helpers/_contrast.scss
+- stylesheets/color-helpers/_hsv-hsl.scss
+- stylesheets/color-helpers/_math.scss
+homepage: https://github.com/voxpelli/sass-color-helpers
+licenses: []
+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: 1.3.6
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: A collection of Sass color helpers (and some related math helpers) to make
+  it easier and more fool-proof to implement a target design.
+test_files: []