feat: add color variable with color conversion to and from all formats

package.json

@@ -52,6 +52,7 @@
         "@twurple/chat": "^7.1.0",
         "@twurple/eventsub-ws": "^7.1.0",
         "@twurple/pubsub": "^7.1.0",
+        "@types/tinycolor2": "^1.4.6",
         "@zunderscore/elgato-light-control": "^1.1.2",
         "angular": "^1.8.0",
         "angular-animate": "^1.7.8",
@@ -119,6 +120,7 @@
         "sanitize-filename": "^1.6.3",
         "socket.io-client": "^2.3.0",
         "tiny-typed-emitter": "^2.1.0",
+        "tinycolor2": "^1.6.0",
         "underscore": "^1.13.1",
         "uuid": "^3.3.3",
         "winston": "^2.4.4",

src/backend/variables/builtin/misc/color.ts

@@ -0,0 +1,95 @@
+import { ReplaceVariable } from "../../../../types/variables";
+import tinycolor from "tinycolor2";
+
+const model: ReplaceVariable = {
+    definition: {
+        handle: "color",
+        examples: [
+            {
+                usage: 'color[red]',
+                description: "returns '#ff0000'"
+            },
+            {
+                usage: 'color[red, hex]',
+                description: "returns '#ff0000'"
+            },
+            {
+                usage: 'color[red, hexa, 255]',
+                description: "returns '#ff0000ff'"
+            },
+            {
+                usage: 'color[green, ahex, 255]',
+                description: "returns '#ff00ff00'"
+            },
+            {
+                usage: 'color[red, rgb]',
+                description: "returns 'rgb(255, 0, 0)'"
+            },
+            {
+                usage: 'color[red, rgbp]',
+                description: "returns 'rgb(100%, 0, 0)'"
+            },
+
+            {
+                usage: 'color[#00ff00, hsl]',
+                description: "returns 'hsl(0, 100%, 50%)'"
+            },
+            {
+                usage: 'color[#ff00ff00, hsv, 0.5]',
+                description: "returns 'hsv(0, 100%, 100%)'"
+            },
+            {
+                usage: 'color[#ff00ff00, dec]',
+                description: "returns decimal value"
+            }
+        ],
+        description: "outputs color in specified format",
+        possibleDataOutput: ["text"]
+    },
+    evaluator: async (
+        _,
+        colorString: string,
+        type: string,
+        alpha: null | number | string = 1
+    ) => {
+        const color = tinycolor(colorString);
+        alpha = Number(alpha) > 1 ? Number(alpha) / 255 : Number(alpha);
+        color.setAlpha(Number(alpha));
+        let hexColor = color.toHex8String();
+        let output;
+        switch (type) {
+            case "hex":
+                output = color.toHexString();
+                break;
+            case "hexa":
+                output = hexColor;
+                break;
+            case "ahex":
+                hexColor = hexColor.replace("#", "");
+                output = `#${hexColor.substring(6, 8)}${hexColor.substring(0, 2)}${hexColor.substring(2, 4)}${hexColor.substring(4, 6)}`;
+                break;
+            case "rgb":
+                output = color.toRgbString();
+                break;
+            case "rgbp":
+                output = color.toPercentageRgbString();
+                break;
+            case "hsl":
+                output = color.toHslString();
+                break;
+            case "hsv":
+                output = color.toHsvString();
+                break;
+            case "dec":
+                hexColor = hexColor.replace("#", "");
+                output = parseInt(hexColor, 16);
+                break;
+            default:
+                output = color.toHexString();
+                break;
+        }
+        return output;
+    }
+};
+
+export default model;

src/backend/variables/builtin/misc/index.ts

@@ -1,4 +1,5 @@
 import activeChatUserCount from './active-chat-user-count';
+import color from './color';
 import date from './date';
 import discordTimestamp from './discord-timestamp';
 import profilePageByteBinToken from './profile-page-bytebin-token';
@@ -18,6 +19,7 @@ import viewTime from './view-time';
 
 export default [
     activeChatUserCount,
+    color,
     date,
     discordTimestamp,
     profilePageByteBinToken,