Page MenuHomePhabricator

Tokens visualization: Show only decision tokens
Closed, ResolvedPublic

Description

Problem statement

With Codex tokens visualization available in first iteration for T295843, it seems important to settle on showing only decision tokens in Codex documentation.
The option tokens main importance is Figma file and their codified availability as references to be built upon in base and component tokens.
Devs would otherwise take option tokens (example font-size-80 into their implementations, resulting in issues with expanding or removing options from the DS.

Prior Art

WiKit has a way to remove their source WikimediaUI Base tokens with custom function removeWikimediaUiBaseVars( prop )

Accept criteria (or Done)

  • Remove option tokens from Codex documentation/visualization

Details

Event Timeline

@Volker_E I agree with showing only decision tokens in Codex. In fact, the idea with the Figma file was that, after updating all global and decision tokens in Codex, show only decision tokens and hide the global ones, leaving the token spec sheets as in the following image.

Captura de pantalla 2022-02-23 a las 10.53.33.png (2,716×704 px, 632 KB)

But, in the case of Color tokens, I think we should have visible both globals and decisions since the primitive palette is something important in all product brands and also it's easier to understand our colors with the global palette (all colors organized in a scaled way and seeing their gradient) than with the decision tokens (colors skipped and repeated). So I think we should remove global tokens only from some tokens, not from all.

Colors-Globals.png (2,014×2,839 px, 251 KB)
Colors-Decisions.png (4,456×2,839 px, 426 KB)

Similarly, other tokens such as Text Styles and Spacing could also be better understood if we show them in a scaled way and not skipped.

Thumbs-up to your approach, Bárbara 👍🏻 I think we can be more flexible in Figma.

So, as a result, I'm assuming that:

  1. The Codex demo page will only display decision tokens (base tokens)
  1. Figma will in general display decision tokens too, plus option tokens if they can help support meaning/ complete the picture for designers

➡ 3. The need to create further decision (from options or component tokens) or component tokens (from options) would be detected when a needed style is not recorded as a decision token and thus the app team needs/tries to use a concrete value (or a semantically incorrect base token that already exists (!)). The DS team will need to get involved in those cases to edit/expand on existing Codex tokens.

Change 775999 had a related patch set uploaded (by Catrope; author: Catrope):

[design/codex@main] docs: Hide theme tokens in the tokens documentation

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

STH changed the task status from Open to In Progress.Apr 15 2022, 9:13 PM
STH triaged this task as Medium priority.

Change 775999 merged by jenkins-bot:

[design/codex@main] docs: Hide theme tokens in the tokens documentation

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

Comments came up in code review about how theme color tokens shouldn't be hidden, but we decided to hide those for now, and address un-hiding them as part of T305272.

Will we finally delete global tokens from colors too? I think in this case we should have both global and decision tokens since we need to know which is our color palette.

Captura de pantalla 2022-04-19 a las 13.19.16.png (1,444×1,238 px, 686 KB)

@Volker_E I reviewed the task and it's all ok about hiding the option tokens in all tokens demo. But I'm still thinking that, in the case of colors we should have our primitive colors (options) visible since users will need to read our real palette to understand our colors better than with decisions where they jump from one to another without seeing a coherent scale between them. Also, I think the primitive colors demo should be displayed in a more horizontal way where the user can easily read the scale and correlation between all color tones.

Captura de pantalla 2022-04-28 a las 18.38.14.png (1,092×424 px, 511 KB)

What should we do @STHart ?

  1. Finish this task and open another to update our color tokens demo.
  2. Update our color tokens demo in this same task.
NBaca-WMF subscribed.

Setting Owner to Desiree for Product Sign-off