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

src/color/Color.ts

@@ -279,19 +279,17 @@ export class Color {
    * @return {TRGBAColorSource | undefined} source
    */
   static sourceFromRgb(color: string): TRGBAColorSource | undefined {
-    const match = color.match(reRGBa);
+    const match = color.match(reRGBa());
     if (match) {
-      const r =
-          (parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1)) *
-          (/%$/.test(match[1]) ? 255 : 1),
-        g =
-          (parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1)) *
-          (/%$/.test(match[2]) ? 255 : 1),
-        b =
-          (parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1)) *
-          (/%$/.test(match[3]) ? 255 : 1);
-
-      return [r, g, b, match[4] ? parseFloat(match[4]) : 1];
+      const [r, g, b] = match.slice(1, 4).map((value) => {
+        const parsedValue = parseInt(value, 10);
+        return value.endsWith('%')
+          ? Math.round(parsedValue * 2.55)
+          : parsedValue;
+      });
+      const alpha = match[4] ?? '1';
+      const a = parseFloat(alpha) / (alpha.endsWith('%') ? 100 : 1);
+      return [r, g, b, a];
     }
   }
 
@@ -326,14 +324,14 @@ export class Color {
    * @see http://http://www.w3.org/TR/css3-color/#hsl-color
    */
   static sourceFromHsl(color: string): TRGBAColorSource | undefined {
-    const match = color.match(reHSLa);
+    const match = color.match(reHSLa());
     if (!match) {
       return;
     }
 
     const h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360,
-      s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1),
-      l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1);
+      s = parseFloat(match[2]) / 100,
+      l = parseFloat(match[3]) / 100;
     let r: number, g: number, b: number;
 
     if (s === 0) {
@@ -374,31 +372,19 @@ export class Color {
    * @return {TRGBAColorSource | undefined} source
    */
   static sourceFromHex(color: string): TRGBAColorSource | undefined {
-    if (color.match(reHex)) {
+    if (color.match(reHex())) {
       const value = color.slice(color.indexOf('#') + 1),
-        isShortNotation = value.length === 3 || value.length === 4,
-        isRGBa = value.length === 8 || value.length === 4,
-        r = isShortNotation
-          ? value.charAt(0) + value.charAt(0)
-          : value.substring(0, 2),
-        g = isShortNotation
-          ? value.charAt(1) + value.charAt(1)
-          : value.substring(2, 4),
-        b = isShortNotation
-          ? value.charAt(2) + value.charAt(2)
-          : value.substring(4, 6),
-        a = isRGBa
-          ? isShortNotation
-            ? value.charAt(3) + value.charAt(3)
-            : value.substring(6, 8)
-          : 'FF';
-
-      return [
-        parseInt(r, 16),
-        parseInt(g, 16),
-        parseInt(b, 16),
-        parseFloat((parseInt(a, 16) / 255).toFixed(2)),
-      ];
+        isShortNotation = value.length === 3 || value.length === 4;
+      let expandedValue: string[];
+      if (isShortNotation) {
+        expandedValue = value.split('').map((hex) => hex + hex);
+      } else {
+        expandedValue = value.match(/.{2}/g)!;
+      }
+      const [r, g, b, a = 255] = expandedValue.map((hexCouple) =>
+        parseInt(hexCouple, 16)
+      );
+      return [r, g, b, a / 255];
     }
   }
 }

src/color/constants.ts

@@ -1,26 +1,107 @@
 /**
  * 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))
- * @static
- * @field
- * @memberOf Color
+ * 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:
+ * <rgb()> =
+ *  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
+ *  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
+ * <alpha-value> = <number> | <percentage>
+ *
+ * For learners this is how you can read this regex
+ * Regular expression for matching an rgba or rgb CSS color value
+ *
+ * /^          # Beginning of the string
+ * rgba?       # "rgb" or "rgba"
+ * \(\s*       # Opening parenthesis and optional whitespace
+ * (\d{1,3}    # One to three digits R channel
+ *  (?:\.\d+)? # Optional decimal with one or more digits
+ * )           # End of capturing group for the first color component
+ * %?          # Optional percent sign after the first color component
+ * \s*         # Optional whitespace
+ * [\s|,]      # Separator between color components can be a space or comma
+ * \s*         # Optional whitespace
+ * (\d{1,3}    # One to three digits G channel
+ *  (?:\.\d+)? # Optional decimal with one or more digits
+ * )           # End of capturing group for the second color component
+ * %?          # Optional percent sign after the second color component
+ * \s*         # Optional whitespace
+ * [\s|,]      # Separator between color components can be a space or comma
+ * \s*         # Optional whitespace
+ * (\d{1,3}    # One to three digits B channel
+ *  (?:\.\d+)? # Optional decimal with one or more digits
+ * )           # End of capturing group for the third color component
+ * %?          # Optional percent sign after the third color component
+ * \s*         # Optional whitespace
+ * (?:         # Beginning of non-capturing group for alpha value
+ *  \s*        # Optional whitespace
+ *  [,/]       # Comma or slash separator for alpha value
+ *  \s*        # Optional whitespace
+ *  (\d{0,3}   # Zero to three digits
+ *    (?:\.\d+)? # Optional decimal with one or more digits
+ *  )          # End of capturing group for alpha value
+ *  %?         # Optional percent sign after alpha value
+ *  \s*        # Optional whitespace
+ * )?          # End of non-capturing group for alpha value (optional)
+ * \)          # Closing parenthesis
+ * $           # End of the string
+ *
+ * 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
  */
-// eslint-disable-next-line max-len
-export const reRGBa =
-  /^rgba?\(\s*(\d{1,3}(?:\.\d+)?%?)\s*,\s*(\d{1,3}(?:\.\d+)?%?)\s*,\s*(\d{1,3}(?:\.\d+)?%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i;
+export const reRGBa = () =>
+  /^rgba?\(\s*(\d{1,3}(?:\.\d+)?%?)\s*[\s|,]\s*(\d{1,3}(?:\.\d+)?%?)\s*[\s|,]\s*(\d{1,3}(?:\.\d+)?%?)\s*(?:\s*[,/]\s*(\d{0,3}(?:\.\d+)?%?)\s*)?\)$/i;
 
 /**
- * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 ))
- * @static
- * @field
- * @memberOf Color
+ * Regex matching color in HSL or HSLA formats (ex: hsl(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/hsl
+ * Formal syntax at the time of writing:
+ * <hsl()> =
+ *   hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
+ *
+ * <hue> =
+ *   <number>  |
+ *   <angle>
+ *
+ * <alpha-value> =
+ *   <number>      |
+ *   <percentage>
+ *
+ * For learners this is how you can read this regex
+ * Regular expression for matching an hsla or hsl CSS color value
+ *
+ * /^hsla?\(         // Matches the beginning of the string and the opening parenthesis of "hsl" or "hsla"
+ * \s*               // Matches any whitespace characters (space, tab, etc.) zero or more times
+ * (\d{1,3})         // Hue: Matches one to three digits and captures it in a group
+ * \s*               // Matches any whitespace characters zero or more times
+ * [\s|,]            // Matches a space, tab or comma
+ * \s*               // Matches any whitespace characters zero or more times
+ * (\d{1,3}%)        // Saturation: Matches one to three digits followed by a percentage sign and captures it in a group
+ * \s*               // Matches any whitespace characters zero or more times
+ * [\s|,]            // Matches a space, tab or comma
+ * \s*               // Matches any whitespace characters zero or more times
+ * (\d{1,3}%)        // Lightness: Matches one to three digits followed by a percentage sign and captures it in a group
+ * \s*               // Matches any whitespace characters zero or more times
+ * (?:               // Alpha: Begins a non-capturing group for the alpha value
+ *   \s*             // Matches any whitespace characters zero or more times
+ *   [,/]            // Matches a comma or forward slash
+ *   \s*             // Matches any whitespace characters zero or more times
+ *   (\d*(?:\.\d+)?%?) // Matches zero or more digits, optionally followed by a decimal point and one or more digits, followed by an optional percentage sign and captures it in a group
+ *   \s*             // Matches any whitespace characters zero or more times
+ * )?                // Makes the alpha value group optional
+ * \)                // 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
  */
-export const reHSLa =
-  /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}%)\s*,\s*(\d{1,3}%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i;
+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;
 
 /**
  * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff)
- * @static
- * @field
- * @memberOf Color
  */
-export const reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i;
+export const reHex = () => /^#?(([0-9a-f]){3,4}|([0-9a-f]{2}){3,4})$/i;