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

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);
}

[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]

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.