RGBA option for token values

Use this template if you want to request a new feature, or a change to an existing feature.

If you are reporting a bug or problem, please use the bug template instead.

Summary

rgba() tokens to the Carbon theme variables so that we can apply the theme based on what the adopter defines. Currently need to do a linear-gradient with the $ui-background with an opacity 0.6. We need the option to set the opacity of the token becuase currently our scss styles are not able to recognice rgba($ui-background, 0.6)

Clarify if you are asking for design, development, or both design and development.

Justification

Creating a image component with a gradient where the design requests this functionality.

Desired UX and success metrics

Describe the full user experience for this feature. Also define the metrics by which we can measure success/failure for the user.

“Must have” functionality

Highlight any “must have” needs and functionality for the request.

This should not be a full list of functionality; the Carbon team will work with you to define functionality based on the desired UX.

Specific timeline issues / requests

Do you want this work within a specific time period? Is it related to an upcoming release?

NB: The Carbon team will try to work with your timeline, but it’s not guaranteed. The earlier you make a request in advance of a desired delivery date, the better!

Available extra resources

What resources do you have to assist this effort?

Carbon is a collaborative system. We encourage teams to build components and submit them for integration as either add-ons or core components.

[ariellalgilmore]

Hi @joshblack sorry for the delay. We are using the css custom property feature flag but when adding the alpha value to rgba($ui-background, 0.6) the opacity does come into effect.

cc: @proeung

[tay1orjones]

I was curious if there are any other specific uses you know have for having RGBA-specific tokens?

@laurenmrice I can’t really think of any solid use cases for RGBA tokens - to my knowledge none of our established patterns rely on transparency.

Looking again at the original use case provided by @ariellalgilmore, I think the best course of action would be to recommend using the color functions built into sass to support “transparentizing” the existing hex values.

Here’s an example of transparent gradients using the existing tokens and the sass color function adjust()

@use 'sass:color';
@use '@carbon/react/scss/colors';

.gradient {
  background: radial-gradient(
      color.adjust(colors.$yellow-50, $alpha: -0.7) 40px,
      transparent 0,
      transparent 100%
    ),
    radial-gradient(
      color.adjust(colors.$blue-40, $alpha: -0.5) 40px,
      transparent 0,
      transparent 100%
    ),
    radial-gradient(
      color.adjust(colors.$red-30, $alpha: -0.3) 40px,
      transparent 0,
      transparent 100%
    ),
    snow;
  background-blend-mode: multiply;
  background-size: 100px 100px;
  background-position: 0 0, 33px 33px, -33px -33px;
}

For now I don’t see a need to add RGBA values to the tokens themselves. If anyone has further info or use cases to consider, let us know and we can discuss reopening this issue.