From f6847422587c55403524175e4a6e125ee6364815 Mon Sep 17 00:00:00 2001
From: Hassan Ait Nacer <108420918+hassanaitnacer@users.noreply.github.com>
Date: Sun, 10 Aug 2025 18:26:20 +0100
Subject: [PATCH] Fix alpha transparent background for other colors

---
 components/Scale.tsx | 49 +++++++++++++++++++-------------------------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/components/Scale.tsx b/components/Scale.tsx
index 965787dd..a9f8e526 100644
--- a/components/Scale.tsx
+++ b/components/Scale.tsx
@@ -129,7 +129,6 @@ export const ColorScale = ({
 	const isAlpha = name.endsWith("A");
 	const isDarkAlpha = name.endsWith("DarkA");
 	const isWhiteA = name.endsWith("whiteA");
-	const isBlackA = name.endsWith("blackA");
 
 	return (
 		<Flex
@@ -152,33 +151,27 @@ export const ColorScale = ({
 							width="48px"
 							flexShrink="1"
 							style={{
-								backgroundColor: isDarkAlpha
-									? Colors["grayDark"]["gray1"]
-									: isAlpha
-										? "white"
-										: "transparent",
-
-								// Show transparency grid for whiteA and blackA
-								...(isBlackA && {
-									backgroundColor: "white",
-									backgroundSize: "16px 16px",
-									backgroundPosition: "0px 0px, 8px 0px, 8px -8px, 0px 8px",
-									backgroundImage: `
-											linear-gradient(45deg, #f8f8f8 25%, transparent 25%),
-											linear-gradient(135deg, #f8f8f8 25%, transparent 25%),
-											linear-gradient(45deg, transparent 75%, #f8f8f8 75%),
-											linear-gradient(135deg, transparent 75%, #f8f8f8 75%)`,
-								}),
-								...(isWhiteA && {
-									backgroundColor: "#181818",
-									backgroundSize: "16px 16px",
-									backgroundPosition: "0px 0px, 8px 0px, 8px -8px, 0px 8px",
-									backgroundImage: `
-											linear-gradient(45deg, #222222 25%, transparent 25%),
-											linear-gradient(135deg, #222222 25%, transparent 25%),
-											linear-gradient(45deg, transparent 75%, #222222 75%),
-											linear-gradient(135deg, transparent 75%, #222222 75%)`,
-								}),
+								// Show transparency grid for all alpha colors
+								...(isAlpha
+									? {
+											backgroundColor:
+												isWhiteA || isDarkAlpha ? "#181818" : "#ffffff",
+											backgroundSize: "16px 16px",
+											backgroundPosition: "0 0, 8px 0, 8px -8px, 0 8px",
+											backgroundImage:
+												isWhiteA || isDarkAlpha
+													? `
+              linear-gradient(45deg, #222222 25%, transparent 25%),
+              linear-gradient(135deg, #222222 25%, transparent 25%),
+              linear-gradient(45deg, transparent 75%, #222222 75%),
+              linear-gradient(135deg, transparent 75%, #222222 75%)`
+													: `
+              linear-gradient(45deg, #f8f8f8 25%, transparent 25%),
+              linear-gradient(135deg, #f8f8f8 25%, transparent 25%),
+              linear-gradient(45deg, transparent 75%, #f8f8f8 75%),
+              linear-gradient(135deg, transparent 75%, #f8f8f8 75%)`,
+										}
+									: { backgroundColor: "transparent" }),
 							}}
 						>
 							<Box