1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-14 23:30:05 +02:00

feat(ui-toolkit, cp-frontend): Ensure colours are correct and check designs

This commit is contained in:
JUDIT GRESKOVITS 2017-07-11 15:11:52 +01:00 committed by Sérgio Ramos
parent 06ab07a966
commit 47e9982d7f
9 changed files with 70 additions and 69 deletions

View File

@ -42,7 +42,6 @@ const style = css`
background-color: ${props => props.theme.primary};
border-radius: ${borderRadius};
border: solid ${remcalc(1)} ${props => props.theme.primaryDesaturated};
box-shadow: ${bottomShaddow};
&:focus {
outline: 0;
@ -53,7 +52,7 @@ const style = css`
&:hover {
background-color: ${props => props.theme.primaryHover};
border: solid ${remcalc(1)} ${props => props.theme.primaryDark};
border: solid ${remcalc(1)} ${props => props.theme.primaryActive};
}
&:active,
@ -62,12 +61,11 @@ const style = css`
background-image: none;
outline: 0;
background-color: ${props => props.theme.primaryActive};
border-color: ${props => props.theme.primaryDesaturatedActive};
border-color: ${props => props.theme.primaryActive};
}
&[disabled] {
cursor: not-allowed;
box-shadow: none;
pointer-events: none;
}

View File

@ -37,15 +37,15 @@ const style = css`
border: ${border.unchecked};
${is('error')`
border-color: ${props => props.theme.red}
border-color: ${props => props.theme.redDark}
`};
${is('warning')`
border-color: ${props => props.theme.orange}
border-color: ${props => props.theme.orangeDark}
`};
${is('success')`
border-color: ${props => props.theme.green}
border-color: ${props => props.theme.greenDark}
`};
font-size: ${remcalc(15)};

View File

@ -49,15 +49,15 @@ const Label = styled.label`
`};
${is('error')`
border-color: ${props => props.theme.red}
border-color: ${props => props.theme.redDark}
`};
${is('warning')`
border-color: ${props => props.theme.orange}
border-color: ${props => props.theme.orangeDark}
`};
${is('success')`
border-color: ${props => props.theme.green}
border-color: ${props => props.theme.greenDark}
`};
${is('radio')`

View File

@ -48,15 +48,15 @@ const Label = styled.label`
color: ${props => props.theme.text};
${is('error')`
border-color: ${props => props.theme.red}
border-color: ${props => props.theme.redDark}
`};
${is('warning')`
border-color: ${props => props.theme.orange}
border-color: ${props => props.theme.orangeDark}
`};
${is('success')`
border-color: ${props => props.theme.green}
border-color: ${props => props.theme.greenDark}
`};
&:hover {

View File

@ -10,7 +10,7 @@ const Header = styled.div`
align-content: stretch;
align-items: stretch;
background-color: ${props => props.theme.primaryDarkBrand};
background-color: ${props => props.theme.brandBackground};
max-height: ${remcalc(53)};
min-height: ${remcalc(53)};
padding: 0 ${remcalc(18)};

View File

@ -52,12 +52,12 @@ const StyledContainer = styled.div`
border-bottom: ${remcalc(1)} solid ${props => props.theme.grey};
${isOr('active', 'completed')`
border-top: ${remcalc(1)} solid ${props => props.theme.green};
border-bottom: ${remcalc(1)} solid ${props => props.theme.green};
border-top: ${remcalc(1)} solid ${props => props.theme.greenDark};
border-bottom: ${remcalc(1)} solid ${props => props.theme.greenDark};
`}
${is('first')`
border-left: ${remcalc(1)} solid ${props => props.theme.green};
border-left: ${remcalc(1)} solid ${props => props.theme.greenDark};
padding-left: ${remcalc(13)};
`}
@ -66,7 +66,7 @@ const StyledContainer = styled.div`
`}
${isOr('active', 'completed')`
border-right: ${remcalc(1)} solid ${props => props.theme.green};
border-right: ${remcalc(1)} solid ${props => props.theme.greenDark};
`}
${isNot('last')`
@ -89,7 +89,7 @@ const StyledArrow = styled.span`
`};
${isOr('completed', 'active')`
border-color: ${props => props.theme.green};
border-color: ${props => props.theme.greenDark};
`};
`;

View File

@ -29,7 +29,7 @@ const StyledIndicator = styled.span`
align-items: center;
${isOr('completed', 'active')`
border: ${remcalc(1)} solid ${props => props.theme.green};
border: ${remcalc(1)} solid ${props => props.theme.greenDark};
`}
${is('completed')`

View File

@ -14,18 +14,15 @@ const color_name = {
*/
const primary = {
primary: '#3B47CC',
primaryHover: '#1838C0',
primaryActive: '#12279F',
primary: '#3B46CC',
primaryHover: '#475AD1',
primaryActive: '#2D3884',
primaryDesaturated: '#3B4AAF',
primaryDesaturatedHover: '#34429D',
primaryDesaturatedActive: '#2D3884',
primaryDark: '#2D3884',
primaryDarkHover: '#34429D',
primaryDarkActive: '#2D3884',
primaryDarkBrand: '#1E313B'
primaryDesaturatedHover: '#475AD1',
primaryDesaturatedActive: '#2D3884'
};
// TOPOLOGY
const secondary = {
secondary: '#464646',
secondaryHover: '#3F3F3F',
@ -33,9 +30,9 @@ const secondary = {
};
const white = {
white: '#FFFFFF',
whiteHover: '#F8F8F8',
whiteActive: '#E9E9E9'
white: '#FFFFFF', // used
whiteHover: '#F8F8F8', // used
whiteActive: '#E9E9E9' // used
};
/** ********************************** BASE *********************************** */
@ -44,18 +41,22 @@ export const base = {
...primary,
...secondary,
...white,
text: '#646464',
grey: '#D8D8D8',
disabled: '#FAFAFA',
background: '#FAFAFA',
green: '#00AF66',
greenDark: '#009858',
orange: '#E38200',
orangeDark: '#CB7400',
red: '#DA4B42',
redDark: '#CD251B'
text: '#494949', // used
grey: '#D8D8D8', // used
disabled: '#FAFAFA', // used
background: '#FAFAFA', // used
green: '#00AF66', // used
greenDark: '#009858', // not used - BORDER
orange: '#E38200', // used
orangeDark: '#CB7400', // not used - BORDER
red: '#DA4B42', // used
redDark: '#CD251B' // not used - BORDER
};
/** ********************************** HEADER ********************************** */
const brandBackground = '#1E313B';
/** ********************************** FONTS ********************************** */
export const fonts = {
@ -88,8 +89,8 @@ export const inputWarning = base.orange;
/** ******************************** METRICS ********************************* */
export const miniBackground = '#F3F4F9';
export const seperator = '#D9DEF3';
/* export const miniBackground = '#F3F4F9';
export const seperator = '#D9DEF3'; */
/** ******************************** TOPOLOGY ********************************* */
@ -102,7 +103,8 @@ export default {
notifications,
inputError,
inputWarning,
miniBackground,
seperator,
topologyBackground
// miniBackground,
// seperator,
topologyBackground,
brandBackground
};

View File

@ -1766,12 +1766,12 @@ camelcase@^4.0.0, camelcase@^4.1.0:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
version "1.0.30000697"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000697.tgz#20ce6a9ceeef4ef4a15dc8e80f2e8fb9049e8d77"
version "1.0.30000698"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000698.tgz#623a2de3458ceca379846a8f170e7b1771c7c3a3"
caniuse-lite@^1.0.30000684:
version "1.0.30000697"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000697.tgz#125fb00604b63fbb188db96a667ce2922dcd6cdd"
version "1.0.30000698"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000698.tgz#8102e8978b1f36962f2a102432e4bf4eac7b6cbe"
capture-stack-trace@^1.0.0:
version "1.0.0"
@ -1876,10 +1876,11 @@ ci-info@^1.0.0:
resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.0.0.tgz#dc5285f2b4e251821683681c381c3388f46ec534"
cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.3.tgz#eeabf194419ce900da3018c207d212f2a6df0a07"
version "1.0.4"
resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
dependencies:
inherits "^2.0.1"
safe-buffer "^5.0.1"
circular-json@^0.3.1:
version "0.3.1"
@ -1997,8 +1998,8 @@ co@^4.6.0:
resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
coa@~1.0.1:
version "1.0.3"
resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.3.tgz#1b54a5e1dcf77c990455d4deea98c564416dc893"
version "1.0.4"
resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd"
dependencies:
q "^1.1.2"
@ -3716,11 +3717,11 @@ extsprintf@1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
extsprintf@1.2.0:
extsprintf@1.2.0, extsprintf@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.2.0.tgz#5ad946c22f5b32ba7f8cd7426711c6e8a3fc2529"
extsprintf@1.3.0, extsprintf@^1.2.0:
extsprintf@1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
@ -4446,8 +4447,8 @@ hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0:
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
hoist-non-react-statics@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.0.0.tgz#843180515e0281952b08f41c620ca74870c7e354"
version "2.1.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.1.0.tgz#44879d7c06796a5f1baaaed29833bfdc9995ca32"
home-or-tmp@^2.0.0:
version "2.0.0"
@ -5205,8 +5206,8 @@ jest-snapshot@^20.0.3:
pretty-format "^20.0.3"
jest-styled-components@^3.0.2:
version "3.1.5"
resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-3.1.5.tgz#c1e4fc60e534e54b26c3b733b65b44afd4f2795e"
version "3.3.1"
resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-3.3.1.tgz#8803b9577105d11ea8681397a06f154824c8f782"
dependencies:
css "^2.2.1"
@ -8354,8 +8355,8 @@ spache@^1.1.0:
resolved "https://registry.yarnpkg.com/spache/-/spache-1.1.0.tgz#8c68ba807630f0199429c2035c82ed96f5438cd5"
spawn-wrap@^1.3.7:
version "1.3.7"
resolved "https://registry.yarnpkg.com/spawn-wrap/-/spawn-wrap-1.3.7.tgz#beb8bf4426d64b2b06871e0d7dee2643f1f8d1bc"
version "1.3.8"
resolved "https://registry.yarnpkg.com/spawn-wrap/-/spawn-wrap-1.3.8.tgz#fa2a79b990cbb0bb0018dca6748d88367b19ec31"
dependencies:
foreground-child "^1.5.6"
mkdirp "^0.5.0"
@ -8699,8 +8700,8 @@ stylelint-processor-styled-components@styled-components/stylelint-processor-styl
babylon "^6.12.0"
stylelint-scss@^1.4.1:
version "1.4.4"
resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-1.4.4.tgz#091fcbd8b648c78ec3899853e54b975e0256cd4a"
version "1.5.1"
resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-1.5.1.tgz#a5aae203fc5aaaba484c7d1380f28560b6f33ac0"
dependencies:
lodash "^4.11.1"
postcss-media-query-parser "^0.2.3"
@ -8761,8 +8762,8 @@ stylelint@^7.0.0, stylelint@^7.0.3, stylelint@^7.11.1:
table "^4.0.1"
stylis@^3.2.1:
version "3.2.2"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.2.tgz#9be4b4e18d9969a7cee9d4439e24437e5bb7a764"
version "3.2.3"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.3.tgz#fed751d792af3f48a247769f55aca05c1a100a09"
subtext@4.x.x:
version "4.4.1"
@ -9031,8 +9032,8 @@ thenify-all@^1.0.0:
any-promise "^1.0.0"
throat@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/throat/-/throat-4.0.0.tgz#e8d397aeb3f335c3bae404a83dc264b813a41e1b"
version "4.1.0"
resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
through2@^0.6.1, through2@^0.6.3, through2@~0.6.1:
version "0.6.5"