Christoph/GitLite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases 46 Wiki Activity

refactor(dialogs): add unified dialog header chrome and opt-in markup

Browse Source 
Introduce a shared dialog header style (.unified-dialog-header) in app.css and opt dialog components into the new chrome by updating their header markup. Headers now use unified-dialog-icon and unified-dialog-text elements (and import the matching Lucide icons where needed), which standardizes icon placement, title/eyebrow layout, close button styling and responsive behavior. The Command Palette layout was adjusted to include the new header and its grid rows.

The CSS is explicitly opt-in (so page/section headers remain unchanged) and includes hover/focus styles and a theme-sensitive close color variable. This commit is a UI refactor only — no API or behavior logic changes.
This commit is contained in:
Christoph
2026-09-11 22:50:31 +02:00
parent 98719bea4a
commit d26d2ac982
36 changed files with 202 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+78
View File
@@ -9095,3 +9095,81 @@ section > header.page-header.page-header {
line-height: 20px;
letter-spacing: normal;
}
/* Shared dialog chrome. Explicit opt-in keeps page and section headers intact. */
:root [class].unified-dialog-header {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: flex-start;
gap: 12px;
min-height: 70px;
height: auto;
padding: 14px 18px;
margin: 0;
border: 0;
border-bottom: 1px solid var(--color-border-subtle);
border-radius: 0;
background: var(--app-dialog-chrome);
color: var(--color-ink);
box-shadow: none;
}
:root .unified-dialog-header .unified-dialog-heading {
display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0;
}
:root .unified-dialog-header .unified-dialog-icon {
display: grid; place-items: center; flex: 0 0 38px;
width: 38px; height: 38px; min-width: 38px; min-height: 38px;
padding: 0; margin: 0; order: -1;
border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
border-radius: 0; color: var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 9%, transparent);
box-shadow: none;
}
:root .unified-dialog-header .unified-dialog-icon svg { width: 18px; height: 18px; color: inherit; }
:root .unified-dialog-header .unified-dialog-text {
display: flex; flex-direction: column; justify-content: center; gap: 3px;
flex: 1 1 auto; min-width: 0; margin: 0;
}
:root .unified-dialog-header .unified-dialog-text :is(h2,h3,.dialog-title,strong) {
order: 0; margin: 0; padding: 0; min-width: 0;
color: var(--color-ink); font-size: 18px; font-weight: 500; line-height: 1.25;
letter-spacing: normal; text-transform: none; white-space: normal; overflow-wrap: anywhere;
}
:root .unified-dialog-header .unified-dialog-text :is(p:not(.dialog-title),.eyebrow,.patch-scope,.file-history-dialog-path,.cred-hero-label) {
order: 1; margin: 0; padding: 0; min-width: 0;
color: var(--color-ink-muted); font-size: 11px; font-weight: 400; line-height: 1.4;
letter-spacing: normal; text-transform: none; overflow-wrap: anywhere;
}
:root .unified-dialog-header :is(.dialog-header-actions,.header-actions,.issue-detail-header-actions,.detail-header-actions) {
display: flex; align-items: center; flex: 0 0 auto; gap: 8px; margin-left: auto;
}
:root .unified-dialog-header :is(.dialog-close,.dialog-icon-button,.help-close,.cred-close,[data-dialog-close]) {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 32px; width: 32px; height: 32px; min-width: 32px; min-height: 32px;
padding: 0; margin: 0 0 0 auto; border: 1px solid var(--color-border-subtle);
border-radius: 0; background: var(--color-surface); color: var(--color-ink-muted);
box-shadow: none; transform: none;
}
:root .unified-dialog-header :is(.dialog-close,.dialog-icon-button,.help-close,.cred-close,[data-dialog-close]) svg { width: 18px; height: 18px; }
:root .unified-dialog-header :is(.dialog-close,.dialog-icon-button,.help-close,.cred-close,[data-dialog-close]):is(:hover,:focus-visible):not(:disabled):not([aria-disabled="true"]) {
color: var(--color-ink); background: var(--color-surface-hover); border-color: var(--color-border-input);
}
:root .unified-dialog-header :is(.dialog-close,.dialog-icon-button,.help-close,.cred-close,[data-dialog-close]):focus-visible {
outline: 2px solid var(--color-accent); outline-offset: 2px;
}
@media(max-width:600px) {
:root [class].unified-dialog-header { padding: 12px; gap: 10px; min-height: 64px; flex-wrap: wrap; }
:root .unified-dialog-header .unified-dialog-heading { gap: 10px; }
:root .unified-dialog-header .unified-dialog-text :is(h2,h3,.dialog-title,strong) { font-size: 16px; }
:root .unified-dialog-header .help-search { order: 2; flex: 1 0 100%; width: 100%; max-width: none; }
}
:root .cred-hero:has(> .unified-dialog-header) { padding: 0 0 14px; background: var(--app-dialog-bg); }
:root .cred-hero:has(> .unified-dialog-header) > :is(.cred-hero-copy,.cred-security-note) { margin: 12px 18px 0; }
:root { --dialog-close-hover-ink: #f0646d; }
:root[data-theme="light"] { --dialog-close-hover-ink: #b4232f; }
:root .unified-dialog-header :is(.dialog-close,.dialog-icon-button,.help-close,.cred-close,[data-dialog-close]):hover:not(:disabled):not([aria-disabled="true"]) {
color: var(--dialog-close-hover-ink);
border-color: var(--dialog-close-hover-ink);
background: color-mix(in srgb, var(--dialog-close-hover-ink) 12%, var(--app-dialog-chrome));
}