coporate color system: init

2023-10-03 14:58:31 +02:00
parent 1c0c11a954
commit e9f3be0056
21 changed files with 1787 additions and 0 deletions
--- a/pkgs/theme/src/generate.ts
+++ b/pkgs/theme/src/generate.ts
@@ -0,0 +1,46 @@
+import { writeFile } from "fs";
+import palette from "./out.json" assert { type: "json" };
+import { config } from "./config.js";
+
+type PaletteFile = typeof palette;
+
+const html = (palette: PaletteFile): string => {
+    const colors = Object.keys(config.baseColors).map((baseName) => {
+        const colors = Object.entries(palette.ref.palette)
+            .filter(([name, _]) => name.includes(baseName))
+            .sort((a, b) => {
+                return a[1].meta.color.shade - b[1].meta.color.shade;
+            })
+            .map(([key, color]) => {
+                console.log({ key, color });
+                return `<div style="background-color:${color.value}; color:${
+                    color.meta.color.shade < 48 ? "#fff" : "#000"
+                }; height: 10rem; border:solid 1px grey; display:grid; place-items:end;">${key}</div>`;
+            });
+        return `<div style="display: grid; grid-template-columns: repeat(${13}, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem">${colors.join(
+            "\n",
+        )}</div>`;
+    });
+
+    return `<!DOCTYPE html>
+<html lang="en">
+<meta charset="UTF-8">
+<title>Page Title</title>
+<style>
+</style>
+<body>
+
+${colors.join("\n")}
+
+</body>
+</html>     
+`;
+};
+
+writeFile("index.html", html(palette), (err) => {
+    if (err) {
+        console.error({ err });
+    } else {
+        console.log("Exported colors to html");
+    }
+});