From 4dc15c3300838733da39fd2895692cce5bc3a3b5 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Tue, 8 Mar 2022 10:23:35 +1100
Subject: [PATCH] Add outline background and border color (#1928)

* Add outline background and border color

* Fix up test

* Create three-papayas-beg.md
---
 .changeset/three-papayas-beg.md                   | 5 +++++
 src/Button2/styles.ts                             | 2 ++
 src/__tests__/__snapshots__/Button2.test.tsx.snap | 2 ++
 3 files changed, 9 insertions(+)
 create mode 100644 .changeset/three-papayas-beg.md

diff --git a/.changeset/three-papayas-beg.md b/.changeset/three-papayas-beg.md
new file mode 100644
index 00000000000..11e13d4c629
--- /dev/null
+++ b/.changeset/three-papayas-beg.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add outline background and border color
diff --git a/src/Button2/styles.ts b/src/Button2/styles.ts
index 25143ec6763..40ddbb06bc2 100644
--- a/src/Button2/styles.ts
+++ b/src/Button2/styles.ts
@@ -111,6 +111,8 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
     outline: {
       color: 'btn.outline.text',
       boxShadow: `${theme?.shadows.btn.shadow}`,
+      borderColor: 'btn.border',
+      backgroundColor: 'btn.bg',
 
       '&:hover:not([disabled])': {
         color: 'btn.outline.hoverText',
diff --git a/src/__tests__/__snapshots__/Button2.test.tsx.snap b/src/__tests__/__snapshots__/Button2.test.tsx.snap
index 4a558a6a82b..944f4d5801e 100644
--- a/src/__tests__/__snapshots__/Button2.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button2.test.tsx.snap
@@ -285,6 +285,7 @@ exports[`Button styles outline button appropriately 1`] = `
 .c0 {
   border-radius: 2;
   border: 1px solid;
+  border-color: btn.border;
   font-family: inherit;
   font-weight: bold;
   line-height: 20px;
@@ -310,6 +311,7 @@ exports[`Button styles outline button appropriately 1`] = `
   font-size: 14px;
   color: btn.outline.text;
   box-shadow: undefined;
+  background-color: btn.bg;
 }
 
 .c0:focus {