Skip to content

Agentic UI: Improve site menu button and dropdown contrast #4227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bcotrim merged 4 commits into from
Jul 17, 2026
Merged

Agentic UI: Improve site menu button and dropdown contrast #4227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c3853b3
Improve site menu button and dropdown contrast and consistency
bcotrim Jul 16, 2026
e74ba41
Fix brand and error text contrast on the inverted site dropdown surface
bcotrim Jul 16, 2026
7bc0c9a
Merge branch 'trunk' into mognet/stu-1989-site-menu-button-contrast
bcotrim Jul 16, 2026
87cbcd7
Merge branch 'trunk' into mognet/stu-1989-site-menu-button-contrast
bcotrim Jul 17, 2026
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 41 additions & 43 deletions apps/ui/src/components/site-dropdown/dropdown-trigger.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,14 @@
.trigger {
--site-menu-border: color-mix(
in srgb,
var(--wpds-color-stroke-surface-neutral) 45%,
transparent
);
--site-menu-border-active: color-mix(
in srgb,
var(--wpds-color-stroke-surface-neutral) 70%,
transparent
);
--site-menu-resting-fill: color-mix(
in srgb,
var(--wpds-color-bg-surface-neutral) 96%,
transparent
);
--site-dropdown-radius: var(--wpds-border-radius-lg);
--site-menu-active-fill: var(--wpds-color-bg-interactive-neutral-strong);
--site-menu-resting-fill: var(--wpds-color-bg-interactive-neutral-strong-active);
--site-menu-foreground: var(--wpds-color-fg-interactive-neutral-strong);
--wp-ui-button-background-color: var(--site-menu-resting-fill);
--wp-ui-button-background-color-active: color-mix(
in srgb,
var(--wpds-color-bg-surface-neutral) 100%,
transparent
);
--wp-ui-button-border-color: var(--site-menu-border);
--wp-ui-button-border-color-active: var(--site-menu-border-active);
--wp-ui-button-background-color-active: var(--site-menu-active-fill);
--wp-ui-button-border-color: transparent;
--wp-ui-button-border-color-active: transparent;
--wp-ui-button-foreground-color: var(--site-menu-foreground);
--wp-ui-button-foreground-color-active: var(--site-menu-foreground);
--wp-ui-button-height: 44px;
--wp-ui-button-padding-block: 0;
--wp-ui-button-padding-inline: 0;
Expand All @@ -33,11 +20,21 @@
align-items: center;
backdrop-filter: blur(20px) saturate(115%);
-webkit-backdrop-filter: blur(20px) saturate(115%);
border-width: 0;
border-radius: var(--site-dropdown-radius);
box-shadow: 0 8px 18px rgb(0 0 0 / 18%);
color: var(--site-menu-foreground);
overflow: hidden;
padding-inline: 0 12px;
white-space: nowrap;
}

/* Non-floating placements (regular header rows) drop the floating-card
shadow. */
.trigger.triggerFlat {
box-shadow: none;
}

.siteIconWrap {
position: relative;
display: inline-flex;
Expand Down Expand Up @@ -71,6 +68,7 @@
.site {
flex: 0 1 auto;
min-width: 0;
color: var(--site-menu-foreground);
overflow: hidden;
font-weight: 600;
line-height: var(--wpds-typography-line-height-sm);
Expand All @@ -84,10 +82,10 @@
gap: 5px;
max-width: 100%;
min-width: 0;
color: var(--wpds-color-fg-content-neutral-weak);
font-size: var(--wpds-typography-font-size-xs);
font-weight: 400;
line-height: 1.1;
color: color-mix(in srgb, var(--site-menu-foreground) 78%, transparent);
font-size: 11px;
font-weight: 350;
line-height: 1.05;
}

.secondaryLabel {
Expand All @@ -97,28 +95,28 @@
white-space: nowrap;
}

.secondaryMarker {
width: 6px;
height: 6px;
border-radius: 999px;
flex: 0 0 auto;
background: currentColor;
}

.secondary_pending {
color: var(--wpds-color-fg-interactive-brand);
}

.secondary_pending .secondaryMarker {
animation: siteDotBlink 1s ease-in-out infinite;
color: color-mix(
in srgb,
var(--site-menu-foreground) 70%,
var(--wpds-color-fg-interactive-brand)
);
}

.secondary_success {
color: var(--wpds-color-fg-content-success, var(--wpds-color-fg-content-neutral));
color: color-mix(
in srgb,
var(--site-menu-foreground) 72%,
var(--wpds-color-fg-content-success, var(--site-menu-foreground))
);
}

.secondary_error {
color: var(--wpds-color-fg-content-error, var(--wpds-color-fg-content-neutral));
color: color-mix(
in srgb,
var(--site-menu-foreground) 72%,
var(--wpds-color-fg-content-error, var(--site-menu-foreground))
);
}

.statusBadge {
Expand All @@ -136,7 +134,7 @@
right: -4px;
bottom: 8px;
z-index: 1;
box-shadow: 0 0 0 2px var(--wpds-color-bg-surface-neutral-strong);
box-shadow: 0 0 0 2px var(--site-menu-resting-fill);
}

.statusBadge_live {
Expand Down Expand Up @@ -234,6 +232,6 @@

.chevron {
flex: 0 0 auto;
color: var(--wpds-color-fg-content-neutral-weak);
color: color-mix(in srgb, var(--site-menu-foreground) 72%, transparent);
fill: currentColor;
}
6 changes: 5 additions & 1 deletion apps/ui/src/components/site-dropdown/dropdown-trigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ type Props = Omit< ComponentProps< typeof Button >, 'children' > & {
showStatus?: boolean;
siteIconSeed?: string;
siteIconImage?: string | null;
// The floating-card shadow suits placements where the trigger overlays
// panel content (the chat header); regular header rows pass false.
floating?: boolean;
};

export const DropdownTrigger = forwardRef< ElementRef< typeof Button >, Props >(
Expand All @@ -38,6 +41,7 @@ export const DropdownTrigger = forwardRef< ElementRef< typeof Button >, Props >(
showStatus = true,
siteIconSeed,
siteIconImage,
floating = true,
className,
...props
},
Expand Down Expand Up @@ -78,7 +82,7 @@ export const DropdownTrigger = forwardRef< ElementRef< typeof Button >, Props >(
<Tooltip.Trigger
ref={ ref }
render={ <Button variant="minimal" tone="neutral" { ...props } /> }
className={ clsx( styles.trigger, className ) }
className={ clsx( styles.trigger, ! floating && styles.triggerFlat, className ) }
>
{ showSiteIcon ? (
<span className={ styles.siteIconWrap }>
Expand Down
5 changes: 5 additions & 0 deletions apps/ui/src/components/site-dropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,17 @@ type Props = {
activeEnvironment?: 'local' | 'live';
showSiteIcon?: boolean;
showStatus?: boolean;
// The trigger casts a shadow when it floats over panel content (the chat
// header). Pass false where it sits in a regular header row instead.
floating?: boolean;
};

export function SiteDropdown( {
site,
activeEnvironment = 'local',
showSiteIcon = false,
showStatus = true,
floating = true,
}: Props ) {
const [ view, setView ] = useState< 'main' | 'picker' >( 'main' );
const [ menuOpen, setMenuOpen ] = useState( false );
Expand Down Expand Up @@ -85,6 +89,7 @@ export function SiteDropdown( {
<Menu.Trigger
render={
<DropdownTrigger
floating={ floating }
siteName={ site.name }
siteUrl={ getSiteDisplayUrl( site ) }
status={ status }
Expand Down
59 changes: 20 additions & 39 deletions apps/ui/src/components/site-dropdown/main-view.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@
}

.activityErrorTitle {
color: var(--wpds-color-fg-content-error, var(--wpds-color-fg-content-neutral));
color: color-mix(
in srgb,
var(--site-dropdown-menu-foreground, var(--wpds-color-fg-content-neutral)) 72%,
var(--wpds-color-fg-content-error, var(--wpds-color-fg-content-neutral))
);
font-weight: 600;
}

Expand All @@ -39,9 +43,20 @@
gap: 2px;
}

/* Derived from the popup's remapped tokens so the control tracks the
inverted menu surface in both color schemes; scheme media queries
would key off the OS instead and land backwards here. */
.localServerControl {
--local-server-track-bg: var(--wpds-color-bg-track-neutral-weak);
--local-server-track-bg-hover: var(--wpds-color-bg-track-neutral);
--local-server-track-bg: color-mix(
in srgb,
var(--wpds-color-fg-content-neutral) 14%,
transparent
);
--local-server-track-bg-hover: color-mix(
in srgb,
var(--wpds-color-fg-content-neutral) 22%,
transparent
);
--local-server-track-border: color-mix(
in srgb,
var(--wpds-color-stroke-surface-neutral) 72%,
Expand All @@ -53,8 +68,8 @@
var(--wpds-color-fg-content-neutral) 6%,
transparent
);
--local-server-thumb-bg: var(--wpds-color-bg-surface-neutral-strong);
--local-server-thumb-color: var(--wpds-color-fg-content-neutral-weak);
--local-server-thumb-bg: var(--wpds-color-fg-content-neutral);
--local-server-thumb-color: var(--wpds-color-bg-surface-neutral-strong);
--local-server-thumb-ring: color-mix(
in srgb,
var(--wpds-color-stroke-surface-neutral) 52%,
Expand Down Expand Up @@ -185,40 +200,6 @@
clip-path: polygon(28% 18%, 28% 82%, 82% 50%);
}

@media (prefers-color-scheme: dark) {
.localServerControl:not(.localServerControl_running) {
--local-server-track-bg: var(--wpds-color-bg-track-neutral-weak);
--local-server-track-bg-hover: var(--wpds-color-bg-track-neutral);
--local-server-track-border: color-mix(
in srgb,
var(--wpds-color-fg-content-neutral) 10%,
transparent
);
--local-server-track-border-hover: color-mix(
in srgb,
var(--wpds-color-fg-content-neutral) 14%,
transparent
);
--local-server-track-shadow: color-mix(in srgb, black 26%, transparent);
--local-server-thumb-bg: color-mix(
in srgb,
var(--wpds-color-bg-track-neutral) 88%,
var(--wpds-color-fg-content-neutral) 12%
);
--local-server-thumb-color: color-mix(
in srgb,
var(--wpds-color-fg-content-neutral) 76%,
transparent
);
--local-server-thumb-ring: color-mix(
in srgb,
var(--wpds-color-fg-content-neutral) 10%,
transparent
);
--local-server-thumb-shadow: color-mix(in srgb, black 38%, transparent);
}
}

.urlLink {
display: inline-flex;
align-items: center;
Expand Down
80 changes: 80 additions & 0 deletions apps/ui/src/components/site-dropdown/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,88 @@
min-width: 0;
}

/* The menu renders on the same inverted surface as the trigger, so the two
read as one connected control. Remapping the wpds tokens locally lets the
existing token-based row styles adapt without per-element overrides. */
.popup {
--site-dropdown-radius: var(--wpds-border-radius-lg);
--site-dropdown-menu-surface: var(--wpds-color-bg-interactive-neutral-strong-active);
--site-dropdown-menu-surface-subtle: color-mix(
in srgb,
var(--site-dropdown-menu-foreground) 7%,
var(--site-dropdown-menu-surface)
);
--site-dropdown-menu-surface-active: color-mix(
in srgb,
var(--site-dropdown-menu-foreground) 13%,
var(--site-dropdown-menu-surface)
);
--site-dropdown-menu-foreground: var(--wpds-color-fg-interactive-neutral-strong);
--site-dropdown-menu-foreground-weak: color-mix(
in srgb,
var(--site-dropdown-menu-foreground) 72%,
transparent
);
--site-dropdown-menu-foreground-disabled: color-mix(
in srgb,
var(--site-dropdown-menu-foreground) 38%,
transparent
);
--site-dropdown-menu-divider: color-mix(
in srgb,
var(--site-dropdown-menu-foreground) 16%,
transparent
);
--site-dropdown-menu-border: color-mix(
in srgb,
var(--site-dropdown-menu-foreground) 11%,
transparent
);
--site-dropdown-menu-control-border: color-mix(
in srgb,
var(--site-dropdown-menu-foreground) 48%,
transparent
);
--site-dropdown-menu-control-border-active: color-mix(
in srgb,
var(--site-dropdown-menu-foreground) 68%,
transparent
);
--site-dropdown-menu-hover: var(--site-dropdown-menu-surface-active);
/* Brand fg flips with the theme while this surface is theme-inverted, so
derive a link blue from the constant brand fill instead: periwinkle on
the dark surface, royal navy on the light one. */
--site-dropdown-menu-brand: color-mix(
in srgb,
var(--wpds-color-bg-interactive-brand-strong, #3858e9) 65%,
var(--site-dropdown-menu-foreground)
);
--wpds-color-bg-surface-neutral: var(--site-dropdown-menu-surface-subtle);
--wpds-color-bg-surface-neutral-strong: var(--site-dropdown-menu-surface);
--wpds-color-bg-interactive-neutral-weak: transparent;
--wpds-color-bg-interactive-neutral-weak-active: var(--site-dropdown-menu-hover);
--wpds-color-bg-interactive-brand-weak-active: var(--site-dropdown-menu-hover);
--wpds-color-fg-interactive-brand: var(--site-dropdown-menu-brand);
--wpds-color-fg-content-neutral: var(--site-dropdown-menu-foreground);
--wpds-color-fg-content-neutral-weak: var(--site-dropdown-menu-foreground-weak);
--wpds-color-fg-interactive-neutral: var(--site-dropdown-menu-foreground);
--wpds-color-fg-interactive-neutral-active: var(--site-dropdown-menu-foreground);
--wpds-color-fg-interactive-neutral-disabled: var(--site-dropdown-menu-foreground-disabled);
--wpds-color-stroke-focus-brand: var(--site-dropdown-menu-control-border-active);
--wpds-color-stroke-interactive-neutral: var(--site-dropdown-menu-control-border);
--wpds-color-stroke-interactive-neutral-active: var(
--site-dropdown-menu-control-border-active
);
--wpds-color-stroke-surface-neutral: var(--site-dropdown-menu-divider);
--wpds-color-stroke-surface-neutral-weak: var(--site-dropdown-menu-border);

width: min(336px, calc(100vw - 32px));
padding: 0;
border: var(--wpds-border-width-xs) solid var(--site-dropdown-menu-border);
border-radius: var(--site-dropdown-radius);
background: var(--site-dropdown-menu-surface);
color: var(--site-dropdown-menu-foreground);
gap: 0;
overflow: visible;
box-shadow: 0 18px 44px rgb(0 0 0 / 24%);
}
6 changes: 1 addition & 5 deletions apps/ui/src/components/site-settings-view/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,11 +86,7 @@ function SettingsHeader( { site }: { site: SiteDetails } ) {
return (
<div className={ styles.header }>
{ toggleSpacerClass ? <span className={ toggleSpacerClass } aria-hidden="true" /> : null }
<SiteDropdown
site={ site }
showSiteIcon={ sidebarCollapsed }
showStatus={ sidebarCollapsed }
/>
<SiteDropdown site={ site } showSiteIcon showStatus={ sidebarCollapsed } />
</div>
);
}
Expand Down
Loading