feat(developer): Add color-info to design guidelines

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

developer_manual/design/foundations.rst

@@ -87,28 +87,33 @@ Status and indicators
 
 .. list-table::
 
-    * - .. figure:: ../images/colour-success.svg
+    * - .. figure:: ../images/color-info.svg
+
+           Info: #006AA3
+
+      - .. figure:: ../images/color-success.svg
 
            Success: #46BA61
 
-      - .. figure:: ../images/colour-error.svg
+      - .. figure:: ../images/color-error.svg
 
            Error: #E9322D
 
-      - .. figure:: ../images/colour-warning.svg
+      - .. figure:: ../images/color-warning.svg
 
            Warning: #ECA700
 
-Interface elements associated with a status like success, error, or warning may also be colored to communicate the action better.
+Interface elements associated with a status like info, success, error, or warning may also be colored to communicate the action better.
 
 While interface elements like buttons are colored differently depending on their action, the color of the text in that element is almost always either of the main text colors, that is light or dark.
 
 
 * On web:
 
-  * Success colour: ``var(--color-success)``
-  * Warning colour: ``var(--color-warning)``
-  * Error colour: ``var(--color-error)``
+  * Info color: ``var(--color-info)``
+  * Success color: ``var(--color-success)``
+  * Warning color: ``var(--color-warning)``
+  * Error color: ``var(--color-error)``
 
 * Android: Material Design guidelines
 * iOS: `Apple HIG colors <https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/>`_

developer_manual/images/color-info.svg

@@ -0,0 +1 @@
+<svg id="screenshot" viewBox="-1.9198620293536806e-7 1.9198620293536806e-7 44 44" width="44" height="44" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:penpot="https://penpot.app/xmlns"><g id="shape-449b6580-0722-11ec-80f0-ffdf49ffffdb"><penpot:shape penpot:center-y="22" penpot:transform-inverse="matrix(1,1.3234889800848443e-23,9.926167350636332e-24,0.9999999999999999,0,0)" penpot:transform="matrix(1,-6.617444900424222e-24,-1.6543612251060553e-23,1,0,0)" penpot:proportion-lock="true" penpot:stroke-style="none" penpot:rotation="0" penpot:stroke-alignment="center" penpot:type="circle" penpot:fill-color-ref-file="f48a3080-a38f-11eb-bb49-81aaa3a367f9" penpot:name="success" penpot:fill-color-ref-id="63bc1da0-b7d2-11eb-9e59-fbf93090aec0" penpot:proportion="1" penpot:center-x="22"><penpot:export penpot:type="png" penpot:suffix="" penpot:scale="1"/></penpot:shape><ellipse cx="22" cy="22" rx="22" ry="22" transform="matrix(1,-6.617444900424222e-24,-1.6543612251060553e-23,1,0,0)" style="fill: rgb(0, 106, 163); fill-opacity: 1;"/></g></svg>