fix: change to non opaque color to avoid color blending

contentful · Apr 30, 2024 · f041073 · f041073
1 parent bd10031
commit f041073
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts
@@ -33,7 +33,7 @@ export const getNavbarSwitcherStyles = () => ({
         display: 'none',
       },
       '&:hover li': {
-        backgroundColor: hexToRGBA(tokens.gray300, 0.15),
+        backgroundColor: '#f2f4f6', // calculated hex color to avoid opaque color blending
       },
     },
     getGlowOnFocusStyles(

diff --git a/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts b/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts
@@ -50,7 +50,7 @@ export const getNavbarSwitcherItemStyles = () => ({
       },
     },
     '&:nth-child(3)': {
-      left: '-24px', //magic number due to round border design
+      left: '-25px', //magic number due to round border design
       paddingLeft: tokens.spacingM,
       borderRadius: `0 3rem 3rem 0`,
       fontFamily: tokens.fontStackMonospace,