- add tests

- update packages
- update jest to use ts-jest
- refactor color generation to theme

src/Theme/Colors/index.test.ts

@@ -0,0 +1,55 @@
+import { generateShades } from ".";
+
+const exampleColors = {
+  main: "black",
+  "secondary-accent": "#fff",
+};
+
+test("color shades are generated in a nested structure", () => {
+  const colors = generateShades(exampleColors, {
+    structure: "nested",
+    format: "css-variable",
+  });
+
+  expect(colors).toMatchObject({
+    main: {
+      "10": "rgba(0,0,0,0.1)",
+    },
+  });
+});
+
+test("color shades are generated in a flat structure", () => {
+  const colors = generateShades(exampleColors, {
+    structure: "flat",
+    format: "css-variable",
+  });
+
+  expect(colors).toMatchObject({
+    "main-10": "rgba(0,0,0,0.1)",
+  });
+});
+
+test("color shades are generated in a flat structure with a prefix", () => {
+  const colors = generateShades(exampleColors, {
+    structure: "flat",
+    keyPrefix: "color-",
+    format: "css-variable",
+  });
+
+  expect(colors).toMatchObject({
+    "color-main-10": "rgba(0,0,0,0.1)",
+  });
+});
+
+test("a filtered list of color shades is generated in a flat structure", () => {
+  const colors = generateShades(exampleColors, {
+    structure: "flat",
+    keys: ["main"],
+    format: "css-variable",
+  });
+
+  expect(colors).toMatchObject({
+    "main-10": "rgba(0,0,0,0.1)",
+  });
+  expect(colors["secondary-accent"]).toBeUndefined();
+});

src/Theme/Colors/index.ts

@@ -0,0 +1,83 @@
+import { countDecimals } from "Utils";
+import { fromString } from "css-color-converter";
+
+const DEFAULT_OPACITIES = [0.1, 0.25, 0.5, 0.75];
+const DEFAULT_STRUCTURE = "flat";
+
+const formatColor = ({
+  prefix,
+  rgb,
+  opacity,
+}: {
+  prefix?: string;
+  rgb: string;
+  opacity?: number;
+}) => {
+  return {
+    [`${prefix ? prefix + "-" : ""}${
+      opacity !== undefined
+        ? countDecimals(opacity) === 1
+          ? (opacity + "").split(".")[1] + "0"
+          : (opacity + "").split(".")[1]
+        : ""
+    }`]: `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${opacity})`,
+  };
+};
+
+const generateShades = (
+  colors: { [key: string]: string },
+  options?: {
+    keys?: string[];
+    keyPrefix?: string;
+    opacities?: number[];
+    structure?: "flat" | "nested";
+    format?: "default" | "css-variable";
+  }
+) => {
+  const colorKeys = options?.keys
+    ? Object.keys(colors).filter((key) => options.keys?.includes(key))
+    : Object.keys(colors);
+
+  const structure = options?.structure
+    ? options.structure === "nested"
+      ? "nested"
+      : "flat"
+    : DEFAULT_STRUCTURE;
+
+  const generatedColorShadesArr: object[] = [];
+
+  colorKeys.forEach((_key) => {
+    const key = (options?.keyPrefix || "") + _key;
+    const colorString = colors[_key];
+
+    const opacities = options?.opacities
+      ? options.opacities
+      : DEFAULT_OPACITIES;
+
+    if (structure === "flat") {
+      opacities.forEach((opacity) => {
+        const rgba = fromString(colorString).toRgbaArray();
+        generatedColorShadesArr.push(
+          formatColor({ prefix: key, rgb: rgba, opacity })
+        );
+      });
+    } else {
+      generatedColorShadesArr.push({
+        [key]: Object.assign(
+          {},
+          ...opacities.map((opacity) => {
+            const rgba = fromString(colorString).toRgbaArray();
+
+            return formatColor({ rgb: rgba, opacity });
+          })
+        ),
+      });
+    }
+  });
+
+  const generatedColorShades = Object.assign({}, ...generatedColorShadesArr);
+
+  return generatedColorShades;
+};
+
+export { generateShades, formatColor };

src/Theme/index.ts

@@ -0,0 +1,3 @@
+import * as Colors from "./Colors";
+
+export default { Colors };