Skip to main content

Allow for none/null color variables for cross-brand theming

  • June 29, 2023
  • 1 reply
  • 513 views

Laura_Keller

With the Tokens Studio plugin, something that is really handy while managing themable components is the ability to add none or null values to fills and strokes. It allows us to keep a variable connected to a component attribute and apply different values per brand theme. For example, we want a border on a button for one theme and no border for another.

Currently with color variables, it’s required to input a color value with a opacity of 0% to create a none variable. A transparent color is a very different output than a null value for our eng partners and our theming framework.

For background, our team pre-processes our figma token/variable outputs through Style Dictionary and have a transform to resolve a “none” string in a color value into each platform’s preferred null value.

This topic has been closed for replies.

1 reply

  • 0 replies
  • September 27, 2023

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings