Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Actually provide mobile-snapped icons #32

Open
0c3d7r4 opened this issue Jun 29, 2023 · 0 comments
Open

Actually provide mobile-snapped icons #32

0c3d7r4 opened this issue Jun 29, 2023 · 0 comments

Comments

@0c3d7r4
Copy link

0c3d7r4 commented Jun 29, 2023

So the documentation says:

Spectrum provides two sets of icons, one for desktop and one for mobile, so that the same icon doesn’t need to be manually scaled.

Your current CSS in sites/spectrum-icons.css:

.spectrum-Icon--sizeXXS,
.spectrum-Icon--sizeXXS img,
.spectrum-Icon--sizeXXS svg {
  height: 0.5625rem;
  width: 0.5625rem;
}
...

And in the sites/spectrum-css/spectrum-core-lg.css I've managed to find the sizes for mobile:

.spectrum-Icon--sizeXXS,
  .spectrum-Icon--sizeXXS img,
  .spectrum-Icon--sizeXXS svg {
    height: 11px;
    width: 11px;
  }
...

However this is just CSS and you know that it's not the same as "providing 2 sets of icons" because the snapping actually means something:

Desktop icons are snapped to a full pixel, while mobile icons are snapped to up to half a pixel because of screen resolution. On rare occasions, an icon design may be off-center in order to place it exactly on a grid.


Also

Each set contains icons of different sizes such as small, medium, and large.

is not true either because you provide either 36px (in 18 folder) or 48 px (in 24 folder) and then scale them using CSS to match the resolution as best as possible, however in reality, it's job not done by the designer, who must actually provide proper SVGs of something like 18 sm / 24 me / 30 lg twice: one for desktop with full-pixel snapping and then one for mobile with half-pixel snapping in order for what you say on the website to be true.

amiwrong and what is found in 24 folder is meant to be mobile with half-pixel snapping according to

Spectrum icons come in two sizes: 18 px for desktop scale and 22 px for mobile scale.

The only 22 icons I found are limited collection of express icons in

spectrum-css-workflow-icons/dist/spectrum-css-ccx-workflow-icons/dist/22/

or was it the case that the mobile icons used to be 22 and now they are 24 and https://spectrum.adobe.com/page/iconography/ needs updating?

The problem with CSS-only scaling is that the icon will appear blurry:

Original: Screenshot 2023-06-29 at 13 36 37
Scaled with CSS: Screenshot 2023-06-29 at 13 36 05

This is why a different version for mobile-snapping is important however it's kind of been neglected?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant