colors refactor

2021-04-15 13:21:03 +03:00 · 2021-04-15 13:21:03 +03:00 · 9360eb848c
commit 9360eb848c
parent 48719e5029
12 changed files with 39 additions and 256 deletions
--- a/craco.config.js
+++ b/craco.config.js
@ -1,3 +1,5 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-var-requires */
 const CracoLessPlugin = require('craco-less');
 const colors = require('./src/client/UIKit/colors');

@ -11,7 +13,7 @@ module.exports = {
      options: {
        lessLoaderOptions: {
          lessOptions: {
-            modifyVars: { '@primary-color': colors.primaryColor },
+            modifyVars: { '@primary-color': colors.primary },
            javascriptEnabled: true,
          },
        },
--- a/package.json
+++ b/package.json
@ -43,6 +43,7 @@
    "@types/styled-system": "^5.1.11",
    "@typescript-eslint/eslint-plugin": "^4.22.0",
    "@typescript-eslint/parser": "^4.22.0",
+    "dotenv": "^8.2.0",
    "eslint": "^7.24.0",
    "eslint-plugin-react": "^7.23.2"
  },
--- a/src/client/Containers/Calculation/lib/renderSections.js
+++ b/src/client/Containers/Calculation/lib/renderSections.js
@ -82,7 +82,7 @@ export const renderGroups = ({ groups }) => {
          <AntDivider
            style={{
              margin: '16px 0',
-              color: colors.primaryColor,
+              color: colors.primary,
              fontSize: '0.95rem',
            }}
          >
--- a/src/client/Elements/Background.jsx
+++ b/src/client/Elements/Background.jsx
@ -4,7 +4,7 @@ import mq from 'client/UIKit/mq';
 import styled from 'styled-components';

 const Background = styled(Box)`
-  background: ${colors.white[0]};
+  background: ${colors.WHITE[0]};

  padding: 4px 10px;
  ${mq.desktop`
--- a/src/client/Elements/Table.jsx
+++ b/src/client/Elements/Table.jsx
@ -29,7 +29,7 @@ const TableWrapper = styled(Box)`
      }
      transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
      :hover {
-        background: ${colors.white[25]};
+        background: ${colors.WHITE[25]};
      }
    }

@ -37,7 +37,7 @@ const TableWrapper = styled(Box)`
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
      text-align: left;
-      background: ${colors.white[25]};
+      background: ${colors.WHITE[25]};
      transition: background 0.3s ease;
      padding: 16px;
    }
@ -49,7 +49,7 @@ const TableWrapper = styled(Box)`
      `}
      position: relative;
      overflow-wrap: break-word;
-      border-bottom: 1px solid ${colors.white[50]};
+      border-bottom: 1px solid ${colors.WHITE[50]};
    }

    td {
--- a/src/client/Elements/Text.jsx
+++ b/src/client/Elements/Text.jsx
@ -8,9 +8,9 @@ export const PrimaryText = styled.p`
 `;

 export const SecondaryText = styled(PrimaryText)`
-  color: ${colors.black[500]};
+  color: ${colors.BLACK[500]};
 `;

 export const SecondaryColoredText = styled(SecondaryText)`
-  color: ${colors.secondaryColor};
+  color: ${colors.secondary};
 `;
--- a/src/client/Layout/Auth.jsx
+++ b/src/client/Layout/Auth.jsx
@ -3,12 +3,13 @@ import Cookies from 'js-cookie';
 import styled from 'styled-components';
 import mq from 'client/UIKit/mq';
 import { Flex } from 'client/UIKit/grid';
+import colors from 'client/UIKit/colors';

 const UserText = styled.span`
  margin: 0;
  padding: 0;
  text-transform: uppercase;
-  color: white;
+  color: ${colors.WHITE[0]};
  font-size: 0.5rem;
  font-family: 'Montserrat';
  font-weight: 500;
@ -26,7 +27,7 @@ const Logout = styled.a`
  margin: 0;
  padding: 0;
  text-transform: uppercase;
-  color: white;
+  color: ${colors.WHITE[0]};
  font-size: 0.45rem;
  font-family: 'Montserrat';
  font-weight: 500;
--- a/src/client/Layout/Header.jsx
+++ b/src/client/Layout/Header.jsx
@ -11,9 +11,9 @@ const HeaderContent = styled(Flex)`
  justify-content: space-between;
  align-items: flex-start;
  background: ${`linear-gradient(90deg,
-    ${colors.primaryColor} 0%,
-    ${colors.secondaryColor} 50%,
-    ${colors.tertiaryColor} 100%)`};
+    ${colors.primary} 0%,
+    ${colors.secondary} 50%,
+    ${colors.tertiary} 100%)`};
    padding: 10px 12px;
    ${mq.desktop`
    padding-left: 20px;
--- a/src/client/Layout/Logo.jsx
+++ b/src/client/Layout/Logo.jsx
@ -2,6 +2,7 @@ import mq from 'client/UIKit/mq';
 import React from 'react';
 import styled from 'styled-components';
 import { Flex } from 'client/UIKit/grid';
+import colors from 'client/UIKit/colors';

 const LOGO_NAME = 'logo-1line-AL-white-h100-short.png';

@ -17,7 +18,7 @@ const LogoText = styled.h3`
  margin: 0;
  margin-top: -3px;
  text-transform: uppercase;
-  color: white;
+  color: ${colors.white[0]};
  font-size: 0.95rem;
  font-family: 'Montserrat';
  font-weight: 500;
--- a/src/client/UIKit/colors.js
+++ b/src/client/UIKit/colors.js
@ -1,7 +1,8 @@
+/* eslint-disable no-undef */
 const createColorProxy = require('./lib/createColorProxy');

 const colors = {
-  black: createColorProxy(
+  BLACK: createColorProxy(
    {
      0: '#000000',
      100: '#121212',
@ -14,7 +15,7 @@ const colors = {
    0,
  ),

-  white: createColorProxy(
+  WHITE: createColorProxy(
    {
      0: '#FFFFFF',
      25: '#FAFAFA',
@ -29,25 +30,7 @@ const colors = {
    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(
+  BLUE: createColorProxy(
    {
      0: '#1C01A9',
      100: '#1B019B',
@ -55,30 +38,19 @@ const colors = {
      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(
+  PURPLE: createColorProxy(
    {
-      0: '#1C01A9',
-      100: '#26019D',
-      200: '#300191',
-      300: '#3A0185',
-      400: '#440179',
-      500: '#4E016D',
-      600: '#580161',
-      700: '#620256',
+      0: '#300191',
+      100: '#3A0185',
+      200: '#440179',
+      300: '#4E016D',
+      400: '#580161',
+      500: '#620256',
    },
    'blue',
    '#1C01A9',
@ -86,16 +58,15 @@ const colors = {
 };

 const colorTheme = {
-  primaryColor:
-    process.env.REACT_APP_CRM === 'dev' ? colors.blueTemp[500] : colors.blue[0],
-  secondaryColor:
-    process.env.REACT_APP_CRM === 'dev'
-      ? colors.blueTemp[600]
-      : colors.blueTemp[300],
-  tertiaryColor:
-    process.env.REACT_APP_CRM === 'dev'
-      ? colors.blueTemp[200]
-      : colors.blueTemp[600],
+  primary: process.env.REACT_APP_PRODUCTION
+    ? colors.BLUE[0]
+    : colors.PURPLE[300],
+  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);
--- a/src/client/UIKit/fonts.js
+++ b/src/client/UIKit/fonts.js
@ -1,148 +0,0 @@
-import styled, { css } from 'styled-components';
-import mq from './mq';
-import { BOX_STYLED_SYSTEM, TEXT_STYLED_SYSTEM, Text } from './grid';
-import typographyStyle from './lib/typographyStyle';
-import colors from './colors';
-
-export const WITH_COUNTER = css`
-  content: attr(data-counter);
-  margin-left: 5px;
-  color: ${colors.gray['800']};
-  font-size: 12px;
-  vertical-align: top;
-`;
-
-export const TYPOGRAPHY_STYLES = {
-  h1: typographyStyle([40, 45, 66, 68, 70], 1.05),
-  h1by2: typographyStyle([25, 30, 46, 48, 50], 1.05),
-  h2: typographyStyle([23, 23, 32, 36, 38], 1.25),
-  h3: typographyStyle([19, 19, 20, 22, 24], 1.4),
-  h5: typographyStyle([21, 21, 28, 30, 32], 1.2),
-  text: typographyStyle([14, 14, 16], 1.55),
-};
-
-export const H1 = styled(Text)`
-  ${TYPOGRAPHY_STYLES.h1};
-`;
-H1.displayName = 'H1';
-H1.defaultProps = {
-  as: 'h1',
-  m: 0,
-  fontWeight: 700,
-};
-
-export const H1by2 = styled(Text)`
-  ${TYPOGRAPHY_STYLES.h1by2};
-`;
-H1by2.displayName = 'H1by2';
-H1by2.defaultProps = {
-  as: 'div',
-  fontWeight: 700,
-};
-
-export const H2 = styled(Text)`
-  ${TYPOGRAPHY_STYLES.h2};
-`;
-H2.displayName = 'H2';
-H2.defaultProps = {
-  as: 'h2',
-  m: 0,
-  fontWeight: 400,
-};
-
-export const H3 = styled(Text)`
-  ${TYPOGRAPHY_STYLES.h3};
-`;
-H3.displayName = 'H3';
-H3.defaultProps = {
-  as: 'h3',
-  m: 0,
-  fontWeight: 700,
-  textTransform: 'uppercase',
-};
-
-export const H4 = styled(Text)`
-  ${TYPOGRAPHY_STYLES.h2};
-`;
-H4.displayName = 'H4';
-H4.defaultProps = {
-  as: 'h4',
-  m: 0,
-  fontWeight: 700,
-};
-
-export const H5 = styled(Text)`
-  ${TYPOGRAPHY_STYLES.h5};
-`;
-H5.displayName = 'H5';
-H5.defaultProps = {
-  as: 'h5',
-  m: 0,
-  fontWeight: 700,
-};
-
-export const MiniHeader = styled(Text)`
-  font-size: 1rem;
-  text-transform: uppercase;
-
-  ${mq.tablet`font-size: 1.2rem`};
-`;
-
-MiniHeader.defaultProps = {
-  fontWeight: 400,
-};
-
-export const Subheader = styled(H3)``;
-Subheader.displayName = 'Subheader';
-Subheader.defaultProps = {
-  as: 'div',
-  fontWeight: 400,
-  textTransform: 'none',
-};
-
-export const Text25 = styled(Text)`
-  padding-top: ${props => (props.borderTop ? '10px' : '0')};
-  ${TYPOGRAPHY_STYLES.text};
-`;
-
-Text25.defaultProps = {
-  fontWeight: 400,
-};
-
-export const Text30 = styled(Text)`
-  ${TYPOGRAPHY_STYLES.text};
-  letter-spacing: 0.01em;
-`;
-
-Text30.defaultProps = {
-  fontWeight: 400,
-};
-
-export const Subtext = styled(Text)`
-  font-size: 1.2rem;
-  line-height: ${({ line }) => line || 1.8};
-
-  ${mq.desktop`font-size: 1.4rem`};
-`;
-
-Subtext.defaultProps = {
-  fontWeight: 400,
-};
-
-export const SmallText = styled(Text)`
-  font-size: 1.2rem;
-  line-height: 1.667;
-`;
-
-SmallText.defaultProps = {
-  fontWeight: 400,
-};
-
-export const List = styled.ul`
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  width: ${props => (props.limitWidth ? '76%' : '100%')};
-  ${BOX_STYLED_SYSTEM};
-  ${TEXT_STYLED_SYSTEM};
-`;
--- a/src/client/UIKit/lib/typographyStyle.js
+++ b/src/client/UIKit/lib/typographyStyle.js
@ -1,45 +0,0 @@
-import { css } from 'styled-components';
-import mq from 'client/UIKit/mq';
-
-const TYPOGRAPHY_BPS = [
-  320,
-  'tablet',
-  'desktop1280',
-  'desktop1440',
-  'desktop1680',
-];
-const getTypographyStyle = fontSize => `font-size: ${fontSize}px;`;
-
-const typographyArray = arr =>
-  arr
-    .map((v, i) => {
-      return v === arr[i - 1] ? null : v;
-    })
-    .map(fSize => (fSize ? getTypographyStyle(fSize) : null));
-
-const typographyArrayToCSS = (arr, lh) =>
-  arr.reduce(
-    (acc, curr, i) => {
-      if (curr === null) {
-        return acc;
-      }
-
-      const addition =
-        i > 0
-          ? css`
-              ${mq[TYPOGRAPHY_BPS[i]]`${curr}`};
-            `
-          : curr;
-
-      return css`
-        ${acc} ${addition};
-      `;
-    },
-    css`
-      line-height: ${lh};
-    `,
-  );
-const typographyStyle = (fontSizeArray, lineHeight) =>
-  typographyArrayToCSS(typographyArray(fontSizeArray), lineHeight);
-
-export default typographyStyle;