@BPiovesan-WMF In Asana, you mentioned you had examples from previous hackathons. Do you mind uploading those examples here to this task? We can also discuss them in our upcoming kick off meeting.

@Quiddity thank you for this! Interesting to see for sure. It feels like these combinations could almost be anything depending on many different parameters. Maybe the best path forward is to choose a logical option that feels relatively common, uses Codex color tokens, and isn't likely to be similar to another use of color in this way, i.e. any of the upcoming diff themes, etc. I will put together a proposal.

Thanks for this task. I will work on this. Before I start on this, I want to clarify the current colors I'm seeing, which I imagine are browser defaults.

Alright, after discussing in Slack, it seems like the dark mode hack is not the best solution. I'm okay with the token addition. However, since our tokens reference hex codes and not RGB, I'm not sure that proposed solution would work, but maybe I am not understanding the CSS correctly.

That reasoning for the flashing makes sense. I see, about the token. That could work. But I still wonder if we could force dark mode in this localized area instead? That way this fix is localized. We could document this suggestion in Codex docs. To be clear, the quiet Button is designed to work in dark mode. You can preview that on the docs page for Buttons.

There's something else going on here. First of all, I don't know why that flash on mouseleave is happening. Secondly, we should note that the icon color is being overwritten, so that it can be seen on the dark background. Thirdly, for what it's worth, the background color of the button actually is working as intended; it darkens on hover, then darkens more on active. It does this by using a blending mode, which was intentional for the quiet button so that it would blend with various background colors. It was not designed to be used on a dark background.

Thanks for the feedback and your opinion @Chaotic_Enby! If you look at the broad spectrum of icons, you'll find a lot of inconsistencies both stylistically and visible weight. This task sets out to fix that. The outlined style is something we've been discussing as well. From that most recent version, we're thinking of trying a slightly thicker weight of the outline (likely 2px, similar to many of the current outlined ones), as this redesigned version (1.5px) feels too similar to the weight of the text that icons typically accompany, especially in latin characters.

That sounds good to me, but will let @Catrope weigh in on your question.

Okay, thanks for the update and your work thus far @Gauthammohanraj. @Catrope can you pick this up and push it over the finish line, along with the mobile Popover?

I don't think there are any current blockers other than resources and time. So if you are able to work on this that would be great! Please let me know if you need any design support or have any questions during the process of working on it.

I wanted to share some things that have been thought about during the beginnings of this work.

@Gauthammohanraj just curious if you've been able to work on this anymore? Or if you would like to?

@TLessa-WMF Added Snapchat and Reddit on Android to the Figma audit.

@Jdlrobson We don't currently have Popover available as a CSS-only component. I would imagine we would like to, in order to fully support initiatives like CodexPHP, but will rely on @Catrope to advise on the feasibility and timeline of such a thing.

These icon updates will actually be a part of the overall icon redesign currently being worked on in T399175: Redesign Codex icon library. Can we close this one as a duplicate then?

@Gauthammohanraj that's correct. The mobile Dialog should be full screen, without any page padding or overlay. The Dialog shadow and border should be removed, as it should be flush against the edge of the window. Please let me know if you have any other questions, and thanks for working on this!

@HSwan-WMF @egardner what designs do you think you need for this? The idea is that a MenuButton would use a Button component instead of a ToggleButton, and so it would have all the same design styles and options for variants that a Button has. The Button itself would no longer have a "menu opened" state, which I don't think is necessary.

@seanleong-WMDE Ah, okay, I've gone ahead and added it myself. The design side of this is all complete now.

No problem, just checking in. :) Thank you!

@seanleong-WMDE yes! They should be included in the release tomorrow. If someone on your side could add them to Figma, that would be great. Please make a branch in Figma, add them to the file, then submit to myself for review. Let me know if you have any issues.

Marking this resolved, but feel free to reopen or open a new task for additional feedback.

@Iniquity thanks for filing this. I know there was a volunteer who said they would review this, but I also wanted to provide my own feedback.

Hi @Gauthammohanraj are you still able to work on finishing this task/patch?

@Volker_E These icons have not yet been added to Figma. It's okay if they get added and published before the release goes live. Maybe this is something the designer who would use these could add into Figma? Both for this and T402523: icons: Add [Update] icon to Codex and OOUI? Are you able to coordinate that?

These findings have been helpful and will be worked on in T405015: Dialog: optimize mobile version in Codex.

@Volker_E not yet. these should be included in our next release, planned hopefully for next Tuesday.

@Volker_E not yet. these should be included in our next release, planned hopefully for next Tuesday.