CSS Added hwb(H W B / A) notation (#50750)

Summary:
Fixes #50583. cc NickGerleman

## Changelog:

[GENERAL] [FIXED] - CSS Added hwb(H W B / A) notation

Pull Request resolved: #50750

Test Plan: Added hwb(H W B / A) notation

Reviewed By: cipolleschi

Differential Revision: D73126316

Pulled By: NickGerleman

fbshipit-source-id: 8e3730c6de44a0b4d8a21339e1f7339cb70e2044

Author: zhongwuzw

packages/normalize-color/__tests__/normalizeColor-test.js

@@ -140,6 +140,7 @@ it('handles hwb properly', () => {
   expect(normalizeColor('hwb(0 0% 0%)')).toBe(0xff0000ff);
   expect(normalizeColor('hwb(70 50% 0%)')).toBe(0xeaff80ff);
   expect(normalizeColor('hwb(0, 0%, 100%)')).toBe(null);
+  expect(normalizeColor('hwb(200 30% 20% / 0.5)')).toBe(0x4da1cc80);
 });
 
 it('handles named colors properly', () => {

packages/normalize-color/index.js

@@ -143,11 +143,24 @@ function normalizeColor(color) {
   }
 
   if ((match = matchers.hwb.exec(color))) {
+    if (match[5] !== undefined) {
+      // hwb(H W B / A) notation
+      return (
+        (hwbToRgb(
+          parse360(match[5]), // h
+          parsePercentage(match[6]), // w
+          parsePercentage(match[7]), // b
+        ) |
+          parse1(match[8])) >>> // a
+        0
+      );
+    }
+    // hwb(H W B) notation
     return (
       (hwbToRgb(
-        parse360(match[1]), // h
-        parsePercentage(match[2]), // w
-        parsePercentage(match[3]), // b
+        parse360(match[2]), // h
+        parsePercentage(match[3]), // w
+        parsePercentage(match[4]), // b
       ) |
         0x000000ff) >>> // a
       0
@@ -255,7 +268,13 @@ function getMatchers() {
           callWithSlashSeparator(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER) +
           ')',
       ),
-      hwb: new RegExp('hwb' + callModern(NUMBER, PERCENTAGE, PERCENTAGE)),
+      hwb: new RegExp(
+        'hwb(' +
+          callModern(NUMBER, PERCENTAGE, PERCENTAGE) +
+          '|' +
+          callWithSlashSeparator(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER) +
+          ')',
+      ),
       hex3: /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
       hex4: /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
       hex6: /^#([0-9a-fA-F]{6})$/,