Add custom theme colors.

apostrophe-2/css/blocks.css

@@ -322,6 +322,11 @@ p.has-drop-cap:not(:focus)::first-letter {
 	text-decoration: none;
 }
 
+.wp-block-button .wp-block-button__link:active,
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:focus {
+}
+
 .wp-block-button__link:not(.has-background) {
 	border: 2px solid #117bb8;
 	background: rgba(255, 255, 255, 0.25);
@@ -341,10 +346,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 	color: #159ae7;
 }
 
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus {
-}
-
 .wp-block-button__link:not(.has-background):active,
 .wp-block-button__link:not(.has-background):focus,
 .wp-block-button__link:not(.has-background):hover {
@@ -401,98 +402,101 @@ hr.wp-block-separator {
 6.0 Blocks - Colors
 --------------------------------------------------------------*/
 
-.has-dark-gray-color {
-	color: #1a1a1a;
-}
-
-.has-dark-gray-background-color {
-	background-color: #1a1a1a;
-}
-
-.has-medium-gray-color {
+.has-dark-gray-color,
+.has-dark-gray-color:hover,
+.has-dark-gray-color:focus,
+.has-dark-gray-color:active {
 	color: #686868;
 }
 
-.has-medium-gray-background-color {
+.has-dark-gray-background-color,
+.has-dark-gray-background-color:hover,
+.has-dark-gray-background-color:focus,
+.has-dark-gray-background-color:active {
 	background-color: #686868;
 }
 
-.has-light-gray-color {
-	color: #e5e5e5;
+.has-medium-gray-color,
+.has-medium-gray-color:hover,
+.has-medium-gray-color:focus,
+.has-medium-gray-color:active {
+	color: #999999;
 }
 
-.has-light-gray-background-color {
-	background-color: #e5e5e5;
+.has-medium-gray-background-color,
+.has-medium-gray-background-color:hover,
+.has-medium-gray-background-color:focus,
+.has-medium-gray-background-color:active {
+	background-color: #999999;
 }
 
-.has-white-color {
-	color: #fff;
-}
-
-.has-white-background-color {
-	background-color: #fff;
+.has-light-gray-color,
+.has-light-gray-color:hover,
+.has-light-gray-color:focus,
+.has-light-gray-color:active {
+	color: #d9d9d9;
 }
 
-.has-blue-gray-color {
-	color: #4d545c;
+.has-light-gray-background-color,
+.has-light-gray-background-color:hover,
+.has-light-gray-background-color:focus,
+.has-light-gray-background-color:active {
+	background-color: #d9d9d9;
 }
 
-.has-blue-gray-background-color {
-	background-color: #4d545c;
-}
-
-.has-bright-blue-color {
-	color: #007acc;
-}
-
-.has-bright-blue-background-color {
-	background-color: #007acc;
-}
-
-.has-light-blue-color {
-	color: #9adffd;
-}
-
-.has-light-blue-background-color {
-	background-color: #9adffd;
-}
-
-.has-dark-brown-color {
-	color: #402b30;
-}
-
-.has-dark-brown-background-color {
-	background-color: #402b30;
+.has-white-color,
+.has-white-color:hover,
+.has-white-color:focus,
+,.has-white-color:active {
+	color: #fff;
 }
 
-.has-medium-brown-color {
-	color: #774e24;
+.has-white-background-color,
+.has-white-background-color:hover,
+.has-white-background-color:focus,
+.has-white-background-color:active {
+	background-color: #fff;
 }
 
-.has-medium-brown-background-color {
-	background-color: #774e24;
+.has-blue-color,
+.has-blue-color:hover,
+.has-blue-color:focus,
+.has-blue-color:active {
+	color: #159ae7;
 }
 
-.has-dark-red-color {
-	color: #640c1f;
+.has-blue-background-color,
+.has-blue-background-color:hover,
+.has-blue-background-color:focus,
+.has-blue-background-color:active {
+	background-color: #159ae7;
 }
 
-.has-dark-red-background-color {
-	background-color: #640c1f;
+.has-dark-blue-color,
+.has-dark-blue-color:hover,
+.has-dark-blue-color:focus,
+.has-dark-blue-color:active {
+	color: #362e77;
 }
 
-.has-bright-red-color {
-	color: #ff675f;
+.has-dark-blue-background-color,
+.has-dark-blue-background-color:hover,
+.has-dark-blue-background-color:focus,
+.has-dark-blue-background-color:active {
+	background-color: #362e77;
 }
 
-.has-bright-red-background-color {
-	background-color: #ff675f;
+.has-black-color,
+.has-black-color:hover,
+.has-black-color:focus,
+.has-black-color:active {
+	color: #404040;
 }
 
-.has-yellow-color {
-	color: #ffef8e;
+.has-black-background-color,
+.has-black-background-color:hover,
+.has-black-background-color:focus,
+.has-black-background-color:active {
+	background-color: #404040;
 }
 
-.has-yellow-background-color {
-	background-color: #ffef8e;
-}

apostrophe-2/functions.php

@@ -39,6 +39,47 @@ if ( ! function_exists( 'apostrophe_2_setup' ) ) :
 		// Load editor styles and custom fonts.
 		add_editor_style( array( 'editor-style.css', apostrophe_2_fonts_url() ) );
 
+		// Add custom colors to Gutenberg
+		add_theme_support(
+			'editor-color-palette', array(
+				array(
+					'name'  => esc_html__( 'Black', 'apostrophe-2' ),
+					'slug' => 'black',
+					'color' => '#404040',
+				),
+				array(
+					'name'  => esc_html__( 'Dark Gray', 'apostrophe-2' ),
+					'slug' => 'dark-gray',
+					'color' => '#686868',
+				),
+				array(
+					'name'  => esc_html__( 'Medium Gray', 'apostrophe-2' ),
+					'slug' => 'medium-gray',
+					'color' => '#999999',
+				),
+				array(
+					'name'  => esc_html__( 'Light Gray', 'apostrophe-2' ),
+					'slug' => 'light-gray',
+					'color' => '#d9d9d9',
+				),
+				array(
+					'name'  => esc_html__( 'White', 'apostrophe-2' ),
+					'slug' => 'white',
+					'color' => '#ffffff',
+				),
+				array(
+					'name'  => esc_html__( 'Blue', 'apostrophe-2' ),
+					'slug' => 'blue',
+					'color' => '#159ae7',
+				),
+				array(
+					'name'  => esc_html__( 'Dark Blue', 'apostrophe-2' ),
+					'slug' => 'dark-blue',
+					'color' => '#362e77',
+				)
+			)
+		);
+
 		/*
 		 * Let WordPress manage the document title.
 		 * By adding theme support, we declare that this theme does not use a