Add MUI theme decorator and Typography styles

[edburyenegren-okta]

Description

Adds a MUI Theme decorator for use until we can update Storybook.

Updates the Primary.Main color to the appropriate value.

Adds component overrides and a starting point for TS augmentations.

[edburyenegren-okta]

Removing this breaks the display in some ways. Not sure what is going on here:

Our blue is being applied, but not our typeface. This might be expected because we don't have a font-face declaration inside the theme yet.

[sherizada-okta]

Can you change the theme to use a different primary main color to check that the decorator works?

[edburyenegren-okta]

The screenshot here is reflecting the correct color from the main director, but the "Themed" example is broken without the wrappers.

I've added the wrappers back to protect the previous work, since that's not really the point of this PR. Normal, non-theme override stories should work fine without the wrappers.

[sherizada-okta]

So in order to get the decorator to use the custom theme for this story, we can do this:

# packages/odyssey-storybook/src/components/PasswordInput/PasswordInput.stories.tsx
Themed.args = {
  theme: createTheme({
    palette: {
      mode: "light",
      primary: {
        main: "#3fb466",
      },
    },
  })
};

# packages/odyssey-storybook/.storybook/components/MuiThemeDecorator.tsx
export const MuiThemeDecorator: DecoratorFn = (Story, {args: {theme}) => (
  <MuiThemeProvider theme={theme}>
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  </MuiThemeProvider>
);

[sherizada-okta]

Looks like my previous comment doesn't work for when changing the color via Controls

[edburyenegren-okta]

@sherizada-okta I'm not sure where these should live. I have them alongside the theme overrides right now for ease of comparison, but we should be exporting them somewhere.

[sherizada-okta]

Looks like the declares should be in separate files following the pattern types.d.ts (https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html).

Just tried this and now the import from "@mui/material/styles" in theme.ts shows this error:
Module '"@mui/material/styles"' has no exported member 'createTheme'

[sherizada-okta]

And then inside packages/odyssey-react-mui/tsconfig.json we'll need to add:

  "include": [
      "@okta/odyssey-react-mui/themes/odyssey/types.d.ts"
    ]

[edburyenegren-okta]

I think we get the createTheme error because the theme object can't be parsed without the type augmentations:

src/themes/odyssey/typography.ts(80,3): error TS2322: Type '{ htmlFontSize: number; fontFamily: "'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif"; ... 18 more ...; overline: undefined; }' is not assignable to type 'TypographyOptions | ((palette: Palette) => TypographyOptions) | undefined'.
  Object literal may only specify known properties, and 'body' does not exist in type 'TypographyOptions | ((palette: Palette) => TypographyOptions)'

This occurs when types.d.ts is present, whether it's included in our tsconfig.json or not -- but not when the declarations live alongside the theme object, which is odd.

[edburyenegren-okta]

The decorator only applies to stories, so non-story MUI examples still need a wrapper. Once I have an example for story'ing MUI components directly, I can convert these examples to stories.

[edburyenegren-okta]

Makes info match primary without removing the distinction.

[magizh-okta]

Where are we getting these values from ?

[edburyenegren-okta]

These are the values from our design tokens. We don't have an integration with StyleDictionary yet, so we can't pull them in from there. I believe @sherizada-okta is going to test importing them the MUI way via theme.spacing(2). Once we have a solution that works, I'll swap all of these magic numbers over to variables (same for our colors, line-heights, etc).

[sherizada-okta]

Since you introduced a new variant body, will that need a variant mapping?

const theme = createTheme({
  components: {
    MuiTypography: {
      defaultProps: {
        variantMapping: {
          h1: 'h2',
          h2: 'h2',
          h3: 'h2',
          h4: 'h2',
          h5: 'h2',
          h6: 'h2',
          subtitle1: 'h2',
          subtitle2: 'h2',
          body1: 'span',
          body2: 'span',
        },
      },
    },
  },
});

[edburyenegren-okta]

Without one, it defaults to span which felt appropriate for body. I can def add this if we want to be explicit tho!