Commit 29b667bcfb for woocommerce

commit 29b667bcfbea4611d915ec26430b5b5cc13a45c0
Author: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date:   Fri Apr 18 09:06:23 2025 +0200

    Product Gallery: make thumbnails scrolling gradient color-agnostic (#57367)

    * Use mask-image for gradient

    * Simplify gradients

    * Change the order of styles

    * Remove empty line

    * Add changelog

    * Remove unused mixin

    * Fix lint

    * Adjust gradient variables

diff --git a/plugins/woocommerce/changelog/wooplug-3796-product-gallery-make-thumbnails-scrolling-gradient-color b/plugins/woocommerce/changelog/wooplug-3796-product-gallery-make-thumbnails-scrolling-gradient-color
new file mode 100644
index 0000000000..f9f817d777
--- /dev/null
+++ b/plugins/woocommerce/changelog/wooplug-3796-product-gallery-make-thumbnails-scrolling-gradient-color
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Product Gallery: Make Thumbnails gradient color-agnostic
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
index d304cc9566..981da738a4 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
@@ -117,10 +117,6 @@ $dialog-padding: 20px;
 	}
 }

-@mixin gradient($direction) {
-	background: linear-gradient(to $direction, var(--wp--preset--color--base) 25%, transparent);
-}
-
 @mixin horizontal-thumbnails {
 	.wc-block-product-gallery-thumbnails__thumbnail {
 		height: 100%;
@@ -161,50 +157,36 @@ $dialog-padding: 20px;
 		object-fit: contain;
 	}

-	&::before,
-	&::after {
-		content: "";
-		position: absolute;
-		opacity: 0;
-		transition: opacity 0.2s linear;
-		pointer-events: none;
-	}
-
 	&.wc-block-product-gallery-thumbnails--overflow {
-		&-top::before,
-		&-bottom::after {
-			left: 0;
-			height: $thumbnails-gradient-size;
-			width: 100%;
-			opacity: 1;
+		$gradient-size: 14%;
+		$gradient-mid-step-size: 6%;
+		$gradient-mid-step: rgba(0, 0, 0, 0.3);
+
+		$gradient: transparent 0,  $gradient-mid-step $gradient-mid-step-size, rgb(0, 0, 0) $gradient-size;
+		$gradient-end: rgb(0, 0, 0) calc(100% - $gradient-size), $gradient-mid-step calc(100% - $gradient-mid-step-size), transparent;
+
+		&-top {
+			mask-image: linear-gradient(to bottom, $gradient);
 		}

-		&-top::before {
-			top: 0;
-			@include gradient(bottom);
+		&-bottom {
+			mask-image: linear-gradient(to top, $gradient);
 		}

-		&-bottom::after {
-			bottom: 0;
-			@include gradient(top);
+		&-top.wc-block-product-gallery-thumbnails--overflow-bottom {
+			mask-image: linear-gradient(to bottom, $gradient, $gradient-end);
 		}

-		&-right::after,
-		&-left::before {
-			top: 0;
-			height: 100%;
-			width: $thumbnails-gradient-size;
-			opacity: 1;
+		&-left {
+			mask-image: linear-gradient(to right, $gradient);
 		}

-		&-left::before {
-			left: 0;
-			@include gradient(right);
+		&-right {
+			mask-image: linear-gradient(to left, $gradient);
 		}

-		&-right::after {
-			right: 0;
-			@include gradient(left);
+		&-left.wc-block-product-gallery-thumbnails--overflow-right {
+			mask-image: linear-gradient(to right, $gradient, $gradient-end);
 		}
 	}
 }