The image responds to tint color change if i put a normal color value in it. So I’m kind of leaning towards the tint not taking the them color. The “Label” objects in the screen are setup with the “–neutral-100” value for reference.
Firstly, --neutral-100 isn’t a valid/defined CSS variable that is provided as part of the standard light/dark themes (unless of course you’ve defined these yourself in your own theme). These variables go from 10-90 in steps of 10. Then there are --white and --black variables, all of which invert for the dark theme.
Secondly, to reference CSS variables you need to use var(--var-name), e.g. var(--neutral-90).
And thirdly (and perhaps pedantically), a ‘tint’ is a shade of a specific colour, e.g. a change in saturation or lightness, not hue.
the var(–xxx-xx) declaration is not needed like it would be if it was a style class. The --neutral-100 is also part of a built-in theme color sets according to the documentation. The pictures below demonstrate this working.
Also, I purposely set that image to be a white line drawing (aside from the blue arrow) so that i could change the color tint value dynamically, which is the same color value as text color would be. As demonstrated by the #FF000 value where I once had the “–neutral-100”. I can animate that all day long using normal binding methods for the color.
Oohh, sorry I completely missed that you’re using an image library graphic, which does use a tint. I haven’t used library graphics since the first time I launched v8, where now I embed SVGs instead. I found linking to the library had strange results with the images being rasterised when using tint, and also the inability to colour and style different components. Are you able to use the Embed SVG option instead?
As an aside, I really don’t like the use of hex values in there HSL is so much more human-readable!
Could you make the image available for download somehow (or a similar one)? I’m interested as to why it isn’t working as you would expect and might be able to help you figure this out if this is at all a priority.
What does the page with this image look like in browser devtools? Both Chrome and Firefox represent the ‘cascade’ of styles in CSS well - you can see whether things are being applied as you expect them to be.
Okay, so my guess is that what’s happening is because we try to parse the color out before we apply it to the actual component that makes it to the page, and something about the variable syntax isn’t working there.
Has there been any updates to Perspective that would change how this works since 3 years ago, or is a script or expression still going to be the best way to apply theme colors to tinted SVG's?