Allow Compositions

[six7]

We should allows users to compose different tokens to Compositions:

e.g. a "Card" Composition could be composed of the following:

cards: {
  default: {
    borderRadius: $borderRadius.lg,
    fill: $colors.white,
    border: $colors.gray.200,
    shadow: $shadows.sm
  }
}

On the layer itself we store only the composition:
card.default

Should probably be different than Typography decisions in the sense that compositions can be composed of any token itself, whereas typography decisions have a fixed set of tokens they can reference. The UI should allow this in the sense that when creating a composition the user should be able to "select" an existing property to enter the desired value (and once we have a proper token selector this will be much easier to use).

[2frags]

Hi!
Thanks for the plugin)
Compositions looks like great idea .
Applying set of styles to an element - it's like a CSS class for HTML markup.
It's really gamechanging feature.
Do you have any plans to implement this idea?

[six7]

Currently the focus is rather on getting the next major release out and then work on more sync options with smaller QoL improvements. However, if somebody would like to work on this, PRs are welcome! 🙏

[MatthiasDunker]

Nice. About the approach of accessing composite tokens, I am wondering if this is kind of connected and should be part of the rework. After composition maybe something like {{current}} * 2 would be possible while {{current}} would be {typography.base.fontSize} which is a derived token. A derived composition could automatically have {{current}} as a default for every field before you edit it manually (just to keep it dynamic and not hard-inherit a token once, but keep it connected and updating).

[six7]

Nice. About the approach of accessing composite tokens, I am wondering if this is kind of connected and should be part of the rework. After composition maybe something like {{current}} * 2 would be possible while {{current}} would be {typography.base.fontSize} which is a derived token. A derived composition could automatically have {{current}} as a default for every field before you edit it manually (just to keep it dynamic and not hard-inherit a token once, but keep it connected and updating).

i'd love that! I think those are kind of connected, yes. It's basically changing how aliases are resolved, and with that could come a way to pick up the current values. I think there's other use cases for something similar - for example lineHeight picking up the current fontSize with {{current.fontSize}} * 1.4