Admin UI - Tokens

.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

apps/admin/src/App.scss

@@ -5,84 +5,3 @@
 @import "~@webiny/admin-ui/styles.scss";
 
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --primary: 14.5 95.6% 55.9%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 8px;
-
-    --font-sans: "Inter", "Source Sans Pro", "Open Sans", sans-serif;
-  }
-
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 8px;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-}

package.json

@@ -154,7 +154,8 @@
     "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/package.json

@@ -41,9 +41,11 @@
     "@types/react": "18.2.79",
     "@webiny/cli": "0.0.0",
     "@webiny/project-utils": "0.0.0",
+    "chalk": "^4.1.0",
     "css-loader": "^6.10.0",
     "file-loader": "6.2.0",
     "postcss-loader": "^6.2.1",
+    "prettier": "^2.8.3",
     "rimraf": "^5.0.5",
     "sass": "1.44.0",
     "storybook": "7.6.20",

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/styles.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,133 @@
+const fs = require("fs");
+
+const createStylesScss = normalizedFigmaExport => {
+    // Generate `styles.scss` file.
+    let stylesScss = fs.readFileSync(__dirname + "/templates/styles.scss.txt", "utf8");
+
+    // 1. Background color.
+    {
+        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_COLOR}", bgColors.join("\n"));
+    }
+
+    // 2. Border color.
+    {
+        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_COLOR}", borderColors.join("\n"));
+    }
+
+    // 3. 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"));
+    }
+
+    // 4. 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"));
+    }
+
+    // 5. Margin.
+    {
+        const margin = normalizedFigmaExport
+            .filter(item => item.type === "margin")
+            .map(variable => `--margin-${variable.variantName}: ${variable.resolvedValue}px;`);
+
+        stylesScss = stylesScss.replace("{MARGIN}", margin.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. Spacing.
+    {
+        const spacing = normalizedFigmaExport
+            .filter(item => item.type === "spacing")
+            .map(variable => `--spacing-${variable.variantName}: ${variable.resolvedValue}px;`);
+
+        stylesScss = stylesScss.replace("{SPACING}", spacing.join("\n"));
+    }
+
+    // 8. Text color.
+    {
+        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_COLOR}", textColors.join("\n"));
+    }
+    return stylesScss;
+};
+
+module.exports = { createStylesScss };

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

@@ -0,0 +1,75 @@
+const createTailwindConfigCustomizations = normalizedFigmaExport => {
+    return {
+        backgroundColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "backgroundColor") {
+                const [color, variant] = variantName.split("-");
+                if (!acc[color]) {
+                    acc[color] = {
+                        DEFAULT: `hsl(var(--bg-${color}-default))`
+                    };
+                }
+
+                acc[color][variant] = `hsl(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: `hsl(var(--border-${color}-default))`
+                    };
+                }
+
+                acc[color][variant] = `hsl(var(--border-${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;
+        }, {}),
+        margin: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "margin") {
+                acc[variantName] = `var(--margin-${variantName})`;
+            }
+            return acc;
+        }, {}),
+        padding: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "padding") {
+                acc[variantName] = `var(--padding-${variantName})`;
+            }
+            return acc;
+        }, {}),
+        spacing: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "spacing") {
+                acc[variantName] = `var(--spacing-${variantName})`;
+            }
+            return acc;
+        }, {}),
+        textColor: normalizedFigmaExport.reduce((acc, { type, variantName }) => {
+            if (type === "textColor") {
+                const [color, variant] = variantName.split("-");
+                if (!acc[color]) {
+                    acc[color] = {
+                        DEFAULT: `hsl(var(--text-${color}-default))`
+                    };
+                }
+
+                acc[color][variant] = `hsl(var(--text-${variantName}))`;
+            }
+            return acc;
+        }, {}),
+    };
+};
+
+module.exports = { createTailwindConfigCustomizations };