chore: change TabNavItem,TopNavActions background color & update examples [FC-1234] (#2465)

* feat: tabNavItem background color update

* chore: add change set

* chore: change bg color of topNavActions

* feat: updated examples

* chore: update changeset

* chore: update changeset

* chore: updated snaps

Author: tewarig

.changeset/five-jeans-look.md

@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': patch
+---
+
+chore(blade): change TabNavItem,TopNavActions background color & update examples

packages/blade/src/components/TopNav/TabNav/TabNavItem.web.tsx

@@ -69,7 +69,7 @@ const StyledTabNavItemWrapper = styled(BaseBox)<{
     position: 'relative',
     flexShrink: 0,
     padding: `${makeSpace(theme.spacing[2])} ${makeSpace(theme.spacing[1])}`,
-    backgroundColor: isActive ? theme.colors.surface.background.gray.intense : 'transparent',
+    backgroundColor: isActive ? theme.colors.surface.background.gray.moderate : 'transparent',
     borderColor: isActive ? theme.colors.surface.border.gray.muted : 'transparent',
     borderStyle: 'solid',
     borderWidth: makeBorderSize(theme.border.width.thin),

packages/blade/src/components/TopNav/TopNav.web.tsx

@@ -110,7 +110,7 @@ const TopNavActions = ({ children }: { children: React.ReactNode }): React.React
       alignItems="center"
       marginTop="spacing.1"
       padding="spacing.3"
-      backgroundColor="surface.background.gray.intense"
+      backgroundColor="surface.background.gray.moderate"
       borderTopLeftRadius="medium"
       borderTopRightRadius="medium"
       {...metaAttribute({ name: MetaConstants.TopNavActions })}

packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.ssr.test.tsx.snap

@@ -125,7 +125,7 @@ exports[`TopNav it shpuld support adding test Id 1`] = `
   padding: 8px;
   margin-top: 2px;
   gap: 8px;
-  background-color: hsla(0,0%,100%,1);
+  background-color: hsla(210,40%,98%,1);
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
@@ -904,7 +904,7 @@ exports[`TopNav should render 1`] = `
   padding: 8px;
   margin-top: 2px;
   gap: 8px;
-  background-color: hsla(0,0%,100%,1);
+  background-color: hsla(210,40%,98%,1);
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
@@ -1683,7 +1683,7 @@ exports[`TopNav should support data analytics attributes 1`] = `
   padding: 8px;
   margin-top: 2px;
   gap: 8px;
-  background-color: hsla(0,0%,100%,1);
+  background-color: hsla(210,40%,98%,1);
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }

packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.web.test.tsx.snap

@@ -459,7 +459,7 @@ const TopNavFullExample = () => {
               height="100vh"
               padding="spacing.5"
               overflowY="scroll"
-              backgroundColor="surface.background.gray.intense"
+              backgroundColor="surface.background.gray.moderate"
             >
               <Box width={{ base: 'max-content', m: '100%' }} height="200vh">
                 <Text weight="semibold">Active URL: {activeUrl}</Text>
@@ -603,7 +603,7 @@ const TopNavMinimalTemplate: StoryFn<typeof TopNav> = () => {
         </TopNav>
       </BaseBox>
 
-      <Box paddingY="spacing.4" backgroundColor="surface.background.gray.intense" height="100%">
+      <Box paddingY="spacing.4" backgroundColor="surface.background.gray.moderate" height="100%">
         <Text margin="spacing.5">
           This is a minimal example usage of TopNav, checkout Full Dashboard Layout example for
           other features & integration details.

packages/blade/src/components/TopNav/docs/TopNav.stories.tsx

@@ -356,7 +356,7 @@ export const topNavFullExample = {
                 height="100vh"
                 padding="spacing.5"
                 overflowY="scroll"
-                backgroundColor="surface.background.gray.intense"
+                backgroundColor="surface.background.gray.moderate"
               >
                 <Box width={{ base: "max-content", m: "100%" }} height="200vh">
                   <Text marginBottom="spacing.4">This demo integrates:</Text>