Feature/1109

[fraincs]

Issue:

Summary

Icons needed a whole redesign in order to look similar when next to each other like in a navigation context. They have been redesigned as 24x24 icons, removing the need for 32x32 icons. In the rare cases we need a bigger icon the 24x24 icon will be resized to 32x32, these have been tested to scale up well.

What I did

• Replaced the icons with the newly redesigned icons, as well as adding new icons.
• Reworked the naming convention for the icons and the icon files.
• Reworked the doc.
• Removed the multiVariant icon component as all icons will be 24x24, no variants exists for icons anymore.

Note

1091 depends on this story, in order to avoid a huge PR, although this one is huge already, this won't be merged until #1091 is done.

[netlify[bot]]

✅ Deploy Preview for sg-orbit ready!

Name	Link
🔨 Latest commit	27acb73c852963239341b2931de539ff20b79812
🔍 Latest deploy log	https://app.netlify.com/sites/sg-orbit/deploys/63f63aa766156b00083dbdf5
😎 Deploy Preview	https://deploy-preview-1138--sg-orbit.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify[bot]]

✅ Deploy Preview for sg-storybook ready!

Name	Link
🔨 Latest commit	27acb73c852963239341b2931de539ff20b79812
🔍 Latest deploy log	https://app.netlify.com/sites/sg-storybook/deploys/63f63aaa6feff300083e29bb
😎 Deploy Preview	https://deploy-preview-1138--sg-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[alexasselin008]

mask-size isnt a valid property? Doesn't seem to get autoprefixed

[alexasselin008]

Checkbox small's checkmark is really blurry

Maybe we should create a custom svg for this component only

Also, there is like 3 sizes applied to this checkmark

.o-ui-checkbox-box:after {
    width: var(--o-ui-sz-2);
    height: var(--o-ui-sz-2);

mask-size: var(--o-ui-sz-2) var(--o-ui-sz-2);

transform: scale(0.75) 

we should pick one

[alexasselin008]

The tile's checkmark is reduced to 16x16, but i beleive it should be 20x20. There is no reason to reduce the size in this occurence

.o-ui-tile-main::after {
    width: var(--o-ui-sz-2);
    height: var(--o-ui-sz-2);

[alexasselin008]

looks a bit blurry at the bottom

[fraincs]

will investigate a solution

[fraincs]

looks a bit blurry at the bottom

will need an opinion from design it indeed does but was flagged as OK.

[fraincs]

The tile's checkmark is reduced to 16x16, but i beleive it should be 20x20. There is no reason to reduce the size in this occurence

.o-ui-tile-main::after {
    width: var(--o-ui-sz-2);
    height: var(--o-ui-sz-2);

It is resized to 16x16 in a 20x20 circle, emulating a CheckCircle icon that we don't have anymore, a 20x20 icon.

[fraincs]

Might be wrongly configured? Something to check as mask-image is prefixed, or only use mask shorthand?