refactor: token radii and keyframe, ref #4637

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",

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">

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"

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']}

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>
       )}

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"

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}

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"

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"

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"

src/app/components/pill.tsx

@@ -10,9 +10,8 @@ export function Pill({ hoverLabel, label, ...props }: PillProps) {
   return (
     <Tooltip disabled={!hoverLabel} label={hoverLabel} maxWidth="200px" placement="bottom">
       <Box
-        border="1px solid"
-        borderRadius="xxl"
-        borderColor="#DCDDE2"
+        border="default"
+        borderRadius="xs"
         lineHeight="16px"
         ml="space.03"
         px="space.02"

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',
@@ -68,8 +69,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"

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',

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>
   );
 }

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">

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}