feat(odyssey-react-mui): update Link to match new brand standards

okta · Jun 1, 2023 · 5afc6ed · 5afc6ed
1 parent 775ffcb
commit 5afc6ed
Showing 1 changed file with 19 additions and 24 deletions.
diff --git 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,
             },
-          }),
+          },
         },
       ],
     },