<?php // loads on backend and frontend
function orion_create_gutenberg_css(){ 
	global $orion_options;  

	/* ---COLORS--- */
	$color_1 = orion_get_theme_option_css('main_theme_color', '#00b2ca' );
	$color_2 = orion_get_theme_option_css('secondary_theme_color', '#3F51B5' );
	$color_3 = orion_get_theme_option_css('color_3', '#2B354B' );
	$bg_color = orion_get_theme_option_css('site_background_color', '#ffffff' );
	$alt_bg_color = orion_get_theme_option_css('alt_site_background_color', '#f4f8fa' );


?><?php
/*********************************** O.o ***********************************/
/*                    	gutenberg colors and backgrounds  	  		   	   */ 
/***************************************************************************/
?>

.has-primary-color, 
.has-primary-color p {
	color: <?php echo esc_html($color_1);?>; 
}
.has-secondary-color, 
.has-secondary-color p {
	color: <?php echo esc_html($color_2);?>; 
}
.has-tertiary-color, 
.has-tertiary-color p  {
	color: <?php echo esc_html($color_3);?>; 
}

.has-white-color, .has-white-color p {
	color: #fff;
}

.has-black-color, .has-black-color p {
	color: #000; 
}

.has-primary-background-color.has-primary-background-color, .wp-block-button__link,
.wp-block-cover-image.has-primary-background-color {
	background-color: <?php echo esc_html($color_1);?>; 
}
.has-secondary-background-color.has-secondary-background-color,
.wp-block-cover-image.has-secondary-background-color {
	background-color: <?php echo esc_html($color_2);?>; 
}
.has-tertiary-background-color.has-tertiary-background-color,
.wp-block-cover-image.has-tertiary-background-color {
	background-color: <?php echo esc_html($color_3);?>; 
}
.has-site-background-color-background-color.has-site-background-color-background-color,
.wp-block-cover-image.has-site-background-color-background-color {
	background-color: <?php echo esc_html($bg_color);?>; 
}
.has-alt-site-background-color-background-color.has-alt-site-background-color-background-color,
.wp-block-cover-image.has-alt-site-background-color-background-color {
	background-color: <?php echo esc_html($alt_bg_color);?>; 
}

.has-white-background-color.has-white-background-color,
.wp-block-cover-image.has-white-background-color {
	background-color: #fff; 
}
.has-black-background-color.has-black-background-color,
.wp-block-cover-image.has-black-background-color {
	background-color: #000; 
}
<?php }