Radio button edits, theme updates (#668)

src/components/AccountDetails/Copy.js

@@ -6,7 +6,7 @@ import { Link } from '../../theme'
 import { CheckCircle, Copy } from 'react-feather'
 
 const CopyIcon = styled(Link)`
-  color: ${({ theme }) => theme.silverGray};
+  color: ${({ theme }) => theme.text4};
   flex-shrink: 0;
   margin-right: 1rem;
   margin-left: 0.5rem;
@@ -15,7 +15,7 @@ const CopyIcon = styled(Link)`
   :active,
   :focus {
     text-decoration: none;
-    color: ${({ theme }) => theme.doveGray};
+    color: ${({ theme }) => theme.text3};
   }
 `
 const TransactionStatusText = styled.span`

src/components/AccountDetails/Transaction.js

@@ -50,14 +50,14 @@ const rotate = keyframes`
 const TransactionState = styled.div`
   display: flex;
   background-color: ${({ pending, theme }) =>
-    pending ? transparentize(0.95, theme.royalBlue) : transparentize(0.95, theme.connectedGreen)};
+    pending ? transparentize(0.95, theme.blue1) : transparentize(0.95, theme.green1)};
   border-radius: 1.5rem;
   padding: 0.5rem 0.75rem;
   font-weight: 500;
   font-size: 0.75rem;
   border: 1px solid;
   border-color: ${({ pending, theme }) =>
-    pending ? transparentize(0.75, theme.royalBlue) : transparentize(0.75, theme.connectedGreen)};
+    pending ? transparentize(0.75, theme.blue1) : transparentize(0.75, theme.green1)};
 
   #pending {
     animation: 2s ${rotate} linear infinite;
@@ -65,12 +65,12 @@ const TransactionState = styled.div`
 
   :hover {
     border-color: ${({ pending, theme }) =>
-      pending ? transparentize(0, theme.royalBlue) : transparentize(0, theme.connectedGreen)};
+      pending ? transparentize(0, theme.blue1) : transparentize(0, theme.green1)};
   }
 `
 const ButtonWrapper = styled.div`
   a {
-    color: ${({ pending, theme }) => (pending ? theme.royalBlue : theme.connectedGreen)};
+    color: ${({ pending, theme }) => (pending ? theme.blue1 : theme.green1)};
   }
 `
 

src/components/AccountDetails/index.js

@@ -21,12 +21,12 @@ const OptionButton = styled.div`
   justify-content: center;
   align-items: center;
   border-radius: 20px;
-  border: 1px solid ${({ theme }) => theme.royalBlue};
-  color: ${({ theme }) => theme.royalBlue};
+  border: 1px solid ${({ theme }) => theme.blue1};
+  color: ${({ theme }) => theme.blue1};
   padding: 8px 24px;
 
   &:hover {
-    border: 1px solid ${({ theme }) => theme.malibuBlue};
+    border: 1px solid ${({ theme }) => theme.blue3};
     cursor: pointer;
   }
 
@@ -39,7 +39,7 @@ const HeaderRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
   padding: 1.5rem 1.5rem;
   font-weight: 500;
-  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.royalBlue : 'inherit')};
+  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.blue1 : 'inherit')};
   ${({ theme }) => theme.mediaWidth.upToMedium`
     padding: 1rem;
   `};
@@ -47,7 +47,7 @@ const HeaderRow = styled.div`
 
 const UpperSection = styled.div`
   position: relative;
-  background-color: ${({ theme }) => theme.concreteGray};
+  background-color: ${({ theme }) => theme.bg1};
 
   h5 {
     margin: 0;
@@ -68,7 +68,7 @@ const UpperSection = styled.div`
 
 const InfoCard = styled.div`
   padding: 1rem;
-  border: 1px solid ${({ theme }) => theme.placeholderGray};
+  border: 1px solid ${({ theme }) => theme.bg4};
   border-radius: 20px;
 `
 
@@ -77,7 +77,7 @@ const AccountGroupingRow = styled.div`
   justify-content: space-between;
   align-items: center;
   font-weight: 500;
-  color: ${({ theme }) => theme.textColor};
+  color: ${({ theme }) => theme.text1};
 
   div {
     ${({ theme }) => theme.flexRowNoWrap}
@@ -90,7 +90,7 @@ const AccountGroupingRow = styled.div`
 `
 
 const AccountSection = styled.div`
-  background-color: ${({ theme }) => theme.concreteGray};
+  background-color: ${({ theme }) => theme.bg1};
   padding: 0rem 1.5rem;
   ${({ theme }) => theme.mediaWidth.upToMedium`padding: 0rem 1rem 1rem 1rem;`};
 `
@@ -117,13 +117,13 @@ const GreenCircle = styled.div`
     width: 8px;
     margin-left: 12px;
     margin-right: 2px;
-    background-color: ${({ theme }) => theme.connectedGreen};
+    background-color: ${({ theme }) => theme.green1};
     border-radius: 50%;
   }
 `
 
 const CircleWrapper = styled.div`
-  color: ${({ theme }) => theme.connectedGreen};
+  color: ${({ theme }) => theme.green1};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -138,7 +138,7 @@ const LowerSection = styled.div`
   h5 {
     margin: 0;
     font-weight: 400;
-    color: ${({ theme }) => theme.doveGray};
+    color: ${({ theme }) => theme.text3};
   }
 `
 
@@ -170,7 +170,7 @@ const ConnectButtonRow = styled.div`
 `
 
 const StyledLink = styled(Link)`
-  color: ${({ hasENS, isENS, theme }) => (hasENS ? (isENS ? theme.royalBlue : theme.doveGray) : theme.royalBlue)};
+  color: ${({ hasENS, isENS, theme }) => (hasENS ? (isENS ? theme.blue1 : theme.text3) : theme.blue1)};
 `
 
 const CloseIcon = styled.div`
@@ -185,7 +185,7 @@ const CloseIcon = styled.div`
 
 const CloseColor = styled(Close)`
   path {
-    stroke: ${({ theme }) => theme.chaliceGray};
+    stroke: ${({ theme }) => theme.text4};
   }
 `
 
@@ -213,7 +213,7 @@ const TransactionListWrapper = styled.div`
 `
 
 const WalletAction = styled.div`
-  color: ${({ theme }) => theme.chaliceGray};
+  color: ${({ theme }) => theme.text4};
   margin-left: 16px;
   font-weight: 400;
   :hover {
@@ -223,7 +223,7 @@ const WalletAction = styled.div`
 `
 
 const MainWalletAction = styled(WalletAction)`
-  color: ${({ theme }) => theme.royalBlue};
+  color: ${({ theme }) => theme.blue1};
 `
 
 function renderTransactions(transactions, pending) {

src/components/AddressInputPanel/index.js

@@ -9,10 +9,10 @@ import { useWeb3React, useDebounce } from '../../hooks'
 
 const InputPanel = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap}
-  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadowColor)};
+  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
   position: relative;
   border-radius: 1.25rem;
-  background-color: ${({ theme }) => theme.inputBackground};
+  background-color: ${({ theme }) => theme.bg1};
   z-index: 1;
   width: 100%;
 `
@@ -22,9 +22,8 @@ const ContainerRow = styled.div`
   justify-content: center;
   align-items: center;
   border-radius: 1.25rem;
-  border: 1px solid ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)};
-
-  background-color: ${({ theme }) => theme.inputBackground};
+  border: 1px solid ${({ error, theme }) => (error ? theme.red1 : theme.bg3)};
+  background-color: ${({ theme }) => theme.bg1};
 `
 
 const InputContainer = styled.div`
@@ -43,14 +42,14 @@ const Input = styled.input`
   border: none;
   flex: 1 1 auto;
   width: 0;
-  background-color: ${({ theme }) => theme.inputBackground};
+  background-color: ${({ theme }) => theme.bg1};
 
-  color: ${({ error, theme }) => (error ? theme.salmonRed : theme.royalBlue)};
+  color: ${({ error, theme }) => (error ? theme.red1 : theme.blue1)};
   overflow: hidden;
   text-overflow: ellipsis;
 
   ::placeholder {
-    color: ${({ theme }) => theme.placeholderGray};
+    color: ${({ theme }) => theme.text4};
   }
 `
 
@@ -58,7 +57,7 @@ const QRWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid ${({ theme }) => theme.outlineGrey};
+  border: 1px solid ${({ theme }) => theme.bg3};
   background: #fbfbfb;
   padding: 4px;
   border-radius: 8px;

src/components/AdvancedSettings/index.js

-import React, { useState } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import styled from 'styled-components'
 
 import QuestionHelper from '../Question'
@@ -6,17 +6,17 @@ import NumericalInput from '../NumericalInput'
 import { Link } from '../../theme/components'
 import { TYPE } from '../../theme'
 import { AutoColumn } from '../../components/Column'
-import Row, { RowBetween, RowFixed } from '../../components/Row'
 import { ButtonRadio } from '../Button'
+import Row, { RowBetween, RowFixed } from '../../components/Row'
 
 const InputWrapper = styled(RowBetween)`
   width: 200px;
-  background-color: ${({ theme }) => theme.inputBackground};
+  background-color: ${({ theme }) => theme.bg1};
   border-radius: 8px;
   padding: 4px 8px;
   border: 1px solid transparent;
   border: ${({ active, error, theme }) =>
-    error ? '1px solid ' + theme.salmonRed : active ? '1px solid ' + theme.royalBlue : ''};
+    error ? '1px solid ' + theme.red1 : active ? '1px solid ' + theme.blue1 : ''};
 `
 
 const SLIPPAGE_INDEX = {
@@ -26,25 +26,28 @@ const SLIPPAGE_INDEX = {
   4: 4
 }
 
-export default function AdvancedSettings({ setIsOpen, setDeadline, setAllowedSlippage }) {
+export default function AdvancedSettings({ setIsOpen, setDeadline, allowedSlippage, setAllowedSlippage }) {
   const [deadlineInput, setDeadlineInput] = useState(15)
   const [slippageInput, setSlippageInput] = useState()
   const [activeIndex, setActiveIndex] = useState(SLIPPAGE_INDEX[3])
 
   const [slippageInputError, setSlippageInputError] = useState(null) // error
 
-  function parseCustomInput(val) {
-    const acceptableValues = [/^$/, /^\d{1,2}$/, /^\d{0,2}\.\d{0,2}$/]
-    if (val > 5) {
-      setSlippageInputError('Your transaction may be front-run.')
-    } else {
-      setSlippageInputError(null)
-    }
-    if (acceptableValues.some(a => a.test(val))) {
-      setSlippageInput(val)
-      setAllowedSlippage(val * 100)
-    }
-  }
+  const parseCustomInput = useCallback(
+    val => {
+      const acceptableValues = [/^$/, /^\d{1,2}$/, /^\d{0,2}\.\d{0,2}$/]
+      if (val > 5) {
+        setSlippageInputError('Your transaction may be front-run.')
+      } else {
+        setSlippageInputError(null)
+      }
+      if (acceptableValues.some(a => a.test(val))) {
+        setSlippageInput(val)
+        setAllowedSlippage(val * 100)
+      }
+    },
+    [setAllowedSlippage]
+  )
 
   function parseCustomDeadline(val) {
     const acceptableValues = [/^$/, /^\d+$/]
@@ -54,6 +57,21 @@ export default function AdvancedSettings({ setIsOpen, setDeadline, setAllowedSli
     }
   }
 
+  // update settings based on current slippage selected
+  useEffect(() => {
+    if (allowedSlippage === 10) {
+      setActiveIndex(1)
+    } else if (allowedSlippage === 100) {
+      setActiveIndex(2)
+    } else if (allowedSlippage === 200) {
+      setActiveIndex(3)
+    } else {
+      setActiveIndex(4)
+      setSlippageInput(allowedSlippage / 100)
+      parseCustomInput(allowedSlippage)
+    }
+  }, [allowedSlippage, parseCustomInput])
+
   return (
     <AutoColumn gap="20px">
       <Link

src/components/Button/index.js

@@ -23,22 +23,22 @@ const Base = styled(RebassButton)`
 `
 
 export const ButtonPrimary = styled(Base)`
-  background-color: ${({ theme }) => theme.royalBlue};
+  background-color: ${({ theme }) => theme.blue1};
   color: white;
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.royalBlue)};
-    background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.blue1)};
+    background-color: ${({ theme }) => darken(0.05, theme.blue1)};
   }
   &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
+    background-color: ${({ theme }) => darken(0.05, theme.blue1)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.royalBlue)};
-    background-color: ${({ theme }) => darken(0.1, theme.royalBlue)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.blue1)};
+    background-color: ${({ theme }) => darken(0.1, theme.blue1)};
   }
   &:disabled {
-    background-color: ${({ theme }) => theme.outlineGrey};
-    color: ${({ theme }) => theme.darkGray}
+    background-color: ${({ theme }) => theme.bg3};
+    color: ${({ theme }) => theme.text3}
     cursor: auto;
     box-shadow: none;
   }
@@ -70,24 +70,24 @@ export const ButtonSecondary = styled(Base)`
 `
 
 export const ButtonPink = styled(Base)`
-  background-color: ${({ theme }) => theme.darkPink};
+  background-color: ${({ theme }) => theme.pink2};
   color: white;
 
   padding: 10px;
 
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.darkPink)};
-    background-color: ${({ theme }) => darken(0.05, theme.darkPink)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.pink2)};
+    background-color: ${({ theme }) => darken(0.05, theme.pink2)};
   }
   &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.darkPink)};
+    background-color: ${({ theme }) => darken(0.05, theme.pink2)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.darkPink)};
-    background-color: ${({ theme }) => darken(0.1, theme.darkPink)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.pink2)};
+    background-color: ${({ theme }) => darken(0.1, theme.pink2)};
   }
   &:disabled {
-    background-color: ${({ theme }) => theme.darkPink};
+    background-color: ${({ theme }) => theme.pink2};
     opacity: 50%;
     cursor: auto;
   }
@@ -115,7 +115,7 @@ export const ButtonEmpty = styled(Base)`
 
 export const ButtonWhite = styled(Base)`
   border: 1px solid #edeef2;
-  background-color: ${({ theme }) => theme.panelBackground};
+  background-color: ${({ theme }) => theme.bg1};
   };
   color: black;
 
@@ -135,8 +135,8 @@ export const ButtonWhite = styled(Base)`
 `
 
 const ButtonConfirmedStyle = styled(Base)`
-  background-color: ${({ theme }) => lighten(0.5, theme.connectedGreen)};
-  border: 1px solid ${({ theme }) => theme.connectedGreen};
+  background-color: ${({ theme }) => lighten(0.5, theme.green1)};
+  border: 1px solid ${({ theme }) => theme.green1};
 
   &:disabled {
     opacity: 50%;
@@ -145,19 +145,19 @@ const ButtonConfirmedStyle = styled(Base)`
 `
 
 const ButtonErrorStyle = styled(Base)`
-  background-color: ${({ theme }) => theme.salmonRed};
-  border: 1px solid ${({ theme }) => theme.salmonRed};
+  background-color: ${({ theme }) => theme.red1};
+  border: 1px solid ${({ theme }) => theme.red1};
 
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.salmonRed)};
-    background-color: ${({ theme }) => darken(0.05, theme.salmonRed)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.red1)};
+    background-color: ${({ theme }) => darken(0.05, theme.red1)};
   }
   &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.salmonRed)};
+    background-color: ${({ theme }) => darken(0.05, theme.red1)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.salmonRed)};
-    background-color: ${({ theme }) => darken(0.1, theme.salmonRed)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.red1)};
+    background-color: ${({ theme }) => darken(0.1, theme.red1)};
   }
   &:disabled {
     opacity: 50%;

src/components/Card/index.js

@@ -14,7 +14,7 @@ const Card = styled(Box)`
 export default Card
 
 export const LightCard = styled(Card)`
-  border: 1px solid ${({ theme }) => theme.outlineGrey};
+  border: 1px solid ${({ theme }) => theme.bg3};
 `
 
 export const GreyCard = styled(Card)`

src/components/ConfirmationModal/index.js

@@ -22,7 +22,7 @@ const Section = styled(AutoColumn)`
 `
 
 const BottomSection = styled(Section)`
-  background-color: ${({ theme }) => theme.activeGray};
+  background-color: ${({ theme }) => theme.bg2};
 `
 
 const ConfirmedIcon = styled(ColumnCenter)`

src/components/CurrencyInputPanel/index.js

@@ -36,9 +36,9 @@ const SubCurrencySelect = styled.button`
   outline: none;
   cursor: pointer;
   user-select: none;
-  background: ${({ theme }) => theme.zumthorBlue};
-  border: 1px solid ${({ theme }) => theme.royalBlue};
-  color: ${({ theme }) => theme.royalBlue};
+  background: ${({ theme }) => theme.blue5};
+  border: 1px solid ${({ theme }) => theme.blue1};
+  color: ${({ theme }) => theme.blue1};
 `
 
 const InputRow = styled.div`
@@ -52,20 +52,18 @@ const CurrencySelect = styled.button`
   align-items: center;
   height: 2.2rem;
   font-size: 20px;
-  background-color: ${({ selected, theme }) => (selected ? theme.buttonBackgroundPlain : theme.royalBlue)};
-  color: ${({ selected, theme }) => (selected ? theme.textColor : theme.white)};
+  background-color: ${({ selected, theme }) => (selected ? theme.bg1 : theme.blue1)};
+  color: ${({ selected, theme }) => (selected ? theme.text1 : theme.white)};
   border-radius: 8px;
   outline: none;
   cursor: pointer;
   user-select: none;
 
-  border: 1px solid
-    ${({ selected, theme }) => (selected ? darken(0.1, theme.outlineGrey) : darken(0.1, theme.royalBlue))};
+  border: 1px solid ${({ selected, theme }) => (selected ? darken(0.1, theme.bg3) : darken(0.1, theme.blue1))};
 
   :focus,
   :hover {
-    border: 1px solid
-      ${({ selected, theme }) => (selected ? darken(0.2, theme.outlineGrey) : darken(0.2, theme.royalBlue))};
+    border: 1px solid ${({ selected, theme }) => (selected ? darken(0.2, theme.bg3) : darken(0.2, theme.blue1))};
   }
 `
 
@@ -80,7 +78,7 @@ const StyledDropDown = styled(DropDown)`
   height: 35%;
 
   path {
-    stroke: ${({ selected, theme }) => (selected ? theme.textColor : theme.white)};
+    stroke: ${({ selected, theme }) => (selected ? theme.text1 : theme.white)};
   }
 `
 
@@ -88,34 +86,34 @@ const InputPanel = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap}
   position: relative;
   border-radius: ${({ hideInput }) => (hideInput ? '8px' : '20px')};
-  background-color: ${({ theme }) => theme.inputBackground};
+  background-color: ${({ theme }) => theme.bg1};
   z-index: 1;
 `
 
 const Container = styled.div`
   border-radius: ${({ hideInput }) => (hideInput ? '8px' : '20px')};
-  border: 1px solid ${({ error, theme }) => (error ? theme.salmonRed : theme.backgroundColor)};
-  background-color: ${({ theme }) => theme.inputBackground};
+  border: 1px solid ${({ error, theme }) => (error ? theme.red1 : theme.bg2)};
+  background-color: ${({ theme }) => theme.bg1};
 `
 
 const LabelRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
-  color: ${({ theme }) => theme.doveGray};
+  color: ${({ theme }) => theme.text3};
   font-size: 0.75rem;
   line-height: 1rem;
   padding: 0.5rem 1rem 1rem 1rem;
   span:hover {
     cursor: pointer;
-    color: ${({ theme }) => darken(0.2, theme.doveGray)};
+    color: ${({ theme }) => darken(0.2, theme.text3)};
   }
 `
 
 const ErrorSpan = styled.span`
-  color: ${({ error, theme }) => error && theme.salmonRed};
+  color: ${({ error, theme }) => error && theme.red1};
   :hover {
     cursor: pointer;
-    color: ${({ error, theme }) => error && darken(0.1, theme.salmonRed)};
+    color: ${({ error, theme }) => error && darken(0.1, theme.red1)};
   }
 `
 
@@ -131,19 +129,19 @@ const ClickableText = styled.div`
 
 const StyledBalanceMax = styled.button`
   height: 35px;
-  background-color: ${({ theme }) => theme.zumthorBlue};
-  border: 1px solid ${({ theme }) => theme.zumthorBlue};
+  background-color: ${({ theme }) => theme.blue5};
+  border: 1px solid ${({ theme }) => theme.blue5};
   border-radius: 0.5rem;
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
   margin-right: 0.5rem;
-  color: ${({ theme }) => theme.royalBlue};
+  color: ${({ theme }) => theme.blue1};
   :hover {
-    border: 1px solid ${({ theme }) => theme.royalBlue};
+    border: 1px solid ${({ theme }) => theme.blue1};
   }
   :focus {
-    border: 1px solid ${({ theme }) => theme.royalBlue};
+    border: 1px solid ${({ theme }) => theme.blue1};
     outline: none;
   }
 `

src/components/ExchangePage/index.tsx

@@ -39,7 +39,7 @@ const Wrapper = styled.div`
 
 const ArrowWrapper = styled.div`
   padding: 4px;
-  border: 1px solid ${({ theme }) => theme.malibuBlue};
+  border: 1px solid ${({ theme }) => theme.blue4};
   border-radius: 12px;
   display: flex;
   justify-content: center;
@@ -59,7 +59,7 @@ const FixedBottom = styled.div`
 
 const ErrorText = styled(Text)`
   color: ${({ theme, warningMedium, warningHigh }) =>
-    warningHigh ? theme.salmonRed : warningMedium ? theme.warningYellow : theme.textColor};
+    warningHigh ? theme.red1 : warningMedium ? theme.yellow1 : theme.text1};
 `
 
 const InputGroup = styled(AutoColumn)`
@@ -82,19 +82,19 @@ const MaxButton = styled.button`
   position: absolute;
   right: 70px;
   padding: 0.5rem 1rem;
-  background-color: ${({ theme }) => theme.zumthorBlue};
-  border: 1px solid ${({ theme }) => theme.zumthorBlue};
+  background-color: ${({ theme }) => theme.blue5};
+  border: 1px solid ${({ theme }) => theme.blue5};
   border-radius: 0.5rem;
   font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
   margin-right: 0.5rem;
-  color: ${({ theme }) => theme.royalBlue};
+  color: ${({ theme }) => theme.blue1};
   :hover {
-    border: 1px solid ${({ theme }) => theme.royalBlue};
+    border: 1px solid ${({ theme }) => theme.blue1};
   }
   :focus {
-    border: 1px solid ${({ theme }) => theme.royalBlue};
+    border: 1px solid ${({ theme }) => theme.blue1};
     outline: none;
   }
 `
@@ -786,6 +786,7 @@ function ExchangePage({ sendingInput = false, history }) {
           setIsOpen={setShowAdvanced}
           setDeadline={setDeadline}
           setAllowedSlippage={setAllowedSlippage}
+          allowedSlippage={allowedSlippage}
         />
       )
     }

src/components/Footer/index.js

@@ -25,13 +25,13 @@ const FooterElement = styled.div`
 const Title = styled.div`
   display: flex;
   align-items: center;
-  color: ${({ theme }) => theme.uniswapPink};
+  color: ${({ theme }) => theme.pink1};
 
   :hover {
     cursor: pointer;
   }
   #link {
-    text-decoration-color: ${({ theme }) => theme.uniswapPink};
+    text-decoration-color: ${({ theme }) => theme.pink1};
   }
 
   #title {
@@ -39,9 +39,9 @@ const Title = styled.div`
     font-size: 0.825rem;
     margin-right: 12px;
     font-weight: 400;
-    color: ${({ theme }) => theme.uniswapPink};
+    color: ${({ theme }) => theme.pink1};
     :hover {
-      color: ${({ theme }) => darken(0.2, theme.uniswapPink)};
+      color: ${({ theme }) => darken(0.2, theme.pink1)};
     }
   }
 `
@@ -50,15 +50,15 @@ const StyledToggle = styled(Toggle)`
   margin-right: 24px;
 
   .react-switch-bg[style] {
-    background-color: ${({ theme }) => darken(0.05, theme.inputBackground)} !important;
-    border: 1px solid ${({ theme }) => theme.concreteGray} !important;
+    background-color: ${({ theme }) => darken(0.05, theme.bg1)} !important;
+    border: 1px solid ${({ theme }) => theme.bg1} !important;
   }
 
   .react-switch-handle[style] {
-    background-color: ${({ theme }) => theme.inputBackground};
-    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.93, theme.shadowColor)};
-    border: 1px solid ${({ theme }) => theme.mercuryGray};
-    border-color: ${({ theme }) => theme.mercuryGray} !important;
+    background-color: ${({ theme }) => theme.bg1};
+    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.93, theme.shadow1)};
+    border: 1px solid ${({ theme }) => theme.bg3};
+    border-color: ${({ theme }) => theme.bg3} !important;
     top: 2px !important;
   }
 `

src/components/Header/index.js

@@ -9,6 +9,7 @@ import Web3Status from '../Web3Status'
 import { X } from 'react-feather'
 import { Link } from '../../theme'
 import { Text } from 'rebass'
+import { AutoColumn } from '../Column'
 
 import { WETH } from '@uniswap/sdk'
 import { isMobile } from 'react-device-detect'
@@ -16,7 +17,6 @@ import { isMobile } from 'react-device-detect'
 import { useWeb3React } from '../../hooks'
 import { useAddressBalance } from '../../contexts/Balances'
 import { useWalletModalToggle, usePopups } from '../../contexts/Application'
-import { AutoColumn } from '../Column'
 
 const HeaderFrame = styled.div`
   display: flex;
@@ -55,8 +55,8 @@ const AccountElement = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: ${({ theme, active }) => (!active ? theme.white : theme.outlineGrey)};
-  border: 1px solid ${({ theme }) => theme.outlineGrey};
+  background-color: ${({ theme, active }) => (!active ? theme.white : theme.bg3)};
+  border: 1px solid ${({ theme }) => theme.bg3};
   border-radius: 8px;
   padding-left: ${({ active }) => (active ? '8px' : 0)};
 

src/components/Identicon/index.js

@@ -9,7 +9,7 @@ const StyledIdenticon = styled.div`
   height: 1rem;
   width: 1rem;
   border-radius: 1.125rem;
-  background-color: ${({ theme }) => theme.silverGray};
+  background-color: ${({ theme }) => theme.bg4};
 `
 
 export default function Identicon() {

src/components/Menu/index.js

@@ -10,7 +10,7 @@ import { useToggle } from '../../hooks'
 
 const StyledMenuIcon = styled(MenuIcon)`
   path {
-    stroke: ${({ theme }) => theme.textColor};
+    stroke: ${({ theme }) => theme.text1};
   }
 `
 
@@ -22,15 +22,15 @@ const StyledMenuButton = styled.button`
   margin: 0;
   padding: 0;
   height: 35px;
-  background-color: ${({ theme }) => theme.outlineGrey};
-  border: 1px solid ${({ theme }) => theme.outlineGrey};
+  background-color: ${({ theme }) => theme.bg3};
+  border: 1px solid ${({ theme }) => theme.bg3};
 
   padding: 0.15rem 0.5rem;
   border-radius: 0.5rem;
 
   :hover, :focus {
-    /* background-color: ${({ theme }) => darken(0.2, theme.concreteGray)}; */
-    border: 1px solid ${({ theme }) => darken(0.2, theme.concreteGray)};
+    /* background-color: ${({ theme }) => darken(0.2, theme.bg1)}; */
+    border: 1px solid ${({ theme }) => darken(0.2, theme.bg1)};
     cursor: pointer;
     outline: none;
   }
@@ -54,9 +54,9 @@ const StyledMenu = styled.div`
 
 const MenuFlyout = styled.span`
   min-width: 8.125rem;
-  background-color: ${({ theme }) => theme.inputBackground};
+  background-color: ${({ theme }) => theme.bg1};
   ${({ theme }) => theme.dropShadow}
-  border: 1px solid ${({ theme }) => theme.mercuryGray};
+  border: 1px solid ${({ theme }) => theme.bg3};
   border-radius: 0.5rem;
   padding: 0.5rem;
   display: flex;
@@ -71,9 +71,9 @@ const MenuItem = styled(Link)`
   flex: 1;
   /* text-align: right; */
   padding: 0.5rem 0.5rem;
-  color: ${({ theme }) => theme.doveGray};
+  color: ${({ theme }) => theme.text3};
   :hover {
-    color: ${({ theme }) => theme.textColor};
+    color: ${({ theme }) => theme.text1};
     cursor: pointer;
   }
 `

src/components/Modal/index.js

@@ -29,7 +29,7 @@ const StyledDialogOverlay = styled(WrappedDialogOverlay).attrs({
 
     &::after {
       content: '';
-      background-color: ${({ theme }) => theme.modalBackground};
+      background-color: ${({ theme }) => 'rgba(0,0,0,0.6)'};
       opacity: 0.5;
       top: 0;
       left: 0;
@@ -48,9 +48,9 @@ const FilteredDialogContent = ({ minHeight, maxHeight, isOpen, slideInAnimation,
 const StyledDialogContent = styled(FilteredDialogContent)`
   &[data-reach-dialog-content] {
     margin: 0 0 2rem 0;
-    border: 1px solid ${({ theme }) => theme.concreteGray};
-    background-color: ${({ theme }) => theme.inputBackground};
-    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadowColor)};
+    border: 1px solid ${({ theme }) => theme.bg1};
+    background-color: ${({ theme }) => theme.bg1};
+    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
     padding: 0px;
     width: 50vw;
 

src/components/NavigationTabs/index.js

@@ -50,7 +50,7 @@ const StyledNavLink = styled(NavLink).attrs({
   outline: none;
   cursor: pointer;
   text-decoration: none;
-  color: ${({ theme }) => theme.doveGray};
+  color: ${({ theme }) => theme.text3};
   font-size: 20px;
   box-sizing: border-box;
 

src/components/NumericalInput/index.tsx

@@ -2,15 +2,15 @@ import React from 'react'
 import styled from 'styled-components'
 
 const StyledInput = styled.input`
-  color: ${({ error, theme }) => error && theme.salmonRed};
-  background-color: ${({ theme }) => theme.inputBackground};
-  color: ${({ theme }) => theme.textColor};
+  color: ${({ error, theme }) => error && theme.red1};
+  background-color: ${({ theme }) => theme.bg1};
+  color: ${({ theme }) => theme.text1};
   width: 0;
   font-size: 20px;
   outline: none;
   border: none;
   flex: 1 1 auto;
-  background-color: ${({ theme }) => theme.inputBackground};
+  background-color: ${({ theme }) => theme.bg1};
   font-size: ${({ fontSize }) => fontSize && fontSize};
   text-align: ${({ align }) => align && align};
 
@@ -24,7 +24,7 @@ const StyledInput = styled.input`
   }
 
   ::placeholder {
-    color: ${({ theme }) => theme.chaliceGray};
+    color: ${({ theme }) => theme.text4};
   }
 `
 

src/components/OversizedPanel/index.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 const Panel = styled.div`
   position: relative;
-  background-color: ${({ theme }) => theme.concreteGray};
+  background-color: ${({ theme }) => theme.bg1};
   width: calc(100% - 1rem);
   margin: 0 auto;
   border-radius: 0.625rem;
@@ -16,7 +16,7 @@ const PanelTop = styled.div`
   left: 0;
   height: 1rem;
   width: 100%;
-  background-color: ${({ theme }) => theme.concreteGray};
+  background-color: ${({ theme }) => theme.bg1};
 `
 
 const PanelBottom = styled.div`
@@ -25,7 +25,7 @@ const PanelBottom = styled.div`
   left: 0;
   height: 1rem;
   width: 100%;
-  background-color: ${({ theme }) => theme.concreteGray};
+  background-color: ${({ theme }) => theme.bg1};
 `
 
 export default function OversizedPanel({ hideTop, hideBottom, children }) {

src/components/Question/index.js

@@ -51,14 +51,14 @@ const Popup = styled.div`
   align-items: center;
   padding: 0.6rem 1rem;
   line-height: 150%;
-  background: ${({ theme }) => theme.inputBackground};
-  border: 1px solid ${({ theme }) => theme.mercuryGray};
+  background: ${({ theme }) => theme.bg1};
+  border: 1px solid ${({ theme }) => theme.bg3};
 
   border-radius: 8px;
 
   animation: ${fadeIn} 0.15s linear;
 
-  color: ${({ theme }) => theme.textColor};
+  color: ${({ theme }) => theme.text1};
   font-style: italic;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`

src/components/SearchModal/index.js

@@ -44,12 +44,12 @@ const TokenList = styled.div`
 `
 
 const FadedSpan = styled.span`
-  color: ${({ theme }) => theme.royalBlue};
+  color: ${({ theme }) => theme.blue1};
 `
 
 const SpinnerWrapper = styled(Spinner)`
   margin: 0 0.25rem 0 0.25rem;
-  color: ${({ theme }) => theme.chaliceGray};
+  color: ${({ theme }) => theme.text4};
   opacity: 0.6;
 `
 
@@ -66,11 +66,11 @@ const Input = styled.input`
   border: 1px solid #edeef2;
   box-sizing: border-box;
   border-radius: 20px;
-  color: ${({ theme }) => theme.textColor};
+  color: ${({ theme }) => theme.text1};
   font-size: 18px;
 
   ::placeholder {
-    color: ${({ theme }) => theme.fadedText};
+    color: ${({ theme }) => theme.text3};
   }
 `
 
@@ -81,7 +81,7 @@ const TokenModal = styled.div`
 
 const FilterWrapper = styled(RowFixed)`
   padding: 8px;
-  background-color: ${({ selected, theme }) => selected && theme.backgroundColor};
+  background-color: ${({ selected, theme }) => selected && theme.bg2};
   color: ${({ selected, theme }) => (selected ? theme.black : '#888D9B')};
   border-radius: 8px;
   user-select: none;
@@ -107,7 +107,7 @@ const PaddedItem = styled(RowBetween)`
 const MenuItem = styled(PaddedItem)`
   cursor: pointer;
   :hover {
-    background-color: ${({ theme }) => theme.tokenRowHover};
+    background-color: ${({ theme }) => theme.bg2};
   }
 `
 // filters on results

src/components/WalletModal/Option.js

@@ -3,16 +3,16 @@ import styled from 'styled-components'
 import { Link } from '../../theme'
 
 const InfoCard = styled.button`
-  background-color: ${({ theme, active }) => (active ? theme.activeGray : theme.backgroundColor)};
+  background-color: ${({ theme, active }) => (active ? theme.bg3 : theme.bg2)};
   padding: 1rem;
   outline: none;
   border: 1px solid;
   border-radius: 12px;
   width: 100% !important;
   &:focus {
-    box-shadow: 0 0 0 1px ${({ theme }) => theme.royalBlue};
+    box-shadow: 0 0 0 1px ${({ theme }) => theme.blue1};
   }
-  border-color: ${({ theme, active }) => (active ? 'transparent' : theme.placeholderGray)};
+  border-color: ${({ theme, active }) => (active ? 'transparent' : theme.bg4)};
 `
 
 const OptionCard = styled(InfoCard)`
@@ -34,7 +34,7 @@ const OptionCardClickable = styled(OptionCard)`
   margin-top: 0;
   &:hover {
     cursor: ${({ clickable }) => (clickable ? 'pointer' : '')};
-    border: ${({ clickable, theme }) => (clickable ? `1px solid ${theme.malibuBlue}` : ``)};
+    border: ${({ clickable, theme }) => (clickable ? `1px solid ${theme.blue2}` : ``)};
   }
   opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
 `
@@ -48,13 +48,13 @@ const GreenCircle = styled.div`
     height: 8px;
     width: 8px;
     margin-right: 8px;
-    background-color: ${({ theme }) => theme.connectedGreen};
+    background-color: ${({ theme }) => theme.green1};
     border-radius: 50%;
   }
 `
 
 const CircleWrapper = styled.div`
-  color: ${({ theme }) => theme.connectedGreen};
+  color: ${({ theme }) => theme.green1};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -62,13 +62,13 @@ const CircleWrapper = styled.div`
 
 const HeaderText = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
-  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.royalBlue : ({ theme }) => theme.textColor)};
+  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.blue1 : ({ theme }) => theme.text1)};
   font-size: 1rem;
   font-weight: 500;
 `
 
 const SubHeader = styled.div`
-  color: ${({ theme }) => theme.textColor};
+  color: ${({ theme }) => theme.text1};
   margin-top: 10px;
   font-size: 12px;
 `

src/components/WalletModal/PendingView.js

@@ -23,7 +23,7 @@ const SpinnerWrapper = styled(Spinner)`
   margin-right: 1rem;
   svg {
     path {
-      color: ${({ theme }) => theme.placeholderGray};
+      color: ${({ theme }) => theme.bg4};
     }
   }
 `
@@ -34,8 +34,8 @@ const LoadingMessage = styled.div`
   justify-content: flex-start;
   border-radius: 12px;
   margin-bottom: 20px;
-  color: ${({ theme, error }) => (error ? theme.salmonRed : 'inherit')};
-  border: 1px solid ${({ theme, error }) => (error ? theme.salmonRed : theme.placeholderGray)};
+  color: ${({ theme, error }) => (error ? theme.red1 : 'inherit')};
+  border: 1px solid ${({ theme, error }) => (error ? theme.red1 : theme.text4)};
 
   & > * {
     padding: 1rem;
@@ -51,8 +51,8 @@ const ErrorGroup = styled.div`
 const ErrorButton = styled.div`
   border-radius: 8px;
   font-size: 12px;
-  color: ${({ theme }) => theme.textColor};
-  background-color: ${({ theme }) => theme.placeholderGray};
+  color: ${({ theme }) => theme.text1};
+  background-color: ${({ theme }) => theme.bg4};
   margin-left: 1rem;
   padding: 0.5rem;
   font-weight: 600;
@@ -60,7 +60,7 @@ const ErrorButton = styled.div`
 
   &:hover {
     cursor: pointer;
-    background-color: ${({ theme }) => darken(0.1, theme.placeholderGray)};
+    background-color: ${({ theme }) => darken(0.1, theme.text4)};
   }
 `
 

src/components/WalletModal/index.js

@@ -30,7 +30,7 @@ const CloseIcon = styled.div`
 
 const CloseColor = styled(Close)`
   path {
-    stroke: ${({ theme }) => theme.chaliceGray};
+    stroke: ${({ theme }) => theme.text4};
   }
 `
 
@@ -39,28 +39,28 @@ const Wrapper = styled.div`
   margin: 0;
   padding: 0;
   width: 100%;
-  background-color: ${({ theme }) => theme.backgroundColor};
+  background-color: ${({ theme }) => theme.bg2};
 `
 
 const HeaderRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
   padding: 1.5rem 1.5rem;
   font-weight: 500;
-  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.royalBlue : 'inherit')};
+  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.blue1 : 'inherit')};
   ${({ theme }) => theme.mediaWidth.upToMedium`
     padding: 1rem;
   `};
 `
 
 const ContentWrapper = styled.div`
-  background-color: ${({ theme }) => theme.backgroundColor};
+  background-color: ${({ theme }) => theme.bg2};
   padding: 2rem;
   ${({ theme }) => theme.mediaWidth.upToMedium`padding: 1rem`};
 `
 
 const UpperSection = styled.div`
   position: relative;
-  background-color: ${({ theme }) => theme.concreteGray};
+  background-color: ${({ theme }) => theme.bg1};
 
   h5 {
     margin: 0;

src/components/WarningCard/index.js

@@ -105,11 +105,11 @@ const Popup = styled(Flex)`
   align-items: center;
   padding: 0.6rem 1rem;
   line-height: 150%;
-  background: ${({ theme }) => theme.backgroundColor};
-  border: 1px solid ${({ theme }) => theme.mercuryGray};
+  background: ${({ theme }) => theme.bg2};
+  border: 1px solid ${({ theme }) => theme.bg3};
   border-radius: 8px;
   animation: ${fadeIn} 0.15s linear;
-  color: ${({ theme }) => theme.textColor};
+  color: ${({ theme }) => theme.text1};
   font-style: italic;
 
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
@@ -122,7 +122,7 @@ const Popup = styled(Flex)`
 `
 
 const Text = styled.div`
-  color: ${({ theme }) => theme.textColor};
+  color: ${({ theme }) => theme.text1};
 `
 
 function WarningCard({ onDismiss, urlAddedTokens, currency }) {

src/components/Web3ReactManager/index.js

@@ -17,7 +17,7 @@ const MessageWrapper = styled.div`
 `
 
 const Message = styled.h2`
-  color: ${({ theme }) => theme.uniswapPink};
+  color: ${({ theme }) => theme.pink1};
 `
 
 const SpinnerWrapper = styled(Spinner)`
@@ -25,7 +25,7 @@ const SpinnerWrapper = styled(Spinner)`
 
   svg {
     path {
-      color: ${({ theme }) => theme.uniswapPink};
+      color: ${({ theme }) => theme.pink1};
     }
   }
 `

src/components/Web3Status/index.js

@@ -35,55 +35,53 @@ const Web3StatusGeneric = styled.button`
   }
 `
 const Web3StatusError = styled(Web3StatusGeneric)`
-  background-color: ${({ theme }) => theme.salmonRed};
-  border: 1px solid ${({ theme }) => theme.salmonRed};
+  background-color: ${({ theme }) => theme.red1};
+  border: 1px solid ${({ theme }) => theme.red1};
   color: ${({ theme }) => theme.white};
   font-weight: 500;
   :hover,
   :focus {
-    background-color: ${({ theme }) => darken(0.1, theme.salmonRed)};
+    background-color: ${({ theme }) => darken(0.1, theme.red1)};
   }
 `
 
 const Web3StatusConnect = styled(Web3StatusGeneric)`
   background-color: transparent;
-  border: 1px solid ${({ theme }) => theme.royalBlue};
-  color: ${({ theme }) => theme.royalBlue};
+  border: 1px solid ${({ theme }) => theme.blue1};
+  color: ${({ theme }) => theme.blue1};
   font-weight: 500;
 
   :hover,
   :focus {
-    border: 1px solid ${({ theme }) => darken(0.1, theme.royalBlue)};
-    color: ${({ theme }) => darken(0.1, theme.royalBlue)};
+    border: 1px solid ${({ theme }) => darken(0.1, theme.blue1)};
+    color: ${({ theme }) => darken(0.1, theme.blue1)};
   }
 
   ${({ faded }) =>
     faded &&
     css`
       background-color: transparent;
-      border: 1px solid ${({ theme }) => theme.royalBlue};
-      color: ${({ theme }) => theme.royalBlue};
+      border: 1px solid ${({ theme }) => theme.blue1};
+      color: ${({ theme }) => theme.blue1};
 
       :hover,
       :focus {
-        border: 1px solid ${({ theme }) => darken(0.1, theme.royalBlue)};
-        color: ${({ theme }) => darken(0.1, theme.royalBlue)};
+        border: 1px solid ${({ theme }) => darken(0.1, theme.blue1)};
+        color: ${({ theme }) => darken(0.1, theme.blue1)};
       }
     `}
 `
 
 const Web3StatusConnected = styled(Web3StatusGeneric)`
-  background-color: ${({ pending, theme }) => (pending ? theme.zumthorBlue : theme.inputBackground)};
-  border: 1px solid ${({ pending, theme }) => (pending ? theme.royalBlue : theme.mercuryGray)};
-  color: ${({ pending, theme }) => (pending ? theme.royalBlue : theme.doveGray)};
+  background-color: ${({ pending, theme }) => (pending ? theme.blue5 : theme.bg1)};
+  border: 1px solid ${({ pending, theme }) => (pending ? theme.blue1 : theme.bg3)};
+  color: ${({ pending, theme }) => (pending ? theme.blue1 : theme.text3)};
   font-weight: 400;
   :hover {
-    background-color: ${({ pending, theme }) =>
-      pending ? transparentize(0.9, theme.royalBlue) : darken(0.05, theme.inputBackground)};
+    background-color: ${({ pending, theme }) => (pending ? transparentize(0.9, theme.blue1) : darken(0.05, theme.bg1))};
 
     :focus {
-      border: 1px solid
-        ${({ pending, theme }) => (pending ? darken(0.1, theme.royalBlue) : darken(0.1, theme.mercuryGray))};
+      border: 1px solid ${({ pending, theme }) => (pending ? darken(0.1, theme.blue1) : darken(0.1, theme.bg3))};
     }
   }
 `

src/pages/App.js

@@ -38,15 +38,15 @@ const BetaMessage = styled.div`
   position: relative;
   padding: 0.5rem 1rem;
   margin-bottom: 1rem;
-  border: 1px solid ${({ theme }) => transparentize(0.6, theme.wisteriaPurple)};
-  background-color: ${({ theme }) => transparentize(0.9, theme.wisteriaPurple)};
+  border: 1px solid ${({ theme }) => transparentize(0.6, theme.pink1)};
+  background-color: ${({ theme }) => transparentize(0.9, theme.pink1)};
   border-radius: 1rem;
   font-size: 0.75rem;
   line-height: 1rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: ${({ theme }) => theme.wisteriaPurple};
+  color: ${({ theme }) => theme.pink1};
   min-width: 380px;
   text-align: center;
   justify-content: center;
@@ -66,7 +66,7 @@ const BodyWrapper = styled.div`
 const Body = styled.div`
   max-width: 355px;
   width: 90%;
-  background: ${({ theme }) => theme.panelBackground};
+  background: ${({ theme }) => theme.bg1};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
   border-radius: 20px;

src/pages/Supply/RemoveLiquidity.tsx

@@ -54,19 +54,19 @@ const ClickableText = styled(Text)`
 
 const MaxButton = styled.button`
   padding: 0.5rem 1rem;
-  background-color: ${({ theme }) => theme.zumthorBlue};
-  border: 1px solid ${({ theme }) => theme.zumthorBlue};
+  background-color: ${({ theme }) => theme.blue5};
+  border: 1px solid ${({ theme }) => theme.blue5};
   border-radius: 0.5rem;
   font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
   margin-right: 0.5rem;
-  color: ${({ theme }) => theme.royalBlue};
+  color: ${({ theme }) => theme.blue1};
   :hover {
-    border: 1px solid ${({ theme }) => theme.royalBlue};
+    border: 1px solid ${({ theme }) => theme.blue1};
   }
   :focus {
-    border: 1px solid ${({ theme }) => theme.royalBlue};
+    border: 1px solid ${({ theme }) => theme.blue1};
     outline: none;
   }
 `
@@ -141,7 +141,7 @@ function reducer(
 }
 
 const ConfirmedText = styled(Text)`
-  color: ${({ theme, confirmed }) => (confirmed ? theme.connectedGreen : theme.white)};
+  color: ${({ theme, confirmed }) => (confirmed ? theme.green1 : theme.white)};
 `
 
 export default function RemoveLiquidity({ token0, token1 }) {

src/theme/components.js

@@ -3,7 +3,7 @@ import { darken } from 'polished'
 import { X } from 'react-feather'
 
 export const Button = styled.button.attrs(({ warning, theme }) => ({
-  backgroundColor: warning ? theme.salmonRed : theme.royalBlue
+  backgroundColor: warning ? theme.red1 : theme.blue1
 }))`
   padding: 1rem 2rem 1rem 2rem;
   border-radius: 3rem;
@@ -26,8 +26,8 @@ export const Button = styled.button.attrs(({ warning, theme }) => ({
   }
 
   :disabled {
-    background-color: ${({ theme }) => theme.concreteGray};
-    color: ${({ theme }) => theme.silverGray};
+    background-color: ${({ theme }) => theme.bg1};
+    color: ${({ theme }) => theme.text4};
     cursor: auto;
   }
 `
@@ -44,7 +44,7 @@ export const Link = styled.a.attrs({
 })`
   text-decoration: none;
   cursor: pointer;
-  color: ${({ theme }) => theme.royalBlue};
+  color: ${({ theme }) => theme.blue1};
   font-weight: 500;
 
   :focus {
@@ -57,29 +57,6 @@ export const Link = styled.a.attrs({
   }
 `
 
-export const BorderlessInput = styled.input`
-  color: ${({ theme }) => theme.textColor};
-  font-size: 1rem;
-  outline: none;
-  border: none;
-  flex: 1 1 auto;
-  width: 0;
-  background-color: ${({ theme }) => theme.inputBackground};
-
-  [type='number'] {
-    -moz-appearance: textfield;
-  }
-
-  ::-webkit-outer-spin-button,
-  ::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-  }
-
-  ::placeholder {
-    color: ${({ theme }) => theme.chaliceGray};
-  }
-`
-
 const rotate = keyframes`
   from {
     transform: rotate(0deg);

src/theme/index.js

@@ -42,70 +42,42 @@ export default function ThemeProvider({ children }) {
 }
 
 const theme = darkMode => ({
+  // base
   white,
   black,
-  textColor: darkMode ? white : '#010101',
-  greyText: darkMode ? white : '#6C7284',
-  fadedText: darkMode ? white : '#C3C5CB',
-
-  panelBackground: darkMode ? '#292C2F' : '#FFFFFF',
-
-  // for setting css on <html>
-  backgroundColor: darkMode ? '#333639' : '#F7F8FA',
-  modalBackground: darkMode ? 'rgba(0,0,0,0.6)' : 'rgba(0,0,0,0.5)',
-  inputBackground: darkMode ? '#202124' : white,
-  placeholderGray: darkMode ? '#5F5F5F' : '#E1E1E1',
-  shadowColor: darkMode ? '#000' : '#2F80ED',
-
-  buttonBackgroundPlain: darkMode ? '#333639' : white,
-  buttonOutlinePlain: darkMode ? '#292C2F' : white,
-
-  // grays
-  concreteGray: darkMode ? '#292C2F' : '#FAFAFA',
-  mercuryGray: darkMode ? '#333333' : '#E1E1E1',
-  silverGray: darkMode ? '#737373' : '#C4C4C4',
-  chaliceGray: darkMode ? '#7B7B7B' : '#AEAEAE',
-  doveGray: darkMode ? '#C4C4C4' : '#737373',
-  mineshaftGray: darkMode ? '#E1E1E1' : '#2B2B2B',
-  activeGray: darkMode ? '#292C2F' : '#F7F8FA',
-  buttonOutlineGrey: darkMode ? '#FAFAFA' : '#F2F2F2',
-  tokenRowHover: darkMode ? '#404040' : '#F2F2F2',
-
-  outlineGrey: darkMode ? '#292C2F' : '#EDEEF2',
-  darkGray: darkMode ? '#888D9B' : '#888D9B',
-
-  //blacks
-  charcoalBlack: darkMode ? '#F2F2F2' : '#404040',
-  // blues
-  zumthorBlue: darkMode ? '#212529' : '#EBF4FF',
-  malibuBlue: darkMode ? '#E67AEF' : '#5CA2FF',
-  royalBlue: darkMode ? '#DC6BE5' : '#2F80ED',
-  disabledBlue: darkMode ? '#2172E5' : '#2172E5',
-  loadingBlue: darkMode ? '#e4f0ff' : '#e4f0ff',
-
-  // purples
-  wisteriaPurple: '#DC6BE5',
-
-  // reds
-  salmonRed: '#FF6871',
-  // orange
-  pizazzOrange: '#FF8F05',
-  // yellows
-  warningYellow: '#FFE270',
-  // pink
-  uniswapPink: '#DC6BE5',
-  darkPink: '#ff007a',
-  //green
-  connectedGreen: '#27AE60',
-
-  //branded
-  metaMaskOrange: '#E8831D',
-
-  //specific
-  textHover: darkMode ? theme.uniswapPink : theme.doveGray,
-
-  // connect button when loggedout
-  buttonFaded: darkMode ? '#DC6BE5' : '#737373',
+
+  // text
+  text1: darkMode ? '#FFFFFF' : '#000000',
+  text2: darkMode ? '#888D9B' : '#565A69',
+  text3: darkMode ? '#6C7284' : '#888D9B',
+  text4: '#C3C5CB',
+  text5: '#EDEEF2',
+
+  // backgrounds / greys
+  bg1: darkMode ? '#191B1F' : '#FFFFFF',
+  bg2: darkMode ? '#2C2F36' : '#F7F8FA',
+  bg3: darkMode ? '#40444F' : '#EDEEF2',
+  bg4: darkMode ? '#565A69' : '#CED0D9',
+  bg5: darkMode ? '#565A69' : '#888D9B',
+
+  //blues
+  blue1: '#2172E5',
+  blue2: darkMode ? '#3680E7' : '#1966D2',
+  blue3: darkMode ? '#4D8FEA' : '#165BBB',
+  blue4: '#C4D9F8',
+  blue5: '#EBF4FF',
+
+  // pinks
+  pink1: '#DC6BE5',
+  pink2: '#ff007a',
+
+  // other
+  red1: '#FF6871',
+  green1: '#27AE60',
+  yellow1: '#FFE270',
+
+  //shadows
+  shadow1: darkMode ? '#000' : '#2F80ED',
 
   // media queries
   mediaWidth: mediaWidthTemplates,
@@ -122,7 +94,7 @@ const theme = darkMode => ({
 
 export const TYPE = {
   main: ({ children, ...rest }) => (
-    <Text fontWeight={500} color={theme().mineshaftGray} {...rest}>
+    <Text fontWeight={500} color={theme().text2} {...rest}>
       {children}
     </Text>
   ),
@@ -137,27 +109,27 @@ export const TYPE = {
     </Text>
   ),
   blue: ({ children, ...rest }) => (
-    <Text fontWeight={500} color={theme().royalBlue} {...rest}>
+    <Text fontWeight={500} color={theme().blue1} {...rest}>
       {children}
     </Text>
   ),
   gray: ({ children, ...rest }) => (
-    <Text fontWeight={500} color={theme().outlineGrey} {...rest}>
+    <Text fontWeight={500} color={theme().bg3} {...rest}>
       {children}
     </Text>
   ),
   darkGray: ({ children, ...rest }) => (
-    <Text fontWeight={500} color={theme().darkGray} {...rest}>
+    <Text fontWeight={500} color={theme().text3} {...rest}>
       {children}
     </Text>
   ),
   italic: ({ children, ...rest }) => (
-    <Text fontWeight={500} fontSize={12} fontStyle={'italic'} color={theme().mineshaftGray} {...rest}>
+    <Text fontWeight={500} fontSize={12} fontStyle={'italic'} color={theme().text2} {...rest}>
       {children}
     </Text>
   ),
   error: ({ children, error, ...rest }) => (
-    <Text fontWeight={500} color={error ? theme().salmonRed : theme().mineshaftGray} {...rest}>
+    <Text fontWeight={500} color={error ? theme().red1 : theme().text2} {...rest}>
       {children}
     </Text>
   )
@@ -188,8 +160,8 @@ export const GlobalStyle = createGlobalStyle`
   html {
     font-size: 16px;
     font-variant: none;
-    color: ${({ theme }) => theme.textColor};
-    background-color: ${({ theme }) => theme.backgroundColor};
+    color: ${({ theme }) => theme.text1};
+    background-color: ${({ theme }) => theme.bg2};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);