From 1e51ec44cb5f2582deb7d2a150146209dc2c8c92 Mon Sep 17 00:00:00 2001
From: Bill Coloe <bcoloe@akamai.com>
Date: Tue, 11 Mar 2025 15:21:12 -0500
Subject: [PATCH 01/11] Add final breadcrumb styling

---
 .../src/components/Breadcrumb/FinalCrumb.styles.tsx   | 10 +++++++---
 .../manager/src/components/Breadcrumb/FinalCrumb.tsx  |  1 +
 .../ui/src/components/EditableText/EditableText.tsx   | 11 +++++++++--
 packages/ui/src/foundations/themes/index.ts           |  3 +++
 packages/ui/src/foundations/themes/light.ts           |  2 ++
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx b/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx
index af43289b40f..521cfe32f65 100644
--- a/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx
+++ b/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx
@@ -15,15 +15,19 @@ export const StyledEditableText = styled(EditableText, {
     width: 250,
   },
   marginLeft: `-${theme.spacing()}`,
+  '& .breadcrumb-text': {
+    color: theme.tokens.breadcrumb.Normal.Text.Default,
+    fontSize: '1rem !important',
+  },
 }));
 
 export const StyledH1Header = styled(H1Header, { label: 'StyledH1Header' })(
   ({ theme }) => ({
-    color: theme.textColors.tableStatic,
-    fontSize: '1.125rem',
+    color: theme.tokens.breadcrumb.Normal.Text.Default,
+    fontSize: '1rem',
     textTransform: 'capitalize',
     [theme.breakpoints.up('lg')]: {
-      fontSize: '1.125rem',
+      fontSize: '1rem',
     },
   })
 );
diff --git a/packages/manager/src/components/Breadcrumb/FinalCrumb.tsx b/packages/manager/src/components/Breadcrumb/FinalCrumb.tsx
index 729f1222230..f5f011ff4fd 100644
--- a/packages/manager/src/components/Breadcrumb/FinalCrumb.tsx
+++ b/packages/manager/src/components/Breadcrumb/FinalCrumb.tsx
@@ -38,6 +38,7 @@ export const FinalCrumb = React.memo((props: Props) => {
         disabledBreadcrumbEditButton={disabledBreadcrumbEditButton}
         errorText={onEditHandlers.errorText}
         handleAnalyticsEvent={onEditHandlers.handleAnalyticsEvent}
+        isBreadcrumb
         onCancel={onEditHandlers.onCancel}
         onEdit={onEditHandlers.onEdit}
         text={onEditHandlers.editableTextTitle}
diff --git a/packages/ui/src/components/EditableText/EditableText.tsx b/packages/ui/src/components/EditableText/EditableText.tsx
index a19323bc83f..ee15ae51368 100644
--- a/packages/ui/src/components/EditableText/EditableText.tsx
+++ b/packages/ui/src/components/EditableText/EditableText.tsx
@@ -135,6 +135,10 @@ interface BaseProps extends Omit<TextFieldProps, 'label'> {
    * Optional suffix to append to the text when it is not in editing mode
    */
   textSuffix?: string;
+  /**
+   * Whether this EditableText is used as a breadcrumb
+   */
+  isBreadcrumb?: boolean;
 }
 
 interface PropsWithoutLink extends BaseProps {
@@ -173,6 +177,7 @@ export const EditableText = (props: EditableTextProps) => {
     disabledBreadcrumbEditButton,
     errorText,
     handleAnalyticsEvent,
+    isBreadcrumb,
     labelLink,
     onCancel,
     onEdit,
@@ -237,7 +242,7 @@ export const EditableText = (props: EditableTextProps) => {
   };
   const labelText = (
     <H1Header
-      className={classes.root}
+      className={`${classes.root} ${isBreadcrumb ? 'breadcrumb-text' : ''}`}
       data-qa-editable-text
       title={`${text}${textSuffix ?? ''}`}
     />
@@ -272,7 +277,9 @@ export const EditableText = (props: EditableTextProps) => {
         <TextField
           {...rest}
           inputProps={{
-            className: classes.input,
+            className: `${classes.input} ${
+              isBreadcrumb ? 'breadcrumb-text' : ''
+            }`,
           }}
           InputProps={{ className: classes.inputRoot }}
           // eslint-disable-next-line
diff --git a/packages/ui/src/foundations/themes/index.ts b/packages/ui/src/foundations/themes/index.ts
index 71fbe99a51b..5be1185690a 100644
--- a/packages/ui/src/foundations/themes/index.ts
+++ b/packages/ui/src/foundations/themes/index.ts
@@ -33,6 +33,7 @@ import type {
   GlobalFooterTypes as GlobalFooterTypesLight,
   GlobalHeaderTypes,
   InteractionTypes as InteractionTypesLight,
+  BreadcrumbTypes,
   RadiusTypes,
   SearchTypes as SearchTypesLight,
   SideNavigationTypes as SideNavigationTypesLight,
@@ -143,6 +144,7 @@ declare module '@mui/material/styles/createTheme' {
       //  ---- Global tokens: theme agnostic ----
       border: BorderTypes;
       borderRadius: BorderRadiusTypes;
+      breadcrumb: BreadcrumbTypes;
       calendar: CalendarTypes;
       chart: ChartTypes;
       color: ColorTypes;
@@ -187,6 +189,7 @@ declare module '@mui/material/styles/createTheme' {
       border?: BorderTypes;
       //  ---- Global tokens: theme agnostic ----
       borderRadius?: BorderRadiusTypes;
+      breadcrumb?: BreadcrumbTypes;
       calendar?: CalendarTypes;
       chart?: ChartTypes;
       color?: ColorTypes;
diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts
index fdac84fd8f9..9606bd053dd 100644
--- a/packages/ui/src/foundations/themes/light.ts
+++ b/packages/ui/src/foundations/themes/light.ts
@@ -4,6 +4,7 @@ import {
   Background,
   Border,
   BorderRadius,
+  Breadcrumb,
   Button,
   Calendar,
   Chart,
@@ -1886,6 +1887,7 @@ export const lightTheme: ThemeOptions = {
     background: Background,
     border: Border,
     borderRadius: BorderRadius,
+    breadcrumb: Breadcrumb,
     calendar: Calendar,
     chart: Chart,
     color: Color,

From c75fcf3496ccef4b4a71df826d785810faeabec7 Mon Sep 17 00:00:00 2001
From: Bill Coloe <bcoloe@akamai.com>
Date: Tue, 11 Mar 2025 16:57:42 -0500
Subject: [PATCH 02/11] Tokenize previous breadcrumb

---
 .../src/components/Breadcrumb/Crumbs.styles.tsx       | 11 ++++++-----
 .../src/components/Breadcrumb/FinalCrumb.styles.tsx   |  3 ++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/manager/src/components/Breadcrumb/Crumbs.styles.tsx b/packages/manager/src/components/Breadcrumb/Crumbs.styles.tsx
index 241f6705b90..471e098df54 100644
--- a/packages/manager/src/components/Breadcrumb/Crumbs.styles.tsx
+++ b/packages/manager/src/components/Breadcrumb/Crumbs.styles.tsx
@@ -3,23 +3,24 @@ import { styled } from '@mui/material';
 
 export const StyledTypography = styled(Typography, {
   label: 'StyledTypography',
-})(({}) => ({
+})(({ theme }) => ({
   '&:hover': {
     textDecoration: 'underline',
   },
-  fontSize: '1.125rem',
+  fontSize: '1rem',
   lineHeight: 'normal',
   textTransform: 'capitalize',
   whiteSpace: 'nowrap',
+  color: theme.tokens.breadcrumb.LastItem.Text,
 }));
 
 export const StyledSlashTypography = styled(Typography, {
   label: 'StyledSlashTypography',
 })(({ theme }) => ({
   color: theme.textColors.tableHeader,
-  fontSize: 20,
-  marginLeft: 2,
-  marginRight: 2,
+  fontSize: 16,
+  marginLeft: 4,
+  marginRight: 4,
 }));
 
 export const StyledDiv = styled('div', { label: 'StyledDiv' })({
diff --git a/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx b/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx
index 521cfe32f65..f200dac2631 100644
--- a/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx
+++ b/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx
@@ -14,10 +14,10 @@ export const StyledEditableText = styled(EditableText, {
   '& > div': {
     width: 250,
   },
-  marginLeft: `-${theme.spacing()}`,
   '& .breadcrumb-text': {
     color: theme.tokens.breadcrumb.Normal.Text.Default,
     fontSize: '1rem !important',
+    paddingLeft: 0,
   },
 }));
 
@@ -25,6 +25,7 @@ export const StyledH1Header = styled(H1Header, { label: 'StyledH1Header' })(
   ({ theme }) => ({
     color: theme.tokens.breadcrumb.Normal.Text.Default,
     fontSize: '1rem',
+    paddingLeft: 0,
     textTransform: 'capitalize',
     [theme.breakpoints.up('lg')]: {
       fontSize: '1rem',

From 71058196586125b8dd9c03086b27f1f323919f75 Mon Sep 17 00:00:00 2001
From: Bill Coloe <bcoloe@akamai.com>
Date: Tue, 11 Mar 2025 17:19:20 -0500
Subject: [PATCH 03/11] Adjust breadcrumb bar height

---
 .../manager/src/components/Breadcrumb/Breadcrumb.styles.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx b/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx
index b0007d7101b..3cf0c5023f0 100644
--- a/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx
+++ b/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx
@@ -4,7 +4,7 @@ export const StyledPreContainerDiv = styled('div', { label: 'StyledDiv' })({
   alignItems: 'center',
   display: 'flex',
   flexWrap: 'wrap',
-  minHeight: 48,
+  minHeight: 34,
 });
 
 export const StyledRootDiv = styled('div', { label: 'StyledRootDiv' })(

From a192a2e4e809a193381e90c4ee8e589c090be99c Mon Sep 17 00:00:00 2001
From: Bill Coloe <bcoloe@akamai.com>
Date: Wed, 12 Mar 2025 14:40:46 -0500
Subject: [PATCH 04/11] Add dark mode Breadcrumb token

---
 packages/ui/src/foundations/themes/dark.ts  | 2 ++
 packages/ui/src/foundations/themes/index.ts | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts
index fb38938f1a3..2b6f1834192 100644
--- a/packages/ui/src/foundations/themes/dark.ts
+++ b/packages/ui/src/foundations/themes/dark.ts
@@ -4,6 +4,7 @@ import {
   Background,
   Badge,
   Border,
+  Breadcrumb,
   Button,
   Calendar,
   Color,
@@ -1062,6 +1063,7 @@ export const darkTheme: ThemeOptions = {
     action: Action,
     background: Background,
     border: Border,
+    breadcrumb: Breadcrumb,
     calendar: Calendar,
     content: Content,
     dropdown: Dropdown,
diff --git a/packages/ui/src/foundations/themes/index.ts b/packages/ui/src/foundations/themes/index.ts
index 5be1185690a..788fad9948e 100644
--- a/packages/ui/src/foundations/themes/index.ts
+++ b/packages/ui/src/foundations/themes/index.ts
@@ -33,7 +33,7 @@ import type {
   GlobalFooterTypes as GlobalFooterTypesLight,
   GlobalHeaderTypes,
   InteractionTypes as InteractionTypesLight,
-  BreadcrumbTypes,
+  BreadcrumbTypes as BreadcrumbTypesLight,
   RadiusTypes,
   SearchTypes as SearchTypesLight,
   SideNavigationTypes as SideNavigationTypesLight,
@@ -46,6 +46,7 @@ import type {
   ActionTypes as ActionTypesDark,
   BackgroundTypes as BackgroundTypesDark,
   BorderTypes as BorderTypesDark,
+  BreadcrumbTypes as BreadcrumbTypesDark,
   CalendarTypes as CalendarTypesDark,
   ContentTypes as ContentTypesDark,
   DropdownTypes as DropdownTypesDark,
@@ -65,6 +66,7 @@ type AccentTypes = MergeTypes<AccentTypesLight, AccentTypesDark>;
 type ActionTypes = MergeTypes<ActionTypesLight, ActionTypesDark>;
 type BackgroundTypes = MergeTypes<BackgroundTypesLight, BackgroundTypesDark>;
 type BorderTypes = MergeTypes<BorderTypesLight, BorderTypesDark>;
+type BreadcrumbTypes = MergeTypes<BreadcrumbTypesLight, BreadcrumbTypesDark>;
 type ContentTypes = MergeTypes<ContentTypesLight, ContentTypesDark>;
 type ElevationTypes = MergeTypes<ElevationTypesLight, ElevationTypesDark>;
 type CalendarTypes = MergeTypes<CalendarTypesLight, CalendarTypesDark>;

From 2c9b8663ef5c3e3975dc888afba3b6305d74dbaa Mon Sep 17 00:00:00 2001
From: Bill Coloe <bcoloe@akamai.com>
Date: Thu, 13 Mar 2025 11:21:48 -0500
Subject: [PATCH 05/11] Update Breadcrumb stories

---
 .../Breadcrumb/Breadcrumb.stories.tsx         | 46 +++++++++++++++++++
 .../src/components/Breadcrumb/Crumbs.tsx      |  2 +-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/packages/manager/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/manager/src/components/Breadcrumb/Breadcrumb.stories.tsx
index a50d3a4206f..4edad9d654b 100644
--- a/packages/manager/src/components/Breadcrumb/Breadcrumb.stories.tsx
+++ b/packages/manager/src/components/Breadcrumb/Breadcrumb.stories.tsx
@@ -1,12 +1,57 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { Chip } from '@linode/ui';
 
 import { Breadcrumb } from './Breadcrumb';
 
+const withBadgeCrumbs = [
+  {
+    position: 3,
+    label: (
+      <>
+        <span>test</span>
+        <span
+          style={{
+            display: 'inline-block',
+            marginLeft: '4px',
+            textDecoration: 'none',
+          }}
+        >
+          <Chip label="beta" component="span" />
+        </span>
+      </>
+    ),
+  },
+];
+
+const noBadgeCrumbs = [
+  {
+    position: 3,
+    label: <span>test</span>,
+  },
+];
+
 const meta: Meta<typeof Breadcrumb> = {
   component: Breadcrumb,
   title: 'Foundations/Breadcrumb',
+  argTypes: {
+    crumbOverrides: {
+      options: ['With Badge', 'No Badge'],
+      mapping: {
+        'With Badge': withBadgeCrumbs,
+        'No Badge': noBadgeCrumbs,
+      },
+      control: {
+        type: 'radio',
+        labels: {
+          'With Badge': 'Show Beta Badge',
+          'No Badge': 'Hide Beta Badge',
+        },
+      },
+      defaultValue: 'No Badge',
+    },
+  },
 };
 
 type Story = StoryObj<typeof Breadcrumb>;
@@ -20,6 +65,7 @@ export const Default: Story = {
       onEdit: async () => action('onEdit'),
     },
     pathname: '/linodes/9872893679817/test/lastcrumb',
+    crumbOverrides: noBadgeCrumbs,
   },
   render: (args) => <Breadcrumb {...args} />,
 };
diff --git a/packages/manager/src/components/Breadcrumb/Crumbs.tsx b/packages/manager/src/components/Breadcrumb/Crumbs.tsx
index 06a0957d235..fcf75480000 100644
--- a/packages/manager/src/components/Breadcrumb/Crumbs.tsx
+++ b/packages/manager/src/components/Breadcrumb/Crumbs.tsx
@@ -11,7 +11,7 @@ import { FinalCrumbPrefix } from './FinalCrumbPrefix';
 import type { EditableProps, LabelProps } from './types';
 
 export interface CrumbOverridesProps {
-  label?: string;
+  label?: string | React.ReactNode;
   linkTo?: LinkProps['to'];
   noCap?: boolean;
   position: number;

From 8276addcf697fa96495008174338d25cf7d457aa Mon Sep 17 00:00:00 2001
From: Bill Coloe <bcoloe@akamai.com>
Date: Thu, 13 Mar 2025 11:41:36 -0500
Subject: [PATCH 06/11] Added changeset: Updated Breadcrumb component to
 conform to Akamai Design System specs

---
 .../manager/.changeset/pr-11841-changed-1741884096366.md     | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-11841-changed-1741884096366.md

diff --git a/packages/manager/.changeset/pr-11841-changed-1741884096366.md b/packages/manager/.changeset/pr-11841-changed-1741884096366.md
new file mode 100644
index 00000000000..f40405718e9
--- /dev/null
+++ b/packages/manager/.changeset/pr-11841-changed-1741884096366.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Updated Breadcrumb component to conform to Akamai Design System specs ([#11841](https://github.com/linode/manager/pull/11841))

From afcd9f9afd7042bde09297619f81fd0f87dd2e47 Mon Sep 17 00:00:00 2001
From: Bill Coloe <bcoloe@akamai.com>
Date: Tue, 18 Mar 2025 15:25:01 -0500
Subject: [PATCH 07/11] Use cx utility for cleaner class names in
 EditableText.tsx, Improve class name handling in Crumbs

---
 .../Breadcrumb/FinalCrumb.styles.tsx          |  5 ----
 .../components/EditableText/EditableText.tsx  | 23 +++++++++++--------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx b/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx
index f200dac2631..6b08b9cfb51 100644
--- a/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx
+++ b/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx
@@ -14,11 +14,6 @@ export const StyledEditableText = styled(EditableText, {
   '& > div': {
     width: 250,
   },
-  '& .breadcrumb-text': {
-    color: theme.tokens.breadcrumb.Normal.Text.Default,
-    fontSize: '1rem !important',
-    paddingLeft: 0,
-  },
 }));
 
 export const StyledH1Header = styled(H1Header, { label: 'StyledH1Header' })(
diff --git a/packages/ui/src/components/EditableText/EditableText.tsx b/packages/ui/src/components/EditableText/EditableText.tsx
index ee15ae51368..fff6314000e 100644
--- a/packages/ui/src/components/EditableText/EditableText.tsx
+++ b/packages/ui/src/components/EditableText/EditableText.tsx
@@ -13,7 +13,7 @@ import type { TextFieldProps } from '../TextField';
 import type { Theme } from '@mui/material/styles';
 import type { PropsWithChildren } from 'react';
 
-const useStyles = makeStyles<void, 'editIcon' | 'icon'>()(
+const useStyles = makeStyles<void, 'editIcon' | 'icon' | 'breadcrumbText'>()(
   (theme: Theme, _params, classes) => ({
     button: {
       '&[aria-label="Save"]': {
@@ -99,6 +99,11 @@ const useStyles = makeStyles<void, 'editIcon' | 'icon'>()(
         textDecoration: 'underline !important',
       },
     },
+    breadcrumbText: {
+      color: theme.tokens.breadcrumb.Normal.Text.Default,
+      fontSize: '1rem !important',
+      paddingLeft: 0,
+    },
   })
 );
 
@@ -167,7 +172,7 @@ interface PropsWithLink extends BaseProps {
 export type EditableTextProps = PropsWithLink | PropsWithoutLink;
 
 export const EditableText = (props: EditableTextProps) => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const [isEditing, setIsEditing] = React.useState(Boolean(props.errorText));
   const [text, setText] = React.useState(props.text);
@@ -242,7 +247,7 @@ export const EditableText = (props: EditableTextProps) => {
   };
   const labelText = (
     <H1Header
-      className={`${classes.root} ${isBreadcrumb ? 'breadcrumb-text' : ''}`}
+      className={cx(classes.root, { [classes.breadcrumbText]: isBreadcrumb })}
       data-qa-editable-text
       title={`${text}${textSuffix ?? ''}`}
     />
@@ -250,7 +255,7 @@ export const EditableText = (props: EditableTextProps) => {
 
   return !isEditing && !errorText ? (
     <div
-      className={`${classes.container} ${classes.initial} ${className}`}
+      className={cx(classes.container, classes.initial, className)}
       data-testid={'editable-text'}
     >
       {!!labelLink ? (
@@ -263,7 +268,7 @@ export const EditableText = (props: EditableTextProps) => {
       {/** pencil icon */}
       <Button
         aria-label={`Edit ${text}`}
-        className={`${classes.button} ${classes.editIcon}`}
+        className={cx(classes.button, classes.editIcon)}
         data-qa-edit-button
         disabled={disabledBreadcrumbEditButton}
         onClick={openEdit}
@@ -273,13 +278,13 @@ export const EditableText = (props: EditableTextProps) => {
     </div>
   ) : (
     <ClickAwayListener mouseEvent="onMouseDown" onClickAway={cancelEditing}>
-      <div className={`${classes.container} ${className}`} data-qa-edit-field>
+      <div className={cx(classes.container, className)} data-qa-edit-field>
         <TextField
           {...rest}
           inputProps={{
-            className: `${classes.input} ${
-              isBreadcrumb ? 'breadcrumb-text' : ''
-            }`,
+            className: cx(classes.input, {
+              [classes.breadcrumbText]: isBreadcrumb,
+            }),
           }}
           InputProps={{ className: classes.inputRoot }}
           // eslint-disable-next-line

From a08b5c4e1adea1d4375ab780d9a5936e77d4d0bb Mon Sep 17 00:00:00 2001
From: Bill Coloe <bcoloe@akamai.com>
Date: Wed, 19 Mar 2025 11:11:01 -0500
Subject: [PATCH 08/11] Fix conflicts

---
 packages/manager/src/components/Breadcrumb/Crumbs.styles.tsx    | 2 +-
 .../manager/src/components/Breadcrumb/FinalCrumb.styles.tsx     | 2 +-
 packages/ui/src/components/EditableText/EditableText.tsx        | 2 +-
 packages/ui/src/foundations/themes/dark.ts                      | 1 -
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/manager/src/components/Breadcrumb/Crumbs.styles.tsx b/packages/manager/src/components/Breadcrumb/Crumbs.styles.tsx
index 471e098df54..8536c2dffd8 100644
--- a/packages/manager/src/components/Breadcrumb/Crumbs.styles.tsx
+++ b/packages/manager/src/components/Breadcrumb/Crumbs.styles.tsx
@@ -11,7 +11,7 @@ export const StyledTypography = styled(Typography, {
   lineHeight: 'normal',
   textTransform: 'capitalize',
   whiteSpace: 'nowrap',
-  color: theme.tokens.breadcrumb.LastItem.Text,
+  color: theme.tokens.component.Breadcrumb.LastItem.Text,
 }));
 
 export const StyledSlashTypography = styled(Typography, {
diff --git a/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx b/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx
index 6b08b9cfb51..0fd695b3110 100644
--- a/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx
+++ b/packages/manager/src/components/Breadcrumb/FinalCrumb.styles.tsx
@@ -18,7 +18,7 @@ export const StyledEditableText = styled(EditableText, {
 
 export const StyledH1Header = styled(H1Header, { label: 'StyledH1Header' })(
   ({ theme }) => ({
-    color: theme.tokens.breadcrumb.Normal.Text.Default,
+    color: theme.tokens.component.Breadcrumb.Normal.Text.Default,
     fontSize: '1rem',
     paddingLeft: 0,
     textTransform: 'capitalize',
diff --git a/packages/ui/src/components/EditableText/EditableText.tsx b/packages/ui/src/components/EditableText/EditableText.tsx
index fff6314000e..541bab797c9 100644
--- a/packages/ui/src/components/EditableText/EditableText.tsx
+++ b/packages/ui/src/components/EditableText/EditableText.tsx
@@ -100,7 +100,7 @@ const useStyles = makeStyles<void, 'editIcon' | 'icon' | 'breadcrumbText'>()(
       },
     },
     breadcrumbText: {
-      color: theme.tokens.breadcrumb.Normal.Text.Default,
+      color: theme.tokens.component.Breadcrumb.Normal.Text.Default,
       fontSize: '1rem !important',
       paddingLeft: 0,
     },
diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts
index 73b53232755..843623a573d 100644
--- a/packages/ui/src/foundations/themes/dark.ts
+++ b/packages/ui/src/foundations/themes/dark.ts
@@ -4,7 +4,6 @@ import {
   Background,
   Badge,
   Border,
-  Breadcrumb,
   Button,
   Component,
   Color,

From 4f38163e53b39f43753ba965894e65d246fe92c9 Mon Sep 17 00:00:00 2001
From: Bill Coloe <bcoloe@akamai.com>
Date: Wed, 19 Mar 2025 11:27:40 -0500
Subject: [PATCH 09/11] Fix spacing

---
 .../components/Breadcrumb/Breadcrumb.styles.tsx   | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx b/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx
index 3cf0c5023f0..32f212892a7 100644
--- a/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx
+++ b/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx
@@ -1,11 +1,14 @@
 import { styled } from '@mui/material';
 
-export const StyledPreContainerDiv = styled('div', { label: 'StyledDiv' })({
-  alignItems: 'center',
-  display: 'flex',
-  flexWrap: 'wrap',
-  minHeight: 34,
-});
+export const StyledPreContainerDiv = styled('div', { label: 'StyledDiv' })(
+  ({ theme }) => ({
+    alignItems: 'center',
+    display: 'flex',
+    flexWrap: 'wrap',
+    minHeight: 34,
+    marginBottom: theme.spacingFunction(6),
+  })
+);
 
 export const StyledRootDiv = styled('div', { label: 'StyledRootDiv' })(
   ({ theme }) => ({

From d124f444a3bbf2f271c9300b4c5424d9133d52e2 Mon Sep 17 00:00:00 2001
From: Bill Coloe <bcoloe@akamai.com>
Date: Wed, 19 Mar 2025 11:47:24 -0500
Subject: [PATCH 10/11] Fix overall height

---
 .../manager/src/components/Breadcrumb/Breadcrumb.styles.tsx  | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx b/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx
index 32f212892a7..7aca2810756 100644
--- a/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx
+++ b/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx
@@ -1,12 +1,11 @@
 import { styled } from '@mui/material';
 
 export const StyledPreContainerDiv = styled('div', { label: 'StyledDiv' })(
-  ({ theme }) => ({
+  () => ({
     alignItems: 'center',
     display: 'flex',
     flexWrap: 'wrap',
-    minHeight: 34,
-    marginBottom: theme.spacingFunction(6),
+    minHeight: 48,
   })
 );
 

From 3d1afc8475c0c4c8a92ce7a3d5ce786e0e485a34 Mon Sep 17 00:00:00 2001
From: Bill Coloe <bcoloe@akamai.com>
Date: Wed, 19 Mar 2025 11:49:29 -0500
Subject: [PATCH 11/11] Use existing PreContainerDiv style

---
 .../components/Breadcrumb/Breadcrumb.styles.tsx    | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx b/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx
index 7aca2810756..b0007d7101b 100644
--- a/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx
+++ b/packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx
@@ -1,13 +1,11 @@
 import { styled } from '@mui/material';
 
-export const StyledPreContainerDiv = styled('div', { label: 'StyledDiv' })(
-  () => ({
-    alignItems: 'center',
-    display: 'flex',
-    flexWrap: 'wrap',
-    minHeight: 48,
-  })
-);
+export const StyledPreContainerDiv = styled('div', { label: 'StyledDiv' })({
+  alignItems: 'center',
+  display: 'flex',
+  flexWrap: 'wrap',
+  minHeight: 48,
+});
 
 export const StyledRootDiv = styled('div', { label: 'StyledRootDiv' })(
   ({ theme }) => ({