solid-design-system / solid

Monorepo for Union Investment's Solid Design System.
https://solid-design-system.fe.union-investment.de/docs/
Other
23 stars 4 forks source link

feat[dev]: ✨ rem vs. px #1546

Open karlbaumhauer opened 1 month ago

karlbaumhauer commented 1 month ago

User Story

We need to discuss how we want to handle rem vs. px issues as the topic came up again in our a11y audit => https://www.notion.so/sd-badge-103f3f6e1bc080619981e3e8d9546a9f?d=7e85df0b8e43468297c5a7c89b1e0b01&pvs=4#104f3f6e1bc080b0be0ec6392d47b458

Suggested Solution

either switch to rem or use a tool to convert to rem?!?

Technical Information

DoR

DoD

mariohamann commented 1 month ago

The audit explicitly stated this for:

When looking deeper into the code, it's obvious why: The font-size of the sd-badge was written as an arbitrary value text-[12px]. All other font-sizes are automatically set with rem.

Therefore this could/should be changed in the sd-badge ticket directly @smfonseca. Maybe we find other occasions as well. Nevertheless while increasing the default text size in the browser settings I saw some other issues:

Firefox: CleanShot 2024-10-16 at 07 06 41@2x

Chromium: CleanShot 2024-10-16 at 07 10 33@2x

Safari (Bug in Button): CleanShot 2024-10-16 at 07 11 04@2x