Modificación global de CSS en el gestor de estilos

Queremos lograr lo siguiente:

• Marcar nuestros elementos HTML de bloque con algunas clases como:

<div class="my-container">
  <h3 class="mi-título">Algún título</h3>
  <h2>Subtítulo</h2>
</div>

• Añadir algunos estilos que definan clases CSS como:

<style>
  .my-container {
    Color de fondo: Rojo;
  }
  .my-title {
    color: verde;
  }
  h2 {
    Tamaño de fuente: grande;
  }
</style>

• Usando el gestor de estilos GrapesJS queremos cambiar las clases CSS anteriores para tener una configuración de "Color de fondo del contenedor" que pueda cambiar el "color de fondo" de la regla ".my-container"

¿Por qué queremos esto? Queremos usar algún tipo de "tematización" para la página que el usuario pueda cambiar; no queremos que el usuario haga clic en los elementos para cambiar su estilo. Y más: queremos eliminar casi todo del Style Manager: es demasiado complejo para los usuarios cambiar estos ajustes técnicos; no es realista esperar que los usuarios dediquen tiempo a cambiar sombras, radio de bordes, etc. Queremos simplificar mucho el estilo para los usuarios. Supongamos que tendremos "Color primario" y "Color secundario" en estas configuraciones: todos los elementos HTML que deben tener el color "primario" estarán marcados con '... clase="color-primario ...' y los demás estarán marcados como ' ... clase="color-secundario" ...', el usuario irá a los ajustes de "tema" y verá los ajustes de "Color primario" y "Color secundario".