Accessing the raw values of semantic tokens.

[MeanBoyCousin]

I'm making use of semantic tokens at the moment as our application has multiple themes and color modes. This is a super handy way to keep things simple. However, I also need to set colors as parameters on a third-party library that generates a canvas. These values must be passed as raw hex color code strings because the canvases are generated inside an iframe. I've tried playing around with hooks but to no avail and I wondered if there was something I was missing or if this is even possible at all.

Thanks in advance!

[astahmer]

semanticTokens don't really have "raw" values as this depends heavily on the current condition (CSS selector/at-rule) applied
if this is something you need to do at runtime, you can do something like this (thanks gpt)

function getComputedCSSVariableValue(variable) {
    let value = getComputedStyle(document.documentElement).getPropertyValue(variable);

    while (value.startsWith('var(')) {
        // Extract the name of the referenced variable
        let referencedVarName = value.slice(4, value.length - 1);
        value = getComputedStyle(document.documentElement).getPropertyValue(referencedVarName);
    }

    return value.trim();
}

// Usage example
let computedValue = getComputedCSSVariableValue('--your-css-variable');
console.log(computedValue);

and instead of --your-css-variable you can use token.var

[MeanBoyCousin]

Thanks for the speedy reply as always! I feel pretty foolish now because, in truth, I spent hours working with a solution similar to his a few days back and gave up. I attempted this solution and the values were always returned as undefined. Turns out, I needed to modify the config object into a function so that it gets executed when the canvas is built. 🤦

I'm not sure how much of an edge case this is but do you think it would be worth adding this to the docs anywhere for future usage? Perhaps in the FAQs. I'd be happy to put a PR together at some point if so.

[theMasix]

I needed to modify the config object into a function so that it gets executed when the canvas is built.

I'm currently facing a similar issue. What config object should be converted into a function? I don't get what file the "config object" references.

[MeanBoyCousin]

In my case, it was a specific config setup for the third-party library that I am using (trading view charts). I had to ensure that the evaluation was happening when the library was generating the canvas and not before hand. What I ended up doing was as follows:

// utils.ts
const getComputedCSSVariableValue = (variable: string): string =>
  getComputedStyle(document.documentElement)
    .getPropertyValue(variable.slice(4, variable.length - 1))
    .trim()
    
// index.ts
import { token } from '~/styled-system/tokens' // from wherever this lives for you.
import getComputedCSSVariableValue from '@/utils'

const lines = getComputedCSSVariableValue(token.var('colors.lines'))

Hope this helps.

[theMasix]

Thanks for speedy response! great. got it.