chore: change TabNavItem,TopNavActions background color & update exam…

…ples [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
razorpay · Jan 9, 2025 · 6aae282 · 6aae282
1 parent c676f3e
commit 6aae282
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 10 deletions.
diff --git a/.changeset/five-jeans-look.md b/.changeset/five-jeans-look.md
@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': patch
+---
+
+chore(blade): change TabNavItem,TopNavActions background color & update examples
diff --git 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
@@ -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
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
@@ -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
@@ -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.

diff --git 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"
               >
                 <Box width={{ base: "max-content", m: "100%" }} height="200vh">
                   <Text marginBottom="spacing.4">This demo integrates:</Text>