colorizr 2.0.0-1 → 2.1.0

package/README.md

@@ -1,14 +1,14 @@
 # Colorizr
 
-[![NPM version](https://badge.fury.io/js/colorizr.svg)](https://www.npmjs.com/package/colorizr) [![build status](https://travis-ci.org/gilbarbara/colorizr.svg)](https://travis-ci.org/gilbarbara/colorizr) [![Maintainability](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/maintainability)](https://codeclimate.com/github/gilbarbara/colorizr/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/test_coverage)](https://codeclimate.com/github/gilbarbara/colorizr/test_coverage)
+[![NPM version](https://badge.fury.io/js/colorizr.svg)](https://www.npmjs.com/package/colorizr) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/colorizr)](https://bundlephobia.com/result?p=colorizr) [![CI](https://github.com/gilbarbara/colorizr/actions/workflows/main.yml/badge.svg)](https://github.com/gilbarbara/colorizr/actions/workflows/main.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/maintainability)](https://codeclimate.com/github/gilbarbara/colorizr/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/test_coverage)](https://codeclimate.com/github/gilbarbara/colorizr/test_coverage)
 
-Color conversion, manipulation and comparison.
+Color conversion, manipulation, comparison, and analysis.
 
 ## Highlights
 
 - 🏖 **Easy to use**: Works with HSL and RGB, including CSS strings
-- ♿️ **Acessibility:** WCAG analysis and comparison.
-- 🛠 **Small:** Less than 4k (gzipped) and zero dependencies.
+- ♿️ **Accessibility:** WCAG analysis and comparison.
+- 🛠 **Small:** Less than 6k (gzipped) and zero dependencies.
 - 🟦 **Modern:** Written in Typescript.
 
 ## Setup
@@ -19,173 +19,383 @@ Color conversion, manipulation and comparison.
 npm install --save colorizr
 ```
 
-And import it:
+## Usage
 
-```javascript
-import Colorizr from 'Colorizr';
+```typescript
+import { luminance } from 'colorizr';
+
+const lux = luminance('#ff0044'); // 0.2168
 ```
 
-## Usage
+Or you can create an instance to access all methods:
 
-```javascript
-const colorizr = new Colorizr('#ff0044');
+```typescript
+import Colorizr from 'Colorizr';
 
-colorizr.hex // #ff0044
-colorizr.hsl // { h: 344, s: 100, l: 50 };
-colorizr.rgb // { r: 255, g: 0, b: 68 };
+const colorizr = new Colorizr('#ff0044');
 ```
 
-## API
+## Methods
 
-### Getters
+> String inputs accept css values: hex, rgb(a), hsl(a) and named colors.
 
-**colorizr.hex**  
-*returns the hex*
+**brightnessDifference(left: string, right: string): number**  
+_get the brightness difference between 2 colors_
 
-**colorizr.hsl**  
-*returns the hsl object*
+```typescript
+import { brightnessDifference } from 'colorizr';
 
-**colorizr.rgb**  
-*returns the rgb object*
+brightnessDifference('#fff', 'rgb(255, 0, 68)'); // 171.003
+```
 
-**colorizr.hue**  
-*returns the color hue, between 0 and 360*
+**chroma(input: string): number**  
+_get the chroma of a color_
 
-**colorizr.saturation**  
-*returns the color saturation, between 0 and 100*
+```typescript
+import { chroma } from 'colorizr';
 
-**colorizr.lightness**  
-*returns the color lightness, between 0 and 100*
+chroma('#ff0044'); // 1
+chroma('#ffc0cb'); // 0.2471
+```
 
-**colorizr.red**  
-*returns the color red level, between 0 and 255*
+**colorDifference(left: string, right: string): number**  
+_get the color difference between 2 colors_
 
-**colorizr.green**  
-*returns the color green level, between 0 and 255*
+```typescript
+import { colorDifference } from 'colorizr';
 
-**colorizr.blue**  
-*returns the color blue level, between 0 and 255*
+colorDifference('hsl(0, 0%, 100%)', '#f04'); // 442
+```
 
-**colorizr.luminance**  
-*returns the color luminance, between 0 and 1*
+**compare(left: string, right: string): Analysis**  
+_get the WCAG analysis for two colors_
 
-**colorizr.chroma**  
-*returns the color chroma, between 0 and 1*
+```typescript
+import { compare } from 'colorizr';
 
-**colorizr.textColor**  
-*returns a hex value with the contrasted color*
+compare('#ff0044', '#fff');
 
-### Manipulation
+{
+  "brightnessDifference": 171.003,
+  "colorDifference": 442,
+  "compliant": 1,
+  "contrast": 3.94,
+  "largeAA": true,
+  "largeAAA": false,
+  "normalAA": false,
+  "normalAAA": false,
+}
+```
 
-**colorizr.lighten(percentage: number = 10)**  
-*returns a hex value with the increased lightness*
+**contrast(left: string, right: string): number**  
+_get the WCAG contrast ratio between 2 colors_
 
-**colorizr.darken(percentage: number = 10)**  
-*returns a hex value with the decreased lightness*
+```typescript
+import { contrast } from 'colorizr';
 
-**colorizr.saturate(percentage: number = 10)**  
-*returns a hex value with the increased saturation*
+contrast('hsl(0, 0%, 100%)', 'rgb(255, 0, 68)'); // 3.94
+```
 
-**colorizr.saturate(percentage: number = 10)**  
-*returns a hex value with the decreased lightness*
+**darken(input: string, amount = 10): string**  
+_get a color with decreased lightness_
 
-**colorizr.invert()**  
-*returns a hex value with the inverted color*
+```typescript
+import { darken } from 'colorizr';
 
-**colorizr.fade(percentage: number = 10)**  
-*returns a css value with alpha*
+darken('#ff0044', 10); // #cc0036
+```
 
-### Comparison
+**desaturate(input: string, amount: number): string**  
+_get a color with decreased saturation_
 
-**colorizr.compareTo(color: string)**  
-*returns an object with the analysis (check the wcga result below)*
+```typescript
+import { desaturate } from 'colorizr';
 
-## Helpers
+desaturate('#ff0044', 10); // #f20d4a
+```
 
-These are named exports in case you don't need the whole instance.  
+**fade(input: string, amount: number = 10, output?: ColorTypes = 'rgb'): string**  
+_get a transparent color_
 
 ```typescript
-import { hex2hsl } from 'colorizr';
+import { fade } from 'colorizr';
+
+fade('hsl(344, 100, 50)', 10); // rgba(255, 0, 68, 0.9)
+fade('#ff0044', 50, 'hsl'); // hsla(344, 100%, 50%, 0.5)
 ```
 
-**brightnessDifference(left: string, right: string): number**  
-*get the brightness difference between 2 colors*
+**formatCSS(input: HSL | RGB, options?: FormatOptions): string**  
+_get the css string for a color model object_
 
-**colorDifference(left: string, right: string): number**  
-*get the color difference between 2 colors*
+```typescript
+import { formatCSS } from 'colorizr';
 
-**contrast(left: string, right: string): number**   
-*get the color contrast between 2 colors*
+formatCSS({ h: 344, s: 100, l: 50 }, { model: 'rgb' }); // 'rgb(255, 0, 68)'
+formatCSS({ r: 255, g: 0, b: 68 }, { alpha: 0.5, model: 'hsl' }); // 'hsla(344, 100%, 50%, 0.5)'
+```
 
-**formatCSS(input: HSL | RGB, options?: FormatOptions): string**  
-*get the css string for a color model*
+**formatHex(input: string): string**  
+_format a short hex string of 3 (or 4) digits into 6 (or 8) digits._
 
-**formatHex(input: string): string**   
-*format a short hex string 3 (or 4) digits into a 6 (or 8) digits.*
+```typescript
+import { formatHex } from 'colorizr';
 
-**harmony(input: string, type: Harmony): string[]**  
-*get the harmony scheme for a color*
+formatHex('#07e'); // '#0077ee'
+formatHex('#f058'); // '#ff005588'
+```
 
 **hex2hsl(input: string): HSL**  
-*convert a hex string into a HSL object*
+_convert a hex string into an HSL object_
+
+```typescript
+import { hex2hsl } from 'colorizr';
+
+hex2hsl('#ff0044'); // { h: 344, s: 100, l: 50 }
+```
 
 **hex2rgb(input: string): RGB**  
-*convert a hex string into a RGB object*
+_convert a hex string into an RGB object_
+
+```typescript
+import { hex2rgb } from 'colorizr';
+
+hex2rgb('#ff0044'); // { r: 255, g: 0, b: 68 }
+```
 
 **hsl2hex(input: HSL): string**  
-*convert a HSL object into a hex string*
+_convert an HSL object into a hex string_
+
+```typescript
+import { hsl2hex } from 'colorizr';
+
+hsl2hex({ h: 344, s: 100, l: 50 }); // '#ff0044'
+```
 
 **hsl2rgb(input: HSL): RGB**  
-*convert a HSL object into a RGB object*
+_convert an HSL object into an RGB object_
 
-**hue2rgb**
+```typescript
+import { hsl2rgb } from 'colorizr';
+
+hsl2rgb({ h: 344, s: 100, l: 50 }); // { r: 255, g: 0, b: 68 }
+```
+
+**isValidColor(input: any): boolean**  
+_check if the input can be parsed correctly_
+
+```typescript
+import { isValidColor } from 'colorizr';
+
+isValidColor('#f04'); // true
+isValidColor('#ff0044'); // true
+isValidColor('#ff004400'); // true
+isValidColor('rgb(100, 255, 0)'); // true
+isValidColor('hsla(344, 100%, 50%)'); // true
+isValidColor('blue'); // true
+isValidColor('aliceblue'); // true
+isValidColor('#mmff00'); // false
+isValidColor('blue-ish'); // false
+```
 
 **isValidHex(input: any): boolean**  
-*check if the input is a validHex* 
+_check if the input is a valid hex_
+
+```typescript
+import { isValidHex } from 'colorizr';
+
+isValidHex('#f04'); // true
+```
+
+**lighten(input: string, amount: number): string**  
+_get a color with increased lightness_
+
+```typescript
+import { lighten } from 'colorizr';
+
+lighten('#ff0044', 10); // #ff3369
+```
 
 **luminance(input: string): number**  
-*get the color luminance*
+_get the relative brightness according to the [WCAG definition](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef). Normalized to `0` for black and `1` for white._
+
+```typescript
+import { luminance } from 'colorizr';
+
+luminance('#ff0044'); // 0.2168
+```
+
+**name(input: string): string**  
+_get the named color. return the hex code if it can't be named_
+
+```typescript
+import { name } from 'colorizr';
+
+name('#ffc0cb', 10); // pink
+name('rgb(176, 224, 230)'); // 'powderblue'
+name('hsl(344, 100, 50)'); // #ff0044
+```
 
 **palette(input: string, options?: PaletteOptions): string[]**  
-*get a palette for a color*
+_get a palette for a color_
+
+```typescript
+import { palette } from 'colorizr';
 
-**parseCSS(input: string, output: ColorTypes = 'hex')**  
-*parse a css string to hex, hsl or rgb*
+palette('#ff0044');
+// ['#ff0044', '#ff7700', '#88ff00', '#00ff77', '#0088ff', '#7700ff'];
+
+palette('#ff0044', { type: 'monochromatic' });
+// ['#ff99b4', '#ff5582', '#ff1150', '#cc0036', '#880024', '#440012']
+```
+
+**parseCSS(input: string, output: ColorTypes = 'hex'): string | HSL | RGB**  
+_parse a css string to hex, hsl, or RGB_
+
+```typescript
+import { parseCSS } from 'colorizr';
+
+parseCSS('hsl(270 60% 70%)'); // '#b385e0'
+parseCSS('#ff0044', 'hsl'); // { h: 344, l: 50, s: 100 }
+```
 
 **random(): string**  
-*get a random color*
+_get a random color_
+
+```typescript
+import { random } from 'colorizr';
+
+random(); // '#b385e0'
+```
 
 **rgb2hex(input: RGB | RGBArray): string**  
-*convert a RGB object into a hex string*
+_convert an RGB object into a hex string_
+
+```typescript
+import { rgb2hex } from 'colorizr';
+
+rgb2hex({ r: 255, g: 55, b: 75 }); // '#ff374b'
+rgb2hex([255, 0, 68]); // '#ff0044'
+```
 
 **rgb2hsl(input: RGB | RGBArray): HSL**  
-*convert a RGB object into a HSL object*
+_convert an RGB object into an HSL object_
 
-**rotate(input: string, degrees = 15): string**  
+```typescript
+import { rgb2hsl } from 'colorizr';
+
+rgb2hsl({ r: 255, g: 55, b: 75 }); // { h: 354, s: 100, l: 60.78 }
+rgb2hsl([255, 0, 68]); // { h: 344, s: 100, l: 50 }
+```
 
-**shift(input: string, options: Partial<HSL | RGB>): string**  
+**rotate(input: string, degrees = 15): string** _get a color with changed hue_
 
-**text-color(input: string): string**  
-*get the constrasting color for the input*
+```typescript
+import { rotate } from 'colorizr';
+
+rotate('#ff0044', 30); // #ff3b00
+```
 
-**wcag(left: string, right: string): Analysis**  
-*get the WCAG analysis for two colors*
+**saturate(input: string, amount: number): string**  
+_get a color with increased saturation_
 
 ```typescript
-{
-  brightnessDifference: 189.041,
-  colorDifference: 595,
-  compliant: 2,
-  contrast: 10.67,
-  largeAA: true,
-  largeAAA: true,
-  normalAA: true,
-  normalAAA: true,
-}
+import { saturate } from 'colorizr';
+
+saturate('#ff0044', 10); // #ff0044 (already at the maximum)
+saturate('pink', 10); // #ffc0cb
 ```
 
+**scheme(input: string, type: Scheme): string[]**  
+_get the scheme for a color_
+
+```typescript
+import { scheme } from 'colorizr';
+
+const complementary = scheme('rgb(255, 0, 68)'); // ['#ff0044', '#00ffbb']
+const triadic = scheme('#ff0044', 'triadic'); // ['#ff0044', '#44ff00', '#0044ff']
+```
+
+**textColor(input: string): string**  
+_get a contrasting color to use with the text_
+
+```typescript
+import { textColor } from 'colorizr';
+
+textColor('#ff0044'); // #ffffff
+textColor('#fff800'); // #000000
+```
+
+## Instance API
+
+```typescript
+import Colorizr from 'Colorizr';
+
+const colorizr = new Colorizr('#ff0044');
+
+colorizr.hex; // #ff0044
+colorizr.hsl; // { h: 344, s: 100, l: 50 };
+colorizr.rgb; // { r: 255, g: 0, b: 68 };
+```
+
+### Getters
+
+**colorizr.hex**  
+_returns the hex_
+
+**colorizr.hsl**  
+_returns the HSL object_
+
+**colorizr.rgb**  
+_returns the RGB object_
+
+**colorizr.hue**  
+_returns the color hue, between 0 and 360_
+
+**colorizr.saturation**  
+_returns the color saturation, between 0 and 100_
+
+**colorizr.lightness**  
+_returns the color lightness, between 0 and 100_
+
+**colorizr.red**  
+_returns the color red level, between 0 and 255_
+
+**colorizr.green**  
+_returns the color green level, between 0 and 255_
+
+**colorizr.blue**  
+_returns the color blue level, between 0 and 255_
+
+**colorizr.luminance**
+
+**colorizr.chroma**
+
+**colorizr.textColor**
+
+### Manipulation
+
+**colorizr.lighten(percentage = 10)**
+
+**colorizr.darken(percentage = 10)**
+
+**colorizr.saturate(percentage = 10)**
+
+**colorizr.saturate(percentage = 10)**
+
+**colorizr.rotate(degrees = 15)**
+
+**colorizr.invert()**
+
+**colorizr.fade(percentage = 10)**
+
+### Comparison
+
+**colorizr.compare(color: string)**  
+_returns an object with the analysis (check the compare output above)_
 
 ## References
+
 [calculating-color-contrast](https://24ways.org/2010/calculating-color-contrast/)  
-[Colour Contrast Check](https://snook.ca/technical/colour_contrast/colour.html)    
-[Contrast Checker](https://webaim.org/resources/contrastchecker/)  
+[Colour Contrast Check](https://snook.ca/technical/colour_contrast/colour.html)  
+[Contrast Checker](https://webaim.org/resources/contrastchecker/)  
+[Converting Color Spaces in typescript](https://css-tricks.com/converting-color-spaces-in-typescript/)

package/esm/brightness-difference.js

@@ -1,15 +1,16 @@
 import hex2rgb from './hex2rgb';
-import { invariant, round, isString } from './utils';
+import { invariant, isString, messages, round } from './modules/utils';
+import parseCSS from './parse-css';
 /**
  * Get the brightness difference between 2 colors.
  */
 export default function brightnessDifference(left, right) {
-    invariant(!isString(left), 'left is required');
-    invariant(!isString(right), 'right is required');
-    var RGBLeft = hex2rgb(left);
-    var RGBRight = hex2rgb(right);
-    var rightY = (RGBRight.r * 299 + RGBRight.g * 587 + RGBRight.b * 114) / 1000;
-    var leftY = (RGBLeft.r * 299 + RGBLeft.g * 587 + RGBLeft.b * 114) / 1000;
+    invariant(isString(left), messages.left);
+    invariant(isString(right), messages.right);
+    const RGBLeft = hex2rgb(parseCSS(left));
+    const RGBRight = hex2rgb(parseCSS(right));
+    const rightY = (RGBRight.r * 299 + RGBRight.g * 587 + RGBRight.b * 114) / 1000;
+    const leftY = (RGBLeft.r * 299 + RGBLeft.g * 587 + RGBLeft.b * 114) / 1000;
     return round(Math.abs(rightY - leftY), 4);
 }
 //# sourceMappingURL=brightness-difference.js.map

package/esm/brightness-difference.js.map

@@ -1 +1 @@
-{"version":3,"file":"brightness-difference.js","sourceRoot":"","sources":["../src/brightness-difference.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,IAAY,EAAE,KAAa;IACtE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC,CAAC;IAC/C,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,mBAAmB,CAAC,CAAC;IAEjD,IAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,IAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAEhC,IAAM,MAAM,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;IAC/E,IAAM,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC,GAAG,GAAG,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;IAC3E,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5C,CAAC"}
+{"version":3,"file":"brightness-difference.js","sourceRoot":"","sources":["../src/brightness-difference.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,IAAY,EAAE,KAAa;IACtE,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAE1C,MAAM,MAAM,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;IAC/E,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC,GAAG,GAAG,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;IAE3E,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5C,CAAC"}

package/esm/chroma.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Get the chroma of a color.
+ */
+export default function chroma(input: string): number;

package/esm/chroma.js

@@ -0,0 +1,14 @@
+import hex2rgb from './hex2rgb';
+import { invariant, isString, messages, round } from './modules/utils';
+import parseCSS from './parse-css';
+/**
+ * Get the chroma of a color.
+ */
+export default function chroma(input) {
+    invariant(isString(input), messages.inputString);
+    const { r, g, b } = hex2rgb(parseCSS(input));
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    return round((max - min) / 255, 4);
+}
+//# sourceMappingURL=chroma.js.map

package/esm/chroma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chroma.js","sourceRoot":"","sources":["../src/chroma.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAa;IAC1C,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;IAEjD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAE7C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC9B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAE9B,OAAO,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;AACrC,CAAC"}

package/esm/color-difference.js

@@ -1,13 +1,14 @@
 import hex2rgb from './hex2rgb';
-import { invariant, isString } from './utils';
+import { invariant, isString, messages } from './modules/utils';
+import parseCSS from './parse-css';
 /**
  * Get the difference between 2 colors.
  */
 export default function colorDifference(left, right) {
-    invariant(!isString(left), 'left is required');
-    invariant(!isString(right), 'right is required');
-    var RGBLeft = hex2rgb(left);
-    var RGBRight = hex2rgb(right);
+    invariant(isString(left), messages.left);
+    invariant(isString(right), messages.right);
+    const RGBLeft = hex2rgb(parseCSS(left));
+    const RGBRight = hex2rgb(parseCSS(right));
     return (Math.max(RGBLeft.r, RGBRight.r) -
         Math.min(RGBLeft.r, RGBRight.r) +
         (Math.max(RGBLeft.g, RGBRight.g) - Math.min(RGBLeft.g, RGBRight.g)) +

package/esm/color-difference.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-difference.js","sourceRoot":"","sources":["../src/color-difference.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,IAAY,EAAE,KAAa;IACjE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC,CAAC;IAC/C,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,mBAAmB,CAAC,CAAC;IAEjD,IAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,IAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAEhC,OAAO,CACL,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;QAC/B,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;QAC/B,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;QACnE,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CACpE,CAAC;AACJ,CAAC"}
+{"version":3,"file":"color-difference.js","sourceRoot":"","sources":["../src/color-difference.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,IAAY,EAAE,KAAa;IACjE,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;QAC/B,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;QAC/B,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;QACnE,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CACpE,CAAC;AACJ,CAAC"}

package/esm/{wcag.d.ts → compare.d.ts}

@@ -2,4 +2,4 @@ import { Analysis } from './types';
 /**
  * Check 2 colors for WCAG compliance.
  */
-export default function wcag(left: string, right: string): Analysis;
+export default function compare(left: string, right: string): Analysis;

package/esm/compare.js

@@ -0,0 +1,36 @@
+import getBrightnessDifference from './brightness-difference';
+import getColorDifference from './color-difference';
+import getContrast from './contrast';
+import { invariant, isString, messages } from './modules/utils';
+/**
+ * Check 2 colors for WCAG compliance.
+ */
+export default function compare(left, right) {
+    invariant(isString(left), messages.left);
+    invariant(isString(right), messages.right);
+    const colorThreshold = 500;
+    const brightnessThreshold = 125;
+    const colorDifference = getColorDifference(left, right);
+    const contrast = getContrast(left, right);
+    const brightnessDifference = getBrightnessDifference(left, right);
+    const isBright = brightnessDifference >= brightnessThreshold;
+    const hasEnoughDifference = colorDifference >= colorThreshold;
+    let compliant = 0;
+    if (isBright && hasEnoughDifference) {
+        compliant = 2;
+    }
+    else if (isBright || hasEnoughDifference) {
+        compliant = 1;
+    }
+    return {
+        brightnessDifference,
+        colorDifference,
+        compliant,
+        contrast,
+        largeAA: contrast >= 3,
+        largeAAA: contrast >= 4.5,
+        normalAA: contrast >= 4.5,
+        normalAAA: contrast >= 7,
+    };
+}
+//# sourceMappingURL=compare.js.map

package/esm/compare.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare.js","sourceRoot":"","sources":["../src/compare.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,MAAM,yBAAyB,CAAC;AAC9D,OAAO,kBAAkB,MAAM,oBAAoB,CAAC;AACpD,OAAO,WAAW,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGhE;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,IAAY,EAAE,KAAa;IACzD,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,cAAc,GAAG,GAAG,CAAC;IAC3B,MAAM,mBAAmB,GAAG,GAAG,CAAC;IAEhC,MAAM,eAAe,GAAG,kBAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC1C,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAElE,MAAM,QAAQ,GAAG,oBAAoB,IAAI,mBAAmB,CAAC;IAC7D,MAAM,mBAAmB,GAAG,eAAe,IAAI,cAAc,CAAC;IAE9D,IAAI,SAAS,GAAG,CAAC,CAAC;IAElB,IAAI,QAAQ,IAAI,mBAAmB,EAAE;QACnC,SAAS,GAAG,CAAC,CAAC;KACf;SAAM,IAAI,QAAQ,IAAI,mBAAmB,EAAE;QAC1C,SAAS,GAAG,CAAC,CAAC;KACf;IAED,OAAO;QACL,oBAAoB;QACpB,eAAe;QACf,SAAS;QACT,QAAQ;QACR,OAAO,EAAE,QAAQ,IAAI,CAAC;QACtB,QAAQ,EAAE,QAAQ,IAAI,GAAG;QACzB,QAAQ,EAAE,QAAQ,IAAI,GAAG;QACzB,SAAS,EAAE,QAAQ,IAAI,CAAC;KACzB,CAAC;AACJ,CAAC"}