Add _note_ box type, use proper color for tip

core/src/main/kotlin/eu/iamgio/quarkdown/ast/quarkdown/block/Box.kt

@@ -44,6 +44,11 @@ data class Box(
          */
         TIP,
 
+        /**
+         * A note.
+         */
+        NOTE,
+
         /**
          * A warning.
          */

core/src/main/resources/render/theme/color/darko.css

@@ -38,16 +38,31 @@ pre {
     background-color: var(--primary);
 }
 
-.box.tip {
-    background-color: rgb(52, 79, 117);
+.box.tip, .box.note {
     color: white;
 }
 
+.box.tip {
+    background-color: rgb(60, 114, 74);
+}
+
 .box.tip > header {
-    background-color: rgb(10, 17, 26, 0.15);
+    background-color: rgba(12, 26, 10, 0.2);
 }
 
 .box.tip > header > h4 {
+    color: rgb(210, 250, 214);
+}
+
+.box.note {
+    background-color: rgb(52, 79, 117);
+}
+
+.box.note > header {
+    background-color: rgb(10, 17, 26, 0.15);
+}
+
+.box.note > header > h4 {
     color: rgb(194, 236, 250);
 }
 

core/src/main/resources/render/theme/global.css

@@ -468,21 +468,37 @@ code.focus-lines .hljs-ln-line:not(.focused),
 }
 
 .box.tip {
+    background-color: rgb(175, 230, 173);
+}
+
+.box.tip > header > h4 {
+    color: rgb(33, 102, 25);
+}
+
+.box.tip > header {
+    background-color: rgba(33, 102, 25, .1);
+}
+
+.box.note {
     background-color: rgb(173, 216, 230);
 }
 
+.box.note > header > h4 {
+    color: rgb(25, 60, 102);
+}
+
+.box.note > header {
+    background-color: rgba(25, 60, 102, .1);
+}
+
 .box.error > header > h4 {
     color: white;
 }
 
-.box:is(.warning, .tip) {
+.box:is(.tip, .note, .warning) {
     color: #333;
 }
 
-.box.tip > header > h4 {
-    color: rgb(25, 60, 102);
-}
-
 /* Box icons */
 
 .box > header > h4::before {
@@ -491,30 +507,31 @@ code.focus-lines .hljs-ln-line:not(.focused),
     float: left;
     width: 18px;
     margin-right: 6px;
+    margin-top: 3px;
 }
 
-.box:is(.warning, .tip) > header > h4 {
+.box:is(.tip, .note, .warning) > header > h4 {
     margin-right: 24px; /* 18px icon + 6px margin, used to realign text to the center */
     display: flex;
     flex-direction: row;
     align-items: center; /* Align icons */
     justify-content: var(--qd-horizontal-alignment);
 }
 
-.box.warning > header > h4::before {
-    content: "\eac5"; /* 'error' (triangle) icon */
+.box.tip > header > h4::before {
+    content: "\ea0d"; /* 'bulb' icon */
 }
 
-.box.tip > header > h4::before {
-    content: "\ecf7"; /* 'bulb' icon */
+.box.note > header > h4::before {
+    content: "\eb21"; /* 'info' icon */
 }
 
-.box:is(.warning, .error) > header {
-    background-color: rgba(0, 0, 0, 0.1);
+.box.warning > header > h4::before {
+    content: "\eac5"; /* 'error' (triangle) icon */
 }
 
-.box.tip > header {
-    background-color: rgba(25, 60, 102, 0.1);
+.box:is(.warning, .error) > header {
+    background-color: rgba(0, 0, 0, 0.1);
 }
 
 /* End of box styling */