Style-dictionary: How to handle colors with transparency?

[davixyz]

I've been trying to figure it out how to add a transparent variant of a color.
something like this:

{
  "color": {
    "base": {
      "transparent": { "value": "#DDFF3300"}
  }
}

Normally in CSS you would use the word transparent but I know that's not cross platform compatible, so I was thinking maybe of using the hex8 value in here, so a total transparent could be #00000000.
When I run this with

    scss: {
      transformGroup: 'scss',
      buildPath: 'build/',
      files: [{
        destination: 'scss/variables.scss',
        format: 'scss/variables',
      }],

I'm just getting the first 6 values due to this group only handling the transforms as hex. Is there a way to specify a custom transform at property level? or how would I go about this... searched a lot in the docs and I ended up a little bit more confused on how to handle this.

[davixyz]

I was able to do what I wanted like this:
https://gist.github.com/davixyz/9d5132397e751f21674a6b86a3257a18

But I think there must be a more elegant approach to this... is there a better way?

[dbanksdesign]

You can actually do this if you use the 'color/rgb' transform. It will automatically output rgb(0,0,0) or rgba(0,0,0,0.5) depending on if the original color has transparency. You can use 8bit hex, rgba/rgb string, or rgb(a) object in the style dictionary JSON. Does that make sense?

Maybe we should change the 'scss' transformGroup to use the 'color/rgb' transform instead of 'color/hex'.

[davixyz]

Hmm you are right, by configuring color/rgb it automatically resolves to rgb or rgba as needed. I like using hex on my color variables for SCSS and RGBA when there's transparency so I think there's value to customize the output on a more granular level.

What do you think of the ability to append custom transform to a given transform group (for instance SCSS) so I can take all the good things you already have in group but also be able to provide my custom ones that I can specify through the registeTransform method through a matcher. Problem I had was that I wanted to use the SCSS group but add a custom transform to only match a single property but I couldn't do it for the SCSS group... so I had to create another one and replicate all the transforms on SCSS

[dbanksdesign]

Updated your gist: https://gist.github.com/dbanksdesign/a0cec31947d33efb9a81076cd89b53bc

[dbanksdesign]

Updated the gist, you can use lib/common/transformGroups which hold the included transformGroups, then you can append more transforms on it.

Note, in the gist in the transform I'm using prop.original.value because the color/hex transform would have already run and turned the value into a normal hex.

Maybe we should just add the transform in the updated gist and use it in the default 'scss' transformGroup?

[davixyz]

Interesting the good thing is that the library has the flexibility of doing the same thing in multiple ways; If this a use case it's not needed to support I think I could do it manually.

Closing this because I got good answers

[jkinley]

Hey there. I am using a default installation of 3.0 rc2. Is there no way to have transparent colors without using custom transforms?

[dbanksdesign]

You can have colors with transparency without custom transforms as long as you aren't trying aliasing/referencing a color and then trying to add transparency to it. For example these should work:

{
  "color": {
    "red": { "value": "#ff0000cc" },
    "green": { "value": { "h": 120, "s": 0.5, "l": 0.5, "a": 0.5 } },
    "blue": { "value": { "h": "{hue.blue}", "s": 0.5, "l": 0.5, "a": 0.5} }
  },
  "hue": {
    "blue": 200
  }
}

Does that help?

[jkinley]

@dbanksdesign Actually, what I was trying to achieve is complete transparency. So for example, a secondary button, with no background. I am eventually going to dive into customizations (once I get through a presentation Friday!) but for now just trying to define complete lack of color. Thanks!

[dbanksdesign]

OH! My bad I totally misunderstood. You could use either of these:

    "clear": { "value": "transparent" },
    "otherClear": { "value": "#f000" },

Or really any color with 0 alpha channel. Style Dictionary uses tinycolor2 for color transforms at the moment, which understands CSS named colors like "transparent".

[jkinley]

@dbanksdesign No worries. Probably my bad question! Anyway, when I do what you suggest it transforms to $color-base-clear: rgba(0, 0, 0, 0);, but it is showing up as black in my app. Pretty sure is me doing something silly. Maybe its a React app issue.

[dbanksdesign]

Hmm, rgba(0,0,0,0) is valid CSS and would be fully transparent. I just tried that code in a React + Sass app I have running for a side project and it works. Could you inspect that element and see if there is anything weird going on?

[jkinley]

@dbanksdesign Ah, I figured out the issue. For my demo, I am outputting variables.js for use in Styled Components. The transform for this results in #00000, while the Sass output is rgba(0,0,0,0). Not sure if this is intended or not, but either way it it time for me to start digging into a custom setup.

// variables.js

export const ColorBackgroundButtonSecondaryDefault = "#000000";

// Sass

$color-background-button-secondary-default: rgba(0, 0, 0, 0);

[dbanksdesign]

OH! Ok I know what is going on now! You are using the js transformGroup which uses the color/hex transform which always outputs a 6-digit hex, so that is why you are getting #000000. Quick fix would be to replace the transformGroup in your configuration with:

"transforms": ["attribute/cti", "name/cti/pascal", "size/rem", "color/css"],

[jkinley]

@dbanksdesign Yeah, starting to figure out how to make customizations. Thanks for your help.