fixing style errors from updated constant names

frontend/src/components/article/index.js

@@ -2,7 +2,7 @@ const Styled = require('styled-components');
 const constants = require('@ui/shared/constants');
 
 const {
-  colors,
+  // colors,
   breakpoints
 } = constants;
 
@@ -12,7 +12,6 @@ const {
 
 // Main Contonent Wrapper Styles
 module.exports = styled.article`
-  background-color: ${colors.base.grey};
   padding: 2rem;
 
   ${breakpoints.large`

frontend/src/components/breadcrumb/index.js

@@ -29,7 +29,7 @@ const {
 
 // Main Contonent Wrapper Styles
 const StyledDiv = styled.div`
-  border-bottom: solid ${remcalc(1)} ${colors.base.greyDark};
+  border-bottom: solid ${remcalc(1)} ${colors.base.grey};
   padding: ${remcalc(30)} 0;
   margin-bottom: ${remcalc(21)};
 `;

frontend/src/components/navigation/org.js

@@ -33,7 +33,7 @@ const {
 
 const StyledNav = styled.div`
   background-color: #f2f2f2;
-  border-bottom: ${remcalc(1)} solid ${colors.base.greyDark};
+  border-bottom: ${remcalc(1)} solid ${colors.base.grey};
 
   & ul {
     height: ${remcalc(60)};
@@ -46,12 +46,12 @@ const NavigationLinkContainer = styled.div`
   position: relative;
   padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)};
   color: ${colors.base.secondaryDark};
-  border: ${remcalc(1)} solid ${colors.base.greyDark};
+  border: ${remcalc(1)} solid ${colors.base.grey};
   height: ${remcalc(24)};
   background-color: #f2f2f2;
 
   &.active {
-    background-color: ${colors.base.grey};
+    background-color: ${colors.base.background};
     border-bottom: solid ${remcalc(1)} ${colors.base.grey};
   }
 `;

ui/src/components/base/global.js

@@ -17,13 +17,13 @@ const fonts = [
     style: 'normal'
   },
   {
-    family: 'LibreFranklin',
+    family: 'LibreFranklin-Semi-Bold',
     filename: 'librefranklin-semibold-webfont',
     weight: '600',
     style: 'normal'
   },
   {
-    family: 'LibreFranklin',
+    family: 'LibreFranklin-Bold',
     filename: 'librefranklin-bold-webfont',
     weight: '700',
     style: 'normal'

ui/src/components/base/index.js

@@ -1,4 +1,5 @@
 const constants = require('../../shared/constants');
+const typography = require('../../shared/composers/typography');
 
 const Styled = require('styled-components');
 
@@ -11,11 +12,14 @@ const {
 } = Styled;
 
 module.exports = styled.div`
-  font-family: 'LibreFranklin', sans-serif;
   font-size: 1rem;
   line-height: 1.5;
-  color: ${colors.fonts.regular};
-  background-color: #FFFFFF;
+  background-color: ${colors.base.background};
+  
+  ${typography.libreFranklin}
+  ${typography.bodyColor}
+  ${typography.regular}
+  
 `;
 
 module.exports.global = require('./global');

ui/src/shared/composers/typography.js

@@ -9,10 +9,16 @@ const {
   css
 } = Styled;
 
-module.export = {
-  libreFranklin: css`
+module.exports = {
+  libreFranklin: `
     font-family: 'LibreFranklin', Helvetica, sans-serif;
   `,
+  libreFranklinSemiBold: `
+    font-family: 'LibreFranklin-Semi-Bold', Helvetica, sans-serif;
+  `,
+  libreFranklinBold: `
+    font-family: 'LibreFranklin-Bold', Helvetica, sans-serif;
+  `,
   bold: css`
     font-weight: 600;
   `,