ColorPalette: Fix background image in RTL mode (#42510)

* ColorPalette: Fix background image in RTL mode

* Update CHANGELOG.md

* Update CHANGELOG.md

* Ignore background image

* Add comments.

packages/components/CHANGELOG.md

@@ -7,6 +7,7 @@
 -   `Popover`, `Dropdown`: Fix width when `expandOnMobile` is enabled ([#42635](https://github.com/WordPress/gutenberg/pull/42635/)).
 -   `CustomSelectControl`: Fix font size and hover/focus style inconsistencies with `SelectControl` ([#42460](https://github.com/WordPress/gutenberg/pull/42460/)).
 -   `AnglePickerControl`: Fix gap between elements in RTL mode ([#42534](https://github.com/WordPress/gutenberg/pull/42534)).
+-   `ColorPalette`: Fix background image in RTL mode ([#42510](https://github.com/WordPress/gutenberg/pull/42510)).
 -   `RangeControl`: clamp initialPosition between min and max values ([#42571](https://github.com/WordPress/gutenberg/pull/42571)).
 -   `Tooltip`: avoid unnecessary re-renders of select child elements ([#42483](https://github.com/WordPress/gutenberg/pull/42483)).
 

packages/components/src/color-palette/style.scss

@@ -7,10 +7,15 @@
 	padding: $grid-unit-15;
 	font-family: inherit;
 	width: 100%;
+	// The background image creates a checkerboard pattern. Ignore rtlcss to
+	// make it work both in LTR and RTL.
+	// See https://github.com/WordPress/gutenberg/pull/42510
+	/*rtl:begin:ignore*/
 	background-image:
 		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
 		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
 	background-position: 0 0, 25px 25px;
+	/*rtl:end:ignore*/
 	background-size: calc(2 * 25px) calc(2 * 25px);
 	box-sizing: border-box;
 	color: $white;