feat(ui-toolkit, cp-frontend): Ensure colours are correct and check designs
This commit is contained in:
JUDIT GRESKOVITS
Sérgio Ramos
parent
06ab07a966
commit
47e9982d7f
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)};
|
||||
|
|
|
|||
|
|
@ -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')`
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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)};
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
`};
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -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')`
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
|
|
|
|||
45
yarn.lock
45
yarn.lock
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue