fix(styles/common): fix lint error

chanzuckerberg · Oct 30, 2024 · 3a736a2 · 3a736a2
1 parent c5d2d74
commit 3a736a2
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 51 deletions.
diff --git a/packages/components/src/core/styles/common/SDSAppTheme.ts b/packages/components/src/core/styles/common/SDSAppTheme.ts
@@ -200,7 +200,7 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
       header: fontFamily,
       tabular: fontFamily,
     },
-    styles: {
+    mobileStyles: {
       body: {
         regular: {
           button: {
@@ -211,17 +211,17 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           l: {
-            fontSize: 18,
+            fontSize: 16,
             fontWeight: FontWeight.regular,
             letterSpacing: "0px",
-            lineHeight: "28px",
+            lineHeight: "26px",
             textTransform: "none",
           },
           m: {
-            fontSize: 16,
+            fontSize: 14,
             fontWeight: FontWeight.regular,
             letterSpacing: "0px",
-            lineHeight: "26px",
+            lineHeight: "24px",
             textTransform: "none",
           },
           s: {
@@ -246,10 +246,10 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           xxxs: {
-            fontSize: 11,
+            fontSize: 12,
             fontWeight: FontWeight.regular,
             letterSpacing: "0.1px",
-            lineHeight: "16px",
+            lineHeight: "18px",
             textTransform: "none",
           },
         },
@@ -262,17 +262,17 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           l: {
-            fontSize: 18,
+            fontSize: 16,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0px",
-            lineHeight: "28px",
+            lineHeight: "26px",
             textTransform: "none",
           },
           m: {
-            fontSize: 16,
+            fontSize: 14,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0px",
-            lineHeight: "26px",
+            lineHeight: "24px",
             textTransform: "none",
           },
           s: {
@@ -297,10 +297,10 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           xxxs: {
-            fontSize: 11,
+            fontSize: 12,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0.1px",
-            lineHeight: "16px",
+            lineHeight: "18px",
             textTransform: "none",
           },
         },
@@ -322,10 +322,10 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "uppercase",
           },
           xxxxs: {
-            fontSize: 10,
+            fontSize: 11,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0.5px",
-            lineHeight: "14px",
+            lineHeight: "16px",
             textTransform: "uppercase",
           },
         },
@@ -367,17 +367,17 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
       header: {
         semibold: {
           l: {
-            fontSize: 18,
+            fontSize: 16,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0px",
-            lineHeight: "24px",
+            lineHeight: "22px",
             textTransform: "none",
           },
           m: {
-            fontSize: 16,
+            fontSize: 14,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0px",
-            lineHeight: "22px",
+            lineHeight: "20px",
             textTransform: "none",
           },
           s: {
@@ -388,10 +388,10 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           xl: {
-            fontSize: 22,
+            fontSize: 18,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0px",
-            lineHeight: "30px",
+            lineHeight: "24px",
             textTransform: "none",
           },
           xs: {
@@ -402,10 +402,10 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           xxl: {
-            fontSize: 26,
+            fontSize: 22,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0px",
-            lineHeight: "34px",
+            lineHeight: "30px",
             textTransform: "none",
           },
           xxs: {
@@ -416,10 +416,10 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           xxxs: {
-            fontSize: 11,
+            fontSize: 12,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0.1px",
-            lineHeight: "16px",
+            lineHeight: "18px",
             textTransform: "none",
           },
         },
@@ -463,7 +463,7 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
         },
       },
     },
-    mobileStyles: {
+    styles: {
       body: {
         regular: {
           button: {
@@ -474,17 +474,17 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           l: {
-            fontSize: 16,
+            fontSize: 18,
             fontWeight: FontWeight.regular,
             letterSpacing: "0px",
-            lineHeight: "26px",
+            lineHeight: "28px",
             textTransform: "none",
           },
           m: {
-            fontSize: 14,
+            fontSize: 16,
             fontWeight: FontWeight.regular,
             letterSpacing: "0px",
-            lineHeight: "24px",
+            lineHeight: "26px",
             textTransform: "none",
           },
           s: {
@@ -509,10 +509,10 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           xxxs: {
-            fontSize: 12,
+            fontSize: 11,
             fontWeight: FontWeight.regular,
             letterSpacing: "0.1px",
-            lineHeight: "18px",
+            lineHeight: "16px",
             textTransform: "none",
           },
         },
@@ -525,17 +525,17 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           l: {
-            fontSize: 16,
+            fontSize: 18,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0px",
-            lineHeight: "26px",
+            lineHeight: "28px",
             textTransform: "none",
           },
           m: {
-            fontSize: 14,
+            fontSize: 16,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0px",
-            lineHeight: "24px",
+            lineHeight: "26px",
             textTransform: "none",
           },
           s: {
@@ -560,10 +560,10 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           xxxs: {
-            fontSize: 12,
+            fontSize: 11,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0.1px",
-            lineHeight: "18px",
+            lineHeight: "16px",
             textTransform: "none",
           },
         },
@@ -585,10 +585,10 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "uppercase",
           },
           xxxxs: {
-            fontSize: 11,
+            fontSize: 10,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0.5px",
-            lineHeight: "16px",
+            lineHeight: "14px",
             textTransform: "uppercase",
           },
         },
@@ -630,17 +630,17 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
       header: {
         semibold: {
           l: {
-            fontSize: 16,
+            fontSize: 18,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0px",
-            lineHeight: "22px",
+            lineHeight: "24px",
             textTransform: "none",
           },
           m: {
-            fontSize: 14,
+            fontSize: 16,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0px",
-            lineHeight: "20px",
+            lineHeight: "22px",
             textTransform: "none",
           },
           s: {
@@ -651,10 +651,10 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           xl: {
-            fontSize: 18,
+            fontSize: 22,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0px",
-            lineHeight: "24px",
+            lineHeight: "30px",
             textTransform: "none",
           },
           xs: {
@@ -665,10 +665,10 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           xxl: {
-            fontSize: 22,
+            fontSize: 26,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0px",
-            lineHeight: "30px",
+            lineHeight: "34px",
             textTransform: "none",
           },
           xxs: {
@@ -679,10 +679,10 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
             textTransform: "none",
           },
           xxxs: {
-            fontSize: 12,
+            fontSize: 11,
             fontWeight: FontWeight.semibold,
             letterSpacing: "0.1px",
-            lineHeight: "18px",
+            lineHeight: "16px",
             textTransform: "none",
           },
         },

diff --git a/packages/components/src/core/styles/common/mixins/fonts.ts b/packages/components/src/core/styles/common/mixins/fonts.ts
@@ -1,5 +1,5 @@
 import { css, SerializedStyles } from "@emotion/react";
-import { Breakpoint, TypographyStyle } from "@mui/material";
+import { TypographyStyle } from "@mui/material";
 import { Typography } from "../types";
 import { CommonThemeProps, getTypography } from "../selectors/theme";