Make loading placeholder colors match the current font color (#7658)

* Make loading placeholder colors match the current font color

Currently, the loading placeholder effect has a default gray color. However, since users can modify their themes with the Site Editor and choose a different set of colors for their websites, it would be interesting to make those placeholders match the color palette.

In this commit, the idea was to modify the `placeholder` mixin to replace the transparent font color with the current color and also modify the background-color and the linear-gradient to match the current font color. Furthermore, transparency was added to the middle color of the linear-gradient so we can keep the loading animation close to what it currently is.

* Add opacity to placeholder mixin

Before our changes, when the font color was dark, we had a lighter placeholder background color. After the changes the color is currently darker than before so the idea for this commit is to change the opacity of the placeholder in a way that the current color blends with the background color set for the theme.

* Change placeholder mixin opacity

After testing different combinations of colors, we decided to change the opacity to 0.15 so when the font color is darker the placeholder will have a lighter background color.

* bot: update checkstyle.xml

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: thealexandrelara

assets/css/abstracts/_mixins.scss

@@ -32,8 +32,8 @@ $fontSizes: (
 @mixin placeholder($include-border-radius: true) {
 	outline: 0 !important;
 	border: 0 !important;
-	background-color: #ebebeb !important;
-	color: transparent !important;
+	background-color: currentColor !important;
+	color: currentColor !important;
 	width: 100%;
 	@if $include-border-radius == true {
 		border-radius: 0.25rem;
@@ -46,6 +46,7 @@ $fontSizes: (
 	pointer-events: none;
 	box-shadow: none;
 	z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
+	opacity: 0.15;
 
 	// Forces direct descendants to keep layout but lose visibility.
 	> * {
@@ -61,7 +62,7 @@ $fontSizes: (
 		top: 0;
 		height: 100%;
 		background-repeat: no-repeat;
-		background-image: linear-gradient(90deg, #ebebeb, #f5f5f5, #ebebeb);
+		background-image: linear-gradient(90deg, currentColor, #f5f5f54d, currentColor);
 		transform: translateX(-100%);
 		animation: loading__animation 1.5s ease-in-out infinite;
 	}

assets/js/base/components/filter-placeholder/style.scss

@@ -1,17 +1,12 @@
 .wc-block-filter-title-placeholder {
 	@include placeholder();
-	background-color: $gray-400 !important;
 	border-radius: em(26px);
 	box-shadow: none;
 	min-width: 80px;
 	margin-top: $gap-small;
 	margin-bottom: $gap-small;
 	max-width: max-content !important;
 
-	&::after {
-		background-image: linear-gradient(90deg, $gray-400, $gray-200, $gray-400);
-	}
-
 	.wc-block-stock-filter__title,
 	.wc-block-price-filter__title,
 	.wc-block-active-filters__title,

checkstyle.xml

@@ -1419,9 +1419,6 @@
           Type 'Readonly<{}>' is not assignable to type 'Record<string, unknown> & { className: string; }'.
             Property 'className' is missing in type 'Readonly<{}>' but required in type '{ className: string; }'." source="TS2322" />
 </file>
-<file name="assets/js/atomic/blocks/product-elements/stock-indicator/edit.js">
-<error line="15" column="18" severity="error" message="Binding element &apos;attributes&apos; implicitly has an &apos;any&apos; type." source="TS7031" />
-</file>
 <file name="assets/js/atomic/blocks/product-elements/add-to-cart/edit.js">
 <error line="25" column="18" severity="error" message="Binding element &apos;attributes&apos; implicitly has an &apos;any&apos; type." source="TS7031" />
 <error line="25" column="30" severity="error" message="Binding element &apos;setAttributes&apos; implicitly has an &apos;any&apos; type." source="TS7031" />