constants: add colors

env: add NEXT_PUBLIC_USE_DEV_COLORS

.env

@@ -1,11 +1,9 @@
+####### COMMON #######
+NEXT_PUBLIC_USE_DEV_COLORS=
+
 ####### USERS ########
 USERS_SUPER=["akalinina","vchikalkin"]
 
-####### Colors ########
-NEXT_PUBLIC_COLOR_PRIMARY=
-NEXT_PUBLIC_COLOR_SECONDARY=
-NEXT_PUBLIC_COLOR_TERTIARTY=
-
 ####### URLS ########
 NEXT_PUBLIC_URL_GET_USER_DIRECT=
 NEXT_PUBLIC_URL_CRM_GRAPHQL_DIRECT=

@packages/ui/colors.js

@@ -1,11 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { createGlobalStyle } from 'styled-components';
-
-export const GlobalStyle = createGlobalStyle`
-:root {
-    --color-background: rgb(240, 240, 240);
-    --color-primary: ${process.env.NEXT_PUBLIC_COLOR_PRIMARY};
-    --color-secondary: ${process.env.NEXT_PUBLIC_COLOR_SECONDARY};
-    --color-tertiarty: ${process.env.NEXT_PUBLIC_COLOR_TERTIARTY};
-    } 
-`;

config/schema/env.js

@@ -2,13 +2,14 @@
 const { z } = require('zod');
 
 const envSchema = z.object({
+  NEXT_PUBLIC_USE_DEV_COLORS: z
+    .unknown()
+    .optional()
+    .transform((val) => !!val),
   NEXT_PUBLIC_BASE_PATH: z.string().optional(),
   NEXT_PUBLIC_URL_CRM_GRAPHQL_DIRECT: z.string(),
   NEXT_PUBLIC_URL_GET_USER_DIRECT: z.string(),
   NEXT_PUBLIC_URL_CORE_FINGAP_DIRECT: z.string(),
-  NEXT_PUBLIC_COLOR_PRIMARY: z.string(),
-  NEXT_PUBLIC_COLOR_SECONDARY: z.string(),
-  NEXT_PUBLIC_COLOR_TERTIARTY: z.string(),
 });
 
 module.exports = envSchema;

config/schema/runtime-config.js

@@ -3,9 +3,7 @@ const envSchema = require('./env');
 
 const publicRuntimeConfigSchema = envSchema.pick({
   NEXT_PUBLIC_BASE_PATH: true,
-  NEXT_PUBLIC_COLOR_PRIMARY: true,
-  NEXT_PUBLIC_COLOR_SECONDARY: true,
-  NEXT_PUBLIC_COLOR_TERTIARTY: true,
+  NEXT_PUBLIC_USE_DEV_COLORS: true,
 });
 
 const serverRuntimeConfigSchema = envSchema.pick({

constants/colors.js

@@ -0,0 +1,15 @@
+const COLORS_PROD = {
+  COLOR_PRIMARY: '#1C01A9',
+  COLOR_SECONDARY: '#3A0185',
+  COLOR_TERTIARTY: '#580161',
+};
+const COLORS_DEV = {
+  COLOR_PRIMARY: '#BF3676',
+  COLOR_SECONDARY: '#FD4047',
+  COLOR_TERTIARTY: '#FF9112',
+};
+
+module.exports = {
+  COLORS_PROD,
+  COLORS_DEV,
+};

next.config.js

@@ -3,6 +3,7 @@
 const { withPlugins } = require('next-composed-plugins');
 const withLess = require('next-with-less');
 const withGraphQL = require('next-plugin-graphql');
+const { COLORS_DEV, COLORS_PROD } = require('./constants/colors');
 const envSchema = require('./config/schema/env');
 const urls = require('./constants/urls');
 const { devices } = require('./@packages/ui/screens');
@@ -48,12 +49,16 @@ const nextConfig = {
 
 const plugins = [withLess, withGraphQL];
 
+const colorPrimary = env.NEXT_PUBLIC_USE_DEV_COLORS
+  ? COLORS_DEV.COLOR_PRIMARY
+  : COLORS_PROD.COLOR_PRIMARY;
+
 const config = {
   ...nextConfig,
   lessLoaderOptions: {
     lessOptions: {
       modifyVars: {
-        'primary-color': env.NEXT_PUBLIC_COLOR_PRIMARY,
+        'primary-color': colorPrimary,
       },
     },
   },

pages/_app.jsx

@@ -7,8 +7,8 @@ import 'normalize.css';
 import { useMemo } from 'react';
 import StoreProvider from 'stores/Provider';
 import { ThemeProvider } from 'styled-components';
+import { GlobalStyle } from 'styles/global-style';
 import { trpcClient } from 'trpc/client';
-import { GlobalStyle } from 'ui/colors';
 import { ConfigProvider, ru_RU } from 'ui/elements/config';
 import 'ui/elements/styles/antd.less';
 import theme from 'ui/theme';

styles/colors.js

@@ -0,0 +1,14 @@
+import getConfig from 'next/config';
+import { publicRuntimeConfigSchema } from '../config/schema/runtime-config';
+import { COLORS_DEV, COLORS_PROD } from '../constants/colors';
+
+const { publicRuntimeConfig } = getConfig();
+const { NEXT_PUBLIC_USE_DEV_COLORS } = publicRuntimeConfigSchema.parse(publicRuntimeConfig);
+
+export default function getColors() {
+  if (NEXT_PUBLIC_USE_DEV_COLORS) {
+    return COLORS_DEV;
+  }
+
+  return COLORS_PROD;
+}

styles/global-style.js

@@ -0,0 +1,14 @@
+/* eslint-disable import/prefer-default-export */
+import { createGlobalStyle } from 'styled-components';
+import getColors from './colors';
+
+const { COLOR_PRIMARY, COLOR_SECONDARY, COLOR_TERTIARTY } = getColors();
+
+export const GlobalStyle = createGlobalStyle`
+:root {
+    --color-background: rgb(240, 240, 240);
+    --color-primary: ${COLOR_PRIMARY};
+    --color-secondary: ${COLOR_SECONDARY};
+    --color-tertiarty: ${COLOR_TERTIARTY};
+    } 
+`;