diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 044efe142e..b5c8f4044a 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -1349,25 +1349,27 @@ export const components = ( }, MuiLink: { styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.primary.main, + root: { + color: odysseyTokens.TypographyColorAction, textDecoration: "underline", cursor: "pointer", "&:hover": { - color: theme.palette.primary.dark, + 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.primary.main, + color: odysseyTokens.TypographyColorAction, }, ".Link-indicator, .Link-icon": { @@ -1377,44 +1379,37 @@ export const components = ( }, ".Link-indicator": { - marginInlineStart: theme.spacing(2), + marginInlineStart: odysseyTokens.Spacing2, }, ".Link-icon": { - marginInlineEnd: theme.spacing(2), + marginInlineEnd: odysseyTokens.Spacing2, }, svg: { - fontSize: "1rem", + fontSize: "1em", height: "1em", position: "relative", top: "-0.0625em", verticalAlign: "middle", width: "1em", }, - }), + }, }, variants: [ { props: { variant: "monochrome" }, - style: ({ theme }) => ({ - color: theme.palette.text.primary, + style: { + color: odysseyTokens.TypographyColorBody, textDecoration: "underline", "&:hover": { - color: theme.palette.text.secondary, - }, - - "&:focus-visible": { - outlineColor: theme.palette.primary.main, - outlineOffset: "2px", - outlineStyle: "solid", - outlineWidth: "1px", + color: odysseyTokens.TypographyColorSub, }, "&:visited": { - color: theme.palette.text.primary, + color: odysseyTokens.TypographyColorBody, }, - }), + }, }, ], },