From 83c708d9ec800f31c8b9eadbdfc862c8a25d32d2 Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Tue, 14 Sep 2021 11:47:02 -0700
Subject: [PATCH] Removes irregular styling on Timeline

---
 .changeset/gold-waves-notice.md               | 5 +++++
 src/Timeline.tsx                              | 8 ++++----
 src/__tests__/__snapshots__/Timeline.tsx.snap | 4 +++-
 3 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/gold-waves-notice.md

diff --git a/.changeset/gold-waves-notice.md b/.changeset/gold-waves-notice.md
new file mode 100644
index 00000000000..01e4dfb2956
--- /dev/null
+++ b/.changeset/gold-waves-notice.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Removed irregular styling on Timeline
diff --git a/src/Timeline.tsx b/src/Timeline.tsx
index 7c48662896e..49858f45868 100644
--- a/src/Timeline.tsx
+++ b/src/Timeline.tsx
@@ -77,10 +77,10 @@ const TimelineBadge = (props: TimelineBadgeProps) => {
         display="flex"
         className={classnames(props.className, 'TimelineItem-Badge')}
         flexShrink={0}
-        css={`
-          border-radius: 50%;
-          border: 2px solid ${get('colors.bg.canvas')};
-        `}
+        borderRadius="50%"
+        borderWidth="2px"
+        borderStyle="solid"
+        borderColor="bg.canvas"
         overflow="hidden"
         color="icon.secondary"
         bg="timeline.badgeBg"
diff --git a/src/__tests__/__snapshots__/Timeline.tsx.snap b/src/__tests__/__snapshots__/Timeline.tsx.snap
index 2cece715237..f96b1fbc13e 100644
--- a/src/__tests__/__snapshots__/Timeline.tsx.snap
+++ b/src/__tests__/__snapshots__/Timeline.tsx.snap
@@ -70,7 +70,9 @@ exports[`Timeline.Badge renders consistently 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   border-radius: 50%;
-  border: 2px solid #ffffff;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #ffffff;
 }
 
 <div