colord - npm Package Compare versions

Comparing version 1.4.0 to 1.4.1

CHANGELOG.md

@@ -0,1 +1,5 @@
+### 1.4.1
+
+- Mix colors through CIE LAB color space
+
 ### 1.4.0
@@ -2,0 +6,0 @@

package.json

 {
   "name": "colord",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "👑 A tiny yet powerful tool for high-performance color manipulations and conversions",
@@ -20,3 +20,4 @@ "keywords": [
     "color-names",
-    "a11y"
+    "a11y",
+    "mix"
   ],
@@ -23,0 +24,0 @@ "repository": "omgovich/colord",

plugins/mix.d.ts

@@ -6,6 +6,3 @@ import { AnyColor } from "../types";
         /**
-         * Produces a mixture of two colors through LCH color space.
-         * Returns the result (a new Colord instance) of mixing them.
-         * The logic is ported from new `color-mix` function in CSS.
-         * https://drafts.csswg.org/css-color-5/#funcdef-color-mix
+         * Produces a mixture of two colors through CIE LAB color space and returns a new Colord instance.
          */
@@ -17,6 +14,4 @@ mix(color2: AnyColor | Colord, ratio?: number): Colord;
  * A plugin adding a color mixing utility.
- * The logic is ported from new `color-mix` function in CSS.
- * https://www.w3.org/TR/css-color-5/#colormix
  */
 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=Math.pow(10,t)),Math.round(n*a)/n},t=function(a,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),a>n?n:a>t?a:t},n=function(a){var t=a/255;return t<.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},r=function(a){return 255*(a>.0031308?1.055*Math.pow(a,1/2.4)-.055:12.92*a)},o=96.422,h=100,u=82.521,c=function(a){var n,o=function(a){return{x:.9555766*a.x+-.0230393*a.y+.0631636*a.z,y:-.0282895*a.x+1.0099416*a.y+.0210077*a.z,z:.0122982*a.x+-.020483*a.y+1.3299098*a.z,a:a.a}}(a),h=o.x/100,u=o.y/100,c=o.z/100;return n={r:r(3.2404542*h-1.5371385*u-.4985314*c),g:r(-.969266*h+1.8760108*u+.041556*c),b:r(.0556434*h-.2040259*u+1.0572252*c),a:o.a},{r:t(n.r,0,255),g:t(n.g,0,255),b:t(n.b,0,255),a:t(n.a)}},i=function(a){var r=n(a.r),c=n(a.g),i=n(a.b);return function(a){return{x:t(a.x,0,o),y:t(a.y,0,h),z:t(a.z,0,u),a:t(a.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*r+.3575761*c+.1804375*i),y:100*(.2126729*r+.7151522*c+.072175*i),z:100*(.0193339*r+.119192*c+.9503041*i),a:a.a}))},e=216/24389,M=24389/27,l=function(t){var n=function(a){var t=i(a),n=t.x/o,r=t.y/h,c=t.z/u;return n=n>e?Math.cbrt(n):(M*n+16)/116,{l:116*(r=r>e?Math.cbrt(r):(M*r+16)/116)-16,a:500*(n-r),b:200*(r-(c=c>e?Math.cbrt(c):(M*c+16)/116)),alpha:t.a}}(t),r=a(n.a,3)+0,c=a(n.b,3)+0,l=Math.atan2(c,r)/Math.PI*180;return{l:n.l,c:Math.sqrt(r*r+c*c),h:l<0?l+360:l,a:n.alpha}},x=function(a){return t={l:a.l,a:a.c*Math.cos(a.h*Math.PI/180),b:a.c*Math.sin(a.h*Math.PI/180),alpha:a.a},r=t.a/500+(n=(t.l+16)/116),i=n-t.b/200,c({x:(Math.pow(r,3)>e?Math.pow(r,3):(116*r-16)/M)*o,y:(t.l>8?Math.pow((t.l+16)/116,3):t.l/M)*h,z:(Math.pow(i,3)>e?Math.pow(i,3):(116*i-16)/M)*u,a:t.alpha});var t,n,r,i};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=l(this.toRgb()),h=l(r.toRgb()),u=x({l:o.l*(1-n)+h.l*n,c:o.c*(1-n)+h.c*n,h:o.h*(1-n)+h.h*n,a:o.a*(1-n)+h.a*n});return new a(u)}};
+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,i=function(t){var r,o=function(a){return{x:.9555766*a.x+-.0230393*a.y+.0631636*a.z,y:-.0282895*a.x+1.0099416*a.y+.0210077*a.z,z:.0122982*a.x+-.020483*a.y+1.3299098*a.z,a:a.a}}(t),u=o.x/100,i=o.y/100,e=o.z/100;return r={r:n(3.2404542*u-1.5371385*i-.4985314*e),g:n(-.969266*u+1.8760108*i+.041556*e),b:n(.0556434*u-.2040259*i+1.0572252*e),a:o.a},{r:a(r.r,0,255),g:a(r.g,0,255),b:a(r.b,0,255),a:a(r.a)}},e=function(n){var i=t(n.r),e=t(n.g),h=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*i+.3575761*e+.1804375*h),y:100*(.2126729*i+.7151522*e+.072175*h),z:100*(.0193339*i+.119192*e+.9503041*h),a:n.a}))},h=216/24389,l=24389/27,c=function(a){var t=e(a),n=t.x/r,i=t.y/o,c=t.z/u;return n=n>h?Math.cbrt(n):(l*n+16)/116,{l:116*(i=i>h?Math.cbrt(i):(l*i+16)/116)-16,a:500*(n-i),b:200*(i-(c=c>h?Math.cbrt(c):(l*c+16)/116)),alpha:t.a}},p=function(t,n,e){var p,b=c(t),x=c(n);return function(a){var t=(a.l+16)/116,n=a.a/500+t,e=t-a.b/200;return i({x:(Math.pow(n,3)>h?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(e,3)>h?Math.pow(e,3):(116*e-16)/l)*u,a:a.alpha})}({l:a((p={l:b.l*(1-e)+x.l*e,a:b.a*(1-e)+x.a*e,b:b.b*(1-e)+x.b*e,alpha:b.alpha*(1-e)+x.alpha*e}).l,0,100),a:a(p.a,-128,128),b:a(p.b,-128,128),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)}};

README.md

@@ -386,3 +386,3 @@ <div align="center">
 
-In contrast to other libraries that perform RGB values mixing, Colord mixes colors through LCH color space — same way the new CSS [`color-mix` function](https://drafts.csswg.org/css-color-5/#funcdef-color-mix) works. This approach produces better results and doesn't have the drawbacks the legacy way has.
+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.
 
@@ -608,7 +608,7 @@ ```js
 <details>
-  <summary><b><code>mix</code> (Color mixing)</b> <i>0.97 KB</i></summary>
+  <summary><b><code>mix</code> (Color mixing)</b> <i>0.9 KB</i></summary>
 
 A plugin adding a color mixing utility.
 
-In contrast to other libraries that perform RGB values mixing, Colord mixes colors through LCH color space — same way the new CSS [`color-mix` function](https://drafts.csswg.org/css-color-5/#funcdef-color-mix) works. This approach produces better results and doesn't have the drawbacks the legacy way has.
+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.
 
@@ -615,0 +615,0 @@ ```js

No alert changes

Worsened metrics

Total package byte prevSize

79927

decreased by-0.91%

Lines of code

453

decreased by-1.09%

No dependency changes