chore: replace deprecated colors with correct theme values [part 1] (#5563)

* chore: replace colors

* add missing line

* chore: fix lint after replacing colors
Co-authored-by: Vignesh Mohankumar <vignesh@vigneshmohankumar.com>

src/components/AccountDetails/Transaction.tsx

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

src/components/AccountDetails/index.tsx

@@ -24,7 +24,7 @@ const HeaderRow = styled.div`
   ${flexRowNoWrap};
   padding: 1rem 1rem;
   font-weight: 500;
-  color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
+  color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.accentAction : 'inherit')};
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     padding: 1rem;
   `};
@@ -65,7 +65,7 @@ const AccountGroupingRow = styled.div`
   justify-content: space-between;
   align-items: center;
   font-weight: 400;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
 
   div {
     ${flexColumnNoWrap};
@@ -95,14 +95,14 @@ const LowerSection = styled.div`
   padding: 1.5rem;
   flex-grow: 1;
   overflow: auto;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.backgroundInteractive};
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
 
   h5 {
     margin: 0;
     font-weight: 400;
-    color: ${({ theme }) => theme.deprecated_text3};
+    color: ${({ theme }) => theme.textTertiary};
   }
 `
 
@@ -129,14 +129,14 @@ const AccountControl = styled.div`
 `
 
 const AddressLink = styled(ExternalLink)`
-  color: ${({ theme }) => theme.deprecated_text3};
+  color: ${({ theme }) => theme.textTertiary};
   margin-left: 1rem;
   font-size: 0.825rem;
   display: flex;
   gap: 6px;
   text-decoration: none !important;
   :hover {
-    color: ${({ theme }) => theme.deprecated_text2};
+    color: ${({ theme }) => theme.textSecondary};
   }
 `
 
@@ -160,7 +160,7 @@ const WalletName = styled.div`
   width: initial;
   font-size: 0.825rem;
   font-weight: 500;
-  color: ${({ theme }) => theme.deprecated_text3};
+  color: ${({ theme }) => theme.textTertiary};
 `
 
 const TransactionListWrapper = styled.div`
@@ -316,7 +316,7 @@ export default function AccountDetails({
         </LowerSection>
       ) : (
         <LowerSection>
-          <ThemedText.DeprecatedBody color={theme.deprecated_text1}>
+          <ThemedText.DeprecatedBody color={theme.textPrimary}>
             <Trans>Your transactions will appear here...</Trans>
           </ThemedText.DeprecatedBody>
         </LowerSection>

src/components/AddressInputPanel/index.tsx

@@ -26,7 +26,7 @@ const ContainerRow = styled.div<{ error: boolean }>`
   justify-content: center;
   align-items: center;
   border-radius: 1.25rem;
-  border: 1px solid ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_bg2)};
+  border: 1px solid ${({ error, theme }) => (error ? theme.accentFailure : theme.backgroundInteractive)};
   transition: border-color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')},
     color 500ms ${({ error }) => (error ? 'step-end' : 'step-start')};
   background-color: ${({ theme }) => theme.deprecated_bg1};
@@ -45,7 +45,7 @@ const Input = styled.input<{ error?: boolean }>`
   width: 0;
   background-color: ${({ theme }) => theme.deprecated_bg1};
   transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
-  color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
+  color: ${({ error, theme }) => (error ? theme.accentFailure : theme.textPrimary)};
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
@@ -109,7 +109,7 @@ export default function AddressInputPanel({
         <InputContainer>
           <AutoColumn gap="md">
             <RowBetween>
-              <ThemedText.DeprecatedBlack color={theme.deprecated_text2} fontWeight={500} fontSize={14}>
+              <ThemedText.DeprecatedBlack color={theme.textSecondary} fontWeight={500} fontSize={14}>
                 {label ?? <Trans>Recipient</Trans>}
               </ThemedText.DeprecatedBlack>
               {address && chainId && (

src/components/Badge/RangeBadge.tsx

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

src/components/Badge/index.tsx

@@ -19,24 +19,24 @@ interface BadgeProps {
 function pickBackgroundColor(variant: BadgeVariant | undefined, theme: DefaultTheme): string {
   switch (variant) {
     case BadgeVariant.NEGATIVE:
-      return theme.deprecated_error
+      return theme.accentFailure
     case BadgeVariant.POSITIVE:
-      return theme.deprecated_success
+      return theme.accentSuccess
     case BadgeVariant.PRIMARY:
-      return theme.deprecated_primary1
+      return theme.accentAction
     case BadgeVariant.WARNING:
-      return theme.deprecated_warning
+      return theme.accentWarning
     case BadgeVariant.WARNING_OUTLINE:
       return 'transparent'
     default:
-      return theme.deprecated_bg2
+      return theme.backgroundInteractive
   }
 }
 
 function pickBorder(variant: BadgeVariant | undefined, theme: DefaultTheme): string {
   switch (variant) {
     case BadgeVariant.WARNING_OUTLINE:
-      return `1px solid ${theme.deprecated_warning}`
+      return `1px solid ${theme.accentWarning}`
     default:
       return 'unset'
   }
@@ -45,15 +45,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.deprecated_error)
+      return readableColor(theme.accentFailure)
     case BadgeVariant.POSITIVE:
-      return readableColor(theme.deprecated_success)
+      return readableColor(theme.accentSuccess)
     case BadgeVariant.WARNING:
-      return readableColor(theme.deprecated_warning)
+      return readableColor(theme.accentWarning)
     case BadgeVariant.WARNING_OUTLINE:
-      return theme.deprecated_warning
+      return theme.accentWarning
     default:
-      return readableColor(theme.deprecated_bg2)
+      return readableColor(theme.backgroundInteractive)
   }
 }
 

src/components/Button/index.tsx

@@ -22,7 +22,7 @@ export const BaseButton = styled(RebassButton)<
   border-radius: ${({ $borderRadius }) => $borderRadius ?? '20px'};
   outline: none;
   border: 1px solid transparent;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   text-decoration: none;
   display: flex;
   justify-content: center;
@@ -57,21 +57,21 @@ export const ButtonPrimary = styled(BaseButton)`
   padding: 16px;
   color: ${({ theme }) => theme.accentTextLightPrimary};
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
-    background-color: ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.accentAction)};
+    background-color: ${({ theme }) => darken(0.05, theme.accentAction)};
   }
   &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
+    background-color: ${({ theme }) => darken(0.05, theme.accentAction)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.deprecated_primary1)};
-    background-color: ${({ theme }) => darken(0.1, theme.deprecated_primary1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.accentAction)};
+    background-color: ${({ theme }) => darken(0.1, theme.accentAction)};
   }
   &:disabled {
     background-color: ${({ theme, altDisabledStyle, disabled }) =>
-      altDisabledStyle ? (disabled ? theme.deprecated_primary1 : theme.deprecated_bg2) : theme.deprecated_bg2};
+      altDisabledStyle ? (disabled ? theme.accentAction : theme.backgroundInteractive) : theme.backgroundInteractive};
     color: ${({ altDisabledStyle, disabled, theme }) =>
-      altDisabledStyle ? (disabled ? theme.deprecated_white : theme.deprecated_text2) : theme.deprecated_text2};
+      altDisabledStyle ? (disabled ? theme.white : theme.textSecondary) : theme.textSecondary};
     cursor: auto;
     box-shadow: none;
     border: 1px solid transparent;
@@ -110,21 +110,21 @@ export const ButtonLight = styled(BaseButton)`
 
 export const ButtonGray = styled(BaseButton)`
   background-color: ${({ theme }) => theme.deprecated_bg1};
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 16px;
   font-weight: 500;
 
   &:hover {
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_bg2)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.backgroundInteractive)};
   }
   &:active {
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.1, theme.deprecated_bg2)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.1, theme.backgroundInteractive)};
   }
 `
 
 export const ButtonSecondary = styled(BaseButton)`
   border: 1px solid ${({ theme }) => theme.deprecated_primary4};
-  color: ${({ theme }) => theme.deprecated_primary1};
+  color: ${({ theme }) => theme.accentAction};
   background-color: transparent;
   font-size: 16px;
   border-radius: 12px;
@@ -191,7 +191,7 @@ export const ButtonYellow = styled(BaseButton)`
 
 export const ButtonEmpty = styled(BaseButton)`
   background-color: transparent;
-  color: ${({ theme }) => theme.deprecated_primary1};
+  color: ${({ theme }) => theme.accentAction};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -233,38 +233,38 @@ export const ButtonText = styled(BaseButton)`
 
 const ButtonConfirmedStyle = styled(BaseButton)`
   background-color: ${({ theme }) => theme.deprecated_bg3};
-  color: ${({ theme }) => theme.deprecated_text1};
-  /* border: 1px solid ${({ theme }) => theme.deprecated_green1}; */
+  color: ${({ theme }) => theme.textPrimary};
+  /* border: 1px solid ${({ theme }) => theme.accentSuccess}; */
 
   &:disabled {
     opacity: 50%;
-    background-color: ${({ theme }) => theme.deprecated_bg2};
-    color: ${({ theme }) => theme.deprecated_text2};
+    background-color: ${({ theme }) => theme.backgroundInteractive};
+    color: ${({ theme }) => theme.textSecondary};
     cursor: auto;
   }
 `
 
 const ButtonErrorStyle = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.deprecated_red1};
-  border: 1px solid ${({ theme }) => theme.deprecated_red1};
+  background-color: ${({ theme }) => theme.accentFailure};
+  border: 1px solid ${({ theme }) => theme.accentFailure};
 
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_red1)};
-    background-color: ${({ theme }) => darken(0.05, theme.deprecated_red1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.accentFailure)};
+    background-color: ${({ theme }) => darken(0.05, theme.accentFailure)};
   }
   &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.deprecated_red1)};
+    background-color: ${({ theme }) => darken(0.05, theme.accentFailure)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.deprecated_red1)};
-    background-color: ${({ theme }) => darken(0.1, theme.deprecated_red1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.accentFailure)};
+    background-color: ${({ theme }) => darken(0.1, theme.accentFailure)};
   }
   &:disabled {
     opacity: 50%;
     cursor: auto;
     box-shadow: none;
-    background-color: ${({ theme }) => theme.deprecated_red1};
-    border: 1px solid ${({ theme }) => theme.deprecated_red1};
+    background-color: ${({ theme }) => theme.accentFailure};
+    border: 1px solid ${({ theme }) => theme.accentFailure};
   }
 `
 
@@ -312,14 +312,14 @@ export function ButtonDropdownLight({ disabled = false, children, ...rest }: { d
 
 const ActiveOutlined = styled(ButtonOutlined)`
   border: 1px solid;
-  border-color: ${({ theme }) => theme.deprecated_primary1};
+  border-color: ${({ theme }) => theme.accentAction};
 `
 
 const Circle = styled.div`
   height: 17px;
   width: 17px;
   border-radius: 50%;
-  background-color: ${({ theme }) => theme.deprecated_primary1};
+  background-color: ${({ theme }) => theme.accentAction};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -353,7 +353,7 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
           {children}
           <CheckboxWrapper>
             <Circle>
-              <ResponsiveCheck size={13} stroke={theme.deprecated_white} />
+              <ResponsiveCheck size={13} stroke={theme.white} />
             </Circle>
           </CheckboxWrapper>
         </RowBetween>

src/components/Card/index.tsx

@@ -10,7 +10,7 @@ const Card = styled(Box)<{ width?: string; padding?: string; border?: string; $b
 export default Card
 
 export const LightCard = styled(Card)`
-  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+  border: 1px solid ${({ theme }) => theme.backgroundInteractive};
   background-color: ${({ theme }) => theme.deprecated_bg1};
 `
 
@@ -19,11 +19,11 @@ export const GrayCard = styled(Card)`
 `
 
 export const DarkGrayCard = styled(Card)`
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.backgroundInteractive};
 `
 
 export const DarkCard = styled(Card)`
-  background-color: ${({ theme }) => theme.deprecated_bg0};
+  background-color: ${({ theme }) => theme.backgroundSurface};
 `
 
 export const OutlineCard = styled(Card)`
@@ -38,6 +38,6 @@ export const YellowCard = styled(Card)`
 
 export const BlueCard = styled(Card)`
   background-color: ${({ theme }) => theme.deprecated_primary5};
-  color: ${({ theme }) => theme.deprecated_blue2};
+  color: ${({ theme }) => theme.accentAction};
   border-radius: 12px;
 `

src/components/ConnectedAccountBlocked/index.tsx

@@ -49,7 +49,7 @@ export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedPr
           fontSize={14}
           iconSize={16}
           gap={6}
-          color={theme.deprecated_primary1}
+          color={theme.accentAction}
           iconPosition="right"
         >
           compliance@uniswap.org

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -30,12 +30,12 @@ export function FiatValue({
   const [showLoadingPlaceholder, setShowLoadingPlaceholder] = useState(false)
   const priceImpactColor = useMemo(() => {
     if (!priceImpact) return undefined
-    if (priceImpact.lessThan('0')) return theme.deprecated_green1
+    if (priceImpact.lessThan('0')) return theme.accentSuccess
     const severity = warningSeverity(priceImpact)
-    if (severity < 1) return theme.deprecated_text3
+    if (severity < 1) return theme.textTertiary
     if (severity < 3) return theme.deprecated_yellow1
-    return theme.deprecated_red1
-  }, [priceImpact, theme.deprecated_green1, theme.deprecated_red1, theme.deprecated_text3, theme.deprecated_yellow1])
+    return theme.accentFailure
+  }, [priceImpact, theme.accentSuccess, theme.accentFailure, theme.textTertiary, theme.deprecated_yellow1])
 
   useEffect(() => {
     const stale = false

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -62,7 +62,7 @@ const CurrencySelect = styled(ButtonGray)<{
   background-color: ${({ selected, theme }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
-  color: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
+  color: ${({ selected, theme }) => (selected ? theme.textPrimary : theme.white)};
   cursor: pointer;
   height: unset;
   border-radius: 16px;
@@ -121,7 +121,7 @@ const LabelRow = styled.div`
 
   span:hover {
     cursor: pointer;
-    color: ${({ theme }) => darken(0.2, theme.deprecated_text2)};
+    color: ${({ theme }) => darken(0.2, theme.textSecondary)};
   }
 `
 
@@ -144,7 +144,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
   margin-left: 8px;
 
   path {
-    stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
+    stroke: ${({ selected, theme }) => (selected ? theme.textPrimary : theme.white)};
     stroke-width: 2px;
   }
 `

src/components/CurrencyInputPanel/index.tsx

@@ -29,7 +29,7 @@ const InputPanel = styled.div<{ hideInput?: boolean }>`
   ${flexColumnNoWrap};
   position: relative;
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.deprecated_bg2)};
+  background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.backgroundInteractive)};
   z-index: 1;
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   transition: height 1s ease;
@@ -41,7 +41,7 @@ const FixedContainer = styled.div`
   height: 100%;
   position: absolute;
   border-radius: 20px;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.backgroundInteractive};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -50,7 +50,7 @@ const FixedContainer = styled.div`
 
 const Container = styled.div<{ hideInput: boolean; disabled: boolean }>`
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  border: 1px solid ${({ theme }) => theme.deprecated_bg0};
+  border: 1px solid ${({ theme }) => theme.backgroundSurface};
   background-color: ${({ theme }) => theme.deprecated_bg1};
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   ${({ theme, hideInput, disabled }) =>
@@ -70,11 +70,11 @@ const CurrencySelect = styled(ButtonGray)<{
   disabled?: boolean
 }>`
   align-items: center;
-  background-color: ${({ selected, theme }) => (selected ? theme.deprecated_bg2 : theme.deprecated_primary1)};
+  background-color: ${({ selected, theme }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   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.deprecated_text1 : theme.deprecated_white)};
+  color: ${({ selected, theme }) => (selected ? theme.textPrimary : theme.white)};
   cursor: pointer;
   border-radius: 16px;
   outline: none;
@@ -89,8 +89,7 @@ const CurrencySelect = styled(ButtonGray)<{
   margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
   :focus,
   :hover {
-    background-color: ${({ selected, theme }) =>
-      selected ? theme.deprecated_bg3 : darken(0.05, theme.deprecated_primary1)};
+    background-color: ${({ selected, theme }) => (selected ? theme.deprecated_bg3 : darken(0.05, theme.accentAction))};
   }
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
 `
@@ -105,13 +104,13 @@ const InputRow = styled.div<{ selected: boolean }>`
 const LabelRow = styled.div`
   ${flexRowNoWrap};
   align-items: center;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   font-size: 0.75rem;
   line-height: 1rem;
   padding: 0 1rem 1rem;
   span:hover {
     cursor: pointer;
-    color: ${({ theme }) => darken(0.2, theme.deprecated_text2)};
+    color: ${({ theme }) => darken(0.2, theme.textSecondary)};
   }
 `
 
@@ -133,7 +132,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
   height: 35%;
 
   path {
-    stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
+    stroke: ${({ selected, theme }) => (selected ? theme.textPrimary : theme.white)};
     stroke-width: 1.5px;
   }
 `
@@ -148,7 +147,7 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   background-color: ${({ theme }) => theme.deprecated_primary5};
   border: none;
   border-radius: 12px;
-  color: ${({ theme }) => theme.deprecated_primary1};
+  color: ${({ theme }) => theme.accentAction};
   cursor: pointer;
   font-size: 11px;
   font-weight: 500;
@@ -300,7 +299,7 @@ export default function CurrencyInputPanel({
                 <RowFixed style={{ height: '17px' }}>
                   <ThemedText.DeprecatedBody
                     onClick={onMax}
-                    color={theme.deprecated_text3}
+                    color={theme.textTertiary}
                     fontWeight={500}
                     fontSize={14}
                     style={{ display: 'inline', cursor: 'pointer' }}

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.deprecated_bg2};
-  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.deprecated_primary1)} 0.6s linear;
+  border: 1px solid ${({ theme }) => theme.backgroundInteractive};
+  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.accentAction)} 0.6s linear;
   align-self: center;
 `
 

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.deprecated_blue1};
+  border-color: ${({ active, theme }) => active && theme.accentAction};
   padding: 12px;
-  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.deprecated_blue1)} 0.8s linear;
+  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.accentAction)} 0.8s linear;
 `
 
 const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
@@ -58,13 +58,13 @@ const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
 `
 
 const InputTitle = styled(ThemedText.DeprecatedSmall)`
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 12px;
   font-weight: 500;
 `
 
 const ButtonLabel = styled(ThemedText.DeprecatedWhite)<{ disabled: boolean }>`
-  color: ${({ theme, disabled }) => (disabled ? theme.deprecated_text2 : theme.deprecated_text1)} !important;
+  color: ${({ theme, disabled }) => (disabled ? theme.textSecondary : theme.textPrimary)} !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.deprecated_blue2};
-  fill: ${({ fill, theme }) => fill ?? theme.deprecated_blue2};
+  stroke: ${({ fill, theme }) => fill ?? theme.accentAction};
+  fill: ${({ fill, theme }) => fill ?? theme.accentAction};
 `
 
 export const Area = ({

src/components/LiquidityChartRangeInput/AxisBottom.tsx

@@ -8,7 +8,7 @@ const StyledGroup = styled.g`
   }
 
   text {
-    color: ${({ theme }) => theme.deprecated_text2};
+    color: ${({ theme }) => theme.textSecondary};
     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.deprecated_white};
+  stroke: ${({ theme }) => theme.white};
   opacity: ${({ theme }) => theme.opacity.hover};
 `
 
@@ -28,13 +28,13 @@ const LabelGroup = styled.g<{ visible: boolean }>`
 `
 
 const TooltipBackground = styled.rect`
-  fill: ${({ theme }) => theme.deprecated_bg2};
+  fill: ${({ theme }) => theme.backgroundInteractive};
 `
 
 const Tooltip = styled.text`
   text-anchor: middle;
   font-size: 13px;
-  fill: ${({ theme }) => theme.deprecated_text1};
+  fill: ${({ theme }) => theme.textPrimary};
 `
 
 // 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.deprecated_text1};
+  stroke: ${({ theme }) => theme.textPrimary};
   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.deprecated_bg2};
-    color: ${({ theme }) => theme.deprecated_text1};
+    background-color: ${({ theme }) => theme.backgroundInteractive};
+    color: ${({ theme }) => theme.textPrimary};
   }
 
   width: 32px;

src/components/LiquidityChartRangeInput/index.tsx

@@ -167,7 +167,7 @@ export default function LiquidityChartRangeInput({
       {isUninitialized ? (
         <InfoBox
           message={<Trans>Your position will appear here.</Trans>}
-          icon={<Inbox size={56} stroke={theme.deprecated_text1} />}
+          icon={<Inbox size={56} stroke={theme.textPrimary} />}
         />
       ) : isLoading ? (
         <InfoBox icon={<Loader size="40px" stroke={theme.deprecated_text4} />} />
@@ -189,12 +189,12 @@ export default function LiquidityChartRangeInput({
             margins={{ top: 10, right: 2, bottom: 20, left: 0 }}
             styles={{
               area: {
-                selection: theme.deprecated_blue1,
+                selection: theme.accentAction,
               },
               brush: {
                 handle: {
-                  west: saturate(0.1, tokenAColor) ?? theme.deprecated_red1,
-                  east: saturate(0.1, tokenBColor) ?? theme.deprecated_blue1,
+                  west: saturate(0.1, tokenAColor) ?? theme.accentFailure,
+                  east: saturate(0.1, tokenBColor) ?? theme.accentAction,
                 },
               },
             }}

src/components/Loader/styled.tsx

@@ -18,7 +18,7 @@ export const LoadingRows = styled.div`
     background: linear-gradient(
       to left,
       ${({ theme }) => theme.deprecated_bg1} 25%,
-      ${({ theme }) => theme.deprecated_bg2} 50%,
+      ${({ theme }) => theme.backgroundInteractive} 50%,
       ${({ theme }) => theme.deprecated_bg1} 75%
     );
     background-size: 400%;

src/components/Menu/index.tsx

@@ -15,7 +15,7 @@ export enum FlyoutAlignment {
 
 const StyledMenuIcon = styled(MenuIcon)`
   path {
-    stroke: ${({ theme }) => theme.deprecated_text1};
+    stroke: ${({ theme }) => theme.textPrimary};
   }
 `
 
@@ -35,7 +35,7 @@ const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>`
   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.deprecated_bg0};
+  border: 1px solid ${({ theme }) => theme.backgroundSurface};
   border-radius: 12px;
   padding: 0.5rem;
   display: flex;
@@ -67,9 +67,9 @@ const MenuItem = styled(ExternalLink)`
   align-items: center;
   padding: 0.5rem 0.5rem;
   justify-content: space-between;
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   :hover {
-    color: ${({ theme }) => theme.deprecated_text1};
+    color: ${({ theme }) => theme.textPrimary};
     cursor: pointer;
     text-decoration: none;
   }
@@ -78,11 +78,11 @@ const MenuItem = styled(ExternalLink)`
 const InternalMenuItem = styled(Link)`
   flex: 1;
   padding: 0.5rem 0.5rem;
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   width: max-content;
   text-decoration: none;
   :hover {
-    color: ${({ theme }) => theme.deprecated_text1};
+    color: ${({ theme }) => theme.textPrimary};
     cursor: pointer;
     text-decoration: none;
   }

src/components/Modal/index.tsx

@@ -39,7 +39,7 @@ const StyledDialogContent = styled(AnimatedDialogContent)<StyledDialogProps>`
 
   &[data-reach-dialog-content] {
     margin: auto;
-    background-color: ${({ theme }) => theme.deprecated_bg0};
+    background-color: ${({ theme }) => theme.backgroundSurface};
     border: ${({ theme, $hideBorder }) => !$hideBorder && `1px solid ${theme.deprecated_bg1}`};
     box-shadow: ${({ theme }) => theme.deepShadow};
     padding: 0px;

src/components/ModalViews/index.tsx

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

src/components/NavigationTabs/index.tsx

@@ -36,7 +36,7 @@ const ActiveText = styled.div`
 `
 
 const StyledArrowLeft = styled(ArrowLeft)`
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
 `
 
 export function FindPoolTabs({ origin }: { origin: string }) {
@@ -92,7 +92,7 @@ export function AddRemoveTabs({
           }}
           flex={children ? '1' : undefined}
         >
-          <StyledArrowLeft stroke={theme.deprecated_text2} />
+          <StyledArrowLeft stroke={theme.textSecondary} />
         </StyledHistoryLink>
         <ThemedText.DeprecatedMediumHeader
           fontWeight={500}

src/components/NumericalInput/index.tsx

@@ -4,7 +4,7 @@ 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.deprecated_red1 : theme.deprecated_text1)};
+  color: ${({ error, theme }) => (error ? theme.accentFailure : theme.textPrimary)};
   width: 0;
   position: relative;
   font-weight: 400;

src/components/Polling/ChainConnectivityWarning.tsx

@@ -17,7 +17,7 @@ const CautionTriangle = styled(AlertTriangle)`
   color: ${({ theme }) => theme.accentWarning};
 `
 const Link = styled(ExternalLink)`
-  color: ${({ theme }) => theme.deprecated_black};
+  color: ${({ theme }) => theme.black};
   text-decoration: underline;
 `
 const TitleRow = styled.div`

src/components/Polling/index.tsx

@@ -44,7 +44,7 @@ const StyledPollingBlockNumber = styled(ThemedText.DeprecatedSmall)<{
   hovering: boolean
   warning: boolean
 }>`
-  color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
+  color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.accentSuccess)};
   transition: opacity 0.25s ease;
   opacity: ${({ breathe, hovering }) => (hovering ? 0.7 : breathe ? 1 : 0.5)};
   :hover {
@@ -66,12 +66,12 @@ const StyledPollingDot = styled.div<{ warning: boolean }>`
   min-width: 8px;
   border-radius: 50%;
   position: relative;
-  background-color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
+  background-color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.accentSuccess)};
   transition: 250ms ease background-color;
 `
 
 const StyledGasDot = styled.div`
-  background-color: ${({ theme }) => theme.deprecated_text3};
+  background-color: ${({ theme }) => theme.textTertiary};
   border-radius: 50%;
   height: 4px;
   min-height: 4px;
@@ -97,7 +97,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.deprecated_yellow3 : theme.deprecated_green1)};
+  border-left: 2px solid ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.accentSuccess)};
   background: transparent;
   width: 14px;
   height: 14px;

src/components/Popover/index.tsx

@@ -12,7 +12,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.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
 `
 
 const ReferenceElement = styled.div`
@@ -33,9 +33,9 @@ const Arrow = styled.div`
     z-index: 9998;
 
     content: '';
-    border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+    border: 1px solid ${({ theme }) => theme.backgroundInteractive};
     transform: rotate(45deg);
-    background: ${({ theme }) => theme.deprecated_bg0};
+    background: ${({ theme }) => theme.backgroundSurface};
   }
 
   &.arrow-top {

src/components/Popups/PopupItem.tsx

@@ -21,7 +21,7 @@ const Popup = styled.div`
   display: inline-block;
   width: 100%;
   padding: 1em;
-  background-color: ${({ theme }) => theme.deprecated_bg0};
+  background-color: ${({ theme }) => theme.backgroundSurface};
   position: relative;
   border-radius: 10px;
   padding: 20px;

src/components/PositionListItem/index.tsx

@@ -29,7 +29,7 @@ const LinkRow = styled(Link)`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   padding: 16px;
   text-decoration: none;
   font-weight: 500;
@@ -73,7 +73,7 @@ const RangeLineItem = styled(DataLineItem)`
 
 const DoubleArrow = styled.span`
   margin: 0 2px;
-  color: ${({ theme }) => theme.deprecated_text3};
+  color: ${({ theme }) => theme.textTertiary};
 `
 
 const RangeText = styled.span`
@@ -82,7 +82,7 @@ const RangeText = styled.span`
 `
 
 const ExtentsText = styled.span`
-  color: ${({ theme }) => theme.deprecated_text3};
+  color: ${({ theme }) => theme.textTertiary};
   font-size: 14px;
   margin-right: 4px;
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`

src/components/PositionPreview/index.tsx

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

src/components/PrivacyPolicy/index.tsx

@@ -33,7 +33,7 @@ const StyledExternalCard = styled(Card)`
 
 const HoverText = styled.div`
   text-decoration: none;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   display: flex;
   align-items: center;
 
@@ -128,7 +128,7 @@ function PrivacyPolicy() {
               <RowBetween>
                 <AutoRow gap="4px">
                   <Info size={20} />
-                  <ThemedText.DeprecatedMain fontSize={14} color="deprecated_primaryText1">
+                  <ThemedText.DeprecatedMain fontSize={14} color="accentAction">
                     <Trans>Uniswap Labs&apos; Terms of Service</Trans>
                   </ThemedText.DeprecatedMain>
                 </AutoRow>
@@ -141,7 +141,7 @@ function PrivacyPolicy() {
               <RowBetween>
                 <AutoRow gap="4px">
                   <Info size={20} />
-                  <ThemedText.DeprecatedMain fontSize={14} color="deprecated_primaryText1">
+                  <ThemedText.DeprecatedMain fontSize={14} color="accentAction">
                     <Trans>Privacy Policy</Trans>
                   </ThemedText.DeprecatedMain>
                 </AutoRow>
@@ -159,7 +159,7 @@ function PrivacyPolicy() {
               <AutoColumn gap="sm">
                 <AutoRow gap="4px">
                   <Info size={18} />
-                  <ThemedText.DeprecatedMain fontSize={14} color="deprecated_text1">
+                  <ThemedText.DeprecatedMain fontSize={14} color="textPrimary">
                     {name}
                   </ThemedText.DeprecatedMain>
                 </AutoRow>

src/components/ProgressSteps/index.tsx

@@ -11,7 +11,7 @@ const Wrapper = styled(AutoColumn)`
 const Grouping = styled(AutoColumn)`
   width: fit-content;
   padding: 4px;
-  /* background-color: ${({ theme }) => theme.deprecated_bg2}; */
+  /* background-color: ${({ theme }) => theme.backgroundInteractive}; */
   border-radius: 16px;
 `
 
@@ -19,9 +19,9 @@ const Circle = styled.div<{ confirmed?: boolean; disabled?: boolean }>`
   width: 48px;
   height: 48px;
   background-color: ${({ theme, confirmed, disabled }) =>
-    disabled ? theme.deprecated_bg3 : confirmed ? theme.deprecated_green1 : theme.deprecated_primary1};
+    disabled ? theme.deprecated_bg3 : confirmed ? theme.accentSuccess : theme.accentAction};
   border-radius: 50%;
-  color: ${({ theme, disabled }) => (disabled ? theme.deprecated_text3 : theme.deprecated_text1)};
+  color: ${({ theme, disabled }) => (disabled ? theme.textTertiary : theme.textPrimary)};
   display: flex;
   align-items: center;
   justify-content: center;

src/components/RangeSelector/PresetsButtons.tsx

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

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -55,7 +55,7 @@ const DotColor = styled(DotLine)`
 `
 
 const OpaqueBadge = styled(Badge)`
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.backgroundInteractive};
   border-radius: 8px;
   display: grid;
   font-size: 12px;
@@ -69,7 +69,7 @@ const OpaqueBadge = styled(Badge)`
 const ProtocolBadge = styled(Badge)`
   background-color: ${({ theme }) => theme.deprecated_bg3};
   border-radius: 4px;
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 10px;
   padding: 2px 4px;
   z-index: ${Z_INDEX.sticky + 1};

src/components/SearchModal/CurrencyList/index.tsx

@@ -48,7 +48,7 @@ const CurrencyName = styled(Text)`
 
 const Tag = styled.div`
   background-color: ${({ theme }) => theme.deprecated_bg3};
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 14px;
   border-radius: 4px;
   padding: 0.25rem 0.3rem 0.25rem 0.3rem;

src/components/SearchModal/CurrencySearch.tsx

@@ -251,7 +251,7 @@ export function CurrencySearch({
           </div>
         ) : (
           <Column style={{ padding: '20px', height: '100%' }}>
-            <ThemedText.DeprecatedMain color={theme.deprecated_text3} textAlign="center" mb="20px">
+            <ThemedText.DeprecatedMain color={theme.textTertiary} textAlign="center" mb="20px">
               <Trans>No results found.</Trans>
             </ThemedText.DeprecatedMain>
           </Column>

src/components/SearchModal/styleds.tsx

@@ -40,7 +40,7 @@ export const SearchInput = styled.input`
   border: none;
   outline: none;
   border-radius: 12px;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   border-style: solid;
   border: 1px solid ${({ theme }) => theme.backgroundOutline};
   -webkit-appearance: none;

src/components/Settings/index.tsx

@@ -116,7 +116,7 @@ const ModalContentWrapper = styled.div`
   align-items: center;
   justify-content: center;
   padding: 2rem 0;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.backgroundInteractive};
   border-radius: 20px;
 `
 
@@ -208,7 +208,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
             {isSupportedChainId(chainId) && (
               <RowBetween>
                 <RowFixed>
-                  <ThemedText.DeprecatedBlack fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
+                  <ThemedText.DeprecatedBlack fontWeight={400} fontSize={14} color={theme.textSecondary}>
                     <Trans>Auto Router API</Trans>
                   </ThemedText.DeprecatedBlack>
                   <QuestionHelper text={<Trans>Use the Uniswap Labs API to get faster quotes.</Trans>} />
@@ -228,7 +228,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
             )}
             <RowBetween>
               <RowFixed>
-                <ThemedText.DeprecatedBlack fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
+                <ThemedText.DeprecatedBlack fontWeight={400} fontSize={14} color={theme.textSecondary}>
                   <Trans>Expert Mode</Trans>
                 </ThemedText.DeprecatedBlack>
                 <QuestionHelper

src/components/Slider/index.tsx

@@ -19,7 +19,7 @@ const StyledRangeInput = styled.input<{ size: number }>`
     -webkit-appearance: none;
     height: ${({ size }) => size}px;
     width: ${({ size }) => size}px;
-    background-color: ${({ theme }) => theme.deprecated_blue1};
+    background-color: ${({ theme }) => theme.accentAction};
     border-radius: 100%;
     border: none;
     transform: translateY(-50%);
@@ -62,11 +62,7 @@ const StyledRangeInput = styled.input<{ size: number }>`
   }
 
   &::-webkit-slider-runnable-track {
-    background: linear-gradient(
-      90deg,
-      ${({ theme }) => theme.deprecated_blue1},
-      ${({ theme }) => theme.deprecated_blue2}
-    );
+    background: linear-gradient(90deg, ${({ theme }) => theme.accentAction}, ${({ theme }) => theme.accentAction});
     height: 2px;
   }
 

src/components/TextInput/index.tsx

@@ -9,7 +9,7 @@ const Input = styled.input<{ error?: boolean; fontSize?: string }>`
   width: 0;
   background-color: ${({ theme }) => theme.deprecated_bg1};
   transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
-  color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
+  color: ${({ error, theme }) => (error ? theme.accentFailure : theme.textPrimary)};
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
@@ -40,7 +40,7 @@ const TextAreaInput = styled.textarea<{ error?: boolean; fontSize?: string }>`
   resize: none;
   background-color: ${({ theme }) => theme.deprecated_bg1};
   transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
-  color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
+  color: ${({ error, theme }) => (error ? theme.accentFailure : theme.textPrimary)};
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;

src/components/Toggle/MultiToggle.tsx

@@ -7,7 +7,7 @@ export const ToggleWrapper = styled.button<{ width?: string }>`
   padding: 1px;
   background: ${({ theme }) => theme.deprecated_bg1};
   border-radius: 8px;
-  border: ${({ theme }) => '1px solid ' + theme.deprecated_bg2};
+  border: ${({ theme }) => '1px solid ' + theme.backgroundInteractive};
   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.deprecated_bg0 : 'none')};
-  color: ${({ theme, isActive }) => (isActive ? theme.deprecated_text1 : theme.deprecated_text3)};
+  background: ${({ theme, isActive }) => (isActive ? theme.backgroundSurface : 'none')};
+  color: ${({ theme, isActive }) => (isActive ? theme.textPrimary : theme.textTertiary)};
   font-size: ${({ fontSize }) => fontSize ?? '1rem'};
   font-weight: 500;
   white-space: nowrap;
   :hover {
     user-select: initial;
-    color: ${({ theme, isActive }) => (isActive ? theme.deprecated_text2 : theme.deprecated_text3)};
+    color: ${({ theme, isActive }) => (isActive ? theme.textSecondary : theme.textTertiary)};
   }
 `

src/components/Toggle/index.tsx

@@ -42,8 +42,8 @@ const ToggleElementHoverStyle = (hasBgColor: boolean, theme: any, isActive?: boo
         opacity: '0.8',
       }
     : {
-        background: isActive ? darken(0.05, theme.deprecated_primary1) : darken(0.05, theme.deprecated_bg4),
-        color: isActive ? theme.deprecated_white : theme.deprecated_text3,
+        background: isActive ? darken(0.05, theme.accentAction) : darken(0.05, theme.deprecated_bg4),
+        color: isActive ? theme.white : theme.textTertiary,
       }
 
 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.deprecated_primary1 : !!bgColor ? theme.deprecated_bg4 : theme.deprecated_text3};
+    isActive ? bgColor ?? theme.accentAction : !!bgColor ? theme.deprecated_bg4 : theme.textTertiary};
   border-radius: 50%;
   height: 24px;
   :hover {

src/components/Tooltip/index.tsx

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

src/components/TransactionConfirmationModal/AnimatedConfirmation.tsx

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

src/components/TransactionConfirmationModal/index.tsx

@@ -148,7 +148,7 @@ function TransactionSubmittedContent({
               ) : (
                 <RowFixed>
                   <Trans>Added {currencyToAdd.symbol} </Trans>
-                  <CheckCircle size="16px" stroke={theme.deprecated_green1} style={{ marginLeft: '6px' }} />
+                  <CheckCircle size="16px" stroke={theme.accentSuccess} style={{ marginLeft: '6px' }} />
                 </RowFixed>
               )}
             </ButtonLight>
@@ -267,10 +267,10 @@ function L2Content({
         <ConfirmedIcon inline={inline}>
           {confirmed ? (
             transactionSuccess ? (
-              // <CheckCircle strokeWidth={1} size={inline ? '40px' : '90px'} color={theme.deprecated_green1} />
+              // <CheckCircle strokeWidth={1} size={inline ? '40px' : '90px'} color={theme.accentSuccess} />
               <AnimatedConfirmation />
             ) : (
-              <AlertCircle strokeWidth={1} size={inline ? '40px' : '90px'} color={theme.deprecated_red1} />
+              <AlertCircle strokeWidth={1} size={inline ? '40px' : '90px'} color={theme.accentFailure} />
             )
           ) : (
             <CustomLightSpinner src={Circle} alt="loader" size={inline ? '40px' : '90px'} />
@@ -293,20 +293,20 @@ function L2Content({
           </Text>
           {chainId && hash ? (
             <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
-              <Text fontWeight={500} fontSize={14} color={theme.deprecated_primary1}>
+              <Text fontWeight={500} fontSize={14} color={theme.accentAction}>
                 <Trans>View on Explorer</Trans>
               </Text>
             </ExternalLink>
           ) : (
             <div style={{ height: '17px' }} />
           )}
-          <Text color={theme.deprecated_text3} style={{ margin: '20px 0 0 0' }} fontSize="14px">
+          <Text color={theme.textTertiary} 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.deprecated_text1 }}>
+                <span style={{ fontWeight: 500, marginLeft: '4px', color: theme.textPrimary }}>
                   {secondsToConfirm} seconds 🎉
                 </span>
               </div>

src/components/TransactionSettings/index.tsx

@@ -23,7 +23,7 @@ enum DeadlineError {
 }
 
 const FancyButton = styled.button`
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   align-items: center;
   height: 2rem;
   border-radius: 36px;
@@ -37,7 +37,7 @@ const FancyButton = styled.button`
     border: 1px solid ${({ theme }) => theme.deprecated_bg4};
   }
   :focus {
-    border: 1px solid ${({ theme }) => theme.deprecated_primary1};
+    border: 1px solid ${({ theme }) => theme.accentAction};
   }
 `
 
@@ -47,8 +47,8 @@ const Option = styled(FancyButton)<{ active: boolean }>`
   :hover {
     cursor: pointer;
   }
-  background-color: ${({ active, theme }) => active && theme.deprecated_primary1};
-  color: ${({ active, theme }) => (active ? theme.deprecated_white : theme.deprecated_text1)};
+  background-color: ${({ active, theme }) => active && theme.accentAction};
+  color: ${({ active, theme }) => (active ? theme.white : theme.textPrimary)};
 `
 
 const Input = styled.input`
@@ -61,7 +61,7 @@ const Input = styled.input`
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;
   }
-  color: ${({ theme, color }) => (color === 'red' ? theme.deprecated_red1 : theme.deprecated_text1)};
+  color: ${({ theme, color }) => (color === 'red' ? theme.accentFailure : theme.textPrimary)};
   text-align: right;
 
   ::placeholder {
@@ -77,11 +77,11 @@ const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }
   flex: 1;
   border: ${({ theme, active, warning }) =>
     active
-      ? `1px solid ${warning ? theme.deprecated_red1 : theme.deprecated_primary1}`
-      : warning && `1px solid ${theme.deprecated_red1}`};
+      ? `1px solid ${warning ? theme.accentFailure : theme.accentAction}`
+      : warning && `1px solid ${theme.accentFailure}`};
   :hover {
     border: ${({ theme, active, warning }) =>
-      active && `1px solid ${warning ? darken(0.1, theme.deprecated_red1) : darken(0.1, theme.deprecated_primary1)}`};
+      active && `1px solid ${warning ? darken(0.1, theme.accentFailure) : darken(0.1, theme.accentAction)}`};
   }
 
   input {
@@ -171,7 +171,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
     <AutoColumn gap="md">
       <AutoColumn gap="sm">
         <RowFixed>
-          <ThemedText.DeprecatedBlack fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
+          <ThemedText.DeprecatedBlack fontWeight={400} fontSize={14} color={theme.textSecondary}>
             <Trans>Slippage tolerance</Trans>
           </ThemedText.DeprecatedBlack>
           <QuestionHelper
@@ -240,7 +240,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
       {showCustomDeadlineRow && (
         <AutoColumn gap="sm">
           <RowFixed>
-            <ThemedText.DeprecatedBlack fontSize={14} fontWeight={400} color={theme.deprecated_text2}>
+            <ThemedText.DeprecatedBlack fontSize={14} fontWeight={400} color={theme.textSecondary}>
               <Trans>Transaction deadline</Trans>
             </ThemedText.DeprecatedBlack>
             <QuestionHelper

src/components/WalletModal/Option.tsx

@@ -64,14 +64,13 @@ const HeaderText = styled.div`
   ${flexRowNoWrap};
   align-items: center;
   justify-content: center;
-  color: ${(props) =>
-    props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : ({ theme }) => theme.deprecated_text1};
+  color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.accentAction : ({ theme }) => theme.textPrimary)};
   font-size: 16px;
   font-weight: 600;
 `
 
 const SubHeader = styled.div`
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   margin-top: 10px;
   font-size: 12px;
 `

src/components/WalletModal/index.tsx

@@ -62,7 +62,7 @@ const HeaderRow = styled.div`
   padding: 1rem 1rem;
   font-weight: 600;
   size: 16px;
-  color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
+  color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.accentAction : 'inherit')};
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     padding: 1rem;
   `};
@@ -104,7 +104,7 @@ const OptionGrid = styled.div`
 
 const HoverText = styled.div`
   text-decoration: none;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   display: flex;
   align-items: center;
 

src/components/Web3Status/index.tsx

@@ -70,13 +70,13 @@ const Web3StatusGeneric = styled(ButtonSecondary)`
   }
 `
 const Web3StatusError = styled(Web3StatusGeneric)`
-  background-color: ${({ theme }) => theme.deprecated_red1};
-  border: 1px solid ${({ theme }) => theme.deprecated_red1};
-  color: ${({ theme }) => theme.deprecated_white};
+  background-color: ${({ theme }) => theme.accentFailure};
+  border: 1px solid ${({ theme }) => theme.accentFailure};
+  color: ${({ theme }) => theme.white};
   font-weight: 500;
   :hover,
   :focus {
-    background-color: ${({ theme }) => darken(0.1, theme.deprecated_red1)};
+    background-color: ${({ theme }) => darken(0.1, theme.accentFailure)};
   }
 `
 
@@ -100,9 +100,9 @@ const Web3StatusConnected = styled(Web3StatusGeneric)<{
   pending?: boolean
   isClaimAvailable?: boolean
 }>`
-  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)};
+  background-color: ${({ pending, theme }) => (pending ? theme.accentAction : theme.deprecated_bg1)};
+  border: 1px solid ${({ pending, theme }) => (pending ? theme.accentAction : theme.deprecated_bg1)};
+  color: ${({ pending, theme }) => (pending ? theme.white : theme.textPrimary)};
   font-weight: 500;
   border: ${({ isClaimAvailable }) => isClaimAvailable && `1px solid ${colors.purple300}`};
   :hover,
@@ -112,7 +112,7 @@ const Web3StatusConnected = styled(Web3StatusGeneric)<{
     :focus {
       border: 1px solid
         ${({ pending, theme }) =>
-          pending ? darken(0.1, theme.deprecated_primary1) : darken(0.1, theme.deprecated_bg2)};
+          pending ? darken(0.1, theme.accentAction) : darken(0.1, theme.backgroundInteractive)};
     }
   }
 

src/components/earn/PoolCard.tsx

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

src/components/swap/AdvancedSwapDetails.tsx

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

src/components/swap/GasEstimateBadge.tsx

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

src/components/swap/PriceImpactWarning.tsx

@@ -12,7 +12,7 @@ import { formatPriceImpact } from './FormattedPriceImpact'
 
 const StyledCard = styled(OutlineCard)`
   padding: 12px;
-  border: 1px solid ${({ theme }) => opacify(24, theme.deprecated_error)};
+  border: 1px solid ${({ theme }) => opacify(24, theme.accentFailure)};
 `
 
 interface PriceImpactWarningProps {
@@ -35,11 +35,11 @@ export default function PriceImpactWarning({ priceImpact }: PriceImpactWarningPr
         >
           <RowBetween>
             <RowFixed>
-              <ThemedText.DeprecatedSubHeader color={theme.deprecated_error}>
+              <ThemedText.DeprecatedSubHeader color={theme.accentFailure}>
                 <Trans>Price impact warning</Trans>
               </ThemedText.DeprecatedSubHeader>
             </RowFixed>
-            <ThemedText.DeprecatedLabel textAlign="right" fontSize={14} color={theme.deprecated_error}>
+            <ThemedText.DeprecatedLabel textAlign="right" fontSize={14} color={theme.accentFailure}>
               {formatPriceImpact(priceImpact)}
             </ThemedText.DeprecatedLabel>
           </RowBetween>

src/components/swap/RouterLabel.tsx

@@ -19,7 +19,7 @@ const StyledStaticRouterIcon = styled(StaticRouterIcon)`
   height: 16px;
   width: 16px;
 
-  fill: ${({ theme }) => theme.deprecated_text3};
+  fill: ${({ theme }) => theme.textTertiary};
 
   :hover {
     filter: brightness(1.3);
@@ -30,7 +30,7 @@ const StyledAutoRouterLabel = styled(ThemedText.DeprecatedBlack)`
   line-height: 1rem;
 
   /* fallback color */
-  color: ${({ theme }) => theme.deprecated_green1};
+  color: ${({ theme }) => theme.accentSuccess};
 
   @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

@@ -35,7 +35,7 @@ const StyledInfoIcon = styled(Info)`
   height: 16px;
   width: 16px;
   margin-right: 4px;
-  color: ${({ theme }) => theme.deprecated_text3};
+  color: ${({ theme }) => theme.textTertiary};
 `
 
 const StyledCard = styled(OutlineCard)`
@@ -61,7 +61,7 @@ const StyledPolling = styled.div`
   margin-right: 2px;
   margin-left: 10px;
   align-items: center;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   transition: 250ms ease color;
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
@@ -76,7 +76,7 @@ const StyledPollingDot = styled.div`
   min-width: 8px;
   border-radius: 50%;
   position: relative;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.backgroundInteractive};
   transition: 250ms ease background-color;
 `
 
@@ -95,7 +95,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.deprecated_text1};
+  border-left: 2px solid ${({ theme }) => theme.textPrimary};
   background: transparent;
   width: 14px;
   height: 14px;
@@ -163,7 +163,7 @@ export default function SwapDetailsDropdown({
                     placement="bottom"
                     disableHover={showDetails}
                   >
-                    <StyledInfoIcon color={trade ? theme.deprecated_text3 : theme.deprecated_bg3} />
+                    <StyledInfoIcon color={trade ? theme.textTertiary : theme.deprecated_bg3} />
                   </MouseoverTooltipContent>
                 </HideSmall>
               )}
@@ -194,7 +194,7 @@ export default function SwapDetailsDropdown({
                 />
               )}
               <RotatingArrow
-                stroke={trade ? theme.deprecated_text3 : theme.deprecated_bg3}
+                stroke={trade ? theme.textTertiary : theme.deprecated_bg3}
                 open={Boolean(trade && showDetails)}
               />
             </RowFixed>

src/components/swap/SwapHeader.tsx

@@ -10,7 +10,7 @@ const StyledSwapHeader = styled.div`
   padding: 8px 12px;
   margin-bottom: 8px;
   width: 100%;
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
 `
 
 export default function SwapHeader({ allowedSlippage }: { allowedSlippage: Percent }) {

src/components/swap/SwapModalHeader.tsx

@@ -107,7 +107,7 @@ export default function SwapModalHeader({
               <TruncatedText
                 fontSize={24}
                 fontWeight={500}
-                color={showAcceptChanges && trade.tradeType === TradeType.EXACT_OUTPUT ? theme.deprecated_primary1 : ''}
+                color={showAcceptChanges && trade.tradeType === TradeType.EXACT_OUTPUT ? theme.accentAction : ''}
               >
                 {trade.inputAmount.toSignificant(6)}
               </TruncatedText>
@@ -143,7 +143,7 @@ export default function SwapModalHeader({
             </RowFixed>
           </RowBetween>
           <RowBetween>
-            <ThemedText.DeprecatedBody fontSize={14} color={theme.deprecated_text3}>
+            <ThemedText.DeprecatedBody fontSize={14} color={theme.textTertiary}>
               <FiatValue
                 fiatValue={fiatValueOutput}
                 priceImpact={computeFiatValuePriceImpact(fiatValueInput, fiatValueOutput)}
@@ -163,7 +163,7 @@ export default function SwapModalHeader({
           <RowBetween>
             <RowFixed>
               <AlertTriangle size={20} style={{ marginRight: '8px', minWidth: 24 }} />
-              <ThemedText.DeprecatedMain color={theme.deprecated_primary1}>
+              <ThemedText.DeprecatedMain color={theme.accentAction}>
                 <Trans>Price Updated</Trans>
               </ThemedText.DeprecatedMain>
             </RowFixed>

src/components/swap/SwapRoute.tsx

@@ -35,7 +35,7 @@ const OpenCloseIcon = styled(Plus)<{ open?: boolean }>`
   stroke-width: 2px;
   transition: transform 0.1s;
   transform: ${({ open }) => (open ? 'rotate(45deg)' : 'none')};
-  stroke: ${({ theme }) => theme.deprecated_text3};
+  stroke: ${({ theme }) => theme.textTertiary};
   cursor: pointer;
   :hover {
     opacity: 0.8;

src/components/swap/TradePrice.tsx

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

src/components/swap/UnsupportedCurrencyFooter.tsx

@@ -25,7 +25,7 @@ const DetailsFooter = styled.div<{ show: boolean }>`
   max-width: 400px;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   background-color: ${({ theme }) => theme.deprecated_advancedBG};
   z-index: ${Z_INDEX.deprecated_zero};
 

src/components/swap/styleds.tsx

@@ -66,12 +66,12 @@ export const ArrowWrapper = styled.div<{ clickable: boolean }>`
 export const ErrorText = styled(Text)<{ severity?: 0 | 1 | 2 | 3 | 4 }>`
   color: ${({ theme, severity }) =>
     severity === 3 || severity === 4
-      ? theme.deprecated_red1
+      ? theme.accentFailure
       : severity === 2
       ? theme.deprecated_yellow2
       : severity === 1
-      ? theme.deprecated_text1
-      : theme.deprecated_text2};
+      ? theme.textPrimary
+      : theme.textSecondary};
 `
 
 export const TruncatedText = styled(Text)`
@@ -104,7 +104,7 @@ export const Dots = styled.span`
 `
 
 const SwapCallbackErrorInner = styled.div`
-  background-color: ${({ theme }) => transparentize(0.9, theme.deprecated_red1)};
+  background-color: ${({ theme }) => transparentize(0.9, theme.accentFailure)};
   border-radius: 1rem;
   display: flex;
   align-items: center;
@@ -112,7 +112,7 @@ const SwapCallbackErrorInner = styled.div`
   width: 100%;
   padding: 3rem 1.25rem 1rem 1rem;
   margin-top: -2rem;
-  color: ${({ theme }) => theme.deprecated_red1};
+  color: ${({ theme }) => theme.accentFailure};
   z-index: -1;
   p {
     padding: 0;
@@ -122,7 +122,7 @@ const SwapCallbackErrorInner = styled.div`
 `
 
 const SwapCallbackErrorInnerAlertTriangle = styled.div`
-  background-color: ${({ theme }) => transparentize(0.9, theme.deprecated_red1)};
+  background-color: ${({ theme }) => transparentize(0.9, theme.accentFailure)};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -145,15 +145,15 @@ export function SwapCallbackError({ error }: { error: ReactNode }) {
 
 export const SwapShowAcceptChanges = styled(AutoColumn)`
   background-color: ${({ theme }) => transparentize(0.95, theme.deprecated_primary3)};
-  color: ${({ theme }) => theme.deprecated_primaryText1};
+  color: ${({ theme }) => theme.accentAction};
   padding: 0.5rem;
   border-radius: 12px;
   margin-top: 8px;
 `
 
 export const ResponsiveTooltipContainer = styled(TooltipContainer)<{ origin?: string; width?: string }>`
-  background-color: ${({ theme }) => theme.deprecated_bg0};
-  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.backgroundSurface};
+  border: 1px solid ${({ theme }) => theme.backgroundInteractive};
   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.deprecated_primary1} />
+            <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.accentAction} />
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify="center">
             <AutoColumn gap="md" justify="center">

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.deprecated_primary1} />
+            <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.accentAction} />
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify="center">
             <AutoColumn gap="md" 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.deprecated_primary1} />
+            <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.accentAction} />
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify="center">
             <AutoColumn gap="md" justify="center">

src/pages/AddLiquidity/index.tsx

@@ -757,7 +757,7 @@ export default function AddLiquidity() {
                                 fontSize={14}
                                 style={{ fontWeight: 500 }}
                                 textAlign="left"
-                                color={theme.deprecated_primaryText1}
+                                color={theme.accentAction}
                               >
                                 <Trans>
                                   This pool must be initialized before you can add liquidity. To initialize, select a

src/pages/AddLiquidity/styled.tsx

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

src/pages/AddLiquidityV2/PoolPriceBar.tsx

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

src/pages/AddLiquidityV2/index.tsx

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

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.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
 `
 
 const ActionDropdown = styled(ButtonDropdown)`
   padding: 0px;
   background-color: transparent;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   font-size: 1.25rem;
 
   :hover,
@@ -51,7 +51,7 @@ const ProposalActionSelectorFlex = styled.div`
   display: flex;
   flex-flow: column nowrap;
   border-radius: 20px;
-  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+  border: 1px solid ${({ theme }) => theme.backgroundInteractive};
   background-color: ${({ theme }) => theme.deprecated_bg1};
 `
 

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.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
 `
 
 const ProposalTitle = memo(styled(TextInput)`
@@ -20,7 +20,7 @@ const ProposalEditorContainer = styled.div`
   margin-top: 10px;
   padding: 0.75rem 1rem 0.75rem 1rem;
   border-radius: 20px;
-  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+  border: 1px solid ${({ theme }) => theme.backgroundInteractive};
   background-color: ${({ theme }) => theme.deprecated_bg1};
 `
 

src/pages/CreateProposal/ProposalSubmissionModal.tsx

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

src/pages/CreateProposal/index.tsx

@@ -246,7 +246,7 @@ ${bodyValue}
           <CreateProposalWrapper>
             <BlueCard>
               <AutoColumn gap="10px">
-                <ThemedText.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
+                <ThemedText.DeprecatedLink fontWeight={400} color="accentAction">
                   <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

@@ -61,7 +61,7 @@ const StyledDataCard = styled(DataCard)<{ bgColor?: any; showBackground?: any }>
   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.deprecated_black : theme.deprecated_bg5
+      showBackground ? theme.black : theme.deprecated_bg5
     } 100%) `};
 `
 

src/pages/Earn/index.tsx

@@ -85,7 +85,7 @@ export default function Earn() {
                 </ThemedText.DeprecatedWhite>
               </RowBetween>{' '}
               <ExternalLink
-                style={{ color: theme.deprecated_white, textDecoration: 'underline' }}
+                style={{ color: theme.white, textDecoration: 'underline' }}
                 href="https://uniswap.org/blog/uni/"
                 target="_blank"
               >

src/pages/MigrateV2/MigrateV2Pair.tsx

@@ -435,7 +435,7 @@ function V2PairMigration({
           <FeeSelector feeAmount={feeAmount} handleFeePoolSelect={setFeeAmount} />
           {noLiquidity && (
             <BlueCard style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-              <AlertCircle color={theme.deprecated_text1} style={{ marginBottom: '12px', opacity: 0.8 }} />
+              <AlertCircle color={theme.textPrimary} style={{ marginBottom: '12px', opacity: 0.8 }} />
               <ThemedText.DeprecatedBody
                 fontSize={14}
                 style={{ marginBottom: 8, fontWeight: 500, opacity: 0.8 }}

src/pages/MigrateV2/index.tsx

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

src/pages/Pool/CTACards.tsx

@@ -31,7 +31,7 @@ const CTA1 = styled(ExternalLink)`
   border: 1px solid ${({ theme }) => theme.deprecated_bg3};
 
   * {
-    color: ${({ theme }) => theme.deprecated_text1};
+    color: ${({ theme }) => theme.textPrimary};
     text-decoration: none !important;
   }
 
@@ -56,7 +56,7 @@ const CTA2 = styled(ExternalLink)`
   border: 1px solid ${({ theme }) => theme.deprecated_bg3};
 
   * {
-    color: ${({ theme }) => theme.deprecated_text1};
+    color: ${({ theme }) => theme.textPrimary};
     text-decoration: none !important;
   }
 

src/pages/Pool/PositionPage.tsx

@@ -99,7 +99,7 @@ const Label = styled(({ end, ...props }) => <ThemedText.DeprecatedLabel {...prop
 `
 
 const ExtentsText = styled.span`
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 14px;
   text-align: center;
   margin-right: 4px;
@@ -108,15 +108,15 @@ const ExtentsText = styled.span`
 
 const HoverText = styled(ThemedText.DeprecatedMain)`
   text-decoration: none;
-  color: ${({ theme }) => theme.deprecated_text3};
+  color: ${({ theme }) => theme.textTertiary};
   :hover {
-    color: ${({ theme }) => theme.deprecated_text1};
+    color: ${({ theme }) => theme.textPrimary};
     text-decoration: none;
   }
 `
 
 const DoubleArrow = styled.span`
-  color: ${({ theme }) => theme.deprecated_text3};
+  color: ${({ theme }) => theme.textTertiary};
   margin: 0 1rem;
 `
 const ResponsiveRow = styled(RowBetween)`
@@ -699,11 +699,7 @@ export function PositionPage() {
                           <Trans>${fiatValueOfLiquidity.toFixed(2, { groupSeparator: ',' })}</Trans>
                         </ThemedText.DeprecatedLargeHeader>
                       ) : (
-                        <ThemedText.DeprecatedLargeHeader
-                          color={theme.deprecated_text1}
-                          fontSize="36px"
-                          fontWeight={500}
-                        >
+                        <ThemedText.DeprecatedLargeHeader color={theme.textPrimary} fontSize="36px" fontWeight={500}>
                           <Trans>$-</Trans>
                         </ThemedText.DeprecatedLargeHeader>
                       )}
@@ -733,7 +729,7 @@ export function PositionPage() {
                             </ThemedText.DeprecatedMain>
                             {typeof ratio === 'number' && !removed ? (
                               <Badge style={{ marginLeft: '10px' }}>
-                                <ThemedText.DeprecatedMain color={theme.deprecated_text2} fontSize={11}>
+                                <ThemedText.DeprecatedMain color={theme.textSecondary} fontSize={11}>
                                   <Trans>{inverted ? 100 - ratio : ratio}%</Trans>
                                 </ThemedText.DeprecatedMain>
                               </Badge>
@@ -754,7 +750,7 @@ export function PositionPage() {
                           </Label>
                           {fiatValueOfFees?.greaterThan(new Fraction(1, 100)) ? (
                             <ThemedText.DeprecatedLargeHeader
-                              color={theme.deprecated_green1}
+                              color={theme.accentSuccess}
                               fontSize="36px"
                               fontWeight={500}
                             >
@@ -762,7 +758,7 @@ export function PositionPage() {
                             </ThemedText.DeprecatedLargeHeader>
                           ) : (
                             <ThemedText.DeprecatedLargeHeader
-                              color={theme.deprecated_text1}
+                              color={theme.textPrimary}
                               fontSize="36px"
                               fontWeight={500}
                             >
@@ -781,11 +777,11 @@ export function PositionPage() {
                             onClick={() => setShowConfirm(true)}
                           >
                             {!!collectMigrationHash && !isCollectPending ? (
-                              <ThemedText.DeprecatedMain color={theme.deprecated_text1}>
+                              <ThemedText.DeprecatedMain color={theme.textPrimary}>
                                 <Trans> Collected</Trans>
                               </ThemedText.DeprecatedMain>
                             ) : isCollectPending || collecting ? (
-                              <ThemedText.DeprecatedMain color={theme.deprecated_text1}>
+                              <ThemedText.DeprecatedMain color={theme.textPrimary}>
                                 {' '}
                                 <Dots>
                                   <Trans>Collecting</Trans>
@@ -793,7 +789,7 @@ export function PositionPage() {
                               </ThemedText.DeprecatedMain>
                             ) : (
                               <>
-                                <ThemedText.DeprecatedMain color={theme.deprecated_white}>
+                                <ThemedText.DeprecatedMain color={theme.white}>
                                   <Trans>Collect fees</Trans>
                                 </ThemedText.DeprecatedMain>
                               </>
@@ -896,7 +892,7 @@ export function PositionPage() {
                       </ExtentsText>
 
                       {inRange && (
-                        <ThemedText.DeprecatedSmall color={theme.deprecated_text3}>
+                        <ThemedText.DeprecatedSmall color={theme.textTertiary}>
                           <Trans>Your position will be 100% {currencyBase?.symbol} at this price.</Trans>
                         </ThemedText.DeprecatedSmall>
                       )}
@@ -920,7 +916,7 @@ export function PositionPage() {
                       </ExtentsText>
 
                       {inRange && (
-                        <ThemedText.DeprecatedSmall color={theme.deprecated_text3}>
+                        <ThemedText.DeprecatedSmall color={theme.textTertiary}>
                           <Trans>Your position will be 100% {currencyQuote?.symbol} at this price.</Trans>
                         </ThemedText.DeprecatedSmall>
                       )}

src/pages/Pool/index.tsx

@@ -44,7 +44,7 @@ const PageWrapper = styled(AutoColumn)`
   }
 `
 const TitleRow = styled(RowBetween)`
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     flex-wrap: wrap;
     gap: 12px;
@@ -87,7 +87,7 @@ const MoreOptionsButton = styled(ButtonGray)`
   flex: 1 1 auto;
   padding: 6px 8px;
   width: 100%;
-  background-color: ${({ theme }) => theme.deprecated_bg0};
+  background-color: ${({ theme }) => theme.backgroundSurface};
   margin-right: 8px;
 `
 
@@ -132,7 +132,7 @@ const ResponsiveButtonPrimary = styled(ButtonPrimary)`
 `
 
 const MainContentWrapper = styled.main`
-  background-color: ${({ theme }) => theme.deprecated_bg0};
+  background-color: ${({ theme }) => theme.backgroundSurface};
   border: 1px solid ${({ theme }) => theme.backgroundOutline};
   padding: 0;
   border-radius: 16px;
@@ -177,7 +177,7 @@ function WrongNetworkCard() {
 
             <MainContentWrapper>
               <ErrorContainer>
-                <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
+                <ThemedText.DeprecatedBody color={theme.textTertiary} textAlign="center">
                   <NetworkIcon strokeWidth={1.2} />
                   <div data-testid="pools-unsupported-err">
                     <Trans>Your connected network is unsupported.</Trans>
@@ -303,7 +303,7 @@ export default function Pool() {
                   />
                 ) : (
                   <ErrorContainer>
-                    <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
+                    <ThemedText.DeprecatedBody color={theme.textTertiary} textAlign="center">
                       <InboxIcon strokeWidth={1} style={{ marginTop: '2em' }} />
                       <div>
                         <Trans>Your active V3 liquidity positions will appear here.</Trans>

src/pages/Pool/styleds.tsx

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

src/pages/Pool/v2.tsx

@@ -162,7 +162,7 @@ export default function Pool() {
                   </ThemedText.DeprecatedWhite>
                 </RowBetween>
                 <ExternalLink
-                  style={{ color: theme.deprecated_white, textDecoration: 'underline' }}
+                  style={{ color: theme.white, textDecoration: 'underline' }}
                   target="_blank"
                   href="https://docs.uniswap.org/protocol/V2/concepts/core-concepts/pools"
                 >
@@ -180,7 +180,7 @@ export default function Pool() {
             <AutoColumn gap="lg" justify="center">
               <AutoColumn gap="md" style={{ width: '100%' }}>
                 <Layer2Prompt>
-                  <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
+                  <ThemedText.DeprecatedBody color={theme.textTertiary} textAlign="center">
                     <Trans>V2 Pool is not available on Layer 2. Switch to Layer 1 Ethereum.</Trans>
                   </ThemedText.DeprecatedBody>
                 </Layer2Prompt>
@@ -214,13 +214,13 @@ export default function Pool() {
 
                 {!account ? (
                   <Card padding="40px">
-                    <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
+                    <ThemedText.DeprecatedBody color={theme.textTertiary} textAlign="center">
                       <Trans>Connect to a wallet to view your liquidity.</Trans>
                     </ThemedText.DeprecatedBody>
                   </Card>
                 ) : v2IsLoading ? (
                   <EmptyProposals>
-                    <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
+                    <ThemedText.DeprecatedBody color={theme.textTertiary} textAlign="center">
                       <Dots>
                         <Trans>Loading</Trans>
                       </Dots>
@@ -271,7 +271,7 @@ export default function Pool() {
                   </>
                 ) : (
                   <EmptyProposals>
-                    <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
+                    <ThemedText.DeprecatedBody color={theme.textTertiary} textAlign="center">
                       <Trans>No liquidity found.</Trans>
                     </ThemedText.DeprecatedBody>
                   </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.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
+                <ThemedText.DeprecatedLink fontWeight={400} color="accentAction">
                   <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,12 +227,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
         </RowBetween>
         {feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) ? (
           <>
-            <ThemedText.DeprecatedItalic
-              fontSize={12}
-              color={theme.deprecated_text2}
-              textAlign="left"
-              padding="8px 0 0 0"
-            >
+            <ThemedText.DeprecatedItalic fontSize={12} color={theme.textSecondary} textAlign="left" padding="8px 0 0 0">
               <Trans>You will also collect fees earned from this position.</Trans>
             </ThemedText.DeprecatedItalic>
             <RowBetween>

src/pages/RemoveLiquidity/index.tsx

@@ -303,7 +303,7 @@ export default function RemoveLiquidity() {
           </RowFixed>
         </RowBetween>
         <RowFixed>
-          <Plus size="16" color={theme.deprecated_text2} />
+          <Plus size="16" color={theme.textSecondary} />
         </RowFixed>
         <RowBetween align="flex-end">
           <Text fontSize={24} fontWeight={500}>
@@ -317,7 +317,7 @@ export default function RemoveLiquidity() {
           </RowFixed>
         </RowBetween>
 
-        <ThemedText.DeprecatedItalic fontSize={12} color={theme.deprecated_text2} textAlign="left" padding="12px 0 0 0">
+        <ThemedText.DeprecatedItalic fontSize={12} color={theme.textSecondary} 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.deprecated_text2} fontWeight={500} fontSize={16}>
+          <Text color={theme.textSecondary} 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.deprecated_text2} fontWeight={500} fontSize={16}>
+              <Text color={theme.textSecondary} fontWeight={500} fontSize={16}>
                 <Trans>Price</Trans>
               </Text>
-              <Text fontWeight={500} fontSize={16} color={theme.deprecated_text1}>
+              <Text fontWeight={500} fontSize={16} color={theme.textPrimary}>
                 1 {currencyA?.symbol} = {tokenA ? pair.priceOf(tokenA).toSignificant(6) : '-'} {currencyB?.symbol}
               </Text>
             </RowBetween>
             <RowBetween>
               <div />
-              <Text fontWeight={500} fontSize={16} color={theme.deprecated_text1}>
+              <Text fontWeight={500} fontSize={16} color={theme.textPrimary}>
                 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.DeprecatedLink fontWeight={400} color="deprecated_primaryText1">
+                <ThemedText.DeprecatedLink fontWeight={400} color="accentAction">
                   <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.deprecated_text2} />
+                  <ArrowDown size="16" color={theme.textSecondary} />
                 </ColumnCenter>
                 <LightCard>
                   <AutoColumn gap="10px">
@@ -577,7 +577,7 @@ export default function RemoveLiquidity() {
                   id="liquidity-amount"
                 />
                 <ColumnCenter>
-                  <ArrowDown size="16" color={theme.deprecated_text2} />
+                  <ArrowDown size="16" color={theme.textSecondary} />
                 </ColumnCenter>
                 <CurrencyInputPanel
                   hideBalance={true}
@@ -591,7 +591,7 @@ export default function RemoveLiquidity() {
                   id="remove-liquidity-tokena"
                 />
                 <ColumnCenter>
-                  <Plus size="16" color={theme.deprecated_text2} />
+                  <Plus size="16" color={theme.textSecondary} />
                 </ColumnCenter>
                 <CurrencyInputPanel
                   hideBalance={true}

src/pages/Swap/index.tsx

@@ -621,9 +621,7 @@ export default function Swap({ className }: { className?: string }) {
                     <ArrowDown
                       size="16"
                       color={
-                        currencies[Field.INPUT] && currencies[Field.OUTPUT]
-                          ? theme.deprecated_text1
-                          : theme.deprecated_text3
+                        currencies[Field.INPUT] && currencies[Field.OUTPUT] ? theme.textPrimary : theme.textTertiary
                       }
                     />
                   </ArrowContainer>
@@ -657,7 +655,7 @@ export default function Swap({ className }: { className?: string }) {
                     <>
                       <AutoRow justify="space-between" style={{ padding: '0 1rem' }}>
                         <ArrowWrapper clickable={false}>
-                          <ArrowDown size="16" color={theme.deprecated_text2} />
+                          <ArrowDown size="16" color={theme.textSecondary} />
                         </ArrowWrapper>
                         <LinkStyledButton id="remove-recipient-button" onClick={() => onChangeRecipient(null)}>
                           <Trans>- Remove recipient</Trans>
@@ -744,7 +742,7 @@ export default function Swap({ className }: { className?: string }) {
                             <Loader stroke={theme.white} />
                           ) : (approvalSubmitted && approvalState === ApprovalState.APPROVED) ||
                             signatureState === UseERC20PermitState.SIGNED ? (
-                            <CheckCircle size="20" color={theme.deprecated_green1} />
+                            <CheckCircle size="20" color={theme.accentSuccess} />
                           ) : (
                             <MouseoverTooltip
                               text={
@@ -754,7 +752,7 @@ export default function Swap({ className }: { className?: string }) {
                                 </Trans>
                               }
                             >
-                              <HelpCircle size="20" color={theme.deprecated_white} style={{ marginLeft: '8px' }} />
+                              <HelpCircle size="20" color={theme.white} style={{ marginLeft: '8px' }} />
                             </MouseoverTooltip>
                           )}
                         </AutoRow>

src/pages/Vote/Landing.tsx

@@ -60,14 +60,14 @@ const Proposal = styled(Button)`
   text-align: left;
   outline: none;
   cursor: pointer;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   text-decoration: none;
   background-color: ${({ theme }) => theme.deprecated_bg1};
   &:focus {
     background-color: ${({ theme }) => darken(0.05, theme.deprecated_bg1)};
   }
   &:hover {
-    background-color: ${({ theme }) => theme.deprecated_bg2};
+    background-color: ${({ theme }) => theme.backgroundInteractive};
   }
 `
 
@@ -98,7 +98,7 @@ const WrapSmall = styled(RowBetween)`
 `
 
 const TextButton = styled(ThemedText.DeprecatedMain)`
-  color: ${({ theme }) => theme.deprecated_primary1};
+  color: ${({ theme }) => theme.accentAction};
   :hover {
     cursor: pointer;
     text-decoration: underline;
@@ -115,7 +115,7 @@ const AddressButton = styled.div`
 `
 
 const StyledExternalLink = styled(ExternalLink)`
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
 `
 
 export default function Landing() {
@@ -173,7 +173,7 @@ export default function Landing() {
                   </RowBetween>
                   <ExternalLink
                     style={{
-                      color: theme.deprecated_white,
+                      color: theme.white,
                       textDecoration: 'underline',
                     }}
                     href="https://uniswap.org/blog/uni"

src/pages/Vote/VotePage.tsx

@@ -69,7 +69,7 @@ const PageWrapper = styled(AutoColumn)`
 `
 
 const ProposalInfo = styled(AutoColumn)`
-  background: ${({ theme }) => theme.deprecated_bg0};
+  background: ${({ theme }) => theme.backgroundSurface};
   border-radius: 12px;
   padding: 1.5rem;
   position: relative;
@@ -82,10 +82,10 @@ const ArrowWrapper = styled(StyledInternalLink)`
   align-items: center;
   gap: 8px;
   height: 24px;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
 
   a {
-    color: ${({ theme }) => theme.deprecated_text1};
+    color: ${({ theme }) => theme.textPrimary};
     text-decoration: none;
   }
   :hover {
@@ -119,7 +119,7 @@ const ProgressWrapper = styled.div`
 const Progress = styled.div<{ status: 'for' | 'against'; percentageString?: string }>`
   height: 4px;
   border-radius: 4px;
-  background-color: ${({ theme, status }) => (status === 'for' ? theme.deprecated_green1 : theme.deprecated_red1)};
+  background-color: ${({ theme, status }) => (status === 'for' ? theme.accentSuccess : theme.accentFailure)};
   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.deprecated_blue1
+      return theme.accentAction
     case ProposalState.SUCCEEDED:
     case ProposalState.EXECUTED:
-      return theme.deprecated_green1
+      return theme.accentSuccess
     case ProposalState.DEFEATED:
-      return theme.deprecated_red1
+      return theme.accentFailure
     case ProposalState.QUEUED:
     case ProposalState.CANCELED:
     case ProposalState.EXPIRED:
     default:
-      return theme.deprecated_text3
+      return theme.textTertiary
   }
 }
 

src/theme/components/index.tsx

@@ -55,7 +55,7 @@ export const LinkStyledButton = styled.button<{ disabled?: boolean }>`
   background: none;
 
   cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
-  color: ${({ theme, disabled }) => (disabled ? theme.deprecated_text2 : theme.deprecated_primary1)};
+  color: ${({ theme, disabled }) => (disabled ? theme.textSecondary : theme.accentAction)};
   font-weight: 500;
 
   :hover {
@@ -435,7 +435,7 @@ export const SpinnerSVG = styled.svg`
 `
 
 const BackArrowLink = styled(StyledInternalLink)`
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
 `
 export function BackArrow({ to }: { to: string }) {
   return (

src/theme/components/text.tsx

@@ -51,22 +51,22 @@ export const ThemedText = {
     return <TextWrapper fontWeight={500} fontSize={14} color="textSecondary" {...props} />
   },
   DeprecatedMain(props: TextProps) {
-    return <TextWrapper fontWeight={500} color="deprecated_text2" {...props} />
+    return <TextWrapper fontWeight={500} color="textSecondary" {...props} />
   },
   DeprecatedLink(props: TextProps) {
-    return <TextWrapper fontWeight={500} color="deprecated_primary1" {...props} />
+    return <TextWrapper fontWeight={500} color="accentAction" {...props} />
   },
   DeprecatedLabel(props: TextProps) {
-    return <TextWrapper fontWeight={600} color="deprecated_text1" {...props} />
+    return <TextWrapper fontWeight={600} color="textPrimary" {...props} />
   },
   DeprecatedBlack(props: TextProps) {
-    return <TextWrapper fontWeight={500} color="deprecated_text1" {...props} />
+    return <TextWrapper fontWeight={500} color="textPrimary" {...props} />
   },
   DeprecatedWhite(props: TextProps) {
-    return <TextWrapper fontWeight={500} color="deprecated_white" {...props} />
+    return <TextWrapper fontWeight={500} color="white" {...props} />
   },
   DeprecatedBody(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={16} color="deprecated_text1" {...props} />
+    return <TextWrapper fontWeight={400} fontSize={16} color="textPrimary" {...props} />
   },
   DeprecatedLargeHeader(props: TextProps) {
     return <TextWrapper fontWeight={600} fontSize={24} {...props} />
@@ -81,21 +81,21 @@ export const ThemedText = {
     return <TextWrapper fontWeight={500} fontSize={11} {...props} />
   },
   DeprecatedBlue(props: TextProps) {
-    return <TextWrapper fontWeight={500} color="deprecated_blue1" {...props} />
+    return <TextWrapper fontWeight={500} color="accentAction" {...props} />
   },
   DeprecatedYellow(props: TextProps) {
     return <TextWrapper fontWeight={500} color="deprecated_yellow3" {...props} />
   },
   DeprecatedDarkGray(props: TextProps) {
-    return <TextWrapper fontWeight={500} color="deprecated_text3" {...props} />
+    return <TextWrapper fontWeight={500} color="textTertiary" {...props} />
   },
   DeprecatedGray(props: TextProps) {
     return <TextWrapper fontWeight={500} color="deprecated_bg3" {...props} />
   },
   DeprecatedItalic(props: TextProps) {
-    return <TextWrapper fontWeight={500} fontSize={12} fontStyle="italic" color="deprecated_text2" {...props} />
+    return <TextWrapper fontWeight={500} fontSize={12} fontStyle="italic" color="textSecondary" {...props} />
   },
   DeprecatedError({ error, ...props }: { error: boolean } & TextProps) {
-    return <TextWrapper fontWeight={500} color={error ? 'deprecated_red1' : 'deprecated_text2'} {...props} />
+    return <TextWrapper fontWeight={500} color={error ? 'accentFailure' : 'textSecondary'} {...props} />
   },
 }

src/theme/deprecatedColors.ts

-import { colors, darkTheme, lightTheme } from './colors'
+import { colors } from './colors'
 import { opacify } from './utils'
 
 function getDeprecatedTheme(darkMode: boolean) {
   return {
-    // base
-    deprecated_white: colors.white,
-    deprecated_black: colors.black,
-
     // text
-    deprecated_text1: darkMode ? darkTheme.textPrimary : lightTheme.textPrimary,
-    deprecated_text2: darkMode ? darkTheme.textSecondary : lightTheme.textSecondary,
-    deprecated_text3: darkMode ? darkTheme.textTertiary : lightTheme.textTertiary,
     deprecated_text4: darkMode ? colors.gray200 : colors.gray300,
-    deprecated_text5: darkMode ? colors.gray500 : colors.gray50,
 
     // backgrounds / grays
-    deprecated_bg0: darkMode ? colors.gray900 : colors.white,
+
+    // we could move this to `background`, but gray50 is a bit different from #FAFAFA
     deprecated_bg1: darkMode ? colors.gray800 : colors.gray50,
-    deprecated_bg2: darkMode ? colors.gray700 : colors.gray100,
+
     deprecated_bg3: darkMode ? colors.gray600 : colors.gray200,
     deprecated_bg4: darkMode ? colors.gray500 : colors.gray300,
     deprecated_bg5: darkMode ? colors.gray400 : colors.gray400,
-    deprecated_bg6: darkMode ? colors.gray300 : colors.gray500,
 
     //specialty colors
-    deprecated_modalBG: darkMode ? opacify(40, colors.black) : opacify(30, colors.black),
     deprecated_advancedBG: darkMode ? opacify(10, colors.black) : opacify(60, colors.white),
 
     //primary colors
-    deprecated_primary1: darkMode ? darkTheme.accentAction : lightTheme.accentAction,
     deprecated_primary2: darkMode ? colors.blue400 : colors.pink300,
     deprecated_primary3: darkMode ? colors.blue300 : colors.pink200,
     deprecated_primary4: darkMode ? '#376bad70' : '#F6DDE8',
     deprecated_primary5: darkMode ? '#153d6f70' : '#FDEAF1',
 
-    // color text
-    deprecated_primaryText1: darkMode ? darkTheme.accentAction : lightTheme.accentAction,
-
     // secondary colors
-    deprecated_secondary1: darkMode ? darkTheme.accentAction : lightTheme.accentAction,
     deprecated_secondary2: darkMode ? opacify(25, colors.gray900) : '#F6DDE8',
     deprecated_secondary3: darkMode ? opacify(25, colors.gray900) : '#FDEAF1',
 
     // other
-    deprecated_red1: darkMode ? darkTheme.accentFailure : lightTheme.accentFailure,
-    deprecated_red2: darkMode ? darkTheme.accentFailure : lightTheme.accentFailure,
-    deprecated_red3: darkMode ? darkTheme.accentFailure : lightTheme.accentFailure,
-    deprecated_green1: darkMode ? darkTheme.accentSuccess : lightTheme.accentSuccess,
     deprecated_yellow1: colors.yellow400,
     deprecated_yellow2: colors.yellow500,
     deprecated_yellow3: colors.yellow600,
-    deprecated_blue1: darkMode ? darkTheme.accentAction : lightTheme.accentAction,
-    deprecated_blue2: darkMode ? darkTheme.accentAction : lightTheme.accentAction,
-    deprecated_error: darkMode ? darkTheme.accentFailure : lightTheme.accentFailure,
-    deprecated_success: darkMode ? darkTheme.accentSuccess : lightTheme.accentSuccess,
-    deprecated_warning: darkMode ? darkTheme.accentWarning : lightTheme.accentWarning,
 
     // dont wanna forget these blue yet
     deprecated_blue4: darkMode ? '#153d6f70' : '#C4D9F8',

src/theme/index.tsx

@@ -108,7 +108,7 @@ export default function ThemeProvider({ children }: { children: React.ReactNode
 
 export const ThemedGlobalStyle = createGlobalStyle`
   html {
-    color: ${({ theme }) => theme.deprecated_text1};
+    color: ${({ theme }) => theme.textPrimary};
     background-color: ${({ theme }) => theme.background} !important;
   }
 
@@ -117,7 +117,7 @@ export const ThemedGlobalStyle = createGlobalStyle`
   }
 
   a {
-    color: ${({ theme }) => theme.deprecated_blue1}; 
+    color: ${({ theme }) => theme.accentAction}; 
   }
 
   :root {