Merge pull request #5032 from Sage/FE-5120-update-contrast

fix(tabs): update background colour to improve contrast for selected Tab in alternate variant FE-5120
Sage · Apr 12, 2022 · 8c4b88f · 8c4b88f
2 parents 892207b + d733de0
commit 8c4b88f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/src/components/tabs/__internal__/tab-title/tab-title.spec.js b/src/components/tabs/__internal__/tab-title/tab-title.spec.js
@@ -975,23 +975,23 @@ describe("TabTitle", () => {
           wrapper = render({ alternateStyling: true, size }, mount);
           assertStyleMatch(
             {
-              backgroundColor: "var(--colorsActionMinor100)",
+              backgroundColor: "var(--colorsActionMinor200)",
             },
             wrapper.find(StyledTabTitle),
             { modifier: ":focus" }
           );
 
           assertStyleMatch(
             {
-              backgroundColor: "var(--colorsActionMinor150)",
+              backgroundColor: "var(--colorsActionMinor250)",
             },
             wrapper.find(StyledTabTitle),
             { modifier: ":hover" }
           );
 
           assertStyleMatch(
             {
-              backgroundColor: "var(--colorsActionMinor100)",
+              backgroundColor: "var(--colorsActionMinor200)",
             },
             render(
               { alternateStyling: true, isTabSelected: true, size },

diff --git a/src/components/tabs/__internal__/tab-title/tab-title.style.js b/src/components/tabs/__internal__/tab-title/tab-title.style.js
@@ -438,21 +438,19 @@ const StyledTabTitle = styled.button`
       alternateStyling &&
       css`
         &:focus {
-          background-color: var(--colorsActionMinor100);
+          background-color: var(--colorsActionMinor200);
         }
 
         &:hover {
           background-color: ${isTabSelected
-            ? "var(--colorsActionMinor100)"
-            : "var(--colorsActionMinor150)"};
+            ? "var(--colorsActionMinor200)"
+            : "var(--colorsActionMinor250)"};
         }
 
         ${isTabSelected &&
         css`
-          background-color: var(--colorsActionMinor100);
+          background-color: var(--colorsActionMinor200);
         `}
-
-        ${isInSidebar && `padding-bottom: 1px;`}
       `
     }
   `}