fix(widgets): white accentText color on some buttons (#3238)

* white accentText color on some buttons

* put color calculations in useMemo, change accentText name, make hsl hex

* onAccent -> onAccentText

src/lib/components/ActionButton.tsx

 import { AlertTriangle, Icon, LargeIcon } from 'lib/icons'
 import styled, { Color, css, keyframes, ThemedText } from 'lib/theme'
-import { ReactNode } from 'react'
+import { ReactNode, useMemo } from 'react'
 
 import Button from './Button'
 import Row from './Row'
@@ -71,10 +71,11 @@ export default function ActionButton({
   onUpdate,
   children,
 }: ActionButtonProps) {
+  const textColor = useMemo(() => (color === 'accent' && !disabled ? 'onAccent' : 'currentColor'), [color, disabled])
   return (
     <Overlay update={Boolean(update)} flex align="stretch">
       <StyledButton color={color} disabled={disabled} onClick={update ? onUpdate : onClick}>
-        <ThemedText.TransitionButton buttonSize={update ? 'medium' : 'large'} color="currentColor">
+        <ThemedText.TransitionButton buttonSize={update ? 'medium' : 'large'} color={textColor}>
           {update ? update.action : children}
         </ThemedText.TransitionButton>
       </StyledButton>

src/lib/components/TokenSelect/TokenButton.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
 import { ChevronDown } from 'lib/icons'
 import styled, { ThemedText } from 'lib/theme'
+import { useMemo } from 'react'
 
 import Button from '../Button'
 import Row from '../Row'
@@ -34,9 +35,11 @@ interface TokenButtonProps {
 }
 
 export default function TokenButton({ value, collapsed, disabled, onClick }: TokenButtonProps) {
+  const buttonBackgroundColor = useMemo(() => (value ? 'interactive' : 'accent'), [value])
+  const contentColor = useMemo(() => (value || disabled ? 'onInteractive' : 'onAccent'), [value, disabled])
   return (
-    <StyledTokenButton onClick={onClick} empty={!value} color={value ? 'interactive' : 'accent'} disabled={disabled}>
-      <ThemedText.ButtonLarge color="onInteractive">
+    <StyledTokenButton onClick={onClick} empty={!value} color={buttonBackgroundColor} disabled={disabled}>
+      <ThemedText.ButtonLarge color={contentColor}>
         <TokenButtonRow gap={0.4} collapsed={Boolean(value) && collapsed}>
           {value ? (
             <>
@@ -46,7 +49,7 @@ export default function TokenButton({ value, collapsed, disabled, onClick }: Tok
           ) : (
             <Trans>Select a token</Trans>
           )}
-          <ChevronDown color="onInteractive" strokeWidth={3} />
+          <ChevronDown color={contentColor} strokeWidth={3} />
         </TokenButtonRow>
       </ThemedText.ButtonLarge>
     </StyledTokenButton>

src/lib/theme/index.tsx

 import '../assets/fonts.scss'
 
-import { mix, transparentize } from 'polished'
+import { mix, readableColor, transparentize } from 'polished'
 import { createContext, ReactNode, useContext, useMemo, useState } from 'react'
 
 import styled, { ThemedProvider } from './styled'
@@ -26,6 +26,7 @@ export const lightTheme: Colors = {
   dialog: '#FFFFFF',
 
   // text
+  onAccent: '#ffffff',
   primary: '#000000',
   secondary: '#565A69',
   hint: '#888D9B',
@@ -40,9 +41,11 @@ export const lightTheme: Colors = {
   currentColor: 'currentColor',
 }
 
+const darkThemeAccent = '#2172E5'
+
 export const darkTheme: Colors = {
   // surface
-  accent: '#2172E5',
+  accent: darkThemeAccent,
   container: '#191B1F',
   module: '#2C2F36',
   interactive: '#40444F',
@@ -50,6 +53,7 @@ export const darkTheme: Colors = {
   dialog: '#000000',
 
   // text
+  onAccent: readableColor(darkThemeAccent),
   primary: '#FFFFFF',
   secondary: '#888D9B',
   hint: '#6C7284',

src/lib/theme/theme.ts

@@ -9,6 +9,7 @@ export interface Colors {
 
   // text
   primary: string
+  onAccent: string
   secondary: string
   hint: string
   onInteractive: string