Revert back to use readableColor function

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

@@ -231,8 +231,10 @@ TextShift.storyName = 'textShift';
 export function CustomColor({ args }) {
   return (
     <div {...args}>
-      <pre>color="#07796a"</pre>
-      <Button color="#07796a">Button</Button>
+      <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>

src/components/Button/Button.style.ts

@@ -1,10 +1,10 @@
 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';
 
-import { a11yColor, generateAccessibleTextColor } from '../../themes';
+import { a11yColor } from '../../themes';
 import { white, black, blue, violet } from '../../color';
 import { core } from '../../tokens';
 
@@ -203,12 +203,13 @@ function deriveButtonColor(customColor, format, theme) {
   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 = generateAccessibleTextColor(color);
+      textColor = readableColor(color);
     } else if (customColor.color) {
       color = customColor.color;
       hoverColor = customColor.hover
@@ -219,7 +220,7 @@ function deriveButtonColor(customColor, format, theme) {
         : shade(0.15, color);
       textColor = customColor.textColor
         ? customColor.textColor
-        : generateAccessibleTextColor(customColor.color);
+        : readableColor(customColor.color);
     }
   } else {
     color = theme.formats[format];

src/themes/index.ts

@@ -1,4 +1,4 @@
-import { rgba, getContrast } from 'polished';
+import { rgba } from 'polished';
 import { grayscale, white, black, slate, blue, red, green } from '../color';
 import { readableColor, lighten, darken, getLuminance, saturate } from 'polished';
 
@@ -104,16 +104,6 @@ export const themes: {
   },
 };
 
-export function generateAccessibleTextColor(backgroundColor) {
-  // Determine the contrast ratio
-  const contrastRatio = getContrast(backgroundColor, readableColor(backgroundColor));
-
-  // Choose a suitable text color based on the contrast ratio
-  const textColor = contrastRatio >= 4.5 ? black : white;
-
-  return textColor;
-}
-
 export function a11yColor(color) {
   return ({ theme }) => (theme.a11y.contrast ? readableColor(lighten(0.1, color)) : readableColor(darken(0.3, color)));
 }