UIKit: move main colors to .env

.env

@@ -0,0 +1,3 @@
+REACT_APP_COLOR_PRIMARY=#BF3676
+REACT_APP_COLOR_SECONDARY=#FD4047
+REACT_APP_COLOR_TERTIARTY=#FF9112

.gitignore

@@ -13,8 +13,6 @@
 
 # misc
 .DS_Store
-.env
-.env.development
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -53,6 +53,7 @@
     "@types/uuid": "^8.3.0",
     "commitizen": "^4.2.3",
     "cz-conventional-changelog": "^3.3.0",
+    "dotenv-cli": "^4.1.1",
     "source-map-explorer": "^2.5.2"
   },
   "resolutions": {
@@ -61,7 +62,7 @@
   "scripts": {
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "start": "craco start",
+    "start": "dotenv -e .env craco start",
     "build": "craco build",
     "eslint": "eslint ./src",
     "eslint:fix": "eslint ./src --fix",

src/client/UIKit/colors.js

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-
 const colors = {
   BLACK: {
     0: '#000000',
@@ -21,36 +18,12 @@ const colors = {
     400: '#B6B6B6',
     500: '#A4A4A4',
   },
-
-  BLUE: {
-    0: '#1C01A9',
-    100: '#1B019B',
-    200: '#190190',
-    300: '#160184',
-    400: '#140178',
-    500: '#12016C',
-  },
-
-  PURPLE: {
-    0: '#300191',
-    100: '#3A0185',
-    200: '#440179',
-    300: '#4E016D',
-    400: '#580161',
-    500: '#620256',
-  },
 };
 
 const colorTheme = {
-  primary: process.env.REACT_APP_PRODUCTION
+  primary: process.env.REACT_APP_COLOR_PRIMARY,
-    ? colors.BLUE[0]
+  secondary: process.env.REACT_APP_COLOR_SECONDARY,
-    : colors.PURPLE[300],
+  tertiary: process.env.REACT_APP_COLOR_TERTIARTY,
-  secondary: process.env.REACT_APP_PRODUCTION
-    ? colors.PURPLE[100]
-    : colors.PURPLE[400],
-  tertiary: process.env.REACT_APP_PRODUCTION
-    ? colors.PURPLE[400]
-    : colors.PURPLE[0],
 };
 
 module.exports = Object.assign(colors, colorTheme);