Implement new button api

src/core/client/stream/components/PostCommentForm.tsx

@@ -41,7 +41,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
         </Field>
         <div className={styles.postButtonContainer}>
           <Localized id="comments-postCommentForm-post">
-            <Button disabled={submitting} primary>
+            <Button color="primary" disabled={submitting}>
               Post
             </Button>
           </Localized>

src/core/client/stream/components/ReplyList.tsx

@@ -34,8 +34,7 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
               aria-controls={`talk-comments-replyList-log--${props.commentID}`}
               onClick={props.onShowAll}
               disabled={props.disableShowAll}
-              secondary
-              invert
+              variant="outlined"
               fullWidth
             >
               Show All Replies

src/core/client/stream/components/Stream.tsx

@@ -42,8 +42,7 @@ const Stream: StatelessComponent<StreamProps> = props => {
             <Button
               id={"talk-comments-stream-loadMore"}
               onClick={props.onLoadMore}
-              secondary
-              invert
+              variant="outlined"
               fullWidth
               disabled={props.disableLoadMore}
               aria-controls="talk-comments-stream-log"

src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap

@@ -60,9 +60,8 @@ exports[`when there is more disables load more button 1`] = `
         disabled={true}
         fullWidth={true}
         id="talk-comments-replyList-showAll--comment-id"
-        invert={true}
         onClick={[Function]}
-        secondary={true}
+        variant="outlined"
       >
         Show All Replies
       </withPropsOnChange(Button)>
@@ -103,9 +102,8 @@ exports[`when there is more renders a load more button 1`] = `
         disabled={false}
         fullWidth={true}
         id="talk-comments-replyList-showAll--comment-id"
-        invert={true}
         onClick={[Function]}
-        secondary={true}
+        variant="outlined"
       >
         Show All Replies
       </withPropsOnChange(Button)>

src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap

@@ -126,9 +126,8 @@ exports[`when there is more disables load more button 1`] = `
         disabled={true}
         fullWidth={true}
         id="talk-comments-stream-loadMore"
-        invert={true}
         onClick={[Function]}
-        secondary={true}
+        variant="outlined"
       >
         Load More
       </withPropsOnChange(Button)>
@@ -202,9 +201,8 @@ exports[`when there is more renders a load more button 1`] = `
         disabled={false}
         fullWidth={true}
         id="talk-comments-stream-loadMore"
-        invert={true}
         onClick={[Function]}
-        secondary={true}
+        variant="outlined"
       >
         Load More
       </withPropsOnChange(Button)>

src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`loads more comments 1`] = `
 <div
-  className="Flex-root App-root Flex-justifyCenter"
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
 >
   <div
     className="Stream-root"
@@ -28,7 +28,7 @@ exports[`loads more comments 1`] = `
         className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="BaseButton-root Button-root Button-primary"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -43,12 +43,12 @@ exports[`loads more comments 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       >
         <div
           role="article"
@@ -77,7 +77,7 @@ exports[`loads more comments 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       >
         <div
           role="article"
@@ -106,7 +106,7 @@ exports[`loads more comments 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       >
         <div
           role="article"
@@ -141,7 +141,7 @@ exports[`loads more comments 1`] = `
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root Flex-justifyCenter"
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
 >
   <div
     className="Stream-root"
@@ -167,7 +167,7 @@ exports[`renders comment stream 1`] = `
         className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="BaseButton-root Button-root Button-primary"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -182,12 +182,12 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       >
         <div
           role="article"
@@ -216,7 +216,7 @@ exports[`renders comment stream 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       >
         <div
           role="article"
@@ -246,7 +246,7 @@ exports[`renders comment stream 1`] = `
       </div>
       <button
         aria-controls="talk-comments-stream-log"
-        className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
+        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
         disabled={false}
         id="talk-comments-stream-loadMore"
         onBlur={[Function]}

src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root Flex-justifyCenter"
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
 >
   <div
     className="Stream-root"
@@ -28,7 +28,7 @@ exports[`renders comment stream 1`] = `
         className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="BaseButton-root Button-root Button-primary"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -43,12 +43,12 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       >
         <div
           role="article"
@@ -77,7 +77,7 @@ exports[`renders comment stream 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       >
         <div
           role="article"
@@ -108,7 +108,7 @@ exports[`renders comment stream 1`] = `
           className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-root Flex-itemGutter Flex-directionColumn"
+            className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
             id="talk-comments-replyList-log--comment-with-replies"
             role="log"
           >

src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root Flex-justifyCenter"
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
 >
   <div
     className="Stream-root"
@@ -28,7 +28,7 @@ exports[`renders comment stream 1`] = `
         className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="BaseButton-root Button-root Button-primary"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -43,12 +43,12 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       >
         <div
           role="article"
@@ -77,7 +77,7 @@ exports[`renders comment stream 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       >
         <div
           role="article"

src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root Flex-justifyCenter"
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
 >
   <div
     className="Stream-root"
@@ -28,7 +28,7 @@ exports[`renders comment stream 1`] = `
         className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="BaseButton-root Button-root Button-primary"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -43,12 +43,12 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       >
         <div
           role="article"
@@ -79,7 +79,7 @@ exports[`renders comment stream 1`] = `
           className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-root Flex-itemGutter Flex-directionColumn"
+            className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
             id="talk-comments-replyList-log--comment-0"
             role="log"
           >
@@ -110,7 +110,7 @@ exports[`renders comment stream 1`] = `
             </div>
             <button
               aria-controls="talk-comments-replyList-log--comment-0"
-              className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
               disabled={false}
               id="talk-comments-replyList-showAll--comment-0"
               onBlur={[Function]}
@@ -133,7 +133,7 @@ exports[`renders comment stream 1`] = `
 
 exports[`show all replies 1`] = `
 <div
-  className="Flex-root App-root Flex-justifyCenter"
+  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
 >
   <div
     className="Stream-root"
@@ -159,7 +159,7 @@ exports[`show all replies 1`] = `
         className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="BaseButton-root Button-root Button-primary"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -174,12 +174,12 @@ exports[`show all replies 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
       >
         <div
           role="article"
@@ -210,7 +210,7 @@ exports[`show all replies 1`] = `
           className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-root Flex-itemGutter Flex-directionColumn"
+            className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
             id="talk-comments-replyList-log--comment-0"
             role="log"
           >

src/core/client/ui/components/BaseButton/BaseButton.tsx

@@ -27,9 +27,6 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** This is passed by the `withMouseHover` HOC */
   mouseHover?: boolean;
 
-  /** ref to the HTMLButtonElement */
-  ref?: Ref<HTMLButtonElement>;
-
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLButtonElement>;
 }

src/core/client/ui/components/Button/Button.css

@@ -1,16 +1,17 @@
 .root {
-  composes: button from "talk-ui/shared/typography.css";
-
-  padding: 5px 15px;
   border-radius: var(--round-corners);
   background-color: transparent;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
+  box-sizing: border-box;
+  border: 1px solid transparent;
 
   & > * {
     margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
+    /* convince safari */
+    align-self: center;
   }
   & > *:last-child {
     margin: 0;
@@ -28,80 +29,234 @@
   box-sizing: border-box;
 }
 
-.regular:not(.disabled) {
-  &.mouseHover {
-    color: var(--palette-secondary-light);
+.sizeSmall {
+  composes: button from "talk-ui/shared/typography.css";
+  padding: 4px 10px;
+}
+
+.sizeRegular {
+  composes: button from "talk-ui/shared/typography.css";
+  padding: 8px 15px;
+}
+
+.sizeLarge {
+  composes: buttonLarge from "talk-ui/shared/typography.css";
+  padding: 10px 15px;
+}
+
+.variantRegular {
+  &.colorRegular {
+    color: var(--palette-secondary-main);
   }
-  &:active {
-    color: var(--palette-secondary-lighter);
+  &.colorPrimary {
+    color: var(--palette-primary-main);
+  }
+  &.colorError {
+    color: var(--palette-error-main);
+  }
+  &.colorSuccess {
+    color: var(--palette-success-main);
+  }
+
+  &:not(.disabled) {
+    &.colorRegular {
+      &.mouseHover {
+        color: var(--palette-secondary-light);
+      }
+      &:active {
+        color: var(--palette-secondary-lighter);
+      }
+    }
+    &.colorPrimary {
+      &.mouseHover {
+        color: var(--palette-primary-light);
+      }
+      &:active {
+        color: var(--palette-primary-lighter);
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        color: var(--palette-error-light);
+      }
+      &:active {
+        color: var(--palette-error-lighter);
+      }
+    }
+    &.colorSuccess {
+      &.mouseHover {
+        color: var(--palette-success-light);
+      }
+      &:active {
+        color: var(--palette-success-lighter);
+      }
+    }
   }
 }
 
-.primary,
-.primary:not(.disabled) {
-  background-color: var(--palette-primary-main);
-  color: #fff;
-}
-
-.primary:not(.disabled) {
-  &.mouseHover {
-    background-color: var(--palette-primary-light);
+.variantFilled {
+  color: var(--palette-common-white);
+  &.colorRegular {
+    background-color: var(--palette-secondary-main);
+  }
+  &.colorPrimary {
+    background-color: var(--palette-primary-main);
+  }
+  &.colorError {
+    background-color: var(--palette-error-main);
+  }
+  &.colorSuccess {
+    background-color: var(--palette-success-main);
   }
 
-  &:active {
-    background-color: var(--palette-primary-lighter);
+  &:not(.disabled) {
+    &.colorRegular {
+      &.mouseHover {
+        background-color: var(--palette-secondary-light);
+      }
+      &:active {
+        background-color: var(--palette-secondary-lighter);
+      }
+    }
+    &.colorPrimary {
+      &.mouseHover {
+        background-color: var(--palette-primary-light);
+      }
+      &:active {
+        background-color: var(--palette-primary-lighter);
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        background-color: var(--palette-error-light);
+      }
+      &:active {
+        background-color: var(--palette-error-lighter);
+      }
+    }
+    &.colorSuccess {
+      &.mouseHover {
+        background-color: var(--palette-success-light);
+      }
+      &:active {
+        background-color: var(--palette-success-lighter);
+      }
+    }
   }
 }
 
-.primary.invert,
-.primary.invert:not(.disabled) {
-  background-color: transparent;
-  border: 1px solid var(--palette-primary-main);
-  color: var(--palette-primary-main);
-}
-
-.primary.invert:not(.disabled) {
-  &.mouseHover {
-    border-color: var(--palette-primary-light);
-    color: var(--palette-primary-light);
+.variantOutlined {
+  &.colorRegular {
+    color: var(--palette-secondary-main);
+    border: 1px solid currentColor;
+  }
+  &.colorPrimary {
+    color: var(--palette-primary-main);
+    border: 1px solid currentColor;
+  }
+  &.colorError {
+    color: var(--palette-error-main);
+    border: 1px solid currentColor;
+  }
+  &.colorSuccess {
+    color: var(--palette-success-main);
+    border: 1px solid currentColor;
   }
 
-  &:active {
-    border-color: var(--palette-primary-lighter);
-    color: var(--palette-primary-lighter);
+  &:not(.disabled) {
+    &.colorRegular {
+      &.mouseHover {
+        color: var(--palette-secondary-light);
+        border: 1px solid currentColor;
+      }
+      &:active {
+        color: var(--palette-secondary-lighter);
+        border: 1px solid currentColor;
+      }
+    }
+    &.colorPrimary {
+      &.mouseHover {
+        color: var(--palette-primary-light);
+        border: 1px solid currentColor;
+      }
+      &:active {
+        color: var(--palette-primary-lighter);
+        border: 1px solid currentColor;
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        color: var(--palette-error-light);
+        border: 1px solid currentColor;
+      }
+      &:active {
+        color: var(--palette-error-lighter);
+        border: 1px solid currentColor;
+      }
+    }
+    &.colorSuccess {
+      &.mouseHover {
+        color: var(--palette-success-light);
+        border: 1px solid currentColor;
+      }
+      &:active {
+        color: var(--palette-success-lighter);
+        border: 1px solid currentColor;
+      }
+    }
   }
 }
 
-.secondary,
-.secondary:not(.disabled) {
-  background-color: var(--palette-secondary-main);
-  color: #fff;
-}
-
-.secondary:not(.disabled) {
-  &.mouseHover {
-    background-color: var(--palette-secondary-light);
+.variantGhost {
+  &.colorRegular {
+    color: var(--palette-secondary-main);
   }
-  &:active {
-    background-color: var(--palette-secondary-lighter);
+  &.colorPrimary {
+    color: var(--palette-primary-main);
   }
-}
-
-.secondary.invert,
-.secondary:not(.disabled).invert {
-  background-color: transparent;
-  border: 1px solid var(--palette-secondary-main);
-  color: var(--palette-secondary-main);
-}
-
-.secondary:not(.disabled).invert {
-  &.mouseHover {
-    border-color: var(--palette-secondary-light);
-    color: var(--palette-secondary-light);
+  &.colorError {
+    color: var(--palette-error-main);
+  }
+  &.colorSuccess {
+    color: var(--palette-success-main);
   }
 
-  &:active {
-    border-color: var(--palette-secondary-lighter);
-    color: var(--palette-secondary-lighter);
+  &:not(.disabled) {
+    &.colorRegular {
+      &.mouseHover {
+        border: 1px solid currentColor;
+      }
+      &:active {
+        color: var(--palette-common-white);
+        background-color: var(--palette-secondary-main);
+      }
+    }
+    &.colorPrimary {
+      &.mouseHover {
+        border: 1px solid currentColor;
+      }
+      &:active {
+        color: var(--palette-common-white);
+        background-color: var(--palette-primary-main);
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        border: 1px solid currentColor;
+      }
+      &:active {
+        color: var(--palette-common-white);
+        background-color: var(--palette-error-main);
+      }
+    }
+    &.colorSuccess {
+      &.mouseHover {
+        border: 1px solid currentColor;
+      }
+      &:active {
+        color: var(--palette-common-white);
+        background-color: var(--palette-success-main);
+      }
+    }
   }
 }

src/core/client/ui/components/Button/Button.mdx

@@ -10,33 +10,62 @@ import Flex from '../Flex'
 
 # Button
 
-## Basic usage
+## Regular Button
 <Playground>
   <Flex itemGutter wrap>
     <Button>Push Me</Button>
+    <Button size="small">Push Me</Button>
+    <Button size="large">Push Me</Button>
+    <Button color="primary">Push Me</Button>
+    <Button color="error">Push Me</Button>
+    <Button color="success">Push Me</Button>
     <Button disabled>Push Me</Button>
-    <Button anchor>I'm an Anchor Tag</Button>
-    <Button primary>Primary</Button>
-    <Button primary disabled>Primary</Button>
-    <Button secondary>Secondary</Button>
-    <Button secondary disabled>Secondary</Button>
-    <Button primary invert>Primary</Button>
-    <Button primary invert disabled>Primary</Button>
-    <Button secondary invert>Secondary</Button>
-    <Button secondary invert disabled>Secondary</Button>
-    <Button primary fullWidth>Full Width</Button>
-    <Button primary invert fullWidth>Full Width Invert</Button>
-  </Flex>
-</Playground>
-
-
-## Button with Icon
-<Playground>
-  <Flex itemGutter>
     <Button><Icon>face</Icon><span>Push Me</span></Button>
-    <Button primary><Icon>bookmark</Icon><span>Push Me</span></Button>
-    <Button primary><span>Push Me</span><Icon>build</Icon></Button>
+    <Button fullWidth>Push Me</Button>
   </Flex>
 </Playground>
 
+## Filled Button
+<Playground>
+  <Flex itemGutter wrap>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled" size="small">Push Me</Button>
+    <Button variant="filled" size="large">Push Me</Button>
+    <Button variant="filled" color="primary">Push Me</Button>
+    <Button variant="filled" color="error">Push Me</Button>
+    <Button variant="filled" color="success">Push Me</Button>
+    <Button variant="filled" disabled>Push Me</Button>
+    <Button variant="filled"><Icon>face</Icon><span>Push Me</span></Button>
+    <Button variant="filled" fullWidth>Push Me</Button>
+  </Flex>
+</Playground>
 
+## Outlined Button
+<Playground>
+  <Flex itemGutter wrap>
+    <Button variant="outlined">Push Me</Button>
+    <Button variant="outlined" size="small">Push Me</Button>
+    <Button variant="outlined" size="large">Push Me</Button>
+    <Button variant="outlined" color="primary">Push Me</Button>
+    <Button variant="outlined" color="error">Push Me</Button>
+    <Button variant="outlined" color="success">Push Me</Button>
+    <Button variant="outlined" disabled>Push Me</Button>
+    <Button variant="outlined"><Icon>face</Icon><span>Push Me</span></Button>
+    <Button variant="outlined" fullWidth>Push Me</Button>
+  </Flex>
+</Playground>
+
+## Ghost Button
+<Playground>
+  <Flex itemGutter wrap>
+    <Button variant="ghost">Push Me</Button>
+    <Button variant="ghost" size="small">Push Me</Button>
+    <Button variant="ghost" size="large">Push Me</Button>
+    <Button variant="ghost" color="primary">Push Me</Button>
+    <Button variant="ghost" color="error">Push Me</Button>
+    <Button variant="ghost" color="success">Push Me</Button>
+    <Button variant="ghost" disabled>Push Me</Button>
+    <Button variant="ghost"><Icon>face</Icon><span>Push Me</span></Button>
+    <Button variant="ghost" fullWidth>Push Me</Button>
+  </Flex>
+</Playground>

src/core/client/ui/components/Button/Button.spec.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import ShallowRenderer from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { Button } from "./Button";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Button> = {
+    classes: {
+      mouseHover: "mouseHover",
+      keyboardFocus: "keyboardFocus",
+    } as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<Button {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("forwards ref", () => {
+  const props: PropTypesOf<typeof Button> = {
+    // tslint:disable-next-line:no-empty
+    forwardRef: () => {},
+    classes: {} as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<Button {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("renders a regular sized, primary colored ghost button with fullWidth", () => {
+  const props: PropTypesOf<typeof Button> = {
+    color: "primary",
+    variant: "ghost",
+    fullWidth: true,
+    classes: {
+      colorPrimary: "colorPrimary",
+      variantGhost: "variantGhost",
+      sizeRegular: "sizeRegular",
+      fullWidth: "fullWidth",
+    } as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<Button {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});

src/core/client/ui/components/Button/Button.tsx

@@ -17,45 +17,54 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    */
   classes: typeof styles & Partial<BaseButtonProps["classes"]>;
 
+  /** Size of the button */
+  size?: "small" | "regular" | "large";
+
+  /** Color of the button */
+  color?: "regular" | "primary" | "error" | "success";
+
+  /** Variant of the button */
+  variant?: "regular" | "filled" | "outlined" | "ghost";
+
   /** If set renders a full width button */
   fullWidth?: boolean;
 
-  /** If set renders a button with inverted borders */
-  invert?: boolean;
-
-  /** If set renders a button with primary colors */
-  primary?: boolean;
-
-  /** If set renders a button with secondary colors */
-  secondary?: boolean;
-
-  /** ref to the HTMLButtonElement */
-  ref?: Ref<HTMLButtonElement>;
-
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLButtonElement>;
 }
 
-class Button extends React.Component<InnerProps> {
+export class Button extends React.Component<InnerProps> {
+  public static defaultProps: Partial<InnerProps> = {
+    size: "regular",
+    variant: "regular",
+    color: "regular",
+  };
   public render() {
     const {
       classes,
+      color,
       className,
+      size,
       fullWidth,
-      invert,
-      primary,
-      secondary,
       disabled,
       forwardRef,
+      variant,
       ...rest
     } = this.props;
 
     const rootClassName = cn(classes.root, className, {
-      [classes.invert]: invert,
+      [classes.sizeRegular]: size === "regular",
+      [classes.sizeSmall]: size === "small",
+      [classes.sizeLarge]: size === "large",
+      [classes.colorRegular]: color === "regular",
+      [classes.colorPrimary]: color === "primary",
+      [classes.colorError]: color === "error",
+      [classes.colorSuccess]: color === "success",
+      [classes.variantRegular]: variant === "regular",
+      [classes.variantFilled]: variant === "filled",
+      [classes.variantOutlined]: variant === "outlined",
+      [classes.variantGhost]: variant === "ghost",
       [classes.fullWidth]: fullWidth,
-      [classes.primary]: primary,
-      [classes.secondary]: secondary,
-      [classes.regular]: !primary && !secondary,
       [classes.disabled]: disabled,
     });
 

src/core/client/ui/components/Button/__snapshots__/Button.spec.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`forwards ref 1`] = `
+<withPropsOnChange(WithMouseHover)
+  className=""
+  classes={Object {}}
+  forwardRef={[Function]}
+>
+  Push me
+</withPropsOnChange(WithMouseHover)>
+`;
+
+exports[`renders a primary colored ghost button with fullWidth 1`] = `
+<withPropsOnChange(WithMouseHover)
+  className=""
+  classes={Object {}}
+>
+  Push me
+</withPropsOnChange(WithMouseHover)>
+`;
+
+exports[`renders a regular sized, primary colored ghost button with fullWidth 1`] = `
+<withPropsOnChange(WithMouseHover)
+  className="sizeRegular colorPrimary variantGhost fullWidth"
+  classes={Object {}}
+>
+  Push me
+</withPropsOnChange(WithMouseHover)>
+`;
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(WithMouseHover)
+  className=""
+  classes={
+    Object {
+      "keyboardFocus": "keyboardFocus",
+      "mouseHover": "mouseHover",
+    }
+  }
+>
+  Push me
+</withPropsOnChange(WithMouseHover)>
+`;

src/core/client/ui/components/Button/index.ts

@@ -1,2 +1 @@
-export * from "./Button";
-export { default } from "./Button";
+export { default, ButtonProps } from "./Button";

src/core/client/ui/components/Flex/Flex.tsx

@@ -74,4 +74,8 @@ const Flex: StatelessComponent<InnerProps> = props => {
   return <div ref={forwardRef} className={classNames} {...rest} />;
 };
 
+Flex.defaultProps = {
+  alignItems: "center",
+};
+
 export default withForwardRef(withStyles(styles)(Flex));

src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap

@@ -12,7 +12,7 @@ exports[`renders correctly 1`] = `
 
 exports[`renders with halfe item gutter 1`] = `
 <div
-  className="Flex-root Flex-halfItemGutter"
+  className="Flex-root Flex-halfItemGutter Flex-alignCenter"
 >
   <div>
     Hello World
@@ -22,7 +22,7 @@ exports[`renders with halfe item gutter 1`] = `
 
 exports[`renders with item gutter 1`] = `
 <div
-  className="Flex-root Flex-itemGutter"
+  className="Flex-root Flex-itemGutter Flex-alignCenter"
 >
   <div>
     Hello World
@@ -32,7 +32,7 @@ exports[`renders with item gutter 1`] = `
 
 exports[`renders with wrap 1`] = `
 <div
-  className="Flex-root Flex-wrap"
+  className="Flex-root Flex-wrap Flex-alignCenter"
 >
   <div>
     Hello World
@@ -42,7 +42,7 @@ exports[`renders with wrap 1`] = `
 
 exports[`renders with wrap reverse 1`] = `
 <div
-  className="Flex-root Flex-wrapReverse"
+  className="Flex-root Flex-wrapReverse Flex-alignCenter"
 >
   <div>
     Hello World

src/core/client/ui/shared/typography.css

@@ -110,10 +110,20 @@
 }
 
 .button {
+  color: var(--palette-text-secondary);
+  font-family: "Source Sans Pro";
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  line-height: calc(18em / 16);
+  letter-spacing: calc(0.57em / 16);
+}
+
+.buttonLarge {
   color: var(--palette-text-secondary);
   font-family: "Source Sans Pro";
   font-weight: var(--font-weight-medium);
   font-size: 16px;
+  line-height: calc(20em / 16);
   letter-spacing: calc(0.57em / 16);
 }
 

src/core/client/ui/theme/variables.ts

@@ -12,6 +12,7 @@ const variables = {
       main: "#3498DB",
       light: "#67B2E4",
       lighter: "#8DC5EB",
+      lightest: "#EBF5FB",
     },
     /* Secondary colors */
     secondary: {
@@ -20,6 +21,7 @@ const variables = {
       main: "#787D80",
       light: "#9A9DA0",
       lighter: "#BBBEBF",
+      lightest: "#F5F5F5",
     },
     /* Success colors */
     success: {
@@ -28,21 +30,21 @@ const variables = {
       main: "#00CD73",
       light: "#40D996",
       lighter: "#83EBBD",
+      lightest: "#E6FAF1",
     },
     /* Error colors */
     error: {
       darkest: "#F50F0C",
       dark: "#FF1F1C",
       main: "#FA4643",
-      light: "#F26563",
-      lighter: "#F26563",
+      light: "#FB7472",
+      lighter: "#FC9795",
+      lightest: "#FEF0EF",
     },
     /* Text colors */
     text: {
       primary: "#3B4A53",
       secondary: "#787D80",
-      disabled: "rgba(0, 0, 0, 0.38)",
-      hint: "rgba(0, 0, 0, 0.38)",
     },
     /* Common colors */
     common: {
@@ -51,11 +53,6 @@ const variables = {
     },
     /* Divider */
     divider: "rgba(0, 0, 0, 0.12)",
-    /* The background colors used to style the surfaces. */
-    background: {
-      paper: "#FFF",
-      default: "#FAFAFA",
-    },
   },
   /* gitter and spacing */
   spacingUnitSmall: 5,