(connections): Add method to convert color

Author: nucliweb

src/connections/dist/connections.js

@@ -1,17 +1,6 @@
 registerPaint(
   'connections',
   class {
-    constructor() {
-      this.CONNECTIONS_PROPS = [
-        '--connections-particleColor',
-        '--connections-lineColor',
-        '--connections-particleAmount',
-        '--connections-defaultRadius',
-        '--connections-variantRadius',
-        '--connections-linkRadius'
-      ]
-    }
-
     static get inputProperties() {
       return [
         '--connections-particleColor',
@@ -23,6 +12,17 @@ registerPaint(
       ]
     }
 
+    hexToRgb(hex) {
+      let colors = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+      return colors
+        ? [
+            parseInt(colors[1], 16),
+            parseInt(colors[2], 16),
+            parseInt(colors[3], 16)
+          ]
+        : null
+    }
+
     parseProps(props) {
       return [
         '--connections-particleColor',
@@ -56,7 +56,10 @@ registerPaint(
       ] = this.parseProps(props)
 
       let particles = []
-      const [r, g, b] = lineColor.match(/\d+/g)
+      const isHexColor = /^#([0-9A-F]{3}){1,2}$/i.test(lineColor)
+      const [r, g, b] = isHexColor
+        ? this.hexToRgb(lineColor)
+        : lineColor.match(/\d+/g)
 
       const particle = (x, y) => {
         let radius = +defaultRadius + Math.random() * +variantRadius

src/connections/src/index.js

@@ -36,8 +36,8 @@ body {
 }
 
 .connections {
-  --connections-particleColor: rgb(150,180,200);
-  --connections-lineColor: rgb(150,180,200);
+  --connections-particleColor: #96b4c8;
+  --connections-lineColor: #96b4c8;
   --connections-particleAmount: 200;
   --connections-defaultRadius: 2;
   --connections-variantRadius: 1;