Style-dictionary: Feature Request / new formats: unitless line-heights, css/var-deep

[tonyjwalt]

I know you're trying to limit new formats, so you can stop here and close the issue if you don't want them...

I wrote a few quick formats for myself that I thought would be useful to share if people want them. If wanted I can work on an MR to pass them along.

Unitless Line Heights (when both values are provided from design in absolute units)
This works better with the object transform step I filed to dynamically add the "base-font-size"

{
  "typography": {
    "xxs": {
      "title1": {
        "size": { "value": 21, "attributes": { "category": "size" } },
        "line-height": { "value": 28, "base-font-size": 21 }
    }
  }
}

css/var/deep
An output like this allows the consuming application to adjust the theme on the fly.

:root {
  --kite-color-base-blue-20: #0073d1;
  --kite-color-primary: var(--kite-color-base-blue-20);
  --kite-border-color-primary: var(--kite-color-primary);
  --kite-button-primary-background-color: var(--kite-color-primary);
}

[fredriklind]

@tonyjwalt Cold you share the css/var/deep format? I need something similar and haven't figured out how to do it yet.

[tonyjwalt]

@chazzmoney, is it cool to share a link here? If not, please feel free to yell at me.

@fredriklind, I've pushed the code into a forked repo that I use for contributing. It's in this folder: https://github.com/tonyjwalt/style-dictionary/tree/feature/cssVarDeep/examples/custom-formats

Please note that I've only written about half of the unit test; so there may be use cases it doesn't support yet.

[chazzmoney]

@tonyjwalt This is great stuff!

Would like to see about adding them. Can you submit a PR for each format separately? That way we can examine each individually.

[chazzmoney]

I know we've been weird about too many formats because we have concerns about being able to maintain them... but I think some of what you are doing is becoming mainstream these days and is missing. A PR provides a nice space for us to discuss.

[tonyjwalt]

I created one for CSS Var Deep. I figured it'd be best to start a conversation there. It has extra support for CSS variables flat, supports quoted and unquoted string data-types, and splitting out dark mode tokens. I can totally rip that out if it makes things easier. Take a look, let me know, and I'll go from there.