Add Themeco's Pro theme colors to Gutenberg

functions.php

<?php
/**
 * Get theme colors from Pro and turn them into classes and CSS variables
 * And now add them to Gutenberg for use in blog posts
 *
 * Created Date: Wednesday May 25th 2022
 * Author: Michael Bourne
 * -----
 * Last Modified: Wednesday, May 25th 2022, 1:36:28 pm
 * Modified By: Michael Bourne
 * -----
 * Copyright (c) 2022 URSA6
 *
 */

function mpb_build_theme_support() {

    $themecolors = get_option( 'cornerstone_color_items' );
    if ( $themecolors ) {

    $css    = '<style type="text/css" id="themecolours">';
    $colors = json_decode( stripslashes( $themecolors ), true );
    $count  = count( $colors );

    if ( 0 === $count ) return;

    $themecolors = [];

    for ( $i = 0; $i <= $count - 1; $i++ ) {

        /**
         * This takes the name of your Pro palette color and transforms it for use in CSS and Gutenberg.
         * All non-letters will be removed, and all letters converted to lower case.
         * For example: "Main Color 1" becomes "maincolor"
         * And can be used like so: .maincolor as a class or var(--xtt-maincolor) as a value in css
         * Gutenberg styles will automatically bind to these classes: .has-{{name}}-color .has={{name}}-background-color
         * With the above example, those will be .has-maincolor-color and .has-maincolor-background-color
         */

        $name = 'xtt-' . preg_replace( '/[^a-z]/', '', strtolower( $colors[ $i ]['title'] ) );
        $css .= ':root { --' . $name . ': ' . $colors[ $i ]['value'] . '; } ';
        $css .= '.' . $name . ', .has-' . $name . '-color { color: ' . $colors[ $i ]['value'] . '; } ';
        $css .= '.has-' . $name . '-background-color { background-color: ' . $colors[ $i ]['value'] . '; } ';

        $themecolors[] = array(
            'name' => $colors[ $i ]['title'],
            'slug' => preg_replace( '/[^a-z]/', '', strtolower( $colors[ $i ]['title'] ) ),
            'color' => $colors[ $i ]['value'],
        );

    }

    $css .= '</style>';

    function colors_css() {
        global $css;
        echo $css;
    }
    add_action( 'wp_head', 'colors_css' );

    }

    add_theme_support( 'editor-color-palette', $themecolors );
}
add_action( 'after_setup_theme', 'mpb_build_theme_support' );