horizontal navigation refactoring

theme/components/Table.ts

@@ -23,7 +23,7 @@ const variantSimple = definePartsStyle((props) => {
       ...transitionProps,
     },
     td: {
-      borderColor: 'divider',
+      borderColor: 'border.divider',
       ...transitionProps,
     },
   };

theme/utils/getDefaultTransitionProps.ts

+// TODO @tom2drum remove this
 export default function getDefaultTransitionProps(props?: { transitionProperty: string }) {
   return {
     transitionProperty: `background-color, color, border-color${ props?.transitionProperty ? ', ' + props.transitionProperty : '' }`,

toolkit/chakra/button.tsx

@@ -15,15 +15,17 @@ interface ButtonLoadingProps {
 export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {
   active?: boolean;
   selected?: boolean;
+  highlighted?: boolean;
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(props, ref) {
-    const { loading, disabled, loadingText, children, active, selected, ...rest } = props;
+    const { loading, disabled, loadingText, children, active, selected, highlighted, ...rest } = props;
     return (
       <ChakraButton
         { ...(active ? { 'data-active': true } : {}) }
         { ...(selected ? { 'data-selected': true } : {}) }
+        { ...(highlighted ? { 'data-highlighted': true } : {}) }
         disabled={ loading || disabled }
         ref={ ref }
         { ...rest }

toolkit/chakra/popover.tsx

@@ -51,10 +51,33 @@ export const PopoverCloseTrigger = React.forwardRef<
   );
 });
 
+export const PopoverRoot = (props: ChakraPopover.RootProps) => {
+  const positioning = {
+    ...props.positioning,
+    offset: {
+      mainAxis: 4,
+      ...props.positioning?.offset,
+    },
+  };
+
+  return (
+    <ChakraPopover.Root
+      autoFocus={ false }
+      { ...props }
+      positioning={ positioning }
+    />
+  );
+};
+
+export const PopoverTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraPopover.TriggerProps
+>(function PopoverTrigger(props, ref) {
+  return <ChakraPopover.Trigger as="div" asChild ref={ ref } { ...props }/>;
+});
+
 export const PopoverTitle = ChakraPopover.Title;
 export const PopoverDescription = ChakraPopover.Description;
 export const PopoverFooter = ChakraPopover.Footer;
 export const PopoverHeader = ChakraPopover.Header;
-export const PopoverRoot = ChakraPopover.Root;
 export const PopoverBody = ChakraPopover.Body;
-export const PopoverTrigger = ChakraPopover.Trigger;

toolkit/chakra/tooltip.tsx

@@ -63,6 +63,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
       >
         <ChakraTooltip.Trigger
           ref={ triggerRef }
+          as="div"
           asChild
           onClick={ isMobile ? handleTriggerClick : undefined }
         >

toolkit/theme/foundations/semanticTokens.ts

@@ -9,9 +9,6 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         fg: {
           DEFAULT: { value: { base: '{colors.blue.600}', _dark: '{colors.blue.300}' } },
         },
-        hover: {
-          DEFAULT: { value: '{colors.blue.400}' },
-        },
       },
       dropdown: {
         fg: {
@@ -22,8 +19,19 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
           DEFAULT: { value: { base: '{colors.gray.200}', _dark: '{colors.gray.600}' } },
           selected: { value: { base: '{colors.blue.50}', _dark: '{colors.gray.600}' } },
         },
-        hover: {
-          DEFAULT: { value: '{colors.blue.400}' },
+      },
+      header: {
+        fg: {
+          DEFAULT: { value: { base: '{colors.blackAlpha.800}', _dark: '{colors.gray.400}' } },
+          selected: { value: { base: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
+          highlighted: { value: { base: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
+        },
+        bg: {
+          selected: { value: { base: '{colors.blackAlpha.50}', _dark: '{colors.whiteAlpha.100}' } },
+          highlighted: { value: { base: '{colors.orange.100}', _dark: '{colors.orange.900}' } },
+        },
+        border: {
+          DEFAULT: { value: { base: '{colors.gray.300}', _dark: '{colors.gray.600}' } },
         },
       },
     },
@@ -39,6 +47,22 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         DEFAULT: { value: { base: '{colors.blackAlpha.800}', _dark: '{colors.gray.400}' } },
         hover: { value: { base: '{colors.blackAlpha.800}', _dark: '{colors.gray.400}' } },
       },
+      navigation: {
+        fg: {
+          DEFAULT: { value: { base: '{colors.gray.600}', _dark: '{colors.gray.400}' } },
+          selected: { value: { base: '{colors.blue.700}', _dark: '{colors.gray.50}' } },
+          hover: { value: { base: '{colors.link.primary.hover}' } },
+          active: { value: { base: '{colors.link.primary.hover}' } },
+        },
+        bg: {
+          DEFAULT: { value: 'transparent' },
+          selected: { value: { base: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
+        },
+        border: {
+          DEFAULT: { value: '{colors.border.divider}' },
+          selected: { value: { base: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
+        },
+      },
     },
     tooltip: {
       DEFAULT: {
@@ -53,10 +77,19 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         },
       },
     },
+    popover: {
+      DEFAULT: {
+        bg: { value: { base: '{colors.white}', _dark: '{colors.gray.900}' } },
+        shadow: { value: { base: '{colors.blackAlpha.200}', _dark: '{colors.whiteAlpha.300}' } },
+      },
+    },
     text: {
       primary: { value: { base: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
       secondary: { value: { base: '{colors.gray.500}', _dark: '{colors.gray.400}' } },
     },
+    border: {
+      divider: { value: { base: '{colors.blackAlpha.200}', _dark: '{colors.whiteAlpha.200}' } },
+    },
     global: {
       body: {
         bg: { value: { base: '{colors.white}', _dark: '{colors.black}' } },
@@ -68,7 +101,6 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
     },
 
     // OLD TOKENS
-    divider: { value: { base: '{colors.blackAlpha.200}', _dark: '{colors.whiteAlpha.200}' } },
     // text: {
     //   DEFAULT: { value: '{colors.blackAlpha.800}' },
     //   _dark: { value: '{colors.whiteAlpha.800}' },
@@ -101,6 +133,14 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
       _dark: { value: '{colors.gray.900}' },
     },
   },
+  shadows: {
+    popover: {
+      DEFAULT: { value: {
+        base: '{shadows.size.2xl}',
+        _dark: '0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1)',
+      } },
+    },
+  },
 };
 
 export default semanticTokens;

toolkit/theme/foundations/shadows.ts

-import type { TokenDefinition } from '@chakra-ui/react/dist/types/styled-system/types';
+import type { ThemingConfig } from '@chakra-ui/react';
 
-const shadows: TokenDefinition['shadows'] = {
+import type { ExcludeUndefined } from 'types/utils';
+
+const shadows: ExcludeUndefined<ThemingConfig['tokens']>['shadows'] = {
   action_bar: { value: '0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)' },
+  size: {
+    xs: { value: '0px 0px 0px 1px rgba(0, 0, 0, 0.05)' },
+    sm: { value: '0px 1px 2px 0px rgba(0, 0, 0, 0.05)' },
+    base: { value: '0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px rgba(0, 0, 0, 0.1)' },
+    md: { value: '0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)' },
+    lg: { value: '0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)' },
+    xl: { value: '0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)' },
+    '2xl': { value: '0px 15px 50px -12px rgba(0, 0, 0, 0.25)' },
+  },
 };
 
 export default shadows;

toolkit/theme/recipes/button.recipe.ts

@@ -28,8 +28,8 @@ export const recipe = defineRecipe({
         borderColor: 'button.outline.fg',
         _hover: {
           bg: 'transparent',
-          color: 'button.outline.hover',
-          borderColor: 'button.outline.hover',
+          color: 'blue.400',
+          borderColor: 'blue.400',
         },
       },
       dropdown: {
@@ -40,14 +40,14 @@ export const recipe = defineRecipe({
         borderColor: 'button.dropdown.border',
         _hover: {
           bg: 'transparent',
-          color: 'button.dropdown.hover',
-          borderColor: 'button.dropdown.hover',
+          color: 'blue.400',
+          borderColor: 'blue.400',
         },
         // When the dropdown is open, the button should be active
         _active: {
           bg: 'transparent',
-          color: 'button.dropdown.hover',
-          borderColor: 'button.dropdown.hover',
+          color: 'blue.400',
+          borderColor: 'blue.400',
         },
         // We have a special state for this button variant that serves as a popover trigger.
         // When any items (filters) are selected in the popover, the button should change its background and text color.
@@ -63,6 +63,38 @@ export const recipe = defineRecipe({
           },
         },
       },
+      header: {
+        bg: 'transparent',
+        color: 'button.header.fg',
+        borderColor: 'button.header.border',
+        borderWidth: '2px',
+        borderStyle: 'solid',
+        _hover: {
+          bg: 'transparent',
+          color: 'blue.400',
+          borderColor: 'blue.400',
+        },
+        _selected: {
+          bg: 'button.header.bg.selected',
+          color: 'button.header.fg.selected',
+          borderColor: 'transparent',
+          borderWidth: '0px',
+          _hover: {
+            bg: 'button.header.bg.selected',
+            color: 'button.header.fg.selected',
+          },
+          _highlighted: {
+            bg: 'button.header.bg.highlighted',
+            color: 'button.header.fg.highlighted',
+            borderColor: 'transparent',
+            borderWidth: '0px',
+            _hover: {
+              bg: 'button.header.bg.highlighted',
+              color: 'button.header.fg.highlighted',
+            },
+          },
+        },
+      },
     },
     size: {
       xs: { px: 2, h: 6, fontSize: '12px' },

toolkit/theme/recipes/index.ts

 import { recipe as button } from './button.recipe';
 import { recipe as link } from './link.recipe';
+import { recipe as popover } from './popover.recipe';
 import { recipe as tooltip } from './tooltip.recipe';
 
 export const recipes = {
@@ -9,4 +10,5 @@ export const recipes = {
 
 export const slotRecipes = {
   tooltip,
+  popover,
 };

toolkit/theme/recipes/link.recipe.ts

 import { defineRecipe } from '@chakra-ui/react';
 
 export const recipe = defineRecipe({
+  base: {
+    gap: 0,
+  },
   variants: {
     visual: {
       primary: {
@@ -24,6 +27,23 @@ export const recipe = defineRecipe({
           textDecorationColor: 'link.subtle.hover',
         },
       },
+      navigation: {
+        color: 'link.navigation.fg',
+        bg: 'link.navigation.bg',
+        border: 'link.navigation.border',
+        _hover: {
+          color: 'link.navigation.fg.hover',
+          textDecoration: 'none',
+        },
+        _selected: {
+          color: 'link.navigation.fg.selected',
+          bg: 'link.navigation.bg.selected',
+          border: 'link.navigation.border.selected',
+        },
+        _active: {
+          color: 'link.navigation.fg.active',
+        },
+      },
     },
   },
   defaultVariants: {

toolkit/theme/recipes/popover.recipe.ts

+import { defineSlotRecipe } from '@chakra-ui/react';
+
+export const recipe = defineSlotRecipe({
+  className: 'chakra-popover',
+  slots: [ 'content', 'header', 'body', 'footer', 'arrow', 'arrowTip' ],
+  base: {
+    content: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      textStyle: 'sm',
+      '--popover-bg': 'colors.popover.bg',
+      bg: 'var(--popover-bg)',
+      boxShadow: 'popover',
+      boxShadowColor: 'colors.popover.shadow',
+      '--popover-mobile-size': 'calc(100dvw - 1rem)',
+      width: {
+        base: 'min(var(--popover-mobile-size), var(--popover-size))',
+        lg: 'fit-content',
+      },
+      borderWidth: '0',
+      borderRadius: 'md',
+      '--popover-z-index': 'zIndex.popover',
+      zIndex: 'calc(var(--popover-z-index) + var(--layer-index, 0))',
+      outline: '0',
+      transformOrigin: 'var(--transform-origin)',
+      _open: {
+        animationStyle: 'scale-fade-in',
+        animationDuration: 'fast',
+      },
+      _closed: {
+        animationStyle: 'scale-fade-out',
+        animationDuration: 'faster',
+      },
+    },
+    header: {
+      paddingInline: 'var(--popover-padding)',
+      paddingTop: 'var(--popover-padding)',
+    },
+    body: {
+      padding: 'var(--popover-padding)',
+      flex: '1',
+    },
+    footer: {
+      display: 'flex',
+      alignItems: 'center',
+      paddingInline: 'var(--popover-padding)',
+      paddingBottom: 'var(--popover-padding)',
+    },
+    arrow: {
+      '--arrow-size': 'sizes.3',
+      '--arrow-background': 'var(--popover-bg)',
+    },
+    arrowTip: {
+      borderTopWidth: '1px',
+      borderInlineStartWidth: '1px',
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        content: {
+          '--popover-padding': 'spacing.4',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+});

toolkit/theme/recipes/tooltip.recipe.ts

@@ -9,7 +9,7 @@ export const recipe = defineSlotRecipe({
       borderRadius: 'sm',
       fontWeight: '500',
       textStyle: 'sm',
-      boxShadow: 'md',
+      boxShadow: 'size.md',
       zIndex: 'tooltip',
       maxW: '320px',
       transformOrigin: 'var(--transform-origin)',

ui/address/contract/ContractExternalLibraries.tsx

@@ -84,7 +84,7 @@ const ContractExternalLibraries = ({ className, data, isLoading }: Props) => {
         Check the source code at the library address (if any) if you want to be sure in case if there is any library linked
       </Alert>
       <VStack
-        divider={ <StackDivider borderColor="divider"/> }
+        divider={ <StackDivider borderColor="border.divider"/> }
         spacing={ 2 }
         mt={ 4 }
         maxH={{ lg: '50vh' }}

ui/address/details/AddressSaveOnGas.tsx

@@ -74,7 +74,7 @@ const AddressSaveOnGas = ({ gasUsed, address }: Props) => {
 
   return (
     <>
-      <TextSeparator color="divider"/>
+      <TextSeparator color="border.divider"/>
       <Skeleton isLoaded={ !query.isPlaceholderData } display="flex" alignItems="center" columnGap={ 2 }>
         <Image src="/static/gas_hawk_logo.svg" w="15px" h="20px" alt="GasHawk logo"/>
         <LinkExternal href="https://www.gashawk.io?utm_source=blockscout&utm_medium=address" fontSize="sm">

ui/address/tokenSelect/TokenSelectItem.tsx

@@ -77,7 +77,7 @@ const TokenSelectItem = ({ data }: Props) => {
       display="flex"
       flexDir="column"
       rowGap={ 2 }
-      borderColor="divider"
+      borderColor="border.divider"
       borderBottomWidth="1px"
       _hover={{
         bgColor: useColorModeValue('blue.50', 'gray.800'),

ui/apiDocs/SwaggerUI.tsx

@@ -30,7 +30,7 @@ const NeverShowInfoPlugin = () => {
 
 const SwaggerUI = () => {
   const mainColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
-  const borderColor = useToken('colors', 'divider');
+  const borderColor = useToken('colors', 'border.divider');
   const mainBgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
 
   const swaggerStyle: SystemStyleObject = {

ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx

@@ -29,7 +29,7 @@ const BlockEpochElectionRewardsListItem = ({ data, isLoading, type }: Props) =>
     <Box
       py={ 3 }
       borderBottomWidth="1px"
-      borderColor="divider"
+      borderColor="border.divider"
       fontSize="sm"
       onClick={ isLoading || !data.count ? undefined : section.onToggle }
       cursor={ isLoading || !data.count ? undefined : 'pointer' }

ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx

@@ -25,7 +25,7 @@ const BlockEpochElectionRewardsTableItem = ({ isLoading, data, type }: Props) =>
     decimals: data.token.decimals,
   });
 
-  const mainRowBorderColor = section.isOpen ? 'transparent' : 'divider';
+  const mainRowBorderColor = section.isOpen ? 'transparent' : 'border.divider';
 
   return (
     <>

ui/blockCountdown/BlockCountdownTimer.tsx

@@ -42,7 +42,7 @@ const BlockCountdownTimer = ({ value: initialValue, onFinish }: Props) => {
       mt={{ base: 6, lg: 8 }}
       p={{ base: 3, lg: 4 }}
       borderRadius="base"
-      divider={ <StackDivider borderColor="divider"/> }
+      divider={ <StackDivider borderColor="border.divider"/> }
     >
       <BlockCountdownTimerItem label="Days" value={ periods.days }/>
       <BlockCountdownTimerItem label="Hours" value={ periods.hours }/>

ui/home/LatestBlocksItem.tsx

@@ -35,7 +35,7 @@ const LatestBlocksItem = ({ block, isLoading }: Props) => {
       transitionTimingFunction="linear"
       borderRadius="md"
       border="1px solid"
-      borderColor="divider"
+      borderColor="border.divider"
       p={ 3 }
     >
       <Flex alignItems="center" overflow="hidden" w="100%" mb={ 3 }>

ui/home/LatestTxsItem.tsx

@@ -41,9 +41,9 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
       width="100%"
       minW="700px"
       borderTop="1px solid"
-      borderColor="divider"
+      borderColor="border.divider"
       p={ 4 }
-      _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
+      _last={{ borderBottom: '1px solid', borderColor: 'border.divider' }}
       display={{ base: 'none', lg: 'grid' }}
     >
       <Flex overflow="hidden" w="100%">

ui/home/LatestTxsItemMobile.tsx

@@ -33,9 +33,9 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
     <Box
       width="100%"
       borderTop="1px solid"
-      borderColor="divider"
+      borderColor="border.divider"
       py={ 4 }
-      _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
+      _last={{ borderBottom: '1px solid', borderColor: 'border.divider' }}
       display={{ base: 'block', lg: 'none' }}
     >
       <Flex justifyContent="space-between">

ui/home/latestBatches/LatestBatchItem.tsx

@@ -31,7 +31,7 @@ const LatestBatchItem = ({ number, timestamp, txCount, status, isLoading }: Prop
       transitionTimingFunction="linear"
       borderRadius="md"
       border="1px solid"
-      borderColor="divider"
+      borderColor="border.divider"
       p={ 3 }
     >
       <Flex alignItems="center" overflow="hidden" w="100%" mb={ 3 }>

ui/home/latestDeposits/LatestDeposits.tsx

@@ -144,10 +144,10 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
     <Box
       width="100%"
       borderTop="1px solid"
-      borderColor="divider"
+      borderColor="border.divider"
       py={ 4 }
       px={{ base: 0, lg: 4 }}
-      _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
+      _last={{ borderBottom: '1px solid', borderColor: 'border.divider' }}
       fontSize="sm"
       lineHeight={ 5 }
     >

ui/home/latestDeposits/LatestDepositsItem.tsx

@@ -106,10 +106,10 @@ const LatestDepositsItem = ({ l1BlockNumber, l1TxHash, l2TxHash, timestamp, isLo
     <Box
       width="100%"
       borderTop="1px solid"
-      borderColor="divider"
+      borderColor="border.divider"
       py={ 4 }
       px={{ base: 0, lg: 4 }}
-      _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
+      _last={{ borderBottom: '1px solid', borderColor: 'border.divider' }}
       fontSize="sm"
       lineHeight={ 5 }
     >

ui/nameDomains/NameDomainsActionBar.tsx

@@ -63,7 +63,7 @@ const NameDomainsActionBar = ({
     onProtocolsFilterChange([]);
   }, [ onProtocolsFilterChange ]);
 
-  const filterGroupDivider = <Box w="100%" borderBottomWidth="1px" borderBottomColor="divider" my={ 4 }/>;
+  const filterGroupDivider = <Box w="100%" borderBottomWidth="1px" borderBottomColor="border.divider" my={ 4 }/>;
 
   const appliedFiltersNum = filterValue.length + (protocolsData && protocolsData.length > 1 ? protocolsFilterValue.length : 0);
 

ui/pages/Chakra.tsx

@@ -25,6 +25,9 @@ const ChakraShowcases = () => {
             <Button visual="outline">Outline</Button>
             <Button visual="dropdown">Dropdown</Button>
             <Button visual="dropdown" selected>Dropdown selected</Button>
+            <Button visual="header">Header</Button>
+            <Button visual="header" selected>Header selected</Button>
+            <Button visual="header" selected highlighted>Header highlighted</Button>
           </HStack>
         </section>
 
@@ -43,7 +46,7 @@ const ChakraShowcases = () => {
             <Tooltip content="Tooltip content">
               <span>Default</span>
             </Tooltip>
-            <Tooltip content="Tooltip content" visual="navigation" selected open>
+            <Tooltip content="Tooltip content" visual="navigation">
               <span>Navigation</span>
             </Tooltip>
           </HStack>

ui/rewards/RewardsButton.tsx

@@ -14,6 +14,8 @@ type Props = {
   variant?: ButtonProps['variant'];
 };
 
+// TODO @tom2drum chekc this component
+
 const RewardsButton = ({ variant = 'header', size }: Props) => {
   const { isInitialized, apiToken, openLoginModal, dailyRewardQuery, balancesQuery } = useRewardsContext();
   const isMobile = useIsMobile();

ui/rewards/login/steps/LoginStepContent.tsx

@@ -107,7 +107,7 @@ const LoginStepContent = ({ goNext, closeModal, openAuthModal }: Props) => {
       </Box>
       { isSignUp && isLoggedIntoAccountWithWallet && (
         <Box mb={ 6 }>
-          <Divider bgColor="divider" mb={ 6 }/>
+          <Divider bgColor="border.divider" mb={ 6 }/>
           <Flex w="full" alignItems="center" justifyContent="space-between">
             I have a referral code
             <Switch

ui/shared/DetailsInfoItemDivider.tsx

@@ -17,7 +17,7 @@ const DetailsInfoItemDivider = ({ className, id, colSpan }: Props) => {
       mt={{ base: 2, lg: 3 }}
       mb={{ base: 0, lg: 3 }}
       borderBottom="1px solid"
-      borderColor="divider"
+      borderColor="border.divider"
     />
   );
 };

ui/shared/ListItemMobile/ListItemMobile.tsx

@@ -20,7 +20,7 @@ const ListItemMobile = ({ children, className, isAnimated }: Props) => {
       alignItems="flex-start"
       flexDirection="column"
       paddingY={ 6 }
-      borderColor="divider"
+      borderColor="border.divider"
       borderTopWidth="1px"
       _last={{
         borderBottomWidth: '1px',

ui/shared/ListItemMobile/ListItemMobileGrid.tsx

@@ -22,7 +22,7 @@ const Container = chakra(({ isAnimated, children, className }: ContainerProps) =
       gridTemplateColumns="86px auto"
       alignItems="start"
       paddingY={ 4 }
-      borderColor="divider"
+      borderColor="border.divider"
       borderTopWidth="1px"
       _last={{
         borderBottomWidth: '1px',

ui/shared/TokenTransfer/TokenTransferFilter.tsx

@@ -45,7 +45,7 @@ const TokenTransferFilter = ({
             defaultValue={ defaultAddressFilter || 'all' }
             paddingBottom={ 4 }
             borderBottom="1px solid"
-            borderColor="divider"
+            borderColor="border.divider"
           >
             <Stack spacing={ 4 }>
               <Radio value="all"><Text fontSize="md">All</Text></Radio>

ui/shared/chart/ChartGridLine.tsx

@@ -13,7 +13,7 @@ interface Props extends Omit<React.SVGProps<SVGGElement>, 'scale'> {
 const ChartGridLine = ({ type, scale, ticks, size, noAnimation, ...props }: Props) => {
   const ref = React.useRef<SVGGElement>(null);
 
-  const strokeColor = useToken('colors', 'divider');
+  const strokeColor = useToken('colors', 'border.divider');
 
   React.useEffect(() => {
     if (!ref.current) {

ui/shared/layout/Layout.tsx

@@ -14,8 +14,8 @@ const LayoutDefault = ({ children }: Props) => {
   return (
     <Layout.Container>
       { /* <Layout.TopRow/> */ }
-      { /* <Layout.NavBar/>
-      <HeaderMobile/> */ }
+      <Layout.NavBar/>
+      { /* <HeaderMobile/> */ }
       <Layout.MainArea>
         { /* <Layout.SideBar/> */ }
         <Layout.MainColumn>

ui/shared/links/LinkExternal.tsx

@@ -13,11 +13,12 @@ interface Props {
   children: React.ReactNode;
   isLoading?: boolean;
   variant?: Variants;
+  visual?: LinkProps['visual'];
   iconColor?: LinkProps['color'];
   onClick?: LinkProps['onClick'];
 }
 
-const LinkExternal = ({ href, children, className, isLoading, variant, iconColor, onClick }: Props) => {
+const LinkExternal = ({ href, children, className, isLoading, variant, visual, iconColor, onClick }: Props) => {
   const commonProps = {
     display: 'inline-block',
     alignItems: 'center',
@@ -44,7 +45,7 @@ const LinkExternal = ({ href, children, className, isLoading, variant, iconColor
   }
 
   return (
-    <Link className={ className } { ...styleProps } target="_blank" href={ href } onClick={ onClick }>
+    <Link className={ className } { ...styleProps } target="_blank" href={ href } onClick={ onClick } visual={ visual }>
       { children }
       <IconSvg name="link_external" boxSize={ 3 } verticalAlign="middle" color={ iconColor ?? 'icon_link_external' } flexShrink={ 0 }/>
     </Link>

ui/shared/links/useLinkStyles.ts

 import type { ChakraProps } from '@chakra-ui/react';
-import { useColorModeValue } from '@chakra-ui/react';
+
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
 
 export type Variants = 'subtle';
 
+// TODO @tom2drum remove this
 export function useLinkStyles(commonProps: ChakraProps, variant?: Variants) {
   const subtleLinkBg = useColorModeValue('gray.100', 'gray.700');
 

ui/snippets/auth/AuthModal.tsx

-import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -9,6 +8,7 @@ import config from 'configs/app';
 import { getResourceKey } from 'lib/api/useApiQuery';
 import useGetCsrfToken from 'lib/hooks/useGetCsrfToken';
 import * as mixpanel from 'lib/mixpanel';
+import { DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot } from 'toolkit/chakra/dialog';
 import IconSvg from 'ui/shared/IconSvg';
 
 import AuthModalScreenConnectWallet from './screens/AuthModalScreenConnectWallet';
@@ -18,6 +18,7 @@ import AuthModalScreenSelectMethod from './screens/AuthModalScreenSelectMethod';
 import AuthModalScreenSuccessEmail from './screens/AuthModalScreenSuccessEmail';
 import AuthModalScreenSuccessWallet from './screens/AuthModalScreenSuccessWallet';
 
+// TODO @tom2drum fix auth modal
 const feature = config.features.account;
 
 interface Props {
@@ -94,6 +95,10 @@ const AuthModal = ({ initialScreen, onClose, mixpanelConfig, closeOnError }: Pro
     onClose(isSuccess);
   }, [ isSuccess, onClose ]);
 
+  const onModalOpenChange = React.useCallback(({ open }: { open: boolean }) => {
+    open && onClose();
+  }, [ onClose ]);
+
   const header = (() => {
     const currentStep = steps[steps.length - 1];
     switch (currentStep.type) {
@@ -163,10 +168,10 @@ const AuthModal = ({ initialScreen, onClose, mixpanelConfig, closeOnError }: Pro
   }
 
   return (
-    <Modal isOpen onClose={ onModalClose } size={{ base: 'full', lg: 'sm' }}>
-      <ModalOverlay/>
-      <ModalContent p={ 6 } maxW={{ lg: '400px' }}>
-        <ModalHeader fontWeight="500" textStyle="h3" mb={ 2 } display="flex" alignItems="center" columnGap={ 2 }>
+    <DialogRoot open onOpenChange={ onModalOpenChange } size={{ base: 'full', lg: 'sm' }}>
+      <DialogBackdrop/>
+      <DialogContent p={ 6 } maxW={{ lg: '400px' }}>
+        <DialogHeader fontWeight="500" textStyle="h3" mb={ 2 } display="flex" alignItems="center" columnGap={ 2 }>
           { steps.length > 1 && !steps[steps.length - 1].type.startsWith('success') && (
             <IconSvg
               name="arrows/east"
@@ -179,13 +184,13 @@ const AuthModal = ({ initialScreen, onClose, mixpanelConfig, closeOnError }: Pro
             />
           ) }
           { header }
-        </ModalHeader>
-        <ModalCloseButton top={ 6 } right={ 6 } color="gray.400"/>
-        <ModalBody mb={ 0 }>
+        </DialogHeader>
+        <DialogCloseTrigger top={ 6 } right={ 6 } color="gray.400"/>
+        <DialogBody mb={ 0 }>
           { content }
-        </ModalBody>
-      </ModalContent>
-    </Modal>
+        </DialogBody>
+      </DialogContent>
+    </DialogRoot>
   );
 };
 

ui/snippets/footer/Footer.tsx

@@ -154,7 +154,7 @@ const Footer = () => {
   const containerProps: HTMLChakraProps<'div'> = {
     as: 'footer',
     borderTopWidth: '1px',
-    borderTopColor: 'divider',
+    borderTopColor: 'border.divider',
   };
 
   const contentProps: GridProps = {

ui/snippets/navigation/LightningLabel.tsx

-import { useColorModeValue, useBreakpointValue, chakra } from '@chakra-ui/react';
+import { useBreakpointValue, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import IconSvg from 'ui/shared/IconSvg';
 
 export const LIGHTNING_LABEL_CLASS_NAME = 'lightning-label';
@@ -15,7 +15,6 @@ interface Props {
 const LightningLabel = ({ className, iconColor, isCollapsed }: Props) => {
   const isLgScreen = useBreakpointValue({ base: false, lg: true, xl: false });
   const themeBgColor = useColorModeValue('white', 'black');
-  const defaultTransitionProps = getDefaultTransitionProps({ transitionProperty: 'color' });
 
   const isExpanded = isCollapsed === false;
 
@@ -36,7 +35,6 @@ const LightningLabel = ({ className, iconColor, isCollapsed }: Props) => {
       top={{ lg: isExpanded ? '0' : '10px', xl: isCollapsed ? '10px' : '0' }}
       right={{ lg: isExpanded ? '0' : '15px', xl: isCollapsed ? '15px' : '0' }}
       color={ color }
-      { ...defaultTransitionProps }
     />
   );
 };

ui/snippets/navigation/horizontal/NavLink.tsx

@@ -11,7 +11,6 @@ import LinkInternal from 'ui/shared/links/LinkInternal';
 
 import LightningLabel from '../LightningLabel';
 import NavLinkIcon from '../NavLinkIcon';
-import useColors from '../useColors';
 import { checkRouteHighlight } from '../utils';
 
 interface Props {
@@ -23,10 +22,7 @@ interface Props {
 const NavLink = ({ className, item, noIcon }: Props) => {
   const isInternalLink = isInternalItem(item);
 
-  const colors = useColors();
-  const color = 'isActive' in item && item.isActive ? colors.text.active : colors.text.default;
-  const bgColor = 'isActive' in item && item.isActive ? colors.bg.active : colors.bg.default;
-
+  const isActive = 'isActive' in item && item.isActive;
   const Link = isInternalLink ? LinkInternal : LinkExternal;
   const href = isInternalLink ? route(item.nextRoute) : item.url;
 
@@ -41,20 +37,25 @@ const NavLink = ({ className, item, noIcon }: Props) => {
         href={ href }
         display="flex"
         alignItems="center"
-        color={ color }
-        bgColor={ bgColor }
-        _hover={{ textDecoration: 'none', color: colors.text.hover }}
+        visual="navigation"
+        { ...(isActive ? { 'data-selected': true } : {}) }
         w="224px"
         px={ 2 }
         py="9px"
-        fontSize="sm"
-        lineHeight={ 5 }
+        textStyle="sm"
         fontWeight={ 500 }
         borderRadius="base"
       >
         { !noIcon && <NavLinkIcon item={ item } mr={ 3 }/> }
         <chakra.span>{ item.text }</chakra.span>
-        { isHighlighted && <LightningLabel iconColor={ bgColor } position={{ lg: 'static' }} ml={{ lg: '2px' }} isCollapsed={ false }/> }
+        { isHighlighted && (
+          <LightningLabel
+            iconColor={ isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
+            position={{ lg: 'static' }}
+            ml={{ lg: '2px' }}
+            isCollapsed={ false }
+          />
+        ) }
       </Link>
     </chakra.li>
   );

ui/snippets/navigation/horizontal/NavLinkGroup.tsx

-import { HStack, PopoverBody, PopoverContent, PopoverTrigger, chakra, StackDivider } from '@chakra-ui/react';
+import { HStack, chakra, Separator, Link } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NavGroupItem } from 'types/client/navigation';
 
-import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
-import Popover from 'ui/shared/chakra/Popover';
+import { PopoverRoot, PopoverBody, PopoverContent, PopoverTrigger } from 'toolkit/chakra/popover';
 import IconSvg from 'ui/shared/IconSvg';
 
 import LightningLabel from '../LightningLabel';
-import useColors from '../useColors';
 import { checkRouteHighlight } from '../utils';
 import NavLink from './NavLink';
 interface Props {
@@ -16,48 +14,58 @@ interface Props {
 }
 
 const NavLinkGroup = ({ item }: Props) => {
-  const colors = useColors();
-  const bgColor = item.isActive ? colors.bg.active : colors.bg.default;
-  const color = item.isActive ? colors.text.active : colors.text.default;
+  const [ isOpen, setIsOpen ] = React.useState(false);
+  // const bgColor = item.isActive ? colors.bg.active : colors.bg.default;
+  // const color = item.isActive ? colors.text.active : colors.text.default;
 
   const isHighlighted = checkRouteHighlight(item.subItems);
   const hasGroups = item.subItems.some((subItem) => Array.isArray(subItem));
 
+  const handleOpenChange = React.useCallback(({ open }: { open: boolean }) => {
+    setIsOpen(open);
+  }, []);
+
   return (
-    <Popover
-      trigger="hover"
-      placement="bottom"
-      isLazy
-      gutter={ 8 }
+    <PopoverRoot
+      // TODO @tom2drum make menu open on hover
+      // trigger="hover"
+      onOpenChange={ handleOpenChange }
+      lazyMount
+      positioning={{
+        placement: 'bottom',
+        offset: { mainAxis: 8 },
+      }}
     >
-      { ({ isOpen }) => (
-        <>
       <PopoverTrigger>
-            <chakra.li
+        <Link
+          as="li"
           listStyleType="none"
           display="flex"
           alignItems="center"
           px={ 2 }
           py={ 1.5 }
-              fontSize="sm"
-              lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 500 }
-              cursor="pointer"
-              color={ isOpen ? colors.text.hover : color }
-              _hover={{ color: colors.text.hover }}
-              bgColor={ bgColor }
+          visual="navigation"
+          { ...(item.isActive ? { 'data-selected': true } : {}) }
+          { ...(isOpen ? { 'data-active': true } : {}) }
           borderRadius="base"
-              { ...getDefaultTransitionProps() }
         >
           { item.text }
-              { isHighlighted && <LightningLabel iconColor={ bgColor } position={{ lg: 'static' }} ml={{ lg: '2px' }}/> }
+          { isHighlighted && (
+            <LightningLabel
+              iconColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
+              position={{ lg: 'static' }}
+              ml={{ lg: '2px' }}
+            />
+          ) }
           <IconSvg name="arrows/east-mini" boxSize={ 5 } transform="rotate(-90deg)" ml={ 1 }/>
-            </chakra.li>
+        </Link>
       </PopoverTrigger>
-          <PopoverContent w="fit-content">
-            <PopoverBody p={ 4 }>
+      <PopoverContent>
+        <PopoverBody>
           { hasGroups ? (
-                <HStack divider={ <StackDivider borderColor="divider"/> } alignItems="flex-start">
+            <HStack separator={ <Separator/> } alignItems="flex-start">
               { item.subItems.map((subItem, index) => {
                 if (!Array.isArray(subItem)) {
                   return <NavLink key={ subItem.text } item={ subItem }/>;
@@ -82,9 +90,7 @@ const NavLinkGroup = ({ item }: Props) => {
           ) }
         </PopoverBody>
       </PopoverContent>
-        </>
-      ) }
-    </Popover>
+    </PopoverRoot>
   );
 };
 

ui/snippets/navigation/horizontal/NavigationDesktop.tsx

@@ -17,7 +17,7 @@ const NavigationDesktop = () => {
   const { mainNavItems } = useNavItems();
 
   return (
-    <Box borderColor="divider" borderBottomWidth="1px">
+    <Box borderColor="border.divider" borderBottomWidth="1px">
       <Flex
         display={{ base: 'none', lg: 'flex' }}
         alignItems="center"

ui/snippets/navigation/mobile/NavigationMobile.tsx

@@ -82,7 +82,7 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
             mt={ 3 }
             pt={ 3 }
             borderTopWidth="1px"
-            borderColor="divider"
+            borderColor="border.divider"
           >
             <VStack as="ul" spacing="1" alignItems="flex-start">
               <NavLinkRewards onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>
@@ -119,7 +119,7 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
                     mb: 2,
                     pb: 2,
                     borderBottomWidth: '1px',
-                    borderColor: 'divider',
+                    borderColor: 'border.divider',
                   }}
                 >
                   { item.map(subItem => <NavLink key={ subItem.text } item={ subItem } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>) }

ui/snippets/navigation/useColors.ts

-import { useColorModeValue } from '@chakra-ui/react';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
 
+// TODO @tom2drum remove this
 export default function useColors() {
   return {
     text: {
@@ -12,7 +13,7 @@ export default function useColors() {
       active: useColorModeValue('blue.50', 'gray.800'),
     },
     border: {
-      'default': 'divider',
+      'default': 'border.divider',
       active: useColorModeValue('blue.50', 'gray.800'),
     },
   };

ui/snippets/navigation/vertical/NavLinkGroup.tsx

@@ -90,7 +90,7 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
                     mb: 2,
                     pb: 2,
                     borderBottomWidth: '1px',
-                    borderColor: 'divider',
+                    borderColor: 'border.divider',
                   }}
                 >
                   { subItem.map(subSubItem => <NavLink key={ subSubItem.text } item={ subSubItem } isCollapsed={ false }/>) }

ui/snippets/navigation/vertical/NavigationDesktop.tsx

@@ -49,7 +49,7 @@ const NavigationDesktop = () => {
   const chevronIconStyles = {
     bgColor: useColorModeValue('white', 'black'),
     color: useColorModeValue('blackAlpha.400', 'whiteAlpha.400'),
-    borderColor: 'divider',
+    borderColor: 'border.divider',
   };
 
   const isExpanded = isCollapsed === false;
@@ -62,7 +62,7 @@ const NavigationDesktop = () => {
       flexDirection="column"
       alignItems="stretch"
       borderRight="1px solid"
-      borderColor="divider"
+      borderColor="border.divider"
       px={{ lg: isExpanded ? 6 : 4, xl: isCollapsed ? 4 : 6 }}
       py={ 12 }
       width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }}
@@ -99,7 +99,7 @@ const NavigationDesktop = () => {
         </VStack>
       </Box>
       { isAuth && (
-        <Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 3 } pt={ 3 }>
+        <Box as="nav" borderTopWidth="1px" borderColor="border.divider" w="100%" mt={ 3 } pt={ 3 }>
           <VStack as="ul" spacing="1" alignItems="flex-start">
             <NavLinkRewards isCollapsed={ isCollapsed }/>
             { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }

ui/snippets/networkMenu/NetworkLogo.tsx

-import { Box, Image, useColorModeValue, Skeleton, chakra } from '@chakra-ui/react';
+import { Box, Image, Skeleton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {

ui/snippets/networkMenu/useColors.ts

@@ -15,7 +15,7 @@ export default function useColors() {
       active: useColorModeValue('blue.50', 'whiteAlpha.100'),
     },
     border: {
-      'default': 'divider',
+      'default': 'border.divider',
       active: useColorModeValue('blue.50', 'whiteAlpha.100'),
     },
   };

ui/snippets/searchBar/SearchBarRecentKeywords.tsx

@@ -44,7 +44,7 @@ const SearchBarSuggest = ({ onClick, onClear }: Props) => {
   return (
     <Box py={ 6 }>
       { !isMobile && (
-        <Box pb={ 4 } mb={ 5 } borderColor="divider" borderBottomWidth="1px" _empty={{ display: 'none' }}>
+        <Box pb={ 4 } mb={ 5 } borderColor="border.divider" borderBottomWidth="1px" _empty={{ display: 'none' }}>
           <TextAd/>
         </Box>
       ) }
@@ -57,7 +57,7 @@ const SearchBarSuggest = ({ onClick, onClear }: Props) => {
           key={ kw }
           py={ 3 }
           px={ 1 }
-          borderColor="divider"
+          borderColor="border.divider"
           borderBottomWidth="1px"
           _last={{
             borderBottomWidth: '0',

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx

@@ -192,7 +192,7 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
   return (
     <Box mt={ 5 } mb={ 5 }>
       { !isMobile && (
-        <Box pb={ 4 } mb={ 5 } borderColor="divider" borderBottomWidth="1px" _empty={{ display: 'none' }}>
+        <Box pb={ 4 } mb={ 5 } borderColor="border.divider" borderBottomWidth="1px" _empty={{ display: 'none' }}>
           <TextAd/>
         </Box>
       ) }

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemLink.tsx

@@ -16,7 +16,7 @@ const SearchBarSuggestItemLink = ({ onClick, href, target, children }: Props) =>
       display="flex"
       flexDir="column"
       rowGap={ 2 }
-      borderColor="divider"
+      borderColor="border.divider"
       borderBottomWidth="1px"
       _last={{
         borderBottomWidth: '0',

ui/snippets/topBar/GetGasButton.tsx

@@ -34,7 +34,7 @@ const GetGasButton = () => {
 
       return (
         <>
-          <Box h="1px" w="8px" bg="divider" mx={ 1 }/>
+          <Box h="1px" w="8px" bg="border.divider" mx={ 1 }/>
           <Link
             href={ href }
             display="flex"

ui/snippets/topBar/TopBarStats.tsx

@@ -76,7 +76,7 @@ const TopBarStats = () => {
           </Skeleton>
         </Flex>
       ) }
-      { data?.coin_price && config.features.gasTracker.isEnabled && <TextSeparator color="divider"/> }
+      { data?.coin_price && config.features.gasTracker.isEnabled && <TextSeparator color="border.divider"/> }
       { data?.gas_prices && data.gas_prices.average !== null && config.features.gasTracker.isEnabled && (
         <>
           <Skeleton isLoaded={ !isPlaceholderData }>

ui/snippets/topBar/settings/Settings.tsx

@@ -27,7 +27,7 @@ const Settings = () => {
       <PopoverContent overflowY="hidden" w="auto" fontSize="sm">
         <PopoverBody boxShadow="2xl" p={ 4 }>
           <SettingsColorTheme onSelect={ onClose }/>
-          <Box borderColor="divider" borderWidth="1px" my={ 3 }/>
+          <Box borderColor="border.divider" borderWidth="1px" my={ 3 }/>
           <SettingsIdentIcon/>
           <SettingsAddressFormat/>
         </PopoverBody>

ui/snippets/user/profile/UserProfileButton.tsx

 import type { ButtonProps } from '@chakra-ui/react';
-import { Button, Tooltip, Box, HStack } from '@chakra-ui/react';
+import { Box, HStack } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
@@ -9,6 +9,8 @@ import { useMarketplaceContext } from 'lib/contexts/marketplace';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import shortenString from 'lib/shortenString';
 import useWeb3AccountWithDomain from 'lib/web3/useAccountWithDomain';
+import { Button } from 'toolkit/chakra/button';
+import { Tooltip } from 'toolkit/chakra/tooltip';
 import IconSvg from 'ui/shared/IconSvg';
 
 import UserIdenticon from '../UserIdenticon';
@@ -17,12 +19,12 @@ import { getUserHandle } from './utils';
 interface Props {
   profileQuery: UseQueryResult<UserInfo, unknown>;
   size?: ButtonProps['size'];
-  variant?: ButtonProps['variant'];
+  visual?: ButtonProps['visual'];
   onClick: () => void;
   isPending?: boolean;
 }
 
-const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const UserProfileButton = ({ profileQuery, size, visual, onClick, isPending }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   const [ isFetched, setIsFetched ] = useState(false);
   const isMobile = useIsMobile();
 
@@ -69,25 +71,22 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }:
 
   return (
     <Tooltip
-      label={ <span>Sign in to My Account to add tags,<br/>create watchlists, access API keys and more</span> }
-      textAlign="center"
-      padding={ 2 }
-      isDisabled={ isMobile || isLoading || Boolean(data) }
+      content={ <span>Sign in to My Account to add tags,<br/>create watchlists, access API keys and more</span> }
+      disabled={ isMobile || isLoading || Boolean(data) }
       openDelay={ 500 }
     >
       <Button
         ref={ ref }
         size={ size }
-        variant={ variant }
+        visual={ visual }
         onClick={ onClick }
         onFocus={ handleFocus }
-        data-selected={ dataExists }
-        data-warning={ isAutoConnectDisabled }
-        fontSize="sm"
-        lineHeight={ 5 }
+        selected={ dataExists }
+        highlighted={ isAutoConnectDisabled }
+        textStyle="sm"
         px={ dataExists ? 2.5 : 4 }
         fontWeight={ dataExists ? 700 : 600 }
-        isLoading={ isButtonLoading }
+        loading={ isButtonLoading }
       >
         { content }
       </Button>

ui/snippets/user/profile/UserProfileContent.tsx

@@ -83,13 +83,13 @@ const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }
         fontSize="xs"
         lineHeight={ 4 }
         fontWeight="500"
-        borderColor="divider"
+        borderColor="border.divider"
         borderWidth="1px"
         borderRadius="base"
         color={ accountTextColor }
       >
         { config.features.blockchainInteraction.isEnabled && (
-          <Flex p={ 2 } borderColor="divider" borderBottomWidth="1px">
+          <Flex p={ 2 } borderColor="border.divider" borderBottomWidth="1px">
             <Box>Address</Box>
             <Hint
               label={ `This wallet address is linked to your Blockscout account. It can be used to login ${ config.features.rewards.isEnabled ? 'and is used for Merits Program participation' : '' }` } // eslint-disable-line max-len

ui/snippets/user/profile/UserProfileDesktop.tsx

-import { PopoverBody, PopoverContent, PopoverTrigger, useDisclosure, type ButtonProps } from '@chakra-ui/react';
+import { useDisclosure, type ButtonProps } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -7,7 +7,7 @@ import type { Screen } from 'ui/snippets/auth/types';
 import config from 'configs/app';
 import * as mixpanel from 'lib/mixpanel';
 import useAccount from 'lib/web3/useAccount';
-import Popover from 'ui/shared/chakra/Popover';
+import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
 import AuthModal from 'ui/snippets/auth/AuthModal';
 import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
 
@@ -16,14 +16,14 @@ import UserProfileContent from './UserProfileContent';
 
 interface Props {
   buttonSize?: ButtonProps['size'];
-  buttonVariant?: ButtonProps['variant'];
+  buttonVisual?: ButtonProps['visual'];
 }
 
 const initialScreen = {
   type: config.features.blockchainInteraction.isEnabled ? 'select_method' as const : 'email' as const,
 };
 
-const UserProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
+const UserProfileDesktop = ({ buttonSize, buttonVisual = 'header' }: Props) => {
   const [ authInitialScreen, setAuthInitialScreen ] = React.useState<Screen>(initialScreen);
   const router = useRouter();
 
@@ -62,14 +62,22 @@ const UserProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) =>
     authModal.onClose();
   }, [ authModal ]);
 
+  const handleOpenChange = React.useCallback(({ open }: { open: boolean }) => {
+    if (open) {
+      profileMenu.onOpen();
+    } else {
+      profileMenu.onClose();
+    }
+  }, [ profileMenu ]);
+
   return (
     <>
-      <Popover openDelay={ 300 } placement="bottom-end" isLazy isOpen={ profileMenu.isOpen } onClose={ profileMenu.onClose }>
+      <PopoverRoot positioning={{ placement: 'bottom-end' }} lazyMount open={ profileMenu.open } onOpenChange={ handleOpenChange }>
         <PopoverTrigger>
           <UserProfileButton
             profileQuery={ profileQuery }
             size={ buttonSize }
-            variant={ buttonVariant }
+            visual={ buttonVisual }
             onClick={ handleProfileButtonClick }
           />
         </PopoverTrigger>
@@ -86,8 +94,8 @@ const UserProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) =>
             </PopoverBody>
           </PopoverContent>
         ) }
-      </Popover>
-      { authModal.isOpen && (
+      </PopoverRoot>
+      { authModal.open && (
         <AuthModal
           onClose={ handleAuthModalClose }
           initialScreen={ authInitialScreen }

ui/snippets/user/wallet/UserWalletDesktop.tsx

@@ -14,6 +14,7 @@ interface Props {
   buttonVariant?: ButtonProps['variant'];
 }
 
+// TODO @tom2drum check this component
 const UserWalletDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
   const walletMenu = useDisclosure();
 

ui/tokenInstance/metadata/MetadataAccordionItem.tsx

@@ -19,7 +19,7 @@ const MetadataAccordionItem = ({ children, className, level, isFlat }: Props) =>
       pl={ isFlat ? 0 : 6 }
       columnGap={ 3 }
       borderTopWidth="1px"
-      borderColor="divider"
+      borderColor="border.divider"
       wordBreak="break-all"
       rowGap={ 1 }
       _last={{

ui/tokenInstance/metadata/MetadataItemArray.tsx

@@ -27,7 +27,7 @@ const MetadataItemArray = ({ name, value, level }: Props) => {
         fontSize="sm"
         textAlign="left"
         _expanded={{
-          borderColor: 'divider',
+          borderColor: 'border.divider',
           borderBottomWidth: '1px',
         }}
       >
@@ -75,7 +75,7 @@ const MetadataItemArray = ({ name, value, level }: Props) => {
             <Flex
               key={ index }
               py={ 2 }
-              _notFirst={{ borderColor: 'divider', borderTopWidth: '1px' }}
+              _notFirst={{ borderColor: 'border.divider', borderTopWidth: '1px' }}
               flexDir="column"
               rowGap={ 2 }
             >

ui/tokenInstance/metadata/MetadataItemObject.tsx

@@ -37,7 +37,7 @@ const MetadataItemObject = ({ name, value, level }: Props) => {
         fontSize="sm"
         textAlign="left"
         _expanded={{
-          borderColor: 'divider',
+          borderColor: 'border.divider',
           borderBottomWidth: '1px',
         }}
       >

ui/txs/TxAdditionalInfo.tsx

@@ -57,7 +57,7 @@ const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading, className }: Props) =
           <PopoverTrigger>
             <AdditionalInfoButton isOpen={ isOpen } isLoading={ isLoading } className={ className }/>
           </PopoverTrigger>
-          <PopoverContent border="1px solid" borderColor="divider">
+          <PopoverContent border="1px solid" borderColor="border.divider">
             <PopoverBody fontWeight={ 400 } fontSize="sm">
               { content }
             </PopoverBody>

ui/txs/TxAdditionalInfoContent.tsx

@@ -18,7 +18,7 @@ import Utilization from 'ui/shared/Utilization/Utilization';
 const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
   const sectionProps = {
     borderBottom: '1px solid',
-    borderColor: 'divider',
+    borderColor: 'border.divider',
     paddingBottom: 4,
   };
 

ui/txs/TxsFilters.tsx

@@ -48,13 +48,13 @@ const TxsFilters = ({ filters, appliedFiltersNum }: Props) => {
   return (
     <PopoverFilter contentProps={{ w: { md: '100%', lg: '438px' } }} appliedFiltersNum={ appliedFiltersNum }>
       <Text variant="secondary" fontWeight="600" fontSize="sm">Type</Text>
-      <Grid gridTemplateColumns="1fr 1fr" rowGap={ 5 } mt={ 4 } mb={ 4 } pb={ 6 } borderBottom="1px solid" borderColor="divider">
+      <Grid gridTemplateColumns="1fr 1fr" rowGap={ 5 } mt={ 4 } mb={ 4 } pb={ 6 } borderBottom="1px solid" borderColor="border.divider">
         <CheckboxGroup size="lg" onChange={ onTypeFilterChange } defaultValue={ typeFilter }>
           { TYPE_OPTIONS.map(({ title, id }) => <Checkbox key={ id } value={ id }><Text fontSize="md">{ title }</Text></Checkbox>) }
         </CheckboxGroup>
       </Grid>
       <Text variant="secondary" fontWeight="600" fontSize="sm">Method</Text>
-      <Grid gridTemplateColumns="1fr 1fr" rowGap={ 5 } mt={ 4 } mb={ 4 } pb={ 6 } borderBottom="1px solid" borderColor="divider">
+      <Grid gridTemplateColumns="1fr 1fr" rowGap={ 5 } mt={ 4 } mb={ 4 } pb={ 6 } borderBottom="1px solid" borderColor="border.divider">
         <CheckboxGroup size="lg" onChange={ onMethodFilterChange } defaultValue={ methodFilter }>
           { METHOD_OPTIONS.map(({ title, id }) => <Checkbox key={ id } value={ id }><Text fontSize="md">{ title }</Text></Checkbox>) }
         </CheckboxGroup>