diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png
index cb94ac0fc4b..1fc03a4403f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png
index 185a7e3f18a..4a62d32f172 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png
index 09e7ca679f2..528219e07eb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png
new file mode 100644
index 00000000000..777650ce9d4
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png
index 3f944d8ccc3..19745e00147 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png
index a0d83fb343c..1ffcc811e64 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png
index 15d957246d6..1c02936bed1 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_High_Contrast.png
new file mode 100644
index 00000000000..3311063f548
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png
index 38293d03752..ce7ccc61c8f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png
index 517308bc5a2..c3e8f6b0c11 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png
index 3eb1f4d1329..268f6eb6e2b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png
new file mode 100644
index 00000000000..3073f24a89d
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png
index 07a077d060e..a02e41efb14 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png
index 422b1ef9920..646e5d28834 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png
index 694b893e800..311b96b8f8b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png
index 45ebf7cec90..3ea893e5a41 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png
index 605102cbce7..3dea637c47e 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_High_Contrast.png
new file mode 100644
index 00000000000..7547be748e7
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png
index 5860eed1d89..09bfde524fb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png
index 99d7017b6fc..d1257b9077a 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png
index 0a441bebe7b..c035592cbc6 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png
index fdcd3e35ad2..630d94ef13b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png
index 90b1dbe21bc..163ba3d1935 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png
index 3c55f4206b3..f15ca4e6363 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png
index 1cd89b52a92..588ed9a1076 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_High_Contrast.png
new file mode 100644
index 00000000000..2e776d02dd1
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png
index 4f86fcc10a8..9de72e241b9 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png
index d8d72e3039d..479db786e2e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png
index c8952125e56..5f814c44ea3 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_High_Contrast.png
new file mode 100644
index 00000000000..c42d198badf
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png
index 55ae5a7f7e2..a2eec73f935 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png
index 248abcc1f5c..dda7d21a167 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png
index 1a2c749526b..9c3d9742e2e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png
new file mode 100644
index 00000000000..0cd7f451105
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png
index 9b5b0c2e29a..741491351a5 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png
index bef583f0761..3c5a9a2314d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png
index a007c7cb121..ce2e1f522f1 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png
index fc18ba36cec..4c9e6abe61c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png
index dabfbffe70a..57b5903e431 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_High_Contrast.png
new file mode 100644
index 00000000000..3c0be029b03
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png
index 66ac1f3036b..58d45ad8518 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png
index 4d38e32e2b6..567f6ea7acc 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png
index 9726d6a375f..c98e2ded4a7 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png
index 9763626cfb0..dc8463fdfb3 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png differ
diff --git a/packages/eui/src-docs/src/views/comment/comment_props.tsx b/packages/eui/src-docs/src/views/comment/comment_props.tsx
index d81a6c725ce..8059a133a62 100644
--- a/packages/eui/src-docs/src/views/comment/comment_props.tsx
+++ b/packages/eui/src-docs/src/views/comment/comment_props.tsx
@@ -2,7 +2,6 @@ import React, { ReactNode } from 'react';
 import { css } from '@emotion/react';
 
 import {
-  EuiPanel,
   EuiButtonIcon,
   EuiCommentList,
   EuiComment,
@@ -50,11 +49,7 @@ export default ({ snippet }: { snippet: ReactNode }) => {
   );
 
   return (
-    <EuiPanel
-      color="transparent"
-      paddingSize="none"
-      style={{ maxWidth: '540px' }}
-    >
+    <div style={{ maxWidth: '540px' }}>
       <EuiCommentList>
         <EuiComment username="avatar" timelineAvatarAriaLabel="Avatar">
           <div
@@ -149,6 +144,6 @@ export default ({ snippet }: { snippet: ReactNode }) => {
           {snippet}
         </EuiCodeBlock>
       </EuiAccordion>
-    </EuiPanel>
+    </div>
   );
 };
diff --git a/packages/eui/src/components/avatar/avatar.styles.ts b/packages/eui/src/components/avatar/avatar.styles.ts
index 9be85116d9c..bdd170fcfee 100644
--- a/packages/eui/src/components/avatar/avatar.styles.ts
+++ b/packages/eui/src/components/avatar/avatar.styles.ts
@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, logicalTextAlignCSS } from '../../global_styling';
+import { logicalSizeCSS, mathWithUnits } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
 const _avatarSize = ({
@@ -18,9 +18,7 @@ const _avatarSize = ({
   fontSize: string;
 }) => {
   return `
-    ${logicalCSS('width', size)};
-    ${logicalCSS('height', size)};
-    line-height: ${size};
+    ${logicalSizeCSS(size)};
     font-size: ${fontSize};
   `;
 };
@@ -36,8 +34,7 @@ export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => ({
     vertical-align: middle;
     background-size: cover;
     background-color: ${euiTheme.colors.lightShade};
-    ${logicalTextAlignCSS('center')}
-    ${logicalCSS('overflow-x', 'hidden')}
+    overflow: hidden;
     /* Explicitly state weight so it doesn't get overridden by inheritance */
     font-weight: ${euiTheme.font.weight.medium};
   `,
@@ -69,19 +66,19 @@ export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => ({
   m: css(
     _avatarSize({
       size: euiTheme.size.xl,
-      fontSize: `calc(${euiTheme.size.base} * 0.9)`,
+      fontSize: mathWithUnits(euiTheme.size.base, (x) => x * 0.9),
     })
   ),
   l: css(
     _avatarSize({
       size: euiTheme.size.xxl,
-      fontSize: `calc(${euiTheme.size.l} * 0.8)`,
+      fontSize: mathWithUnits(euiTheme.size.l, (x) => x * 0.8),
     })
   ),
   xl: css(
     _avatarSize({
-      size: `calc(${euiTheme.size.base} * 4)`,
-      fontSize: `calc(${euiTheme.size.xl} * 0.8)`,
+      size: euiTheme.size.xxxxl,
+      fontSize: mathWithUnits(euiTheme.size.xl, (x) => x * 0.8),
     })
   ),
   // Casing
diff --git a/packages/eui/src/components/comment_list/comment_event.styles.ts b/packages/eui/src/components/comment_list/comment_event.styles.ts
index 8ef8471d794..ae41884cbe0 100644
--- a/packages/eui/src/components/comment_list/comment_event.styles.ts
+++ b/packages/eui/src/components/comment_list/comment_event.styles.ts
@@ -9,6 +9,7 @@
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
 import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
 export const euiCommentEventStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -28,7 +29,16 @@ export const euiCommentEventHeaderStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
   return {
-    euiCommentEvent__header: css``,
+    euiCommentEvent__header: css`
+      ${highContrastModeStyles(euiThemeContext, {
+        // Remove duplicate high contrast panel borders
+        preferred: `
+          & > .euiPanel {
+            border: none;
+          }
+      `,
+      })}
+    `,
     border: css`
       ${logicalCSS('border-bottom-style', 'solid')}
       ${logicalCSS('border-bottom-width', euiTheme.border.width.thin)}
diff --git a/packages/eui/src/components/comment_list/comment_event.tsx b/packages/eui/src/components/comment_list/comment_event.tsx
index f0e1d464deb..a4f462a10fd 100644
--- a/packages/eui/src/components/comment_list/comment_event.tsx
+++ b/packages/eui/src/components/comment_list/comment_event.tsx
@@ -9,7 +9,7 @@
 import React, { FunctionComponent, ReactNode, useMemo } from 'react';
 import classNames from 'classnames';
 
-import { useEuiMemoizedStyles } from '../../services';
+import { useEuiMemoizedStyles, useEuiTheme } from '../../services';
 import { useEuiBorderColorCSS } from '../../global_styling';
 import { CommonProps } from '../common';
 import { IconType } from '../icon';
@@ -99,7 +99,6 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
   if (isTypeUpdate && !eventColor) {
     eventColor = 'transparent';
   }
-  const showEventBorders = isTypeRegular;
 
   const panelProps: EuiPanelProps = useMemo(
     () => ({
@@ -118,13 +117,16 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
   /**
    * Styles
    */
+  const { highContrastMode } = useEuiTheme();
+  const showEventBorders = isTypeRegular;
+  const showHighContrastBorder = isTypeUpdate && highContrastMode;
   const borderStyles = useEuiBorderColorCSS();
 
   const styles = useEuiMemoizedStyles(euiCommentEventStyles);
   const cssStyles = [
     styles.euiCommentEvent,
-    showEventBorders && styles.border,
-    showEventBorders && borderStyles[eventColor!],
+    (showEventBorders || showHighContrastBorder) && styles.border,
+    (showEventBorders || showHighContrastBorder) && borderStyles[eventColor!],
   ];
 
   const headerStyles = useEuiMemoizedStyles(euiCommentEventHeaderStyles);
diff --git a/packages/eui/src/components/comment_list/comment_list.stories.tsx b/packages/eui/src/components/comment_list/comment_list.stories.tsx
index 3dc994e160c..27c56022d1f 100644
--- a/packages/eui/src/components/comment_list/comment_list.stories.tsx
+++ b/packages/eui/src/components/comment_list/comment_list.stories.tsx
@@ -10,6 +10,8 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { EuiText } from '../text';
+import { EuiTextArea } from '../form';
+import { EuiAvatar } from '../avatar';
 import { EuiButtonIcon } from '../button';
 import { EuiBadge } from '../badge';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
@@ -109,3 +111,87 @@ export const Playground: Story = {
     ],
   },
 };
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    comments: [
+      {
+        username: 'emma',
+        timelineAvatar: <EuiAvatar name="emma" />,
+        event: 'added a comment',
+        timestamp: 'on 3rd March 2022',
+        children: 'Phishing emails have been on the rise since February',
+        actions: copyAction,
+      },
+      {
+        username: 'emma',
+        timelineAvatar: <EuiAvatar name="emma" />,
+        event: (
+          <EuiFlexGroup
+            responsive={false}
+            alignItems="center"
+            gutterSize="xs"
+            wrap
+          >
+            <EuiFlexItem grow={false}>added tags</EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiBadge>case</EuiBadge>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiBadge>phishing</EuiBadge>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiBadge>security</EuiBadge>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ),
+        timestamp: 'on 3rd March 2022',
+        eventIcon: 'tag',
+        eventIconAriaLabel: 'tag',
+      },
+      {
+        username: 'system',
+        timelineAvatar: 'dot',
+        timelineAvatarAriaLabel: 'System',
+        event: 'pushed a new incident',
+        timestamp: 'on 4th March 2022',
+        eventColor: 'danger',
+      },
+      {
+        username: 'tiago',
+        timelineAvatar: <EuiAvatar name="tiago" />,
+        event: 'added a comment',
+        timestamp: 'on 4th March 2022',
+        actions: copyAction,
+        children: 'Take a look at this Office.exe',
+      },
+      {
+        username: 'emma',
+        timelineAvatar: <EuiAvatar name="emma" />,
+        event: (
+          <>
+            marked case as <EuiBadge color="warning">In progress</EuiBadge>
+          </>
+        ),
+        timestamp: 'on 4th March 2022',
+      },
+      {
+        username: 'you',
+        timelineAvatar: (
+          <EuiAvatar name="Cat" imageUrl="https://picsum.photos/id/40/64" />
+        ),
+        children: (
+          <EuiTextArea
+            fullWidth
+            value={`Thanks Tiago for taking a look.
+
+I also found something suspicious: Update.exe`}
+            onChange={() => {}}
+          />
+        ),
+      },
+    ],
+  },
+};
diff --git a/packages/eui/src/components/steps/__snapshots__/step.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/step.test.tsx.snap
index 1198e9d88e7..b67b30d8797 100644
--- a/packages/eui/src/components/steps/__snapshots__/step.test.tsx.snap
+++ b/packages/eui/src/components/steps/__snapshots__/step.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`EuiStep is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -57,7 +57,7 @@ exports[`EuiStep props headingElement 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -128,7 +128,7 @@ exports[`EuiStep props status current is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number-current"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -199,7 +199,7 @@ exports[`EuiStep props status disabled is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number-disabled"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -237,7 +237,7 @@ exports[`EuiStep props status incomplete is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -306,7 +306,7 @@ exports[`EuiStep props status warning is rendered 1`] = `
       class="euiStepNumber emotion-euiStepNumber-s-warning"
     >
       <span
-        class="euiStepNumber__icon emotion-euiStepNumber__icon-warning"
+        class="euiStepNumber__icon emotion-euiStepNumber__icon"
         data-euiicon-type="warning"
       >
         Step 1 has warnings
@@ -345,7 +345,7 @@ exports[`EuiStep props step 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number"
+        class="euiStepNumber__number"
       >
         5
       </span>
@@ -383,7 +383,7 @@ exports[`EuiStep props titleSize 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number"
+        class="euiStepNumber__number"
       >
         1
       </span>
diff --git a/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
index 71b9c8685ea..9f6c54b5043 100644
--- a/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
+++ b/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`EuiStepHorizontal is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -45,7 +45,7 @@ exports[`EuiStepHorizontal props size m is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -72,7 +72,7 @@ exports[`EuiStepHorizontal props size s is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -142,7 +142,7 @@ exports[`EuiStepHorizontal props status current is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-current"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -192,7 +192,7 @@ exports[`EuiStepHorizontal props status disabled is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-disabled"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -221,7 +221,7 @@ exports[`EuiStepHorizontal props status disabled overrides the passed status 1`]
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-disabled"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -248,7 +248,7 @@ exports[`EuiStepHorizontal props status incomplete is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -295,7 +295,7 @@ exports[`EuiStepHorizontal props status warning is rendered 1`] = `
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-warning-euiStepHorizontal__number"
   >
     <span
-      class="euiStepNumber__icon emotion-euiStepNumber__icon-warning"
+      class="euiStepNumber__icon emotion-euiStepNumber__icon"
       data-euiicon-type="warning"
     >
       Step 1 has warnings
@@ -323,7 +323,7 @@ exports[`EuiStepHorizontal props step 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+      class="euiStepNumber__number"
     >
       5
     </span>
@@ -350,7 +350,7 @@ exports[`EuiStepHorizontal props title 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+      class="euiStepNumber__number"
     >
       1
     </span>
diff --git a/packages/eui/src/components/steps/__snapshots__/step_number.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/step_number.test.tsx.snap
index 4ce02e0d6ad..15cac627620 100644
--- a/packages/eui/src/components/steps/__snapshots__/step_number.test.tsx.snap
+++ b/packages/eui/src/components/steps/__snapshots__/step_number.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`EuiStepNumber is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
-    class="euiStepNumber__number emotion-euiStepNumber__number"
+    class="euiStepNumber__number"
   />
 </span>
 `;
@@ -42,7 +42,7 @@ exports[`EuiStepNumber props status current is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
-    class="euiStepNumber__number emotion-euiStepNumber__number-current"
+    class="euiStepNumber__number"
   >
     1
   </span>
@@ -73,7 +73,7 @@ exports[`EuiStepNumber props status disabled is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
-    class="euiStepNumber__number emotion-euiStepNumber__number-disabled"
+    class="euiStepNumber__number"
   >
     1
   </span>
@@ -91,7 +91,7 @@ exports[`EuiStepNumber props status incomplete is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
-    class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+    class="euiStepNumber__number"
   >
     1
   </span>
@@ -120,7 +120,7 @@ exports[`EuiStepNumber props status warning is rendered 1`] = `
   class="euiStepNumber emotion-euiStepNumber-s-warning"
 >
   <span
-    class="euiStepNumber__icon emotion-euiStepNumber__icon-warning"
+    class="euiStepNumber__icon emotion-euiStepNumber__icon"
     data-euiicon-type="warning"
   >
     Step 1 has warnings
@@ -139,7 +139,7 @@ exports[`EuiStepNumber props titleSize is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
-    class="euiStepNumber__number emotion-euiStepNumber__number"
+    class="euiStepNumber__number"
   >
     1
   </span>
diff --git a/packages/eui/src/components/steps/__snapshots__/steps.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/steps.test.tsx.snap
index a9f3ac0e7e2..44a3c1318fa 100644
--- a/packages/eui/src/components/steps/__snapshots__/steps.test.tsx.snap
+++ b/packages/eui/src/components/steps/__snapshots__/steps.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           1
         </span>
@@ -57,7 +57,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           2
         </span>
@@ -92,7 +92,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+          class="euiStepNumber__number"
         >
           3
         </span>
@@ -136,7 +136,7 @@ exports[`EuiSteps renders steps 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           1
         </span>
@@ -171,7 +171,7 @@ exports[`EuiSteps renders steps 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           2
         </span>
@@ -206,7 +206,7 @@ exports[`EuiSteps renders steps 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+          class="euiStepNumber__number"
         >
           3
         </span>
@@ -250,7 +250,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           10
         </span>
@@ -285,7 +285,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           11
         </span>
@@ -320,7 +320,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+          class="euiStepNumber__number"
         >
           12
         </span>
@@ -364,7 +364,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           1
         </span>
@@ -399,7 +399,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           2
         </span>
@@ -434,7 +434,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+          class="euiStepNumber__number"
         >
           3
         </span>
diff --git a/packages/eui/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
index 346c7965a05..d5521d197fb 100644
--- a/packages/eui/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
+++ b/packages/eui/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-current"
+          class="euiStepNumber__number"
         >
           2
         </span>
@@ -80,7 +80,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+          class="euiStepNumber__number"
         >
           3
         </span>
@@ -111,7 +111,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-disabled"
+          class="euiStepNumber__number"
         >
           4
         </span>
diff --git a/packages/eui/src/components/steps/step.styles.ts b/packages/eui/src/components/steps/step.styles.ts
index 78e8fc89861..75a9fc75406 100644
--- a/packages/eui/src/components/steps/step.styles.ts
+++ b/packages/eui/src/components/steps/step.styles.ts
@@ -25,51 +25,47 @@ export const euiStepStyles = (euiThemeContext: UseEuiTheme) => {
 
   // the vertical line is centered on the number, so we need to offset the line
   // by half of the number size & half of the line size to center it
-  const lineStartPosition = mathWithUnits(
-    [euiStep.numberSize, euiTheme.border.width.thick],
-    (x, y) => x / 2 - y / 2
-  );
-  const lineEndPosition = mathWithUnits(
-    [euiStep.numberSize, euiTheme.border.width.thick],
-    (x, y) => x / 2 + y / 2
-  );
-
-  const lineGradient = `linear-gradient(to right,
-    transparent 0,
-    transparent ${lineStartPosition},
-    ${euiTheme.border.color} ${lineStartPosition},
-    ${euiTheme.border.color} ${lineEndPosition},
-    transparent ${lineEndPosition},
-    transparent 100%)`;
+  const getLeftPosition = (numberSize: string) =>
+    mathWithUnits(
+      [numberSize, euiTheme.border.width.thick],
+      (x, y) => x / 2 - y / 2
+    );
 
   return {
     euiStep: css`
+      position: relative;
+
       /* Create border on all but the last step */
-      &:not(:last-of-type) {
-        background-image: ${lineGradient};
-        background-repeat: no-repeat;
+      &:not(:last-of-type)::before {
+        content: '';
+        position: absolute;
+        ${logicalCSS('bottom', 0)}
+        ${logicalCSS('border-left', euiTheme.border.thick)}
       }
     `,
     // Sizes
     m: css`
-      &:not(:last-of-type) {
-        background-position: left ${euiStep.numberSize};
+      &:not(:last-of-type)::before {
+        ${logicalCSS('top', euiStep.numberSize)}
+        ${logicalCSS('left', getLeftPosition(euiStep.numberSize))}
       }
     `,
     s: css`
-      &:not(:last-of-type) {
-        background-position: left ${euiStep.numberSize};
+      &:not(:last-of-type)::before {
+        ${logicalCSS('top', euiStep.numberSize)}
+        ${logicalCSS('left', getLeftPosition(euiStep.numberSize))}
       }
     `,
     xs: css`
-      &:not(:last-of-type) {
-        /* Adjust the line to be centered on the smaller number */
-        background-position: -${euiTheme.size.xs} ${euiStep.numberXSSize};
+      &:not(:last-of-type)::before {
+        ${logicalCSS('top', euiStep.numberXSSize)}
+        ${logicalCSS('left', getLeftPosition(euiStep.numberXSSize))}
       }
     `,
     xxs: css`
-      &:not(:last-of-type) {
-        background-position: -${euiTheme.size.s} ${euiStep.numberXXSSize};
+      &:not(:last-of-type)::before {
+        ${logicalCSS('top', euiStep.numberXXSSize)}
+        ${logicalCSS('left', getLeftPosition(euiStep.numberXXSSize))}
       }
     `,
   };
diff --git a/packages/eui/src/components/steps/step_horizontal.styles.ts b/packages/eui/src/components/steps/step_horizontal.styles.ts
index ef1a7b11460..41978d6edaa 100644
--- a/packages/eui/src/components/steps/step_horizontal.styles.ts
+++ b/packages/eui/src/components/steps/step_horizontal.styles.ts
@@ -10,8 +10,9 @@ import { css } from '@emotion/react';
 import { UseEuiTheme, makeHighContrastColor } from '../../services';
 import {
   euiBreakpoint,
+  logicalCSS,
   logicalShorthandCSS,
-  euiFocusRing,
+  euiOutline,
   euiCanAnimate,
   mathWithUnits,
 } from '../../global_styling/';
@@ -19,7 +20,7 @@ import { euiTitle } from '../title/title.styles';
 import { euiStepVariables } from './step.styles';
 
 export const euiStepHorizontalStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, highContrastMode } = euiThemeContext;
   const euiStep = euiStepVariables(euiTheme);
 
   /**
@@ -60,8 +61,7 @@ export const euiStepHorizontalStyles = (euiThemeContext: UseEuiTheme) => {
       &::after {
         content: '';
         position: absolute;
-        background-color: ${euiTheme.border.color};
-        block-size: ${euiTheme.border.width.thick};
+        ${logicalCSS('border-top', euiTheme.border.thick)}
         z-index: ${euiTheme.levels.content}; /* 1 */
       }
 
@@ -91,11 +91,11 @@ export const euiStepHorizontalStyles = (euiThemeContext: UseEuiTheme) => {
         outline: none;
 
         .euiStepHorizontal__number {
-          ${euiFocusRing(euiThemeContext)}
-        }
-
-        .euiStepHorizontal__number:not(:focus-visible) {
-          outline: ${euiTheme.focus.width} solid ${euiTheme.colors.darkestShade};
+          ${euiOutline(
+            euiThemeContext,
+            highContrastMode ? 0 : 'center', // Account for border in high contrast mode
+            euiTheme.colors.fullShade
+          )}
         }
       }
     `,
@@ -113,6 +113,11 @@ export const euiStepHorizontalNumberStyles = (euiThemeContext: UseEuiTheme) => {
       position: relative; /* 1 */
       z-index: ${Number(euiTheme.levels.content) + 1}; /* 1 */
 
+      /* Tweak number vertical alignment slightly */
+      .euiStepNumber__number {
+        margin-block-start: -0.5px;
+      }
+
       ${euiCanAnimate} {
         transition: all ${euiTheme.animation.fast} ease-in-out;
       }
diff --git a/packages/eui/src/components/steps/step_horizontal.tsx b/packages/eui/src/components/steps/step_horizontal.tsx
index ef71467f8d1..5bc3ab13e6e 100644
--- a/packages/eui/src/components/steps/step_horizontal.tsx
+++ b/packages/eui/src/components/steps/step_horizontal.tsx
@@ -14,7 +14,7 @@ import React, {
   MouseEventHandler,
 } from 'react';
 import { CommonProps } from '../common';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import {
   EuiStepNumber,
   EuiStepNumberProps,
@@ -80,18 +80,17 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
 
   const classes = classNames('euiStepHorizontal', className);
 
-  const euiTheme = useEuiTheme();
-  const styles = euiStepHorizontalStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiStepHorizontalStyles);
   const cssStyles = [
     styles.euiStepHorizontal,
     styles[size],
     status === 'disabled' ? styles.disabled : styles.enabled,
   ];
 
-  const numberStyles = euiStepHorizontalNumberStyles(euiTheme);
+  const numberStyles = useEuiMemoizedStyles(euiStepHorizontalNumberStyles);
   const cssNumberStyles = [numberStyles.euiStepHorizontal__number];
 
-  const titleStyles = euiStepHorizontalTitleStyles(euiTheme);
+  const titleStyles = useEuiMemoizedStyles(euiStepHorizontalTitleStyles);
   const cssTitleStyles = [
     titleStyles.euiStepHorizontal__title,
     status === 'disabled' && titleStyles.disabled,
diff --git a/packages/eui/src/components/steps/step_number.styles.ts b/packages/eui/src/components/steps/step_number.styles.ts
index 8dae030b78f..b0cc7df3586 100644
--- a/packages/eui/src/components/steps/step_number.styles.ts
+++ b/packages/eui/src/components/steps/step_number.styles.ts
@@ -15,29 +15,44 @@ import {
   euiAnimScale,
   logicalSizeCSS,
 } from '../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
-import { euiStepVariables } from './step.styles';
 import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
 
+import { euiStepVariables } from './step.styles';
+
 export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
   const euiStep = euiStepVariables(euiTheme);
 
   const createStepsNumber = (size: string, fontSize: string) => {
     return `
-      display: inline-block;
-      line-height: ${size};
-      border-radius: ${size};
+      display: flex;
+      justify-content: center;
+      align-items: center;
       ${logicalCSS('width', size)};
       ${logicalCSS('height', size)};
-      text-align: center;
-      color: ${euiTheme.colors.emptyShade};
-      background-color: ${euiTheme.colors.primary};
       font-size: ${fontSize};
       font-weight: ${euiTheme.font.weight.medium};
+      color: ${euiTheme.colors.emptyShade};
+      background-color: ${euiTheme.colors.primary};
+      border-radius: 50%;
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: `border: ${euiTheme.border.thick};`,
+      })}
     `;
   };
 
+  // euiButtonColor utils add colored borders in high contrast mode, but
+  // we want to set our own standardized border instead
+  const unsetButtonBorder = (buttonStyles: object) => ({
+    ...buttonStyles,
+    border: undefined,
+  });
+
   return {
     euiStepNumber: css`
       flex-shrink: 0;
@@ -75,12 +90,18 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     disabled: css`
       ${euiButtonFillColor(euiThemeContext, 'disabled')}
+      ${highContrastModeStyles(euiThemeContext, {
+        forced: 'opacity: 0.5;',
+      })}
     `,
     loading: css`
       background: transparent;
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: 'border: none;',
+      })}
     `,
     warning: css`
-      ${euiButtonFillColor(euiThemeContext, 'warning')}
+      ${unsetButtonBorder(euiButtonFillColor(euiThemeContext, 'warning'))}
 
       ${euiCanAnimate} {
         animation: ${euiAnimScale} ${euiTheme.animation.fast}
@@ -88,7 +109,7 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     danger: css`
-      ${euiButtonFillColor(euiThemeContext, 'danger')}
+      ${unsetButtonBorder(euiButtonFillColor(euiThemeContext, 'danger'))}
 
       ${euiCanAnimate} {
         animation: ${euiAnimScale} ${euiTheme.animation.fast}
@@ -96,7 +117,7 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     complete: css`
-      ${euiButtonFillColor(euiThemeContext, 'success')}
+      ${unsetButtonBorder(euiButtonFillColor(euiThemeContext, 'success'))}
 
       ${euiCanAnimate} {
         animation: ${euiAnimScale} ${euiTheme.animation.fast}
@@ -104,9 +125,27 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     current: css`
-      border: ${euiTheme.border.width.thick} solid ${euiTheme.colors.body};
-      box-shadow: 0 0 0 ${euiTheme.border.width.thick}
-        ${euiTheme.colors.primary};
+      transform: scale(1.1);
+      box-shadow: inset 0 0 0 ${euiTheme.border.width.thick}
+        ${euiTheme.colors.emptyShade};
+
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `
+          border: ${euiTheme.border.width.thick} solid ${euiTheme.colors.primary};
+        `,
+        // !important overrides horizontal steps' euiOutline usage. The extra offset
+        // is here to helps reduce subpixel gaps between the outline and the border
+        preferred: `
+          border-width: ${euiTheme.border.width.thick};
+          outline-offset: -${euiTheme.border.width.thin} !important;
+        `,
+        // For Windows forced color themes, just invert the background/foreground colors
+        forced: `
+          color: ${euiTheme.colors.emptyShade};
+          background-color: ${euiTheme.colors.fullShade};
+          ${preventForcedColors(euiThemeContext)}
+        `,
+      })}
     `,
   };
 };
@@ -114,11 +153,7 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
 export const euiStepNumberContentStyles = ({ euiTheme }: UseEuiTheme) => {
   return {
     // Statuses with icon content
-    euiStepNumber__icon: css`
-      vertical-align: middle;
-      position: relative;
-      inset-block-start: -${euiTheme.border.width.thin};
-    `,
+    euiStepNumber__icon: css``,
     complete: css`
       /* Thicken the checkmark by adding a slight stroke */
       stroke: currentColor;
@@ -129,25 +164,14 @@ export const euiStepNumberContentStyles = ({ euiTheme }: UseEuiTheme) => {
       stroke: currentColor;
       stroke-width: ${mathWithUnits(euiTheme.border.width.thin, (x) => x / 2)};
     `,
-    warning: css`
-      /* Slight extra visual offset */
-      inset-block-start: -${euiTheme.border.width.thick};
-    `,
-    // Statuses with number content
-    euiStepNumber__number: css``,
-    incomplete: css`
-      /* Adjusts position because of thicker border */
-      display: unset;
-      position: relative;
-      inset-block-start: -${euiTheme.border.width.thick};
-    `,
-    loading: css``,
-    disabled: css``,
-    current: css`
-      /* Transform the step number so it appears in the center of the step circle */
-      display: inline-block;
-      transform: translateY(-${euiTheme.border.width.thick});
-    `,
+    warning: {
+      // Slight extra offset for visual balance. Intentionally uses static px and not tokens
+      m: `margin-block-start: -2px;`,
+      s: `margin-block-start: -2px;`,
+      xs: `margin-block-start: -1px;`,
+      none: `margin-block-start: -0.5px;`,
+    },
+    // Title sizes
     none: css(logicalSizeCSS(euiTheme.size.s)),
   };
 };
diff --git a/packages/eui/src/components/steps/step_number.tsx b/packages/eui/src/components/steps/step_number.tsx
index 8971086a6a2..a5ee23eb558 100644
--- a/packages/eui/src/components/steps/step_number.tsx
+++ b/packages/eui/src/components/steps/step_number.tsx
@@ -14,7 +14,7 @@ import { EuiIcon, IconSize } from '../icon';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiLoadingSpinnerSize } from '../loading/loading_spinner';
 import { EuiTitleProps } from '../title';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 
 import {
   useI18nCompleteStep,
@@ -79,15 +79,14 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
 
   const classes = classNames('euiStepNumber', className);
 
-  const euiTheme = useEuiTheme();
-  const styles = euiStepNumberStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiStepNumberStyles);
   const cssStyles = [
     styles.euiStepNumber,
     styles[titleSize],
     status && styles[status],
   ];
 
-  const contentStyles = euiStepNumberContentStyles(euiTheme);
+  const iconStyles = useEuiMemoizedStyles(euiStepNumberContentStyles);
   let content: ReactNode;
   let screenReaderText: string | undefined;
 
@@ -114,11 +113,13 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
     case 'warning':
     case 'complete': {
       const cssIconStyles = [
-        contentStyles.euiStepNumber__icon,
-        contentStyles[status],
+        iconStyles.euiStepNumber__icon,
+        status === 'warning'
+          ? iconStyles.warning[titleSize]
+          : iconStyles[status],
         // EuiIcon does not support a xxs size so far,
         // we use custom sizing here instead
-        titleSize === 'none' && contentStyles[titleSize],
+        titleSize === 'none' && iconStyles[titleSize],
       ];
       const iconTypeMap = {
         danger: 'cross',
@@ -154,17 +155,8 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
         break;
       }
 
-      const cssNumberStyles = [
-        contentStyles.euiStepNumber__number,
-        status && contentStyles[status],
-      ];
-
       content = (
-        <span
-          aria-hidden="true"
-          className="euiStepNumber__number"
-          css={cssNumberStyles}
-        >
+        <span aria-hidden="true" className="euiStepNumber__number">
           {number}
         </span>
       );
diff --git a/packages/eui/src/components/steps/steps.stories.tsx b/packages/eui/src/components/steps/steps.stories.tsx
index 7a61be45306..b7f17557458 100644
--- a/packages/eui/src/components/steps/steps.stories.tsx
+++ b/packages/eui/src/components/steps/steps.stories.tsx
@@ -90,3 +90,9 @@ export const UnorderedSteps: Story = {
     titleSize: 'xxs',
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/steps/steps_horizontal.stories.tsx b/packages/eui/src/components/steps/steps_horizontal.stories.tsx
index 5603a9dc0e0..998a565e3d4 100644
--- a/packages/eui/src/components/steps/steps_horizontal.stories.tsx
+++ b/packages/eui/src/components/steps/steps_horizontal.stories.tsx
@@ -90,3 +90,9 @@ export const UnorderedSteps: Story = {
     size: 'xs',
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/steps/sub_steps.styles.ts b/packages/eui/src/components/steps/sub_steps.styles.ts
index 254b3fb97f9..bf0b7b3767f 100644
--- a/packages/eui/src/components/steps/sub_steps.styles.ts
+++ b/packages/eui/src/components/steps/sub_steps.styles.ts
@@ -8,13 +8,18 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
-export const euiSubStepsStyles = ({ euiTheme }: UseEuiTheme) => {
+export const euiSubStepsStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   return {
     euiSubSteps: css`
       padding: ${euiTheme.size.base};
       background-color: ${euiTheme.colors.lightestShade};
       margin-block-end: ${euiTheme.size.base};
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: `border: ${euiTheme.border.thin};`,
+      })}
 
       > *:last-child {
         margin-block-end: 0;
diff --git a/packages/eui/src/components/timeline/timeline.stories.tsx b/packages/eui/src/components/timeline/timeline.stories.tsx
index 486926538f3..80741df1afb 100644
--- a/packages/eui/src/components/timeline/timeline.stories.tsx
+++ b/packages/eui/src/components/timeline/timeline.stories.tsx
@@ -44,3 +44,9 @@ export const Playground: Story = {
     ],
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/timeline/timeline.styles.ts b/packages/eui/src/components/timeline/timeline.styles.ts
index 3ba1f47f44f..bb7016e0ad4 100644
--- a/packages/eui/src/components/timeline/timeline.styles.ts
+++ b/packages/eui/src/components/timeline/timeline.styles.ts
@@ -23,14 +23,13 @@ const _gutterSizeAdjustment = (gutterSize: string) => {
 
 // The vertical line should only appear when the EuiTimelineItem's
 // are wrapped in a EuiTimeline. That's why these styles live here.
-const timelineVerticalLine = (euiTheme: UseEuiTheme['euiTheme']) => {
+const timelineVerticalLine = ({ euiTheme }: UseEuiTheme) => {
   return `  
     [class*='euiTimelineItem-'] > [class*='euiTimelineItemIcon-']::before {
       content: '';
       position: absolute;
       ${logicalCSS('top', 0)};
-      ${logicalCSS('width', euiTheme.size.xxs)};
-      background-color: ${euiTheme.colors.lightShade};
+      ${logicalCSS('border-left', euiTheme.border.thick)};
     }
 
     > [class*='euiTimelineItem-center']:first-child > [class*='euiTimelineItemIcon-']::before {
@@ -43,12 +42,13 @@ const timelineVerticalLine = (euiTheme: UseEuiTheme['euiTheme']) => {
   `;
 };
 
-export const euiTimelineStyles = ({ euiTheme }: UseEuiTheme) => {
+export const euiTimelineStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   return {
     euiTimeline: css`
       display: flex;
       flex-direction: column;
-      ${timelineVerticalLine(euiTheme)}
+      ${timelineVerticalLine(euiThemeContext)}
     `,
     m: css(_gutterSizeAdjustment(euiTheme.size.base)),
     l: css(_gutterSizeAdjustment(euiTheme.size.l)),
diff --git a/packages/eui/src/components/timeline/timeline_item_icon.styles.ts b/packages/eui/src/components/timeline/timeline_item_icon.styles.ts
index 4ab49f30fef..e790b0cca03 100644
--- a/packages/eui/src/components/timeline/timeline_item_icon.styles.ts
+++ b/packages/eui/src/components/timeline/timeline_item_icon.styles.ts
@@ -9,26 +9,37 @@
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
 import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
-export const euiTimelineItemIconStyles = ({ euiTheme }: UseEuiTheme) => ({
-  euiTimelineItemIcon: css`
-    display: flex;
-    position: relative;
-    flex-grow: 0;
-    justify-content: center;
-    ${logicalCSS('margin-right', euiTheme.size.base)}
-  `,
-  euiTimelineItemIcon__content: css`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-  `,
-  //  Vertical alignments
-  top: css`
-    align-items: flex-start;
-  `,
-  center: css`
-    align-items: center;
-  `,
-});
+export const euiTimelineItemIconStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  return {
+    euiTimelineItemIcon: css`
+      display: flex;
+      position: relative;
+      flex-grow: 0;
+      justify-content: center;
+      ${logicalCSS('margin-right', euiTheme.size.base)}
+    `,
+    euiTimelineItemIcon__content: css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: `
+          & > * {
+            border: ${euiTheme.border.thin};
+          }
+        `,
+      })}
+    `,
+    //  Vertical alignments
+    top: css`
+      align-items: flex-start;
+    `,
+    center: css`
+      align-items: center;
+    `,
+  };
+};
diff --git a/packages/website/docs/components/display/comment_list.mdx b/packages/website/docs/components/display/comment_list.mdx
index df09cb52f57..75a9e3463c2 100644
--- a/packages/website/docs/components/display/comment_list.mdx
+++ b/packages/website/docs/components/display/comment_list.mdx
@@ -5,7 +5,7 @@ id: display_comment_list
 
 # Comment list
 
-The **EuiCommentList** is a timeline component built on top of [**EuiTimeline**](/docs/display/timeline). It allows you to display comments or logged actions that either a user or a system has performed.
+The **EuiCommentList** is a timeline component built on top of [**EuiTimeline**](../timeline). It allows you to display comments or logged actions that either a user or a system has performed.
 
 :::note Accessibility recommendation
 Provide a descriptive `aria-label` or the ID of an external label to the `aria-labelledby` prop of the **EuiCommentList**. A `timelineAvatarAriaLabel` should be provided for every **EuiComment** with or without a `timelineAvatar` as `IconType`.
@@ -112,9 +112,7 @@ export default () => (
 
 The **EuiComment** is flexible and adapts the design according to the props passed.
 
-```mdx-code-block
-import { CommentListProps } from './comment_list_props.tsx';
-```
+import { CommentListProps, CommentListStyle } from './comment_list_props.tsx';
 
 <CommentListProps
   snippet={`<EuiCommentList aria-label="Comment example">
@@ -129,15 +127,18 @@ import { CommentListProps } from './comment_list_props.tsx';
     </EuiComment>
   </EuiCommentList>`}
 />
+<CommentListStyle>
 
-1.  `timelineAvatar`: Shows an avatar that should indicate who is the author of the comment. To customize, pass a `string` as a `EuiIcon['type']` or a a [**EuiAvatar**](/docs/display/avatar). Use in conjunction with `timelineAvatarAriaLabel` to pass an aria label to the avatar. If no avatar is provided, it will default to an avatar with a `userAvatar` icon.
+1.  `timelineAvatar`: Shows an avatar that should indicate who is the author of the comment. To customize, pass a `string` as an `EuiIcon['type']` or an [**EuiAvatar**](../avatar). Use in conjunction with `timelineAvatarAriaLabel` to pass an aria label to the avatar. If no avatar is provided, it will default to an avatar with a `userAvatar` icon.
 2.  `eventIcon`: Icon that shows before the username. Use in conjunction with `eventIconAriaLabel` to pass an aria label to the event icon.
 3.  `username`: Author of the comment.
 4.  `event`: Describes the event that took place.
 5.  `timestamp`: Time of occurrence of the event.
-6.  `actions`: Custom actions that the user can perform from the comment's header. When having multiple actions, consider grouping them in a nested menu system using a [**EuiPopover**](/docs/layout/popover) with a [**EuiContextMenu**](/docs/navigation/context-menu).
+6.  `actions`: Custom actions that the user can perform from the comment's header. When having multiple actions, consider grouping them in a nested menu system using a [**EuiPopover**](../../layout/popover) with a [**EuiContextMenu**](../../navigation/context-menu).
 7.  `children`: A user message or any custom component.
 
+</CommentListStyle>
+
 The following demo shows how you can combine different props to create different types of comments events like a regular, update, update with a danger background and a custom one.
 
 ```tsx interactive
@@ -330,8 +331,8 @@ export default () => {
 The timeline icon is a very important part of the comment:
 
 *   By default, each **EuiComment** shows an avatar with the `userAvatar` icon. A `timelineAvatarAriaLabel`should be provided when using this default option.
-*   You can customize your avatar by passing to the `timelineAvatar` any of the icon types that [**EuiIcon**](/docs/display/icons) supports. The icon will show inside a `subdued` avatar. Consider this option when showing a system update. Providing a `timelineAvatarAriaLabel` is recommended.
-*   You can further customize the timeline icon by passing to the `timelineAvatar` a [**EuiAvatar**](/docs/display/avatar).
+*   You can customize your avatar by passing to the `timelineAvatar` any of the icon types that [**EuiIcon**](../icons) supports. The icon will show inside a `subdued` avatar. Consider this option when showing a system update. Providing a `timelineAvatarAriaLabel` is recommended.
+*   You can further customize the timeline icon by passing to the `timelineAvatar` a [**EuiAvatar**](../avatar).
 
 ```tsx interactive
 import React from 'react';
@@ -391,7 +392,7 @@ export default () => (
 
 ## Comment event actions
 
-There are scenarios where you might want to allow the user to perform `actions` related to each comment. Some common `actions` include: editing, deleting, sharing and copying. To add custom `actions` to a comment, use the `actions`prop. These will be placed to the right of the metadata in the comment's header. We recommend using a [**EuiButtonIcon**](/docs/navigation/button) to trigger an action. When having multiple actions, consider grouping them in a nested menu system using a [**EuiPopover**](/docs/layout/popover) with a [**EuiContextMenu**](/docs/navigation/context-menu).
+There are scenarios where you might want to allow the user to perform `actions` related to each comment. Some common `actions` include: editing, deleting, sharing and copying. To add custom `actions` to a comment, use the `actions`prop. These will be placed to the right of the metadata in the comment's header. We recommend using a [**EuiButtonIcon**](../../navigation/button) to trigger an action. When having multiple actions, consider grouping them in a nested menu system using a [**EuiPopover**](../../layout/popover) with a [**EuiContextMenu**](../../navigation/context-menu).
 
 ```tsx interactive
 import React, { useState } from 'react';
@@ -546,7 +547,7 @@ export default () => {
 
 ## A comment system
 
-The below example uses a list of **EuiComments**, a [**EuiMarkdownEditor**](/docs/editors-syntax/markdown-editor), and a [**EuiMarkdownFormat**](/docs/editors-syntax/markdown-format) to create a simple comment system.
+The below example uses a list of **EuiComments**, a [**EuiMarkdownEditor**](../../editors-syntax/markdown-editor), and a [**EuiMarkdownFormat**](../../editors-syntax/markdown-format) to create a simple comment system.
 
 *   Each comment renders in a **EuiComment**.
 *   We use the **EuiMarkdownEditor** to post the `EuiComment.children`. This means the content uses Markdown.
diff --git a/packages/website/docs/components/display/comment_list_props.tsx b/packages/website/docs/components/display/comment_list_props.tsx
index 580719d7530..96e4e4ddf1c 100644
--- a/packages/website/docs/components/display/comment_list_props.tsx
+++ b/packages/website/docs/components/display/comment_list_props.tsx
@@ -50,11 +50,7 @@ export const CommentListProps = ({ snippet }: { snippet: ReactNode }) => {
   );
 
   return (
-    <EuiPanel
-      color="transparent"
-      paddingSize="none"
-      style={{ maxWidth: '540px' }}
-    >
+    <div style={{ maxWidth: '540px' }}>
       <EuiCommentList>
         <EuiComment username="avatar" timelineAvatarAriaLabel="Avatar">
           <div
@@ -149,6 +145,20 @@ export const CommentListProps = ({ snippet }: { snippet: ReactNode }) => {
           {snippet}
         </EuiCodeBlock>
       </EuiAccordion>
-    </EuiPanel>
+
+      <EuiSpacer />
+    </div>
   );
 };
+
+export const CommentListStyle = ({ children }) => (
+  <div
+    css={css`
+      ol {
+        list-style-type: upper-alpha;
+      }
+    `}
+  >
+    {children}
+  </div>
+);
diff --git a/packages/website/docs/components/display/timeline.mdx b/packages/website/docs/components/display/timeline.mdx
index 59d829569f6..d262d818326 100644
--- a/packages/website/docs/components/display/timeline.mdx
+++ b/packages/website/docs/components/display/timeline.mdx
@@ -9,8 +9,8 @@ The **EuiTimeline** component standardizes the way a timeline thread is displaye
 
 This component allows you to create any type of timeline, but for more specific use cases you should consider:
 
-*   [**EuiSteps**](/docs/navigation/steps): a timeline that allows you to present instructional content that must be conducted in a particular order and might contain progress indications.
-*   [**EuiCommentList**](/docs/display/comment-list): a timeline that allows you to display comments or logging actions that either a user or a system has performed.
+*   [**EuiSteps**](../../navigation/steps): a timeline that allows you to present instructional content that must be conducted in a particular order and might contain progress indications.
+*   [**EuiCommentList**](../comment-list): a timeline that allows you to display comments or logging actions that either a user or a system has performed.
 
 :::note Accessibility requirement
 For accessibility, it is required to wrap your **EuiTimelineItem**'s with a **EuiTimeline**. It is highly recommended to provide a descriptive `aria-label`, or a text node ID of an external label to the `aria-labelledby` prop of the **EuiTimeline**.
@@ -63,7 +63,7 @@ export default () => (
 
 Each **EuiTimelineItem** has two parts: an icon on the left side and an event on the right side. To create an item you need the following props:
 
-*   `icon`: main icon that appears on the left side. Can be passed as any `IconType` string or custom node (e.g. [**EuiAvatar**](/docs/display/avatar)). It is recommended not to use an element larger than 40x40.
+*   `icon`: main icon that appears on the left side. Can be passed as any `IconType` string or custom node (e.g. [**EuiAvatar**](../avatar)). It is recommended not to use an element larger than 40x40.
 *   `children`: any node as the event content.
 
 ```tsx interactive
@@ -91,7 +91,7 @@ You can create a timeline thread by rendering multiple **EuiTimelineItem** compo
 When passing an `icon` and `children` prop to each item, there are some design considerations to take into account:
 
 *   `icon`: use icons of the same size to create a better visual consistency.
-*   `children`: when your content is just one line of text, the recommendation is to use a a [**EuiText**](/docs/display/text) as a wrapper. For multi-line content consider using a [**EuiPanel**](/docs/layout/panel) or a [**EuiSplitPanel**](/docs/layout/panel#split-panels) instead. For other types of components like editors, the recommendation is to pass the children without any wrapper.
+*   `children`: when your content is just one line of text, the recommendation is to use an [**EuiText**](../text) as a wrapper. For multi-line content consider using a [**EuiPanel**](../../layout/panel) or a [**EuiSplitPanel**](../../panel#split-panels) instead. For other types of components like editors, the recommendation is to pass the children without any wrapper.
 
 The following example shows how to display multiple **EuiTimelineItem**s and how you can use a **EuiSplitPanel** as the content wrapper.