Custom post meta checkboxes "selected" svg is not displaying in the expected color

[audrasjb]

Describe the bug
When themes or plugins are using custom post meta with checkbox form fields, the svg used to mark the checkbox as selected appears in blue foregroung color on a blue background.

It looks like it is caused by the SVG itself:

input[type=checkbox]:checked::before {
    content: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='#1e8cbe'/></svg>)
}

The bug was initially reported on Core Trac.
For reference: https://core.trac.wordpress.org/ticket/48274

To reproduce
Steps to reproduce the behavior:

1. Create custom post meta checkbox fields or install "Astra" theme from WordPress.org theme repository
2. Edit a post or create a new post
3. Scroll down to custom post meta checkbox fields
4. Check one checkbox and reproduce the error (see screenshot below)

Expected behavior
The check mark should be white (#ffffff).

Screenshots

Desktop (please complete the following information):

• OS: Max OS X
• Browser: Chrome
• Version: 77.0.3865.90

Additional context

• Please add the version of Gutenberg you are using in the description: Bloc editor bundled into WP 5.3 RC1

[robincornett]

I can confirm this is happening with PHP registered metaboxes using checkbox inputs in the sidebar (metaboxes registered to show below the post are not affected) as well. Inputs in the sidebar seem to be getting styling from wp-includes/css/dist/edit-post/style.css?ver=5.3-RC2-46574 and below the post are getting styling from /wp-admin/css/forms.css?ver=5.3-RC2-46574 ... the "unchecked" appearance is inconsistent between the two locations as well, but the blue on blue is the more problematic issue.

It looks like the checkbox style I'm seeing is set here:

input[type="checkbox"]:checked::before {
	/* Use the "Yes" SVG Dashicon */
	content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%231e8cbe%27%2F%3E%3C%2Fsvg%3E");
	margin: -0.1875rem 0 0 -0.25rem;
	height: 1.3125rem;
	width: 1.3125rem;
}

(in the forms.css file, lines 180-186) Is the fill color for the check mark hard coded in?

[jasmussen]

I created a fix in #18108. It's not a pretty fix, but barring a last minute change to every checkbox and radio button in WordPress outside of the block editor, this is likely the best fix.