fix(a11y): color contrast changes (#1803)

* fix: a11y changes

* more a11y fixes

* updated theme colors

* addressed rev4 comments

* address rev5 comments

* addressed rev6

src/components/Button/index.tsx

@@ -72,14 +72,12 @@ export const ButtonPrimary = styled(Base)`
   }
   &:disabled {
     background-color: ${({ theme, altDisabledStyle, disabled }) =>
-      altDisabledStyle ? (disabled ? theme.primary1 : theme.primary1) : theme.primary1};
-    color: white;
+      altDisabledStyle ? (disabled ? theme.primary1 : theme.bg2) : theme.bg2};
+    color: ${({ theme }) => theme.text2};
     cursor: auto;
     box-shadow: none;
     border: 1px solid transparent;
     outline: none;
-    opacity: 0.4;
-    opacity: ${({ altDisabledStyle }) => (altDisabledStyle ? '0.5' : '0.4')};
   }
 `
 

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -18,10 +18,10 @@ export function FiatValue({
     if (!priceImpact) return undefined
     if (priceImpact.lessThan('0')) return theme.green1
     const severity = warningSeverity(priceImpact)
-    if (severity < 1) return theme.text4
+    if (severity < 1) return theme.text3
     if (severity < 3) return theme.yellow1
     return theme.red1
-  }, [priceImpact, theme.green1, theme.red1, theme.text4, theme.yellow1])
+  }, [priceImpact, theme.green1, theme.red1, theme.text3, theme.yellow1])
 
   return (
     <TYPE.body fontSize={14} color={fiatValue ? theme.text2 : theme.text4}>

src/components/CurrencyInputPanel/index.tsx

@@ -130,7 +130,7 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   font-weight: 500;
   cursor: pointer;
   padding: 0;
-  color: ${({ theme }) => theme.primary1};
+  color: ${({ theme }) => theme.primaryText1};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')};
   margin-left: 0.25rem;

src/components/Header/Polling.tsx

@@ -21,7 +21,7 @@ const StyledPolling = styled.div`
 `
 const StyledPollingNumber = styled(TYPE.small)<{ breathe: boolean; hovering: boolean }>`
   transition: opacity 0.25s ease;
-  opacity: ${({ breathe, hovering }) => (hovering ? 0.7 : breathe ? 1 : 0.2)};
+  opacity: ${({ breathe, hovering }) => (hovering ? 0.7 : breathe ? 1 : 0.5)};
   :hover {
     opacity: 1;
   }

src/components/SearchModal/CommonBases.tsx

@@ -23,8 +23,9 @@ const BaseWrapper = styled.div<{ disable?: boolean }>`
     background-color: ${({ theme, disable }) => !disable && theme.bg2};
   }
 
+  color: ${({ theme, disable }) => disable && theme.text3};
   background-color: ${({ theme, disable }) => disable && theme.bg3};
-  opacity: ${({ disable }) => disable && '0.4'};
+  filter: ${({ disable }) => disable && 'grayscale(1)'};
 `
 
 export default function CommonBases({

src/components/SearchModal/CurrencySearch.tsx

@@ -224,12 +224,12 @@ export function CurrencySearch({
       )}
       <Footer>
         <Row justify="center">
-          <ButtonText onClick={showManageView} color={theme.blue1} className="list-token-manage-button">
+          <ButtonText onClick={showManageView} color={theme.primary1} className="list-token-manage-button">
             <RowFixed>
-              <IconWrapper size="16px" marginRight="6px">
+              <IconWrapper size="16px" marginRight="6px" stroke={theme.primaryText1}>
                 <Edit />
               </IconWrapper>
-              <TYPE.main color={theme.blue1}>
+              <TYPE.main color={theme.primaryText1}>
                 <Trans>Manage Token Lists</Trans>
               </TYPE.main>
             </RowFixed>

src/components/Toggle/index.tsx

@@ -12,15 +12,15 @@ const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`
 
   padding: 0.35rem 0.6rem;
   border-radius: 12px;
-  background: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.primary1 : theme.text4) : 'none')};
+  background: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.primary1 : theme.text5) : 'none')};
   color: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.white : theme.text2) : theme.text2)};
   font-size: 1rem;
   font-weight: ${({ isOnSwitch }) => (isOnSwitch ? '500' : '400')};
   :hover {
     user-select: ${({ isOnSwitch }) => (isOnSwitch ? 'none' : 'initial')};
     background: ${({ theme, isActive, isOnSwitch }) =>
-      isActive ? (isOnSwitch ? theme.primary1 : theme.text3) : 'none'};
-    color: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.white : theme.text2) : theme.text3)};
+      isActive ? (isOnSwitch ? theme.primary1 : theme.text5) : 'none'};
+    color: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.white : theme.text3) : theme.text3)};
   }
 `
 

src/components/swap/SwapModalHeader.tsx

@@ -20,7 +20,6 @@ import { Trans } from '@lingui/macro'
 import { AdvancedSwapDetails } from './AdvancedSwapDetails'
 import { LightCard } from '../Card'
 
-import { DarkGreyCard } from '../Card'
 import TradePrice from '../swap/TradePrice'
 
 export const ArrowWrapper = styled.div`
@@ -36,6 +35,8 @@ export const ArrowWrapper = styled.div`
   justify-content: center;
   align-items: center;
   background-color: ${({ theme }) => theme.bg1};
+  border: 4px solid;
+  border-color: ${({ theme }) => theme.bg0};
   z-index: 2;
 `
 
@@ -61,7 +62,7 @@ export default function SwapModalHeader({
 
   return (
     <AutoColumn gap={'4px'} style={{ marginTop: '1rem' }}>
-      <DarkGreyCard padding="0.75rem 1rem">
+      <LightCard padding="0.75rem 1rem">
         <AutoColumn gap={'8px'}>
           <RowBetween>
             <TYPE.body color={theme.text3} fontWeight={500} fontSize={14}>
@@ -87,11 +88,11 @@ export default function SwapModalHeader({
             </RowFixed>
           </RowBetween>
         </AutoColumn>
-      </DarkGreyCard>
+      </LightCard>
       <ArrowWrapper>
         <ArrowDown size="16" color={theme.text2} />
       </ArrowWrapper>
-      <DarkGreyCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}>
+      <LightCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}>
         <AutoColumn gap={'8px'}>
           <RowBetween>
             <TYPE.body color={theme.text3} fontWeight={500} fontSize={14}>
@@ -118,7 +119,7 @@ export default function SwapModalHeader({
             </RowFixed>
           </RowBetween>
         </AutoColumn>
-      </DarkGreyCard>
+      </LightCard>
       <RowBetween style={{ marginTop: '0.25rem', padding: '0 1rem' }}>
         <TYPE.body color={theme.text2} fontWeight={500} fontSize={14}>
           <Trans>Price</Trans>

src/components/swap/styleds.tsx

@@ -177,8 +177,8 @@ export function SwapCallbackError({ error }: { error: ReactNode }) {
 }
 
 export const SwapShowAcceptChanges = styled(AutoColumn)`
-  background-color: ${({ theme }) => transparentize(0.9, theme.primary1)};
-  color: ${({ theme }) => theme.primary1};
+  background-color: ${({ theme }) => transparentize(0.95, theme.primary3)};
+  color: ${({ theme }) => theme.primaryText1};
   padding: 0.5rem;
   border-radius: 12px;
   margin-top: 8px;

src/pages/Swap/index.tsx

@@ -452,7 +452,6 @@ export default function Swap({ history }: RouteComponentProps) {
                             justifyContent: 'space-between',
                             alignItems: 'center',
                             height: '24px',
-                            opacity: 0.8,
                             lineHeight: '120%',
                             marginLeft: '0.75rem',
                           }}
@@ -477,7 +476,7 @@ export default function Swap({ history }: RouteComponentProps) {
                         display: 'flex',
                         justifyContent: 'space-between',
                         height: '24px',
-                        opacity: 0.4,
+                        opacity: 0.8,
                         marginLeft: '0.25rem',
                       }}
                     >

src/theme/index.tsx

@@ -44,8 +44,8 @@ export function colors(darkMode: boolean): Colors {
     // text
     text1: darkMode ? '#FFFFFF' : '#000000',
     text2: darkMode ? '#C3C5CB' : '#565A69',
-    text3: darkMode ? '#6C7284' : '#888D9B',
-    text4: darkMode ? '#565A69' : '#C3C5CB',
+    text3: darkMode ? '#8F96AC' : '#6E727D',
+    text4: darkMode ? '#B2B9D2' : '#C3C5CB',
     text5: darkMode ? '#2C2F36' : '#EDEEF2',
 
     // backgrounds / greys
@@ -62,34 +62,33 @@ export function colors(darkMode: boolean): Colors {
     advancedBG: darkMode ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.6)',
 
     //primary colors
-    primary1: darkMode ? '#2172E5' : '#ff007a',
+    primary1: darkMode ? '#2172E5' : '#E8006F',
     primary2: darkMode ? '#3680E7' : '#FF8CC3',
     primary3: darkMode ? '#4D8FEA' : '#FF99C9',
     primary4: darkMode ? '#376bad70' : '#F6DDE8',
     primary5: darkMode ? '#153d6f70' : '#FDEAF1',
 
     // color text
-    primaryText1: darkMode ? '#6da8ff' : '#ff007a',
+    primaryText1: darkMode ? '#438BF0' : '#D50066',
 
     // secondary colors
-    secondary1: darkMode ? '#2172E5' : '#ff007a',
+    secondary1: darkMode ? '#2172E5' : '#E8006F',
     secondary2: darkMode ? '#17000b26' : '#F6DDE8',
     secondary3: darkMode ? '#17000b26' : '#FDEAF1',
 
     // other
-    red1: '#FD4040',
-    red2: '#F82D3A',
+    red1: darkMode ? '#FF4343' : '#DA2D2B',
+    red2: darkMode ? '#F82D3A' : '#DF1F38',
     red3: '#D60000',
-    green1: '#27AE60',
-    yellow1: '#e3a507',
-    yellow2: '#ff8f00',
+    green1: darkMode ? '#27AE60' : '#007D35',
+    yellow1: '#E3A507',
+    yellow2: '#FF8F00',
     yellow3: '#F3B71E',
-    blue1: '#2172E5',
-    blue2: '#5199FF',
-
-    error: '#FD4040',
-    success: '#27AE60',
-    warning: '#ff8f00',
+    blue1: darkMode ? '#2172E5' : '#0068FC',
+    blue2: darkMode ? '#5199FF' : '#0068FC',
+    error: darkMode ? '#FD4040' : '#DF1F38',
+    success: darkMode ? '#27AE60' : '#007D35',
+    warning: '#FF8F00',
 
     // dont wanna forget these blue yet
     // blue4: darkMode ? '#153d6f70' : '#C4D9F8',