Motivation 1: we want our design team to be able to push styling changes at a component attribute level directly from Figma to our UI library, without developer intervention.

Motivation 2: we want to white-label our UI library for various clients.

Current limitations: we can define semantic tokens for each component attribute: e.g. . This token would link to a "real" semantic token like or similar. In both of the scenarios above, the primary button border might need to point at a different semantic token at some point, either when switching to a different brand or in a future redesign.

Defining tokens in this way is fine until we roll out the same concept to all the UI library components. We may end up with many thousand semantic tokens, each of which is included in the production runtime and static CSS. The many-to-one relationship results in a lot of duplication.

We would like to be able to define component tokens so that they can be resolved to the linked semantic tokens at build time so that they are not included in the shipped code.

For more detail please see the Discord discussion: https://discord.com/channels/1118988919804010566/1202629680273031230

Workaround: for now we have worked with our design team to implement real semantic tokens wherever possible and only use "component" tokens in highly unique components, and live with a little more developer intervention where we need to subdivide semantic tokens for better control.