From 82081d39155338a5a3405d4210e838e6d84adca1 Mon Sep 17 00:00:00 2001
From: John Watkins <john.watkins@get10up.com>
Date: Sun, 16 Feb 2020 11:37:29 -0600
Subject: [PATCH 1/6] ColorPalette: Make selected color state more obvious

---
 .../components/src/circular-option-picker/index.js  | 10 ++++++++--
 .../src/circular-option-picker/style.scss           |  4 +---
 packages/components/src/color-palette/index.js      | 13 +++++++++++++
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.js
index b8878ad32633a1..a3038cd653a368 100644
--- a/packages/components/src/circular-option-picker/index.js
+++ b/packages/components/src/circular-option-picker/index.js
@@ -15,7 +15,13 @@ import Button from '../button';
 import Dropdown from '../dropdown';
 import Tooltip from '../tooltip';
 
-function Option( { className, isSelected, tooltipText, ...additionalProps } ) {
+function Option( {
+	className,
+	isSelected,
+	selectedIconProps = {},
+	tooltipText,
+	...additionalProps
+} ) {
 	const optionButton = (
 		<Button
 			isPressed={ isSelected }
@@ -33,7 +39,7 @@ function Option( { className, isSelected, tooltipText, ...additionalProps } ) {
 			) : (
 				optionButton
 			) }
-			{ isSelected && <Icon icon={ check } /> }
+			{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }
 		</div>
 	);
 }
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index a76a852559f7b3..e0d73eab7ac4e1 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -58,7 +58,7 @@ $color-palette-circle-spacing: 12px;
 	border-radius: 50%;
 	background: transparent;
 	box-shadow: inset 0 0 0 ($color-palette-circle-size / 2);
-	transition: 100ms box-shadow ease;
+	transition: none;
 	@include reduce-motion("transition");
 	cursor: pointer;
 
@@ -69,8 +69,6 @@ $color-palette-circle-spacing: 12px;
 
 	&.is-pressed {
 		box-shadow: inset 0 0 0 4px;
-		position: relative;
-		z-index: z-index(".components-circular-option-picker__option.is-pressed");
 
 		& + svg {
 			position: absolute;
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
index 0a3d1f0ad17483..210ac3c6682574 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { map } from 'lodash';
+import tinycolor from 'tinycolor2';
 
 /**
  * WordPress dependencies
@@ -29,6 +30,18 @@ export default function ColorPalette( {
 			<CircularOptionPicker.Option
 				key={ color }
 				isSelected={ value === color }
+				selectedIconProps={
+					value === color
+						? {
+								fill: tinycolor
+									.mostReadable( color, [ '#111', '#fff' ] )
+									.toHexString(),
+								style: {
+									backgroundColor: color,
+								},
+						  }
+						: {}
+				}
 				tooltipText={
 					name ||
 					// translators: %s: color hex code e.g: "#f00".

From 7952a3ef47e78c87ed8cab7f0f54816a74191513 Mon Sep 17 00:00:00 2001
From: John Watkins <john.watkins@get10up.com>
Date: Sun, 16 Feb 2020 11:49:38 -0600
Subject: [PATCH 2/6] ColorPalette: Update snapshots

---
 .../test/__snapshots__/control.js.snap        |  6 +++
 .../src/circular-option-picker/index.js       |  9 +++-
 .../test/__snapshots__/index.js.snap          | 48 +++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index e05be34cfc0b83..9a33d4d1220678 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -53,9 +53,15 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
           />
           <svg
             aria-hidden="true"
+            fill="#111111"
             focusable="false"
             height={24}
             role="img"
+            style={
+              Object {
+                "backgroundColor": "#f00",
+              }
+            }
             viewBox="-2 -2 24 24"
             width={24}
             xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.js
index a3038cd653a368..7e4faa6ccf27cc 100644
--- a/packages/components/src/circular-option-picker/index.js
+++ b/packages/components/src/circular-option-picker/index.js
@@ -18,7 +18,7 @@ import Tooltip from '../tooltip';
 function Option( {
 	className,
 	isSelected,
-	selectedIconProps = {},
+	selectedIconProps,
 	tooltipText,
 	...additionalProps
 } ) {
@@ -39,7 +39,12 @@ function Option( {
 			) : (
 				optionButton
 			) }
-			{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }
+			{ isSelected && (
+				<Icon
+					icon={ check }
+					{ ...( selectedIconProps ? selectedIconProps : {} ) }
+				/>
+			) }
 		</div>
 	);
 }
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index 15d8de9fe85497..3eb6385accf757 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -145,6 +145,14 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
         aria-label="Color: red"
         isSelected={true}
         onClick={[Function]}
+        selectedIconProps={
+          Object {
+            "fill": "#111111",
+            "style": Object {
+              "backgroundColor": "#f00",
+            },
+          }
+        }
         style={
           Object {
             "color": "#f00",
@@ -156,6 +164,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
         aria-label="Color: white"
         isSelected={false}
         onClick={[Function]}
+        selectedIconProps={Object {}}
         style={
           Object {
             "color": "#fff",
@@ -167,6 +176,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
         aria-label="Color: blue"
         isSelected={false}
         onClick={[Function]}
+        selectedIconProps={Object {}}
         style={
           Object {
             "color": "#00f",
@@ -230,6 +240,14 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           aria-label="Color: red"
           isSelected={true}
           onClick={[Function]}
+          selectedIconProps={
+            Object {
+              "fill": "#111111",
+              "style": Object {
+                "backgroundColor": "#f00",
+              },
+            }
+          }
           style={
             Object {
               "color": "#f00",
@@ -241,6 +259,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           aria-label="Color: white"
           isSelected={false}
           onClick={[Function]}
+          selectedIconProps={Object {}}
           style={
             Object {
               "color": "#fff",
@@ -252,6 +271,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           aria-label="Color: blue"
           isSelected={false}
           onClick={[Function]}
+          selectedIconProps={Object {}}
           style={
             Object {
               "color": "#00f",
@@ -270,6 +290,14 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         isSelected={true}
         key="#f00"
         onClick={[Function]}
+        selectedIconProps={
+          Object {
+            "fill": "#111111",
+            "style": Object {
+              "backgroundColor": "#f00",
+            },
+          }
+        }
         style={
           Object {
             "color": "#f00",
@@ -319,6 +347,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             </ForwardRef(Button)>
           </Tooltip>
           <Icon
+            fill="#111111"
             icon={
               <SVG
                 viewBox="-2 -2 24 24"
@@ -329,18 +358,35 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 />
               </SVG>
             }
+            style={
+              Object {
+                "backgroundColor": "#f00",
+              }
+            }
           >
             <SVG
+              fill="#111111"
               height={24}
+              style={
+                Object {
+                  "backgroundColor": "#f00",
+                }
+              }
               viewBox="-2 -2 24 24"
               width={24}
               xmlns="http://www.w3.org/2000/svg"
             >
               <svg
                 aria-hidden="true"
+                fill="#111111"
                 focusable="false"
                 height={24}
                 role="img"
+                style={
+                  Object {
+                    "backgroundColor": "#f00",
+                  }
+                }
                 viewBox="-2 -2 24 24"
                 width={24}
                 xmlns="http://www.w3.org/2000/svg"
@@ -362,6 +408,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         isSelected={false}
         key="#fff"
         onClick={[Function]}
+        selectedIconProps={Object {}}
         style={
           Object {
             "color": "#fff",
@@ -417,6 +464,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         isSelected={false}
         key="#00f"
         onClick={[Function]}
+        selectedIconProps={Object {}}
         style={
           Object {
             "color": "#00f",

From 032a5083932bb8900cfbd5e5c55c92e462ee3100 Mon Sep 17 00:00:00 2001
From: John Watkins <john.watkins@get10up.com>
Date: Sun, 16 Feb 2020 12:17:12 -0600
Subject: [PATCH 3/6] Style updates

---
 .../test/__snapshots__/control.js.snap            |  1 +
 .../src/circular-option-picker/style.scss         |  5 ++++-
 packages/components/src/color-palette/index.js    |  2 +-
 .../test/__snapshots__/index.js.snap              | 15 +++++++++++++++
 storybook/test/__snapshots__/index.js.snap        |  6 ++++++
 5 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 9a33d4d1220678..022dff49ea3388 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -46,6 +46,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             onMouseLeave={[Function]}
             style={
               Object {
+                "backgroundColor": "#f00",
                 "color": "#f00",
               }
             }
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index e0d73eab7ac4e1..768af0f55583a5 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -58,7 +58,7 @@ $color-palette-circle-spacing: 12px;
 	border-radius: 50%;
 	background: transparent;
 	box-shadow: inset 0 0 0 ($color-palette-circle-size / 2);
-	transition: none;
+	transition: 100ms box-shadow ease;
 	@include reduce-motion("transition");
 	cursor: pointer;
 
@@ -69,6 +69,9 @@ $color-palette-circle-spacing: 12px;
 
 	&.is-pressed {
 		box-shadow: inset 0 0 0 4px;
+		position: relative;
+		z-index: z-index(".components-circular-option-picker__option.is-pressed");
+		overflow: visible;
 
 		& + svg {
 			position: absolute;
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
index 210ac3c6682574..e9d1e3669ef57a 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.js
@@ -47,7 +47,7 @@ export default function ColorPalette( {
 					// translators: %s: color hex code e.g: "#f00".
 					sprintf( __( 'Color code: %s' ), color )
 				}
-				style={ { color } }
+				style={ { backgroundColor: color, color } }
 				onClick={
 					value === color ? clearColor : () => onChange( color )
 				}
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index 3eb6385accf757..c317b8c20e1cac 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -155,6 +155,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
         }
         style={
           Object {
+            "backgroundColor": "#f00",
             "color": "#f00",
           }
         }
@@ -167,6 +168,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
         selectedIconProps={Object {}}
         style={
           Object {
+            "backgroundColor": "#fff",
             "color": "#fff",
           }
         }
@@ -179,6 +181,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
         selectedIconProps={Object {}}
         style={
           Object {
+            "backgroundColor": "#00f",
             "color": "#00f",
           }
         }
@@ -250,6 +253,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           }
           style={
             Object {
+              "backgroundColor": "#f00",
               "color": "#f00",
             }
           }
@@ -262,6 +266,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           selectedIconProps={Object {}}
           style={
             Object {
+              "backgroundColor": "#fff",
               "color": "#fff",
             }
           }
@@ -274,6 +279,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           selectedIconProps={Object {}}
           style={
             Object {
+              "backgroundColor": "#00f",
               "color": "#00f",
             }
           }
@@ -300,6 +306,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         }
         style={
           Object {
+            "backgroundColor": "#f00",
             "color": "#f00",
           }
         }
@@ -323,6 +330,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
               onMouseLeave={[Function]}
               style={
                 Object {
+                  "backgroundColor": "#f00",
                   "color": "#f00",
                 }
               }
@@ -339,6 +347,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 onMouseLeave={[Function]}
                 style={
                   Object {
+                    "backgroundColor": "#f00",
                     "color": "#f00",
                   }
                 }
@@ -411,6 +420,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         selectedIconProps={Object {}}
         style={
           Object {
+            "backgroundColor": "#fff",
             "color": "#fff",
           }
         }
@@ -434,6 +444,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
               onMouseLeave={[Function]}
               style={
                 Object {
+                  "backgroundColor": "#fff",
                   "color": "#fff",
                 }
               }
@@ -450,6 +461,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 onMouseLeave={[Function]}
                 style={
                   Object {
+                    "backgroundColor": "#fff",
                     "color": "#fff",
                   }
                 }
@@ -467,6 +479,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         selectedIconProps={Object {}}
         style={
           Object {
+            "backgroundColor": "#00f",
             "color": "#00f",
           }
         }
@@ -490,6 +503,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
               onMouseLeave={[Function]}
               style={
                 Object {
+                  "backgroundColor": "#00f",
                   "color": "#00f",
                 }
               }
@@ -506,6 +520,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 onMouseLeave={[Function]}
                 style={
                   Object {
+                    "backgroundColor": "#00f",
                     "color": "#00f",
                   }
                 }
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index a7853ec0e2a39e..2a5eb8fd0aab1a 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -1963,6 +1963,7 @@ exports[`Storyshots Components/ColorPalette Default 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
+          "backgroundColor": "#f00",
           "color": "#f00",
         }
       }
@@ -1984,6 +1985,7 @@ exports[`Storyshots Components/ColorPalette Default 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
+          "backgroundColor": "#fff",
           "color": "#fff",
         }
       }
@@ -2005,6 +2007,7 @@ exports[`Storyshots Components/ColorPalette Default 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
+          "backgroundColor": "#00f",
           "color": "#00f",
         }
       }
@@ -2057,6 +2060,7 @@ exports[`Storyshots Components/ColorPalette With Knobs 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
+          "backgroundColor": "#f00",
           "color": "#f00",
         }
       }
@@ -2078,6 +2082,7 @@ exports[`Storyshots Components/ColorPalette With Knobs 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
+          "backgroundColor": "#fff",
           "color": "#fff",
         }
       }
@@ -2099,6 +2104,7 @@ exports[`Storyshots Components/ColorPalette With Knobs 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
+          "backgroundColor": "#00f",
           "color": "#00f",
         }
       }

From 29106ccd2dd173d725dd5abf3fadee1f5d3460a3 Mon Sep 17 00:00:00 2001
From: John Watkins <john.watkins@get10up.com>
Date: Sun, 16 Feb 2020 12:26:10 -0600
Subject: [PATCH 4/6] Remove unneeded background color style on icon

---
 .../test/__snapshots__/control.js.snap        |  5 ----
 .../src/circular-option-picker/style.scss     |  1 -
 .../components/src/color-palette/index.js     |  3 ---
 .../test/__snapshots__/index.js.snap          | 24 -------------------
 4 files changed, 33 deletions(-)

diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 022dff49ea3388..72c00c3bf83e24 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -58,11 +58,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             focusable="false"
             height={24}
             role="img"
-            style={
-              Object {
-                "backgroundColor": "#f00",
-              }
-            }
             viewBox="-2 -2 24 24"
             width={24}
             xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 768af0f55583a5..a754ff2e0d8a63 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -79,7 +79,6 @@ $color-palette-circle-spacing: 12px;
 			top: 2px;
 			border-radius: 50%;
 			z-index: z-index(".components-circular-option-picker__option.is-pressed + svg");
-			background: $white;
 			pointer-events: none;
 		}
 	}
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
index e9d1e3669ef57a..f747742edd922b 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.js
@@ -36,9 +36,6 @@ export default function ColorPalette( {
 								fill: tinycolor
 									.mostReadable( color, [ '#111', '#fff' ] )
 									.toHexString(),
-								style: {
-									backgroundColor: color,
-								},
 						  }
 						: {}
 				}
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index c317b8c20e1cac..1cfe8a2f774a4e 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -148,9 +148,6 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
         selectedIconProps={
           Object {
             "fill": "#111111",
-            "style": Object {
-              "backgroundColor": "#f00",
-            },
           }
         }
         style={
@@ -246,9 +243,6 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           selectedIconProps={
             Object {
               "fill": "#111111",
-              "style": Object {
-                "backgroundColor": "#f00",
-              },
             }
           }
           style={
@@ -299,9 +293,6 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         selectedIconProps={
           Object {
             "fill": "#111111",
-            "style": Object {
-              "backgroundColor": "#f00",
-            },
           }
         }
         style={
@@ -367,20 +358,10 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 />
               </SVG>
             }
-            style={
-              Object {
-                "backgroundColor": "#f00",
-              }
-            }
           >
             <SVG
               fill="#111111"
               height={24}
-              style={
-                Object {
-                  "backgroundColor": "#f00",
-                }
-              }
               viewBox="-2 -2 24 24"
               width={24}
               xmlns="http://www.w3.org/2000/svg"
@@ -391,11 +372,6 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 focusable="false"
                 height={24}
                 role="img"
-                style={
-                  Object {
-                    "backgroundColor": "#f00",
-                  }
-                }
                 viewBox="-2 -2 24 24"
                 width={24}
                 xmlns="http://www.w3.org/2000/svg"

From 3c6a1c22e04f397e695f3b5c344aae8375fe2bbd Mon Sep 17 00:00:00 2001
From: John Watkins <john.watkins@get10up.com>
Date: Mon, 17 Feb 2020 08:37:02 -0600
Subject: [PATCH 5/6] ColorPalette: use black instead of dark gray for maximum
 contrast

---
 packages/components/src/color-palette/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
index f747742edd922b..fae8fc900d46e6 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.js
@@ -34,7 +34,7 @@ export default function ColorPalette( {
 					value === color
 						? {
 								fill: tinycolor
-									.mostReadable( color, [ '#111', '#fff' ] )
+									.mostReadable( color, [ '#000', '#fff' ] )
 									.toHexString(),
 						  }
 						: {}

From cb3658a44090aa4301888f37f71f499cb4e1b6d9 Mon Sep 17 00:00:00 2001
From: John Watkins <john.watkins@get10up.com>
Date: Mon, 17 Feb 2020 09:52:07 -0600
Subject: [PATCH 6/6] Update snapshots

---
 .../color-palette/test/__snapshots__/control.js.snap |  2 +-
 .../color-palette/test/__snapshots__/index.js.snap   | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 72c00c3bf83e24..f261c3d29c0206 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -54,7 +54,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
           />
           <svg
             aria-hidden="true"
-            fill="#111111"
+            fill="#000000"
             focusable="false"
             height={24}
             role="img"
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index 1cfe8a2f774a4e..633d44bf2eb86b 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -147,7 +147,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
         onClick={[Function]}
         selectedIconProps={
           Object {
-            "fill": "#111111",
+            "fill": "#000000",
           }
         }
         style={
@@ -242,7 +242,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           onClick={[Function]}
           selectedIconProps={
             Object {
-              "fill": "#111111",
+              "fill": "#000000",
             }
           }
           style={
@@ -292,7 +292,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         onClick={[Function]}
         selectedIconProps={
           Object {
-            "fill": "#111111",
+            "fill": "#000000",
           }
         }
         style={
@@ -347,7 +347,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             </ForwardRef(Button)>
           </Tooltip>
           <Icon
-            fill="#111111"
+            fill="#000000"
             icon={
               <SVG
                 viewBox="-2 -2 24 24"
@@ -360,7 +360,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             }
           >
             <SVG
-              fill="#111111"
+              fill="#000000"
               height={24}
               viewBox="-2 -2 24 24"
               width={24}
@@ -368,7 +368,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             >
               <svg
                 aria-hidden="true"
-                fill="#111111"
+                fill="#000000"
                 focusable="false"
                 height={24}
                 role="img"