Modifying global CSS in style manager

We want to achieve the following:

• Mark our block HTML elements with some classes like:

<div class="my-container">
  <h3 class="my-title">Some title</h3>
  <h2>Subheader</h2>
</div>

• Add some styles that define CSS classes like:

<style>
  .my-container {
    background-color: red;
  }
  .my-title {
    color: green;
  }
  h2 {
    font-size: large;
  }
</style>

• Using GrapesJS style manager we want to change the above CSS classes so we can have a "Container background color" setting which can change the "background-color" of the ".my-container" rule

Why we want this ? We want to use some kind of "theming" for the page which can be changed by the user - we don't want the user to click on the elements to change their style. And more - we want to remove almost everything from the Style Manager - it is way too complex for the users to change such technical settings - it is not realistic to expect the users to spend time changing shadows, border radius etc. We want to greatly simplify styling for the users. Let's say we will have "Primary color" and "Secondary color" in these settings - all the HTML elements which must have the "primary" color will be marked with ... class="primary-color ... and others will be marked as ... class="secondary-color" ..., the user will go to the "theme" settings and will see "Primary color" and "Secondary color" settings.