refact: Restructure theme implementation

config-overrides.js

@@ -1,4 +1,5 @@
 const {override, fixBabelImports, addLessLoader} = require('customize-cra');
+const Theme = require('./src/styles/theme');
 
 module.exports = override(
   fixBabelImports('import', {
@@ -9,22 +10,23 @@ module.exports = override(
   addLessLoader({
     javascriptEnabled: true,
     modifyVars: {
-      '@primary-color': '#6D15A1',
-      '@link-color': '#30ADED',
-      '@info-color': '#d9d9d9',
-      '@success-color': '#B6F537',
-      '@warning-color': '#faad14',
-      '@heading-color': 'rgba(0, 0, 0, .85)',
-      '@text-color': 'rgba(0, 0, 0, .65)',
-      '@text-color-secondary': 'rgba(0, 0, 0, .45)',
-      '@disabled-color': 'rgba(0, 0, 0, .25)',
-      '@border-color-base': '#d9d9d9',
+      '@primary-color': Theme.primary,
+      '@link-color': Theme.link,
+      '@info-color': Theme.info,
+      '@success-color': Theme.success,
+      '@warning-color': Theme.warning,
+      '@error-color': Theme.error,
+      '@heading-color': Theme.heading,
+      '@text-color': Theme.text,
+      '@text-color-secondary': Theme.textSecondary,
+      '@disabled-color': Theme.disabled,
+      '@border-color-base': Theme.borderBase,
 
       // Layout
-      '@layout-header-background': '#F0F2F5',
+      '@layout-header-background': Theme.layoutHeaderBg,
 
       // Menu
-      '@menu-bg': '#F0F2F5'
-    },
+      '@menu-bg': Theme.menuBg,
+    }
   }),
 );

src/styles/core/common.js

@@ -1,22 +1,22 @@
 import styled from 'styled-components';
-import color from '../colors';
+import Theme from '../theme';
 
 export const H1 = styled.h1`
-  color: ${color.textColor};
+  color: ${Theme.textColor};
   font-size: 48px;
 `;
 
 export const H2 = styled.h2`
-  color: ${color.textColor};
+  color: ${Theme.textColor};
   font-size: 42px;
 `;
 
 export const H3 = styled.h3`
-  color: ${color.textColor};
+  color: ${Theme.textColor};
   font-size: 28px;
 `;
 
 export const H4 = styled.h4`
-  color: ${color.textColor};
+  color: ${Theme.textColor};
   font-size: 16px;
-`;
+`;

src/styles/home/banner.js

@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 import imgBanner from '../../assets/images/banner.jpg';
-import color from '../../styles/colors';
+import Theme from '../theme';
 
 export const Banner = styled.div`
   height: 400px;
   width: 100%;
   padding-top: 100px;
-  background-image: linear-gradient(${color.primaryGradient}, ${color.secondaryGradient}), url(${imgBanner});
+  background-image: linear-gradient(${Theme.gradientPrimary}, ${Theme.gradientSecondary}), url(${imgBanner});
   background-position: center center;
-`;
+`;

src/styles/home/featuredArtists.js

@@ -1,12 +1,12 @@
 import styled from 'styled-components';
-import color from '../../styles/colors';
+import Theme from '../theme';
 
 export const FeaturedArtist = styled.div`
   height: 400px;
   width: 100%;
   margin-top: 8px;
   margin-bottom: 8px;
   padding: 25px;
-  background-image: linear-gradient(${color.primaryGradient}, ${color.secondaryGradient}), url(${require('../../assets/images/featured/1.jpg')});
+  background-image: linear-gradient(${Theme.gradientPrimary}, ${Theme.gradientSecondary}), url(${require('../../assets/images/featured/1.jpg')});
   background-position: center center;
-`;
+`;

src/styles/theme.js

@@ -0,0 +1,37 @@
+/*
+NOTE:
+ Changes to *SOME* of these values will not take effect until you bootstrap webpack.
+ Example when using yarn start, you must kill the process and run yarn start again!
+
+ This is due to the fact that this file is being used to modify Ant Design LESS variables
+ via `modifyVars`.
+
+ See config-overrides.js
+ Ref: https://ant.design/docs/react/use-with-create-react-app#Customize-Theme
+*/
+module.exports = {
+  black: '#000',
+  white: '#FFF',
+  accentPrimary: '#FF0AD2',
+  accentSecondary: '#1cedea',
+  dark: '#060028',
+  light: '#CCCCCC',
+  text: '#131313',
+  textSecondary: '#323232',
+  primary: '#6C16A1',
+  secondary: '#AB29A1',
+  link: '#30ADED',
+  info: '#d9d9d9',
+  success: '#B6F537',
+  warning: '#faad14',
+  error: '#f5222d',
+  heading: '#101010',
+  disabled: '#575757',
+  borderBase: '#d9d9d9',
+  layoutHeaderBg: '#EDEAF5',
+  menuBg: '#EDEAF5',
+
+  /* Gradients */
+  gradientPrimary: 'rgba(230, 100, 101, 0.5)',
+  gradientSecondary: 'rgba(145, 152, 229, 0.5)',
+};