WYSIWYG not using CSS styles when using input parameters

Say I have a web block with a single container in it.  I want the background of that container to change between a few different colors.

I have a style called "blue", defined in the theme:
   .blue { background-color: blue; }

I would like to pass this color style name to the web block as a parameter, so I can style the background color of the container dynamically.  I made a text input parameter on the web block called "Color".  In the Exteded Properties of the container in the web block, I put "class" as a key and "Color" as a value:

Then I go to my web screen, drag over the web block, and put "blue" in as the Color input parameter:

Unfortunately, the WYSIWYG editor is not passing "blue" to the web block.  In the browser the container shows up as blue, but in the WYSIWYG the style is not applied:

It seems to be the parameter that is causing this issue.  If I manually type in the literal string "blue" instead of using the parameter, or if I use the Style property instead of the Extended Properties panel, then the blue style is processed and the WYSIWYG editor shows the blue background on the container:

For something like "background-color", this issue is not huge, but for other styles (such as positioning styles), this can be problematic as the WYSIWYG editor is not displaying what the actual website looks like.  I tried using Preview Mode, but it also did not work.  Is there any way to get the WYSIWYG editor to process the input parameters?


I came into the same problem. Did you find any solutions? The SilkUi Framework seems to do this very well but i couldn't mimic the behavior. I copied a webblock(badge) from SilkUi, its related CSS and static entities(Color) to a testing project. If i leave all in its default state everything works fine but if i try to customize something, let's say, the class name, Service Studio stops giving visual feedback.