From 1c8118c8cf9f8d35a010f299a6c81d5c073207c8 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 18 Jun 2020 13:30:32 +0200
Subject: [PATCH 1/2] Fix color picker saturation bug

---
 .../components/src/color-picker/style.scss    | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/color-picker/style.scss b/packages/components/src/color-picker/style.scss
index cecfed966e6d8..96c02fd943f0f 100644
--- a/packages/components/src/color-picker/style.scss
+++ b/packages/components/src/color-picker/style.scss
@@ -27,7 +27,7 @@
 
 .components-color-picker {
 	width: 100%;
-	overflow: hidden;
+	overflow: visible;
 
 	* {
 		box-sizing: border-box;
@@ -104,7 +104,7 @@
 }
 
 .components-color-picker__saturation-color {
-	overflow: hidden;
+	overflow: visible;
 }
 
 .components-color-picker__saturation-white {
@@ -116,17 +116,26 @@
 	background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
 }
 
-.components-color-picker__saturation-pointer {
+// Needs specificity.
+.components-button.components-color-picker__saturation-pointer {
 	width: 14px;
 	height: 14px;
 	padding: 0;
-	box-shadow:
-		0 0 0 1.5px #fff,
-		inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
-		0 0 1px 2px rgba(0, 0, 0, 0.4);
 	border-radius: 50%;
 	background-color: transparent;
-	transform: translate(-4px, -4px);
+	transform: translate(-50%, -50%);
+
+	box-shadow:
+		0 0 0 1px $white,
+		inset 0 0 0 1px $black,
+		0 0 0 2px $black;
+
+	&:focus:not(:disabled) {
+		box-shadow:
+			0 0 0 2px $white,
+			inset 0 0 0 1px $black,
+			0 0 0 3px $black;
+	}
 }
 
 /* HUE & ALPHA BARS */

From e58d519fee561bd1b848249de588d25d7a05c049 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 18 Jun 2020 18:59:07 +0200
Subject: [PATCH 2/2] Address feedback.

---
 packages/components/src/color-picker/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/color-picker/style.scss b/packages/components/src/color-picker/style.scss
index 96c02fd943f0f..3d59e9a324b87 100644
--- a/packages/components/src/color-picker/style.scss
+++ b/packages/components/src/color-picker/style.scss
@@ -27,7 +27,6 @@
 
 .components-color-picker {
 	width: 100%;
-	overflow: visible;
 
 	* {
 		box-sizing: border-box;