Page MenuHomePhabricator

Tokens: Color subtle features different color than WikimediaUI Base's and evaluate 'accessory'
Closed, ResolvedPublic

Assigned To
Authored By
Volker_E
Jul 21 2022, 12:56 PM
Referenced Files
F35328617: Captura de Pantalla 2022-07-21 a las 17.25.05.png
Jul 21 2022, 3:28 PM
F35328605: Captura de Pantalla 2022-07-21 a las 15.08.17.png
Jul 21 2022, 3:28 PM
F35328598: Captura de Pantalla 2022-07-21 a las 17.21.19.png
Jul 21 2022, 3:28 PM
F35327710: image.png
Jul 21 2022, 12:56 PM
F35327706: image.png
Jul 21 2022, 12:56 PM
F35327704: image.png
Jul 21 2022, 12:56 PM
F35327699: image.png
Jul 21 2022, 12:56 PM

Description

Background

Current Codex Color tokens definition features color-subtle with value Gray 600 (#54595d).
In WikimediaUI Base that has been defined as #72777d

We've also need to feature disabled items with the lowest acceptable gray, currently Gray 500 (#72777d)

A special case are placeholders which are only used on White background and are also acceptable as Gray 500.

Quest

Do we need an additional accessory color in order to

  • set apart certain text color combinations of disabled and
  • provide an level AA conformant color when used on lighter grey backgrounds

Option 1

  • Leave subtle as is with the slightly lighter Gray 500 or #72777d and add another accessory color with Gray 600

Option 2

  • Change subtle to Gray 600 and unify on one token.

Decision of 2022-08-05

Coming out of T313502#8094922:

  • accessory is replaced by subtle
  • subtle remains Gray 600 (#54595d)
  • Several use cases of current (legacy) accessory are replaced by disabled.

Captura de Pantalla 2022-07-21 a las 17.21.19.png (586×1 px, 251 KB)


Further information
Current usage of lighter subtle

https://codesearch.wmcloud.org/search/?q=base--subtle&i=nope&files=&excludeFiles=&repos=

OOUI

VisualEditor

CurrentProposal
image.png (319×345 px, 21 KB)
…the accelerator keys
image.png (307×330 px, 23 KB)
With unified subtle color (option 1)

Somewhat acceptable, but harder to guide focus

Dropdown with MenuSectionOptionWidget

CurrentProposal
image.png (220×717 px, 22 KB)
image.png (225×715 px, 23 KB)

Somewhat acceptable, but could be mistaken as interactive items

Additional concerns tokens-wise

How to deal with T286851: [Search] Lighten color of search thumbnail placeholder icon?

Dev note

Related Objects

StatusSubtypeAssignedTask
Duplicate STH
InvalidNone
ResolvedVolker_E
ResolvedNone
Resolvedbmartinezcalvo
ResolvedVolker_E
ResolvedVolker_E
ResolvedSarai-WMDE
Resolved DAbad
ResolvedVolker_E
Resolvedbmartinezcalvo
Resolved KieranMcCann
OpenNone
DuplicateNone
ResolvedVolker_E
Resolved DAbad
ResolvedVolker_E
Resolved DAbad
ResolvedSarai-WMDE
ResolvedCatrope
OpenNone
Resolvedovasileva
ResolvedBUG REPORTVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedSarai-WMDE
ResolvedVolker_E
Resolvedbmartinezcalvo
ResolvedCatrope
Resolved DAbad
ResolvedVolker_E

Event Timeline

@Volker_E thank you for flagging all possible options and use cases examples.

I would go with Option 2 (update subtle from #72777D to #54595D) and in this way we would have the following gray tokens:

  • Subtle: text/icons that shouldn't be distracting (e.g. subtitles)
  • Placeholder: text/icons for placeholder in form items
  • Disabled: non interactive texts (it could also be renamed to Inactive as we have in other tokens as border-color-inactive

Captura de Pantalla 2022-07-21 a las 17.21.19.png (586×1 px, 251 KB)

Regarding the examples you comment in the description:

Captura de Pantalla 2022-07-21 a las 15.08.17.png (836×1 px, 654 KB)

  1. I think in this case we should use color-disabled for the keys indicators since color-subtle more for thinks like secondary/descriptive texts.

Captura de Pantalla 2022-07-21 a las 17.25.05.png (532×2 px, 402 KB)

  1. And in these other case the title of each section could use color-disabled too since they are non interactive menu-items (without hover or select states).

This works clear and is greatly fitting into the code base right now!