From 2af38b7821fab7c0374bae3a765ab460a1f00310 Mon Sep 17 00:00:00 2001
From: edleeks87 <edward.leeks@sage.com>
Date: Fri, 8 Apr 2022 11:58:35 +0100
Subject: [PATCH] fix(tabs): update background colour to improve contrast for
 selected Tab in alternate variant

Updates the background colour for selected or hovered `Tab` when `Tabs` are rendered inside the
`Drawer` `sidebar` or when `variant` is set to `alternate`

fix #5030
---
 .../tabs/__internal__/tab-title/tab-title.spec.js      |  6 +++---
 .../tabs/__internal__/tab-title/tab-title.style.js     | 10 ++++------
 2 files changed, 7 insertions(+), 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
index 8b747b40c4..24bb03fb0e 100644
--- a/src/components/tabs/__internal__/tab-title/tab-title.spec.js
+++ b/src/components/tabs/__internal__/tab-title/tab-title.spec.js
@@ -975,7 +975,7 @@ describe("TabTitle", () => {
           wrapper = render({ alternateStyling: true, size }, mount);
           assertStyleMatch(
             {
-              backgroundColor: "var(--colorsActionMinor100)",
+              backgroundColor: "var(--colorsActionMinor200)",
             },
             wrapper.find(StyledTabTitle),
             { modifier: ":focus" }
@@ -983,7 +983,7 @@ describe("TabTitle", () => {
 
           assertStyleMatch(
             {
-              backgroundColor: "var(--colorsActionMinor150)",
+              backgroundColor: "var(--colorsActionMinor250)",
             },
             wrapper.find(StyledTabTitle),
             { modifier: ":hover" }
@@ -991,7 +991,7 @@ describe("TabTitle", () => {
 
           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
index b45d42c9f3..1c838270cd 100644
--- 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;`}
       `
     }
   `}