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

@@ -1,88 +1,9 @@
-// OLD
+// OLD - Will probably be removed.
 @import "~@webiny/app-serverless-cms/styles.scss";
 
 // NEW
+// Base styles.
 @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;
-  }
-}
+// The default theme. Learn more: https://webiny.link/admin-themes.
+@import "~@webiny/admin-ui/theme.scss";

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/.storybook/preview.ts

@@ -1,6 +1,6 @@
 import type { Preview } from "@storybook/react";
 
-import "../src/styles.scss";
+import "../src/theme.scss";
 
 const preview: Preview = {
     parameters: {

packages/admin-ui/DEVELOPMENT.md

@@ -0,0 +1,24 @@
+# Overview
+This document covers different aspects of the development process for the `@webiny/admin-ui` package.
+
+## Tailwind CSS
+Webiny's Admin app uses Tailwind CSS for styling.
+
+### Tailwind Configuration
+Tailwind CSS is configured as usual, via the [`tailwind.config.js`](./tailwind.config.js) file. Among other things, this file defines the default Webiny theme, which is based on Webiny's design system. More on this in the next section.
+
+### Default Theme
+One of the main things we define via the [`tailwind.config.js`](./tailwind.config.js) file is the default theme, which is based on Webiny's design system, and which can be found in this [Figma file](https://www.figma.com/file/f0QUDWX37Kt5X53eltTRiT/Webiny-Design-System?type=design&node-id=127-26352&mode=design&t=nhoOU7NamjWvImoW-0). 
+
+But, do note that all the default theme-values are not actually defined in the `tailwind.config.js` file, but rather in the `tailwind.config.theme.js` file, which is a file that is generated from a Figma export (more on this in the next section).
+
+### Figma To Code
+Since manually transferring values from the mentioned Figma file into code has shown to be a very cumbersome process, we've created a script that basically takes a Figma export and generates all the necessary Tailwind CSS configuration. Note that when we say "Figma export", we basically mean an export of Alias tokens, created by this [Export/Import Variables](https://www.figma.com/community/plugin/1256972111705530093/export-import-variables) plugin.
+
+Once the export is downloaded, we place it in `packages/admin-ui/scripts/importFromFigma/exports/Alias tokens.json`, and then we run the following command from project root:
+
+```bash
+yarn webiny-admin-import-from-figma
+```
+
+This will generate a new `tailwind.config.theme.js` file, which will contain all the necessary Tailwind CSS configuration. On top of that, it will also generate a `src/styles.scss` file, which contains actual values for CSS variables that are referenced in the `tailwind.config.theme.js` file.

packages/admin-ui/README.md

@@ -1,15 +1,10 @@
-# @webiny/admin-ui
-[![](https://img.shields.io/npm/dw/@webiny/admin-ui.svg)](https://www.npmjs.com/package/@webiny/admin-ui) 
-[![](https://img.shields.io/npm/v/@webiny/admin-ui.svg)](https://www.npmjs.com/package/@webiny/admin-ui)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-
-## Install
-```
-npm install --save @webiny/admin-ui
-```
-
-Or if you prefer yarn: 
-```
-yarn add @webiny/admin-ui
-```
+# `@webiny/admin-ui`
+
+This package contains React components and styles for Webiny's Admin app.
+
+> [!NOTE]
+> This package is included in every Webiny project by default, and it's not meant to be used as a standalone package.
+
+
+
+

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,53 @@
+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 { createTailwindConfigTheme } = require("./importFromFigma/createTailwindConfigTheme");
+const { createThemeScss } = require("./importFromFigma/createThemeScss");
+const { formatCode } = require("./importFromFigma/formatCode");
+
+const saveFileAndFormat = async (filePath, content) => {
+    fs.writeFileSync(filePath, content);
+    await formatCode(filePath);
+};
+
+(async () => {
+    const normalizedFigmaExport = normalizeFigmaExport(aliasTokensExport);
+    const tailwindConfigTheme = createTailwindConfigTheme(normalizedFigmaExport);
+    const stylesScss = createThemeScss(normalizedFigmaExport);
+
+    const paths = {
+        cwd: process.cwd(),
+        normalizedFigmaExport: path.join(__dirname, "../.normalizedFigmaExport.json"),
+        createTailwindConfigTheme: path.join(__dirname, "../tailwind.config.theme.js"),
+        stylesScss: path.join(__dirname, "../src/theme.scss")
+    };
+
+    console.log("Storing...");
+    console.log(
+        `‣ normalized Figma export (${green(
+            path.relative(paths.cwd, paths.normalizedFigmaExport)
+        )}).`
+    );
+    console.log(
+        `‣ Tailwind config theme (${green(
+            path.relative(paths.cwd, paths.createTailwindConfigTheme)
+        )}).`
+    );
+    console.log(`‣ styles.scss (${green(path.relative(paths.cwd, paths.stylesScss))}).`);
+
+    await saveFileAndFormat(
+        paths.normalizedFigmaExport,
+        JSON.stringify(normalizedFigmaExport, null, 2)
+    );
+
+    await saveFileAndFormat(
+        paths.createTailwindConfigTheme,
+        `module.exports = ${JSON.stringify(tailwindConfigTheme, null, 2)};`
+    );
+
+    await saveFileAndFormat(paths.stylesScss, stylesScss);
+
+    console.log("Done.");
+})();