From a91ef365d0d4ab851f1e2e69e03a18c1ed16e6d7 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Mon, 22 Jul 2024 12:43:11 +0200
Subject: [PATCH] Theme: Style alert blocks in bthree-dark theme

Fixes #92
---
 public/assets/css/theme-bthree-dark.css |  7 +++-
 templates/custom/header.tmpl            | 43 +++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/public/assets/css/theme-bthree-dark.css b/public/assets/css/theme-bthree-dark.css
index 898a7b7..43cef3c 100644
--- a/public/assets/css/theme-bthree-dark.css
+++ b/public/assets/css/theme-bthree-dark.css
@@ -72,6 +72,7 @@
   /* Colors for buttons, labels, etc. */
   --color-red: hsl(0, 56.4%, 54.1%);
   --color-red-light: hsl(0, 56.5%, 48.6%);
+  --color-red-dark-1: hsl(3deg, 75%, 59%);
   --color-orange: hsl(23.8, 89%, 42.4%);
   --color-orange-light: hsl(23.6, 88.7%, 38%);
   --color-yellow: hsl(44.8, 97%, 40.6%);
@@ -84,8 +85,12 @@
   --color-teal-light: hsl(176.8, 100%, 26%);
   --color-blue: hsl(206, 56%, 50.2%);
   --color-blue-light: hsl(206, 55%, 45.3%);
+  --color-blue-dark-1: hsl(213deg, 89%, 64%);
+  --color-blue-dark-bg: hsla(213deg, 89%, 64%, .15);
   --color-violet: hsl(259.2, 66.5%, 65%);
   --color-violet-light: hsl(259.1, 66.2%, 58%);
+  --color-violet-dark-1: hsl(262deg, 66%, 66%);
+  --color-violet-dark-bg: hsla(262deg, 66%, 66%, .15);
   --color-purple: hsl(285, 55.9%, 58%);
   --color-purple-light: hsl(285, 55.6%, 52%);
   --color-pink: hsl(326, 64.6%, 50.2%);
@@ -128,7 +133,7 @@
   --color-warning-text: hsl(44.7, 96.8%, 50.8%);
   --color-info-border: hsl(210, 50%, 37.6%);
   --color-info-bg: hsl(216.3, 33.3%, 22.4%);
-  --color-info-text: hsl(201.8, 79.3%, 56.5%);
+  --color-info-text: hsl(213deg, 89%, 64%);
 
   --color-body: #202327;
 
diff --git a/templates/custom/header.tmpl b/templates/custom/header.tmpl
index 98dac47..a82c776 100644
--- a/templates/custom/header.tmpl
+++ b/templates/custom/header.tmpl
@@ -120,6 +120,49 @@
   .restructuredtext section dl dt {
     font-style: normal;
   }
+
+  /* Alert blocks. */
+  blockquote.attention-note {
+    background-color: var(--color-info-bg);
+    border-left-color: var(--color-blue-dark-1);
+  }
+  strong.attention-note, span.attention-note {
+    color: var(--color-blue-dark-1);
+  }
+
+  blockquote.attention-tip {
+    background-color: var(--color-success-bg);
+    border-left-color: var(--color-success-text);
+  }
+  strong.attention-tip, span.attention-tip {
+    color: var(--color-success-text);
+  }
+
+  blockquote.attention-important {
+    background-color: var(--color-violet-dark-bg);
+    border-left-color: var(--color-violet-dark-1);
+  }
+
+  strong.attention-important, span.attention-important {
+    color: var(--color-violet-dark-1);
+  }
+
+  blockquote.attention-warning {
+    background-color: var(--color-warning-bg);
+    border-left-color: var(--color-warning-text);
+  }
+
+  strong.attention-warning, span.attention-warning {
+    color: var(--color-warning-text);
+  }
+
+  blockquote.attention-caution {
+    background-color: var(--color-error-bg);
+    border-left-color: var(--color-red-dark-1);
+  }
+  strong.attention-caution, span.attention-caution {
+    color: var(--color-red-dark-1);
+  }
 </style>
 
 <script defer data-domain="projects.blender.org" src="https://analytics.blender.org/js/script.js"></script>