migrate legal line-heights

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",

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" } },

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": {