document support for css3 colors (#2290)

docs/docs/paint/properties.md

@@ -17,14 +17,23 @@ The following children can also be assigned to a Paint:
 
 Sets the alpha and RGB used when stroking and filling.
 The color is a string or a number.
+Any valid [CSS color](https://www.w3.org/TR/css-color-3/) value is supported. 
 
 ```tsx twoslash
-import {Paint} from "@shopify/react-native-skia";
+import {Group, Circle, vec} from "@shopify/react-native-skia";
 
 <>
-  <Paint color="red" />
+  <Group color="red">
+    <Circle c={vec(0, 0)} r={100} />
+  </Group>
   {/* 0xffff0000 is also red (format is argb) */}
-  <Paint color={0xffff0000} />
+  <Group color={0xffff0000}>
+    <Circle c={vec(0, 0)} r={50} />
+  </Group>
+  {/* Any CSS color is valid */}
+  <Group color="hsl(120, 100%, 50%)">
+    <Circle c={vec(0, 0)} r={50} />
+  </Group>
 </>
 ```
 

package/src/renderer/__tests__/e2e/Rect.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { checkImage, docPath } from "../../../__tests__/setup";
-import { Path, RoundedRect } from "../../components";
+import { Fill, Path, RoundedRect } from "../../components";
 import { importSkia, surface } from "../setup";
 
 describe("Rects and rounded rects", () => {
@@ -111,4 +111,12 @@ describe("Rects and rounded rects", () => {
     const image = await surface.draw(<Path path={path} color="lightblue" />);
     checkImage(image, docPath("rrect/nonuniform.png"));
   });
+  it("Supports CSS3 colors (1)", async () => {
+    const image = await surface.draw(<Fill color="hsl(120, 100%, 50%)" />);
+    checkImage(image, docPath("fill/green.png"));
+  });
+  it("Supports CSS3 colors (2)", async () => {
+    const image = await surface.draw(<Fill color="hsla(120, 100%, 50%, 1)" />);
+    checkImage(image, docPath("fill/green.png"));
+  });
 });