Skip to content

Commit

Permalink
Improve dev toolbar notification contrast on hover (#10657)
Browse files Browse the repository at this point in the history
* fix(#10399, PLT-1786): improve notification contrast on hover

* chore: add changeset
  • Loading branch information
natemoo-re authored Apr 5, 2024
1 parent 8214bac commit 93d3535
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 4 deletions.
5 changes: 5 additions & 0 deletions .changeset/loud-wasps-pay.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"astro": patch
---

Improves the color contrast for notification badges on dev toolbar apps
6 changes: 3 additions & 3 deletions packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
8 changes: 7 additions & 1 deletion packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 93d3535

Please sign in to comment.