@theodorejb/color-detect - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0

LICENSE.md

@@ -0,0 +0,0 @@ MIT License

package.json

 {
   "name": "@theodorejb/color-detect",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Convert CSS color strings to RGBA and check whether they are light or dark",
@@ -34,8 +34,8 @@ "type": "module",
     "@types/chai": "^4.3.0",
-    "@types/mocha": "^9.1.0",
+    "@types/mocha": "^10.0.0",
     "chai": "^4.3.6",
     "local-web-server": "^5.2.0",
-    "mocha": "^9.2.2",
+    "mocha": "^10.1.0",
     "typescript": "^4.6.3"
   }
 }

README.md

@@ -8,3 +8,3 @@ # color-detect
 * No dependencies
-* ES6 module compatible with modern browsers and build tools
+* Native ES module compatible with modern browsers and build tools
 
@@ -18,18 +18,18 @@ ## Installation
 ```javascript
-import {colorToRgbaArray, isLightColor, rgbaToCssString} from '@theodorejb/color-detect';
+import {colorToRgba, isLightColor, rgbaToCssString} from '@theodorejb/color-detect';
 
 // convert CSS colors to an RGBA array
-colorToRgbaArray('red'); // [255, 0, 0, 255]
-colorToRgbaArray('#123'); // [17, 34, 51, 255]
-colorToRgbaArray('rgb(80, 160, 240)'); // [80, 160, 240, 255]
+colorToRgba('red'); // [255, 0, 0, 255]
+colorToRgba('#123'); // [17, 34, 51, 255]
+colorToRgba('rgb(80, 160, 240)'); // [80, 160, 240, 255]
 
 // detect whether a color is light or dark
-isLightColor(colorToRgbaArray('red')); // false
-isLightColor(colorToRgbaArray('#663399')); // false
-isLightColor(colorToRgbaArray('yellow')); // true
-isLightColor(colorToRgbaArray('lime')); // true
-isLightColor(colorToRgbaArray('green')); // false
+isLightColor(colorToRgba('red')); // true
+isLightColor(colorToRgba('#663399')); // false
+isLightColor(colorToRgba('yellow')); // true
+isLightColor(colorToRgba('lime')); // true
+isLightColor(colorToRgba('green')); // false
 
 // convert an RGBA array to CSS color string
-let chocolateRgb = colorToRgbaArray('chocolate');
+let chocolateRgb = colorToRgba('chocolate');
 rgbaToCssString(chocolateRgb); // "rgba(210, 105, 30, 1)"
@@ -36,0 +36,0 @@ ```

src/color-detect.d.ts

@@ -1,2 +0,2 @@
-export declare type RgbaArray = [number, number, number, number];
+export type RgbaArray = [number, number, number, number];
 /**
@@ -7,6 +7,10 @@ * Returns true if the color is light, and false if it is dark.
 /**
+ * Uses the W3C suggested algorithm to determine a color's relative luminance.
+ */
+export declare function colorLuminance(rgba: RgbaArray): number;
+/**
  * Turns any valid canvas fillStyle into an array with values for R, G, B, and A.
  * Returns [0, 0, 0, 0] for invalid colors.
  */
-export declare function colorToRgbaArray(color: string): RgbaArray;
+export declare function colorToRgba(color: string): RgbaArray;
 /**
@@ -13,0 +17,0 @@ * Turns an rgba array into an rgba() CSS string.

src/color-detect.js

@@ -6,2 +6,9 @@ /**
     // based on https://stackoverflow.com/a/3943023/1170489
+    return colorLuminance(rgba) > Math.sqrt(1.05 * 0.05) - 0.05;
+}
+/**
+ * Uses the W3C suggested algorithm to determine a color's relative luminance.
+ */
+export function colorLuminance(rgba) {
+    // per https://www.w3.org/TR/WCAG20/#relativeluminancedef
     var c = rgba.map(function (v) { return v / 255; });
@@ -16,4 +23,3 @@ for (var i = 0; i < c.length; i++) {
     }
-    var luminance = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-    return (luminance > 0.33);
+    return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
 }
@@ -25,3 +31,3 @@ var canvas, context;
  */
-export function colorToRgbaArray(color) {
+export function colorToRgba(color) {
     // based on https://gist.github.com/njvack/02ad8efcb0d552b0230d
@@ -28,0 +34,0 @@ if (!canvas) {

No alert changes

Improved metrics

Total package byte prevSize

5682

increased by3.88%

Lines of code

72

increased by16.13%

No dependency changes