From ca952f739b228bf7d0e81a1805501e3f9249bae0 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Thu, 5 Aug 2021 14:01:48 -0700
Subject: [PATCH] Fix disabled styles

---
 packages/components/src/range-control/index.js      |  3 ++-
 .../range-control/styles/range-control-styles.js    | 13 +++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/range-control/index.js b/packages/components/src/range-control/index.js
index e021c3c3d068cb..27e0a94745070b 100644
--- a/packages/components/src/range-control/index.js
+++ b/packages/components/src/range-control/index.js
@@ -249,10 +249,11 @@ function RangeControl(
 						style={ { width: fillValueOffset } }
 						trackColor={ trackColor }
 					/>
-					<ThumbWrapper style={ offsetStyle }>
+					<ThumbWrapper style={ offsetStyle } disabled={ disabled }>
 						<Thumb
 							aria-hidden={ true }
 							isFocused={ isThumbFocused }
+							disabled={ disabled }
 						/>
 					</ThumbWrapper>
 					{ enableTooltip && (
diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js
index 4ee65f7144e2cb..0cbda7e4249690 100644
--- a/packages/components/src/range-control/styles/range-control-styles.js
+++ b/packages/components/src/range-control/styles/range-control-styles.js
@@ -163,6 +163,15 @@ export const MarkLabel = styled.span`
 	${ markLabelFill };
 `;
 
+const thumbColor = ( { disabled } ) =>
+	disabled
+		? css`
+				background-color: ${ COLORS.lightGray[ 800 ] };
+		  `
+		: css`
+				background-color: var( --wp-admin-theme-color );
+		  `;
+
 export const ThumbWrapper = styled.span`
 	align-items: center;
 	box-sizing: border-box;
@@ -176,9 +185,9 @@ export const ThumbWrapper = styled.span`
 	top: 0;
 	user-select: none;
 	width: ${ thumbSize }px;
-	background-color: var( --wp-admin-theme-color );
 	border-radius: 50%;
 
+	${ thumbColor };
 	${ rtl( { marginLeft: -10 } ) };
 `;
 
@@ -202,7 +211,6 @@ const thumbFocus = ( { isFocused } ) => {
 
 export const Thumb = styled.span`
 	align-items: center;
-	background-color: var( --wp-admin-theme-color );
 	border-radius: 50%;
 	box-sizing: border-box;
 	height: 100%;
@@ -211,6 +219,7 @@ export const Thumb = styled.span`
 	user-select: none;
 	width: 100%;
 
+	${ thumbColor };
 	${ thumbFocus };
 `;