add color theme

craco.config.js

@@ -0,0 +1,18 @@
+const CracoLessPlugin = require('craco-less');
+const colors = require('./src/client/UIKit/colors');
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoLessPlugin,
+      options: {
+        lessLoaderOptions: {
+          lessOptions: {
+            modifyVars: { '@primary-color': colors.blue[0] },
+            javascriptEnabled: true
+          }
+        }
+      }
+    }
+  ]
+};

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@babel/code-frame": "^7.10.4",
     "@babel/helper-split-export-declaration": "^7.11.0",
+    "@craco/craco": "^5.6.4",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -15,6 +16,7 @@
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.5",
     "cors": "^2.8.5",
+    "craco-less": "^1.17.0",
     "express": "^4.17.1",
     "express-node-sspi": "^1.0.1",
     "helmet": "^4.1.0",
@@ -31,7 +33,7 @@
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
+    "react-scripts": "^3.4.3",
     "recompose": "^0.30.0",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.6.2",
@@ -59,16 +61,16 @@
     "webpack-node-externals": "^2.5.1"
   },
   "scripts": {
-    "test": "react-scripts test",
+    "test": "craco test",
     "eject": "react-scripts eject",
     "dev": "cross-env NODE_ENV=development concurrently -p name -c \"yellow,magenta,blue\" -n \"webpack-server,nodemon-server,CRA\" \"yarn dev:server:webpack\" \"yarn dev:server:nodemon\" \"yarn dev:client\"",
-    "dev:client:only": "react-scripts start",
-    "dev:client": "wait-on -l tcp:3001 && react-scripts start",
+    "dev:client:only": "craco start",
+    "dev:client": "wait-on -l tcp:3001 && craco start",
     "dev:server": "concurrently -p name -c \"yellow,magenta\" -n \"webpack-server,nodemon-server\" \"yarn dev:server:webpack\" \"yarn dev:server:nodemon\"",
     "dev:server:webpack": "webpack --config webpack.config.server.js --watch",
     "dev:server:nodemon": "rimraf build/server.js && wait-on -l build/server.js && nodemon build/server.js",
     "build": "yarn build:client && yarn build:server",
-    "build:client": "react-scripts build",
+    "build:client": "craco build",
     "build:server": "cross-env NODE_ENV=production webpack --config webpack.config.server.js"
   },
   "eslintConfig": {

src/client/App.css

@@ -1 +0,0 @@
-@import "~antd/dist/antd.css";

src/client/App.less

@@ -0,0 +1 @@
+@import '~antd/dist/antd.less';

src/client/App.tsx

@@ -4,7 +4,7 @@ import theme from 'client/UIKit/theme';
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
-import './App.css';
+import './App.less';
 import Layout from './Layout';
 import { ConfigProvider } from 'antd';
 import ruRu from 'antd/es/locale/ru_RU';

src/client/Elements/Button.jsx

@@ -2,17 +2,12 @@ import { Button as AntButton } from 'antd';
 import { useStatus } from 'client/hooks/useStatus';
 import { Status } from 'core/types/elements';
 import React from 'react';
-import colors from 'client/UIKit/colors';
 
 const Button = ({ type, size, name, text, onClick }) => {
   const { status } = useStatus(name);
 
   return (
     <AntButton
-      // style={{
-      //   backgroundColor: colors.primary[0],
-      //   borderColor: colors.primary[0],
-      // }}
       type={type}
       size={size}
       disabled={status === Status.Disabled}

src/client/Layout/index.jsx

@@ -43,20 +43,22 @@ const Layout = () => (
 
 const styles = {
   root: {
-    height: '100%',
+    height: '100%'
   },
   flex: { width: '100%' },
   header: {
     position: 'sticky',
     top: 0,
-    // backgroundColor: colors.violet.shades[700],
-    background: 'linear-gradient(90deg, #1C01A9 0%, #3A0185 50%, #580161 100%)',
+    background: `linear-gradient(90deg,
+       ${colors.blueTemp[0]} 0%,
+       ${colors.blueTemp[300]} 50%,
+       ${colors.blueTemp[600]} 100%)`,
     height: '65px',
     padding: '10px 12px',
     paddingLeft: '20px',
     // borderRadius: "0 0 10px 10px",
-    zIndex: 999999,
-  },
+    zIndex: 999999
+  }
 };
 
 export default Layout;

src/client/UIKit/colors.js

@@ -1,36 +1,84 @@
-export default {
-  black: {
-    0: '#000000',
-    100: '#121212',
-    200: '#242424',
-    300: '#373737',
-    400: '#494949',
-    500: '#5B5B5B'
-  },
+const createColorProxy = require('./lib/createColorProxy');
 
-  white: {
-    0: '#FFFFFF',
-    100: '#EDEDED',
-    200: '#DBDBDB',
-    300: '#C8C8C8',
-    400: '#B6B6B6',
-    500: '#A4A4A4'
-  },
-  gray: {
-    0: '#A1A1A1',
-    100: '#959595',
-    200: '#8A8A8A',
-    300: '#7E7E7E',
-    400: '#737373',
-    500: '#676767',
-    600: '#5C5C5C',
-    700: '#505050',
-    800: '#454545',
-    900: '#393939',
-    1000: '#2E2E2E',
-    1100: '#222222'
-  },
-  primary: {
-    0: '#1C01A9'
-  }
+module.exports = {
+  black: createColorProxy(
+    {
+      0: '#000000',
+      100: '#121212',
+      200: '#242424',
+      300: '#373737',
+      400: '#494949',
+      500: '#5B5B5B'
+    },
+    'black',
+    0
+  ),
+
+  white: createColorProxy(
+    {
+      0: '#FFFFFF',
+      100: '#EDEDED',
+      200: '#DBDBDB',
+      300: '#C8C8C8',
+      400: '#B6B6B6',
+      500: '#A4A4A4'
+    },
+    'white',
+    0
+  ),
+
+  gray: createColorProxy(
+    {
+      0: '#A1A1A1',
+      100: '#959595',
+      200: '#8A8A8A',
+      300: '#7E7E7E',
+      400: '#737373',
+      500: '#676767',
+      600: '#5C5C5C',
+      700: '#505050',
+      800: '#454545',
+      900: '#393939',
+      1000: '#2E2E2E',
+      1100: '#222222'
+    },
+    'gray'
+  ),
+
+  blue: createColorProxy(
+    {
+      0: '#1C01A9',
+      100: '#1B019B',
+      200: '#190190',
+      300: '#160184',
+      400: '#140178',
+      500: '#12016C',
+      600: '#100060',
+      700: '#0E0054',
+      800: '#0C0048',
+      900: '#0A003C',
+      1000: '#080030',
+      1100: '#060024',
+      1200: '#040018',
+      1300: '#02000C',
+      1400: '#000000'
+    },
+    'blue',
+    '#1C01A9'
+  ),
+
+  blueTemp: createColorProxy(
+    {
+      0: '#1C01A9',
+      100: '#26019D',
+      200: '#300191',
+      300: '#3A0185',
+      400: '#440179',
+      500: '#4E016D',
+      600: '#580161',
+      700: '#620256'
+    },
+    'blue',
+    '#1C01A9'
+  )
 };

src/client/UIKit/lib/createColorProxy.js

@@ -0,0 +1,24 @@
+/* eslint-disable indent */
+const createColorProxy =
+  process.env.NODE_ENV === 'development' && typeof Proxy !== 'undefined'
+    ? (obj, colorName) => {
+        return new Proxy(obj, {
+          get(target, name) {
+            if (
+              typeof name === 'number' &&
+              !(name in target) &&
+              process.env.NODE_ENV !== 'production'
+            ) {
+              console.error(
+                `You are trying to get color ${colorName}[${name}] that doesn't exist`
+              );
+            }
+
+            return target[name];
+          }
+        });
+      }
+    : x => x;
+/* eslint-enable indent */
+
+module.exports = createColorProxy;

src/client/hooks/useStoreValue.js

@@ -1,7 +1,7 @@
 import { useStores } from './useStores';
 import { useState, useEffect } from 'react';
 import { useDebounce } from 'use-debounce/lib';
-import { DEBOUNCE_DELAY } from 'constants/debounce';
+import { DEBOUNCE_DELAY } from 'core/constants/debounce';
 
 export const useStoreValue = ({ computedValue, valueName }) => {
   const { calculationStore } = useStores();

src/index.tsx

@@ -4,7 +4,7 @@ import ReactDOM from "react-dom";
 import App from "./client/App";
 import "./index.css";
 import * as serviceWorker from "./client/serviceWorker";
-import { API_URL } from "./constants/urls";
+import { API_URL } from "./core/constants/urls";
 
 const isDevelopmentMode = process.env.NODE_ENV === "development";