From 0d6c745fcf9e02e1205a82bff00fedfaec03f8ab Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Sat, 21 Mar 2020 09:18:17 -0400
Subject: [PATCH 1/2] Refine outline and inverse button styling for :hover and
 :focus states

---
 src/components/Button.js | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 42b38fd1..0025f64a 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { darken, rgba } from 'polished';
+import { darken, rgba, opacify } from 'polished';
 import { color, typography } from './shared/styles';
 import { easing } from './shared/animation';
 
@@ -226,29 +226,36 @@ const StyledButton = styled.button`
   ${props =>
     props.appearance === APPEARANCES.OUTLINE &&
     `
-      box-shadow: ${color.medium} 0 0 0 1px inset;
+      box-shadow: ${opacify(0.05, color.border)} 0 0 0 1px inset;
       color: ${color.dark};
       background: transparent;
 
       ${!props.isLoading &&
         `
           &:hover {
-            box-shadow: ${color.mediumdark} 0 0 0 1px inset;
+            box-shadow: ${opacify(0.3, color.border)} 0 0 0 1px inset;
           }
 
           &:active {
-            background: ${color.medium};
-            box-shadow: ${color.medium} 0 0 0 1px inset;
+            background: ${opacify(0.05, color.border)};
+            box-shadow: transparent 0 0 0 1px inset;
             color: ${color.darkest};
           }
+
+          &:active:focus:hover {
+            ${/* This prevents the semi-transparent border from appearing atop the background */ ''}
+            background: ${opacify(0.05, color.border)};
+            box-shadow:  ${rgba(color.secondary, 0.4)} 0 1px 9px 2px;
+          }
+
           &:focus {
-            box-shadow: ${color.medium} 0 0 0 1px inset, ${rgba(
+            box-shadow: ${opacify(0.05, color.border)} 0 0 0 1px inset, ${rgba(
           color.secondary,
           0.4
         )} 0 1px 9px 2px;
           }
           &:focus:hover {
-            box-shadow: ${color.medium} 0 0 0 1px inset, ${rgba(
+            box-shadow: ${opacify(0.05, color.border)} 0 0 0 1px inset, ${rgba(
           color.secondary,
           0.2
         )} 0 8px 18px 0px;
@@ -321,10 +328,10 @@ const StyledButton = styled.button`
                 box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
               }
               &:focus {
-                box-shadow: ${rgba(color.secondary, 0.4)} 0 1px 9px 2px;
+                box-shadow: ${rgba(color.primary, 0.4)} 0 1px 9px 2px;
               }
               &:focus:hover {
-                box-shadow: ${rgba(color.secondary, 0.2)} 0 8px 18px 0px;
+                box-shadow: ${rgba(color.primary, 0.2)} 0 8px 18px 0px;
               }
           `}
       `}
@@ -366,15 +373,15 @@ const StyledButton = styled.button`
           &:active {
             background: ${color.lightest};
             box-shadow: ${color.lightest} 0 0 0 1px inset;
-            color: ${color.lightest};
+            color: ${color.secondary};
           }
           &:focus {
             box-shadow: ${color.lightest} 0 0 0 1px inset,
-              ${rgba(color.lightest, 0.4)} 0 1px 9px 2px;
+              ${rgba(color.darkest, 0.4)} 0 1px 9px 2px;
           }
           &:focus:hover {
             box-shadow: ${color.lightest} 0 0 0 1px inset,
-              ${rgba(color.lightest, 0.2)} 0 8px 18px 0px;
+              ${rgba(color.darkest, 0.2)} 0 8px 18px 0px;
           }
       `};
 

From ca9e46699f82b8969342b61deb138ee9a8f775f8 Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Sat, 21 Mar 2020 09:37:38 -0400
Subject: [PATCH 2/2] More refinements

---
 src/components/Button.js | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 0025f64a..a1ae374e 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -215,10 +215,10 @@ const StyledButton = styled.button`
             box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
           }
           &:focus {
-            box-shadow: ${rgba(color.tertiary, 0.4)} 0 1px 9px 2px;
+            box-shadow: ${rgba(color.darkest, 0.15)} 0 1px 9px 2px;
           }
           &:focus:hover {
-            box-shadow: ${rgba(color.tertiary, 0.2)} 0 8px 18px 0px;
+            box-shadow: ${rgba(color.darkest, 0.05)} 0 8px 18px 0px;
           }
         `}
     `}
@@ -245,20 +245,16 @@ const StyledButton = styled.button`
           &:active:focus:hover {
             ${/* This prevents the semi-transparent border from appearing atop the background */ ''}
             background: ${opacify(0.05, color.border)};
-            box-shadow:  ${rgba(color.secondary, 0.4)} 0 1px 9px 2px;
+            box-shadow:  ${rgba(color.darkest, 0.15)} 0 1px 9px 2px;
           }
 
           &:focus {
-            box-shadow: ${opacify(0.05, color.border)} 0 0 0 1px inset, ${rgba(
-          color.secondary,
-          0.4
-        )} 0 1px 9px 2px;
+            box-shadow: ${opacify(0.05, color.border)} 0 0 0 1px inset, 
+            ${rgba(color.darkest, 0.15)} 0 1px 9px 2px;
           }
           &:focus:hover {
-            box-shadow: ${opacify(0.05, color.border)} 0 0 0 1px inset, ${rgba(
-          color.secondary,
-          0.2
-        )} 0 8px 18px 0px;
+            box-shadow: ${opacify(0.05, color.border)} 0 0 0 1px inset, 
+            ${rgba(color.darkest, 0.05)} 0 8px 18px 0px;
           }
         `};
     `};
@@ -373,7 +369,7 @@ const StyledButton = styled.button`
           &:active {
             background: ${color.lightest};
             box-shadow: ${color.lightest} 0 0 0 1px inset;
-            color: ${color.secondary};
+            color: ${color.darkest};
           }
           &:focus {
             box-shadow: ${color.lightest} 0 0 0 1px inset,