Generate CSS color variables from color names (code included)

[yankiara]

Hi,

It would cool to have CSS variables associated to Bricks palettes colors based on their name instead of ID (or both):

Here is the code:

<?php

add_action( 'wp_head', function() {

    echo '<style>:root {' .
        implode( array_map( function ( $palette ) {
            return implode( array_map( function ( $color ) {
                return '--' . sanitize_title( $color['name'] ) . ': var(--bricks-color-' . $color['id'] . ');';
            }, $palette['colors'] ) );
        }, get_option( BRICKS_DB_COLOR_PALETTE, [] ) ) ) .
        '}</style>';

}, 99 );

?>

[creatiwdk]

changing the colorname in the palet should change the variable name in the frontend…

You can’t even use the --bricks-color-primary, cause it doesn’t change even though you set a primary color in the theme style…