Add outline background and border color (#1928)

* Add outline background and border color * Fix up test * Create three-papayas-beg.md
primer · Mar 7, 2022 · 4dc15c3 · 4dc15c3
1 parent 92a0237
commit 4dc15c3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/three-papayas-beg.md 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
@@ -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
@@ -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 {