Rename color value ui.brand to ui.theme. Hardcode color variable fall…

…backs. (#24059)
WordPress · Jul 20, 2020 · ac58042 · ac58042
1 parent 771e557
commit ac58042
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
 };