Represent alternate versions of CSS Custom Properties from Sass

[joshblack]

We're running into a couple of situations where our current CSS Custom property approach (behind the feature flag) is falling short, namely when the values of a token need to either switch to a different representation (rgba) or are programmatically altered (lighten/darken).

As a result, we run into the following situation:

$token-01: var(--token-01, #343434);

.my-selector {
  color: rgba($token-01, 0.5);
  // Expands to
  color: rgba(var(--token-01, #343434), 0.5)
}

In this case, rgba expects an rgb list and is receiving a hex value.

In addition, there are moments where we might want to lighten/darken a value programmatically.

$token-01: var(--token-01, #343434);

.my-selector {
  // Does not work since `$token-01` is not a CSS Custom Property
  color: lighten($token-01, 0.25);
}

[emyarod]

would this be related to #4345 as well?

[joshblack]

This will be addressed when we switch to using CSS Custom Properties directly in a future release!