Merge pull request #13597 from nextcloud/feat/32-icon-changes

feat(upgrade_to_32): Detail the outline icon style change

Author: AndyScherzinger

developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_32.rst

@@ -40,6 +40,11 @@ This existing variables have changed to a secondary style:
 - ``--color-error-text`` to be used as the foreground color of such elements.
 - Same applies to ``--color-info``, ``--color-success``, ``--color-warning`` and their variants.
 
+Icons should be outlined
+^^^^^^^^^^^^^^^^^^^^^^^^
+
+When using Material Icons, use the outlined variant where possible. Exceptions to this are app icons themselves, file type icons, as well as icons that were already a single line, such as the plus or checkmark icons. Reasoning and more details are in `the issue <https://github.com/nextcloud/server/issues/53701>`_.
+
 Added APIs
 ^^^^^^^^^^
 

developer_manual/design/foundations.rst

@@ -20,7 +20,7 @@ Primary color
 
 While this is the primary color associated with Nextcloud and can be used to draw attention to an element, it is best to limit the usage of this to primary actions and other important elements.
 
-.. note:: 
+.. note::
 	 The primary color can be customized by admins through theming, but the default experience will be Nextcloud blue. If the primary color is themed to something very light like a shade of yellow, the text or header icons will be inverted to dark automatically.
 
 * On web: ``var(--color-primary-element)``
@@ -160,7 +160,7 @@ Icons
 .. image:: ../images/material-icons.png
    :alt: Material icons
 
-Icons can be used to communicate the intent of an action, or to provide visual interest to the screen. We use monochrome icons on all platforms: `Material Symbols (not Material Icons, and 20 px default filled) <https://fonts.google.com/icons?icon.set=Material+Symbols&selected=Material+Symbols+Outlined:search:FILL@1;wght@400;GRAD@0;opsz@20&icon.size=20>`_ for web, Android, Windows and Linux, and `SF Symbols (default weight, scale and variant) <https://developer.apple.com/sf-symbols/>`_ for iOS and macOS.
+Icons can be used to communicate the intent of an action, or to provide visual interest to the screen. We use monochrome icons on all platforms: `Material Symbols (not Material Icons, and 20 px default outlined) <https://fonts.google.com/icons?icon.set=Material+Symbols&selected=Material+Symbols+Outlined:search:FILL@0;wght@400;GRAD@0;opsz@20&icon.size=20>`_ for web, Android, Windows and Linux, and `SF Symbols (default weight, scale and variant) <https://developer.apple.com/sf-symbols/>`_ for iOS and macOS.
 
 This is except for the icon of the app itself, which can be a custom icon. Most use an app icon from Material Symbols as well though to keep consistency.
 
@@ -191,7 +191,7 @@ The wording and language in your app sets the tone and approachability of your a
 * Don’t write in ALL CAPS, as it is not as readable and comes off as shouting and aggressive. Also use Sentence case and not Capital Case, with the exception of product names like Nextcloud Talk, Nextcloud Hub, etc.
 * We are a community, so better write "We are happy to announce" instead of "I am happy to announce".
 * If your app content is empty, it can be helpful to add an engaging message. "Add or import your first bookmark!" is much nicer than "No bookmarks yet".
-* Try to avoid using "my" or "your" like in "My files" or "Your files", instead using "All files". For longer sentences where it cannot be avoided, use "your", never "my". 
+* Try to avoid using "my" or "your" like in "My files" or "Your files", instead using "All files". For longer sentences where it cannot be avoided, use "your", never "my".
 * Use gender neutral language. This `international guide to gender-inclusive writing <https://uxcontent.com/the-international-guide-to-gender-inclusive-writing/>`_ contains info and examples on gender neutral wording for different languages.
 * Use full names instead of only first names while addressing the person using your app.
 * For any "Delete" action, give context to what it will delete, like "Delete conversation" or "Delete user" so that it is clear specifically for this destructive action.