fixing style errors from updated constant names

This commit is contained in:
Alex Windett 2017-02-20 13:14:44 +00:00
parent bc200789a8
commit 211c4e2597
6 changed files with 22 additions and 13 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,10 +9,16 @@ const {
css css
} = Styled; } = Styled;
module.export = { module.exports = {
libreFranklin: css` libreFranklin: `
font-family: 'LibreFranklin', Helvetica, sans-serif; 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` bold: css`
font-weight: 600; font-weight: 600;
`, `,