From dfb7a5754abdf4e69eafe5e7193a3e5da329e80b Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 10 Nov 2022 15:40:02 +0100
Subject: [PATCH] migrate legal line-heights

---
 packages/design-system/src/components/avatar.tsx    | 2 +-
 packages/design-system/src/components/heading.tsx   | 6 +++++-
 packages/design-system/src/components/text-area.tsx | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/design-system/src/components/avatar.tsx b/packages/design-system/src/components/avatar.tsx
index 2eb59a711f..a9e12d6f6d 100644
--- a/packages/design-system/src/components/avatar.tsx
+++ b/packages/design-system/src/components/avatar.tsx
@@ -202,7 +202,7 @@ const StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {
     size: {
       "1": {
         fontSize: "$fontSize$2",
-        lineHeight: "15px",
+        lineHeight: "$lineHeight$3",
       },
       "2": {
         fontSize: "$fontSize$4",
diff --git a/packages/design-system/src/components/heading.tsx b/packages/design-system/src/components/heading.tsx
index c02b93aa71..8e7b62a097 100644
--- a/packages/design-system/src/components/heading.tsx
+++ b/packages/design-system/src/components/heading.tsx
@@ -30,7 +30,11 @@ export const Heading = React.forwardRef<
 
   // This is the mapping of Heading Variants to Text css
   const textCss: Record<HeadingSizeVariants, CSS> = {
-    1: { fontWeight: 500, lineHeight: "20px", "@bp2": { lineHeight: "23px" } },
+    1: {
+      fontWeight: 500,
+      lineHeight: "$lineHeight$4",
+      "@bp2": { lineHeight: "23px" },
+    },
     2: { fontWeight: 500, lineHeight: "25px", "@bp2": { lineHeight: "30px" } },
     3: { fontWeight: 500, lineHeight: "33px", "@bp2": { lineHeight: "41px" } },
     4: { fontWeight: 500, lineHeight: "35px", "@bp2": { lineHeight: "55px" } },
diff --git a/packages/design-system/src/components/text-area.tsx b/packages/design-system/src/components/text-area.tsx
index 2fd1668783..cab8d8d4ab 100644
--- a/packages/design-system/src/components/text-area.tsx
+++ b/packages/design-system/src/components/text-area.tsx
@@ -48,13 +48,13 @@ export const TextArea = styled("textarea", {
       "1": {
         borderRadius: "$1",
         fontSize: "$fontSize$3",
-        lineHeight: "16px",
+        lineHeight: "$lineHeight$3",
         px: "$spacing$3",
       },
       "2": {
         borderRadius: "$1",
         fontSize: "$fontSize$3",
-        lineHeight: "20px",
+        lineHeight: "$lineHeight$4",
         px: "$spacing$3",
       },
       "3": {