1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-28 14:10:04 +02:00

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,
} = Styled;
// TODO: this should come from constants
// and be calculated accordingly
const styles = {
primaryBorder: '#2532BB',
secondaryColor: '#646464',
primaryBorder: colors.brandPrimary,
secondaryColor: colors.brandSecondary,
...colors
};

View File

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

View File

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

View File

@ -48,7 +48,4 @@ module.exports = {
bottom: ${positions.bottom || '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 = {
borderRadius: '4px',
bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)',
border: {
checked: '1px solid #2532bb',
unchecked: '1px solid rgb(216, 216, 216)',
confirmed: '1px solid #23AC32'
checked: `1px solid ${colors.brandPrimary}`,
unchecked: `1px solid ${colors.border}`,
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 = {
fontPrimary: 'sans serif',
dtFontWeight: 'bold',
abbrBorderColor: colors.grayLight,
textMuted: colors.grayLight
abbrBorderColor: colors.brandSecondary,
textMuted: colors.brandSecondary
};
const links = {
color: colors.brandPrimary,
color: '#364ACD',
decoration: 'none',
hoverColor: ({
color