ingrammicro / puzzle-tokens

Batch create, manage and update Sketch styles and symbols using SCSS/LESS
GNU General Public License v3.0
92 stars 17 forks source link

[Request] Link color variable into the layer/text style #36

Closed tgt95 closed 4 years ago

tgt95 commented 4 years ago

Your plugin is very useful! Can I link the color variable to the layer style or text style? I want those styles will link with the color variable.

MaxBazarov commented 4 years ago

The idea is reach. Could you imagine how It can look in LESS/SASS?

On 10 Nov 2020, at 22:12, Trinh Gia Tuan notifications@github.com wrote:

Your plugin is very useful! Can I link the color variable to the layer style or text style? I want those styles will link with the color variable.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ingrammicro/puzzle-tokens/issues/36, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEMQVAWJ6ANDJEWRJMMDUZ3SPGGDTANCNFSM4TRBT26Q.

tgt95 commented 4 years ago

In my idea, do we have Sketch properties about Color Variables? It's will attach to the code. Example:

.--COLORS-{
    .Transparent{
        // This will create a Color variable has a name is [Transparent]
        background-color: rgba(black, 0);
    }
}

.Transparent{
    // This will create a Layer style has a name is [Transparent]
    background-color: rgba(black, 0);
    // In my imagine
    --sketch-inherit-color-prop: 'Transparent';
}

Just an idea, If it doesn't work like that, please ignore this.

MaxBazarov commented 4 years ago

Ok. I understand the idea. Let me investigate it deeply.

On 11 Nov 2020, at 06:20, Trinh Gia Tuan notifications@github.com wrote:

In my idea, do we have Sketch properties about Color Variables? It's will attach to the code. Example:

.--COLORS-{ .Transparent{ // This will create a Color variable has a name is [Transparent] background-color: rgba(black, 0); } }

.Transparent{ // This will create a Layer style has a name is [Transparent] background-color: rgba(black, 0); // In my imagine --sketch-inherit-color-prop: 'Transparent'; }

Just an idea, If it doesn't work like that, please ignore this.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ingrammicro/puzzle-tokens/issues/36#issuecomment-725110314, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEMQVAXJGROLL6UDL7EBXUTSPH7JNANCNFSM4TRBT26Q.

tgt95 commented 4 years ago

Thanks for your answer! 👍

MaxBazarov commented 4 years ago

Fixed in 8.15.0 See the following example:

.--COLORS-{ .Transparent{ color: black; } }

.Transparent{ background-color: "Transparent";

}