Global Styles: Add light and dark palette controls

packages/components/src/palette-edit/index.tsx

@@ -40,6 +40,7 @@
 	DoneButton,
 	RemoveButton,
 	PaletteEditContents,
+	PaletteVariation,
 } from './styles';
 import { NavigableMenu } from '../navigable-container';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
@@ -52,6 +53,8 @@
 	OptionProps,
 	PaletteEditListViewProps,
 	PaletteEditProps,
+	PaletteEditColorVariation,
+	PaletteEditGradientVariation,
 	PaletteElement,
 } from './types';
 
@@ -353,6 +356,10 @@
 }
 
 const EMPTY_ARRAY: Color[] = [];
+const EMPTY_VARIATIONS: (
+	| PaletteEditColorVariation
+	| PaletteEditGradientVariation
+)[] = [];
 
 /**
  * Allows editing a palette of colors or gradients.
@@ -379,6 +386,8 @@
 	colors = EMPTY_ARRAY,
 	onChange,
 	paletteLabel,
+	paletteIcon,
+	paletteVariations = EMPTY_VARIATIONS,
 	paletteLabelHeadingLevel = 2,
 	emptyMessage,
 	canOnlyChangeValues,
@@ -388,6 +397,10 @@
 }: PaletteEditProps ) {
 	const isGradient = !! gradients;
 	const elements = isGradient ? gradients : colors;
+	const variations = paletteVariations.map( ( variation ) => ( {
+		...variation,
+		elements: isGradient ? variation.gradients : variation.colors,
+	} ) );
 	const [ isEditing, setIsEditing ] = useState( false );
 	const [ editingElement, setEditingElement ] = useState<
 		number | null | undefined
@@ -399,6 +412,12 @@
 		! elements[ editingElement ].slug;
 	const elementsLength = elements.length;
 	const hasElements = elementsLength > 0;
+	const hasVariations = variations.some(
+		( variation ) => variation.elements.length > 0
+	);
+	const hasAnyElements = hasElements || hasVariations;
+	const canResetAny =
+		canReset || variations.some( ( variation ) => variation.canReset );
 	const debounceOnChange = useDebounce( onChange, 100 );
 	const onSelectPaletteItem = useCallback(
 		(
@@ -426,10 +445,11 @@
 		<PaletteEditStyles>
 			<HStack>
 				<PaletteHeading level={ paletteLabelHeadingLevel }>
+					{ paletteIcon }
 					{ paletteLabel }
 				</PaletteHeading>
 				<PaletteActionsContainer>
-					{ hasElements && isEditing && (
+					{ hasAnyElements && isEditing && (
 						<DoneButton
 							size="small"
 							onClick={ () => {
@@ -483,10 +503,10 @@
 						/>
 					) }
 
-					{ hasElements &&
+					{ hasAnyElements &&
 						( ! isEditing ||
 							! canOnlyChangeValues ||
-							canReset ) && (
+							canResetAny ) && (
 							<DropdownMenu
 								icon={ moreVertical }
 								label={
@@ -537,7 +557,7 @@
 														  ) }
 												</Button>
 											) }
-											{ canReset && (
+											{ canResetAny && (
 												<Button
 													__next40pxDefaultSize
 													className="components-palette-edit__menu-button"
@@ -546,7 +566,18 @@
 														setEditingElement(
 															null
 														);
-														onChange();
+														if ( canReset ) {
+															onChange();
+														}
+														variations.forEach(
+															( variation ) => {
+																if (
+																	variation.canReset
+																) {
+																	variation.onChange();
+																}
+															}
+														);
 														onClose();
 													} }
 												>
@@ -622,6 +653,53 @@
 						) ) }
 				</PaletteEditContents>
 			) }
+			{ variations.map(
+				( variation ) =>
+					variation.elements.length > 0 && (
+						<PaletteVariation key={ variation.paletteLabel }>
+							<PaletteHeading level={ paletteLabelHeadingLevel }>
+								{ variation.paletteIcon }
+								{ variation.paletteLabel }
+							</PaletteHeading>
+							<PaletteEditContents>
+								{ isEditing && (
+									<PaletteEditListView<
+										( typeof variation.elements )[ number ]
+									>
+										canOnlyChangeValues={
+											canOnlyChangeValues
+										}
+										elements={ variation.elements }
+										// @ts-expect-error The variation type matches the parent palette type.
+										onChange={ variation.onChange }
+										slugPrefix={ slugPrefix }
+										isGradient={ isGradient }
+										popoverProps={ popoverProps }
+										addColorRef={ addColorRef }
+									/>
+								) }
+								{ ! isEditing && isGradient && (
+									<GradientPicker
+										gradients={
+											variation.elements as Gradient[]
+										}
+										onChange={ () => {} }
+										clearable={ false }
+										disableCustomGradients
+									/>
+								) }
+								{ ! isEditing && ! isGradient && (
+									<ColorPalette
+										colors={ variation.elements as Color[] }
+										onChange={ () => {} }
+										clearable={ false }
+										disableCustomColors
+									/>
+								) }
+							</PaletteEditContents>
+						</PaletteVariation>
+					)
+			) }
 			{ ! hasElements && emptyMessage && (
 				<PaletteEditContents>{ emptyMessage }</PaletteEditContents>
 			) }

packages/components/src/palette-edit/styles.ts

@@ -50,9 +50,15 @@ export const NameContainer = styled.div`
 `;
 
 export const PaletteHeading = styled( Heading )`
+	align-items: center;
+	display: flex;
+	gap: ${ space( 1 ) };
 	text-transform: uppercase;
 	line-height: ${ space( 6 ) };
 	font-weight: ${ CONFIG.fontWeightEmphasis };
+	svg {
+		flex-shrink: 0;
+	}
 	&&& {
 		font-size: 11px;
 		margin-bottom: 0;
@@ -68,6 +74,10 @@ export const PaletteEditContents = styled( View )`
 	margin-top: ${ space( 2 ) };
 `;
 
+export const PaletteVariation = styled( View )`
+	margin-top: ${ space( 4 ) };
+`;
+
 export const PaletteEditStyles = styled( View )`
 	&&& {
 		.components-button.has-icon {

packages/components/src/palette-edit/test/index.tsx

@@ -183,6 +183,112 @@ describe( 'PaletteEdit', () => {
 		expect( paletteLabel ).toBeVisible();
 	} );
 
+	it( 'shows an icon before the heading label', () => {
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				paletteIcon={ <span data-testid="palette-icon" /> }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'heading', {
+				level: 2,
+				name: 'Test label',
+			} )
+		).toBeVisible();
+		expect( screen.getByTestId( 'palette-icon' ) ).toBeVisible();
+	} );
+
+	it( 'edits related palette variations from the same options menu', async () => {
+		const variationColors = [
+			{ color: '#ffffff', name: 'Primary', slug: 'primary' },
+		];
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				canOnlyChangeValues
+				paletteVariations={ [
+					{
+						colors: variationColors,
+						onChange: noop,
+						paletteLabel: 'Dark palette',
+					},
+				] }
+			/>
+		);
+
+		expect(
+			screen.getAllByRole( 'button', { name: 'Color options' } )
+		).toHaveLength( 1 );
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Show details',
+			} )
+		);
+
+		expect(
+			screen.getByRole( 'heading', {
+				level: 2,
+				name: 'Dark palette',
+			} )
+		).toBeVisible();
+		expect(
+			screen.getAllByRole( 'button', { name: 'Edit: Primary' } )
+		).toHaveLength( 2 );
+	} );
+
+	it( 'resets the base palette and its variations together', async () => {
+		const onChange = jest.fn();
+		const onVariationChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+				canReset
+				paletteVariations={ [
+					{
+						canReset: true,
+						colors: [
+							{
+								color: '#ffffff',
+								name: 'Primary',
+								slug: 'primary',
+							},
+						],
+						onChange: onVariationChange,
+						paletteLabel: 'Dark palette',
+					},
+				] }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Reset colors',
+			} )
+		);
+
+		expect( onChange ).toHaveBeenCalledWith();
+		expect( onVariationChange ).toHaveBeenCalledWith();
+	} );
+
 	it( 'shows heading label with custom heading level', () => {
 		render(
 			<PaletteEdit