style: Add Deprecated prefix to ThemedText components (#4192)

* Add Deprecated prefix to ThemedText components

* Fix lint errors

src/components/AccountDetails/index.tsx

@@ -339,9 +339,9 @@ export default function AccountDetails({
       {!!pendingTransactions.length || !!confirmedTransactions.length ? (
         <LowerSection>
           <AutoRow mb={'1rem'} style={{ justifyContent: 'space-between' }}>
-            <ThemedText.Body>
+            <ThemedText.DeprecatedBody>
               <Trans>Recent Transactions</Trans>
-            </ThemedText.Body>
+            </ThemedText.DeprecatedBody>
             <LinkStyledButton onClick={clearAllTransactionsCallback}>
               <Trans>(clear all)</Trans>
             </LinkStyledButton>
@@ -351,9 +351,9 @@ export default function AccountDetails({
         </LowerSection>
       ) : (
         <LowerSection>
-          <ThemedText.Body color={theme.deprecated_text1}>
+          <ThemedText.DeprecatedBody color={theme.deprecated_text1}>
             <Trans>Your transactions will appear here...</Trans>
-          </ThemedText.Body>
+          </ThemedText.DeprecatedBody>
         </LowerSection>
       )}
     </>

src/components/AddressInputPanel/index.tsx

@@ -108,9 +108,9 @@ export default function AddressInputPanel({
         <InputContainer>
           <AutoColumn gap="md">
             <RowBetween>
-              <ThemedText.Black color={theme.deprecated_text2} fontWeight={500} fontSize={14}>
+              <ThemedText.DeprecatedBlack color={theme.deprecated_text2} fontWeight={500} fontSize={14}>
                 {label ?? <Trans>Recipient</Trans>}
-              </ThemedText.Black>
+              </ThemedText.DeprecatedBlack>
               {address && chainId && (
                 <ExternalLink
                   href={getExplorerLink(chainId, name ?? address, ExplorerDataType.ADDRESS)}

src/components/ConnectedAccountBlocked/index.tsx

@@ -33,22 +33,22 @@ export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedPr
     <Modal isOpen={props.isOpen} onDismiss={Function.prototype()}>
       <ContentWrapper>
         <WarningIcon />
-        <ThemedText.LargeHeader lineHeight={2} marginBottom={1} marginTop={1}>
+        <ThemedText.DeprecatedLargeHeader lineHeight={2} marginBottom={1} marginTop={1}>
           <Trans>Blocked Address</Trans>
-        </ThemedText.LargeHeader>
-        <ThemedText.DarkGray fontSize={12} marginBottom={12}>
+        </ThemedText.DeprecatedLargeHeader>
+        <ThemedText.DeprecatedDarkGray fontSize={12} marginBottom={12}>
           {props.account}
-        </ThemedText.DarkGray>
-        <ThemedText.Main fontSize={14} marginBottom={12}>
+        </ThemedText.DeprecatedDarkGray>
+        <ThemedText.DeprecatedMain fontSize={14} marginBottom={12}>
           <Trans>This address is blocked on the Uniswap Labs interface because it is associated with one or more</Trans>{' '}
           <ExternalLink href="https://help.uniswap.org/en/articles/6149816">
             <Trans>blocked activities</Trans>
           </ExternalLink>
           .
-        </ThemedText.Main>
-        <ThemedText.Main fontSize={12}>
+        </ThemedText.DeprecatedMain>
+        <ThemedText.DeprecatedMain fontSize={12}>
           <Trans>If you believe this is an error, please send an email including your address to </Trans>{' '}
-        </ThemedText.Main>
+        </ThemedText.DeprecatedMain>
         <Copy iconSize={12} toCopy="compliance@uniswap.org" color={theme.deprecated_primary1} iconPosition="right">
           compliance@uniswap.org
         </Copy>

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -31,7 +31,7 @@ export function FiatValue({
   const visibleDecimalPlaces = p < 1.05 ? 4 : 2
 
   return (
-    <ThemedText.Body fontSize={14} color={fiatValue ? theme.deprecated_text3 : theme.deprecated_text4}>
+    <ThemedText.DeprecatedBody fontSize={14} color={fiatValue ? theme.deprecated_text3 : theme.deprecated_text4}>
       {fiatValue ? (
         <Trans>
           $
@@ -51,6 +51,6 @@ export function FiatValue({
           </MouseoverTooltip>
         </span>
       ) : null}
-    </ThemedText.Body>
+    </ThemedText.DeprecatedBody>
   )
 }

src/components/CurrencyInputPanel/index.tsx

@@ -232,9 +232,9 @@ export default function CurrencyInputPanel({
         <FixedContainer>
           <AutoColumn gap="sm" justify="center">
             <Lock />
-            <ThemedText.Label fontSize="12px" textAlign="center" padding="0 12px">
+            <ThemedText.DeprecatedLabel fontSize="12px" textAlign="center" padding="0 12px">
               <Trans>The market price is outside your specified price range. Single-asset deposit only.</Trans>
-            </ThemedText.Label>
+            </ThemedText.DeprecatedLabel>
           </AutoColumn>
         </FixedContainer>
       )}
@@ -297,7 +297,7 @@ export default function CurrencyInputPanel({
               </LoadingOpacityContainer>
               {account ? (
                 <RowFixed style={{ height: '17px' }}>
-                  <ThemedText.Body
+                  <ThemedText.DeprecatedBody
                     onClick={onMax}
                     color={theme.deprecated_text3}
                     fontWeight={500}
@@ -311,7 +311,7 @@ export default function CurrencyInputPanel({
                         <Trans>Balance: {formatCurrencyAmount(selectedCurrencyBalance, 4)}</Trans>
                       )
                     ) : null}
-                  </ThemedText.Body>
+                  </ThemedText.DeprecatedBody>
                   {showMaxButton && selectedCurrencyBalance ? (
                     <TraceEvent
                       events={[Event.onClick]}

src/components/ErrorBoundary/index.tsx

@@ -101,13 +101,13 @@ export default class ErrorBoundary extends React.Component<PropsWithChildren<unk
           <BodyWrapper>
             <AutoColumn gap={'md'}>
               <SomethingWentWrongWrapper>
-                <ThemedText.Label fontSize={24} fontWeight={600}>
+                <ThemedText.DeprecatedLabel fontSize={24} fontWeight={600}>
                   <Trans>Something went wrong</Trans>
-                </ThemedText.Label>
+                </ThemedText.DeprecatedLabel>
               </SomethingWentWrongWrapper>
               <CodeBlockWrapper>
                 <code>
-                  <ThemedText.Main fontSize={10}>{error.stack}</ThemedText.Main>
+                  <ThemedText.DeprecatedMain fontSize={10}>{error.stack}</ThemedText.DeprecatedMain>
                 </code>
               </CodeBlockWrapper>
               {IS_UNISWAP ? (
@@ -120,18 +120,18 @@ export default class ErrorBoundary extends React.Component<PropsWithChildren<unk
                       )}`}
                       target="_blank"
                     >
-                      <ThemedText.Link fontSize={16}>
+                      <ThemedText.DeprecatedLink fontSize={16}>
                         <Trans>Create an issue on GitHub</Trans>
                         <span>↗</span>
-                      </ThemedText.Link>
+                      </ThemedText.DeprecatedLink>
                     </ExternalLink>
                   </LinkWrapper>
                   <LinkWrapper>
                     <ExternalLink id="get-support-on-discord" href="https://discord.gg/FCfyBSbCU5" target="_blank">
-                      <ThemedText.Link fontSize={16}>
+                      <ThemedText.DeprecatedLink fontSize={16}>
                         <Trans>Get support on Discord</Trans>
                         <span>↗</span>
-                      </ThemedText.Link>
+                      </ThemedText.DeprecatedLink>
                     </ExternalLink>
                   </LinkWrapper>
                 </AutoRow>

src/components/FeeSelector/FeeOption.tsx

@@ -11,7 +11,7 @@ import { ThemedText } from 'theme'
 import { FeeTierPercentageBadge } from './FeeTierPercentageBadge'
 import { FEE_AMOUNT_DETAIL } from './shared'
 
-const ResponsiveText = styled(ThemedText.Label)`
+const ResponsiveText = styled(ThemedText.DeprecatedLabel)`
   line-height: 16px;
   font-size: 14px;
 
@@ -37,9 +37,9 @@ export function FeeOption({ feeAmount, active, poolState, distributions, onClick
           <ResponsiveText>
             <Trans>{FEE_AMOUNT_DETAIL[feeAmount].label}%</Trans>
           </ResponsiveText>
-          <ThemedText.Main fontWeight={400} fontSize="12px" textAlign="left">
+          <ThemedText.DeprecatedMain fontWeight={400} fontSize="12px" textAlign="left">
             {FEE_AMOUNT_DETAIL[feeAmount].description}
-          </ThemedText.Main>
+          </ThemedText.DeprecatedMain>
         </AutoColumn>
 
         {distributions && (

src/components/FeeSelector/FeeTierPercentageBadge.tsx

@@ -17,7 +17,7 @@ export function FeeTierPercentageBadge({
 }) {
   return (
     <Badge>
-      <ThemedText.Label fontSize={10}>
+      <ThemedText.DeprecatedLabel fontSize={10}>
         {!distributions || poolState === PoolState.NOT_EXISTS || poolState === PoolState.INVALID ? (
           <Trans>Not created</Trans>
         ) : distributions[feeAmount] !== undefined ? (
@@ -25,7 +25,7 @@ export function FeeTierPercentageBadge({
         ) : (
           <Trans>No data</Trans>
         )}
-      </ThemedText.Label>
+      </ThemedText.DeprecatedLabel>
     </Badge>
   )
 }

src/components/FeeSelector/index.tsx

@@ -149,18 +149,18 @@ export default function FeeSelector({
             <AutoColumn id="add-liquidity-selected-fee">
               {!feeAmount ? (
                 <>
-                  <ThemedText.Label>
+                  <ThemedText.DeprecatedLabel>
                     <Trans>Fee tier</Trans>
-                  </ThemedText.Label>
-                  <ThemedText.Main fontWeight={400} fontSize="12px" textAlign="left">
+                  </ThemedText.DeprecatedLabel>
+                  <ThemedText.DeprecatedMain fontWeight={400} fontSize="12px" textAlign="left">
                     <Trans>The % you will earn in fees.</Trans>
-                  </ThemedText.Main>
+                  </ThemedText.DeprecatedMain>
                 </>
               ) : (
                 <>
-                  <ThemedText.Label className="selected-fee-label">
+                  <ThemedText.DeprecatedLabel className="selected-fee-label">
                     <Trans>{FEE_AMOUNT_DETAIL[feeAmount].label}% fee tier</Trans>
-                  </ThemedText.Label>
+                  </ThemedText.DeprecatedLabel>
                   <Box style={{ width: 'fit-content', marginTop: '8px' }} className="selected-fee-percentage">
                     {distributions && (
                       <FeeTierPercentageBadge

src/components/Header/Polling.tsx

@@ -31,7 +31,7 @@ const StyledPolling = styled.div<{ warning: boolean }>`
     display: none;
   `}
 `
-const StyledPollingNumber = styled(ThemedText.Small)<{ breathe: boolean; hovering: boolean }>`
+const StyledPollingNumber = styled(ThemedText.DeprecatedSmall)<{ breathe: boolean; hovering: boolean }>`
   transition: opacity 0.25s ease;
   opacity: ${({ breathe, hovering }) => (hovering ? 0.7 : breathe ? 1 : 0.5)};
   :hover {
@@ -143,7 +143,7 @@ export default function Polling() {
           <ExternalLink href={'https://etherscan.io/gastracker'}>
             {priceGwei ? (
               <RowFixed style={{ marginRight: '8px' }}>
-                <ThemedText.Main fontSize="11px" mr="8px" color={theme.deprecated_text3}>
+                <ThemedText.DeprecatedMain fontSize="11px" mr="8px" color={theme.deprecated_text3}>
                   <MouseoverTooltip
                     text={
                       <Trans>
@@ -154,7 +154,7 @@ export default function Polling() {
                   >
                     {priceGwei.toString()} <Trans>gwei</Trans>
                   </MouseoverTooltip>
-                </ThemedText.Main>
+                </ThemedText.DeprecatedMain>
                 <StyledGasDot />
               </RowFixed>
             ) : null}

src/components/Header/index.tsx

@@ -316,7 +316,7 @@ export default function Header() {
           {availableClaim && !showClaimPopup && (
             <UNIWrapper onClick={toggleClaimModal}>
               <UNIAmount active={!!account && !availableClaim} style={{ pointerEvents: 'auto' }}>
-                <ThemedText.White padding="0 2px">
+                <ThemedText.DeprecatedWhite padding="0 2px">
                   {claimTxn && !claimTxn?.receipt ? (
                     <Dots>
                       <Trans>Claiming UNI</Trans>
@@ -324,7 +324,7 @@ export default function Header() {
                   ) : (
                     <Trans>Claim UNI</Trans>
                   )}
-                </ThemedText.White>
+                </ThemedText.DeprecatedWhite>
               </UNIAmount>
               <CardNoise />
             </UNIWrapper>

src/components/InputStepCounter/InputStepCounter.tsx

@@ -57,13 +57,13 @@ const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
   `};
 `
 
-const InputTitle = styled(ThemedText.Small)`
+const InputTitle = styled(ThemedText.DeprecatedSmall)`
   color: ${({ theme }) => theme.deprecated_text2};
   font-size: 12px;
   font-weight: 500;
 `
 
-const ButtonLabel = styled(ThemedText.White)<{ disabled: boolean }>`
+const ButtonLabel = styled(ThemedText.DeprecatedWhite)<{ disabled: boolean }>`
   color: ${({ theme, disabled }) => (disabled ? theme.deprecated_text2 : theme.deprecated_text1)} !important;
 `
 

src/components/LiquidityChartRangeInput/index.tsx

@@ -58,9 +58,9 @@ function InfoBox({ message, icon }: { message?: ReactNode; icon: ReactNode }) {
     <ColumnCenter style={{ height: '100%', justifyContent: 'center' }}>
       {icon}
       {message && (
-        <ThemedText.MediumHeader padding={10} marginTop="20px" textAlign="center">
+        <ThemedText.DeprecatedMediumHeader padding={10} marginTop="20px" textAlign="center">
           {message}
-        </ThemedText.MediumHeader>
+        </ThemedText.DeprecatedMediumHeader>
       )}
     </ColumnCenter>
   )

src/components/ModalViews/index.tsx

@@ -32,9 +32,9 @@ export function LoadingView({ children, onDismiss }: { children: any; onDismiss:
       </ConfirmedIcon>
       <AutoColumn gap="100px" justify={'center'}>
         {children}
-        <ThemedText.SubHeader>
+        <ThemedText.DeprecatedSubHeader>
           <Trans>Confirm this transaction in your wallet</Trans>
-        </ThemedText.SubHeader>
+        </ThemedText.DeprecatedSubHeader>
       </AutoColumn>
     </ConfirmOrLoadingWrapper>
   )
@@ -68,9 +68,9 @@ export function SubmittedView({
             href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}
             style={{ marginLeft: '4px' }}
           >
-            <ThemedText.SubHeader>
+            <ThemedText.DeprecatedSubHeader>
               <Trans>View transaction on Explorer</Trans>
-            </ThemedText.SubHeader>
+            </ThemedText.DeprecatedSubHeader>
           </ExternalLink>
         )}
       </AutoColumn>

src/components/NavigationTabs/index.tsx

@@ -94,7 +94,7 @@ export function AddRemoveTabs({
         >
           <StyledArrowLeft stroke={theme.deprecated_text2} />
         </StyledHistoryLink>
-        <ThemedText.MediumHeader
+        <ThemedText.DeprecatedMediumHeader
           fontWeight={500}
           fontSize={20}
           style={{ flex: '1', margin: 'auto', textAlign: children ? 'start' : 'center' }}
@@ -106,7 +106,7 @@ export function AddRemoveTabs({
           ) : (
             <Trans>Remove Liquidity</Trans>
           )}
-        </ThemedText.MediumHeader>
+        </ThemedText.DeprecatedMediumHeader>
         <Box style={{ marginRight: '.5rem' }}>{children}</Box>
         <SettingsTab placeholderSlippage={defaultSlippage} />
       </RowBetween>

src/components/Popups/ClaimPopup.tsx

@@ -98,10 +98,14 @@ export default function ClaimPopup() {
           <StyledClose stroke="white" onClick={toggleShowClaimPopup} />
           <AutoColumn style={{ padding: '2rem 0', zIndex: 10 }} justify="center">
             <UniToken width="48px" src={tokenLogo} />{' '}
-            <ThemedText.White style={{ marginTop: '1rem' }} fontSize={36} fontWeight={600}>
+            <ThemedText.DeprecatedWhite style={{ marginTop: '1rem' }} fontSize={36} fontWeight={600}>
               {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
-            </ThemedText.White>
-            <ThemedText.White style={{ paddingTop: '1.25rem', textAlign: 'center' }} fontWeight={600} color="white">
+            </ThemedText.DeprecatedWhite>
+            <ThemedText.DeprecatedWhite
+              style={{ paddingTop: '1.25rem', textAlign: 'center' }}
+              fontWeight={600}
+              color="white"
+            >
               <span role="img" aria-label="party">
                 🎉
               </span>{' '}
@@ -109,12 +113,12 @@ export default function ClaimPopup() {
               <span role="img" aria-label="party">
                 🎉
               </span>
-            </ThemedText.White>
-            <ThemedText.SubHeader style={{ paddingTop: '0.5rem', textAlign: 'center' }} color="white">
+            </ThemedText.DeprecatedWhite>
+            <ThemedText.DeprecatedSubHeader style={{ paddingTop: '0.5rem', textAlign: 'center' }} color="white">
               <Trans>
                 Thanks for being part of the Uniswap community <Heart size={12} />
               </Trans>
-            </ThemedText.SubHeader>
+            </ThemedText.DeprecatedSubHeader>
           </AutoColumn>
           <AutoColumn style={{ zIndex: 10 }} justify="center">
             <ButtonPrimary padding="8px" $borderRadius="8px" width={'fit-content'} onClick={handleToggleSelfClaimModal}>

src/components/Popups/FailedNetworkSwitchPopup.tsx

@@ -23,12 +23,12 @@ export default function FailedNetworkSwitchPopup({ chainId }: { chainId: Support
         <AlertCircle color={theme.deprecated_red1} size={24} />
       </div>
       <AutoColumn gap="8px">
-        <ThemedText.Body fontWeight={500}>
+        <ThemedText.DeprecatedBody fontWeight={500}>
           <Trans>
             Failed to switch networks from the Uniswap Interface. In order to use Uniswap on {chainInfo.label}, you must
             change the network in your wallet.
           </Trans>
-        </ThemedText.Body>
+        </ThemedText.DeprecatedBody>
       </AutoColumn>
     </RowNoFlex>
   )

src/components/Popups/SurveyPopup.tsx

@@ -91,19 +91,19 @@ export default function SurveyPopup() {
           <ExternalLink href="https://www.surveymonkey.com/r/YGWV9VD">
             <RowFixed>
               <MessageCircle stroke={theme.deprecated_black} size="20px" strokeWidth="1px" />
-              <ThemedText.White fontWeight={600} color={theme.deprecated_black} ml="6px">
+              <ThemedText.DeprecatedWhite fontWeight={600} color={theme.deprecated_black} ml="6px">
                 <Trans>Tell us what you think ↗</Trans>
-              </ThemedText.White>
+              </ThemedText.DeprecatedWhite>
             </RowFixed>
           </ExternalLink>
-          <ThemedText.Black
+          <ThemedText.DeprecatedBlack
             style={{ zIndex: Z_INDEX.fixed }}
             fontWeight={400}
             fontSize="12px"
             color={theme.deprecated_black}
           >
             <Trans>Take a 10 minute survey to help us improve your experience in the Uniswap app.</Trans>
-          </ThemedText.Black>
+          </ThemedText.DeprecatedBlack>
         </Wrapper>
       )}
     </>

src/components/Popups/TransactionPopup.tsx

@@ -34,9 +34,9 @@ export default function TransactionPopup({ hash }: { hash: string }) {
         )}
       </div>
       <AutoColumn gap="8px">
-        <ThemedText.Body fontWeight={500}>
+        <ThemedText.DeprecatedBody fontWeight={500}>
           <TransactionSummary info={tx.info} />
-        </ThemedText.Body>
+        </ThemedText.DeprecatedBody>
         {chainId && (
           <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
             View on Explorer

src/components/PositionCard/index.tsx

@@ -142,7 +142,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
         </GreyCard>
       ) : (
         <LightCard>
-          <ThemedText.SubHeader style={{ textAlign: 'center' }}>
+          <ThemedText.DeprecatedSubHeader style={{ textAlign: 'center' }}>
             <span role="img" aria-label="wizard-icon">
               ⭐️
             </span>{' '}
@@ -150,7 +150,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
               By adding liquidity you&apos;ll earn 0.3% of all trades on this pair proportional to your share of the
               pool. Fees are added to the pool, accrue in real time and can be claimed by withdrawing your liquidity.
             </Trans>{' '}
-          </ThemedText.SubHeader>
+          </ThemedText.DeprecatedSubHeader>
         </LightCard>
       )}
     </>

src/components/PositionPreview/index.tsx

@@ -70,9 +70,9 @@ export const PositionPreview = ({
             size={24}
             margin={true}
           />
-          <ThemedText.Label ml="10px" fontSize="24px">
+          <ThemedText.DeprecatedLabel ml="10px" fontSize="24px">
             {currency0?.symbol} / {currency1?.symbol}
-          </ThemedText.Label>
+          </ThemedText.DeprecatedLabel>
         </RowFixed>
         <RangeBadge removed={removed} inRange={inRange} />
       </RowBetween>
@@ -82,36 +82,36 @@ export const PositionPreview = ({
           <RowBetween>
             <RowFixed>
               <CurrencyLogo currency={currency0} />
-              <ThemedText.Label ml="8px">{currency0?.symbol}</ThemedText.Label>
+              <ThemedText.DeprecatedLabel ml="8px">{currency0?.symbol}</ThemedText.DeprecatedLabel>
             </RowFixed>
             <RowFixed>
-              <ThemedText.Label mr="8px">{position.amount0.toSignificant(4)}</ThemedText.Label>
+              <ThemedText.DeprecatedLabel mr="8px">{position.amount0.toSignificant(4)}</ThemedText.DeprecatedLabel>
             </RowFixed>
           </RowBetween>
           <RowBetween>
             <RowFixed>
               <CurrencyLogo currency={currency1} />
-              <ThemedText.Label ml="8px">{currency1?.symbol}</ThemedText.Label>
+              <ThemedText.DeprecatedLabel ml="8px">{currency1?.symbol}</ThemedText.DeprecatedLabel>
             </RowFixed>
             <RowFixed>
-              <ThemedText.Label mr="8px">{position.amount1.toSignificant(4)}</ThemedText.Label>
+              <ThemedText.DeprecatedLabel mr="8px">{position.amount1.toSignificant(4)}</ThemedText.DeprecatedLabel>
             </RowFixed>
           </RowBetween>
           <Break />
           <RowBetween>
-            <ThemedText.Label>
+            <ThemedText.DeprecatedLabel>
               <Trans>Fee Tier</Trans>
-            </ThemedText.Label>
-            <ThemedText.Label>
+            </ThemedText.DeprecatedLabel>
+            <ThemedText.DeprecatedLabel>
               <Trans>{position?.pool?.fee / 10000}%</Trans>
-            </ThemedText.Label>
+            </ThemedText.DeprecatedLabel>
           </RowBetween>
         </AutoColumn>
       </LightCard>
 
       <AutoColumn gap="md">
         <RowBetween>
-          {title ? <ThemedText.Main>{title}</ThemedText.Main> : <div />}
+          {title ? <ThemedText.DeprecatedMain>{title}</ThemedText.DeprecatedMain> : <div />}
           <RateToggle
             currencyA={sorted ? currency0 : currency1}
             currencyB={sorted ? currency1 : currency0}
@@ -122,57 +122,65 @@ export const PositionPreview = ({
         <RowBetween>
           <LightCard width="48%" padding="8px">
             <AutoColumn gap="4px" justify="center">
-              <ThemedText.Main fontSize="12px">
+              <ThemedText.DeprecatedMain fontSize="12px">
                 <Trans>Min Price</Trans>
-              </ThemedText.Main>
-              <ThemedText.MediumHeader textAlign="center">{`${formatTickPrice(
+              </ThemedText.DeprecatedMain>
+              <ThemedText.DeprecatedMediumHeader textAlign="center">{`${formatTickPrice(
                 priceLower,
                 ticksAtLimit,
                 Bound.LOWER
-              )}`}</ThemedText.MediumHeader>
-              <ThemedText.Main textAlign="center" fontSize="12px">
+              )}`}</ThemedText.DeprecatedMediumHeader>
+              <ThemedText.DeprecatedMain textAlign="center" fontSize="12px">
                 <Trans>
                   {quoteCurrency.symbol} per {baseCurrency.symbol}
                 </Trans>
-              </ThemedText.Main>
-              <ThemedText.Small textAlign="center" color={theme.deprecated_text3} style={{ marginTop: '4px' }}>
+              </ThemedText.DeprecatedMain>
+              <ThemedText.DeprecatedSmall
+                textAlign="center"
+                color={theme.deprecated_text3}
+                style={{ marginTop: '4px' }}
+              >
                 <Trans>Your position will be 100% composed of {baseCurrency?.symbol} at this price</Trans>
-              </ThemedText.Small>
+              </ThemedText.DeprecatedSmall>
             </AutoColumn>
           </LightCard>
 
           <LightCard width="48%" padding="8px">
             <AutoColumn gap="4px" justify="center">
-              <ThemedText.Main fontSize="12px">
+              <ThemedText.DeprecatedMain fontSize="12px">
                 <Trans>Max Price</Trans>
-              </ThemedText.Main>
-              <ThemedText.MediumHeader textAlign="center">{`${formatTickPrice(
+              </ThemedText.DeprecatedMain>
+              <ThemedText.DeprecatedMediumHeader textAlign="center">{`${formatTickPrice(
                 priceUpper,
                 ticksAtLimit,
                 Bound.UPPER
-              )}`}</ThemedText.MediumHeader>
-              <ThemedText.Main textAlign="center" fontSize="12px">
+              )}`}</ThemedText.DeprecatedMediumHeader>
+              <ThemedText.DeprecatedMain textAlign="center" fontSize="12px">
                 <Trans>
                   {quoteCurrency.symbol} per {baseCurrency.symbol}
                 </Trans>
-              </ThemedText.Main>
-              <ThemedText.Small textAlign="center" color={theme.deprecated_text3} style={{ marginTop: '4px' }}>
+              </ThemedText.DeprecatedMain>
+              <ThemedText.DeprecatedSmall
+                textAlign="center"
+                color={theme.deprecated_text3}
+                style={{ marginTop: '4px' }}
+              >
                 <Trans>Your position will be 100% composed of {quoteCurrency?.symbol} at this price</Trans>
-              </ThemedText.Small>
+              </ThemedText.DeprecatedSmall>
             </AutoColumn>
           </LightCard>
         </RowBetween>
         <LightCard padding="12px ">
           <AutoColumn gap="4px" justify="center">
-            <ThemedText.Main fontSize="12px">
+            <ThemedText.DeprecatedMain fontSize="12px">
               <Trans>Current price</Trans>
-            </ThemedText.Main>
-            <ThemedText.MediumHeader>{`${price.toSignificant(5)} `}</ThemedText.MediumHeader>
-            <ThemedText.Main textAlign="center" fontSize="12px">
+            </ThemedText.DeprecatedMain>
+            <ThemedText.DeprecatedMediumHeader>{`${price.toSignificant(5)} `}</ThemedText.DeprecatedMediumHeader>
+            <ThemedText.DeprecatedMain textAlign="center" fontSize="12px">
               <Trans>
                 {quoteCurrency.symbol} per {baseCurrency.symbol}
               </Trans>
-            </ThemedText.Main>
+            </ThemedText.DeprecatedMain>
           </AutoColumn>
         </LightCard>
       </AutoColumn>

src/components/PrivacyPolicy/index.tsx

@@ -97,9 +97,9 @@ export function PrivacyPolicyModal() {
     <Modal isOpen={open} onDismiss={() => toggle()}>
       <AutoColumn gap="12px" ref={node as any}>
         <RowBetween padding="1rem 1rem 0.5rem 1rem">
-          <ThemedText.MediumHeader>
+          <ThemedText.DeprecatedMediumHeader>
             <Trans>Legal & Privacy</Trans>
-          </ThemedText.MediumHeader>
+          </ThemedText.DeprecatedMediumHeader>
           <HoverText onClick={() => toggle()}>
             <X size={24} />
           </HoverText>
@@ -128,9 +128,9 @@ export function PrivacyPolicy() {
               <RowBetween>
                 <AutoRow gap="4px">
                   <Info size={20} />
-                  <ThemedText.Main fontSize={14} color={'deprecated_primaryText1'}>
+                  <ThemedText.DeprecatedMain fontSize={14} color={'deprecated_primaryText1'}>
                     <Trans>Uniswap Labs&apos; Terms of Service</Trans>
-                  </ThemedText.Main>
+                  </ThemedText.DeprecatedMain>
                 </AutoRow>
                 <StyledLinkOut size={20} />
               </RowBetween>
@@ -141,39 +141,39 @@ export function PrivacyPolicy() {
               <RowBetween>
                 <AutoRow gap="4px">
                   <Info size={20} />
-                  <ThemedText.Main fontSize={14} color={'deprecated_primaryText1'}>
+                  <ThemedText.DeprecatedMain fontSize={14} color={'deprecated_primaryText1'}>
                     <Trans>Protocol Disclaimer</Trans>
-                  </ThemedText.Main>
+                  </ThemedText.DeprecatedMain>
                 </AutoRow>
                 <StyledLinkOut size={20} />
               </RowBetween>
             </ExternalLink>
           </StyledExternalCard>
         </AutoColumn>
-        <ThemedText.Main fontSize={14}>
+        <ThemedText.DeprecatedMain fontSize={14}>
           <Trans>This app uses the following third-party APIs:</Trans>
-        </ThemedText.Main>
+        </ThemedText.DeprecatedMain>
         <AutoColumn gap="12px">
           {EXTERNAL_APIS.map(({ name, description }, i) => (
             <DarkGreyCard key={i}>
               <AutoColumn gap="8px">
                 <AutoRow gap="4px">
                   <Info size={18} />
-                  <ThemedText.Main fontSize={14} color={'deprecated_text1'}>
+                  <ThemedText.DeprecatedMain fontSize={14} color={'deprecated_text1'}>
                     {name}
-                  </ThemedText.Main>
+                  </ThemedText.DeprecatedMain>
                 </AutoRow>
-                <ThemedText.Main fontSize={14}>{description}</ThemedText.Main>
+                <ThemedText.DeprecatedMain fontSize={14}>{description}</ThemedText.DeprecatedMain>
               </AutoColumn>
             </DarkGreyCard>
           ))}
-          <ThemedText.Body fontSize={12}>
+          <ThemedText.DeprecatedBody fontSize={12}>
             <Row justify="center" marginBottom="1rem">
               <ExternalLink href="https://help.uniswap.org/en/articles/5675203-terms-of-service-faq">
                 <Trans>Learn more</Trans>
               </ExternalLink>
             </Row>
-          </ThemedText.Body>
+          </ThemedText.DeprecatedBody>
         </AutoColumn>
       </AutoColumn>
     </Wrapper>

src/components/ProgressSteps/index.tsx

@@ -65,7 +65,7 @@ export default function ProgressCircles({ steps, disabled = false, ...rest }: Pr
               <Circle confirmed={step} disabled={disabled || (!steps[i - 1] && i !== 0)}>
                 {step ? '✓' : i + 1 + '.'}
               </Circle>
-              <ThemedText.Main color={theme.deprecated_text4}>|</ThemedText.Main>
+              <ThemedText.DeprecatedMain color={theme.deprecated_text4}>|</ThemedText.DeprecatedMain>
             </CircleRow>
           )
         })}

src/components/RangeSelector/PresetsButtons.tsx

@@ -26,9 +26,9 @@ export default function PresetsButtons({ setFullRange }: { setFullRange: () => v
           })
         }}
       >
-        <ThemedText.Body fontSize={12}>
+        <ThemedText.DeprecatedBody fontSize={12}>
           <Trans>Full Range</Trans>
-        </ThemedText.Body>
+        </ThemedText.DeprecatedBody>
       </Button>
     </AutoRow>
   )

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -73,7 +73,7 @@ const ProtocolBadge = styled(Badge)`
   z-index: ${Z_INDEX.sticky + 1};
 `
 
-const BadgeText = styled(ThemedText.Small)`
+const BadgeText = styled(ThemedText.DeprecatedSmall)`
   word-break: normal;
 `
 
@@ -138,7 +138,7 @@ function Pool({ currency0, currency1, feeAmount }: { currency0: Currency; curren
         <Box margin="0 4px 0 12px">
           <DoubleCurrencyLogo currency0={tokenInfo1} currency1={tokenInfo0} size={20} />
         </Box>
-        <ThemedText.Small fontSize={14}>{feeAmount / 10000}%</ThemedText.Small>
+        <ThemedText.DeprecatedSmall fontSize={14}>{feeAmount / 10000}%</ThemedText.DeprecatedSmall>
       </PoolBadge>
     </MouseoverTooltip>
   )

src/components/SearchModal/BlockedToken.tsx

@@ -22,7 +22,7 @@ const Button = styled(ButtonPrimary)`
 const Content = styled.div`
   padding: 1em;
 `
-const Copy = styled(ThemedText.Body)`
+const Copy = styled(ThemedText.DeprecatedBody)`
   text-align: center;
   margin: 0 2em 1em !important;
   font-weight: 400;
@@ -51,9 +51,9 @@ const BlockedToken = ({ onBack, onDismiss, blockedTokens }: BlockedTokenProps) =
   <Wrapper>
     <Header>
       {onBack ? <ArrowLeft style={{ cursor: 'pointer' }} onClick={onBack} /> : <div />}
-      <ThemedText.MediumHeader>
+      <ThemedText.DeprecatedMediumHeader>
         <Trans>Token not supported</Trans>
-      </ThemedText.MediumHeader>
+      </ThemedText.DeprecatedMediumHeader>
       {onDismiss ? <CloseIcon onClick={onDismiss} /> : <div />}
     </Header>
     <Icon />

src/components/SearchModal/CurrencyList/index.tsx

@@ -147,13 +147,13 @@ function CurrencyRow({
           <Text title={currency.name} fontWeight={500}>
             {currency.symbol}
           </Text>
-          <ThemedText.DarkGray ml="0px" fontSize={'12px'} fontWeight={300}>
+          <ThemedText.DeprecatedDarkGray ml="0px" fontSize={'12px'} fontWeight={300}>
             {!currency.isNative && !isOnSelectedList && customAdded ? (
               <Trans>{currency.name} • Added by user</Trans>
             ) : (
               currency.name
             )}
-          </ThemedText.DarkGray>
+          </ThemedText.DeprecatedDarkGray>
         </Column>
         <TokenTags currency={currency} />
         {showCurrencyAmount && (
@@ -180,9 +180,9 @@ function BreakLineComponent({ style }: { style: CSSProperties }) {
         <RowBetween>
           <RowFixed>
             <TokenListLogoWrapper src={TokenListLogo} />
-            <ThemedText.Main ml="6px" fontSize="12px" color={theme.deprecated_text1}>
+            <ThemedText.DeprecatedMain ml="6px" fontSize="12px" color={theme.deprecated_text1}>
               <Trans>Expanded results from inactive Token Lists</Trans>
-            </ThemedText.Main>
+            </ThemedText.DeprecatedMain>
           </RowFixed>
           <QuestionHelper
             text={

src/components/SearchModal/CurrencySearch.tsx

@@ -251,9 +251,9 @@ export function CurrencySearch({
           </div>
         ) : (
           <Column style={{ padding: '20px', height: '100%' }}>
-            <ThemedText.Main color={theme.deprecated_text3} textAlign="center" mb="20px">
+            <ThemedText.DeprecatedMain color={theme.deprecated_text3} textAlign="center" mb="20px">
               <Trans>No results found.</Trans>
-            </ThemedText.Main>
+            </ThemedText.DeprecatedMain>
           </Column>
         )}
         <Footer>
@@ -263,9 +263,9 @@ export function CurrencySearch({
                 <IconWrapper size="16px" marginRight="6px" stroke={theme.deprecated_primaryText1}>
                   <Edit />
                 </IconWrapper>
-                <ThemedText.Main color={theme.deprecated_primaryText1}>
+                <ThemedText.DeprecatedMain color={theme.deprecated_primaryText1}>
                   <Trans>Manage Token Lists</Trans>
-                </ThemedText.Main>
+                </ThemedText.DeprecatedMain>
               </RowFixed>
             </ButtonText>
           </Row>

src/components/SearchModal/ImportList.tsx

@@ -81,9 +81,9 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
       <PaddedColumn gap="14px" style={{ width: '100%', flex: '1 1' }}>
         <RowBetween>
           <ArrowLeft style={{ cursor: 'pointer' }} onClick={() => setModalView(CurrencyModalView.manage)} />
-          <ThemedText.MediumHeader>
+          <ThemedText.DeprecatedMediumHeader>
             <Trans>Import List</Trans>
-          </ThemedText.MediumHeader>
+          </ThemedText.DeprecatedMediumHeader>
           <CloseIcon onClick={onDismiss} />
         </RowBetween>
       </PaddedColumn>
@@ -96,18 +96,18 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
                 {list.logoURI && <ListLogo logoURI={list.logoURI} size="40px" />}
                 <AutoColumn gap="sm" style={{ marginLeft: '20px' }}>
                   <RowFixed>
-                    <ThemedText.Body fontWeight={600} mr="6px">
+                    <ThemedText.DeprecatedBody fontWeight={600} mr="6px">
                       {list.name}
-                    </ThemedText.Body>
+                    </ThemedText.DeprecatedBody>
                     <TextDot />
-                    <ThemedText.Main fontSize={'16px'} ml="6px">
+                    <ThemedText.DeprecatedMain fontSize={'16px'} ml="6px">
                       <Trans>{list.tokens.length} tokens</Trans>
-                    </ThemedText.Main>
+                    </ThemedText.DeprecatedMain>
                   </RowFixed>
                   <ExternalLink href={`https://tokenlists.org/token-list?url=${listURL}`}>
-                    <ThemedText.Main fontSize={'12px'} color={theme.deprecated_blue1}>
+                    <ThemedText.DeprecatedMain fontSize={'12px'} color={theme.deprecated_blue1}>
                       {listURL}
-                    </ThemedText.Main>
+                    </ThemedText.DeprecatedMain>
                   </ExternalLink>
                 </AutoColumn>
               </RowFixed>
@@ -116,22 +116,22 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
           <Card style={{ backgroundColor: transparentize(0.8, theme.deprecated_red1) }}>
             <AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
               <AlertTriangle stroke={theme.deprecated_red1} size={32} />
-              <ThemedText.Body fontWeight={500} fontSize={20} color={theme.deprecated_red1}>
+              <ThemedText.DeprecatedBody fontWeight={500} fontSize={20} color={theme.deprecated_red1}>
                 <Trans>Import at your own risk</Trans>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
             </AutoColumn>
 
             <AutoColumn style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
-              <ThemedText.Body fontWeight={500} color={theme.deprecated_red1}>
+              <ThemedText.DeprecatedBody fontWeight={500} color={theme.deprecated_red1}>
                 <Trans>
                   By adding this list you are implicitly trusting that the data is correct. Anyone can create a list,
                   including creating fake versions of existing lists and lists that claim to represent projects that do
                   not have one.
                 </Trans>
-              </ThemedText.Body>
-              <ThemedText.Body fontWeight={600} color={theme.deprecated_red1}>
+              </ThemedText.DeprecatedBody>
+              <ThemedText.DeprecatedBody fontWeight={600} color={theme.deprecated_red1}>
                 <Trans>If you purchase a token from this list, you may not be able to sell it back.</Trans>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
             </AutoColumn>
             <AutoRow justify="center" style={{ cursor: 'pointer' }} onClick={() => setConfirmed(!confirmed)}>
               <Checkbox
@@ -140,9 +140,9 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
                 checked={confirmed}
                 onChange={() => setConfirmed(!confirmed)}
               />
-              <ThemedText.Body ml="10px" fontSize="16px" color={theme.deprecated_red1} fontWeight={500}>
+              <ThemedText.DeprecatedBody ml="10px" fontSize="16px" color={theme.deprecated_red1} fontWeight={500}>
                 <Trans>I understand</Trans>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
             </AutoRow>
           </Card>
 
@@ -156,9 +156,9 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
             <Trans>Import</Trans>
           </ButtonPrimary>
           {addError ? (
-            <ThemedText.Error title={addError} style={{ textOverflow: 'ellipsis', overflow: 'hidden' }} error>
+            <ThemedText.DeprecatedError title={addError} style={{ textOverflow: 'ellipsis', overflow: 'hidden' }} error>
               {addError}
-            </ThemedText.Error>
+            </ThemedText.DeprecatedError>
           ) : null}
         </AutoColumn>
         {/* </Card> */}

src/components/SearchModal/ImportRow.tsx

@@ -67,16 +67,16 @@ export default function ImportRow({
       <CurrencyLogo currency={token} size={'24px'} style={{ opacity: dim ? '0.6' : '1' }} />
       <AutoColumn gap="4px" style={{ opacity: dim ? '0.6' : '1' }}>
         <AutoRow>
-          <ThemedText.Body fontWeight={500}>{token.symbol}</ThemedText.Body>
-          <ThemedText.DarkGray ml="8px" fontWeight={300}>
+          <ThemedText.DeprecatedBody fontWeight={500}>{token.symbol}</ThemedText.DeprecatedBody>
+          <ThemedText.DeprecatedDarkGray ml="8px" fontWeight={300}>
             <NameOverflow title={token.name}>{token.name}</NameOverflow>
-          </ThemedText.DarkGray>
+          </ThemedText.DeprecatedDarkGray>
         </AutoRow>
         {list && list.logoURI && (
           <RowFixed>
-            <ThemedText.Small mr="4px" color={theme.deprecated_text3}>
+            <ThemedText.DeprecatedSmall mr="4px" color={theme.deprecated_text3}>
               <Trans>via {list.name} </Trans>
-            </ThemedText.Small>
+            </ThemedText.DeprecatedSmall>
             <ListLogo logoURI={list.logoURI} size="12px" />
           </RowFixed>
         )}
@@ -97,9 +97,9 @@ export default function ImportRow({
       ) : (
         <RowFixed style={{ minWidth: 'fit-content' }}>
           <CheckIcon />
-          <ThemedText.Main color={theme.deprecated_green1}>
+          <ThemedText.DeprecatedMain color={theme.deprecated_green1}>
             <Trans>Active</Trans>
-          </ThemedText.Main>
+          </ThemedText.DeprecatedMain>
         </RowFixed>
       )}
     </TokenSection>

src/components/SearchModal/ImportToken.tsx

@@ -56,9 +56,9 @@ export function ImportToken(props: ImportProps) {
       <PaddedColumn gap="14px" style={{ width: '100%', flex: '1 1' }}>
         <RowBetween>
           {onBack ? <ArrowLeft style={{ cursor: 'pointer' }} onClick={onBack} /> : <div />}
-          <ThemedText.MediumHeader>
+          <ThemedText.DeprecatedMediumHeader>
             <Plural value={tokens.length} _1="Import token" other="Import tokens" />
-          </ThemedText.MediumHeader>
+          </ThemedText.DeprecatedMediumHeader>
           {onDismiss ? <CloseIcon onClick={onDismiss} /> : <div />}
         </RowBetween>
       </PaddedColumn>
@@ -66,12 +66,12 @@ export function ImportToken(props: ImportProps) {
       <AutoColumn gap="md" style={{ marginBottom: '32px', padding: '1rem' }}>
         <AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', padding: '1rem' }}>
           <AlertCircle size={48} stroke={theme.deprecated_text2} strokeWidth={1} />
-          <ThemedText.Body fontWeight={400} fontSize={16}>
+          <ThemedText.DeprecatedBody fontWeight={400} fontSize={16}>
             <Trans>
               This token doesn&apos;t appear on the active token list(s). Make sure this is the token that you want to
               trade.
             </Trans>
-          </ThemedText.Body>
+          </ThemedText.DeprecatedBody>
         </AutoColumn>
         {tokens.map((token) => (
           <TokenImportCard token={token} list={list} key={'import' + token.address} />

src/components/SearchModal/ManageLists.tsx

@@ -76,7 +76,7 @@ const StyledTitleText = styled.div<{ active: boolean }>`
   color: ${({ theme, active }) => (active ? theme.deprecated_white : theme.deprecated_text2)};
 `
 
-const StyledListUrlText = styled(ThemedText.Main)<{ active: boolean }>`
+const StyledListUrlText = styled(ThemedText.DeprecatedMain)<{ active: boolean }>`
   font-size: 12px;
   color: ${({ theme, active }) => (active ? theme.deprecated_white : theme.deprecated_text2)};
 `
@@ -362,9 +362,9 @@ export function ManageLists({
           />
         </Row>
         {addError ? (
-          <ThemedText.Error title={addError} style={{ textOverflow: 'ellipsis', overflow: 'hidden' }} error>
+          <ThemedText.DeprecatedError title={addError} style={{ textOverflow: 'ellipsis', overflow: 'hidden' }} error>
             {addError}
-          </ThemedText.Error>
+          </ThemedText.DeprecatedError>
         ) : null}
       </PaddedColumn>
       {tempList && (
@@ -374,10 +374,10 @@ export function ManageLists({
               <RowFixed>
                 {tempList.logoURI && <ListLogo logoURI={tempList.logoURI} size="40px" />}
                 <AutoColumn gap="4px" style={{ marginLeft: '20px' }}>
-                  <ThemedText.Body fontWeight={600}>{tempList.name}</ThemedText.Body>
-                  <ThemedText.Main fontSize={'12px'}>
+                  <ThemedText.DeprecatedBody fontWeight={600}>{tempList.name}</ThemedText.DeprecatedBody>
+                  <ThemedText.DeprecatedMain fontSize={'12px'}>
                     <Trans>{tempList.tokens.length} tokens</Trans>
-                  </ThemedText.Main>
+                  </ThemedText.DeprecatedMain>
                 </AutoColumn>
               </RowFixed>
               {isImported ? (
@@ -385,9 +385,9 @@ export function ManageLists({
                   <IconWrapper stroke={theme.deprecated_text2} size="16px" marginRight={'10px'}>
                     <CheckCircle />
                   </IconWrapper>
-                  <ThemedText.Body color={theme.deprecated_text2}>
+                  <ThemedText.DeprecatedBody color={theme.deprecated_text2}>
                     <Trans>Loaded</Trans>
-                  </ThemedText.Body>
+                  </ThemedText.DeprecatedBody>
                 </RowFixed>
               ) : (
                 <ButtonPrimary

src/components/SearchModal/ManageTokens.tsx

@@ -81,9 +81,9 @@ export default function ManageTokens({
           <RowFixed>
             <CurrencyLogo currency={token} size={'20px'} />
             <ExternalLink href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)}>
-              <ThemedText.Main ml={'10px'} fontWeight={600}>
+              <ThemedText.DeprecatedMain ml={'10px'} fontWeight={600}>
                 {token.symbol}
-              </ThemedText.Main>
+              </ThemedText.DeprecatedMain>
             </ExternalLink>
           </RowFixed>
           <RowFixed>
@@ -111,9 +111,9 @@ export default function ManageTokens({
             />
           </Row>
           {searchQuery !== '' && !isAddressSearch && (
-            <ThemedText.Error error={true}>
+            <ThemedText.DeprecatedError error={true}>
               <Trans>Enter valid token address</Trans>
-            </ThemedText.Error>
+            </ThemedText.DeprecatedError>
           )}
           {searchToken && (
             <Card backgroundColor={theme.deprecated_bg2} padding="10px 0">
@@ -129,14 +129,14 @@ export default function ManageTokens({
         <Separator />
         <PaddedColumn gap="lg" style={{ overflow: 'auto', marginBottom: '10px' }}>
           <RowBetween>
-            <ThemedText.Main fontWeight={600}>
+            <ThemedText.DeprecatedMain fontWeight={600}>
               <Trans>{userAddedTokens?.length} Custom Tokens</Trans>
-            </ThemedText.Main>
+            </ThemedText.DeprecatedMain>
             {userAddedTokens.length > 0 && (
               <ButtonText onClick={handleRemoveAll}>
-                <ThemedText.Blue>
+                <ThemedText.DeprecatedBlue>
                   <Trans>Clear all</Trans>
-                </ThemedText.Blue>
+                </ThemedText.DeprecatedBlue>
               </ButtonText>
             )}
           </RowBetween>
@@ -144,9 +144,9 @@ export default function ManageTokens({
         </PaddedColumn>
       </Column>
       <Footer>
-        <ThemedText.DarkGray>
+        <ThemedText.DeprecatedDarkGray>
           <Trans>Tip: Custom tokens are stored locally in your browser</Trans>
-        </ThemedText.DarkGray>
+        </ThemedText.DeprecatedDarkGray>
       </Footer>
     </Wrapper>
   )

src/components/SearchModal/TokenImportCard.tsx

@@ -19,7 +19,7 @@ const WarningWrapper = styled(Card)<{ highWarning: boolean }>`
   width: fit-content;
 `
 
-const AddressText = styled(ThemedText.Blue)`
+const AddressText = styled(ThemedText.DeprecatedBlue)`
   font-size: 12px;
   word-break: break-all;
 
@@ -39,12 +39,12 @@ const TokenImportCard = ({ list, token }: TokenImportCardProps) => {
       <AutoColumn gap="10px" justify="center">
         <CurrencyLogo currency={token} size={'32px'} />
         <AutoColumn gap="4px" justify="center">
-          <ThemedText.Body ml="8px" mr="8px" fontWeight={500} fontSize={20}>
+          <ThemedText.DeprecatedBody ml="8px" mr="8px" fontWeight={500} fontSize={20}>
             {token.symbol}
-          </ThemedText.Body>
-          <ThemedText.DarkGray fontWeight={400} fontSize={14}>
+          </ThemedText.DeprecatedBody>
+          <ThemedText.DeprecatedDarkGray fontWeight={400} fontSize={14}>
             {token.name}
-          </ThemedText.DarkGray>
+          </ThemedText.DeprecatedDarkGray>
         </AutoColumn>
         {chainId && (
           <ExternalLink href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)}>
@@ -54,17 +54,17 @@ const TokenImportCard = ({ list, token }: TokenImportCardProps) => {
         {list !== undefined ? (
           <RowFixed>
             {list.logoURI && <ListLogo logoURI={list.logoURI} size="16px" />}
-            <ThemedText.Small ml="6px" fontSize={14} color={theme.deprecated_text3}>
+            <ThemedText.DeprecatedSmall ml="6px" fontSize={14} color={theme.deprecated_text3}>
               <Trans>via {list.name} token list</Trans>
-            </ThemedText.Small>
+            </ThemedText.DeprecatedSmall>
           </RowFixed>
         ) : (
           <WarningWrapper $borderRadius="4px" padding="4px" highWarning={true}>
             <RowFixed>
               <AlertCircle stroke={theme.deprecated_red1} size="10px" />
-              <ThemedText.Body color={theme.deprecated_red1} ml="4px" fontSize="10px" fontWeight={500}>
+              <ThemedText.DeprecatedBody color={theme.deprecated_red1} ml="4px" fontSize="10px" fontWeight={500}>
                 <Trans>Unknown Source</Trans>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
             </RowFixed>
           </WarningWrapper>
         )}

src/components/Settings/index.tsx

@@ -208,9 +208,9 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
             {isSupportedChainId(chainId) && (
               <RowBetween>
                 <RowFixed>
-                  <ThemedText.Black fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
+                  <ThemedText.DeprecatedBlack fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
                     <Trans>Auto Router API</Trans>
-                  </ThemedText.Black>
+                  </ThemedText.DeprecatedBlack>
                   <QuestionHelper text={<Trans>Use the Uniswap Labs API to get faster quotes.</Trans>} />
                 </RowFixed>
                 <Toggle
@@ -228,9 +228,9 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
             )}
             <RowBetween>
               <RowFixed>
-                <ThemedText.Black fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
+                <ThemedText.DeprecatedBlack fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
                   <Trans>Expert Mode</Trans>
-                </ThemedText.Black>
+                </ThemedText.DeprecatedBlack>
                 <QuestionHelper
                   text={
                     <Trans>Allow high price impact trades and skip the confirm screen. Use at your own risk.</Trans>

src/components/SwitchLocaleLink/index.tsx

@@ -7,7 +7,7 @@ import { DEFAULT_LOCALE, LOCALE_LABEL, SupportedLocale } from '../../constants/l
 import { navigatorLocale, useActiveLocale } from '../../hooks/useActiveLocale'
 import { StyledInternalLink, ThemedText } from '../../theme'
 
-const Container = styled(ThemedText.Small)`
+const Container = styled(ThemedText.DeprecatedSmall)`
   opacity: 0.6;
   :hover {
     opacity: 1;

src/components/TransactionSettings/index.tsx

@@ -165,9 +165,9 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
     <AutoColumn gap="md">
       <AutoColumn gap="sm">
         <RowFixed>
-          <ThemedText.Black fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
+          <ThemedText.DeprecatedBlack fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
             <Trans>Slippage tolerance</Trans>
-          </ThemedText.Black>
+          </ThemedText.DeprecatedBlack>
           <QuestionHelper
             text={
               <Trans>Your transaction will revert if the price changes unfavorably by more than this percentage.</Trans>
@@ -234,9 +234,9 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
       {showCustomDeadlineRow && (
         <AutoColumn gap="sm">
           <RowFixed>
-            <ThemedText.Black fontSize={14} fontWeight={400} color={theme.deprecated_text2}>
+            <ThemedText.DeprecatedBlack fontSize={14} fontWeight={400} color={theme.deprecated_text2}>
               <Trans>Transaction deadline</Trans>
-            </ThemedText.Black>
+            </ThemedText.DeprecatedBlack>
             <QuestionHelper
               text={<Trans>Your transaction will revert if it is pending for more than this period of time.</Trans>}
             />
@@ -260,9 +260,9 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
                 color={deadlineError ? 'red' : ''}
               />
             </OptionCustom>
-            <ThemedText.Body style={{ paddingLeft: '8px' }} fontSize={14}>
+            <ThemedText.DeprecatedBody style={{ paddingLeft: '8px' }} fontSize={14}>
               <Trans>minutes</Trans>
-            </ThemedText.Body>
+            </ThemedText.DeprecatedBody>
           </RowFixed>
         </AutoColumn>
       )}

src/components/WalletModal/PendingView.tsx

@@ -63,14 +63,14 @@ export default function PendingView({
         <LoadingWrapper>
           {error ? (
             <ErrorGroup>
-              <ThemedText.MediumHeader marginBottom={12}>
+              <ThemedText.DeprecatedMediumHeader marginBottom={12}>
                 <Trans>Error connecting</Trans>
-              </ThemedText.MediumHeader>
-              <ThemedText.Body fontSize={14} marginBottom={36} textAlign="center">
+              </ThemedText.DeprecatedMediumHeader>
+              <ThemedText.DeprecatedBody fontSize={14} marginBottom={36} textAlign="center">
                 <Trans>
                   The connection attempt failed. Please click try again and follow the steps to connect in your wallet.
                 </Trans>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
               <ButtonPrimary
                 $borderRadius="12px"
                 padding="12px"
@@ -81,19 +81,19 @@ export default function PendingView({
                 <Trans>Try Again</Trans>
               </ButtonPrimary>
               <ButtonEmpty width="fit-content" padding="0" marginTop={20}>
-                <ThemedText.Link fontSize={12} onClick={openOptions}>
+                <ThemedText.DeprecatedLink fontSize={12} onClick={openOptions}>
                   <Trans>Back to wallet selection</Trans>
-                </ThemedText.Link>
+                </ThemedText.DeprecatedLink>
               </ButtonEmpty>
             </ErrorGroup>
           ) : (
             <>
-              <ThemedText.Black fontSize={20} marginY={16}>
+              <ThemedText.DeprecatedBlack fontSize={20} marginY={16}>
                 <LoaderContainer>
                   <Loader stroke="currentColor" size="32px" />
                 </LoaderContainer>
                 <Trans>Connecting...</Trans>
-              </ThemedText.Black>
+              </ThemedText.DeprecatedBlack>
             </>
           )}
         </LoadingWrapper>

src/components/WalletModal/index.tsx

@@ -302,7 +302,7 @@ export default function WalletModal({
             {!pendingError && (
               <LightCard>
                 <AutoRow style={{ flexWrap: 'nowrap' }}>
-                  <ThemedText.Body fontSize={12}>
+                  <ThemedText.DeprecatedBody fontSize={12}>
                     <Trans>
                       By connecting a wallet, you agree to Uniswap Labs’{' '}
                       <ExternalLink
@@ -317,7 +317,7 @@ export default function WalletModal({
                       </ExternalLink>
                       .
                     </Trans>
-                  </ThemedText.Body>
+                  </ThemedText.DeprecatedBody>
                 </AutoRow>
               </LightCard>
             )}

src/components/claim/AddressClaimModal.tsx

@@ -105,29 +105,29 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
             <CardNoise />
             <CardSection gap="md">
               <RowBetween>
-                <ThemedText.White fontWeight={500}>
+                <ThemedText.DeprecatedWhite fontWeight={500}>
                   <Trans>Claim UNI Token</Trans>
-                </ThemedText.White>
+                </ThemedText.DeprecatedWhite>
                 <CloseIcon onClick={wrappedOnDismiss} style={{ zIndex: 99 }} stroke="white" />
               </RowBetween>
-              <ThemedText.White fontWeight={700} fontSize={36}>
+              <ThemedText.DeprecatedWhite fontWeight={700} fontSize={36}>
                 <Trans>{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI</Trans>
-              </ThemedText.White>
+              </ThemedText.DeprecatedWhite>
             </CardSection>
             <Break />
           </ModalUpper>
           <AutoColumn gap="md" style={{ padding: '1rem', paddingTop: '0' }} justify="center">
-            <ThemedText.SubHeader fontWeight={500}>
+            <ThemedText.DeprecatedSubHeader fontWeight={500}>
               <Trans>
                 Enter an address to trigger a UNI claim. If the address has any claimable UNI it will be sent to them on
                 submission.
               </Trans>
-            </ThemedText.SubHeader>
+            </ThemedText.DeprecatedSubHeader>
             <AddressInputPanel value={typed} onChange={handleRecipientType} />
             {parsedAddress && !hasAvailableClaim && (
-              <ThemedText.Error error={true}>
+              <ThemedText.DeprecatedError error={true}>
                 <Trans>Address has no available claim</Trans>
-              </ThemedText.Error>
+              </ThemedText.DeprecatedError>
             )}
             <ButtonPrimary
               disabled={!isAddress(parsedAddress ?? '') || !hasAvailableClaim}
@@ -159,23 +159,23 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>
-              <ThemedText.LargeHeader fontWeight={600} color="black">
+              <ThemedText.DeprecatedLargeHeader fontWeight={600} color="black">
                 {claimConfirmed ? <Trans>Claimed</Trans> : <Trans>Claiming</Trans>}
-              </ThemedText.LargeHeader>
+              </ThemedText.DeprecatedLargeHeader>
               {!claimConfirmed && (
                 <Text fontSize={36} color={'#ff007a'} fontWeight={800}>
                   <Trans>{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI</Trans>
                 </Text>
               )}
               {parsedAddress && (
-                <ThemedText.LargeHeader fontWeight={600} color="black">
+                <ThemedText.DeprecatedLargeHeader fontWeight={600} color="black">
                   <Trans>for {shortenAddress(parsedAddress)}</Trans>
-                </ThemedText.LargeHeader>
+                </ThemedText.DeprecatedLargeHeader>
               )}
             </AutoColumn>
             {claimConfirmed && (
               <>
-                <ThemedText.SubHeader fontWeight={500} color="black">
+                <ThemedText.DeprecatedSubHeader fontWeight={500} color="black">
                   <span role="img" aria-label="party-hat">
                     🎉{' '}
                   </span>
@@ -183,13 +183,13 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
                   <span role="img" aria-label="party-hat">
                     🎉
                   </span>
-                </ThemedText.SubHeader>
+                </ThemedText.DeprecatedSubHeader>
               </>
             )}
             {attempting && !hash && (
-              <ThemedText.SubHeader color="black">
+              <ThemedText.DeprecatedSubHeader color="black">
                 <Trans>Confirm this transaction in your wallet</Trans>
-              </ThemedText.SubHeader>
+              </ThemedText.DeprecatedSubHeader>
             )}
             {attempting && hash && !claimConfirmed && chainId && hash && (
               <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)} style={{ zIndex: 99 }}>

src/components/claim/ClaimModal.tsx

@@ -100,63 +100,63 @@ export default function ClaimModal() {
             <CardNoise />
             <CardSection gap="md">
               <RowBetween>
-                <ThemedText.White fontWeight={500}>
+                <ThemedText.DeprecatedWhite fontWeight={500}>
                   <Trans>Claim UNI</Trans>
-                </ThemedText.White>
+                </ThemedText.DeprecatedWhite>
                 <CloseIcon onClick={toggleClaimModal} style={{ zIndex: 99 }} color="white" />
               </RowBetween>
-              <ThemedText.White fontWeight={700} fontSize={36}>
+              <ThemedText.DeprecatedWhite fontWeight={700} fontSize={36}>
                 <Trans>{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI</Trans>
-              </ThemedText.White>
+              </ThemedText.DeprecatedWhite>
             </CardSection>
             <Break />
             <CardSection gap="sm">
               {userClaimData?.flags?.isSOCKS && (
                 <RowBetween>
-                  <ThemedText.SubHeader color="white">SOCKS</ThemedText.SubHeader>
-                  <ThemedText.SubHeader color="white">
+                  <ThemedText.DeprecatedSubHeader color="white">SOCKS</ThemedText.DeprecatedSubHeader>
+                  <ThemedText.DeprecatedSubHeader color="white">
                     <Trans>{SOCKS_AMOUNT} UNI</Trans>
-                  </ThemedText.SubHeader>
+                  </ThemedText.DeprecatedSubHeader>
                 </RowBetween>
               )}
               {userClaimData?.flags?.isLP &&
                 unclaimedAmount &&
                 JSBI.greaterThanOrEqual(unclaimedAmount.quotient, nonLPAmount) && (
                   <RowBetween>
-                    <ThemedText.SubHeader color="white">
+                    <ThemedText.DeprecatedSubHeader color="white">
                       <Trans>Liquidity</Trans>
-                    </ThemedText.SubHeader>
-                    <ThemedText.SubHeader color="white">
+                    </ThemedText.DeprecatedSubHeader>
+                    <ThemedText.DeprecatedSubHeader color="white">
                       <Trans>
                         {unclaimedAmount
                           .subtract(CurrencyAmount.fromRawAmount(unclaimedAmount.currency, nonLPAmount))
                           .toFixed(0, { groupSeparator: ',' })}{' '}
                         UNI
                       </Trans>
-                    </ThemedText.SubHeader>
+                    </ThemedText.DeprecatedSubHeader>
                   </RowBetween>
                 )}
               {userClaimData?.flags?.isUser && (
                 <RowBetween>
-                  <ThemedText.SubHeader color="white">
+                  <ThemedText.DeprecatedSubHeader color="white">
                     <Trans>User</Trans>
-                  </ThemedText.SubHeader>
-                  <ThemedText.SubHeader color="white">
+                  </ThemedText.DeprecatedSubHeader>
+                  <ThemedText.DeprecatedSubHeader color="white">
                     <Trans>{USER_AMOUNT} UNI</Trans>
-                  </ThemedText.SubHeader>
+                  </ThemedText.DeprecatedSubHeader>
                 </RowBetween>
               )}
             </CardSection>
           </ModalUpper>
           <AutoColumn gap="md" style={{ padding: '1rem', paddingTop: '0' }} justify="center">
-            <ThemedText.SubHeader fontWeight={500}>
+            <ThemedText.DeprecatedSubHeader fontWeight={500}>
               <Trans>
                 As a member of the Uniswap community you may claim UNI to be used for voting and governance.
                 <br />
                 <br />
                 <ExternalLink href="https://uniswap.org/blog/uni">Read more about UNI</ExternalLink>
               </Trans>
-            </ThemedText.SubHeader>
+            </ThemedText.DeprecatedSubHeader>
             <ButtonPrimary
               disabled={!isAddress(account ?? '')}
               padding="16px 16px"
@@ -187,9 +187,9 @@ export default function ClaimModal() {
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>
-              <ThemedText.LargeHeader fontWeight={600} color="black">
+              <ThemedText.DeprecatedLargeHeader fontWeight={600} color="black">
                 {claimConfirmed ? <Trans>Claimed!</Trans> : <Trans>Claiming</Trans>}
-              </ThemedText.LargeHeader>
+              </ThemedText.DeprecatedLargeHeader>
               {!claimConfirmed && (
                 <Text fontSize={36} color={'#ff007a'} fontWeight={800}>
                   <Trans>{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI</Trans>
@@ -198,7 +198,7 @@ export default function ClaimModal() {
             </AutoColumn>
             {claimConfirmed && (
               <>
-                <ThemedText.SubHeader fontWeight={500} color="black">
+                <ThemedText.DeprecatedSubHeader fontWeight={500} color="black">
                   <Trans>
                     <span role="img" aria-label="party-hat">
                       🎉{' '}
@@ -208,13 +208,13 @@ export default function ClaimModal() {
                       🎉
                     </span>
                   </Trans>
-                </ThemedText.SubHeader>
+                </ThemedText.DeprecatedSubHeader>
               </>
             )}
             {attempting && !claimSubmitted && (
-              <ThemedText.SubHeader color="black">
+              <ThemedText.DeprecatedSubHeader color="black">
                 <Trans>Confirm this transaction in your wallet</Trans>
-              </ThemedText.SubHeader>
+              </ThemedText.DeprecatedSubHeader>
             )}
             {attempting && claimSubmitted && !claimConfirmed && chainId && claimTxn?.hash && (
               <ExternalLink

src/components/earn/ClaimRewardModal.tsx

@@ -81,24 +81,24 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
       {!attempting && !hash && (
         <ContentWrapper gap="lg">
           <RowBetween>
-            <ThemedText.MediumHeader>
+            <ThemedText.DeprecatedMediumHeader>
               <Trans>Claim</Trans>
-            </ThemedText.MediumHeader>
+            </ThemedText.DeprecatedMediumHeader>
             <CloseIcon onClick={wrappedOnDismiss} />
           </RowBetween>
           {stakingInfo?.earnedAmount && (
             <AutoColumn justify="center" gap="md">
-              <ThemedText.Body fontWeight={600} fontSize={36}>
+              <ThemedText.DeprecatedBody fontWeight={600} fontSize={36}>
                 {stakingInfo?.earnedAmount?.toSignificant(6)}
-              </ThemedText.Body>
-              <ThemedText.Body>
+              </ThemedText.DeprecatedBody>
+              <ThemedText.DeprecatedBody>
                 <Trans>Unclaimed UNI</Trans>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
             </AutoColumn>
           )}
-          <ThemedText.SubHeader style={{ textAlign: 'center' }}>
+          <ThemedText.DeprecatedSubHeader style={{ textAlign: 'center' }}>
             <Trans>When you claim without withdrawing your liquidity remains in the mining pool.</Trans>
-          </ThemedText.SubHeader>
+          </ThemedText.DeprecatedSubHeader>
           <ButtonError disabled={!!error} error={!!error && !!stakingInfo?.stakedAmount} onClick={onClaimReward}>
             {error ?? <Trans>Claim</Trans>}
           </ButtonError>
@@ -107,21 +107,21 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
       {attempting && !hash && (
         <LoadingView onDismiss={wrappedOnDismiss}>
           <AutoColumn gap="12px" justify={'center'}>
-            <ThemedText.Body fontSize={20}>
+            <ThemedText.DeprecatedBody fontSize={20}>
               <Trans>Claiming {stakingInfo?.earnedAmount?.toSignificant(6)} UNI</Trans>
-            </ThemedText.Body>
+            </ThemedText.DeprecatedBody>
           </AutoColumn>
         </LoadingView>
       )}
       {hash && (
         <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
           <AutoColumn gap="12px" justify={'center'}>
-            <ThemedText.LargeHeader>
+            <ThemedText.DeprecatedLargeHeader>
               <Trans>Transaction Submitted</Trans>
-            </ThemedText.LargeHeader>
-            <ThemedText.Body fontSize={20}>
+            </ThemedText.DeprecatedLargeHeader>
+            <ThemedText.DeprecatedBody fontSize={20}>
               <Trans>Claimed UNI!</Trans>
-            </ThemedText.Body>
+            </ThemedText.DeprecatedBody>
           </AutoColumn>
         </SubmittedView>
       )}

src/components/earn/PoolCard.tsx

@@ -118,9 +118,9 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo })
 
       <TopSection>
         <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={24} />
-        <ThemedText.White fontWeight={600} fontSize={24} style={{ marginLeft: '8px' }}>
+        <ThemedText.DeprecatedWhite fontWeight={600} fontSize={24} style={{ marginLeft: '8px' }}>
           {currency0.symbol}-{currency1.symbol}
-        </ThemedText.White>
+        </ThemedText.DeprecatedWhite>
 
         <StyledInternalLink to={`/uni/${currencyId(currency0)}/${currencyId(currency1)}`} style={{ width: '100%' }}>
           <ButtonPrimary padding="8px" $borderRadius="8px">
@@ -131,22 +131,22 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo })
 
       <StatContainer>
         <RowBetween>
-          <ThemedText.White>
+          <ThemedText.DeprecatedWhite>
             <Trans>Total deposited</Trans>
-          </ThemedText.White>
-          <ThemedText.White>
+          </ThemedText.DeprecatedWhite>
+          <ThemedText.DeprecatedWhite>
             {valueOfTotalStakedAmountInUSDC ? (
               <Trans>${valueOfTotalStakedAmountInUSDC.toFixed(0, { groupSeparator: ',' })}</Trans>
             ) : (
               <Trans>{valueOfTotalStakedAmountInWETH?.toSignificant(4, { groupSeparator: ',' }) ?? '-'} ETH</Trans>
             )}
-          </ThemedText.White>
+          </ThemedText.DeprecatedWhite>
         </RowBetween>
         <RowBetween>
-          <ThemedText.White>
+          <ThemedText.DeprecatedWhite>
             <Trans>Pool rate</Trans>
-          </ThemedText.White>
-          <ThemedText.White>
+          </ThemedText.DeprecatedWhite>
+          <ThemedText.DeprecatedWhite>
             {stakingInfo ? (
               stakingInfo.active ? (
                 <Trans>
@@ -159,7 +159,7 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo })
             ) : (
               '-'
             )}
-          </ThemedText.White>
+          </ThemedText.DeprecatedWhite>
         </RowBetween>
       </StatContainer>
 
@@ -167,13 +167,13 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo })
         <>
           <Break />
           <BottomSection showBackground={true}>
-            <ThemedText.Black color={'deprecated_white'} fontWeight={500}>
+            <ThemedText.DeprecatedBlack color={'deprecated_white'} fontWeight={500}>
               <span>
                 <Trans>Your rate</Trans>
               </span>
-            </ThemedText.Black>
+            </ThemedText.DeprecatedBlack>
 
-            <ThemedText.Black style={{ textAlign: 'right' }} color={'deprecated_white'} fontWeight={500}>
+            <ThemedText.DeprecatedBlack style={{ textAlign: 'right' }} color={'deprecated_white'} fontWeight={500}>
               <span role="img" aria-label="wizard-icon" style={{ marginRight: '0.5rem' }}>
                 ⚡
               </span>
@@ -191,7 +191,7 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo })
               ) : (
                 '-'
               )}
-            </ThemedText.Black>
+            </ThemedText.DeprecatedBlack>
           </BottomSection>
         </>
       )}

src/components/earn/StakingModal.tsx

@@ -166,9 +166,9 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
       {!attempting && !hash && (
         <ContentWrapper gap="lg">
           <RowBetween>
-            <ThemedText.MediumHeader>
+            <ThemedText.DeprecatedMediumHeader>
               <Trans>Deposit</Trans>
-            </ThemedText.MediumHeader>
+            </ThemedText.DeprecatedMediumHeader>
             <CloseIcon onClick={wrappedOnDismiss} />
           </RowBetween>
           <CurrencyInputPanel
@@ -185,19 +185,19 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
 
           <HypotheticalRewardRate dim={!hypotheticalRewardRate.greaterThan('0')}>
             <div>
-              <ThemedText.Black fontWeight={600}>
+              <ThemedText.DeprecatedBlack fontWeight={600}>
                 <Trans>Weekly Rewards</Trans>
-              </ThemedText.Black>
+              </ThemedText.DeprecatedBlack>
             </div>
 
-            <ThemedText.Black>
+            <ThemedText.DeprecatedBlack>
               <Trans>
                 {hypotheticalRewardRate
                   .multiply((60 * 60 * 24 * 7).toString())
                   .toSignificant(4, { groupSeparator: ',' })}{' '}
                 UNI / week
               </Trans>
-            </ThemedText.Black>
+            </ThemedText.DeprecatedBlack>
           </HypotheticalRewardRate>
 
           <RowBetween>
@@ -223,24 +223,24 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
       {attempting && !hash && (
         <LoadingView onDismiss={wrappedOnDismiss}>
           <AutoColumn gap="12px" justify={'center'}>
-            <ThemedText.LargeHeader>
+            <ThemedText.DeprecatedLargeHeader>
               <Trans>Depositing Liquidity</Trans>
-            </ThemedText.LargeHeader>
-            <ThemedText.Body fontSize={20}>
+            </ThemedText.DeprecatedLargeHeader>
+            <ThemedText.DeprecatedBody fontSize={20}>
               <Trans>{parsedAmount?.toSignificant(4)} UNI-V2</Trans>
-            </ThemedText.Body>
+            </ThemedText.DeprecatedBody>
           </AutoColumn>
         </LoadingView>
       )}
       {attempting && hash && (
         <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
           <AutoColumn gap="12px" justify={'center'}>
-            <ThemedText.LargeHeader>
+            <ThemedText.DeprecatedLargeHeader>
               <Trans>Transaction Submitted</Trans>
-            </ThemedText.LargeHeader>
-            <ThemedText.Body fontSize={20}>
+            </ThemedText.DeprecatedLargeHeader>
+            <ThemedText.DeprecatedBody fontSize={20}>
               <Trans>Deposited {parsedAmount?.toSignificant(4)} UNI-V2</Trans>
-            </ThemedText.Body>
+            </ThemedText.DeprecatedBody>
           </AutoColumn>
         </SubmittedView>
       )}

src/components/earn/UnstakingModal.tsx

@@ -83,34 +83,34 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
       {!attempting && !hash && (
         <ContentWrapper gap="lg">
           <RowBetween>
-            <ThemedText.MediumHeader>
+            <ThemedText.DeprecatedMediumHeader>
               <Trans>Withdraw</Trans>
-            </ThemedText.MediumHeader>
+            </ThemedText.DeprecatedMediumHeader>
             <CloseIcon onClick={wrappedOnDismiss} />
           </RowBetween>
           {stakingInfo?.stakedAmount && (
             <AutoColumn justify="center" gap="md">
-              <ThemedText.Body fontWeight={600} fontSize={36}>
+              <ThemedText.DeprecatedBody fontWeight={600} fontSize={36}>
                 {<FormattedCurrencyAmount currencyAmount={stakingInfo.stakedAmount} />}
-              </ThemedText.Body>
-              <ThemedText.Body>
+              </ThemedText.DeprecatedBody>
+              <ThemedText.DeprecatedBody>
                 <Trans>Deposited liquidity:</Trans>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
             </AutoColumn>
           )}
           {stakingInfo?.earnedAmount && (
             <AutoColumn justify="center" gap="md">
-              <ThemedText.Body fontWeight={600} fontSize={36}>
+              <ThemedText.DeprecatedBody fontWeight={600} fontSize={36}>
                 {<FormattedCurrencyAmount currencyAmount={stakingInfo?.earnedAmount} />}
-              </ThemedText.Body>
-              <ThemedText.Body>
+              </ThemedText.DeprecatedBody>
+              <ThemedText.DeprecatedBody>
                 <Trans>Unclaimed UNI</Trans>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
             </AutoColumn>
           )}
-          <ThemedText.SubHeader style={{ textAlign: 'center' }}>
+          <ThemedText.DeprecatedSubHeader style={{ textAlign: 'center' }}>
             <Trans>When you withdraw, your UNI is claimed and your liquidity is removed from the mining pool.</Trans>
-          </ThemedText.SubHeader>
+          </ThemedText.DeprecatedSubHeader>
           <ButtonError disabled={!!error} error={!!error && !!stakingInfo?.stakedAmount} onClick={onWithdraw}>
             {error ?? <Trans>Withdraw & Claim</Trans>}
           </ButtonError>
@@ -119,27 +119,27 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
       {attempting && !hash && (
         <LoadingView onDismiss={wrappedOnDismiss}>
           <AutoColumn gap="12px" justify={'center'}>
-            <ThemedText.Body fontSize={20}>
+            <ThemedText.DeprecatedBody fontSize={20}>
               <Trans>Withdrawing {stakingInfo?.stakedAmount?.toSignificant(4)} UNI-V2</Trans>
-            </ThemedText.Body>
-            <ThemedText.Body fontSize={20}>
+            </ThemedText.DeprecatedBody>
+            <ThemedText.DeprecatedBody fontSize={20}>
               <Trans>Claiming {stakingInfo?.earnedAmount?.toSignificant(4)} UNI</Trans>
-            </ThemedText.Body>
+            </ThemedText.DeprecatedBody>
           </AutoColumn>
         </LoadingView>
       )}
       {hash && (
         <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
           <AutoColumn gap="12px" justify={'center'}>
-            <ThemedText.LargeHeader>
+            <ThemedText.DeprecatedLargeHeader>
               <Trans>Transaction Submitted</Trans>
-            </ThemedText.LargeHeader>
-            <ThemedText.Body fontSize={20}>
+            </ThemedText.DeprecatedLargeHeader>
+            <ThemedText.DeprecatedBody fontSize={20}>
               <Trans>Withdrew UNI-V2!</Trans>
-            </ThemedText.Body>
-            <ThemedText.Body fontSize={20}>
+            </ThemedText.DeprecatedBody>
+            <ThemedText.DeprecatedBody fontSize={20}>
               <Trans>Claimed UNI!</Trans>
-            </ThemedText.Body>
+            </ThemedText.DeprecatedBody>
           </AutoColumn>
         </SubmittedView>
       )}

src/components/swap/AdvancedSwapDetails.tsx

@@ -84,17 +84,17 @@ export function AdvancedSwapDetails({
               }
               disableHover={hideInfoTooltips}
             >
-              <ThemedText.SubHeader color={theme.deprecated_text1}>
+              <ThemedText.DeprecatedSubHeader color={theme.deprecated_text1}>
                 <Trans>Expected Output</Trans>
-              </ThemedText.SubHeader>
+              </ThemedText.DeprecatedSubHeader>
             </MouseoverTooltip>
           </RowFixed>
           <TextWithLoadingPlaceholder syncing={syncing} width={65}>
-            <ThemedText.Black textAlign="right" fontSize={14}>
+            <ThemedText.DeprecatedBlack textAlign="right" fontSize={14}>
               {expectedOutputAmount
                 ? `${expectedOutputAmount.toSignificant(6)}  ${expectedOutputAmount.currency.symbol}`
                 : '-'}
-            </ThemedText.Black>
+            </ThemedText.DeprecatedBlack>
           </TextWithLoadingPlaceholder>
         </RowBetween>
         <RowBetween>
@@ -103,15 +103,15 @@ export function AdvancedSwapDetails({
               text={<Trans>The impact your trade has on the market price of this pool.</Trans>}
               disableHover={hideInfoTooltips}
             >
-              <ThemedText.SubHeader color={theme.deprecated_text1}>
+              <ThemedText.DeprecatedSubHeader color={theme.deprecated_text1}>
                 <Trans>Price Impact</Trans>
-              </ThemedText.SubHeader>
+              </ThemedText.DeprecatedSubHeader>
             </MouseoverTooltip>
           </RowFixed>
           <TextWithLoadingPlaceholder syncing={syncing} width={50}>
-            <ThemedText.Black textAlign="right" fontSize={14}>
+            <ThemedText.DeprecatedBlack textAlign="right" fontSize={14}>
               <FormattedPriceImpact priceImpact={priceImpact} />
-            </ThemedText.Black>
+            </ThemedText.DeprecatedBlack>
           </TextWithLoadingPlaceholder>
         </RowBetween>
         <Separator />
@@ -126,22 +126,22 @@ export function AdvancedSwapDetails({
               }
               disableHover={hideInfoTooltips}
             >
-              <ThemedText.SubHeader color={theme.deprecated_text3}>
+              <ThemedText.DeprecatedSubHeader color={theme.deprecated_text3}>
                 {trade.tradeType === TradeType.EXACT_INPUT ? (
                   <Trans>Minimum received</Trans>
                 ) : (
                   <Trans>Maximum sent</Trans>
                 )}{' '}
                 <Trans>after slippage</Trans> ({allowedSlippage.toFixed(2)}%)
-              </ThemedText.SubHeader>
+              </ThemedText.DeprecatedSubHeader>
             </MouseoverTooltip>
           </RowFixed>
           <TextWithLoadingPlaceholder syncing={syncing} width={70}>
-            <ThemedText.Black textAlign="right" fontSize={14} color={theme.deprecated_text3}>
+            <ThemedText.DeprecatedBlack textAlign="right" fontSize={14} color={theme.deprecated_text3}>
               {trade.tradeType === TradeType.EXACT_INPUT
                 ? `${trade.minimumAmountOut(allowedSlippage).toSignificant(6)} ${trade.outputAmount.currency.symbol}`
                 : `${trade.maximumAmountIn(allowedSlippage).toSignificant(6)} ${trade.inputAmount.currency.symbol}`}
-            </ThemedText.Black>
+            </ThemedText.DeprecatedBlack>
           </TextWithLoadingPlaceholder>
         </RowBetween>
         {!trade?.gasUseEstimateUSD || !chainId || !SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(chainId) ? null : (
@@ -154,14 +154,14 @@ export function AdvancedSwapDetails({
               }
               disableHover={hideInfoTooltips}
             >
-              <ThemedText.SubHeader color={theme.deprecated_text3}>
+              <ThemedText.DeprecatedSubHeader color={theme.deprecated_text3}>
                 <Trans>Network Fee</Trans>
-              </ThemedText.SubHeader>
+              </ThemedText.DeprecatedSubHeader>
             </MouseoverTooltip>
             <TextWithLoadingPlaceholder syncing={syncing} width={50}>
-              <ThemedText.Black textAlign="right" fontSize={14} color={theme.deprecated_text3}>
+              <ThemedText.DeprecatedBlack textAlign="right" fontSize={14} color={theme.deprecated_text3}>
                 ~${trade.gasUseEstimateUSD.toFixed(2)}
-              </ThemedText.Black>
+              </ThemedText.DeprecatedBlack>
             </TextWithLoadingPlaceholder>
           </RowBetween>
         )}

src/components/swap/GasEstimateBadge.tsx

@@ -69,15 +69,15 @@ export default function GasEstimateBadge({
               ) : null
             ) : (
               <AutoColumn gap="4px" justify="center">
-                <ThemedText.Main fontSize="12px" textAlign="center">
+                <ThemedText.DeprecatedMain fontSize="12px" textAlign="center">
                   <Trans>Estimated network fee</Trans>
-                </ThemedText.Main>
-                <ThemedText.Body textAlign="center" fontWeight={500} style={{ userSelect: 'none' }}>
+                </ThemedText.DeprecatedMain>
+                <ThemedText.DeprecatedBody textAlign="center" fontWeight={500} style={{ userSelect: 'none' }}>
                   <Trans>${trade?.gasUseEstimateUSD?.toFixed(2)}</Trans>
-                </ThemedText.Body>
-                <ThemedText.Main fontSize="10px" textAlign="center" maxWidth="140px" color="text3">
+                </ThemedText.DeprecatedBody>
+                <ThemedText.DeprecatedMain fontSize="10px" textAlign="center" maxWidth="140px" color="text3">
                   <Trans>Estimate may differ due to your wallet gas settings</Trans>
-                </ThemedText.Main>
+                </ThemedText.DeprecatedMain>
               </AutoColumn>
             )}
           </ResponsiveTooltipContainer>

src/components/swap/RouterLabel.tsx

@@ -26,7 +26,7 @@ const StyledStaticRouterIcon = styled(StaticRouterIcon)`
   }
 `
 
-const StyledAutoRouterLabel = styled(ThemedText.Black)`
+const StyledAutoRouterLabel = styled(ThemedText.DeprecatedBlack)`
   line-height: 1rem;
 
   /* fallback color */
@@ -51,8 +51,8 @@ export function AutoRouterLabel() {
   return autoRouterSupported ? (
     <StyledAutoRouterLabel fontSize={14}>Auto Router</StyledAutoRouterLabel>
   ) : (
-    <ThemedText.Black fontSize={14}>
+    <ThemedText.DeprecatedBlack fontSize={14}>
       <Trans>Trade Route</Trans>
-    </ThemedText.Black>
+    </ThemedText.DeprecatedBlack>
   )
 }

src/components/swap/SwapDetailsDropdown.tsx

@@ -220,9 +220,9 @@ export default function SwapDetailsDropdown({
                   </Trace>
                 </LoadingOpacityContainer>
               ) : loading || syncing ? (
-                <ThemedText.Main fontSize={14}>
+                <ThemedText.DeprecatedMain fontSize={14}>
                   <Trans>Fetching best price...</Trans>
-                </ThemedText.Main>
+                </ThemedText.DeprecatedMain>
               ) : null}
             </RowFixed>
             <RowFixed>

src/components/swap/SwapHeader.tsx

@@ -17,9 +17,9 @@ export default function SwapHeader({ allowedSlippage }: { allowedSlippage: Perce
     <StyledSwapHeader>
       <RowBetween>
         <RowFixed>
-          <ThemedText.Black fontWeight={500} fontSize={16} style={{ marginRight: '8px' }}>
+          <ThemedText.DeprecatedBlack fontWeight={500} fontSize={16} style={{ marginRight: '8px' }}>
             <Trans>Swap</Trans>
-          </ThemedText.Black>
+          </ThemedText.DeprecatedBlack>
         </RowFixed>
         <RowFixed>
           <SettingsTab placeholderSlippage={allowedSlippage} />

src/components/swap/SwapModalHeader.tsx

@@ -103,12 +103,12 @@ export default function SwapModalHeader({
             </RowFixed>
           </RowBetween>
           <RowBetween>
-            <ThemedText.Body fontSize={14} color={theme.deprecated_text3}>
+            <ThemedText.DeprecatedBody fontSize={14} color={theme.deprecated_text3}>
               <FiatValue
                 fiatValue={fiatValueOutput}
                 priceImpact={computeFiatValuePriceImpact(fiatValueInput, fiatValueOutput)}
               />
-            </ThemedText.Body>
+            </ThemedText.DeprecatedBody>
           </RowBetween>
         </AutoColumn>
       </LightCard>
@@ -123,9 +123,9 @@ export default function SwapModalHeader({
           <RowBetween>
             <RowFixed>
               <AlertTriangle size={20} style={{ marginRight: '8px', minWidth: 24 }} />
-              <ThemedText.Main color={theme.deprecated_primary1}>
+              <ThemedText.DeprecatedMain color={theme.deprecated_primary1}>
                 <Trans>Price Updated</Trans>
-              </ThemedText.Main>
+              </ThemedText.DeprecatedMain>
             </RowFixed>
             <ButtonPrimary
               style={{ padding: '.5rem', width: 'fit-content', fontSize: '0.825rem', borderRadius: '12px' }}
@@ -139,7 +139,7 @@ export default function SwapModalHeader({
 
       <AutoColumn justify="flex-start" gap="sm" style={{ padding: '.75rem 1rem' }}>
         {trade.tradeType === TradeType.EXACT_INPUT ? (
-          <ThemedText.Italic fontWeight={400} textAlign="left" style={{ width: '100%' }}>
+          <ThemedText.DeprecatedItalic fontWeight={400} textAlign="left" style={{ width: '100%' }}>
             <Trans>
               Output is estimated. You will receive at least{' '}
               <b>
@@ -147,9 +147,9 @@ export default function SwapModalHeader({
               </b>{' '}
               or the transaction will revert.
             </Trans>
-          </ThemedText.Italic>
+          </ThemedText.DeprecatedItalic>
         ) : (
-          <ThemedText.Italic fontWeight={400} textAlign="left" style={{ width: '100%' }}>
+          <ThemedText.DeprecatedItalic fontWeight={400} textAlign="left" style={{ width: '100%' }}>
             <Trans>
               Input is estimated. You will sell at most{' '}
               <b>
@@ -157,17 +157,17 @@ export default function SwapModalHeader({
               </b>{' '}
               or the transaction will revert.
             </Trans>
-          </ThemedText.Italic>
+          </ThemedText.DeprecatedItalic>
         )}
       </AutoColumn>
       {recipient !== null ? (
         <AutoColumn justify="flex-start" gap="sm" style={{ padding: '12px 0 0 0px' }}>
-          <ThemedText.Main>
+          <ThemedText.DeprecatedMain>
             <Trans>
               Output will be sent to{' '}
               <b title={recipient}>{isAddress(recipient) ? shortenAddress(recipient) : recipient}</b>
             </Trans>
-          </ThemedText.Main>
+          </ThemedText.DeprecatedMain>
         </AutoColumn>
       ) : null}
     </AutoColumn>

src/components/swap/SwapRoute.tsx

@@ -100,7 +100,7 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
                   <div style={{ width: '250px', height: '15px' }} />
                 </LoadingRows>
               ) : (
-                <ThemedText.Main fontSize={12} width={400} margin={0}>
+                <ThemedText.DeprecatedMain fontSize={12} width={400} margin={0}>
                   {trade?.gasUseEstimateUSD && chainId && SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(chainId) ? (
                     <Trans>Best price route costs ~{formattedGasPriceString} in gas. </Trans>
                   ) : null}{' '}
@@ -108,7 +108,7 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
                     This route optimizes your total output by considering split routes, multiple hops, and the gas cost
                     of each step.
                   </Trans>
-                </ThemedText.Main>
+                </ThemedText.DeprecatedMain>
               )}
             </>
           )}

src/components/swap/SwapWarningDropdown.tsx

@@ -47,21 +47,21 @@ export default function SwapWarningDropdown({
     <Wrapper>
       {showNetworkFeeWarning ? (
         <RowBetween>
-          <ThemedText.Main fontSize="14px" color="text3">
+          <ThemedText.DeprecatedMain fontSize="14px" color="text3">
             <Trans>Network fees exceed 50% of the swap amount!</Trans>
-          </ThemedText.Main>
+          </ThemedText.DeprecatedMain>
           <MouseoverTooltipContent
             wrap={false}
             content={
               <ResponsiveTooltipContainer origin="top right" style={{ padding: '12px' }}>
-                <ThemedText.Main fontSize="12px" color="text3" maxWidth="200px">
+                <ThemedText.DeprecatedMain fontSize="12px" color="text3" maxWidth="200px">
                   <Trans>
                     The cost of sending this transaction is more than half of the value of the input amount.
                   </Trans>
-                </ThemedText.Main>
-                <ThemedText.Main fontSize="12px" color="text3" maxWidth="200px" mt="8px">
+                </ThemedText.DeprecatedMain>
+                <ThemedText.DeprecatedMain fontSize="12px" color="text3" maxWidth="200px" mt="8px">
                   <Trans>You might consider waiting until the network fees go down to complete this transaction.</Trans>
-                </ThemedText.Main>
+                </ThemedText.DeprecatedMain>
               </ResponsiveTooltipContainer>
             }
             placement="bottom"

src/components/swap/TradePrice.tsx

@@ -64,9 +64,9 @@ export default function TradePrice({ price, showInverted, setShowInverted }: Tra
         {text}
       </Text>{' '}
       {usdcPrice && (
-        <ThemedText.DarkGray>
+        <ThemedText.DeprecatedDarkGray>
           <Trans>(${usdcPrice.toFixed(visibleDecimalPlaces, { groupSeparator: ',' })})</Trans>
-        </ThemedText.DarkGray>
+        </ThemedText.DeprecatedDarkGray>
       )}
     </StyledPriceContainer>
   )

src/components/swap/UnsupportedCurrencyFooter.tsx

@@ -37,7 +37,7 @@ const StyledButtonEmpty = styled(ButtonEmpty)`
   text-decoration: none;
 `
 
-const AddressText = styled(ThemedText.Blue)`
+const AddressText = styled(ThemedText.DeprecatedBlue)`
   font-size: 12px;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
@@ -70,9 +70,9 @@ export default function UnsupportedCurrencyFooter({
         <Card padding="2rem">
           <AutoColumn gap="lg">
             <RowBetween>
-              <ThemedText.MediumHeader>
+              <ThemedText.DeprecatedMediumHeader>
                 <Trans>Unsupported Assets</Trans>
-              </ThemedText.MediumHeader>
+              </ThemedText.DeprecatedMediumHeader>
               <CloseIcon onClick={() => setShowDetails(false)} />
             </RowBetween>
             {tokens.map((token) => {
@@ -84,7 +84,7 @@ export default function UnsupportedCurrencyFooter({
                     <AutoColumn gap="10px">
                       <AutoRow gap="5px" align="center">
                         <CurrencyLogo currency={token} size={'24px'} />
-                        <ThemedText.Body fontWeight={500}>{token.symbol}</ThemedText.Body>
+                        <ThemedText.DeprecatedBody fontWeight={500}>{token.symbol}</ThemedText.DeprecatedBody>
                       </AutoRow>
                       {chainId && (
                         <ExternalLink href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)}>
@@ -97,20 +97,20 @@ export default function UnsupportedCurrencyFooter({
               )
             })}
             <AutoColumn gap="lg">
-              <ThemedText.Body fontWeight={500}>
+              <ThemedText.DeprecatedBody fontWeight={500}>
                 <Trans>
                   Some assets are not available through this interface because they may not work well with the smart
                   contracts or we are unable to allow trading for legal reasons.
                 </Trans>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
             </AutoColumn>
           </AutoColumn>
         </Card>
       </Modal>
       <StyledButtonEmpty padding={'0'} onClick={() => setShowDetails(true)}>
-        <ThemedText.Blue>
+        <ThemedText.DeprecatedBlue>
           <Trans>Read more about unsupported assets</Trans>
-        </ThemedText.Blue>
+        </ThemedText.DeprecatedBlue>
       </StyledButtonEmpty>
     </DetailsFooter>
   )

src/components/swap/styleds.tsx

@@ -133,7 +133,7 @@ export const SwapShowAcceptChanges = styled(AutoColumn)`
   margin-top: 8px;
 `
 
-export const TransactionDetailsLabel = styled(ThemedText.Black)`
+export const TransactionDetailsLabel = styled(ThemedText.DeprecatedBlack)`
   border-bottom: 1px solid ${({ theme }) => theme.deprecated_bg2};
   padding-bottom: 0.5rem;
 `

src/components/vote/DelegateModal.tsx

@@ -95,25 +95,25 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro
         <ContentWrapper gap="lg">
           <AutoColumn gap="lg" justify="center">
             <RowBetween>
-              <ThemedText.MediumHeader fontWeight={500}>{title}</ThemedText.MediumHeader>
+              <ThemedText.DeprecatedMediumHeader fontWeight={500}>{title}</ThemedText.DeprecatedMediumHeader>
               <StyledClosed stroke="black" onClick={wrappedOnDismiss} />
             </RowBetween>
-            <ThemedText.Body>
+            <ThemedText.DeprecatedBody>
               <Trans>Earned UNI tokens represent voting shares in Uniswap governance.</Trans>
-            </ThemedText.Body>
-            <ThemedText.Body>
+            </ThemedText.DeprecatedBody>
+            <ThemedText.DeprecatedBody>
               <Trans>You can either vote on each proposal yourself or delegate your votes to a third party.</Trans>
-            </ThemedText.Body>
+            </ThemedText.DeprecatedBody>
             {usingDelegate && <AddressInputPanel value={typed} onChange={handleRecipientType} />}
             <ButtonPrimary disabled={!isAddress(parsedAddress ?? '')} onClick={onDelegate}>
-              <ThemedText.MediumHeader color="white">
+              <ThemedText.DeprecatedMediumHeader color="white">
                 {usingDelegate ? <Trans>Delegate Votes</Trans> : <Trans>Self Delegate</Trans>}
-              </ThemedText.MediumHeader>
+              </ThemedText.DeprecatedMediumHeader>
             </ButtonPrimary>
             <TextButton onClick={() => setUsingDelegate(!usingDelegate)}>
-              <ThemedText.Blue>
+              <ThemedText.DeprecatedBlue>
                 {usingDelegate ? <Trans>Remove Delegate</Trans> : <Trans>Add Delegate +</Trans>}
-              </ThemedText.Blue>
+              </ThemedText.DeprecatedBlue>
             </TextButton>
           </AutoColumn>
         </ContentWrapper>
@@ -121,20 +121,20 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro
       {attempting && !hash && (
         <LoadingView onDismiss={wrappedOnDismiss}>
           <AutoColumn gap="12px" justify={'center'}>
-            <ThemedText.LargeHeader>
+            <ThemedText.DeprecatedLargeHeader>
               {usingDelegate ? <Trans>Delegating votes</Trans> : <Trans>Unlocking Votes</Trans>}
-            </ThemedText.LargeHeader>
-            <ThemedText.Main fontSize={36}> {formatCurrencyAmount(uniBalance, 4)}</ThemedText.Main>
+            </ThemedText.DeprecatedLargeHeader>
+            <ThemedText.DeprecatedMain fontSize={36}> {formatCurrencyAmount(uniBalance, 4)}</ThemedText.DeprecatedMain>
           </AutoColumn>
         </LoadingView>
       )}
       {hash && (
         <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
           <AutoColumn gap="12px" justify={'center'}>
-            <ThemedText.LargeHeader>
+            <ThemedText.DeprecatedLargeHeader>
               <Trans>Transaction Submitted</Trans>
-            </ThemedText.LargeHeader>
-            <ThemedText.Main fontSize={36}>{formatCurrencyAmount(uniBalance, 4)}</ThemedText.Main>
+            </ThemedText.DeprecatedLargeHeader>
+            <ThemedText.DeprecatedMain fontSize={36}>{formatCurrencyAmount(uniBalance, 4)}</ThemedText.DeprecatedMain>
           </AutoColumn>
         </SubmittedView>
       )}

src/components/vote/ExecuteModal.tsx

@@ -81,20 +81,20 @@ export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteM
         <ContentWrapper gap="lg">
           <AutoColumn gap="lg" justify="center">
             <RowBetween>
-              <ThemedText.MediumHeader fontWeight={500}>
+              <ThemedText.DeprecatedMediumHeader fontWeight={500}>
                 <Trans>Execute Proposal {proposalId}</Trans>
-              </ThemedText.MediumHeader>
+              </ThemedText.DeprecatedMediumHeader>
               <StyledClosed onClick={wrappedOnDismiss} />
             </RowBetween>
             <RowBetween>
-              <ThemedText.Body>
+              <ThemedText.DeprecatedBody>
                 <Trans>Executing this proposal will enact the calldata on-chain.</Trans>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
             </RowBetween>
             <ButtonPrimary onClick={onExecute}>
-              <ThemedText.MediumHeader color="white">
+              <ThemedText.DeprecatedMediumHeader color="white">
                 <Trans>Execute</Trans>
-              </ThemedText.MediumHeader>
+              </ThemedText.DeprecatedMediumHeader>
             </ButtonPrimary>
           </AutoColumn>
         </ContentWrapper>
@@ -110,13 +110,13 @@ export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteM
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>
-              <ThemedText.LargeHeader>
+              <ThemedText.DeprecatedLargeHeader>
                 <Trans>Executing</Trans>
-              </ThemedText.LargeHeader>
+              </ThemedText.DeprecatedLargeHeader>
             </AutoColumn>
-            <ThemedText.SubHeader>
+            <ThemedText.DeprecatedSubHeader>
               <Trans>Confirm this transaction in your wallet</Trans>
-            </ThemedText.SubHeader>
+            </ThemedText.DeprecatedSubHeader>
           </AutoColumn>
         </ConfirmOrLoadingWrapper>
       )}
@@ -131,18 +131,18 @@ export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteM
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>
-              <ThemedText.LargeHeader>
+              <ThemedText.DeprecatedLargeHeader>
                 <Trans>Execution Submitted</Trans>
-              </ThemedText.LargeHeader>
+              </ThemedText.DeprecatedLargeHeader>
             </AutoColumn>
             {chainId && (
               <ExternalLink
                 href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}
                 style={{ marginLeft: '4px' }}
               >
-                <ThemedText.SubHeader>
+                <ThemedText.DeprecatedSubHeader>
                   <Trans>View transaction on Explorer</Trans>
-                </ThemedText.SubHeader>
+                </ThemedText.DeprecatedSubHeader>
               </ExternalLink>
             )}
           </AutoColumn>

src/components/vote/ProposalEmptyState.tsx

@@ -25,14 +25,14 @@ interface EmptyStateProps {
 }
 const EmptyState = ({ HeaderContent, SubHeaderContent }: EmptyStateProps) => (
   <EmptyProposals>
-    <ThemedText.Body style={{ marginBottom: '8px' }}>
+    <ThemedText.DeprecatedBody style={{ marginBottom: '8px' }}>
       <HeaderContent />
-    </ThemedText.Body>
-    <ThemedText.SubHeader>
+    </ThemedText.DeprecatedBody>
+    <ThemedText.DeprecatedSubHeader>
       <Sub>
         <SubHeaderContent />
       </Sub>
-    </ThemedText.SubHeader>
+    </ThemedText.DeprecatedSubHeader>
   </EmptyProposals>
 )
 

src/components/vote/QueueModal.tsx

@@ -81,20 +81,20 @@ export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModal
         <ContentWrapper gap="lg">
           <AutoColumn gap="lg" justify="center">
             <RowBetween>
-              <ThemedText.MediumHeader fontWeight={500}>
+              <ThemedText.DeprecatedMediumHeader fontWeight={500}>
                 <Trans>Queue Proposal {proposalId}</Trans>
-              </ThemedText.MediumHeader>
+              </ThemedText.DeprecatedMediumHeader>
               <StyledClosed onClick={wrappedOnDismiss} />
             </RowBetween>
             <RowBetween>
-              <ThemedText.Body>
+              <ThemedText.DeprecatedBody>
                 <Trans>Adding this proposal to the queue will allow it to be executed, after a delay.</Trans>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
             </RowBetween>
             <ButtonPrimary onClick={onQueue}>
-              <ThemedText.MediumHeader color="white">
+              <ThemedText.DeprecatedMediumHeader color="white">
                 <Trans>Queue</Trans>
-              </ThemedText.MediumHeader>
+              </ThemedText.DeprecatedMediumHeader>
             </ButtonPrimary>
           </AutoColumn>
         </ContentWrapper>
@@ -110,13 +110,13 @@ export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModal
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>
-              <ThemedText.LargeHeader>
+              <ThemedText.DeprecatedLargeHeader>
                 <Trans>Queueing</Trans>
-              </ThemedText.LargeHeader>
+              </ThemedText.DeprecatedLargeHeader>
             </AutoColumn>
-            <ThemedText.SubHeader>
+            <ThemedText.DeprecatedSubHeader>
               <Trans>Confirm this transaction in your wallet</Trans>
-            </ThemedText.SubHeader>
+            </ThemedText.DeprecatedSubHeader>
           </AutoColumn>
         </ConfirmOrLoadingWrapper>
       )}
@@ -131,18 +131,18 @@ export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModal
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>
-              <ThemedText.LargeHeader>
+              <ThemedText.DeprecatedLargeHeader>
                 <Trans>Transaction Submitted</Trans>
-              </ThemedText.LargeHeader>
+              </ThemedText.DeprecatedLargeHeader>
             </AutoColumn>
             {chainId && (
               <ExternalLink
                 href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}
                 style={{ marginLeft: '4px' }}
               >
-                <ThemedText.SubHeader>
+                <ThemedText.DeprecatedSubHeader>
                   <Trans>View transaction on Explorer</Trans>
-                </ThemedText.SubHeader>
+                </ThemedText.DeprecatedSubHeader>
               </ExternalLink>
             )}
           </AutoColumn>

src/components/vote/VoteModal.tsx

@@ -85,7 +85,7 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }:
         <ContentWrapper gap="lg">
           <AutoColumn gap="lg" justify="center">
             <RowBetween>
-              <ThemedText.MediumHeader fontWeight={500}>
+              <ThemedText.DeprecatedMediumHeader fontWeight={500}>
                 {voteOption === VoteOption.Against ? (
                   <Trans>Vote against proposal {proposalId}</Trans>
                 ) : voteOption === VoteOption.For ? (
@@ -93,14 +93,14 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }:
                 ) : (
                   <Trans>Vote to abstain on proposal {proposalId}</Trans>
                 )}
-              </ThemedText.MediumHeader>
+              </ThemedText.DeprecatedMediumHeader>
               <StyledClosed onClick={wrappedOnDismiss} />
             </RowBetween>
-            <ThemedText.LargeHeader>
+            <ThemedText.DeprecatedLargeHeader>
               <Trans>{formatCurrencyAmount(availableVotes, 4)} Votes</Trans>
-            </ThemedText.LargeHeader>
+            </ThemedText.DeprecatedLargeHeader>
             <ButtonPrimary onClick={onVote}>
-              <ThemedText.MediumHeader color="white">
+              <ThemedText.DeprecatedMediumHeader color="white">
                 {voteOption === VoteOption.Against ? (
                   <Trans>Vote against proposal {proposalId}</Trans>
                 ) : voteOption === VoteOption.For ? (
@@ -108,7 +108,7 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }:
                 ) : (
                   <Trans>Vote to abstain on proposal {proposalId}</Trans>
                 )}
-              </ThemedText.MediumHeader>
+              </ThemedText.DeprecatedMediumHeader>
             </ButtonPrimary>
           </AutoColumn>
         </ContentWrapper>
@@ -124,13 +124,13 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }:
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>
-              <ThemedText.LargeHeader>
+              <ThemedText.DeprecatedLargeHeader>
                 <Trans>Submitting Vote</Trans>
-              </ThemedText.LargeHeader>
+              </ThemedText.DeprecatedLargeHeader>
             </AutoColumn>
-            <ThemedText.SubHeader>
+            <ThemedText.DeprecatedSubHeader>
               <Trans>Confirm this transaction in your wallet</Trans>
-            </ThemedText.SubHeader>
+            </ThemedText.DeprecatedSubHeader>
           </AutoColumn>
         </ConfirmOrLoadingWrapper>
       )}
@@ -145,18 +145,18 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }:
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>
-              <ThemedText.LargeHeader>
+              <ThemedText.DeprecatedLargeHeader>
                 <Trans>Transaction Submitted</Trans>
-              </ThemedText.LargeHeader>
+              </ThemedText.DeprecatedLargeHeader>
             </AutoColumn>
             {chainId && (
               <ExternalLink
                 href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}
                 style={{ marginLeft: '4px' }}
               >
-                <ThemedText.SubHeader>
+                <ThemedText.DeprecatedSubHeader>
                   <Trans>View transaction on Explorer</Trans>
-                </ThemedText.SubHeader>
+                </ThemedText.DeprecatedSubHeader>
               </ExternalLink>
             )}
           </AutoColumn>

src/pages/AddLiquidityV2/ConfirmAddModalBottom.tsx

@@ -26,47 +26,47 @@ export function ConfirmAddModalBottom({
   return (
     <>
       <RowBetween>
-        <ThemedText.Body>
+        <ThemedText.DeprecatedBody>
           <Trans>{currencies[Field.CURRENCY_A]?.symbol} Deposited</Trans>
-        </ThemedText.Body>
+        </ThemedText.DeprecatedBody>
         <RowFixed>
           <CurrencyLogo currency={currencies[Field.CURRENCY_A]} style={{ marginRight: '8px' }} />
-          <ThemedText.Body>{parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)}</ThemedText.Body>
+          <ThemedText.DeprecatedBody>{parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)}</ThemedText.DeprecatedBody>
         </RowFixed>
       </RowBetween>
       <RowBetween>
-        <ThemedText.Body>
+        <ThemedText.DeprecatedBody>
           <Trans>{currencies[Field.CURRENCY_B]?.symbol} Deposited</Trans>
-        </ThemedText.Body>
+        </ThemedText.DeprecatedBody>
         <RowFixed>
           <CurrencyLogo currency={currencies[Field.CURRENCY_B]} style={{ marginRight: '8px' }} />
-          <ThemedText.Body>{parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)}</ThemedText.Body>
+          <ThemedText.DeprecatedBody>{parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)}</ThemedText.DeprecatedBody>
         </RowFixed>
       </RowBetween>
       <RowBetween>
-        <ThemedText.Body>
+        <ThemedText.DeprecatedBody>
           <Trans>Rates</Trans>
-        </ThemedText.Body>
-        <ThemedText.Body>
+        </ThemedText.DeprecatedBody>
+        <ThemedText.DeprecatedBody>
           {`1 ${currencies[Field.CURRENCY_A]?.symbol} = ${price?.toSignificant(4)} ${
             currencies[Field.CURRENCY_B]?.symbol
           }`}
-        </ThemedText.Body>
+        </ThemedText.DeprecatedBody>
       </RowBetween>
       <RowBetween style={{ justifyContent: 'flex-end' }}>
-        <ThemedText.Body>
+        <ThemedText.DeprecatedBody>
           {`1 ${currencies[Field.CURRENCY_B]?.symbol} = ${price?.invert().toSignificant(4)} ${
             currencies[Field.CURRENCY_A]?.symbol
           }`}
-        </ThemedText.Body>
+        </ThemedText.DeprecatedBody>
       </RowBetween>
       <RowBetween>
-        <ThemedText.Body>
+        <ThemedText.DeprecatedBody>
           <Trans>Share of Pool:</Trans>
-        </ThemedText.Body>
-        <ThemedText.Body>
+        </ThemedText.DeprecatedBody>
+        <ThemedText.DeprecatedBody>
           <Trans>{noLiquidity ? '100' : poolTokenPercentage?.toSignificant(4)}%</Trans>
-        </ThemedText.Body>
+        </ThemedText.DeprecatedBody>
       </RowBetween>
       <ButtonPrimary style={{ margin: '20px 0 0 0' }} onClick={onAdd}>
         <Text fontWeight={500} fontSize={20}>

src/pages/AddLiquidityV2/PoolPriceBar.tsx

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

src/pages/AddLiquidityV2/index.tsx

@@ -249,12 +249,12 @@ export default function AddLiquidity() {
             {currencies[Field.CURRENCY_A]?.symbol + '/' + currencies[Field.CURRENCY_B]?.symbol + ' Pool Tokens'}
           </Text>
         </Row>
-        <ThemedText.Italic fontSize={12} textAlign="left" padding={'8px 0 0 0 '}>
+        <ThemedText.DeprecatedItalic fontSize={12} textAlign="left" padding={'8px 0 0 0 '}>
           <Trans>
             Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your transaction
             will revert.
           </Trans>
-        </ThemedText.Italic>
+        </ThemedText.DeprecatedItalic>
       </AutoColumn>
     )
   }
@@ -347,15 +347,15 @@ export default function AddLiquidity() {
                 <ColumnCenter>
                   <BlueCard>
                     <AutoColumn gap="10px">
-                      <ThemedText.Link fontWeight={600} color={'deprecated_primaryText1'}>
+                      <ThemedText.DeprecatedLink fontWeight={600} color={'deprecated_primaryText1'}>
                         <Trans>You are the first liquidity provider.</Trans>
-                      </ThemedText.Link>
-                      <ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
+                      </ThemedText.DeprecatedLink>
+                      <ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}>
                         <Trans>The ratio of tokens you add will set the price of this pool.</Trans>
-                      </ThemedText.Link>
-                      <ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
+                      </ThemedText.DeprecatedLink>
+                      <ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}>
                         <Trans>Once you are happy with the rate click supply to review.</Trans>
-                      </ThemedText.Link>
+                      </ThemedText.DeprecatedLink>
                     </AutoColumn>
                   </BlueCard>
                 </ColumnCenter>
@@ -363,7 +363,7 @@ export default function AddLiquidity() {
                 <ColumnCenter>
                   <BlueCard>
                     <AutoColumn gap="10px">
-                      <ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
+                      <ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}>
                         <Trans>
                           <b>
                             <Trans>Tip:</Trans>
@@ -372,7 +372,7 @@ export default function AddLiquidity() {
                           automatically earn fees proportional to your share of the pool, and can be redeemed at any
                           time.
                         </Trans>
-                      </ThemedText.Link>
+                      </ThemedText.DeprecatedLink>
                     </AutoColumn>
                   </BlueCard>
                 </ColumnCenter>
@@ -408,13 +408,13 @@ export default function AddLiquidity() {
               <>
                 <LightCard padding="0px" $borderRadius={'20px'}>
                   <RowBetween padding="1rem">
-                    <ThemedText.SubHeader fontWeight={500} fontSize={14}>
+                    <ThemedText.DeprecatedSubHeader fontWeight={500} fontSize={14}>
                       {noLiquidity ? (
                         <Trans>Initial prices and pool share</Trans>
                       ) : (
                         <Trans>Prices and pool share</Trans>
                       )}
-                    </ThemedText.SubHeader>
+                    </ThemedText.DeprecatedSubHeader>
                   </RowBetween>{' '}
                   <LightCard padding="1rem" $borderRadius={'20px'}>
                     <PoolPriceBar
@@ -430,9 +430,9 @@ export default function AddLiquidity() {
 
             {addIsUnsupported ? (
               <ButtonPrimary disabled={true}>
-                <ThemedText.Main mb="4px">
+                <ThemedText.DeprecatedMain mb="4px">
                   <Trans>Unsupported Asset</Trans>
-                </ThemedText.Main>
+                </ThemedText.DeprecatedMain>
               </ButtonPrimary>
             ) : !account ? (
               <TraceEvent

src/pages/CreateProposal/ProposalSubmissionModal.tsx

@@ -26,9 +26,9 @@ export const ProposalSubmissionModal = ({
       {!hash ? (
         <LoadingView onDismiss={onDismiss}>
           <AutoColumn gap="12px" justify={'center'}>
-            <ThemedText.LargeHeader>
+            <ThemedText.DeprecatedLargeHeader>
               <Trans>Submitting Proposal</Trans>
-            </ThemedText.LargeHeader>
+            </ThemedText.DeprecatedLargeHeader>
           </AutoColumn>
         </LoadingView>
       ) : (

src/pages/CreateProposal/index.tsx

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

src/pages/Earn/Countdown.tsx

@@ -56,7 +56,7 @@ export function Countdown({ exactEnd }: { exactEnd?: Date }) {
   const seconds = timeRemaining
 
   return (
-    <ThemedText.Black fontWeight={400}>
+    <ThemedText.DeprecatedBlack fontWeight={400}>
       {message}{' '}
       {Number.isFinite(timeRemaining) && (
         <code>
@@ -65,6 +65,6 @@ export function Countdown({ exactEnd }: { exactEnd?: Date }) {
             .padStart(2, '0')}`}
         </code>
       )}
-    </ThemedText.Black>
+    </ThemedText.DeprecatedBlack>
   )
 }

src/pages/Earn/Manage.tsx

@@ -153,33 +153,33 @@ export default function Manage() {
   return (
     <PageWrapper gap="lg" justify="center">
       <RowBetween style={{ gap: '24px' }}>
-        <ThemedText.MediumHeader style={{ margin: 0 }}>
+        <ThemedText.DeprecatedMediumHeader style={{ margin: 0 }}>
           <Trans>
             {currencyA?.symbol}-{currencyB?.symbol} Liquidity Mining
           </Trans>
-        </ThemedText.MediumHeader>
+        </ThemedText.DeprecatedMediumHeader>
         <DoubleCurrencyLogo currency0={currencyA ?? undefined} currency1={currencyB ?? undefined} size={24} />
       </RowBetween>
 
       <DataRow style={{ gap: '24px' }}>
         <PoolData>
           <AutoColumn gap="sm">
-            <ThemedText.Body style={{ margin: 0 }}>
+            <ThemedText.DeprecatedBody style={{ margin: 0 }}>
               <Trans>Total deposits</Trans>
-            </ThemedText.Body>
-            <ThemedText.Body fontSize={24} fontWeight={500}>
+            </ThemedText.DeprecatedBody>
+            <ThemedText.DeprecatedBody fontSize={24} fontWeight={500}>
               {valueOfTotalStakedAmountInUSDC
                 ? `$${valueOfTotalStakedAmountInUSDC.toFixed(0, { groupSeparator: ',' })}`
                 : `${valueOfTotalStakedAmountInWETH?.toSignificant(4, { groupSeparator: ',' }) ?? '-'} ETH`}
-            </ThemedText.Body>
+            </ThemedText.DeprecatedBody>
           </AutoColumn>
         </PoolData>
         <PoolData>
           <AutoColumn gap="sm">
-            <ThemedText.Body style={{ margin: 0 }}>
+            <ThemedText.DeprecatedBody style={{ margin: 0 }}>
               <Trans>Pool Rate</Trans>
-            </ThemedText.Body>
-            <ThemedText.Body fontSize={24} fontWeight={500}>
+            </ThemedText.DeprecatedBody>
+            <ThemedText.DeprecatedBody fontSize={24} fontWeight={500}>
               {stakingInfo?.active ? (
                 <Trans>
                   {stakingInfo.totalRewardRate?.multiply(BIG_INT_SECONDS_IN_WEEK)?.toFixed(0, { groupSeparator: ',' })}{' '}
@@ -188,7 +188,7 @@ export default function Manage() {
               ) : (
                 <Trans>0 UNI / week</Trans>
               )}
-            </ThemedText.Body>
+            </ThemedText.DeprecatedBody>
           </AutoColumn>
         </PoolData>
       </DataRow>
@@ -200,17 +200,17 @@ export default function Manage() {
           <CardSection>
             <AutoColumn gap="md">
               <RowBetween>
-                <ThemedText.White fontWeight={600}>
+                <ThemedText.DeprecatedWhite fontWeight={600}>
                   <Trans>Step 1. Get UNI-V2 Liquidity tokens</Trans>
-                </ThemedText.White>
+                </ThemedText.DeprecatedWhite>
               </RowBetween>
               <RowBetween style={{ marginBottom: '1rem' }}>
-                <ThemedText.White fontSize={14}>
+                <ThemedText.DeprecatedWhite fontSize={14}>
                   <Trans>
                     UNI-V2 LP tokens are required. Once you&apos;ve added liquidity to the {currencyA?.symbol}-
                     {currencyB?.symbol} pool you can stake your liquidity tokens on this page.
                   </Trans>
-                </ThemedText.White>
+                </ThemedText.DeprecatedWhite>
               </RowBetween>
               <ButtonPrimary
                 padding="8px"
@@ -259,19 +259,19 @@ export default function Manage() {
               <CardNoise />
               <AutoColumn gap="md">
                 <RowBetween>
-                  <ThemedText.White fontWeight={600}>
+                  <ThemedText.DeprecatedWhite fontWeight={600}>
                     <Trans>Your liquidity deposits</Trans>
-                  </ThemedText.White>
+                  </ThemedText.DeprecatedWhite>
                 </RowBetween>
                 <RowBetween style={{ alignItems: 'baseline' }}>
-                  <ThemedText.White fontSize={36} fontWeight={600}>
+                  <ThemedText.DeprecatedWhite fontSize={36} fontWeight={600}>
                     {stakingInfo?.stakedAmount?.toSignificant(6) ?? '-'}
-                  </ThemedText.White>
-                  <ThemedText.White>
+                  </ThemedText.DeprecatedWhite>
+                  <ThemedText.DeprecatedWhite>
                     <Trans>
                       UNI-V2 {currencyA?.symbol}-{currencyB?.symbol}
                     </Trans>
-                  </ThemedText.White>
+                  </ThemedText.DeprecatedWhite>
                 </RowBetween>
               </AutoColumn>
             </CardSection>
@@ -282,9 +282,9 @@ export default function Manage() {
             <AutoColumn gap="sm">
               <RowBetween>
                 <div>
-                  <ThemedText.Black>
+                  <ThemedText.DeprecatedBlack>
                     <Trans>Your unclaimed UNI</Trans>
-                  </ThemedText.Black>
+                  </ThemedText.DeprecatedBlack>
                 </div>
                 {stakingInfo?.earnedAmount && JSBI.notEqual(BIG_INT_ZERO, stakingInfo?.earnedAmount?.quotient) && (
                   <ButtonEmpty
@@ -298,7 +298,7 @@ export default function Manage() {
                 )}
               </RowBetween>
               <RowBetween style={{ alignItems: 'baseline' }}>
-                <ThemedText.LargeHeader fontSize={36} fontWeight={600}>
+                <ThemedText.DeprecatedLargeHeader fontSize={36} fontWeight={600}>
                   <CountUp
                     key={countUpAmount}
                     isCounting
@@ -308,8 +308,8 @@ export default function Manage() {
                     thousandsSeparator={','}
                     duration={1}
                   />
-                </ThemedText.LargeHeader>
-                <ThemedText.Black fontSize={16} fontWeight={500}>
+                </ThemedText.DeprecatedLargeHeader>
+                <ThemedText.DeprecatedBlack fontSize={16} fontWeight={500}>
                   <span role="img" aria-label="wizard-icon" style={{ marginRight: '8px ' }}>
                     ⚡
                   </span>
@@ -322,17 +322,17 @@ export default function Manage() {
                   ) : (
                     <Trans>0 UNI / week</Trans>
                   )}
-                </ThemedText.Black>
+                </ThemedText.DeprecatedBlack>
               </RowBetween>
             </AutoColumn>
           </StyledBottomCard>
         </BottomSection>
-        <ThemedText.Main style={{ textAlign: 'center' }} fontSize={14}>
+        <ThemedText.DeprecatedMain style={{ textAlign: 'center' }} fontSize={14}>
           <span role="img" aria-label="wizard-icon" style={{ marginRight: '8px' }}>
             ⭐️
           </span>
           <Trans>When you withdraw, the contract will automagically claim UNI on your behalf!</Trans>
-        </ThemedText.Main>
+        </ThemedText.DeprecatedMain>
 
         {!showAddLiquidityButton && (
           <DataRow style={{ marginBottom: '1rem' }}>
@@ -361,9 +361,9 @@ export default function Manage() {
           </DataRow>
         )}
         {!userLiquidityUnstaked ? null : userLiquidityUnstaked.equalTo('0') ? null : !stakingInfo?.active ? null : (
-          <ThemedText.Main>
+          <ThemedText.DeprecatedMain>
             <Trans>{userLiquidityUnstaked.toSignificant(6)} UNI-V2 LP tokens available</Trans>
-          </ThemedText.Main>
+          </ThemedText.DeprecatedMain>
         )}
       </PositionInfo>
     </PageWrapper>

src/pages/Earn/index.tsx

@@ -65,25 +65,25 @@ export default function Earn() {
           <CardSection>
             <AutoColumn gap="md">
               <RowBetween>
-                <ThemedText.White fontWeight={600}>
+                <ThemedText.DeprecatedWhite fontWeight={600}>
                   <Trans>Uniswap liquidity mining</Trans>
-                </ThemedText.White>
+                </ThemedText.DeprecatedWhite>
               </RowBetween>
               <RowBetween>
-                <ThemedText.White fontSize={14}>
+                <ThemedText.DeprecatedWhite fontSize={14}>
                   <Trans>
                     Deposit your Liquidity Provider tokens to receive UNI, the Uniswap protocol governance token.
                   </Trans>
-                </ThemedText.White>
+                </ThemedText.DeprecatedWhite>
               </RowBetween>{' '}
               <ExternalLink
                 style={{ color: theme.deprecated_white, textDecoration: 'underline' }}
                 href="https://uniswap.org/blog/uni/"
                 target="_blank"
               >
-                <ThemedText.White fontSize={14}>
+                <ThemedText.DeprecatedWhite fontSize={14}>
                   <Trans>Read more about UNI</Trans>
-                </ThemedText.White>
+                </ThemedText.DeprecatedWhite>
               </ExternalLink>
             </AutoColumn>
           </CardSection>
@@ -94,9 +94,9 @@ export default function Earn() {
 
       <AutoColumn gap="lg" style={{ width: '100%', maxWidth: '720px' }}>
         <DataRow style={{ alignItems: 'baseline' }}>
-          <ThemedText.MediumHeader style={{ marginTop: '0.5rem' }}>
+          <ThemedText.DeprecatedMediumHeader style={{ marginTop: '0.5rem' }}>
             <Trans>Participating pools</Trans>
-          </ThemedText.MediumHeader>
+          </ThemedText.DeprecatedMediumHeader>
           <Countdown exactEnd={stakingInfos?.[0]?.periodFinish} />
         </DataRow>
 

src/pages/MigrateV2/index.tsx

@@ -26,7 +26,7 @@ import { BodyWrapper } from '../AppBody'
 function EmptyState({ message }: { message: ReactNode }) {
   return (
     <AutoColumn style={{ minHeight: 200, justifyContent: 'center', alignItems: 'center' }}>
-      <ThemedText.Body>{message}</ThemedText.Body>
+      <ThemedText.DeprecatedBody>{message}</ThemedText.DeprecatedBody>
     </AutoColumn>
   )
 }
@@ -117,34 +117,34 @@ export default function MigrateV2() {
         <AutoColumn gap="16px">
           <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
             <BackArrow to="/pool/v2" />
-            <ThemedText.MediumHeader>
+            <ThemedText.DeprecatedMediumHeader>
               <Trans>Migrate V2 Liquidity</Trans>
-            </ThemedText.MediumHeader>
+            </ThemedText.DeprecatedMediumHeader>
             <div>
               <QuestionHelper text={<Trans>Migrate your liquidity tokens from Uniswap V2 to Uniswap V3.</Trans>} />
             </div>
           </AutoRow>
 
-          <ThemedText.Body style={{ marginBottom: 8, fontWeight: 400 }}>
+          <ThemedText.DeprecatedBody style={{ marginBottom: 8, fontWeight: 400 }}>
             <Trans>
               For each pool shown below, click migrate to remove your liquidity from Uniswap V2 and deposit it into
               Uniswap V3.
             </Trans>
-          </ThemedText.Body>
+          </ThemedText.DeprecatedBody>
 
           {!account ? (
             <LightCard padding="40px">
-              <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
+              <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
                 <Trans>Connect to a wallet to view your V2 liquidity.</Trans>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
             </LightCard>
           ) : v2IsLoading ? (
             <LightCard padding="40px">
-              <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
+              <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
                 <Dots>
                   <Trans>Loading</Trans>
                 </Dots>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
             </LightCard>
           ) : v2Pairs.filter(([, pair]) => !!pair).length > 0 ? (
             <>

src/pages/Pool/CTACards.tsx

@@ -69,7 +69,7 @@ const CTA2 = styled(ExternalLink)`
   }
 `
 
-const HeaderText = styled(ThemedText.Label)`
+const HeaderText = styled(ThemedText.DeprecatedLabel)`
   align-items: center;
   display: flex;
 
@@ -102,9 +102,9 @@ export default function CTACards() {
           <HeaderText>
             <Trans>Learn about providing liquidity</Trans> ↗
           </HeaderText>
-          <ThemedText.Body fontWeight={400} style={{ alignItems: 'center', display: 'flex' }}>
+          <ThemedText.DeprecatedBody fontWeight={400} style={{ alignItems: 'center', display: 'flex' }}>
             <Trans>Check out our v3 LP walkthrough and migration guides.</Trans>
-          </ThemedText.Body>
+          </ThemedText.DeprecatedBody>
         </ResponsiveColumn>
       </CTA1>
       <CTA2 data-testid="cta-infolink" href={infoLink + 'pools'}>
@@ -112,9 +112,9 @@ export default function CTACards() {
           <HeaderText style={{ alignSelf: 'flex-start' }}>
             <Trans>Top pools</Trans> ↗
           </HeaderText>
-          <ThemedText.Body fontWeight={400} style={{ alignSelf: 'flex-start' }}>
+          <ThemedText.DeprecatedBody fontWeight={400} style={{ alignSelf: 'flex-start' }}>
             <Trans>Explore Uniswap Analytics.</Trans>
-          </ThemedText.Body>
+          </ThemedText.DeprecatedBody>
         </ResponsiveColumn>
       </CTA2>
     </CTASection>

src/pages/Pool/index.tsx

@@ -85,7 +85,7 @@ const MoreOptionsButton = styled(ButtonGray)`
   margin-right: 8px;
 `
 
-const MoreOptionsText = styled(ThemedText.Body)`
+const MoreOptionsText = styled(ThemedText.DeprecatedBody)`
   align-items: center;
   display: flex;
 `
@@ -159,19 +159,19 @@ function WrongNetworkCard() {
         <AutoColumn gap="lg" justify="center">
           <AutoColumn gap="lg" style={{ width: '100%' }}>
             <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
-              <ThemedText.Body fontSize={'20px'}>
+              <ThemedText.DeprecatedBody fontSize={'20px'}>
                 <Trans>Pools Overview</Trans>
-              </ThemedText.Body>
+              </ThemedText.DeprecatedBody>
             </TitleRow>
 
             <MainContentWrapper>
               <ErrorContainer>
-                <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
+                <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
                   <NetworkIcon strokeWidth={1.2} />
                   <div data-testid="pools-unsupported-err">
                     <Trans>Your connected network is unsupported.</Trans>
                   </div>
-                </ThemedText.Body>
+                </ThemedText.DeprecatedBody>
               </ErrorContainer>
             </MainContentWrapper>
           </AutoColumn>
@@ -257,9 +257,9 @@ export default function Pool() {
           <AutoColumn gap="lg" justify="center">
             <AutoColumn gap="lg" style={{ width: '100%' }}>
               <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
-                <ThemedText.Body fontSize={'20px'}>
+                <ThemedText.DeprecatedBody fontSize={'20px'}>
                   <Trans>Pools Overview</Trans>
-                </ThemedText.Body>
+                </ThemedText.DeprecatedBody>
                 <ButtonRow>
                   {showV2Features && (
                     <Menu
@@ -292,12 +292,12 @@ export default function Pool() {
                   />
                 ) : (
                   <ErrorContainer>
-                    <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
+                    <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
                       <InboxIcon strokeWidth={1} />
                       <div>
                         <Trans>Your active V3 liquidity positions will appear here.</Trans>
                       </div>
-                    </ThemedText.Body>
+                    </ThemedText.DeprecatedBody>
                     {!showConnectAWallet && closedPositions.length > 0 && (
                       <ButtonText
                         style={{ marginTop: '.5rem' }}

src/pages/Pool/v2.tsx

@@ -145,26 +145,26 @@ export default function Pool() {
             <CardSection>
               <AutoColumn gap="md">
                 <RowBetween>
-                  <ThemedText.White fontWeight={600}>
+                  <ThemedText.DeprecatedWhite fontWeight={600}>
                     <Trans>Liquidity provider rewards</Trans>
-                  </ThemedText.White>
+                  </ThemedText.DeprecatedWhite>
                 </RowBetween>
                 <RowBetween>
-                  <ThemedText.White fontSize={14}>
+                  <ThemedText.DeprecatedWhite fontSize={14}>
                     <Trans>
                       Liquidity providers earn a 0.3% fee on all trades proportional to their share of the pool. Fees
                       are added to the pool, accrue in real time and can be claimed by withdrawing your liquidity.
                     </Trans>
-                  </ThemedText.White>
+                  </ThemedText.DeprecatedWhite>
                 </RowBetween>
                 <ExternalLink
                   style={{ color: theme.deprecated_white, textDecoration: 'underline' }}
                   target="_blank"
                   href="https://docs.uniswap.org/protocol/V2/concepts/core-concepts/pools"
                 >
-                  <ThemedText.White fontSize={14}>
+                  <ThemedText.DeprecatedWhite fontSize={14}>
                     <Trans>Read more about providing liquidity</Trans>
-                  </ThemedText.White>
+                  </ThemedText.DeprecatedWhite>
                 </ExternalLink>
               </AutoColumn>
             </CardSection>
@@ -176,9 +176,9 @@ export default function Pool() {
             <AutoColumn gap="lg" justify="center">
               <AutoColumn gap="md" style={{ width: '100%' }}>
                 <Layer2Prompt>
-                  <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
+                  <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
                     <Trans>V2 Pool is not available on Layer 2. Switch to Layer 1 Ethereum.</Trans>
-                  </ThemedText.Body>
+                  </ThemedText.DeprecatedBody>
                 </Layer2Prompt>
               </AutoColumn>
             </AutoColumn>
@@ -187,9 +187,9 @@ export default function Pool() {
               <AutoColumn gap="md" style={{ width: '100%' }}>
                 <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
                   <HideSmall>
-                    <ThemedText.MediumHeader style={{ marginTop: '0.5rem', justifySelf: 'flex-start' }}>
+                    <ThemedText.DeprecatedMediumHeader style={{ marginTop: '0.5rem', justifySelf: 'flex-start' }}>
                       <Trans>Your V2 liquidity</Trans>
-                    </ThemedText.MediumHeader>
+                    </ThemedText.DeprecatedMediumHeader>
                   </HideSmall>
                   <ButtonRow>
                     <ResponsiveButtonSecondary as={Link} padding="6px 8px" to="/add/v2/ETH">
@@ -210,17 +210,17 @@ export default function Pool() {
 
                 {!account ? (
                   <Card padding="40px">
-                    <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
+                    <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
                       <Trans>Connect to a wallet to view your liquidity.</Trans>
-                    </ThemedText.Body>
+                    </ThemedText.DeprecatedBody>
                   </Card>
                 ) : v2IsLoading ? (
                   <EmptyProposals>
-                    <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
+                    <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
                       <Dots>
                         <Trans>Loading</Trans>
                       </Dots>
-                    </ThemedText.Body>
+                    </ThemedText.DeprecatedBody>
                   </EmptyProposals>
                 ) : allV2PairsWithLiquidity?.length > 0 || stakingPairs?.length > 0 ? (
                   <>
@@ -267,9 +267,9 @@ export default function Pool() {
                   </>
                 ) : (
                   <EmptyProposals>
-                    <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
+                    <ThemedText.DeprecatedBody color={theme.deprecated_text3} textAlign="center">
                       <Trans>No liquidity found.</Trans>
-                    </ThemedText.Body>
+                    </ThemedText.DeprecatedBody>
                   </EmptyProposals>
                 )}
               </AutoColumn>

src/pages/PoolFinder/index.tsx

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

src/pages/RemoveLiquidity/V3.tsx

@@ -227,9 +227,14 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
         </RowBetween>
         {feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) ? (
           <>
-            <ThemedText.Italic fontSize={12} color={theme.deprecated_text2} textAlign="left" padding={'8px 0 0 0'}>
+            <ThemedText.DeprecatedItalic
+              fontSize={12}
+              color={theme.deprecated_text2}
+              textAlign="left"
+              padding={'8px 0 0 0'}
+            >
               <Trans>You will also collect fees earned from this position.</Trans>
-            </ThemedText.Italic>
+            </ThemedText.DeprecatedItalic>
             <RowBetween>
               <Text fontSize={16} fontWeight={500}>
                 <Trans>{feeValue0?.currency?.symbol} Fees Earned:</Trans>
@@ -303,18 +308,18 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                     size={20}
                     margin={true}
                   />
-                  <ThemedText.Label
+                  <ThemedText.DeprecatedLabel
                     ml="10px"
                     fontSize="20px"
-                  >{`${feeValue0?.currency?.symbol}/${feeValue1?.currency?.symbol}`}</ThemedText.Label>
+                  >{`${feeValue0?.currency?.symbol}/${feeValue1?.currency?.symbol}`}</ThemedText.DeprecatedLabel>
                 </RowFixed>
                 <RangeBadge removed={removed} inRange={!outOfRange} />
               </RowBetween>
               <LightCard>
                 <AutoColumn gap="md">
-                  <ThemedText.Main fontWeight={400}>
+                  <ThemedText.DeprecatedMain fontWeight={400}>
                     <Trans>Amount</Trans>
-                  </ThemedText.Main>
+                  </ThemedText.DeprecatedMain>
                   <RowBetween>
                     <ResponsiveHeaderText>
                       <Trans>{percentForSlider}%</Trans>
@@ -393,9 +398,9 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
 
               {showCollectAsWeth && (
                 <RowBetween>
-                  <ThemedText.Main>
+                  <ThemedText.DeprecatedMain>
                     <Trans>Collect as {nativeWrappedSymbol}</Trans>
-                  </ThemedText.Main>
+                  </ThemedText.DeprecatedMain>
                   <Toggle
                     id="receive-as-weth"
                     isActive={receiveWETH}

src/pages/RemoveLiquidity/index.tsx

@@ -317,12 +317,17 @@ export default function RemoveLiquidity() {
           </RowFixed>
         </RowBetween>
 
-        <ThemedText.Italic fontSize={12} color={theme.deprecated_text2} textAlign="left" padding={'12px 0 0 0'}>
+        <ThemedText.DeprecatedItalic
+          fontSize={12}
+          color={theme.deprecated_text2}
+          textAlign="left"
+          padding={'12px 0 0 0'}
+        >
           <Trans>
             Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your transaction
             will revert.
           </Trans>
-        </ThemedText.Italic>
+        </ThemedText.DeprecatedItalic>
       </AutoColumn>
     )
   }
@@ -451,12 +456,12 @@ export default function RemoveLiquidity() {
           <AutoColumn gap="md">
             <BlueCard>
               <AutoColumn gap="10px">
-                <ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
+                <ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}>
                   <Trans>
                     <b>Tip:</b> Removing pool tokens converts your position back into underlying tokens at the current
                     rate, proportional to your share of the pool. Accrued fees are included in the amounts you receive.
                   </Trans>
-                </ThemedText.Link>
+                </ThemedText.DeprecatedLink>
               </AutoColumn>
             </BlueCard>
             <LightCard>

src/pages/Swap/index.tsx

@@ -529,9 +529,9 @@ export default function Swap() {
               <div>
                 {swapIsUnsupported ? (
                   <ButtonPrimary disabled={true}>
-                    <ThemedText.Main mb="4px">
+                    <ThemedText.DeprecatedMain mb="4px">
                       <Trans>Unsupported Asset</Trans>
-                    </ThemedText.Main>
+                    </ThemedText.DeprecatedMain>
                   </ButtonPrimary>
                 ) : !account ? (
                   <TraceEvent
@@ -556,9 +556,9 @@ export default function Swap() {
                   </ButtonPrimary>
                 ) : routeNotFound && userHasSpecifiedInputOutput && !routeIsLoading && !routeIsSyncing ? (
                   <GreyCard style={{ textAlign: 'center' }}>
-                    <ThemedText.Main mb="4px">
+                    <ThemedText.DeprecatedMain mb="4px">
                       <Trans>Insufficient liquidity for this trade.</Trans>
-                    </ThemedText.Main>
+                    </ThemedText.DeprecatedMain>
                   </GreyCard>
                 ) : showApproveFlow ? (
                   <AutoRow style={{ flexWrap: 'nowrap', width: '100%' }}>

src/pages/Vote/Landing.tsx

@@ -88,7 +88,7 @@ const WrapSmall = styled(RowBetween)`
   `};
 `
 
-const TextButton = styled(ThemedText.Main)`
+const TextButton = styled(ThemedText.DeprecatedMain)`
   color: ${({ theme }) => theme.deprecated_primary1};
   :hover {
     cursor: pointer;
@@ -150,17 +150,17 @@ export default function Landing() {
               <CardSection>
                 <AutoColumn gap="md">
                   <RowBetween>
-                    <ThemedText.White fontWeight={600}>
+                    <ThemedText.DeprecatedWhite fontWeight={600}>
                       <Trans>Uniswap Governance</Trans>
-                    </ThemedText.White>
+                    </ThemedText.DeprecatedWhite>
                   </RowBetween>
                   <RowBetween>
-                    <ThemedText.White fontSize={14}>
+                    <ThemedText.DeprecatedWhite fontSize={14}>
                       <Trans>
                         UNI tokens represent voting shares in Uniswap governance. You can vote on each proposal yourself
                         or delegate your votes to a third party.
                       </Trans>
-                    </ThemedText.White>
+                    </ThemedText.DeprecatedWhite>
                   </RowBetween>
                   <ExternalLink
                     style={{
@@ -170,9 +170,9 @@ export default function Landing() {
                     href="https://uniswap.org/blog/uni"
                     target="_blank"
                   >
-                    <ThemedText.White fontSize={14}>
+                    <ThemedText.DeprecatedWhite fontSize={14}>
                       <Trans>Read more about Uniswap governance</Trans>
-                    </ThemedText.White>
+                    </ThemedText.DeprecatedWhite>
                   </ExternalLink>
                 </AutoColumn>
               </CardSection>
@@ -182,9 +182,9 @@ export default function Landing() {
           </TopSection>
           <TopSection gap="2px">
             <WrapSmall>
-              <ThemedText.MediumHeader style={{ margin: '0.5rem 0.5rem 0.5rem 0', flexShrink: 0 }}>
+              <ThemedText.DeprecatedMediumHeader style={{ margin: '0.5rem 0.5rem 0.5rem 0', flexShrink: 0 }}>
                 <Trans>Proposals</Trans>
-              </ThemedText.MediumHeader>
+              </ThemedText.DeprecatedMediumHeader>
               <AutoRow gap="6px" justify="flex-end">
                 {loadingProposals || loadingAvailableVotes ? <Loader /> : null}
                 {showUnlockVoting ? (
@@ -197,20 +197,20 @@ export default function Landing() {
                     <Trans>Unlock Voting</Trans>
                   </ButtonPrimary>
                 ) : availableVotes && JSBI.notEqual(JSBI.BigInt(0), availableVotes?.quotient) ? (
-                  <ThemedText.Body fontWeight={500} mr="6px">
+                  <ThemedText.DeprecatedBody fontWeight={500} mr="6px">
                     <Trans>
                       <FormattedCurrencyAmount currencyAmount={availableVotes} /> Votes
                     </Trans>
-                  </ThemedText.Body>
+                  </ThemedText.DeprecatedBody>
                 ) : uniBalance &&
                   userDelegatee &&
                   userDelegatee !== ZERO_ADDRESS &&
                   JSBI.notEqual(JSBI.BigInt(0), uniBalance?.quotient) ? (
-                  <ThemedText.Body fontWeight={500} mr="6px">
+                  <ThemedText.DeprecatedBody fontWeight={500} mr="6px">
                     <Trans>
                       <FormattedCurrencyAmount currencyAmount={uniBalance} /> Votes
                     </Trans>
-                  </ThemedText.Body>
+                  </ThemedText.DeprecatedBody>
                 ) : (
                   ''
                 )}
@@ -229,9 +229,9 @@ export default function Landing() {
                 <div />
                 {userDelegatee && userDelegatee !== ZERO_ADDRESS ? (
                   <RowFixed>
-                    <ThemedText.Body fontWeight={500} mr="4px">
+                    <ThemedText.DeprecatedBody fontWeight={500} mr="4px">
                       <Trans>Delegated to:</Trans>
-                    </ThemedText.Body>
+                    </ThemedText.DeprecatedBody>
                     <AddressButton>
                       <StyledExternalLink
                         href={getExplorerLink(1, userDelegatee, ExplorerDataType.ADDRESS)}
@@ -255,9 +255,9 @@ export default function Landing() {
             {allProposals?.length > 0 && (
               <AutoColumn gap="md">
                 <RowBetween>
-                  <ThemedText.Main>
+                  <ThemedText.DeprecatedMain>
                     <Trans>Show Cancelled</Trans>
-                  </ThemedText.Main>
+                  </ThemedText.DeprecatedMain>
                   <Toggle
                     isActive={!hideCancelled}
                     toggle={() => setHideCancelled((hideCancelled) => !hideCancelled)}
@@ -283,9 +283,9 @@ export default function Landing() {
               })}
           </TopSection>
 
-          <ThemedText.SubHeader color="text3">
+          <ThemedText.DeprecatedSubHeader color="text3">
             <Trans>A minimum threshold of 0.25% of the total UNI supply is required to submit proposals</Trans>
-          </ThemedText.SubHeader>
+          </ThemedText.DeprecatedSubHeader>
         </PageWrapper>
       </Trace>
       <SwitchLocaleLink />

src/pages/Vote/VotePage.tsx

@@ -284,27 +284,29 @@ export default function VotePage() {
               {proposalData && <ProposalStatus status={proposalData.status} />}
             </RowBetween>
             <AutoColumn gap="10px" style={{ width: '100%' }}>
-              <ThemedText.LargeHeader style={{ marginBottom: '.5rem' }}>{proposalData?.title}</ThemedText.LargeHeader>
+              <ThemedText.DeprecatedLargeHeader style={{ marginBottom: '.5rem' }}>
+                {proposalData?.title}
+              </ThemedText.DeprecatedLargeHeader>
               <RowBetween>
-                <ThemedText.Main>
+                <ThemedText.DeprecatedMain>
                   {startDate && startDate > now ? (
                     <Trans>Voting starts approximately {startDate.toLocaleString(locale, dateFormat)}</Trans>
                   ) : null}
-                </ThemedText.Main>
+                </ThemedText.DeprecatedMain>
               </RowBetween>
               <RowBetween>
-                <ThemedText.Main>
+                <ThemedText.DeprecatedMain>
                   {endDate &&
                     (endDate < now ? (
                       <Trans>Voting ended {endDate.toLocaleString(locale, dateFormat)}</Trans>
                     ) : (
                       <Trans>Voting ends approximately {endDate.toLocaleString(locale, dateFormat)}</Trans>
                     ))}
-                </ThemedText.Main>
+                </ThemedText.DeprecatedMain>
               </RowBetween>
               {proposalData && proposalData.status === ProposalState.ACTIVE && !showVotingButtons && (
                 <GreyCard>
-                  <ThemedText.Black>
+                  <ThemedText.DeprecatedBlack>
                     <Trans>
                       Only UNI votes that were self delegated or delegated to another address before block{' '}
                       {proposalData.startBlock} are eligible for voting.
@@ -317,7 +319,7 @@ export default function VotePage() {
                         </Trans>
                       </span>
                     )}
-                  </ThemedText.Black>
+                  </ThemedText.DeprecatedBlack>
                 </GreyCard>
               )}
             </AutoColumn>
@@ -362,9 +364,9 @@ export default function VotePage() {
               <>
                 {eta && (
                   <RowBetween>
-                    <ThemedText.Black>
+                    <ThemedText.DeprecatedBlack>
                       <Trans>This proposal may be executed after {eta.toLocaleString(locale, dateFormat)}.</Trans>
-                    </ThemedText.Black>
+                    </ThemedText.DeprecatedBlack>
                   </RowBetween>
                 )}
                 <RowFixed style={{ width: '100%', gap: '12px' }}>
@@ -387,18 +389,18 @@ export default function VotePage() {
                 <CardSection>
                   <AutoColumn gap="md">
                     <WrapSmall>
-                      <ThemedText.Black fontWeight={600}>
+                      <ThemedText.DeprecatedBlack fontWeight={600}>
                         <Trans>For</Trans>
-                      </ThemedText.Black>
+                      </ThemedText.DeprecatedBlack>
                       {proposalData && (
-                        <ThemedText.Black fontWeight={600}>
+                        <ThemedText.DeprecatedBlack fontWeight={600}>
                           {proposalData.forCount.toFixed(0, { groupSeparator: ',' })}
                           {quorumAmount && (
                             <span style={{ fontWeight: 400 }}>{` / ${quorumAmount.toExact({
                               groupSeparator: ',',
                             })}`}</span>
                           )}
-                        </ThemedText.Black>
+                        </ThemedText.DeprecatedBlack>
                       )}
                     </WrapSmall>
                   </AutoColumn>
@@ -416,13 +418,13 @@ export default function VotePage() {
                 <CardSection>
                   <AutoColumn gap="md">
                     <WrapSmall>
-                      <ThemedText.Black fontWeight={600}>
+                      <ThemedText.DeprecatedBlack fontWeight={600}>
                         <Trans>Against</Trans>
-                      </ThemedText.Black>
+                      </ThemedText.DeprecatedBlack>
                       {proposalData && (
-                        <ThemedText.Black fontWeight={600}>
+                        <ThemedText.DeprecatedBlack fontWeight={600}>
                           {proposalData.againstCount.toFixed(0, { groupSeparator: ',' })}
-                        </ThemedText.Black>
+                        </ThemedText.DeprecatedBlack>
                       )}
                     </WrapSmall>
                   </AutoColumn>
@@ -438,9 +440,9 @@ export default function VotePage() {
               </StyledDataCard>
             </CardWrapper>
             <AutoColumn gap="md">
-              <ThemedText.MediumHeader fontWeight={600}>
+              <ThemedText.DeprecatedMediumHeader fontWeight={600}>
                 <Trans>Details</Trans>
-              </ThemedText.MediumHeader>
+              </ThemedText.DeprecatedMediumHeader>
               {proposalData?.details?.map((d, i) => {
                 return (
                   <DetailText key={i}>
@@ -459,17 +461,17 @@ export default function VotePage() {
               })}
             </AutoColumn>
             <AutoColumn gap="md">
-              <ThemedText.MediumHeader fontWeight={600}>
+              <ThemedText.DeprecatedMediumHeader fontWeight={600}>
                 <Trans>Description</Trans>
-              </ThemedText.MediumHeader>
+              </ThemedText.DeprecatedMediumHeader>
               <MarkDownWrapper>
                 <ReactMarkdown source={proposalData?.description} />
               </MarkDownWrapper>
             </AutoColumn>
             <AutoColumn gap="md">
-              <ThemedText.MediumHeader fontWeight={600}>
+              <ThemedText.DeprecatedMediumHeader fontWeight={600}>
                 <Trans>Proposer</Trans>
-              </ThemedText.MediumHeader>
+              </ThemedText.DeprecatedMediumHeader>
               <ProposerAddressLink
                 href={
                   proposalData?.proposer && chainId

src/theme/index.tsx

@@ -210,52 +210,52 @@ const TextWrapper = styled(Text)<{ color: keyof Colors }>`
  * Preset styles of the Rebass Text component
  */
 export const ThemedText = {
-  Main(props: TextProps) {
+  DeprecatedMain(props: TextProps) {
     return <TextWrapper fontWeight={500} color={'deprecated_text2'} {...props} />
   },
-  Link(props: TextProps) {
+  DeprecatedLink(props: TextProps) {
     return <TextWrapper fontWeight={500} color={'deprecated_primary1'} {...props} />
   },
-  Label(props: TextProps) {
+  DeprecatedLabel(props: TextProps) {
     return <TextWrapper fontWeight={600} color={'deprecated_text1'} {...props} />
   },
-  Black(props: TextProps) {
+  DeprecatedBlack(props: TextProps) {
     return <TextWrapper fontWeight={500} color={'deprecated_text1'} {...props} />
   },
-  White(props: TextProps) {
+  DeprecatedWhite(props: TextProps) {
     return <TextWrapper fontWeight={500} color={'deprecated_white'} {...props} />
   },
-  Body(props: TextProps) {
+  DeprecatedBody(props: TextProps) {
     return <TextWrapper fontWeight={400} fontSize={16} color={'deprecated_text1'} {...props} />
   },
-  LargeHeader(props: TextProps) {
+  DeprecatedLargeHeader(props: TextProps) {
     return <TextWrapper fontWeight={600} fontSize={24} {...props} />
   },
-  MediumHeader(props: TextProps) {
+  DeprecatedMediumHeader(props: TextProps) {
     return <TextWrapper fontWeight={500} fontSize={20} {...props} />
   },
-  SubHeader(props: TextProps) {
+  DeprecatedSubHeader(props: TextProps) {
     return <TextWrapper fontWeight={400} fontSize={14} {...props} />
   },
-  Small(props: TextProps) {
+  DeprecatedSmall(props: TextProps) {
     return <TextWrapper fontWeight={500} fontSize={11} {...props} />
   },
-  Blue(props: TextProps) {
+  DeprecatedBlue(props: TextProps) {
     return <TextWrapper fontWeight={500} color={'deprecated_blue1'} {...props} />
   },
-  Yellow(props: TextProps) {
+  DeprecatedYellow(props: TextProps) {
     return <TextWrapper fontWeight={500} color={'deprecated_yellow3'} {...props} />
   },
-  DarkGray(props: TextProps) {
+  DeprecatedDarkGray(props: TextProps) {
     return <TextWrapper fontWeight={500} color={'deprecated_text3'} {...props} />
   },
-  Gray(props: TextProps) {
+  DeprecatedGray(props: TextProps) {
     return <TextWrapper fontWeight={500} color={'deprecated_bg3'} {...props} />
   },
-  Italic(props: TextProps) {
+  DeprecatedItalic(props: TextProps) {
     return <TextWrapper fontWeight={500} fontSize={12} fontStyle={'italic'} color={'deprecated_text2'} {...props} />
   },
-  Error({ error, ...props }: { error: boolean } & TextProps) {
+  DeprecatedError({ error, ...props }: { error: boolean } & TextProps) {
     return <TextWrapper fontWeight={500} color={error ? 'deprecated_red1' : 'deprecated_text2'} {...props} />
   },
 }