diff --git a/craco.config.js b/craco.config.js index 574e5ac..b7a5354 100644 --- 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, }, }, diff --git a/package.json b/package.json index 2368b20..1dabf65 100644 --- 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" }, diff --git a/src/client/Containers/Calculation/lib/renderSections.js b/src/client/Containers/Calculation/lib/renderSections.js index fe7df22..d6504d5 100644 --- a/src/client/Containers/Calculation/lib/renderSections.js +++ b/src/client/Containers/Calculation/lib/renderSections.js @@ -82,7 +82,7 @@ export const renderGroups = ({ groups }) => { diff --git a/src/client/Elements/Background.jsx b/src/client/Elements/Background.jsx index 6beddb8..40c58b5 100644 --- 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` diff --git a/src/client/Elements/Table.jsx b/src/client/Elements/Table.jsx index b39f1f6..21dcb6d 100644 --- 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 { diff --git a/src/client/Elements/Text.jsx b/src/client/Elements/Text.jsx index d80bc43..4d63e5c 100644 --- 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}; `; diff --git a/src/client/Layout/Auth.jsx b/src/client/Layout/Auth.jsx index 25a31c6..8bc70b0 100644 --- 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; diff --git a/src/client/Layout/Header.jsx b/src/client/Layout/Header.jsx index c90b4f9..f5c0b7f 100644 --- 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; diff --git a/src/client/Layout/Logo.jsx b/src/client/Layout/Logo.jsx index 29ce3e4..23a8d38 100644 --- 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; diff --git a/src/client/UIKit/colors.js b/src/client/UIKit/colors.js index 3435803..db2bac9 100644 --- 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); diff --git a/src/client/UIKit/fonts.js b/src/client/UIKit/fonts.js deleted file mode 100644 index 1596b7b..0000000 --- a/src/client/UIKit/fonts.js +++ /dev/null @@ -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}; -`; diff --git a/src/client/UIKit/lib/typographyStyle.js b/src/client/UIKit/lib/typographyStyle.js deleted file mode 100644 index 6ed18a5..0000000 --- a/src/client/UIKit/lib/typographyStyle.js +++ /dev/null @@ -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;