1793499 - Restructure icon folders and CSS declarations

Status: NEW

(Thunderbird :: Theme, enhancement)

Description

[[e-mail]]

Icon folder structure:

comm/mail/themes/shared/mail/icons

• xs
  • icons.svg
• sm
  • icons.svg
• md
  • icons.svg
• lg
  • icons.svg
• mono
  • md
    • icons.svg
  • lg
    • icons.svg
• full
  • xxl
    • icons.svg

Icon variable naming convention:

--icon-style-size-icon-name

where the default style is blank
mono - for monochrome high contrast icons
full - for full color icons

example:
--icon-sx-icon-name
--icon-sm-icon-name
--icon-md-icon-name
--icon-lg-icon-name
--icon-mono-md-icon-name
--icon-mono-lg-icon-name
--icon-full-xxl-icon-name

Why:

I chose this folder structure and naming convention so that it would be easier to add icons down the road. For example, if we have a full set of full color icons, this would be dropped into (full > xs, sm, md, lg) folders and similarly named --icon-full-size-icon-name. This way, when using icons, we know exactly what style and size we are getting when we declare it.

Currently we have different sizes for different icons, but if you were wanting to reuse that icon, you’d have no way of knowing what size it was without looking at the icon file itself. Also, if we were to try and add another size for the icon, we would choose an arbitrary way to denote the size difference. As an example: currently we have some 12px icons labeled with a “sm” because the default size was 16px, but in other places we have 16px icons labeled with “md” or “sm” based on which size the icon was originally used. This icon structure aims to solve this issue by bringing consistency to the size naming convention.

Also, I plan on making each icon we have in every size and style (with the exception of full-xxl as those are reserved for dialogs) so there should be far less gaps in the icons if we need to use the same icon in another place but at a different size.