MC-3406: Explicit Background Attributes for Tab

 - fix merge issues & stabilize tests

Author: cspruiell

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTabsSection.xml

@@ -86,11 +86,6 @@
         <element name="tabHeaderItemActive" type="button" selector="(//div[@data-role='tabs']//descendant::*[@role='tablist'])/li[{{arg1}}][contains(@class, 'ui-state-active')]" parameterized="true"/>
         <element name="tabPanel" type="button" selector="(//div[@class='tabs-content']//div[@role='tabpanel'])[{{arg1}}]" parameterized="true"/>
         <element name="tabContent" type="button" selector="div.tabs-content div[data-role=tab-item]:nth-child({{arg1}})" parameterized="true"/>
-        <element name="tabContentBackgroundColor" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style, 'background-color: {{arg2}}')]" parameterized="true"/>
-        <element name="tabContentBackgroundAttachment" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style, 'background-attachment: {{arg2}}')]" parameterized="true"/>
-        <element name="tabContentBackgroundPosition" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style, 'background-position: {{arg2}}')]" parameterized="true"/>
-        <element name="tabContentBackgroundSize" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style, 'background-size: {{arg2}}')]" parameterized="true"/>
-        <element name="tabContentBackgroundRepeat" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style, 'background-repeat: {{arg2}}')]" parameterized="true"/>
         <element name="container" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]" parameterized="true"/>
         <element name="containerStyle" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'{{arg2}}')]" parameterized="true"/>
         <element name="noMinHeight" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][not(contains(@style,'min-height:'))]" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBlockTest.xml

@@ -885,7 +885,7 @@
         <!--Check that tab was rendered on the stage-->
         <comment userInput="Check that tab was rendered on the stage" stepKey="commentCheckingThatTabAreRenderedOnTHeStage"/>
         <see selector="{{TabOnStorefront.tabHeader('1')}}" userInput="{{PageBuilderTabNameRandom1.value}}" stepKey="seeTab1TitleStorefront2"/>
-        <seeElement selector="{{TabOnStorefront.tabContentBackgroundColor('1', PageBuilderTabBackgroundColorPink.rgb)}}" stepKey="seeTab1BackgroundColor2"/>
+        <seeElement selector="{{TabOnStorefront.backgroundColor('1', PageBuilderTabBackgroundColorPink.rgb)}}" stepKey="seeTab1BackgroundColor2"/>
         <actionGroup ref="openOptionsMenu" stepKey="openEditMenuOnStage3">
             <argument name="contentType" value="PageBuilderBlockContentType"/>
             <argument name="contentTypeIndex" value="1"/>
@@ -896,7 +896,7 @@
         <comment userInput="Verify Block On Store front" stepKey="commentCheckingThatImageIsNotRenderedOnTheStoreFront"/>
         <amOnPage url="$$createCMSPage.identifier$$" stepKey="amOnPageTestPage"/>
         <see selector="{{TabOnStorefront.tabHeader('1')}}" userInput="{{PageBuilderTabNameRandom1.value}}" stepKey="seeTab1TitleStorefront"/>
-        <seeElement selector="{{TabOnStorefront.tabContentBackgroundColor('1', PageBuilderTabBackgroundColorPink.rgb)}}" stepKey="seeTab1BackgroundColor"/>
+        <seeElement selector="{{TabOnStorefront.backgroundColor('1', PageBuilderTabBackgroundColorPink.rgb)}}" stepKey="seeTab1BackgroundColor"/>
         <see userInput="$$createPreReqBlock.content$$" stepKey="seeBlockContentOnCmsStage1"/>
     </test>
     <test name="AddBlockWithEmptyImageToCmsPage">

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slider/_default.less

@@ -3,17 +3,20 @@
 //  * See COPYING.txt for license details.
 //  */
 
+@ccc: #ccc;
+@b3: #b3b3b3;
+
 //
 //  Default appearance styles
 //  _____________________________________________
 
 [data-role='slider'],
 .pagebuilder-content-type.pagebuilder-slider {
-    border: none;
-    transition: none;
     -moz-transition: none;
     -o-transition: none;
     -webkit-transition: none;
+    border: none;
+    transition: none;
 
     .slider-container {
         .pagebuilder-system-border;
@@ -37,11 +40,11 @@
         }
 
         &:hover {
-            box-shadow: none;
-            transition: none;
             -moz-transition: none;
             -o-transition: none;
             -webkit-transition: none;
+            box-shadow: none;
+            transition: none;
 
             .slider-container {
                 .pagebuilder-system-border-hover;
@@ -348,7 +351,7 @@
                 width: 14px;
 
                 &:hover {
-                    border: 1px solid #b3b3b3;
+                    border: 1px solid @b3;
                 }
 
                 &:active,
@@ -361,7 +364,7 @@
 
             &.slick-active {
                 button {
-                    background: #1c1918;
+                    background: @color-pagebuilder-darkest-gray;
                     border: none;
                 }
             }