Update Breadcrumb styles to match Figma (#2057)

* fix: update Breadcrumb styles to match Figma * fix: add correct hover color
okta · Dec 19, 2023 · d3d0bdc · d3d0bdc
1 parent e3a2a6e
commit d3d0bdc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/packages/odyssey-react-mui/src/Breadcrumbs.tsx b/packages/odyssey-react-mui/src/Breadcrumbs.tsx
@@ -27,7 +27,7 @@ import {
   useState,
 } from "react";
 import { GroupIcon, HomeIcon, UserIcon } from "./icons.generated";
-import { Typography } from "./Typography";
+import { Subordinate } from "./Typography";
 import { useTranslation } from "react-i18next";
 
 export type BreadcrumbType = "listItem" | "menuItem" | "currentPage";
@@ -71,7 +71,7 @@ export const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {
   }
 
   if (breadcrumbType === "currentPage") {
-    return <Typography>{breadcrumbContent}</Typography>;
+    return <Subordinate color="textPrimary">{breadcrumbContent}</Subordinate>;
   }
 
   // breadcrumbType === "listItem" is the default
@@ -152,7 +152,7 @@ const BreadcrumbList = ({
 
       {breadcrumbSections.insideMenu && (
         <>
-          <ButtonBase onClick={onMenuButtonClick}>…</ButtonBase>
+          <ButtonBase onClick={onMenuButtonClick}>...</ButtonBase>
           <Menu
             open={Boolean(anchorEl)}
             onClose={onCloseMenu}

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -453,34 +453,46 @@ export const components = ({
     MuiBreadcrumbs: {
       styleOverrides: {
         li: {
-          fontSize: odysseyTokens.TypographySizeBody,
-          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+
+          "& svg": {
+            width: odysseyTokens.Spacing3,
+          },
+
+          "& > p": {
+            paddingInline: odysseyTokens.Spacing1,
+          },
 
           "& > a, & > button": {
             borderRadius: odysseyTokens.BorderRadiusTight,
             color: odysseyTokens.TypographyColorSubordinate,
             display: "flex",
             gap: odysseyTokens.Spacing1,
-            padding: odysseyTokens.Spacing1,
+            paddingInline: odysseyTokens.Spacing1,
+            paddingBlock: 2,
             transitionProperty: "color, background-color",
             transitionDuration: "100ms",
             transitionTimingFunction: "linear",
 
             "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral200,
+              backgroundColor: odysseyTokens.HueNeutral100,
               color: odysseyTokens.TypographyColorBody,
             },
 
             "&:focus-visible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-              outline: "2px solid transparent",
-              outlineOffset: "1px",
+              outlineWidth: 2,
+              outlineStyle: "solid",
+              outlineColor: odysseyTokens.PalettePrimaryMain,
+              outlineOffset: -2,
             },
           },
         },
         separator: {
           color: odysseyTokens.BorderColorDisplay,
-          marginInline: odysseyTokens.Spacing1,
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          marginInlineStart: 6,
+          marginInlineEnd: 4,
         },
       },
     },