Tokens that change based on breakpoint do not update in the UI

[JamesIves]

I have a number of global CSS variables that resize based on device width, however in the Design Tokens tab, only the first instance of --resize-100 seen takes effect, meaning that the value never updates when the screen is resized after the value is first defined. Because the addon writes the value of the token when the tab is open for the first time, if I were to reduce my screen width it prevents the token value from changing due to the inline style.

html {
   --resize-100: 10px;
   --resize-100-md: 12px;
}

@media (min-width: 640px) {
  html {
     --resize-100: var(--resize-100-md);
  }
}

In this case, if I start the screen on a large display, --resize-100: var(--resize-100-md) appears as an inline style. If I shrink the page down to below the threshold, it will remain and not update to the 10px value.

For my situation, in an ideal world it would reset the values back to their default state once a breakpoint in the list triggers any of the token values to change, and appropriately reflect that in the UI.

Is there a defined pattern for this, or is this a bit of an edge case?

[ulyana-zh]

That's one of the advantages of using CSS variables, and it's quite common. We also faced this issue, and I would appreciate if it could be implemented!