WP Gutenberg custom block - generate theme colors from SASS and use them in the inspector and php callback

I would like to accomplice the following:

• Define theme colors in a SASS (.scss) file using nested variables.
• Add these colors to gutenberg using add_theme_support( 'editor-color-palette', array())
• Have a visual color inspector pallete in Gutenberg.
• Save the object key, not value, to a attribute
• Use the atribute in the php callback to set a div class using .has-key-background-color

So far, I've been able to generate and editor.scss and style.scss using something like:

_variables.scss

$theme-colors: (
  base: #fff,
  base-typography: #333,
  primary: #5bb57a,
  secondary: #f39708,
  tertiary: #ed7aad,
);

editor.scss and style.scss

@each $name, $color in $theme-colors {

  .has-#{$name}-color {
    color: $color;
  }

  .has-#{$name}-background-color {
    background-color: $color;
  }
}

set theme colors for Gutenberg I really not want to hardcode this! functions.php

function mytheme_setup_theme_supported_features() {
    
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' = __( 'Base', 'themeLangDomain' ),
            'slug' = 'base',
            'color' = '#fff',
        ),
        array(
            'name' = __( 'Primary', 'themeLangDomain' ),
            'slug' = 'primary',
            'color' = '#5bb57a',
        ),
        array(
            'name' = __( 'secondary', 'themeLangDomain' ),
            'slug' = 'secondary',
            'color' = '#f39708',
        ),
        array(
            'name' = __( 'Tertiary', 'themeLangDomain' ),
            'slug' = 'tertiary',
            'color' = '#ed7aad',
        ),
        array(
            'name' = __( 'base-typography', 'themeLangDomain' ),
            'slug' = 'base-typography',
            'color' = '#333',
        ),
    ) );
}

add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

Now this is where it ends for me, because I'm able to use withColor() in the block editor. BUT this is set as a style VALUE, not KEY in de renderer and not set as an attribute usable in the PHP Callback.

If I could get an array of the SASS's $theme-colors as values for a color picker in the block editor I could save the key as an value to the attribute and set it as an class to the div.

Is there a way to do so?