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

Support
#1

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.

CleanShot 2026-08-26 at 14.36.28@2x
CleanShot 2026-08-26 at 14.36.28@2x2692×1978 412 KB

#2

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)