From 93d353528fa1a85b67e3f1e9514ed2a1b42dfd94 Mon Sep 17 00:00:00 2001
From: Nate Moore <natemoo-re@users.noreply.github.com>
Date: Fri, 5 Apr 2024 17:39:24 -0500
Subject: [PATCH] Improve dev toolbar notification contrast on hover (#10657)

* fix(#10399, PLT-1786): improve notification contrast on hover

* chore: add changeset
---
 .changeset/loud-wasps-pay.md                              | 5 +++++
 .../astro/src/runtime/client/dev-toolbar/entrypoint.ts    | 6 +++---
 packages/astro/src/runtime/client/dev-toolbar/toolbar.ts  | 8 +++++++-
 3 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/loud-wasps-pay.md

diff --git a/.changeset/loud-wasps-pay.md b/.changeset/loud-wasps-pay.md
new file mode 100644
index 000000000000..60411aa01323
--- /dev/null
+++ b/.changeset/loud-wasps-pay.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Improves the color contrast for notification badges on dev toolbar apps
diff --git a/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
index f115decf0676..bb69254385f0 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
@@ -65,10 +65,10 @@ document.addEventListener('DOMContentLoaded', async () => {
 	const notificationLevels = ['error', 'warning', 'info'] as const;
 	const notificationSVGs: Record<(typeof notificationLevels)[number], string> = {
 		error:
-			'<svg viewBox="0 0 10 10"><rect width="9" height="9" x=".5" y=".5" fill="#B33E66" stroke="#13151A" rx="4.5"/></svg>',
+			'<svg viewBox="0 0 10 10" style="--fill:var(--fill-default);--fill-default:#B33E66;--fill-hover:#E3AFC1;"><rect width="9" height="9" x=".5" y=".5" fill="var(--fill)" stroke="#13151A" stroke-width="2" rx="4.5"/></svg>',
 		warning:
-			'<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" fill="none"><path fill="#B58A2D" stroke="#13151A" d="M7.29904 1.25c-.57735-1-2.02073-1-2.59808 0l-3.4641 6C.65951 8.25 1.3812 9.5 2.5359 9.5h6.9282c1.1547 0 1.8764-1.25 1.299-2.25l-3.46406-6Z"/></svg>',
-		info: '<svg viewBox="0 0 10 10"><rect width="9" height="9" x=".5" y=".5" fill="#3645D9" stroke="#13151A" rx="1.5"/></svg>',
+			'<svg width="12" height="10" fill="none" style="--fill:var(--fill-default);--fill-default:#B58A2D;--fill-hover:#D5B776;"><path fill="var(--fill)" stroke="#13151A" stroke-width="2" d="M7.29904 1.25c-.57735-1-2.02073-1-2.59808 0l-3.4641 6C.65951 8.25 1.3812 9.5 2.5359 9.5h6.9282c1.1547 0 1.8764-1.25 1.299-2.25l-3.46406-6Z"/></svg>',
+		info: '<svg viewBox="0 0 10 10" style="--fill:var(--fill-default);--fill-default:#3645D9;--fill-hover:#BDC3FF;"><rect width="9" height="9" x=".5" y=".5" fill="var(--fill)" stroke="#13151A" stroke-width="2" rx="1.5"/></svg>',
 	} as const;
 
 	const prepareApp = (appDefinition: DevToolbarAppDefinition, builtIn: boolean): DevToolbarApp => {
diff --git a/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
index 33142b8f61cd..cc14d7c53566 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
@@ -189,8 +189,14 @@ export class AstroDevToolbar extends HTMLElement {
 				}
 			}
 
+			#dev-bar #bar-container .item:hover .notification rect, #dev-bar #bar-container .item:hover .notification path {
+				stroke: #38393D;
+				--fill: var(--fill-hover);
+			}
+
 			#dev-bar #bar-container .item.active .notification rect, #dev-bar #bar-container .item.active .notification path {
-				stroke: rgba(71, 78, 94, 1);
+				stroke: #454C5C;
+				--fill: var(--fill-hover);
 			}
 
 			#dev-bar .item .icon {