Inheritance and overwriting in Composition tokens

[esthercheran]

It would be great if Composition tokens could inherit properties from other composition tokens and overwrite some of the properties. For example: I have a composition token button which defines the following properties:

• border radius
• paddings
• fill
• border width
• border color

I want to create another composition token button-cta which inherits all the properties of button but overwrites the fill and the border color with different values.

[six7]

@esthercheran how would the json of that look like?

[bewarai]

Well in css this is inherit. div { color: blue; } .extra div { color: inherit; }

In this ex. You would have an auto lay-out in an auto-lay-out. The auto-layout extra-div would inherit it's color from the auto-layout parent. This would result in a json like this

"Inherit": { "value": "inherit", "type": "color"

but more complex could be

"Mobile": { "padding": { "wrapper": { "value": { "paddingTop": "inherit", "paddingBottom": "{sp-0}", "paddingRight": "{sp-12}", "paddingLeft": "{sp-12}" }, "type": "composition" }

[six7]

Yeah that makes sense, but inheritance from an apply side. But i dont know about value: inherit.

Shouldnt we just inherit color by default? In css color inherits, border-radius doesnt. That makes sense to me as a default and i wouldnt want to apply inherit on every layer?

[bewarai]

I would not have it by default. Inherit is something you have to choose. The thing is if you add just inherit it's hard to see where its value comes from? You would want to have that knowledge too.

[six7]

Related issue with some more context, which I feel is better shaped than this one: https://github.com/tokens-studio/figma-plugin/issues/1614

I'll close this one, let's track the other and keep discussion there.