Setting up the Less variables

The next step will be to set up the new Less variables for the magazine project. Open the _variables.less file, which is found in css/components. Let's go through each section that you need to update:

@bm-primary: #673ab7;
@bm-dark-primary: #512da8;
@bm-light-primary: #d1c4e9;
@bm-accent: #e040fb;
@bm-black: #212121;
@bm-grey: #727272;
@bm-light-grey: #b6b6b6;

As we did in the previous wiki project, we're going to use the primary naming convention for our custom colors. Each one is prepended with bm- in order to make it easily identifiable.

Background colors

Next, let's update our background color variables to use our new color values:

@primary-background: @white;
@secondary-background: @bm-grey;
@inverse-background: @bm-black; 

Text colors

After setting up the background, let's move on to updating our text color variables to use the new values:

@primary-text: @bm-grey; 
@light-text: @bm-light-grey; 
@loud-text: @bm-black; 
@inverse-text: @white...