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

@@ -8,81 +8,204 @@
 
 @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;
+    // Background colors.
+    --bg-destructive-default: 0, 71%, 48.6%;
+    --bg-destructive-disabled: 1, 83.2%, 76.7%;
+    --bg-destructive-muted: 0, 66.3%, 62.7%;
+    --bg-destructive-strong: 0, 76.4%, 38.2%;
+    --bg-destructive-subtle: 0, 100%, 96.9%;
+    --bg-destructive-xstrong: 0, 83.6%, 21.6%;
+
+    --bg-neutral-base: 0, 0%, 100%;
+    --bg-neutral-dark: 214, 12.3%, 11.2%;
+    --bg-neutral-dimmed: 220, 11.1%, 94.7%;
+    --bg-neutral-disabled: 220, 11.1%, 94.7%;
+    --bg-neutral-light: 210, 14.3%, 97.3%;
+    --bg-neutral-muted: 225, 16.7%, 90.6%;
+    --bg-neutral-strong: 219, 12.1%, 77.3%;
+    --bg-neutral-subtle: 180, 11.1%, 98.2%;
+    --bg-neutral-xstrong: 213, 10.1%, 38.8%;
+
+    --bg-primary-default: 15, 95.6%, 55.9%;
+    --bg-primary-disabled: 14, 94.7%, 77.8%;
+    --bg-primary-muted: 14, 94.7%, 77.8%;
+    --bg-primary-strong: 14, 94.1%, 40%;
+    --bg-primary-subtle: 5, 100%, 97.5%;
+    --bg-primary-xstrong: 14, 100%, 25.5%;
+
+    --bg-secondary-default: 170, 100%, 37.5%;
+    --bg-secondary-disabled: 169, 59.8%, 64.9%;
+    --bg-secondary-muted: 169, 59.8%, 64.9%;
+    --bg-secondary-strong: 165, 100%, 28.6%;
+    --bg-secondary-subtle: 170, 57.1%, 91.8%;
+    --bg-secondary-xstrong: 160, 100%, 14.5%;
+
+    --bg-success-default: 170, 100%, 37.5%;
+    --bg-success-disabled: 168, 58.1%, 79.4%;
+    --bg-success-muted: 169, 59.8%, 64.9%;
+    --bg-success-strong: 165, 100%, 28.6%;
+    --bg-success-subtle: 170, 57.1%, 91.8%;
+    --bg-success-xstrong: 160, 100%, 14.5%;
+
+    --bg-warning-default: 45, 95.7%, 63.7%;
+    --bg-warning-disabled: 45, 96.9%, 87.5%;
+    --bg-warning-muted: 45, 95.1%, 75.9%;
+    --bg-warning-strong: 45, 100%, 37.3%;
+    --bg-warning-subtle: 43, 100%, 96.5%;
+    --bg-warning-xstrong: 45, 98.2%, 21.6%;
+
+    // Border color.
+    --border-accent-default: 15, 95.6%, 55.9%;
+    --border-accent-dimmed: 15, 94.2%, 86.5%;
+    --border-accent-subtle: 5, 100%, 97.5%;
+
+    --border-destructive-default: 0, 71%, 48.6%;
+
+    --border-neutral-black: 214, 12.3%, 11.2%;
+    --border-neutral-dark: 215, 9.6%, 51%;
+    --border-neutral-dimmed: 220, 11.1%, 94.7%;
+    --border-neutral-muted: 219, 12.1%, 77.3%;
+    --border-neutral-strong: 218, 10.7%, 65.3%;
+    --border-neutral-subtle: 210, 14.3%, 97.3%;
+
+    --border-success-default: 170, 100%, 37.5%;
+
+    // Border radius.
+    --radius-lg: 16px;
+    --radius-md: 8px;
+    --radius-sm: 4px;
+    --radius-xl: 24px;
+    --radius-xs: 2px;
+    --radius-xxl: 36px;
+
+    // Border width.
+    --border-width-md: 2px;
+    --border-width-sm: 1px;
+
+    // Fill.
+    --fill-accent-default: 15, 95.6%, 55.9%;
+
+    --fill-destructive: 0, 71%, 48.6%;
+
+    --fill-neutral-base: 0, 0%, 100%;
+    --fill-neutral-dark: 215, 11.1%, 21.2%;
+    --fill-neutral-disabled: 219, 12.1%, 77.3%;
+    --fill-neutral-strong: 218, 10.7%, 65.3%;
+    --fill-neutral-xstrong: 213, 10.1%, 38.8%;
+
+    --fill-success: 170, 100%, 37.5%;
+
+    --fill-warning: 45, 95.7%, 63.7%;
+
+    // Font.
+    --font-sans: "Inter", sans-serif;
+
+    // Margin.
+    --margin-lg: 24px;
+    --margin-md: 16px;
+    --margin-sm: 8px;
+    --margin-xl: 32px;
+    --margin-xs: 4px;
+    --margin-xxl: 32px;
+
+    // Padding.
+    --padding-lg: 24px;
+    --padding-md: 16px;
+    --padding-md-plus: 20px;
+    --padding-none: 0px;
+    --padding-sm: 8px;
+    --padding-sm-extra: 12px;
+    --padding-sm-plus: 10px;
+    --padding-xl: 32px;
+    --padding-xs: 4px;
+    --padding-xs-plus: 6px;
+    --padding-xxl: 48px;
+    --padding-xxs: 2px;
+
+    // Shadow.
+    --shadow-flat: 0px;
+    --shadow-lg: 16px;
+    --shadow-md: 8px;
+    --shadow-sm: 4px;
+    --shadow-xl: 24px;
+    --shadow-xxl: 48px;
+
+    // Spacing.
+    --spacing-3xl: 64px;
+    --spacing-lg: 24px;
+    --spacing-md: 16px;
+    --spacing-md-plus: 20px;
+    --spacing-none: 0px;
+    --spacing-sm: 8px;
+    --spacing-sm-extra: 12px;
+    --spacing-sm-plus: 10px;
+    --spacing-xl: 32px;
+    --spacing-xs: 4px;
+    --spacing-xs-plus: 6px;
+    --spacing-xxl: 48px;
+    --spacing-xxs: 2px;
+
+    // Text color.
+    --text-accent-muted: 14, 94.7%, 77.8%;
+    --text-accent-primary: 15, 95.6%, 55.9%;
+    --text-accent-subtle: 5, 100%, 97.5%;
+
+    --text-destructive-muted: 1, 83.2%, 76.7%;
+    --text-destructive-primary: 0, 71%, 48.6%;
+    --text-destructive-subtle: 0, 100%, 96.9%;
+
+    --text-neutral-dimmed: 219, 12.1%, 77.3%;
+    --text-neutral-disabled: 219, 12.1%, 77.3%;
+    --text-neutral-light: 0, 0%, 100%;
+    --text-neutral-muted: 218, 10.7%, 65.3%;
+    --text-neutral-primary: 214, 12.3%, 11.2%;
+    --text-neutral-strong: 213, 10.1%, 38.8%;
+
+    --text-sucess-muted: 169, 59.8%, 64.9%;
+    --text-sucess-primary: 170, 100%, 37.5%;
+    --text-sucess-subtle: 170, 57.1%, 91.8%;
+
+    // Text size.
+    // Headings.
+    --text-h1: 3rem;
+    --text-h1-leading: 3.75rem;
+    --text-h1-tracking: -2%;
+
+    --text-h2: 2.25rem;
+    --text-h2-leading: 2.75rem;
+    --text-h2-tracking: -2%;
+
+    --text-h3: 1.875rem;
+    --text-h3-leading: 2.375rem;
+    --text-h3-tracking: inherit;
+
+    --text-h4: 1.25rem;
+    --text-h4-leading: 1.875rem;
+    --text-h4-tracking: inherit;
+
+    --text-h5: 1rem;
+    --text-h5-leading: 1.5rem;
+    --text-h5-tracking: inherit;
+
+    --text-h6: 0.875rem;
+    --text-h6-leading: 1.25rem;
+    --text-h6-tracking: inherit;
+
+    // Text.
+    --text-xl: 1.25rem;
+    --text-xl-leading: 1.875rem;
+    --text-xl-tracking: inherit;
+
+    --text-lg: 1rem;
+    --text-lg-leading: 1.5rem;
+    --text-lg-tracking: inherit;
+
+    --text-md: 0.875rem;
+    --text-md-leading: 1.375rem;
+    --text-md-tracking: inherit;
+
+    --text-sm: 0.75rem;
+    --text-sm-leading: 1.125rem;
+    --text-sm-tracking: inherit;
   }
 }

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,5 +1,6 @@
 import type { Preview } from "@storybook/react";
 
+import "./styles.scss";
 import "../src/styles.scss";
 
 const preview: Preview = {

packages/admin-ui/.storybook/styles.scss

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");

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",