style: Adds "deprecated_" prefix to all non-theme colors (#4146)

* Add deprecated_ label to white and black

* Add deprecated_ label to text1 through text5

* Add deprecated_ label for bg0 through bg6

* Add deprecated_ prefix to remaining colors

* Add deprecated_ prefix to direct style references

* Add deprecated_ prefix to all remaining colors

* Update link color

* Fix 'deprecated_white' -> theme.deprecated_white

* Update snapshots

src/components/AccountDetails/Copy.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components/macro'
 import { LinkStyledButton } from 'theme'
 
 const CopyIcon = styled(LinkStyledButton)`
-  color: ${({ color, theme }) => color || theme.text3};
+  color: ${({ color, theme }) => color || theme.deprecated_text3};
   flex-shrink: 0;
   display: flex;
   text-decoration: none;
@@ -14,7 +14,7 @@ const CopyIcon = styled(LinkStyledButton)`
   :active,
   :focus {
     text-decoration: none;
-    color: ${({ color, theme }) => color || theme.text2};
+    color: ${({ color, theme }) => color || theme.deprecated_text2};
   }
 `
 const StyledText = styled.span`

src/components/AccountDetails/Transaction.tsx

@@ -27,11 +27,12 @@ const TransactionState = styled(ExternalLink)<{ pending: boolean; success?: bool
   padding: 0.25rem 0rem;
   font-weight: 500;
   font-size: 0.825rem;
-  color: ${({ theme }) => theme.primary1};
+  color: ${({ theme }) => theme.deprecated_primary1};
 `
 
 const IconWrapper = styled.div<{ pending: boolean; success?: boolean }>`
-  color: ${({ pending, success, theme }) => (pending ? theme.primary1 : success ? theme.green1 : theme.red1)};
+  color: ${({ pending, success, theme }) =>
+    pending ? theme.deprecated_primary1 : success ? theme.deprecated_green1 : theme.deprecated_red1};
 `
 
 export default function Transaction({ hash }: { hash: string }) {

src/components/AccountDetails/index.tsx

@@ -24,7 +24,7 @@ const HeaderRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
   padding: 1rem 1rem;
   font-weight: 500;
-  color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.primary1 : 'inherit')};
+  color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
   ${({ theme }) => theme.mediaWidth.upToMedium`
     padding: 1rem;
   `};
@@ -52,7 +52,7 @@ const UpperSection = styled.div`
 
 const InfoCard = styled.div`
   padding: 1rem;
-  border: 1px solid ${({ theme }) => theme.bg3};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
   border-radius: 20px;
   position: relative;
   display: grid;
@@ -65,7 +65,7 @@ const AccountGroupingRow = styled.div`
   justify-content: space-between;
   align-items: center;
   font-weight: 400;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
 
   div {
     ${({ theme }) => theme.flexRowNoWrap}
@@ -95,14 +95,14 @@ const LowerSection = styled.div`
   padding: 1.5rem;
   flex-grow: 1;
   overflow: auto;
-  background-color: ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg2};
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
 
   h5 {
     margin: 0;
     font-weight: 400;
-    color: ${({ theme }) => theme.text3};
+    color: ${({ theme }) => theme.deprecated_text3};
   }
 `
 
@@ -130,12 +130,12 @@ const AccountControl = styled.div`
 
 const AddressLink = styled(ExternalLink)<{ hasENS: boolean; isENS: boolean }>`
   font-size: 0.825rem;
-  color: ${({ theme }) => theme.text3};
+  color: ${({ theme }) => theme.deprecated_text3};
   margin-left: 1rem;
   font-size: 0.825rem;
   display: flex;
   :hover {
-    color: ${({ theme }) => theme.text2};
+    color: ${({ theme }) => theme.deprecated_text2};
   }
 `
 
@@ -151,7 +151,7 @@ const CloseIcon = styled.div`
 
 const CloseColor = styled(Close)`
   path {
-    stroke: ${({ theme }) => theme.text4};
+    stroke: ${({ theme }) => theme.deprecated_text4};
   }
 `
 
@@ -159,7 +159,7 @@ const WalletName = styled.div`
   width: initial;
   font-size: 0.825rem;
   font-weight: 500;
-  color: ${({ theme }) => theme.text3};
+  color: ${({ theme }) => theme.deprecated_text3};
 `
 
 const TransactionListWrapper = styled.div`
@@ -351,7 +351,7 @@ export default function AccountDetails({
         </LowerSection>
       ) : (
         <LowerSection>
-          <ThemedText.Body color={theme.text1}>
+          <ThemedText.Body color={theme.deprecated_text1}>
             <Trans>Your transactions will appear here...</Trans>
           </ThemedText.Body>
         </LowerSection>

src/components/AddressInputPanel/index.tsx

@@ -15,7 +15,7 @@ const InputPanel = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap}
   position: relative;
   border-radius: 1.25rem;
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
   z-index: 1;
   width: 100%;
 `
@@ -25,10 +25,10 @@ const ContainerRow = styled.div<{ error: boolean }>`
   justify-content: center;
   align-items: center;
   border-radius: 1.25rem;
-  border: 1px solid ${({ error, theme }) => (error ? theme.red1 : theme.bg2)};
+  border: 1px solid ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_bg2)};
   transition: border-color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')},
     color 500ms ${({ error }) => (error ? 'step-end' : 'step-start')};
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
 `
 
 const InputContainer = styled.div`
@@ -42,15 +42,15 @@ const Input = styled.input<{ error?: boolean }>`
   border: none;
   flex: 1 1 auto;
   width: 0;
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
   transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
-  color: ${({ error, theme }) => (error ? theme.red1 : theme.text1)};
+  color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
   width: 100%;
   ::placeholder {
-    color: ${({ theme }) => theme.text4};
+    color: ${({ theme }) => theme.deprecated_text4};
   }
   padding: 0px;
   -webkit-appearance: textfield;
@@ -65,7 +65,7 @@ const Input = styled.input<{ error?: boolean }>`
   }
 
   ::placeholder {
-    color: ${({ theme }) => theme.text4};
+    color: ${({ theme }) => theme.deprecated_text4};
   }
 `
 
@@ -108,7 +108,7 @@ export default function AddressInputPanel({
         <InputContainer>
           <AutoColumn gap="md">
             <RowBetween>
-              <ThemedText.Black color={theme.text2} fontWeight={500} fontSize={14}>
+              <ThemedText.Black color={theme.deprecated_text2} fontWeight={500} fontSize={14}>
                 {label ?? <Trans>Recipient</Trans>}
               </ThemedText.Black>
               {address && chainId && (

src/components/Badge/RangeBadge.tsx

@@ -17,7 +17,7 @@ const BadgeText = styled.div`
 `
 
 const ActiveDot = styled.span`
-  background-color: ${({ theme }) => theme.success};
+  background-color: ${({ theme }) => theme.deprecated_success};
   border-radius: 50%;
   height: 8px;
   width: 8px;

src/components/Badge/index.tsx

@@ -20,24 +20,24 @@ interface BadgeProps {
 function pickBackgroundColor(variant: BadgeVariant | undefined, theme: DefaultTheme): Color {
   switch (variant) {
     case BadgeVariant.NEGATIVE:
-      return theme.error
+      return theme.deprecated_error
     case BadgeVariant.POSITIVE:
-      return theme.success
+      return theme.deprecated_success
     case BadgeVariant.PRIMARY:
-      return theme.primary1
+      return theme.deprecated_primary1
     case BadgeVariant.WARNING:
-      return theme.warning
+      return theme.deprecated_warning
     case BadgeVariant.WARNING_OUTLINE:
       return 'transparent'
     default:
-      return theme.bg2
+      return theme.deprecated_bg2
   }
 }
 
 function pickBorder(variant: BadgeVariant | undefined, theme: DefaultTheme): string {
   switch (variant) {
     case BadgeVariant.WARNING_OUTLINE:
-      return `1px solid ${theme.warning}`
+      return `1px solid ${theme.deprecated_warning}`
     default:
       return 'unset'
   }
@@ -46,15 +46,15 @@ function pickBorder(variant: BadgeVariant | undefined, theme: DefaultTheme): str
 function pickFontColor(variant: BadgeVariant | undefined, theme: DefaultTheme): string {
   switch (variant) {
     case BadgeVariant.NEGATIVE:
-      return readableColor(theme.error)
+      return readableColor(theme.deprecated_error)
     case BadgeVariant.POSITIVE:
-      return readableColor(theme.success)
+      return readableColor(theme.deprecated_success)
     case BadgeVariant.WARNING:
-      return readableColor(theme.warning)
+      return readableColor(theme.deprecated_warning)
     case BadgeVariant.WARNING_OUTLINE:
-      return theme.warning
+      return theme.deprecated_warning
     default:
-      return readableColor(theme.bg2)
+      return readableColor(theme.deprecated_bg2)
   }
 }
 

src/components/Button/index.tsx

@@ -23,7 +23,7 @@ export const BaseButton = styled(RebassButton)<
   border-radius: ${({ $borderRadius }) => $borderRadius ?? '20px'};
   outline: none;
   border: 1px solid transparent;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   text-decoration: none;
   display: flex;
   justify-content: center;
@@ -52,24 +52,24 @@ export const BaseButton = styled(RebassButton)<
 `
 
 export const ButtonPrimary = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.primary1};
+  background-color: ${({ theme }) => theme.deprecated_primary1};
   color: white;
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.primary1)};
-    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
+    background-color: ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
   }
   &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
+    background-color: ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.primary1)};
-    background-color: ${({ theme }) => darken(0.1, theme.primary1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.deprecated_primary1)};
+    background-color: ${({ theme }) => darken(0.1, theme.deprecated_primary1)};
   }
   &:disabled {
     background-color: ${({ theme, altDisabledStyle, disabled }) =>
-      altDisabledStyle ? (disabled ? theme.primary1 : theme.bg2) : theme.bg2};
+      altDisabledStyle ? (disabled ? theme.deprecated_primary1 : theme.deprecated_bg2) : theme.deprecated_bg2};
     color: ${({ altDisabledStyle, disabled, theme }) =>
-      altDisabledStyle ? (disabled ? theme.white : theme.text2) : theme.text2};
+      altDisabledStyle ? (disabled ? theme.deprecated_white : theme.deprecated_text2) : theme.deprecated_text2};
     cursor: auto;
     box-shadow: none;
     border: 1px solid transparent;
@@ -78,26 +78,26 @@ export const ButtonPrimary = styled(BaseButton)`
 `
 
 export const ButtonLight = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.primary5};
-  color: ${({ theme }) => theme.primaryText1};
+  background-color: ${({ theme }) => theme.deprecated_primary5};
+  color: ${({ theme }) => theme.deprecated_primaryText1};
   font-size: 16px;
   font-weight: 500;
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.03, theme.primary5)};
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.primary5)};
+    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
   }
   &:hover {
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.primary5)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.primary5)};
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.primary5)};
+    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_primary5)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_primary5)};
   }
   :disabled {
     opacity: 0.4;
     :hover {
       cursor: auto;
-      background-color: ${({ theme }) => theme.primary5};
+      background-color: ${({ theme }) => theme.deprecated_primary5};
       box-shadow: none;
       border: 1px solid transparent;
       outline: none;
@@ -106,37 +106,37 @@ export const ButtonLight = styled(BaseButton)`
 `
 
 export const ButtonGray = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.bg1};
-  color: ${({ theme }) => theme.text2};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
+  color: ${({ theme }) => theme.deprecated_text2};
   font-size: 16px;
   font-weight: 500;
 
   &:hover {
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.bg2)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_bg2)};
   }
   &:active {
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.1, theme.bg2)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.1, theme.deprecated_bg2)};
   }
 `
 
 export const ButtonSecondary = styled(BaseButton)`
-  border: 1px solid ${({ theme }) => theme.primary4};
-  color: ${({ theme }) => theme.primary1};
+  border: 1px solid ${({ theme }) => theme.deprecated_primary4};
+  color: ${({ theme }) => theme.deprecated_primary1};
   background-color: transparent;
   font-size: 16px;
   border-radius: 12px;
   padding: ${({ padding }) => (padding ? padding : '10px')};
 
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => theme.primary4};
-    border: 1px solid ${({ theme }) => theme.primary3};
+    box-shadow: 0 0 0 1pt ${({ theme }) => theme.deprecated_primary4};
+    border: 1px solid ${({ theme }) => theme.deprecated_primary3};
   }
   &:hover {
-    border: 1px solid ${({ theme }) => theme.primary3};
+    border: 1px solid ${({ theme }) => theme.deprecated_primary3};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => theme.primary4};
-    border: 1px solid ${({ theme }) => theme.primary3};
+    box-shadow: 0 0 0 1pt ${({ theme }) => theme.deprecated_primary4};
+    border: 1px solid ${({ theme }) => theme.deprecated_primary3};
   }
   &:disabled {
     opacity: 50%;
@@ -148,17 +148,17 @@ export const ButtonSecondary = styled(BaseButton)`
 `
 
 export const ButtonOutlined = styled(BaseButton)`
-  border: 1px solid ${({ theme }) => theme.bg2};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
   background-color: transparent;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   &:focus {
-    box-shadow: 0 0 0 1px ${({ theme }) => theme.bg4};
+    box-shadow: 0 0 0 1px ${({ theme }) => theme.deprecated_bg4};
   }
   &:hover {
-    box-shadow: 0 0 0 1px ${({ theme }) => theme.bg4};
+    box-shadow: 0 0 0 1px ${({ theme }) => theme.deprecated_bg4};
   }
   &:active {
-    box-shadow: 0 0 0 1px ${({ theme }) => theme.bg4};
+    box-shadow: 0 0 0 1px ${({ theme }) => theme.deprecated_bg4};
   }
   &:disabled {
     opacity: 50%;
@@ -167,21 +167,21 @@ export const ButtonOutlined = styled(BaseButton)`
 `
 
 export const ButtonYellow = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.yellow3};
+  background-color: ${({ theme }) => theme.deprecated_yellow3};
   color: white;
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.yellow3)};
-    background-color: ${({ theme }) => darken(0.05, theme.yellow3)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_yellow3)};
+    background-color: ${({ theme }) => darken(0.05, theme.deprecated_yellow3)};
   }
   &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.yellow3)};
+    background-color: ${({ theme }) => darken(0.05, theme.deprecated_yellow3)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.yellow3)};
-    background-color: ${({ theme }) => darken(0.1, theme.yellow3)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.deprecated_yellow3)};
+    background-color: ${({ theme }) => darken(0.1, theme.deprecated_yellow3)};
   }
   &:disabled {
-    background-color: ${({ theme }) => theme.yellow3};
+    background-color: ${({ theme }) => theme.deprecated_yellow3};
     opacity: 50%;
     cursor: auto;
   }
@@ -189,7 +189,7 @@ export const ButtonYellow = styled(BaseButton)`
 
 export const ButtonEmpty = styled(BaseButton)`
   background-color: transparent;
-  color: ${({ theme }) => theme.primary1};
+  color: ${({ theme }) => theme.deprecated_primary1};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -232,39 +232,39 @@ export const ButtonText = styled(BaseButton)`
 `
 
 const ButtonConfirmedStyle = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.bg3};
-  color: ${({ theme }) => theme.text1};
-  /* border: 1px solid ${({ theme }) => theme.green1}; */
+  background-color: ${({ theme }) => theme.deprecated_bg3};
+  color: ${({ theme }) => theme.deprecated_text1};
+  /* border: 1px solid ${({ theme }) => theme.deprecated_green1}; */
 
   &:disabled {
     opacity: 50%;
-    background-color: ${({ theme }) => theme.bg2};
-    color: ${({ theme }) => theme.text2};
+    background-color: ${({ theme }) => theme.deprecated_bg2};
+    color: ${({ theme }) => theme.deprecated_text2};
     cursor: auto;
   }
 `
 
 const ButtonErrorStyle = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.red1};
-  border: 1px solid ${({ theme }) => theme.red1};
+  background-color: ${({ theme }) => theme.deprecated_red1};
+  border: 1px solid ${({ theme }) => theme.deprecated_red1};
 
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.red1)};
-    background-color: ${({ theme }) => darken(0.05, theme.red1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_red1)};
+    background-color: ${({ theme }) => darken(0.05, theme.deprecated_red1)};
   }
   &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.red1)};
+    background-color: ${({ theme }) => darken(0.05, theme.deprecated_red1)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.red1)};
-    background-color: ${({ theme }) => darken(0.1, theme.red1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.deprecated_red1)};
+    background-color: ${({ theme }) => darken(0.1, theme.deprecated_red1)};
   }
   &:disabled {
     opacity: 50%;
     cursor: auto;
     box-shadow: none;
-    background-color: ${({ theme }) => theme.red1};
-    border: 1px solid ${({ theme }) => theme.red1};
+    background-color: ${({ theme }) => theme.deprecated_red1};
+    border: 1px solid ${({ theme }) => theme.deprecated_red1};
   }
 `
 
@@ -312,14 +312,14 @@ export function ButtonDropdownLight({ disabled = false, children, ...rest }: { d
 
 const ActiveOutlined = styled(ButtonOutlined)`
   border: 1px solid;
-  border-color: ${({ theme }) => theme.primary1};
+  border-color: ${({ theme }) => theme.deprecated_primary1};
 `
 
 const Circle = styled.div`
   height: 17px;
   width: 17px;
   border-radius: 50%;
-  background-color: ${({ theme }) => theme.primary1};
+  background-color: ${({ theme }) => theme.deprecated_primary1};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -354,7 +354,7 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
             {children}
             <CheckboxWrapper>
               <Circle>
-                <ResponsiveCheck size={13} stroke={theme.white} />
+                <ResponsiveCheck size={13} stroke={theme.deprecated_white} />
               </Circle>
             </CheckboxWrapper>
           </RowBetween>

src/components/Card/index.tsx

@@ -10,38 +10,38 @@ const Card = styled(Box)<{ width?: string; padding?: string; border?: string; $b
 export default Card
 
 export const LightCard = styled(Card)`
-  border: 1px solid ${({ theme }) => theme.bg2};
-  background-color: ${({ theme }) => theme.bg1};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
 `
 
 export const LightGreyCard = styled(Card)`
-  background-color: ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg2};
 `
 
 export const GreyCard = styled(Card)`
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.deprecated_bg3};
 `
 
 export const DarkGreyCard = styled(Card)`
-  background-color: ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg2};
 `
 
 export const DarkCard = styled(Card)`
-  background-color: ${({ theme }) => theme.bg0};
+  background-color: ${({ theme }) => theme.deprecated_bg0};
 `
 
 export const OutlineCard = styled(Card)`
-  border: 1px solid ${({ theme }) => theme.bg3};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
 `
 
 export const YellowCard = styled(Card)`
   background-color: rgba(243, 132, 30, 0.05);
-  color: ${({ theme }) => theme.yellow3};
+  color: ${({ theme }) => theme.deprecated_yellow3};
   font-weight: 500;
 `
 
 export const BlueCard = styled(Card)`
-  background-color: ${({ theme }) => theme.primary5};
-  color: ${({ theme }) => theme.blue2};
+  background-color: ${({ theme }) => theme.deprecated_primary5};
+  color: ${({ theme }) => theme.deprecated_blue2};
   border-radius: 12px;
 `

src/components/ConnectedAccountBlocked/index.tsx

@@ -16,7 +16,7 @@ const ContentWrapper = styled(Column)`
 const WarningIcon = styled(AlertOctagon)`
   min-height: 22px;
   min-width: 22px;
-  color: ${({ theme }) => theme.warning};
+  color: ${({ theme }) => theme.deprecated_warning};
 `
 const Copy = styled(CopyHelper)`
   font-size: 12px;
@@ -49,7 +49,7 @@ export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedPr
         <ThemedText.Main fontSize={12}>
           <Trans>If you believe this is an error, please send an email including your address to </Trans>{' '}
         </ThemedText.Main>
-        <Copy iconSize={12} toCopy="compliance@uniswap.org" color={theme.primary1} iconPosition="right">
+        <Copy iconSize={12} toCopy="compliance@uniswap.org" color={theme.deprecated_primary1} iconPosition="right">
           compliance@uniswap.org
         </Copy>
       </ContentWrapper>

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -20,24 +20,24 @@ export function FiatValue({
   const theme = useTheme()
   const priceImpactColor = useMemo(() => {
     if (!priceImpact) return undefined
-    if (priceImpact.lessThan('0')) return theme.green1
+    if (priceImpact.lessThan('0')) return theme.deprecated_green1
     const severity = warningSeverity(priceImpact)
-    if (severity < 1) return theme.text3
-    if (severity < 3) return theme.yellow1
-    return theme.red1
-  }, [priceImpact, theme.green1, theme.red1, theme.text3, theme.yellow1])
+    if (severity < 1) return theme.deprecated_text3
+    if (severity < 3) return theme.deprecated_yellow1
+    return theme.deprecated_red1
+  }, [priceImpact, theme.deprecated_green1, theme.deprecated_red1, theme.deprecated_text3, theme.deprecated_yellow1])
 
   const p = Number(fiatValue?.toFixed())
   const visibleDecimalPlaces = p < 1.05 ? 4 : 2
 
   return (
-    <ThemedText.Body fontSize={14} color={fiatValue ? theme.text3 : theme.text4}>
+    <ThemedText.Body fontSize={14} color={fiatValue ? theme.deprecated_text3 : theme.deprecated_text4}>
       {fiatValue ? (
         <Trans>
           $
           <HoverInlineText
             text={fiatValue?.toFixed(visibleDecimalPlaces, { groupSeparator: ',' })}
-            textColor={fiatValue ? theme.text3 : theme.text4}
+            textColor={fiatValue ? theme.deprecated_text3 : theme.deprecated_text4}
           />
         </Trans>
       ) : (

src/components/CurrencyInputPanel/index.tsx

@@ -26,7 +26,7 @@ const InputPanel = styled.div<{ hideInput?: boolean }>`
   ${({ theme }) => theme.flexColumnNoWrap}
   position: relative;
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.bg2)};
+  background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.deprecated_bg2)};
   z-index: 1;
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   transition: height 1s ease;
@@ -38,7 +38,7 @@ const FixedContainer = styled.div`
   height: 100%;
   position: absolute;
   border-radius: 20px;
-  background-color: ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg2};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -47,21 +47,21 @@ const FixedContainer = styled.div`
 
 const Container = styled.div<{ hideInput: boolean }>`
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  border: 1px solid ${({ theme }) => theme.bg0};
-  background-color: ${({ theme }) => theme.bg1};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg0};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   :focus,
   :hover {
-    border: 1px solid ${({ theme, hideInput }) => (hideInput ? ' transparent' : theme.bg3)};
+    border: 1px solid ${({ theme, hideInput }) => (hideInput ? ' transparent' : theme.deprecated_bg3)};
   }
 `
 
 const CurrencySelect = styled(ButtonGray)<{ visible: boolean; selected: boolean; hideInput?: boolean }>`
   align-items: center;
-  background-color: ${({ selected, theme }) => (selected ? theme.bg2 : theme.primary1)};
+  background-color: ${({ selected, theme }) => (selected ? theme.deprecated_bg2 : theme.deprecated_primary1)};
   box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
   box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
-  color: ${({ selected, theme }) => (selected ? theme.text1 : theme.white)};
+  color: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
   cursor: pointer;
   border-radius: 16px;
   outline: none;
@@ -76,7 +76,8 @@ const CurrencySelect = styled(ButtonGray)<{ visible: boolean; selected: boolean;
   margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
   :focus,
   :hover {
-    background-color: ${({ selected, theme }) => (selected ? theme.bg3 : darken(0.05, theme.primary1))};
+    background-color: ${({ selected, theme }) =>
+      selected ? theme.deprecated_bg3 : darken(0.05, theme.deprecated_primary1)};
   }
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
 `
@@ -91,13 +92,13 @@ const InputRow = styled.div<{ selected: boolean }>`
 const LabelRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   font-size: 0.75rem;
   line-height: 1rem;
   padding: 0 1rem 1rem;
   span:hover {
     cursor: pointer;
-    color: ${({ theme }) => darken(0.2, theme.text2)};
+    color: ${({ theme }) => darken(0.2, theme.deprecated_text2)};
   }
 `
 
@@ -118,7 +119,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
   height: 35%;
 
   path {
-    stroke: ${({ selected, theme }) => (selected ? theme.text1 : theme.white)};
+    stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
     stroke-width: 1.5px;
   }
 `
@@ -130,10 +131,10 @@ const StyledTokenName = styled.span<{ active?: boolean }>`
 
 const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   background-color: transparent;
-  background-color: ${({ theme }) => theme.primary5};
+  background-color: ${({ theme }) => theme.deprecated_primary5};
   border: none;
   border-radius: 12px;
-  color: ${({ theme }) => theme.primary1};
+  color: ${({ theme }) => theme.deprecated_primary1};
   cursor: pointer;
   font-size: 11px;
   font-weight: 500;
@@ -281,7 +282,7 @@ export default function CurrencyInputPanel({
                 <RowFixed style={{ height: '17px' }}>
                   <ThemedText.Body
                     onClick={onMax}
-                    color={theme.text3}
+                    color={theme.deprecated_text3}
                     fontWeight={500}
                     fontSize={14}
                     style={{ display: 'inline', cursor: 'pointer' }}

src/components/ErrorBoundary/index.tsx

@@ -24,18 +24,18 @@ const BodyWrapper = styled.div<{ margin?: string }>`
 `
 
 const CodeBlockWrapper = styled.div`
-  background: ${({ theme }) => theme.bg0};
+  background: ${({ theme }) => theme.deprecated_bg0};
   overflow: auto;
   white-space: pre;
   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: 24px;
   padding: 18px 24px;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
 `
 
 const LinkWrapper = styled.div`
-  color: ${({ theme }) => theme.blue1};
+  color: ${({ theme }) => theme.deprecated_blue1};
   padding: 6px 24px;
 `
 

src/components/FeeSelector/index.tsx

@@ -34,8 +34,8 @@ const pulse = (color: string) => keyframes`
   }
 `
 const FocusedOutlineCard = styled(Card)<{ pulsing: boolean }>`
-  border: 1px solid ${({ theme }) => theme.bg2};
-  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.primary1)} 0.6s linear;
+  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.deprecated_primary1)} 0.6s linear;
   align-self: center;
 `
 

src/components/Header/ChainConnectivityWarning.tsx

@@ -7,14 +7,14 @@ import styled from 'styled-components/macro'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'
 
 const BodyRow = styled.div`
-  color: ${({ theme }) => theme.black};
+  color: ${({ theme }) => theme.deprecated_black};
   font-size: 12px;
 `
 const CautionIcon = styled(AlertOctagon)`
-  color: ${({ theme }) => theme.black};
+  color: ${({ theme }) => theme.deprecated_black};
 `
 const Link = styled(ExternalLink)`
-  color: ${({ theme }) => theme.black};
+  color: ${({ theme }) => theme.deprecated_black};
   text-decoration: underline;
 `
 const TitleRow = styled.div`
@@ -31,7 +31,7 @@ const TitleText = styled.div`
   margin: 0px 12px;
 `
 const Wrapper = styled.div`
-  background-color: ${({ theme }) => theme.yellow3};
+  background-color: ${({ theme }) => theme.deprecated_yellow3};
   border-radius: 12px;
   bottom: 60px;
   display: none;

src/components/Header/NetworkSelector.tsx

@@ -25,7 +25,7 @@ const ActiveRowLinkList = styled.div`
   padding: 0 8px;
   & > a {
     align-items: center;
-    color: ${({ theme }) => theme.text2};
+    color: ${({ theme }) => theme.deprecated_text2};
     display: flex;
     flex-direction: row;
     font-size: 14px;
@@ -41,14 +41,14 @@ const ActiveRowLinkList = styled.div`
   }
 `
 const ActiveRowWrapper = styled.div`
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
   border-radius: 8px;
   cursor: pointer;
   padding: 8px;
   width: 100%;
 `
 const FlyoutHeader = styled.div`
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
   font-weight: 400;
 `
 const FlyoutMenu = styled.div`
@@ -63,7 +63,7 @@ const FlyoutMenu = styled.div`
 `
 const FlyoutMenuContents = styled.div`
   align-items: flex-start;
-  background-color: ${({ theme }) => theme.bg0};
+  background-color: ${({ theme }) => theme.deprecated_bg0};
   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;
@@ -78,7 +78,7 @@ const FlyoutMenuContents = styled.div`
 `
 const FlyoutRow = styled.div<{ active: boolean }>`
   align-items: center;
-  background-color: ${({ active, theme }) => (active ? theme.bg1 : 'transparent')};
+  background-color: ${({ active, theme }) => (active ? theme.deprecated_bg1 : 'transparent')};
   border-radius: 8px;
   cursor: pointer;
   display: flex;
@@ -89,7 +89,7 @@ const FlyoutRow = styled.div<{ active: boolean }>`
   width: 100%;
 `
 const FlyoutRowActiveIndicator = styled.div`
-  background-color: ${({ theme }) => theme.green1};
+  background-color: ${({ theme }) => theme.deprecated_green1};
   border-radius: 50%;
   height: 9px;
   width: 9px;
@@ -123,10 +123,10 @@ const SelectorLabel = styled(NetworkLabel)`
 `
 const SelectorControls = styled.div`
   align-items: center;
-  background-color: ${({ theme }) => theme.bg0};
-  border: 2px solid ${({ theme }) => theme.bg0};
+  background-color: ${({ theme }) => theme.deprecated_bg0};
+  border: 2px solid ${({ theme }) => theme.deprecated_bg0};
   border-radius: 16px;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   display: flex;
   font-weight: 500;
   justify-content: space-between;

src/components/Header/Polling.tsx

@@ -24,7 +24,7 @@ const StyledPolling = styled.div<{ warning: boolean }>`
   right: 0;
   bottom: 0;
   padding: 1rem;
-  color: ${({ theme, warning }) => (warning ? theme.yellow3 : theme.green1)};
+  color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
   transition: 250ms ease color;
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
@@ -53,12 +53,12 @@ const StyledPollingDot = styled.div<{ warning: boolean }>`
   min-width: 8px;
   border-radius: 50%;
   position: relative;
-  background-color: ${({ theme, warning }) => (warning ? theme.yellow3 : theme.green1)};
+  background-color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
   transition: 250ms ease background-color;
 `
 
 const StyledGasDot = styled.div`
-  background-color: ${({ theme }) => theme.text3};
+  background-color: ${({ theme }) => theme.deprecated_text3};
   border-radius: 50%;
   height: 4px;
   min-height: 4px;
@@ -84,7 +84,7 @@ const Spinner = styled.div<{ warning: boolean }>`
   border-top: 1px solid transparent;
   border-right: 1px solid transparent;
   border-bottom: 1px solid transparent;
-  border-left: 2px solid ${({ theme, warning }) => (warning ? theme.yellow3 : theme.green1)};
+  border-left: 2px solid ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
   background: transparent;
   width: 14px;
   height: 14px;
@@ -143,7 +143,7 @@ export default function Polling() {
           <ExternalLink href={'https://etherscan.io/gastracker'}>
             {priceGwei ? (
               <RowFixed style={{ marginRight: '8px' }}>
-                <ThemedText.Main fontSize="11px" mr="8px" color={theme.text3}>
+                <ThemedText.Main fontSize="11px" mr="8px" color={theme.deprecated_text3}>
                   <MouseoverTooltip
                     text={
                       <Trans>

src/components/Header/index.tsx

@@ -39,10 +39,10 @@ const HeaderFrame = styled.div<{ showBackground: boolean }>`
   z-index: 21;
   position: relative;
   /* Background slide effect on scroll. */
-  background-image: ${({ theme }) => `linear-gradient(to bottom, transparent 50%, ${theme.bg0} 50% )}}`};
+  background-image: ${({ theme }) => `linear-gradient(to bottom, transparent 50%, ${theme.deprecated_bg0} 50% )}}`};
   background-position: ${({ showBackground }) => (showBackground ? '0 -100%' : '0 0')};
   background-size: 100% 200%;
-  box-shadow: 0px 0px 0px 1px ${({ theme, showBackground }) => (showBackground ? theme.bg2 : 'transparent;')};
+  box-shadow: 0px 0px 0px 1px ${({ theme, showBackground }) => (showBackground ? theme.deprecated_bg2 : 'transparent;')};
   transition: background-position 0.1s, box-shadow 0.1s;
   background-blend-mode: hard-light;
 
@@ -88,7 +88,7 @@ const HeaderElement = styled.div`
 
 const HeaderLinks = styled(Row)`
   justify-self: center;
-  background-color: ${({ theme }) => theme.bg0};
+  background-color: ${({ theme }) => theme.deprecated_bg0};
   width: fit-content;
   padding: 2px;
   border-radius: 16px;
@@ -112,8 +112,8 @@ const HeaderLinks = styled(Row)`
     bottom: 0; right: 50%;
     transform: translate(50%,-50%);
     margin: 0 auto;
-    background-color: ${({ theme }) => theme.bg0};
-    border: 1px solid ${({ theme }) => theme.bg2};
+    background-color: ${({ theme }) => theme.deprecated_bg0};
+    border: 1px solid ${({ theme }) => theme.deprecated_bg2};
     box-shadow: 0px 6px 10px rgb(0 0 0 / 2%);
   `};
 `
@@ -122,7 +122,7 @@ const AccountElement = styled.div<{ active: boolean }>`
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: ${({ theme, active }) => (!active ? theme.bg0 : theme.bg0)};
+  background-color: ${({ theme, active }) => (!active ? theme.deprecated_bg0 : theme.deprecated_bg0)};
   border-radius: 16px;
   white-space: nowrap;
   width: 100%;
@@ -138,7 +138,7 @@ const UNIAmount = styled(AccountElement)`
   padding: 4px 8px;
   height: 36px;
   font-weight: 500;
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.deprecated_bg3};
   background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2;
 `
 
@@ -196,7 +196,7 @@ const StyledNavLink = styled(NavLink).attrs({
   outline: none;
   cursor: pointer;
   text-decoration: none;
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
   font-size: 1rem;
   font-weight: 500;
   padding: 8px 12px;
@@ -207,13 +207,13 @@ const StyledNavLink = styled(NavLink).attrs({
     border-radius: 14px;
     font-weight: 600;
     justify-content: center;
-    color: ${({ theme }) => theme.text1};
-    background-color: ${({ theme }) => theme.bg1};
+    color: ${({ theme }) => theme.deprecated_text1};
+    background-color: ${({ theme }) => theme.deprecated_bg1};
   }
 
   :hover,
   :focus {
-    color: ${({ theme }) => darken(0.1, theme.text1)};
+    color: ${({ theme }) => darken(0.1, theme.deprecated_text1)};
   }
 `
 
@@ -226,7 +226,7 @@ const StyledExternalLink = styled(ExternalLink).attrs({
   outline: none;
   cursor: pointer;
   text-decoration: none;
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
   font-size: 1rem;
   width: fit-content;
   margin: 0 12px;
@@ -235,12 +235,12 @@ const StyledExternalLink = styled(ExternalLink).attrs({
   &.${activeClassName} {
     border-radius: 14px;
     font-weight: 600;
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.deprecated_text1};
   }
 
   :hover,
   :focus {
-    color: ${({ theme }) => darken(0.1, theme.text1)};
+    color: ${({ theme }) => darken(0.1, theme.deprecated_text1)};
     text-decoration: none;
   }
 `
@@ -250,7 +250,7 @@ export default function Header() {
 
   const userEthBalance = useNativeCurrencyBalances(account ? [account] : [])?.[account ?? '']
   const [darkMode] = useDarkModeManager()
-  const { white, black } = useTheme()
+  const { deprecated_white, deprecated_black } = useTheme()
 
   const toggleClaimModal = useToggleSelfClaimModal()
 
@@ -272,7 +272,7 @@ export default function Header() {
       <ClaimModal />
       <Title href=".">
         <UniIcon>
-          <Logo fill={darkMode ? white : black} width="24px" height="100%" title="logo" />
+          <Logo fill={darkMode ? deprecated_white : deprecated_black} width="24px" height="100%" title="logo" />
           <HolidayOrnament />
         </UniIcon>
       </Title>

src/components/HoverInlineText/index.tsx

@@ -10,7 +10,7 @@ const TextWrapper = styled.span<{
   textColor?: string
 }>`
   margin-left: ${({ margin }) => margin && '4px'};
-  color: ${({ theme, link, textColor }) => (link ? theme.blue1 : textColor ?? theme.text1)};
+  color: ${({ theme, link, textColor }) => (link ? theme.deprecated_blue1 : textColor ?? theme.deprecated_text1)};
   font-size: ${({ fontSize }) => fontSize ?? 'inherit'};
 
   @media screen and (max-width: 600px) {

src/components/Identicon/index.tsx

@@ -8,7 +8,7 @@ const StyledIdenticon = styled.div`
   height: 1rem;
   width: 1rem;
   border-radius: 1.125rem;
-  background-color: ${({ theme }) => theme.bg4};
+  background-color: ${({ theme }) => theme.deprecated_bg4};
   font-size: initial;
 `
 

src/components/InputStepCounter/InputStepCounter.tsx

@@ -36,9 +36,9 @@ const SmallButton = styled(ButtonGray)`
 `
 
 const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boolean }>`
-  border-color: ${({ active, theme }) => active && theme.blue1};
+  border-color: ${({ active, theme }) => active && theme.deprecated_blue1};
   padding: 12px;
-  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.blue1)} 0.8s linear;
+  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.deprecated_blue1)} 0.8s linear;
 `
 
 const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
@@ -58,13 +58,13 @@ const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
 `
 
 const InputTitle = styled(ThemedText.Small)`
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
   font-size: 12px;
   font-weight: 500;
 `
 
 const ButtonLabel = styled(ThemedText.White)<{ disabled: boolean }>`
-  color: ${({ theme, disabled }) => (disabled ? theme.text2 : theme.text1)} !important;
+  color: ${({ theme, disabled }) => (disabled ? theme.deprecated_text2 : theme.deprecated_text1)} !important;
 `
 
 interface StepCounterProps {

src/components/LiquidityChartRangeInput/Area.tsx

@@ -6,8 +6,8 @@ import { ChartEntry } from './types'
 
 const Path = styled.path<{ fill: string | undefined }>`
   opacity: 0.5;
-  stroke: ${({ fill, theme }) => fill ?? theme.blue2};
-  fill: ${({ fill, theme }) => fill ?? theme.blue2};
+  stroke: ${({ fill, theme }) => fill ?? theme.deprecated_blue2};
+  fill: ${({ fill, theme }) => fill ?? theme.deprecated_blue2};
 `
 
 export const Area = ({

src/components/LiquidityChartRangeInput/AxisBottom.tsx

@@ -8,7 +8,7 @@ const StyledGroup = styled.g`
   }
 
   text {
-    color: ${({ theme }) => theme.text2};
+    color: ${({ theme }) => theme.deprecated_text2};
     transform: translateY(5px);
   }
 `

src/components/LiquidityChartRangeInput/Brush.tsx

@@ -18,7 +18,7 @@ const HandleAccent = styled.path`
   pointer-events: none;
 
   stroke-width: 1.5;
-  stroke: ${({ theme }) => theme.white};
+  stroke: ${({ theme }) => theme.deprecated_white};
   opacity: 0.6;
 `
 
@@ -28,13 +28,13 @@ const LabelGroup = styled.g<{ visible: boolean }>`
 `
 
 const TooltipBackground = styled.rect`
-  fill: ${({ theme }) => theme.bg2};
+  fill: ${({ theme }) => theme.deprecated_bg2};
 `
 
 const Tooltip = styled.text`
   text-anchor: middle;
   font-size: 13px;
-  fill: ${({ theme }) => theme.text1};
+  fill: ${({ theme }) => theme.deprecated_text1};
 `
 
 // flips the handles draggers when close to the container edges

src/components/LiquidityChartRangeInput/Line.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components/macro'
 const StyledLine = styled.line`
   opacity: 0.5;
   stroke-width: 2;
-  stroke: ${({ theme }) => theme.text1};
+  stroke: ${({ theme }) => theme.deprecated_text1};
   fill: none;
 `
 

src/components/LiquidityChartRangeInput/Zoom.tsx

@@ -18,8 +18,8 @@ const Wrapper = styled.div<{ count: number }>`
 
 const Button = styled(ButtonGray)`
   &:hover {
-    background-color: ${({ theme }) => theme.bg2};
-    color: ${({ theme }) => theme.text1};
+    background-color: ${({ theme }) => theme.deprecated_bg2};
+    color: ${({ theme }) => theme.deprecated_text1};
   }
 
   width: 32px;

src/components/LiquidityChartRangeInput/index.tsx

@@ -166,19 +166,19 @@ export default function LiquidityChartRangeInput({
       {isUninitialized ? (
         <InfoBox
           message={<Trans>Your position will appear here.</Trans>}
-          icon={<Inbox size={56} stroke={theme.text1} />}
+          icon={<Inbox size={56} stroke={theme.deprecated_text1} />}
         />
       ) : isLoading ? (
-        <InfoBox icon={<Loader size="40px" stroke={theme.text4} />} />
+        <InfoBox icon={<Loader size="40px" stroke={theme.deprecated_text4} />} />
       ) : isError ? (
         <InfoBox
           message={<Trans>Liquidity data not available.</Trans>}
-          icon={<CloudOff size={56} stroke={theme.text4} />}
+          icon={<CloudOff size={56} stroke={theme.deprecated_text4} />}
         />
       ) : !formattedData || formattedData === [] || !price ? (
         <InfoBox
           message={<Trans>There is no liquidity data.</Trans>}
-          icon={<BarChart2 size={56} stroke={theme.text4} />}
+          icon={<BarChart2 size={56} stroke={theme.deprecated_text4} />}
         />
       ) : (
         <ChartWrapper>
@@ -188,12 +188,12 @@ export default function LiquidityChartRangeInput({
             margins={{ top: 10, right: 2, bottom: 20, left: 0 }}
             styles={{
               area: {
-                selection: theme.blue1,
+                selection: theme.deprecated_blue1,
               },
               brush: {
                 handle: {
-                  west: saturate(0.1, tokenAColor) ?? theme.red1,
-                  east: saturate(0.1, tokenBColor) ?? theme.blue1,
+                  west: saturate(0.1, tokenAColor) ?? theme.deprecated_red1,
+                  east: saturate(0.1, tokenBColor) ?? theme.deprecated_blue1,
                 },
               },
             }}

src/components/Loader/index.tsx

@@ -14,7 +14,7 @@ const StyledSVG = styled.svg<{ size: string; stroke?: string }>`
   height: ${({ size }) => size};
   width: ${({ size }) => size};
   path {
-    stroke: ${({ stroke, theme }) => stroke ?? theme.primary1};
+    stroke: ${({ stroke, theme }) => stroke ?? theme.deprecated_primary1};
   }
 `
 

src/components/Loader/styled.tsx

@@ -17,9 +17,9 @@ export const LoadingRows = styled.div`
     animation-fill-mode: both;
     background: linear-gradient(
       to left,
-      ${({ theme }) => theme.bg1} 25%,
-      ${({ theme }) => theme.bg2} 50%,
-      ${({ theme }) => theme.bg1} 75%
+      ${({ theme }) => theme.deprecated_bg1} 25%,
+      ${({ theme }) => theme.deprecated_bg2} 50%,
+      ${({ theme }) => theme.deprecated_bg1} 75%
     );
     background-size: 400%;
     border-radius: 12px;

src/components/Logo/index.tsx

@@ -35,5 +35,5 @@ export default function Logo({ srcs, alt, style, ...rest }: LogoProps) {
     )
   }
 
-  return <Slash {...rest} style={{ ...style, color: theme.bg4 }} />
+  return <Slash {...rest} style={{ ...style, color: theme.deprecated_bg4 }} />
 }

src/components/Menu/index.tsx

@@ -38,7 +38,7 @@ export enum FlyoutAlignment {
 
 const StyledMenuIcon = styled(MenuIcon)`
   path {
-    stroke: ${({ theme }) => theme.text1};
+    stroke: ${({ theme }) => theme.deprecated_text1};
   }
 `
 
@@ -50,8 +50,8 @@ const StyledMenuButton = styled.button`
   margin: 0;
   padding: 0;
   height: 40px;
-  background-color: ${({ theme }) => theme.bg0};
-  border: 1px solid ${({ theme }) => theme.bg0};
+  background-color: ${({ theme }) => theme.deprecated_bg0};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg0};
   padding: 0.15rem 0.5rem;
   border-radius: 16px;
 
@@ -59,7 +59,7 @@ const StyledMenuButton = styled.button`
   :focus {
     cursor: pointer;
     outline: none;
-    border: 1px solid ${({ theme }) => theme.bg3};
+    border: 1px solid ${({ theme }) => theme.deprecated_bg3};
   }
 
   svg {
@@ -68,7 +68,7 @@ const StyledMenuButton = styled.button`
 `
 
 const UNIbutton = styled(ButtonPrimary)`
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.deprecated_bg3};
   background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2;
   border: none;
 `
@@ -86,10 +86,10 @@ const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>`
   min-width: 196px;
   max-height: 350px;
   overflow: auto;
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.deprecated_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: 1px solid ${({ theme }) => theme.bg0};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg0};
   border-radius: 12px;
   padding: 0.5rem;
   display: flex;
@@ -121,9 +121,9 @@ const MenuItem = styled(ExternalLink)`
   align-items: center;
   padding: 0.5rem 0.5rem;
   justify-content: space-between;
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
   :hover {
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.deprecated_text1};
     cursor: pointer;
     text-decoration: none;
   }
@@ -132,9 +132,9 @@ const MenuItem = styled(ExternalLink)`
 const InternalMenuItem = styled(Link)`
   flex: 1;
   padding: 0.5rem 0.5rem;
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
   :hover {
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.deprecated_text1};
     cursor: pointer;
     text-decoration: none;
   }
@@ -151,7 +151,7 @@ const InternalLinkMenuItem = styled(InternalMenuItem)`
   justify-content: space-between;
   text-decoration: none;
   :hover {
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.deprecated_text1};
     cursor: pointer;
     text-decoration: none;
   }
@@ -170,9 +170,9 @@ const ToggleMenuItem = styled.button`
   justify-content: space-between;
   font-size: 1rem;
   font-weight: 500;
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
   :hover {
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.deprecated_text1};
     cursor: pointer;
     text-decoration: none;
   }

src/components/Modal/index.tsx

@@ -19,7 +19,7 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)`
     align-items: center;
     justify-content: center;
 
-    background-color: ${({ theme }) => theme.modalBG};
+    background-color: ${({ theme }) => theme.deprecated_modalBG};
   }
 `
 
@@ -35,8 +35,8 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...r
 
   &[data-reach-dialog-content] {
     margin: 0 0 2rem 0;
-    background-color: ${({ theme }) => theme.bg0};
-    border: 1px solid ${({ theme }) => theme.bg1};
+    background-color: ${({ theme }) => theme.deprecated_bg0};
+    border: 1px solid ${({ theme }) => theme.deprecated_bg1};
     box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
     padding: 0px;
     width: 50vw;

src/components/ModalViews/index.tsx

@@ -59,7 +59,7 @@ export function SubmittedView({
         <CloseIcon onClick={onDismiss} />
       </RowBetween>
       <ConfirmedIcon>
-        <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
+        <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
       </ConfirmedIcon>
       <AutoColumn gap="100px" justify={'center'}>
         {children}

src/components/NavigationTabs/index.tsx

@@ -35,18 +35,18 @@ const StyledNavLink = styled(NavLink).attrs({
   outline: none;
   cursor: pointer;
   text-decoration: none;
-  color: ${({ theme }) => theme.text3};
+  color: ${({ theme }) => theme.deprecated_text3};
   font-size: 20px;
 
   &.${activeClassName} {
     border-radius: 12px;
     font-weight: 500;
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.deprecated_text1};
   }
 
   :hover,
   :focus {
-    color: ${({ theme }) => darken(0.1, theme.text1)};
+    color: ${({ theme }) => darken(0.1, theme.deprecated_text1)};
   }
 `
 
@@ -65,7 +65,7 @@ const ActiveText = styled.div`
 `
 
 const StyledArrowLeft = styled(ArrowLeft)`
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
 `
 
 export function SwapPoolTabs({ active }: { active: 'swap' | 'pool' }) {
@@ -134,7 +134,7 @@ export function AddRemoveTabs({
           }}
           flex={children ? '1' : undefined}
         >
-          <StyledArrowLeft stroke={theme.text2} />
+          <StyledArrowLeft stroke={theme.deprecated_text2} />
         </StyledHistoryLink>
         <ThemedText.MediumHeader
           fontWeight={500}

src/components/NumericalInput/index.tsx

@@ -4,14 +4,14 @@ import styled from 'styled-components/macro'
 import { escapeRegExp } from '../../utils'
 
 const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`
-  color: ${({ error, theme }) => (error ? theme.red1 : theme.text1)};
+  color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
   width: 0;
   position: relative;
   font-weight: 500;
   outline: none;
   border: none;
   flex: 1 1 auto;
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
   font-size: ${({ fontSize }) => fontSize ?? '28px'};
   text-align: ${({ align }) => align && align};
   white-space: nowrap;
@@ -35,7 +35,7 @@ const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: s
   }
 
   ::placeholder {
-    color: ${({ theme }) => theme.text4};
+    color: ${({ theme }) => theme.deprecated_text4};
   }
 `
 

src/components/Popover/index.tsx

@@ -10,7 +10,7 @@ const PopoverContainer = styled.div<{ show: boolean }>`
   visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
   opacity: ${(props) => (props.show ? 1 : 0)};
   transition: visibility 150ms linear, opacity 150ms linear;
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
 `
 
 const ReferenceElement = styled.div`
@@ -30,9 +30,9 @@ const Arrow = styled.div`
     z-index: 9998;
 
     content: '';
-    border: 1px solid ${({ theme }) => theme.bg2};
+    border: 1px solid ${({ theme }) => theme.deprecated_bg2};
     transform: rotate(45deg);
-    background: ${({ theme }) => theme.bg0};
+    background: ${({ theme }) => theme.deprecated_bg0};
   }
 
   &.arrow-top {

src/components/Popups/FailedNetworkSwitchPopup.tsx

@@ -20,7 +20,7 @@ export default function FailedNetworkSwitchPopup({ chainId }: { chainId: Support
   return (
     <RowNoFlex>
       <div style={{ paddingRight: 16 }}>
-        <AlertCircle color={theme.red1} size={24} />
+        <AlertCircle color={theme.deprecated_red1} size={24} />
       </div>
       <AutoColumn gap="8px">
         <ThemedText.Body fontWeight={500}>

src/components/Popups/PopupItem.tsx

@@ -22,7 +22,7 @@ const Popup = styled.div`
   display: inline-block;
   width: 100%;
   padding: 1em;
-  background-color: ${({ theme }) => theme.bg0};
+  background-color: ${({ theme }) => theme.deprecated_bg0};
   position: relative;
   border-radius: 10px;
   padding: 20px;
@@ -42,7 +42,7 @@ const Fader = styled.div`
   left: 0px;
   width: 100%;
   height: 2px;
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.deprecated_bg3};
 `
 
 const AnimatedFader = animated(Fader)
@@ -90,7 +90,7 @@ export default function PopupItem({
 
   return (
     <Popup>
-      <StyledClose color={theme.text2} onClick={removeThisPopup} />
+      <StyledClose color={theme.deprecated_text2} onClick={removeThisPopup} />
       {popupContent}
       {removeAfterMs !== null ? <AnimatedFader style={faderStyle} /> : null}
     </Popup>

src/components/Popups/SurveyPopup.tsx

@@ -19,7 +19,7 @@ const Wrapper = styled(AutoColumn)`
   padding: 18px;
   max-width: 360px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   overflow: hidden;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
@@ -90,13 +90,18 @@ export default function SurveyPopup() {
           <BGOrb src={BGImage} />
           <ExternalLink href="https://www.surveymonkey.com/r/YGWV9VD">
             <RowFixed>
-              <MessageCircle stroke={theme.black} size="20px" strokeWidth="1px" />
-              <ThemedText.White fontWeight={600} color={theme.black} ml="6px">
+              <MessageCircle stroke={theme.deprecated_black} size="20px" strokeWidth="1px" />
+              <ThemedText.White fontWeight={600} color={theme.deprecated_black} ml="6px">
                 <Trans>Tell us what you think ↗</Trans>
               </ThemedText.White>
             </RowFixed>
           </ExternalLink>
-          <ThemedText.Black style={{ zIndex: Z_INDEX.fixed }} fontWeight={400} fontSize="12px" color={theme.black}>
+          <ThemedText.Black
+            style={{ zIndex: Z_INDEX.fixed }}
+            fontWeight={400}
+            fontSize="12px"
+            color={theme.deprecated_black}
+          >
             <Trans>Take a 10 minute survey to help us improve your experience in the Uniswap app.</Trans>
           </ThemedText.Black>
         </Wrapper>

src/components/Popups/TransactionPopup.tsx

@@ -27,7 +27,11 @@ export default function TransactionPopup({ hash }: { hash: string }) {
   return (
     <RowNoFlex>
       <div style={{ paddingRight: 16 }}>
-        {success ? <CheckCircle color={theme.green1} size={24} /> : <AlertCircle color={theme.red1} size={24} />}
+        {success ? (
+          <CheckCircle color={theme.deprecated_green1} size={24} />
+        ) : (
+          <AlertCircle color={theme.deprecated_red1} size={24} />
+        )}
       </div>
       <AutoColumn gap="8px">
         <ThemedText.Body fontWeight={500}>

src/components/PositionCard/Sushi.tsx

@@ -20,7 +20,7 @@ import { FixedHeightRow } from '.'
 const StyledPositionCard = styled(LightCard)<{ bgColor: any }>`
   border: none;
   background: ${({ theme, bgColor }) =>
-    `radial-gradient(91.85% 100% at 1.84% 0%, ${transparentize(0.8, bgColor)} 0%, ${theme.bg3} 100%) `};
+    `radial-gradient(91.85% 100% at 1.84% 0%, ${transparentize(0.8, bgColor)} 0%, ${theme.deprecated_bg3} 100%) `};
   position: relative;
   overflow: hidden;
 `

src/components/PositionCard/V2.tsx

@@ -29,7 +29,7 @@ import { FixedHeightRow } from '.'
 const StyledPositionCard = styled(LightCard)<{ bgColor: any }>`
   border: none;
   background: ${({ theme, bgColor }) =>
-    `radial-gradient(91.85% 100% at 1.84% 0%, ${transparentize(0.8, bgColor)} 0%, ${theme.bg3} 100%) `};
+    `radial-gradient(91.85% 100% at 1.84% 0%, ${transparentize(0.8, bgColor)} 0%, ${theme.deprecated_bg3} 100%) `};
   position: relative;
   overflow: hidden;
 `

src/components/PositionCard/index.tsx

@@ -33,7 +33,7 @@ export const FixedHeightRow = styled(RowBetween)`
 const StyledPositionCard = styled(LightCard)<{ bgColor: any }>`
   border: none;
   background: ${({ theme, bgColor }) =>
-    `radial-gradient(91.85% 100% at 1.84% 0%, ${transparentize(0.8, bgColor)} 0%, ${theme.bg3} 100%) `};
+    `radial-gradient(91.85% 100% at 1.84% 0%, ${transparentize(0.8, bgColor)} 0%, ${theme.deprecated_bg3} 100%) `};
   position: relative;
   overflow: hidden;
 `

src/components/PositionListItem/index.tsx

@@ -31,12 +31,12 @@ const LinkRow = styled(Link)`
   flex-direction: column;
 
   justify-content: space-between;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   margin: 8px 0;
   padding: 16px;
   text-decoration: none;
   font-weight: 500;
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
 
   &:last-of-type {
     margin: 8px 0 0 0;
@@ -45,7 +45,7 @@ const LinkRow = styled(Link)`
     text-align: center;
   }
   :hover {
-    background-color: ${({ theme }) => theme.bg2};
+    background-color: ${({ theme }) => theme.deprecated_bg2};
   }
 
   @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
@@ -79,7 +79,7 @@ const RangeLineItem = styled(DataLineItem)`
   width: 100%;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
-  background-color: ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg2};
     border-radius: 12px;
     padding: 8px 0;
 `};
@@ -87,7 +87,7 @@ const RangeLineItem = styled(DataLineItem)`
 
 const DoubleArrow = styled.span`
   margin: 0 2px;
-  color: ${({ theme }) => theme.text3};
+  color: ${({ theme }) => theme.deprecated_text3};
   ${({ theme }) => theme.mediaWidth.upToSmall`
     margin: 4px;
     padding: 20px;
@@ -95,13 +95,13 @@ const DoubleArrow = styled.span`
 `
 
 const RangeText = styled.span`
-  /* background-color: ${({ theme }) => theme.bg2}; */
+  /* background-color: ${({ theme }) => theme.deprecated_bg2}; */
   padding: 0.25rem 0.5rem;
   border-radius: 8px;
 `
 
 const ExtentsText = styled.span`
-  color: ${({ theme }) => theme.text3};
+  color: ${({ theme }) => theme.deprecated_text3};
   font-size: 14px;
   margin-right: 4px;
   ${({ theme }) => theme.mediaWidth.upToSmall`

src/components/PositionPreview/index.tsx

@@ -135,7 +135,7 @@ export const PositionPreview = ({
                   {quoteCurrency.symbol} per {baseCurrency.symbol}
                 </Trans>
               </ThemedText.Main>
-              <ThemedText.Small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
+              <ThemedText.Small textAlign="center" color={theme.deprecated_text3} style={{ marginTop: '4px' }}>
                 <Trans>Your position will be 100% composed of {baseCurrency?.symbol} at this price</Trans>
               </ThemedText.Small>
             </AutoColumn>
@@ -156,7 +156,7 @@ export const PositionPreview = ({
                   {quoteCurrency.symbol} per {baseCurrency.symbol}
                 </Trans>
               </ThemedText.Main>
-              <ThemedText.Small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
+              <ThemedText.Small textAlign="center" color={theme.deprecated_text3} style={{ marginTop: '4px' }}>
                 <Trans>Your position will be 100% composed of {quoteCurrency?.symbol} at this price</Trans>
               </ThemedText.Small>
             </AutoColumn>

src/components/PrivacyPolicy/index.tsx

@@ -20,20 +20,20 @@ const Wrapper = styled.div`
 `
 
 const StyledExternalCard = styled(Card)`
-  background-color: ${({ theme }) => theme.primary5};
+  background-color: ${({ theme }) => theme.deprecated_primary5};
   padding: 0.5rem;
   width: 100%;
 
   :hover,
   :focus,
   :active {
-    background-color: ${({ theme }) => theme.primary4};
+    background-color: ${({ theme }) => theme.deprecated_primary4};
   }
 `
 
 const HoverText = styled.div`
   text-decoration: none;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   display: flex;
   align-items: center;
 
@@ -128,7 +128,7 @@ export function PrivacyPolicy() {
               <RowBetween>
                 <AutoRow gap="4px">
                   <Info size={20} />
-                  <ThemedText.Main fontSize={14} color={'primaryText1'}>
+                  <ThemedText.Main fontSize={14} color={'deprecated_primaryText1'}>
                     <Trans>Uniswap Labs&apos; Terms of Service</Trans>
                   </ThemedText.Main>
                 </AutoRow>
@@ -141,7 +141,7 @@ export function PrivacyPolicy() {
               <RowBetween>
                 <AutoRow gap="4px">
                   <Info size={20} />
-                  <ThemedText.Main fontSize={14} color={'primaryText1'}>
+                  <ThemedText.Main fontSize={14} color={'deprecated_primaryText1'}>
                     <Trans>Protocol Disclaimer</Trans>
                   </ThemedText.Main>
                 </AutoRow>
@@ -159,7 +159,7 @@ export function PrivacyPolicy() {
               <AutoColumn gap="8px">
                 <AutoRow gap="4px">
                   <Info size={18} />
-                  <ThemedText.Main fontSize={14} color={'text1'}>
+                  <ThemedText.Main fontSize={14} color={'deprecated_text1'}>
                     {name}
                   </ThemedText.Main>
                 </AutoRow>

src/components/ProgressSteps/index.tsx

@@ -13,7 +13,7 @@ const Wrapper = styled(AutoColumn)`
 const Grouping = styled(AutoColumn)`
   width: fit-content;
   padding: 4px;
-  /* background-color: ${({ theme }) => theme.bg2}; */
+  /* background-color: ${({ theme }) => theme.deprecated_bg2}; */
   border-radius: 16px;
 `
 
@@ -21,9 +21,9 @@ const Circle = styled.div<{ confirmed?: boolean; disabled?: boolean }>`
   width: 48px;
   height: 48px;
   background-color: ${({ theme, confirmed, disabled }) =>
-    disabled ? theme.bg3 : confirmed ? theme.green1 : theme.primary1};
+    disabled ? theme.deprecated_bg3 : confirmed ? theme.deprecated_green1 : theme.deprecated_primary1};
   border-radius: 50%;
-  color: ${({ theme, disabled }) => (disabled ? theme.text3 : theme.text1)};
+  color: ${({ theme, disabled }) => (disabled ? theme.deprecated_text3 : theme.deprecated_text1)};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -65,7 +65,7 @@ export default function ProgressCircles({ steps, disabled = false, ...rest }: Pr
               <Circle confirmed={step} disabled={disabled || (!steps[i - 1] && i !== 0)}>
                 {step ? '✓' : i + 1 + '.'}
               </Circle>
-              <ThemedText.Main color={theme.text4}>|</ThemedText.Main>
+              <ThemedText.Main color={theme.deprecated_text4}>|</ThemedText.Main>
             </CircleRow>
           )
         })}

src/components/QuestionHelper/index.tsx

@@ -16,8 +16,8 @@ const QuestionWrapper = styled.div`
   cursor: default;
   border-radius: 36px;
   font-size: 12px;
-  background-color: ${({ theme }) => theme.bg2};
-  color: ${({ theme }) => theme.text2};
+  background-color: ${({ theme }) => theme.deprecated_bg2};
+  color: ${({ theme }) => theme.deprecated_text2};
 
   :hover,
   :focus {

src/components/RangeSelector/PresetsButtons.tsx

@@ -10,7 +10,7 @@ const Button = styled(ButtonOutlined).attrs(() => ({
   padding: '8px',
   $borderRadius: '8px',
 }))`
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   flex: 1;
 `
 

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -48,12 +48,12 @@ const DottedLine = styled.div`
 
 const DotColor = styled(DotLine)`
   path {
-    stroke: ${({ theme }) => theme.bg4};
+    stroke: ${({ theme }) => theme.deprecated_bg4};
   }
 `
 
 const OpaqueBadge = styled(Badge)`
-  background-color: ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg2};
   border-radius: 8px;
   display: grid;
   font-size: 12px;
@@ -65,9 +65,9 @@ const OpaqueBadge = styled(Badge)`
 `
 
 const ProtocolBadge = styled(Badge)`
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.deprecated_bg3};
   border-radius: 4px;
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
   font-size: 10px;
   padding: 2px 4px;
   z-index: ${Z_INDEX.sticky + 1};

src/components/SearchModal/BlockedToken.tsx

@@ -37,7 +37,7 @@ const Header = styled.div`
   width: 100%;
 `
 const Icon = styled(AlertCircle)`
-  stroke: ${({ theme }) => theme.text2};
+  stroke: ${({ theme }) => theme.deprecated_text2};
   width: 48px;
   height: 48px;
 `

src/components/SearchModal/CommonBases.tsx

@@ -17,7 +17,7 @@ const MobileWrapper = styled(AutoColumn)`
 `
 
 const BaseWrapper = styled.div<{ disable?: boolean }>`
-  border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.bg3)};
+  border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.deprecated_bg3)};
   border-radius: 10px;
   display: flex;
   padding: 6px;
@@ -25,11 +25,11 @@ const BaseWrapper = styled.div<{ disable?: boolean }>`
   align-items: center;
   :hover {
     cursor: ${({ disable }) => !disable && 'pointer'};
-    background-color: ${({ theme, disable }) => !disable && theme.bg2};
+    background-color: ${({ theme, disable }) => !disable && theme.deprecated_bg2};
   }
 
-  color: ${({ theme, disable }) => disable && theme.text3};
-  background-color: ${({ theme, disable }) => disable && theme.bg3};
+  color: ${({ theme, disable }) => disable && theme.deprecated_text3};
+  background-color: ${({ theme, disable }) => disable && theme.deprecated_bg3};
   filter: ${({ disable }) => disable && 'grayscale(1)'};
 `
 

src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap

@@ -86,7 +86,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             DAI
           </div>
           <div
-            class="c5 css-165qfk5"
+            class="c5 css-1j6a53a"
           >
             Dai Stablecoin
           </div>
@@ -109,7 +109,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             USDC
           </div>
           <div
-            class="c5 css-165qfk5"
+            class="c5 css-1j6a53a"
           >
             USD//C
           </div>
@@ -132,7 +132,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             WBTC
           </div>
           <div
-            class="c5 css-165qfk5"
+            class="c5 css-1j6a53a"
           >
             Wrapped BTC
           </div>

src/components/SearchModal/CurrencyList/index.tsx

@@ -38,8 +38,8 @@ const StyledBalanceText = styled(Text)`
 `
 
 const Tag = styled.div`
-  background-color: ${({ theme }) => theme.bg3};
-  color: ${({ theme }) => theme.text2};
+  background-color: ${({ theme }) => theme.deprecated_bg3};
+  color: ${({ theme }) => theme.deprecated_text2};
   font-size: 14px;
   border-radius: 4px;
   padding: 0.25rem 0.3rem 0.25rem 0.3rem;
@@ -180,7 +180,7 @@ function BreakLineComponent({ style }: { style: CSSProperties }) {
         <RowBetween>
           <RowFixed>
             <TokenListLogoWrapper src={TokenListLogo} />
-            <ThemedText.Main ml="6px" fontSize="12px" color={theme.text1}>
+            <ThemedText.Main ml="6px" fontSize="12px" color={theme.deprecated_text1}>
               <Trans>Expanded results from inactive Token Lists</Trans>
             </ThemedText.Main>
           </RowFixed>

src/components/SearchModal/CurrencySearch.tsx

@@ -42,8 +42,8 @@ const Footer = styled.div`
   padding: 20px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  background-color: ${({ theme }) => theme.bg1};
-  border-top: 1px solid ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
+  border-top: 1px solid ${({ theme }) => theme.deprecated_bg2};
 `
 
 interface CurrencySearchProps {
@@ -251,19 +251,19 @@ export function CurrencySearch({
           </div>
         ) : (
           <Column style={{ padding: '20px', height: '100%' }}>
-            <ThemedText.Main color={theme.text3} textAlign="center" mb="20px">
+            <ThemedText.Main color={theme.deprecated_text3} textAlign="center" mb="20px">
               <Trans>No results found.</Trans>
             </ThemedText.Main>
           </Column>
         )}
         <Footer>
           <Row justify="center">
-            <ButtonText onClick={showManageView} color={theme.primary1} className="list-token-manage-button">
+            <ButtonText onClick={showManageView} color={theme.deprecated_primary1} className="list-token-manage-button">
               <RowFixed>
-                <IconWrapper size="16px" marginRight="6px" stroke={theme.primaryText1}>
+                <IconWrapper size="16px" marginRight="6px" stroke={theme.deprecated_primaryText1}>
                   <Edit />
                 </IconWrapper>
-                <ThemedText.Main color={theme.primaryText1}>
+                <ThemedText.Main color={theme.deprecated_primaryText1}>
                   <Trans>Manage Token Lists</Trans>
                 </ThemedText.Main>
               </RowFixed>

src/components/SearchModal/ImportList.tsx

@@ -90,7 +90,7 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
       <SectionBreak />
       <PaddedColumn gap="md">
         <AutoColumn gap="md">
-          <Card backgroundColor={theme.bg2} padding="12px 20px">
+          <Card backgroundColor={theme.deprecated_bg2} padding="12px 20px">
             <RowBetween>
               <RowFixed>
                 {list.logoURI && <ListLogo logoURI={list.logoURI} size="40px" />}
@@ -105,7 +105,7 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
                     </ThemedText.Main>
                   </RowFixed>
                   <ExternalLink href={`https://tokenlists.org/token-list?url=${listURL}`}>
-                    <ThemedText.Main fontSize={'12px'} color={theme.blue1}>
+                    <ThemedText.Main fontSize={'12px'} color={theme.deprecated_blue1}>
                       {listURL}
                     </ThemedText.Main>
                   </ExternalLink>
@@ -113,23 +113,23 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
               </RowFixed>
             </RowBetween>
           </Card>
-          <Card style={{ backgroundColor: transparentize(0.8, theme.red1) }}>
+          <Card style={{ backgroundColor: transparentize(0.8, theme.deprecated_red1) }}>
             <AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
-              <AlertTriangle stroke={theme.red1} size={32} />
-              <ThemedText.Body fontWeight={500} fontSize={20} color={theme.red1}>
+              <AlertTriangle stroke={theme.deprecated_red1} size={32} />
+              <ThemedText.Body fontWeight={500} fontSize={20} color={theme.deprecated_red1}>
                 <Trans>Import at your own risk</Trans>
               </ThemedText.Body>
             </AutoColumn>
 
             <AutoColumn style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
-              <ThemedText.Body fontWeight={500} color={theme.red1}>
+              <ThemedText.Body fontWeight={500} color={theme.deprecated_red1}>
                 <Trans>
                   By adding this list you are implicitly trusting that the data is correct. Anyone can create a list,
                   including creating fake versions of existing lists and lists that claim to represent projects that do
                   not have one.
                 </Trans>
               </ThemedText.Body>
-              <ThemedText.Body fontWeight={600} color={theme.red1}>
+              <ThemedText.Body fontWeight={600} color={theme.deprecated_red1}>
                 <Trans>If you purchase a token from this list, you may not be able to sell it back.</Trans>
               </ThemedText.Body>
             </AutoColumn>
@@ -140,7 +140,7 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
                 checked={confirmed}
                 onChange={() => setConfirmed(!confirmed)}
               />
-              <ThemedText.Body ml="10px" fontSize="16px" color={theme.red1} fontWeight={500}>
+              <ThemedText.Body ml="10px" fontSize="16px" color={theme.deprecated_red1} fontWeight={500}>
                 <Trans>I understand</Trans>
               </ThemedText.Body>
             </AutoRow>

src/components/SearchModal/ImportRow.tsx

@@ -29,7 +29,7 @@ const CheckIcon = styled(CheckCircle)`
   height: 16px;
   width: 16px;
   margin-right: 6px;
-  stroke: ${({ theme }) => theme.green1};
+  stroke: ${({ theme }) => theme.deprecated_green1};
 `
 
 const NameOverflow = styled.div`
@@ -74,7 +74,7 @@ export default function ImportRow({
         </AutoRow>
         {list && list.logoURI && (
           <RowFixed>
-            <ThemedText.Small mr="4px" color={theme.text3}>
+            <ThemedText.Small mr="4px" color={theme.deprecated_text3}>
               <Trans>via {list.name} </Trans>
             </ThemedText.Small>
             <ListLogo logoURI={list.logoURI} size="12px" />
@@ -97,7 +97,7 @@ export default function ImportRow({
       ) : (
         <RowFixed style={{ minWidth: 'fit-content' }}>
           <CheckIcon />
-          <ThemedText.Main color={theme.green1}>
+          <ThemedText.Main color={theme.deprecated_green1}>
             <Trans>Active</Trans>
           </ThemedText.Main>
         </RowFixed>

src/components/SearchModal/ImportToken.tsx

@@ -65,7 +65,7 @@ export function ImportToken(props: ImportProps) {
       <SectionBreak />
       <AutoColumn gap="md" style={{ marginBottom: '32px', padding: '1rem' }}>
         <AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', padding: '1rem' }}>
-          <AlertCircle size={48} stroke={theme.text2} strokeWidth={1} />
+          <AlertCircle size={48} stroke={theme.deprecated_text2} strokeWidth={1} />
           <ThemedText.Body fontWeight={400} fontSize={16}>
             <Trans>
               This token doesn&apos;t appear on the active token list(s). Make sure this is the token that you want to

src/components/SearchModal/Manage.tsx

@@ -21,7 +21,7 @@ const Wrapper = styled.div`
 `
 
 const ToggleWrapper = styled(RowBetween)`
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.deprecated_bg3};
   border-radius: 12px;
   padding: 6px;
 `
@@ -34,8 +34,8 @@ const ToggleOption = styled.div<{ active?: boolean }>`
   justify-content: center;
   border-radius: 12px;
   font-weight: 600;
-  background-color: ${({ theme, active }) => (active ? theme.bg1 : theme.bg3)};
-  color: ${({ theme, active }) => (active ? theme.text1 : theme.text2)};
+  background-color: ${({ theme, active }) => (active ? theme.deprecated_bg1 : theme.deprecated_bg3)};
+  color: ${({ theme, active }) => (active ? theme.deprecated_text1 : theme.deprecated_text2)};
   user-select: none;
 
   :hover {

src/components/SearchModal/ManageLists.tsx

@@ -46,11 +46,11 @@ const PopoverContainer = styled.div<{ show: boolean }>`
   visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
   opacity: ${(props) => (props.show ? 1 : 0)};
   transition: visibility 150ms linear, opacity 150ms linear;
-  background: ${({ theme }) => theme.bg2};
-  border: 1px solid ${({ theme }) => theme.bg3};
+  background: ${({ theme }) => theme.deprecated_bg2};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
   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);
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
   border-radius: 0.5rem;
   padding: 1rem;
   display: grid;
@@ -73,16 +73,16 @@ const StyledTitleText = styled.div<{ active: boolean }>`
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 600;
-  color: ${({ theme, active }) => (active ? theme.white : theme.text2)};
+  color: ${({ theme, active }) => (active ? theme.deprecated_white : theme.deprecated_text2)};
 `
 
 const StyledListUrlText = styled(ThemedText.Main)<{ active: boolean }>`
   font-size: 12px;
-  color: ${({ theme, active }) => (active ? theme.white : theme.text2)};
+  color: ${({ theme, active }) => (active ? theme.deprecated_white : theme.deprecated_text2)};
 `
 
 const RowWrapper = styled(Row)<{ bgColor: string; active: boolean; hasActiveTokens: boolean }>`
-  background-color: ${({ bgColor, active, theme }) => (active ? bgColor ?? 'transparent' : theme.bg2)};
+  background-color: ${({ bgColor, active, theme }) => (active ? bgColor ?? 'transparent' : theme.deprecated_bg2)};
   opacity: ${({ hasActiveTokens }) => (hasActiveTokens ? 1 : 0.4)};
   transition: 200ms;
   align-items: center;
@@ -193,7 +193,7 @@ const ListRow = memo(function ListRow({ listUrl }: { listUrl: string }) {
           </StyledListUrlText>
           <StyledMenu ref={node as any}>
             <ButtonEmpty onClick={toggle} ref={setReferenceElement} padding="0">
-              <Settings stroke={isActive ? theme.bg1 : theme.text1} size={12} />
+              <Settings stroke={isActive ? theme.deprecated_bg1 : theme.deprecated_text1} size={12} />
             </ButtonEmpty>
             {open && (
               <PopoverContainer show={true} ref={setPopperElement as any} style={styles.popper} {...attributes.popper}>
@@ -369,7 +369,7 @@ export function ManageLists({
       </PaddedColumn>
       {tempList && (
         <PaddedColumn style={{ paddingTop: 0 }}>
-          <Card backgroundColor={theme.bg2} padding="12px 20px">
+          <Card backgroundColor={theme.deprecated_bg2} padding="12px 20px">
             <RowBetween>
               <RowFixed>
                 {tempList.logoURI && <ListLogo logoURI={tempList.logoURI} size="40px" />}
@@ -382,10 +382,10 @@ export function ManageLists({
               </RowFixed>
               {isImported ? (
                 <RowFixed>
-                  <IconWrapper stroke={theme.text2} size="16px" marginRight={'10px'}>
+                  <IconWrapper stroke={theme.deprecated_text2} size="16px" marginRight={'10px'}>
                     <CheckCircle />
                   </IconWrapper>
-                  <ThemedText.Body color={theme.text2}>
+                  <ThemedText.Body color={theme.deprecated_text2}>
                     <Trans>Loaded</Trans>
                   </ThemedText.Body>
                 </RowFixed>

src/components/SearchModal/ManageTokens.tsx

@@ -32,7 +32,7 @@ const Footer = styled.div`
   border-radius: 20px;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
-  border-top: 1px solid ${({ theme }) => theme.bg3};
+  border-top: 1px solid ${({ theme }) => theme.deprecated_bg3};
   padding: 20px;
   text-align: center;
 `
@@ -116,7 +116,7 @@ export default function ManageTokens({
             </ThemedText.Error>
           )}
           {searchToken && (
-            <Card backgroundColor={theme.bg2} padding="10px 0">
+            <Card backgroundColor={theme.deprecated_bg2} padding="10px 0">
               <ImportRow
                 token={searchToken}
                 showImportView={() => setModalView(CurrencyModalView.importToken)}

src/components/SearchModal/TokenImportCard.tsx

@@ -15,7 +15,7 @@ import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 const WarningWrapper = styled(Card)<{ highWarning: boolean }>`
   background-color: ${({ theme, highWarning }) =>
-    highWarning ? transparentize(0.8, theme.red1) : transparentize(0.8, theme.yellow2)};
+    highWarning ? transparentize(0.8, theme.deprecated_red1) : transparentize(0.8, theme.deprecated_yellow2)};
   width: fit-content;
 `
 
@@ -35,7 +35,7 @@ const TokenImportCard = ({ list, token }: TokenImportCardProps) => {
   const theme = useTheme()
   const { chainId } = useWeb3React()
   return (
-    <Card backgroundColor={theme.bg2} padding="2rem">
+    <Card backgroundColor={theme.deprecated_bg2} padding="2rem">
       <AutoColumn gap="10px" justify="center">
         <CurrencyLogo currency={token} size={'32px'} />
         <AutoColumn gap="4px" justify="center">
@@ -54,15 +54,15 @@ const TokenImportCard = ({ list, token }: TokenImportCardProps) => {
         {list !== undefined ? (
           <RowFixed>
             {list.logoURI && <ListLogo logoURI={list.logoURI} size="16px" />}
-            <ThemedText.Small ml="6px" fontSize={14} color={theme.text3}>
+            <ThemedText.Small ml="6px" fontSize={14} color={theme.deprecated_text3}>
               <Trans>via {list.name} token list</Trans>
             </ThemedText.Small>
           </RowFixed>
         ) : (
           <WarningWrapper $borderRadius="4px" padding="4px" highWarning={true}>
             <RowFixed>
-              <AlertCircle stroke={theme.red1} size="10px" />
-              <ThemedText.Body color={theme.red1} ml="4px" fontSize="10px" fontWeight={500}>
+              <AlertCircle stroke={theme.deprecated_red1} size="10px" />
+              <ThemedText.Body color={theme.deprecated_red1} ml="4px" fontSize="10px" fontWeight={500}>
                 <Trans>Unknown Source</Trans>
               </ThemedText.Body>
             </RowFixed>

src/components/SearchModal/styleds.tsx

@@ -7,12 +7,12 @@ import { RowBetween } from '../Row'
 export const TextDot = styled.div`
   height: 3px;
   width: 3px;
-  background-color: ${({ theme }) => theme.text2};
+  background-color: ${({ theme }) => theme.deprecated_text2};
   border-radius: 50%;
 `
 
 export const Checkbox = styled.input`
-  border: 1px solid ${({ theme }) => theme.red3};
+  border: 1px solid ${({ theme }) => theme.deprecated_red3};
   height: 20px;
   margin: 0;
 `
@@ -30,7 +30,7 @@ export const MenuItem = styled(RowBetween)`
   cursor: ${({ disabled }) => !disabled && 'pointer'};
   pointer-events: ${({ disabled }) => disabled && 'none'};
   :hover {
-    background-color: ${({ theme, disabled }) => !disabled && theme.bg2};
+    background-color: ${({ theme, disabled }) => !disabled && theme.deprecated_bg2};
   }
   opacity: ${({ disabled, selected }) => (disabled || selected ? 0.5 : 1)};
 `
@@ -46,32 +46,32 @@ export const SearchInput = styled.input`
   border: none;
   outline: none;
   border-radius: 20px;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   border-style: solid;
-  border: 1px solid ${({ theme }) => theme.bg3};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
   -webkit-appearance: none;
 
   font-size: 18px;
 
   ::placeholder {
-    color: ${({ theme }) => theme.text3};
+    color: ${({ theme }) => theme.deprecated_text3};
   }
   transition: border 100ms;
   :focus {
-    border: 1px solid ${({ theme }) => theme.primary1};
+    border: 1px solid ${({ theme }) => theme.deprecated_primary1};
     outline: none;
   }
 `
 export const Separator = styled.div`
   width: 100%;
   height: 1px;
-  background-color: ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg2};
 `
 
 export const SeparatorDark = styled.div`
   width: 100%;
   height: 1px;
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.deprecated_bg3};
 `
 
 export const LoadingRows = styled(BaseLoadingRows)`

src/components/Settings/index.tsx

@@ -27,7 +27,7 @@ const StyledMenuIcon = styled(Settings)`
   width: 20px;
 
   > * {
-    stroke: ${({ theme }) => theme.text1};
+    stroke: ${({ theme }) => theme.deprecated_text1};
   }
 
   :hover {
@@ -43,7 +43,7 @@ const StyledCloseIcon = styled(X)`
   }
 
   > * {
-    stroke: ${({ theme }) => theme.text1};
+    stroke: ${({ theme }) => theme.deprecated_text1};
   }
 `
 
@@ -83,8 +83,8 @@ const StyledMenu = styled.div`
 
 const MenuFlyout = styled.span`
   min-width: 20.125rem;
-  background-color: ${({ theme }) => theme.bg2};
-  border: 1px solid ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.deprecated_bg2};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
   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: 12px;
@@ -106,7 +106,7 @@ const MenuFlyout = styled.span`
 const Break = styled.div`
   width: 100%;
   height: 1px;
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.deprecated_bg3};
 `
 
 const ModalContentWrapper = styled.div`
@@ -114,7 +114,7 @@ const ModalContentWrapper = styled.div`
   align-items: center;
   justify-content: center;
   padding: 2rem 0;
-  background-color: ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg2};
   border-radius: 20px;
 `
 
@@ -202,7 +202,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
             {isSupportedChainId(chainId) && (
               <RowBetween>
                 <RowFixed>
-                  <ThemedText.Black fontWeight={400} fontSize={14} color={theme.text2}>
+                  <ThemedText.Black fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
                     <Trans>Auto Router API</Trans>
                   </ThemedText.Black>
                   <QuestionHelper text={<Trans>Use the Uniswap Labs API to get faster quotes.</Trans>} />
@@ -222,7 +222,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
             )}
             <RowBetween>
               <RowFixed>
-                <ThemedText.Black fontWeight={400} fontSize={14} color={theme.text2}>
+                <ThemedText.Black fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
                   <Trans>Expert Mode</Trans>
                 </ThemedText.Black>
                 <QuestionHelper

src/components/Slider/index.tsx

@@ -19,11 +19,11 @@ const StyledRangeInput = styled.input<{ size: number }>`
     -webkit-appearance: none;
     height: ${({ size }) => size}px;
     width: ${({ size }) => size}px;
-    background-color: ${({ theme }) => theme.blue1};
+    background-color: ${({ theme }) => theme.deprecated_blue1};
     border-radius: 100%;
     border: none;
     transform: translateY(-50%);
-    color: ${({ theme }) => theme.bg1};
+    color: ${({ theme }) => theme.deprecated_bg1};
 
     &:hover,
     &:focus {
@@ -38,7 +38,7 @@ const StyledRangeInput = styled.input<{ size: number }>`
     background-color: #565a69;
     border-radius: 100%;
     border: none;
-    color: ${({ theme }) => theme.bg1};
+    color: ${({ theme }) => theme.deprecated_bg1};
 
     &:hover,
     &:focus {
@@ -52,7 +52,7 @@ const StyledRangeInput = styled.input<{ size: number }>`
     width: ${({ size }) => size}px;
     background-color: #565a69;
     border-radius: 100%;
-    color: ${({ theme }) => theme.bg1};
+    color: ${({ theme }) => theme.deprecated_bg1};
 
     &:hover,
     &:focus {
@@ -62,12 +62,16 @@ const StyledRangeInput = styled.input<{ size: number }>`
   }
 
   &::-webkit-slider-runnable-track {
-    background: linear-gradient(90deg, ${({ theme }) => theme.blue1}, ${({ theme }) => theme.blue2});
+    background: linear-gradient(
+      90deg,
+      ${({ theme }) => theme.deprecated_blue1},
+      ${({ theme }) => theme.deprecated_blue2}
+    );
     height: 2px;
   }
 
   &::-moz-range-track {
-    background: linear-gradient(90deg, ${({ theme }) => theme.bg5}, ${({ theme }) => theme.bg3});
+    background: linear-gradient(90deg, ${({ theme }) => theme.deprecated_bg5}, ${({ theme }) => theme.deprecated_bg3});
     height: 2px;
   }
 
@@ -76,14 +80,14 @@ const StyledRangeInput = styled.input<{ size: number }>`
     border-color: transparent;
     color: transparent;
 
-    background: ${({ theme }) => theme.bg5};
+    background: ${({ theme }) => theme.deprecated_bg5};
     height: 2px;
   }
   &::-ms-fill-lower {
-    background: ${({ theme }) => theme.bg5};
+    background: ${({ theme }) => theme.deprecated_bg5};
   }
   &::-ms-fill-upper {
-    background: ${({ theme }) => theme.bg3};
+    background: ${({ theme }) => theme.deprecated_bg3};
   }
 `
 

src/components/TextInput/index.tsx

@@ -7,9 +7,9 @@ const Input = styled.input<{ error?: boolean; fontSize?: string }>`
   border: none;
   flex: 1 1 auto;
   width: 0;
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
   transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
-  color: ${({ error, theme }) => (error ? theme.red1 : theme.text1)};
+  color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
@@ -27,7 +27,7 @@ const Input = styled.input<{ error?: boolean; fontSize?: string }>`
   }
 
   ::placeholder {
-    color: ${({ theme }) => theme.text4};
+    color: ${({ theme }) => theme.deprecated_text4};
   }
 `
 
@@ -38,9 +38,9 @@ const TextAreaInput = styled.textarea<{ error?: boolean; fontSize?: string }>`
   flex: 1 1 auto;
   width: 0;
   resize: none;
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
   transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
-  color: ${({ error, theme }) => (error ? theme.red1 : theme.text1)};
+  color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
@@ -59,7 +59,7 @@ const TextAreaInput = styled.textarea<{ error?: boolean; fontSize?: string }>`
   }
 
   ::placeholder {
-    color: ${({ theme }) => theme.text4};
+    color: ${({ theme }) => theme.deprecated_text4};
   }
 `
 

src/components/Toggle/MultiToggle.tsx

@@ -5,9 +5,9 @@ export const ToggleWrapper = styled.button<{ width?: string }>`
   align-items: center;
   width: ${({ width }) => width ?? '100%'};
   padding: 1px;
-  background: ${({ theme }) => theme.bg1};
+  background: ${({ theme }) => theme.deprecated_bg1};
   border-radius: 8px;
-  border: ${({ theme }) => '1px solid ' + theme.bg2};
+  border: ${({ theme }) => '1px solid ' + theme.deprecated_bg2};
   cursor: pointer;
   outline: none;
 `
@@ -20,13 +20,13 @@ export const ToggleElement = styled.span<{ isActive?: boolean; fontSize?: string
   border-radius: 6px;
   justify-content: center;
   height: 100%;
-  background: ${({ theme, isActive }) => (isActive ? theme.bg0 : 'none')};
-  color: ${({ theme, isActive }) => (isActive ? theme.text1 : theme.text3)};
+  background: ${({ theme, isActive }) => (isActive ? theme.deprecated_bg0 : 'none')};
+  color: ${({ theme, isActive }) => (isActive ? theme.deprecated_text1 : theme.deprecated_text3)};
   font-size: ${({ fontSize }) => fontSize ?? '1rem'};
   font-weight: 500;
   white-space: nowrap;
   :hover {
     user-select: initial;
-    color: ${({ theme, isActive }) => (isActive ? theme.text2 : theme.text3)};
+    color: ${({ theme, isActive }) => (isActive ? theme.deprecated_text2 : theme.deprecated_text3)};
   }
 `

src/components/Toggle/index.tsx

@@ -4,7 +4,7 @@ import styled, { keyframes } from 'styled-components/macro'
 
 const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
   align-items: center;
-  background: ${({ theme }) => theme.bg1};
+  background: ${({ theme }) => theme.deprecated_bg1};
   border: none;
   border-radius: 20px;
   cursor: pointer;
@@ -42,8 +42,8 @@ const ToggleElementHoverStyle = (hasBgColor: boolean, theme: any, isActive?: boo
         opacity: '0.8',
       }
     : {
-        background: isActive ? darken(0.05, theme.primary1) : darken(0.05, theme.bg4),
-        color: isActive ? theme.white : theme.text3,
+        background: isActive ? darken(0.05, theme.deprecated_primary1) : darken(0.05, theme.deprecated_bg4),
+        color: isActive ? theme.deprecated_white : theme.deprecated_text3,
       }
 
 const ToggleElement = styled.span<{ isActive?: boolean; bgColor?: string; isInitialToggleLoad?: boolean }>`
@@ -51,7 +51,7 @@ const ToggleElement = styled.span<{ isActive?: boolean; bgColor?: string; isInit
     ${({ isActive, isInitialToggleLoad }) => (isInitialToggleLoad ? 'none' : isActive ? turnOnToggle : turnOffToggle)}
     ease-in;
   background: ${({ theme, bgColor, isActive }) =>
-    isActive ? bgColor ?? theme.primary1 : !!bgColor ? theme.bg4 : theme.text3};
+    isActive ? bgColor ?? theme.deprecated_primary1 : !!bgColor ? theme.deprecated_bg4 : theme.deprecated_text3};
   border-radius: 50%;
   height: 24px;
   :hover {

src/components/Tooltip/index.tsx

@@ -10,9 +10,9 @@ export const TooltipContainer = styled.div`
   font-weight: 400;
   word-break: break-word;
 
-  background: ${({ theme }) => theme.bg0};
+  background: ${({ theme }) => theme.deprecated_bg0};
   border-radius: 12px;
-  border: 1px solid ${({ theme }) => theme.bg2};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
   box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};
 `
 

src/components/TransactionConfirmationModal/AnimatedConfirmation.tsx

@@ -48,7 +48,7 @@ export default function AnimatedConfirmation() {
         <Circle
           className="path circle"
           fill="none"
-          stroke={theme.green1}
+          stroke={theme.deprecated_green1}
           strokeWidth="6"
           strokeMiterlimit="10"
           cx="65.1"
@@ -58,7 +58,7 @@ export default function AnimatedConfirmation() {
         <PolyLine
           className="path check"
           fill="none"
-          stroke={theme.green1}
+          stroke={theme.deprecated_green1}
           strokeWidth="6"
           strokeLinecap="round"
           strokeMiterlimit="10"

src/components/TransactionConfirmationModal/index.tsx

@@ -127,7 +127,7 @@ function TransactionSubmittedContent({
           </RowBetween>
         )}
         <ConfirmedIcon inline={inline}>
-          <ArrowUpCircle strokeWidth={0.5} size={inline ? '40px' : '90px'} color={theme.primary1} />
+          <ArrowUpCircle strokeWidth={0.5} size={inline ? '40px' : '90px'} color={theme.deprecated_primary1} />
         </ConfirmedIcon>
         <AutoColumn gap="12px" justify={'center'}>
           <Text fontWeight={500} fontSize={20} textAlign="center">
@@ -135,7 +135,7 @@ function TransactionSubmittedContent({
           </Text>
           {chainId && hash && (
             <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
-              <Text fontWeight={500} fontSize={14} color={theme.primary1}>
+              <Text fontWeight={500} fontSize={14} color={theme.deprecated_primary1}>
                 <Trans>View on Explorer</Trans>
               </Text>
             </ExternalLink>
@@ -149,7 +149,7 @@ function TransactionSubmittedContent({
               ) : (
                 <RowFixed>
                   <Trans>Added {currencyToAdd.symbol} </Trans>
-                  <CheckCircle size={'16px'} stroke={theme.green1} style={{ marginLeft: '6px' }} />
+                  <CheckCircle size={'16px'} stroke={theme.deprecated_green1} style={{ marginLeft: '6px' }} />
                 </RowFixed>
               )}
             </ButtonLight>
@@ -204,11 +204,11 @@ export function TransactionErrorContent({ message, onDismiss }: { message: React
           <CloseIcon onClick={onDismiss} />
         </RowBetween>
         <AutoColumn style={{ marginTop: 20, padding: '2rem 0' }} gap="24px" justify="center">
-          <AlertTriangle color={theme.red1} style={{ strokeWidth: 1.5 }} size={64} />
+          <AlertTriangle color={theme.deprecated_red1} style={{ strokeWidth: 1.5 }} size={64} />
           <Text
             fontWeight={500}
             fontSize={16}
-            color={theme.red1}
+            color={theme.deprecated_red1}
             style={{ textAlign: 'center', width: '85%', wordBreak: 'break-word' }}
           >
             {message}
@@ -268,10 +268,10 @@ function L2Content({
         <ConfirmedIcon inline={inline}>
           {confirmed ? (
             transactionSuccess ? (
-              // <CheckCircle strokeWidth={1} size={inline ? '40px' : '90px'} color={theme.green1} />
+              // <CheckCircle strokeWidth={1} size={inline ? '40px' : '90px'} color={theme.deprecated_green1} />
               <AnimatedConfirmation />
             ) : (
-              <AlertCircle strokeWidth={1} size={inline ? '40px' : '90px'} color={theme.red1} />
+              <AlertCircle strokeWidth={1} size={inline ? '40px' : '90px'} color={theme.deprecated_red1} />
             )
           ) : (
             <CustomLightSpinner src={Circle} alt="loader" size={inline ? '40px' : '90px'} />
@@ -294,20 +294,20 @@ function L2Content({
           </Text>
           {chainId && hash ? (
             <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
-              <Text fontWeight={500} fontSize={14} color={theme.primary1}>
+              <Text fontWeight={500} fontSize={14} color={theme.deprecated_primary1}>
                 <Trans>View on Explorer</Trans>
               </Text>
             </ExternalLink>
           ) : (
             <div style={{ height: '17px' }} />
           )}
-          <Text color={theme.text3} style={{ margin: '20px 0 0 0' }} fontSize={'14px'}>
+          <Text color={theme.deprecated_text3} style={{ margin: '20px 0 0 0' }} fontSize={'14px'}>
             {!secondsToConfirm ? (
               <div style={{ height: '24px' }} />
             ) : (
               <div>
                 <Trans>Transaction completed in </Trans>
-                <span style={{ fontWeight: 500, marginLeft: '4px', color: theme.text1 }}>
+                <span style={{ fontWeight: 500, marginLeft: '4px', color: theme.deprecated_text1 }}>
                   {secondsToConfirm} seconds 🎉
                 </span>
               </div>

src/components/TransactionSettings/index.tsx

@@ -23,21 +23,21 @@ enum DeadlineError {
 }
 
 const FancyButton = styled.button`
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   align-items: center;
   height: 2rem;
   border-radius: 36px;
   font-size: 1rem;
   width: auto;
   min-width: 3.5rem;
-  border: 1px solid ${({ theme }) => theme.bg3};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
   outline: none;
-  background: ${({ theme }) => theme.bg1};
+  background: ${({ theme }) => theme.deprecated_bg1};
   :hover {
-    border: 1px solid ${({ theme }) => theme.bg4};
+    border: 1px solid ${({ theme }) => theme.deprecated_bg4};
   }
   :focus {
-    border: 1px solid ${({ theme }) => theme.primary1};
+    border: 1px solid ${({ theme }) => theme.deprecated_primary1};
   }
 `
 
@@ -46,12 +46,12 @@ const Option = styled(FancyButton)<{ active: boolean }>`
   :hover {
     cursor: pointer;
   }
-  background-color: ${({ active, theme }) => active && theme.primary1};
-  color: ${({ active, theme }) => (active ? theme.white : theme.text1)};
+  background-color: ${({ active, theme }) => active && theme.deprecated_primary1};
+  color: ${({ active, theme }) => (active ? theme.deprecated_white : theme.deprecated_text1)};
 `
 
 const Input = styled.input`
-  background: ${({ theme }) => theme.bg1};
+  background: ${({ theme }) => theme.deprecated_bg1};
   font-size: 16px;
   width: auto;
   outline: none;
@@ -59,7 +59,7 @@ const Input = styled.input`
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;
   }
-  color: ${({ theme, color }) => (color === 'red' ? theme.red1 : theme.text1)};
+  color: ${({ theme, color }) => (color === 'red' ? theme.deprecated_red1 : theme.deprecated_text1)};
   text-align: right;
 `
 
@@ -69,10 +69,12 @@ const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }
   padding: 0 0.75rem;
   flex: 1;
   border: ${({ theme, active, warning }) =>
-    active ? `1px solid ${warning ? theme.red1 : theme.primary1}` : warning && `1px solid ${theme.red1}`};
+    active
+      ? `1px solid ${warning ? theme.deprecated_red1 : theme.deprecated_primary1}`
+      : warning && `1px solid ${theme.deprecated_red1}`};
   :hover {
     border: ${({ theme, active, warning }) =>
-      active && `1px solid ${warning ? darken(0.1, theme.red1) : darken(0.1, theme.primary1)}`};
+      active && `1px solid ${warning ? darken(0.1, theme.deprecated_red1) : darken(0.1, theme.deprecated_primary1)}`};
   }
 
   input {
@@ -163,7 +165,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
     <AutoColumn gap="md">
       <AutoColumn gap="sm">
         <RowFixed>
-          <ThemedText.Black fontWeight={400} fontSize={14} color={theme.text2}>
+          <ThemedText.Black fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
             <Trans>Slippage tolerance</Trans>
           </ThemedText.Black>
           <QuestionHelper
@@ -232,7 +234,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
       {showCustomDeadlineRow && (
         <AutoColumn gap="sm">
           <RowFixed>
-            <ThemedText.Black fontSize={14} fontWeight={400} color={theme.text2}>
+            <ThemedText.Black fontSize={14} fontWeight={400} color={theme.deprecated_text2}>
               <Trans>Transaction deadline</Trans>
             </ThemedText.Black>
             <QuestionHelper

src/components/WalletModal/Option.tsx

@@ -6,16 +6,16 @@ import styled from 'styled-components/macro'
 import { ExternalLink } from '../../theme'
 
 const InfoCard = styled.button<{ isActive?: boolean }>`
-  background-color: ${({ theme, isActive }) => (isActive ? theme.bg3 : theme.bg2)};
+  background-color: ${({ theme, isActive }) => (isActive ? theme.deprecated_bg3 : theme.deprecated_bg2)};
   padding: 1rem;
   outline: none;
   border: 1px solid;
   border-radius: 12px;
   width: 100% !important;
   &:focus {
-    box-shadow: 0 0 0 1px ${({ theme }) => theme.primary1};
+    box-shadow: 0 0 0 1px ${({ theme }) => theme.deprecated_primary1};
   }
-  border-color: ${({ theme, isActive }) => (isActive ? 'transparent' : theme.bg3)};
+  border-color: ${({ theme, isActive }) => (isActive ? 'transparent' : theme.deprecated_bg3)};
 `
 
 const OptionCard = styled(InfoCard as any)`
@@ -37,7 +37,7 @@ const OptionCardClickable = styled(OptionCard as any)<{ clickable?: boolean }>`
   margin-top: 0;
   &:hover {
     cursor: ${({ clickable }) => (clickable ? 'pointer' : '')};
-    border: ${({ clickable, theme }) => (clickable ? `1px solid ${theme.primary1}` : ``)};
+    border: ${({ clickable, theme }) => (clickable ? `1px solid ${theme.deprecated_primary1}` : ``)};
   }
   opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
 `
@@ -51,13 +51,13 @@ const GreenCircle = styled.div`
     height: 8px;
     width: 8px;
     margin-right: 8px;
-    background-color: ${({ theme }) => theme.green1};
+    background-color: ${({ theme }) => theme.deprecated_green1};
     border-radius: 50%;
   }
 `
 
 const CircleWrapper = styled.div`
-  color: ${({ theme }) => theme.green1};
+  color: ${({ theme }) => theme.deprecated_green1};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -65,13 +65,14 @@ const CircleWrapper = styled.div`
 
 const HeaderText = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
-  color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.primary1 : ({ theme }) => theme.text1)};
+  color: ${(props) =>
+    props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : ({ theme }) => theme.deprecated_text1};
   font-size: 1rem;
   font-weight: 500;
 `
 
 const SubHeader = styled.div`
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   margin-top: 10px;
   font-size: 12px;
 `

src/components/WalletModal/index.tsx

@@ -41,7 +41,7 @@ const CloseIcon = styled.div`
 
 const CloseColor = styled(Close)`
   path {
-    stroke: ${({ theme }) => theme.text4};
+    stroke: ${({ theme }) => theme.deprecated_text4};
   }
 `
 
@@ -56,14 +56,14 @@ const HeaderRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
   padding: 1rem 1rem;
   font-weight: 500;
-  color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.primary1 : 'inherit')};
+  color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
   ${({ theme }) => theme.mediaWidth.upToMedium`
     padding: 1rem;
   `};
 `
 
 const ContentWrapper = styled.div`
-  background-color: ${({ theme }) => theme.bg0};
+  background-color: ${({ theme }) => theme.deprecated_bg0};
   padding: 0 1rem 1rem 1rem;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
@@ -98,7 +98,7 @@ const OptionGrid = styled.div`
 
 const HoverText = styled.div`
   text-decoration: none;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   display: flex;
   align-items: center;
 

src/components/Web3Status/index.tsx

@@ -40,55 +40,57 @@ const Web3StatusGeneric = styled(ButtonSecondary)`
   }
 `
 const Web3StatusError = styled(Web3StatusGeneric)`
-  background-color: ${({ theme }) => theme.red1};
-  border: 1px solid ${({ theme }) => theme.red1};
-  color: ${({ theme }) => theme.white};
+  background-color: ${({ theme }) => theme.deprecated_red1};
+  border: 1px solid ${({ theme }) => theme.deprecated_red1};
+  color: ${({ theme }) => theme.deprecated_white};
   font-weight: 500;
   :hover,
   :focus {
-    background-color: ${({ theme }) => darken(0.1, theme.red1)};
+    background-color: ${({ theme }) => darken(0.1, theme.deprecated_red1)};
   }
 `
 
 const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
-  background-color: ${({ theme }) => theme.primary4};
+  background-color: ${({ theme }) => theme.deprecated_primary4};
   border: none;
 
-  color: ${({ theme }) => theme.primaryText1};
+  color: ${({ theme }) => theme.deprecated_primaryText1};
   font-weight: 500;
 
   :hover,
   :focus {
-    border: 1px solid ${({ theme }) => darken(0.05, theme.primary4)};
-    color: ${({ theme }) => theme.primaryText1};
+    border: 1px solid ${({ theme }) => darken(0.05, theme.deprecated_primary4)};
+    color: ${({ theme }) => theme.deprecated_primaryText1};
   }
 
   ${({ faded }) =>
     faded &&
     css`
-      background-color: ${({ theme }) => theme.primary5};
-      border: 1px solid ${({ theme }) => theme.primary5};
-      color: ${({ theme }) => theme.primaryText1};
+      background-color: ${({ theme }) => theme.deprecated_primary5};
+      border: 1px solid ${({ theme }) => theme.deprecated_primary5};
+      color: ${({ theme }) => theme.deprecated_primaryText1};
 
       :hover,
       :focus {
-        border: 1px solid ${({ theme }) => darken(0.05, theme.primary4)};
-        color: ${({ theme }) => darken(0.05, theme.primaryText1)};
+        border: 1px solid ${({ theme }) => darken(0.05, theme.deprecated_primary4)};
+        color: ${({ theme }) => darken(0.05, theme.deprecated_primaryText1)};
       }
     `}
 `
 
 const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
-  background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg1)};
-  border: 1px solid ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg1)};
-  color: ${({ pending, theme }) => (pending ? theme.white : theme.text1)};
+  background-color: ${({ pending, theme }) => (pending ? theme.deprecated_primary1 : theme.deprecated_bg1)};
+  border: 1px solid ${({ pending, theme }) => (pending ? theme.deprecated_primary1 : theme.deprecated_bg1)};
+  color: ${({ pending, theme }) => (pending ? theme.deprecated_white : theme.deprecated_text1)};
   font-weight: 500;
   :hover,
   :focus {
-    border: 1px solid ${({ theme }) => darken(0.05, theme.bg3)};
+    border: 1px solid ${({ theme }) => darken(0.05, theme.deprecated_bg3)};
 
     :focus {
-      border: 1px solid ${({ pending, theme }) => (pending ? darken(0.1, theme.primary1) : darken(0.1, theme.bg2))};
+      border: 1px solid
+        ${({ pending, theme }) =>
+          pending ? darken(0.1, theme.deprecated_primary1) : darken(0.1, theme.deprecated_bg2)};
     }
   }
 `

src/components/earn/PoolCard.tsx

@@ -38,8 +38,11 @@ const Wrapper = styled(AutoColumn)<{ showBackground: boolean; bgColor: any }>`
   position: relative;
   opacity: ${({ showBackground }) => (showBackground ? '1' : '1')};
   background: ${({ theme, bgColor, showBackground }) =>
-    `radial-gradient(91.85% 100% at 1.84% 0%, ${bgColor} 0%, ${showBackground ? theme.black : theme.bg5} 100%) `};
-  color: ${({ theme, showBackground }) => (showBackground ? theme.white : theme.text1)} !important;
+    `radial-gradient(91.85% 100% at 1.84% 0%, ${bgColor} 0%, ${
+      showBackground ? theme.deprecated_black : theme.deprecated_bg5
+    } 100%) `};
+  color: ${({ theme, showBackground }) =>
+    showBackground ? theme.deprecated_white : theme.deprecated_text1} !important;
 
   ${({ showBackground }) =>
     showBackground &&
@@ -164,13 +167,13 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo })
         <>
           <Break />
           <BottomSection showBackground={true}>
-            <ThemedText.Black color={'white'} fontWeight={500}>
+            <ThemedText.Black color={'deprecated_white'} fontWeight={500}>
               <span>
                 <Trans>Your rate</Trans>
               </span>
             </ThemedText.Black>
 
-            <ThemedText.Black style={{ textAlign: 'right' }} color={'white'} fontWeight={500}>
+            <ThemedText.Black style={{ textAlign: 'right' }} color={'deprecated_white'} fontWeight={500}>
               <span role="img" aria-label="wizard-icon" style={{ marginRight: '0.5rem' }}>
                 ⚡
               </span>

src/components/swap/AdvancedSwapDetails.tsx

@@ -77,7 +77,7 @@ export function AdvancedSwapDetails({
               }
               disableHover={hideInfoTooltips}
             >
-              <ThemedText.SubHeader color={theme.text1}>
+              <ThemedText.SubHeader color={theme.deprecated_text1}>
                 <Trans>Expected Output</Trans>
               </ThemedText.SubHeader>
             </MouseoverTooltip>
@@ -96,7 +96,7 @@ export function AdvancedSwapDetails({
               text={<Trans>The impact your trade has on the market price of this pool.</Trans>}
               disableHover={hideInfoTooltips}
             >
-              <ThemedText.SubHeader color={theme.text1}>
+              <ThemedText.SubHeader color={theme.deprecated_text1}>
                 <Trans>Price Impact</Trans>
               </ThemedText.SubHeader>
             </MouseoverTooltip>
@@ -119,7 +119,7 @@ export function AdvancedSwapDetails({
               }
               disableHover={hideInfoTooltips}
             >
-              <ThemedText.SubHeader color={theme.text3}>
+              <ThemedText.SubHeader color={theme.deprecated_text3}>
                 {trade.tradeType === TradeType.EXACT_INPUT ? (
                   <Trans>Minimum received</Trans>
                 ) : (
@@ -130,7 +130,7 @@ export function AdvancedSwapDetails({
             </MouseoverTooltip>
           </RowFixed>
           <TextWithLoadingPlaceholder syncing={syncing} width={70}>
-            <ThemedText.Black textAlign="right" fontSize={14} color={theme.text3}>
+            <ThemedText.Black textAlign="right" fontSize={14} color={theme.deprecated_text3}>
               {trade.tradeType === TradeType.EXACT_INPUT
                 ? `${trade.minimumAmountOut(allowedSlippage).toSignificant(6)} ${trade.outputAmount.currency.symbol}`
                 : `${trade.maximumAmountIn(allowedSlippage).toSignificant(6)} ${trade.inputAmount.currency.symbol}`}
@@ -147,12 +147,12 @@ export function AdvancedSwapDetails({
               }
               disableHover={hideInfoTooltips}
             >
-              <ThemedText.SubHeader color={theme.text3}>
+              <ThemedText.SubHeader color={theme.deprecated_text3}>
                 <Trans>Network Fee</Trans>
               </ThemedText.SubHeader>
             </MouseoverTooltip>
             <TextWithLoadingPlaceholder syncing={syncing} width={50}>
-              <ThemedText.Black textAlign="right" fontSize={14} color={theme.text3}>
+              <ThemedText.Black textAlign="right" fontSize={14} color={theme.deprecated_text3}>
                 ~${trade.gasUseEstimateUSD.toFixed(2)}
               </ThemedText.Black>
             </TextWithLoadingPlaceholder>

src/components/swap/GasEstimateBadge.tsx

@@ -17,8 +17,8 @@ const GasWrapper = styled(RowFixed)`
   border-radius: 8px;
   padding: 4px 6px;
   height: 24px;
-  color: ${({ theme }) => theme.text3};
-  background-color: ${({ theme }) => theme.bg1};
+  color: ${({ theme }) => theme.deprecated_text3};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
   font-size: 14px;
   font-weight: 500;
   user-select: none;
@@ -27,7 +27,7 @@ const StyledGasIcon = styled(GasIcon)`
   margin-right: 4px;
   height: 14px;
   & > * {
-    stroke: ${({ theme }) => theme.text3};
+    stroke: ${({ theme }) => theme.deprecated_text3};
   }
 `
 

src/components/swap/RouterLabel.tsx

@@ -19,7 +19,7 @@ const StyledStaticRouterIcon = styled(StaticRouterIcon)`
   height: 16px;
   width: 16px;
 
-  fill: ${({ theme }) => theme.text3};
+  fill: ${({ theme }) => theme.deprecated_text3};
 
   :hover {
     filter: brightness(1.3);
@@ -30,7 +30,7 @@ const StyledAutoRouterLabel = styled(ThemedText.Black)`
   line-height: 1rem;
 
   /* fallback color */
-  color: ${({ theme }) => theme.green1};
+  color: ${({ theme }) => theme.deprecated_green1};
 
   @supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
     background-image: linear-gradient(90deg, #2172e5 0%, #54e521 163.16%);

src/components/swap/SwapDetailsDropdown.tsx

@@ -30,24 +30,25 @@ const StyledInfoIcon = styled(Info)`
   height: 16px;
   width: 16px;
   margin-right: 4px;
-  color: ${({ theme }) => theme.text3};
+  color: ${({ theme }) => theme.deprecated_text3};
 `
 
 const StyledCard = styled(OutlineCard)`
   padding: 12px;
-  border: 1px solid ${({ theme }) => theme.bg2};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
 `
 
 const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean }>`
   padding: 4px 8px;
   border-radius: 12px;
-  background-color: ${({ open, theme }) => (open ? theme.bg1 : 'transparent')};
+  background-color: ${({ open, theme }) => (open ? theme.deprecated_bg1 : 'transparent')};
   align-items: center;
   cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
   min-height: 40px;
 
   :hover {
-    background-color: ${({ theme, disabled }) => (disabled ? theme.bg1 : darken(0.015, theme.bg1))};
+    background-color: ${({ theme, disabled }) =>
+      disabled ? theme.deprecated_bg1 : darken(0.015, theme.deprecated_bg1)};
   }
 `
 
@@ -63,7 +64,7 @@ const StyledPolling = styled.div`
   margin-right: 2px;
   margin-left: 10px;
   align-items: center;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   transition: 250ms ease color;
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
@@ -78,7 +79,7 @@ const StyledPollingDot = styled.div`
   min-width: 8px;
   border-radius: 50%;
   position: relative;
-  background-color: ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg2};
   transition: 250ms ease background-color;
 `
 
@@ -97,7 +98,7 @@ const Spinner = styled.div`
   border-top: 1px solid transparent;
   border-right: 1px solid transparent;
   border-bottom: 1px solid transparent;
-  border-left: 2px solid ${({ theme }) => theme.text1};
+  border-left: 2px solid ${({ theme }) => theme.deprecated_text1};
   background: transparent;
   width: 14px;
   height: 14px;
@@ -159,7 +160,7 @@ export default function SwapDetailsDropdown({
                   placement="bottom"
                   disableHover={showDetails}
                 >
-                  <StyledInfoIcon color={trade ? theme.text3 : theme.bg3} />
+                  <StyledInfoIcon color={trade ? theme.deprecated_text3 : theme.deprecated_bg3} />
                 </MouseoverTooltipContent>
               </HideSmall>
             )}
@@ -189,7 +190,10 @@ export default function SwapDetailsDropdown({
                 disableHover={showDetails}
               />
             )}
-            <RotatingArrow stroke={trade ? theme.text3 : theme.bg3} open={Boolean(trade && showDetails)} />
+            <RotatingArrow
+              stroke={trade ? theme.deprecated_text3 : theme.deprecated_bg3}
+              open={Boolean(trade && showDetails)}
+            />
           </RowFixed>
         </StyledHeaderRow>
         <AnimatedDropdown open={showDetails}>

src/components/swap/SwapHeader.tsx

@@ -9,7 +9,7 @@ import SettingsTab from '../Settings'
 const StyledSwapHeader = styled.div`
   padding: 1rem 1.25rem 0.5rem 1.25rem;
   width: 100%;
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
 `
 
 export default function SwapHeader({ allowedSlippage }: { allowedSlippage: Percent }) {

src/components/swap/SwapModalHeader.tsx

@@ -32,9 +32,9 @@ const ArrowWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
   border: 4px solid;
-  border-color: ${({ theme }) => theme.bg0};
+  border-color: ${({ theme }) => theme.deprecated_bg0};
   z-index: 2;
 `
 
@@ -67,7 +67,7 @@ export default function SwapModalHeader({
               <TruncatedText
                 fontSize={24}
                 fontWeight={500}
-                color={showAcceptChanges && trade.tradeType === TradeType.EXACT_OUTPUT ? theme.primary1 : ''}
+                color={showAcceptChanges && trade.tradeType === TradeType.EXACT_OUTPUT ? theme.deprecated_primary1 : ''}
               >
                 {trade.inputAmount.toSignificant(6)}
               </TruncatedText>
@@ -85,7 +85,7 @@ export default function SwapModalHeader({
         </AutoColumn>
       </LightCard>
       <ArrowWrapper>
-        <ArrowDown size="16" color={theme.text2} />
+        <ArrowDown size="16" color={theme.deprecated_text2} />
       </ArrowWrapper>
       <LightCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}>
         <AutoColumn gap={'8px'}>
@@ -103,7 +103,7 @@ export default function SwapModalHeader({
             </RowFixed>
           </RowBetween>
           <RowBetween>
-            <ThemedText.Body fontSize={14} color={theme.text3}>
+            <ThemedText.Body fontSize={14} color={theme.deprecated_text3}>
               <FiatValue
                 fiatValue={fiatValueOutput}
                 priceImpact={computeFiatValuePriceImpact(fiatValueInput, fiatValueOutput)}
@@ -123,7 +123,7 @@ export default function SwapModalHeader({
           <RowBetween>
             <RowFixed>
               <AlertTriangle size={20} style={{ marginRight: '8px', minWidth: 24 }} />
-              <ThemedText.Main color={theme.primary1}>
+              <ThemedText.Main color={theme.deprecated_primary1}>
                 <Trans>Price Updated</Trans>
               </ThemedText.Main>
             </RowFixed>

src/components/swap/SwapRoute.tsx

@@ -23,7 +23,7 @@ import { AutoRouterLabel, AutoRouterLogo } from './RouterLabel'
 const Wrapper = styled(AutoColumn)<{ darkMode?: boolean; fixedOpen?: boolean }>`
   padding: ${({ fixedOpen }) => (fixedOpen ? '12px' : '12px 8px 12px 12px')};
   border-radius: 16px;
-  border: 1px solid ${({ theme, fixedOpen }) => (fixedOpen ? 'transparent' : theme.bg2)};
+  border: 1px solid ${({ theme, fixedOpen }) => (fixedOpen ? 'transparent' : theme.deprecated_bg2)};
   cursor: pointer;
 `
 
@@ -33,7 +33,7 @@ const OpenCloseIcon = styled(Plus)<{ open?: boolean }>`
   stroke-width: 2px;
   transition: transform 0.1s;
   transform: ${({ open }) => (open ? 'rotate(45deg)' : 'none')};
-  stroke: ${({ theme }) => theme.text3};
+  stroke: ${({ theme }) => theme.deprecated_text3};
   cursor: pointer;
   :hover {
     opacity: 0.8;

src/components/swap/SwapWarningDropdown.tsx

@@ -10,7 +10,7 @@ import { ThemedText } from 'theme'
 import { ResponsiveTooltipContainer } from './styleds'
 
 const Wrapper = styled.div`
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   padding: 14px;
@@ -19,7 +19,7 @@ const Wrapper = styled.div`
 `
 
 const StyledInfoIcon = styled(Info)`
-  stroke: ${({ theme }) => theme.text3};
+  stroke: ${({ theme }) => theme.deprecated_text3};
 `
 
 /**

src/components/swap/TradePrice.tsx

@@ -60,7 +60,7 @@ export default function TradePrice({ price, showInverted, setShowInverted }: Tra
       }}
       title={text}
     >
-      <Text fontWeight={500} color={theme.text1}>
+      <Text fontWeight={500} color={theme.deprecated_text1}>
         {text}
       </Text>{' '}
       {usdcPrice && (

src/components/swap/UnsupportedCurrencyFooter.tsx

@@ -24,8 +24,8 @@ const DetailsFooter = styled.div<{ show: boolean }>`
   max-width: 400px;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
-  color: ${({ theme }) => theme.text2};
-  background-color: ${({ theme }) => theme.advancedBG};
+  color: ${({ theme }) => theme.deprecated_text2};
+  background-color: ${({ theme }) => theme.deprecated_advancedBG};
   z-index: ${Z_INDEX.deprecated_zero};
 
   transform: ${({ show }) => (show ? 'translateY(0%)' : 'translateY(-100%)')};

src/components/swap/styleds.tsx

@@ -25,8 +25,8 @@ export const ArrowWrapper = styled.div<{ clickable: boolean }>`
   margin-bottom: -14px;
   left: calc(50% - 16px);
   /* transform: rotate(90deg); */
-  background-color: ${({ theme }) => theme.bg1};
-  border: 4px solid ${({ theme }) => theme.bg0};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
+  border: 4px solid ${({ theme }) => theme.deprecated_bg0};
   z-index: 2;
   ${({ clickable }) =>
     clickable
@@ -42,18 +42,18 @@ export const ArrowWrapper = styled.div<{ clickable: boolean }>`
 export const SectionBreak = styled.div`
   height: 1px;
   width: 100%;
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.deprecated_bg3};
 `
 
 export const ErrorText = styled(Text)<{ severity?: 0 | 1 | 2 | 3 | 4 }>`
   color: ${({ theme, severity }) =>
     severity === 3 || severity === 4
-      ? theme.red1
+      ? theme.deprecated_red1
       : severity === 2
-      ? theme.yellow2
+      ? theme.deprecated_yellow2
       : severity === 1
-      ? theme.text1
-      : theme.text2};
+      ? theme.deprecated_text1
+      : theme.deprecated_text2};
 `
 
 export const TruncatedText = styled(Text)`
@@ -86,7 +86,7 @@ export const Dots = styled.span`
 `
 
 const SwapCallbackErrorInner = styled.div`
-  background-color: ${({ theme }) => transparentize(0.9, theme.red1)};
+  background-color: ${({ theme }) => transparentize(0.9, theme.deprecated_red1)};
   border-radius: 1rem;
   display: flex;
   align-items: center;
@@ -94,7 +94,7 @@ const SwapCallbackErrorInner = styled.div`
   width: 100%;
   padding: 3rem 1.25rem 1rem 1rem;
   margin-top: -2rem;
-  color: ${({ theme }) => theme.red1};
+  color: ${({ theme }) => theme.deprecated_red1};
   z-index: -1;
   p {
     padding: 0;
@@ -104,7 +104,7 @@ const SwapCallbackErrorInner = styled.div`
 `
 
 const SwapCallbackErrorInnerAlertTriangle = styled.div`
-  background-color: ${({ theme }) => transparentize(0.9, theme.red1)};
+  background-color: ${({ theme }) => transparentize(0.9, theme.deprecated_red1)};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -126,21 +126,21 @@ export function SwapCallbackError({ error }: { error: ReactNode }) {
 }
 
 export const SwapShowAcceptChanges = styled(AutoColumn)`
-  background-color: ${({ theme }) => transparentize(0.95, theme.primary3)};
-  color: ${({ theme }) => theme.primaryText1};
+  background-color: ${({ theme }) => transparentize(0.95, theme.deprecated_primary3)};
+  color: ${({ theme }) => theme.deprecated_primaryText1};
   padding: 0.5rem;
   border-radius: 12px;
   margin-top: 8px;
 `
 
 export const TransactionDetailsLabel = styled(ThemedText.Black)`
-  border-bottom: 1px solid ${({ theme }) => theme.bg2};
+  border-bottom: 1px solid ${({ theme }) => theme.deprecated_bg2};
   padding-bottom: 0.5rem;
 `
 
 export const ResponsiveTooltipContainer = styled(TooltipContainer)<{ origin?: string; width?: string }>`
-  background-color: ${({ theme }) => theme.bg0};
-  border: 1px solid ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg0};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
   padding: 1rem;
   width: ${({ width }) => width ?? 'auto'};
 

src/components/vote/ExecuteModal.tsx

@@ -127,7 +127,7 @@ export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteM
             <StyledClosed onClick={wrappedOnDismiss} />
           </RowBetween>
           <ConfirmedIcon>
-            <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
+            <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>

src/components/vote/ProposalEmptyState.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
 const EmptyProposals = styled.div`
-  border: 1px solid ${({ theme }) => theme.text4};
+  border: 1px solid ${({ theme }) => theme.deprecated_text4};
   padding: 16px 12px;
   border-radius: 12px;
   display: flex;

src/components/vote/QueueModal.tsx

@@ -127,7 +127,7 @@ export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModal
             <StyledClosed onClick={wrappedOnDismiss} />
           </RowBetween>
           <ConfirmedIcon>
-            <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
+            <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>

src/components/vote/VoteModal.tsx

@@ -141,7 +141,7 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }:
             <StyledClosed onClick={wrappedOnDismiss} />
           </RowBetween>
           <ConfirmedIcon>
-            <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
+            <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>

src/pages/AddLiquidity/index.tsx

@@ -744,7 +744,7 @@ export default function AddLiquidity() {
                                 fontSize={14}
                                 style={{ fontWeight: 500 }}
                                 textAlign="left"
-                                color={theme.primaryText1}
+                                color={theme.deprecated_primaryText1}
                               >
                                 <Trans>
                                   This pool must be initialized before you can add liquidity. To initialize, select a
@@ -761,7 +761,9 @@ export default function AddLiquidity() {
                               onUserInput={onStartPriceInput}
                             />
                           </OutlineCard>
-                          <RowBetween style={{ backgroundColor: theme.bg1, padding: '12px', borderRadius: '12px' }}>
+                          <RowBetween
+                            style={{ backgroundColor: theme.deprecated_bg1, padding: '12px', borderRadius: '12px' }}
+                          >
                             <ThemedText.Main>
                               <Trans>Current {baseCurrency?.symbol} Price:</Trans>
                             </ThemedText.Main>
@@ -830,13 +832,13 @@ export default function AddLiquidity() {
                               $borderRadius="12px"
                               height="100%"
                               style={{
-                                borderColor: theme.yellow3,
+                                borderColor: theme.deprecated_yellow3,
                                 border: '1px solid',
                               }}
                             >
                               <AutoColumn gap="8px" style={{ height: '100%' }}>
                                 <RowFixed>
-                                  <AlertTriangle stroke={theme.yellow3} size="16px" />
+                                  <AlertTriangle stroke={theme.deprecated_yellow3} size="16px" />
                                   <ThemedText.Yellow ml="12px" fontSize="15px">
                                     <Trans>Efficiency Comparison</Trans>
                                   </ThemedText.Yellow>
@@ -846,7 +848,7 @@ export default function AddLiquidity() {
                                     <Trans>
                                       Full range positions may earn less fees than concentrated positions. Learn more{' '}
                                       <ExternalLink
-                                        style={{ color: theme.yellow3, textDecoration: 'underline' }}
+                                        style={{ color: theme.deprecated_yellow3, textDecoration: 'underline' }}
                                         href={
                                           'https://help.uniswap.org/en/articles/5434296-can-i-provide-liquidity-over-the-full-range-in-v3'
                                         }
@@ -882,7 +884,7 @@ export default function AddLiquidity() {
                       {outOfRange ? (
                         <YellowCard padding="8px 12px" $borderRadius="12px">
                           <RowBetween>
-                            <AlertTriangle stroke={theme.yellow3} size="16px" />
+                            <AlertTriangle stroke={theme.deprecated_yellow3} size="16px" />
                             <ThemedText.Yellow ml="12px" fontSize="12px">
                               <Trans>
                                 Your position will not earn fees or be used in trades until the market price moves into
@@ -896,7 +898,7 @@ export default function AddLiquidity() {
                       {invalidRange ? (
                         <YellowCard padding="8px 12px" $borderRadius="12px">
                           <RowBetween>
-                            <AlertTriangle stroke={theme.yellow3} size="16px" />
+                            <AlertTriangle stroke={theme.deprecated_yellow3} size="16px" />
                             <ThemedText.Yellow ml="12px" fontSize="12px">
                               <Trans>Invalid range selected. The min price must be lower than the max price.</Trans>
                             </ThemedText.Yellow>

src/pages/AddLiquidity/styled.tsx

@@ -49,7 +49,7 @@ export const CurrencyDropdown = styled(CurrencyInputPanel)`
 `
 
 export const StyledInput = styled(Input)`
-  background-color: ${({ theme }) => theme.bg0};
+  background-color: ${({ theme }) => theme.deprecated_bg0};
   text-align: left;
   font-size: 18px;
   width: 100%;
@@ -66,7 +66,7 @@ export const ResponsiveTwoColumns = styled.div<{ wide: boolean }>`
 
   padding-top: 20px;
 
-  border-top: 1px solid ${({ theme }) => theme.bg2};
+  border-top: 1px solid ${({ theme }) => theme.deprecated_bg2};
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     grid-template-columns: 1fr;

src/pages/AddLiquidityV2/PoolPriceBar.tsx

@@ -27,7 +27,7 @@ export function PoolPriceBar({
       <AutoRow justify="space-around" gap="4px">
         <AutoColumn justify="center">
           <ThemedText.Black>{price?.toSignificant(6) ?? '-'}</ThemedText.Black>
-          <Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
+          <Text fontWeight={500} fontSize={14} color={theme.deprecated_text2} pt={1}>
             <Trans>
               {currencies[Field.CURRENCY_B]?.symbol} per {currencies[Field.CURRENCY_A]?.symbol}
             </Trans>
@@ -35,7 +35,7 @@ export function PoolPriceBar({
         </AutoColumn>
         <AutoColumn justify="center">
           <ThemedText.Black>{price?.invert()?.toSignificant(6) ?? '-'}</ThemedText.Black>
-          <Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
+          <Text fontWeight={500} fontSize={14} color={theme.deprecated_text2} pt={1}>
             <Trans>
               {currencies[Field.CURRENCY_A]?.symbol} per {currencies[Field.CURRENCY_B]?.symbol}
             </Trans>
@@ -48,7 +48,7 @@ export function PoolPriceBar({
               : (poolTokenPercentage?.lessThan(ONE_BIPS) ? '<0.01' : poolTokenPercentage?.toFixed(2)) ?? '0'}
             %
           </ThemedText.Black>
-          <Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
+          <Text fontWeight={500} fontSize={14} color={theme.deprecated_text2} pt={1}>
             <Trans>Share of Pool</Trans>
           </Text>
         </AutoColumn>

src/pages/AddLiquidityV2/index.tsx

@@ -346,13 +346,13 @@ export default function AddLiquidity() {
                 <ColumnCenter>
                   <BlueCard>
                     <AutoColumn gap="10px">
-                      <ThemedText.Link fontWeight={600} color={'primaryText1'}>
+                      <ThemedText.Link fontWeight={600} color={'deprecated_primaryText1'}>
                         <Trans>You are the first liquidity provider.</Trans>
                       </ThemedText.Link>
-                      <ThemedText.Link fontWeight={400} color={'primaryText1'}>
+                      <ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
                         <Trans>The ratio of tokens you add will set the price of this pool.</Trans>
                       </ThemedText.Link>
-                      <ThemedText.Link fontWeight={400} color={'primaryText1'}>
+                      <ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
                         <Trans>Once you are happy with the rate click supply to review.</Trans>
                       </ThemedText.Link>
                     </AutoColumn>
@@ -362,7 +362,7 @@ export default function AddLiquidity() {
                 <ColumnCenter>
                   <BlueCard>
                     <AutoColumn gap="10px">
-                      <ThemedText.Link fontWeight={400} color={'primaryText1'}>
+                      <ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
                         <Trans>
                           <b>
                             <Trans>Tip:</Trans>
@@ -389,7 +389,7 @@ export default function AddLiquidity() {
               showCommonBases
             />
             <ColumnCenter>
-              <Plus size="16" color={theme.text2} />
+              <Plus size="16" color={theme.deprecated_text2} />
             </ColumnCenter>
             <CurrencyInputPanel
               value={formattedAmounts[Field.CURRENCY_B]}

src/pages/AppBody.tsx

@@ -7,7 +7,7 @@ export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
   margin-top: ${({ margin }) => margin ?? '0px'};
   max-width: ${({ maxWidth }) => maxWidth ?? '480px'};
   width: 100%;
-  background: ${({ theme }) => theme.bg0};
+  background: ${({ theme }) => theme.deprecated_bg0};
   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: 24px;

src/pages/CreateProposal/ProposalActionSelector.tsx

@@ -28,13 +28,13 @@ const ContentWrapper = styled(Column)`
 const ActionSelectorHeader = styled.div`
   font-size: 14px;
   font-weight: 500;
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
 `
 
 const ActionDropdown = styled(ButtonDropdown)`
   padding: 0px;
   background-color: transparent;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   font-size: 1.25rem;
 
   :hover,
@@ -51,8 +51,8 @@ const ProposalActionSelectorFlex = styled.div`
   display: flex;
   flex-flow: column nowrap;
   border-radius: 20px;
-  border: 1px solid ${({ theme }) => theme.bg2};
-  background-color: ${({ theme }) => theme.bg1};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
 `
 
 const ProposalActionSelectorContainer = styled.div`

src/pages/CreateProposal/ProposalEditor.tsx

@@ -8,7 +8,7 @@ import styled from 'styled-components/macro'
 const ProposalEditorHeader = styled(Text)`
   font-size: 14px;
   font-weight: 500;
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
 `
 
 const ProposalTitle = memo(styled(TextInput)`
@@ -20,8 +20,8 @@ const ProposalEditorContainer = styled.div`
   margin-top: 10px;
   padding: 0.75rem 1rem 0.75rem 1rem;
   border-radius: 20px;
-  border: 1px solid ${({ theme }) => theme.bg2};
-  background-color: ${({ theme }) => theme.bg1};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
 `
 
 export const ProposalEditor = ({

src/pages/CreateProposal/ProposalSubmissionModal.tsx

@@ -39,7 +39,7 @@ export const ProposalSubmissionModal = ({
             </Text>
             {hash && (
               <ExternalLink href={getExplorerLink(1, hash, ExplorerDataType.TRANSACTION)}>
-                <Text fontWeight={500} fontSize={14} color={theme.primary1}>
+                <Text fontWeight={500} fontSize={14} color={theme.deprecated_primary1}>
                   <Trans>View on Etherscan</Trans>
                 </Text>
               </ExternalLink>

src/pages/CreateProposal/index.tsx

@@ -233,7 +233,7 @@ ${bodyValue}
         <CreateProposalWrapper>
           <BlueCard>
             <AutoColumn gap="10px">
-              <ThemedText.Link fontWeight={400} color={'primaryText1'}>
+              <ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
                 <Trans>
                   <strong>Tip:</strong> Select an action and describe your proposal for the community. The proposal
                   cannot be modified after submission, so please verify all information before submitting. The voting

src/pages/Earn/Manage.tsx

@@ -51,11 +51,13 @@ const StyledDataCard = styled(DataCard)<{ bgColor?: any; showBackground?: any }>
   z-index: 2;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
   background: ${({ theme, bgColor, showBackground }) =>
-    `radial-gradient(91.85% 100% at 1.84% 0%, ${bgColor} 0%,  ${showBackground ? theme.black : theme.bg5} 100%) `};
+    `radial-gradient(91.85% 100% at 1.84% 0%, ${bgColor} 0%,  ${
+      showBackground ? theme.deprecated_black : theme.deprecated_bg5
+    } 100%) `};
 `
 
 const StyledBottomCard = styled(DataCard)<{ dim: any }>`
-  background: ${({ theme }) => theme.bg3};
+  background: ${({ theme }) => theme.deprecated_bg3};
   opacity: ${({ dim }) => (dim ? 0.4 : 1)};
   margin-top: -40px;
   padding: 0 1.25rem 1rem 1.25rem;
@@ -65,7 +67,7 @@ const StyledBottomCard = styled(DataCard)<{ dim: any }>`
 
 const PoolData = styled(DataCard)`
   background: none;
-  border: 1px solid ${({ theme }) => theme.bg4};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg4};
   padding: 1rem;
   z-index: 1;
 `

src/pages/Earn/index.tsx

 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
+import useTheme from 'hooks/useTheme'
 import JSBI from 'jsbi'
 import styled from 'styled-components/macro'
 
@@ -40,6 +41,7 @@ flex-direction: column;
 `
 
 export default function Earn() {
+  const theme = useTheme()
   const { chainId } = useWeb3React()
 
   // staking info for connected account
@@ -75,7 +77,7 @@ export default function Earn() {
                 </ThemedText.White>
               </RowBetween>{' '}
               <ExternalLink
-                style={{ color: 'white', textDecoration: 'underline' }}
+                style={{ color: theme.deprecated_white, textDecoration: 'underline' }}
                 href="https://uniswap.org/blog/uni/"
                 target="_blank"
               >

src/pages/MigrateV2/MigrateV2Pair.tsx

@@ -436,7 +436,7 @@ function V2PairMigration({
           <FeeSelector feeAmount={feeAmount} handleFeePoolSelect={setFeeAmount} />
           {noLiquidity && (
             <BlueCard style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-              <AlertCircle color={theme.text1} style={{ marginBottom: '12px', opacity: 0.8 }} />
+              <AlertCircle color={theme.deprecated_text1} style={{ marginBottom: '12px', opacity: 0.8 }} />
               <ThemedText.Body
                 fontSize={14}
                 style={{ marginBottom: 8, fontWeight: 500, opacity: 0.8 }}
@@ -564,7 +564,7 @@ function V2PairMigration({
           {outOfRange ? (
             <YellowCard padding="8px 12px" $borderRadius="12px">
               <RowBetween>
-                <AlertTriangle stroke={theme.yellow3} size="16px" />
+                <AlertTriangle stroke={theme.deprecated_yellow3} size="16px" />
                 <ThemedText.Yellow ml="12px" fontSize="12px">
                   <Trans>
                     Your position will not earn fees or be used in trades until the market price moves into your range.
@@ -577,7 +577,7 @@ function V2PairMigration({
           {invalidRange ? (
             <YellowCard padding="8px 12px" $borderRadius="12px">
               <RowBetween>
-                <AlertTriangle stroke={theme.yellow3} size="16px" />
+                <AlertTriangle stroke={theme.deprecated_yellow3} size="16px" />
                 <ThemedText.Yellow ml="12px" fontSize="12px">
                   <Trans>Invalid range selected. The min price must be lower than the max price.</Trans>
                 </ThemedText.Yellow>

src/pages/MigrateV2/index.tsx

@@ -134,13 +134,13 @@ export default function MigrateV2() {
 
           {!account ? (
             <LightCard padding="40px">
-              <ThemedText.Body color={theme.text3} textAlign="center">
+              <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
                 <Trans>Connect to a wallet to view your V2 liquidity.</Trans>
               </ThemedText.Body>
             </LightCard>
           ) : v2IsLoading ? (
             <LightCard padding="40px">
-              <ThemedText.Body color={theme.text3} textAlign="center">
+              <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
                 <Dots>
                   <Trans>Loading</Trans>
                 </Dots>

src/pages/Pool/CTACards.tsx

@@ -28,15 +28,15 @@ const CTA1 = styled(ExternalLink)`
   justify-content: center;
   align-items: center;
   overflow: hidden;
-  border: 1px solid ${({ theme }) => theme.bg3};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
 
   * {
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.deprecated_text1};
     text-decoration: none !important;
   }
 
   :hover {
-    border: 1px solid ${({ theme }) => theme.bg4};
+    border: 1px solid ${({ theme }) => theme.deprecated_bg4};
 
     text-decoration: none;
     * {
@@ -53,15 +53,15 @@ const CTA2 = styled(ExternalLink)`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  border: 1px solid ${({ theme }) => theme.bg3};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
 
   * {
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.deprecated_text1};
     text-decoration: none !important;
   }
 
   :hover {
-    border: 1px solid ${({ theme }) => theme.bg4};
+    border: 1px solid ${({ theme }) => theme.deprecated_bg4};
     text-decoration: none !important;
     * {
       text-decoration: none !important;

src/pages/Pool/PositionPage.tsx

@@ -90,7 +90,7 @@ const Label = styled(({ end, ...props }) => <ThemedText.Label {...props} />)<{ e
 `
 
 const ExtentsText = styled.span`
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
   font-size: 14px;
   text-align: center;
   margin-right: 4px;
@@ -99,15 +99,15 @@ const ExtentsText = styled.span`
 
 const HoverText = styled(ThemedText.Main)`
   text-decoration: none;
-  color: ${({ theme }) => theme.text3};
+  color: ${({ theme }) => theme.deprecated_text3};
   :hover {
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.deprecated_text1};
     text-decoration: none;
   }
 `
 
 const DoubleArrow = styled.span`
-  color: ${({ theme }) => theme.text3};
+  color: ${({ theme }) => theme.deprecated_text3};
   margin: 0 1rem;
 `
 const ResponsiveRow = styled(RowBetween)`
@@ -683,7 +683,7 @@ export function PositionPage() {
                           <Trans>${fiatValueOfLiquidity.toFixed(2, { groupSeparator: ',' })}</Trans>
                         </ThemedText.LargeHeader>
                       ) : (
-                        <ThemedText.LargeHeader color={theme.text1} fontSize="36px" fontWeight={500}>
+                        <ThemedText.LargeHeader color={theme.deprecated_text1} fontSize="36px" fontWeight={500}>
                           <Trans>$-</Trans>
                         </ThemedText.LargeHeader>
                       )}
@@ -713,7 +713,7 @@ export function PositionPage() {
                             </ThemedText.Main>
                             {typeof ratio === 'number' && !removed ? (
                               <Badge style={{ marginLeft: '10px' }}>
-                                <ThemedText.Main color={theme.text2} fontSize={11}>
+                                <ThemedText.Main color={theme.deprecated_text2} fontSize={11}>
                                   <Trans>{inverted ? 100 - ratio : ratio}%</Trans>
                                 </ThemedText.Main>
                               </Badge>
@@ -733,11 +733,11 @@ export function PositionPage() {
                             <Trans>Unclaimed fees</Trans>
                           </Label>
                           {fiatValueOfFees?.greaterThan(new Fraction(1, 100)) ? (
-                            <ThemedText.LargeHeader color={theme.green1} fontSize="36px" fontWeight={500}>
+                            <ThemedText.LargeHeader color={theme.deprecated_green1} fontSize="36px" fontWeight={500}>
                               <Trans>${fiatValueOfFees.toFixed(2, { groupSeparator: ',' })}</Trans>
                             </ThemedText.LargeHeader>
                           ) : (
-                            <ThemedText.LargeHeader color={theme.text1} fontSize="36px" fontWeight={500}>
+                            <ThemedText.LargeHeader color={theme.deprecated_text1} fontSize="36px" fontWeight={500}>
                               <Trans>$-</Trans>
                             </ThemedText.LargeHeader>
                           )}
@@ -753,11 +753,11 @@ export function PositionPage() {
                             onClick={() => setShowConfirm(true)}
                           >
                             {!!collectMigrationHash && !isCollectPending ? (
-                              <ThemedText.Main color={theme.text1}>
+                              <ThemedText.Main color={theme.deprecated_text1}>
                                 <Trans> Collected</Trans>
                               </ThemedText.Main>
                             ) : isCollectPending || collecting ? (
-                              <ThemedText.Main color={theme.text1}>
+                              <ThemedText.Main color={theme.deprecated_text1}>
                                 {' '}
                                 <Dots>
                                   <Trans>Collecting</Trans>
@@ -765,7 +765,7 @@ export function PositionPage() {
                               </ThemedText.Main>
                             ) : (
                               <>
-                                <ThemedText.Main color={theme.white}>
+                                <ThemedText.Main color={theme.deprecated_white}>
                                   <Trans>Collect fees</Trans>
                                 </ThemedText.Main>
                               </>
@@ -868,7 +868,7 @@ export function PositionPage() {
                       </ExtentsText>
 
                       {inRange && (
-                        <ThemedText.Small color={theme.text3}>
+                        <ThemedText.Small color={theme.deprecated_text3}>
                           <Trans>Your position will be 100% {currencyBase?.symbol} at this price.</Trans>
                         </ThemedText.Small>
                       )}
@@ -892,7 +892,7 @@ export function PositionPage() {
                       </ExtentsText>
 
                       {inRange && (
-                        <ThemedText.Small color={theme.text3}>
+                        <ThemedText.Small color={theme.deprecated_text3}>
                           <Trans>Your position will be 100% {currencyQuote?.symbol} at this price.</Trans>
                         </ThemedText.Small>
                       )}

src/pages/Pool/index.tsx

@@ -39,7 +39,7 @@ const PageWrapper = styled(AutoColumn)`
   `};
 `
 const TitleRow = styled(RowBetween)`
-  color: ${({ theme }) => theme.text2};
+  color: ${({ theme }) => theme.deprecated_text2};
   ${({ theme }) => theme.mediaWidth.upToSmall`
     flex-wrap: wrap;
     gap: 12px;
@@ -82,7 +82,7 @@ const MoreOptionsButton = styled(ButtonGray)`
   flex: 1 1 auto;
   padding: 6px 8px;
   width: 100%;
-  background-color: ${({ theme }) => theme.bg0};
+  background-color: ${({ theme }) => theme.deprecated_bg0};
   margin-right: 8px;
 `
 
@@ -126,7 +126,7 @@ const ResponsiveButtonPrimary = styled(ButtonPrimary)`
 `
 
 const MainContentWrapper = styled.main`
-  background-color: ${({ theme }) => theme.bg0};
+  background-color: ${({ theme }) => theme.deprecated_bg0};
   padding: 8px;
   border-radius: 20px;
   display: flex;
@@ -168,7 +168,7 @@ function WrongNetworkCard() {
 
             <MainContentWrapper>
               <ErrorContainer>
-                <ThemedText.Body color={theme.text3} textAlign="center">
+                <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
                   <NetworkIcon strokeWidth={1.2} />
                   <div data-testid="pools-unsupported-err">
                     <Trans>
@@ -298,7 +298,7 @@ export default function Pool() {
                   />
                 ) : (
                   <ErrorContainer>
-                    <ThemedText.Body color={theme.text3} textAlign="center">
+                    <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
                       <InboxIcon strokeWidth={1} />
                       <div>
                         <Trans>Your active V3 liquidity positions will appear here.</Trans>

src/pages/Pool/styleds.tsx

@@ -11,12 +11,12 @@ export const ClickableText = styled(Text)`
   :hover {
     cursor: pointer;
   }
-  color: ${({ theme }) => theme.primary1};
+  color: ${({ theme }) => theme.deprecated_primary1};
 `
 export const MaxButton = styled.button<{ width: string }>`
   padding: 0.5rem 1rem;
-  background-color: ${({ theme }) => theme.primary5};
-  border: 1px solid ${({ theme }) => theme.primary5};
+  background-color: ${({ theme }) => theme.deprecated_primary5};
+  border: 1px solid ${({ theme }) => theme.deprecated_primary5};
   border-radius: 0.5rem;
   font-size: 1rem;
   ${({ theme }) => theme.mediaWidth.upToSmall`
@@ -26,12 +26,12 @@ export const MaxButton = styled.button<{ width: string }>`
   cursor: pointer;
   margin: 0.25rem;
   overflow: hidden;
-  color: ${({ theme }) => theme.primary1};
+  color: ${({ theme }) => theme.deprecated_primary1};
   :hover {
-    border: 1px solid ${({ theme }) => theme.primary1};
+    border: 1px solid ${({ theme }) => theme.deprecated_primary1};
   }
   :focus {
-    border: 1px solid ${({ theme }) => theme.primary1};
+    border: 1px solid ${({ theme }) => theme.deprecated_primary1};
     outline: none;
   }
 `

src/pages/Pool/v2.tsx

@@ -71,7 +71,7 @@ const ResponsiveButtonSecondary = styled(ButtonSecondary)`
 `
 
 const EmptyProposals = styled.div`
-  border: 1px solid ${({ theme }) => theme.text4};
+  border: 1px solid ${({ theme }) => theme.deprecated_text4};
   padding: 16px 12px;
   border-radius: 12px;
   display: flex;
@@ -160,7 +160,7 @@ export default function Pool() {
                   </ThemedText.White>
                 </RowBetween>
                 <ExternalLink
-                  style={{ color: 'white', textDecoration: 'underline' }}
+                  style={{ color: theme.deprecated_white, textDecoration: 'underline' }}
                   target="_blank"
                   href="https://uniswap.org/docs/v2/core-concepts/pools/"
                 >
@@ -178,7 +178,7 @@ export default function Pool() {
             <AutoColumn gap="lg" justify="center">
               <AutoColumn gap="md" style={{ width: '100%' }}>
                 <Layer2Prompt>
-                  <ThemedText.Body color={theme.text3} textAlign="center">
+                  <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
                     <Trans>V2 Pool is not available on Layer 2. Switch to Layer 1 Ethereum.</Trans>
                   </ThemedText.Body>
                 </Layer2Prompt>
@@ -212,13 +212,13 @@ export default function Pool() {
 
                 {!account ? (
                   <Card padding="40px">
-                    <ThemedText.Body color={theme.text3} textAlign="center">
+                    <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
                       <Trans>Connect to a wallet to view your liquidity.</Trans>
                     </ThemedText.Body>
                   </Card>
                 ) : v2IsLoading ? (
                   <EmptyProposals>
-                    <ThemedText.Body color={theme.text3} textAlign="center">
+                    <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
                       <Dots>
                         <Trans>Loading</Trans>
                       </Dots>
@@ -269,7 +269,7 @@ export default function Pool() {
                   </>
                 ) : (
                   <EmptyProposals>
-                    <ThemedText.Body color={theme.text3} textAlign="center">
+                    <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
                       <Trans>No liquidity found.</Trans>
                     </ThemedText.Body>
                   </EmptyProposals>

src/pages/PoolFinder/index.tsx

@@ -104,7 +104,7 @@ export default function PoolFinder() {
           <AutoColumn style={{ padding: '1rem' }} gap="md">
             <BlueCard>
               <AutoColumn gap="10px">
-                <ThemedText.Link fontWeight={400} color={'primaryText1'}>
+                <ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
                   <Trans>
                     <b>Tip:</b> Use this tool to find v2 pools that don&apos;t automatically appear in the interface.
                   </Trans>

src/pages/RemoveLiquidity/V3.tsx

@@ -227,7 +227,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
         </RowBetween>
         {feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) ? (
           <>
-            <ThemedText.Italic fontSize={12} color={theme.text2} textAlign="left" padding={'8px 0 0 0'}>
+            <ThemedText.Italic fontSize={12} color={theme.deprecated_text2} textAlign="left" padding={'8px 0 0 0'}>
               <Trans>You will also collect fees earned from this position.</Trans>
             </ThemedText.Italic>
             <RowBetween>

src/pages/RemoveLiquidity/index.tsx

@@ -303,7 +303,7 @@ export default function RemoveLiquidity() {
           </RowFixed>
         </RowBetween>
         <RowFixed>
-          <Plus size="16" color={theme.text2} />
+          <Plus size="16" color={theme.deprecated_text2} />
         </RowFixed>
         <RowBetween align="flex-end">
           <Text fontSize={24} fontWeight={500}>
@@ -317,7 +317,7 @@ export default function RemoveLiquidity() {
           </RowFixed>
         </RowBetween>
 
-        <ThemedText.Italic fontSize={12} color={theme.text2} textAlign="left" padding={'12px 0 0 0'}>
+        <ThemedText.Italic fontSize={12} color={theme.deprecated_text2} textAlign="left" padding={'12px 0 0 0'}>
           <Trans>
             Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your transaction
             will revert.
@@ -331,7 +331,7 @@ export default function RemoveLiquidity() {
     return (
       <>
         <RowBetween>
-          <Text color={theme.text2} fontWeight={500} fontSize={16}>
+          <Text color={theme.deprecated_text2} fontWeight={500} fontSize={16}>
             <Trans>
               UNI {currencyA?.symbol}/{currencyB?.symbol} Burned
             </Trans>
@@ -346,16 +346,16 @@ export default function RemoveLiquidity() {
         {pair && (
           <>
             <RowBetween>
-              <Text color={theme.text2} fontWeight={500} fontSize={16}>
+              <Text color={theme.deprecated_text2} fontWeight={500} fontSize={16}>
                 <Trans>Price</Trans>
               </Text>
-              <Text fontWeight={500} fontSize={16} color={theme.text1}>
+              <Text fontWeight={500} fontSize={16} color={theme.deprecated_text1}>
                 1 {currencyA?.symbol} = {tokenA ? pair.priceOf(tokenA).toSignificant(6) : '-'} {currencyB?.symbol}
               </Text>
             </RowBetween>
             <RowBetween>
               <div />
-              <Text fontWeight={500} fontSize={16} color={theme.text1}>
+              <Text fontWeight={500} fontSize={16} color={theme.deprecated_text1}>
                 1 {currencyB?.symbol} = {tokenB ? pair.priceOf(tokenB).toSignificant(6) : '-'} {currencyA?.symbol}
               </Text>
             </RowBetween>
@@ -451,7 +451,7 @@ export default function RemoveLiquidity() {
           <AutoColumn gap="md">
             <BlueCard>
               <AutoColumn gap="10px">
-                <ThemedText.Link fontWeight={400} color={'primaryText1'}>
+                <ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
                   <Trans>
                     <b>Tip:</b> Removing pool tokens converts your position back into underlying tokens at the current
                     rate, proportional to your share of the pool. Accrued fees are included in the amounts you receive.
@@ -503,7 +503,7 @@ export default function RemoveLiquidity() {
             {!showDetailed && (
               <>
                 <ColumnCenter>
-                  <ArrowDown size="16" color={theme.text2} />
+                  <ArrowDown size="16" color={theme.deprecated_text2} />
                 </ColumnCenter>
                 <LightCard>
                   <AutoColumn gap="10px">
@@ -577,7 +577,7 @@ export default function RemoveLiquidity() {
                   id="liquidity-amount"
                 />
                 <ColumnCenter>
-                  <ArrowDown size="16" color={theme.text2} />
+                  <ArrowDown size="16" color={theme.deprecated_text2} />
                 </ColumnCenter>
                 <CurrencyInputPanel
                   hideBalance={true}
@@ -591,7 +591,7 @@ export default function RemoveLiquidity() {
                   id="remove-liquidity-tokena"
                 />
                 <ColumnCenter>
-                  <Plus size="16" color={theme.text2} />
+                  <Plus size="16" color={theme.deprecated_text2} />
                 </ColumnCenter>
                 <CurrencyInputPanel
                   hideBalance={true}

src/pages/Swap/index.tsx

@@ -468,7 +468,11 @@ export default function Swap() {
                       setApprovalSubmitted(false) // reset 2 step UI for approvals
                       onSwitchTokens()
                     }}
-                    color={currencies[Field.INPUT] && currencies[Field.OUTPUT] ? theme.text1 : theme.text3}
+                    color={
+                      currencies[Field.INPUT] && currencies[Field.OUTPUT]
+                        ? theme.deprecated_text1
+                        : theme.deprecated_text3
+                    }
                   />
                 </ArrowWrapper>
                 <Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>
@@ -496,7 +500,7 @@ export default function Swap() {
                 <>
                   <AutoRow justify="space-between" style={{ padding: '0 1rem' }}>
                     <ArrowWrapper clickable={false}>
-                      <ArrowDown size="16" color={theme.text2} />
+                      <ArrowDown size="16" color={theme.deprecated_text2} />
                     </ArrowWrapper>
                     <LinkStyledButton id="remove-recipient-button" onClick={() => onChangeRecipient(null)}>
                       <Trans>- Remove recipient</Trans>
@@ -584,7 +588,7 @@ export default function Swap() {
                             <Loader stroke="white" />
                           ) : (approvalSubmitted && approvalState === ApprovalState.APPROVED) ||
                             signatureState === UseERC20PermitState.SIGNED ? (
-                            <CheckCircle size="20" color={theme.green1} />
+                            <CheckCircle size="20" color={theme.deprecated_green1} />
                           ) : (
                             <MouseoverTooltip
                               text={
@@ -594,7 +598,7 @@ export default function Swap() {
                                 </Trans>
                               }
                             >
-                              <HelpCircle size="20" color={'white'} style={{ marginLeft: '8px' }} />
+                              <HelpCircle size="20" color={'deprecated_white'} style={{ marginLeft: '8px' }} />
                             </MouseoverTooltip>
                           )}
                         </AutoRow>

src/pages/Vote/Landing.tsx

@@ -13,6 +13,7 @@ import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
 import Toggle from 'components/Toggle'
 import DelegateModal from 'components/vote/DelegateModal'
 import ProposalEmptyState from 'components/vote/ProposalEmptyState'
+import useTheme from 'hooks/useTheme'
 import JSBI from 'jsbi'
 import { darken } from 'polished'
 import { useState } from 'react'
@@ -50,14 +51,14 @@ const Proposal = styled(Button)`
   text-align: left;
   outline: none;
   cursor: pointer;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
   text-decoration: none;
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
   &:focus {
-    background-color: ${({ theme }) => darken(0.05, theme.bg1)};
+    background-color: ${({ theme }) => darken(0.05, theme.deprecated_bg1)};
   }
   &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.bg1)};
+    background-color: ${({ theme }) => darken(0.05, theme.deprecated_bg1)};
   }
 `
 
@@ -88,7 +89,7 @@ const WrapSmall = styled(RowBetween)`
 `
 
 const TextButton = styled(ThemedText.Main)`
-  color: ${({ theme }) => theme.primary1};
+  color: ${({ theme }) => theme.deprecated_primary1};
   :hover {
     cursor: pointer;
     text-decoration: underline;
@@ -96,7 +97,7 @@ const TextButton = styled(ThemedText.Main)`
 `
 
 const AddressButton = styled.div`
-  border: 1px solid ${({ theme }) => theme.bg3};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
   padding: 2px 4px;
   border-radius: 8px;
   display: flex;
@@ -105,10 +106,11 @@ const AddressButton = styled.div`
 `
 
 const StyledExternalLink = styled(ExternalLink)`
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
 `
 
 export default function Landing() {
+  const theme = useTheme()
   const { account, chainId } = useWeb3React()
 
   const [hideCancelled, setHideCancelled] = useState(true)
@@ -161,7 +163,10 @@ export default function Landing() {
                     </ThemedText.White>
                   </RowBetween>
                   <ExternalLink
-                    style={{ color: 'white', textDecoration: 'underline' }}
+                    style={{
+                      color: theme.deprecated_white,
+                      textDecoration: 'underline',
+                    }}
                     href="https://uniswap.org/blog/uni"
                     target="_blank"
                   >

src/pages/Vote/VotePage.tsx

@@ -60,7 +60,7 @@ const PageWrapper = styled(AutoColumn)`
 `
 
 const ProposalInfo = styled(AutoColumn)`
-  background: ${({ theme }) => theme.bg0};
+  background: ${({ theme }) => theme.deprecated_bg0};
   border-radius: 12px;
   padding: 1.5rem;
   position: relative;
@@ -73,10 +73,10 @@ const ArrowWrapper = styled(StyledInternalLink)`
   align-items: center;
   gap: 8px;
   height: 24px;
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
 
   a {
-    color: ${({ theme }) => theme.text1};
+    color: ${({ theme }) => theme.deprecated_text1};
     text-decoration: none;
   }
   :hover {
@@ -93,7 +93,7 @@ const CardWrapper = styled.div`
 const StyledDataCard = styled(DataCard)`
   width: 100%;
   background: none;
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
   height: fit-content;
   z-index: 2;
 `
@@ -103,14 +103,14 @@ const ProgressWrapper = styled.div`
   margin-top: 1rem;
   height: 4px;
   border-radius: 4px;
-  background-color: ${({ theme }) => theme.bg3};
+  background-color: ${({ theme }) => theme.deprecated_bg3};
   position: relative;
 `
 
 const Progress = styled.div<{ status: 'for' | 'against'; percentageString?: string }>`
   height: 4px;
   border-radius: 4px;
-  background-color: ${({ theme, status }) => (status === 'for' ? theme.green1 : theme.red1)};
+  background-color: ${({ theme, status }) => (status === 'for' ? theme.deprecated_green1 : theme.deprecated_red1)};
   width: ${({ percentageString }) => percentageString ?? '0%'};
 `
 

src/pages/Vote/styled.tsx

@@ -7,17 +7,17 @@ const handleColorType = (status: ProposalState, theme: DefaultTheme) => {
   switch (status) {
     case ProposalState.PENDING:
     case ProposalState.ACTIVE:
-      return theme.blue1
+      return theme.deprecated_blue1
     case ProposalState.SUCCEEDED:
     case ProposalState.EXECUTED:
-      return theme.green1
+      return theme.deprecated_green1
     case ProposalState.DEFEATED:
-      return theme.red1
+      return theme.deprecated_red1
     case ProposalState.QUEUED:
     case ProposalState.CANCELED:
     case ProposalState.EXPIRED:
     default:
-      return theme.text3
+      return theme.deprecated_text3
   }
 }
 

src/theme/components.tsx

@@ -38,7 +38,7 @@ export const IconWrapper = styled.div<{ stroke?: string; size?: string; marginRi
   margin-right: ${({ marginRight }) => marginRight ?? 0};
   margin-left: ${({ marginLeft }) => marginLeft ?? 0};
   & > * {
-    stroke: ${({ theme, stroke }) => stroke ?? theme.blue1};
+    stroke: ${({ theme, stroke }) => stroke ?? theme.deprecated_blue1};
   }
 `
 
@@ -49,7 +49,7 @@ export const LinkStyledButton = styled.button<{ disabled?: boolean }>`
   background: none;
 
   cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
-  color: ${({ theme, disabled }) => (disabled ? theme.text2 : theme.primary1)};
+  color: ${({ theme, disabled }) => (disabled ? theme.deprecated_text2 : theme.deprecated_primary1)};
   font-weight: 500;
 
   :hover {
@@ -70,7 +70,7 @@ export const LinkStyledButton = styled.button<{ disabled?: boolean }>`
 export const StyledInternalLink = styled(Link)`
   text-decoration: none;
   cursor: pointer;
-  color: ${({ theme }) => theme.primary1};
+  color: ${({ theme }) => theme.deprecated_primary1};
   font-weight: 500;
 
   :hover {
@@ -90,7 +90,7 @@ export const StyledInternalLink = styled(Link)`
 const StyledLink = styled.a`
   text-decoration: none;
   cursor: pointer;
-  color: ${({ theme }) => theme.primary1};
+  color: ${({ theme }) => theme.deprecated_primary1};
   font-weight: 500;
 
   :hover {
@@ -133,14 +133,14 @@ const LinkIcon = styled(LinkIconFeather)`
   height: 16px;
   width: 18px;
   margin-left: 10px;
-  stroke: ${({ theme }) => theme.blue1};
+  stroke: ${({ theme }) => theme.deprecated_blue1};
 `
 
 export const TrashIcon = styled(Trash)`
   height: 16px;
   width: 18px;
   margin-left: 10px;
-  stroke: ${({ theme }) => theme.text3};
+  stroke: ${({ theme }) => theme.deprecated_text3};
 
   cursor: pointer;
   align-items: center;
@@ -228,7 +228,7 @@ const Spinner = styled.img`
 `
 
 const BackArrowLink = styled(StyledInternalLink)`
-  color: ${({ theme }) => theme.text1};
+  color: ${({ theme }) => theme.deprecated_text1};
 `
 export function BackArrow({ to }: { to: string }) {
   return (
@@ -265,5 +265,5 @@ export const SmallOnly = styled.span`
 export const Separator = styled.div`
   width: 100%;
   height: 1px;
-  background-color: ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.deprecated_bg2};
 `

src/theme/index.tsx

@@ -48,67 +48,67 @@ const mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css }
   {}
 ) as any
 
-const white = '#FFFFFF'
-const black = '#000000'
+const deprecated_white = '#FFFFFF'
+const deprecated_black = '#000000'
 
 function colors(darkMode: boolean): Colors {
   return {
     darkMode,
     // base
-    white,
-    black,
+    deprecated_white,
+    deprecated_black,
 
     // text
-    text1: darkMode ? '#FFFFFF' : '#000000',
-    text2: darkMode ? '#C3C5CB' : '#565A69',
-    text3: darkMode ? '#8F96AC' : '#6E727D',
-    text4: darkMode ? '#B2B9D2' : '#C3C5CB',
-    text5: darkMode ? '#2C2F36' : '#EDEEF2',
+    deprecated_text1: darkMode ? '#FFFFFF' : '#000000',
+    deprecated_text2: darkMode ? '#C3C5CB' : '#565A69',
+    deprecated_text3: darkMode ? '#8F96AC' : '#6E727D',
+    deprecated_text4: darkMode ? '#B2B9D2' : '#C3C5CB',
+    deprecated_text5: darkMode ? '#2C2F36' : '#EDEEF2',
 
     // backgrounds / greys
-    bg0: darkMode ? '#191B1F' : '#FFF',
-    bg1: darkMode ? '#212429' : '#F7F8FA',
-    bg2: darkMode ? '#2C2F36' : '#EDEEF2',
-    bg3: darkMode ? '#40444F' : '#CED0D9',
-    bg4: darkMode ? '#565A69' : '#888D9B',
-    bg5: darkMode ? '#6C7284' : '#888D9B',
-    bg6: darkMode ? '#1A2028' : '#6C7284',
+    deprecated_bg0: darkMode ? '#191B1F' : '#FFF',
+    deprecated_bg1: darkMode ? '#212429' : '#F7F8FA',
+    deprecated_bg2: darkMode ? '#2C2F36' : '#EDEEF2',
+    deprecated_bg3: darkMode ? '#40444F' : '#CED0D9',
+    deprecated_bg4: darkMode ? '#565A69' : '#888D9B',
+    deprecated_bg5: darkMode ? '#6C7284' : '#888D9B',
+    deprecated_bg6: darkMode ? '#1A2028' : '#6C7284',
 
     //specialty colors
-    modalBG: darkMode ? 'rgba(0,0,0,.425)' : 'rgba(0,0,0,0.3)',
-    advancedBG: darkMode ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.6)',
+    deprecated_modalBG: darkMode ? 'rgba(0,0,0,.425)' : 'rgba(0,0,0,0.3)',
+    deprecated_advancedBG: darkMode ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.6)',
 
     //primary colors
-    primary1: darkMode ? '#2172E5' : '#E8006F',
-    primary2: darkMode ? '#3680E7' : '#FF8CC3',
-    primary3: darkMode ? '#4D8FEA' : '#FF99C9',
-    primary4: darkMode ? '#376bad70' : '#F6DDE8',
-    primary5: darkMode ? '#153d6f70' : '#FDEAF1',
+    deprecated_primary1: darkMode ? '#2172E5' : '#E8006F',
+    deprecated_primary2: darkMode ? '#3680E7' : '#FF8CC3',
+    deprecated_primary3: darkMode ? '#4D8FEA' : '#FF99C9',
+    deprecated_primary4: darkMode ? '#376bad70' : '#F6DDE8',
+    deprecated_primary5: darkMode ? '#153d6f70' : '#FDEAF1',
 
     // color text
-    primaryText1: darkMode ? '#5090ea' : '#D50066',
+    deprecated_primaryText1: darkMode ? '#5090ea' : '#D50066',
 
     // secondary colors
-    secondary1: darkMode ? '#2172E5' : '#E8006F',
-    secondary2: darkMode ? '#17000b26' : '#F6DDE8',
-    secondary3: darkMode ? '#17000b26' : '#FDEAF1',
+    deprecated_secondary1: darkMode ? '#2172E5' : '#E8006F',
+    deprecated_secondary2: darkMode ? '#17000b26' : '#F6DDE8',
+    deprecated_secondary3: darkMode ? '#17000b26' : '#FDEAF1',
 
     // other
-    red1: darkMode ? '#FF4343' : '#DA2D2B',
-    red2: darkMode ? '#F82D3A' : '#DF1F38',
-    red3: '#D60000',
-    green1: darkMode ? '#27AE60' : '#007D35',
-    yellow1: '#E3A507',
-    yellow2: '#FF8F00',
-    yellow3: '#F3B71E',
-    blue1: darkMode ? '#2172E5' : '#0068FC',
-    blue2: darkMode ? '#5199FF' : '#0068FC',
-    error: darkMode ? '#FD4040' : '#DF1F38',
-    success: darkMode ? '#27AE60' : '#007D35',
-    warning: '#FF8F00',
+    deprecated_red1: darkMode ? '#FF4343' : '#DA2D2B',
+    deprecated_red2: darkMode ? '#F82D3A' : '#DF1F38',
+    deprecated_red3: '#D60000',
+    deprecated_green1: darkMode ? '#27AE60' : '#007D35',
+    deprecated_yellow1: '#E3A507',
+    deprecated_yellow2: '#FF8F00',
+    deprecated_yellow3: '#F3B71E',
+    deprecated_blue1: darkMode ? '#2172E5' : '#0068FC',
+    deprecated_blue2: darkMode ? '#5199FF' : '#0068FC',
+    deprecated_error: darkMode ? '#FD4040' : '#DF1F38',
+    deprecated_success: darkMode ? '#27AE60' : '#007D35',
+    deprecated_warning: '#FF8F00',
 
     // dont wanna forget these blue yet
-    blue4: darkMode ? '#153d6f70' : '#C4D9F8',
+    deprecated_blue4: darkMode ? '#153d6f70' : '#C4D9F8',
     // blue5: darkMode ? '#153d6f70' : '#EBF4FF',
   }
 }
@@ -158,22 +158,22 @@ const TextWrapper = styled(Text)<{ color: keyof Colors }>`
  */
 export const ThemedText = {
   Main(props: TextProps) {
-    return <TextWrapper fontWeight={500} color={'text2'} {...props} />
+    return <TextWrapper fontWeight={500} color={'deprecated_text2'} {...props} />
   },
   Link(props: TextProps) {
-    return <TextWrapper fontWeight={500} color={'primary1'} {...props} />
+    return <TextWrapper fontWeight={500} color={'deprecated_primary1'} {...props} />
   },
   Label(props: TextProps) {
-    return <TextWrapper fontWeight={600} color={'text1'} {...props} />
+    return <TextWrapper fontWeight={600} color={'deprecated_text1'} {...props} />
   },
   Black(props: TextProps) {
-    return <TextWrapper fontWeight={500} color={'text1'} {...props} />
+    return <TextWrapper fontWeight={500} color={'deprecated_text1'} {...props} />
   },
   White(props: TextProps) {
-    return <TextWrapper fontWeight={500} color={'white'} {...props} />
+    return <TextWrapper fontWeight={500} color={'deprecated_white'} {...props} />
   },
   Body(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={16} color={'text1'} {...props} />
+    return <TextWrapper fontWeight={400} fontSize={16} color={'deprecated_text1'} {...props} />
   },
   LargeHeader(props: TextProps) {
     return <TextWrapper fontWeight={600} fontSize={24} {...props} />
@@ -188,32 +188,32 @@ export const ThemedText = {
     return <TextWrapper fontWeight={500} fontSize={11} {...props} />
   },
   Blue(props: TextProps) {
-    return <TextWrapper fontWeight={500} color={'blue1'} {...props} />
+    return <TextWrapper fontWeight={500} color={'deprecated_blue1'} {...props} />
   },
   Yellow(props: TextProps) {
-    return <TextWrapper fontWeight={500} color={'yellow3'} {...props} />
+    return <TextWrapper fontWeight={500} color={'deprecated_yellow3'} {...props} />
   },
   DarkGray(props: TextProps) {
-    return <TextWrapper fontWeight={500} color={'text3'} {...props} />
+    return <TextWrapper fontWeight={500} color={'deprecated_text3'} {...props} />
   },
   Gray(props: TextProps) {
-    return <TextWrapper fontWeight={500} color={'bg3'} {...props} />
+    return <TextWrapper fontWeight={500} color={'deprecated_bg3'} {...props} />
   },
   Italic(props: TextProps) {
-    return <TextWrapper fontWeight={500} fontSize={12} fontStyle={'italic'} color={'text2'} {...props} />
+    return <TextWrapper fontWeight={500} fontSize={12} fontStyle={'italic'} color={'deprecated_text2'} {...props} />
   },
   Error({ error, ...props }: { error: boolean } & TextProps) {
-    return <TextWrapper fontWeight={500} color={error ? 'red1' : 'text2'} {...props} />
+    return <TextWrapper fontWeight={500} color={error ? 'deprecated_red1' : 'deprecated_text2'} {...props} />
   },
 }
 
 export const ThemedGlobalStyle = createGlobalStyle`
 html {
-  color: ${({ theme }) => theme.text1};
-  background-color: ${({ theme }) => theme.bg1} !important;
+  color: ${({ theme }) => theme.deprecated_text1};
+  background-color: ${({ theme }) => theme.deprecated_bg1} !important;
 }
 
 a {
- color: ${({ theme }) => theme.blue1}; 
+ color: ${({ theme }) => theme.deprecated_blue1}; 
 }
 `

src/theme/styled.d.ts

@@ -5,58 +5,58 @@ export interface Colors {
   darkMode: boolean
 
   // base
-  white: Color
-  black: Color
+  deprecated_white: Color
+  deprecated_black: Color
 
   // text
-  text1: Color
-  text2: Color
-  text3: Color
-  text4: Color
-  text5: Color
+  deprecated_text1: Color
+  deprecated_text2: Color
+  deprecated_text3: Color
+  deprecated_text4: Color
+  deprecated_text5: Color
 
   // backgrounds / greys
-  bg0: Color
-  bg1: Color
-  bg2: Color
-  bg3: Color
-  bg4: Color
-  bg5: Color
-  bg6: Color
+  deprecated_bg0: Color
+  deprecated_bg1: Color
+  deprecated_bg2: Color
+  deprecated_bg3: Color
+  deprecated_bg4: Color
+  deprecated_bg5: Color
+  deprecated_bg6: Color
 
-  modalBG: Color
-  advancedBG: Color
+  deprecated_modalBG: Color
+  deprecated_advancedBG: Color
 
   //blues
-  primary1: Color
-  primary2: Color
-  primary3: Color
-  primary4: Color
-  primary5: Color
+  deprecated_primary1: Color
+  deprecated_primary2: Color
+  deprecated_primary3: Color
+  deprecated_primary4: Color
+  deprecated_primary5: Color
 
-  primaryText1: Color
+  deprecated_primaryText1: Color
 
   // pinks
-  secondary1: Color
-  secondary2: Color
-  secondary3: Color
+  deprecated_secondary1: Color
+  deprecated_secondary2: Color
+  deprecated_secondary3: Color
 
   // other
-  red1: Color
-  red2: Color
-  red3: Color
-  green1: Color
-  yellow1: Color
-  yellow2: Color
-  yellow3: Color
-  blue1: Color
-  blue2: Color
+  deprecated_red1: Color
+  deprecated_red2: Color
+  deprecated_red3: Color
+  deprecated_green1: Color
+  deprecated_yellow1: Color
+  deprecated_yellow2: Color
+  deprecated_yellow3: Color
+  deprecated_blue1: Color
+  deprecated_blue2: Color
 
-  blue4: Color
+  deprecated_blue4: Color
 
-  error: Color
-  success: Color
-  warning: Color
+  deprecated_error: Color
+  deprecated_success: Color
+  deprecated_warning: Color
 }
 
 declare module 'styled-components/macro' {