@okta/odyssey-react-mui 0.14.6 → 0.15.1

package/src/themes/odyssey/typography.ts

@@ -63,9 +63,13 @@ export const typography: ThemeOptions["typography"] = {
     lineHeight: Tokens.FontLineHeightHeading6,
     marginBottom: Tokens.SpaceScale1,
   },
-  subtitle1: undefined,
+  subtitle1: {
+    fontWeight: Tokens.FontWeightNormal,
+    fontSize: Tokens.FontScale0,
+    lineHeight: Tokens.FontLineHeightBody,
+  },
   subtitle2: undefined,
-  body: {
+  body1: {
     fontFamily: Tokens.FontFamilyBase,
     fontWeight: Number(Tokens.FontWeightNormal),
     fontSize: Tokens.FontScale1,
@@ -74,13 +78,14 @@ export const typography: ThemeOptions["typography"] = {
     lineHeight: Tokens.FontLineHeightBody,
     letterSpacing: "initial",
   },
-  body1: undefined,
   body2: undefined,
   button: undefined,
-  caption: {
-    fontWeight: Tokens.FontWeightNormal,
-    fontSize: Tokens.FontScale0,
-    lineHeight: Tokens.FontLineHeightBody,
-  },
   overline: undefined,
+  legend: {
+    padding: 0,
+    fontWeight: Number(Tokens.FontWeightBold),
+    fontSize: Tokens.FontScale2,
+    lineHeight: Tokens.FontLineHeightHeading6,
+    marginBottom: Tokens.SpaceScale1,
+  },
 };

package/src/themes/odyssey/typography.types.ts

@@ -14,23 +14,28 @@ import { CSSProperties } from "react";
 
 declare module "@mui/material/styles" {
   interface TypographyVariants {
-    body: CSSProperties;
+    kbd: CSSProperties;
+    legend: CSSProperties;
   }
   interface TypographyVariantsOptions {
-    body?: CSSProperties;
+    kbd?: CSSProperties;
+    legend?: CSSProperties;
   }
 }
 
 declare module "@mui/material/Typography" {
   interface TypographyPropsVariantOverrides {
-    body1: false;
+    body1: true; // Design may refer to this as "body"
     body2: false;
-    body: true;
     button: false;
+    kbd: true;
+    legend: true;
     overline: false;
-    subtitle1: false;
+    subtitle1: true; // Design may refer to this as "caption"
     subtitle2: false;
-    default: true; // used by Link
-    monochrome: true; // used by Link
+    default: true; // used by <Link>
+    monochrome: true; // used by <Link>
   }
 }
+
+export {};