fix(ui-toolkit): update colors to match spec

fixes #768

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',

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,

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};
+    color: ${props => props.theme.text};
-    background-color: ${props => props.theme.background};
+    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};
+      color: ${props => props.theme.text};
-      background-color: ${props => props.theme.background};
+      background-color: ${props => props.theme.disabled};
       border-color: ${props => props.theme.grey};
     }
   `};
 
   ${is('tertiary', 'selected')`
-      background-color: ${props => props.theme.tertiaryActive};
+      background-color: rgba(59, 70, 204, 0.2);
-      color: ${props => props.theme.tertiaryActiveColor};
+      color: ${props => props.theme.primaryActive};
-      border-color: ${props => props.theme.tertiaryActiveColor};
+      border-color: ${props => props.theme.primaryActive};
 
     &:focus,
     &:hover,
     &:active,
     &:active:hover,
     &:active:focus {
-      background-color: ${props => props.theme.tertiaryActive};
+      background-color: rgba(59, 70, 204, 0.2);
-      color: ${props => props.theme.tertiaryActiveColor};
+      color: ${props => props.theme.primaryActive};
-      border-color: ${props => props.theme.tertiaryActiveColor};
+      border-color: ${props => props.theme.primaryActive};
     }
   `};
 

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;
   `};

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)});

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};
   `};
 `;
 

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};
   `};
 `;
 

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};
     }
   `};
 

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)};
 `;
 
 /**

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;

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;
 `;

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 }) => (
   <Box>
     <Preview hex={hex} />
     <InnerBox background={hex}>
-      <Paragraph>
-        <Strong>{titleCase(name)}</Strong>
-      </Paragraph>
       <Paragraph>{hex.toUpperCase()}</Paragraph>
     </InnerBox>
   </Box>
@@ -58,5 +70,265 @@ export default () => {
     })
     .map(name => <Color key={name} name={name} hex={theme[name]} />);
 
-  return <Row>{colors}</Row>;
+  // return <tr>{colors}</tr>;
+
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <th />
+          <th>Default</th>
+          <th>Hover</th>
+          <th>Click</th>
+          <th>Disabled</th>
+          <th>Usage</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <Data>
+            <ColorName>Blue fill / blue text</ColorName>
+          </Data>
+          <Data>
+            <Color key="primary" name="primary" hex={theme.primary} />
+          </Data>
+          <Data>
+            <Color
+              key="primaryHover"
+              name="primaryHover"
+              hex={theme.primaryHover}
+            />
+          </Data>
+          <Data>
+            <Color
+              key="primaryActive"
+              name="primaryActive"
+              hex={theme.primaryActive}
+            />
+          </Data>
+          <Data>
+            <Color key="disabled" name="disabled" hex={theme.disabled} />
+          </Data>
+          <Data>
+            Fill for primary buttons, text anchors (including interactive parts
+            of the breadcrumb) and other UI components, whose priority or
+            prominence is emphasized with color.
+          </Data>
+        </tr>
+        <tr>
+          <Data>
+            <ColorName>Blue border</ColorName>
+          </Data>
+          <Data>
+            <Color
+              key="primaryActive"
+              name="primaryActive"
+              hex={theme.primaryActive}
+            />
+          </Data>
+          <Data />
+          <Data />
+          <Data>
+            <Color key="disabled" name="disabled" hex={theme.disabled} />
+          </Data>
+          <Data>
+            Borders of primary buttons and other UI components, whose priority
+            or prominence is emphasized with color.
+          </Data>
+        </tr>
+        <tr>
+          <Data>
+            <ColorName>White fill</ColorName>
+          </Data>
+          <Data>
+            <Color key="white" name="white" hex={theme.white} />
+          </Data>
+          <Data>
+            <Color key="whiteHover" name="whiteHover" hex={theme.whiteHover} />
+          </Data>
+          <Data>
+            <Color
+              key="whiteActive"
+              name="whiteActive"
+              hex={theme.whiteActive}
+            />
+          </Data>
+          <Data>
+            <Color key="disabled" name="disabled" hex={theme.disabled} />
+          </Data>
+          <Data>
+            Fill for secondary buttons, inputs, dropdown menus, tables, service
+            and instance cards and other components that need to be
+            distinguished from the overall layout.
+          </Data>
+        </tr>
+        <tr>
+          <Data>
+            <ColorName>Grey border</ColorName>
+          </Data>
+          <Data>
+            <Color key="grey" name="grey" hex={theme.grey} />
+          </Data>
+          <Data />
+          <Data />
+          <Data />
+          <Data>Borders of white or grey UI components and dividers.</Data>
+        </tr>
+        <tr>
+          <Data>
+            <ColorName>Charcoal fill</ColorName>
+          </Data>
+          <Data>
+            <Color key="secondary" name="secondary" hex={theme.secondary} />
+          </Data>
+          <Data>
+            <Color
+              key="secondaryHover"
+              name="secondaryHover"
+              hex={theme.secondaryHover}
+            />
+          </Data>
+          <Data>
+            <Color
+              key="secondaryActive"
+              name="secondaryActive"
+              hex={theme.secondaryActive}
+            />
+          </Data>
+          <Data>
+            <Color key="disabled" name="disabled" hex={theme.disabled} />
+          </Data>
+          <Data>Fill for topology components.</Data>
+        </tr>
+        <tr>
+          <Data>
+            <ColorName>Charcoal border</ColorName>
+          </Data>
+          <Data>
+            <Color
+              key="secondaryActive"
+              name="secondaryActive"
+              hex={theme.secondaryActive}
+            />
+          </Data>
+          <Data />
+          <Data />
+          <Data>
+            <Color
+              key="textDisabled"
+              name="textDisabled"
+              hex={theme.textDisabled}
+            />
+          </Data>
+          <Data>Border for topology components.</Data>
+        </tr>
+        <tr>
+          <Data>
+            <ColorName>Text</ColorName>
+          </Data>
+          <Data>
+            <Color key="text" name="text" hex={theme.text} />
+          </Data>
+          <Data />
+          <Data />
+          <Data>
+            <Color
+              key="textDisabled"
+              name="textDisabled"
+              hex={theme.textDisabled}
+            />
+          </Data>
+          <Data>Any text.</Data>
+        </tr>
+        <tr>
+          <Data>
+            <ColorName>Example Text</ColorName>
+          </Data>
+          <Data>
+            <Color
+              key="placeholder"
+              name="placeholder"
+              hex={theme.placeholder}
+            />
+          </Data>
+          <Data />
+          <Data />
+          <Data />
+          <Data>Input placeholder text.</Data>
+        </tr>
+        <tr>
+          <Data>
+            <ColorName>Red fill / red text</ColorName>
+          </Data>
+          <Data>
+            <Color key="red" name="red" hex={theme.red} />
+          </Data>
+          <Data />
+          <Data />
+          <Data />
+          <Data>Errors</Data>
+        </tr>
+        <tr>
+          <Data>
+            <ColorName>Red border</ColorName>
+          </Data>
+          <Data>
+            <Color key="redDark" name="redDark" hex={theme.redDark} />
+          </Data>
+          <Data />
+          <Data />
+          <Data />
+          <Data>Complements red fill.</Data>
+        </tr>
+        <tr>
+          <Data>
+            <ColorName>Green fill / green text</ColorName>
+          </Data>
+          <Data>
+            <Color key="redDark" name="greenDark" hex={theme.greenDark} />
+          </Data>
+          <Data />
+          <Data />
+          <Data />
+          <Data>Confirmations and instructional components.</Data>
+        </tr>
+        <tr>
+          <Data>
+            <ColorName>Green border</ColorName>
+          </Data>
+          <Data>
+            <Color key="green" name="green" hex={theme.green} />
+          </Data>
+          <Data />
+          <Data />
+          <Data />
+          <Data>Confirmations and instructional components.</Data>
+        </tr>
+        <tr>
+          <Data>
+            <ColorName>Orange Fill</ColorName>
+          </Data>
+          <Data>
+            <Color key="orange" name="orange" hex={theme.orange} />
+          </Data>
+          <Data />
+          <Data />
+          <Data />
+          <Data>To notify users of things that require their attention.</Data>
+        </tr>
+        <tr>
+          <Data>
+            <ColorName>Orange border / orange text</ColorName>
+          </Data>
+          <Data>
+            <Color key="orangeDark" name="orangeDark" hex={theme.orangeDark} />
+          </Data>
+          <Data />
+          <Data />
+          <Data />
+          <Data>Complements orange fill.</Data>
+        </tr>
+      </tbody>
+    </Table>
+  );
 };

packages/ui-toolkit/src/theme/index.js

@@ -14,30 +14,42 @@ const color_name = {
 */
 
 const primary = {
-  primary: '#3B46CC',
+  primary: 'rgb(59, 70, 204)',
-  primaryHover: '#475AD1',
+  primaryHover: 'rgb(72, 83, 217)',
-  primaryActive: '#2D3884',
+  primaryActive: 'rgb(45, 56, 132)'
-  primaryDesaturated: '#3B4AAF',
-  primaryDesaturatedActive: '#2D3884'
 };
 
 // TOPOLOGY
 const secondary = {
-  secondary: '#464646',
+  secondary: 'rgb(70, 70, 70)',
-  secondaryHover: '#3F3F3F',
+  secondaryHover: 'rgb(53, 53, 53)',
-  secondaryActive: '#343434'
+  secondaryActive: 'rgb(45, 45, 45)'
 };
 
 const white = {
-  white: '#FFFFFF', // used
+  white: 'rgb(255, 255, 255)',
-  whiteHover: '#F8F8F8', // used
+  whiteHover: 'rgb(247, 247, 247)',
-  whiteActive: '#E9E9E9' // used
+  whiteActive: 'rgb(230, 230, 230)'
 };
 
-const tertiary = {
+const grey = {
-  tertiary: '#363636',
+  grey: 'rgb(216, 216, 216)',
-  tertiaryActive: 'rgba(54, 74, 205, 0.1)',
+  greyTransparent: 'rgba(73,73,73, 0.8)'
-  tertiaryActiveColor: '#2931C2'
+};
+
+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,
+  ...red,
-  text: '#494949', // used
+  ...orange,
-  grey: '#D8D8D8', // used
+  ...green,
-  greyLight: '#bdbdbd', // used
+  ...grey,
-  greyTransparent: 'rgba(73,73,73, 0.8)',
+  text: 'rgba(73,73,73, 1)',
-  disabled: '#FAFAFA', // used
+  textDisabled: 'rgba(73,73,73, 0.5)',
-  background: '#FAFAFA', // used
+  placeholder: 'rgb(99,99,99)',
-  green: '#00AF66', // used
+  disabled: 'rgb(250, 250, 250)', // used
-  greenDark: '#009858', // used
+  background: 'rgb(250, 250, 250)' // used
-  orange: '#E38200', // used
-  orangeDark: '#CB7400', // used
-  red: '#DA4B42', // used
-  redDark: '#CD251B', // used
-  blue: '#364ACD'
 };
 
 /** ********************************** 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 ********************************* */
 

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:
+react-styleguidist@^6.0.30:
-  version "6.0.30"
+  version "6.0.31"
-  resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.0.30.tgz#988a09282f8af43749e44602349ec524dc1f07a0"
+  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: