feat(styles/common): mobile font styles

chanzuckerberg · Oct 30, 2024 · c5d2d74 · c5d2d74
1 parent 5bd789e
commit c5d2d74
Show file tree

Hide file tree

Showing 3 changed files with 388 additions and 72 deletions.
diff --git a/packages/components/src/core/styles/common/SDSAppTheme.ts b/packages/components/src/core/styles/common/SDSAppTheme.ts
@@ -463,6 +463,269 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
         },
       },
     },
+    mobileStyles: {
+      body: {
+        regular: {
+          button: {
+            fontSize: 13,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          l: {
+            fontSize: 16,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "26px",
+            textTransform: "none",
+          },
+          m: {
+            fontSize: 14,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.08px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          xxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+          xxxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+        },
+        semibold: {
+          button: {
+            fontSize: 13,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          l: {
+            fontSize: 16,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "26px",
+            textTransform: "none",
+          },
+          m: {
+            fontSize: 14,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          xxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+          xxxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+        },
+      },
+      caps: {
+        semibold: {
+          xxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.5px",
+            lineHeight: "18px",
+            textTransform: "uppercase",
+          },
+          xxxs: {
+            fontSize: 11,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.5px",
+            lineHeight: "16px",
+            textTransform: "uppercase",
+          },
+          xxxxs: {
+            fontSize: 11,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.5px",
+            lineHeight: "16px",
+            textTransform: "uppercase",
+          },
+        },
+      },
+      code: {
+        regular: {
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+        },
+        semibold: {
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+        },
+      },
+      header: {
+        semibold: {
+          l: {
+            fontSize: 16,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "22px",
+            textTransform: "none",
+          },
+          m: {
+            fontSize: 14,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          xl: {
+            fontSize: 18,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+          xxl: {
+            fontSize: 22,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "30px",
+            textTransform: "none",
+          },
+          xxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+          xxxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+        },
+      },
+      tabular: {
+        regular: {
+          s: {
+            fontSize: 14,
+            fontVariantNumeric: tabularNums,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontVariantNumeric: tabularNums,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+        },
+        semibold: {
+          s: {
+            fontSize: 14,
+            fontVariantNumeric: tabularNums,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontVariantNumeric: tabularNums,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+        },
+      },
+    },
   },
 };