Generate additive tokens with rgb value outputs

[jkinley]

HI Lukas. I have a question on how we might go about doing something and think it could be of value to your repo.

So (sadly) we are supporting a Bootstrap theme and need some of our tokens to line-up with Bootstrap CSS Vars. One of the things they do is create CSS vars like this:

  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;

But because the hex values don't handle opacity, they also generate RGB values from these hex values, like so:

 --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;

So how do we go about handling this with Style Dictionary? My colleague Doug has worked out a custom transformer, but we still have some questions.

1. We only need this for a handful of the color tokens. We don't want to generate these RGB values for 100's of tokens. More like a dozen or so, but it would be nice to automate to reduce maintenance and errors.

2. Is there a way to 'handpick' or label specific tokens to be processed so that we retain the hex token but also output the RGB values for it as well?

3. Given that the W3C spec wants colors defined in Hex and they suggest conversion to other color spaces, how do you think is the best way to approach this?

[lukasoppermann]

Hey @jkinley,

firstly, hex values do work with opacity, the format is called hex8 and the last 2 digits are the opacity in hex.

1. You need to create a filter that can detect which colors need this. This could be as simple as adding a config file or an array with the token names in the filter or you could add a property like usesOpacity.

2. You can't output two tokens from one using a transformer. For this you need to create a custom format which can handle this.

3. I think the optimal way is to use hex8. If bootstrap needs the rgb values and hex values I would just create a format (this can be the filter and format in one, if this is the only place where you need to filter).

Hope that helps.

[jkinley]

firstly, hex values do work with opacity, the format is called hex8 and the last 2 digits are the opacity in hex.

Yes. I am aware of hex8, but that does not help us get the RGB values that we need for Bootstrap. We will look into your other suggestions. Thanks!

[kaelig]

Great use-case! This brings us to the potential need for a token object model (aka TOM), which isn't easy to codify, but I'll post this here so I can both plant the seed and subscribe to this thread.