From eb3db7eec438e8314c86e7672535851e8b92cc39 Mon Sep 17 00:00:00 2001
From: Fara Woolf <fara@trustmachines.co>
Date: Fri, 12 Jan 2024 11:00:45 -0600
Subject: [PATCH] refactor: token radii and keyframe, ref #4637

---
 package.json                                  |   2 +-
 src/app/common/utils/figma-theme.ts           | 161 ------------------
 .../account/account-list-item-layout.tsx      |   2 +-
 .../components/fees-list-item.tsx             |   6 +-
 .../choose-asset-container.tsx                |   2 +-
 src/app/components/event-card.tsx             |  17 +-
 .../fees-row/components/fee-estimate-item.tsx |   2 +-
 src/app/components/info-card/info-card.tsx    |   2 +-
 .../inscription-preview-card.tsx              |   2 +-
 src/app/components/item-hover.tsx             |   2 +-
 src/app/components/network-mode-badge.tsx     |   2 +-
 src/app/components/pill.tsx                   |   2 +-
 .../mnemonic-key/mnemonic-input-field.tsx     |   5 +-
 src/app/components/text-input-field.tsx       |   2 +-
 .../tx-transfer-icon-wrapper.tsx              |   7 +-
 src/app/features/add-network/add-network.tsx  |   6 +-
 .../collectibles/components/bitcoin/stamp.tsx |   2 +-
 .../components/collectible-hover.tsx          |   2 +-
 .../components/collectible-item.layout.tsx    |   6 +-
 .../message-signer/message-preview-box.tsx    |   5 +-
 .../psbt-request-details-header.tsx           |   2 +-
 .../psbt-request-details-section.layout.tsx   |   2 +-
 .../components/nested-tuple-displayer.tsx     |   4 +-
 .../components/structured-data-box.tsx        |   5 +-
 .../contract-call-details.tsx                 |   5 +-
 .../contract-deploy-details.tsx               |   9 +-
 .../contract-preview.tsx                      |   5 +-
 .../post-conditions/post-conditions.tsx       |   9 +-
 .../stx-transfer-details.tsx                  |   5 +-
 .../transaction-error/error-message.tsx       |   6 +-
 .../fund/components/fast-checkout-badge.tsx   |   2 +-
 .../fund/components/fund-account-tile.tsx     |   4 +-
 .../components/zero-percent-fees-badge.tsx    |   2 +-
 .../home/components/account-info-card.tsx     |   2 +-
 .../set-password/components/password-bars.tsx |   2 +-
 .../receive/components/address-qr-code.tsx    |   6 +-
 .../send-transfer-confirmation-details.tsx    |   9 +-
 .../components/send-transfer-details.tsx      |   9 +-
 .../recipient-accounts-drawer.tsx             |  15 +-
 .../components/recipient-dropdown-item.tsx    |   2 +-
 .../swap-assets-pair.layout.tsx               |   2 +-
 .../components/profile-box.tsx                |  22 ++-
 .../update-profile-request.layout.tsx         |   2 +-
 .../dowpdown-menu/dropdown-menu.tsx           |   4 +-
 src/app/ui/components/select/select.tsx       |   4 +-
 theme/global/tippy-styles.ts                  |   2 +-
 theme/keyframes.ts                            |  10 --
 yarn.lock                                     |   8 +-
 48 files changed, 84 insertions(+), 312 deletions(-)
 delete mode 100644 src/app/common/utils/figma-theme.ts

diff --git a/package.json b/package.json
index 0f9d82a22a0..2bebb3df159 100644
--- a/package.json
+++ b/package.json
@@ -240,7 +240,7 @@
     "@actions/core": "1.10.1",
     "@btckit/types": "0.0.19",
     "@leather-wallet/prettier-config": "0.0.1",
-    "@leather-wallet/tokens": "0.0.2",
+    "@leather-wallet/tokens": "0.0.3",
     "@ls-lint/ls-lint": "2.2.2",
     "@pandacss/dev": "0.26.2",
     "@playwright/test": "1.40.1",
diff --git a/src/app/common/utils/figma-theme.ts b/src/app/common/utils/figma-theme.ts
deleted file mode 100644
index adcdcaf6eae..00000000000
--- a/src/app/common/utils/figma-theme.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-// See
-// https://www.figma.com/file/Li7qK8ZIG9c5dKSNOPO4iCtv/%E2%9D%96-Design-System?node-id=1909-4136&t=GGTMJo3PyBf2gns5-0
-// for a detailed description of the palette and the theme.
-
-const palette = {
-  white: '#ffffff',
-  black: '#ococod',
-
-  blue050: '#f7f8fd',
-  blue100: '#eef2fb',
-  blue200: '#e5ebfa',
-  blue300: '#cedafa',
-  blue400: '#7f97f1',
-  blue500: '#5c6cf2',
-  blue600: '#5546ff',
-  blue700: '#2323c7',
-  blue800: '#ofofa9',
-  blue900: '#oboa63',
-
-  green100: '#f2f9f1',
-  green300: '#d9edd4',
-  green500: '#23a978',
-  green600: '#008051',
-
-  gray050: '#fafafa',
-  gray100: '#f5f5f5',
-  gray200: '#efefef',
-  gray300: '#dddddd',
-  gray400: '#9a9a9a',
-  gray500: '#777777',
-  gray600: '#666666',
-  gray700: '#333333',
-  gray800: '#262626',
-  gray900: '#171717',
-
-  orange100: '#fff5eb',
-  orange300: '#ffeoc2',
-  orange500: '#ffbd7a',
-  orange600: '#f59300',
-
-  red100: '#fceeed',
-  red300: '#f7cdca',
-  red500: '#e76c6a',
-  red600: '#c83532',
-
-  slate050: '#f9f9fa',
-  slate100: '#f5f5f7',
-  slate200: '#efeff2',
-  slate300: '#dcdde2',
-  slate400: '#989ca3',
-  slate500: '#74777D',
-  slate600: '#62676e',
-  slate700: '#303236',
-  slate800: '#242629',
-  slate900: '#151619',
-};
-
-export const figmaTheme = {
-  // Background
-
-  background: palette.white,
-  backgroundSubdued: palette.slate100,
-
-  // Surface
-
-  surface: palette.white,
-  surfaceHovered: palette.slate050,
-  surfacePressed: palette.slate200,
-  surfacedisabled: palette.slate100,
-  surfaceSelected: palette.blue050,
-  surfaceSubdued: palette.slate100,
-  surfaceContrast: palette.black,
-  overlay: `${palette.black}80`,
-
-  // Border
-
-  border: palette.slate300,
-  borderSubdued: palette.slate200,
-  borderDisabled: palette.slate200,
-  borderFocused: palette.blue300,
-
-  // Icon
-
-  icon: palette.slate800,
-  iconSubdued: palette.slate500,
-  iconDisabled: palette.slate400,
-  iconOnPrimary: palette.white,
-  iconOnCritical: palette.white,
-  iconOnWarning: palette.white,
-  iconOnSuccess: palette.white,
-
-  // Text
-
-  text: palette.slate800,
-  textSubdued: palette.slate500,
-  textFaint: palette.slate400,
-  textDisabled: palette.slate400,
-  textOnPrimary: palette.white,
-  textOnCritical: palette.white,
-  textOnWarning: palette.white,
-  textOnSuccess: palette.white,
-  textOnContrast: palette.white,
-
-  // Primary
-
-  actionPrimary: palette.blue600,
-  actionPrimaryHovered: palette.blue500,
-  actionPrimaryPressed: palette.blue700,
-  actionPrimaryDisabled: palette.blue400,
-  actionSubdued: palette.blue100,
-  actionSubduedHovered: palette.blue200,
-  actionSubduedPressed: palette.blue300,
-  actionSubduedDisabled: palette.gray100,
-  iconOnPrimarySubdued: palette.blue600,
-  textOnPrimarySubdued: palette.blue600,
-
-  // Secondary
-
-  secondary: palette.white,
-  secondarySubdued: palette.slate100,
-  surfaceSecondary: palette.slate200,
-  actionSecondary: palette.white,
-  actionSecondaryHovered: palette.slate050,
-  actionSecondaryDisabled: palette.slate050,
-
-  // Interactive
-
-  interactive: palette.blue600,
-  interactiveHovered: palette.blue500,
-  interactivePressed: palette.blue700,
-  interactiveDisabled: palette.slate300,
-
-  // Success
-
-  textSuccess: palette.green600,
-  iconSuccess: palette.green600,
-  borderSuccess: palette.green300,
-  surfaceSuccess: palette.green300,
-
-  // Warning
-
-  iconWarning: palette.orange600,
-  actionWarning: palette.orange600,
-  borderWarning: palette.orange300,
-  surfaceWarning: palette.orange300,
-
-  // Critical
-
-  textCritical: palette.red600,
-  iconCritical: palette.red600,
-  actionCritical: palette.red600,
-  borderCritical: palette.red300,
-  surfaceCritical: palette.red300,
-
-  // Accent
-
-  accent: palette.blue600,
-  iconAccent: palette.blue600,
-  surfaceAccent: palette.blue050,
-  borderAccent: palette.blue600,
-} as const;
diff --git a/src/app/components/account/account-list-item-layout.tsx b/src/app/components/account/account-list-item-layout.tsx
index ece5f388f52..91aae1cba45 100644
--- a/src/app/components/account/account-list-item-layout.tsx
+++ b/src/app/components/account/account-list-item-layout.tsx
@@ -45,7 +45,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
       onClick={onSelectAccount}
       {...rest}
     >
-      <Flag align="middle" img={avatar} spacing="space.04" width="100%" mr="space.04">
+      <Flag align="middle" img={avatar} spacing="space.04" width="100%" mx="space.04">
         <Stack gap="space.01">
           <HStack alignItems="center" justifyContent="space-between">
             <HStack alignItems="center" gap="space.02">
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
index a4369fe7c4a..6088fb2cc8c 100644
--- a/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx
+++ b/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx
@@ -22,10 +22,8 @@ export function FeesListItem({
   return (
     <styled.button
       _hover={{ background: 'accent.component-background-hover' }}
-      border={isSelected ? '4px solid' : '1px solid'}
-      borderColor="accent.action-primary-default"
-      borderRadius="lg"
-      // #4476 TODO add tokens for boxShadow
+      border={isSelected ? 'focus' : 'default'}
+      borderRadius="xs"
       boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04)"
       data-testid={SharedComponentsSelectors.FeesListItem}
       px="space.04"
diff --git a/src/app/components/crypto-assets/choose-crypto-asset/choose-asset-container.tsx b/src/app/components/crypto-assets/choose-crypto-asset/choose-asset-container.tsx
index 920d00f30ce..cce24adc239 100644
--- a/src/app/components/crypto-assets/choose-crypto-asset/choose-asset-container.tsx
+++ b/src/app/components/crypto-assets/choose-crypto-asset/choose-asset-container.tsx
@@ -7,7 +7,7 @@ export function ChooseAssetContainer({ children }: HasChildren) {
   return whenPageMode({
     full: (
       <Flex
-        borderRadius={['unset', '16px']}
+        borderRadius={['unset', 'lg']}
         height="fit-content"
         maxWidth={['100%', 'centeredPageFullWidth']}
         minWidth={['100%', 'centeredPageFullWidth']}
diff --git a/src/app/components/event-card.tsx b/src/app/components/event-card.tsx
index adb07838a9c..76f720e5eb6 100644
--- a/src/app/components/event-card.tsx
+++ b/src/app/components/event-card.tsx
@@ -1,6 +1,5 @@
 import { Box, HStack, Stack, styled } from 'leather-styles/jsx';
 
-import { EllipsesHorizontalIcon } from '@app/ui/components/icons/ellipses-h-icon';
 import { Caption } from '@app/ui/components/typography/caption';
 
 import { TxAssetItem } from './tx-asset-item';
@@ -17,19 +16,13 @@ interface EventCardProps {
   title: string;
 }
 export function EventCard(props: EventCardProps): React.JSX.Element {
-  const { actions, amount, icon, isLast, left, message, right, ticker, title } = props;
+  const { amount, icon, isLast, left, message, right, ticker, title } = props;
 
   return (
     <>
       <Stack gap="space.05" p="space.05">
         <HStack alignItems="center" justifyContent="space-between" position="relative">
           <styled.span textStyle="label.01">{title}</styled.span>
-          {/* TODO: What does this do? */}
-          {actions && (
-            <styled.button width="24px" position="absolute" right={0} type="button">
-              <EllipsesHorizontalIcon />
-            </styled.button>
-          )}
         </HStack>
         <TxAssetItem iconString={icon} amount={amount} ticker={ticker} />
         {left || right ? (
@@ -40,13 +33,7 @@ export function EventCard(props: EventCardProps): React.JSX.Element {
         ) : null}
       </Stack>
       {message && (
-        <Box
-          p="space.05"
-          borderTop="1px solid"
-          borderColor="accent.border-default"
-          borderBottom={!isLast ? '4px solid' : 'unset'}
-          borderBottomColor="accent.border-default"
-        >
+        <Box p="space.05" borderTop="default" borderBottom={!isLast ? 'active' : 'unset'}>
           <Caption>{message}</Caption>
         </Box>
       )}
diff --git a/src/app/components/fees-row/components/fee-estimate-item.tsx b/src/app/components/fees-row/components/fee-estimate-item.tsx
index f2f21e8f218..a2147b54228 100644
--- a/src/app/components/fees-row/components/fee-estimate-item.tsx
+++ b/src/app/components/fees-row/components/fee-estimate-item.tsx
@@ -32,7 +32,7 @@ export function FeeEstimateItem({
     <LeatherButton
       _hover={{
         bg: isVisible ? 'accent.component-background-hover' : 'accent.background-primary',
-        borderRadius: '8px',
+        borderRadius: 'xs',
         color: 'accent.text-primary',
       }}
       alignItems="center"
diff --git a/src/app/components/info-card/info-card.tsx b/src/app/components/info-card/info-card.tsx
index b63f8868b7b..d8309f1a61e 100644
--- a/src/app/components/info-card/info-card.tsx
+++ b/src/app/components/info-card/info-card.tsx
@@ -31,7 +31,7 @@ export function InfoCardRow({ title, value, titleAdditionalElement, ...props }:
   return (
     <HStack alignItems="start" fontSize="14px" justifyContent="space-between" {...props}>
       <Flex alignItems="center">
-        <styled.span textStyle="body.02" color="accent.text-subdued">
+        <styled.span color="accent.text-subdued" mr="space.01" textStyle="body.02">
           {title}
         </styled.span>
         {titleAdditionalElement && titleAdditionalElement}
diff --git a/src/app/components/inscription-preview-card/inscription-preview-card.tsx b/src/app/components/inscription-preview-card/inscription-preview-card.tsx
index 4d9e34c47f5..d0895f041db 100644
--- a/src/app/components/inscription-preview-card/inscription-preview-card.tsx
+++ b/src/app/components/inscription-preview-card/inscription-preview-card.tsx
@@ -23,7 +23,7 @@ export function InscriptionPreviewCard({
     <Flag
       align="middle"
       border={hideBorder ? 'unset' : 'default'}
-      borderRadius={hideBorder ? 'unset' : '10px'}
+      borderRadius={hideBorder ? 'unset' : 'sm'}
       img={image}
       p={hideBorder ? 'unset' : 'space.04'}
       spacing="space.04"
diff --git a/src/app/components/item-hover.tsx b/src/app/components/item-hover.tsx
index 95d6a196409..e89cd046a9e 100644
--- a/src/app/components/item-hover.tsx
+++ b/src/app/components/item-hover.tsx
@@ -13,7 +13,7 @@ function ItemHover({
     <Square
       opacity={isFocused || isHovered ? 1 : 0}
       transition="transition"
-      borderRadius="lg"
+      borderRadius="xs"
       position="absolute"
       size="calc(100% + 24px)"
       left="-12px"
diff --git a/src/app/components/network-mode-badge.tsx b/src/app/components/network-mode-badge.tsx
index cab9d0517bf..473bb021934 100644
--- a/src/app/components/network-mode-badge.tsx
+++ b/src/app/components/network-mode-badge.tsx
@@ -23,7 +23,7 @@ export const NetworkModeBadge = memo((props: FlexProps) => {
       _hover={{ cursor: 'pointer' }}
       alignItems="center"
       border="subdued"
-      borderRadius="md"
+      borderRadius="xs"
       height="24px"
       onClick={() => navigate(RouteUrls.SelectNetwork, { relative: 'path' })}
       px="space.03"
diff --git a/src/app/components/pill.tsx b/src/app/components/pill.tsx
index 21ed394b13f..187ec8b1fe0 100644
--- a/src/app/components/pill.tsx
+++ b/src/app/components/pill.tsx
@@ -11,7 +11,7 @@ export function Pill({ hoverLabel, label, ...props }: PillProps) {
     <Tooltip disabled={!hoverLabel} label={hoverLabel} maxWidth="200px" placement="bottom">
       <Box
         border="1px solid"
-        borderRadius="xxl"
+        borderRadius="xs"
         borderColor="#DCDDE2"
         lineHeight="16px"
         ml="space.03"
diff --git a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx b/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx
index 5d2ba8e05c7..f5f90b57143 100644
--- a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx
+++ b/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx
@@ -27,7 +27,7 @@ const psuedoBorderStyles = {
   background: 'transparent',
   position: 'absolute',
   border: '1px solid',
-  borderRadius: '4px',
+  borderRadius: 'sm',
 };
 
 export function InputField({ dataTestId, name, onPaste, onChange, value }: InputFieldProps) {
@@ -47,6 +47,7 @@ export function InputField({ dataTestId, name, onPaste, onChange, value }: Input
       color="brown"
       data-state={isDirty && meta.error ? 'error' : undefined}
       className={css({
+        borderRadius: 'sm',
         display: 'flex',
         alignSelf: 'stretch',
         height: '48px',
@@ -69,7 +70,7 @@ export function InputField({ dataTestId, name, onPaste, onChange, value }: Input
     >
       <TextField.Slot className={css({ padding: 'space.00', marginRight: 'space.01' })}>
         {/* // FIXME #4130: - update this color when available in design system */}
-        <styled.span textStyle="label.01" color="GrayText">{`${name}.`}</styled.span>
+        <styled.span textStyle="label.01" color="accent.text-subdued">{`${name}.`}</styled.span>
       </TextField.Slot>
       <TextField.Input
         autoCapitalize="off"
diff --git a/src/app/components/text-input-field.tsx b/src/app/components/text-input-field.tsx
index c7232938c6e..a8acd2abefb 100644
--- a/src/app/components/text-input-field.tsx
+++ b/src/app/components/text-input-field.tsx
@@ -49,7 +49,7 @@ export function TextInputField({
           content: '""',
           position: 'absolute',
           border: showError ? 'error' : 'unset',
-          borderRadius: '10px',
+          borderRadius: 'sm',
           left: '-1px',
           right: '-1px',
           top: '-1px',
diff --git a/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx b/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx
index 34e8f316f48..22b54ade28d 100644
--- a/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx
+++ b/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box } from 'leather-styles/jsx';
+import { Circle } from 'leather-styles/jsx';
 
 import { TransactionTypeIconWrapper } from '@app/components/transaction/transaction-type-icon-wrapper';
 import { StxIcon } from '@app/ui/components/icons/stx-icon';
@@ -10,9 +10,8 @@ interface TxTransferIconWrapperProps {
 }
 export function TxTransferIconWrapper({ icon }: TxTransferIconWrapperProps) {
   return (
-    <Box
+    <Circle
       bg="stacks"
-      borderRadius="lg"
       color="accent.background-primary"
       flexShrink={0}
       height="36px"
@@ -21,6 +20,6 @@ export function TxTransferIconWrapper({ icon }: TxTransferIconWrapperProps) {
     >
       <StxIcon />
       <TransactionTypeIconWrapper icon={icon} />
-    </Box>
+    </Circle>
   );
 }
diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx
index 3353dd3b8f4..a67a021d2a4 100644
--- a/src/app/features/add-network/add-network.tsx
+++ b/src/app/features/add-network/add-network.tsx
@@ -231,20 +231,22 @@ export function AddNetwork() {
                 data-testid={NetworkSelectors.NetworkName}
               />
               <Title>Bitcoin API</Title>
+              {/* TODO: Replace with new Select */}
               <SelectRoot onValueChange={handleApiChange} defaultValue="mainnet">
                 <SelectTrigger
                   className={css({
                     backgroundColor: 'accent.background-primary',
-                    borderRadius: '6px',
+                    borderRadius: 'sm',
                     border: '1px solid accent.border-primary',
                   })}
                 ></SelectTrigger>
                 <SelectContent
                   className={css({
                     backgroundColor: 'accent.background-primary',
-                    borderRadius: '6px',
+                    borderRadius: 'sm',
                     border: '1px solid accent.border-primary',
                     dropShadow: 'lg',
+                    height: 'fit-content',
                   })}
                 >
                   <SelectItem key="mainnet" value="mainnet">
diff --git a/src/app/features/collectibles/components/bitcoin/stamp.tsx b/src/app/features/collectibles/components/bitcoin/stamp.tsx
index 38ed35fd264..8ef9712b0d5 100644
--- a/src/app/features/collectibles/components/bitcoin/stamp.tsx
+++ b/src/app/features/collectibles/components/bitcoin/stamp.tsx
@@ -11,7 +11,7 @@ export function Stamp(props: { bitcoinStamp: BitcoinStamp }) {
 
   return (
     <CollectibleImage
-      icon={<StampsIcon size="lg" />}
+      icon={<StampsIcon size="xl" />}
       key={bitcoinStamp.stamp}
       onClickCallToAction={() => openInNewTab(`${stampChainAssetUrl}${bitcoinStamp.stamp}`)}
       src={bitcoinStamp.stamp_url}
diff --git a/src/app/features/collectibles/components/collectible-hover.tsx b/src/app/features/collectibles/components/collectible-hover.tsx
index bccbd5501e8..19cc9d35567 100644
--- a/src/app/features/collectibles/components/collectible-hover.tsx
+++ b/src/app/features/collectibles/components/collectible-hover.tsx
@@ -43,7 +43,7 @@ export function CollectibleHover({
           _hover={{ bg: 'accent.component-background-hover' }}
           alignItems="center"
           bg="accent.background-primary"
-          borderRadius="lg"
+          borderRadius="50%"
           display="flex"
           height="30px"
           justifyContent="center"
diff --git a/src/app/features/collectibles/components/collectible-item.layout.tsx b/src/app/features/collectibles/components/collectible-item.layout.tsx
index e9fba20bc5a..08deeb3b935 100644
--- a/src/app/features/collectibles/components/collectible-item.layout.tsx
+++ b/src/app/features/collectibles/components/collectible-item.layout.tsx
@@ -36,7 +36,7 @@ export function CollectibleItemLayout({
         outlineOffset: onClickLayout ? '-4px' : 'unset',
       }}
       _hover={{ bg: 'accent.background-secondary' }}
-      borderRadius="xl"
+      borderRadius="xs"
       cursor={onClickLayout ? 'pointer' : 'default'}
       onClick={onClickLayout}
       p="space.01"
@@ -52,7 +52,7 @@ export function CollectibleItemLayout({
         />
         <Box
           alignItems="center"
-          borderRadius="lg"
+          borderRadius="xs"
           display="flex"
           height="100%"
           justifyContent="center"
@@ -91,7 +91,7 @@ export function CollectibleItemLayout({
             _focus={{ clipPath: 'none', outline: 'focus' }}
             _hover={{ bg: 'accent.background-primary' }}
             bg="accent.background-primary"
-            borderRadius="sm"
+            borderRadius="xs"
             clipPath={isHovered ? 'none' : 'circle(0%)'}
             fontWeight={500}
             onClick={e => {
diff --git a/src/app/features/message-signer/message-preview-box.tsx b/src/app/features/message-signer/message-preview-box.tsx
index ea764c8ebdd..6eb65039d44 100644
--- a/src/app/features/message-signer/message-preview-box.tsx
+++ b/src/app/features/message-signer/message-preview-box.tsx
@@ -11,9 +11,8 @@ export function MessagePreviewBox({ message, hash }: MessageBoxProps) {
   return (
     <Stack
       bg="accent.background-primary"
-      border="4px solid"
-      borderColor="accent.background-primary"
-      borderRadius="xl"
+      border="active"
+      borderRadius="sm"
       paddingBottom={hash ? 'space.02' : 0}
     >
       <Stack
diff --git a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
index 9132c34c33c..c1f10121b22 100644
--- a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
+++ b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
@@ -28,7 +28,7 @@ export function PsbtRequestDetailsHeader() {
         <HStack
           alignItems="center"
           border={isPsbtMutable ? 'warning' : 'subdued'}
-          borderRadius="xxl"
+          borderRadius="xs"
           gap="space.01"
           px="space.02"
           py="space.01"
diff --git a/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx b/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx
index 8de37340302..7bfb7a99d9b 100644
--- a/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx
+++ b/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx
@@ -4,7 +4,7 @@ import { HasChildren } from '@app/common/has-children';
 
 export function PsbtRequestDetailsSectionLayout({ children, ...props }: HasChildren & StackProps) {
   return (
-    <Stack border="default" borderRadius="lg" gap="space.01" p="space.05" width="100%" {...props}>
+    <Stack border="default" borderRadius="sm" gap="space.01" p="space.05" width="100%" {...props}>
       {children}
     </Stack>
   );
diff --git a/src/app/features/stacks-message-signer/components/nested-tuple-displayer.tsx b/src/app/features/stacks-message-signer/components/nested-tuple-displayer.tsx
index 99885ef234b..8c3c7ed2f96 100644
--- a/src/app/features/stacks-message-signer/components/nested-tuple-displayer.tsx
+++ b/src/app/features/stacks-message-signer/components/nested-tuple-displayer.tsx
@@ -1,8 +1,6 @@
 import { ClarityType } from '@stacks/transactions';
 import { Box, BoxProps, Flex, FlexProps } from 'leather-styles/jsx';
 
-import { figmaTheme } from '@app/common/utils/figma-theme';
-
 interface TupleDisplayerProps extends BoxProps {
   isRoot: boolean;
 }
@@ -26,7 +24,7 @@ export function TupleNodeDisplayer({ clarityType, ...props }: TupleNodeDisplayer
   return clarityType === ClarityType.Tuple ? <Box {...props} /> : <Flex {...props} />;
 }
 export function TupleNodeLabelDisplayer(props: BoxProps) {
-  return <Box mr="space.04" color={figmaTheme.textSubdued} {...props} />;
+  return <Box mr="space.04" color="accent.text-subdued" {...props} />;
 }
 
 export function TupleNodeValueDisplayer(props: FlexProps) {
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
index 0dad0d7764e..f1a2eb28e12 100644
--- a/src/app/features/stacks-message-signer/components/structured-data-box.tsx
+++ b/src/app/features/stacks-message-signer/components/structured-data-box.tsx
@@ -40,11 +40,10 @@ export function StructuredDataBox(props: {
   return (
     <Box minHeight="260px">
       <Stack
-        border="4px solid"
+        border="active"
         paddingBottom="space.02"
         borderColor="accent.border-default"
-        borderRadius="xl"
-        backgroundColor="accent.border-default"
+        borderRadius="sm"
       >
         <Box background="white" borderRadius="lg" overflowX="scroll" py="space.05">
           <Box fontSize="14px" lineHeight="1.7" px="space.05">
diff --git a/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx b/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx
index cf639af48f3..cd36cc7e396 100644
--- a/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx
+++ b/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx
@@ -20,9 +20,8 @@ function ContractCallDetailsSuspense() {
 
   return (
     <Stack
-      border="4px solid"
-      borderColor="accent.border-default"
-      borderRadius="md"
+      border="active"
+      borderRadius="sm"
       mb="space.05"
       px="space.04"
       py="32px"
diff --git a/src/app/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx b/src/app/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx
index c0140dacf5b..3adf85f38e1 100644
--- a/src/app/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx
+++ b/src/app/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx
@@ -86,14 +86,7 @@ export function ContractDeployDetails() {
         </TabButton>
       </HStack>
       {tab === 'details' ? (
-        <Stack
-          gap="space.05"
-          border="4px solid"
-          borderColor="accent.border-default"
-          borderRadius="md"
-          py="space.06"
-          px="space.04"
-        >
+        <Stack gap="space.05" border="active" borderRadius="sm" py="space.06" px="space.04">
           <Title>Contract deploy details</Title>
           <ContractPreviewLayout
             contractAddress={currentAccountStxAddress}
diff --git a/src/app/features/stacks-transaction-request/contract-preview.tsx b/src/app/features/stacks-transaction-request/contract-preview.tsx
index 0ecec7542f5..22c81e253e3 100644
--- a/src/app/features/stacks-transaction-request/contract-preview.tsx
+++ b/src/app/features/stacks-transaction-request/contract-preview.tsx
@@ -22,11 +22,10 @@ export function ContractPreviewLayout({
   return (
     <HStack
       p="space.04"
-      borderRadius="md"
+      borderRadius="sm"
       gap="space.04"
       alignItems="center"
-      border="1px solid"
-      borderColor="accent.border-default"
+      border="default"
       _hover={
         onClick
           ? {
diff --git a/src/app/features/stacks-transaction-request/post-conditions/post-conditions.tsx b/src/app/features/stacks-transaction-request/post-conditions/post-conditions.tsx
index 7d693ecb057..1da366a06de 100644
--- a/src/app/features/stacks-transaction-request/post-conditions/post-conditions.tsx
+++ b/src/app/features/stacks-transaction-request/post-conditions/post-conditions.tsx
@@ -29,14 +29,7 @@ function PostConditionsSuspense(): React.JSX.Element | null {
   if (!IS_TEST_ENV && mode === PostConditionMode.Allow) return null;
 
   return (
-    <Flex
-      border="4px solid"
-      borderColor="accent.border-default"
-      borderRadius="md"
-      flexDirection="column"
-      mb="space.05"
-      width="100%"
-    >
+    <Flex border="active" borderRadius="sm" flexDirection="column" mb="space.05" width="100%">
       {hasPostConditions ? (
         <PostConditionsList />
       ) : isStxTransfer ? (
diff --git a/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx b/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx
index d22e45167e2..de5bd459b24 100644
--- a/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx
+++ b/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx
@@ -14,9 +14,8 @@ export function StxTransferDetails(): React.JSX.Element | null {
 
   return (
     <Stack
-      border="4px solid"
-      borderColor="accent.border-default"
-      borderRadius="md"
+      border="active"
+      borderRadius="sm"
       mb="space.05"
       px="space.04"
       py="space.06"
diff --git a/src/app/features/stacks-transaction-request/transaction-error/error-message.tsx b/src/app/features/stacks-transaction-request/transaction-error/error-message.tsx
index b2ff0f0b258..d9ef13c48e2 100644
--- a/src/app/features/stacks-transaction-request/transaction-error/error-message.tsx
+++ b/src/app/features/stacks-transaction-request/transaction-error/error-message.tsx
@@ -8,7 +8,6 @@ interface ErrorMessageProps {
   title: string;
   body: string | React.JSX.Element;
   actions?: React.JSX.Element;
-  // #4476 FIXME share borders better colour
   border?: string;
   borderColor?: string;
 }
@@ -16,9 +15,8 @@ export const ErrorMessage = memo(({ border, title, body, actions }: ErrorMessage
   return (
     <Stack
       bg="accent.background-primary"
-      // #4476 TODO change this colour
-      border={border ? border : '4px solid #FCEEED'}
-      borderRadius="md"
+      border={border ? border : 'active'}
+      borderRadius="sm"
       gap="space.06"
       mb="space.05"
       p="space.05"
diff --git a/src/app/pages/fund/components/fast-checkout-badge.tsx b/src/app/pages/fund/components/fast-checkout-badge.tsx
index cbea061d684..4e20eb7771e 100644
--- a/src/app/pages/fund/components/fast-checkout-badge.tsx
+++ b/src/app/pages/fund/components/fast-checkout-badge.tsx
@@ -7,7 +7,7 @@ export function FastCheckoutBadge() {
     <HStack
       alignItems="center"
       border="default"
-      borderRadius="xxl"
+      borderRadius="xs"
       height="24px"
       justifyContent="center"
       paddingX="space.02"
diff --git a/src/app/pages/fund/components/fund-account-tile.tsx b/src/app/pages/fund/components/fund-account-tile.tsx
index c6ae4490219..557ef6015a2 100644
--- a/src/app/pages/fund/components/fund-account-tile.tsx
+++ b/src/app/pages/fund/components/fund-account-tile.tsx
@@ -26,7 +26,7 @@ export function FundAccountTile(props: FundAccountTileProps) {
       }}
       border="default"
       backgroundColor="accent.background-primary"
-      borderRadius="lg"
+      borderRadius="xs"
       boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04)"
       data-testid={testId}
       display="flex"
@@ -43,7 +43,7 @@ export function FundAccountTile(props: FundAccountTileProps) {
           <Box
             alignItems="center"
             border="default"
-            borderRadius="sm"
+            borderRadius="xs"
             display="inline-flex"
             height="40px"
             justifyContent="center"
diff --git a/src/app/pages/fund/components/zero-percent-fees-badge.tsx b/src/app/pages/fund/components/zero-percent-fees-badge.tsx
index 70e5f9f4e0e..29ed93a3aab 100644
--- a/src/app/pages/fund/components/zero-percent-fees-badge.tsx
+++ b/src/app/pages/fund/components/zero-percent-fees-badge.tsx
@@ -7,7 +7,7 @@ export function ZeroPercentFeesBadge() {
     <HStack
       alignItems="center"
       border="default"
-      borderRadius="xxl"
+      borderRadius="xs"
       height="24px"
       justifyContent="center"
       paddingX="space.02"
diff --git a/src/app/pages/home/components/account-info-card.tsx b/src/app/pages/home/components/account-info-card.tsx
index 1b2ee7d7d8b..8e89090a3e7 100644
--- a/src/app/pages/home/components/account-info-card.tsx
+++ b/src/app/pages/home/components/account-info-card.tsx
@@ -24,7 +24,7 @@ export function AccountInfoCard() {
     <Flex
       direction="column"
       bgColor={{ base: 'brown.2', sm: 'unset' }}
-      rounded="10px"
+      rounded="sm"
       px={{ base: 'space.05', sm: '0' }}
       pt={{ base: 'space.05', sm: 'space.06' }}
       pb={{ base: 'space.02', sm: 'space.06' }}
diff --git a/src/app/pages/onboarding/set-password/components/password-bars.tsx b/src/app/pages/onboarding/set-password/components/password-bars.tsx
index a0190e4d5e1..afa5cc44e98 100644
--- a/src/app/pages/onboarding/set-password/components/password-bars.tsx
+++ b/src/app/pages/onboarding/set-password/components/password-bars.tsx
@@ -9,7 +9,7 @@ export function PasswordStrengthBars({ bars }: PasswordStrengthBarsProps) {
       {bars.map((bar: string, index: number) => {
         return (
           <Box
-            borderRadius="2px"
+            borderRadius="xs"
             flexGrow={1}
             key={index}
             marginBottom="0"
diff --git a/src/app/pages/receive/components/address-qr-code.tsx b/src/app/pages/receive/components/address-qr-code.tsx
index 61d70fb7dd2..ca271545199 100644
--- a/src/app/pages/receive/components/address-qr-code.tsx
+++ b/src/app/pages/receive/components/address-qr-code.tsx
@@ -21,13 +21,9 @@ export const QrCode = memo(({ principal, ...rest }: { principal: string }) => {
   return (
     <Flex
       alignItems="center"
-      border="1px solid"
-      borderColor="accent.border-default"
-      borderRadius="lg"
-      boxShadow="low"
       justifyContent="center"
       mx="auto"
-      p="space.05"
+      p="space.03"
       position="relative"
       {...rest}
     >
diff --git a/src/app/pages/rpc-send-transfer/components/send-transfer-confirmation-details.tsx b/src/app/pages/rpc-send-transfer/components/send-transfer-confirmation-details.tsx
index e84b29b1bb9..205fdb8f62f 100644
--- a/src/app/pages/rpc-send-transfer/components/send-transfer-confirmation-details.tsx
+++ b/src/app/pages/rpc-send-transfer/components/send-transfer-confirmation-details.tsx
@@ -15,14 +15,7 @@ export function SendTransferConfirmationDetails({
   feeRowValue,
 }: SendTransferConfirmationDetailsProps) {
   return (
-    <Stack
-      border="4px solid"
-      borderColor="accent.border-default"
-      borderRadius="lg"
-      p="space.05"
-      gap="space.04"
-      width="100%"
-    >
+    <Stack border="active" borderRadius="sm" p="space.05" gap="space.04" width="100%">
       <HStack alignItems="center" gap="space.04" justifyContent="space-between">
         <styled.span color="accent.styled.span-subdued">From</styled.span>
         <styled.span>{currentAddress}</styled.span>
diff --git a/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx b/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx
index 7611268b90a..a50d7a13cc9 100644
--- a/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx
+++ b/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx
@@ -9,14 +9,7 @@ interface SendTransferDetailsProps {
 }
 export function SendTransferDetails({ address, amount, currentAddress }: SendTransferDetailsProps) {
   return (
-    <Stack
-      border="4px solid"
-      borderColor="accent.border-default !important"
-      borderRadius="lg"
-      gap="space.04"
-      p="space.05"
-      width="100%"
-    >
+    <Stack border="active" borderRadius="sm" gap="space.04" p="space.05" width="100%">
       <HStack alignItems="center" gap="space.04" justifyContent="space-between">
         <styled.span textStyle="caption.01">From</styled.span>
         <styled.span textStyle="label.01">{truncateMiddle(currentAddress)}</styled.span>
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx
index 0972c44c5bf..c930445bef1 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx
@@ -23,17 +23,16 @@ export const RecipientAccountsDrawer = memo(() => {
 
   return (
     <BaseDrawer title="My accounts" isShowing onClose={onGoBack}>
-      <Box mb="space.05" mx={['space.04', 'space.06']}>
+      <Box mb="space.05" mx="space.04">
         <Virtuoso
           height="72px"
           itemContent={index => (
-            <Box mx={['space.05', 'space.06']} key={index}>
-              <AccountListItem
-                stacksAccount={stacksAccounts[index]}
-                onClose={onGoBack}
-                index={index}
-              />
-            </Box>
+            <AccountListItem
+              key={index}
+              stacksAccount={stacksAccounts[index]}
+              onClose={onGoBack}
+              index={index}
+            />
           )}
           style={{ paddingTop: '24px', height: '70vh' }}
           totalCount={stacksAddressesNum || btcAddressesNum}
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx
index c3fa440b693..79b02db151b 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx
@@ -20,7 +20,7 @@ export function RecipientDropdownItem({
     <LeatherButton
       _hover={{
         bg: isVisible ? 'accent.component-background-hover' : 'accent.background-primary',
-        borderRadius: '8px',
+        borderRadius: 'xs',
         color: 'accent.text-primary',
       }}
       alignItems="center"
diff --git a/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx b/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx
index 0f8088303f2..217dcc9c8b3 100644
--- a/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx
+++ b/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx
@@ -10,7 +10,7 @@ export function SwapAssetsPairLayout({ swapAssetFrom, swapAssetTo }: SwapAssetsP
   return (
     <Stack
       border="default"
-      borderRadius="md"
+      borderRadius="sm"
       gap="space.01"
       mb="space.05"
       mt="space.04"
diff --git a/src/app/pages/update-profile-request/components/profile-box.tsx b/src/app/pages/update-profile-request/components/profile-box.tsx
index 776eb631905..c9672cb3c64 100644
--- a/src/app/pages/update-profile-request/components/profile-box.tsx
+++ b/src/app/pages/update-profile-request/components/profile-box.tsx
@@ -51,19 +51,17 @@ function Properties({ p }: { p: any }) {
 export function ProfileBox({ profile }: { profile: Profile }): React.JSX.Element | null {
   return (
     <Box minHeight="260px">
-      <Stack
-        bg="accent.background-secondary"
-        border="4px solid"
-        paddingBottom="space.02"
-        borderColor="accent.border-default"
-        borderRadius="xl"
+      <Box
+        bg="accent.background-primary"
+        border="active"
+        borderRadius="sm"
+        px="space.05"
+        py="space.05"
       >
-        <Box bg="accent.background-primary" borderRadius="lg" px="space.05" py="space.05">
-          <Stack gap="space.03">
-            <Properties p={profile._profile} />
-          </Stack>
-        </Box>
-      </Stack>
+        <Stack gap="space.03">
+          <Properties p={profile._profile} />
+        </Stack>
+      </Box>
     </Box>
   );
 }
diff --git a/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx b/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx
index 497691e1420..13415723fa8 100644
--- a/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx
+++ b/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx
@@ -7,7 +7,7 @@ interface ProfileUpdateRequestLayoutProps {
 }
 export function ProfileUpdateRequestLayout({ children }: ProfileUpdateRequestLayoutProps) {
   return (
-    <Stack px={['space.05', 'unset']} gap="space.05" width="100%">
+    <Stack px={['space.05', 'space.05', 'unset']} gap="space.05" width="100%">
       <PageTop />
       {children}
     </Stack>
diff --git a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
index a6e92839e1d..169d56ed1c7 100644
--- a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
+++ b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
@@ -13,7 +13,7 @@ const Root = RadixDropdownMenu.Root;
 
 const dropdownTriggerStyles = css({
   bg: 'accent.background-primary',
-  borderRadius: '2px',
+  borderRadius: 'xs',
   fontWeight: 500,
   maxWidth: 'fit-content',
   maxHeight: 'fit-content',
@@ -37,7 +37,7 @@ const dropdownContentStyles = css({
   animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
   '--base-menu-padding': '0px',
   bg: 'accent.background-primary',
-  borderRadius: '2px',
+  borderRadius: 'xs',
   boxShadow:
     '0px 12px 24px 0px rgba(18, 16, 15, 0.08), 0px 4px 8px 0px rgba(18, 16, 15, 0.08), 0px 0px 2px 0px rgba(18, 16, 15, 0.08)',
   minWidth: '256px',
diff --git a/src/app/ui/components/select/select.tsx b/src/app/ui/components/select/select.tsx
index ae870b60dea..9953bdce076 100644
--- a/src/app/ui/components/select/select.tsx
+++ b/src/app/ui/components/select/select.tsx
@@ -14,7 +14,7 @@ const Root = RadixSelect.Root;
 const selectTriggerStyles = css({
   alignItems: 'center',
   bg: 'accent.background-primary',
-  borderRadius: '2px',
+  borderRadius: 'xs',
   display: 'flex',
   fontWeight: 500,
   gap: 'space.02',
@@ -42,7 +42,7 @@ const selectContentStyles = css({
   animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
   '--base-menu-padding': '0px',
   bg: 'accent.background-primary',
-  borderRadius: '2px',
+  borderRadius: 'xs',
   boxShadow:
     '0px 12px 24px 0px rgba(18, 16, 15, 0.08), 0px 4px 8px 0px rgba(18, 16, 15, 0.08), 0px 0px 2px 0px rgba(18, 16, 15, 0.08)',
   minWidth: '256px',
diff --git a/theme/global/tippy-styles.ts b/theme/global/tippy-styles.ts
index 774596783ea..e37d9436650 100644
--- a/theme/global/tippy-styles.ts
+++ b/theme/global/tippy-styles.ts
@@ -9,7 +9,7 @@ export const tippyStyles = {
     position: 'relative',
     backgroundColor: ' #333',
     color: '#fff',
-    borderRadius: '4px',
+    borderRadius: 'sm',
     fontSize: '14px',
     lineHeight: 1.4,
     outline: 0,
diff --git a/theme/keyframes.ts b/theme/keyframes.ts
index bb8c6c59859..d82a4737e3d 100644
--- a/theme/keyframes.ts
+++ b/theme/keyframes.ts
@@ -4,14 +4,4 @@ import { CssKeyframes } from 'leather-styles/types/system-types';
 // ts-unused-exports:disable-next-line
 export const keyframes: CssKeyframes = {
   ...leatherKeyframes,
-  slideUpAndFade: {
-    from: {
-      opacity: 0,
-      transform: 'translateY(2px)',
-    },
-    to: {
-      opacity: 1,
-      transform: 'translateY(0)',
-    },
-  },
 };
diff --git a/yarn.lock b/yarn.lock
index a8e0785a8eb..88f14d0b5af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2484,10 +2484,10 @@
     "@trivago/prettier-plugin-sort-imports" "^4.2.0"
     prettier "^3.0.3"
 
-"@leather-wallet/tokens@0.0.2":
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.2.tgz#6e93cb34be0f63562e4031db0e06b721fa48b2de"
-  integrity sha512-y4kISkpHirC+1OonyIHhLbu8eBMS8GkASE09Ay330RMjdCnkprhuVVHYCzEZgzKN0+szyCzFzrz1foYf9Tpe6A==
+"@leather-wallet/tokens@0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.3.tgz#c120820e51a0af3df2a62dccb9149b99b739d358"
+  integrity sha512-ga2gLj17dGLEZKK59J/T12w/p2ibdO23yj5tGwSL8e6Nu7sWid06xTVwGixS3JdYZnW1531wEBm4rsX+I4pl+w==
 
 "@ledgerhq/devices@^8.0.7", "@ledgerhq/devices@^8.2.0":
   version "8.2.0"