feature: support color reference to build a more flexible color scheme

[GeekSquirrel]

Is your feature request related to a problem? Please describe.

I tried to use the color scheme of vuejs official website and found their way to build theme.
First they defined a set of color.

Then they built theme by referencing the color they had defined before.

But I can't do something like this with penpot.

Describe the solution you'd like.

Support color reference, which means I can create a color name which points to another existed color name.
Then I can define a set of color names (like red-100, orange-100), which are the "source of truth".
The I can build any color schemes by referencing those basic color names. And I can use more specific names in these color schemes, like bg-color-1, text-color-1.

Describe alternatives you've considered.

No response

Additional context

No response

[madalenapmelo-kp]

Hi @GeekSquirrel,

Thanks for the suggestion! We already have an enhancement in our backlog to explore this option though it hasn't been prioritized yet, you can find the details here: https://tree.taiga.io/project/penpot/issue/4135

[GeekSquirrel]

@madalenapmelo-kp Thanks for your reply.
I have checked the previous issue #1486. It seems that solution is focused on “color group”, like creating alias for “color group”. But my solution is focused on "color". I think my solution could be more generic and be more consistency with var() function in css. Maybe you can make mention of this issue in that Taiga issue. So this could be a potential solution for you to reference.