Update range control metrics (#35540)

* Update slider metrics. * Polish slider style.
WordPress · Oct 12, 2021 · 8115587 · 8115587
1 parent de0e018
commit 8115587
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js
@@ -16,7 +16,7 @@ const rangeHeightValue = 30;
 const railHeight = 4;
 const rangeHeight = () =>
 	css( { height: rangeHeightValue, minHeight: rangeHeightValue } );
-const thumbSize = 9;
+const thumbSize = 12;
 
 export const Root = styled.div`
 	-webkit-tap-highlight-color: transparent;
@@ -201,13 +201,13 @@ const thumbFocus = ( { isFocused } ) => {
 				&::before {
 					content: ' ';
 					position: absolute;
-					background-color: transparent;
-					box-shadow: 0 0 0 1.5px var( --wp-admin-theme-color );
+					background-color: var( --wp-admin-theme-color );
+					opacity: 0.4;
 					border-radius: 50%;
-					height: ${ thumbSize + 4 }px;
-					width: ${ thumbSize + 4 }px;
-					top: -2px;
-					left: -2px;
+					height: ${ thumbSize + 8 }px;
+					width: ${ thumbSize + 8 }px;
+					top: -4px;
+					left: -4px;
 				}
 		  `
 		: '';