From c89d17a4da19851a1a65f3bf9409a421deabbe55 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Mon, 28 Aug 2023 15:56:05 -0400
Subject: [PATCH] Error message font size (#1960)

* updates error message

* Create weak-carrots-divide.md
---
 .changeset/weak-carrots-divide.md             |  5 +++++
 packages/typography/src/Error/Error.styles.ts | 18 +++++++++++++++++-
 packages/typography/src/Error/Error.tsx       | 10 +++++++++-
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/weak-carrots-divide.md

diff --git a/.changeset/weak-carrots-divide.md b/.changeset/weak-carrots-divide.md
new file mode 100644
index 0000000000..52b053201a
--- /dev/null
+++ b/.changeset/weak-carrots-divide.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/typography': major
+---
+
+Updates `Error` component to read from TypographyProvider to set font size
diff --git a/packages/typography/src/Error/Error.styles.ts b/packages/typography/src/Error/Error.styles.ts
index 77a8651143..e1760ed88f 100644
--- a/packages/typography/src/Error/Error.styles.ts
+++ b/packages/typography/src/Error/Error.styles.ts
@@ -1,7 +1,12 @@
 import { css } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
-import { fontFamilies, fontWeights } from '@leafygreen-ui/tokens';
+import {
+  BaseFontSize,
+  fontFamilies,
+  fontWeights,
+  typeScales,
+} from '@leafygreen-ui/tokens';
 
 export const errorMessageStyle = css`
   font-family: ${fontFamilies.default};
@@ -22,3 +27,14 @@ export const errorMessageModeStyle: Record<Theme, string> = {
     color: ${palette.red.light1};
   `,
 };
+
+export const errorMessageTypeScaleStyles: Record<BaseFontSize, string> = {
+  [BaseFontSize.Body1]: css`
+    font-size: ${typeScales.body1.fontSize}px;
+    line-height: ${typeScales.body1.lineHeight}px;
+  `,
+  [BaseFontSize.Body2]: css`
+    font-size: ${typeScales.body2.fontSize}px;
+    line-height: 20px; // Hardcoding because it does not match body2 lineHeight
+  `,
+};
diff --git a/packages/typography/src/Error/Error.tsx b/packages/typography/src/Error/Error.tsx
index 044ceb40dd..6e1b9c0f14 100644
--- a/packages/typography/src/Error/Error.tsx
+++ b/packages/typography/src/Error/Error.tsx
@@ -8,7 +8,13 @@ import {
   usePolymorphic,
 } from '@leafygreen-ui/polymorphic';
 
-import { errorMessageModeStyle, errorMessageStyle } from './Error.styles';
+import { useUpdatedBaseFontSize } from '../utils/useUpdatedBaseFontSize';
+
+import {
+  errorMessageModeStyle,
+  errorMessageStyle,
+  errorMessageTypeScaleStyles,
+} from './Error.styles';
 import { BaseErrorProps } from './Error.types';
 
 const Error = Polymorphic<BaseErrorProps>(
@@ -20,6 +26,7 @@ const Error = Polymorphic<BaseErrorProps>(
     ...rest
   }) => {
     const { theme } = useDarkMode(darkModeProp);
+    const baseFontSize = useUpdatedBaseFontSize();
     const { Component } = usePolymorphic(as);
 
     return (
@@ -28,6 +35,7 @@ const Error = Polymorphic<BaseErrorProps>(
         className={cx(
           errorMessageStyle,
           errorMessageModeStyle[theme],
+          errorMessageTypeScaleStyles[baseFontSize],
           className,
         )}
       >