search

ubuntu / yaru.dart

Ubuntu Yaru Flutter widgets and themes for building desktop and web applications
https://ubuntu.github.io/yaru.dart/
Mozilla Public License 2.0
179 stars 33 forks source link

Check/tick icon is not the same as in checkbox component #797

Closed elioqoshi closed 3 months ago

elioqoshi commented 7 months ago

The check icon in the Yaru icon set is not the same used as in the checkbox component:

grafik

The checkbox component uses the default material design check icon I assume.

grafik

I'd recommend unifying them. So either use the Yaru icon in the checkbox or the Material Design icon in Yaru. The Yaru check/tick icon is rather thin though so I am worried about legibility on a small space like 16x16.

Jupi007 commented 7 months ago

Hi @elioqoshi, I just checked the coordinates of the svg source icon in yaru_icons, and they are exactly the same as the checkbox checkmark draw instructions in yaru_widgets: https://github.com/ubuntu/yaru_widgets.dart/blob/5a05b25e0797cd765e2c9589766486c3eb8201f8/lib/src/widgets/yaru_checkbox.dart#L347-L349 When I created the YaruCheckbox component, I used the icon from yaru_icons as reference. It is really not a material icon.

The only difference is that the original icon is 24x24, while the checkmark is reduced to 16x16, keeping the same line width (2px) for readability. So they are the "same" icons.

elioqoshi commented 7 months ago

@Jupi007

If they are 33% bigger and the line width is the same that means that the line width is also respectively different, so the icons are not the same.

The icons should have the same scaling line-width regardless of size.

Jupi007 commented 7 months ago

If we scale the widget checkbox checkmark stroke width to fit the icon, it results in 1.25px:

image

This looks fuzzy and really not readable.

On the other hand, if we scale the icon to fit the widget, it results in a bold 2.4px stroke width which looks out of place and inconsistent because it doesn't fit at all to our thin 1.0px icon look 🤔

The 2.0px stroke width used for the checkbox checkmark on the YaruCheckbox widget is really an exception, because draw a thin white line on an orange surface is very hard to legibly read as you can see on my screenshot upper.

Both the icon in yaru_icons and the checkbox checkmark in yaru_widgets have different purposes, and I don't think we can simply scale one to fit the other without facing some other problems, which imo are more problematic than the one you point out in this issue.

Note that if you absolutely think we should do this perfect fit scale, I wouldn't oppose it. If so I think we should make the icon bolder to avoid accessibility problems with the checkbox.

Jupi007 commented 3 months ago

Closing this, see my comment upper for the explanation.