fix: deprecate legacy font sizes, closes leather-io#4587

src/app/features/increase-fee-drawer/components/increase-fee-field.tsx

@@ -45,7 +45,7 @@ export function IncreaseFeeField(props: IncreaseFeeFieldProps): React.JSX.Elemen
           onSelectMultiplier={onSelectMultiplier}
         />
         <Flex>
-          <styled.label display="block" fontSize={1} fontWeight={500} mb="space.02" htmlFor="fee">
+          <styled.label display="block" textStyle="body.02" mb="space.02" htmlFor="fee">
             Fee
           </styled.label>
           <styled.input

src/app/features/message-signer/message-preview-box.tsx

@@ -19,9 +19,7 @@ export function MessagePreviewBox({ message, hash }: MessageBoxProps) {
       <Stack
         bg="accent.background-primary"
         borderRadius="lg"
-        fontSize={2}
         gap="space.02"
-        lineHeight="1.6"
         px="space.05"
         py="space.05"
         overflowX="auto"

src/app/features/stacks-transaction-request/row.tsx

@@ -21,13 +21,7 @@ export function Row({ name, type, value }: RowProps): React.JSX.Element {
       {type?.toLowerCase() === 'principal' ? (
         <PrincipalValue address={value} />
       ) : (
-        <styled.span
-          display="block"
-          fontSize={2}
-          fontWeight={500}
-          lineHeight="1.6"
-          wordBreak="break-all"
-        >
+        <styled.span display="block" textStyle="body.02" wordBreak="break-all">
           {value}
         </styled.span>
       )}

src/app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary.tsx

@@ -51,10 +51,9 @@ export function LockBitcoinSummary() {
         symbol={symbol}
         value={Number(satToBtc(txMoney.amount))}
       />
-      <styled.span fontSize={2} fontWeight={200} p="space.05" textAlign="justify">
-        <styled.span style={{ fontWeight: 500 }}>Success!</styled.span> Your bitcoin has been locked
-        securely. All that's left is for it to be confirmed on the blockchain. After confirmation,
-        you can proceed with borrowing against it.
+      <styled.span textStyle="body.02" p="space.05" textAlign="justify">
+        <b>Success!</b> Your bitcoin has been locked securely. All that's left is for it to be
+        confirmed on the blockchain. After confirmation, you can proceed with borrowing against it.
       </styled.span>
       <InfoCardFooter>
         <HStack gap="space.04" width="100%">

src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx

@@ -1,7 +1,7 @@
 import { Outlet, useLocation } from 'react-router-dom';
 
 import { Form, Formik } from 'formik';
-import { Box } from 'leather-styles/jsx';
+import { Box, styled } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
@@ -63,22 +63,20 @@ export function Brc20SendForm() {
                 />
                 <SelectedAssetField icon={<Brc20TokenIcon />} name={tick} symbol={tick} />
                 <InfoLabel title="Sending BRC-20 tokens requires two steps">
-                  {'1. Create transfer inscription with amount to send'}
-                  <br />
-                  {'2. Send transfer inscription to recipient of choice'}
-                  <br /> <br />
+                  <styled.ol mb="space.02">
+                    <li>1. Create transfer inscription with amount to send</li>
+                    <li>2. Send transfer inscription to recipient of choice</li>
+                  </styled.ol>
                   <LeatherButton
                     onClick={() => {
                       openInNewTab(
                         'https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens'
                       );
                     }}
-                    fontSize={1}
-                    fontWeight={500}
-                    lineHeight="1.6"
+                    textStyle="body.02"
                     variant="link"
                   >
-                    {'Learn more'}
+                    Learn more
                   </LeatherButton>
                 </InfoLabel>
               </SendCryptoAssetFormLayout>

src/app/pages/send/sent-summary/brc20-sent-summary.tsx

@@ -1,6 +1,6 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { HStack, Stack } from 'leather-styles/jsx';
+import { HStack, Stack, styled } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
 import { createMoney } from '@shared/models/money.model';
@@ -57,19 +57,19 @@ export function Brc20SentSummary() {
 
       <Stack px="space.06" pb="space.06" width="100%">
         <InfoLabel mb="space.05" title="One more step is required to send tokens">
-          {`You'll need to send the transfer inscription to your recipient of choice from the home screen once its status changes to "Ready to send"`}
-          <br />
-          <br />
+          <styled.span mb="space.02">
+            You'll need to send the transfer inscription to your recipient of choice from the home
+            screen once its status changes to "Ready to send"
+          </styled.span>
+
           <LeatherButton
-            fontSize={1}
-            fontWeight={500}
-            lineHeight="1.6"
+            textStyle="body.02"
             onClick={() => {
               openInNewTab('https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens');
             }}
             variant="link"
           >
-            {'Learn more'}
+            Learn more
           </LeatherButton>
         </InfoLabel>
         <InfoCardSeparator />

test-app/src/components/debugger.tsx

@@ -361,7 +361,7 @@ export const Debugger = () => {
       </styled.span>
       {txId && (
         <styled.span>
-          <styled.span color="green" fontSize={1} data-testid="status-message">
+          <styled.span color="green" textStyle="body.02" data-testid="status-message">
             Successfully broadcasted &quot;{txType}&quot;
           </styled.span>
           <ExplorerLink txId={txId} />

test-app/src/components/deploy.tsx

@@ -21,7 +21,7 @@ export const Deploy = () => {
     });
   return (
     <Box mb={6} maxWidth="600px" mt={6}>
-      <styled.h2 fontSize={5} mt={6}>
+      <styled.h2 textStyle="body.02" mt={6}>
         Contract Deploy
       </styled.h2>
       <styled.span display="block" my={4}>

test-app/src/components/home.tsx

@@ -72,7 +72,7 @@ export const Home: React.FC = () => {
 
   return (
     <Container>
-      <styled.h1 textStyle="display.large" fontSize={7} mb="space.05" display="block">
+      <styled.h1 textStyle="heading.01" mb="space.05" display="block">
         Testnet Demo
       </styled.h1>
       {state.userData ? <Page tab={tab} setTab={setTab} /> : <Auth />}

test-app/src/components/profile.tsx

@@ -39,7 +39,7 @@ export const Profile = () => {
     <Box py={6}>
       {updatedProfile && (
         <styled.span textStyle="body.large" display="block" my="space.04">
-          <styled.span color="green" fontSize={1}>
+          <styled.span color="green">
             Profile {updatedProfile.profile ? 'successfully ' : 'not'} updated
           </styled.span>
           <styled.span>

test-app/src/components/signature.tsx

@@ -191,8 +191,7 @@ export const Signature = () => {
     <Box py={6}>
       {(signature || signatureStructured) && (
         <styled.span textStyle="body.large" display="block" my="space.04">
-          <styled.span color="green" fontSize={1}>
-            {' '}
+          <styled.span color="green">
             Signature {signatureIsVerified ? 'successfully ' : 'not'} verified
           </styled.span>
         </styled.span>

test-app/src/components/status.tsx

@@ -177,7 +177,7 @@ export const Status = () => {
       )}
 
       {error && (
-        <styled.span display="block" color="red" width="100%" fontSize={1} mt={2}>
+        <styled.span display="block" color="red" width="100%" mt={2}>
           {error}
         </styled.span>
       )}