feat(Color) Regex and color code cleanup and new color format support

src/color/Color.ts

@@ -1,7 +1,13 @@
 import { ColorNameMap } from './color_map';
 import { reHSLa, reHex, reRGBa } from './constants';
 import type { TRGBAColorSource, TColorArg } from './typedefs';
-import { hue2rgb, hexify, rgb2Hsl, fromAlphaToFloat } from './util';
+import {
+  hue2rgb,
+  hexify,
+  rgb2Hsl,
+  fromAlphaToFloat,
+  greyAverage,
+} from './util';
 
 /**
  * @class Color common color operations
@@ -139,8 +145,7 @@ export class Color {
    * @return {Color} thisArg
    */
   toGrayscale() {
-    const [r, g, b, a] = this.getSource(),
-      average = Math.round(r * 0.3 + g * 0.59 + b * 0.11);
+    const [average, a] = greyAverage(...this.getSource());
     this.setSource([average, average, average, a]);
     return this;
   }
@@ -151,8 +156,7 @@ export class Color {
    * @return {Color} thisArg
    */
   toBlackWhite(threshold: number) {
-    const [r, g, b, a] = this.getSource(),
-      average = Math.round(r * 0.3 + g * 0.59 + b * 0.11),
+    const [average, a] = greyAverage(...this.getSource()),
       bOrW = average < (threshold || 127) ? 0 : 255;
     this.setSource([bOrW, bOrW, bOrW, a]);
     return this;

src/color/constants.ts

@@ -1,5 +1,5 @@
 /**
- * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5))
+ * Regex matching color in RGB or RGBA formats (ex: `rgb(0, 0, 0)`, `rgba(255, 100, 10, 0.5)`, `rgba( 255 , 100 , 10 , 0.5 )`, `rgb(1,1,1)`, `rgba(100%, 60%, 10%, 0.5)`)
  * Also matching rgba(r g b / a) as per new specs
  * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
  * Formal syntax at the time of writing:
@@ -49,7 +49,7 @@
  * The alpha channel can be in the format 0.4 .7 or 1 or 73%
  *
  * WARNING this regex doesn't fail on off spec colors. it matches everything that could be a color.
- * So the spec does not allow for rgba(30 , 45%  35, 49%) but this will work anyway for us
+ * So the spec does not allow for `rgba(30 , 45%  35, 49%)` but this will work anyways for us
  */
 export const reRGBa = () =>
   /^rgba?\(\s*(\d{0,3}(?:\.\d+)?%?)\s*[\s|,]\s*(\d{0,3}(?:\.\d+)?%?)\s*[\s|,]\s*(\d{0,3}(?:\.\d+)?%?)\s*(?:\s*[,/]\s*(\d{0,3}(?:\.\d+)?%?)\s*)?\)$/i;
@@ -95,11 +95,11 @@ export const reRGBa = () =>
  * \)                // Matches the closing parenthesis
  * $/i               // Matches the end of the string and sets the regular expression to case-insensitive mode
  *
- * WARNING this regex doesn't fail on off spec colors. it matches everything that could be a color.
- * So the spec does not allow for hsl(30 , 45%  35, 49%) but this will work anyway for us
+ * WARNING this regex doesn't fail on off spec colors. It matches everything that could be a color.
+ * So the spec does not allow `hsl(30 , 45%  35, 49%)` but this will work anyways for us.
  */
 export const reHSLa = () =>
-  /^hsla?\(\s*(\d{1,3})\s*[\s|,]\s*(\d{1,3}%)\s*[\s|,]\s*(\d{1,3}%)\s*(?:\s*[,/]\s*(\d*(?:\.\d+)?%?)\s*)?\)$/i;
+  /^hsla?\(\s*([+-]?\d{1,3})\s*[\s|,]\s*(\d{1,3}%)\s*[\s|,]\s*(\d{1,3}%)\s*(?:\s*[,/]\s*(\d*(?:\.\d+)?%?)\s*)?\)$/i;
 
 /**
  * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff)

src/color/util.ts

@@ -74,7 +74,20 @@ export const fromAlphaToFloat = (value = '1') =>
   parseFloat(value) / (value.endsWith('%') ? 100 : 1);
 
 /**
- * Convert a value ∈ [0, 255] to hex
+ * Convert a value in the inclusive range [0, 255] to hex
  */
 export const hexify = (value: number) =>
   Math.min(value, 255).toString(16).toUpperCase().padStart(2, '0');
+
+/**
+ * Calculate the grey average value for rgb and pass through alpha
+ */
+export const greyAverage = (
+  r: number,
+  g: number,
+  b: number,
+  a = 1
+): [average: number, alpha: number] => [
+  Math.round(r * 0.3 + g * 0.59 + b * 0.11),
+  a,
+];

test/unit/color.js

@@ -221,8 +221,12 @@
     expectedSource: [89, 191, 64, 0.2]
   },{
     name: 'fromHsla no commas(with whitespaces)',
-    stringToParse: 'hsl(  108  50%   50%  / .5)',
+    stringToParse: 'hsl( 108  50%   50%  / .5)',
     expectedSource: [89, 191, 64, 0.5]
+  },{
+    name: 'fromHsla with very counterClockwise value)',
+    stringToParse: 'hsl( -450,  50%,   50%, .5)',
+    expectedSource: [127, 64, 191, 0.5]
   }].forEach(({ name, stringToParse, expectedSource }) => {
     QUnit.test(name, function(assert) {
       var oColor = fabric.Color.fromHsla(stringToParse);