Harmonize typography

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/test/__snapshots__/loadMore.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`loads more comments 1`] = `
     className="Stream-root"
   >
     <h1
-      className="Typography-root Typography-heading1 Typography-gutterBottom"
+      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -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>
@@ -147,7 +147,7 @@ exports[`renders comment stream 1`] = `
     className="Stream-root"
   >
     <h1
-      className="Typography-root Typography-heading1 Typography-gutterBottom"
+      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -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>

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

@@ -8,7 +8,7 @@ exports[`renders comment stream 1`] = `
     className="Stream-root"
   >
     <h1
-      className="Typography-root Typography-heading1 Typography-gutterBottom"
+      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -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

@@ -8,7 +8,7 @@ exports[`renders comment stream 1`] = `
     className="Stream-root"
   >
     <h1
-      className="Typography-root Typography-heading1 Typography-gutterBottom"
+      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -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

@@ -8,7 +8,7 @@ exports[`renders comment stream 1`] = `
     className="Stream-root"
   >
     <h1
-      className="Typography-root Typography-heading1 Typography-gutterBottom"
+      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -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,7 +103,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>
@@ -139,7 +139,7 @@ exports[`show all replies 1`] = `
     className="Stream-root"
   >
     <h1
-      className="Typography-root Typography-heading1 Typography-gutterBottom"
+      className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-gutterBottom"
     >
       Talk NEO
     </h1>
@@ -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/Button/Button.css

@@ -46,7 +46,7 @@
 
 .variantRegular {
   &.colorRegular {
-    color: var(--palette-secondary-main);
+    color: var(--palette-grey-main);
   }
   &.colorPrimary {
     color: var(--palette-primary-main);
@@ -61,10 +61,10 @@
   &:not(.disabled) {
     &.colorRegular {
       &.mouseHover {
-        color: var(--palette-secondary-light);
+        color: var(--palette-grey-light);
       }
       &:active {
-        color: var(--palette-secondary-lighter);
+        color: var(--palette-grey-lighter);
       }
     }
     &.colorPrimary {
@@ -97,7 +97,7 @@
 .variantFilled {
   color: var(--palette-common-white);
   &.colorRegular {
-    background-color: var(--palette-secondary-main);
+    background-color: var(--palette-grey-main);
   }
   &.colorPrimary {
     background-color: var(--palette-primary-main);
@@ -112,10 +112,10 @@
   &:not(.disabled) {
     &.colorRegular {
       &.mouseHover {
-        background-color: var(--palette-secondary-light);
+        background-color: var(--palette-grey-light);
       }
       &:active {
-        background-color: var(--palette-secondary-lighter);
+        background-color: var(--palette-grey-lighter);
       }
     }
     &.colorPrimary {
@@ -147,7 +147,7 @@
 
 .variantOutlined {
   &.colorRegular {
-    color: var(--palette-secondary-main);
+    color: var(--palette-grey-main);
     border: 1px solid currentColor;
   }
   &.colorPrimary {
@@ -166,11 +166,11 @@
   &:not(.disabled) {
     &.colorRegular {
       &.mouseHover {
-        color: var(--palette-secondary-light);
+        color: var(--palette-grey-light);
         border: 1px solid currentColor;
       }
       &:active {
-        color: var(--palette-secondary-lighter);
+        color: var(--palette-grey-lighter);
         border: 1px solid currentColor;
       }
     }
@@ -209,7 +209,7 @@
 
 .variantGhost {
   &.colorRegular {
-    color: var(--palette-secondary-main);
+    color: var(--palette-grey-main);
   }
   &.colorPrimary {
     color: var(--palette-primary-main);
@@ -228,7 +228,7 @@
       }
       &:active {
         color: var(--palette-common-white);
-        background-color: var(--palette-secondary-main);
+        background-color: var(--palette-grey-main);
       }
     }
     &.colorPrimary {

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/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.
@@ -102,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,
@@ -125,22 +122,19 @@ 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));

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"
+>
+  Hello World
+</h1>
+`;

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";
@@ -127,9 +118,6 @@
   letter-spacing: calc(0.57em / 16);
 }
 
-.overline {
-}
-
 .timestamp {
   color: var(--palette-text-secondary);
   font-family: "Source Sans Pro";

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

@@ -15,7 +15,7 @@ const variables = {
       lightest: "#EBF5FB",
     },
     /* Secondary colors */
-    secondary: {
+    grey: {
       darkest: "#404345",
       dark: "#65696B",
       main: "#787D80",