style(flat-button): implement inverted tone (#869)

feat(flat-button): implement inverted tone

Author: ahmehri

src/components/buttons/flat-button/flat-button.js

@@ -16,12 +16,19 @@ const getIconElement = props => {
   });
 };
 
-const getTextColor = (tone, isHover = false) => {
+const getTextColor = (tone, isHover = false, theme) => {
+  const overwrittenVars = {
+    ...vars,
+    ...theme,
+  };
+
   switch (tone) {
     case 'primary':
-      return isHover ? vars.colorPrimary25 : vars.colorPrimary;
+      return isHover
+        ? overwrittenVars.colorPrimary25
+        : overwrittenVars.colorPrimary;
     case 'secondary':
-      return vars.colorSolid;
+      return overwrittenVars.colorSolid;
     default:
       return 'inherit';
   }
@@ -40,38 +47,39 @@ export const FlatButton = props => {
       label={props.label}
       onClick={props.onClick}
       isDisabled={props.isDisabled}
-      css={css`
+      css={theme => css`
         display: flex;
         align-items: center;
         font-size: 1rem;
         border: none;
         background: none;
         padding: 0;
         min-height: initial;
+
         p {
           color: ${props.isDisabled
             ? vars.colorNeutral
-            : getTextColor(props.tone)};
+            : getTextColor(props.tone, false, theme)};
         }
 
         svg * {
           fill: ${props.isDisabled
             ? vars.colorNeutral
-            : getTextColor(props.tone, false)};
+            : getTextColor(props.tone, false, theme)};
         }
 
         &:hover,
         &:focus {
           p {
             color: ${props.isDisabled
               ? vars.colorNeutral
-              : getTextColor(props.tone, true)};
+              : getTextColor(props.tone, true, theme)};
           }
 
           svg * {
             fill: ${props.isDisabled
               ? vars.colorNeutral
-              : getTextColor(props.tone, true)};
+              : getTextColor(props.tone, true, theme)};
           }
         }
       `}

src/components/buttons/flat-button/flat-button.visualroute.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import { ThemeProvider } from 'emotion-theming';
 import { FlatButton, InformationIcon } from 'ui-kit';
 import { Suite, Spec } from '../../../../test/percy';
 
 export const routePath = '/flat-button';
 
-export const component = () => (
+export const component = ({ themes }) => (
   <Suite>
     <Spec label="regular">
       <FlatButton tone="primary" label="A label text" onClick={() => {}} />
@@ -42,5 +43,15 @@ export const component = () => (
         icon={<InformationIcon />}
       />
     </Spec>
+    <ThemeProvider theme={themes.darkTheme}>
+      <Spec label="secondary">
+        <FlatButton
+          tone="secondary"
+          label="Inverted"
+          onClick={() => {}}
+          icon={<InformationIcon />}
+        />
+      </Spec>
+    </ThemeProvider>
   </Suite>
 );