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

fixes #768
2017-10-17 11:01:57 +01:00 · 2017-10-17 11:01:57 +01:00 · fd17bf995b
commit fd17bf995b
parent 772b097458
15 changed files with 354 additions and 74 deletions
--- a/packages/my-joy-beta/.yarnclean
+++ b/packages/my-joy-beta/.yarnclean
--- 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',
--- 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,
--- 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};
    }
  `};

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

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

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

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

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

--- 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: