[Bug] Element reference parameters don't work with referenced global colors

[Dagaloni]

I have an component button with:

1. Primary text color set to Global color 1
2. Secondary text color set to {{element.field.anchor_primary_text_color}}
3. Secondary text set to {{element.field.anchor_primary_text_color}}

The secondary text displays the global color correctly but the color doesn’t work. When I copy the global color ID from the inspector and paste that as in the field for the secondary text color the correct color is displayed.

[christian]

Hey @Dagaloni,

Here’s the Reason Why This Happens

1. How the Text Element Resolves It:
   The dynamic content expression {{element.field.anchor_primary_text_color}} resolves at runtime to the raw database string: global-color:j3l9KCkx9M2CUBZMW8. Since the secondary text field expects plain text, it prints this raw ID string onto the screen perfectly.

2. Why the Color Picker/CSS Fails:
   When you place {{element.field.anchor_primary_text_color}} into a color field, the CSS compiler (TSS) outputs the resolved value directly into the generated stylesheet, resulting in invalid CSS:

   color: global-color:j3l9KCkx9M2CUBZMW8;
   

   Web browsers do not understand global-color:j3l9KCkx9M2CUBZMW8 as a valid color value.

3. Why Pasting the ID Directly Works:
   When you paste global-color:j3l9KCkx9M2CUBZMW8 directly into the color picker as a static value, Cornerstone’s CSS compiler detects the global-color: prefix at compile-time/save-time. It processes it and compiles it into a valid CSS Custom Property:

   color: var(--cs-gc-j3l9KCkx9M2CUBZMW8);
   

---

How to Fix It

To make the dynamic color work, you can reference the CSS Custom Property format of your global color instead of the raw ID.

If the global color ID is j3l9KCkx9M2CUBZMW8, you can use the CSS variable directly in your field:

var(--cs-gc-j3l9KCkx9M2CUBZMW8)

[Dagaloni]

Thanks for the explanation Christian! Is this something that can be fixed in a future update?

Could be very useful to use one color field as a reference for the other color pickers.

Thank you for the workaround! I keep that in mind. As for this use case, the workaround kind of defeats the purpose. The goal was to make it easier to change the color of a button with one color change and the other color pickers would use that as a reference. Looking up the global color ID takes up more time then setting three color values.

[christian]

Thank you for your feedback @Dagaloni. I’ve submitted this as an improvement request so this will have a chance to be included in the future.

[Dagaloni]

Many thanks @christian!

[prakash_s]

You are most welcome, @Dagaloni