Included in this Github PR: https://github.com/wmde/new-lexeme-special-page/pull/750

@Charlie_WMDE The ticket here asks for $font-size-xxlarge to be replaced by the same variable in codex. The variable in codex is $font-size-xx-large, which has value 1.5rem, whereas $font-size-xxlarge has value 1.5em. Is the change is variable name and font size desired / expected here?

Likewise in SearchExisting.vue, the invitation there is to migration to $font-size-medium, which changes the font size from 1em to 1rem, which on @Lucas_Werkmeister_WMDE's wiki corresponds to 14px and 16px respectively. According to the description, the font size should stay at 14px. Is there another variable we should use here? Or is 16px okay?

Hey @ArthurTaylor, regarding the asterisk i have a question. What would the font size change when switching from em to rem in absolute numbers (if that makes sense)? I see your point that 1.5 rem is way bigger than 1.5 em but i'm struggling to find documentation to relate the two to each other. My best guess would be that 1rem seems to come close to 1.5em? what do you think?

regarding the font size for the search existing file, if you want to keep it at a 14px font size you'd have to use $font-size-small. It looks like Sarai was aware of the discrepancy because of an assumption that vector would be overriding the Body M codex style (which usually is a font size 16) and display it as a 14px size instead. is that not the case? if not, i'd say it's fine to switch to $font-size-small instead as it seems that that was sarai's goal. though I'm not sure why she wouldn't suggest small from the start which makes me think that maybe in the long run using Body M would have some advantage but we can cross that bridge when we get there.

Hi @Charlie_WMDE ,

Thanks for the feedback. As I understand it, rem is relative to the document's base font size (whatever applies to the html style), whereas em is relative to the font size of the containing / parent element. So there's no fixed relation between em and rem - it would depend on the layout of the document.

For the existing search file, I have no opinion whatsoever about what the font size should be. I'm sharing @Lucas_Werkmeister_WMDE's observation, but it's up to you to decide whether it should be $font-size-medium or $font-size-small - I just someone who is a UX designer to make the call here.

Hey @ArthurTaylor I know what the difference between rem and em is, what I was trying to figure out is, since I don't know the document's base font size or the parent element, what the sizes end up being in this particular case. Unfortunately in the dev tools of firefox, i can't change the size from em to rem myself to see how it would look like. That's why i was relying on information from you here. Would it be possible for you to show me how the actual asterisk size changes, depending on which value you input?

about the existing search file, i was trying to understand whether Sarai's assumption, that vector would be overriding Body M, is true. Depending on that, I could give a reccomendation on which token to use.

Hope that clears things up a bit.

( new PR: https://github.com/wmde/new-lexeme-special-page/pull/762 )

Hi @Charlie_WMDE ,

Thanks for the feedback, and sorry for the miscommunication. I honestly didn't know the difference between rem and em until last Tuesday, so was just sharing my lack of expertise :)

For getting more information about the changes, there are a couple of options.

1. You can see the page in its wiki context at https://www.wikidata.org/wiki/Special:NewLexeme . I don't know if it's enough for you to modify that existing layout with the developer tools to answer your questions.
2. If you have some time this week, I'm happy to jump on a call and share my screen and we can look at it together
3. If you have docker installed and can run python code, we can try and get you setup with an integration environment where you can test the proposed changes in a web browser on your own machine. This might be a bit over-the-top for answering a single question, but it might be worth the time investment if more questions come up.

Please let me know what works best for you.

Hey @ArthurTaylor,

i think jumping on a call would work best for me as i don't have docker installed and the dev tools are not allowing me to make the changes i'd like to see (or i'm lacking the right skills to make it happen.) would this wednesday 3pm work for you?

Hi @Charlie_WMDE ,

I don't have time at 3pm, but @AudreyPenven_WMDE, @LucasWerkmeister and I have setup an alternative testing environment where you can see and test our changes live: https://special-new-lexeme-testing.wmcloud.org/w/index.php/Special:NewLexeme

Does this meet your needs for testing and review?

@ArthurTaylor yes, this looks great, thank you! i will try to do the reviews today

Had time earlier than I thought! Here's my two cents.

SearchExisting: the overide that Sarai was talking about doesn't seem to happen and we end up with a font size 16 anyway. I would therefore switch to font-size-small instead to maintain the 14px size.

Asterisk: After fiddling with it a bit I reccomend that we change the size to 1.3rem.
I also noticed that in the new version a spacing of 8px appeared between the label and the asterisk

for comparison, this is how it looks in production.

There is a tiny space after the last letter, but it's not a margin like in the testing environment. If you could figure out what that space is and replicate it for the testing environment, that would be awesome. Cause it doesn't look like it's simply a space inside the label either 🤔

In production, the spacing before the asterisk is a gap: .25em on the surrounding wrapper (which has a flex layout).

thanks. let's keep that then and remove the new 8px margin :)

@Charlie_WMDE for *Asterisk*, codex's font-size-x-large would be 1.25rem. Is that close enough for your purposes or should we introduce a new variable?

@Charlie_WMDE I've updated the testing environment with the latest changes - let me know if that meets your expectations, and if not what should be changed. Thanks! https://special-new-lexeme-testing.wmcloud.org/wiki/Special:NewLexeme

Hey @ArthurTaylor, sorry for proposing a new size. I honestly didn't think to double check with codex sizes in the moment. Thank you for noticing and proposing a much better alternative! font-size-x-large sounds like a much better idea 🙏

thank you also for updating the testing environment. It looks great to me now! 🎉

Updated the pull request at https://github.com/wmde/new-lexeme-special-page/pull/762