Merge branch 'master' of https://github.com/user-interviews/ui-design-system

Author: Dave Ferris

scss/palette.scss

@@ -2,7 +2,6 @@
 
 $ux-black: #000000;
 $ux-blue: #337ab7;
-$ux-dark-blue: #639BB8;
 $ux-gray: #A1A1A1;
 $ux-green: #6DBD63;
 $ux-light-blue: #7CCBF2;

src/Styles/index.js

@@ -0,0 +1,7 @@
+import palette from './palette';
+import zStack from './zStack';
+
+export {
+  palette,
+  zStack,
+};

src/Styles/palette.js

@@ -2,27 +2,62 @@
 
 export default {
   uxBlack: '#000000',
-  uxBlue: '#337ab7',
+  uxBlue: '#337AB7',
+  uxGray: '#A1A1A1',
+  uxGreen: '#6DBD63',
+  uxOrange: '#F59C27',
+  uxPurple: '#8B008B',
+  uxRed: '#FF4E00',
+  uxYellow: '#F6D810',
+  uxWhite: '#FFFFFF',
 
-  uxGreen100: '#F3FFF2',
-  uxGreen200: '#E3FDE0',
-  uxGreen500: '#6DBD63',
-  uxGreen600: '#47A13B',
+  uxBlue100: '#EBF6FF',
+  uxBlue200: '#C9E5FC',
+  uxBlue300: '#92CBFC',
+  uxBlue400: '#5AA4E5',
+  uxBlue500: '#337AB7', // uxBlue
+  uxBlue600: '#155B99',
+  uxBlue700: '#0D4473',
+  uxBlue800: '#083054',
+  uxBlue900: '#032847',
 
   uxGray100: '#F9F9F9',
   uxGray200: '#F1F1F1',
-  uxGray500: '#A1A1A1',
+  uxGray300: '#E1E1E1',
+  uxGray400: '#D1D1D1',
+  uxGray500: '#A1A1A1', // uxGray
   uxGray600: '#818181',
+  uxGray700: '#616161',
+  uxGray800: '#444444',
+  uxGray900: '#222222',
+
+  uxGreen100: '#F3FFF2',
+  uxGreen200: '#E3FDE0',
+  uxGreen300: '#BFFEB8',
+  uxGreen400: '#85DC7A',
+  uxGreen500: '#6DBD63', // uxGreen
+  uxGreen600: '#47A13B',
+  uxGreen700: '#297021',
+  uxGreen800: '#1A5313',
+  uxGreen900: '#0E4207',
 
   uxOrange100: '#FDEAD2',
   uxOrange200: '#FCDFB9',
-  uxOrange500: '#F59C27',
+  uxOrange300: '#FAC988',
+  uxOrange400: '#F7B258',
+  uxOrange500: '#F59C27', // uxOrange
   uxOrange600: '#E18C28',
+  uxOrange700: '#AE6608',
+  uxOrange800: '#7D4A06',
+  uxOrange900: '#653B05',
 
   uxRed100: '#F0D9D9',
   uxRed200: '#E8C5CB',
-  uxRed500: '#FF4E00',
+  uxRed300: '#EB7A7A',
+  uxRed400: '#E44E4E',
+  uxRed500: '#FF4E00', // uxRed
   uxRed600: '#C71F1F',
-
-  uxWhite: '#FFFFFF',
+  uxRed700: '#B11B1B',
+  uxRed800: '#9B1818',
+  uxRed900: '#851414',
 };

src/index.js

@@ -1,5 +1,6 @@
 import Card from './Card/Card';
 import CopyToClipboard from './CopyToClipboard/CopyToClipboard';
+import FadeTransition from './FadeTransition/FadeTransition';
 import {
  Flash, MessageTypes, withFlash, withFlashPropTypes, useFlash,
 } from './Flash';
@@ -16,6 +17,7 @@ import TrackedButton from './TrackedButton/TrackedButton';
 export {
   Card,
   CopyToClipboard,
+  FadeTransition,
   Flash,
   Form,
   FormControlLabel,

stories/Palette.stories.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import palette from '../src/Styles/palette';
+
+import { withPadding } from './decorators';
+
+const renderColor = (colorName) => (
+  <div style={{ display: 'flex', height: '20rem', width: '100%' }}>
+    {
+      [...Array(9)].map((_, i) => {
+        const colorNameKey = `ux${colorName}${i + 1}00`;
+
+        return (
+          <div
+            style={{
+              backgroundColor: palette[colorNameKey],
+              height: '100%',
+              flexBasis: '11%',
+            }}
+          >
+            <p
+              style={{
+                backgroundColor: '#FFF',
+                color: '#000',
+                fontSize: '1rem',
+                margin: '1rem',
+                textAlign: 'center',
+              }}
+            >
+              {colorNameKey}
+            </p>
+          </div>
+        );
+      })
+    }
+  </div>
+);
+
+export default {
+  title: 'Design System/Color Palette',
+  decorators: [withPadding],
+};
+
+export const Blue = renderColor('Blue');
+export const Gray = renderColor('Gray');
+export const Green = renderColor('Green');
+export const Orange = renderColor('Orange');
+export const Red = renderColor('Red');