colord - npm Package Compare versions

Comparing version 2.6.0 to 2.7.0

CHANGELOG.md

@@ -0,1 +1,5 @@
+### 2.7.0
+
+- Improve `mix` plugin by adding new `tints`, `tones` and `shades` methods ❤️ [@EricRovell](https://github.com/EricRovell)
+
 ### 2.6.0
@@ -2,0 +6,0 @@

package.json

 {
   "name": "colord",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "👑 A tiny yet powerful tool for high-performance color manipulations and conversions",
@@ -5,0 +5,0 @@ "keywords": [

plugins/mix.d.ts

@@ -9,8 +9,20 @@ import { AnyColor } from "../types";
         mix(color2: AnyColor | Colord, ratio?: number): Colord;
+        /**
+         * Generates a tints palette based on original color.
+         */
+        tints(count?: number): Colord[];
+        /**
+         * Generates a shades palette based on original color.
+         */
+        shades(count?: number): Colord[];
+        /**
+         * Generates a tones palette based on original color.
+         */
+        tones(count?: number): Colord[];
     }
 }
 /**
- * A plugin adding a color mixing utility.
+ * A plugin adding a color mixing utilities.
  */
 declare const mixPlugin: Plugin;
 export default mixPlugin;

plugins/mix.js

@@ -1,1 +0,1 @@
-var a=function(a,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),a>n?n:a>t?a:t},t=function(a){var t=a/255;return t<.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},n=function(a){return 255*(a>.0031308?1.055*Math.pow(a,1/2.4)-.055:12.92*a)},r=96.422,o=100,u=82.521,e=function(t){var r,o,u={x:.9555766*(r=t).x+-.0230393*r.y+.0631636*r.z,y:-.0282895*r.x+1.0099416*r.y+.0210077*r.z,z:.0122982*r.x+-.020483*r.y+1.3299098*r.z};return o={r:n(.032404542*u.x-.015371385*u.y-.004985314*u.z),g:n(-.00969266*u.x+.018760108*u.y+41556e-8*u.z),b:n(556434e-9*u.x-.002040259*u.y+.010572252*u.z),a:t.a},{r:a(o.r,0,255),g:a(o.g,0,255),b:a(o.b,0,255),a:a(o.a)}},h=function(n){var e=t(n.r),h=t(n.g),i=t(n.b);return function(t){return{x:a(t.x,0,r),y:a(t.y,0,o),z:a(t.z,0,u),a:a(t.a)}}(function(a){return{x:1.0478112*a.x+.0228866*a.y+-.050127*a.z,y:.0295424*a.x+.9904844*a.y+-.0170491*a.z,z:-.0092345*a.x+.0150436*a.y+.7521316*a.z,a:a.a}}({x:100*(.4124564*e+.3575761*h+.1804375*i),y:100*(.2126729*e+.7151522*h+.072175*i),z:100*(.0193339*e+.119192*h+.9503041*i),a:n.a}))},i=216/24389,l=24389/27,x=function(a){var t=h(a),n=t.x/r,e=t.y/o,x=t.z/u;return n=n>i?Math.cbrt(n):(l*n+16)/116,{l:116*(e=e>i?Math.cbrt(e):(l*e+16)/116)-16,a:500*(n-e),b:200*(e-(x=x>i?Math.cbrt(x):(l*x+16)/116)),alpha:t.a}},p=function(t,n,h){var p,y=x(t),b=x(n);return function(a){var t=(a.l+16)/116,n=a.a/500+t,h=t-a.b/200;return e({x:(Math.pow(n,3)>i?Math.pow(n,3):(116*n-16)/l)*r,y:(a.l>8?Math.pow((a.l+16)/116,3):a.l/l)*o,z:(Math.pow(h,3)>i?Math.pow(h,3):(116*h-16)/l)*u,a:a.alpha})}({l:a((p={l:y.l*(1-h)+b.l*h,a:y.a*(1-h)+b.a*h,b:y.b*(1-h)+b.b*h,alpha:y.alpha*(1-h)+b.alpha*h}).l,0,400),a:p.a,b:p.b,alpha:a(p.alpha)})};module.exports=function(a){a.prototype.mix=function(t,n){void 0===n&&(n=.5);var r=t instanceof a?t:new a(t),o=p(this.toRgb(),r.toRgb(),n);return new a(o)}};
+var t=function(t,a,n){return void 0===a&&(a=0),void 0===n&&(n=1),t>n?n:t>a?t:a},a=function(t){var a=t/255;return a<.04045?a/12.92:Math.pow((a+.055)/1.055,2.4)},n=function(t){return 255*(t>.0031308?1.055*Math.pow(t,1/2.4)-.055:12.92*t)},r=96.422,o=100,u=82.521,e=function(a){var r,o,u={x:.9555766*(r=a).x+-.0230393*r.y+.0631636*r.z,y:-.0282895*r.x+1.0099416*r.y+.0210077*r.z,z:.0122982*r.x+-.020483*r.y+1.3299098*r.z};return o={r:n(.032404542*u.x-.015371385*u.y-.004985314*u.z),g:n(-.00969266*u.x+.018760108*u.y+41556e-8*u.z),b:n(556434e-9*u.x-.002040259*u.y+.010572252*u.z),a:a.a},{r:t(o.r,0,255),g:t(o.g,0,255),b:t(o.b,0,255),a:t(o.a)}},i=function(n){var e=a(n.r),i=a(n.g),p=a(n.b);return function(a){return{x:t(a.x,0,r),y:t(a.y,0,o),z:t(a.z,0,u),a:t(a.a)}}(function(t){return{x:1.0478112*t.x+.0228866*t.y+-.050127*t.z,y:.0295424*t.x+.9904844*t.y+-.0170491*t.z,z:-.0092345*t.x+.0150436*t.y+.7521316*t.z,a:t.a}}({x:100*(.4124564*e+.3575761*i+.1804375*p),y:100*(.2126729*e+.7151522*i+.072175*p),z:100*(.0193339*e+.119192*i+.9503041*p),a:n.a}))},p=216/24389,h=24389/27,f=function(t){var a=i(t),n=a.x/r,e=a.y/o,f=a.z/u;return n=n>p?Math.cbrt(n):(h*n+16)/116,{l:116*(e=e>p?Math.cbrt(e):(h*e+16)/116)-16,a:500*(n-e),b:200*(e-(f=f>p?Math.cbrt(f):(h*f+16)/116)),alpha:a.a}},c=function(a,n,i){var c,y=f(a),x=f(n);return function(t){var a=(t.l+16)/116,n=t.a/500+a,i=a-t.b/200;return e({x:(Math.pow(n,3)>p?Math.pow(n,3):(116*n-16)/h)*r,y:(t.l>8?Math.pow((t.l+16)/116,3):t.l/h)*o,z:(Math.pow(i,3)>p?Math.pow(i,3):(116*i-16)/h)*u,a:t.alpha})}({l:t((c={l:y.l*(1-i)+x.l*i,a:y.a*(1-i)+x.a*i,b:y.b*(1-i)+x.b*i,alpha:y.alpha*(1-i)+x.alpha*i}).l,0,400),a:c.a,b:c.b,alpha:t(c.alpha)})};module.exports=function(t){function a(t,a,n){void 0===n&&(n=5);for(var r=[],o=1/(n-1),u=0;u<=n-1;u++)r.push(t.mix(a,o*u));return r}t.prototype.mix=function(a,n){void 0===n&&(n=.5);var r=a instanceof t?a:new t(a),o=c(this.toRgb(),r.toRgb(),n);return new t(o)},t.prototype.tints=function(t){return a(this,"#fff",t)},t.prototype.shades=function(t){return a(this,"#000",t)},t.prototype.tones=function(t){return a(this,"#808080",t)}};

README.md

@@ -507,2 +507,53 @@ <div align="center">
 <details>
+  <summary><b><code>.tints(count = 5)</code></b> (<b>mix</b> plugin)</summary>
+
+Provides functionality to generate [tints](https://en.wikipedia.org/wiki/Tints_and_shades) of a color. Returns an array of `Colord` instances, including the original color.
+
+```js
+import { colord, extends } from "colord";
+import mixPlugin from "colord/plugins/mix";
+
+extend([mixPlugin]);
+
+const color = colord("#ff0000");
+color.tints(3).map((c) => c.toHex()); // ["#ff0000", "#ff9f80", "#ffffff"];
+```
+
+</details>
+
+<details>
+  <summary><b><code>.shades(count = 5)</code></b> (<b>mix</b> plugin)</summary>
+
+Provides functionality to generate [shades](https://en.wikipedia.org/wiki/Tints_and_shades) of a color. Returns an array of `Colord` instances, including the original color.
+
+```js
+import { colord, extends } from "colord";
+import mixPlugin from "colord/plugins/mix";
+
+extend([mixPlugin]);
+
+const color = colord("#ff0000");
+color.shades(3).map((c) => c.toHex()); // ["#ff0000", "#7a1b0b", "#000000"];
+```
+
+</details>
+
+<details>
+  <summary><b><code>.tones(count = 5)</code></b> (<b>mix</b> plugin)</summary>
+
+Provides functionality to generate [tones](https://en.wikipedia.org/wiki/Tints_and_shades) of a color. Returns an array of `Colord` instances, including the original color.
+
+```js
+import { colord, extends } from "colord";
+import mixPlugin from "colord/plugins/mix";
+
+extend([mixPlugin]);
+
+const color = colord("#ff0000");
+color.tones(3).map((c) => c.toHex()); // ["#ff0000", "#c86147", "#808080"];
+```
+
+</details>
+
+<details>
   <summary><b><code>.harmonies(type = "complementary")</code></b> (<b>harmonies</b> plugin)</summary>
@@ -815,5 +866,5 @@
 <details>
-  <summary><b><code>mix</code> (Color mixing)</b> <i>0.9 KB</i></summary>
+  <summary><b><code>mix</code> (Color mixing)</b> <i>0.96 KB</i></summary>
 
-A plugin adding a color mixing utility.
+A plugin adding a color mixing utilities.
 
@@ -836,2 +887,15 @@ In contrast to other libraries that perform RGB values mixing, Colord mixes colors through [LAB color space](https://en.wikipedia.org/wiki/CIELAB_color_space). This approach produces better results and doesn't have the drawbacks the legacy way has.
 
+Also, the plugin provides special mixtures such as [tints, shades, and tones](https://en.wikipedia.org/wiki/Tints_and_shades):
+
+<div align="center">
+<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tint-tone-shade.svg/320px-Tint-tone-shade.svg.png" alt="tints, shades, and tones mixtures" />
+</div>
+
+```js
+const color = colord("#ff0000");
+color.tints(3).map((c) => c.toHex()); // ["#ff0000", "#ff9f80", "#ffffff"];
+color.shades(3).map((c) => c.toHex()); // ["#ff0000", "#7a1b0b", "#000000"];
+color.tones(3).map((c) => c.toHex()); // ["#ff0000", "#c86147", "#808080"];
+```
+
 </details>
@@ -838,0 +902,0 @@

No alert changes

Improved metrics

Total package byte prevSize

104815

increased by3.14%

Lines of code

607

increased by2.36%

Number of lines in readme file

984

increased by6.96%

No dependency changes