refactor: rename leaf to leather

.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
     'plugin:react/jsx-runtime',
     'plugin:react-hooks/recommended',
   ],
-  ignorePatterns: ['./leaf-styles'],
+  ignorePatterns: ['./leather-styles'],
   plugins: ['react', 'react-hooks', '@typescript-eslint', 'deprecation'],
   rules: {
     // This rule helps highlight areas of the code that use deprecated
@@ -100,7 +100,7 @@ module.exports = {
               {
                 name: '@radix-ui/themes',
                 importNames: ['Flex'],
-                message: 'Layout components should be imported from leaf-styles/jsx',
+                message: 'Layout components should be imported from leather-styles/jsx',
               },
             ],
           },

.gitignore

@@ -21,6 +21,6 @@ trace*
 /test-results/
 /playwright-report/
 /playwright/.cache/
-leaf-styles
+leather-styles
 .netlify
 ./.vscode/settings.json

package.json

@@ -24,7 +24,7 @@
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
     "lint:prettier": "prettier --check \"{src,tests,tests-legacy}/**/*.{ts,tsx}\" \"*.{js,json}\"",
     "lint:prettier:fix": "prettier --write \"{src,tests,tests-legacy}/**/*.{ts,tsx}\" *.js",
-    "lint:unused-exports": "ts-unused-exports tsconfig.json --ignoreFiles=leaf-styles",
+    "lint:unused-exports": "ts-unused-exports tsconfig.json --ignoreFiles=leather-styles",
     "lint:remote-wallet-config": "npx ajv-cli validate -s config/wallet-config.schema.json -d config/wallet-config.json",
     "lint:deps": "dependency-cruise  --config .dependency-cruiser.js \"src/**/*.{ts,tsx}\"",
     "prod:ext": "yarn build",

panda.config.ts

@@ -34,7 +34,7 @@ export default defineConfig({
       recipes: { button: buttonRecipe },
     },
   },
-  outdir: 'leaf-styles',
+  outdir: 'leather-styles',
   outExtension: 'js',
   minify: true,
 });

src/app/common/hooks/use-media-query.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { BreakpointToken, token } from 'leaf-styles/tokens';
+import { BreakpointToken, token } from 'leather-styles/tokens';
 
 function useMediaQuery(query: string) {
   const [matches, setMatches] = useState(false);

src/app/components/account-total-balance.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance';
 

src/app/components/account/account-list-item-layout.tsx

@@ -1,7 +1,7 @@
 import { Flex, Spinner, Stack, StackProps, color, useMediaQuery } from '@stacks/ui';
 import { truncateMiddle } from '@stacks/ui-utils';
 import { SettingsMenuSelectors } from '@tests/selectors/settings.selectors';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { useConfigBitcoinEnabled } from '@app/query/common/remote-config/remote-config.query';
 

src/app/components/account/account-name.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 
 import { BoxProps } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';

src/app/components/address-displayer/address-displayer.layout.tsx

@@ -1,4 +1,4 @@
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 interface AddressDisplayerLayoutProps {
   isEven: boolean;

src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx

@@ -3,7 +3,7 @@ import { Dispatch, SetStateAction, useCallback, useRef } from 'react';
 import { Link } from '@radix-ui/themes';
 import { Stack } from '@stacks/ui';
 import { Form, Formik } from 'formik';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 import * as yup from 'yup';
 
 import { BtcFeeType } from '@shared/models/fees/bitcoin-fees.model';

src/app/components/bitcoin-fees-list/components/fees-list-item.tsx

@@ -1,6 +1,6 @@
 import { Box, Flex, Text, color, transition } from '@stacks/ui';
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 interface FeesListItemProps {
   arrivesIn: string;

src/app/components/button/button.tsx

@@ -1,5 +1,5 @@
-import { styled } from 'leaf-styles/jsx';
-import { type ButtonVariantProps, button as buttonRecipe } from 'leaf-styles/recipes';
+import { styled } from 'leather-styles/jsx';
+import { type ButtonVariantProps, button as buttonRecipe } from 'leather-styles/recipes';
 
 const StyledButton = styled('button');
 

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx

@@ -1,6 +1,6 @@
 import { BoxProps, Flex } from '@stacks/ui';
 import { forwardRefWithAs } from '@stacks/ui-core';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import type { Money } from '@shared/models/money.model';
 

src/app/components/crypto-assets/components/asset-caption.tsx

@@ -1,7 +1,7 @@
 import { FiInfo } from 'react-icons/fi';
 
 import { Box, Flex, Stack, Tooltip, color } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 interface AssetCaptionProps {
   caption: string;

src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx

@@ -2,7 +2,7 @@ import { Flex, StackProps } from '@stacks/ui';
 import { forwardRefWithAs } from '@stacks/ui-core';
 import { truncateMiddle } from '@stacks/ui-utils';
 import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { CryptoCurrencies } from '@shared/models/currencies.model';
 import { Money } from '@shared/models/money.model';

src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx

@@ -1,6 +1,6 @@
 import { BoxProps } from '@stacks/ui';
 import { forwardRefWithAs } from '@stacks/ui-core';
-import { Flex, styled } from 'leaf-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import type { Money } from '@shared/models/money.model';
 

src/app/components/disclaimer.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps, styled } from 'leaf-styles/jsx';
+import { Box, BoxProps, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 

src/app/components/drawer/base-drawer.tsx

@@ -2,8 +2,8 @@ import { ReactNode, Suspense, memo, useCallback, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Box, Flex, FlexProps, transition, useEventListener } from '@stacks/ui';
-import { css } from 'leaf-styles/css';
-import { token } from 'leaf-styles/tokens';
+import { css } from 'leather-styles/css';
+import { token } from 'leather-styles/tokens';
 
 import { noop } from '@shared/utils';
 

src/app/components/drawer/components/drawer-header.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 import { useHover } from 'use-events';
 
 import { ArrowLeftIcon } from '@app/components/icons/arrow-left-icon';

src/app/components/drawer/components/header-action-button.tsx

@@ -1,6 +1,6 @@
 import { Box, Grid, transition } from '@stacks/ui';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 interface HeaderActionButtonProps {
   icon?: React.JSX.Element;

src/app/components/edit-nonce-button.tsx

@@ -1,5 +1,5 @@
 import { BoxProps } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { Caption } from '@app/components/typography';
 

src/app/components/generic-error/generic-error.layout.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import GenericError from '@assets/images/generic-error.png';
 import { Box, Text, color } from '@stacks/ui';
-import { Flex, FlexProps, HStack, styled } from 'leaf-styles/jsx';
+import { Flex, FlexProps, HStack, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 

src/app/components/global-styles/global-styles.tsx

@@ -3,7 +3,7 @@ import { memo } from 'react';
 import { Global, css } from '@emotion/react';
 import { radixBaseCSS } from '@radix-ui/themes/styles.css';
 import { CSSReset } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { fullPageStyles } from './full-page-styles';
 import { popupCenterStyles } from './popup-center-styles';

src/app/components/global-styles/hide-scrollbar.tsx

@@ -1,4 +1,4 @@
-import { css } from 'leaf-styles/css';
+import { css } from 'leather-styles/css';
 
 export const hideScrollbarClassName = css({
   '&::-webkit-scrollbar': {

src/app/components/global-styles/radix-styles.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 export const radixStyles = css`
   .radix-themes {

src/app/components/header.tsx

@@ -5,7 +5,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { Box, Flex, FlexProps, IconButton, Stack, Text, useMediaQuery } from '@stacks/ui';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { SettingsMenuSelectors } from '@tests/selectors/settings.selectors';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { BRANCH_NAME, COMMIT_SHA } from '@shared/environment';
 import { RouteUrls } from '@shared/route-urls';

src/app/components/hiro-wallet-logo.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 
 import { Stack, StackProps, color } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { LeatherIcon } from './icons/leather-icon';
 

src/app/components/icons/leather-lettermark.tsx

@@ -1,4 +1,4 @@
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 export function LeatherLettermark(props: React.ComponentProps<typeof styled.svg>) {
   return (

src/app/components/info-card/info-card.tsx

@@ -1,6 +1,6 @@
 import { Box, Flex, FlexProps, Stack, StackProps } from '@stacks/ui';
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { isString } from '@shared/utils';
 

src/app/components/info-label.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { Flex, FlexProps, Stack, styled } from 'leaf-styles/jsx';
+import { Flex, FlexProps, Stack, styled } from 'leather-styles/jsx';
 
 interface InfoLabelProps extends FlexProps {
   children: ReactNode | undefined;

src/app/components/item-hover.tsx

@@ -1,5 +1,5 @@
 import { Box, BoxProps, transition } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 import { useFocus, useHover } from 'use-events';
 
 function ItemHover({

src/app/components/json.tsx

@@ -1,6 +1,6 @@
 import { bytesToHex } from '@stacks/common';
 import { Box } from '@stacks/ui';
-import { css } from 'leaf-styles/css';
+import { css } from 'leather-styles/css';
 
 import { isBigInt, isTypedArray } from '@shared/utils';
 

src/app/components/modal-header.tsx

@@ -2,8 +2,8 @@ import { FiArrowLeft, FiX } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 
 import { Box, IconButton } from '@stacks/ui';
-import { Flex, styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { Flex, styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { RouteUrls } from '@shared/route-urls';
 

src/app/components/network-mode-badge.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { ChainID } from '@stacks/transactions';
 import { Flex, FlexProps, Text } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { RouteUrls } from '@shared/route-urls';
 

src/app/components/no-fees-warning-row.tsx

@@ -1,5 +1,5 @@
 import { ChainID } from '@stacks/transactions';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { whenStacksChainId } from '@app/common/utils';
 import { SpaceBetween } from '@app/components/layout/space-between';

src/app/components/pill.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps, styled } from 'leaf-styles/jsx';
+import { Box, BoxProps, styled } from 'leather-styles/jsx';
 
 import { Tooltip } from './tooltip';
 

src/app/components/request-password.tsx

@@ -2,8 +2,8 @@ import { FormEvent, useCallback, useState } from 'react';
 
 import { Box, Input, Stack } from '@stacks/ui';
 import { SettingsSelectors } from '@tests-legacy/integration/settings.selectors';
-import { styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useKeyActions } from '@app/common/hooks/use-key-actions';

src/app/components/requester-flag.tsx

@@ -1,4 +1,4 @@
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { Favicon } from './favicon';
 import { Flag } from './layout/flag';

src/app/components/tabs.tsx

@@ -1,5 +1,5 @@
 import { Box as RBox, Tabs as RTabs } from '@radix-ui/themes';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { capitalize } from '@app/common/utils';
 

src/app/components/text-input-field.tsx

@@ -3,8 +3,8 @@ import { Ref, useRef } from 'react';
 import { Box, Flex, FlexProps, Input, Text, color } from '@stacks/ui';
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 import { useField } from 'formik';
-import { css } from 'leaf-styles/css';
-import { token } from 'leaf-styles/tokens';
+import { css } from 'leather-styles/css';
+import { token } from 'leather-styles/tokens';
 
 import { useShowFieldError } from '@app/common/form-utils';
 import { capitalize } from '@app/common/utils';

src/app/components/warning-label.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 
 import { Box, BoxProps } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { AlertIcon } from './icons/alert-icon';
 import { Flag } from './layout/flag';

src/app/features/add-network/add-network.tsx

@@ -5,7 +5,7 @@ import { ChainID } from '@stacks/transactions';
 import { Input, Stack } from '@stacks/ui';
 import { NetworkSelectors } from '@tests-legacy/integration/network.selectors';
 import { Formik } from 'formik';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { DefaultNetworkConfigurations } from '@shared/constants';
 import { RouteUrls } from '@shared/route-urls';

src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { Box, Stack } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { BtcFeeType } from '@shared/models/fees/bitcoin-fees.model';
 import { Money } from '@shared/models/money.model';

src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx

@@ -1,4 +1,4 @@
-import { Flex } from 'leaf-styles/jsx';
+import { Flex } from 'leather-styles/jsx';
 
 import { LoadingSpinner } from '@app/components/loading-spinner';
 

src/app/features/bitcoin-choose-fee/components/choose-fee-subtitle.tsx

@@ -1,4 +1,4 @@
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 export function ChooseFeeSubtitle({ isSendingMax }: { isSendingMax: boolean }) {
   const subtitle = isSendingMax ? (

src/app/features/collectibles/components/add-collectible.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 
 import { Box } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { RouteUrls } from '@shared/route-urls';
 

src/app/features/collectibles/components/collectible-item.layout.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import { Box, Button, Stack, Text } from '@stacks/ui';
 import type { BoxProps } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 import { useHover } from 'use-events';
 
 import { figmaTheme } from '@app/common/utils/figma-theme';