feat(odyssey-react-mui): increase default icon size to 16px; add ui t…

…ype variant
okta · Nov 16, 2022 · 6577c33 · 6577c33
1 parent 28c1276
commit 6577c33
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -309,7 +309,7 @@ export const components: ThemeOptions["components"] = {
         outlineColor: "transparent",
         outlineOffset: "0",
         fontSize: theme.typography.body1.fontSize,
-        lineHeight: "1.14285714",
+        lineHeight: theme.typography.ui.lineHeight,
         whiteSpace: "nowrap",
 
         ".MuiButton-root + &": {
@@ -328,7 +328,7 @@ export const components: ThemeOptions["components"] = {
         },
 
         ".MuiButton-startIcon > *:nth-of-type(1)": {
-          fontSize: "1.14285714em",
+          fontSize: `${theme.typography.ui.lineHeight}em`,
         },
       }),
       startIcon: ({ theme }) => ({
@@ -391,7 +391,7 @@ export const components: ThemeOptions["components"] = {
         paddingBlock: theme.spacing(2),
         paddingInline: theme.spacing(3),
         fontSize: theme.typography.body1.fontSize,
-        lineHeight: "1.14285714",
+        lineHeight: theme.typography.ui.lineHeight,
         borderRadius: "1.5em",
         backgroundColor: theme.palette.grey[100],
 
@@ -443,7 +443,7 @@ export const components: ThemeOptions["components"] = {
   },
   MuiCircularProgress: {
     defaultProps: {
-      // TODO: defaultProps cannot take a theme object; needs workaround
+      // TODO: defaultProps cannot take a theme object; matches theme.typography.ui.lineHeight
       size: "1.14285714rem",
       thickness: 8,
       color: "primary",
@@ -627,7 +627,7 @@ export const components: ThemeOptions["components"] = {
     styleOverrides: {
       root: ({ theme }) => ({
         color: theme.palette.text.primary,
-        lineHeight: "1.14285714",
+        lineHeight: theme.typography.ui.lineHeight,
         fontSize: "1rem",
         fontWeight: 600,
         marginBottom: theme.spacing(2),
@@ -713,7 +713,7 @@ export const components: ThemeOptions["components"] = {
         flex: "1",
         width: "auto",
         color: theme.palette.text.primary,
-        lineHeight: "1.14285714",
+        lineHeight: theme.typography.ui.lineHeight,
         borderWidth: theme.mixins.borderWidth,
         borderStyle: theme.mixins.borderStyle,
         borderRadius: theme.mixins.borderRadius,
@@ -944,6 +944,11 @@ export const components: ThemeOptions["components"] = {
       fontSize: "inherit",
       color: "inherit",
     },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        fontSize: `${theme.typography.ui.lineHeight}em`,
+      }),
+    },
   },
   MuiTab: {
     defaultProps: {
@@ -1018,7 +1023,7 @@ export const components: ThemeOptions["components"] = {
         borderRadius: theme.mixins.borderRadius,
         marginBlock: theme.spacing(0),
         marginInline: theme.spacing(0),
-        lineHeight: "1.14285714",
+        lineHeight: theme.typography.ui.lineHeight,
 
         "&:only-child": {
           marginBlockEnd: 0,

diff --git a/packages/odyssey-react-mui/src/theme/typography.ts b/packages/odyssey-react-mui/src/theme/typography.ts
@@ -89,4 +89,10 @@ export const typography: ThemeOptions["typography"] = {
     lineHeight: Tokens.FontLineHeightHeading6,
     marginBottom: Tokens.SpaceScale1,
   },
+  ui: {
+    fontWeight: Number(Tokens.FontWeightNormal),
+    fontSize: Tokens.FontScale1,
+    lineHeight: Tokens.FontLineHeightUi,
+    letterSpacing: "initial",
+  },
 };
diff --git a/packages/odyssey-react-mui/src/theme/typography.types.ts b/packages/odyssey-react-mui/src/theme/typography.types.ts
@@ -16,10 +16,12 @@ declare module "@mui/material/styles" {
   interface TypographyVariants {
     kbd: CSSProperties;
     legend: CSSProperties;
+    ui: CSSProperties;
   }
   interface TypographyVariantsOptions {
     kbd?: CSSProperties;
     legend?: CSSProperties;
+    ui: CSSProperties;
   }
 }
 
@@ -33,6 +35,7 @@ declare module "@mui/material/Typography" {
     overline: false;
     subtitle1: true; // Design may refer to this as "caption"
     subtitle2: false;
+    ui: true;
     default: true; // used by <Link>
     monochrome: true; // used by <Link>
   }