mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 22:20:06 +02:00
updating and refactoring constants
This commit is contained in:
parent
1429f9403f
commit
3e3eab4c69
@ -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
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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)};
|
||||||
@ -32,9 +37,9 @@ const InputField = styled.input`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
${baseBox()}
|
${baseBox()}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: ${constants.colors.borderSelected};
|
border-color: ${boxes.border.checked};
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -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;
|
||||||
|
@ -48,7 +48,4 @@ module.exports = {
|
|||||||
bottom: ${positions.bottom || 'auto'};
|
bottom: ${positions.bottom || 'auto'};
|
||||||
left: ${positions.left || 'auto'};
|
left: ${positions.left || 'auto'};
|
||||||
`
|
`
|
||||||
// {
|
|
||||||
// debugger
|
|
||||||
// }
|
|
||||||
};
|
};
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user