feat(ui-toolkit): add new components

references #1238

this includes:
 - add footer and frids
 - update colors
 - add tags
 - add empty table
 - add superscript
 - add toasts

packages/my-joy-instances/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap

@@ -105,8 +105,8 @@ exports[`renders <Rule/> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   min-height: 0;
+  color: rgb(216,216,216);
   margin: 0 0.375rem;
-  color: rgba(73,73,73,1);
 }
 
 .c5::-ms-expand {
@@ -131,8 +131,8 @@ exports[`renders <Rule/> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   min-height: 0;
+  color: rgb(216,216,216);
   margin: 0 0.375rem;
-  color: rgba(73,73,73,1);
 }
 
 .c7::-ms-expand {
@@ -157,8 +157,8 @@ exports[`renders <Rule/> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   min-height: 0;
+  color: rgb(216,216,216);
   margin: 0 0.375rem;
-  color: rgba(73,73,73,1);
 }
 
 .c10::-ms-expand {
@@ -183,8 +183,8 @@ exports[`renders <Rule/> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   min-height: 0;
+  color: rgb(216,216,216);
   margin: 0 0.375rem;
-  color: rgba(73,73,73,1);
 }
 
 .c13::-ms-expand {
@@ -952,8 +952,8 @@ exports[`renders <Rule/> without throwing 2`] = `
   -moz-appearance: none;
   appearance: none;
   min-height: 0;
+  color: rgb(216,216,216);
   margin: 0 0.375rem;
-  color: rgba(73,73,73,1);
 }
 
 .c5::-ms-expand {
@@ -978,8 +978,8 @@ exports[`renders <Rule/> without throwing 2`] = `
   -moz-appearance: none;
   appearance: none;
   min-height: 0;
+  color: rgb(216,216,216);
   margin: 0 0.375rem;
-  color: rgba(73,73,73,1);
 }
 
 .c7::-ms-expand {
@@ -1004,8 +1004,8 @@ exports[`renders <Rule/> without throwing 2`] = `
   -moz-appearance: none;
   appearance: none;
   min-height: 0;
+  color: rgb(216,216,216);
   margin: 0 0.375rem;
-  color: rgba(73,73,73,1);
 }
 
 .c10::-ms-expand {
@@ -1030,8 +1030,8 @@ exports[`renders <Rule/> without throwing 2`] = `
   -moz-appearance: none;
   appearance: none;
   min-height: 0;
+  color: rgb(216,216,216);
   margin: 0 0.375rem;
-  color: rgba(73,73,73,1);
 }
 
 .c13::-ms-expand {

packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Breadcrumb Default Breadcrumb 1`] = `
 .c7 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-weight: 600;
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -277,7 +277,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
 
 exports[`Breadcrumb Default Item 1`] = `
 .c1 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-weight: 600;
   line-height: 1.5rem;
   font-size: 0.9375rem;

packages/ui-toolkit/src/button/Special.md

@@ -0,0 +1,86 @@
+#### Icon Button
+
+Icon buttons are to be used to illustrate important actions and for when we are redirecting users to seperate services such as Github.
+
+```jsx
+// Name: Example
+const React = require('react');
+const { default: Button } = require('./');
+const { StartIcon } = require('../');
+
+  <Button
+    type="button"
+    secondary
+    bold
+    icon
+  >
+    <StartIcon />
+    <span>Start</span>
+  </Button>
+```
+
+#### Delete Button
+
+The delete button is basically an icon button, however it is coloured red to display the destructive nature of the action.
+
+```jsx
+// Name: Active
+const React = require('react');
+const { default: Button } = require('./');
+const { DeleteIcon } = require('../');
+
+
+<Button
+  type="button"
+  secondary
+  bold
+  icon
+  error
+>
+  <DeleteIcon fill="rgb(210, 67, 58)"/>
+  <span>Remove</span>
+</Button>
+
+// Tab: Disabled
+const React = require('react');
+const { default: Button } = require('./');
+const { DeleteIcon } = require('../');
+
+
+<Button
+  type="button"
+  secondary
+  disabled
+  bold
+  icon
+  error
+>
+  <DeleteIcon />
+  <span>Remove</span>
+</Button>
+```
+
+#### Toggle Switch
+Toggle switch is to be used when users have the choice to turn a service or feature on or off.
+
+```jsx
+// Name: Active
+const React = require('react');
+const { default: FormGroup } = require('../form/group');
+const { default: Toggle } = require('../form/toggle');
+
+<FormGroup name="who-killed-1">
+  <Toggle value="video">Activate</Toggle>
+</FormGroup>
+
+// Tab: Disabled
+const React = require('react');
+const { default: FormGroup } = require('../form/group');
+const { default: Toggle } = require('../form/toggle');
+
+<FormGroup name="who-killed-2" disabled>
+  <Toggle value="video" disabled>
+    Activate
+  </Toggle>
+</FormGroup>
+```

packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap

@@ -18,7 +18,7 @@ exports[`Card Card With Header 1`] = `
   border-style: solid;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
@@ -40,7 +40,7 @@ exports[`Card Card With Header 1`] = `
   border-style: solid;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
   color: rgb(255,255,255);
@@ -99,7 +99,7 @@ exports[`Card Default Card 1`] = `
   border-style: solid;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
@@ -131,12 +131,12 @@ exports[`Card Disabled Card 1`] = `
   border-style: solid;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
   border-color: rgb(216,216,216);
   background-color: rgb(250,250,250);
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   cursor: default;
 }
 
@@ -167,7 +167,7 @@ exports[`Card Secondary Card 1`] = `
   border-style: solid;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
   color: rgb(255,255,255);
@@ -202,7 +202,7 @@ exports[`Card Shadow Card 1`] = `
   border-style: solid;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);

packages/ui-toolkit/src/card/demo.md

@@ -1,4 +1,4 @@
-#### Container
+#### Basic Card
 
 ```jsx
 const React = require('react');
@@ -10,7 +10,7 @@ const { default: Card } = require('.');
 </Card>;
 ```
 
-#### Card Header
+#### Simple Card Header
 
 ```jsx
 const React = require('react');
@@ -34,7 +34,7 @@ const { Actions } = require('../icons');
 </Card>;
 ```
 
-### Inactive/Disabled Card Header
+#### Inactive Card
 
 ```jsx
 const React = require('react');
@@ -58,7 +58,7 @@ const { Actions } = require('../icons');
 </Card>;
 ```
 
-### Listed Cards
+#### Display-Only Listed Card
 
 ```jsx
 const React = require('react');
@@ -306,7 +306,7 @@ const { Fragment } = React;
 </Fragment>;
 ```
 
-### Select Cards
+#### Select Card
 
 ```jsx
 const React = require('react');

packages/ui-toolkit/src/footer/__tests__/__snapshots__/footer.spec.js.snap

@@ -2,6 +2,7 @@
 
 exports[`renders <Footer/> without throwing 1`] = `
 .c0 {
+  background: rgb(250,250,250);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

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

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import remcalc from 'remcalc';
 
 const List = styled.ul`
+  background: ${props => props.theme.background};
   display: flex;
   list-style: none;
   padding: ${remcalc(12)} ${remcalc(18)};

packages/ui-toolkit/src/footer/sticky-footer.js

@@ -11,6 +11,7 @@ const Container = ViewContainer.extend`
   flex-wrap: nowrap;
   align-content: stretch;
   align-items: stretch;
+  background: ${props => props.theme.background};
 `;
 
 const Footer = styled.div`

packages/ui-toolkit/src/footer/sticky.md

@@ -0,0 +1,55 @@
+#### Quick Action Toast
+
+Quick Action Toasts are used to show contextually relevent commands and actions and should stick to the bottom of the page when they are active.
+
+```jsx
+// Name: Active
+const React = require('react');
+const { StickyFooter, StartIcon, Button, StopIcon, ResetIcon, DeleteIcon } = require('../');
+const { Row, Col } = require('joyent-react-styled-flexboxgrid');
+
+<div style={{position: 'relative', height: 100}}>
+  <StickyFooter bottom>
+    <Row between="xs" middle="xs">
+      <Col xs={7}>
+        <Button
+          type="button"
+          secondary
+          icon
+        >
+          <StartIcon />
+          <span>Start</span>
+        </Button>
+        <Button
+          type="button"
+          secondary
+          icon
+        >
+          <StopIcon />
+          <span>Stop</span>
+        </Button>
+        <Button
+          type="button"
+          secondary
+          icon
+        >
+          <ResetIcon />
+          <span>Reboot</span>
+        </Button>
+      </Col>
+      <Col xs={5}>
+        <Button
+          type="button"
+          error
+          secondary
+          right
+          icon
+        >
+          <DeleteIcon fill="#D2433A"/>
+          <span>Remove</span>
+        </Button>
+      </Col>
+    </Row>
+  </StickyFooter>
+</div>
+```

packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap

@@ -323,7 +323,7 @@ exports[`Form Input 1`] = `
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -492,7 +492,7 @@ exports[`Form Radio 1`] = `
   width: 0.375rem;
   height: 0.375rem;
   border-radius: 50%;
-  background-color: rgba(73,73,73,1);
+  background-color: rgb(73,73,73);
   top: 50%;
   left: 50%;
   -webkit-transform: translateX(-50%) translateY(-50%);
@@ -624,7 +624,7 @@ exports[`Form Select 1`] = `
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -728,7 +728,7 @@ exports[`Form Textarea 1`] = `
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;

packages/ui-toolkit/src/form/usage-toggle.md

@@ -1,23 +0,0 @@
-```jsx
-const React = require('react');
-const { default: FormGroup } = require('./group');
-const { default: Toggle } = require('./toggle');
-
-<FormGroup name="who-killed-1">
-  <Toggle value="video">Video</Toggle>
-</FormGroup>;
-```
-
-#### Toggle > Disabled
-
-```jsx
-const React = require('react');
-const { default: FormGroup } = require('./group');
-const { default: Toggle } = require('./toggle');
-
-<FormGroup name="who-killed-2" disabled>
-  <Toggle value="video" disabled>
-    Video
-  </Toggle>
-</FormGroup>;
-```

packages/ui-toolkit/src/grids/Baseline.md

@@ -0,0 +1,13 @@
+#### Baseline & Spacing
+
+Most of the horizontal spacing between different elements and components is derived from 6 px. For example, the most common horizontal distance between elements of a component or components is 18 px. Another, less frequent, measurement is 12 px. The choice between 6, 12 or 18 px is based on visual and functional proximity of objects.
+
+```jsx noeditor
+const baseline = require('./baseline.svg');
+
+<img style={{
+    maxWidth: '100%',
+    marginTop: 22,
+    marginBottom: 40
+}} src={baseline} />
+```

packages/ui-toolkit/src/grids/Readme.md

@@ -0,0 +1,36 @@
+#### Large Grid
+
+```jsx noeditor
+const big = require('./big.svg');
+
+<img style={{
+    maxWidth: '100%',
+    marginTop: 22,
+    marginBottom: 40
+}} src={big} />
+```
+
+#### Medium Grid
+
+```jsx noeditor
+const medium = require('./medium.svg');
+
+<img style={{
+    maxWidth: '100%',
+    marginTop: 22,
+    marginBottom: 40
+}} src={medium} />
+```
+
+
+#### Small Grid
+
+```jsx noeditor
+const small = require('./small.svg');
+
+<img style={{
+    maxWidth: '100%',
+    marginTop: 22,
+    marginBottom: 40
+}} src={small} />
+```

packages/ui-toolkit/src/message/__tests__/__snapshots__/message.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Message Description 1`] = `
 .c0 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
@@ -19,7 +19,7 @@ exports[`Message Description 1`] = `
 
 exports[`Message Message 1`] = `
 .c3 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-weight: 600;
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -52,7 +52,7 @@ exports[`Message Message 1`] = `
 }
 
 .c4 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
@@ -85,7 +85,7 @@ exports[`Message Message 1`] = `
 
 exports[`Message Message Error 1`] = `
 .c3 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-weight: 600;
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -119,7 +119,7 @@ exports[`Message Message Error 1`] = `
 }
 
 .c4 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
@@ -152,7 +152,7 @@ exports[`Message Message Error 1`] = `
 
 exports[`Message Message Warning 1`] = `
 .c3 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-weight: 600;
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -186,7 +186,7 @@ exports[`Message Message Warning 1`] = `
 }
 
 .c4 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
@@ -219,7 +219,7 @@ exports[`Message Message Warning 1`] = `
 
 exports[`Message Title 1`] = `
 .c0 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-weight: 600;
   line-height: 1.5rem;
   font-size: 0.9375rem;

packages/ui-toolkit/src/navigation.md

@@ -0,0 +1,32 @@
+#### Breadcrumb
+
+```jsx
+// Name: Active
+const React = require('react');
+const { Breadcrumb, BreadcrumbItem, Anchor } = require('./index.js');
+
+<Breadcrumb>
+  <BreadcrumbItem>Home</BreadcrumbItem>
+  <BreadcrumbItem>
+    <Anchor href="https://joyent.com">Warp Records Blog</Anchor>
+  </BreadcrumbItem>
+  <BreadcrumbItem>
+    <Anchor href="https://joyent.com">Services</Anchor>
+  </BreadcrumbItem>
+  <BreadcrumbItem>
+    <Anchor href="https://joyent.com">Ngnix</Anchor>
+  </BreadcrumbItem>
+</Breadcrumb>;
+```
+
+#### Footer
+
+```jsx
+// Name: Active
+const React = require('react');
+const { Footer } = require('./');
+
+<div style={{position: 'relative', height: 100}}>
+  <Footer />
+</div>
+```

packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap

@@ -55,7 +55,7 @@ Array [
   border: 0.0625rem solid rgb(216,216,216);
   padding: 0.9375rem 1.125rem 0.1875rem 1.125rem;
   background: rgb(255,255,255);
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   -webkit-text-fill-color: currentcolor;
   z-index: 999;
   border-radius: 0.25rem;

packages/ui-toolkit/src/section-list/usage.md

@@ -20,17 +20,8 @@ const { default: SectionList } = require('./');
   <SectionListItem>
     <Anchor>User Scripts</Anchor>
   </SectionListItem>
-  <SectionListItem>
-    <Anchor>Networks</Anchor>
-  </SectionListItem>
-  <SectionListItem>
-    <Anchor>Firewall</Anchor>
-  </SectionListItem>
   <SectionListItem>
     <Anchor>Affinity</Anchor>
   </SectionListItem>
-  <SectionListItem>
-    <Anchor>Snapshots</Anchor>
-  </SectionListItem>
 </SectionList>;
 ```

packages/ui-toolkit/src/status-loader/__tests__/__snapshots__/loading.spec.js.snap

@@ -55,7 +55,7 @@ exports[`StatusLoader StatusLoader 1`] = `
 }
 
 .c4 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;

packages/ui-toolkit/src/styleguide/component.js

@@ -1,24 +1,13 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import styled, { keyframes } from 'styled-components';
 import remcalc from 'remcalc';
-import { Card, H2, P } from '../';
+import { P, H4 } from '../';
 
 const chevron =
   'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTsiIGNsYXNzPSJiYXNlbGluZS1idFRncEsgaGltUHhaIj48cGF0aCBmaWxsPSJyZ2JhKDczLCA3MywgNzMsIDEpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiPjwvcGF0aD48L3N2Zz4=';
 
-const CardStyled = styled(Card)`
-  margin-bottom: ${remcalc(36)};
-`;
-
-const Header = styled.header`
-  background: ${props => props.theme.primary};
-  padding: ${remcalc(48)} ${remcalc(60)};
-  position: relative;
-`;
 
 const Main = styled.div`
-  padding: ${remcalc(48)} ${remcalc(60)};
-
   h4[class*='rsg--heading'] {
     margin: 0;
     line-height: ${remcalc(26)};
@@ -102,17 +91,17 @@ export default ({
   tabBody
 }) => {
   return (
-    <CardStyled id={name.toLowerCase()}>
-      <Header>
-        <H2 white>{heading.props.children}</H2>
+    <Fragment>
+      <header>
+        <H4 white>{heading.props.children}</H4>
         {description &&
           description.props && <P white>{description.props.text}</P>}
-      </Header>
+      </header>
       <Main>
         <Props>{tabButtons}</Props>
         <Wrapper>{tabBody}</Wrapper>
         <Content>{examples}</Content>
       </Main>
-    </CardStyled>
+    </Fragment>
   );
 };

packages/ui-toolkit/src/styleguide/section.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import styled from 'styled-components';
-import { Card, H2, P } from '../';
+import { Card, H2, P, H4 } from '../';
 import remcalc from 'remcalc';
 
-const CardStyled = styled(Card)`
+const CardStyled = styled(Card) `
   margin-bottom: ${remcalc(36)};
 `;
 
@@ -30,22 +30,33 @@ const Main = styled.div`
 export default allProps => {
   const { name, content, components, sections, depth, description } = allProps;
 
-  const Tag = depth === 2 ? CardStyled : 'div';
-  const TagMain = depth === 2 ? Main : 'div';
+  if (depth === 1) {
     return (
-    <Tag id={name.replace(/\s+/g, '-').toLowerCase()}>
-      {name &&
-        depth !== 1 && (
+      <CardStyled id={name.replace(/\s+/g, '-').toLowerCase()}>
         <Header>
           <H2 white>{name}</H2>
-            {description && <P white>{description}</P>}
+          {description ? <P white>{description}</P> : null }
         </Header>
-        )}
-      <TagMain>
+        <Main>
           {content}
           {components}
           {sections}
-      </TagMain>
-    </Tag>
-  );
+        </Main>
+      </CardStyled>
+    )
+  }
+
+  return (
+    <Fragment>
+      <header>
+        <H4 white>{name}</H4>
+        {description ? <P white>{description}</P> : null}
+      </header>
+      <div>
+        {content}
+        {components}
+        {sections}
+      </div>
+    </Fragment>
+  )
 };

packages/ui-toolkit/src/styleguide/sidebar.js

@@ -24,6 +24,11 @@ const Header = styled(H3)`
   margin-top: ${remcalc(12)};
 `;
 
+const Link = styled.a`
+  color: #979797;
+  text-decoration: none;
+`
+
 export default ({ children: { props } }) => {
   const items = props.items.filter(item => item.name);
 
@@ -35,7 +40,7 @@ export default ({ children: { props } }) => {
     <List>
       {items.map(({ heading, name, slug, content }) => (
         <li key={name}>
-          <Header>{name}</Header>
+          <Header><Link href={`/#${slug}`}>{name}</Link></Header>
           {content}
         </li>
       ))}

packages/ui-toolkit/src/table/Readme.md

@@ -1,6 +1,7 @@
 #### Table Header
 
 ```jsx
+// Name: Active
 const React = require('react');
 const { FormGroup, Checkbox } = require('../form');
 const { default: Table, Thead, Tr, Th, Tbody } = require('./');
@@ -32,6 +33,7 @@ const { default: Table, Thead, Tr, Th, Tbody } = require('./');
 #### Table Footer
 
 ```jsx
+// Name: Active
 const React = require('react');
 const { FormGroup, Checkbox } = require('../form');
 const { default: Table, Tfoot, Tr, Th } = require('./');
@@ -91,9 +93,91 @@ const { default: Table, Tfoot, Tr, Th } = require('./');
 </Table>;
 ```
 
+
+#### Empty Table
+```jsx
+// Name: Active
+const React = require('react');
+const { FormGroup, Checkbox } = require('../form');
+const { default: Table, Thead, Tr, Th } = require('./');
+const { Card, H3, Button, P } = require('../');
+const { Padding, Margin } = require('styled-components-spacing');
+const { default: Flex } = require('styled-flex-component');
+
+
+
+<div>
+  <Table>
+    <Thead>
+      <Tr>
+        <Th
+          style={{ borderTop: '1px solid rgb(216,216,216)' }}
+          xs="32"
+          padding="0"
+          paddingLeft="12"
+          middle
+          left
+        >
+          <FormGroup style={{ display: 'flex', alignItems: 'center' }}>
+            <Checkbox noMargin />
+          </FormGroup>
+        </Th>
+        <Th
+          style={{ borderTop: '1px solid rgb(216,216,216)' }}
+          sortOrder="asc"
+          showSort
+          left
+          middle
+          selected
+          actionable
+        >
+          <span>Name </span>
+        </Th>
+        <Th
+          style={{ borderTop: '1px solid rgb(216,216,216)' }}
+          xs="150"
+          left
+          middle
+          actionable
+        >
+          <span>Status </span>
+        </Th>
+        <Th
+          style={{ borderTop: '1px solid rgb(216,216,216)' }}
+          xs="0"
+          sm="160"
+          left
+          middle
+          actionable
+        >
+          <span>Created </span>
+        </Th>
+        <Th
+          style={{ borderTop: '1px solid rgb(216,216,216)' }}
+          xs="60"
+          padding="0"
+        />
+      </Tr>
+    </Thead>
+  </Table>
+    <Card>
+    <Padding all={5}>
+      <Flex alignCenter justifyCenter column>
+        <H3>No instances yet?</H3>
+        <P center>You haven’t commissioned any instances yet, but they’re really easy to set up. Click below to get going.</P>
+        <Margin top={2}>
+          <Button>Create Instance</Button>
+        </Margin>
+      </Flex>
+    </Padding>
+  </Card>
+</div>
+```
+
 #### Multiple Selection List
 
 ```jsx
+// Name: Active
 const React = require('react');
 const { FormGroup, Checkbox } = require('../form');
 const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
@@ -169,6 +253,7 @@ const { Dot, Actions } = require('../icons');
 #### Single Selection List
 
 ```jsx
+// Name: Active
 const React = require('react');
 const { FormGroup, Radio } = require('../form');
 const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');

packages/ui-toolkit/src/table/__tests__/__snapshots__/table.spec.js.snap

@@ -153,7 +153,7 @@ exports[`Table Thead 1`] = `
 exports[`Table Tr 1`] = `
 .c0 {
   display: table-row;
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   background-color: rgb(255,255,255);
   box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
   box-sizing: border-box;

packages/ui-toolkit/src/tags/Readme.md

@@ -0,0 +1,75 @@
+#### Standard Tags
+
+```jsx
+// Name: Active
+const React = require('react');
+const { TagItem, TagList } = require('./');
+
+<TagItem active>Tags:4lyf</TagItem>
+
+// Tab: Normal
+const React = require('react');
+const { TagItem, TagList } = require('./');
+
+<TagItem>Tags:4lyf</TagItem>
+
+// Tab: Disabled
+const React = require('react');
+const { TagItem, TagList } = require('./');
+
+<TagItem disabled>Tags:4lyf</TagItem>
+
+// Tab: Error
+const React = require('react');
+const { TagItem, TagList } = require('./');
+
+<TagItem error>Tags:4lyf</TagItem>
+```
+
+#### Deleteable Tags
+
+```jsx
+// Name: Active
+const React = require('react');
+const { TagItem, TagList } = require('./');
+const { PlusIcon } = require('../');
+const { Margin } = require('styled-components-spacing');
+
+<TagItem active>
+    Tags:4lyf
+    <Margin left={1}><PlusIcon /></Margin>
+</TagItem>
+
+// Tab: Normal
+const React = require('react');
+const { TagItem, TagList } = require('./');
+const { PlusIcon } = require('../');
+const { Margin } = require('styled-components-spacing');
+
+<TagItem>
+    Tags:4lyf
+    <Margin left={1}><PlusIcon /></Margin>
+</TagItem>
+
+// Tab: Disabled
+const React = require('react');
+const { TagItem, TagList } = require('./');
+const { PlusIcon } = require('../');
+const { Margin } = require('styled-components-spacing');
+
+<TagItem disabled>
+    Tags:4lyf
+    <Margin left={1}><PlusIcon /></Margin>
+</TagItem>
+
+// Tab: Error
+const React = require('react');
+const { TagItem, TagList } = require('./');
+const { PlusIcon } = require('../');
+const { Margin } = require('styled-components-spacing');
+
+<TagItem error>
+    Tags:4lyf
+    <Margin left={1}><PlusIcon /></Margin>
+</TagItem>
+```

packages/ui-toolkit/src/tags/item.js

@@ -22,17 +22,24 @@ const Container = styled.div`
 const Tag = styled.li`
   border: ${remcalc(1)} solid ${props => props.theme.grey};
   box-sizing: border-box;
-  border-radius: ${remcalc(3)};
+  border-radius: ${remcalc(2)};
   font-size: ${remcalc(13)};
   line-height: ${remcalc(18)};
   padding: ${remcalc(5)} ${remcalc(12)};
   display: flex;
+  flex-grow: 0;
   align-items: center;
-  flex-grow: 1;
+
+  ${is('disabled') `
+      background: ${props => props.theme.disabled};
+  `};
+
+  ${is('error') `
+      border: ${remcalc(1)} solid ${props => props.theme.red};
+  `};
 
   ${is('active')`
       border: ${remcalc(1)} solid ${props => props.theme.primaryActive};
-      background: rgba(59, 70, 204, .1)
   `};
 
   ${is('onClick')`

packages/ui-toolkit/src/text/Readme.md

@@ -32,3 +32,38 @@ const styles = {
   <Small style={styles}>Libre Franklin Regular - 13px with 18px leading</Small>
 </div>;
 ```
+
+#### Small Type Scale
+
+```jsx
+const React = require('react');
+const H1 = require('/').H1;
+const H2 = require('/').H2;
+const H3 = require('/').H3;
+const H4 = require('/').H4;
+const P = require('/').P;
+const Small = require('/').Small;
+
+const styles = {
+  color: '#979797',
+  marginBottom: '22px',
+  display: 'block',
+  marginTop: '6px',
+  padding: 0
+};
+
+<div>
+  <H1 small>H1 - Don’t say it, shout it</H1>
+  <Small style={styles}>Libre Franklin Regular - 32px with 45px leading</Small>
+  <H2 small>H2 - Breadcrumb? More like breadloaf</H2>
+  <Small style={styles}>Libre Franklin Regular - 21px with 30px leading</Small>
+  <H3 small>H3 - Your friendly neighborhood workhorse</H3>
+  <Small style={styles}>Libre Franklin Regular - 18px with 26px leading</Small>
+  <H4 small>H4 - Body's bigger brother</H4>
+  <Small style={styles}>Libre Franklin Semibold - 15px with 24px leading</Small>
+  <P>P - Body copy</P>
+  <Small style={styles}>Libre Franklin Regular - 15px with 24px leading</Small>
+  <Small> C - Caption text</Small>
+  <Small style={styles}>Libre Franklin Regular - 13px with 18px leading</Small>
+</div>;
+```

packages/ui-toolkit/src/text/Superscript.md

@@ -0,0 +1,83 @@
+#### Default Superscript
+
+The default superscript was intially designed to offer supporting information on the service menu regarding service status. It can used as a typographic ident to support titles and names without the need for iconography.
+
+```jsx
+// Name: Example
+const React = require('react');
+const Sup = require('/').Sup;
+const P = require('/').P;
+const Small = require('/').Small
+
+const styles = {
+  color: '#979797',
+  marginBottom: '22px',
+  display: 'block',
+  marginTop: '6px',
+  padding: 0
+};
+
+<div>
+    <P>
+        Superscript Example
+        <Sup>Superscript</Sup>
+    </P>
+    <Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
+</div>
+```
+
+#### Alert Superscript
+
+The Alert variation of superscript is to be used as an excliamation, to announce supporting information that requires action, such as ‘New service’ or ‘Available now’.
+
+```jsx
+// Name: Example
+const React = require('react');
+const Sup = require('/').Sup;
+const P = require('/').P;
+const Small = require('/').Small
+
+const styles = {
+  color: '#979797',
+  marginBottom: '22px',
+  display: 'block',
+  marginTop: '6px',
+  padding: 0
+};
+
+<div>
+    <P>
+        Superscript Example
+        <Sup alert>Alert Superscript</Sup>
+    </P>
+    <Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
+</div>
+```
+
+#### Badge Superscript
+
+The badge variation of superscript is for when a specific element of information is repeated numberous times in one page/component. In being more visual, it becomes an ‘ident’ in information dense areas to allow for clear recognition.
+
+```jsx
+// Name: Example
+const React = require('react');
+const Sup = require('/').Sup;
+const P = require('/').P;
+const Small = require('/').Small
+
+const styles = {
+  color: '#979797',
+  marginBottom: '22px',
+  display: 'block',
+  marginTop: '6px',
+  padding: 0
+};
+
+<div>
+    <P>
+        Superscript Example
+        <Sup badge>SSD</Sup>
+    </P>
+    <Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
+</div>
+```

packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap

@@ -5,7 +5,7 @@ exports[`Button H1 1`] = `
   font-size: 2rem;
   margin: 0.625rem 0;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-size: 2.25rem;
   line-height: 2.8125rem;
   font-style: normal;
@@ -36,7 +36,7 @@ exports[`Button H1 1`] = `
 
 exports[`Button H2 1`] = `
 .c0 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-weight: normal;
   line-height: 1.875rem;
   font-size: 1.5rem;
@@ -65,7 +65,7 @@ exports[`Button H2 1`] = `
 
 exports[`Button H3 1`] = `
 .c0 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-weight: normal;
   line-height: 1.625rem;
   font-size: 1.3125rem;
@@ -82,7 +82,7 @@ exports[`Button H3 1`] = `
 .c0 + h5,
 .c0 + div,
 .c0 + span {
-  margin-top: 1.5rem;
+  margin-top: 0.75rem;
 }
 
 <h3
@@ -94,7 +94,7 @@ exports[`Button H3 1`] = `
 
 exports[`Button H4 1`] = `
 .c0 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-weight: 600;
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -123,7 +123,7 @@ exports[`Button H4 1`] = `
 
 exports[`Button H5 1`] = `
 .c0 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-weight: normal;
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -152,7 +152,7 @@ exports[`Button H5 1`] = `
 
 exports[`Button H6 1`] = `
 .c0 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   font-weight: normal;
   line-height: 1.125rem;
   font-size: 0.8125rem;
@@ -181,7 +181,7 @@ exports[`Button H6 1`] = `
 
 exports[`Button Paragraph 1`] = `
 .c0 {
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
@@ -198,7 +198,7 @@ exports[`Button Small 1`] = `
 .c0 {
   font-size: 80%;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  color: rgba(73,73,73,1);
+  color: rgb(73,73,73);
   line-height: 1.125rem;
   font-size: 0.8125rem;
   padding-bottom: 0.75rem;
@@ -214,8 +214,7 @@ exports[`Button Small 1`] = `
 exports[`Button Sup 1`] = `
 .c0 {
   position: absolute;
-  margin-top: -0.375rem;
-  border-radius: 0.1875rem;
+  margin-left: 0.375rem;
   font-weight: 600;
   line-height: normal;
   font-size: 0.5rem;
@@ -244,8 +243,7 @@ exports[`Button Sup 1`] = `
 exports[`Button Sup badge 1`] = `
 .c0 {
   position: absolute;
-  margin-top: -0.375rem;
-  border-radius: 0.1875rem;
+  margin-left: 0.375rem;
   font-weight: 600;
   line-height: normal;
   font-size: 0.5rem;
@@ -262,6 +260,7 @@ exports[`Button Sup badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  border-radius: 0.1875rem;
   padding: 0.125rem 0.1875rem;
   background: rgb(59,70,204);
   color: rgb(255,255,255);

packages/ui-toolkit/src/text/headings.js

@@ -14,20 +14,24 @@ export const H1 = NH1.extend`
   font-weight: normal;
   margin: 0;
 
-  ${is('inline')`
+  ${is('inline') `
     display: inline-block;
   `};
 
-  ${is('bold')`
+  ${is('small') `
+    font-size: ${remcalc(32)};
+  `};
+
+  ${is('bold') `
     font-weight: ${props => props.theme.font.weight.semibold};
   `};
 
-  ${is('white')`
+  ${is('white') `
     -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
-  ${isNot('noMargin')`
+  ${isNot('noMargin') `
     & + p,
     & + small,
     & + h1,
@@ -50,20 +54,25 @@ export const H2 = styled.h2`
   font-size: ${remcalc(24)};
   margin: 0;
 
-  ${is('inline')`
+  ${is('inline') `
     display: inline-block;
   `};
 
-  ${is('bold')`
+
+  ${is('small') `
+    font-size: ${remcalc(24)};
+  `};
+
+  ${is('bold') `
     font-weight: ${props => props.theme.font.weight.semibold};
   `};
 
-  ${is('white')`
+  ${is('white') `
     -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
-  ${isNot('noMargin')`
+  ${isNot('noMargin') `
     & + p,
     & + small,
     & + h1,
@@ -86,20 +95,25 @@ export const H3 = styled.h3`
   font-size: ${remcalc(21)};
   margin: 0;
 
-  ${is('inline')`
+  ${is('inline') `
     display: inline-block;
   `};
 
-  ${is('bold')`
+
+  ${is('small') `
+    font-size: ${remcalc(18)};
+  `};
+
+  ${is('bold') `
     font-weight: ${props => props.theme.font.weight.semibold};
   `};
 
-  ${is('white')`
+  ${is('white') `
     -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
-  ${isNot('noMargin')`
+  ${isNot('noMargin') `
     & + p,
     & + small,
     & + h1,
@@ -110,7 +124,7 @@ export const H3 = styled.h3`
     & + h5,
     & + div,
     & + span {
-      margin-top: ${remcalc(24)};
+      margin-top: ${remcalc(12)};
     }
   `};
 `;
@@ -122,16 +136,16 @@ export const H4 = styled.h4`
   font-size: ${remcalc(15)};
   margin: 0;
 
-  ${is('inline')`
+  ${is('inline') `
     display: inline-block;
   `};
 
-  ${is('white')`
+  ${is('white') `
     -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
-  ${isNot('noMargin')`
+  ${isNot('noMargin') `
     & + p,
     & + small,
     & + h1,
@@ -154,20 +168,20 @@ export const H5 = styled.h4`
   font-size: ${remcalc(15)};
   margin: 0;
 
-  ${is('inline')`
+  ${is('inline') `
     display: inline-block;
   `};
 
-  ${is('bold')`
+  ${is('bold') `
     font-weight: ${props => props.theme.font.weight.semibold};
   `};
 
-  ${is('white')`
+  ${is('white') `
     -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
-  ${isNot('noMargin')`
+  ${isNot('noMargin') `
     & + p,
     & + small,
     & + h1,
@@ -190,20 +204,20 @@ export const H6 = styled.h6`
   font-size: ${remcalc(13)};
   margin: 0;
 
-  ${is('inline')`
+  ${is('inline') `
     display: inline-block;
   `};
 
-  ${is('bold')`
+  ${is('bold') `
     font-weight: ${props => props.theme.font.weight.semibold};
   `};
 
-  ${is('white')`
+  ${is('white') `
     -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
-  ${isNot('noMargin')`
+  ${isNot('noMargin') `
     & + p,
     & + small,
     & + h1,

packages/ui-toolkit/src/text/p.js

@@ -15,6 +15,10 @@ export default styled.p`
     color: ${props => props.theme.white}
   `};
 
+  ${is('center') `
+    text-align: center;
+  `};
+
   ${is('monospace')`
     font-family: ${props => props.theme.monoFont.families};
   `};

packages/ui-toolkit/src/text/sup.js

@@ -2,10 +2,10 @@ import styled from 'styled-components';
 import remcalc from 'remcalc';
 import is from 'styled-is';
 
+
 export default styled.sup`
   position: absolute;
-  margin-top: ${remcalc(-6)};
-  border-radius: ${remcalc(3)};
+  margin-left: ${remcalc(6)};;
   font-weight: ${props => props.theme.font.weight.semibold};
   line-height: normal;
   font-size: ${remcalc(8)};
@@ -15,8 +15,13 @@ export default styled.sup`
   justify-content: center;
 
   ${is('badge')`
+    border-radius: ${remcalc(3)};
     padding: ${remcalc(2)} ${remcalc(3)};
     background: ${props => props.theme.primary};
     color: ${props => props.theme.white};
   `};
+
+  ${is('alert')`
+    color: ${props => props.theme.orangeDark}
+  `}
 `;

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

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
 import { P, H3 } from '../text';
 import is from 'styled-is';
 import theme from './';
+import Flex from 'styled-flex-component';
 import { Margin } from 'styled-components-spacing';
+import copy from 'clipboard-copy';
+import { Clipboard } from '../icons';
+
 
 // Function to convert hex format to a rgb color
 function rgb2hex(rgb) {
@@ -19,14 +23,39 @@ function rgb2hex(rgb) {
     : '';
 }
 
+const parseRGB = c => {
+  const color = c.split('(');
+  const rgb = color[1].split(')')[0];
+
+
+  return `${color[0].toUpperCase()}: ${rgb}`
+}
+
 const Box = styled.div`
-  height: ${remcalc(48)};
+  width: ${remcalc(187)};
+  height: ${remcalc(126)};
   background: ${props => props.hex};
-  width: 100%;
-  margin: auto;
-  text-align: center;
-  padding: 0 ${remcalc(60)};
+  padding: ${remcalc(18)} ${remcalc(26)};
   box-sizing: border-box;
+
+  ${is('bottom') `
+    margin-bottom: ${remcalc(45)};
+  `};
+
+  ${is('right') `
+    margin-right: ${remcalc(45)};
+  `}
+`;
+
+const ClipboardIconActionable = Clipboard.extend`
+  cursor: pointer;
+  margin-left: ${remcalc(12)};
+
+  path { fill: ${props => props.theme.white}; }
+
+  ${is('dark') `
+    path { fill: ${props => props.theme.text}; }
+  `};
 `;
 
 const Paragraph = P.extend`
@@ -38,7 +67,7 @@ const Paragraph = P.extend`
   width: ${remcalc(193)};
   text-align: left;
 
-  ${is('dark')`
+  ${is('dark') `
     color: ${props => props.theme.text};
     -webkit-text-fill-color: currentcolor;
   `};
@@ -49,7 +78,7 @@ const Code = styled.code`
   margin: 0;
   color: ${props => props.theme.white};
 
-  ${is('dark')`
+  ${is('dark') `
     color: ${props => props.theme.text};
     -webkit-text-fill-color: currentcolor;
   `};
@@ -58,34 +87,38 @@ const Code = styled.code`
 const List = styled.ul`
   list-style: none;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
   padding: 0;
   margin: 0;
   height: ${remcalc(48)};
 
   li {
     padding: 0;
+
+    &:not(:last-child) {
+      margin-bottom: ${remcalc(6)};
+    }
   }
 `;
 
-const Color = ({ name, color, dark }) => (
-  <Box hex={color}>
+const Color = ({ name, color, dark, bottom, right }) => (
+  <Box hex={color} bottom={bottom} right={right}>
     <List>
       <li>
         <Paragraph dark={dark}>{name}</Paragraph>
       </li>
       <li>
-        <Code dark={dark}>{rgb2hex(color)}</Code>
+        <Flex alignCenter><Code dark={dark}>{rgb2hex(color).toUpperCase()}</Code>  <ClipboardIconActionable dark={dark} onClick={() => copy(rgb2hex(color).toUpperCase())} /></Flex>
       </li>
       <li>
-        <Code dark={dark}>{color}</Code>
+        <Code dark={dark}>{parseRGB(color)}</Code>
       </li>
     </List>
   </Box>
 );
 
-export default () => [
+export default () => (
+  <Fragment>
     <div>
       <H3>Action Colors</H3>
       <P>
@@ -94,65 +127,86 @@ export default () => [
         act as status colors to alert users on the condition and nature of
         components.
     </P>
-  </div>,
-  <Margin top={4} bottom={2}>
+    </div>
+    <Margin style={{ display: 'inline-block' }} top={4} bottom={5} right={5}>
       <Color
         key="primaryHover"
-      name="Blue 1 - Aqua Marine"
+        name="Blue 1"
         color={theme.primary}
       />
       <Color
         key="primaryActive"
-      name="Blue 2 - Lost in Space"
+        name="Blue 2"
         color={theme.primaryActive}
       />
-  </Margin>,
-  <Margin bottom={2}>
-    <Color key="green" name="Green 1 - Confirmaton" color={theme.green} />
+    </Margin>
+    <Margin style={{ display: 'inline-block' }} top={4} bottom={5}>
+      <Color
+        key="joyent1"
+        name="Joyent 1"
+        color="rgb(44, 72, 89)"
+      />
+      <Color
+        key="joyent2"
+        name="Joyent 2"
+        color="rgb(27, 50, 64)"
+      />
+    </Margin>
+    <div>
+      <Margin right={5} style={{ display: 'inline-block' }} bottom={2}>
+        <Color key="green" name="Green 1" color={theme.green} />
         <Color
           key="greenDark"
-      name="Green 2 - Confirmation Outline"
+          name="Green 2"
           color={theme.greenDark}
         />
-  </Margin>,
-  <Margin bottom={2}>
-    <Color key="orange" name="Orange 1 - Warning" color={theme.orange} />
+      </Margin>
+      <Margin bottom={2} right={5} style={{ display: 'inline-block' }}>
+        <Color key="orange" name="Orange 1" color={theme.orange} />
         <Color
           key="orangeDark"
-      name="Orange 2 - Warning Outline"
+          name="Orange 2"
           color={theme.orangeDark}
         />
-  </Margin>,
-  <Margin bottom={5}>
-    <Color key="red" name="Red 1 - Error" color={theme.red} />
-    <Color key="redDark" name="Red 2 - Error Outline" color={theme.redDark} />
-  </Margin>,
-  <H3>Greys</H3>,
+      </Margin>
+      <Margin bottom={5} right={5} style={{ display: 'inline-block' }}>
+        <Color key="red" name="Red 1" color={theme.red} />
+        <Color key="redDark" name="Red 2" color={theme.redDark} />
+      </Margin>
+    </div>
+    <H3>Greys</H3>
     <P>
       Greys give Triton a sense of depth and offer contrast between potentially
       similar components. They allow us to make certain components look clickable,
       whilst making others appear disabled or static.
-  </P>,
+  </P>
     <Margin top={4}>
+      <Flex wrap>
         <Color
+          bottom
+          right
           dark
           key="disabled"
           name="Grey 1 - Background"
           color={theme.disabled}
         />
         <Color
+          bottom
+          right
           dark
           key="whiteActive"
           name="Grey 2 - Faded"
           color={theme.whiteActive}
         />
-    <Color dark key="grey" name="Grey 3  - Outline" color={theme.grey} />
-    <Color key="greyDark" name="Grey 4  - Disabled" color={theme.greyDark} />
-    <Color key="text" name="Grey 5  - Text" color={theme.text} />
-    <Color
+        <Color bottom dark key="grey" name="Grey 3  - Dividers" color={theme.grey} />
+        <Color bottom right key="greyDark" name="Grey 4  - Disabled" color={theme.greyDark} />
+        <Color bottom right key="text" name="Grey 5  - Text" color={theme.text} />
+        <Color bottom
           key="greyDarker"
-      name="Grey 6  - Charcoal"
+          name="Grey 6"
           color={theme.greyDarker}
         />
+      </Flex>
     </Margin>
-];
+  </Fragment>
+)

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

@@ -129,7 +129,7 @@ export const base = {
   ...orange,
   ...green,
   ...grey,
-  text: 'rgba(73, 73, 73, 1)',
+  text: 'rgb(73, 73, 73)',
   textDisabled: 'rgba(73, 73, 73, 0.5)',
   placeholder: 'rgb(99, 99, 99)',
   disabled: 'rgb(250, 250, 250)', // used

packages/ui-toolkit/src/tooltip/__tests__/__snapshots__/tooltip.spec.js.snap

@@ -17,7 +17,7 @@ Array [
   .c0 {
   padding: 0.75rem 1.125rem;
   font-weight: normal;
-  background: rgba(73,73,73,1);
+  background: rgb(73,73,73);
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
   z-index: 999;
@@ -34,7 +34,7 @@ Array [
 
 .c0[data-placement^='top'] .b {
   border-width: 0.375rem 0.375rem 0 0.375rem;
-  border-color: rgba(73,73,73,1) transparent transparent transparent;
+  border-color: rgb(73,73,73) transparent transparent transparent;
   bottom: -0.375rem;
   margin-top: 0;
   margin-bottom: 0;
@@ -54,7 +54,7 @@ Array [
 
 .c0[data-placement^='bottom'] .b {
   border-width: 0 0.375rem 0.375rem 0.375rem;
-  border-color: transparent transparent rgba(73,73,73,1) transparent;
+  border-color: transparent transparent rgb(73,73,73) transparent;
   top: -0.375rem;
   margin-top: 0;
   margin-bottom: 0;
@@ -100,7 +100,7 @@ Array [
 
 .c0[data-placement^='left'] .b {
   border-width: 0.375rem 0 0.375rem 0.375rem;
-  border-color: transparent transparent transparent rgba(73,73,73,1);
+  border-color: transparent transparent transparent rgb(73,73,73);
   right: -0.75rem;
   margin-top: 0;
   margin-bottom: 0;
@@ -126,7 +126,7 @@ Array [
 
 .c0[data-placement^='right'] .b {
   border-width: 0.375rem 0.375rem 0.375rem 0;
-  border-color: transparent rgba(73,73,73,1) transparent transparent;
+  border-color: transparent rgb(73,73,73) transparent transparent;
   left: -0.75rem;
   margin-top: 0;
   margin-bottom: 0;

packages/ui-toolkit/styleguide.config.js

@@ -33,9 +33,6 @@ module.exports = {
   },
   title: 'Design System',
   showCode: true,
-  sections: [
-    {
-      name: 'Base Language',
   sections: [
     {
       name: 'Color Palette',
@@ -44,34 +41,91 @@ module.exports = {
       content: 'src/theme/colors.md'
     },
     {
-          name: 'Typography',
-          content: 'src/text/Readme.md'
-        }
-      ]
+      name: 'Typographic Scale',
+      content: 'src/text/Readme.md',
+      description:
+        'Triton uses two typographic scales, a large and a small. The large is to be used on breakpoints above 600px, whilst the small is to be used on anything under that. ',
+    },
+    {
+      name: 'Grids',
+      content: 'src/grids/Readme.md',
+      description:
+        'Triton’s grid aims to have maximum coverage over a wide range of devices. With a maximum container width of 964px, we are able to display the main desktop experience all the way down to a tradional landscape tablet device.',
+    },
+    {
+      name: 'Baseline Grids',
+      content: 'src/grids/Baseline.md',
+      description:
+        'All of the size and spacing values are derived on the baseline grid. The baseline grid is composed of horizontal lines positioned 6 px apart, making the base measurement unit 6 px.',
+    },
+    {
+      name: 'Superscript',
+      content: 'src/text/Superscript.md',
+      description:
+        'Superscript is a way of formatting text so they appear above the baseline, drawing more attention to a smaller, less important element of information.',
+    },
+    {
+      name: 'Buttons',
+      description: 'Buttons are the core of any UI kit, and we are no exception. Here we have documented to most basic variations of the button states, which include but are limited to; Default, Hover, Clicked, and Disabled. ',
+      content: 'src/button/Readme.md',
+    },
+    {
+      name: 'Special Buttons',
+      description: 'Icon buttons are to be used to illustrate important actions and for when we are redirecting users to seperate services such as Github. ',
+      content: 'src/button/Special.md',
     },
     {
       name: 'Basic Components',
       components: () => [
-        'src/button/index.js',
         'src/form/input.js',
         'src/form/radio.js',
         'src/form/select.js',
         'src/form/checkbox.js',
-        'src/form/toggle.js',
-        'src/card/card.js',
         'src/tooltip/index.js',
         'src/popover/index.js'
       ]
     },
+    {
+      name: 'Tags',
+      content: 'src/tags/Readme.md',
+      description: 'Tags are used to identify instances and services provided by Triton. Our tag style is derived from our small button style, but it’s inlaid text is written to represent the key:value function of the tagging system.'
+    },
+    {
+      name: 'Cards',
+      content: 'src/card/demo.md',
+      description:
+        'Cards are the most widely used component within the current Triton designs. They are used to divide, compartmentalize, and sort information and components that are related. Our card style uses a white background with a Grey 3 border. In some cases we attach a header to cards with either a white background, a coloured background to denote an active status, or a grey background for inactive status.',
+    },
+    {
+      name: 'Tables',
+      content: 'src/table/Readme.md',
+      description:
+        'Tritons uses tables throughout the service in a number of different ways. Tables can be used to list multiple variations of simgle information types, such as instqance lists, snapshots, and package types. Tables can either be multiple select (checkbox) or single select (radio button) and both variations are shown below.',
+    },
     {
       name: 'Compound Components',
       components: () => [
-        'src/table/index.js',
         'src/message/index.js',
-        'src/section-list/index.js',
-        'src/breadcrumb/index.js'
       ]
     },
+    {
+      name: 'Toasts',
+      content: 'src/footer/sticky.md',
+      description:
+        'Toast’s are pop-up that stick to the bottom of the page. Within Triton they are primarily used to contain contextual actions, such as ‘Deploy Instance’ and ‘Delete Instance’. They can also be used to contain universally relevant information like cookies.'
+    },
+    {
+      name: 'Navigation',
+      content: 'src/navigation.md',
+      description:
+        'These elements of navigation across are unoversal across the entire Tiron ecosystem. The primary nav allows users to switch service consoles and data centers, the breadcrumb orientates users within the specific console they’re in, and the footer provides universally important reference information like T’s & C’s.'
+    },
+    {
+      name: 'Sub-section Navigation',
+      content: 'src/section-list/usage.md',
+      description:
+        'We provide users with a number of ways to navigate around sections and consoles. Apart from the breadcrumb which is detailed above, we also provide a tabs components that can be embedded throughout the service..'
+    },
     {
       name: 'Assets',
       sections: [