update brand colors

This commit is contained in:
Sérgio Ramos 2017-01-04 18:51:17 +00:00
parent 0614839905
commit 68aa758b64
5 changed files with 27 additions and 16 deletions

View File

@ -27,7 +27,7 @@ const Label = styled.label`
`;
const InputField = styled.input`
background: ${colors.white};
background: ${colors.brandSecondary};
display: block;
font-size: 16px;
height: ${remcalc(50)};

View File

@ -1,12 +1,17 @@
const constants = require('../../shared/constants');
const React = require('react');
const Styled = require('styled-components');
const {
colors
} = constants;
const {
default: styled
} = Styled;
const StyledModal = styled.div`
background: white;
background: ${colors.brandSecondary};
display: block;
left: 50%;
margin: 0 auto;

View File

@ -49,7 +49,7 @@ const StyledSpan = styled.span`
width: 10px;
height: 10px;
box-shadow: 0 0 0 1px #646464;
border: 8px solid white;
border: 8px solid ${colors.brandInactive};
top: 5px;
left: 5px;
border-radius: 100%;

View File

@ -6,13 +6,8 @@ const boxes = {
insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)',
border: {
checked: `1px solid ${colors.brandPrimary}`,
unchecked: `1px solid ${colors.border}`,
unchecked: `1px solid ${colors.borderSecondary}`,
confirmed: `1px solid ${colors.confirmation}`
},
background: {
primary: colors.brandPrimary,
secondary: colors.brandSecondary,
disabled: '#FAFAFA',
}
};

View File

@ -2,12 +2,26 @@ const brandPrimary = {
brandPrimary: '#3B46CC',
brandPrimaryDark: '#1838C0',
brandPrimaryDarkest: '#12279F',
borderPrimary: '#2531BC',
borderPrimaryDark: '#2531BC',
borderPrimaryDarkest: '#062BA0',
brandPrimaryColor: '#FFFFFF'
};
const brandSecondary = {
brandSecondary: '#646464',
brandSecondaryDark: '#464646',
brandSecondaryDarkest: '#160D42',
brandSecondary: '#FFFFFF',
brandSecondaryDark: '#F8F8F8',
brandSecondaryDarkest: '#E9E9E9',
borderSecondary: '#D8D8D8',
borderSecondaryDark: '#D8D8D8',
borderSecondaryDarkest: '#D8D8D8',
brandSecondaryColor: '#464646'
};
const brandInactive = {
brandInactive: '#FAFAFA',
borderInactive: '#D8D8D8',
brandInactiveColor: '#919191'
};
const notifications = {
@ -19,12 +33,9 @@ const notifications = {
};
const colors = {
white: '#FFFFFF',
backgroundInactive: '#F9F9F9',
...brandPrimary,
...brandSecondary,
...brandInactive,
...notifications
};