leather-io · kyranjamie · Mar 8, 2024 · Mar 8, 2024
diff --git a/package.json b/package.json
@@ -132,7 +132,7 @@
     "@dlc-link/dlc-tools": "1.1.1",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
-    "@leather-wallet/tokens": "0.0.10",
+    "@leather-wallet/tokens": "0.0.13",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
     "@noble/secp256k1": "2.0.0",

diff --git a/src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx b/src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx
@@ -43,9 +43,9 @@ export function BitcoinContractEntryPointLayout(props: BitcoinContractEntryPoint
           </BasicTooltip>
         </HStack>
         <HStack alignItems="center" justifyContent="space-between" width="100%">
-          <styled.span textStyle="caption.02">{caption}</styled.span>
+          <styled.span textStyle="caption.01">{caption}</styled.span>
           <Flex>
-            {isLoading ? '' : <styled.span textStyle="caption.02">{usdBalance}</styled.span>}
+            {isLoading ? '' : <styled.span textStyle="caption.01">{usdBalance}</styled.span>}
           </Flex>
         </HStack>
       </Flag>

diff --git a/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx b/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx
@@ -41,7 +41,7 @@ export function FeesListItem({
       </Flex>
       <Flex justifyContent="center">
         <styled.span
-          textStyle="caption.02"
+          textStyle="caption.01"
           data-testid={SharedComponentsSelectors.FeesListItemFeeValue}
         >
           {`${feeFiatValue} | ${feeRate} sats/vB | ${feeAmount}`}

diff --git a/src/app/components/disclaimer.tsx b/src/app/components/disclaimer.tsx
@@ -10,7 +10,7 @@ interface DisclaimerProps extends BoxProps {
 export function Disclaimer({ disclaimerText, learnMoreUrl, ...props }: DisclaimerProps) {
   return (
     <Box lineHeight="1.4" {...props}>
-      <styled.span textStyle="caption.02">
+      <styled.span textStyle="caption.01">
         {disclaimerText}
         {learnMoreUrl ? (
           <Link display="inline" fontSize="14px" onClick={() => openInNewTab(learnMoreUrl)}>

diff --git a/src/app/components/inscription-preview-card/components/inscription-metadata.tsx b/src/app/components/inscription-preview-card/components/inscription-metadata.tsx
@@ -20,9 +20,9 @@ export function InscriptionMetadata({
     <Flex alignItems="flex-start" flexDirection="column" justifyContent="center">
       {icon && icon}
       <styled.span textStyle="label.01">{title}</styled.span>
-      <styled.span textStyle="caption.02">{subtitle}</styled.span>
+      <styled.span textStyle="caption.01">{subtitle}</styled.span>
       {action ? (
-        <Link color="stacks" onClick={() => action()} textStyle="caption.02" variant="text">
+        <Link color="stacks" onClick={() => action()} textStyle="caption.01" variant="text">
           {actionLabel}
         </Link>
       ) : null}

diff --git a/src/app/components/no-fees-warning-row.tsx b/src/app/components/no-fees-warning-row.tsx
@@ -9,8 +9,8 @@ interface NoFeesWarningRowProps {
 export function NoFeesWarningRow({ chainId }: NoFeesWarningRowProps) {
   return (
     <HStack alignItems="center" justifyContent="space-between">
-      <styled.span textStyle="caption.02">No fees are incurred</styled.span>
-      <styled.span textStyle="caption.02">
+      <styled.span textStyle="caption.01">No fees are incurred</styled.span>
+      <styled.span textStyle="caption.01">
         {whenStacksChainId(chainId)({
           [ChainID.Testnet]: 'Testnet',
           [ChainID.Mainnet]: 'Mainnet',

diff --git a/src/app/features/bitcoin-choose-fee/components/choose-fee-subtitle.tsx b/src/app/features/bitcoin-choose-fee/components/choose-fee-subtitle.tsx
@@ -10,7 +10,7 @@ export function ChooseFeeSubtitle({ isSendingMax }: { isSendingMax: boolean }) {
   );
 
   return (
-    <styled.span color="ink.text-subdued" textAlign="center" textStyle="caption.02">
+    <styled.span color="ink.text-subdued" textAlign="center" textStyle="caption.01">
       {subtitle}
     </styled.span>
   );

diff --git a/src/app/features/collectibles/components/taproot-balance-displayer.tsx b/src/app/features/collectibles/components/taproot-balance-displayer.tsx
@@ -19,7 +19,7 @@ export function TaprootBalanceDisplayer({ onSelectRetrieveBalance }: TaprootBala
   if (balance.amount.isLessThanOrEqualTo(0)) return null;
   return (
     <BasicTooltip label={taprootSpendNotSupportedYetMsg} asChild>
-      <Link onClick={() => onSelectRetrieveBalance()} textStyle="caption.02" variant="text">
+      <Link onClick={() => onSelectRetrieveBalance()} textStyle="caption.01" variant="text">
         {formatMoney(balance)}
       </Link>
     </BasicTooltip>

diff --git a/src/app/features/hiro-messages/components/in-app-message-item.tsx b/src/app/features/hiro-messages/components/in-app-message-item.tsx
@@ -41,7 +41,7 @@ export function HiroMessageItem(props: HiroMessageItemProps) {
             </styled.span>
           )}
           <styled.span
-            textStyle="caption.02"
+            textStyle="caption.01"
             display="inline-block"
             fontSize="inherit"
             mr={['space.02', 'space.04']}

diff --git a/src/app/features/leather-intro-dialog/leather-intro-steps.tsx b/src/app/features/leather-intro-dialog/leather-intro-steps.tsx
@@ -99,7 +99,7 @@ export function LeatherIntroDialogPart2() {
           Learn more →
         </styled.a>
       </Box>
-      <styled.span textStyle="caption.02" display="block" textAlign="left" mt="16px">
+      <styled.span textStyle="caption.01" display="block" textAlign="left" mt="16px">
         Leather Wallet will now be provided by Leather Wallet LLC [a subsidiary of Nassau Machines
         Inc]. Please review and accept Leather Wallet{' '}
         <styled.a href="https://leather.io/terms" textDecoration="underline" target="_blank">

diff --git a/src/app/features/message-signer/hash-drawer.tsx b/src/app/features/message-signer/hash-drawer.tsx
@@ -48,7 +48,7 @@ export function HashDrawer(props: HashDrawerProps) {
           color="ink.text-subdued"
           lineHeight="1.6"
           wordBreak="break-all"
-          textStyle="caption.02"
+          textStyle="caption.01"
         >
           {displayHash}
         </styled.span>

diff --git a/...bt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx b/...bt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx
@@ -59,7 +59,7 @@ export function PsbtInputOutputItemLayout({
             variant="text"
           >
             <BasicTooltip disabled={!txIdHoverLabel} label={txIdHoverLabel} side="bottom">
-              <styled.span textStyle="caption.02">{txId}</styled.span>
+              <styled.span textStyle="caption.01">{txId}</styled.span>
             </BasicTooltip>
           </Link>
         ) : null}

diff --git a/src/app/features/psbt-signer/components/psbt-request-fee.tsx b/src/app/features/psbt-signer/components/psbt-request-fee.tsx
@@ -17,7 +17,7 @@ export function PsbtRequestFee(props: { fee: Money }) {
         <styled.span textStyle="label.01">Transaction fee</styled.span>
         <Stack alignItems="flex-end" gap="space.01">
           <styled.span textStyle="label.01">{formatMoney(fee)}</styled.span>
-          <styled.span textStyle="caption.02">
+          <styled.span textStyle="caption.01">
             {i18nFormatCurrency(calculateBitcoinFiatValue(fee))}
           </styled.span>
         </Stack>

diff --git a/src/app/features/stacks-message-signer/components/structured-data-box.tsx b/src/app/features/stacks-message-signer/components/structured-data-box.tsx
@@ -49,7 +49,7 @@ export function StructuredDataBox(props: {
           <Box fontSize="14px" lineHeight="1.7" px="space.05">
             <HStack alignItems="center" justifyContent="space-between">
               <styled.h2 textStyle="label.01">{domainName}</styled.h2>
-              <styled.span lineHeight="1.5" textStyle="caption.02">
+              <styled.span lineHeight="1.5" textStyle="caption.01">
                 {domainVersion} {domainChainName}
               </styled.span>
             </HStack>

diff --git a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx
@@ -45,7 +45,7 @@ export function GetAddressesLayout(props: GetAddressesLayoutProps) {
         alignSelf="bottom"
         bg="ink.background-secondary"
       >
-        <styled.p textStyle="caption.02">
+        <styled.p textStyle="caption.01">
           By connecting you give permission to {requester} to see all addresses linked to this
           account
         </styled.p>

diff --git a/...-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx b/...-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx
@@ -23,7 +23,7 @@ export function RecipientAddressDisplayer({ address }: RecipientAddressDisplayer
   return (
     <HStack mb="space.04" width="100%" px="space.04" mt="space.02">
       <styled.span
-        textStyle="caption.02"
+        textStyle="caption.01"
         data-testid={SendCryptoAssetSelectors.RecipientBnsAddressLabel}
       >
         {address}

diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
@@ -94,7 +94,7 @@ export function BtcSendForm() {
                 {currentNetwork.chain.bitcoin.bitcoinNetwork === 'testnet' && (
                   <Callout variant="warning" mt="space.04">
                     {'This is a Bitcoin testnet transaction. Funds have no value. '}
-                    <Link href="https://coinfaucet.eu/en/btc-testnet" textStyle="caption.02">
+                    <Link href="https://coinfaucet.eu/en/btc-testnet" textStyle="caption.01">
                       Get testnet BTC here ↗
                     </Link>
                   </Callout>

diff --git a/src/app/pages/swap/components/swap-amount-field.tsx b/src/app/pages/swap/components/swap-amount-field.tsx
@@ -79,7 +79,7 @@ export function SwapAmountField({ amountAsFiat, isDisabled, name }: SwapAmountFi
         }}
       />
       {amountAsFiat ? (
-        <styled.span color={showError ? 'error' : 'ink.text-subdued'} textStyle="caption.02">
+        <styled.span color={showError ? 'error' : 'ink.text-subdued'} textStyle="caption.01">
           {amountAsFiat}
         </styled.span>
       ) : null}

diff --git a/src/app/pages/swap/components/swap-assets-pair/swap-asset-item.layout.tsx b/src/app/pages/swap/components/swap-assets-pair/swap-asset-item.layout.tsx
@@ -16,7 +16,7 @@ export function SwapAssetItemLayout({ caption, icon, symbol, value }: SwapAssetI
       spacing="space.03"
       width="100%"
     >
-      <styled.span color="ink.text-subdued" textStyle="caption.02">
+      <styled.span color="ink.text-subdued" textStyle="caption.01">
         {caption}
       </styled.span>
       <HStack alignItems="center" justifyContent="space-between">

diff --git a/src/app/pages/swap/components/swap-selected-asset.layout.tsx b/src/app/pages/swap/components/swap-selected-asset.layout.tsx
@@ -77,7 +77,7 @@ export function SwapSelectedAssetLayout({
             <styled.span
               color={captionTextColor}
               cursor={tooltipLabel ? 'pointer' : 'unset'}
-              textStyle="caption.02"
+              textStyle="caption.01"
             >
               {showError ? error : caption}
             </styled.span>
@@ -88,7 +88,7 @@ export function SwapSelectedAssetLayout({
             onClick={onClickHandler ? onClickHandler : noop}
             variant={onClickHandler ? 'underlined' : 'text'}
           >
-            <styled.span textStyle="caption.02">{value}</styled.span>
+            <styled.span textStyle="caption.01">{value}</styled.span>
           </Link>
         </HStack>
       ) : null}

diff --git a/src/app/ui/components/callout/callout.tsx b/src/app/ui/components/callout/callout.tsx
@@ -60,7 +60,7 @@ export function Callout(props: CalloutProps & CalloutVariants) {
               {title}
             </styled.span>
           )}
-          {children && <styled.span textStyle="caption.02">{children}</styled.span>}
+          {children && <styled.span textStyle="caption.01">{children}</styled.span>}
         </Stack>
       </Flag>
     </Box>

diff --git a/src/app/ui/components/typography/caption.tsx b/src/app/ui/components/typography/caption.tsx
@@ -8,7 +8,7 @@ export const Caption = forwardRef<HTMLSpanElement, HTMLStyledProps<'span'>>(
       _disabled={{ color: 'ink.non-interactive' }}
       color="ink.text-subdued"
       ref={ref}
-      textStyle="caption.02"
+      textStyle="caption.01"
       {...props}
     >
       {children}

diff --git a/theme/typography.ts b/theme/typography.ts
@@ -1,5 +1,5 @@
-import { textStyles as leatherTextStyles } from '@leather-wallet/tokens';
+import { getWebTextVariants } from '@leather-wallet/tokens';
 import { defineTextStyles } from '@pandacss/dev';
 
 // ts-unused-exports:disable-next-line
-export const textStyles = defineTextStyles({ ...leatherTextStyles });
+export const textStyles = defineTextStyles({ ...getWebTextVariants() });
diff --git a/yarn.lock b/yarn.lock
@@ -2594,10 +2594,10 @@
     "@trivago/prettier-plugin-sort-imports" "^4.2.0"
     prettier "^3.0.3"
 
-"@leather-wallet/[email protected].10":
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.10.tgz#8d944d6f63847a71d9739974163554496c92b79c"
-  integrity sha512-DhFBpPclCaDM5+o/H5+luPfTrnLuQ8aW9PGBRSc+yiIhSL1wNv/fuTljF/R4uHQQblG4EQQ2fjRyh5XKBEfKaQ==
+"@leather-wallet/[email protected].13":
+  version "0.0.13"
+  resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.13.tgz#0162f59d888afcb15dd71fbbe7ab54b5b54b6386"
+  integrity sha512-ScXDDa0pyB86XqUHTWGoZPsrCpdWG/vEvhD5YyfSIBKnNnPdf/zP16/Wv88edPBXQfcR98YUOgIm+Uvjq75Fqw==
 
 "@ledgerhq/devices@^8.0.7", "@ledgerhq/devices@^8.2.0":
   version "8.2.0"