Tokens, themes and highlighted text

[noraferreiros]

Hey!

Some context: I’m starting my switch to Penpot with a project imported from Figma which has a main design and some colour and typography variations. Tokens and themes are great for this but I’ve run into a problem when it comes to highlighting words within a text.

I know Design Tokens can’t be applied to editing text. So, is there any other way to make the text color change when changing the theme?

I’m sharing some screenshots^[1] in case it may be useful to understand what I’m talking about:

Thanks!

---

1. I’ve tried to attach a video —like in this topic— but I don’t know how to do it. I’d appreciate your help also on this. ↩︎

[IvanTheGeek]

a bit off the cuff here - but would not font color be something that can be applied when changing a token set?

[LauraKalbag]

You can apply design tokens to text elements. I think the confusion here might have come out of the error message that says you cannot apply a design token fill colour to text while you are editing the text inside the text element.

A separate issue for the mockup you’ve included here is that you cannot change the colour of the Amaranto text separately from the Block theme for WooCommerce text if it’s all included inside the same text element. (Although you can work around this by separating the text into multiple text elements, using flex layout to mimic the flow of text, and applying different colour design tokens to each element.)

[noraferreiros]

Yep, I understood the difference between not being able to apply the token while editing the text and being able to do so to the text layer when selected. The answer I was looking for is the one you suggested using Flex Layout (or another alternative, if any) to simulate the highlighted text which would be inside the same tag or block or whatever when coding. I’ll try to set it up with Flex Layout, then.

Thanks!

PD. Not sure if I’ve correctly reply to your comment @LauraKalbag ^^’ Still getting used to how the forum UI works—sorry!

[noraferreiros]

The font color changes when changing the token set (if you have assigned one which I haven’t done yet with all the text shown in the screenshot because I’m still in the process of migrating the project). The thing is that you cannot assign different token color (or other tokens) to different words in a same text element. You have to put each piece of text separately in order to assign different tokens and make the text change when switching sets or themes. I was wondering if another alternative existed for a design like the one on the screenshots.

[LauraKalbag]

@noraferreiros

The answer I was looking for is the one you suggested using Flex Layout (or another alternative, if any) to simulate the highlighted text which would be inside the same tag or block or whatever when coding. I’ll try to set it up with Flex Layout, then.

Fab. Let me know if you’re having any difficulty doing this, I can quickly mock you up an example of how I’d do it.

[noraferreiros]

It worked! I’m still learning about Flex and Grid Layout so this was a good practice. Thank you!

[LauraKalbag]

Fabulous! It’s really cool getting a sneak peek into a sophisticated design system like this!

Please let us know if you get stuck with anything else.