From a211c1fe15710521c8f5b009dea5899233708ea6 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Wed, 24 Nov 2021 23:00:06 +0000
Subject: [PATCH] Add: Transparency support on global styles colors.

---
 .../block-editor/src/components/colors-gradients/control.js     | 2 ++
 .../colors-gradients/panel-color-gradient-settings.js           | 2 ++
 .../src/components/global-styles/screen-background-color.js     | 1 +
 .../edit-site/src/components/global-styles/screen-link-color.js | 1 +
 .../edit-site/src/components/global-styles/screen-text-color.js | 1 +
 5 files changed, 7 insertions(+)

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 4100ac50bcf791..9cb4342fb3a2f1 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -44,6 +44,7 @@ function ColorGradientControlInner( {
 	gradientValue,
 	clearable,
 	showTitle = true,
+	enableAlpha,
 } ) {
 	const canChooseAColor =
 		onColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );
@@ -109,6 +110,7 @@ function ColorGradientControlInner( {
 								__experimentalHasMultipleOrigins
 							}
 							clearable={ clearable }
+							enableAlpha={ enableAlpha }
 						/>
 					) }
 					{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index 158071197c95ce..95bed8d3370df4 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -92,6 +92,7 @@ export const PanelColorGradientSettingsInner = ( {
 	title,
 	showTitle = true,
 	__experimentalHasMultipleOrigins,
+	enableAlpha,
 	...props
 } ) => {
 	if (
@@ -143,6 +144,7 @@ export const PanelColorGradientSettingsInner = ( {
 						disableCustomColors,
 						disableCustomGradients,
 						__experimentalHasMultipleOrigins,
+						enableAlpha,
 						...setting,
 					} }
 				/>
diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
index 6a73185da25cdd..21c551c49155f0 100644
--- a/packages/edit-site/src/components/global-styles/screen-background-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-background-color.js
@@ -104,6 +104,7 @@ function ScreenBackgroundColor( { name } ) {
 				disableCustomGradients={ ! areCustomGradientsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
+				enableAlpha
 			/>
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js
index 6e15dd9e3054bb..e69b92eb056750 100644
--- a/packages/edit-site/src/components/global-styles/screen-link-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-link-color.js
@@ -70,6 +70,7 @@ function ScreenLinkColor( { name } ) {
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
+				enableAlpha
 			/>
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js
index 6ecf4ecd5910f1..4b309ed09a2e6f 100644
--- a/packages/edit-site/src/components/global-styles/screen-text-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-text-color.js
@@ -62,6 +62,7 @@ function ScreenTextColor( { name } ) {
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
+				enableAlpha
 			/>
 		</>
 	);