Add SASS vars to the package about design-tokens HOT 2 CLOSED

@aminalhazwani We can look at introducing CSS vars but since we're using a pre-processor for other things and that's not likely to go away soon I don't yet see we have much of a use-case for css vars. Especially since they're defined at run time and need to be considered differently compared to working with vars in a pre-processor that are defined up front and baked into the file.

I don't really see the modification thing being a problem if we know these are supposed to be used unmodified. We can make sure they are used that way. A CSS var could get re-defined too.

IMHO giving consumers more options for how to consume the vars could also help with adoption rather than going the route of only exposing them in one format which could limit it.

from design-tokens.

hey @muffinresearch would be an option for you to use the CSS vars instead? We are trying to avoid colors alteration through SASS functions and I noticed that you actually define a new var for the :hover and :active state rather than using the darker function as CSS value. So your approach could also work with the CSS vars, for example:

:root {
  --primary-button-background: var(--blue-50);
  --primary-button-background-hover: var(--blue-60);
  --primary-button-background-active: var(--blue-70);
}

What do you think?

from design-tokens.