From fd17bf995b4ce16294d1715536766d29d6e57ae5 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 17 Oct 2017 11:01:57 +0100 Subject: [PATCH] fix(ui-toolkit): update colors to match spec fixes #768 --- packages/my-joy-beta/.yarnclean | 0 .../src/components/instances/item.js | 2 +- packages/ui-toolkit/etc/style.css | 1 + packages/ui-toolkit/src/button/index.js | 24 +- packages/ui-toolkit/src/card/card.js | 2 +- packages/ui-toolkit/src/card/header.js | 2 +- packages/ui-toolkit/src/card/options.js | 2 +- packages/ui-toolkit/src/card/title.js | 4 +- packages/ui-toolkit/src/form/base/input.js | 6 +- .../react-input-range/input-range/label.jsx | 2 +- .../react-input-range/input-range/slider.jsx | 2 +- .../react-input-range/input-range/track.jsx | 2 +- packages/ui-toolkit/src/theme/colors.js | 292 +++++++++++++++++- packages/ui-toolkit/src/theme/index.js | 69 +++-- yarn.lock | 18 +- 15 files changed, 354 insertions(+), 74 deletions(-) create mode 100644 packages/my-joy-beta/.yarnclean diff --git a/packages/my-joy-beta/.yarnclean b/packages/my-joy-beta/.yarnclean new file mode 100644 index 00000000..e69de29b diff --git a/packages/my-joy-beta/src/components/instances/item.js b/packages/my-joy-beta/src/components/instances/item.js index abf6f5a7..4f691049 100644 --- a/packages/my-joy-beta/src/components/instances/item.js +++ b/packages/my-joy-beta/src/components/instances/item.js @@ -17,7 +17,7 @@ import { const { SmallOnly, Small } = QueryBreakpoints; const stateColor = { - PROVISIONING: 'blue', + PROVISIONING: 'primary', RUNNING: 'green', STOPPING: 'grey', STOPPED: 'grey', diff --git a/packages/ui-toolkit/etc/style.css b/packages/ui-toolkit/etc/style.css index b555e5f1..4c8eebea 100644 --- a/packages/ui-toolkit/etc/style.css +++ b/packages/ui-toolkit/etc/style.css @@ -11,6 +11,7 @@ body h1.rsg--root-10, h2.rsg--root-10, h3.rsg--root-10, h3.rsg--para-24 { main.rsg--content-3 { padding-top: 60px; + max-width: 1400px; } h4.rsg--h4-29, diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js index 9151a0d4c..e898be8b 100644 --- a/packages/ui-toolkit/src/button/index.js +++ b/packages/ui-toolkit/src/button/index.js @@ -41,13 +41,13 @@ const style = css` background-image: none; background-color: ${props => props.theme.primary}; border-radius: ${borderRadius}; - border: solid ${remcalc(1)} ${props => props.theme.primaryDesaturated}; + border: solid ${remcalc(1)} ${props => props.theme.primaryActive}; &:focus { outline: 0; text-decoration: none; background-color: ${props => props.theme.primary}; - border-color: ${props => props.theme.primaryDesaturated}; + border-color: ${props => props.theme.primaryActive}; } &:hover { @@ -93,8 +93,8 @@ const style = css` `}; ${is('tertiary')` - color: ${props => props.theme.tertiary}; - background-color: ${props => props.theme.background}; + color: ${props => props.theme.text}; + background-color: ${props => props.theme.disabled}; border-color: ${props => props.theme.grey}; font-weight: 600; @@ -103,25 +103,25 @@ const style = css` &:active, &:active:hover, &:active:focus { - color: ${props => props.theme.tertiary}; - background-color: ${props => props.theme.background}; + color: ${props => props.theme.text}; + background-color: ${props => props.theme.disabled}; border-color: ${props => props.theme.grey}; } `}; ${is('tertiary', 'selected')` - background-color: ${props => props.theme.tertiaryActive}; - color: ${props => props.theme.tertiaryActiveColor}; - border-color: ${props => props.theme.tertiaryActiveColor}; + background-color: rgba(59, 70, 204, 0.2); + color: ${props => props.theme.primaryActive}; + border-color: ${props => props.theme.primaryActive}; &:focus, &:hover, &:active, &:active:hover, &:active:focus { - background-color: ${props => props.theme.tertiaryActive}; - color: ${props => props.theme.tertiaryActiveColor}; - border-color: ${props => props.theme.tertiaryActiveColor}; + background-color: rgba(59, 70, 204, 0.2); + color: ${props => props.theme.primaryActive}; + border-color: ${props => props.theme.primaryActive}; } `}; diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js index 23a6555c..f76afb61 100644 --- a/packages/ui-toolkit/src/card/card.js +++ b/packages/ui-toolkit/src/card/card.js @@ -67,7 +67,7 @@ const StyledCard = Row.extend` `}; ${is('transparent', 'selected')` - border: 1px solid ${props => props.theme.blue}; + border: 1px solid ${props => props.theme.primary}; background: ${props => props.theme.tertiaryActive}; box-shadow: none; `}; diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js index 6be8b975..6baa1f79 100644 --- a/packages/ui-toolkit/src/card/header.js +++ b/packages/ui-toolkit/src/card/header.js @@ -10,7 +10,7 @@ const StyledCard = Card.extend` flex-direction: row; background-color: ${props => props.theme.primary}; - border: solid ${remcalc(1)} ${props => props.theme.primaryDesaturatedActive}; + border: solid ${remcalc(1)} ${props => props.theme.primary}; box-shadow: none; width: calc(100% + ${remcalc(2)}); diff --git a/packages/ui-toolkit/src/card/options.js b/packages/ui-toolkit/src/card/options.js index 6875e4df..b37c8568 100644 --- a/packages/ui-toolkit/src/card/options.js +++ b/packages/ui-toolkit/src/card/options.js @@ -19,7 +19,7 @@ const StyledNav = Nav.extend` ${is('fromHeader') && isNot('disabled')` - border-left-color: ${props => props.theme.primaryDesaturatedActive}; + border-left-color: ${props => props.theme.primary}; `}; `; diff --git a/packages/ui-toolkit/src/card/title.js b/packages/ui-toolkit/src/card/title.js index 04c2f88a..62db47e2 100644 --- a/packages/ui-toolkit/src/card/title.js +++ b/packages/ui-toolkit/src/card/title.js @@ -42,7 +42,7 @@ const Container = styled.div` `}; ${is('selected')` - color: ${props => props.theme.blue}; + color: ${props => props.theme.primary}; `}; `; @@ -70,7 +70,7 @@ const Link = styled(BaseLink)` `}; ${is('selected')` - color: ${props => props.theme.blue}; + color: ${props => props.theme.primary}; `}; `; diff --git a/packages/ui-toolkit/src/form/base/input.js b/packages/ui-toolkit/src/form/base/input.js index b75e2d44..1174e0a8 100644 --- a/packages/ui-toolkit/src/form/base/input.js +++ b/packages/ui-toolkit/src/form/base/input.js @@ -39,13 +39,13 @@ const style = css` ${is('disabled')` ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ - color: ${props => props.theme.grey}; + color: ${props => props.theme.placeholder}; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ - color: ${props => props.theme.grey}; + color: ${props => props.theme.placeholder}; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: ${props => props.theme.grey}; + color: ${props => props.theme.placeholder}; } `}; diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx index 290a0be2..ec8c6f7d 100755 --- a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx +++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx @@ -10,7 +10,7 @@ const Span = styled.span` position: absolute; top: ${remcalc(14)}; right: ${props => (props.type === 'max' ? '1px' : 'auto')}; - color: ${props => (props.greyed ? theme.greyLight : theme.secondary)}; + color: ${props => (props.greyed ? theme.grey : theme.secondary)}; `; /** diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx index 9284439f..511306d1 100755 --- a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx +++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx @@ -9,7 +9,7 @@ import theme from '../../../theme'; export const SliderStyled = styled.div` appearance: none; background: ${theme.white}; - border: 2px solid ${theme.greyLight}; + border: 2px solid ${theme.grey}; border-radius: 50%; cursor: pointer; display: block; diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/track.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/track.jsx index 51e338a9..78bde832 100755 --- a/packages/ui-toolkit/src/slider/react-input-range/input-range/track.jsx +++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/track.jsx @@ -13,7 +13,7 @@ export const TrackStyled = styled.div` `; const ActiveTrack = styled.div` - background: ${theme.blue}; + background: ${theme.primary}; height: 100%; position: absolute; `; diff --git a/packages/ui-toolkit/src/theme/colors.js b/packages/ui-toolkit/src/theme/colors.js index e840d324..af56e7fd 100644 --- a/packages/ui-toolkit/src/theme/colors.js +++ b/packages/ui-toolkit/src/theme/colors.js @@ -1,16 +1,27 @@ import React from 'react'; import styled from 'styled-components'; import { Strong } from 'normalized-styled-components'; -import { Row } from 'react-styled-flexboxgrid'; import remcalc from 'remcalc'; import titleCase from 'title-case'; import tinycolor from 'tinycolor2'; -import P from '../text/p'; +import { P, H2 } from '../text'; import theme, { base } from './'; const Box = styled.div` width: ${remcalc(130)}; - margin-bottom: ${remcalc(46)}; + margin: auto; + text-align: center; +`; + +const Data = styled.td` + padding: ${remcalc(18)} 0; + border-bottom: 1px solid ${theme.grey}; + max-width: ${remcalc(250)}; +`; + +const Table = styled.table` + /** */ + width: 100%; `; const InnerBox = styled.div` @@ -19,29 +30,30 @@ const InnerBox = styled.div` font-size: 16px; color: ${theme.text}; `; -// Border: solid ${remcalc(1)} ${props => props.border}; -// border-top-width: 0; const Preview = styled.div` display: inline-block; background: ${props => props.hex}; width: ${remcalc(96)}; height: ${remcalc(96)}; + border: 1px solid ${theme.grey}; box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05); `; const Paragraph = P.extend` - /* trick prettier */ + font-size: ${remcalc(13)}; margin: 0; `; +const ColorName = styled(H2)` + /* trick prettier */ + max-width: ${remcalc(100)}; +`; + const Color = ({ name, hex }) => ( - - {titleCase(name)} - {hex.toUpperCase()} @@ -58,5 +70,265 @@ export default () => { }) .map(name => ); - return {colors}; + // return {colors}; + + return ( + + + + + + + + + + + + + + Blue fill / blue text + + + + + + + + + + + + + + + Fill for primary buttons, text anchors (including interactive parts + of the breadcrumb) and other UI components, whose priority or + prominence is emphasized with color. + + + + + Blue border + + + + + + + + + + + Borders of primary buttons and other UI components, whose priority + or prominence is emphasized with color. + + + + + White fill + + + + + + + + + + + + + + + Fill for secondary buttons, inputs, dropdown menus, tables, service + and instance cards and other components that need to be + distinguished from the overall layout. + + + + + Grey border + + + + + + + + Borders of white or grey UI components and dividers. + + + + Charcoal fill + + + + + + + + + + + + + + Fill for topology components. + + + + Charcoal border + + + + + + + + + + Border for topology components. + + + + Text + + + + + + + + + + Any text. + + + + Example Text + + + + + + + + Input placeholder text. + + + + Red fill / red text + + + + + + + + Errors + + + + Red border + + + + + + + + Complements red fill. + + + + Green fill / green text + + + + + + + + Confirmations and instructional components. + + + + Green border + + + + + + + + Confirmations and instructional components. + + + + Orange Fill + + + + + + + + To notify users of things that require their attention. + + + + Orange border / orange text + + + + + + + + Complements orange fill. + + +
+ DefaultHoverClickDisabledUsage
+ ); }; diff --git a/packages/ui-toolkit/src/theme/index.js b/packages/ui-toolkit/src/theme/index.js index 8f2ae0bd..4fe5892f 100644 --- a/packages/ui-toolkit/src/theme/index.js +++ b/packages/ui-toolkit/src/theme/index.js @@ -14,30 +14,42 @@ const color_name = { */ const primary = { - primary: '#3B46CC', - primaryHover: '#475AD1', - primaryActive: '#2D3884', - primaryDesaturated: '#3B4AAF', - primaryDesaturatedActive: '#2D3884' + primary: 'rgb(59, 70, 204)', + primaryHover: 'rgb(72, 83, 217)', + primaryActive: 'rgb(45, 56, 132)' }; // TOPOLOGY const secondary = { - secondary: '#464646', - secondaryHover: '#3F3F3F', - secondaryActive: '#343434' + secondary: 'rgb(70, 70, 70)', + secondaryHover: 'rgb(53, 53, 53)', + secondaryActive: 'rgb(45, 45, 45)' }; const white = { - white: '#FFFFFF', // used - whiteHover: '#F8F8F8', // used - whiteActive: '#E9E9E9' // used + white: 'rgb(255, 255, 255)', + whiteHover: 'rgb(247, 247, 247)', + whiteActive: 'rgb(230, 230, 230)' }; -const tertiary = { - tertiary: '#363636', - tertiaryActive: 'rgba(54, 74, 205, 0.1)', - tertiaryActiveColor: '#2931C2' +const grey = { + grey: 'rgb(216, 216, 216)', + greyTransparent: 'rgba(73,73,73, 0.8)' +}; + +const green = { + green: 'rgb(0, 152, 88)', + greenDark: 'rgb(0, 129, 56)' +}; + +const orange = { + orange: 'rgb(227, 130, 0)', + orangeDark: 'rgb(203, 116, 0)' +}; + +const red = { + red: 'rgb(210, 67, 58)', + redDark: 'rgb(205, 37, 27)' }; /** ********************************** BASE *********************************** */ @@ -46,25 +58,20 @@ export const base = { ...primary, ...secondary, ...white, - ...tertiary, - text: '#494949', // used - grey: '#D8D8D8', // used - greyLight: '#bdbdbd', // used - greyTransparent: 'rgba(73,73,73, 0.8)', - disabled: '#FAFAFA', // used - background: '#FAFAFA', // used - green: '#00AF66', // used - greenDark: '#009858', // used - orange: '#E38200', // used - orangeDark: '#CB7400', // used - red: '#DA4B42', // used - redDark: '#CD251B', // used - blue: '#364ACD' + ...red, + ...orange, + ...green, + ...grey, + text: 'rgba(73,73,73, 1)', + textDisabled: 'rgba(73,73,73, 0.5)', + placeholder: 'rgb(99,99,99)', + disabled: 'rgb(250, 250, 250)', // used + background: 'rgb(250, 250, 250)' // used }; /** ********************************** HEADER ********************************** */ -const brandBackground = '#1E313B'; +const brandBackground = 'rgb(30, 49, 59)'; /** ********************************** FONTS ********************************** */ @@ -99,7 +106,7 @@ export const inputWarning = base.orange; /** ******************************** METRICS ********************************* */ /* export const miniBackground = '#F3F4F9'; -export const seperator = '#D9DEF3'; */ +export const separator = '#D9DEF3'; */ /** ******************************** TOPOLOGY ********************************* */ diff --git a/yarn.lock b/yarn.lock index 9245d47e..44cd104b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1767,7 +1767,7 @@ babel-preset-jest@^21.2.0: babel-plugin-jest-hoist "^21.2.0" babel-plugin-syntax-object-rest-spread "^6.13.0" -babel-preset-joyent-portal@^3.1.0: +babel-preset-joyent-portal@^3.1.0, babel-preset-joyent-portal@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/babel-preset-joyent-portal/-/babel-preset-joyent-portal-3.2.0.tgz#0801746916568886beba5c2911ce1c55ec142320" dependencies: @@ -3471,7 +3471,7 @@ cssesc@^0.1.0: postcss-value-parser "^3.2.3" postcss-zindex "^2.0.1" -csso@^3.2.0: +csso@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/csso/-/csso-3.3.0.tgz#bb9b777596065feaf8e74705fb24c63a82f74796" dependencies: @@ -10253,7 +10253,7 @@ react-docgen-displayname-handler@^1.0.1: dependencies: recast "0.12.6" -react-docgen@^2.18.0: +react-docgen@^2.19.0: version "2.19.0" resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-2.19.0.tgz#a9e356277aa31f42df163f0b4917d3b077985f9d" dependencies: @@ -10452,15 +10452,15 @@ react-style-proptype@^3.0.0: dependencies: prop-types "^15.5.4" -react-styled-flexboxgrid@^2.0.3: +react-styled-flexboxgrid@^2.0.3, react-styled-flexboxgrid@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/react-styled-flexboxgrid/-/react-styled-flexboxgrid-2.1.0.tgz#ae0c76b3496600d852ba8a8da0cd781ff8199280" dependencies: lodash.isinteger "^4.0.4" -react-styleguidist@^6.0.29: - version "6.0.30" - resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.0.30.tgz#988a09282f8af43749e44602349ec524dc1f07a0" +react-styleguidist@^6.0.30: + version "6.0.31" + resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.0.31.tgz#db77cf38922715c89433a16628672363ad30964a" dependencies: ast-types "^0.9.13" buble "^0.15.2" @@ -10776,7 +10776,7 @@ reduce-css-calc@^1.2.6: math-expression-evaluator "^1.2.14" reduce-function-call "^1.0.1" -reduce-css-calc@^2.1.0: +reduce-css-calc@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.1.tgz#f4ecd7a00ec3e5683773f208067ad7da117b9db0" dependencies: @@ -13509,7 +13509,7 @@ webpack@3.5.1: webpack-sources "^1.0.1" yargs "^8.0.2" -webpack@^3.6.0: +webpack@^3.7.1: version "3.7.1" resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.7.1.tgz#6046b5c415ff7df7a0dc54c5b6b86098e8b952da" dependencies: