CSS cleanup from /assets/css/ (#7751)

* Remove unused SCSS variables

* Unify mixins style

* Remove legacy editor styles

* Move SearchListControl styles into its component

* Remove unused styles

assets/css/abstracts/_colors.scss

@@ -2,15 +2,10 @@
 @import "node_modules/@automattic/color-studio/dist/color-variables";
 
 // Bright colors
-$no-stock-color: $alert-red;
-$low-stock-color: $alert-yellow;
-$in-stock-color: $alert-green;
 $discount-color: $alert-green;
 
-$placeholder-color: var(--global--color-primary, $gray-200);
 $input-border-gray: #50575e;
 $input-border-dark: rgba(255, 255, 255, 0.4);
-$input-disabled-dark: rgba(255, 255, 255, 0.3);
 $controls-border-dark: rgba(255, 255, 255, 0.6);
 $input-text-active: #2b2d2f;
 $input-placeholder-dark: rgba(255, 255, 255, 0.6);

assets/css/abstracts/_mixins.scss

@@ -192,7 +192,7 @@ $fontSizes: (
 }
 
 // Add support for content alignment classes
-@mixin with-alignment {
+@mixin with-alignment() {
 	// Apply max-width to floated items that have no intrinsic width
 	&.alignleft,
 	&.alignright {

assets/css/abstracts/_variables.scss

@@ -7,6 +7,3 @@ $gap: $grid-unit-20;
 $gap-small: $grid-unit-15;
 $gap-smaller: $grid-unit-10;
 $gap-smallest: $grid-unit-05;
-
-// Cart block
-$cart-image-width: 5rem;

assets/css/editor.scss

@@ -1,15 +1,3 @@
-// Hack to hide preview overflow.
-.editor-block-preview__content {
-	overflow: hidden;
-}
-
-// Align the block icons in edit mode
-.components-placeholder__label .gridicon,
-.components-placeholder__label .material-icon {
-	margin-right: 1ch;
-	fill: currentColor;
-}
-
 // Remove the list styling, which is added back by core GB styles.
 .editor-styles-wrapper {
 	.wc-block-grid {
@@ -61,19 +49,6 @@ svg.wc-block-editor-components-block-icon--sparkles path {
 	}
 }
 
-// Selectors with extra specificity to override some editor styles.
-.woocommerce-search-list__list.woocommerce-search-list__list {
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-}
-
-.woocommerce-search-list__selected.woocommerce-search-list__selected > ul {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-
 .theme-twentytwenty {
 	.wp-block {
 		.wc-block-grid__product-title,

assets/css/style.scss

@@ -1,12 +1,3 @@
-.wc-block-link-button {
-	@include link-button();
-}
-
-.wc-block-suspense-placeholder {
-	@include placeholder();
-	@include force-content();
-}
-
 // These styles are for the server side rendered product grid blocks.
 .wc-block-grid__products .wc-block-grid__product-image {
 	text-decoration: none;

assets/js/editor-components/search-list-control/style.scss

@@ -25,6 +25,8 @@
 
 	ul {
 		list-style: none;
+		margin: 0;
+		padding: 0;
 
 		li {
 			float: left;
@@ -44,6 +46,7 @@
 
 .woocommerce-search-list__list {
 	border: 1px solid $gray-200;
+	margin: 0;
 	padding: 0;
 	max-height: 17em;
 	overflow-x: hidden;