tinycolor2 - npm Package Compare versions

Comparing version 0.10.0 to 1.0.0

component.json

 {
   "name": "tinycolor",
-  "version": "0.10.0",
-  "main": ["./tinycolor.js"],
-  "dependencies": {
-
-  }
-}
+  "repository": "bgrins/TinyColor",
+  "version": "1.0.0",
+  "main": "tinycolor.js",
+  "scripts": ["tinycolor.js"],
+  "license": "MIT"
+}

package.json

 {
-  "version": "0.10.0",
+  "version": "1.0.0",
   "name": "tinycolor2",
@@ -4,0 +4,0 @@ "description": "Fast Color Parsing and Manipulation",

README.md

 # TinyColor
 
-## JavaScript color parsing
+## JavaScript color tooling
 
-Fast, small color manipulation and conversion for JavaScript.  TinyColor is allows many forms of input, while providing color conversions and other color utility functions.  It has no dependancies.
+TinyColor is a small, fast library for color manipulation and conversion in JavaScript.  It allows many forms of input, while providing color conversions and other color utility functions.  It has no dependencies.
 
@@ -11,2 +11,8 @@ [![Build Status](https://travis-ci.org/bgrins/TinyColor.png?branch=master)](https://travis-ci.org/bgrins/TinyColor)
 
+Download [tinycolor.js](https://raw.githubusercontent.com/bgrins/TinyColor/master/tinycolor.js) or install it with bower:
+
+    bower install tinycolor
+
+Then just include it in the page in a `script` tag:
+
     <script type='text/javascript' src='tinycolor.js'></script>
@@ -106,2 +112,22 @@ <script type='text/javascript'>
 
+### isLight
+
+Return a boolean indicating whether the color's perceived brightness is light.
+
+    var color1 = tinycolor("#fff");
+    color1.isLight(); // true
+
+    var color2 = tinycolor("#000");
+    color2.isLight(); // false
+
+### isDark
+
+Return a boolean indicating whether the color's perceived brightness is dark.
+
+    var color1 = tinycolor("#fff");
+    color1.isDark(); // false
+
+    var color2 = tinycolor("#000");
+    color2.isDark(); // true
+
 ### getAlpha
@@ -120,2 +146,12 @@
 
+### getBrightness
+
+Returns the perceived brightness of a color, from `0-255`.
+
+    var color1 = tinycolor("#fff");
+    color1.getBrightness(); // 255
+
+    var color2 = tinycolor("#000");
+    color2.getBrightness(); // 0
+
 ### setAlpha
@@ -214,41 +250,134 @@
 
-## Color Utilities
+### Color Modification
 
-    tinycolor.equals(color1, color2)
+These methods manipulate the current color, and return it for chaining.  For instance:
 
-### Color Modification
+    tinycolor("red").lighten().desaturate().toHexString() // "#f53d3d"
 
-Modification functions may take an `amount` variable from 0 - 100, indicating how much the effect should be applied.
+### lighten
 
-    tinycolor.lighten(color, amount = 10)
-    tinycolor.darken(color, amount = 10)
-    tinycolor.desaturate(color, amount = 10)
-    tinycolor.saturate(color, amount = 10)
-    tinycolor.greyscale(color)
+`lighten: function(amount = 10) -> TinyColor`.  Lighten the color a given amount, from 0 to 100.  Providing 100 will always return white.
 
+    tinycolor("#f00").lighten().toString(); // "#ff3333"
+    tinycolor("#f00").lighten(100).toString(); // "#ffffff"
+
+### brighten
+
+`brighten: function(amount = 10) -> TinyColor`.  Brighten the color a given amount, from 0 to 100.
+
+    tinycolor("#f00").brighten().toString(); // "#ff1919"
+
+### darken
+
+`darken: function(amount = 10) -> TinyColor`.  Darken the color a given amount, from 0 to 100.  Providing 100 will always return black.
+
+    tinycolor("#f00").darken().toString(); // "#cc0000"
+    tinycolor("#f00").darken(100).toString(); // "#000000"
+
+### desaturate
+
+`desaturate: function(amount = 10) -> TinyColor`.  Desaturate the color a given amount, from 0 to 100.  Providing 100 will is the same as calling `greyscale`.
+
+    tinycolor("#f00").desaturate().toString(); // "#f20d0d"
+    tinycolor("#f00").desaturate(100).toString(); // "#808080"
+
+### saturate
+
+`saturate: function(amount = 10) -> TinyColor`.  Saturate the color a given amount, from 0 to 100.
+
+    tinycolor("hsl(0, 10%, 50%)").saturate().toString(); // "hsl(0, 20%, 50%)"
+
+### greyscale
+
+`greyscale: function() -> TinyColor`.  Completely desaturates a color into greyscale.  Same as calling `desaturate(100)`.
+
+    tinycolor("#f00").greyscale().toString(); // "#808080"
+
+### spin
+
+`spin: function(amount = 0) -> TinyColor`.  Spin the hue a given amount, from -360 to 360.  Calling with 0, 360, or -360 will do nothing (since it sets the hue back to what it was before).
+
+    tinycolor("#f00").spin(180).toString(); // "#00ffff"
+    tinycolor("#f00").spin(-90).toString(); // "#7f00ff"
+    tinycolor("#f00").spin(90).toString(); // "#80ff00"
+
+    // spin(0) and spin(360) do nothing
+    tinycolor("#f00").spin(0).toString(); // "#ff0000"
+    tinycolor("#f00").spin(360).toString(); // "#ff0000"
+
 ### Color Combinations
 
-Combination functions return an Array of TinyColor objects.
+Combination functions return an array of TinyColor objects unless otherwise noted.
 
-    tinycolor.analogous(color, results = 6, slices = 30)
-    tinycolor.complement(color)
-    tinycolor.monochromatic(color, results = 6)
-    tinycolor.splitcomplements(color)
-    tinycolor.triad(color)
-    tinycolor.tetrad(color)
+### analogous
 
-### Readability
+`analogous: function(, results = 6, slices = 30) -> array<TinyColor>`.
 
-Analyze 2 colors and returns an object with the following properties.  `brightness` is difference in brightness between the two colors.  `color`: difference in color/hue between the two colors.
+    var colors = tinycolor("#f00").analogous();
 
-    tinycolor.readability(color1, color2);
+    colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#ff0066", "#ff0033", "#ff0000", "#ff3300", "#ff6600" ]
 
-Ensure that foreground and background color combinations provide sufficient contrast.
+### monochromatic
 
-    tinycolor.readable(color1, color2);
+`monochromatic: function(, results = 6) -> array<TinyColor>`.
 
+    var colors = tinycolor("#f00").monochromatic();
+
+    colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#2a0000", "#550000", "#800000", "#aa0000", "#d40000" ]
+
+### splitcomplement
+
+`splitcomplement: function() -> array<TinyColor>`.
+
+    var colors = tinycolor("#f00").splitcomplement();
+
+    colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#ccff00", "#0066ff" ]
+
+### triad
+
+`triad: function() -> array<TinyColor>`.
+
+    var colors = tinycolor("#f00").triad();
+
+    colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#00ff00", "#0000ff" ]
+
+### tetrad
+
+`tetrad: function() -> array<TinyColor>`.
+
+    var colors = tinycolor("#f00").tetrad();
+
+    colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#80ff00", "#00ffff", "#7f00ff" ]
+
+
+### complement
+
+`complement: function() -> TinyColor`.
+
+    tinycolor("#f00").complement().toHexString(); // "#00ffff"
+
+## Color Utilities
+
+    tinycolor.equals(color1, color2)
+    tinycolor.mix(color1, color2, amount = 50)
+
+### readability
+
+`readable: function(TinyColor, TinyColor) -> Object`.  Analyze 2 colors and returns an object with the following properties.  `brightness` is difference in brightness between the two colors.  `color`: difference in color/hue between the two colors.
+
+    tinycolor.readability("#000", "#111"); // {brightness: 17, color: 51}
+    tinycolor.readability("#000", "#fff"); // {brightness: 255, color: 765}
+
+### isReadable
+
+`isReadable: function(TinyColor, TinyColor) -> Boolean`.  Ensure that foreground and background color combinations provide sufficient contrast.
+
+    tinycolor.isReadable("#000", "#111"); // false
+
+### mostReadable
+
 Given a base color and a list of possible foreground or background colors for that base, returns the most readable color.
 
-    tinycolor.mostReadable(baseColor, colorList);
+    tinycolor.mostReadable("#000", ["#f00", "#0f0", "#00f"]).toHexString(); // "#00ff00"
 
 See [index.html](https://github.com/bgrins/TinyColor/blob/master/index.html) in the project for a demo.

test/test.js

@@ -34,3 +34,2 @@
 module("Color translations");
-
 test("Color Equality", function() {
@@ -62,2 +61,3 @@ for (var i = 0; i < conversions.length; i++) {
 
+
 module("Ratio Parsing");
@@ -76,9 +76,7 @@ test("With Ratio", function() {
   equal (tinycolor("rgb .1 .1 .1").toHexString(), "#000000", "000000");
-
 });
 
+
 module("String Parsing");
-
 test("RGB Text Parsing", function() {
-
   equal (tinycolor("rgb 255 0 0").toHexString(), "#ff0000", "spaced input");
@@ -105,7 +103,5 @@ equal (tinycolor("rgb(255, 0, 0)").toHexString(), "#ff0000", "parenthesized input");
   ok (tinycolor.equals(tinycolor({r:200, g: 100, b: 0 }), "rgb 200 100 0"));
-
 });
 
 test("Percentage RGB Text Parsing", function() {
-
   equal (tinycolor("rgb 100% 0% 0%").toHexString(), "#ff0000", "spaced input");
@@ -132,3 +128,2 @@ equal (tinycolor("rgb(100%, 0%, 0%)").toHexString(), "#ff0000", "parenthesized input");
   ok (tinycolor.equals(tinycolor({r:"90%", g: "45%", b: "0%" }), "rgb 90% 45% 0%"));
-
 });
@@ -146,5 +141,3 @@
 
-
 test("Hex Parsing", function() {
-
   equal (tinycolor("rgb 255 0 0").toHexString(), "#ff0000");
@@ -158,10 +151,7 @@ equal (tinycolor("rgb 255 0 0").toHexString(true), "#f00");
   equal (tinycolor("rgba 255 0 0 0.5").toHex8(), "80ff0000");
-
 });
 
 test("HSV Parsing", function() {
-
   equal (tinycolor("hsv 251.1 0.887 .918").toHsvString(), "hsv(251, 89%, 92%)");
   equal (tinycolor("hsv 251.1 0.887 0.918").toHsvString(), "hsv(251, 89%, 92%)");
-
 });
@@ -322,2 +312,3 @@
 
+
 module("Alpha handling");
@@ -342,2 +333,5 @@ test("Invalid alpha should normalize to 1", function() {
 
+  equal(redNamed.getFormat(), "name", "getFormat() is correct");
+  equal(redHex.getFormat(), "hex", "getFormat() is correct");
+
   equal (redNamed.toString(), "rgba(255, 0, 0, 0.5)", "Names should default to rgba if alpha is < 1");
@@ -355,9 +349,12 @@ equal (redHex.toString(), "rgba(255, 0, 0, 0.5)", "Hex should default to rgba if alpha is < 1");
   equal (transparentNamed.toString(), "transparent", "Named color should equal transparent if alpha == 0");
+
+  redHex.setAlpha(0);
+  equal (redHex.toString(), "rgba(255, 0, 0, 0)", "Hex should default to rgba if alpha is = 0");
 });
 
 test("setting alpha", function() {
-
   var hexSetter = tinycolor("rgba(255, 0, 0, 1)");
   equal (hexSetter.getAlpha(), 1, "Alpha should start as 1");
-  hexSetter.setAlpha(.9);
+  var returnedFromSetAlpha = hexSetter.setAlpha(.9);
+  equal (returnedFromSetAlpha, hexSetter, "setAlpha return value should be the color.");
   equal (hexSetter.getAlpha(), .9, "setAlpha should change alpha value");
@@ -378,3 +375,2 @@ hexSetter.setAlpha(.5);
   equal (hexSetter.getAlpha(), 1, "setAlpha with invalid value should be bound to 1");
-
 });
@@ -388,2 +384,48 @@
 
+
+module("Brightness handling");
+test("getBrightness", function() {
+    equal(tinycolor('#000').getBrightness(), 0, 'returns 0 for #000');
+    equal(tinycolor('#fff').getBrightness(), 255, 'returns 255 for #fff');
+});
+
+test("isDark returns true/false for dark/light colors", function() {
+    equal(tinycolor('#000').isDark(), true, '#000 is dark');
+    equal(tinycolor('#111').isDark(), true, '#111 is dark');
+    equal(tinycolor('#222').isDark(), true, '#222 is dark');
+    equal(tinycolor('#333').isDark(), true, '#333 is dark');
+    equal(tinycolor('#444').isDark(), true, '#444 is dark');
+    equal(tinycolor('#555').isDark(), true, '#555 is dark');
+    equal(tinycolor('#666').isDark(), true, '#666 is dark');
+    equal(tinycolor('#777').isDark(), true, '#777 is dark');
+    equal(tinycolor('#888').isDark(), false, '#888 is not dark');
+    equal(tinycolor('#999').isDark(), false, '#999 is not dark');
+    equal(tinycolor('#aaa').isDark(), false, '#aaa is not dark');
+    equal(tinycolor('#bbb').isDark(), false, '#bbb is not dark');
+    equal(tinycolor('#ccc').isDark(), false, '#ccc is not dark');
+    equal(tinycolor('#ddd').isDark(), false, '#ddd is not dark');
+    equal(tinycolor('#eee').isDark(), false, '#eee is not dark');
+    equal(tinycolor('#fff').isDark(), false, '#fff is not dark');
+});
+
+test("isLight returns true/false for light/dark colors", function() {
+    equal(tinycolor('#000').isLight(), false, '#000 is not light');
+    equal(tinycolor('#111').isLight(), false, '#111 is not light');
+    equal(tinycolor('#222').isLight(), false, '#222 is not light');
+    equal(tinycolor('#333').isLight(), false, '#333 is not light');
+    equal(tinycolor('#444').isLight(), false, '#444 is not light');
+    equal(tinycolor('#555').isLight(), false, '#555 is not light');
+    equal(tinycolor('#666').isLight(), false, '#666 is not light');
+    equal(tinycolor('#777').isLight(), false, '#777 is not light');
+    equal(tinycolor('#888').isLight(), true, '#888 is light');
+    equal(tinycolor('#999').isLight(), true, '#999 is light');
+    equal(tinycolor('#aaa').isLight(), true, '#aaa is light');
+    equal(tinycolor('#bbb').isLight(), true, '#bbb is light');
+    equal(tinycolor('#ccc').isLight(), true, '#ccc is light');
+    equal(tinycolor('#ddd').isLight(), true, '#ddd is light');
+    equal(tinycolor('#eee').isLight(), true, '#eee is light');
+    equal(tinycolor('#fff').isLight(), true, '#fff is light');
+});
+
+
 module("Initialization from tinycolor output");
@@ -411,2 +453,3 @@ test("HSL Object", function() {
 });
+
 test("HSV String", function() {
@@ -433,2 +476,3 @@ for (var i = 0; i < conversions.length; i++) {
 });
+
 test("RGB Object", function() {
@@ -441,2 +485,3 @@ for (var i = 0; i < conversions.length; i++) {
 });
+
 test("RGB String", function() {
@@ -449,2 +494,3 @@ for (var i = 0; i < conversions.length; i++) {
 });
+
 test("PRGB Object", function() {
@@ -463,2 +509,3 @@ for (var i = 0; i < conversions.length; i++) {
 });
+
 test("PRGB String", function() {
@@ -477,2 +524,3 @@ for (var i = 0; i < conversions.length; i++) {
 });
+
 test("Object", function() {
@@ -488,3 +536,2 @@ for (var i = 0; i < conversions.length; i++) {
 module("Utilities");
-
 test("Color equality", function() {
@@ -501,9 +548,15 @@ ok (tinycolor.equals("#ff0000", "#ff0000"), "Same hex");
 });
-
-test("Readability", function () {
-    ok (tinycolor.readable("#000000", "#ffffff"), "white/black is readable");
-    ok (!tinycolor.readable("#FF0088", "#8822AA"), "pink on pink is not readable");
-    equal (tinycolor.mostReadable("#000", ["#111", "#222"]).toHexString(), "#222222", "pick most readable color");
-    equal (tinycolor.mostReadable("#f00", ["#d00", "#0d0"]).toHexString(), "#00dd00", "pick most readable color");
+test("isReadable", function() {
+  ok (tinycolor.isReadable("#000000", "#ffffff"), "white/black is readable");
+  ok (!tinycolor.isReadable("#FF0088", "#8822AA"), "pink on pink is not readable");
 });
+test("readability", function() {
+  // XXX: Need tests for readability
+  deepEqual(tinycolor.readability("#000", "#111"), {brightness: 17, color: 51}, "Readability 1");
+  deepEqual(tinycolor.readability("#000", "#fff"), {brightness: 255, color: 765}, "Readability 2");
+});
+test("mostReadable", function () {
+  equal (tinycolor.mostReadable("#000", ["#111", "#222"]).toHexString(), "#222222", "pick most readable color");
+  equal (tinycolor.mostReadable("#f00", ["#d00", "#0d0"]).toHexString(), "#00dd00", "pick most readable color");
+});
 
@@ -522,2 +575,4 @@ test("Filters", function () {
 
+module("Modifications");
+
 /* Originally generated with:
@@ -531,36 +586,99 @@ var results = [];
 var LIGHTENS = ["ff0000","ff0505","ff0a0a","ff0f0f","ff1414","ff1a1a","ff1f1f","ff2424","ff2929","ff2e2e","ff3333","ff3838","ff3d3d","ff4242","ff4747","ff4d4d","ff5252","ff5757","ff5c5c","ff6161","ff6666","ff6b6b","ff7070","ff7575","ff7a7a","ff8080","ff8585","ff8a8a","ff8f8f","ff9494","ff9999","ff9e9e","ffa3a3","ffa8a8","ffadad","ffb3b3","ffb8b8","ffbdbd","ffc2c2","ffc7c7","ffcccc","ffd1d1","ffd6d6","ffdbdb","ffe0e0","ffe5e5","ffebeb","fff0f0","fff5f5","fffafa","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff"];
+var BRIGHTENS = ["ff0000","ff0303","ff0505","ff0808","ff0a0a","ff0d0d","ff0f0f","ff1212","ff1414","ff1717","ff1919","ff1c1c","ff1f1f","ff2121","ff2424","ff2626","ff2929","ff2b2b","ff2e2e","ff3030","ff3333","ff3636","ff3838","ff3b3b","ff3d3d","ff4040","ff4242","ff4545","ff4747","ff4a4a","ff4c4c","ff4f4f","ff5252","ff5454","ff5757","ff5959","ff5c5c","ff5e5e","ff6161","ff6363","ff6666","ff6969","ff6b6b","ff6e6e","ff7070","ff7373","ff7575","ff7878","ff7a7a","ff7d7d","ff7f7f","ff8282","ff8585","ff8787","ff8a8a","ff8c8c","ff8f8f","ff9191","ff9494","ff9696","ff9999","ff9c9c","ff9e9e","ffa1a1","ffa3a3","ffa6a6","ffa8a8","ffabab","ffadad","ffb0b0","ffb2b2","ffb5b5","ffb8b8","ffbaba","ffbdbd","ffbfbf","ffc2c2","ffc4c4","ffc7c7","ffc9c9","ffcccc","ffcfcf","ffd1d1","ffd4d4","ffd6d6","ffd9d9","ffdbdb","ffdede","ffe0e0","ffe3e3","ffe5e5","ffe8e8","ffebeb","ffeded","fff0f0","fff2f2","fff5f5","fff7f7","fffafa","fffcfc","ffffff"];
 var DARKENS = ["ff0000","fa0000","f50000","f00000","eb0000","e60000","e00000","db0000","d60000","d10000","cc0000","c70000","c20000","bd0000","b80000","b30000","ad0000","a80000","a30000","9e0000","990000","940000","8f0000","8a0000","850000","800000","7a0000","750000","700000","6b0000","660000","610000","5c0000","570000","520000","4d0000","470000","420000","3d0000","380000","330000","2e0000","290000","240000","1f0000","190000","140000","0f0000","0a0000","050000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000"];
 
-test("Combinations", function () {
+test("Modifications", function () {
   for (var i = 0; i <= 100; i++) {
-    equal (tinycolor.desaturate("red", i).toHex(), DESATURATIONS[i], "Desaturation " + i + " works");
+    equal (tinycolor("red").desaturate(i).toHex(), DESATURATIONS[i], "Desaturation " + i + " works");
   }
   for (var i = 0; i <= 100; i++) {
-    equal (tinycolor.saturate("red", i).toHex(), SATURATIONS[i], "Saturation " + i + " works");
+    equal (tinycolor("red").saturate(i).toHex(), SATURATIONS[i], "Saturation " + i + " works");
   }
   for (var i = 0; i <= 100; i++) {
-    equal (tinycolor.lighten("red", i).toHex(), LIGHTENS[i], "Lighten " + i + " works");
+    equal (tinycolor("red").lighten(i).toHex(), LIGHTENS[i], "Lighten " + i + " works");
   }
   for (var i = 0; i <= 100; i++) {
-    equal (tinycolor.darken("red", i).toHex(), DARKENS[i], "Darken " + i + " works");
+    equal (tinycolor("red").brighten(i).toHex(), BRIGHTENS[i], "Brighter " + i + " works");
   }
+  for (var i = 0; i <= 100; i++) {
+    equal (tinycolor("red").darken(i).toHex(), DARKENS[i], "Darken " + i + " works");
+  }
 
+  equal (tinycolor("red").greyscale().toHex(), "808080", "Greyscale works");
+});
 
-  equal (tinycolor.greyscale("red").toHex(), "808080", "Greyscale works")
-  equal (tinycolor.complement("red").toHex(), "00ffff", "Complement works");
+test("Spin", function () {
+    equal (Math.round(tinycolor("#f00").spin(-1234).toHsl().h), 206, "Spinning -1234 works");
+    equal (Math.round(tinycolor("#f00").spin(-360).toHsl().h), 0, "Spinning -360 works");
+    equal (Math.round(tinycolor("#f00").spin(-120).toHsl().h), 240, "Spinning -120 works");
+    equal (Math.round(tinycolor("#f00").spin(0).toHsl().h), 0, "Spinning 0 works");
+    equal (Math.round(tinycolor("#f00").spin(10).toHsl().h), 10, "Spinning 10 works");
+    equal (Math.round(tinycolor("#f00").spin(360).toHsl().h), 0, "Spinning 360 works");
+    equal (Math.round(tinycolor("#f00").spin(2345).toHsl().h), 185, "Spinning 2345 works");
 });
 
+test("Mix", function () {
+    // amount 0 or none
+    equal(tinycolor.mix('#000', '#fff').toHsl().l, 0.5, "Mixing without amount works");
+    equal(tinycolor.mix('#f00', '#000', 0).toHex(), 'ff0000', "Mixing with 0 amount works");
 
-/* Too slow: 1677731 possibilities
-asyncTest("Ajax load", function() {
+    // black and white
+    for (var i = 0; i < 100; i++) {
+        equal(Math.round(tinycolor.mix('#000', '#fff', i).toHsl().l * 100) / 100, i / 100, "Mixing black and white with " + i + " amount works");
+    }
 
-  $.get("allhex.txt", function(d) {
-    var hex = d.split('\n');
-    for (var i = 0, l = hex.length; i < l; i++) {
-      ok (tinycolor(hex[i]).toHex(), hex[i]);
+    // with colors
+    for (var i = 0; i < 100; i++) {
+        var new_hex = Math.round(255 * (1 - (i / 100))).toString(16);
+
+        if (new_hex.length === 1) {
+            new_hex = '0' + new_hex;
+        }
+
+        equal(tinycolor.mix('#f00', '#000', i).toHex(),  new_hex + '0000', "Mixing " + i + " (red channel)");
+        equal(tinycolor.mix('#0f0', '#000', i).toHex(),  '00' + new_hex + '00', "Mixing " + i + " (green channel)");
+        equal(tinycolor.mix('#00f', '#000', i).toHex(),  '0000' + new_hex, "Mixing " + i + " (blue channel)");
+        equal(tinycolor.mix(tinycolor('transparent'), '#000', i).toRgb().a, i / 100, "Mixing " + i + " (alpha channel)");
     }
-    console.log(hex.length);
-      start();
-  });
 });
-*/
+
+
+// The combination tests need to be expanded further
+module("Combinations");
+
+function colorsToHexString(colors) {
+  return colors.map(function(c) {
+    return c.toHex();
+  }).join(",");
+}
+
+test("complement", function() {
+  var complementDoesntModifyInstance = tinycolor("red");
+  equal (complementDoesntModifyInstance.complement().toHex(), "00ffff", "Complement works");
+  equal (complementDoesntModifyInstance.toHex(), "ff0000", "Complement did not modify this color");
+});
+
+test("analogous", function() {
+  var combination = tinycolor("red").analogous();
+  equal(colorsToHexString(combination), "ff0000,ff0066,ff0033,ff0000,ff3300,ff6600", "Correct Combination");
+});
+
+test("monochromatic", function() {
+  var combination = tinycolor("red").monochromatic();
+  equal(colorsToHexString(combination), "ff0000,2a0000,550000,800000,aa0000,d40000", "Correct Combination");
+});
+
+test("splitcomplement", function() {
+  var combination = tinycolor("red").splitcomplement();
+  equal(colorsToHexString(combination), "ff0000,ccff00,0066ff", "Correct Combination");
+});
+
+test("triad", function() {
+  var combination = tinycolor("red").triad();
+  equal(colorsToHexString(combination), "ff0000,00ff00,0000ff", "Correct Combination");
+});
+
+test("tetrad", function() {
+  var combination = tinycolor("red").tetrad();
+  equal(colorsToHexString(combination), "ff0000,80ff00,00ffff,7f00ff", "Correct Combination");
+});

tinycolor.js

@@ -1,4 +0,4 @@
-// TinyColor v0.10.0
+// TinyColor v1.0.0
 // https://github.com/bgrins/TinyColor
-// 2013-08-10, Brian Grinstead, MIT License
+// Brian Grinstead, MIT License
 
@@ -52,11 +52,25 @@ (function() {
 tinycolor.prototype = {
+    isDark: function() {
+        return this.getBrightness() < 128;
+    },
+    isLight: function() {
+        return !this.isDark();
+    },
     isValid: function() {
         return this._ok;
     },
+    getFormat: function() {
+        return this._format;
+    },
     getAlpha: function() {
         return this._a;
     },
+    getBrightness: function() {
+        var rgb = this.toRgb();
+        return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+    },
     setAlpha: function(value) {
         this._a = boundAlpha(value);
         this._roundA = mathRound(100*this._a) / 100;
+        return this;
     },
@@ -141,6 +155,11 @@ toHsv: function() {
         var formattedString = false;
-        var hasAlphaAndFormatNotSet = !formatSet && this._a < 1 && this._a > 0;
-        var formatWithAlpha = hasAlphaAndFormatNotSet && (format === "hex" || format === "hex6" || format === "hex3" || format === "name");
+        var hasAlpha = this._a < 1 && this._a >= 0;
+        var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "name");
 
-        if (formatWithAlpha) {
+        if (needsAlphaFormat) {
+            // Special case for "transparent", all other non-alpha formats
+            // will return rgba when there is transparency.
+            if (format === "name" && this._a === 0) {
+                return this.toName();
+            }
             return this.toRgbString();
@@ -174,2 +193,54 @@ }
         return formattedString || this.toHexString();
+    },
+
+    _applyModification: function(fn, args) {
+        var color = fn.apply(null, [this].concat([].slice.call(args)));
+        this._r = color._r;
+        this._g = color._g;
+        this._b = color._b;
+        this.setAlpha(color._a);
+        return this;
+    },
+    lighten: function() {
+        return this._applyModification(lighten, arguments);
+    },
+    brighten: function() {
+        return this._applyModification(brighten, arguments);
+    },
+    darken: function() {
+        return this._applyModification(darken, arguments);
+    },
+    desaturate: function() {
+        return this._applyModification(desaturate, arguments);
+    },
+    saturate: function() {
+        return this._applyModification(saturate, arguments);
+    },
+    greyscale: function() {
+        return this._applyModification(greyscale, arguments);
+    },
+    spin: function() {
+        return this._applyModification(spin, arguments);
+    },
+
+    _applyCombination: function(fn, args) {
+        return fn.apply(null, [this].concat([].slice.call(args)));
+    },
+    analogous: function() {
+        return this._applyCombination(analogous, arguments);
+    },
+    complement: function() {
+        return this._applyCombination(complement, arguments);
+    },
+    monochromatic: function() {
+        return this._applyCombination(monochromatic, arguments);
+    },
+    splitcomplement: function() {
+        return this._applyCombination(splitcomplement, arguments);
+    },
+    triad: function() {
+        return this._applyCombination(triad, arguments);
+    },
+    tetrad: function() {
+        return this._applyCombination(tetrad, arguments);
     }
@@ -456,3 +527,3 @@ };
 
-tinycolor.desaturate = function (color, amount) {
+function desaturate(color, amount) {
     amount = (amount === 0) ? 0 : (amount || 10);
@@ -463,4 +534,5 @@ var hsl = tinycolor(color).toHsl();
     return tinycolor(hsl);
-};
-tinycolor.saturate = function (color, amount) {
+}
+
+function saturate(color, amount) {
     amount = (amount === 0) ? 0 : (amount || 10);
@@ -471,7 +543,9 @@ var hsl = tinycolor(color).toHsl();
     return tinycolor(hsl);
-};
-tinycolor.greyscale = function(color) {
-    return tinycolor.desaturate(color, 100);
-};
-tinycolor.lighten = function(color, amount) {
+}
+
+function greyscale(color) {
+    return tinycolor(color).desaturate(100);
+}
+
+function lighten (color, amount) {
     amount = (amount === 0) ? 0 : (amount || 10);
@@ -482,5 +556,15 @@ var hsl = tinycolor(color).toHsl();
     return tinycolor(hsl);
-};
-tinycolor.darken = function (color, amount) {
+}
+
+function brighten(color, amount) {
     amount = (amount === 0) ? 0 : (amount || 10);
+    var rgb = tinycolor(color).toRgb();
+    rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100))));
+    rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100))));
+    rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100))));
+    return tinycolor(rgb);
+}
+
+function darken (color, amount) {
+    amount = (amount === 0) ? 0 : (amount || 10);
     var hsl = tinycolor(color).toHsl();
@@ -490,10 +574,13 @@ hsl.l -= amount / 100;
     return tinycolor(hsl);
-};
-tinycolor.complement = function(color) {
+}
+
+// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
+// Values outside of this range will be wrapped into this range.
+function spin(color, amount) {
     var hsl = tinycolor(color).toHsl();
-    hsl.h = (hsl.h + 180) % 360;
+    var hue = (mathRound(hsl.h) + amount) % 360;
+    hsl.h = hue < 0 ? 360 + hue : hue;
     return tinycolor(hsl);
-};
+}
 
-
 // Combination Functions
@@ -504,4 +591,10 @@ // ---------------------
 
-tinycolor.triad = function(color) {
+function complement(color) {
     var hsl = tinycolor(color).toHsl();
+    hsl.h = (hsl.h + 180) % 360;
+    return tinycolor(hsl);
+}
+
+function triad(color) {
+    var hsl = tinycolor(color).toHsl();
     var h = hsl.h;
@@ -513,4 +606,5 @@ return [
     ];
-};
-tinycolor.tetrad = function(color) {
+}
+
+function tetrad(color) {
     var hsl = tinycolor(color).toHsl();
@@ -524,4 +618,5 @@ var h = hsl.h;
     ];
-};
-tinycolor.splitcomplement = function(color) {
+}
+
+function splitcomplement(color) {
     var hsl = tinycolor(color).toHsl();
@@ -534,4 +629,5 @@ var h = hsl.h;
     ];
-};
-tinycolor.analogous = function(color, results, slices) {
+}
+
+function analogous(color, results, slices) {
     results = results || 6;
@@ -549,4 +645,5 @@ slices = slices || 30;
     return ret;
-};
-tinycolor.monochromatic = function(color, results) {
+}
+
+function monochromatic(color, results) {
     results = results || 6;
@@ -564,2 +661,37 @@ var hsv = tinycolor(color).toHsv();
     return ret;
+}
+
+// Utility Functions
+// ---------------------
+
+tinycolor.mix = function(color1, color2, amount) {
+    amount = (amount === 0) ? 0 : (amount || 50);
+
+    var rgb1 = tinycolor(color1).toRgb();
+    var rgb2 = tinycolor(color2).toRgb();
+
+    var p = amount / 100;
+    var w = p * 2 - 1;
+    var a = rgb2.a - rgb1.a;
+
+    var w1;
+
+    if (w * a == -1) {
+        w1 = w;
+    } else {
+        w1 = (w + a) / (1 + w * a);
+    }
+
+    w1 = (w1 + 1) / 2;
+
+    var w2 = 1 - w1;
+
+    var rgba = {
+        r: rgb2.r * w1 + rgb1.r * w2,
+        g: rgb2.g * w1 + rgb1.g * w2,
+        b: rgb2.b * w1 + rgb1.b * w2,
+        a: rgb2.a * p  + rgb1.a * (1 - p)
+    };
+
+    return tinycolor(rgba);
 };
@@ -577,10 +709,12 @@
 tinycolor.readability = function(color1, color2) {
-    var a = tinycolor(color1).toRgb();
-    var b = tinycolor(color2).toRgb();
-    var brightnessA = (a.r * 299 + a.g * 587 + a.b * 114) / 1000;
-    var brightnessB = (b.r * 299 + b.g * 587 + b.b * 114) / 1000;
+    var c1 = tinycolor(color1);
+    var c2 = tinycolor(color2);
+    var rgb1 = c1.toRgb();
+    var rgb2 = c2.toRgb();
+    var brightnessA = c1.getBrightness();
+    var brightnessB = c2.getBrightness();
     var colorDiff = (
-        Math.max(a.r, b.r) - Math.min(a.r, b.r) +
-        Math.max(a.g, b.g) - Math.min(a.g, b.g) +
-        Math.max(a.b, b.b) - Math.min(a.b, b.b)
+        Math.max(rgb1.r, rgb2.r) - Math.min(rgb1.r, rgb2.r) +
+        Math.max(rgb1.g, rgb2.g) - Math.min(rgb1.g, rgb2.g) +
+        Math.max(rgb1.b, rgb2.b) - Math.min(rgb1.b, rgb2.b)
     );
@@ -598,4 +732,4 @@
 // *Example*
-//    tinycolor.readable("#000", "#111") => false
-tinycolor.readable = function(color1, color2) {
+//    tinycolor.isReadable("#000", "#111") => false
+tinycolor.isReadable = function(color1, color2) {
     var readability = tinycolor.readability(color1, color2);
@@ -602,0 +736,0 @@ return readability.brightness > 125 && readability.color > 500;

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

380

increased by51.39%

Worsened metrics

Total package byte prevSize

655503

decreased by-24.77%

Number of package files

17

decreased by-10.53%

Lines of code

11974

decreased by-37.09%

No dependency changes