Hi all,

Here you can find the Opacities tokens spec sheet, where you can view the following sections:

1. Global opacities values: opacities applied to all the element (can be used to reduce opacity to images and group of elements). This opacity values will be used to create the colors with opacities.
2. Colors with opacities: current opacities used in our projects, just found the light and dark opacities.
3. Legacy opacities: opacities applied to icons (we decided with @Volker_E and @Sarai-WMDE to let this section as legacy with a note to evite using them).

Regarding the Global opacities, I have created 2 options:

• Option A: documenting only our 3 current opacity values.
• Option B: with all the opacity values scale done (this option allows us to have a meaningful scale created by ourselves, and prevent designers from creating new opacities without much meaning in the future).

Regarding the overlay styles, before move forward with them we need to have done this task about the overlay styles https://phabricator.wikimedia.org/T299212

Please, give me your feedbacks to move forward with option A or B.

View Figma file here.

cc: @Volker_E @Sarai-WMDE @iamjessklein

What I'm currently missing is examples for applications for Option B.
We should always define our tokens around real applications otherwise the interfaces in our multi-team environment tend to inconsistencies by originally unintended combinations.

In case of the opacities it might not be the crucial issue, so I will leave it up to other designer's feedback what we move forward with, 3 or 5. But I might flag such for other token group definitions.

We should always define our tokens around real applications otherwise the interfaces in our multi-team environment tend to inconsistencies by originally unintended combinations.

Following the proposal of documenting only our real applications, I have moved forward with this final proposal (view Figma here).

On left we have the Global tokens (100%, 65% and 0%) and on right we have the Decision tokens in where we have the overlay opacities (light and dark with 65%) and some other opacities that we decided to leave as legacy.

@Volker_E you can add this tokens to Codex once we have the confirmation of @iamjessklein

+1 to the proposal.

I made a few copy changes directly into the document.
The figma file should be reviewed by a few other designers to make sure that they understand all of the copy here (and they should try to follow the instructions).

@iamjessklein I have been reading your Figma comments and I have created this new proposal in which I think it's better understood that spec sheet on left are Global tokens (choices) and spec sheet on right are Decision tokens. I have done the following updates:

• I have separated the Global from the Decision in different sheets (to point out that they are different things)
• I have added some examples to the Global opacities (imaginary use cases)
• Also, I have designed the Decision tokens with circles to explain that they are not the same as Global tokens

View Figma proposal here

What do you think? Is this proposal better understood than the previous one?

Thanks for the update @bmartinezcalvo this proposal is clearer. I think that the circle for colors helps to show that it is in fact different.

Are you able to add example of Decision opacities in use so that it has parity with the Global opacity section?

Change 758878 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] tokens: Update `opacity` global and decision tokens to agreed design

https://gerrit.wikimedia.org/r/758878

Change 758878 merged by jenkins-bot:

[design/codex@main] tokens: Update `opacity` global and decision tokens to agreed design

https://gerrit.wikimedia.org/r/758878

After reviewing all our tokens nomenclature I have done some updates in the opacities nomenclature:

• All the Global tokens have numerical nomenclature.
• All the Decision tokens have names related with their use cases.
• We will use 100 as base opacity number (100% opacity) and we will use the numbers less than 100 to represent the opacity 65% and 0%.

Here you can view the final proposal.

Change 769420 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] tokens: Add legacy `opacity` tokens

https://gerrit.wikimedia.org/r/769420

Hi @Volker_E

As you know, we need to add a new 0.3 opacity value in our system tokens since we are using opacities on hover and active framed tabs (T303321). Currently the framed tabs are using 0.3 for hover and 0.8 for active. As we have 0.65 opacity in our system, we can use 0.65 for active (instead of 0.8, I've test it and fits perfectly) and create 0.30 opacity to use it on hover.

I've added this new 0.3 opacity value for the following global and decision tokens:

• Global token: opacity-30
• Decision token: opacity-small

Here you can view the Figma file with this new value added as global and decision opacity tokens.

Note: As we will use both 0.3 and 0.65 opacities in different components, I've tested them in some of the components were we could use them:

• Framed tabs: Hover (0.30 and active (0.65) on framed tabs.
• Quiet buttons: Hover (0.3) and active (0.65) on quiet buttons. Since we need to do this task T304152 to use opacities for quiet buttons, we could use 0.3 and 0.65 opacities for this task too.

In all cases both the 0.3 opacity works well with the components, which indicates that this new 0.30 value could be used in more components apart from the framed tabs (creating it for this concrete cases now but thinking in possible future uses).

@Volker_E tell me if you have problems with adding this new tokens to the system now since this task is in Code Review. Also tell me if these new tokens fits with the rest of opacity tokens.

Change 775485 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] tokens: Add `0.30` valued opacity token and update naming

https://gerrit.wikimedia.org/r/775485

@Volker_E as we commented yesterday during our Design System Sync, I've updated the decision tokens opacities in Figma using the following names:

• High (instead of Base)
• Medium
• Low (instead of Small)
• Transparent (instead of None)

@bmartinezcalvo All tokens are merged. The Figma file can be published accordingly.

@Volker_E I've added the opacity tokens spec sheet in the Figma library. Opacities styles will be created in Figma when we add the color tokens (since they have color and opacity applied).

Change 769420 merged by jenkins-bot:

[design/codex@main] tokens: Add legacy `opacity` tokens

https://gerrit.wikimedia.org/r/769420

Change 775485 merged by jenkins-bot:

[design/codex@main] tokens: Add `0.30` valued opacity token and update naming

https://gerrit.wikimedia.org/r/775485