diff --git a/.changeset/five-jeans-look.md b/.changeset/five-jeans-look.md
new file mode 100644
index 00000000000..44beec7929b
--- /dev/null
+++ b/.changeset/five-jeans-look.md
@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': patch
+---
+
+chore(blade): change TabNavItem,TopNavActions background color & update examples
\ No newline at end of file
diff --git a/packages/blade/src/components/TopNav/TabNav/TabNavItem.web.tsx b/packages/blade/src/components/TopNav/TabNav/TabNavItem.web.tsx
index 45b4ede9a4f..27c4add8313 100644
--- a/packages/blade/src/components/TopNav/TabNav/TabNavItem.web.tsx
+++ b/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),
diff --git a/packages/blade/src/components/TopNav/TopNav.web.tsx b/packages/blade/src/components/TopNav/TopNav.web.tsx
index 6682e13ee79..594224a85e5 100644
--- a/packages/blade/src/components/TopNav/TopNav.web.tsx
+++ b/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 })}
diff --git a/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.ssr.test.tsx.snap b/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.ssr.test.tsx.snap
index 72d2c5f3ee7..901f297cb84 100644
--- a/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.ssr.test.tsx.snap
+++ b/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[` should render TopNav ssr 1`] = `""`;
+exports[` should render TopNav ssr 1`] = `""`;
exports[` should render TopNav ssr 2`] = `
.c0.c0.c0.c0.c0 {
@@ -127,7 +127,7 @@ exports[` should render TopNav ssr 2`] = `
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;
}
diff --git a/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.web.test.tsx.snap b/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.web.test.tsx.snap
index bea7bc5f726..b19435b639d 100644
--- a/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.web.test.tsx.snap
+++ b/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.web.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;
}
diff --git a/packages/blade/src/components/TopNav/docs/TopNav.stories.tsx b/packages/blade/src/components/TopNav/docs/TopNav.stories.tsx
index dfc27aea3e9..b7677e51e4d 100644
--- a/packages/blade/src/components/TopNav/docs/TopNav.stories.tsx
+++ b/packages/blade/src/components/TopNav/docs/TopNav.stories.tsx
@@ -459,7 +459,7 @@ const TopNavFullExample = () => {
height="100vh"
padding="spacing.5"
overflowY="scroll"
- backgroundColor="surface.background.gray.intense"
+ backgroundColor="surface.background.gray.moderate"
>
Active URL: {activeUrl}
@@ -603,7 +603,7 @@ const TopNavMinimalTemplate: StoryFn = () => {
-
+
This is a minimal example usage of TopNav, checkout Full Dashboard Layout example for
other features & integration details.
diff --git a/packages/blade/src/components/TopNav/docs/code.ts b/packages/blade/src/components/TopNav/docs/code.ts
index 062cf3f9276..c676e5a1036 100644
--- a/packages/blade/src/components/TopNav/docs/code.ts
+++ b/packages/blade/src/components/TopNav/docs/code.ts
@@ -356,7 +356,7 @@ export const topNavFullExample = {
height="100vh"
padding="spacing.5"
overflowY="scroll"
- backgroundColor="surface.background.gray.intense"
+ backgroundColor="surface.background.gray.moderate"
>
This demo integrates: