Add new variant “info” for inline message boxes (#1818)

As discussed in #1815, we
want to add an informational message box to the Static IP dialog (in
Pro).

This PR introduces the `info`-type variant for our `<inline-message>`
component, and defines its usage in our app styleguide.

Similar to [the existing
`--brand-metallic-lighter`](https://github.com/tiny-pilot/tinypilot/blob/04108124805238b1554c588fab8e6a3a0c7817d6/app/static/css/style.css#L17),
I had to introduce a new blue colour variant, otherwise the background
of the box would have been too dark (when using `--brand-blue-light`).

<img width="732" alt="Screenshot 2024-07-04 at 12 32 03"
src="https://github.com/tiny-pilot/tinypilot/assets/83721279/52ad11f5-e708-4fa2-bfc3-a6b42a5b5fe0">

<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1818"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

---------

Co-authored-by: Jan Heuermann <[email protected]>

app/static/css/style.css

@@ -27,6 +27,7 @@
   --brand-blue-dark: hsl(var(--brand-hue-blue), 51%, 30%);
   --brand-blue-bright: hsl(var(--brand-hue-blue), 90%, 67%);
   --brand-blue-light: hsl(var(--brand-hue-blue), 74%, 79%);
+  --brand-blue-lighter: hsl(var(--brand-hue-blue), 65%, 88%);
 
   --brand-red: hsl(var(--brand-hue-red), 57%, 44%);
   --brand-red-dark: hsl(var(--brand-hue-red), 72%, 29%);

app/templates/custom-elements/inline-message.html

@@ -13,6 +13,11 @@
       display: block;
     }
 
+    :host([variant="info"]) {
+      background-color: var(--brand-blue-lighter);
+      border-color: var(--brand-blue);
+    }
+
     :host([variant="warning"]) {
       background-color: var(--brand-orange-light);
       border-color: var(--brand-orange-dark);

app/templates/styleguide.html

@@ -112,6 +112,10 @@ <h2 class="section">Colors</h2>
           class="colorcard"
           style="background-color: var(--brand-blue-light)"
         ></div>
+        <div
+          class="colorcard"
+          style="background-color: var(--brand-blue-lighter)"
+        ></div>
         <br style="clear: both" />
         <div
           class="colorcard"
@@ -330,8 +334,8 @@ <h3>Font Usage</h3>
 
       <h2 class="section">Inline Message</h2>
       <p>
-        When we want to display a feedback message (error or warning), we can
-        use the inline-message component:
+        When we want to display a prominent feedback message, we can use the
+        inline-message component:
       </p>
       <inline-message variant="error" show>
         <strong>Error:</strong> We use inline errors for “minor” issues that the
@@ -343,6 +347,13 @@ <h2 class="section">Inline Message</h2>
         potential problems. In contrast to errors, these don’t necessarily
         require fixing for the user to proceed.
       </inline-message>
+      <br />
+      <inline-message variant="info" show>
+        <strong>Info:</strong> We use info messages to highlight important
+        information to the user, which is special enough to warrant more
+        prominent styling than just regular text. Info messages are mostly
+        informative, and while they may prompt action, they never require it.
+      </inline-message>
       <p>Some notes about usage:</p>
       <ul>
         <li>