wip

.gitignore

@@ -48,6 +48,7 @@ schema.graphql
 lerna.json
 .stormTests
 *storybook.log
+.normalizedFigmaExport.json
 
 # TODO remove after moving traffic splitting config to WPC
 gateway.*.json

package.json

@@ -154,7 +154,9 @@
     "webiny": "./node_modules/.bin/webiny",
     "wby": "./node_modules/.bin/wby",
     "webiny-admin-storybook": "cd packages/admin-ui && yarn storybook",
-    "webiny-admin-build-storybook": "cd packages/admin-ui && cross-env OUT=../../netlify-static yarn build-storybook"
+    "webiny-admin-build-storybook": "cd packages/admin-ui && cross-env OUT=../../netlify-static yarn build-storybook",
+    "webiny-admin-import-from-figma": "node packages/admin-ui/scripts/importFromFigma.js"
+
   },
   "husky": {
     "hooks": {

packages/admin-ui/scripts/importFromFigma.js

@@ -0,0 +1,55 @@
+const fs = require("fs");
+const { green } = require("chalk");
+const path = require("path");
+const aliasTokensExport = require("./importFromFigma/exports/Alias tokens.json");
+const { normalizeFigmaExport } = require("./importFromFigma/normalizeFigmaExport");
+const {
+    createTailwindConfigCustomizations
+} = require("./importFromFigma/createTailwindConfigCustomizations");
+const { createStylesScss } = require("./importFromFigma/createStylesScss");
+const { formatCode } = require("./importFromFigma/formatCode");
+
+const saveFileAndFormat = async (filePath, content) => {
+    fs.writeFileSync(filePath, content);
+    await formatCode(filePath);
+};
+
+(async () => {
+    const normalizedFigmaExport = normalizeFigmaExport(aliasTokensExport);
+    const tailwindConfigCustomizations = createTailwindConfigCustomizations(normalizedFigmaExport);
+    const stylesScss = createStylesScss(normalizedFigmaExport);
+
+    const paths = {
+        cwd: process.cwd(),
+        normalizedFigmaExport: path.join(__dirname, "../.normalizedFigmaExport.json"),
+        tailwindConfigCustomizations: path.join(__dirname, "../tailwind.config.customizations.js"),
+        stylesScss: path.join(__dirname, "../src/styles2.scss")
+    };
+
+    console.log("Storing...");
+    console.log(
+        `‣ normalized Figma export (${green(
+            path.relative(paths.cwd, paths.normalizedFigmaExport)
+        )}).`
+    );
+    console.log(
+        `‣ Tailwind config customizations (${green(
+            path.relative(paths.cwd, paths.tailwindConfigCustomizations)
+        )}).`
+    );
+    console.log(`‣ styles.scss (${green(path.relative(paths.cwd, paths.stylesScss))}).`);
+
+    await saveFileAndFormat(
+        paths.normalizedFigmaExport,
+        JSON.stringify(normalizedFigmaExport, null, 2)
+    );
+
+    await saveFileAndFormat(
+        paths.tailwindConfigCustomizations,
+        `module.exports = ${JSON.stringify(tailwindConfigCustomizations, null, 2)};`
+    );
+
+    await saveFileAndFormat(paths.stylesScss, stylesScss);
+
+    console.log("Done.");
+})();

packages/admin-ui/scripts/importFromFigma/createStylesScss.js

@@ -0,0 +1,168 @@
+const fs = require("fs");
+
+const createStylesScss = normalizedFigmaExport => {
+    // Generate `styles.scss` file.
+    let stylesScss = fs.readFileSync(__dirname + "/templates/styles.scss.txt", "utf8");
+
+    // 1. Background colors.
+    {
+        let currentBgColorGroup = null;
+        const bgColors = normalizedFigmaExport
+            .filter(item => item.type === "backgroundColor")
+            .map(variable => {
+                const [colorGroup] = variable.variantName.split("-");
+                const cssVar = `--bg-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`;
+
+                if (!currentBgColorGroup) {
+                    currentBgColorGroup = colorGroup;
+                    return cssVar;
+                }
+
+                if (!currentBgColorGroup || currentBgColorGroup !== colorGroup) {
+                    currentBgColorGroup = colorGroup;
+                    return ["", cssVar];
+                }
+                return cssVar;
+            })
+            .flat();
+
+        stylesScss = stylesScss.replace("{BACKGROUND_COLORS}", bgColors.join("\n"));
+    }
+
+    // 2. Text colors.
+    {
+        let currentTextColor = null;
+        const textColors = normalizedFigmaExport
+            .filter(item => item.type === "textColor")
+            .map(variable => {
+                const [colorGroup] = variable.variantName.split("-");
+                const cssVar = `--text-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`;
+
+                if (!currentTextColor) {
+                    currentTextColor = colorGroup;
+                    return cssVar;
+                }
+
+                if (!currentTextColor || currentTextColor !== colorGroup) {
+                    currentTextColor = colorGroup;
+                    return ["", cssVar];
+                }
+                return cssVar;
+            })
+            .flat();
+
+        stylesScss = stylesScss.replace("{TEXT_COLORS}", textColors.join("\n"));
+    }
+
+    // 3. Border colors.
+    {
+        let currentBorderColor = null;
+        const borderColors = normalizedFigmaExport
+            .filter(item => item.type === "borderColor")
+            .map(variable => {
+                const [colorGroup] = variable.variantName.split("-");
+                const cssVar = `--border-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`;
+
+                if (!currentBorderColor) {
+                    currentBorderColor = colorGroup;
+                    return cssVar;
+                }
+
+                if (!currentBorderColor || currentBorderColor !== colorGroup) {
+                    currentBorderColor = colorGroup;
+                    return ["", cssVar];
+                }
+                return cssVar;
+            })
+            .flat();
+
+        stylesScss = stylesScss.replace("{BORDER_COLORS}", borderColors.join("\n"));
+    }
+
+    // 4. Border radius.
+    {
+        const borderRadius = normalizedFigmaExport
+            .filter(item => item.type === "borderRadius")
+            .map(variable => {
+                return `--radius-${variable.variantName}: ${variable.resolvedValue}px;`;
+            });
+
+        stylesScss = stylesScss.replace("{BORDER_RADIUS}", borderRadius.join("\n"));
+    }
+
+    // 5. Border width.
+    {
+        const borderWidth = normalizedFigmaExport
+            .filter(item => item.type === "borderWidth")
+            .map(
+                variable => `--border-width-${variable.variantName}: ${variable.resolvedValue}px;`
+            );
+
+        stylesScss = stylesScss.replace("{BORDER_WIDTH}", borderWidth.join("\n"));
+    }
+
+    // 6. Padding.
+    {
+        const padding = normalizedFigmaExport
+            .filter(item => item.type === "padding")
+            .map(variable => `--padding-${variable.variantName}: ${variable.resolvedValue}px;`);
+
+        stylesScss = stylesScss.replace("{PADDING}", padding.join("\n"));
+    }
+
+    // 7. Elevation.
+    {
+        const elevation = normalizedFigmaExport
+            .filter(item => item.type === "elevation")
+            .map(variable => `--elevation-${variable.variantName}: ${variable.resolvedValue}px;`);
+
+        stylesScss = stylesScss.replace("{ELEVATION}", elevation.join("\n"));
+    }
+
+    // 8. Fill.
+    {
+        let currentFillColor = null;
+        const textColors = normalizedFigmaExport
+            .filter(item => item.type === "fill")
+            .map(variable => {
+                const [colorGroup] = variable.variantName.split("-");
+                const cssVar = `--fill-${variable.variantName}: ${variable.hsla.h}, ${variable.hsla.s}%, ${variable.hsla.l}%;`;
+
+                if (!currentFillColor) {
+                    currentFillColor = colorGroup;
+                    return cssVar;
+                }
+
+                if (!currentFillColor || currentFillColor !== colorGroup) {
+                    currentFillColor = colorGroup;
+                    return ["", cssVar];
+                }
+                return cssVar;
+            })
+            .flat();
+
+        stylesScss = stylesScss.replace("{FILL}", textColors.join("\n"));
+    }
+
+    // 9. Spacing.
+    {
+        const spacing = normalizedFigmaExport
+            .filter(item => item.type === "spacing")
+            .map(variable => `--spacing-${variable.variantName}: ${variable.resolvedValue}px;`);
+
+        stylesScss = stylesScss.replace("{SPACING}", spacing.join("\n"));
+    }
+
+    // 10. Margin.
+    {
+        const margin = normalizedFigmaExport
+            .filter(item => item.type === "margin")
+            .map(variable => `--margin-${variable.variantName}: ${variable.resolvedValue}px;`);
+
+        stylesScss = stylesScss.replace("{MARGIN}", margin.join("\n"));
+    }
+
+    return stylesScss;
+};
+
+module.exports = { createStylesScss };

packages/admin-ui/scripts/importFromFigma/createTailwindConfigCustomizations.js

@@ -0,0 +1,57 @@
+const createTailwindConfigCustomizations = normalizedFigmaExport => {
+    return {
+        backgroundColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "backgroundColor") {
+                const [color, variant] = variantName.split("-");
+                if (!acc[color]) {
+                    acc[color] = {
+                        DEFAULT: `var(--bg-${color}-default)`
+                    };
+                }
+
+                acc[color][variant] = `var(--bg-${variantName})`;
+            }
+            return acc;
+        }, {}),
+        borderColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "borderColor") {
+                const [color, variant] = variantName.split("-");
+                if (!acc[color]) {
+                    acc[color] = {
+                        DEFAULT: `var(--border-${color}-default)`
+                    };
+                }
+
+                acc[color][variant] = `var(--border-${variantName})`;
+            }
+            return acc;
+        }, {}),
+        textColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "textColor") {
+                const [color, variant] = variantName.split("-");
+                if (!acc[color]) {
+                    acc[color] = {
+                        DEFAULT: `var(--text-${color}-default)`
+                    };
+                }
+
+                acc[color][variant] = `var(--text-${variantName})`;
+            }
+            return acc;
+        }, {}),
+        borderRadius: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "borderRadius") {
+                acc[variantName] = `var(--radius-${variantName})`;
+            }
+            return acc;
+        }, {}),
+        borderWidth: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "borderWidth") {
+                acc[variantName] = `var(--border-width-${variantName})`;
+            }
+            return acc;
+        }, {})
+    };
+};
+
+module.exports = { createTailwindConfigCustomizations };