Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
JamesIves opened this issue Feb 22, 2024 · 0 comments
Open

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

JamesIves opened this issue Feb 22, 2024 · 0 comments

Comments

@JamesIves
Copy link

JamesIves commented Feb 22, 2024

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?

@JamesIves JamesIves changed the title Tokens that change based on breakpoint Tokens that change based on breakpoint do not update in the UI Feb 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant