updating and refactoring constants

This commit is contained in:
Alex Windett 2017-01-03 14:52:26 +00:00
parent 1429f9403f
commit 3e3eab4c69
5 changed files with 56 additions and 38 deletions

View File

@ -16,11 +16,9 @@ const {
default: styled, default: styled,
} = Styled; } = Styled;
// TODO: this should come from constants
// and be calculated accordingly
const styles = { const styles = {
primaryBorder: '#2532BB', primaryBorder: colors.brandPrimary,
secondaryColor: '#646464', secondaryColor: colors.brandSecondary,
...colors ...colors
}; };

View File

@ -5,6 +5,11 @@ const constants = require('../../shared/constants');
const fns = require('../../shared/functions'); const fns = require('../../shared/functions');
const Styled = require('styled-components'); const Styled = require('styled-components');
const {
boxes,
colors
} = constants;
const { const {
remcalc remcalc
} = fns; } = fns;
@ -22,7 +27,7 @@ const Label = styled.label`
`; `;
const InputField = styled.input` const InputField = styled.input`
background: ${constants.colors.background}; background: ${colors.white};
display: block; display: block;
font-size: 16px; font-size: 16px;
height: ${remcalc(50)}; height: ${remcalc(50)};
@ -34,7 +39,7 @@ const InputField = styled.input`
${baseBox()} ${baseBox()}
&:focus { &:focus {
border-color: ${constants.colors.borderSelected}; border-color: ${boxes.border.checked};
outline: none; outline: none;
} }
`; `;

View File

@ -24,7 +24,7 @@ const StyledInput = styled.input`
background-color: #646464; background-color: #646464;
} }
&:disabled + span { &:disabled + span {
background-color: ${colors.inactiveBackground}; background-color: ${colors.backgroundInactive};
} }
&:disabled + span::before { &:disabled + span::before {
opacity: 0.3; opacity: 0.3;

View File

@ -48,7 +48,4 @@ module.exports = {
bottom: ${positions.bottom || 'auto'}; bottom: ${positions.bottom || 'auto'};
left: ${positions.left || 'auto'}; left: ${positions.left || 'auto'};
` `
// {
// debugger
// }
}; };

View File

@ -69,47 +69,65 @@ const sizes = {
} }
}; };
const forms = {
cursorDisabled: 'not-allowed'
};
const brandPrimary = {
brandPrimary: '#3B46CC',
brandPrimaryDark: '#1838C0',
brandPrimaryDarkest: '#12279F',
};
const brandSecondary = {
brandSecondary: '#646464',
brandSecondaryDark: '#464646',
brandSecondaryDarkest: '#160D42',
};
const notifications = {
alert: '#DA4B42',
alertLight: '#FFC7C7',
confirmation: '#00AF66',
warning: '#E4A800',
warningLight: '#FFFAED',
};
const colors = {
white: '#FFFFFF',
backgroundInactive: '#F9F9F9',
...brandPrimary,
...brandSecondary,
...notifications
};
const boxes = { const boxes = {
borderRadius: '4px', borderRadius: '4px',
bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)', bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)', insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)',
border: { border: {
checked: '1px solid #2532bb', checked: `1px solid ${colors.brandPrimary}`,
unchecked: '1px solid rgb(216, 216, 216)', unchecked: `1px solid ${colors.border}`,
confirmed: '1px solid #23AC32' confirmed: `1px solid ${colors.confirmation}`
},
background: {
primary: colors.brandPrimary,
secondary: colors.brandSecondary,
disabled: '#FAFAFA',
} }
}; };
const forms = {
cursorDisabled: 'not-allowed'
};
const colors = {
brandPrimary: '#364ACD',
brandSecondary: '#160D42',
grayLight: '#818A91',
confirmation: '#38C647',
background: '#FFFFFF',
border: '#D8D8D8',
borderSelected: '#1D35BC',
warning: '#E4A800',
warningLight: '#FFFAED',
alert: '#D0011B',
alertLight: '#FFC7C7',
inactiveBackground: '#F9F9F9',
inactiveBorder: '#D8D8D8',
inactiveColor: '#737373',
};
const typography = { const typography = {
fontPrimary: 'sans serif', fontPrimary: 'sans serif',
dtFontWeight: 'bold', dtFontWeight: 'bold',
abbrBorderColor: colors.grayLight, abbrBorderColor: colors.brandSecondary,
textMuted: colors.grayLight textMuted: colors.brandSecondary
}; };
const links = { const links = {
color: colors.brandPrimary, color: '#364ACD',
decoration: 'none', decoration: 'none',
hoverColor: ({ hoverColor: ({
color color