From cba6c7c690256978bafb904ba82dc12efdd076d7 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 11 May 2023 16:55:15 +0200
Subject: [PATCH] feat(developer): Add `color-info` to design guidelines

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 developer_manual/design/foundations.rst       | 19 ++++++++++++-------
 .../{colour-error.svg => color-error.svg}     |  0
 developer_manual/images/color-info.svg        |  1 +
 .../{colour-success.svg => color-success.svg} |  0
 .../{colour-warning.svg => color-warning.svg} |  0
 5 files changed, 13 insertions(+), 7 deletions(-)
 rename developer_manual/images/{colour-error.svg => color-error.svg} (100%)
 create mode 100644 developer_manual/images/color-info.svg
 rename developer_manual/images/{colour-success.svg => color-success.svg} (100%)
 rename developer_manual/images/{colour-warning.svg => color-warning.svg} (100%)

diff --git a/developer_manual/design/foundations.rst b/developer_manual/design/foundations.rst
index 3a7956ce94d..0005f91cd12 100644
--- a/developer_manual/design/foundations.rst
+++ b/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/>`_
diff --git a/developer_manual/images/colour-error.svg b/developer_manual/images/color-error.svg
similarity index 100%
rename from developer_manual/images/colour-error.svg
rename to developer_manual/images/color-error.svg
diff --git a/developer_manual/images/color-info.svg b/developer_manual/images/color-info.svg
new file mode 100644
index 00000000000..6a2898e2e5e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/developer_manual/images/colour-success.svg b/developer_manual/images/color-success.svg
similarity index 100%
rename from developer_manual/images/colour-success.svg
rename to developer_manual/images/color-success.svg
diff --git a/developer_manual/images/colour-warning.svg b/developer_manual/images/color-warning.svg
similarity index 100%
rename from developer_manual/images/colour-warning.svg
rename to developer_manual/images/color-warning.svg