Updated code, and snapshots

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

@@ -27,7 +27,7 @@
   font-family: var(--font-family);
   font-style: normal;
   font-weight: normal;
-  line-height: 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/ValidationMessage/ValidationMessage.css

@@ -1,5 +1,5 @@
 .root {
-  composes: validationMessage from "talk-ui/shared/typography.css";
+  composes: alertMessage from "talk-ui/shared/typography.css";
   position: relative;
   display: inline-flex;
   justify-content: flex-start;

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

@@ -8,7 +8,6 @@ import ValidationMessage from "./ValidationMessage";
 it("renders correctly", () => {
   const props: PropTypesOf<typeof ValidationMessage> = {
     className: "custom",
-    color: "error",
     children: "Hello World",
   };
   const renderer = TestRenderer.create(<ValidationMessage {...props} />);

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

@@ -3,7 +3,6 @@
 exports[`renders correctly 1`] = `
 <div
   className="ValidationMessage-root ValidationMessage-colorError custom"
-  color="error"
 >
   <span
     className="Icon-root ValidationMessage-icon Icon-sm"

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

@@ -127,7 +127,7 @@
   letter-spacing: calc(0.2em / 16);
 }
 
-.validationMessage {
+.alertMessage {
   color: var(--palette-common-black);
   font-family: var(--font-family);
   font-weight: var(--font-weight-medium);
@@ -153,3 +153,12 @@
   letter-spacing: calc(0.2em / 16);
   color: var(--palette-text-primary);
 }
+
+.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);
+}