From a68351efc60f2eb7f9b027e2eb90dcfd473a6302 Mon Sep 17 00:00:00 2001
From: Giorgio Garofalo <giogar2705@gmail.com>
Date: Sun, 13 Oct 2024 23:22:59 +0200
Subject: [PATCH] Add _note_ box type, use proper color for tip

---
 .../quarkdown/ast/quarkdown/block/Box.kt      |  5 +++
 .../resources/render/theme/color/darko.css    | 21 +++++++--
 .../main/resources/render/theme/global.css    | 45 +++++++++++++------
 3 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/core/src/main/kotlin/eu/iamgio/quarkdown/ast/quarkdown/block/Box.kt b/core/src/main/kotlin/eu/iamgio/quarkdown/ast/quarkdown/block/Box.kt
index 23a91052..eafd1e3c 100644
--- a/core/src/main/kotlin/eu/iamgio/quarkdown/ast/quarkdown/block/Box.kt
+++ b/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.
          */
diff --git a/core/src/main/resources/render/theme/color/darko.css b/core/src/main/resources/render/theme/color/darko.css
index 49b21f02..5e4e8b11 100644
--- a/core/src/main/resources/render/theme/color/darko.css
+++ b/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);
 }
 
diff --git a/core/src/main/resources/render/theme/global.css b/core/src/main/resources/render/theme/global.css
index c2493e02..e30016fc 100644
--- a/core/src/main/resources/render/theme/global.css
+++ b/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,9 +507,10 @@ 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;
@@ -501,20 +518,20 @@ code.focus-lines .hljs-ln-line:not(.focused),
     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 */