Correct ButtonOutline inferred background color (#669)

Bug in usage of semanticColors in ButtonOutline caused an issue where the underlying HTML element could influence the rendering. Properly referencing semanticColor structure corrects this bug.

Author: Luke Bowerman

packages/components/src/Button/ButtonOutline.tsx

@@ -29,7 +29,7 @@ import { ButtonBase } from './ButtonBase'
 
 export const ButtonOutline = styled(ButtonBase)`
   background: ${({ theme, color = 'primary' }) =>
-    theme.colors.semanticColors[color].white};
+    theme.colors.semanticColors[color].text};
   border: 1px solid
     ${({ theme, color = 'primary' }) =>
       theme.colors.semanticColors[color].borderColor};
@@ -40,7 +40,7 @@ export const ButtonOutline = styled(ButtonBase)`
   &:focus,
   &.hover {
     background: ${({ theme, color = 'primary' }) =>
-      theme.colors.semanticColors[color].white};
+      theme.colors.semanticColors[color].text};
     border-color: ${({ theme, color = 'primary' }) =>
       theme.colors.semanticColors[color].main};
     color: ${({ theme, color = 'primary' }) =>
@@ -62,7 +62,7 @@ export const ButtonOutline = styled(ButtonBase)`
     &:active,
     &:focus {
       background-color: ${({ theme, color = 'primary' }) =>
-        theme.colors.semanticColors[color].white};
+        theme.colors.semanticColors[color].text};
       border-color: ${({ theme, color = 'primary' }) =>
         theme.colors.semanticColors[color].borderColor};
       color: ${({ theme, color = 'primary' }) =>

packages/components/src/Button/__snapshots__/ButtonOutline.test.tsx.snap

@@ -37,13 +37,15 @@ exports[`ButtonOutline Focus: renders outline when tabbing into focus, but not w
 }
 
 .c1 {
+  background: #FFFFFF;
   border: 1px solid #C1C6CC;
   color: #6C43E0;
 }
 
 .c1:hover,
 .c1:focus,
 .c1.hover {
+  background: #FFFFFF;
   border-color: #6C43E0;
   color: #412399;
 }
@@ -58,6 +60,7 @@ exports[`ButtonOutline Focus: renders outline when tabbing into focus, but not w
 .c1[disabled]:hover,
 .c1[disabled]:active,
 .c1[disabled]:focus {
+  background-color: #FFFFFF;
   border-color: #C1C6CC;
   color: #6C43E0;
 }
@@ -71,7 +74,7 @@ exports[`ButtonOutline Focus: renders outline when tabbing into focus, but not w
 
 exports[`ButtonOutline Focus: renders outline when tabbing into focus, but not when clicking 2`] = `
 <button
-  class="sc-bxivhb deKSKn sc-ifAKCX sc-EHOje dFdbyE"
+  class="sc-bxivhb deKSKn sc-ifAKCX sc-EHOje iGIddR"
 >
   focus
 </button>
@@ -114,13 +117,15 @@ exports[`ButtonOutline has the correct style 1`] = `
 }
 
 .c1 {
+  background: #FFFFFF;
   border: 1px solid #C1C6CC;
   color: #6C43E0;
 }
 
 .c1:hover,
 .c1:focus,
 .c1.hover {
+  background: #FFFFFF;
   border-color: #6C43E0;
   color: #412399;
 }
@@ -135,6 +140,7 @@ exports[`ButtonOutline has the correct style 1`] = `
 .c1[disabled]:hover,
 .c1[disabled]:active,
 .c1[disabled]:focus {
+  background-color: #FFFFFF;
   border-color: #C1C6CC;
   color: #6C43E0;
 }