Issues with attribute/color

[svenvandescheur]

I found some issue when working with the attribute/color transform and the css/variables format.

Version 4.3.3
Node.js: v18.16.1
OS: macOS 15.1.1 (24B91)
Architecture: Apple Silicon/ARM

outputReferences: true breaks attribute references when combined with css/variables

Given a configuration with the attribute/color transform.
And a css/variables format with { "options": { "outputReferences": true } }

When using a base value for referencing: { "brand": { "color": { "type": "color", "value": "#341a90" } } }
And using a reference to an attribute { "page": { "color": { "accent": { "value": "{brand.color.attributes.hsl.h}" } } } }
Then the output value (--page-color-accent: {brand.color.attributes.hsl.h};) does not seem to contain the attribute value
Then the output value (--page-color-accent: {brand.color.attributes.hsl.h};) does not seem to contain a proper reference

Without { "options": { "outputReferences": true } } the value is properly resolved: --page-color-accent: 253.22033898305085;

Attributes set by attribute/color don't allow cross referencing

Given a configuration with the attribute/color transform.

When using a theme value for referencing: { "theme": { "purple-rain": { "type": "color", "value": "#341a90" } } }
using a base value for referencing: { "brand": { "color": { "type": "color", "value": "{theme.purple-rain}" } } }
And using a reference to an attribute { "page": { "color": { "accent": { "value": "{brand.color.attributes.hsl.h}" } } } }
Then building the style dictionary results in an error:

Error:
Reference Errors:
Some token references (1) could not be found.

page.color.accent.value tries to reference brand.color.attributes.hsl.h, which is not defined.

When using a refernce to a "source value" the value is properly resolved: --page-color-accent: 253.22033898305085;

[dgibson666]

+1 I just upgraded to Style Dictionary 4.3.3 and this is a deal breaker for me. This worked in v3.x. E.g., the desired output of CSS variables would be:

--cbp-color-danger-base: var(--cbp-color-red-50);

but now I'm getting the following, which is not valid CSS:

--cbp-color-danger-base: { color.red.50.value };