Make CircularOptionPicker focus styles resilient to button size cha…

…nges (#54196)

* Make `CircularOptionPicker` focus styles resilient

Currently the focus ring around `CircularOptionPicker` options is hard-coded to a specific size. This means that any variation in option size isn't accounted for.
This patch updates how the focus ring is styled to make it adapable for differing control sizes.

* Updating CHANGELOG.md

* Updating CHANGELOG.md

* Updating CHANGELOG.md

packages/components/CHANGELOG.md

@@ -15,6 +15,8 @@
 ### Bug Fix
 
 -   `PaletteEdit`: Fix padding in RTL languages ([#54034](https://github.com/WordPress/gutenberg/pull/54034)).
+-   `CircularOptionPicker`: make focus styles resilient to button size changes ([#54196](https://github.com/WordPress/gutenberg/pull/54196)).
+
 
 ### Internal
 

packages/components/src/circular-option-picker/style.scss

@@ -116,14 +116,19 @@ $color-palette-circle-spacing: 12px;
 	&:focus {
 		&::after {
 			content: "";
-			border: #{ $border-width * 2 } solid $gray-700;
-			width: 32px;
-			height: 32px;
-			position: absolute;
-			top: -2px;
-			left: -2px;
 			border-radius: $radius-round;
 			box-shadow: inset 0 0 0 2px $white;
+
+			// Make sure it's always centered
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+
+			// Make sure dimensions account for border width
+			border: #{ $border-width * 2 } solid $gray-700;
+			width: calc(100% + #{ ( $border-width * 2 ) * 2 });
+			height: calc(100% + #{ ( $border-width * 2 ) * 2 });
 		}
 	}
 
@@ -139,7 +144,6 @@ $color-palette-circle-spacing: 12px;
 	background: $white;
 }
 
-
 .components-circular-option-picker__dropdown-link-action {
 	margin-right: $grid-unit-20;