WordPress · tyxla · Aug 15, 2023 · Aug 14, 2023 · Aug 14, 2023 · Aug 15, 2023
@@ -12,6 +12,7 @@
 -   `NumberControl`: Add `spinFactor` prop for adjusting the amount by which the spin controls change the value ([#52902](https://github.com/WordPress/gutenberg/pull/52902)).
 -   `Modal:`: Nuance outside interactions ([#52994](https://github.com/WordPress/gutenberg/pull/52994)).
 -   `Button`: Remove default border from the destructive button ([#53607](https://github.com/WordPress/gutenberg/pull/53607)).
+-   Components: Move accent colors to theme context ([#53631](https://github.com/WordPress/gutenberg/pull/53631)).
 
 ### Bug Fix
 

@@ -54,7 +54,7 @@ const pointActive = ( {
 }: Pick< AlignmentMatrixControlCellProps, 'isActive' > ) => {
 	const boxShadow = isActive ? `0 0 0 2px ${ COLORS.gray[ 900 ] }` : null;
 	const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.gray[ 400 ];
-	const pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.ui.theme;
+	const pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.theme.accent;
 
 	return css`
 		box-shadow: ${ boxShadow };

@@ -58,7 +58,7 @@ export const CircleIndicatorWrapper = styled.div`
 `;
 
 export const CircleIndicator = styled.div`
-	background: ${ COLORS.ui.theme };
+	background: ${ COLORS.theme.accent };
 	border-radius: 50%;
 	box-sizing: border-box;
 	display: block;
@@ -71,6 +71,6 @@ export const CircleIndicator = styled.div`
 `;
 
 export const UnitText = styled( Text )`
-	color: ${ COLORS.ui.theme };
+	color: ${ COLORS.theme.accent };
 	margin-right: ${ space( 3 ) };
 `;
@@ -35,7 +35,7 @@ export const Container = styled.div`
 
 export const Side = styled.div`
 	box-sizing: border-box;
-	background: ${ COLORS.ui.theme };
+	background: ${ COLORS.theme.accent };
 	filter: brightness( 1 );
 	opacity: 0;
 	position: absolute;

@@ -49,7 +49,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 				<Spacer
 					as={ Text }
 					marginLeft={ space( 4 ) }
-					color={ COLORS.ui.theme }
+					color={ COLORS.theme.accent }
 					lineHeight={ 1 }
 				>
 					#

@@ -42,7 +42,7 @@ export const InputWithSlider = ( {
 					<Spacer
 						as={ Text }
 						paddingLeft={ space( 4 ) }
-						color={ COLORS.ui.theme }
+						color={ COLORS.theme.accent }
 						lineHeight={ 1 }
 					>
 						{ abbreviation }

@@ -90,7 +90,7 @@ export const DayButton = styled( Button, {
 		${ ( props ) =>
 			props.isSelected &&
 			`
-			background: ${ COLORS.ui.theme };
+			background: ${ COLORS.theme.accent };
 			color: ${ COLORS.white };
 			` }
 
@@ -106,7 +106,7 @@ export const DayButton = styled( Button, {
 		props.hasEvents &&
 		`
 		::before {
-			background: ${ props.isSelected ? COLORS.white : COLORS.ui.theme };
+			background: ${ props.isSelected ? COLORS.white : COLORS.theme.accent };
 			border-radius: 2px;
 			bottom: 0;
 			content: " ";

@@ -25,7 +25,7 @@ export const unstyledButton = ( as: 'a' | 'button' ) => {
 		}
 
 		&:hover {
-			color: ${ COLORS.ui.theme };
+			color: ${ COLORS.theme.accent };
 		}
 
 		&:focus {
@@ -37,7 +37,7 @@ export const unstyledButton = ( as: 'a' | 'button' ) => {
 			box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
 				var(
 					--wp-components-color-accent,
-					var( --wp-admin-theme-color, ${ COLORS.ui.theme } )
+					var( --wp-admin-theme-color, ${ COLORS.theme.accent } )
 				);
 			// Windows high contrast mode.
 			outline: 2px solid transparent;

@@ -155,7 +155,7 @@ export const ItemBaseUI = styled.li`
 	}
 
 	&.is-active {
-		background-color: ${ COLORS.ui.theme };
+		background-color: ${ COLORS.theme.accent };
 		color: ${ COLORS.white };
 
 		> button,

@@ -36,7 +36,7 @@ export const Input = styled( InputControl )`
 
 export const SpinButton = styled( Button )`
 	&&&&& {
-		color: ${ COLORS.ui.theme };
+		color: ${ COLORS.theme.accent };
 	}
 `;
 

@@ -58,7 +58,7 @@ export const PaletteItem = styled( View )`
 		border-top-color: transparent;
 	}
 	&.is-selected {
-		border-color: ${ COLORS.ui.theme };
+		border-color: ${ COLORS.theme.accent };
 	}
 `;
 
@@ -69,7 +69,7 @@ export const NameContainer = styled.div`
 	white-space: nowrap;
 	overflow: hidden;
 	${ PaletteItem }:hover & {
-		color: ${ COLORS.ui.theme };
+		color: ${ COLORS.theme.accent };
 	}
 `;
 
@@ -103,7 +103,7 @@ export const PaletteEditStyles = styled( View )`
 
 export const DoneButton = styled( Button )`
 	&& {
-		color: ${ COLORS.ui.theme };
+		color: ${ COLORS.theme.accent };
 	}
 `;
 

@@ -43,7 +43,10 @@ export const Indicator = styled.div< {
 	top: 0;
 	height: 100%;
 	border-radius: ${ CONFIG.radiusBlockUi };
-	background-color: var( --wp-components-color-accent, ${ COLORS.ui.theme } );
+	background-color: var(
+		--wp-components-color-accent,
+		${ COLORS.theme.accent }
+	);
 
 	${ ( { isIndeterminate, value } ) =>
 		isIndeterminate

@@ -51,7 +51,7 @@ function UnforwardedRangeControl(
 		allowReset = false,
 		beforeIcon,
 		className,
-		color: colorProp = COLORS.ui.theme,
+		color: colorProp = COLORS.theme.accent,
 		currentInput,
 		disabled = false,
 		help,

@@ -184,7 +184,7 @@ const thumbColor = ( { disabled }: ThumbProps ) =>
 				background-color: ${ COLORS.gray[ 400 ] };
 		  `
 		: css`
-				background-color: ${ COLORS.ui.theme };
+				background-color: ${ COLORS.theme.accent };
 		  `;
 
 export const ThumbWrapper = styled.span`
@@ -215,7 +215,7 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 				&::before {
 					content: ' ';
 					position: absolute;
-					background-color: ${ COLORS.ui.theme };
+					background-color: ${ COLORS.theme.accent };
 					opacity: 0.4;
 					border-radius: 50%;
 					height: ${ thumbSize + 8 }px;

@@ -105,7 +105,7 @@ export type RangeControlProps = Pick<
 		/**
 		 * CSS color string for the `RangeControl` wrapper.
 		 *
-		 * @default COLORS.ui.theme
+		 * @default COLORS.theme.accent
 		 * @see /packages/components/src/utils/colors-values.js
 		 */
 		color?: CSSProperties[ 'color' ];

@@ -24,7 +24,7 @@ export const StyledSpinner = styled.svg`
 	display: inline-block;
 	margin: 5px 11px 0;
 	position: relative;
-	color: ${ COLORS.ui.theme };
+	color: ${ COLORS.theme.accent };
 	overflow: visible;
 	opacity: 1;
 	background-color: transparent;

@@ -83,7 +83,7 @@ const deselectable = css`
 
 	&:focus {
 		box-shadow: inset 0 0 0 1px ${ COLORS.white },
-			0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.ui.theme };
+			0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.theme.accent };
 		outline: 2px solid transparent;
 	}
 `;

@@ -148,7 +148,7 @@ export const DropdownMenu = css`
 `;
 
 export const ResetLabel = styled.span`
-	color: ${ COLORS.ui.themeDark10 };
+	color: ${ COLORS.theme.accentDarker10 };
 	font-size: 11px;
 	font-weight: 500;
 	line-height: 1.4;

@@ -54,7 +54,7 @@ const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
 			height: 24px;
 			margin-inline-end: ${ space( 2 ) };
 			padding: ${ space( 1 ) };
-			color: ${ COLORS.ui.theme };
+			color: ${ COLORS.theme.accent };
 			font-size: 13px;
 			line-height: 1;
 			text-align-last: center;

@@ -37,8 +37,6 @@ const ADMIN = {
 };
 
 const UI = {
-	theme: ADMIN.theme,
-	themeDark10: ADMIN.themeDark10,
 	background: white,
 	backgroundDisabled: GRAY[ 100 ],
 	border: GRAY[ 600 ],
@@ -53,13 +51,19 @@ const UI = {
 	lightGrayPlaceholder: rgba( white, 0.65 ),
 };
 
+const THEME = {
+	accent: ADMIN.theme,
+	accentDarker10: ADMIN.themeDark10,
+};
+
 export const COLORS = Object.freeze( {
 	/**
 	 * The main gray color object.
 	 */
 	gray: GRAY,
 	white,
 	alert: ALERT,
+	theme: THEME,
 	ui: UI,
 } );
 

@@ -9,14 +9,14 @@ const CONTROL_PADDING_X = '12px';
 
 const CONTROL_PROPS = {
 	controlSurfaceColor: COLORS.white,
-	controlTextActiveColor: COLORS.ui.theme,
+	controlTextActiveColor: COLORS.theme.accent,
 	controlPaddingX: CONTROL_PADDING_X,
 	controlPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,
 	controlPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,
 	controlBackgroundColor: COLORS.white,
 	controlBorderRadius: '2px',
 	controlBoxShadow: 'transparent',
-	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.ui.theme }`,
+	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,
 	controlDestructiveBorderColor: COLORS.alert.red,
 	controlHeight: CONTROL_HEIGHT,
 	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,

@@ -19,10 +19,10 @@ export const inputStyleNeutral = css`
 `;
 
 export const inputStyleFocus = css`
-	border-color: ${ COLORS.ui.theme };
+	border-color: ${ COLORS.theme.accent };
 	box-shadow: 0 0 0
 		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
-		${ COLORS.ui.theme };
+		${ COLORS.theme.accent };
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,7 @@ export const Input = styled( InputControl )` @@
     export const SpinButton = styled( Button )`
     	&&&&& {
-    		color: ${ COLORS.ui.theme };
+    		color: ${ COLORS.theme.accent };
     	}
     `;
@@ Expand Down @@