Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/ui-toolkit/src/button/index.js
View File

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

6
packages/ui-toolkit/src/form/base/input.js
View File

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

6
packages/ui-toolkit/src/form/base/toggle.js
View File

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

6
packages/ui-toolkit/src/form/toggle.js
View File

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

2
packages/ui-toolkit/src/header/index.js
View File

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

10
packages/ui-toolkit/src/progress-bar/button.js
View File

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

2
packages/ui-toolkit/src/progress-bar/indicator.js
View File

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

56
packages/ui-toolkit/src/theme/index.js
View File

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

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