Skip to content

fix(web): use --surface-hover token for menu and listbox elements #31273

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
ashleeradka merged 2 commits into from
May 20, 2026
Merged

fix(web): use --surface-hover token for menu and listbox elements #31273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dc81e37
fix(web): use --surface-hover token for menu and listbox elements
devin-ai-integration[bot] May 20, 2026
afca175
fix(web): also fix --ghost-hover on skill-row and skill-detail
devin-ai-integration[bot] May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/src/domains/intelligence/components/skills/skill-detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export function SkillDetail({
key={entry.path}
type="button"
onClick={() => setSelectedPath(entry.path)}
className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-body-medium-lighter transition-colors hover:bg-[var(--ghost-hover)]"
className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-body-medium-lighter transition-colors hover:bg-[var(--surface-hover)]"
style={{
color: isActive
? "var(--primary-base)"
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/domains/intelligence/components/skills/skill-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export function SkillRow({
tabIndex={0}
onClick={onSelect}
onKeyDown={handleRowKeyDown}
className="flex cursor-pointer items-center gap-4 px-5 py-4 text-left transition-colors hover:bg-[var(--ghost-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
className="flex cursor-pointer items-center gap-4 px-5 py-4 text-left transition-colors hover:bg-[var(--surface-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
>
<div className="flex h-10 w-10 shrink-0 items-center justify-center text-2xl">
{skill.emoji ?? "🧩"}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/domains/intelligence/components/skills/skills-tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -460,7 +460,7 @@ function FilterDropdown({
type="button"
aria-haspopup="listbox"
aria-expanded={open}
className="inline-flex w-40 items-center justify-between gap-2 rounded-lg border bg-[var(--surface-active)] px-3 py-2 text-body-medium-lighter transition-colors hover:bg-[var(--ghost-hover)]"
className="inline-flex w-40 items-center justify-between gap-2 rounded-lg border bg-[var(--surface-active)] px-3 py-2 text-body-medium-lighter transition-colors hover:bg-[var(--surface-hover)]"
Copy link
Copy Markdown
Contributor

@devin-ai-integration devin-ai-integration Bot May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚩 Inconsistent hover token usage within the skills domain after this change

This PR changes --ghost-hover → --surface-hover in FilterDropdown (line 463) and FilterGroup (line 544), but three sibling files in the same skills/ directory still use --ghost-hover:

  • category-sidebar.tsx:80 — hover:bg-[var(--ghost-hover)]
  • skill-row.tsx:46 — hover:bg-[var(--ghost-hover)]
  • skill-detail.tsx:184 — hover:bg-[var(--ghost-hover)]

These tokens resolve to different values: --ghost-hover is solid (e.g. #F2F0EE in light mode via --surface-active), while --surface-hover is semi-transparent (rgba(185, 180, 172, 0.08)). The visual difference is noticeable. If this is an intentional migration toward --surface-hover, CONVENTIONS.md:905-906 says "When fixing a convention violation, audit the broader codebase for the same violation and fix all instances." If the intent is design-specific (only these two components should change), the inconsistency within the same feature area is worth confirming with the designer.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

Copy link
Copy Markdown
Contributor

@devin-ai-integration devin-ai-integration Bot May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch — audited the three sibling files:

  • skill-row.tsx:46 — <div role="button"> card row → changed to --surface-hover ✓
  • skill-detail.tsx:184 — <button> file tree entry → changed to --surface-hover ✓
  • category-sidebar.tsx:80 — <Button variant="ghost"> → this IS a ghost Button, so --ghost-hover is semantically correct here. No change needed.

Pushed the fix.

style={{
borderColor: "var(--border-base)",
color: "var(--content-default)",
Expand Down Expand Up @@ -541,7 +541,7 @@ function FilterGroup({
onClick={() => onSelect(option.value)}
role="option"
aria-selected={isSelected}
className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-body-medium-lighter transition-colors hover:bg-[var(--ghost-hover)]"
className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-body-medium-lighter transition-colors hover:bg-[var(--surface-hover)]"
style={{
color: isSelected
? "var(--primary-base)"
Expand Down