From 6972637883e91edf16a5ca6572a3697df2fb34a4 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@automattic.com>
Date: Mon, 29 Nov 2021 16:25:53 +0000
Subject: [PATCH] Color Picker: Improve border, padding, and box shadow styles.
 (#36963)

---
 packages/components/src/color-palette/index.js           | 1 +
 packages/components/src/color-palette/style.scss         | 9 +++++++++
 .../src/color-palette/test/__snapshots__/index.js.snap   | 2 ++
 3 files changed, 12 insertions(+)

diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
index b3bc5f933258f..c203991fd4617 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.js
@@ -135,6 +135,7 @@ export default function ColorPalette( {
 		<VStack spacing={ 3 } className={ className }>
 			{ ! disableCustomColors && (
 				<Dropdown
+					contentClassName="components-color-palette__custom-color-dropdown-content"
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<button
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index e245457754132..6002b50cb3a0f 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -16,3 +16,12 @@
 	color: $white;
 	cursor: pointer;
 }
+
+.components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content {
+	overflow: visible;
+	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
+	border: none;
+	& > div {
+		padding: 0;
+	}
+}
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index 2bdb1cc04ae72..270ed6cdcb8a7 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -26,6 +26,7 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
 
 exports[`ColorPalette Dropdown should render it correctly 1`] = `
 <Dropdown
+  contentClassName="components-color-palette__custom-color-dropdown-content"
   key=".0"
   renderContent={[Function]}
   renderToggle={[Function]}
@@ -177,6 +178,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         data-wp-component="VStack"
       >
         <Dropdown
+          contentClassName="components-color-palette__custom-color-dropdown-content"
           key=".0"
           renderContent={[Function]}
           renderToggle={[Function]}