Selectable / Editable Values not working

[Jeremy-Walton]

In the demo, values are displayed as editable input fields that you can copy out of.

When using any presenter, I do not see the selectable inputs.

I am using v2.9.0 with Storybook Storybook 6.5.14 for Html

My main.js looks like

addons: [
  '@storybook/addon-links',
  '@storybook/addon-essentials',
  '@storybook/addon-interactions',
  '@storybook/preset-scss',
  { name: 'storybook-design-token', options: { preserveCSSVars: true } },
],

My tokens are tagged with Spacing but it happens with all presenters.

/**
  * @tokens Space Scale
  * @presenter Spacing
  */

[Jeremy-Walton]

Looks like it's not rendering because in TokenValue.tsx it says

{(token.sourceType === TokenSourceType.CSS ||
    token.sourceType === TokenSourceType.SVG) && (
    <Input
      readOnly={readonly}
      onChange={(event) => {
        const newRawValue = (event.target as HTMLInputElement).value;

        setRawValue(newRawValue);
        onValueChange(newRawValue);
      }}
      value={rawValue}
    />
  )}

In my case the token source is set to SCSS even though I am not using a SASS variable.

I am setting the variables in SCSS files, but they are not sass variables

[Sqrrl]

Thanks for looking into it. I have not considered the case of using CSS variables in SCSS. I'll try to fix this with the next release.