From 3e86a72d0e2445c7196aed8490330a57c7cd26c5 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 20 Jul 2020 11:00:16 -0400
Subject: [PATCH] Rename color value ui.brand to ui.theme. Hardcode color
 variable fallbacks.

---
 .../styles/box-control-visualizer-styles.js            |  3 ++-
 .../src/focal-point-picker/styles/focal-point-style.js |  3 ++-
 packages/components/src/range-control/index.js         |  2 +-
 packages/components/src/range-control/stories/index.js |  2 +-
 .../src/range-control/styles/range-control-styles.js   |  1 +
 packages/components/src/utils/colors-values.js         | 10 ++++++++--
 6 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/box-control/styles/box-control-visualizer-styles.js b/packages/components/src/box-control/styles/box-control-visualizer-styles.js
index 0b0e2b614fbfe3..f6bea27b758e97 100644
--- a/packages/components/src/box-control/styles/box-control-visualizer-styles.js
+++ b/packages/components/src/box-control/styles/box-control-visualizer-styles.js
@@ -31,7 +31,8 @@ export const Container = styled.div`
 
 export const Side = styled.div`
 	box-sizing: border-box;
-	background: ${ color( 'ui.brand' ) };
+	background: ${ color( 'blue.wordpress.700' ) };
+	background: ${ color( 'ui.theme' ) };
 	filter: brightness( 1 );
 	opacity: 0;
 	position: absolute;
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.js b/packages/components/src/focal-point-picker/styles/focal-point-style.js
index 3ebe8b316e74af..7a6f416cbe4e0b 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-style.js
@@ -45,5 +45,6 @@ export const PointerIconPathOutline = styled( Path )`
 `;
 
 export const PointerIconPathFill = styled( Path )`
-	fill: ${ color( 'ui.brand' ) };
+	fill: ${ color( 'blue.wordpress.700' ) };
+	fill: ${ color( 'ui.theme' ) };
 `;
diff --git a/packages/components/src/range-control/index.js b/packages/components/src/range-control/index.js
index 34c8c16a43f97a..536b0d84ba0a86 100644
--- a/packages/components/src/range-control/index.js
+++ b/packages/components/src/range-control/index.js
@@ -42,7 +42,7 @@ function RangeControl(
 		beforeIcon,
 		className,
 		currentInput,
-		color: colorProp = color( 'ui.brand' ),
+		color: colorProp = color( 'ui.theme' ),
 		disabled = false,
 		help,
 		initialPosition,
diff --git a/packages/components/src/range-control/stories/index.js b/packages/components/src/range-control/stories/index.js
index daba7c7555398d..d3dca6a1ca1a35 100644
--- a/packages/components/src/range-control/stories/index.js
+++ b/packages/components/src/range-control/stories/index.js
@@ -32,7 +32,7 @@ const DefaultExample = () => {
 		afterIcon: text( 'afterIcon', '' ),
 		allowReset: boolean( 'allowReset', false ),
 		beforeIcon: text( 'beforeIcon', '' ),
-		color: text( 'color', color( 'ui.brand' ) ),
+		color: text( 'color', color( 'ui.theme' ) ),
 		disabled: boolean( 'disabled', false ),
 		help: text( 'help', '' ),
 		label: text( 'label', 'Range Label' ),
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 f820c3e2dbf053..0fa3fbbeb233d9 100644
--- a/packages/components/src/range-control/styles/range-control-styles.js
+++ b/packages/components/src/range-control/styles/range-control-styles.js
@@ -33,6 +33,7 @@ const wrapperMargin = ( { marks } ) =>
 
 export const Wrapper = styled.span`
 	box-sizing: border-box;
+	color: ${ color( 'blue.medium.focus' ) };
 	display: block;
 	flex: 1;
 	padding-top: 15px;
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index 503296fbc2429b..863033bb545f3d 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -133,13 +133,18 @@ export const ALERT = {
 	green: '#4ab866',
 };
 
+export const ADMIN = {
+	theme: `var( --wp-admin-theme-color, ${ BLUE.wordpress[ 700 ] })`,
+	themeDark10: `var( --wp-admin-theme-color-darker-10, ${ BLUE.medium.focus })`,
+};
+
 // Namespaced values for raw colors hex codes
 export const UI = {
+	theme: ADMIN.theme,
 	background: BASE.white,
 	backgroundDisabled: LIGHT_GRAY[ 200 ],
-	brand: `var( --wp-admin-theme-color, ${ BLUE.wordpress[ 700 ] })`,
 	border: G2.darkGray.primary,
-	borderFocus: `var( --wp-admin-theme-color-darker-10, ${ BLUE.medium.focus })`,
+	borderFocus: ADMIN.themeDark10,
 	borderDisabled: DARK_GRAY[ 700 ],
 	borderLight: LIGHT_GRAY[ 600 ],
 	label: DARK_GRAY[ 500 ],
@@ -158,6 +163,7 @@ export const COLORS = {
 	lightGrayLight: LIGHT_OPACITY_LIGHT,
 	blue: merge( {}, BLUE, G2.blue ),
 	alert: ALERT,
+	admin: ADMIN,
 	ui: UI,
 };