wip

webiny · Oct 24, 2024 · cd42084 · cd42084
1 parent a63753f
commit cd42084
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 79 deletions.
diff --git a/package.json b/package.json
@@ -156,7 +156,6 @@
     "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-import-from-figma": "node packages/admin-ui/scripts/importFromFigma.js"
-
   },
   "husky": {
     "hooks": {

diff --git a/packages/admin-ui/package.json b/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",

diff --git a/packages/admin-ui/scripts/importFromFigma.js b/packages/admin-ui/scripts/importFromFigma.js
@@ -23,7 +23,7 @@ const saveFileAndFormat = async (filePath, content) => {
         cwd: process.cwd(),
         normalizedFigmaExport: path.join(__dirname, "../.normalizedFigmaExport.json"),
         tailwindConfigCustomizations: path.join(__dirname, "../tailwind.config.customizations.js"),
-        stylesScss: path.join(__dirname, "../src/styles2.scss")
+        stylesScss: path.join(__dirname, "../src/styles.scss")
     };
 
     console.log("Storing...");

diff --git a/packages/admin-ui/src/styles.scss b/packages/admin-ui/src/styles.scss
@@ -7,87 +7,149 @@
     // New variables from design.
 
     // Background colors.
-    --bg-neutral-base: HHH, SSS%, LLL%;
-    --bg-neutral-dark: HHH, SSS%, LLL%;
-    --bg-neutral-dimmed: HHH, SSS%, LLL%;
-    --bg-neutral-xstrong: HHH, SSS%, LLL%;
-    --bg-neutral-strong: HHH, SSS%, LLL%;
-    --bg-neutral-muted: HHH, SSS%, LLL%;
-    --bg-neutral-disabled: HHH, SSS%, LLL%;
-    --bg-neutral-light: HHH, SSS%, LLL%;
-    --bg-neutral-subtle: HHH, SSS%, LLL%;
-    --bg-neutral: HHH, SSS%, LLL%;
-
-    --bg-primary: HHH SSS% LLL%;
-    --bg-primary-strong: HHH SSS% LLL%;
-    --bg-primary-xstrong: HHH SSS% LLL%;
-    --bg-primary-muted: HHH SSS% LLL%;
-    --bg-primary-subtle: HHH SSS% LLL%;
-    --bg-primary-disabled: HHH SSS% LLL%;
-
-    --bg-secondary: HHH SSS% LLL%;
-    --bg-secondary-strong: HHH SSS% LLL%;
-    --bg-secondary-xstrong: HHH SSS% LLL%;
-    --bg-secondary-muted: HHH SSS% LLL%;
-    --bg-secondary-subtle: HHH SSS% LLL%;
-    --bg-secondary-disabled: HHH SSS% LLL%;
-
-    --bg-success: HHH SSS% LLL%;
-    --bg-success-strong: HHH SSS% LLL%;
-    --bg-success-xstrong: HHH SSS% LLL%;
-    --bg-success-muted: HHH SSS% LLL%;
-    --bg-success-subtle: HHH SSS% LLL%;
-    --bg-success-disabled: HHH SSS% LLL%;
-
-    --bg-destructive: HHH SSS% LLL%;
-    --bg-destructive-strong: HHH SSS% LLL%;
-    --bg-destructive-xstrong: HHH SSS% LLL%;
-    --bg-destructive-muted: HHH SSS% LLL%;
-    --bg-destructive-subtle: HHH SSS% LLL%;
-    --bg-destructive-disabled: HHH SSS% LLL%;
-
-    --bg-warning: HHH SSS% LLL%;
-    --bg-warning-strong: HHH SSS% LLL%;
-    --bg-warning-xstrong: HHH SSS% LLL%;
-    --bg-warning-muted: HHH SSS% LLL%;
-    --bg-warning-subtle: HHH SSS% LLL%;
-    --bg-warning-disabled: HHH SSS% LLL%;
+    --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%;
 
     // Text colors.
-    --text-primary: HHH SSS% LLL%;
-    --text-subtle: HHH SSS% LLL%;
-    --text-muted: HHH SSS% LLL%;
-    --text-dimmed: HHH SSS% LLL%;
-    --text-disabled: HHH SSS% LLL%;
-    --text-white: HHH SSS% LLL%;
+    --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%;
 
     // Border color.
-    --border-color-neutral-dark: HHH SSS% LLL%;
-    --border-color-neutral-strong: HHH SSS% LLL%;
-    --border-color-neutral-muted: HHH SSS% LLL%;
-    --border-color-neutral-dimmed: HHH SSS% LLL%;
-    --border-color-neutral-subtle: HHH SSS% LLL%;
-    --border-color-accent-default: HHH SSS% LLL%;
-    --border-color-accent-subtle: HHH SSS% LLL%;
-    --border-color-destructive-default: HHH SSS% LLL%;
-    --border-color-success-default: HHH SSS% LLL%;
+    --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-sucess-default: 170, 100%, 37.5%;
 
     // Border radius.
-    --radius-xs: 2px;
-    --radius-sm: 4px;
-    --radius-md: 8px;
     --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;
+
     // Padding.
-    --padding-xs: 4px;
-    --padding-sm: 8px;
-    --padding-md: 16px;
     --padding-lg: 24px;
+    --padding-md: 16px;
+    --padding-sm: 8px;
     --padding-xl: 32px;
+    --padding-xs: 4px;
     --padding-xxl: 48px;
 
+    // Margin.
+    --margin-lg: 24px;
+    --margin-md: 16px;
+    --margin-sm: 8px;
+    --margin-xl: 32px;
+    --margin-xs: 4px;
+    --margin-xxl: 32px;
+
+    // Elevation.
+    --elevation-flat: 0px;
+    --elevation-lg: 16px;
+    --elevation-md: 8px;
+    --elevation-sm: 4px;
+    --elevation-xl: 24px;
+    --elevation-xxl: 48px;
+
+    // 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%;
+
+    // Spacing.
+    --spacing-3xl: 64px;
+    --spacing-lg: 24px;
+    --spacing-md: 16px;
+    --spacing-none: 0px;
+    --spacing-sm: 8px;
+    --spacing-xl: 32px;
+    --spacing-xs: 4px;
+    --spacing-xxl: 48px;
+    --spacing-xxs: 2px;
+
     // Old vars (we'll delete these once we're done).
 
     --background: 0 0% 100%;

diff --git a/yarn.lock b/yarn.lock
@@ -17796,13 +17796,13 @@ __metadata:
     "@webiny/project-utils": 0.0.0
     "@webiny/react-composition": 0.0.0
     "@webiny/utils": 0.0.0
+    chalk: ^4.1.0
     class-variance-authority: ^0.7.0
     clsx: ^2.1.1
-    color-convert: ^2.0.1
-    colors-convert: ^1.4.1
     css-loader: ^6.10.0
     file-loader: 6.2.0
     postcss-loader: ^6.2.1
+    prettier: ^2.8.3
     react: 18.2.0
     rimraf: ^5.0.5
     sass: 1.44.0
@@ -26231,15 +26231,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"colors-convert@npm:^1.4.1":
-  version: 1.4.1
-  resolution: "colors-convert@npm:1.4.1"
-  dependencies:
-    lodash: ^4.17.15
-  checksum: 56b7d2811296459f8dbb8ed52ef9f0967ea7890325b5dbca0f7203f0651c050b13ba9604084ebd5859e73286bdbdaee289f238fe37b2c56516fb6f77780deb99
-  languageName: node
-  linkType: hard
-
 "columnify@npm:1.6.0":
   version: 1.6.0
   resolution: "columnify@npm:1.6.0"