Should --theme() rely on @theme options?

[diegohaz]

This question relates to this discussion, where I asked about --value() and --modifier().

If I understand correctly, outside of a functional utility, there are two ways to retrieve a theme value: var(--prop) and --theme(--prop). However, they seem to ignore the @theme options (such as inline), meaning that --theme(--prop) still returns the inline value even if the theme isn’t set that way. Similarly, var(--prop) disregards @theme inline, which is reasonable but leaves us without a method to obtain the value based on the @theme options.

I'd expect --theme(--prop) (or another function) to output either var(--prop) or the inline value depending on whether the inline option was set on @theme.

It's probably too late to change --theme() though, but I'm wondering if there's another way to do it.

[diegohaz]

I'm currently tackling this using a JavaScript plugin and accessing the (likely unsafe) __CSS_VALUES__ property:

/** @param {number} [value] */
function isInlineThemeReference(value) {
  if (!value) return false;
  if (value & (1 << 0)) return true;
  if (value & (1 << 1)) return true;
  return false;
}

/**
 * @param {string} namespace
 * @param {string} token
 * @param {string} [defaultValue]
 */
function t(namespace, token, defaultValue) {
  const options = theme(namespace)?.__CSS_VALUES__?.[token];
  const key = `--${namespace}-${token}`;
  if (isInlineThemeReference(options)) {
    return theme(key, defaultValue);
  }
  return `var(${key})`;
};

t("color", "accent"); // Returns var(--color-accent) or the inline value