Remove color prop and shadow. Improve focus interaction

Also add comments for hooks and functions

packages/components/src/range-control/README.md

@@ -152,14 +152,6 @@ If this property is true, a button to reset the the slider is rendered.
 - Required: No
 - Platform: Web | Mobile
 
-#### color
-
-Color to render the filled range UI.
-
-- Type: `String`
-- Required: No
-- Platform: Web
-
 #### disabled
 
 Disables the `input`, preventing new values from being applied.

packages/components/src/range-control/index.js

@@ -79,6 +79,7 @@ const BaseRangeControlNext = forwardRef(
 		const sliderValue = initialPosition || valueProp;
 		const [ value, setValue ] = useControlledRangeValue( { min, max, value: sliderValue } );
 		const [ showTooltip, setShowTooltip ] = useState( showTooltipProp );
+		const [ isFocused, setIsFocused ] = useState( false );
 		const originalValueRef = useRef( value );
 
 		const inputRef = useRef();
@@ -91,7 +92,7 @@ const BaseRangeControlNext = forwardRef(
 			}
 		};
 
-		const isFocused = ! disabled && showTooltip;
+		const isThumbFocused = ! disabled && isFocused;
 		const fillValue = ( ( value - min ) / ( max - min ) ) * 100;
 		const fillValueOffset = `${ clamp( fillValue, 0, 100 ) }%`;
 
@@ -130,11 +131,13 @@ const BaseRangeControlNext = forwardRef(
 
 		const handleOnBlur = ( event ) => {
 			onBlur( event );
+			setIsFocused( false );
 			handleHideTooltip();
 		};
 
 		const handleOnFocus = ( event ) => {
 			onFocus( event );
+			setIsFocused( true );
 			handleShowTooltip();
 		};
 
@@ -197,7 +200,7 @@ const BaseRangeControlNext = forwardRef(
 							style={ { width: fillValueOffset } }
 						/>
 						<ThumbWrapper style={ offsetStyle }>
-							<Thumb aria-hidden={ true } isFocused={ isFocused } />
+							<Thumb aria-hidden={ true } isFocused={ isThumbFocused } />
 						</ThumbWrapper>
 						{ enableTooltip && (
 							<SimpleTooltip
@@ -250,12 +253,18 @@ const BaseRangeControlNext = forwardRef(
 	}
 );
 
+/**
+ * A Higher-Order function that creates a clamp function for a specific value.
+ */
 function createClampValue( { min = 0, max = 10 } ) {
 	return ( value ) => {
 		return parseFloat( clamp( value, min, max ) );
 	};
 }
 
+/**
+ * Hook to store a clamped value, derived from props.
+ */
 function useControlledRangeValue( { min, max, value: valueProp = 0 } ) {
 	const clampValue = createClampValue( { min, max } );
 
@@ -279,6 +288,10 @@ function useControlledRangeValue( { min, max, value: valueProp = 0 } ) {
 	return [ value, setValue ];
 }
 
+/**
+ * Hook to encapsulate the debouncing "hover" to better handle the showing
+ * and hiding of the Tooltip.
+ */
 function useDebouncedHoverInteraction( {
 	onShow = noop,
 	onHide = noop,

packages/components/src/range-control/styles/range-control-styles.js

@@ -29,19 +29,18 @@ export const Root = styled.span`
 	${ rootWidth };
 `;
 
-const wrapperColor = ( { color: colorProp } ) => css( { color: colorProp } );
 const wrapperMargin = ( { marks } ) => css( { marginBottom: marks ? 16 : null } );
 
 export const Wrapper = styled.span`
 	box-sizing: border-box;
+	color: ${ color( 'blue.medium.focus' ) };
 	display: block;
 	padding-top: 15px;
 	position: relative;
 	margin-left: 10px;
 	width: 100%;
 
 	${ rangeHeight };
-	${ wrapperColor };
 	${ wrapperMargin };
 
 	[dir=rtl] & {
@@ -167,14 +166,12 @@ const handleReducedMotion = () => {
 
 const thumbFocus = ( { isFocused } ) => {
 	return css( {
-		borderColor: isFocused ? color( 'darkGray.400' ) : color( 'darkGray.200' ),
+		borderColor: isFocused ? color( 'blue.medium.focus' ) : color( 'darkGray.200' ),
 		boxShadow: isFocused ?
 			`
-				0 1px 2px rgba(0, 0, 0, 0.1),
-				0 4px 8px rgba(0, 0, 0, 0.2)
+				0 0 0 1px ${ color( 'blue.medium.focus' ) }
 			` :
 			`
-				0 0 0 rgba(0, 0, 0, 0),
 				0 0 0 rgba(0, 0, 0, 0)
 			`,
 	} );
@@ -190,12 +187,10 @@ export const Thumb = styled.span`
 	outline: 0;
 	pointer-events: none;
 	position: absolute;
-	transition: box-shadow 60ms linear;
 	user-select: none;
 	width: 100%;
 
 	${ thumbFocus };
-	${ handleReducedMotion };
 `;
 
 export const InputRange = styled.input`