Adapt typography

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

@@ -1,5 +1,5 @@
 .root {
-  composes: textField from "talk-ui/shared/typography.css";
+  composes: inputText placeholderPseudo from "talk-ui/shared/typography.css";
   position: relative;
   display: block;
   padding: calc(0.5 * var(--spacing-unit));
@@ -22,12 +22,3 @@
 .fullWidth {
   width: 100%;
 }
-
-::placeholder {
-  font-family: var(--font-family);
-  font-style: normal;
-  font-weight: normal;
-  line-height: calc(16rem / var(--rem-base));
-  font-size: calc(16rem / var(--rem-base));
-  color: var(--palette-grey-lighter);
-}

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

@@ -18,5 +18,3 @@ import Flex from '../Flex'
     <TextField color="error" defaultValue="A TextField with an error" fullWidth/>
   </Flex>
 </Playground>
-
-

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

@@ -33,6 +33,10 @@ export interface TextFieldProps {
    * Placeholder
    */
   placeholder?: string;
+  /**
+   * Mark as readonly
+   */
+  readOnly?: boolean;
 }
 
 const TextField: StatelessComponent<TextFieldProps> = props => {