@okta/odyssey-react-mui 0.23.0 → 0.24.0

package/src/properties/ts/odyssey-react-mui_el.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_es.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_fi.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_fr.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_hu.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_id.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_it.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_ja.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_ko.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_ms.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_nb.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_nl-NL.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_pl.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_pt-BR.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_ro.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_ru.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_sv.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_th.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_tr.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_uk.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_zh-CN.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_zh-TW.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/theme/components.tsx

@@ -474,7 +474,7 @@ export const components: ThemeOptions["components"] = {
           backgroundColor: "transparent",
           borderColor: theme.palette.grey[900],
         },
-        ".Mui-error:hover > &": {
+        ".Mui-error:not(.Mui-valid):hover > &": {
           borderColor: theme.palette.error.dark,
 
           "&.Mui-checked": {
@@ -482,7 +482,7 @@ export const components: ThemeOptions["components"] = {
             borderColor: theme.palette.error.dark,
           },
         },
-        ".Mui-error > &": {
+        ".Mui-error:not(.Mui-valid) > &": {
           borderColor: theme.palette.error.main,
 
           "&.Mui-checked": {
@@ -504,7 +504,7 @@ export const components: ThemeOptions["components"] = {
           backgroundColor: theme.palette.grey[50],
           borderColor: theme.palette.grey[300],
 
-          ".Mui-error > &": {
+          ".Mui-error:not(.Mui-valid) > &": {
             backgroundColor: theme.palette.grey[50],
             borderColor: theme.palette.grey[300],
           },
@@ -1071,7 +1071,6 @@ export const components: ThemeOptions["components"] = {
   MuiFormControlLabel: {
     styleOverrides: {
       root: ({ theme, ownerState }) => ({
-        gap: theme.spacing(2),
         marginInlineStart: 0,
         marginInlineEnd: 0, // used for row presentation of radio/checkbox
         ...(ownerState.labelPlacement === "start" && {
@@ -1109,6 +1108,14 @@ export const components: ThemeOptions["components"] = {
             color: theme.palette.error.dark,
           },
       }),
+      label: ({ theme }) => ({
+        "&:not(:first-child)": {
+          marginInlineStart: theme.spacing(2),
+        },
+      }),
+      asterisk: () => ({
+        display: "none",
+      }),
     },
   },
   MuiFormHelperText: {
@@ -1635,6 +1642,7 @@ export const components: ThemeOptions["components"] = {
         },
       }),
       icon: ({ theme }) => ({
+        right: "unset",
         insetInlineEnd: theme.spacing(3),
         color: theme.palette.text.primary,
       }),

package/src/theme/index.ts

@@ -10,5 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export { theme as odysseyTheme } from "./theme";
+import * as Tokens from "@okta/odyssey-design-tokens";
+
+export * from "./theme";
 export { useTheme } from "./useTheme";
+
+export type DesignTokensOverride = Partial<typeof Tokens>;

package/src/theme/mixins.ts

@@ -11,11 +11,15 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
-import * as Tokens from "@okta/odyssey-design-tokens";
+import { DesignTokensOverride } from ".";
 
-export const mixins: ThemeOptions["mixins"] = {
-  maxWidth: Tokens.FontLineLengthMax,
-  borderRadius: Tokens.BorderRadiusBase,
-  borderStyle: Tokens.BorderStyleBase,
-  borderWidth: Tokens.BorderWidthBase,
+export const mixins = (
+  odysseyTokens: DesignTokensOverride
+): ThemeOptions["mixins"] => {
+  return {
+    maxWidth: odysseyTokens.FontLineLengthMax,
+    borderRadius: odysseyTokens.BorderRadiusBase,
+    borderStyle: odysseyTokens.BorderStyleBase,
+    borderWidth: odysseyTokens.BorderWidthBase,
+  };
 };

package/src/theme/palette.ts

@@ -11,94 +11,101 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
+import { DesignTokensOverride } from ".";
 import * as Tokens from "@okta/odyssey-design-tokens";
 
-export const palette: ThemeOptions["palette"] = {
-  mode: "light",
-  common: {
-    black: Tokens.ColorNeutralDark,
-    white: Tokens.ColorPaletteNeutralWhite,
-  },
-  primary: {
-    lighter: Tokens.ColorPaletteBlue000,
-    light: Tokens.ColorPaletteBlue300,
-    main: Tokens.ColorPaletteBlue500,
-    dark: Tokens.ColorPaletteBlue900,
-    contrastText: Tokens.ColorTextBodyInverse,
-  },
-  secondary: {
-    light: "#80c7ca",
-    main: Tokens.ColorPaletteTurquoise500,
-    dark: "#004650",
-    contrastText: Tokens.ColorTextBodyInverse,
-  },
-  error: {
-    lighter: Tokens.ColorPaletteRed000,
-    light: Tokens.ColorPaletteRed300,
-    main: Tokens.ColorPaletteRed500,
-    dark: Tokens.ColorPaletteRed900,
-    contrastText: Tokens.ColorTextBodyInverse,
-  },
-  warning: {
-    lighter: Tokens.ColorPaletteYellow000,
-    light: Tokens.ColorPaletteYellow300,
-    main: Tokens.ColorPaletteYellow500,
-    dark: Tokens.ColorPaletteYellow900,
-    contrastText: Tokens.ColorTextBody,
-  },
-  info: {
-    lighter: Tokens.ColorPaletteBlue000,
-    light: Tokens.ColorPaletteBlue300,
-    main: Tokens.ColorPaletteBlue500,
-    dark: Tokens.ColorPaletteBlue900,
-    contrastText: Tokens.ColorTextBodyInverse,
-  },
-  success: {
-    lighter: Tokens.ColorPaletteGreen000,
-    light: Tokens.ColorPaletteGreen300,
-    main: Tokens.ColorPaletteGreen500,
-    dark: Tokens.ColorPaletteGreen900,
-    contrastText: Tokens.ColorTextBodyInverse,
-  },
-  grey: {
-    50: Tokens.ColorPaletteNeutral000,
-    100: Tokens.ColorPaletteNeutral100,
-    200: Tokens.ColorPaletteNeutral200,
-    300: "#c1c1c8",
-    400: "#aaaab4",
-    500: Tokens.ColorPaletteNeutral500,
-    600: Tokens.ColorPaletteNeutral600,
-    700: "#585862",
-    800: "#41414b",
-    900: Tokens.ColorPaletteNeutral900,
-    // These are "Accent" colors. MUI's palette matches them to the standard greys.
-    A100: Tokens.ColorPaletteNeutral100,
-    A200: Tokens.ColorPaletteNeutral200,
-    A400: "#aaaab4",
-    A700: "#585862",
-  },
-  text: {
-    primary: Tokens.ColorPaletteNeutral900,
-    secondary: Tokens.ColorPaletteNeutral600,
-    disabled: Tokens.ColorPaletteNeutral600,
-  },
-  divider: Tokens.ColorBorderDisplay,
-  background: {
-    paper: Tokens.ColorBackgroundBase,
-    default: Tokens.ColorBackgroundBase,
-  },
-  action: {
-    // We have no equivalents here. It's likely we will update these as their uses are discovered.
-    active: "rgba(0, 0, 0, 0.54)",
-    hover: "rgba(0, 0, 0, 0.04)",
-    hoverOpacity: 0.04,
-    selected: "rgba(0, 0, 0, 0.08)",
-    selectedOpacity: 0.08,
-    disabled: Tokens.ColorPaletteNeutral200,
-    disabledBackground: "rgba(0, 0, 0, 0.12)",
-    disabledOpacity: 0.38,
-    focus: "rgba(0, 0, 0, 0.12)",
-    focusOpacity: 0.12,
-    activatedOpacity: 0.12,
-  },
+export const palette = (
+  odysseyTokens: DesignTokensOverride
+): ThemeOptions["palette"] => {
+  return {
+    mode: "light",
+    common: {
+      black: odysseyTokens.ColorNeutralDark,
+      white: odysseyTokens.ColorPaletteNeutralWhite,
+    },
+    primary: {
+      lighter: odysseyTokens.ColorPaletteBlue000,
+      light: odysseyTokens.ColorPaletteBlue300,
+      main: odysseyTokens.ColorPaletteBlue500 ?? Tokens.ColorPaletteGreen500,
+      dark: odysseyTokens.ColorPaletteBlue900,
+      contrastText: odysseyTokens.ColorTextBodyInverse,
+    },
+    secondary: {
+      light: "#80c7ca",
+      main:
+        odysseyTokens.ColorPaletteTurquoise500 ??
+        Tokens.ColorPaletteTurquoise500,
+      dark: "#004650",
+      contrastText: odysseyTokens.ColorTextBodyInverse,
+    },
+    error: {
+      lighter: odysseyTokens.ColorPaletteRed000,
+      light: odysseyTokens.ColorPaletteRed300,
+      main: odysseyTokens.ColorPaletteRed500 ?? Tokens.ColorPaletteRed500,
+      dark: odysseyTokens.ColorPaletteRed900,
+      contrastText: odysseyTokens.ColorTextBodyInverse,
+    },
+    warning: {
+      lighter: odysseyTokens.ColorPaletteYellow000,
+      light: odysseyTokens.ColorPaletteYellow300,
+      main: odysseyTokens.ColorPaletteYellow500 ?? Tokens.ColorPaletteYellow500,
+      dark: odysseyTokens.ColorPaletteYellow900,
+      contrastText: odysseyTokens.ColorTextBody,
+    },
+    info: {
+      lighter: odysseyTokens.ColorPaletteBlue000,
+      light: odysseyTokens.ColorPaletteBlue300,
+      main: odysseyTokens.ColorPaletteBlue500 ?? Tokens.ColorPaletteBlue500,
+      dark: odysseyTokens.ColorPaletteBlue900,
+      contrastText: odysseyTokens.ColorTextBodyInverse,
+    },
+    success: {
+      lighter: odysseyTokens.ColorPaletteGreen000,
+      light: odysseyTokens.ColorPaletteGreen300,
+      main: odysseyTokens.ColorPaletteGreen500 ?? Tokens.ColorPaletteGreen500,
+      dark: odysseyTokens.ColorPaletteGreen900,
+      contrastText: odysseyTokens.ColorTextBodyInverse,
+    },
+    grey: {
+      50: odysseyTokens.ColorPaletteNeutral000,
+      100: odysseyTokens.ColorPaletteNeutral100,
+      200: odysseyTokens.ColorPaletteNeutral200,
+      300: "#c1c1c8",
+      400: "#aaaab4",
+      500: odysseyTokens.ColorPaletteNeutral500,
+      600: odysseyTokens.ColorPaletteNeutral600,
+      700: "#585862",
+      800: "#41414b",
+      900: odysseyTokens.ColorPaletteNeutral900,
+      // These are "Accent" colors. MUI's palette matches them to the standard greys.
+      A100: odysseyTokens.ColorPaletteNeutral100,
+      A200: odysseyTokens.ColorPaletteNeutral200,
+      A400: "#aaaab4",
+      A700: "#585862",
+    },
+    text: {
+      primary: odysseyTokens.ColorPaletteNeutral900,
+      secondary: odysseyTokens.ColorPaletteNeutral600,
+      disabled: odysseyTokens.ColorPaletteNeutral600,
+    },
+    divider: odysseyTokens.ColorBorderDisplay,
+    background: {
+      paper: odysseyTokens.ColorBackgroundBase,
+      default: odysseyTokens.ColorBackgroundBase,
+    },
+    action: {
+      // We have no equivalents here. It's likely we will update these as their uses are discovered.
+      active: "rgba(0, 0, 0, 0.54)",
+      hover: "rgba(0, 0, 0, 0.04)",
+      hoverOpacity: 0.04,
+      selected: "rgba(0, 0, 0, 0.08)",
+      selectedOpacity: 0.08,
+      disabled: odysseyTokens.ColorPaletteNeutral200,
+      disabledBackground: "rgba(0, 0, 0, 0.12)",
+      disabledOpacity: 0.38,
+      focus: "rgba(0, 0, 0, 0.12)",
+      focusOpacity: 0.12,
+      activatedOpacity: 0.12,
+    },
+  };
 };

package/src/theme/shape.ts

@@ -11,14 +11,18 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
-import * as Tokens from "@okta/odyssey-design-tokens";
+import { DesignTokensOverride } from ".";
 
-// Strip units from BorderRadiusBase to accommodate MUI's typing
-const NumericalBorderRadiusBase =
-  typeof Tokens.BorderRadiusBase === "string"
-    ? Number(Tokens.BorderRadiusBase.replace(/(\d+).*/, "$1"))
-    : Tokens.BorderRadiusBase;
+export const shape = (
+  odysseyTokens: DesignTokensOverride
+): ThemeOptions["shape"] => {
+  // Strip units from BorderRadiusBase to accommodate MUI's typing
+  const NumericalBorderRadiusBase =
+    typeof odysseyTokens.BorderRadiusBase === "string"
+      ? Number(odysseyTokens.BorderRadiusBase.replace(/(\d+).*/, "$1"))
+      : odysseyTokens.BorderRadiusBase;
 
-export const shape: ThemeOptions["shape"] = {
-  borderRadius: NumericalBorderRadiusBase,
+  return {
+    borderRadius: NumericalBorderRadiusBase,
+  };
 };

package/src/theme/spacing.ts

@@ -11,17 +11,22 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
+import { DesignTokensOverride } from ".";
 import * as Tokens from "@okta/odyssey-design-tokens";
 
-export const spacing: ThemeOptions["spacing"] = [
-  0,
-  Tokens.SpaceScale0,
-  Tokens.SpaceScale1,
-  Tokens.SpaceScale2,
-  Tokens.SpaceScale3,
-  Tokens.SpaceScale4,
-  Tokens.SpaceScale5,
-  Tokens.SpaceScale6,
-  Tokens.SpaceScale7,
-  Tokens.SpaceScale8,
-];
+export const spacing = (
+  odysseyTokens: DesignTokensOverride
+): ThemeOptions["spacing"] => {
+  return [
+    0,
+    odysseyTokens.SpaceScale0 ?? Tokens.SpaceScale0,
+    odysseyTokens.SpaceScale1 ?? Tokens.SpaceScale1,
+    odysseyTokens.SpaceScale2 ?? Tokens.SpaceScale2,
+    odysseyTokens.SpaceScale3 ?? Tokens.SpaceScale3,
+    odysseyTokens.SpaceScale4 ?? Tokens.SpaceScale4,
+    odysseyTokens.SpaceScale5 ?? Tokens.SpaceScale5,
+    odysseyTokens.SpaceScale6 ?? Tokens.SpaceScale6,
+    odysseyTokens.SpaceScale7 ?? Tokens.SpaceScale7,
+    odysseyTokens.SpaceScale8 ?? Tokens.SpaceScale8,
+  ];
+};

package/src/theme/theme.ts

@@ -14,7 +14,6 @@ import { createTheme } from "@mui/material/styles";
 
 import { components } from "./components";
 import { mixins } from "./mixins";
-import { OdysseyTheme } from "./OdysseyTheme";
 import { palette } from "./palette";
 import { shape } from "./shape";
 import { spacing } from "./spacing";
@@ -24,13 +23,18 @@ import "./components.types";
 import "./mixins.types";
 import "./palette.types";
 import "./typography.types";
+import { DesignTokensOverride } from ".";
 
-export const theme = createTheme({
-  components,
-  mixins,
-  palette,
-  shape,
-  spacing,
-  temp,
-  typography,
-}) as OdysseyTheme;
+export type { OdysseyTheme } from "./OdysseyTheme";
+
+export const createOdysseyMuiTheme = (odysseyTokens: DesignTokensOverride) => {
+  return createTheme({
+    components,
+    mixins: mixins(odysseyTokens),
+    palette: palette(odysseyTokens),
+    shape: shape(odysseyTokens),
+    spacing: spacing(odysseyTokens),
+    temp,
+    typography: typography(odysseyTokens),
+  });
+};

package/src/theme/typography.ts

@@ -11,88 +11,92 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
-import * as Tokens from "@okta/odyssey-design-tokens";
+import { DesignTokensOverride } from ".";
 
-export const typography: ThemeOptions["typography"] = {
-  htmlFontSize: 16,
-  fontFamily: Tokens.FontFamilyBase,
-  fontSize: 14,
-  fontWeightLight: 300,
-  fontWeightRegular: Number(Tokens.FontWeightNormal),
-  fontWeightMedium: 500,
-  fontWeightBold: Number(Tokens.FontWeightBold),
-  allVariants: {
-    fontFamily: Tokens.FontFamilyBase,
-    fontFeatureSettings: "'lnum', 'pnum'",
-    fontVariant: "normal",
-    letterSpacing: 0,
-  },
-  h1: {
-    fontWeight: Number(Tokens.FontWeightBold),
-    fontSize: Tokens.FontSizeHeading1,
-    lineHeight: Tokens.FontLineHeightHeading1,
-    marginBottom: Tokens.SpaceScale1,
-  },
-  h2: {
-    fontWeight: Number(Tokens.FontWeightBold),
-    fontSize: Tokens.FontSizeHeading2,
-    lineHeight: Tokens.FontLineHeightHeading2,
-    marginBottom: Tokens.SpaceScale1,
-  },
-  h3: {
-    fontWeight: Number(Tokens.FontWeightBold),
-    fontSize: Tokens.FontSizeHeading3,
-    lineHeight: Tokens.FontLineHeightHeading3,
-    marginBottom: Tokens.SpaceScale1,
-  },
-  h4: {
-    fontWeight: Number(Tokens.FontWeightBold),
-    fontSize: Tokens.FontSizeHeading4,
-    lineHeight: Tokens.FontLineHeightHeading4,
-    marginBottom: Tokens.SpaceScale1,
-  },
-  h5: {
-    fontWeight: Number(Tokens.FontWeightBold),
-    fontSize: Tokens.FontSizeHeading5,
-    lineHeight: Tokens.FontLineHeightHeading5,
-    marginBottom: Tokens.SpaceScale1,
-  },
-  h6: {
-    fontWeight: Number(Tokens.FontWeightBold),
-    fontSize: Tokens.FontScale2,
-    lineHeight: Tokens.FontLineHeightHeading6,
-    marginBottom: Tokens.SpaceScale1,
-  },
-  subtitle1: {
-    color: Tokens.ColorPaletteNeutral600,
-    fontWeight: Tokens.FontWeightNormal,
-    fontSize: Tokens.FontScale0,
-    lineHeight: Tokens.FontLineHeightBody,
-  },
-  subtitle2: undefined,
-  body1: {
-    fontFamily: Tokens.FontFamilyBase,
-    fontWeight: Number(Tokens.FontWeightNormal),
-    fontSize: Tokens.FontScale1,
-    fontFeatureSettings: "'lnum', 'pnum'",
-    fontVariant: "normal",
-    lineHeight: Tokens.FontLineHeightBody,
-    letterSpacing: "initial",
-  },
-  body2: undefined,
-  button: undefined,
-  overline: undefined,
-  legend: {
-    padding: 0,
-    fontWeight: Number(Tokens.FontWeightBold),
-    fontSize: Tokens.FontScale2,
-    lineHeight: Tokens.FontLineHeightHeading6,
-    marginBottom: Tokens.SpaceScale1,
-  },
-  ui: {
-    fontWeight: Number(Tokens.FontWeightNormal),
-    fontSize: Tokens.FontScale1,
-    lineHeight: Tokens.FontLineHeightUi,
-    letterSpacing: "initial",
-  },
+export const typography = (
+  odysseyTokens: DesignTokensOverride
+): ThemeOptions["typography"] => {
+  return {
+    htmlFontSize: 16,
+    fontFamily: odysseyTokens.FontFamilyBase,
+    fontSize: 14,
+    fontWeightLight: 300,
+    fontWeightRegular: Number(odysseyTokens.FontWeightNormal),
+    fontWeightMedium: 500,
+    fontWeightBold: Number(odysseyTokens.FontWeightBold),
+    allVariants: {
+      fontFamily: odysseyTokens.FontFamilyBase,
+      fontFeatureSettings: "'lnum', 'pnum'",
+      fontVariant: "normal",
+      letterSpacing: 0,
+    },
+    h1: {
+      fontWeight: Number(odysseyTokens.FontWeightBold),
+      fontSize: odysseyTokens.FontSizeHeading1,
+      lineHeight: odysseyTokens.FontLineHeightHeading1,
+      marginBottom: odysseyTokens.SpaceScale1,
+    },
+    h2: {
+      fontWeight: Number(odysseyTokens.FontWeightBold),
+      fontSize: odysseyTokens.FontSizeHeading2,
+      lineHeight: odysseyTokens.FontLineHeightHeading2,
+      marginBottom: odysseyTokens.SpaceScale1,
+    },
+    h3: {
+      fontWeight: Number(odysseyTokens.FontWeightBold),
+      fontSize: odysseyTokens.FontSizeHeading3,
+      lineHeight: odysseyTokens.FontLineHeightHeading3,
+      marginBottom: odysseyTokens.SpaceScale1,
+    },
+    h4: {
+      fontWeight: Number(odysseyTokens.FontWeightBold),
+      fontSize: odysseyTokens.FontSizeHeading4,
+      lineHeight: odysseyTokens.FontLineHeightHeading4,
+      marginBottom: odysseyTokens.SpaceScale1,
+    },
+    h5: {
+      fontWeight: Number(odysseyTokens.FontWeightBold),
+      fontSize: odysseyTokens.FontSizeHeading5,
+      lineHeight: odysseyTokens.FontLineHeightHeading5,
+      marginBottom: odysseyTokens.SpaceScale1,
+    },
+    h6: {
+      fontWeight: Number(odysseyTokens.FontWeightBold),
+      fontSize: odysseyTokens.FontScale2,
+      lineHeight: odysseyTokens.FontLineHeightHeading6,
+      marginBottom: odysseyTokens.SpaceScale1,
+    },
+    subtitle1: {
+      color: odysseyTokens.ColorPaletteNeutral600,
+      fontWeight: odysseyTokens.FontWeightNormal,
+      fontSize: odysseyTokens.FontScale0,
+      lineHeight: odysseyTokens.FontLineHeightBody,
+    },
+    subtitle2: undefined,
+    body1: {
+      fontFamily: odysseyTokens.FontFamilyBase,
+      fontWeight: Number(odysseyTokens.FontWeightNormal),
+      fontSize: odysseyTokens.FontScale1,
+      fontFeatureSettings: "'lnum', 'pnum'",
+      fontVariant: "normal",
+      lineHeight: odysseyTokens.FontLineHeightBody,
+      letterSpacing: "initial",
+    },
+    body2: undefined,
+    button: undefined,
+    overline: undefined,
+    legend: {
+      padding: 0,
+      fontWeight: Number(odysseyTokens.FontWeightBold),
+      fontSize: odysseyTokens.FontScale2,
+      lineHeight: odysseyTokens.FontLineHeightHeading6,
+      marginBottom: odysseyTokens.SpaceScale1,
+    },
+    ui: {
+      fontWeight: Number(odysseyTokens.FontWeightNormal),
+      fontSize: odysseyTokens.FontScale1,
+      lineHeight: odysseyTokens.FontLineHeightUi,
+      letterSpacing: "initial",
+    },
+  };
 };