Add gradient hack to TimelineItem-badge (#1550)

* Add gradient hack to TimelineItem-badge * Create fuzzy-carpets-promise.md
primer · Aug 26, 2021 · 8a684ee · 8a684ee
1 parent cde3172
commit 8a684ee
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/.changeset/fuzzy-carpets-promise.md b/.changeset/fuzzy-carpets-promise.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add gradient hack to TimelineItem-badge
diff --git a/src/timeline/timeline-item.scss b/src/timeline/timeline-item.scss
@@ -34,7 +34,8 @@
   // stylelint-disable-next-line primer/colors
   color: var(--color-icon-secondary);
   align-items: center;
-  background-color: var(--color-timeline-badge-bg);
+  background-color: var(--color-bg-canvas); // covers the "line"
+  background-image: linear-gradient(0deg, var(--color-timeline-badge-bg), var(--color-timeline-badge-bg));
   // stylelint-disable-next-line primer/borders
   border: 2px $border-style var(--color-bg-canvas);
   border-radius: 50%;