Add textColor to Button color prop (#364)

src/components/Button/Button.props.story.tsx

@@ -231,12 +231,14 @@ TextShift.storyName = 'textShift';
 export function CustomColor({ args }) {
   return (
     <div {...args}>
-      <Button color="#07796a">Button</Button>
-      <Button variant="minimal" color="#aa91e5">
+      <pre>color="#4A9C54"</pre>
+      <Button color="#4A9C54" format="primary">
         Button
       </Button>
+      <pre>color="#aa91e5"</pre>
+      <Button color="#aa91e5">Button</Button>
+      <pre>color: '#ffffff', hover: '#e7c03f', active: '#e7c03f'</pre>
       <Button
-        variant="outline"
         color={{
           color: '#ffffff',
           hover: '#e7c03f',
@@ -245,8 +247,10 @@ export function CustomColor({ args }) {
       >
         Button
       </Button>
+      <pre>
+        color: '#000000', hover: '#e7c03f', active: '#e7c03f',
+      </pre>
       <Button
-        variant="outline"
         color={{
           color: '#000000',
           hover: '#e7c03f',
@@ -255,6 +259,9 @@ export function CustomColor({ args }) {
       >
         Button
       </Button>
+      <pre>
+        color: '#ff00d4', hover: '#e72626', active: '#700d2b',
+      </pre>
       <Button
         color={{
           color: '#ff00d4',
@@ -264,6 +271,20 @@ export function CustomColor({ args }) {
       >
         Button
       </Button>
+      <pre>
+        color: '#ff00d4', hover: '#e72626', active: '#700d2b',
+        textColor: '#ffffff',
+      </pre>
+      <Button
+        color={{
+          color: '#ff00d4',
+          hover: '#e72626',
+          active: '#700d2b',
+          textColor: '#ffffff',
+        }}
+      >
+        Button with custom textColor
+      </Button>
     </div>
   );
 }

src/components/Button/Button.style.ts

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { rgba, rem, tint, shade, em } from 'polished';
+import { rgba, rem, tint, shade, em, readableColor } from 'polished';
 
 import { borderRadii } from './Button.config';
 import { FeaturedIcon } from './FeaturedIcon';
@@ -202,12 +202,14 @@ function deriveButtonColor(customColor, format, theme) {
   let color: string;
   let hoverColor: string;
   let activeColor: string;
+  let textColor: string;
 
   if (customColor) {
     if (typeof customColor === 'string') {
       color = customColor;
       hoverColor = tint(0.15, color);
       activeColor = shade(0.15, color);
+      textColor = readableColor(color);
     } else if (customColor.color) {
       color = customColor.color;
       hoverColor = customColor.hover
@@ -216,14 +218,18 @@ function deriveButtonColor(customColor, format, theme) {
       activeColor = customColor.active
         ? customColor.active
         : shade(0.15, color);
+      textColor = customColor.textColor
+        ? customColor.textColor
+        : readableColor(customColor.color);
     }
   } else {
     color = theme.formats[format];
     hoverColor = tint(0.15, color);
     activeColor = shade(0.15, color);
+    textColor = null;
   }
 
-  return { color, hoverColor, activeColor };
+  return { color, hoverColor, activeColor, textColor };
 }
 
 // const buttonVariants = memoize(buttonVariantsFn);
@@ -239,21 +245,15 @@ function buttonVariants({
   // style logic is rewritten.
   if (format.includes('upsell')) return;
 
-  const { color, hoverColor, activeColor } = deriveButtonColor(
-    customColor,
-    format,
-    theme
-  );
-
-  // const { saturation } = parseToHsl(color);
-  // const saturateAmount = saturation > 0.33 ? 0.2 : 0;
+  const { color, hoverColor, activeColor, textColor } =
+    deriveButtonColor(customColor, format, theme);
 
   const borderWidth = '1px';
   const borderColor = color;
 
-  const contrastText = a11yColor(color);
-  const contrastTextHover = a11yColor(hoverColor);
-  const contrastTextActive = a11yColor(activeColor);
+  const contrastText = textColor || a11yColor(color);
+  const contrastTextHover = textColor || a11yColor(hoverColor);
+  const contrastTextActive = textColor || a11yColor(activeColor);
 
   switch (variant) {
     case 'outline':
@@ -386,17 +386,6 @@ function buttonVariants({
   }
 }
 
-// function fluidity(sizes: number | number[]) {
-//   const min = rem(Math.min(...sizes));
-//   const max = rem(Math.max(...sizes));
-
-//   return css`
-//     ${mediaQuery({ min, max })} {
-//       width: 100%;
-//     }
-//   `;
-// }
-
 const mediaQuery = ({ min = 0, max, type = 'only screen' }) =>
   !max || min === max
     ? `@media ${type} and (min-width: ${em(min)})`

src/components/Button/Button.types.ts

@@ -34,7 +34,12 @@ export type Props = IrisProps<
      */
     color?:
       | string
-      | { color: string; hover?: string; active?: string };
+      | {
+          color: string;
+          hover?: string;
+          active?: string;
+          textColor?: string;
+        };
     element?: ButtonElements;
     floating?: boolean;
     /**

src/components/Button/examples/Growth.story.tsx

@@ -16,7 +16,11 @@ export function GrowthCTA({ args }) {
       <Button size="xl" icon={<UploadCloud />}>
         Create videos
       </Button>
-      <Button size="xl" icon={<Pencil />} color="#E0FF2B">
+      <Button
+        size="xl"
+        icon={<Pencil />}
+        color={{ color: '#E0FF2B', textColor: 'blue' }}
+      >
         Create videos
       </Button>
       <Button size="xl" icon={<Gear />} color="#f39e00">