Update the language selector to work with the yellow pages #1936
Conversation
|
Storybook and Tailwind configuration previews: Ready Storybook: https://wordpress.github.io/openverse-frontend/_preview/1936 Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again. You can check the GitHub pages deployment action list to see the current status of the deployments. |
openverse-bot
added
✨ goal: improvement
|
Size Change: -3.88 kB (0%) Total Size: 812 kB
ℹ️ View Unchanged
|
|
So quick and works great! One more nit: if we used 'transparent' color instead of 'yellow', we wouldn't have to change it in the future if the color scheme changes (maybe dark mode?) |
dhruvkb
requested review from
sarayourfriend
and removed request for
zackkrida
|
|
To @obulat's question, I think we should go with To @dhruvkb's points.
Something "looking quite bad" is not very useful feedback and relies on personal preferences. The color style selected follows the transparency effect over white backgrounds. Here is a quick look at three variations over different backgrounds I am handling. Note that the dark version is still WIP.
The hit area does not need to meet the non-text contrast. The globe and dropdown icons surpass the 3:1 contrast ratio and indicate the actionable element. See the 1.4.11 criterion.
This is why I selected an opaque version that can shift to dark or white. And in the future, to a high contrast mode. |
|
@panchovm, I believe Figma is handling colors a bit different than a browser does. If you set the border color to
Do you think we should open a new issue to set the color to |
|
I shared the incorrect color style. I was referring to the Dark Charcoal with 20% opacity found in the Opacities section in the Design Library. Here is a screenshot of how it looks in Figma.
The Opacities section has dark charcoal variants with alpha changes. The
I also noticed we do not have these shades in the Tailwind documentation, although I might have landed on an outdated version. Let me know if I am explaining myself correctly. |
|
Oh, I didn't realize that we had two scales of Are there many places where opacities are used? I guess I have always mixed up the shades with opacities before. |
|
That change makes sense.
Not really. I have pending the text style review, and it would be helpful to add this color revisit. But overall, most shades applied are from the solid set. Especially in text styles as opacities have i18n issues. Thanks Olga for addressing the color update. I will update the Design Library to mirror Tailwind and avoid future mistakes. |
Fixes
Fixes #1935 by @obulat
Description
This PR updates the language chooser to match the Figma mockups.
Additional information
Since the dark charcoal 20% border involves some transparency the border color was not
border-dark-charcoal-20but rather#d6bb32. On macOS, you can use the Digital Color Meter app to verify this by zooming in Figma and hovering over the border.Testing Instructions
Checklist
Update index.md).main) or a parent feature branch.Developer Certificate of Origin
Developer Certificate of Origin