@okta/odyssey-react-mui 0.24.0 → 1.0.0

package/src/theme/components.tsx

@@ -12,16 +12,20 @@
 
 import { ThemeOptions } from "@mui/material";
 import type {} from "@mui/lab/themeAugmentation";
-//import radioClasses from "@mui/material";
+import { alertTitleClasses } from "@mui/material/AlertTitle";
 import { buttonClasses } from "@mui/material/Button";
+import { checkboxClasses } from "@mui/material/Checkbox";
 import { chipClasses } from "@mui/material/Chip";
-import { dialogActionsClasses } from "@mui/material/DialogActions";
 import { dividerClasses } from "@mui/material/Divider";
+import { formControlLabelClasses } from "@mui/material/FormControlLabel";
+import { formLabelClasses } from "@mui/material/FormLabel";
 import { inputAdornmentClasses } from "@mui/material/InputAdornment";
 import { inputBaseClasses } from "@mui/material/InputBase";
 import { listItemIconClasses } from "@mui/material/ListItemIcon";
 import { listItemTextClasses } from "@mui/material/ListItemText";
 import { menuItemClasses } from "@mui/material/MenuItem";
+import { radioClasses } from "@mui/material/Radio";
+import { stackClasses } from "@mui/material/Stack";
 import { svgIconClasses } from "@mui/material/SvgIcon";
 import { tableBodyClasses } from "@mui/material/TableBody";
 import { tableCellClasses } from "@mui/material/TableCell";
@@ -29,2057 +33,2237 @@ import { tableHeadClasses } from "@mui/material/TableHead";
 import { tableRowClasses } from "@mui/material/TableRow";
 import { tableSortLabelClasses } from "@mui/material/TableSortLabel";
 import { tooltipClasses } from "@mui/material/Tooltip";
+import { typographyClasses } from "@mui/material/Typography";
+
 import {
-  AlertTriangleFilledIcon,
   ArrowDownIcon,
-  CheckIcon,
   CheckCircleFilledIcon,
+  CheckIcon,
   ChevronDownIcon,
   CloseCircleFilledIcon,
   CloseIcon,
+  DangerDiamondFilledIcon,
   InformationCircleFilledIcon,
   SubtractIcon,
-} from "../iconDictionary";
-
-export const components: ThemeOptions["components"] = {
-  MuiAlert: {
-    defaultProps: {
-      iconMapping: {
-        error: <AlertTriangleFilledIcon />,
-        info: <InformationCircleFilledIcon />,
-        success: <CheckCircleFilledIcon />,
-        warning: <AlertTriangleFilledIcon />,
+  WarningFilledIcon,
+} from "../icons.generated";
+import { DesignTokens } from "./theme";
+
+export const components = (
+  odysseyTokens: DesignTokens
+): ThemeOptions["components"] => {
+  return {
+    MuiAlert: {
+      defaultProps: {
+        iconMapping: {
+          error: <DangerDiamondFilledIcon />,
+          info: <InformationCircleFilledIcon />,
+          success: <CheckCircleFilledIcon />,
+          warning: <WarningFilledIcon />,
+        },
       },
-    },
-    styleOverrides: {
-      root: ({ ownerState, theme }) => ({
-        padding: theme.spacing(4),
-        gap: theme.spacing(4),
-        color: theme.palette.text.primary,
-        ...(ownerState.severity && {
-          backgroundColor: theme.palette[ownerState.severity].lighter,
-          borderColor: theme.palette[ownerState.severity].light,
-        }),
-        ...(ownerState.variant === "banner" && {
-          position: "relative",
-          justifyContent: "center",
-          alignItems: "center",
-          borderWidth: 0,
-          borderRadius: 0,
-        }),
-        ...(ownerState.variant === "infobox" && {
-          borderStyle: theme.mixins.borderStyle,
-          borderWidth: theme.mixins.borderWidth,
-          borderRadius: theme.mixins.borderRadius,
-          "&:not(:last-child)": {
-            marginBottom: theme.spacing(4),
-          },
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          padding: odysseyTokens.Spacing4,
+          gap: odysseyTokens.Spacing4,
+          color: odysseyTokens.TypographyColorBody,
+          border: 0,
+
+          // Severity color variation
+          ...(ownerState.severity === "success" && {
+            backgroundColor: odysseyTokens.HueGreen100,
+
+            ...(ownerState.variant === "toast" && {
+              backgroundColor: odysseyTokens.HueGreen100.concat(
+                odysseyTokens.PaletteAlphaSemi
+              ),
+            }),
+          }),
+          ...(ownerState.severity === "info" && {
+            backgroundColor: odysseyTokens.HueBlue100,
+
+            ...(ownerState.variant === "toast" && {
+              backgroundColor: odysseyTokens.HueBlue100.concat(
+                odysseyTokens.PaletteAlphaSemi
+              ),
+            }),
+          }),
+          ...(ownerState.severity === "error" && {
+            backgroundColor: odysseyTokens.HueRed100,
+
+            ...(ownerState.variant === "toast" && {
+              backgroundColor: odysseyTokens.HueRed100.concat(
+                odysseyTokens.PaletteAlphaSemi
+              ),
+            }),
+          }),
+          ...(ownerState.severity === "warning" && {
+            backgroundColor: odysseyTokens.HueYellow100,
+
+            ...(ownerState.variant === "toast" && {
+              backgroundColor: odysseyTokens.HueYellow100.concat(
+                odysseyTokens.PaletteAlphaSemi
+              ),
+            }),
+          }),
+
+          // Alert title variation
+          [`& .${alertTitleClasses.root}`]: {
+            ...(ownerState.severity === "success" && {
+              color: odysseyTokens.PaletteSuccessHeading,
+            }),
+            ...(ownerState.severity === "info" && {
+              color: odysseyTokens.PalettePrimaryHeading,
+            }),
+            ...(ownerState.severity === "error" && {
+              color: odysseyTokens.PaletteDangerHeading,
+            }),
+            ...(ownerState.severity === "warning" && {
+              color: odysseyTokens.PaletteWarningHeading,
+            }),
+            ...(ownerState.variant === "banner" && {
+              marginBlockEnd: 0,
+            }),
+          },
+
+          // Alert variant styling
+          ...(ownerState.variant === "banner" && {
+            position: "relative",
+            justifyContent: "center",
+            alignItems: "center",
+            borderRadius: 0,
+
+            ...(ownerState.onClose !== undefined && {
+              paddingInline: odysseyTokens.Spacing6,
+            }),
+          }),
+          ...(ownerState.variant === "callout" && {
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            "&:not(:last-child)": {
+              marginBottom: odysseyTokens.Spacing6,
+            },
+          }),
+          ...(ownerState.variant === "toast" && {
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            borderRadius: odysseyTokens.BorderRadiusOuter,
+            position: "relative",
+            alignItems: "center",
+            backdropFilter: "blur(10px)",
+          }),
         }),
-        ...(ownerState.variant === "toast" && {
-          maxWidth: theme.mixins.maxWidth,
-          borderStyle: theme.mixins.borderStyle,
-          borderWidth: theme.mixins.borderWidth,
-          borderRadius: theme.mixins.borderRadius,
-          position: "relative",
-          alignItems: "center",
+        action: ({ ownerState }) => ({
+          ...(ownerState.variant === "banner" && {
+            padding: 0,
+            marginInlineEnd: 0,
+            insetBlockStart: "50%",
+            insetInlineEnd: odysseyTokens.Spacing2,
+            position: "absolute",
+            transform: "translateY(-50%)",
+          }),
+          ...(ownerState.variant === "toast" && {
+            padding: 0,
+            marginInlineStart: 0,
+            marginInlineEnd: 0,
+          }),
         }),
-      }),
-      action: ({ ownerState, theme }) => ({
-        ...(ownerState.variant === "banner" && {
-          padding: 0,
+        icon: ({ ownerState }) => ({
           marginInlineEnd: 0,
-          top: "50%",
-          right: theme.spacing(4),
-          position: "absolute",
-          transform: "translateY(-50%)",
-        }),
-        ...(ownerState.variant === "toast" && {
           padding: 0,
-          marginInlineStart: 0,
-          marginInlineEnd: 0,
-        }),
-      }),
-      icon: ({ ownerState, theme }) => ({
-        marginInlineEnd: 0,
-        padding: 0,
-        fontSize: "inherit",
-        opacity: 1,
-        ...(ownerState.severity && {
-          color: theme.palette[ownerState.severity].main,
-        }),
-        ...(ownerState.severity === "warning" && {
-          color: theme.palette[ownerState.severity].dark,
-        }),
+          height: `calc(${odysseyTokens.TypographySizeHeading6} * ${odysseyTokens.TypographyLineHeightHeading6})`,
+          opacity: 1,
+          ...(ownerState.severity === "info" && {
+            color: odysseyTokens.PalettePrimaryMain,
+          }),
+          ...(ownerState.severity === "error" && {
+            color: odysseyTokens.PaletteDangerMain,
+          }),
+          ...(ownerState.severity === "success" && {
+            color: odysseyTokens.PaletteSuccessMain,
+          }),
+          ...(ownerState.severity === "warning" && {
+            color: odysseyTokens.PaletteWarningDark,
+          }),
 
-        [`& .${svgIconClasses.root}`]: {
-          fontSize: "1.429rem",
-        },
-      }),
-      message: ({ ownerState, theme }) => ({
-        padding: 0,
-        lineHeight: theme.typography.body1.lineHeight,
-        overflow: "visible",
-        ...(ownerState.variant === "banner" && {
-          display: "flex",
-          justifyContent: "space-between",
-          gap: theme.spacing(4),
+          [`& .${svgIconClasses.root}`]: {
+            alignSelf: "center",
+            fontSize: odysseyTokens.TypographySizeHeading6,
+          },
         }),
-        ...(ownerState.variant === "toast" && {
-          flexGrow: 1,
+        message: ({ ownerState }) => ({
+          padding: 0,
+          overflow: "visible",
+          ...(ownerState.variant === "banner" && {
+            display: "flex",
+            justifyContent: "space-between",
+            gap: odysseyTokens.Spacing4,
+          }),
+          ...(ownerState.variant === "toast" && {
+            flexGrow: 1,
+          }),
         }),
-      }),
+      },
     },
-  },
-  MuiAlertTitle: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        marginTop: 0,
-        marginBottom: theme.spacing(1),
-        lineHeight: theme.typography.h6.lineHeight,
-        fontSize: theme.typography.h6.fontSize,
-        fontWeight: theme.typography.fontWeightBold,
-
-        "&:last-child": {
-          marginBlockEnd: 0,
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          marginBlockStart: 0,
+          marginBlockEnd: odysseyTokens.Spacing2,
+          lineHeight: odysseyTokens.TypographyLineHeightHeading6,
+          fontSize: odysseyTokens.TypographySizeHeading6,
+          fontWeight: odysseyTokens.TypographyWeightHeading,
+          fontFamily: odysseyTokens.TypographyFamilyHeading,
+
+          [`&:last-child`]: {
+            marginBlockEnd: 0,
+          },
         },
-      }),
-    },
-  },
-  MuiAutocomplete: {
-    defaultProps: {
-      autoHighlight: true,
-      autoSelect: false,
-      blurOnSelect: false,
-      clearIcon: <CloseIcon />,
-      clearOnEscape: true,
-      disableClearable: false,
-      disabledItemsFocusable: false,
-      disableListWrap: false,
-      disablePortal: false,
-      filterSelectedOptions: false,
-      fullWidth: false,
-      handleHomeEndKeys: true,
-      includeInputInList: true,
-      limitTags: -1,
-      openOnFocus: false,
-      popupIcon: <ChevronDownIcon />,
-      selectOnFocus: true,
+      },
     },
-    styleOverrides: {
-      clearIndicator: ({ theme }) => ({
-        marginRight: "unset",
-        padding: theme.spacing(1),
-      }),
-      endAdornment: ({ theme, ownerState }) => ({
-        display: "flex",
-        gap: theme.spacing(1),
-        top: `calc(${theme.spacing(2)} - ${theme.mixins.borderWidth})`,
-        right: theme.spacing(2),
-        maxHeight: "unset",
-        alignItems: "center",
-        whiteSpace: "nowrap",
-        color: theme.palette.action.active,
-
-        ...(ownerState.disabled === true && {
-          display: "none",
-        }),
+    MuiAutocomplete: {
+      defaultProps: {
+        autoHighlight: true,
+        autoSelect: false,
+        blurOnSelect: false,
+        clearIcon: <CloseIcon />,
+        clearOnEscape: true,
+        disableClearable: false,
+        disabledItemsFocusable: false,
+        disableListWrap: false,
+        disablePortal: false,
+        filterSelectedOptions: false,
+        fullWidth: false,
+        handleHomeEndKeys: true,
+        includeInputInList: true,
+        limitTags: -1,
+        openOnFocus: false,
+        popupIcon: <ChevronDownIcon />,
+        selectOnFocus: true,
+      },
+      styleOverrides: {
+        clearIndicator: {
+          marginRight: "unset",
+          padding: odysseyTokens.Spacing1,
+        },
+        endAdornment: ({ ownerState }) => ({
+          display: "flex",
+          gap: odysseyTokens.Spacing1,
+          top: "unset",
+          right: "unset",
+          insetBlockStart: odysseyTokens.Spacing2,
+          insetInlineEnd: odysseyTokens.Spacing2,
+          maxHeight: "unset",
+          alignItems: "center",
+          whiteSpace: "nowrap",
+          color: odysseyTokens.TypographyColorSubordinate,
 
-        ...(ownerState.readOnly === true && {
-          display: "none",
+          ...(ownerState.disabled === true && {
+            display: "none",
+          }),
+
+          ...(ownerState.readOnly === true && {
+            display: "none",
+          }),
         }),
-      }),
-      loading: ({ theme }) => ({
-        paddingBlock: theme.spacing(3),
-        paddingInline: theme.spacing(4),
-      }),
-      popupIndicator: ({ theme }) => ({
-        padding: theme.spacing(1),
-        marginRight: "unset",
-      }),
-      inputRoot: ({ theme, ownerState }) => ({
-        ...(ownerState.readOnly === true && {
-          backgroundColor: theme.palette.grey[50],
-
-          [`&:not(:hover)`]: {
-            borderColor: "transparent",
-          },
+        listbox: {
+          paddingBlock: odysseyTokens.Spacing2,
+          paddingInline: odysseyTokens.Spacing2,
+          borderRadius: odysseyTokens.BorderRadiusMain,
+        },
+        loading: {
+          paddingBlock: odysseyTokens.Spacing3,
+          paddingInline: odysseyTokens.Spacing4,
+        },
+        option: {
+          paddingBlock: odysseyTokens.Spacing3,
+          borderRadius: odysseyTokens.BorderRadiusTight,
+        },
+        popupIndicator: {
+          padding: odysseyTokens.Spacing1,
+          marginRight: "unset",
+        },
+        inputRoot: ({ ownerState }) => ({
+          ...(ownerState.readOnly === true && {
+            backgroundColor: odysseyTokens.HueNeutral50,
+
+            [`&:not(:hover)`]: {
+              borderColor: "transparent",
+            },
+          }),
         }),
-      }),
+      },
     },
-  },
-  MuiBackdrop: {
-    styleOverrides: {
-      root: ({ ownerState }) => ({
-        backgroundColor: "rgba(29,29,33,0.75)",
-
-        ...(ownerState.invisible === true && {
-          backgroundColor: "transparent",
+    MuiBackdrop: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          backgroundColor: "rgba(29,29,33,0.75)",
+
+          ...(ownerState.invisible === true && {
+            backgroundColor: "transparent",
+          }),
         }),
-      }),
-    },
-  },
-  MuiButton: {
-    defaultProps: {
-      variant: "primary",
-      disableElevation: true,
+      },
     },
-    variants: [
-      {
-        props: { variant: "primary" },
-        style: ({ theme }) => ({
-          fontWeight: 600,
-          color: theme.palette.common.white,
+    MuiButton: {
+      defaultProps: {
+        variant: "primary",
+        disableElevation: true,
+      },
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          minWidth: "unset",
+          paddingBlock: odysseyTokens.Spacing3,
+          paddingInline: odysseyTokens.Spacing4,
+          display: "inline-flex",
+          position: "relative",
+          marginBlock: "0",
+          marginInline: "0",
+          transitionProperty:
+            "color, background-color, border-color, box-shadow",
+          transitionDuration: "100ms",
+          transitionTimingFunction: "linear",
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderRadius: odysseyTokens.BorderRadiusMain,
           borderColor: "transparent",
-          backgroundColor: theme.palette.primary.main,
+          fontSize: odysseyTokens.TypographySizeBody,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          fontFamily: odysseyTokens.TypographyFamilyButton,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          whiteSpace: "nowrap",
 
-          "&:hover, &:focus-visible": {
-            backgroundColor: theme.palette.primary.dark,
+          [`.${buttonClasses.root} + &`]: {
+            marginInlineStart: odysseyTokens.Spacing2,
           },
 
-          "&:active": {
-            backgroundColor: theme.palette.primary.main,
+          "&:focus-visible": {
+            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+            outline: "2px solid transparent",
+            outlineOffset: "1px",
           },
 
           "&:disabled": {
-            color: theme.palette.common.white,
-            backgroundColor: theme.palette.primary.light,
-            pointerEvents: "initial",
-          },
-        }),
-      },
-      {
-        props: { variant: "secondary" },
-        style: ({ theme }) => ({
-          backgroundColor: theme.palette.grey[50],
-          borderColor: theme.palette.grey[200],
-          color: theme.palette.text.primary,
-          "&:hover, &:focus-visible": {
-            backgroundColor: theme.palette.primary.lighter,
-            borderColor: theme.palette.primary.light,
-            color: theme.palette.primary.main,
+            pointerEvents: "none",
           },
 
-          "&:active": {
-            borderColor: theme.palette.primary.main,
+          [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: {
+            "& > *:nth-of-type(1)": {
+              fontSize: `${odysseyTokens.TypographyLineHeightUi}em`,
+            },
           },
 
-          "&:disabled": {
-            borderColor: theme.palette.grey[100],
-            backgroundColor: theme.palette.grey[100],
-            color: theme.palette.grey[500],
-          },
-        }),
-      },
-      {
-        props: { variant: "danger" },
-        style: ({ theme }) => ({
-          backgroundColor: theme.palette.error.main,
-          color: theme.palette.common.white,
-          borderColor: "transparent",
+          ...(ownerState.variant === "primary" && {
+            color: odysseyTokens.HueNeutralWhite,
+            backgroundColor: odysseyTokens.PalettePrimaryMain,
 
-          "&:hover": {
-            backgroundColor: theme.palette.error.dark,
-          },
+            "&:hover": {
+              backgroundColor: odysseyTokens.PalettePrimaryDark,
+            },
 
-          "&:focus-visible": {
-            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`,
-            backgroundColor: theme.palette.error.dark,
-          },
+            "&:active": {
+              backgroundColor: odysseyTokens.PalettePrimaryDarker,
+            },
 
-          "&:active": {
-            backgroundColor: theme.palette.error.main,
-          },
+            "&:disabled": {
+              color: odysseyTokens.PalettePrimaryLight,
+              backgroundColor: odysseyTokens.HueBlue100,
+            },
+          }),
 
-          "&:disabled": {
-            color: theme.palette.common.white,
-            backgroundColor: theme.palette.error.light,
-          },
-        }),
-      },
-      {
-        props: { variant: "floating" },
-        style: ({ theme }) => ({
-          backgroundColor: "transparent",
-          color: theme.palette.text.primary,
-          borderColor: "transparent",
+          ...(ownerState.variant === "secondary" && {
+            backgroundColor: odysseyTokens.HueBlue100,
+            color: odysseyTokens.PalettePrimaryDark,
 
-          "&:hover, &:focus-visible": {
-            backgroundColor: "rgba(29, 29, 33, 0.1)",
-            borderColor: "transparent",
-          },
-          "&:active": {
-            backgroundColor: "rgba(29, 29, 33, 0.2)",
-            borderColor: "transparent",
-          },
-          "&:disabled": {
-            backgroundColor: "transparent",
-            color: theme.palette.text.secondary,
-            borderColor: "transparent",
-          },
-        }),
-      },
-      {
-        props: { size: "small" },
-        style: ({ theme }) => ({
-          paddingBlock: `calc(${theme.spacing(2)} - 1px)`,
-          paddingInline: `calc(${theme.spacing(2)} - 1px)`,
-          fontSize: "1rem",
-        }),
-      },
-      {
-        props: { size: "large" },
-        style: ({ theme }) => ({
-          paddingBlock: `calc(${theme.spacing(4)} - 1px)`,
-          paddingInline: `calc(${theme.spacing(4)} - 1px)`,
-        }),
-      },
-      {
-        props: { fullWidth: true },
-        style: ({ theme }) => ({
-          display: "block",
-          width: "100%",
-          marginBlock: "0",
-          marginInline: "0",
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueBlue200,
+              color: odysseyTokens.HueBlue800,
+            },
 
-          "&:not(:last-child)": {
-            marginBlockEnd: theme.spacing(4),
-          },
-        }),
-      },
-      {
-        // icon only
-        props: { children: "" },
-        style: {
-          minWidth: "auto",
+            "&:active": {
+              backgroundColor: odysseyTokens.PalettePrimaryLight,
+              color: odysseyTokens.HueBlue800,
+            },
 
-          [`.${buttonClasses.endIcon}, .${buttonClasses.startIcon}`]: {
-            margin: "0",
-          },
-        },
-      },
-    ],
-    styleOverrides: {
-      root: ({ theme }) => ({
-        fontWeight: 600,
-        minWidth: "unset",
-        padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
-        display: "inline-flex",
-        position: "relative",
-        marginBlock: "0",
-        marginInline: "0",
-        transitionProperty: "color, background-color, border-color, box-shadow",
-        transitionDuration: "100ms",
-        transitionTimingFunction: "linear",
-        borderWidth: theme.mixins.borderWidth,
-        borderStyle: theme.mixins.borderStyle,
-        borderRadius: theme.mixins.borderRadius,
-        fontSize: theme.typography.body1.fontSize,
-        lineHeight: theme.typography.ui.lineHeight,
-        whiteSpace: "nowrap",
-
-        ".MuiButton-root + &": {
-          marginInlineStart: theme.spacing(2),
-        },
+            "&:disabled": {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              color: odysseyTokens.TypographyColorDisabled,
+            },
+          }),
 
-        "&:focus-visible": {
-          boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
-          outline: "2px solid transparent",
-          outlineOffset: "1px",
-        },
+          ...(ownerState.variant === "tertiary" && {
+            backgroundColor: odysseyTokens.HueNeutral100,
+            color: odysseyTokens.HueNeutral700,
 
-        "&:disabled": {
-          cursor: "not-allowed",
-          pointerEvents: "initial",
-        },
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral200,
+              color: odysseyTokens.HueNeutral800,
+            },
 
-        "&:disabled:active": {
-          pointerEvents: "none",
-        },
+            "&:active": {
+              backgroundColor: odysseyTokens.HueNeutral300,
+              color: odysseyTokens.HueNeutral800,
+            },
 
-        [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: {
-          "& > *:nth-of-type(1)": {
-            fontSize: `${theme.typography.ui.lineHeight}em`,
-          },
-        },
-      }),
+            "&:disabled": {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              color: odysseyTokens.TypographyColorDisabled,
+            },
+          }),
 
-      endIcon: ({ theme, ownerState }) => ({
-        display: "inline-flex",
-        margin: 0,
-        marginInlineStart: theme.spacing(2),
+          ...(ownerState.variant === "danger" && {
+            backgroundColor: odysseyTokens.PaletteDangerMain,
+            color: odysseyTokens.HueNeutralWhite,
 
-        ...(ownerState.children === undefined && {
-          marginInlineStart: 0,
+            "&:hover": {
+              backgroundColor: odysseyTokens.PaletteDangerDark,
+            },
+
+            "&:focus-visible": {
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`,
+            },
+
+            "&:active": {
+              backgroundColor: odysseyTokens.PaletteDangerDarker,
+            },
+
+            "&:disabled": {
+              color: odysseyTokens.PaletteDangerLight,
+              backgroundColor: odysseyTokens.HueRed100,
+            },
+          }),
+          ...(ownerState.variant === "floating" && {
+            backgroundColor: "transparent",
+            color: odysseyTokens.TypographyColorBody,
+
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral100,
+            },
+
+            "&:active": {
+              backgroundColor: odysseyTokens.HueNeutral200,
+            },
+
+            "&:disabled": {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorDisabled,
+            },
+          }),
+          ...(ownerState.size === "small" && {
+            paddingBlock: odysseyTokens.Spacing2,
+            paddingInline: odysseyTokens.Spacing3,
+            fontSize: odysseyTokens.TypographySizeBody,
+          }),
+          ...(ownerState.size === "large" && {
+            paddingBlock: odysseyTokens.Spacing4,
+            paddingInline: odysseyTokens.Spacing4,
+          }),
+          ...(ownerState.fullWidth === true && {
+            display: "block",
+            width: "100%",
+            marginBlock: "0",
+            marginInline: "0",
+
+            "&:not(:last-child)": {
+              marginBlockEnd: odysseyTokens.Spacing4,
+            },
+          }),
+          ...(ownerState.children === "" && {
+            minWidth: "auto",
+            padding: odysseyTokens.Spacing3,
+
+            [`.${buttonClasses.endIcon}, .${buttonClasses.startIcon}`]: {
+              margin: "0",
+            },
+
+            ...(ownerState.size === "small" && {
+              padding: odysseyTokens.Spacing2,
+            }),
+          }),
         }),
-      }),
 
-      startIcon: ({ theme, ownerState }) => ({
-        display: "inline-flex",
-        margin: 0,
-        marginInlineEnd: theme.spacing(2),
+        endIcon: ({ ownerState }) => ({
+          display: "inline-flex",
+          margin: 0,
+          marginInlineStart: odysseyTokens.Spacing2,
 
-        ...(ownerState.children === undefined && {
-          marginInlineEnd: 0,
+          ...(ownerState.children === undefined && {
+            marginInlineStart: 0,
+          }),
         }),
-      }),
-    },
-  },
-  MuiButtonBase: {
-    defaultProps: {
-      disableRipple: true,
+
+        startIcon: ({ ownerState }) => ({
+          display: "inline-flex",
+          margin: 0,
+          marginInlineEnd: odysseyTokens.Spacing2,
+
+          ...(ownerState.children === undefined && {
+            marginInlineEnd: 0,
+          }),
+        }),
+      },
     },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      size: "small",
-      icon: <></>,
-      checkedIcon: <CheckIcon />,
-      indeterminateIcon: <SubtractIcon />,
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+      },
     },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        width: `${theme.typography.ui.lineHeight}em`,
-        height: `${theme.typography.ui.lineHeight}em`,
-        borderRadius: theme.mixins.borderRadius,
-        borderWidth: theme.mixins.borderWidth,
-        borderStyle: theme.mixins.borderStyle,
-        borderColor: theme.palette.grey[500],
-        padding: 0,
-        boxShadow: `0 0 0 0 transparent`,
-        transition: theme.transitions.create(
-          ["border-color", "background-color", "box-shadow"],
-          {
-            duration: theme.transitions.duration.short,
-          }
-        ),
-
-        ".MuiSvgIcon-root": {
-          color: theme.palette.common.white,
-          transition: theme.transitions.create(["color"], {
-            duration: theme.transitions.duration.short,
-          }),
-        },
-
-        "&.Mui-checked": {
-          backgroundColor: theme.palette.primary.main,
-          borderColor: theme.palette.primary.main,
+    MuiCheckbox: {
+      defaultProps: {
+        size: "small",
+        icon: <></>,
+        checkedIcon: <CheckIcon />,
+        indeterminateIcon: <SubtractIcon />,
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          width: `${odysseyTokens.TypographyLineHeightUi}em`,
+          height: `${odysseyTokens.TypographyLineHeightUi}em`,
+          borderRadius: odysseyTokens.BorderRadiusTight,
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderColor: odysseyTokens.HueNeutral500,
+          padding: 0,
+          boxShadow: `0 0 0 0 transparent`,
+          transition: theme.transitions.create(
+            ["border-color", "background-color", "box-shadow"],
+            {
+              duration: odysseyTokens.TransitionDurationMain,
+            }
+          ),
 
-          ".MuiFormControlLabel-root:hover > &": {
-            backgroundColor: theme.palette.primary.dark,
-            borderColor: theme.palette.primary.dark,
+          [`.${svgIconClasses.root}`]: {
+            color: odysseyTokens.HueNeutralWhite,
+            transition: theme.transitions.create(["color"], {
+              duration: odysseyTokens.TransitionDurationMain,
+            }),
           },
-        },
-
-        ".MuiFormControlLabel-root:hover > &": {
-          backgroundColor: "transparent",
-          borderColor: theme.palette.grey[900],
-        },
-        ".Mui-error:not(.Mui-valid):hover > &": {
-          borderColor: theme.palette.error.dark,
 
           "&.Mui-checked": {
-            backgroundColor: theme.palette.error.dark,
-            borderColor: theme.palette.error.dark,
-          },
-        },
-        ".Mui-error:not(.Mui-valid) > &": {
-          borderColor: theme.palette.error.main,
+            backgroundColor: odysseyTokens.PalettePrimaryMain,
+            borderColor: odysseyTokens.PalettePrimaryMain,
 
-          "&.Mui-checked": {
-            backgroundColor: theme.palette.error.main,
-            borderColor: theme.palette.error.main,
+            [`.${formControlLabelClasses.root}:hover > &`]: {
+              backgroundColor: odysseyTokens.PalettePrimaryDark,
+              borderColor: odysseyTokens.PalettePrimaryDark,
+            },
           },
 
-          "&.Mui-focusVisible": {
-            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`,
+          [`.${formControlLabelClasses.root}:hover > &`]: {
+            backgroundColor: "transparent",
+            borderColor: odysseyTokens.HueNeutral900,
           },
-        },
-        "&.Mui-focusVisible": {
-          borderColor: theme.palette.grey[900],
-          boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
-          outline: "2px solid transparent",
-          outlineOffset: "1px",
-        },
-        "&.Mui-disabled": {
-          backgroundColor: theme.palette.grey[50],
-          borderColor: theme.palette.grey[300],
+          ".Mui-error:not(.Mui-valid):hover > &": {
+            borderColor: odysseyTokens.BorderColorDangerDark,
 
+            "&.Mui-checked": {
+              backgroundColor: odysseyTokens.PaletteDangerDark,
+              borderColor: odysseyTokens.BorderColorDangerDark,
+            },
+          },
           ".Mui-error:not(.Mui-valid) > &": {
-            backgroundColor: theme.palette.grey[50],
-            borderColor: theme.palette.grey[300],
+            borderColor: odysseyTokens.BorderColorDangerControl,
+
+            "&.Mui-checked": {
+              backgroundColor: odysseyTokens.PaletteDangerMain,
+              borderColor: odysseyTokens.BorderColorDangerControl,
+            },
+
+            "&.Mui-focusVisible": {
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`,
+            },
           },
+          "&.Mui-focusVisible": {
+            borderColor: odysseyTokens.HueNeutral900,
+            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+            outline: "2px solid transparent",
+            outlineOffset: "1px",
+          },
+          "&.Mui-disabled": {
+            backgroundColor: odysseyTokens.HueNeutral50,
+            borderColor: odysseyTokens.HueNeutral300,
+
+            ".Mui-error:not(.Mui-valid) > &": {
+              backgroundColor: odysseyTokens.HueNeutral50,
+              borderColor: odysseyTokens.HueNeutral300,
+            },
 
-          ".MuiSvgIcon-root": {
-            color: theme.palette.common.black,
+            [`.${svgIconClasses.root}`]: {
+              color: odysseyTokens.HueNeutral900,
+            },
           },
-        },
-      }),
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      deleteIcon: <CloseCircleFilledIcon />,
-    },
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        height: "auto",
-        paddingBlock: theme.spacing(2),
-        paddingInline: theme.spacing(3),
-        fontSize: theme.typography.body1.fontSize,
-        lineHeight: theme.typography.ui.lineHeight,
-        borderRadius: "1.5em",
-        backgroundColor: theme.palette.grey[100],
-
-        ...(ownerState.onDelete && {
-          paddingInlineEnd: theme.spacing(2),
         }),
+      },
+    },
+    MuiChip: {
+      defaultProps: {
+        deleteIcon: <CloseCircleFilledIcon />,
+      },
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          height: "auto",
+          paddingBlock: `calc(${odysseyTokens.Spacing2} - ${odysseyTokens.BorderWidthMain})`,
+          paddingInline: odysseyTokens.Spacing3,
+          fontSize: odysseyTokens.TypographySizeBody,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          borderRadius: odysseyTokens.BorderRadiusRound,
+          backgroundColor: odysseyTokens.HueNeutral100,
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderColor: odysseyTokens.HueNeutral200,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          color: odysseyTokens.HueNeutral700,
+
+          ...(ownerState.onDelete && {
+            paddingInlineEnd: odysseyTokens.Spacing2,
+          }),
 
-        [`&.${chipClasses.disabled}`]: {
-          opacity: 1,
-          pointerEvents: "none",
-          backgroundColor: theme.palette.grey[50],
-          color: theme.palette.text.secondary,
-        },
-
-        ...(ownerState.clickable && {
-          "&:hover": {
-            backgroundColor: theme.palette.grey[200],
-          },
-          [`&.${chipClasses.focusVisible}`]: {
-            backgroundColor: theme.palette.grey[200],
-            outlineColor: theme.palette.primary.main,
-            outlineOffset: "2px",
-            outlineStyle: "solid",
-            outlineWidth: "2px",
-          },
-          "&:active": {
-            boxShadow: "none",
-            backgroundColor: theme.palette.grey[300],
+          [`&.${chipClasses.disabled}`]: {
+            opacity: 1,
+            pointerEvents: "none",
+            backgroundColor: odysseyTokens.HueNeutral50,
+            color: odysseyTokens.TypographyColorDisabled,
           },
-        }),
 
-        ...(ownerState.variant === "status" && {
-          paddingBlock: 0,
-          paddingInline: 0,
-          borderRadius: 0,
-          backgroundColor: "transparent",
-          color: theme.palette.text.primary,
+          ...(ownerState.clickable && {
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral200,
+            },
+            [`&.${chipClasses.focusVisible}`]: {
+              backgroundColor: odysseyTokens.HueNeutral200,
+              outlineColor: odysseyTokens.FocusOutlineColorPrimary,
+              outlineOffset: odysseyTokens.FocusOutlineOffsetTight,
+              outlineStyle: odysseyTokens.FocusOutlineStyle,
+              outlineWidth: odysseyTokens.FocusOutlineWidthMain,
+            },
+            "&:active": {
+              boxShadow: "none",
+              backgroundColor: odysseyTokens.HueNeutral300,
+            },
+          }),
 
-          "&::before": {
-            content: "''",
-            width: ".57em",
-            height: ".57em",
-            marginInlineEnd: theme.spacing(2),
-            borderRadius: "100%",
-            backgroundColor: theme.palette.text.secondary,
+          [`& .${chipClasses.icon}`]: {
+            margin: 0,
+            marginInlineEnd: odysseyTokens.Spacing1,
           },
 
-          [`&.${chipClasses.colorError}`]: {
+          ...(ownerState.variant === "lamp" && {
+            paddingBlock: 0,
+            paddingInline: 0,
+            borderRadius: 0,
+            border: 0,
+            backgroundColor: "transparent",
+            color: odysseyTokens.TypographyColorBody,
+
             "&::before": {
-              backgroundColor: theme.palette.error.main,
+              content: "''",
+              width: ".64em",
+              height: ".64em",
+              marginInlineEnd: odysseyTokens.Spacing2,
+              borderRadius: "100%",
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.TypographyColorBody,
+              borderWidth: odysseyTokens.BorderWidthHeavy,
+              borderStyle: odysseyTokens.BorderStyleMain,
             },
-          },
 
-          [`&.${chipClasses.colorSuccess}`]: {
-            "&::before": {
-              backgroundColor: theme.palette.success.main,
+            [`&.${chipClasses.colorError}`]: {
+              "&::before": {
+                border: 0,
+                backgroundColor: odysseyTokens.PaletteDangerMain,
+              },
             },
-          },
 
-          [`&.${chipClasses.colorWarning}`]: {
+            [`&.${chipClasses.colorSuccess}`]: {
+              "&::before": {
+                border: 0,
+                backgroundColor: odysseyTokens.PaletteSuccessMain,
+              },
+            },
+
+            [`&.${chipClasses.colorWarning}`]: {
+              "&::before": {
+                border: 0,
+                backgroundColor: odysseyTokens.HueYellow200,
+              },
+            },
+          }),
+
+          ...(ownerState.variant === "pill" && {
+            paddingBlock: odysseyTokens.Spacing1,
+            paddingInline: odysseyTokens.Spacing2,
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            border: 0,
+            fontWeight: odysseyTokens.TypographyWeightHeadingBold,
+            lineHeight: odysseyTokens.TypographyLineHeightOverline,
+            backgroundColor: odysseyTokens.HueNeutral50,
+            color: odysseyTokens.TypographyColorSubordinate,
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+
             "&::before": {
-              backgroundColor: theme.palette.warning.main,
+              content: "''",
+              width: ".64em",
+              height: ".64em",
+              marginInlineEnd: odysseyTokens.Spacing1,
+              borderRadius: "100%",
+              backgroundColor: odysseyTokens.HueNeutral600,
+            },
+
+            [`&.${chipClasses.colorError}`]: {
+              backgroundColor: odysseyTokens.PaletteDangerLighter,
+              color: odysseyTokens.TypographyColorDanger,
+
+              "&::before": {
+                backgroundColor: odysseyTokens.PaletteDangerMain,
+              },
+            },
+
+            [`&.${chipClasses.colorSuccess}`]: {
+              backgroundColor: odysseyTokens.PaletteSuccessLighter,
+              color: odysseyTokens.TypographyColorSuccess,
+
+              "&::before": {
+                backgroundColor: odysseyTokens.PaletteSuccessMain,
+              },
             },
+
+            [`&.${chipClasses.colorWarning}`]: {
+              backgroundColor: odysseyTokens.PaletteWarningLighter,
+              color: odysseyTokens.TypographyColorWarning,
+
+              "&::before": {
+                backgroundColor: odysseyTokens.HueYellow200,
+              },
+            },
+          }),
+
+          [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+            backgroundColor: odysseyTokens.HueNeutral200,
           },
         }),
 
-        [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
-          backgroundColor: theme.palette.grey[200],
+        label: {
+          padding: 0,
         },
-      }),
-
-      label: {
-        padding: 0,
-      },
 
-      deleteIcon: ({ theme }) => ({
-        WebkitTapHighlightColor: "transparent",
-        color: theme.palette.text.secondary,
-        fontSize: "1em",
-        cursor: "pointer",
-        margin: "0",
-        marginInlineStart: theme.spacing(2),
+        deleteIcon: {
+          WebkitTapHighlightColor: "transparent",
+          color: odysseyTokens.HueNeutral500,
+          fontSize: "1em",
+          cursor: "pointer",
+          margin: "0",
+          marginInlineStart: odysseyTokens.Spacing2,
 
-        "&:hover": {
-          color: theme.palette.text.primary,
-        },
+          "&:hover": {
+            color: odysseyTokens.HueNeutral600,
+          },
 
-        [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
-          display: "none",
+          [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+            display: "none",
+          },
         },
-      }),
-    },
-  },
-  MuiCircularProgress: {
-    defaultProps: {
-      // TODO: defaultProps cannot take a theme object; matches theme.typography.ui.lineHeight
-      size: "1.14285714rem",
-      thickness: 8,
-      color: "primary",
-      disableShrink: false,
-      variant: "indeterminate",
+      },
     },
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        ...(ownerState.color !== "inherit" && {
-          color: theme.palette.primary.dark,
+    MuiCircularProgress: {
+      defaultProps: {
+        size: odysseyTokens.TypographyScale2,
+        thickness: 8,
+        color: "primary",
+        disableShrink: false,
+        variant: "indeterminate",
+      },
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          ...(ownerState.color !== "inherit" && {
+            color: odysseyTokens.PalettePrimaryDark,
+          }),
         }),
-      }),
-      circle: ({ ownerState }) => ({
-        ...(ownerState.variant === "indeterminate" && {
-          strokeDasharray: "160%, 360%",
+        circle: ({ ownerState }) => ({
+          ...(ownerState.variant === "indeterminate" && {
+            strokeDasharray: "160%, 360%",
+          }),
         }),
-      }),
+      },
     },
-  },
-  MuiCssBaseline: {
-    styleOverrides: (themeParam) => `
+    MuiCssBaseline: {
+      styleOverrides: (themeParam) => `
       html {
         font-size: calc((${themeParam.typography.fontSize} / 16) * 100%);
       }
     `,
-  },
-  MuiScopedCssBaseline: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        abbr: {
-          borderBottomWidth: "1px",
-          borderBottomStyle: "dashed",
-          borderBottomColor: theme.palette.primary.dark,
-          textDecoration: "none",
-        },
-
-        address: {
-          maxWidth: theme.mixins.maxWidth,
-          marginBlockStart: 0,
-          marginBlockEnd: theme.spacing(4),
-          marginInline: 0,
-
-          "&:last-child": {
-            marginBlockEnd: 0,
+    },
+    MuiScopedCssBaseline: {
+      styleOverrides: {
+        root: {
+          abbr: {
+            borderBottomWidth: odysseyTokens.BorderWidthMain,
+            borderBottomStyle: "dashed", // Token?
+            borderBottomColor: odysseyTokens.HueNeutral700,
+            textDecoration: "none",
+          },
+
+          address: {
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            marginInline: 0,
+            fontStyle: "normal",
+
+            "&:last-child": {
+              marginBlockEnd: 0,
+            },
           },
-        },
-
-        blockquote: {
-          maxWidth: theme.mixins.maxWidth,
-          marginBlockStart: 0,
-          marginBlockEnd: theme.spacing(4),
-          marginInline: 0,
-          paddingBlock: 0,
-          paddingInlineStart: theme.spacing(2),
-          paddingInlineEnd: 0,
-          borderInlineStartWidth: "3px",
-          borderInlineStartStyle: "solid",
-          borderInlineStartColor: theme.palette.grey[200],
 
-          "&:last-child": {
-            marginBlockEnd: 0,
+          blockquote: {
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            marginInline: 0,
+            paddingBlock: 0,
+            paddingInlineStart: odysseyTokens.Spacing4,
+            paddingInlineEnd: 0,
+            borderInlineStartWidth: "3px", // Token?
+            borderInlineStartStyle: odysseyTokens.BorderStyleMain,
+            borderInlineStartColor: odysseyTokens.HueNeutral200,
+
+            "&:last-child": {
+              marginBlockEnd: 0,
+            },
           },
-        },
-
-        cite: {
-          fontStyle: "italic",
-        },
 
-        code: {
-          fontFamily:
-            "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace",
-        },
+          cite: {
+            fontStyle: "normal",
+          },
+
+          code: {
+            fontFamily: odysseyTokens.TypographyFamilyMono,
+            display: "inline-block",
+            minWidth: `calc(${odysseyTokens.TypographySizeSubordinate} * ${odysseyTokens.TypographyLineHeightHeading5})`,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            borderColor: odysseyTokens.BorderColorDisplay,
+            backgroundColor: odysseyTokens.HueNeutral50,
+            padding: `calc(${odysseyTokens.Spacing1} / 2) ${odysseyTokens.Spacing1}`,
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: odysseyTokens.TypographyLineHeightHeading5,
+          },
+
+          del: {
+            display: "inline-block",
+            backgroundColor: odysseyTokens.PaletteDangerHighlight,
+
+            "&::before, &::after": {
+              clip: "rect(0 0 0 0)",
+              clipPath: "inset(50%)",
+              height: "1px",
+              overflow: "hidden",
+              position: "absolute",
+              whiteSpace: "nowrap",
+              width: "1px",
+            },
 
-        del: {
-          display: "inline-block",
-          backgroundColor: theme.palette.error.light,
+            "&::before": {
+              content: "attr(data-a11y-start)",
+            },
 
-          "&::before, &::after": {
-            clip: "rect(0 0 0 0)",
-            clipPath: "inset(50%)",
-            height: "1px",
-            overflow: "hidden",
-            position: "absolute",
-            whiteSpace: "nowrap",
-            width: "1px",
+            "&::after": {
+              content: "attr(data-a11y-end)",
+            },
           },
 
-          "&::before": {
-            content: "attr(data-a11y-start)",
+          details: {
+            fontSize: odysseyTokens.TypographySizeBody,
           },
 
-          "&::after": {
-            content: "attr(data-a11y-end)",
+          dfn: {
+            fontStyle: "italic",
           },
-        },
 
-        details: {
-          fontSize: theme.typography.body1.fontSize,
-        },
+          dl: {
+            display: "grid",
+            gridGap: `${odysseyTokens.Spacing2} ${odysseyTokens.Spacing4}`,
+            gridTemplateColumns: "repeat(2, minmax(min-content, max-content))",
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            marginInline: 0,
+            padding: 0,
 
-        dfn: {
-          fontStyle: "italic",
-        },
+            "&:last-child": {
+              marginBlockEnd: 0,
+            },
 
-        dl: {
-          display: "grid",
-          gridGap: `${theme.spacing(2)} ${theme.spacing(4)}`,
-          gridTemplateColumns: "repeat(2, minmax(min-content, max-content))",
-          maxWidth: theme.mixins.maxWidth,
-          marginBlockStart: 0,
-          marginBlockEnd: theme.spacing(4),
-          marginInline: 0,
-          padding: 0,
+            dt: {
+              gridColumn: 1,
+              fontWeight: odysseyTokens.TypographyWeightBodyBold,
+            },
 
-          "&:last-child": {
-            marginBlockEnd: 0,
+            dd: {
+              gridColumn: 2,
+              marginInlineStart: odysseyTokens.Spacing0,
+              fontWeight: 400,
+            },
           },
 
-          dt: {
-            gridColumn: 1,
-            fontWeight: 600,
-          },
+          em: {
+            fontStyle: "italic",
 
-          dd: {
-            gridColumn: 2,
-            fontWeight: 400,
+            "& > em": {
+              textDecoration: "underline",
+            },
           },
-        },
 
-        em: {
-          fontStyle: "italic",
+          figure: {
+            display: "grid",
+            gridGap: odysseyTokens.Spacing2,
+            gridTemplateColumns: "minmax(min-content, max-content)",
+            justifyContent: "start",
+            justifyItems: "start",
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            marginInline: 0,
 
-          "& > em": {
-            textDecoration: "underline",
+            "&:last-child": {
+              marginBlockEnd: 0,
+            },
           },
-        },
 
-        figure: {
-          display: "grid",
-          gridGap: theme.spacing(2),
-          gridTemplateColumns: "minmax(min-content, max-content)",
-          justifyContent: "start",
-          justifyItems: "start",
-          marginBlockStart: 0,
-          marginBlockEnd: theme.spacing(4),
-          marginInline: 0,
+          "figcaption:not([class])": {
+            color: odysseyTokens.TypographyColorSubordinate,
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+          },
 
-          "&:last-child": {
-            marginBlockEnd: 0,
+          hr: {
+            marginBlock: odysseyTokens.Spacing2,
+            marginInline: 0,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderColor: odysseyTokens.HueNeutral200,
           },
-        },
 
-        "figcaption:not([class])": {
-          color: theme.palette.text.secondary,
-          fontSize: theme.typography.body1.fontSize,
-        },
+          ins: {
+            display: "inline-block",
+            backgroundColor: odysseyTokens.PaletteSuccessHighlight,
 
-        hr: {
-          marginBlock: theme.spacing(2),
-          marginInline: 0,
-          borderWidth: "1px",
-          borderStyle: "solid",
-          borderColor: theme.palette.grey[200],
-        },
+            "&::before, &::after": {
+              clip: "rect(0 0 0 0)",
+              clipPath: "inset(50%)",
+              height: "1px",
+              overflow: "hidden",
+              position: "absolute",
+              whiteSpace: "nowrap",
+              width: "1px",
+            },
 
-        ins: {
-          display: "inline-block",
-          backgroundColor: theme.palette.success.light,
+            "&::before": {
+              content: "attr(data-a11y-start)",
+            },
 
-          "&::before, &::after": {
-            clip: "rect(0 0 0 0)",
-            clipPath: "inset(50%)",
-            height: "1px",
-            overflow: "hidden",
-            position: "absolute",
-            whiteSpace: "nowrap",
-            width: "1px",
+            "&::after": {
+              content: "attr(data-a11y-end)",
+            },
           },
 
-          "&::before": {
-            content: "attr(data-a11y-start)",
-          },
+          kbd: {
+            display: "inline-block",
+            minWidth: `calc(${odysseyTokens.TypographySizeSubordinate} * ${odysseyTokens.TypographyLineHeightHeading5})`,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            borderColor: odysseyTokens.HueNeutral200,
+            backgroundColor: odysseyTokens.HueNeutral50,
+            padding: `calc(${odysseyTokens.Spacing1} / 2) ${odysseyTokens.Spacing1}`,
+            fontFamily:
+              "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace",
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            fontWeight: odysseyTokens.Spacing5,
+            lineHeight: odysseyTokens.TypographyLineHeightHeading5,
+            boxShadow: `0 1px 1px 0 hsla(240, 6%, 12%, 0.05)`,
+          },
+
+          mark: {
+            backgroundColor: odysseyTokens.PaletteWarningHighlight,
+
+            "&::before, &::after": {
+              clip: "rect(0 0 0 0)",
+              clipPath: "inset(50%)",
+              height: "1px",
+              overflow: "hidden",
+              position: "absolute",
+              whiteSpace: "nowrap",
+              width: "1px",
+            },
 
-          "&::after": {
-            content: "attr(data-a11y-end)",
-          },
-        },
+            "&::before": {
+              content: "attr(data-a11y-start)",
+            },
 
-        kbd: {
-          display: "inline-block",
-          minWidth: `calc(${theme.typography.subtitle1.fontSize} * ${theme.typography.h5.lineHeight})`,
-          borderStyle: theme.mixins.borderStyle,
-          borderWidth: theme.mixins.borderWidth,
-          borderRadius: theme.mixins.borderRadius,
-          borderColor: theme.palette.grey[200],
-          backgroundColor: theme.palette.grey[50],
-          padding: `calc(${theme.spacing(1)} / 2) ${theme.spacing(1)}`,
-          fontFamily:
-            "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace",
-          fontSize: theme.typography.subtitle1.fontSize,
-          fontWeight: theme.typography.fontWeightRegular,
-          lineHeight: theme.typography.h5.lineHeight,
-          boxShadow: `0 1px 1px 0 hsla(240, 6%, 12%, 0.05)`,
-        },
+            "&::after": {
+              content: "attr(data-a11y-end)",
+            },
+          },
 
-        mark: {
-          backgroundColor: theme.palette.warning.light,
+          "p:not([class])": {
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4, // Token?
 
-          "&::before, &::after": {
-            clip: "rect(0 0 0 0)",
-            clipPath: "inset(50%)",
-            height: "1px",
-            overflow: "hidden",
-            position: "absolute",
-            whiteSpace: "nowrap",
-            width: "1px",
+            "&:last-child": {
+              marginBlockEnd: 0,
+            },
           },
 
-          "&::before": {
-            content: "attr(data-a11y-start)",
+          pre: {
+            marginInline: 0,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            fontFamily: odysseyTokens.TypographyFamilyMono,
+            whiteSpace: "pre-wrap",
+            tabSize: 2,
+
+            "&:last-child": {
+              marginBlockEnd: 0,
+            },
           },
 
-          "&::after": {
-            content: "attr(data-a11y-end)",
+          ul: {
+            [`&.${stackClasses.root}`]: {
+              padding: 0,
+              margin: 0,
+            },
           },
-        },
 
-        "p:not([class])": {
-          maxWidth: theme.mixins.maxWidth,
-          marginBlockStart: 0,
-          marginBlockEnd: theme.spacing(4),
+          "ul:not([class]), ol:not([class])": {
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            // Unique padding to get desire appearance with "outside" position
+            paddingInlineStart: "2ch",
 
-          "&:last-child": {
-            marginBlockEnd: 0,
+            ol: {
+              listStyleType: "lower-alpha",
+
+              ol: {
+                listStyleType: "lower-roman",
+              },
+            },
+
+            "&:last-child": {
+              marginBlockEnd: 0,
+            },
           },
-        },
 
-        pre: {
-          marginInline: 0,
-          marginBlockStart: 0,
-          marginBlockEnd: theme.spacing(4),
-          fontFamily:
-            "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace",
-          whiteSpace: "pre-wrap",
-          tabSize: 2,
+          "li:not([class])": {
+            marginBlockEnd: odysseyTokens.Spacing2,
+            paddingInlineStart: odysseyTokens.Spacing1,
 
-          "&:last-child": {
-            marginBlockEnd: 0,
+            "ul, ol": {
+              marginBlockStart: odysseyTokens.Spacing2,
+              marginInlineStart: `calc(${odysseyTokens.Spacing6} - 2ch)`,
+            },
           },
-        },
 
-        "ul:not([class]), ol:not([class])": {
-          maxWidth: theme.mixins.maxWidth,
-          marginBlockStart: 0,
-          marginBlockEnd: theme.spacing(4),
-          // Unique padding to get desire appearance with "outside" position
-          paddingInlineStart: "2ch",
+          q: {
+            quotes: `'"' '"' "'" "'"`,
 
-          ol: {
-            listStyleType: "lower-alpha",
+            "&::before": {
+              content: "open-quote",
+            },
 
-            ol: {
-              listStyleType: "lower-roman",
+            "&::after": {
+              content: "close-quote",
             },
           },
 
-          "&:last-child": {
-            marginBlockEnd: 0,
+          s: {
+            textDecoration: "line-through",
           },
-        },
 
-        "li:not([class])": {
-          marginBlockEnd: theme.spacing(2),
-          paddingInlineStart: theme.spacing(1),
+          samp: {
+            padding: "0 0.5ch",
+            backgroundColor: odysseyTokens.HueNeutral100,
+            boxShadow: `0 1px 0 ${odysseyTokens.HueNeutral50}`,
+            fontSize: odysseyTokens.TypographySizeBody,
 
-          "ul, ol": {
-            marginBlockStart: theme.spacing(2),
-            marginInlineStart: `calc(${theme.spacing(6)} - 2ch)`,
+            kbd: {
+              background: odysseyTokens.HueNeutralWhite,
+            },
           },
-        },
-
-        q: {
-          quotes: `'"' '"' "'" "'"`,
 
-          "&::before": {
-            content: "open-quote",
+          small: {
+            fontSize: odysseyTokens.TypographySizeSubordinate,
           },
 
-          "&::after": {
-            content: "close-quote",
+          strong: {
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
           },
-        },
 
-        s: {
-          textDecoration: "line-through",
-        },
-
-        samp: {
-          padding: "0 0.5ch",
-          backgroundColor: theme.palette.grey[50],
-          boxShadow: `0 1px 0 ${theme.palette.grey[50]}`,
-          fontSize: theme.typography.body1.fontSize,
-
-          kbd: {
-            background: theme.palette.common.white,
+          sub: {
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: 1,
+            verticalAlign: "sub",
           },
-        },
 
-        small: {
-          fontSize: theme.typography.caption.fontSize,
-        },
+          summary: {
+            marginBlockEnd: odysseyTokens.Spacing2,
+            fontSize: odysseyTokens.TypographySizeBody,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
+            cursor: "default",
 
-        sub: {
-          fontSize: theme.typography.caption.fontSize,
-          lineHeight: 1,
-          verticalAlign: "sub",
-        },
+            "&:focus-visible": {
+              outlineColor: odysseyTokens.FocusOutlineColorPrimary,
+              outlineOffset: odysseyTokens.FocusOutlineOffsetMain,
+              outlineStyle: odysseyTokens.FocusOutlineStyle,
+              outlineWidth: odysseyTokens.FocusOutlineWidthMain,
+            },
+          },
 
-        summary: {
-          fontSize: theme.typography.body1.fontSize,
-          fontWeight: theme.typography.fontWeightBold,
-          cursor: "default",
+          sup: {
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: 1,
+            verticalAlign: "super",
+          },
 
-          "&:focus-visible": {
-            outlineColor: theme.palette.primary.main,
-            outlineOffset: "2px",
-            outlineStyle: "solid",
-            outlineWidth: "2px",
+          var: {
+            fontStyle: "italic",
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
           },
         },
-
-        sup: {
-          fontSize: theme.typography.caption.fontSize,
-          lineHeight: 1,
-          verticalAlign: "super",
+      },
+    },
+    MuiDialog: {
+      defaultProps: {
+        scroll: "paper",
+      },
+      styleOverrides: {
+        paper: {
+          maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} + (${odysseyTokens.Spacing6} * 2))`,
+          borderRadius: odysseyTokens.BorderRadiusOuter,
+          boxShadow: "none",
+          filter:
+            "drop-shadow(0px 1px 4px rgba(29, 29, 33, 0.08)) drop-shadow(0px 4px 10px rgba(29, 29, 33, 0.08)) drop-shadow(0px 8px 30px rgba(29, 29, 33, 0.1))",
         },
+      },
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          flexWrap: "wrap",
+          gap: odysseyTokens.Spacing2,
+          paddingBlockStart: odysseyTokens.Spacing6,
+          paddingBlockEnd: odysseyTokens.Spacing6,
+          paddingInline: odysseyTokens.Spacing6,
 
-        var: {
-          fontStyle: "italic",
-          fontWeight: theme.typography.fontWeightBold,
+          "& > .${ buttonClasses.root }": {
+            margin: "0 !important",
+          },
         },
-      }),
-    },
-  },
-  MuiDialog: {
-    defaultProps: {
-      scroll: "paper",
-    },
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        maxWidth: `calc(${theme.mixins.maxWidth} + (${theme.spacing(6)} * 2))`,
-        boxShadow: "none",
-        filter:
-          "drop-shadow(0px 1px 4px rgba(29, 29, 33, 0.08)) drop-shadow(0px 4px 10px rgba(29, 29, 33, 0.08)) drop-shadow(0px 8px 30px rgba(29, 29, 33, 0.1))",
-      }),
-    },
-  },
-  MuiDialogActions: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        paddingBlockStart: theme.spacing(4),
-        paddingBlockEnd: theme.spacing(6),
-        paddingInline: theme.spacing(6),
-      }),
+      },
     },
-  },
-  MuiDialogContent: {
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        padding: 0,
-        paddingBlock: theme.spacing(4),
-        paddingInline: theme.spacing(6),
-
-        "&:last-child": {
-          paddingBlockEnd: theme.spacing(6),
-        },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          paddingBlock: 0,
+          paddingInline: odysseyTokens.Spacing6,
+
+          ...(ownerState.dividers === true && {
+            paddingBlock: odysseyTokens.Spacing6,
+            color: odysseyTokens.HueNeutral600,
+          }),
 
-        ...(ownerState.dividers === false && {
-          [`& + .${dialogActionsClasses.root}`]: {
-            paddingBlockStart: theme.spacing(4),
+          ["&:last-child"]: {
+            paddingBlockEnd: odysseyTokens.Spacing6,
           },
         }),
-      }),
-    },
-  },
-  MuiDialogContentText: {
-    defaultProps: {
-      color: "text.primary",
+      },
     },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        marginBlockEnd: theme.spacing(5),
+    MuiDialogContentText: {
+      styleOverrides: {
+        root: {
+          marginBlockEnd: odysseyTokens.Spacing5,
+          color: odysseyTokens.HueNeutral700,
 
-        "&:last-child": {
-          marginBlockEnd: "0",
-        },
-      }),
-    },
-  },
-  MuiDialogTitle: {
-    defaultProps: {
-      component: "h1",
-      variant: "h5",
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        marginBlockEnd: 0,
-        padding: 0,
-        paddingBlockStart: theme.spacing(5),
-        paddingBlockEnd: theme.spacing(4),
-        paddingInline: theme.spacing(6),
-      }),
-    },
-  },
-  MuiFormControl: {
-    defaultProps: {
-      margin: "normal",
-    },
-    styleOverrides: {
-      root: ({ ownerState, theme }) => ({
-        width: "100%",
-        maxWidth: "32rem",
-        ...(ownerState.margin === "normal" && {
-          marginTop: 0,
-          marginBottom: theme.spacing(5),
           "&:last-child": {
-            marginBottom: 0,
+            marginBlockEnd: "0",
           },
-        }),
-        ...(ownerState.margin === "dense" && {
-          marginTop: 0,
-          marginBottom: theme.spacing(5),
-          "&:last-child": {
-            marginBottom: 0,
+        },
+      },
+    },
+    MuiDialogTitle: {
+      defaultProps: {
+        component: "h1",
+        variant: "h5",
+      },
+      styleOverrides: {
+        root: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBlockEnd: 0,
+          padding: 0,
+          paddingBlockStart: odysseyTokens.Spacing5,
+          paddingBlockEnd: odysseyTokens.Spacing4,
+          paddingInline: odysseyTokens.Spacing6,
+          fontFamily: odysseyTokens.TypographyFamilyHeading,
+
+          [`.${buttonClasses.root}`]: {
+            // Pull close button by inline padding amount
+            marginInlineEnd: `-${odysseyTokens.Spacing3}`,
           },
-        }),
-        ...(ownerState.fullWidth && {
-          maxWidth: "100%",
-        }),
-      }),
+        },
+      },
     },
-  },
-  MuiFormControlLabel: {
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        marginInlineStart: 0,
-        marginInlineEnd: 0, // used for row presentation of radio/checkbox
-        ...(ownerState.labelPlacement === "start" && {
-          marginInlineStart: 0, // used for row presentation of radio/checkbox
-          marginInlineEnd: 0,
-        }),
-        ...(ownerState.labelPlacement === "top" && {
-          marginInlineStart: 0,
+    MuiFormControl: {
+      defaultProps: {
+        margin: "normal",
+      },
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          width: "100%",
+          maxWidth: odysseyTokens.TypographyLineLengthMax,
+          ...(ownerState.margin === "normal" && {
+            marginTop: 0,
+            marginBottom: odysseyTokens.Spacing4,
+            "&:last-child": {
+              marginBottom: 0,
+            },
+          }),
+          ...(ownerState.margin === "dense" && {
+            marginTop: 0,
+            marginBottom: odysseyTokens.Spacing5,
+            "&:last-child": {
+              marginBottom: 0,
+            },
+          }),
+          ...(ownerState.fullWidth && {
+            maxWidth: "100%",
+          }),
         }),
-        ...(ownerState.labelPlacement === "bottom" && {
+      },
+    },
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          gap: odysseyTokens.Spacing2,
           marginInlineStart: 0,
+          marginInlineEnd: 0, // used for row presentation of radio/checkbox
+          ...(ownerState.labelPlacement === "start" && {
+            marginInlineStart: 0, // used for row presentation of radio/checkbox
+            marginInlineEnd: 0,
+          }),
+          ...(ownerState.labelPlacement === "top" && {
+            marginInlineStart: 0,
+          }),
+          ...(ownerState.labelPlacement === "bottom" && {
+            marginInlineStart: 0,
+          }),
+          "&:not(:last-child)": {
+            marginBottom: odysseyTokens.Spacing2,
+          },
+          "&.Mui-disabled": {
+            pointerEvents: "none",
+          },
+          [`&:hover .${radioClasses.root}, &:hover .${checkboxClasses.root}`]: {
+            color: odysseyTokens.TypographyColorBody,
+          },
+          [`&:hover .${radioClasses.root}.Mui-checked, &:hover .${checkboxClasses.root}.Mui-checked`]:
+            {
+              color: odysseyTokens.PalettePrimaryDark,
+            },
+          [`&.Mui-error:hover .${radioClasses.root}, &.Mui-error:hover .${checkboxClasses.root}`]:
+            {
+              color: odysseyTokens.PaletteDangerDark,
+            },
+          [`&.Mui-error:hover .${radioClasses.root}.Mui-checked, &.Mui-error:hover .${checkboxClasses.root}.Mui-checked`]:
+            {
+              color: odysseyTokens.PaletteDangerDark,
+            },
         }),
-        "&:not(:last-child)": {
-          marginBottom: theme.spacing(2),
-        },
-        "&.Mui-disabled": {
-          pointerEvents: "none",
-        },
-        //[`&:hover ${radioClasses.root}:not(${radioClasses.checked})`]: {
-        //color: theme.palette.text.primary,
-        //},
-        "&:hover .MuiRadio-root, &:hover .MuiCheckbox-root": {
-          color: theme.palette.text.primary,
-        },
-        "&:hover .MuiRadio-root.Mui-checked, &:hover .MuiCheckbox-root.Mui-checked":
-          {
-            color: theme.palette.primary.dark,
-          },
-        "&.Mui-error:hover .MuiRadio-root, &.Mui-error:hover .MuiCheckbox-root":
-          {
-            color: theme.palette.error.dark,
-          },
-        "&.Mui-error:hover .MuiRadio-root.Mui-checked, &.Mui-error:hover .MuiCheckbox-root.Mui-checked":
-          {
-            color: theme.palette.error.dark,
-          },
-      }),
-      label: ({ theme }) => ({
-        "&:not(:first-child)": {
-          marginInlineStart: theme.spacing(2),
+        label: {
+          gap: odysseyTokens.Spacing1,
         },
-      }),
-      asterisk: () => ({
-        display: "none",
-      }),
-    },
-  },
-  MuiFormHelperText: {
-    defaultProps: {
-      variant: "standard",
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        fontSize: theme.typography.subtitle1.fontSize,
-        lineHeight: "1.33333333",
-        marginBlockStart: theme.spacing(2),
-        ".MuiFormLabel-root + &": {
-          marginBlockStart: `-${theme.spacing(1)}`,
-          color: theme.palette.text.secondary,
-        },
-        marginBlockEnd: theme.spacing(2),
-        "&:last-child": {
-          marginBlockEnd: 0,
-        },
-        textAlign: "start",
-      }),
+        asterisk: () => ({
+          display: "none",
+        }),
+      },
     },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        lineHeight: theme.typography.ui.lineHeight,
-        fontSize: "1rem",
-        fontWeight: 600,
-        marginBottom: theme.spacing(2),
-        "&.Mui-focused, &.Mui-error, &.Mui-disabled": {
-          color: theme.palette.text.primary,
+    MuiFormHelperText: {
+      defaultProps: {
+        variant: "standard",
+      },
+      styleOverrides: {
+        root: {
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          lineHeight: odysseyTokens.TypographyLineHeightBody,
+          marginBlockStart: odysseyTokens.Spacing2,
+          [`.${formLabelClasses.root} + &`]: {
+            marginBlockStart: `-${odysseyTokens.Spacing1}`,
+            color: odysseyTokens.TypographyColorSubordinate,
+          },
+          marginBlockEnd: odysseyTokens.Spacing2,
+          "&:last-child": {
+            marginBlockEnd: 0,
+          },
+          textAlign: "start",
         },
-      }),
+      },
     },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      edgeEnd: ({ theme }) => ({
-        marginInlineEnd: theme.spacing(1),
-      }),
-      root: ({ theme }) => ({
-        padding: theme.spacing(1),
-        fontSize: theme.typography.body1.fontSize,
-        backgroundColor: "transparent",
-        color: theme.palette.text.primary,
-        borderColor: "transparent",
-        borderRadius: theme.mixins.borderRadius,
-
-        "&:hover, &:focus-visible": {
-          backgroundColor: "rgba(29, 29, 33, 0.1)",
-          borderColor: "transparent",
-        },
-        "&:focus-visible": {
-          outlineColor: theme.palette.primary.main,
-        },
-        "&:active": {
-          backgroundColor: "rgba(29, 29, 33, 0.2)",
-          borderColor: "transparent",
-        },
-        "&:disabled": {
-          backgroundColor: "rgba(235, 235, 237, 0.6)",
-          color: theme.palette.text.secondary,
-          borderColor: "transparent",
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          alignItems: "center",
+          color: odysseyTokens.TypographyColorBody,
+          display: "inline-flex",
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          fontSize: odysseyTokens.TypographySizeBody,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          marginBottom: odysseyTokens.Spacing2,
+          "&.Mui-focused, &.Mui-error, &.Mui-disabled": {
+            color: odysseyTokens.TypographyColorBody,
+          },
+          "& > .MuiTypography-root": {
+            margin: "reset",
+            marginInlineStart: odysseyTokens.Spacing1,
+          },
         },
-      }),
-    },
-  },
-  MuiInput: {
-    defaultProps: {
-      disableUnderline: true,
+      },
     },
-    styleOverrides: {
-      root: {
-        "label + &": {
-          marginTop: 0,
+    MuiInput: {
+      defaultProps: {
+        disableUnderline: true,
+      },
+      styleOverrides: {
+        root: {
+          "label + &": {
+            marginTop: 0,
+          },
         },
       },
     },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        display: "flex",
-        minWidth: "1.25em",
-        maxHeight: "unset",
-        margin: 0,
-        alignItems: "center",
-        whiteSpace: "nowrap",
-        color: theme.palette.action.active,
-        ...(ownerState.position === "start" && {
-          marginInlineStart: theme.spacing(2),
-        }),
-        ...(ownerState.position === "end" && {
-          marginInlineEnd: theme.spacing(2),
-        }),
-        ...(ownerState.disablePointerEvents === true && {
-          pointerEvents: "none",
+    MuiInputAdornment: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          display: "flex",
+          minWidth: "1.25em",
+          maxHeight: "unset",
+          margin: 0,
+          alignItems: "center",
+          whiteSpace: "nowrap",
+          color: odysseyTokens.TypographyColorSubordinate,
+          ...(ownerState.position === "start" && {
+            marginInlineStart: odysseyTokens.Spacing2,
+          }),
+          ...(ownerState.position === "end" && {
+            marginInlineEnd: odysseyTokens.Spacing2,
+          }),
+          ...(ownerState.disablePointerEvents === true && {
+            pointerEvents: "none",
+          }),
         }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    defaultProps: {
-      minRows: 3,
-      required: true,
+      },
     },
-    styleOverrides: {
-      root: ({ ownerState, theme }) => ({
-        ...theme.typography.body1,
-        flex: "1",
-        width: "auto",
-        color: theme.palette.text.primary,
-        lineHeight: theme.typography.ui.lineHeight,
-        borderWidth: theme.mixins.borderWidth,
-        borderStyle: theme.mixins.borderStyle,
-        borderRadius: theme.mixins.borderRadius,
-        borderColor: theme.palette.grey[500],
-        boxShadow: `0 0 0 0 transparent`,
-        backgroundColor: theme.palette.common.white,
-        transition: theme.transitions.create(
-          ["border-color", "background-color", "box-shadow"],
-          {
-            duration: theme.transitions.duration.short,
-          }
-        ),
-
-        ...(ownerState.fullWidth && {
-          width: "100%",
-        }),
+    MuiInputBase: {
+      defaultProps: {
+        minRows: 3,
+        required: true,
+      },
+      styleOverrides: {
+        root: ({ ownerState, theme }) => ({
+          ...theme.typography.body1,
+          flex: "1",
+          width: "auto",
+          color: odysseyTokens.TypographyColorBody,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderRadius: odysseyTokens.BorderRadiusMain,
+          borderColor: odysseyTokens.HueNeutral500,
+          boxShadow: `0 0 0 0 transparent`,
+          backgroundColor: odysseyTokens.HueNeutralWhite,
+          transition: theme.transitions.create(
+            ["border-color", "background-color", "box-shadow"],
+            {
+              duration: odysseyTokens.TransitionDurationMain,
+            }
+          ),
+
+          ...(ownerState.fullWidth && {
+            width: "100%",
+          }),
 
-        ...(ownerState.readOnly === true && {
-          borderColor: "transparent",
-          backgroundColor: theme.palette.grey[50],
-        }),
+          ...(ownerState.readOnly === true && {
+            borderColor: "transparent",
+            backgroundColor: odysseyTokens.HueNeutral50,
+          }),
 
-        [`&:hover`]: {
-          borderColor: theme.palette.grey[900],
-        },
+          [`&:hover`]: {
+            borderColor: odysseyTokens.HueNeutral900,
+          },
 
-        [`&.${inputBaseClasses.focused}`]: {
-          borderColor: theme.palette.primary.main,
-          boxShadow: `0 0 0 1px ${theme.palette.primary.main}`,
-          outline: "2px solid transparent",
-          outlineOffset: "1px",
-        },
+          [`&.${inputBaseClasses.focused}`]: {
+            borderColor: odysseyTokens.FocusOutlineColorPrimary,
+            boxShadow: `0 0 0 1px ${odysseyTokens.FocusOutlineColorPrimary}`,
+            outline: `${odysseyTokens.FocusOutlineWidthMain} ${odysseyTokens.FocusOutlineStyle} transparent`,
+            outlineOffset: odysseyTokens.FocusOutlineOffsetTight,
+          },
 
-        [`&.${inputBaseClasses.error}`]: {
-          borderColor: theme.palette.error.main,
-        },
+          [`&.${inputBaseClasses.error}`]: {
+            borderColor: odysseyTokens.BorderColorDangerControl,
+          },
 
-        [`&.${inputBaseClasses.error}:hover`]: {
-          borderColor: theme.palette.error.dark,
-        },
+          [`&.${inputBaseClasses.error}:hover`]: {
+            borderColor: odysseyTokens.BorderColorDangerDark,
+          },
 
-        [`&.${inputBaseClasses.error}.${inputBaseClasses.focused}`]: {
-          borderColor: theme.palette.error.main,
-          boxShadow: `0 0 0 1px ${theme.palette.error.main}`,
-        },
+          [`&.${inputBaseClasses.error}.${inputBaseClasses.focused}`]: {
+            borderColor: odysseyTokens.BorderColorDangerControl,
+            boxShadow: `0 0 0 1px ${odysseyTokens.PaletteDangerMain}`,
+          },
 
-        [`&.${inputBaseClasses.disabled}`]: {
-          color: theme.palette.text.disabled,
-          borderColor: theme.palette.action.disabled,
-          pointerEvents: "auto",
-          backgroundColor: theme.palette.grey[50],
-          cursor: "not-allowed",
-        },
-      }),
-      input: ({ theme }) => ({
-        boxSizing: "border-box",
-        height: "auto",
-        paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
-        paddingInline: theme.spacing(3),
-        boxShadow: "none",
-
-        [`.${inputBaseClasses.disabled} &`]: {
-          pointerEvents: "auto",
-          cursor: "not-allowed",
-        },
+          [`&.${inputBaseClasses.disabled}`]: {
+            color: odysseyTokens.TypographyColorDisabled,
+            borderColor: odysseyTokens.BorderColorDisabled,
+            pointerEvents: "auto",
+            backgroundColor: odysseyTokens.HueNeutral50,
+            cursor: "not-allowed",
+          },
+        }),
+        input: {
+          boxSizing: "border-box",
+          height: "auto",
+          paddingBlock: odysseyTokens.Spacing3,
+          paddingInline: odysseyTokens.Spacing3,
+          boxShadow: "none",
 
-        [`.${inputAdornmentClasses.root} + &`]: {
-          paddingInlineStart: theme.spacing(2),
-        },
+          [`.${inputBaseClasses.disabled} &`]: {
+            pointerEvents: "auto",
+            cursor: "not-allowed",
+          },
+
+          [`.${inputAdornmentClasses.root} + &`]: {
+            paddingInlineStart: odysseyTokens.Spacing2,
+          },
+
+          [`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: {
+            "&::placeholder": {
+              color: odysseyTokens.TypographyColorSubordinate,
+              opacity: "1 !important",
+            },
+          },
+
+          [`&::-webkit-search-cancel-button`]: {
+            display: "none",
+            "-webkit-appearance": "none",
+            "-moz-appearance": "none",
+          },
+
+          [`&::-moz-search-cancel-button`]: {
+            display: "none",
+            "-moz-appearance": "none",
+          },
 
-        [`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: {
-          "&::placeholder": {
-            color: theme.palette.text.secondary,
-            opacity: "1 !important",
+          [`&::-ms-clear`]: {
+            display: "none",
           },
         },
-      }),
-    },
-  },
-  MuiInputLabel: {
-    defaultProps: {
-      disableAnimation: true,
-      shrink: false,
+      },
     },
-    styleOverrides: {
-      root: ({ ownerState }) => ({
-        display: "flex",
-        justifyContent: "space-between",
-        // @ts-expect-error: Incorrect typing in MUI
-        ...(ownerState.formControl && {
-          position: "initial",
-          transform: "none",
-        }),
-        ...(ownerState.variant === "outlined" && {
-          pointerEvents: "initial",
-          transform: "none",
-          maxWidth: "100%",
-          ...(ownerState.size === "small" && {
+    MuiInputLabel: {
+      defaultProps: {
+        disableAnimation: true,
+        shrink: false,
+      },
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          display: "flex",
+          justifyContent: "space-between",
+          overflow: "unset",
+          whiteSpace: "unset",
+          // @ts-expect-error: Incorrect typing in MUI
+          ...(ownerState.formControl && {
+            position: "initial",
+            transform: "none",
+          }),
+          ...(ownerState.variant === "outlined" && {
+            pointerEvents: "initial",
             transform: "none",
+            maxWidth: "100%",
+            ...(ownerState.size === "small" && {
+              transform: "none",
+            }),
           }),
+          [`& > .${typographyClasses.root}`]: {
+            lineHeight: "unset",
+          },
         }),
-        "& > .MuiTypography-root": {
-          lineHeight: "unset",
-        },
-      }),
+      },
     },
-  },
-  MuiLink: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.primary.main,
-        textDecoration: "underline",
-        cursor: "pointer",
-
-        "&:hover": {
-          color: theme.palette.primary.dark,
+    MuiLink: {
+      styleOverrides: {
+        root: {
+          color: odysseyTokens.TypographyColorAction,
           textDecoration: "underline",
-        },
-
-        "&:focus-visible": {
-          outlineColor: theme.palette.primary.main,
-          outlineOffset: "2px",
-          outlineStyle: "solid",
-          outlineWidth: "1px",
-        },
+          cursor: "pointer",
 
-        "&:visited": {
-          color: theme.palette.primary.main,
-        },
-
-        ".Link-indicator, .Link-icon": {
-          display: "inline-block",
-          height: "1em",
-          lineHeight: 1,
-        },
-
-        ".Link-indicator": {
-          marginInlineStart: theme.spacing(2),
-        },
-
-        ".Link-icon": {
-          marginInlineEnd: theme.spacing(2),
-        },
-        svg: {
-          fontSize: "1rem",
-          height: "1em",
-          position: "relative",
-          top: "-0.0625em",
-          verticalAlign: "middle",
-          width: "1em",
-        },
-      }),
-    },
-    variants: [
-      {
-        props: { variant: "monochrome" },
-        style: ({ theme }) => ({
-          color: theme.palette.text.primary,
-          textDecoration: "underline",
+          "&:visited": {
+            color: odysseyTokens.TypographyColorAction,
+          },
 
           "&:hover": {
-            color: theme.palette.text.secondary,
+            color: odysseyTokens.PalettePrimaryDark,
+            textDecoration: "underline",
           },
 
           "&:focus-visible": {
-            outlineColor: theme.palette.primary.main,
-            outlineOffset: "2px",
-            outlineStyle: "solid",
-            outlineWidth: "1px",
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            outlineColor: odysseyTokens.FocusOutlineColorPrimary,
+            outlineOffset: odysseyTokens.FocusOutlineOffsetMain,
+            outlineStyle: odysseyTokens.FocusOutlineStyle,
+            outlineWidth: odysseyTokens.FocusOutlineWidthTight,
+            textDecoration: "none",
           },
 
-          "&:visited": {
-            color: theme.palette.text.primary,
+          ".Link-indicator, .Link-icon": {
+            display: "inline-block",
+            height: "1em",
+            lineHeight: 1,
           },
-        }),
-      },
-    ],
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: {
-        textAlign: "start",
+
+          ".Link-indicator": {
+            marginInlineStart: odysseyTokens.Spacing2,
+          },
+
+          ".Link-icon": {
+            marginInlineEnd: odysseyTokens.Spacing2,
+          },
+          svg: {
+            fontSize: "1em",
+            height: "1em",
+            position: "relative",
+            insetBlockStart: "-0.0625em",
+            verticalAlign: "middle",
+            width: "1em",
+          },
+        },
       },
+      variants: [
+        {
+          props: { variant: "monochrome" },
+          style: {
+            color: odysseyTokens.TypographyColorBody,
+            textDecoration: "underline",
+
+            "&:visited": {
+              color: odysseyTokens.TypographyColorBody,
+            },
+
+            "&:hover": {
+              color: odysseyTokens.TypographyColorSubordinate,
+            },
+          },
+        },
+      ],
     },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        paddingBlock: theme.spacing(2),
-        paddingInline: theme.spacing(4),
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: theme.typography.fontWeightBold,
-        lineHeight: theme.typography.caption.lineHeight,
-        color: theme.palette.text.secondary,
-        textTransform: "uppercase",
-      }),
+    MuiListItem: {
+      styleOverrides: {
+        root: {
+          textAlign: "start",
+        },
+      },
     },
-  },
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        gap: theme.spacing(2),
-        minHeight: "unset",
-        paddingBlock: theme.spacing(3),
-
-        "&:hover": {
-          textDecoration: "none",
-          backgroundColor: theme.palette.grey[100],
-
-          // Reset on touch devices, it doesn't add specificity
-          "@media (hover: none)": {
-            backgroundColor: "transparent",
-          },
+    MuiListSubheader: {
+      styleOverrides: {
+        root: {
+          paddingBlock: odysseyTokens.Spacing2,
+          paddingInline: odysseyTokens.Spacing4,
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          color: odysseyTokens.TypographyColorSubordinate,
+          textTransform: "uppercase",
         },
-
-        [`&.${menuItemClasses.root}-destructive`]: {
-          color: theme.palette.error.main,
+      },
+    },
+    MuiMenu: {
+      styleOverrides: {
+        list: {
+          paddingBlock: odysseyTokens.Spacing2,
+          paddingInline: odysseyTokens.Spacing2,
+          borderRadius: odysseyTokens.BorderRadiusMain,
         },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          gap: odysseyTokens.Spacing2,
+          minHeight: "unset",
+          paddingBlock: odysseyTokens.Spacing3,
+          borderRadius: odysseyTokens.BorderRadiusTight,
 
-        [`&.${menuItemClasses.selected}`]: {
-          backgroundColor: "transparent",
-          color: theme.palette.primary.main,
+          [`& .${formControlLabelClasses.root}`]: {
+            gap: "unset",
+          },
 
           "&:hover": {
-            backgroundColor: theme.palette.primary.lighter,
+            textDecoration: "none",
+            backgroundColor: odysseyTokens.HueNeutral100,
 
+            // Reset on touch devices, it doesn't add specificity
             "@media (hover: none)": {
-              backgroundColor: `rgba(${theme.palette.primary.main} / ${theme.palette.action.selectedOpacity})`,
+              backgroundColor: "transparent",
             },
           },
-        },
 
-        ...(!ownerState.disableGutters && {
-          paddingInline: theme.spacing(4),
-        }),
+          [`&.${menuItemClasses.root}-destructive`]: {
+            color: odysseyTokens.TypographyColorDanger,
+          },
 
-        ...(ownerState.divider && {
-          borderBlockEnd: `1px solid ${theme.palette.divider}`,
-        }),
+          [`&.${menuItemClasses.selected}`]: {
+            backgroundColor: "transparent",
+            color: odysseyTokens.TypographyColorAction,
 
-        [`&.${menuItemClasses.disabled}`]: {
-          opacity: 1,
-          color: theme.palette.text.disabled,
-        },
+            "&:hover": {
+              backgroundColor: odysseyTokens.PalettePrimaryLighter,
 
-        [`& + .${dividerClasses.root}`]: {
-          marginBlock: theme.spacing(1),
-        },
+              "@media (hover: none)": {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              },
+            },
+          },
 
-        [`& .${listItemTextClasses.root}`]: {
-          marginBlock: 0,
-        },
+          ...(!ownerState.disableGutters && {
+            paddingInline: odysseyTokens.Spacing4,
+          }),
+
+          ...(ownerState.divider && {
+            borderBlockEnd: `1px solid ${odysseyTokens.BorderColorDisplay}`,
+          }),
+
+          [`&.${menuItemClasses.disabled}`]: {
+            opacity: 1,
+            color: odysseyTokens.TypographyColorDisabled,
+          },
+
+          [`& + .${dividerClasses.root}`]: {
+            marginBlock: odysseyTokens.Spacing1,
+          },
+
+          [`& .${listItemTextClasses.root}`]: {
+            marginBlock: 0,
+          },
 
-        [`& .${listItemIconClasses.root}`]: {
+          [`& .${listItemIconClasses.root}`]: {
+            minWidth: "unset",
+          },
+        }),
+      },
+    },
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
           minWidth: "unset",
+          color: "inherit",
         },
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: "unset",
-        color: "inherit",
       },
     },
-  },
-  MuiNativeSelect: {
-    defaultProps: {
-      variant: "standard",
-    },
-    styleOverrides: {
-      select: {
-        "&:focus": {
-          backgroundColor: "transparent",
+    MuiNativeSelect: {
+      defaultProps: {
+        variant: "standard",
+      },
+      styleOverrides: {
+        select: {
+          "&:focus": {
+            backgroundColor: "transparent",
+          },
+        },
+        icon: {
+          right: "unset",
+          insetInlineEnd: odysseyTokens.Spacing3,
+          color: odysseyTokens.TypographyColorBody,
         },
       },
-      icon: ({ theme }) => ({
-        insetInlineEnd: theme.spacing(3),
-        color: theme.palette.text.primary,
-      }),
-    },
-  },
-  MuiPopover: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        marginBlockStart: theme.spacing(1),
-        borderWidth: theme.mixins.borderWidth,
-        borderStyle: theme.mixins.borderStyle,
-        borderColor: theme.palette.grey[200],
-      }),
-    },
-  },
-  MuiRadio: {
-    defaultProps: {
-      size: "small",
-      icon: <></>,
-      checkedIcon: <></>,
     },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        width: `${theme.typography.ui.lineHeight}em`,
-        height: `${theme.typography.ui.lineHeight}em`,
-        borderRadius: `${theme.typography.ui.lineHeight}em`,
-        borderWidth: theme.mixins.borderWidth,
-        borderStyle: theme.mixins.borderStyle,
-        borderColor: theme.palette.grey[500],
-        padding: 0,
-        boxShadow: `0 0 0 0 transparent`,
-        transition: theme.transitions.create(
-          ["border-color", "background-color", "box-shadow"],
-          {
-            duration: theme.transitions.duration.short,
-          }
-        ),
-
-        "&::before": {
-          content: "''",
-          position: "absolute",
-          width: "0.5em",
-          height: "0.5em",
-          borderRadius: "50%",
-          backgroundColor: "transparent",
-          transition: theme.transitions.create(["background-color"], {
-            duration: theme.transitions.duration.short,
-          }),
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          marginBlockStart: odysseyTokens.Spacing1,
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderColor: odysseyTokens.HueNeutral200,
         },
+      },
+    },
+    MuiRadio: {
+      defaultProps: {
+        size: "small",
+        icon: <></>,
+        checkedIcon: <></>,
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          width: `${odysseyTokens.TypographyLineHeightUi}em`,
+          height: `${odysseyTokens.TypographyLineHeightUi}em`,
+          borderRadius: `${odysseyTokens.TypographyLineHeightUi}em`,
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderColor: odysseyTokens.HueNeutral500,
+          padding: 0,
+          boxShadow: `0 0 0 0 transparent`,
+          transition: theme.transitions.create(
+            ["border-color", "background-color", "box-shadow"],
+            {
+              duration: odysseyTokens.TransitionDurationMain,
+            }
+          ),
 
-        ".MuiFormControlLabel-root:hover > &": {
-          backgroundColor: "transparent",
-          borderColor: theme.palette.grey[900],
-        },
-        ".Mui-error:hover > &": {
-          backgroundColor: "transparent",
-          borderColor: theme.palette.error.dark,
           "&::before": {
-            backgroundColor: theme.palette.error.dark,
+            content: "''",
+            position: "absolute",
+            width: "0.5em",
+            height: "0.5em",
+            borderRadius: "50%",
+            backgroundColor: "transparent",
+            transition: theme.transitions.create(["background-color"], {
+              duration: odysseyTokens.TransitionDurationMain,
+            }),
           },
-        },
-        ".Mui-error > &": {
-          borderColor: theme.palette.error.main,
 
+          [`.${formControlLabelClasses.root}:hover > &`]: {
+            backgroundColor: "transparent",
+            borderColor: odysseyTokens.HueNeutral900,
+          },
+          ".Mui-error:hover > &": {
+            backgroundColor: "transparent",
+            borderColor: odysseyTokens.BorderColorDangerDark,
+            "&::before": {
+              backgroundColor: odysseyTokens.PaletteDangerDark,
+            },
+          },
+          ".Mui-error > &": {
+            borderColor: odysseyTokens.BorderColorDangerControl,
+
+            "&.Mui-focusVisible": {
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`,
+            },
+          },
           "&.Mui-focusVisible": {
-            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`,
+            borderColor: odysseyTokens.HueNeutral900,
+            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+            outline: "2px solid transparent",
+            outlineOffset: "1px",
           },
-        },
-        "&.Mui-focusVisible": {
-          borderColor: theme.palette.grey[900],
-          boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
-          outline: "2px solid transparent",
-          outlineOffset: "1px",
-        },
-        "&.Mui-checked": {
-          position: "relative",
+          "&.Mui-checked": {
+            position: "relative",
 
-          "&::before": {
-            backgroundColor: theme.palette.primary.main,
+            "&::before": {
+              backgroundColor: odysseyTokens.PalettePrimaryMain,
+            },
           },
-        },
-        ".Mui-error > &.Mui-checked::before": {
-          backgroundColor: theme.palette.error.main,
-        },
-        "&.Mui-disabled": {
-          backgroundColor: theme.palette.grey[50],
-          borderColor: theme.palette.grey[300],
+          ".Mui-error > &.Mui-checked::before": {
+            backgroundColor: odysseyTokens.PaletteDangerMain,
+          },
+          "&.Mui-disabled": {
+            backgroundColor: odysseyTokens.HueNeutral50,
+            borderColor: odysseyTokens.HueNeutral300,
 
-          "&.Mui-checked::before": {
-            backgroundColor: theme.palette.grey[300],
+            "&.Mui-checked::before": {
+              backgroundColor: odysseyTokens.HueNeutral300,
+            },
           },
-        },
-      }),
-    },
-  },
-  MuiSnackbar: {
-    defaultProps: {
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right",
+        }),
       },
     },
-    styleOverrides: {
-      root: {
-        "&.Toast": {
-          position: "static",
+    MuiSnackbar: {
+      defaultProps: {
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right",
+        },
+      },
+      styleOverrides: {
+        root: {
+          "&.Toast": {
+            position: "static",
+          },
         },
       },
     },
-  },
-  MuiSelect: {
-    defaultProps: {
-      variant: "standard",
-      IconComponent: ChevronDownIcon,
-    },
-    styleOverrides: {
-      select: ({ theme }) => ({
-        paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
-        paddingInline: theme.spacing(3),
+    MuiSelect: {
+      defaultProps: {
+        variant: "standard",
+        IconComponent: ChevronDownIcon,
+      },
+      styleOverrides: {
+        select: {
+          paddingBlock: odysseyTokens.Spacing3,
+          paddingInline: odysseyTokens.Spacing3,
 
-        "&:focus": {
-          backgroundColor: "transparent",
-        },
+          "&:focus": {
+            backgroundColor: "transparent",
+          },
 
-        ".MuiBox-root": {
-          display: "flex",
-          flexWrap: "wrap",
-          gap: theme.spacing(1),
-          marginBlock: `-${theme.spacing(2)}`,
-          marginInline: `-${theme.spacing(2)}`,
+          ".MuiBox-root": {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: odysseyTokens.Spacing1,
+            marginBlock: `-${odysseyTokens.Spacing2}`,
+            marginInline: `-${odysseyTokens.Spacing2}`,
+          },
         },
-      }),
-      icon: ({ theme }) => ({
-        right: "unset",
-        insetInlineEnd: theme.spacing(3),
-        color: theme.palette.text.primary,
-      }),
-    },
-  },
-  MuiSvgIcon: {
-    defaultProps: {
-      fontSize: "inherit",
-      color: "inherit",
+        icon: {
+          right: "unset",
+          insetInlineEnd: odysseyTokens.Spacing3,
+          color: odysseyTokens.TypographyColorBody,
+        },
+      },
     },
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        fontSize: `${theme.typography.ui.lineHeight}rem`,
-
-        ...(ownerState.fontSize === "small" && {
-          fontSize: `${Number(theme.typography.ui.lineHeight) * 0.75}rem`,
-        }),
+    MuiSvgIcon: {
+      defaultProps: {
+        fontSize: "inherit",
+        color: "inherit",
+      },
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          fontSize: `${odysseyTokens.TypographyLineHeightUi}rem`,
+
+          ...(ownerState.fontSize === "small" && {
+            fontSize: `${
+              Number(odysseyTokens.TypographyLineHeightUi) * 0.75
+            }rem`,
+          }),
 
-        ...(ownerState.fontSize === "large" && {
-          fontSize: `${Number(theme.typography.ui.lineHeight) * 1.25}rem`,
+          ...(ownerState.fontSize === "large" && {
+            fontSize: `${
+              Number(odysseyTokens.TypographyLineHeightUi) * 1.25
+            }rem`,
+          }),
         }),
-      }),
-    },
-  },
-  MuiTab: {
-    defaultProps: {
-      iconPosition: "start",
+      },
     },
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
-        minWidth: "unset",
-        minHeight: "unset",
-        padding: `${theme.spacing(4)} 0`,
-        lineHeight: theme.typography.body1.lineHeight,
-        overflow: "visible",
-        ...(ownerState.selected == true && {
-          color: theme.palette.text.primary,
-        }),
-        ...(ownerState.textColor === "inherit" && {
-          color: "inherit",
-          opacity: 1,
-        }),
-        ...(ownerState.wrapped && {
-          fontSize: theme.typography.subtitle1.fontSize,
-          lineHeight: theme.typography.subtitle1.lineHeight,
-        }),
-        "&:hover": {
-          color: theme.palette.primary.main,
-        },
-        "&:focus-visible::before, &.Mui-focusVisible::before": {
-          content: "''",
-          position: "absolute",
-          top: theme.spacing(4),
-          right: `calc(-1 * ${theme.spacing(2)})`,
-          bottom: theme.spacing(4),
-          left: `calc(-1 * ${theme.spacing(2)})`,
-          borderWidth: theme.mixins.borderWidth,
-          borderStyle: theme.mixins.borderStyle,
-          borderColor: theme.palette.primary.main,
-          borderRadius: theme.mixins.borderRadius,
-        },
-        "&.Mui-selected": {
-          color: theme.palette.text.primary,
-          fontWeight: theme.typography.fontWeightBold,
+    MuiTab: {
+      defaultProps: {
+        iconPosition: "start",
+      },
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
+          minWidth: "unset",
+          minHeight: "unset",
+          padding: `${odysseyTokens.Spacing4} 0`,
+          fontFamily: odysseyTokens.TypographyFamilyHeading,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          overflow: "visible",
+
+          ...(ownerState.textColor === "inherit" && {
+            color: "inherit",
+            opacity: 1,
+          }),
+
+          ...(ownerState.selected == true && {
+            color: odysseyTokens.TypographyColorAction,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          }),
+
+          ...(ownerState.disabled && {
+            color: odysseyTokens.TypographyColorDisabled,
+          }),
+
+          ...(ownerState.wrapped && {
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: odysseyTokens.TypographyLineHeightBody,
+          }),
+
           "&:hover": {
-            color: theme.palette.primary.main,
+            color: odysseyTokens.TypographyColorAction,
           },
-        },
-        "&.Mui-disabled": {
-          cursor: "not-allowed",
-          pointerEvents: "unset",
-          "&:hover": {
-            color: theme.palette.text.disabled,
+
+          "&:focus-visible::before, &.Mui-focusVisible::before": {
+            content: "''",
+            position: "absolute",
+            insetBlockStart: odysseyTokens.Spacing4,
+            insetInlineEnd: `calc(-1 * ${odysseyTokens.Spacing2})`,
+            insetBlockEnd: odysseyTokens.Spacing4,
+            insetInlineStart: `calc(-1 * ${odysseyTokens.Spacing2})`,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderColor: odysseyTokens.PalettePrimaryMain,
+            borderRadius: odysseyTokens.BorderRadiusMain,
           },
-        },
-      }),
-    },
-  },
-  MuiTabPanel: {
-    styleOverrides: {
-      root: {
-        padding: 0,
+
+          "& .MuiTab-iconWrapper": {
+            marginInlineEnd: odysseyTokens.Spacing1,
+          },
+        }),
       },
     },
-  },
-  MuiTable: {
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        display: "table",
-        width: "auto",
-        borderCollapse: "separate",
-        borderSpacing: 0,
-        border: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
-        borderRadius: theme.mixins.borderRadius,
-        marginBlock: theme.spacing(0),
-        marginInline: theme.spacing(0),
-        lineHeight: theme.typography.ui.lineHeight,
-
-        "&:only-child": {
-          marginBlockEnd: 0,
+    MuiTabPanel: {
+      styleOverrides: {
+        root: {
+          padding: 0,
         },
-
-        ...(ownerState.stickyHeader && {
+      },
+    },
+    MuiTable: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          display: "table",
+          width: "auto",
           borderCollapse: "separate",
-        }),
+          borderSpacing: 0,
+          border: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100}`,
+          borderRadius: odysseyTokens.BorderRadiusMain,
+          marginBlock: odysseyTokens.Spacing0,
+          marginInline: odysseyTokens.Spacing0,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+
+          "&:only-child": {
+            marginBlockEnd: 0,
+          },
 
-        caption: {
-          clip: "rect(0 0 0 0)",
-          clipPath: "inset(50%)",
-          height: "1px",
-          overflow: "hidden",
-          position: "absolute",
-          whiteSpace: "nowrap",
-          width: "1px",
-        },
-      }),
+          ...(ownerState.stickyHeader && {
+            borderCollapse: "separate",
+          }),
+
+          caption: {
+            clip: "rect(0 0 0 0)",
+            clipPath: "inset(50%)",
+            height: "1px",
+            overflow: "hidden",
+            position: "absolute",
+            whiteSpace: "nowrap",
+            width: "1px",
+          },
+        }),
+      },
     },
-  },
-  MuiTableCell: {
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        ...theme.typography.body1,
-        maxWidth: theme.mixins.maxWidth,
-        borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
-        textAlign: "start",
-        verticalAlign: "baseline",
-        padding: "unset",
-        paddingBlock: theme.spacing(4),
-        paddingInline: theme.spacing(4),
-        overflowWrap: "break-word",
-
-        [`.${tableRowClasses.root}:hover &[rowspan]`]: {
-          backgroundColor: theme.palette.common.white,
-        },
+    MuiTableCell: {
+      styleOverrides: {
+        root: ({ theme, ownerState }) => ({
+          ...theme.typography.body1,
+          maxWidth: odysseyTokens.TypographyLineLengthMax,
+          borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100}`,
+          textAlign: "start",
+          verticalAlign: "baseline",
+          padding: "unset",
+          paddingBlock: odysseyTokens.Spacing4,
+          paddingInline: odysseyTokens.Spacing4,
+          overflowWrap: "break-word",
 
-        [`.${tableBodyClasses.root} .${tableRowClasses.root}:last-of-type &`]: {
-          borderBottom: 0,
-        },
+          [`.${tableRowClasses.root}:hover &[rowspan]`]: {
+            backgroundColor: odysseyTokens.HueNeutralWhite,
+          },
 
-        [`.${tableRowClasses.selected} &`]: {
-          borderBottomColor: theme.palette.primary.light,
-        },
+          [`.${tableBodyClasses.root} .${tableRowClasses.root}:last-of-type &`]:
+            {
+              borderBottom: 0,
+            },
 
-        [`.${tableRowClasses.selected}:hover &`]: {
-          borderBottomColor: theme.palette.primary.main,
-        },
+          [`.${tableRowClasses.selected} &`]: {
+            borderBottomColor: odysseyTokens.PalettePrimaryLight,
+          },
 
-        ...(ownerState.variant === "action" && {
-          paddingBlock: 0,
-        }),
+          [`.${tableRowClasses.selected}:hover &`]: {
+            borderBottomColor: odysseyTokens.PalettePrimaryMain,
+          },
 
-        ...(ownerState.variant === "body" && {
-          color: theme.palette.text.primary,
-        }),
+          ...(ownerState.variant === "action" && {
+            paddingBlock: 0,
+          }),
 
-        ...(ownerState.variant === "date" && {
-          whiteSpace: "nowrap",
-        }),
+          ...(ownerState.variant === "body" && {
+            color: odysseyTokens.TypographyColorBody,
+          }),
 
-        ...(ownerState.variant === "footer" && {
-          color: theme.palette.text.secondary,
-          lineHeight: theme.typography.body1.lineHeight,
-          fontSize: theme.typography.body1.fontSize,
-        }),
+          ...(ownerState.variant === "date" && {
+            whiteSpace: "nowrap",
+          }),
 
-        [`.${tableHeadClasses.root} &`]: {
-          color: theme.palette.text.secondary,
-          lineHeight: theme.typography.body1.lineHeight,
-          fontWeight: theme.typography.fontWeightBold,
-          backgroundColor: theme.palette.grey[50],
-        },
+          ...(ownerState.variant === "footer" && {
+            color: odysseyTokens.TypographyColorSubordinate,
+            lineHeight: odysseyTokens.TypographyLineHeightBody,
+            fontSize: odysseyTokens.TypographySizeBody,
+          }),
 
-        ...(ownerState.variant === "head" && {
-          lineHeight: theme.typography.body1.lineHeight,
-          fontWeight: theme.typography.fontWeightBold,
-        }),
+          [`.${tableHeadClasses.root} &`]: {
+            color: odysseyTokens.TypographyColorBody,
+            lineHeight: odysseyTokens.TypographyLineHeightBody,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
+            backgroundColor: odysseyTokens.HueNeutral50,
+          },
 
-        ...(ownerState.variant === "number" && {
-          textAlign: "end",
-          fontFeatureSettings: '"lnum", "tnum"',
-        }),
+          ...(ownerState.variant === "head" && {
+            lineHeight: odysseyTokens.TypographyLineHeightBody,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          }),
 
-        ...(ownerState.padding === "checkbox" && {
-          width: 48, // prevent the checkbox column from growing
-          padding: "0 0 0 4px",
-        }),
+          ...(ownerState.variant === "number" && {
+            textAlign: "end",
+            fontFeatureSettings: '"lnum", "tnum"',
+          }),
 
-        ...(ownerState.padding === "none" && {
-          padding: 0,
-        }),
+          ...(ownerState.padding === "checkbox" && {
+            width: 48, // prevent the checkbox column from growing
+            padding: "0 0 0 4px",
+          }),
 
-        ...(ownerState.align === "left" && {
-          textAlign: "start",
-        }),
+          ...(ownerState.padding === "none" && {
+            padding: 0,
+          }),
 
-        ...(ownerState.align === "center" && {
-          textAlign: "center",
-        }),
+          ...(ownerState.align === "left" && {
+            textAlign: "start",
+          }),
 
-        ...(ownerState.align === "right" && {
-          textAlign: "end",
-          flexDirection: "row-reverse",
-        }),
+          ...(ownerState.align === "center" && {
+            textAlign: "center",
+          }),
 
-        ...(ownerState.align === "justify" && {
-          textAlign: "justify",
+          ...(ownerState.align === "right" && {
+            textAlign: "end",
+            flexDirection: "row-reverse",
+          }),
+
+          ...(ownerState.align === "justify" && {
+            textAlign: "justify",
+          }),
         }),
-      }),
-    },
-  },
-  MuiTableContainer: {
-    defaultProps: {
-      // @ts-expect-error valid prop and value; MUI TS bug
-      component: "figure",
+      },
     },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        width: "unset",
-        maxWidth: "100%",
-        marginBlockStart: theme.spacing(0),
-        marginBlockEnd: theme.spacing(4),
-        marginInline: 0,
-        overflowX: "auto",
-
-        "&:last-child": {
-          marginBlock: 0,
+    MuiTableContainer: {
+      defaultProps: {
+        // @ts-expect-error valid prop and value; MUI TS bug
+        component: "figure",
+      },
+      styleOverrides: {
+        root: {
+          width: "unset",
+          maxWidth: "100%",
+          marginBlockStart: odysseyTokens.Spacing0,
+          marginBlockEnd: odysseyTokens.Spacing4,
+          marginInline: 0,
+          overflowX: "auto",
+
+          "&:last-child": {
+            marginBlock: 0,
+          },
         },
-      }),
+      },
     },
-  },
-  MuiTableRow: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        verticalAlign: "unset",
-        [`&.${tableRowClasses.root}:hover`]: {
-          backgroundColor: theme.palette.grey[50],
-        },
-        [`&.${tableRowClasses.selected}`]: {
-          backgroundColor: theme.palette.primary.lighter,
-          "&:hover": {
-            backgroundColor: theme.palette.primary.lighter,
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          verticalAlign: "unset",
+          [`&.${tableRowClasses.root}:hover`]: {
+            backgroundColor: odysseyTokens.HueNeutral50,
+          },
+          [`&.${tableRowClasses.selected}`]: {
+            backgroundColor: odysseyTokens.PalettePrimaryLighter,
+            "&:hover": {
+              backgroundColor: odysseyTokens.PalettePrimaryLighter,
+            },
           },
         },
-      }),
-    },
-  },
-  MuiTableSortLabel: {
-    defaultProps: {
-      IconComponent: ArrowDownIcon,
+      },
     },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        cursor: "pointer",
-        display: "inline-flex",
-        justifyContent: "flex-start",
-        flexDirection: "inherit",
-        alignItems: "center",
-        "&:focus-visible": {
-          color: theme.palette.text.primary,
-          outlineOffset: theme.spacing(4),
-          outlineStyle: "solid",
-          outlineWidth: "2px",
-          outlineColor: theme.palette.primary.main,
-        },
-        "&:hover": {
-          color: theme.palette.text.primary,
-          [`& .${tableSortLabelClasses.icon}`]: {
-            opacity: 1,
+    MuiTableSortLabel: {
+      defaultProps: {
+        IconComponent: ArrowDownIcon,
+      },
+      styleOverrides: {
+        root: {
+          cursor: "pointer",
+          display: "inline-flex",
+          justifyContent: "flex-start",
+          flexDirection: "inherit",
+          alignItems: "center",
+          "&:focus-visible": {
+            color: odysseyTokens.TypographyColorBody,
+            outlineOffset: odysseyTokens.Spacing4,
+            outlineStyle: odysseyTokens.FocusOutlineStyle,
+            outlineWidth: odysseyTokens.FocusOutlineWidthMain,
+            outlineColor: odysseyTokens.FocusOutlineColorPrimary,
           },
-        },
-        [`&.${tableSortLabelClasses.active}`]: {
-          color: theme.palette.text.secondary,
-          [`& .${tableSortLabelClasses.icon}`]: {
-            opacity: 1,
-            color: "inherit",
+          "&:hover": {
+            color: odysseyTokens.TypographyColorBody,
+            [`& .${tableSortLabelClasses.icon}`]: {
+              opacity: 1,
+            },
+          },
+          [`&.${tableSortLabelClasses.active}`]: {
+            color: odysseyTokens.TypographyColorSubordinate,
+            [`& .${tableSortLabelClasses.icon}`]: {
+              opacity: 1,
+              color: "inherit",
+            },
           },
         },
-      }),
-      icon: ({ theme, ownerState }) => ({
-        fontSize: "inherit",
-        marginInlineEnd: 0,
-        marginInlineStart: 0,
-        opacity: 0,
-        color: "inherit",
-        transition: theme.transitions.create(["opacity", "transform"], {
-          duration: theme.transitions.duration.shorter,
-        }),
-        userSelect: "none",
+        icon: ({ theme, ownerState }) => ({
+          fontSize: "inherit",
+          marginInlineEnd: 0,
+          marginInlineStart: 0,
+          opacity: 0,
+          color: "inherit",
+          transition: theme.transitions.create(["opacity", "transform"], {
+            duration: odysseyTokens.TransitionDurationMain,
+          }),
+          userSelect: "none",
 
-        [`.${tableCellClasses.alignRight} &`]: {
-          marginInlineEnd: theme.spacing(2),
-        },
+          [`.${tableCellClasses.alignRight} &`]: {
+            marginInlineEnd: odysseyTokens.Spacing2,
+          },
 
-        [`.${tableCellClasses.alignLeft} &`]: {
-          marginInlineStart: theme.spacing(2),
-        },
+          [`.${tableCellClasses.alignLeft} &`]: {
+            marginInlineStart: odysseyTokens.Spacing2,
+          },
 
-        ...(ownerState.direction === "desc" && {
-          transform: "rotate(0deg)",
-        }),
-        ...(ownerState.direction === "asc" && {
-          transform: "rotate(180deg)",
+          ...(ownerState.direction === "desc" && {
+            transform: "rotate(0deg)",
+          }),
+          ...(ownerState.direction === "asc" && {
+            transform: "rotate(180deg)",
+          }),
         }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        minHeight: "unset",
-        marginBottom: theme.spacing(5),
-      }),
-      flexContainer: ({ theme }) => ({
-        gap: theme.spacing(5),
-        borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.divider}`,
-      }),
-    },
-  },
-  MuiTooltip: {
-    defaultProps: {
-      arrow: true,
-      enterDelay: 500,
-      enterNextDelay: 250,
-      placement: "top",
+      },
     },
-    styleOverrides: {
-      tooltip: ({ theme, ownerState }) => ({
-        maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
-        paddingBlock: theme.spacing(2),
-        paddingInline: theme.spacing(3),
-        backgroundColor: theme.palette.grey[900],
-        color: theme.palette.common.white,
-        fontSize: theme.typography.subtitle1.fontSize,
-        lineHeight: theme.typography.subtitle1.lineHeight,
-        ...(ownerState.touch === true && {
-          paddingBlock: theme.spacing(2),
-          paddingInline: theme.spacing(3),
-          fontSize: theme.typography.subtitle1.fontSize,
-          lineHeight: theme.typography.subtitle1.lineHeight,
-          fontWeight: theme.typography.fontWeightRegular,
-        }),
-        [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-          transformOrigin: "right center",
-          ...(ownerState.isRtl
-            ? {
-                marginInlineStart: theme.spacing(3),
-                ...(ownerState.touch === true && {
-                  marginInlineStart: theme.spacing(4),
-                }),
-              }
-            : {
-                marginInlineEnd: theme.spacing(3),
-                ...(ownerState.touch === true && {
-                  marginInlineEnd: theme.spacing(4),
-                }),
-              }),
-        },
-        [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-          transformOrigin: "left center",
-          ...(ownerState.isRtl
-            ? {
-                marginInlineEnd: theme.spacing(3),
-                ...(ownerState.touch === true && {
-                  marginInlineEnd: theme.spacing(4),
-                }),
-              }
-            : {
-                marginInlineStart: theme.spacing(3),
-                ...(ownerState.touch === true && {
-                  marginInlineStart: theme.spacing(4),
-                }),
-              }),
+    MuiTabs: {
+      defaultProps: {
+        textColor: "inherit",
+      },
+      styleOverrides: {
+        root: {
+          minHeight: "unset",
+          marginBottom: odysseyTokens.Spacing5,
         },
-        [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
-          transformOrigin: "center bottom",
-          marginBottom: theme.spacing(3),
-          ...(ownerState.touch === true && {
-            marginBottom: theme.spacing(4),
-          }),
+
+        flexContainer: {
+          gap: odysseyTokens.Spacing5,
+          borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.BorderColorDisplay}`,
         },
-        [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: {
-          transformOrigin: "center top",
-          marginTop: theme.spacing(3),
+      },
+    },
+    MuiTooltip: {
+      defaultProps: {
+        arrow: true,
+        enterDelay: 500,
+        enterNextDelay: 250,
+        placement: "top",
+      },
+      styleOverrides: {
+        tooltip: ({ ownerState }) => ({
+          maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
+          paddingBlock: odysseyTokens.Spacing2,
+          paddingInline: odysseyTokens.Spacing3,
+          backgroundColor: odysseyTokens.HueNeutral900,
+          color: odysseyTokens.HueNeutralWhite,
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          lineHeight: odysseyTokens.TypographyLineHeightBody,
           ...(ownerState.touch === true && {
-            marginTop: theme.spacing(4),
+            paddingBlock: odysseyTokens.Spacing2,
+            paddingInline: odysseyTokens.Spacing3,
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: odysseyTokens.TypographyLineHeightBody,
+            fontWeight: odysseyTokens.TypographyWeightBody,
           }),
-        },
-      }),
-      arrow: ({ theme }) => ({
-        color: theme.palette.grey[900],
-        "&::before": {
-          borderRadius: "0",
-        },
+          [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
+            transformOrigin: "right center",
+            ...(ownerState.isRtl
+              ? {
+                  marginInlineStart: odysseyTokens.Spacing3,
+                  ...(ownerState.touch === true && {
+                    marginInlineStart: odysseyTokens.Spacing4,
+                  }),
+                }
+              : {
+                  marginInlineEnd: odysseyTokens.Spacing3,
+                  ...(ownerState.touch === true && {
+                    marginInlineEnd: odysseyTokens.Spacing4,
+                  }),
+                }),
+          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
+            transformOrigin: "left center",
+            ...(ownerState.isRtl
+              ? {
+                  marginInlineEnd: odysseyTokens.Spacing3,
+                  ...(ownerState.touch === true && {
+                    marginInlineEnd: odysseyTokens.Spacing4,
+                  }),
+                }
+              : {
+                  marginInlineStart: odysseyTokens.Spacing3,
+                  ...(ownerState.touch === true && {
+                    marginInlineStart: odysseyTokens.Spacing4,
+                  }),
+                }),
+          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
+            transformOrigin: "center bottom",
+            marginBottom: odysseyTokens.Spacing3,
+            ...(ownerState.touch === true && {
+              marginBottom: odysseyTokens.Spacing4,
+            }),
+          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: {
+            transformOrigin: "center top",
+            marginTop: odysseyTokens.Spacing3,
+            ...(ownerState.touch === true && {
+              marginTop: odysseyTokens.Spacing4,
+            }),
+          },
+        }),
+        arrow: {
+          color: odysseyTokens.HueNeutral900,
+          "&::before": {
+            borderRadius: "0",
+          },
 
-        [`.${tooltipClasses.popper}[data-popper-placement*="top"] &::before`]: {
-          borderRadius: `0 0 3px 0`,
-        },
+          [`.${tooltipClasses.popper}[data-popper-placement*="top"] &::before`]:
+            {
+              borderRadius: `0 0 3px 0`,
+            },
 
-        [`.${tooltipClasses.popper}[data-popper-placement*="right"] &::before`]:
-          {
-            borderRadius: `0 0 0 3px`,
-          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="right"] &::before`]:
+            {
+              borderRadius: `0 0 0 3px`,
+            },
 
-        [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &::before`]:
-          {
-            borderRadius: `3px 0 0 0`,
-          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &::before`]:
+            {
+              borderRadius: `3px 0 0 0`,
+            },
 
-        [`.${tooltipClasses.popper}[data-popper-placement*="left"] &::before`]:
-          {
-            borderRadius: `0 3px 0 0`,
-          },
-      }),
-    },
-  },
-  MuiTypography: {
-    defaultProps: {
-      fontFamily:
-        "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
-      variantMapping: {
-        h1: "h1",
-        h2: "h2",
-        h3: "h3",
-        h4: "h4",
-        h5: "h5",
-        h6: "h6",
-        subtitle1: "p",
-        body1: "p",
-        inherit: "p",
-        legend: "legend",
+          [`.${tooltipClasses.popper}[data-popper-placement*="left"] &::before`]:
+            {
+              borderRadius: `0 3px 0 0`,
+            },
+        },
       },
     },
-    styleOverrides: {
-      paragraph: ({ theme }) => ({
-        marginBottom: theme.spacing(4),
-      }),
+    MuiTypography: {
+      defaultProps: {
+        fontFamily:
+          "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
+        variantMapping: {
+          h1: "h1",
+          h2: "h2",
+          h3: "h3",
+          h4: "h4",
+          h5: "h5",
+          h6: "h6",
+          subtitle1: "p",
+          body1: "p",
+          inherit: "p",
+          legend: "legend",
+        },
+      },
+      styleOverrides: {
+        paragraph: {
+          marginBlockEnd: odysseyTokens.Spacing4,
+
+          [`&:last-child`]: {
+            marginBlockEnd: 0,
+          },
+        },
+      },
     },
-  },
+  };
 };