fix hero banner

toolkit/theme/foundations/semanticTokens.ts

 import type { ThemingConfig } from '@chakra-ui/react';
 
+import config from 'configs/app';
+
+const heroBannerButton = config.UI.homepage.heroBanner?.button;
+
 const semanticTokens: ThemingConfig['semanticTokens'] = {
   // TODO @tom2drum remove *_hover in favor of conditional selectors
   colors: {
@@ -34,6 +38,48 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
           DEFAULT: { value: { _light: '{colors.gray.300}', _dark: '{colors.gray.600}' } },
         },
       },
+      hero: {
+        bg: {
+          DEFAULT: {
+            value: {
+              _light: heroBannerButton?._default?.background?.[0] || '{colors.blue.600}',
+              _dark: heroBannerButton?._default?.background?.[1] || heroBannerButton?._default?.background?.[0] || '{colors.blue.600}',
+            },
+          },
+          hover: {
+            value: {
+              _light: heroBannerButton?._hover?.background?.[0] || '{colors.blue.400}',
+              _dark: heroBannerButton?._hover?.background?.[1] || heroBannerButton?._hover?.background?.[0] || '{colors.blue.400}',
+            },
+          },
+          selected: {
+            value: {
+              _light: heroBannerButton?._selected?.background?.[0] || '{colors.blue.50}',
+              _dark: heroBannerButton?._selected?.background?.[1] || heroBannerButton?._selected?.background?.[0] || '{colors.blue.50}',
+            },
+          },
+        },
+        fg: {
+          DEFAULT: {
+            value: {
+              _light: heroBannerButton?._default?.text_color?.[0] || '{colors.white}',
+              _dark: heroBannerButton?._default?.text_color?.[1] || heroBannerButton?._default?.text_color?.[0] || '{colors.white}',
+            },
+          },
+          hover: {
+            value: {
+              _light: heroBannerButton?._hover?.text_color?.[0] || '{colors.white}',
+              _dark: heroBannerButton?._hover?.text_color?.[1] || heroBannerButton?._hover?.text_color?.[0] || '{colors.white}',
+            },
+          },
+          selected: {
+            value: {
+              _light: heroBannerButton?._selected?.text_color?.[0] || '{colors.blackAlpha.800}',
+              _dark: heroBannerButton?._selected?.text_color?.[1] || heroBannerButton?._selected?.text_color?.[0] || '{colors.blackAlpha.800}',
+            },
+          },
+        },
+      },
     },
     link: {
       primary: {

toolkit/theme/recipes/button.recipe.ts

@@ -108,6 +108,22 @@ export const recipe = defineRecipe({
           },
         },
       },
+      hero: {
+        bg: 'button.hero.bg',
+        color: 'button.hero.fg',
+        _hover: {
+          bg: 'button.hero.bg.hover',
+          color: 'button.hero.fg.hover',
+        },
+        _selected: {
+          bg: 'button.hero.bg.selected',
+          color: 'button.hero.fg.selected',
+          _hover: {
+            bg: 'button.hero.bg.selected',
+            color: 'button.hero.fg.selected',
+          },
+        },
+      },
       plain: {
         bg: 'transparent',
         color: 'inherit',

ui/home/HeroBanner.tsx

-import { Box, Flex, Heading, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Heading } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
@@ -13,34 +13,38 @@ const TEXT_COLOR_DEFAULT = 'white';
 const BORDER_DEFAULT = 'none';
 
 const HeroBanner = () => {
-  const background = useColorModeValue(
-    // light mode
-    config.UI.homepage.heroBanner?.background?.[0] ||
-    config.UI.homepage.plate.background ||
-    BACKGROUND_DEFAULT,
-    // dark mode
-    config.UI.homepage.heroBanner?.background?.[1] ||
-    config.UI.homepage.heroBanner?.background?.[0] ||
-    config.UI.homepage.plate.background ||
-    BACKGROUND_DEFAULT,
-  );
+  const background = {
+    _light:
+      config.UI.homepage.heroBanner?.background?.[0] ||
+      config.UI.homepage.plate.background ||
+      BACKGROUND_DEFAULT,
+    _dark:
+      config.UI.homepage.heroBanner?.background?.[1] ||
+      config.UI.homepage.heroBanner?.background?.[0] ||
+      config.UI.homepage.plate.background ||
+      BACKGROUND_DEFAULT,
+  };
 
-  const textColor = useColorModeValue(
-    // light mode
-    config.UI.homepage.heroBanner?.text_color?.[0] ||
-    config.UI.homepage.plate.textColor ||
-    TEXT_COLOR_DEFAULT,
+  const textColor = {
+    _light:
+      // light mode
+      config.UI.homepage.heroBanner?.text_color?.[0] ||
+      config.UI.homepage.plate.textColor ||
+      TEXT_COLOR_DEFAULT,
     // dark mode
-    config.UI.homepage.heroBanner?.text_color?.[1] ||
-    config.UI.homepage.heroBanner?.text_color?.[0] ||
-    config.UI.homepage.plate.textColor ||
-    TEXT_COLOR_DEFAULT,
-  );
+    _dark:
+      config.UI.homepage.heroBanner?.text_color?.[1] ||
+      config.UI.homepage.heroBanner?.text_color?.[0] ||
+      config.UI.homepage.plate.textColor ||
+      TEXT_COLOR_DEFAULT,
+  };
 
-  const border = useColorModeValue(
-    config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
-    config.UI.homepage.heroBanner?.border?.[1] || config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
-  );
+  const border = {
+    _light:
+      config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
+    _dark:
+      config.UI.homepage.heroBanner?.border?.[1] || config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
+  };
 
   return (
     <Flex
@@ -69,10 +73,10 @@ const HeroBanner = () => {
           </Heading>
           { config.UI.navigation.layout === 'vertical' && (
             <Box display={{ base: 'none', lg: 'flex' }} gap={ 2 }>
-              { config.features.rewards.isEnabled && <RewardsButton variant="hero"/> }
+              { config.features.rewards.isEnabled && <RewardsButton visual="hero"/> }
               {
-                (config.features.account.isEnabled && <UserProfileDesktop buttonVariant="hero"/>) ||
-                (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonVariant="hero"/>)
+                (config.features.account.isEnabled && <UserProfileDesktop buttonVisual="hero"/>) ||
+                (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonVisual="hero"/>)
               }
             </Box>
           ) }

ui/pages/Home.tsx

@@ -15,23 +15,23 @@ const rollupFeature = config.features.rollup;
 
 const Home = () => {
 
-  const leftWidget = (() => {
-    if (rollupFeature.isEnabled && !rollupFeature.homepage.showLatestBlocks) {
-      switch (rollupFeature.type) {
-        case 'zkEvm':
-          return <LatestZkEvmL2Batches/>;
-        case 'arbitrum':
-          return <LatestArbitrumL2Batches/>;
-      }
-    }
+  // const leftWidget = (() => {
+  //   if (rollupFeature.isEnabled && !rollupFeature.homepage.showLatestBlocks) {
+  //     switch (rollupFeature.type) {
+  //       case 'zkEvm':
+  //         return <LatestZkEvmL2Batches/>;
+  //       case 'arbitrum':
+  //         return <LatestArbitrumL2Batches/>;
+  //     }
+  //   }
 
-    return <LatestBlocks/>;
-  })();
+  //   return <LatestBlocks/>;
+  // })();
 
   return (
     <Box as="main">
       <HeroBanner/>
-      <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 2 } rowGap={ 1 } mt={ 3 } _empty={{ mt: 0 }}>
+      { /* <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 2 } rowGap={ 1 } mt={ 3 } _empty={{ mt: 0 }}>
         <Stats/>
         <ChainIndicators/>
       </Flex>
@@ -41,7 +41,7 @@ const Home = () => {
         <Box flexGrow={ 1 }>
           <Transactions/>
         </Box>
-      </Flex>
+      </Flex> */ }
     </Box>
   );
 };

ui/rewards/RewardsButton.tsx

@@ -33,7 +33,7 @@ const RewardsButton = ({ visual = 'header', size }: Props) => {
     >
       <Button
         visual={ visual }
-        data-selected={ !isLoading && Boolean(apiToken) }
+        selected={ !isLoading && Boolean(apiToken) }
         flexShrink={ 0 }
         as={ apiToken ? LinkInternal : 'button' }
         { ...(apiToken ? { href: route({ pathname: '/account/rewards' }) } : {}) }

ui/shared/ad/AdBannerContent.tsx

@@ -5,7 +5,7 @@ import type { BannerPlatform } from './types';
 import type { AdBannerProviders } from 'types/client/adProviders';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 
 import AdbutlerBanner from './AdbutlerBanner';
 import CoinzillaBanner from './CoinzillaBanner';
@@ -41,7 +41,7 @@ const AdBannerContent = ({ className, isLoading, provider, platform }: Props) =>
   return (
     <Skeleton
       className={ className }
-      isLoaded={ !isLoading }
+      loading={ isLoading }
       borderRadius="none"
       maxW={ ('adButler' in feature && feature.adButler) ? feature.adButler.config.desktop.width : '728px' }
       w="100%"

ui/shared/filters/FilterButton.tsx

@@ -44,7 +44,7 @@ const FilterButton = ({ isActive, isLoading, appliedFiltersNum, onClick, as }: P
       colorScheme="gray"
       onClick={ onClick }
       isActive={ isActive }
-      data-selected={ Boolean(appliedFiltersNum) }
+      selected={ Boolean(appliedFiltersNum) }
       px={ 1.5 }
       flexShrink={ 0 }
       as={ as }

ui/shared/radioButtonGroup/RadioButtonGroup.tsx

@@ -31,7 +31,7 @@ const RadioButton = (props: RadioButtonProps) => {
         as="label"
         aria-label={ props.title }
         variant="radio_group"
-        data-selected={ props.isChecked }
+        selected={ props.isChecked }
       >
         <input { ...input }/>
         <Flex
@@ -48,7 +48,7 @@ const RadioButton = (props: RadioButtonProps) => {
       as="label"
       leftIcon={ props.icon ? <IconSvg name={ props.icon } boxSize={ 5 } mr={ -1 }/> : undefined }
       variant="radio_group"
-      data-selected={ props.isChecked }
+      selected={ props.isChecked }
     >
       <input { ...input }/>
       <Flex

ui/shared/sort/ButtonDesktop.tsx

@@ -33,7 +33,7 @@ const ButtonDesktop = ({ children, isActive, onClick, isLoading, className }: Bu
         fontWeight="600"
         borderColor="transparent"
         px={ 2 }
-        data-selected={ isActive }
+        selected={ isActive }
       >
         <Box
           as={ isActive ? 'div' : 'span' }

ui/snippets/auth/AuthModal.tsx

@@ -18,7 +18,6 @@ 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 {

ui/snippets/user/wallet/UserWalletButton.tsx

@@ -47,8 +47,8 @@ const UserWalletButton = ({ size, visual, isPending, isAutoConnectDisabled, addr
         ref={ ref }
         size={ size }
         visual={ visual }
-        data-selected={ Boolean(address) }
-        data-warning={ isAutoConnectDisabled }
+        selected={ Boolean(address) }
+        highlighted={ isAutoConnectDisabled }
         textStyle="sm"
         px={ address ? 2.5 : 4 }
         fontWeight={ address ? 700 : 600 }