Try: Move color and font size from captions to theme

This PR moves the color and font size styles for captions to a separate CSS file that themes opt in to.

As a reminder, we have style.scss, which contains structural and base styles that are loaded in the editor and the theme.
There's editor.scss which is only loaded in the editor.
There's theme.scss, which is loaded in the editor and the theme if the theme opts in to them.

Addresses one item surfaced in #12299 (comment), props @joyously.

assets/stylesheets/_mixins.scss

@@ -310,11 +310,16 @@
  * Styles that are reused verbatim in a few places
  */
 
+// These are base styles for all captions.
 @mixin caption-style() {
 	margin-top: 0.5em;
 	margin-bottom: 1em;
-	color: $dark-gray-500;
 	text-align: center;
+}
+
+// These are additional styles for all captions, when the theme opts in to block styles.
+@mixin caption-style-theme() {
+	color: $dark-gray-500;
 	font-size: $default-font-size;
 }
 

packages/block-library/src/audio/theme.scss

@@ -0,0 +1,3 @@
+.wp-block-audio figcaption {
+	@include caption-style-theme();
+}

packages/block-library/src/embed/theme.scss

@@ -0,0 +1,3 @@
+.wp-block-embed figcaption {
+	@include caption-style-theme();
+}

packages/block-library/src/image/theme.scss

@@ -0,0 +1,3 @@
+.wp-block-image figcaption {
+	@include caption-style-theme();
+}

packages/block-library/src/theme.scss

@@ -5,3 +5,8 @@
 @import "./search/theme.scss";
 @import "./separator/theme.scss";
 @import "./table/theme.scss";
+
+@import "./audio/theme.scss";
+@import "./embed/theme.scss";
+@import "./image/theme.scss";
+@import "./video/theme.scss";

packages/block-library/src/video/theme.scss

@@ -0,0 +1,3 @@
+.wp-block-video figcaption {
+	@include caption-style-theme();
+}