Mismatch Finder has a typography.scss file that holds the mixins. we might want to do something similar for the Query Builder.

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

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

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

Change #1036231 merged by jenkins-bot:

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

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

Looks good, thank you!

Hey there! Just a heads-up that I didn't get a chance to review this task. I can check production and create a task with fixes in case they're needed, but it might be a better idea to rely on branch deployment to allow design verification in the future. Would that be possible? It'd be a great way to prevent friction.

In T360999#9867140, @Sarai-WMDE wrote:

Hey there! Just a heads-up that I didn't get a chance to review this task. I can check production and create a task with fixes in case they're needed, but it might be a better idea to rely on branch deployment to allow design verification in the future. Would that be possible? It'd be a great way to prevent friction.

Hello Sarai, thanks for the heads-up! Here is the branch deployment link for you: https://1036231--clicky-sparqly.netlify.app/, I will do it beforehand next time, sorry for delay.

Thank you both, and no problem! I'll add the findings here, and we can decide if should reopen this task or rather create a separate one:

Issue	Screenshot (if applicable)
Inline links in .querybuilder__description are broken
Inline links in the Footer are broken
The line-height value of the body-m mixin should be $line-height-medium
All headings should reuse the same style/mixin: heading-4. The style applies to .querybuilder__description-heading ("About this tool"), .querybuilder__query-title ("Query"), .querybuilder__setting-header ("Settings") and the <h2> in .querybuilder-result__header. We don't need any other heading mixins in the context of the Query builder.
The color of the heading-4 mixin should be $color-emphasized instead of $color-base
The color of querybuilder-footer__title texts should be $color-emphasized to enhance contrast and hierarchy

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

[wikidata/query-builder@master] Fix typography according to Codex style

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

In T360999#9867698, @Sarai-WMDE wrote:

Thank you both, and no problem! I'll add the findings here, and we can decide if should reopen this task or rather create a separate one:

Issue	Screenshot (if applicable)
Inline links in .querybuilder__description are broken
Inline links in the Footer are broken
The line-height value of the body-m mixin should be $line-height-medium
All headings should reuse the same style/mixin: heading-4. The style applies to .querybuilder__description-heading ("About this tool"), .querybuilder__query-title ("Query"), .querybuilder__setting-header ("Settings") and the <h2> in .querybuilder-result__header. We don't need any other heading mixins in the context of the Query builder.
The color of the heading-4 mixin should be $color-emphasized instead of $color-base
The color of querybuilder-footer__title texts should be $color-emphasized to enhance contrast and hierarchy

Broken links is a problem about Vue3 migration and that will be fixed with another patch, I've addressed the other ones.

Change #1041563 merged by jenkins-bot:

[wikidata/query-builder@master] Fix typography according to Codex style

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

Thanks again for all the changes, @HasanAkgun_WMDE! There's only one small detail left to cover: the color of the heading-4 mixin should $color-emphasized instead of $color-base.

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

[wikidata/query-builder@master] Fix heading 4 color

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

All looking good now! Thanks for all the changes 🙏🏻

Change #1055960 merged by jenkins-bot:

[wikidata/query-builder@master] Fix heading 4 color

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

Hey @HasanAkgun_WMDE 👋🏻 I'm sorry, but I just noticed a last misalignment between the specs and the code.

The following mixin:

@mixin ui-text-m($font-weight: $font-weight-normal) {
	font-family: $font-family-system-sans;
	font-size: $font-size-medium;
	font-weight: $font-weight;
	line-height: $line-height-xx-small;
	color: $color-base;
}

Should be removed and replaced by:

@mixin body-m {
	font-family: $font-family-system-sans;
	font-size: $font-size-medium;
	font-weight: $font-weight-normal;
	line-height: $line-height-medium;
	color: $color-base;
}

.querybuilder__description should use body-m instead of ui-text-m. That's all. Thank you! 🙏🏻

After having a quick call with @Sarai-WMDE , it seems done by another patch. I think we can proceed with this one.

In T360999#10018210, @Sarai-WMDE wrote:

Hey @HasanAkgun_WMDE 👋🏻 I'm sorry, but I just noticed a last misalignment between the specs and the code.

The following mixin:

@mixin ui-text-m($font-weight: $font-weight-normal) {
	font-family: $font-family-system-sans;
	font-size: $font-size-medium;
	font-weight: $font-weight;
	line-height: $line-height-xx-small;
	color: $color-base;
}

Should be removed and replaced by:

@mixin body-m {
	font-family: $font-family-system-sans;
	font-size: $font-size-medium;
	font-weight: $font-weight-normal;
	line-height: $line-height-medium;
	color: $color-base;
}

.querybuilder__description should use body-m instead of ui-text-m. That's all. Thank you! 🙏🏻

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

[wikidata/query-builder@master] Fix footer typography

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

All texts look aligned with the design specs! Thanks for all the changes @HasanAkgun_WMDE 🙏🏻

As mentioned via DM already: Just a heads-up that some (?!) of the links included in the footer display a bigger size and line-height than those of the surrounding text. I added a note in a "Considerations" section in the Link replacement task, because I'm assuming that this will be fixed as part of that other ticket.

Change #1058577 merged by jenkins-bot:

[wikidata/query-builder@master] Fix footer typography

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

No further changes are needed after the latest merge ✅

There's still only the mentioned size inconsistency between footer links, which I hope can be fixed as part of T359859: [WtC-M3] [QB] Replace WiKit Link component by Codex's.

Thank you!