fix (wp 6.6): adjust classes and styles of variation picker for wp 6.6 (

#3234)

* fix: adjust classes and styles of variation picker for wp 6.6

* fix: overwrite background of button, for 6.2 tertiary variant to be consistent

* tweaked some styling

---------

Co-authored-by: bfintal@gmail.com <>

src/components/variation-picker/editor.scss

@@ -1,15 +1,30 @@
 .stk-variation-picker {
+	.block-editor-block-variation-picker__variations {
+		gap: 16px;
+	}
+	.block-editor-block-variation-picker__variations > li {
+		margin: 0;
+	}
+	.stk-stackable-icon-gradient {
+		fill: revert !important;
+	}
+
 	.is-premium {
 		pointer-events: none;
 		~ span {
 			color: #888;
 		}
+		svg {
+			fill: #d8d8d8 !important;
+		}
 	}
-	.block-editor-block-variation-picker__variation svg {
-		width: 48px;
-		height: 48px;
-		* {
-			stroke: currentColor;
+	.block-editor-block-variation-picker__variation {
+		background: #fff !important;
+		height: 42px;
+
+		svg {
+			width: 48px;
+			height: 48px;
 		}
 	}
 }

src/components/variation-picker/index.js

@@ -47,10 +47,9 @@ const VariationPicker = props => {
 					{ variations.map( variation => (
 						<li key={ variation.name }>
 							<Button
-								variant="secondary"
+								variant="tertiary"
 								icon={ variation.pickerIcon || variation.icon }
 								iconSize={ 48 }
-								isSecondary
 								onClick={ () => onSelect( variation ) }
 								className={ classnames( 'block-editor-block-variation-picker__variation', {
 									'is-premium': variation.isPremium,