[MWPW-166631] Tab color contrast (#3566)

* [MWPW-166631] applying style a11y changes to tabs

* [MWPW-161397] tab list height fix

* [MWPW-166631] dark tab shadow fix

* [MWPW-166631] reverting tab pill style

* [MWPW-166631] css code optimization

* [MWPW-166631] tab margin fix

* [MWPW-166631] reduces css repetitivnes

libs/blocks/tabs/tabs.css

@@ -1,35 +1,50 @@
 :root {
   /* Tab Colors */
   --tabs-active-color: #1473e6;
-  --tabs-border-color: #d8d8d8;
+  --tabs-border-color: #909090;
   --tabs-border-hover-color: #acacac;
-  --tabs-text-color: #7e7e7e;
-  --tabs-active-text-color: #2C2C2C;
+  --tabs-text-color: #686868;
+  --tabs-active-text-color: #2c2c2c;
   --tabs-bg-color: #f1f1f1;
   --tabs-active-bg-color: #fff;
-  --tabs-list-bg-gradient: linear-gradient(rgb(255 255 255 / 0%) 60%, rgb(245 245 245 / 80%));
+  --tabs-list-bg-gradient: linear-gradient(
+    to bottom, 
+    rgba(136, 136, 136, 0) 0%,
+    rgba(136, 136, 136, 0) 60%,
+    rgba(136, 136, 136, 0.03) 80%,
+    rgba(136, 136, 136, 0.08) 100%
+  );
   --tabs-pill-bg-color: #e1e1e1;
   --tabs-pill-bg-color-hover: #dadada;
   --tabs-pill-bg-color-active: #c6c6c6;
+  --tabs-mobile-stacked-bg-color: #242424;
+  --tabs-mobile-stacked-text-color: #ffffff;
   --tabs-pill-text-color: #131313;
   --tabs-paddle-bs-color: #0000001a;
-  --tabs-radio-gray: #6D6D6D;
-  --tabs-radio-blue: #0265DC;
+  --tabs-radio-gray: #6d6d6d;
+  --tabs-radio-blue: #0265dc;
   --tabs-radio-bg: #fff;
   --tabs-radio-button-bg: #fdfdfd;
 }
 
 :root .dark {
-  --tabs-border-color: rgb(56 56 56);
-  --tabs-text-color: #cdcdcd;
+  --tabs-border-color: #909090;
+  --tabs-text-color: #b6b6b6;
   --tabs-active-text-color: #fff;
   --tabs-bg-color: #1a1a1a;
-  --tabs-active-bg-color: #111;
-  --tabs-list-bg-gradient: linear-gradient(rgb(0 0 0 / 0%) 60%, rgb(0 0 0 / 80%));
+  --tabs-active-bg-color: #1e1e1e;
+  --tabs-list-bg-gradient: linear-gradient(
+    rgba(0, 0, 0, 0%) 0%,
+    rgba(0, 0, 0, 0%) 60%,
+    rgba(0, 0, 0, 20%) 80%,
+    rgba(0, 0, 0, 40%) 100%
+  );
   --tabs-pill-bg-color: #555;
   --tabs-pill-bg-color-hover: #666;
   --tabs-pill-bg-color-active: #444;
   --tabs-pill-text-color: #fff;
+  --tabs-mobile-stacked-bg-color: #ffffff;
+  --tabs-mobile-stacked-text-color: #131313;
   --tabs-paddle-bs-color: #ffffff1a;
   --tabs-radio-gray: #d4d4d4;
   --tabs-radio-blue: #5eaaf7;
@@ -91,7 +106,6 @@
   display: flex;
   z-index: 2;
   margin: 0 var(--spacing-m);
-
   /* ScrollProps - If content exceeds height of container, overflow! */
   overflow: auto;
   overflow-y: hidden;
@@ -101,6 +115,9 @@
 
   /* default bg */
   background: var(--tabs-list-bg-gradient);
+  background-size: 100% 16px;
+  background-position: bottom;
+  background-repeat: no-repeat;
 }
 
 .tabs div[role="tablist"]::-webkit-scrollbar {
@@ -199,6 +216,10 @@
   align-items: center;
 }
 
+.tabs.quiet .paddle {
+  margin-top: 1px;
+}
+
 .tabs.radio div[role="tablist"],
 .tabs.radio div[role="tablist"] button,
 .tabs.radio .paddle {
@@ -236,6 +257,14 @@
   margin-inline-start: 24px;
 }
 
+.tabs.pill .tabList button {
+  border: none;
+}
+
+.tabs.quiet .tabList {
+  padding-bottom: 1px;
+}
+
 .tabs[class*='pill'] .tab-content {
   border-bottom: none;
 }
@@ -335,6 +364,9 @@
   cursor: default;
   box-shadow: none;
   background: var(--tabs-list-bg-gradient);
+  background-size: 100% 16px;
+  background-position: bottom;
+  background-repeat: no-repeat;
 }
 
 .tabs .paddle-left {
@@ -498,6 +530,10 @@
     width: auto;
   }
 
+  .tabs .tabList {
+    min-height: 62px;
+  }
+
   .tabs div[role="tablist"] button {
     padding: 24px 32px 18px;
     line-height: 18px;
@@ -522,6 +558,10 @@
     margin: 0;
   }
 
+  .tabs.stacked-mobile .paddle {
+    display: none;
+  }
+
   .tabs.stacked-mobile div[role="tablist"] .tab-list-container {
     flex-direction: column;
     margin: 30px auto;
@@ -543,11 +583,8 @@
   }
 
   .tabs.stacked-mobile div[role="tablist"] button[aria-selected="true"] {
-    background-color: #dadada;
-  }
-
-  .tabs.stacked-mobile.dark div[role="tablist"] button[aria-selected="true"] {
-    background-color: #393939;
+    background-color: var(--tabs-mobile-stacked-bg-color);
+    color: var(--tabs-mobile-stacked-text-color);
   }
 
   .tabs.stacked-mobile.center div[role="tablist"] .tab-list-container {