Merge pull request #1752 from coralproject/ghost-button-next

[next] Button + UI Kit harmonization

config/watcher.ts

@@ -4,6 +4,8 @@ import {
   Config,
   LongRunningExecutor,
 } from "../scripts/watcher";
+// Ensure environment variables are read.
+import "./env";
 
 const config: Config = {
   rootDir: path.resolve(__dirname, "../src"),
@@ -42,9 +44,7 @@ const config: Config = {
     },
     runDocz: {
       paths: [],
-      executor: new LongRunningExecutor(
-        "NODE_ENV=development npm run docz -- dev"
-      ),
+      executor: new LongRunningExecutor("npm run docz -- dev"),
     },
   },
   defaultSet: "client",

src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders correctly on big screens 1`] = `
 <div
-  className="Flex-root TopBar-root Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+  className="Flex-root TopBar-root Flex-itemGutter Flex-alignCenter Flex-directionRow"
 >
   <div>
     Hello World

src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders correctly on big screens 1`] = `
 <span
-  className="Typography-root Typography-heading2 Username-root"
+  className="Typography-root Typography-heading2 Typography-colorTextPrimary Username-root"
 >
   Marvin
 </span>
@@ -10,7 +10,7 @@ exports[`renders correctly on big screens 1`] = `
 
 exports[`renders correctly on small screens 1`] = `
 <span
-  className="Typography-root Typography-heading3 Username-root"
+  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
 >
   Marvin
 </span>

src/core/client/stream/components/Indent.css

@@ -4,5 +4,5 @@
 }
 
 .level0 {
-  border-color: var(--palette-secondary-darkest);
+  border-color: var(--palette-grey-darkest);
 }

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

@@ -1,5 +1,5 @@
 .textarea {
-  composes: body1 from "talk-ui/shared/typography.css";
+  composes: bodyCopy from "talk-ui/shared/typography.css";
 
   display: block;
   height: 100px;

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" variant="filled" 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,13 +2,13 @@
 
 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"
   >
     <h1
-      className="Typography-root Typography-heading1 Typography-gutterBottom"
+      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -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-variantFilled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -57,7 +57,7 @@ exports[`loads more comments 1`] = `
             className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Typography-root Typography-heading3 Username-root"
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Markus
             </span>
@@ -70,7 +70,7 @@ exports[`loads more comments 1`] = `
             </time>
           </div>
           <p
-            className="Typography-root Typography-body1"
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Joining Too
           </p>
@@ -86,7 +86,7 @@ exports[`loads more comments 1`] = `
             className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Typography-root Typography-heading3 Username-root"
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Lukas
             </span>
@@ -99,7 +99,7 @@ exports[`loads more comments 1`] = `
             </time>
           </div>
           <p
-            className="Typography-root Typography-body1"
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             What's up?
           </p>
@@ -115,7 +115,7 @@ exports[`loads more comments 1`] = `
             className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Typography-root Typography-heading3 Username-root"
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Isabelle
             </span>
@@ -128,7 +128,7 @@ exports[`loads more comments 1`] = `
             </time>
           </div>
           <p
-            className="Typography-root Typography-body1"
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Hey!
           </p>
@@ -141,13 +141,13 @@ 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"
   >
     <h1
-      className="Typography-root Typography-heading1 Typography-gutterBottom"
+      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -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-variantFilled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -196,7 +196,7 @@ exports[`renders comment stream 1`] = `
             className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Typography-root Typography-heading3 Username-root"
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Markus
             </span>
@@ -209,7 +209,7 @@ exports[`renders comment stream 1`] = `
             </time>
           </div>
           <p
-            className="Typography-root Typography-body1"
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Joining Too
           </p>
@@ -225,7 +225,7 @@ exports[`renders comment stream 1`] = `
             className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Typography-root Typography-heading3 Username-root"
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Lukas
             </span>
@@ -238,7 +238,7 @@ exports[`renders comment stream 1`] = `
             </time>
           </div>
           <p
-            className="Typography-root Typography-body1"
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             What's up?
           </p>
@@ -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,13 +2,13 @@
 
 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"
   >
     <h1
-      className="Typography-root Typography-heading1 Typography-gutterBottom"
+      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -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-variantFilled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -57,7 +57,7 @@ exports[`renders comment stream 1`] = `
             className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Typography-root Typography-heading3 Username-root"
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Markus
             </span>
@@ -70,7 +70,7 @@ exports[`renders comment stream 1`] = `
             </time>
           </div>
           <p
-            className="Typography-root Typography-body1"
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Joining Too
           </p>
@@ -86,7 +86,7 @@ exports[`renders comment stream 1`] = `
             className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Typography-root Typography-heading3 Username-root"
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Markus
             </span>
@@ -99,7 +99,7 @@ exports[`renders comment stream 1`] = `
             </time>
           </div>
           <p
-            className="Typography-root Typography-body1"
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             I like yoghurt
           </p>
@@ -119,7 +119,7 @@ exports[`renders comment stream 1`] = `
                 className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
                 <span
-                  className="Typography-root Typography-heading3 Username-root"
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
                   Markus
                 </span>
@@ -132,7 +132,7 @@ exports[`renders comment stream 1`] = `
                 </time>
               </div>
               <p
-                className="Typography-root Typography-body1"
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
               >
                 Joining Too
               </p>
@@ -144,7 +144,7 @@ exports[`renders comment stream 1`] = `
                 className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
                 <span
-                  className="Typography-root Typography-heading3 Username-root"
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
                   Lukas
                 </span>
@@ -157,7 +157,7 @@ exports[`renders comment stream 1`] = `
                 </time>
               </div>
               <p
-                className="Typography-root Typography-body1"
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
               >
                 What's up?
               </p>

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

@@ -2,13 +2,13 @@
 
 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"
   >
     <h1
-      className="Typography-root Typography-heading1 Typography-gutterBottom"
+      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -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-variantFilled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -57,7 +57,7 @@ exports[`renders comment stream 1`] = `
             className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Typography-root Typography-heading3 Username-root"
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Markus
             </span>
@@ -70,7 +70,7 @@ exports[`renders comment stream 1`] = `
             </time>
           </div>
           <p
-            className="Typography-root Typography-body1"
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Joining Too
           </p>
@@ -86,7 +86,7 @@ exports[`renders comment stream 1`] = `
             className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Typography-root Typography-heading3 Username-root"
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Lukas
             </span>
@@ -99,7 +99,7 @@ exports[`renders comment stream 1`] = `
             </time>
           </div>
           <p
-            className="Typography-root Typography-body1"
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             What's up?
           </p>

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

@@ -2,13 +2,13 @@
 
 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"
   >
     <h1
-      className="Typography-root Typography-heading1 Typography-gutterBottom"
+      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -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-variantFilled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -57,7 +57,7 @@ exports[`renders comment stream 1`] = `
             className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Typography-root Typography-heading3 Username-root"
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Markus
             </span>
@@ -70,7 +70,7 @@ exports[`renders comment stream 1`] = `
             </time>
           </div>
           <p
-            className="Typography-root Typography-body1"
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Joining Too
           </p>
@@ -90,7 +90,7 @@ exports[`renders comment stream 1`] = `
                 className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
                 <span
-                  className="Typography-root Typography-heading3 Username-root"
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
                   Lukas
                 </span>
@@ -103,14 +103,14 @@ exports[`renders comment stream 1`] = `
                 </time>
               </div>
               <p
-                className="Typography-root Typography-body1"
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
               >
                 What's up?
               </p>
             </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,13 +133,13 @@ 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"
   >
     <h1
-      className="Typography-root Typography-heading1 Typography-gutterBottom"
+      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -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-variantFilled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -188,7 +188,7 @@ exports[`show all replies 1`] = `
             className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Typography-root Typography-heading3 Username-root"
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Markus
             </span>
@@ -201,7 +201,7 @@ exports[`show all replies 1`] = `
             </time>
           </div>
           <p
-            className="Typography-root Typography-body1"
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Joining Too
           </p>
@@ -221,7 +221,7 @@ exports[`show all replies 1`] = `
                 className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
                 <span
-                  className="Typography-root Typography-heading3 Username-root"
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
                   Lukas
                 </span>
@@ -234,7 +234,7 @@ exports[`show all replies 1`] = `
                 </time>
               </div>
               <p
-                className="Typography-root Typography-body1"
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
               >
                 What's up?
               </p>
@@ -246,7 +246,7 @@ exports[`show all replies 1`] = `
                 className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
                 <span
-                  className="Typography-root Typography-heading3 Username-root"
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
                   Isabelle
                 </span>
@@ -259,7 +259,7 @@ exports[`show all replies 1`] = `
                 </time>
               </div>
               <p
-                className="Typography-root Typography-body1"
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
               >
                 Hey!
               </p>

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/BaseButton/index.ts

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

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,254 @@
   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-grey-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-grey-light);
+      }
+      &:active,
+      &.active {
+        color: var(--palette-grey-lighter);
+      }
+    }
+    &.colorPrimary {
+      &.mouseHover {
+        color: var(--palette-primary-light);
+      }
+      &:active,
+      &.active {
+        color: var(--palette-primary-lighter);
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        color: var(--palette-error-light);
+      }
+      &:active,
+      &.active {
+        color: var(--palette-error-lighter);
+      }
+    }
+    &.colorSuccess {
+      &.mouseHover {
+        color: var(--palette-success-light);
+      }
+      &:active,
+      &.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-grey-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-grey-light);
+      }
+      &:active,
+      &.active {
+        background-color: var(--palette-grey-lighter);
+      }
+    }
+    &.colorPrimary {
+      &.mouseHover {
+        background-color: var(--palette-primary-light);
+      }
+      &:active,
+      &.active {
+        background-color: var(--palette-primary-lighter);
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        background-color: var(--palette-error-light);
+      }
+      &:active,
+      &.active {
+        background-color: var(--palette-error-lighter);
+      }
+    }
+    &.colorSuccess {
+      &.mouseHover {
+        background-color: var(--palette-success-light);
+      }
+      &:active,
+      &.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-grey-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-grey-light);
+        border: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-grey-lighter);
+        border: 1px solid currentColor;
+      }
+    }
+    &.colorPrimary {
+      &.mouseHover {
+        color: var(--palette-primary-light);
+        border: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-primary-lighter);
+        border: 1px solid currentColor;
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        color: var(--palette-error-light);
+        border: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-error-lighter);
+        border: 1px solid currentColor;
+      }
+    }
+    &.colorSuccess {
+      &.mouseHover {
+        color: var(--palette-success-light);
+        border: 1px solid currentColor;
+      }
+      &:active,
+      &.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-grey-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,
+      &.active {
+        border: 1px solid currentColor;
+        color: var(--palette-common-white);
+        background-color: var(--palette-grey-main);
+      }
+    }
+    &.colorPrimary {
+      &.mouseHover {
+        border: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        border: 1px solid currentColor;
+        color: var(--palette-common-white);
+        background-color: var(--palette-primary-main);
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        border: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        border: 1px solid currentColor;
+        color: var(--palette-common-white);
+        background-color: var(--palette-error-main);
+      }
+    }
+    &.colorSuccess {
+      &.mouseHover {
+        border: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        border: 1px solid currentColor;
+        color: var(--palette-common-white);
+        background-color: var(--palette-success-main);
+      }
+    }
   }
 }

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

@@ -5,38 +5,72 @@ menu: UI Kit
 
 import { Playground } from 'docz'
 import Button from './Button'
+import ButtonIcon from './ButtonIcon'
 import Icon from '../Icon'
 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>
+    <Button active>Push Me</Button>
+    <Button><ButtonIcon>face</ButtonIcon><span>Push Me</span></Button>
+    <Button fullWidth>Push Me</Button>
   </Flex>
 </Playground>
 
-
-## Button with Icon
+## Filled Button
 <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>
+  <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" active>Push Me</Button>
+    <Button variant="filled"><ButtonIcon>face</ButtonIcon><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" active>Push Me</Button>
+    <Button variant="outlined"><ButtonIcon>face</ButtonIcon><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" active>Push Me</Button>
+    <Button variant="ghost"><ButtonIcon>face</ButtonIcon><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,62 @@
+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();
+});
+
+it("renders active state", () => {
+  const props: PropTypesOf<typeof Button> = {
+    active: true,
+    classes: {
+      active: "active",
+    } 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

@@ -15,47 +15,61 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    * This prop can be used to add custom classnames.
    * It is handled by the `withStyles `HOC.
    */
-  classes: typeof styles & Partial<BaseButtonProps["classes"]>;
+  classes: typeof styles & 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>;
+  /** If set renders active state e.g. to implement toggle buttons */
+  active?: boolean;
 
   /** 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 {
+      active,
       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.active]: active,
       [classes.disabled]: disabled,
     });
 

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

@@ -0,0 +1,8 @@
+.root {
+  &:first-child {
+    margin-left: -4px;
+  }
+  &:last-child {
+    margin-right: -4px;
+  }
+}

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

@@ -0,0 +1,30 @@
+import React from "react";
+import ShallowRenderer from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { ButtonIcon } from "./ButtonIcon";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ButtonIcon> = {
+    classes: {
+      root: "root",
+    } as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<ButtonIcon {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("forwards ref", () => {
+  const props: PropTypesOf<typeof ButtonIcon> = {
+    // tslint:disable-next-line:no-empty
+    forwardRef: () => {},
+    classes: {} as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<ButtonIcon {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});

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

@@ -0,0 +1,38 @@
+import cn from "classnames";
+import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
+
+import Icon, { IconProps } from "talk-ui/components/Icon";
+import { withForwardRef, withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
+
+import * as styles from "./ButtonIcon.css";
+
+interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles & IconProps["classes"];
+
+  size?: IconProps["size"];
+
+  /** The name of the icon to render */
+  children: string;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLSpanElement>;
+}
+
+export const ButtonIcon: StatelessComponent<InnerProps> = props => {
+  const { classes, className, forwardRef, ...rest } = props;
+  const rootClassName = cn(classes.root, className);
+  return <Icon className={rootClassName} {...rest} forwardRef={forwardRef} />;
+};
+
+ButtonIcon.defaultProps = {
+  size: "sm",
+};
+
+const enhanced = withForwardRef(withStyles(styles)(ButtonIcon));
+export type ButtonIconProps = PropTypesOf<typeof enhanced>;
+export default enhanced;

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 regular sized, primary colored ghost button with fullWidth 1`] = `
+<withPropsOnChange(WithMouseHover)
+  className="sizeRegular colorPrimary variantGhost fullWidth"
+  classes={Object {}}
+>
+  Push me
+</withPropsOnChange(WithMouseHover)>
+`;
+
+exports[`renders active state 1`] = `
+<withPropsOnChange(WithMouseHover)
+  className="active"
+  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/__snapshots__/ButtonIcon.spec.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`forwards ref 1`] = `
+<withPropsOnChange(Icon)
+  className=""
+  forwardRef={[Function]}
+  size="sm"
+>
+  Push me
+</withPropsOnChange(Icon)>
+`;
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Icon)
+  className="root"
+  size="sm"
+>
+  Push me
+</withPropsOnChange(Icon)>
+`;

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

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

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

@@ -7,49 +7,49 @@
 
 .halfItemGutter {
   & > * {
-    margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
+    margin: 0 calc(0.5 * var(--spacing-unit)) 0 0 !important;
   }
   &.directionRowReverse {
     & > * {
-      margin: 0 0 0 calc(0.5 * var(--spacing-unit));
+      margin: 0 0 0 calc(0.5 * var(--spacing-unit)) !important;
     }
   }
   &.directionColumn {
     & > * {
-      margin: 0 0 calc(0.5 * var(--spacing-unit)) 0;
+      margin: 0 0 calc(0.5 * var(--spacing-unit)) 0 !important;
     }
   }
   &.directionColumnReverese {
     & > * {
-      margin: calc(0.5 * var(--spacing-unit)) 0 0 0;
+      margin: calc(0.5 * var(--spacing-unit)) 0 0 0 !important;
     }
   }
   & > *:last-child {
-    margin: 0;
+    margin: 0 !important;
   }
 }
 
 .itemGutter {
   & > * {
-    margin: 0 var(--spacing-unit) 0 0;
+    margin: 0 var(--spacing-unit) 0 0 !important;
   }
   &.directionRowReverse {
     & > * {
-      margin: 0 0 0 var(--spacing-unit);
+      margin: 0 0 0 var(--spacing-unit) !important;
     }
   }
   &.directionColumn {
     & > * {
-      margin: 0 0 var(--spacing-unit) 0;
+      margin: 0 0 var(--spacing-unit) 0 !important;
     }
   }
   &.directionColumnReverese {
     & > * {
-      margin: var(--spacing-unit) 0 0 0;
+      margin: var(--spacing-unit) 0 0 0 !important;
     }
   }
   & > *:last-child {
-    margin: 0;
+    margin: 0 !important;
   }
 }
 
@@ -65,35 +65,35 @@
 .wrapReverse {
   &.itemGutter {
     &:not(:empty) {
-      margin-top: calc(-1 * var(--spacing-unit));
+      margin-top: calc(-1 * var(--spacing-unit)) !important;
     }
     & > * {
-      margin-top: var(--spacing-unit);
+      margin-top: var(--spacing-unit) !important;
     }
   }
   &.directionColumn.itemGutter {
     &:not(:empty) {
-      margin-left: calc(-1 * var(--spacing-unit));
+      margin-left: calc(-1 * var(--spacing-unit)) !important;
     }
     &.itemGutter > * {
-      margin-left: var(--spacing-unit);
+      margin-left: var(--spacing-unit) !important;
     }
   }
 
   &.halfItemGutter {
     &:not(:empty) {
-      margin-top: calc(-0.5 * var(--spacing-unit));
+      margin-top: calc(-0.5 * var(--spacing-unit)) !important;
     }
     & > * {
-      margin-top: calc(0.5 * var(--spacing-unit));
+      margin-top: calc(0.5 * var(--spacing-unit)) !important;
     }
   }
   &.directionColumn.halfItemGutter {
     &:not(:empty) {
-      margin-left: calc(-0.5 * var(--spacing-unit));
+      margin-left: calc(-0.5 * var(--spacing-unit)) !important;
     }
     &.halfItemGutter > * {
-      margin-left: calc(0.5 * var(--spacing-unit));
+      margin-left: calc(0.5 * var(--spacing-unit)) !important;
     }
   }
 }

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

@@ -5,12 +5,31 @@ menu: UI Kit
 
 import { Playground, PropsTable } from 'docz'
 import Flex from './Flex'
+import Button from '../Button'
 
 # Flex
 
 `Flex` is a wrapper around `flexbox`.
 
-## Basic usage
+## Justify content
 <Playground>
   <Flex justifyContent="center">I'm centered</Flex>
 </Playground>
+
+## Align items
+<Playground>
+  <Flex alignItems="center" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled" size="small">Push Me</Button>
+    <Button variant="filled" size="large">Push Me</Button>
+  </Flex>
+</Playground>
+
+## Direction
+<Playground>
+  <Flex direction="column" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>

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

@@ -4,6 +4,7 @@ import { StatelessComponent } from "react";
 
 import { pascalCase } from "talk-common/utils";
 import { withForwardRef, withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
 
 import * as styles from "./Flex.css";
 
@@ -28,9 +29,6 @@ interface InnerProps {
   className?: string;
   wrap?: boolean | "reverse";
 
-  /** Ref to the root element */
-  ref?: Ref<HTMLDivElement>;
-
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLDivElement>;
 }
@@ -48,6 +46,11 @@ const Flex: StatelessComponent<InnerProps> = props => {
     ...rest
   } = props;
 
+  let alignItemsWithDefault = alignItems;
+  if (!direction || !direction.startsWith("column")) {
+    alignItemsWithDefault = "center";
+  }
+
   const classObject: Record<string, boolean> = {
     [classes.itemGutter]: itemGutter === true,
     [classes.halfItemGutter]: itemGutter === "half",
@@ -61,8 +64,10 @@ const Flex: StatelessComponent<InnerProps> = props => {
     ] = true;
   }
 
-  if (alignItems) {
-    classObject[(classes as any)[`align${pascalCase(alignItems)}`]] = true;
+  if (alignItemsWithDefault) {
+    classObject[
+      (classes as any)[`align${pascalCase(alignItemsWithDefault)}`]
+    ] = true;
   }
 
   if (direction) {
@@ -74,4 +79,6 @@ const Flex: StatelessComponent<InnerProps> = props => {
   return <div ref={forwardRef} className={classNames} {...rest} />;
 };
 
-export default withForwardRef(withStyles(styles)(Flex));
+const enhanced = withForwardRef(withStyles(styles)(Flex));
+export default enhanced;
+export type FlexProps = PropTypesOf<typeof enhanced>;

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/components/Flex/index.ts

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

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

@@ -18,9 +18,6 @@ interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
   /** The name of the icon to render */
   children: string;
 
-  /** ref to the HTMLIconElement */
-  ref?: Ref<HTMLSpanElement>;
-
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLSpanElement>;
 }

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

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

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

@@ -2,6 +2,8 @@ import React from "react";
 import { ReactNode, StatelessComponent } from "react";
 import Responsive, { MediaQueryMatchers } from "react-responsive";
 
+import { PropTypesOf } from "talk-ui/types";
+
 import theme from "../../theme/variables";
 import UIContext from "../UIContext";
 
@@ -45,3 +47,4 @@ const MatchMediaWithContext: StatelessComponent<InnerProps> = props => (
 );
 
 export default MatchMediaWithContext;
+export type MatchMediaProps = PropTypesOf<typeof MatchMediaWithContext>;

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

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

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

@@ -1,4 +1,4 @@
 .root {
-  composes: body1 from "talk-ui/shared/typography.css";
+  composes: bodyCopy from "talk-ui/shared/typography.css";
   background-color: transparent;
 }

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

@@ -15,9 +15,6 @@ interface InnerProps {
   className?: string;
   formatter?: Formatter;
 
-  /** Ref to the root element */
-  ref?: Ref<HTMLDivElement>;
-
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLDivElement>;
 }

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

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

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

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

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

@@ -19,28 +19,16 @@
   composes: heading4 from "talk-ui/shared/typography.css";
 }
 
-.subtitle1 {
-  composes: subtitle1 from "talk-ui/shared/typography.css";
-}
-
-.subtitle2 {
-  composes: subtitle2 from "talk-ui/shared/typography.css";
-}
-
-.body1 {
-  composes: body1 from "talk-ui/shared/typography.css";
-}
-
-.body2 {
-  composes: body2 from "talk-ui/shared/typography.css";
+.bodyCopy {
+  composes: bodyCopy from "talk-ui/shared/typography.css";
 }
 
 .button {
   composes: button from "talk-ui/shared/typography.css";
 }
 
-.overline {
-  composes: overline from "talk-ui/shared/typography.css";
+.buttonLarge {
+  composes: buttonLarge from "talk-ui/shared/typography.css";
 }
 
 .timestamp {
@@ -85,8 +73,8 @@
   color: var(--palette-primary-main);
 }
 
-.colorSecondary {
-  color: var(--palette-secondary-main);
+.colorTextPrimary {
+  color: var(--palette-text-primary);
 }
 
 .colorTextSecondary {
@@ -96,3 +84,7 @@
 .colorError {
   color: var(--palette-error-main);
 }
+
+.colorSuccess {
+  color: var(--palette-success-main);
+}

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

@@ -0,0 +1,56 @@
+---
+name: Typography
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import Typography from './Typography'
+import Flex from '../Flex'
+
+# Typography
+
+## Basic Use
+<Playground>
+  <Flex itemGutter direction="column">
+    <Typography variant="heading1">Heading1</Typography>
+    <Typography variant="heading2">Heading2</Typography>
+    <Typography variant="heading3">Heading3</Typography>
+    <Typography variant="heading4">Heading4</Typography>
+    <Typography variant="bodyCopy">BodyCopy</Typography>
+    <Typography variant="timestamp">timestamp</Typography>
+  </Flex>
+</Playground>
+
+## Using different colors
+<Playground>
+  <Flex itemGutter direction="column">
+    <Typography color="textPrimary">textPrimary</Typography>
+    <Typography color="textSecondary">textSecondary</Typography>
+    <Typography color="success">success</Typography>
+    <Typography color="error">error</Typography>
+  </Flex>
+</Playground>
+
+## Set align
+<Playground>
+  <Flex itemGutter direction="column" alignItems="stretch" style={{width: "200px"}}>
+    <Typography align="left">left</Typography>
+    <Typography align="center">center</Typography>
+    <Typography align="right">right</Typography>
+    <Typography align="justify"> No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo
+  quiera, simplemente porque es el dolor.</Typography>
+  </Flex>
+</Playground>
+
+## Cut off long text
+<Playground>
+    <Typography noWrap style={{width: "200px"}}>No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo quiera, simplemente porque es el dolor.</Typography>
+</Playground>
+
+## Gutters
+<Playground>
+    <Typography gutterBottom>I have a bottom gutter</Typography>
+    <Typography paragraph>I have a paragraph gutter</Typography>
+    <Typography>Just a normal text</Typography>
+</Playground>
+

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

@@ -0,0 +1,20 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import Typography from "./Typography";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Typography> = {
+    className: "custom",
+    variant: "heading1",
+    color: "textSecondary",
+    gutterBottom: true,
+    children: "Hello World",
+    noWrap: true,
+    align: "left",
+  };
+  const renderer = TestRenderer.create(<Typography {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});

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

@@ -12,11 +12,7 @@ type Variant =
   | "heading2"
   | "heading3"
   | "heading4"
-  | "subtitle1"
-  | "subtitle2"
-  | "body1"
-  | "body2"
-  | "button"
+  | "bodyCopy"
   | "timestamp";
 
 // Based on Typography Component of Material UI.
@@ -45,10 +41,10 @@ interface InnerProps extends HTMLAttributes<any> {
   color?:
     | "inherit"
     | "primary"
+    | "textPrimary"
     | "textSecondary"
-    | "secondary"
     | "error"
-    | "default";
+    | "success";
   /**
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
@@ -78,9 +74,6 @@ interface InnerProps extends HTMLAttributes<any> {
    */
   variant?: Variant;
 
-  /** Ref to the root element */
-  ref?: Ref<HTMLElement>;
-
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLElement>;
 }
@@ -105,10 +98,11 @@ const Typography: StatelessComponent<InnerProps> = props => {
     classes.root,
     classes[variant!],
     {
-      [classes.colorPrimary]: color === "primary",
-      [classes.colorSecondary]: color === "secondary",
-      [classes.colorError]: color === "error",
+      [classes.colorTextPrimary]: color === "textPrimary",
       [classes.colorTextSecondary]: color === "textSecondary",
+      [classes.colorPrimary]: color === "primary",
+      [classes.colorError]: color === "error",
+      [classes.colorSuccess]: color === "success",
       [classes.noWrap]: noWrap,
       [classes.gutterBottom]: gutterBottom,
       [classes.paragraph]: paragraph,
@@ -128,24 +122,21 @@ const Typography: StatelessComponent<InnerProps> = props => {
 
 Typography.defaultProps = {
   align: "inherit",
-  color: "default",
+  color: "textPrimary",
   gutterBottom: false,
   headlineMapping: {
     heading1: "h1",
     heading2: "h1",
     heading3: "h1",
     heading4: "h1",
-    subtitle1: "h2",
-    subtitle2: "h3",
-    body1: "p",
-    body2: "aside",
+    bodyCopy: "p",
     timestamp: "span",
   },
   noWrap: false,
   paragraph: false,
-  variant: "body1",
+  variant: "bodyCopy",
 };
 
 const enhanced = withForwardRef(withStyles(styles)(Typography));
-export type CenterProps = PropTypesOf<typeof enhanced>;
+export type TypographyProps = PropTypesOf<typeof enhanced>;
 export default enhanced;

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<h1
+  className="Typography-root Typography-heading1 Typography-colorTextSecondary Typography-noWrap Typography-gutterBottom Typography-alignLeft custom"
+>
+  Hello World
+</h1>
+`;

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

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

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

@@ -91,16 +91,7 @@
   color: var(--palette-text-primary);
 }
 
-.subtitle1 {
-}
-
-.subtitle2 {
-}
-
-.body2 {
-}
-
-.body1 {
+.bodyCopy {
   font-size: calc(16rem / var(--rem-base));
   font-weight: var(--font-weight-regular);
   font-family: "Source Sans Pro";
@@ -113,11 +104,18 @@
   color: var(--palette-text-secondary);
   font-family: "Source Sans Pro";
   font-weight: var(--font-weight-medium);
-  font-size: 16px;
+  font-size: 14px;
+  line-height: calc(18em / 16);
   letter-spacing: calc(0.57em / 16);
 }
 
-.overline {
+.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);
 }
 
 .timestamp {

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

@@ -12,14 +12,16 @@ const variables = {
       main: "#3498DB",
       light: "#67B2E4",
       lighter: "#8DC5EB",
+      lightest: "#EBF5FB",
     },
     /* Secondary colors */
-    secondary: {
+    grey: {
       darkest: "#404345",
       dark: "#65696B",
       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,