[WtC-M3] [QB] Use Codex tokens to style QB’s interface colors
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To

Authored By

	• Sarai-WMDE
	Mar 26 2024, 11:54 AM

Description

Problem

The Query Builder's user interface was styled using WiKit tokens. With the WiKit design system being superseded by Codex, the official Wikimedia design system. The utilization of WiKit tokens is not recommended, and they should be replaced in order to reduce maintenance costs and ensure consistency.

Solution

We have to replace the WiKit background and border color tokens used to style the Query Builder's interface by their Codex equivalents.

Figma specs

To support the replacement, here's a WiKit to Codex tokens mapping. You can find the WiKit tokens matched with their corresponding Codex token.

Considerations

Files where color tokens and/or variables are used (please beware the list might be incomplete!):

Acceptance criteria

WiKit tokens used to define the colors of the Query Builder app are replaced by Codex tokens

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Fix background color code	wikidata/query-builder	master	+5 -5
	Use Codex tokens to style QB’s interface colors	wikidata/query-builder	master	+45 -33

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	None	T327532 [EPIC] [WtC] Migrate WiKit-built products to Codex
Open	karapayneWMDE	T380280 [Epic] Deprecating Quality Tools functional team
Open	HasanAkgun_WMDE	T327680 [WtC] [EPIC] Migrate Query Builder to Codex
Open	None	T359864 [WtC-M3] [QB] [EPIC] Replace WiKit tokens by available Codex tokens
Resolved	Arian_Bozorg	T361000 [WtC-M3] [QB] Use Codex tokens to style QB’s interface colors

Event Timeline

• Sarai-WMDE created this task.Mar 26 2024, 11:54 AM

Arian_Bozorg renamed this task from Use Codex tokens to style QB’s interface colors to [SW] [WtC-M3] [QB] Use Codex tokens to style QB’s interface colors.Mar 27 2024, 9:37 AM

• Sarai-WMDE updated the task description. (Show Details)Mar 27 2024, 9:40 AM

Arian_Bozorg renamed this task from [SW] [WtC-M3] [QB] Use Codex tokens to style QB’s interface colors to [WtC-M3] [QB] Use Codex tokens to style QB’s interface colors.Mar 27 2024, 9:50 AM

Arian_Bozorg moved this task from Incoming to Unified QT Backlog on the [Archived]Wikidata Dev Team board.Mar 27 2024, 10:36 AM

karapayneWMDE set the point value for this task to 5.Apr 16 2024, 8:21 AM

Arian_Bozorg moved this task from Unified QT Backlog to Quality Tools "Sprint" on the [Archived]Wikidata Dev Team board.May 28 2024, 8:09 AM

Arian_Bozorg edited projects, added [Archived]Wikidata Dev Team (Quality Tools "Sprint"); removed [Archived]Wikidata Dev Team.

• guergana.tzatchkova claimed this task.May 29 2024, 3:25 PM

• guergana.tzatchkova moved this task from Backlog to Doing on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.

Change #1038297 had a related patch set uploaded (by Guergana Tzatchkova; author: Guergana Tzatchkova):

[wikidata/query-builder@master] Use Codex tokens to style QB’s interface colors

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

gerritbot added a project: Patch-For-Review.Jun 3 2024, 1:07 PM

• guergana.tzatchkova moved this task from Doing to Peer Review on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Jun 3 2024, 1:08 PM

HasanAkgun_WMDE moved this task from Peer Review to Backlog on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Jun 5 2024, 2:59 PM

• guergana.tzatchkova moved this task from Backlog to Peer Review on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Jun 5 2024, 4:21 PM

Change #1038297 merged by jenkins-bot:

[wikidata/query-builder@master] Use Codex tokens to style QB’s interface colors

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

Maintenance_bot removed a project: Patch-For-Review.Jun 6 2024, 9:30 AM

• guergana.tzatchkova moved this task from Peer Review to Product Verification on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Jun 6 2024, 3:55 PM

Hey there! Just a nitpick that I didn't catch while looking at the patch, sorry about that! We should use $background-color-neutral-subtle instead of $background-color-interactive-subtle (it's a more semantically correct token) in the QueryBuilder.vue file. That would be all.

Thanks for the replacements!

• Sarai-WMDE added a comment.Jun 12 2024, 9:38 AM

This comment was removed by • Sarai-WMDE.

Hey @HasanAkgun_WMDE 👋🏻 Just a heads-up that there's a tiny fix pending to be applied in relation to this task. Thank you!

Change #1056217 had a related patch set uploaded (by Hasan Akgün (WMDE); author: Hasan Akgün (WMDE)):

[wikidata/query-builder@master] Fix background color code

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

gerritbot added a project: Patch-For-Review.Jul 23 2024, 6:10 PM

In T361000#10007056, @Sarai-WMDE wrote:

Hey @HasanAkgun_WMDE 👋🏻 Just a heads-up that there's a tiny fix pending to be applied in relation to this task. Thank you!

Hey @Sarai-WMDE , fixed that one! Thanks for heads-up!