Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-06 22:10:10 -05:00
Code Issues Activity

Improve dev toolbar notification contrast on hover (#10657)

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

* chore: add changeset
This commit is contained in:
Nate Moore 2024-04-05 17:39:24 -05:00 committed by GitHub
parent 8214bacfea
commit 93d353528f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/loud-wasps-pay.md Normal file
View file

@ -0,0 +1,5 @@
---
"astro": patch
---
Improves the color contrast for notification badges on dev toolbar apps

6
packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
View file

@ -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 => {

8
packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
View file

@ -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 {