From 572b6dab6af1d2bbcc9e9219a4c1e5783d70fe57 Mon Sep 17 00:00:00 2001
From: Eric Holscher <eric@ericholscher.com>
Date: Tue, 18 Feb 2025 16:23:57 -0800
Subject: [PATCH 1/3] Match notification style with flyout

Refs https://github.com/readthedocs/ext-theme/pull/564#issuecomment-2657003600
---
 src/notification.css | 52 +++++++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/notification.css b/src/notification.css
index cbc358ad..089ad10d 100644
--- a/src/notification.css
+++ b/src/notification.css
@@ -3,6 +3,26 @@
     --readthedocs-notification-font-size,
     var(--readthedocs-font-size, 1rem)
   );
+  --addons-notification-color: var(
+    --readthedocs-notification-color,
+    rgb(252, 252, 252)
+  );
+  --addons-notification-background-color: var(
+    --readthedocs-notification-background-color,
+    rgb(39, 39, 37)
+  );
+  --addons-notification-link-color: var(
+    --readthedocs-notification-link-color,
+    rgb(42, 128, 185)
+  );
+  --addons-notification-title-color: var(
+    --readthedocs-notification-title-color,
+    rgb(96, 96, 96)
+  );
+  --addons-notification-title-background-color: var(
+    --readthedocs-notification-title-background-color,
+    rgb(224, 224, 224)
+  );
 }
 
 :host > div {
@@ -20,11 +40,8 @@
     "sans-serif"
   );
   font-size: var(--addons-notification-font-size);
-  color: var(--readthedocs-notification-color, rgb(64, 64, 64));
-  background-color: var(
-    --readthedocs-notification-background-color,
-    rgb(234, 234, 234)
-  );
+  color: var(--addons-notification-color);
+  background-color: var(--addons-notification-background-color);
 }
 
 :host(.floating) > div {
@@ -88,20 +105,17 @@
 }
 
 :host(.inverted) > div {
-  color: var(--readthedocs-notification-color, rgb(234, 234, 234));
-  background-color: var(
-    --readthedocs-notification-background-color,
-    rgb(64, 64, 64)
-  );
+  color: var(--addons-notification-color);
+  background-color: var(--addons-notification-background-color);
 }
 
 :host > div a {
-  color: var(--readthedocs-notification-link-color, rgb(8, 140, 219));
+  color: var(--addons-notification-link-color);
   text-decoration: none;
 }
 
 :host(.inverted) > div a {
-  color: var(--readthedocs-notification-link-color, rgb(134, 203, 243));
+  color: var(--addons-notification-link-color);
 }
 
 :host > div > .title {
@@ -126,11 +140,8 @@
   padding: 0.1rem var(--addons-notification-font-size);
   line-height: calc(var(--addons-notification-font-size) * 2);
   border-radius: 0.5rem 0.5rem 0 0;
-  color: var(--readthedocs-notification-title-color, rgb(96, 96, 96));
-  background-color: var(
-    --readthedocs-notification-title-background-color,
-    rgb(224, 224, 224)
-  );
+  color: var(--addons-notification-title-color);
+  background-color: var(--addons-notification-title-background-color);
   vertical-align: middle;
   font-weight: bold;
 }
@@ -141,14 +152,11 @@
 }
 
 :host(.inverted) > div > .title {
-  color: var(--readthedocs-notification-title-color, rgba(255, 255, 255, 0.9));
+  color: var(--addons-notification-title-color);
 }
 
 :host(.inverted.titled) > div > .title {
-  background-color: var(
-    --readthedocs-notification-title-background-color,
-    rgb(48, 48, 48)
-  );
+  background-color: var(--addons-notification-title-background-color);
 }
 
 :host > div > .title > .right {

From a5eb0fdf733366fcdd2f3da3a2ce4ef585d24f33 Mon Sep 17 00:00:00 2001
From: Eric Holscher <eric@ericholscher.com>
Date: Tue, 18 Feb 2025 16:37:06 -0800
Subject: [PATCH 2/3] Use light and dark

---
 src/notification.css | 28 +++++++++-------------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/notification.css b/src/notification.css
index 089ad10d..819e96a2 100644
--- a/src/notification.css
+++ b/src/notification.css
@@ -3,14 +3,8 @@
     --readthedocs-notification-font-size,
     var(--readthedocs-font-size, 1rem)
   );
-  --addons-notification-color: var(
-    --readthedocs-notification-color,
-    rgb(252, 252, 252)
-  );
-  --addons-notification-background-color: var(
-    --readthedocs-notification-background-color,
-    rgb(39, 39, 37)
-  );
+  --addons-notification-light-color: rgb(252, 252, 252);
+  --addons-notification-dark-color: rgb(39, 39, 37);
   --addons-notification-link-color: var(
     --readthedocs-notification-link-color,
     rgb(42, 128, 185)
@@ -40,8 +34,8 @@
     "sans-serif"
   );
   font-size: var(--addons-notification-font-size);
-  color: var(--addons-notification-color);
-  background-color: var(--addons-notification-background-color);
+  color: var(--addons-notification-light-color);
+  background-color: var(--addons-notification-dark-color);
 }
 
 :host(.floating) > div {
@@ -105,8 +99,8 @@
 }
 
 :host(.inverted) > div {
-  color: var(--addons-notification-color);
-  background-color: var(--addons-notification-background-color);
+  color: var(--addons-notification-dark-color);
+  background-color: var(--addons-notification-light-color);
 }
 
 :host > div a {
@@ -114,10 +108,6 @@
   text-decoration: none;
 }
 
-:host(.inverted) > div a {
-  color: var(--addons-notification-link-color);
-}
-
 :host > div > .title {
   padding: 0.25rem var(--addons-notification-font-size);
   margin-bottom: 0.25rem;
@@ -152,11 +142,11 @@
 }
 
 :host(.inverted) > div > .title {
-  color: var(--addons-notification-title-color);
+  color: var(--addons-notification-dark-color);
 }
 
 :host(.inverted.titled) > div > .title {
-  background-color: var(--addons-notification-title-background-color);
+  background-color: var(--addons-notification-light-color);
 }
 
 :host > div > .title > .right {
@@ -173,7 +163,7 @@
 }
 
 :host(.inverted) > div > .title > .right > svg {
-  color: var(--readthedocs-notification-title-color, rgba(255, 255, 255, 0.9));
+  color: var(--addons-notification-dark-color);
 }
 :host(.titled) > div > .title > .right > svg {
   margin: 0.5rem 0rem;

From 54c0ab1e24cad8bf2cb87d962ca329e3360c6342 Mon Sep 17 00:00:00 2001
From: Eric Holscher <eric@ericholscher.com>
Date: Tue, 18 Feb 2025 16:56:22 -0800
Subject: [PATCH 3/3] Cleanup link color

---
 src/notification.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/notification.css b/src/notification.css
index 819e96a2..3ace500e 100644
--- a/src/notification.css
+++ b/src/notification.css
@@ -7,7 +7,7 @@
   --addons-notification-dark-color: rgb(39, 39, 37);
   --addons-notification-link-color: var(
     --readthedocs-notification-link-color,
-    rgb(42, 128, 185)
+    rgb(134, 203, 243)
   );
   --addons-notification-title-color: var(
     --readthedocs-notification-title-color,
@@ -108,6 +108,10 @@
   text-decoration: none;
 }
 
+:host(.inverted) > div a {
+  color: var(--addons-notification-link-color, rgb(8, 140, 219));
+}
+
 :host > div > .title {
   padding: 0.25rem var(--addons-notification-font-size);
   margin-bottom: 0.25rem;