From 5486828ccf1e824df9ad82c8245aa082294c9b3d Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 3 Aug 2021 13:05:51 +0200
Subject: [PATCH 1/2] Polish the focus style for the segmented control.

---
 packages/components/src/segmented-control/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/segmented-control/styles.ts b/packages/components/src/segmented-control/styles.ts
index e02a8d33dd4147..300b983029467e 100644
--- a/packages/components/src/segmented-control/styles.ts
+++ b/packages/components/src/segmented-control/styles.ts
@@ -27,7 +27,7 @@ export const SegmentedControl = css`
 
 	&:focus-within {
 		border-color: ${ COLORS.ui.borderFocus };
-		box-shadow: ${ CONFIG.controlBoxShadowFocus };
+		box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b );
 		outline: none;
 		z-index: 1;
 	}

From 1c4570d0442ffee5b9ec760286be8b8417ad5f07 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 3 Aug 2021 15:37:19 +0300
Subject: [PATCH 2/2] fix `controlBoxShadowFocus` value

---
 .../components/src/base-field/test/__snapshots__/index.js.snap  | 2 +-
 packages/components/src/segmented-control/styles.ts             | 2 +-
 .../src/segmented-control/test/__snapshots__/index.js.snap      | 2 +-
 packages/components/src/utils/config-values.js                  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/base-field/test/__snapshots__/index.js.snap b/packages/components/src/base-field/test/__snapshots__/index.js.snap
index a5644180ad8970..99ee459d1a2e2e 100644
--- a/packages/components/src/base-field/test/__snapshots__/index.js.snap
+++ b/packages/components/src/base-field/test/__snapshots__/index.js.snap
@@ -130,7 +130,7 @@ exports[`base field should render correctly 1`] = `
 .emotion-0:focus,
 .emotion-0[data-focused='true'] {
   border-color: var( --wp-admin-theme-color, #00669b);
-  box-shadow: 0 0 0,0.5px,var( --wp-admin-theme-color, #00669b);
+  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
 }
 
 <div
diff --git a/packages/components/src/segmented-control/styles.ts b/packages/components/src/segmented-control/styles.ts
index 300b983029467e..e02a8d33dd4147 100644
--- a/packages/components/src/segmented-control/styles.ts
+++ b/packages/components/src/segmented-control/styles.ts
@@ -27,7 +27,7 @@ export const SegmentedControl = css`
 
 	&:focus-within {
 		border-color: ${ COLORS.ui.borderFocus };
-		box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b );
+		box-shadow: ${ CONFIG.controlBoxShadowFocus };
 		outline: none;
 		z-index: 1;
 	}
diff --git a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
index 589da552388e3f..0e255fb885d0a0 100644
--- a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
@@ -30,7 +30,7 @@ exports[`SegmentedControl should render correctly 1`] = `
 
 .emotion-0:focus-within {
   border-color: var( --wp-admin-theme-color-darker-10, #007cba);
-  box-shadow: 0 0 0,0.5px,var( --wp-admin-theme-color, #00669b);
+  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
   outline: none;
   z-index: 1;
 }
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index b32c0101c933fb..c5a0758eadf003 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -18,7 +18,7 @@ const CONTROL_PROPS = {
 	controlBorderColor: COLORS.gray[ 700 ],
 	controlBoxShadow: 'transparent',
 	controlBorderColorHover: COLORS.gray[ 700 ],
-	controlBoxShadowFocus: `0 0 0, 0.5px, ${ COLORS.admin.theme }`,
+	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.admin.theme }`,
 	controlDestructiveBorderColor: COLORS.alert.red,
 	controlHeight: CONTROL_HEIGHT,
 	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,