feat: add tip callout (#16125)

Signed-off-by: David Karlsson <david.karlsson@docker.com>

_scss/_notes.scss

@@ -15,6 +15,7 @@ The available classes are:
 
 .important: Yellow
 .warning: Red/orange
+.tip: Green
 .restricted: Purple, used to indicate features that require paid plans
 [no class]: Blue, the default
 
@@ -56,7 +57,7 @@ blockquote {
   html.night & {
     // DARK THEME
 
-    &:not(.important):not(.warning):not(.restricted):not(.experimental) {
+    &:not(.important):not(.warning):not(.restricted):not(.experimental):not(.tip) {
       @include notification(
         $bg-color: $dark-palette-blue-200,
         $header-color: $white-0,
@@ -100,12 +101,21 @@ blockquote {
         $icon: "\f492"
       );
     }
+
+    &.tip {
+      @include notification(
+        $bg-color: $dark-palette-green-200,
+        $header-color: $white-0,
+        $body-text-color: $white-0,
+        $icon: "\f164"
+      );
+    }
   }
 
   html:not(.night) & {
     // LIGHT THEME
 
-    &:not(.important):not(.warning):not(.restricted):not(.experimental) {
+    &:not(.important):not(.warning):not(.restricted):not(.experimental):not(.tip) {
       @include notification(
         $bg-color: $light-palette-blue-100,
         $header-color: $light-palette-blue-500,
@@ -149,6 +159,15 @@ blockquote {
         $icon: "\f492"
       );
     }
+
+    &.tip {
+      @include notification(
+        $bg-color: $light-palette-green-100,
+        $header-color: $light-palette-green-500,
+        $body-text-color: inherit,
+        $icon: "\f164"
+      )
+    }
   }
 }
 

contribute/components/call-outs.md

@@ -7,20 +7,27 @@ toc_max: 3
 We support these broad categories of callouts:
 
 - Notes (no Liquid tag required)
+- Tips, which use the `{: .tip }` tag
 - Important, which use the `{: .important}` tag
 - Warning , which use the `{: .warning}` tag
 
 ## Examples
 
-  > **Note**
-  >
-  > Note the way the `get_hit_count` function is written. This basic retry
-  > loop lets us attempt our request multiple times if the redis service is
-  > not available. This is useful at startup while the application comes
-  > online, but also makes our application more resilient if the Redis
-  > service needs to be restarted anytime during the app's lifetime. In a
-  > cluster, this also helps handling momentary connection drops between
-  > nodes.
+> **Note**
+>
+> Note the way the `get_hit_count` function is written. This basic retry
+> loop lets us attempt our request multiple times if the redis service is
+> not available. This is useful at startup while the application comes
+> online, but also makes our application more resilient if the Redis
+> service needs to be restarted anytime during the app's lifetime. In a
+> cluster, this also helps handling momentary connection drops between
+> nodes.
+
+> **Tip**
+>
+> For a smaller base image, use `alpine`.
+{: .tip }
+
 
 > **Important**
 >
@@ -53,6 +60,11 @@ We support these broad categories of callouts:
 > cluster, this also helps handling momentary connection drops between
 > nodes.
 
+> **Tip**
+>
+> For a smaller base image, use `alpine`.
+{: .tip }
+
 > **Important**
 >
 > Treat access tokens like your password and keep them secret. Store your
@@ -69,4 +81,4 @@ We support these broad categories of callouts:
 >
 > The Docker Dashboard does _not_ remove volumes when you delete the app stack.
 {: .warning}
-```
+```