Page MenuHomePhabricator

[Darkmode] Update colours on statement editing state on Items
Closed, ResolvedPublic

Description

When editing statements on Items in Darkmode the colours are appearing incorrectly:

  • Visit Item
  • Add a reference to one of the Statements
  • Add a new value to one of the Statements

Screenshot

image.png (493×1 px, 33 KB)

Figma file and where the corresponding codex tokens can be found.
To find the correct token, find the hex color in the figma file on light mode version. Then search for it in codex document

Acceptance Criteria

  • The colours for the elements in the statement editing state on Items have been converted to their equivalent Codex colour tokens in light-mode

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
mediawiki/extensions/WikibaseREL1_44+1 -1
mediawiki/extensions/WikibaseREL1_44+1 -1
mediawiki/extensions/Wikibasemaster+3 -3
mediawiki/extensions/Wikibasemaster+4 -4
data-values/value-viewmaster+16 -10
data-values/value-viewmaster+34 -3
mediawiki/extensions/Wikibasemaster+12 -3
mediawiki/extensions/Wikibasemaster+4 -0
mediawiki/extensions/Wikibasemaster+1 -1
mediawiki/extensions/Wikibasewmf/1.44.0-wmf.28+1 -1
data-values/value-viewmaster+1 -2
mediawiki/extensions/Wikibasewmf/1.44.0-wmf.28+1 -1
mediawiki/extensions/Wikibasemaster+1 -1
data-values/value-viewmaster+1 -1
mediawiki/extensions/Wikibasemaster+3 -3
data-values/value-viewmaster+7 -7
mediawiki/extensions/Wikibasemaster+8 -5
mediawiki/extensions/Wikibasemaster+4 -1
mediawiki/extensions/Wikibasemaster+15 -0
mediawiki/extensions/Wikibasemaster+1 -1
Show related patches Customize query in gerrit

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change #1135447 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Update reference tab bar header for dark mode

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

There are a couple more colors that I think are in scope for this task, and that I can’t find in Figma at the moment:

The suggester list:

image.png (146×579 px, 17 KB)

Current state (jquery.ui.suggester.css): background white, border #C9C9C9, color black; on hover, background #4C59A6, color white; the “more” link (when there are enough results), background #f8f9fa.

And the error colors (e.g. after typing something without selecting a suggestion):

image.png (67×563 px, 6 KB)

Current state (jquery.wikibase.entityselector.less): background #fee7e6, border #b32424.

There are other minor parts with hard-coded colors (like the popups for selecting the unit of a quantity or the language of a monolingual text), but IMHO they’re not as important (all the ones I found were still usable, and as they’re a small part of the screen, they don’t burn your eyes out with their brightness either), so I think it would be better to leave them out of this task, and clean them up later after we’ve enabled dark mode on Wikidata.

Pulldown Solution:
Find it on this board:
https://www.figma.com/design/JU89C2lnmWLoadkYwJroNT/Wikidata-Ongoing-Tickets?node-id=474-15676&t=VGFG9Udgv8c0B21h-1

we go here for state: "active" - just one status (like before)

Error:
Find it on this board:
https://www.figma.com/design/JU89C2lnmWLoadkYwJroNT/Wikidata-Ongoing-Tickets?node-id=511-11106&t=VGFG9Udgv8c0B21h-1

Change #1137307 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[data-values/value-view@master] Use Codex tokens for UI suggester colors

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

Change #1137308 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@master] WIP: Update entity selector error color for dark mode

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

Pulldown Solution:
Find it on this board:
https://www.figma.com/design/JU89C2lnmWLoadkYwJroNT/Wikidata-Ongoing-Tickets?node-id=474-15676&t=VGFG9Udgv8c0B21h-1

we go here for state: "active" - just one status (like before)

Mostly done with the above change – looks like this:
Screenshot From 2025-04-17 16-24-47.png (144×372 px, 12 KB) Screenshot From 2025-04-17 16-24-54.png (144×372 px, 12 KB)

But I still need the background color for the “more” link. Originally it looks like this:
Screenshot From 2025-04-17 16-26-50.png (95×711 px, 9 KB) Screenshot From 2025-04-17 16-26-53.png (95×711 px, 9 KB)

However, with the above changes, it looks like this, which is horrible (if you can read the text in hover state, congratulations on your excellent eyesight and well-calibrated monitor):
Screenshot From 2025-04-17 16-28-41.png (95×711 px, 9 KB) Screenshot From 2025-04-17 16-28-44.png (95×711 px, 9 KB)

What should its background color (normally and perhaps on hover) be? (On hover the old version just has the same background as other list items, so we don’t necessarily need a special token there, but on non-hover it has a different color to set it apart from the “regular” search results.)

Partly done, looks like this:
Screenshot From 2025-04-17 16-39-37.png (51×374 px, 2 KB) Screenshot From 2025-04-17 16-39-39.png (51×374 px, 2 KB)

But I noticed there’s another item I didn’t mention before (sorry) – the “no match” list item after you do a search with no results:

Screenshot From 2025-04-17 16-40-39.png (83×374 px, 4 KB)

What color(s) should this have? (It currently doesn’t have any special hover styles, though we could change that if we want to.)

karapayneWMDE changed the task status from Open to Stalled.Apr 25 2025, 8:25 AM

Dear @LucasWerkmeister & @Arian_Bozorg:

Everything looks good to me! Nice.

Lets use for the "more" link the same active state then for the others:
https://www.figma.com/design/JU89C2lnmWLoadkYwJroNT/Wikidata-Ongoing-Tickets?node-id=474-6954&t=SyiNlUlqXGduXzPi-1

image.png (474×1 px, 65 KB)

And for "no match found" I could not really find a component in codex except of this (can we do this or do you have any concerns?):
https://www.figma.com/design/JU89C2lnmWLoadkYwJroNT/Wikidata-Ongoing-Tickets?node-id=474-6954&t=SyiNlUlqXGduXzPi-1

image.png (470×906 px, 27 KB)

And for "no match found" I could not really find a component in codex except of this (can we do this or do you have any concerns?):
https://www.figma.com/design/JU89C2lnmWLoadkYwJroNT/Wikidata-Ongoing-Tickets?node-id=474-6954&t=SyiNlUlqXGduXzPi-1

image.png (470×906 px, 27 KB)

Definitely not, that’s way beyond what we can do in the scope of this task IMHO. It’s currently implemented as a special dropdown entry, all we can do is change its colors.

Change #1140179 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@master] Update entity selector colors for dark mode

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

Alright, done in the above change. Looks like this normally:
Screenshot From 2025-04-30 15-21-34.png (138×717 px, 20 KB) Screenshot From 2025-04-30 15-21-39.png (138×717 px, 21 KB)
And on hover:
Screenshot From 2025-04-30 15-21-44.png (138×717 px, 21 KB) Screenshot From 2025-04-30 15-21-47.png (138×717 px, 21 KB)
(These screenshots just made me notice that the “normal” list entry color on hover is apparently the same as the “more” color when not hovered… but that’s probably not a problem in practice.)

Change #1135059 abandoned by Lucas Werkmeister (WMDE):

[mediawiki/extensions/Wikibase@master] WIP: Reorganize reference background colors

Reason:

gonna abandon this now after all, seems less confusing this way

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

I’ll move this task into peer review – the error color change isn’t ready yet, but the entity selector changes in value-view and Wikibase should be ready for review.

karapayneWMDE changed the task status from Stalled to In Progress.May 5 2025, 8:24 AM

Change #1137307 merged by jenkins-bot:

[data-values/value-view@master] Use Codex tokens for UI suggester colors

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

Change #1140179 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Update entity selector colors for dark mode

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

karapayneWMDE subscribed.

All changes are completed. waiting for feedback on a specific color

Alright, done in the above change. Looks like this normally:
Screenshot From 2025-04-30 15-21-34.png (138×717 px, 20 KB) Screenshot From 2025-04-30 15-21-39.png (138×717 px, 21 KB)
And on hover:
Screenshot From 2025-04-30 15-21-44.png (138×717 px, 21 KB) Screenshot From 2025-04-30 15-21-47.png (138×717 px, 21 KB)
(These screenshots just made me notice that the “normal” list entry color on hover is apparently the same as the “more” color when not hovered… but that’s probably not a problem in practice.)

Hey @LucasWerkmeister

I documented the default state and active state in Figma, this is what codex defined.
But I would keep the thin line as it is.
What do you think?

Bildschirmfoto 2025-05-09 um 13.39.48.png (1×2 px, 164 KB)

Change #1143792 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[data-values/value-view@master] Fix hard-coded --background-color-base fallback value

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

Change #1143793 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@master] Bump wikibase-data-values-value-view to HEAD

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

Change #1143795 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@master] Convert value-view CSS files with tokens to LESS files

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

Change #1143796 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[data-values/value-view@master] Convert CSS files with tokens to LESS files

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

Change #1143792 merged by jenkins-bot:

[data-values/value-view@master] Fix hard-coded --background-color-base fallback value

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

Change #1143793 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Bump wikibase-data-values-value-view to HEAD

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

Change #1143832 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[data-values/value-view@master] Change UI suggester hover foreground to color-base

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

Change #1143834 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@master] Bump wikibase-data-values-value-view to HEAD

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

Change #1143835 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@wmf/1.44.0-wmf.28] Bump wikibase-data-values-value-view to HEAD

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

Change #1143835 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@wmf/1.44.0-wmf.28] Bump wikibase-data-values-value-view to HEAD

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

Mentioned in SAL (#wikimedia-operations) [2025-05-09T14:07:29Z] <lucaswerkmeister-wmde@deploy1003> Started scap sync-world: Backport for [[gerrit:1143835|Bump wikibase-data-values-value-view to HEAD (T389633 T393641)]]

Mentioned in SAL (#wikimedia-operations) [2025-05-09T14:14:10Z] <lucaswerkmeister-wmde@deploy1003> lucaswerkmeister-wmde: Backport for [[gerrit:1143835|Bump wikibase-data-values-value-view to HEAD (T389633 T393641)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2025-05-09T14:21:41Z] <lucaswerkmeister-wmde@deploy1003> Finished scap sync-world: Backport for [[gerrit:1143835|Bump wikibase-data-values-value-view to HEAD (T389633 T393641)]] (duration: 14m 12s)

Change #1143841 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@REL1_44] Bump wikibase-data-values-value-view to HEAD

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

Change #1143832 merged by jenkins-bot:

[data-values/value-view@master] Change UI suggester hover foreground to color-base

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

Change #1143851 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@wmf/1.44.0-wmf.28] Bump wikibase-data-values-value-view to HEAD

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

Change #1143834 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Bump wikibase-data-values-value-view to HEAD

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

Change #1143859 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@REL1_44] Bump wikibase-data-values-value-view to HEAD

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

Change #1143851 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@wmf/1.44.0-wmf.28] Bump wikibase-data-values-value-view to HEAD

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

Mentioned in SAL (#wikimedia-operations) [2025-05-09T15:25:42Z] <lucaswerkmeister-wmde@deploy1003> Started scap sync-world: Backport for [[gerrit:1143851|Bump wikibase-data-values-value-view to HEAD (T389633 T393641)]]

Mentioned in SAL (#wikimedia-operations) [2025-05-09T15:32:20Z] <lucaswerkmeister-wmde@deploy1003> lucaswerkmeister-wmde: Backport for [[gerrit:1143851|Bump wikibase-data-values-value-view to HEAD (T389633 T393641)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2025-05-09T15:41:04Z] <lucaswerkmeister-wmde@deploy1003> Finished scap sync-world: Backport for [[gerrit:1143851|Bump wikibase-data-values-value-view to HEAD (T389633 T393641)]] (duration: 15m 22s)

Change #1144504 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@master] Add entity selector error border using :has()

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

Change #1144505 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[data-values/value-view@master] Add support for list-wide CSS classes to our CustomItem fork

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

Change #1144506 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@master] Add entity selector error border color

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

The error change is now ready for review, in two parts:

Secret third option: UX says we can skip this, it’s not worth the added complexity. (The current UI doesn’t have a red border in this case either.)

Change #1144504 abandoned by Lucas Werkmeister (WMDE):

[mediawiki/extensions/Wikibase@master] Add entity selector error border using :has()

Reason:

not needed per T389633#10811616

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

Change #1144506 abandoned by Lucas Werkmeister (WMDE):

[mediawiki/extensions/Wikibase@master] Add entity selector error border color

Reason:

not needed per T389633#10811616

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

Change #1144505 abandoned by Lucas Werkmeister (WMDE):

[data-values/value-view@master] Add support for list-wide CSS classes to our CustomItem fork

Reason:

not needed per T389633#10811616

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

Change #1137308 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Update entity selector error colors for dark mode

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

Change #1143796 abandoned by Lucas Werkmeister (WMDE):

[data-values/value-view@master] Convert CSS files with tokens to LESS files

Reason:

doesn’t seem worth the extra effort at the moment

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

Change #1143795 abandoned by Lucas Werkmeister (WMDE):

[mediawiki/extensions/Wikibase@master] Convert value-view CSS files with tokens to LESS files

Reason:

doesn’t seem worth the extra effort at the moment

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

Change #1143841 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@REL1_44] Bump wikibase-data-values-value-view to HEAD

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

Change #1143859 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@REL1_44] Bump wikibase-data-values-value-view to HEAD

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