From 9f82e6e0415ad0ce3704a7cd7a057de6938fd474 Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Tue, 5 Dec 2023 17:30:58 -0500
Subject: [PATCH] accurate colors

---
 emanote/default/templates/base.tpl            | 24 +++++++++++++------
 emanote/default/templates/filters/callout.tpl |  3 ++-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/emanote/default/templates/base.tpl b/emanote/default/templates/base.tpl
index e896e2740..829ae0b71 100644
--- a/emanote/default/templates/base.tpl
+++ b/emanote/default/templates/base.tpl
@@ -41,34 +41,44 @@
     }
 
     .callout[data-callout="note"] {
-      background-color: rgba(8, 109, 221, 0.1);
+      --callout-color: 8, 109, 221;
+    }
+
+    .callout[data-callout="info"] {
+      --callout-color: 8, 109, 221;
     }
 
     .callout[data-callout="tip"] {
-      background-color: rgba(0, 191, 188, 0.1)
+      --callout-color: 8, 191, 188;
     }
 
     .callout[data-callout="warning"] {
-      background-color: rgba(236, 117, 0, 0.1);
+      --callout-color: 236, 117, 0;
     }
 
     .callout[data-callout="failure"] {
-      background-color: rgba(233, 49, 71, 0.1);
+      --callout-color: 233, 49, 71;
+    }
+
+    div.callout {
+      background-color: rgba(var(--callout-color), 0.1);
+    }
+
+    .callout .callout-title {
+      color: rgb(var(--callout-color));
     }
 
     div.callout-title {
       display: flex;
       align-items: center;
       margin-bottom: 0.5em;
-      font-variation-settings: 'wght' 500;
+      font-variation-settings: 'wght' 600;
     }
 
     div.callout-title div.callout-title-inner {
       margin-left: 0.5em;
     }
 
-    div.callout-content {}
-
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
diff --git a/emanote/default/templates/filters/callout.tpl b/emanote/default/templates/filters/callout.tpl
index a136dadd4..d9fd03b52 100644
--- a/emanote/default/templates/filters/callout.tpl
+++ b/emanote/default/templates/filters/callout.tpl
@@ -1,4 +1,5 @@
-<div data-callout-metadata="" data-callout-fold="" data-callout="${callout:type}" class="callout">
+<div data-callout-metadata="" data-callout-fold="" data-callout="${callout:type}"
+  class="callout bg-opacity-10">
   <path
     d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z">
   </path>